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>