feat: implement React bulk upload UI in ProductsTab

src/components/dashboard/tabs/ProductsTab.tsx

@@ -1,18 +1,37 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { useSeller } from '../../../context/SellerContext';
 
 export default function ProductsTab() {
-  const { setDashTab } = useSeller();
+  const { 
+    setDashTab, 
+    bulkCsvFile, setBulkCsvFile, 
+    bulkZipFile, setBulkZipFile, 
+    handleBulkUploadSubmit, 
+    isParsingBulk, 
+    bulkLog, 
+    uploadDocument 
+  } = useSeller();
+
+  const [showBulkUploadModal, setShowBulkUploadModal] = useState(false);
+
   return (
     <div>
       <div className="is-flex is-justify-content-space-between is-align-items-center mb-5">
         <h1 className="title is-3 has-text-dark mb-0" style={{ fontFamily: 'Libre Caslon Text, serif' }}>Products</h1>
         <div className="buttons">
-          <button className="button is-light" onClick={() => alert('Bulk upload coming soon!')}>
+          <button 
+            className="button" 
+            onClick={() => setShowBulkUploadModal(true)}
+            style={{ backgroundColor: 'transparent', borderColor: '#4d0218', color: '#4d0218' }}
+          >
             <span className="icon"><span className="material-symbols-outlined">upload_file</span></span>
             <span>Bulk Upload</span>
           </button>
-          <button className="button is-primary is-outlined" onClick={() => setDashTab('add-product')}>
+          <button 
+            className="button" 
+            onClick={() => setDashTab('add-product')}
+            style={{ backgroundColor: 'transparent', borderColor: '#4d0218', color: '#4d0218' }}
+          >
             <span className="icon"><span className="material-symbols-outlined">add</span></span>
             <span>Add Product</span>
           </button>
@@ -46,6 +65,64 @@ export default function ProductsTab() {
           </div>
         ))}
       </div>
+
+      <div className={`modal ${showBulkUploadModal ? 'is-active' : ''}`}>
+        <div className="modal-background" onClick={() => setShowBulkUploadModal(false)}></div>
+        <div className="modal-card">
+          <header className="modal-card-head">
+            <p className="modal-card-title">Bulk Upload Products</p>
+            <button className="delete" aria-label="close" onClick={() => setShowBulkUploadModal(false)}></button>
+          </header>
+          <section className="modal-card-body">
+            <form id="bulk-upload-form" onSubmit={handleBulkUploadSubmit}>
+              <div className="field">
+                <label className="label">Product Catalog (CSV)</label>
+                <div className="control">
+                  <input className="input" type="file" accept=".csv" onChange={(e) => setBulkCsvFile(e.target.files?.[0] || null)} required />
+                </div>
+              </div>
+              <div className="field">
+                <label className="label">Images (ZIP) - Optional</label>
+                <div className="control">
+                  <input className="input" type="file" accept=".zip" onChange={(e) => setBulkZipFile(e.target.files?.[0] || null)} />
+                </div>
+              </div>
+              <div className="field">
+                <label className="label">Other Document (Optional)</label>
+                <div className="control">
+                  <input className="input" type="file" onChange={(e) => {
+                    if (e.target.files?.[0]) {
+                      uploadDocument(e.target.files[0], 'document').then(() => {
+                        alert(`Document uploaded successfully`);
+                      }).catch(() => {
+                        alert(`Failed to upload document`);
+                      });
+                    }
+                  }} />
+                </div>
+              </div>
+              {bulkLog.length > 0 && (
+                <div className="notification is-info is-light mt-4">
+                  <ul>
+                    {bulkLog.map((log: string, i: number) => <li key={i}>{log}</li>)}
+                  </ul>
+                </div>
+              )}
+            </form>
+          </section>
+          <footer className="modal-card-foot">
+            <button 
+              type="submit" 
+              form="bulk-upload-form" 
+              className={`button ${isParsingBulk ? 'is-loading' : ''}`}
+              style={{ backgroundColor: 'transparent', borderColor: '#4d0218', color: '#4d0218' }}
+            >
+              Upload
+            </button>
+            <button className="button" onClick={() => setShowBulkUploadModal(false)}>Cancel</button>
+          </footer>
+        </div>
+      </div>
     </div>
   );
 }