balls

2025-03-06 12:49:01 +00:00
parent e26069abfa
commit bc9f8ebbf9
8 changed files with 573 additions and 85 deletions
--- a/components/modals/product-modal.tsx
+++ b/components/modals/product-modal.tsx
@@ -102,15 +102,32 @@ export const ProductModal: React.FC<ProductModalProps> = ({
  };

  const handleSave = async () => {
-    if (!productData.category) {
-      toast.error("Please select or add a category");
-      return;
+    try {
+      // Validate required fields
+      if (!productData.name || !productData.category || !productData.unitType) {
+        toast.error("Please fill in all required fields");
+        return;
+      }
+
+      // Validate pricing tiers
+      if (!productData.pricing || productData.pricing.length === 0) {
+        toast.error("At least one pricing tier is required");
+        return;
+      }
+
+      // Make sure stock values are numbers
+      let stockData = { ...productData };
+      if (stockData.stockTracking) {
+        stockData.currentStock = Number(stockData.currentStock) || 0;
+        stockData.lowStockThreshold = Number(stockData.lowStockThreshold) || 10;
+      }
+
+      await onSave(stockData, selectedFile);
+      onClose();
+    } catch (error) {
+      console.error("Error saving product:", error);
+      toast.error("Failed to save product");
    }
-
-
-    onSave(productData, selectedFile);
-    toast.success(editing ? "Product updated!" : "Product added!");
-    onClose();
  };

  const handleAddCategory = (newCategory: { _id: string; name: string; parentId?: string }) => {
@@ -183,42 +200,111 @@ const ProductBasicInfo: React.FC<{
  setProductData: React.Dispatch<React.SetStateAction<ProductData>>;
  onAddCategory: (newCategory: { _id: string; name: string; parentId?: string }) => void;
 }> = ({ productData, handleChange, categories, setProductData, onAddCategory }) => (
-  <div className="space-y-4">
+  <div className="grid gap-4 mb-4">
    <div>
-      <label className="text-sm font-medium">Product Name</label>
+      <label htmlFor="name" className="text-sm font-medium">
+        Name
+      </label>
      <Input
+        id="name"
        name="name"
-        placeholder="Product Name"
-        value={productData.name}
+        required
+        value={productData.name || ""}
        onChange={handleChange}
-        className="text-sm h-9"
+        placeholder="Product name"
      />
    </div>
-
+    
    <div>
      <label className="text-sm font-medium">Description</label>
      <Textarea
+        id="description"
        name="description"
-        placeholder="Product Description"
-        value={productData.description}
+        rows={3}
+        value={productData.description || ""}
        onChange={handleChange}
-        rows={4}
-        className="text-sm h-24"
+        placeholder="Product description"
      />
    </div>
-
-    <CategorySelect
-      categories={categories}
-      value={productData.category}
-      setProductData={setProductData}
-      onAddCategory={onAddCategory}
-    />
-
-    <UnitTypeSelect
-      value={productData.unitType}
-      setProductData={setProductData}
-      categories={categories}
-    />
+    
+    {/* Stock Management Section */}
+    <div className="bg-background rounded-lg border border-border p-4">
+      <h3 className="text-sm font-medium mb-4">Stock Management</h3>
+      
+      <div className="flex items-center space-x-2 mb-4">
+        <input
+          id="stockTracking"
+          name="stockTracking"
+          type="checkbox"
+          className="h-4 w-4 rounded border-gray-300"
+          checked={productData.stockTracking !== false}
+          onChange={(e) => {
+            setProductData({
+              ...productData,
+              stockTracking: e.target.checked
+            });
+          }}
+        />
+        <label htmlFor="stockTracking" className="text-sm">
+          Enable Stock Tracking
+        </label>
+      </div>
+      
+      {productData.stockTracking !== false && (
+        <div className="grid grid-cols-2 gap-4">
+          <div>
+            <label htmlFor="lowStockThreshold" className="text-sm font-medium">
+              Low Stock Threshold
+            </label>
+            <Input
+              id="lowStockThreshold"
+              name="lowStockThreshold"
+              type="number"
+              min="1"
+              step={productData.unitType === 'gr' ? '0.1' : '1'}
+              value={productData.lowStockThreshold || 10}
+              onChange={handleChange}
+              placeholder="10"
+            />
+          </div>
+          <div>
+            <label htmlFor="currentStock" className="text-sm font-medium">
+              Current Stock
+            </label>
+            <Input
+              id="currentStock"
+              name="currentStock"
+              type="number"
+              min="0"
+              step={productData.unitType === 'gr' ? '0.1' : '1'}
+              value={productData.currentStock || 0}
+              onChange={handleChange}
+              placeholder="0"
+            />
+          </div>
+        </div>
+      )}
+    </div>
+    
+    <div className="grid grid-cols-2 gap-4">
+      <div>
+        <label className="text-sm font-medium">Category</label>
+        <CategorySelect
+          categories={categories}
+          value={productData.category}
+          setProductData={setProductData}
+          onAddCategory={onAddCategory}
+        />
+      </div>
+      <div>
+        <label className="text-sm font-medium">Unit Type</label>
+        <UnitTypeSelect
+          value={productData.unitType}
+          setProductData={setProductData}
+          categories={categories}
+        />
+      </div>
+    </div>
  </div>
 );

--- a/components/tables/product-table.tsx
+++ b/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>