applying the fix

src/components/dashboard/tabs/AddProductTab.tsx

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import { useSeller } from '../../../context/SellerContext';
 
 export default function AddProductTab() {
-  const { setDashTab } = useSeller();
+  const { setDashTab, productForm, setProductForm, handleSaveProduct, isEditingProduct } = useSeller();
   
   const [imagePreview, setImagePreview] = useState<string | null>(null);
   const [isSubmitting, setIsSubmitting] = useState(false);
@@ -12,7 +12,9 @@ export default function AddProductTab() {
     if (file) {
       const reader = new FileReader();
       reader.onloadend = () => {
-        setImagePreview(reader.result as string);
+        const result = reader.result as string;
+        setImagePreview(result);
+        setProductForm({...productForm, image: result});
       };
       reader.readAsDataURL(file);
     }
@@ -21,11 +23,14 @@ export default function AddProductTab() {
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
     setIsSubmitting(true);
-    // Simulate API call and progress
+    // Call the actual API save logic
+    handleSaveProduct(e);
+    
+    // Simulate animation and redirect
     setTimeout(() => {
       setIsSubmitting(false);
       setDashTab('products');
-    }, 1500); // 1.5 seconds animation
+    }, 1500);
   };
 
   return (
@@ -38,7 +43,9 @@ export default function AddProductTab() {
           <span className="icon"><span className="material-symbols-outlined">arrow_back</span></span>
           <span>Back</span>
         </button>
-        <h1 className="title is-3 has-text-dark mb-0" style={{ fontFamily: 'Libre Caslon Text, serif' }}>Add New Product</h1>
+        <h1 className="title is-3 has-text-dark mb-0" style={{ fontFamily: 'Libre Caslon Text, serif' }}>
+          {isEditingProduct ? 'Edit Product' : 'Add New Product'}
+        </h1>
       </div>
 
       <div className="box" style={{ borderTop: '4px solid var(--bulma-primary)' }}>
@@ -50,7 +57,7 @@ export default function AddProductTab() {
               <div className="field mb-4">
                 <label className="label has-text-grey-dark">Product Title</label>
                 <div className="control">
-                  <input className="input" type="text" placeholder="e.g. Handwoven Silk Scarf" required />
+                  <input className="input" type="text" placeholder="e.g. Handwoven Silk Scarf" required value={productForm.title} onChange={e => setProductForm({...productForm, title: e.target.value})} />
                 </div>
               </div>
 
@@ -66,7 +73,7 @@ export default function AddProductTab() {
                   <div className="field mb-4">
                     <label className="label has-text-grey-dark">Price (INR)</label>
                     <div className="control has-icons-left">
-                      <input className="input" type="number" placeholder="0.00" step="0.01" required />
+                      <input className="input" type="number" placeholder="0.00" step="0.01" required value={productForm.price || ''} onChange={e => setProductForm({...productForm, price: Number(e.target.value)})} />
                       <span className="icon is-small is-left">
                         <span className="material-symbols-outlined">currency_rupee</span>
                       </span>
@@ -77,7 +84,7 @@ export default function AddProductTab() {
                   <div className="field mb-4">
                     <label className="label has-text-grey-dark">Stock Quantity</label>
                     <div className="control has-icons-left">
-                      <input className="input" type="number" placeholder="10" min="0" required />
+                      <input className="input" type="number" placeholder="10" min="0" required value={productForm.stock || ''} onChange={e => setProductForm({...productForm, stock: Number(e.target.value)})} />
                       <span className="icon is-small is-left">
                         <span className="material-symbols-outlined">inventory_2</span>
                       </span>
@@ -126,9 +133,9 @@ export default function AddProductTab() {
                 <label className="label has-text-grey-dark">Category</label>
                 <div className="control">
                   <div className="select is-fullwidth">
-                    <select required>
+                    <select required value={productForm.category} onChange={e => setProductForm({...productForm, category: e.target.value})}>
                       <option value="">Select a category</option>
-                      <option value="textiles">Apparel & Textiles</option>
+                      <option value="Apparel">Apparel & Textiles</option>
                       <option value="jewelry">Jewelry</option>
                       <option value="pottery">Pottery</option>
                       <option value="woodwork">Woodwork</option>
@@ -153,7 +160,7 @@ export default function AddProductTab() {
               type="submit" 
               className={`button is-primary is-outlined ${isSubmitting ? 'is-loading' : ''}`}
             >
-              Publish Product
+              {isEditingProduct ? 'Save Changes' : 'Publish Product'}
             </button>
           </div>
         </form>