hmm

components/modals/product-modal.tsx

@@ -21,6 +21,7 @@ import { toast } from "sonner";
 import type React from "react";
 import { Plus } from "lucide-react";
 import { apiRequest } from "@/lib/api";
+import { Switch } from "@/components/ui/switch";
 
 type CategorySelectProps = {
   categories: { _id: string; name: string; parentId?: string }[];
@@ -200,34 +201,54 @@ 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="grid gap-4 mb-4">
+  <div className="space-y-6">
     <div>
       <label htmlFor="name" className="text-sm font-medium">
-        Name
+        Product Name
       </label>
       <Input
         id="name"
         name="name"
-        required
-        value={productData.name || ""}
+        value={productData.name}
         onChange={handleChange}
-        placeholder="Product name"
+        placeholder="Enter product name"
       />
     </div>
-    
+
     <div>
-      <label className="text-sm font-medium">Description</label>
-      <Textarea
+      <label htmlFor="description" className="text-sm font-medium">
+        Description
+      </label>
+      <textarea
         id="description"
         name="description"
-        rows={3}
-        value={productData.description || ""}
+        value={productData.description}
         onChange={handleChange}
-        placeholder="Product description"
+        placeholder="Enter product description"
+        className="w-full min-h-[100px] rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
       />
     </div>
-    
-    {/* Stock Management Section */}
+
+    <div className="bg-background rounded-lg border border-border p-4">
+      <h3 className="text-sm font-medium mb-4">Product Status</h3>
+      
+      <div className="flex items-center space-x-2">
+        <Switch
+          id="enabled"
+          checked={productData.enabled !== false}
+          onCheckedChange={(checked) => {
+            setProductData({
+              ...productData,
+              enabled: checked
+            });
+          }}
+        />
+        <label htmlFor="enabled" className="text-sm">
+          Enable Product
+        </label>
+      </div>
+    </div>
+
     <div className="bg-background rounded-lg border border-border p-4">
       <h3 className="text-sm font-medium mb-4">Stock Management</h3>
       

components/tables/product-table.tsx

@@ -3,12 +3,14 @@ import { Edit, Trash, AlertTriangle, CheckCircle, AlertCircle } from "lucide-rea
 import { Button } from "@/components/ui/button";
 import { Product } from "@/models/products";
 import { Badge } from "@/components/ui/badge";
+import { Switch } from "@/components/ui/switch";
 
 interface ProductTableProps {
   products: Product[];
   loading: boolean;
   onEdit: (product: Product) => void;
   onDelete: (productId: string) => void;
+  onToggleEnabled: (productId: string, enabled: boolean) => void;
   getCategoryNameById: (categoryId: string) => string;
 }
 
@@ -17,6 +19,7 @@ const ProductTable = ({
   loading,
   onEdit,
   onDelete,
+  onToggleEnabled,
   getCategoryNameById
 }: ProductTableProps) => {
 
@@ -47,6 +50,7 @@ const ProductTable = ({
             <TableHead className="text-center">Category</TableHead>
             <TableHead className="text-center">Unit</TableHead>
             <TableHead className="text-center">Stock</TableHead>
+            <TableHead className="text-center">Enabled</TableHead>
             <TableHead className="text-right">Actions</TableHead>
           </TableRow>
         </TableHeader>
@@ -59,6 +63,7 @@ const ProductTable = ({
                 <TableCell>Loading...</TableCell>
                 <TableCell>Loading...</TableCell>
                 <TableCell>Loading...</TableCell>
+                <TableCell>Loading...</TableCell>
               </TableRow>
             ))
           ) : sortedProducts.length > 0 ? (
@@ -81,6 +86,12 @@ const ProductTable = ({
                     <Badge variant="outline" className="text-xs">Not Tracked</Badge>
                   )}
                 </TableCell>
+                <TableCell className="text-center">
+                  <Switch
+                    checked={product.enabled !== false}
+                    onCheckedChange={(checked) => onToggleEnabled(product._id as string, checked)}
+                  />
+                </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" />
@@ -98,7 +109,7 @@ const ProductTable = ({
             ))
           ) : (
             <TableRow>
-              <TableCell colSpan={5} className="h-24 text-center">
+              <TableCell colSpan={6} className="h-24 text-center">
                 No products found.
               </TableCell>
             </TableRow>