balls

components/tables/product-table.tsx

@@ -1,13 +1,14 @@
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
-import { Edit, Trash } from "lucide-react";
+import { Edit, Trash, AlertTriangle, CheckCircle, AlertCircle } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Product } from "@/models/products";
+import { Badge } from "@/components/ui/badge";
 
 interface ProductTableProps {
   products: Product[];
   loading: boolean;
   onEdit: (product: Product) => void;
-  onDelete: (productId: string) => void; // Added onDelete prop
+  onDelete: (productId: string) => void;
   getCategoryNameById: (categoryId: string) => string;
 }
 
@@ -24,6 +25,19 @@ const ProductTable = ({
     const categoryNameB = getCategoryNameById(b.category);
     return categoryNameA.localeCompare(categoryNameB);
   });
+
+  const getStockIcon = (product: Product) => {
+    if (!product.stockTracking) return null;
+    
+    if (product.stockStatus === 'out_of_stock') {
+      return <AlertTriangle className="h-4 w-4 text-red-500" />;
+    } else if (product.stockStatus === 'low_stock') {
+      return <AlertCircle className="h-4 w-4 text-amber-500" />;
+    } else {
+      return <CheckCircle className="h-4 w-4 text-green-500" />;
+    }
+  };
+
   return (
     <div className="rounded-lg border dark:border-zinc-700 shadow-sm overflow-hidden">
       <Table className="relative">
@@ -32,6 +46,7 @@ const ProductTable = ({
             <TableHead className="w-[200px]">Product</TableHead>
             <TableHead className="text-center">Category</TableHead>
             <TableHead className="text-center">Unit</TableHead>
+            <TableHead className="text-center">Stock</TableHead>
             <TableHead className="text-right">Actions</TableHead>
           </TableRow>
         </TableHeader>
@@ -43,31 +58,47 @@ const ProductTable = ({
                 <TableCell>Loading...</TableCell>
                 <TableCell>Loading...</TableCell>
                 <TableCell>Loading...</TableCell>
+                <TableCell>Loading...</TableCell>
               </TableRow>
             ))
           ) : 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">
-                  {getCategoryNameById(product.category)} {/* Display category name */}
+                <TableCell>
+                  <div className="font-medium truncate max-w-[180px]">{product.name}</div>
                 </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 className="text-center">{getCategoryNameById(product.category)}</TableCell>
+                <TableCell className="text-center">{product.unitType}</TableCell>
+                <TableCell className="text-center">
+                  {product.stockTracking ? (
+                    <div className="flex items-center justify-center gap-1">
+                      {getStockIcon(product)}
+                      <span className="text-sm">
+                        {product.currentStock !== undefined ? product.currentStock : 0} {product.unitType}
+                      </span>
+                    </div>
+                  ) : (
+                    <Badge variant="outline" className="text-xs">Not Tracked</Badge>
+                  )}
+                </TableCell>
+                <TableCell className="text-right flex justify-end space-x-1">
+                  <Button variant="ghost" size="sm" onClick={() => onEdit(product)}>
+                    <Edit className="h-4 w-4" />
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => onDelete(product._id as string)}
+                    className="text-red-500 hover:text-red-600 hover:bg-red-50 dark:hover:bg-red-950/20"
+                  >
+                    <Trash className="h-4 w-4" />
+                  </Button>
                 </TableCell>
               </TableRow>
             ))
           ) : (
             <TableRow>
-              <TableCell colSpan={4} className="h-24 text-center">
+              <TableCell colSpan={5} className="h-24 text-center">
                 No products found.
               </TableCell>
             </TableRow>