Refactor

components/tables/product-table.tsx

@@ -0,0 +1,75 @@
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { Edit, Trash } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Product } from "@/models/products";
+
+interface ProductTableProps {
+  products: Product[];
+  loading: boolean;
+  onEdit: (product: Product) => void;
+  onDelete: (productId: string) => void; // Added onDelete prop
+  getCategoryNameById: (categoryId: string) => string;
+}
+
+const ProductTable = ({
+  products,
+  loading,
+  onEdit,
+  onDelete,
+  getCategoryNameById
+}: ProductTableProps) => {
+  return (
+    <div className="rounded-lg border dark:border-zinc-700 shadow-sm overflow-hidden">
+      <Table className="relative">
+        <TableHeader className="bg-gray-50 dark:bg-zinc-800/50">
+          <TableRow className="hover:bg-transparent">
+            <TableHead className="w-[200px]">Product</TableHead>
+            <TableHead className="text-center">Category</TableHead>
+            <TableHead className="text-center">Unit</TableHead>
+            <TableHead className="text-right">Actions</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {loading ? (
+            Array.from({ length: 1 }).map((_, index) => (
+              <TableRow key={index}>
+                <TableCell>Loading...</TableCell>
+                <TableCell>Loading...</TableCell>
+                <TableCell>Loading...</TableCell>
+                <TableCell>Loading...</TableCell>
+              </TableRow>
+            ))
+          ) : products.length > 0 ? (
+            products.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">
+                  {getCategoryNameById(product.category)} {/* Display category name */}
+                </TableCell>
+                <TableCell className="text-center uppercase text-sm">{product.unitType}</TableCell>
+                <TableCell className="text-right">
+                  <div className="flex justify-end space-x-2">
+                    <Button size="sm" variant="ghost" onClick={() => onEdit(product)}>
+                      <Edit className="h-4 w-4" />
+                    </Button>
+                    <Button size="sm" variant="ghost" className="text-red-600 hover:text-red-700 dark:text-red-400" onClick={() => onDelete(product._id ?? "")}>
+                      <Trash className="h-4 w-4" />
+                    </Button>
+                  </div>
+                </TableCell>
+              </TableRow>
+            ))
+          ) : (
+            <TableRow>
+              <TableCell colSpan={4} className="h-24 text-center">
+                No products found.
+              </TableCell>
+            </TableRow>
+          )}
+        </TableBody>
+      </Table>
+    </div>
+  );
+};
+
+export default ProductTable;