:D

components/tables/product-table.tsx

@@ -18,6 +18,12 @@ const ProductTable = ({
   onDelete,
   getCategoryNameById
 }: ProductTableProps) => {
+
+  const sortedProducts = [...products].sort((a, b) => {
+    const categoryNameA = getCategoryNameById(a.category);
+    const categoryNameB = getCategoryNameById(b.category);
+    return categoryNameA.localeCompare(categoryNameB);
+  });
   return (
     <div className="rounded-lg border dark:border-zinc-700 shadow-sm overflow-hidden">
       <Table className="relative">
@@ -39,8 +45,8 @@ const ProductTable = ({
                 <TableCell>Loading...</TableCell>
               </TableRow>
             ))
-          ) : products.length > 0 ? (
-            products.map((product) => (
+          ) : sortedProducts.length > 0 ? (
+            sortedProducts.map((product) => (
               <TableRow key={product._id} className="transition-colors hover:bg-gray-50 dark:hover:bg-zinc-800/70">
                 <TableCell className="font-medium">{product.name}</TableCell>
                 <TableCell className="text-center">