Draft and New Arrivals pages added

frontend/src/App.tsx

@@ -20,6 +20,7 @@ import Bills from './pages/Bills.tsx';
 import PurchaseSummary from './pages/PurchaseSummary.tsx';
 import IntentDashboard from './pages/IntentDashboard.tsx';
 import IntentList from './pages/IntentList.tsx';
+import NewArrivals from './pages/NewArrivals.tsx';
 import Reports from './pages/Reports.tsx';
 import Feedback from './pages/Feedback.tsx';
 
@@ -77,6 +78,7 @@ function App() {
           <Route path="purchases/intent/stores" element={<PlaceholderPage title="Intent Stores" />} />
           
           {/* Inventory */}
+          <Route path="inventory/new-arrivals" element={<NewArrivals />} />
           <Route path="inventory/base" element={<BaseMenu />} />
           <Route path="inventory/products" element={<Products />} />
           <Route path="inventory/online" element={<Navigate to="/inventory/products" replace />} />

frontend/src/components/Sidebar.tsx

@@ -90,6 +90,7 @@ const menuItems: MenuItem[] = [
     title: 'Inventory', 
     icon: ShoppingCart, 
     subMenu: [
+      { title: 'New Arrivals', path: '/inventory/new-arrivals' },
       { title: 'Base Items', path: '/inventory/base' },
       { title: 'Products', path: '/inventory/products' }
     ] 

frontend/src/pages/NewArrivals.tsx

@@ -0,0 +1,437 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { 
+  X, Search, RefreshCw, Edit2, Package, Image as ImageIcon, 
+  Clock, Check, Trash2, Rocket, ArrowRight, AlertCircle
+} from 'lucide-react';
+
+interface ProductSession {
+  id?: number;
+  dayOfWeek: string;
+  active: boolean;
+  startTime: string;
+  endTime: string;
+}
+
+interface Product {
+  id?: number;
+  productId: string;
+  name: string;
+  category: string;
+  description: string;
+  basePrice: number;
+  price: number;
+  offerPrice: number;
+  discountPercent: number;
+  discountAmount: number;
+  counter: string;
+  tag: string;
+  parcelCharges: number;
+  barcode: string;
+  attributesOptional: boolean;
+  veg: boolean;
+  hasAllergy: boolean;
+  parcelNotAllowed: boolean;
+  sessionOptional: boolean;
+  sessions: ProductSession[];
+  imageData: string;
+  active: boolean;
+  stock: number;
+  stalls?: { id: number; name: string }[];
+}
+
+interface Stall {
+  id: number;
+  name: string;
+}
+
+interface BaseItem {
+  id: number;
+  name: string;
+}
+
+const DAYS = ['SUNDAY', 'MONDAY', 'TUESDAY', 'WEDNESDAY', 'THURSDAY', 'FRIDAY', 'SATURDAY'];
+
+const getDefaultSessions = (): ProductSession[] => 
+  DAYS.map(day => ({ dayOfWeek: day, active: true, startTime: '00:00', endTime: '23:59' }));
+
+const NewArrivals: React.FC = () => {
+  const [drafts, setDrafts] = useState<Product[]>([]);
+  const [baseItems, setBaseItems] = useState<BaseItem[]>([]);
+  const [allStalls, setAllStalls] = useState<Stall[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [showModal, setShowModal] = useState(false);
+  const [showSessionModal, setShowSessionModal] = useState(false);
+  const [editingDraft, setEditingDraft] = useState<Product | null>(null);
+  const [formData, setFormData] = useState<Product | null>(null);
+  const [isSaving, setIsSaving] = useState(false);
+  
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    fetchDrafts();
+    fetchMetadata();
+  }, []);
+
+  const fetchDrafts = async () => {
+    setLoading(true);
+    try {
+      const response = await fetch('/api/products/drafts');
+      if (response.ok) {
+        const data = await response.json();
+        setDrafts(data);
+      }
+    } catch (error) {
+      console.error('Error fetching drafts:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const fetchMetadata = async () => {
+    try {
+      const [stallsRes, itemsRes] = await Promise.all([
+        fetch('/api/stalls'),
+        fetch('/api/base-items?size=100')
+      ]);
+      setAllStalls(await stallsRes.json());
+      const itemsData = await itemsRes.json();
+      setBaseItems(itemsData.content || itemsData);
+    } catch (error) {
+      console.error('Error fetching metadata:', error);
+    }
+  };
+
+  const handleEdit = (product: Product) => {
+    setEditingDraft(product);
+    setFormData({
+      ...product,
+      sessions: product.sessions && product.sessions.length > 0 ? product.sessions : getDefaultSessions()
+    });
+    setShowModal(true);
+  };
+
+  const handlePublish = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!formData || !formData.id) return;
+
+    setIsSaving(true);
+    try {
+      const response = await fetch(`/api/products/${formData.id}/publish`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(formData),
+      });
+      if (response.ok) {
+        setShowModal(false);
+        setEditingDraft(null);
+        setFormData(null);
+        fetchDrafts();
+      }
+    } catch (error) {
+      console.error('Error publishing product:', error);
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  const handleDelete = async (id: number) => {
+    if (!window.confirm('Delete this draft product?')) return;
+    try {
+      await fetch(`/api/products/${id}`, { method: 'DELETE' });
+      fetchDrafts();
+    } catch (error) {
+      console.error('Error deleting draft:', error);
+    }
+  };
+
+  const handleImageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (file && formData) {
+      const reader = new FileReader();
+      reader.onloadend = () => {
+        setFormData({ ...formData, imageData: reader.result as string });
+      };
+      reader.readAsDataURL(file);
+    }
+  };
+
+  const updateSession = (index: number, updates: Partial<ProductSession>) => {
+    if (!formData) return;
+    const newSessions = [...formData.sessions];
+    newSessions[index] = { ...newSessions[index], ...updates };
+    setFormData({ ...formData, sessions: newSessions });
+  };
+
+  return (
+    <div className="p-8 font-inter bg-[#f8fafc] min-h-screen">
+      <div className="flex justify-between items-center mb-10 max-w-[1400px] mx-auto">
+        <div className="flex items-center gap-5">
+            <div className="w-14 h-14 bg-[#231651] rounded-2xl flex items-center justify-center shadow-2xl shadow-[#231651]/20">
+                <Rocket className="text-white w-7 h-7" />
+            </div>
+            <div>
+                <h1 className="text-3xl font-black text-[#1e293b] tracking-tight">New Arrivals</h1>
+                <p className="text-sm font-medium text-[#64748b]">Configure and publish incoming procurement stock to your live store</p>
+            </div>
+        </div>
+        <button onClick={fetchDrafts} className="p-3 text-[#64748b] hover:bg-white hover:text-[#231651] rounded-2xl transition-all border border-transparent hover:border-[#e2e8f0] shadow-sm">
+          <RefreshCw size={22} className={loading ? 'animate-spin' : ''} />
+        </button>
+      </div>
+
+      <div className="max-w-[1400px] mx-auto">
+        {loading ? (
+             <div className="flex flex-col items-center justify-center py-32 gap-4">
+                <RefreshCw className="animate-spin text-[#231651]" size={40} />
+                <p className="text-[#64748b] font-bold uppercase tracking-widest text-xs">Fetching Drafts...</p>
+             </div>
+        ) : drafts.length === 0 ? (
+            <div className="bg-white rounded-[2.5rem] border-2 border-dashed border-[#e2e8f0] p-24 text-center">
+                <div className="w-20 h-20 bg-gray-50 rounded-full flex items-center justify-center mx-auto mb-6">
+                    <Package className="text-gray-300" size={32} />
+                </div>
+                <h3 className="text-xl font-bold text-[#1e293b] mb-2">Clean Slate</h3>
+                <p className="text-[#64748b] max-w-sm mx-auto">All incoming stock has been processed. New drafts will appear here once you mark vendor orders as received.</p>
+            </div>
+        ) : (
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                {drafts.map((draft) => (
+                    <div key={draft.id} className="group bg-white rounded-[2rem] border border-[#e2e8f0] shadow-sm hover:shadow-2xl hover:shadow-[#231651]/10 transition-all duration-500 overflow-hidden flex flex-col">
+                        <div className="relative h-48 bg-gray-50 flex items-center justify-center overflow-hidden">
+                            {draft.imageData ? (
+                                <img src={draft.imageData} alt={draft.name} className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110" />
+                            ) : (
+                                <div className="flex flex-col items-center gap-2 text-[#94a3b8]">
+                                    <ImageIcon size={40} strokeWidth={1} />
+                                    <span className="text-[10px] font-bold uppercase tracking-widest">No Image</span>
+                                </div>
+                            )}
+                            <div className="absolute top-4 left-4">
+                                <span className="px-3 py-1 bg-[#231651]/90 backdrop-blur-md text-white rounded-full text-[10px] font-black uppercase tracking-wider">Draft Arrival</span>
+                            </div>
+                        </div>
+                        
+                        <div className="p-6 flex-1 flex flex-col">
+                            <h3 className="text-lg font-bold text-[#1e293b] mb-1">{draft.name}</h3>
+                            <div className="flex items-center gap-2 text-xs font-bold text-slate-400 mb-4 uppercase tracking-wider">
+                                <Package size={14} />
+                                <span>{draft.stock} Units Arrived</span>
+                            </div>
+                            
+                            <div className="mt-auto pt-6 border-t border-[#f1f5f9] flex items-center justify-between">
+                                <div className="flex flex-col">
+                                    <span className="text-[10px] font-bold text-[#94a3b8] uppercase">Procurement Rate</span>
+                                    <span className="text-base font-black text-[#231651]">₹{draft.basePrice || 0}</span>
+                                </div>
+                                <div className="flex gap-2">
+                                    <button 
+                                        onClick={() => handleDelete(draft.id!)}
+                                        className="p-2.5 text-red-400 hover:text-red-600 hover:bg-red-50 rounded-xl transition-all"
+                                    >
+                                        <Trash2 size={20} />
+                                    </button>
+                                    <button 
+                                        onClick={() => handleEdit(draft)}
+                                        className="px-5 py-2.5 bg-[#231651] text-white rounded-xl text-sm font-bold flex items-center gap-2 hover:bg-[#342475] transition-all shadow-lg shadow-[#231651]/20"
+                                    >
+                                        Edit & Publish <ArrowRight size={16} />
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                ))}
+            </div>
+        )}
+      </div>
+
+      {/* Draft Configuration Modal */}
+      {showModal && formData && (
+        <div className="fixed inset-0 bg-[#231651]/40 backdrop-blur-md z-[100] flex items-center justify-center p-4">
+          <div className="bg-white rounded-[2.5rem] w-full max-w-5xl max-h-[90vh] shadow-2xl flex flex-col animate-in zoom-in duration-300">
+            <div className="px-10 py-6 border-b border-[#e2e8f0] flex justify-between items-center bg-gray-50/50">
+              <div className="flex items-center gap-4">
+                  <div className="p-2 bg-[#231651] text-white rounded-xl">
+                      <Edit2 size={24} />
+                  </div>
+                  <div>
+                      <h2 className="text-xl font-black text-[#1e293b]">Finalize Product</h2>
+                      <p className="text-xs font-medium text-[#64748b]">Configure your latest arrival for the live menu</p>
+                  </div>
+              </div>
+              <button onClick={() => setShowModal(false)} className="p-2 hover:bg-gray-200 rounded-full transition-colors text-[#64748b]"><X size={24} /></button>
+            </div>
+            
+            <form onSubmit={handlePublish} className="p-10 overflow-y-auto custom-scrollbar flex-1">
+              <div className="grid grid-cols-1 md:grid-cols-3 gap-10">
+                <div className="space-y-6">
+                  <div>
+                    <label className="block text-[10px] uppercase font-black text-[#64748b] mb-2 tracking-widest ml-1">Product Name</label>
+                    <input required type="text" value={formData.name} onChange={(e) => setFormData({ ...formData, name: e.target.value })} className="w-full px-5 py-4 bg-white border-2 border-gray-50 focus:border-[#231651]/20 rounded-2xl text-sm font-bold outline-none transition-all" />
+                  </div>
+                  <div>
+                    <label className="block text-[10px] uppercase font-black text-[#64748b] mb-2 tracking-widest ml-1">Category</label>
+                    <select required value={formData.category} onChange={(e) => setFormData({ ...formData, category: e.target.value })} className="w-full px-5 py-4 bg-white border-2 border-gray-50 focus:border-[#231651]/20 rounded-2xl text-sm font-bold outline-none transition-all appearance-none cursor-pointer">
+                      <option value="">Select Category</option>
+                      {baseItems.map(item => <option key={item.id} value={item.name}>{item.name}</option>)}
+                    </select>
+                  </div>
+                  <div>
+                    <label className="block text-[10px] uppercase font-black text-[#64748b] mb-2 tracking-widest ml-1">Live Selling Price (₹)</label>
+                    <input required type="number" value={formData.price} onChange={(e) => setFormData({ ...formData, price: parseFloat(e.target.value) || 0 })} className="w-full px-5 py-4 bg-[#231651]/5 border-2 border-transparent focus:border-[#231651]/20 rounded-2xl text-lg font-black text-[#231651] outline-none transition-all" />
+                  </div>
+                  <div>
+                    <label className="block text-[10px] uppercase font-black text-[#64748b] mb-2 tracking-widest ml-1">Stall Association</label>
+                    <select 
+                      required
+                      value={formData.counter} 
+                      onChange={(e) => {
+                        const stallName = e.target.value;
+                        const selectedStall = allStalls.find(s => s.name === stallName);
+                        setFormData({ 
+                          ...formData, 
+                          counter: stallName,
+                          stalls: selectedStall ? [{ id: selectedStall.id, name: selectedStall.name }] : []
+                        });
+                      }} 
+                      className="w-full px-5 py-4 bg-white border-2 border-gray-50 focus:border-[#231651]/20 rounded-2xl text-sm font-bold outline-none transition-all appearance-none cursor-pointer"
+                    >
+                      <option value="">Choose Stall</option>
+                      {allStalls.map(stall => (
+                        <option key={stall.id} value={stall.name}>{stall.name}</option>
+                      ))}
+                    </select>
+                  </div>
+                </div>
+
+                <div className="space-y-6">
+                    <div className="grid grid-cols-2 gap-4">
+                        <div>
+                            <label className="block text-[10px] uppercase font-black text-[#64748b] mb-2 tracking-widest ml-1">Arrived Stock</label>
+                            <input type="number" readOnly value={formData.stock} className="w-full px-5 py-4 bg-gray-50 border-2 border-transparent rounded-2xl text-sm font-bold outline-none" />
+                        </div>
+                        <div>
+                            <label className="block text-[10px] uppercase font-black text-[#64748b] mb-2 tracking-widest ml-1">Unit Rate</label>
+                            <input type="number" readOnly value={formData.basePrice} className="w-full px-5 py-4 bg-gray-50 border-2 border-transparent rounded-2xl text-sm font-bold outline-none" />
+                        </div>
+                    </div>
+                    <div>
+                        <label className="block text-[10px] uppercase font-black text-[#64748b] mb-2 tracking-widest ml-1">Barcode</label>
+                        <input type="text" value={formData.barcode} onChange={(e) => setFormData({ ...formData, barcode: e.target.value })} className="w-full px-5 py-4 bg-white border-2 border-gray-50 focus:border-[#231651]/20 rounded-2xl text-sm font-bold outline-none" placeholder="Scan or type..." />
+                    </div>
+                    <div className="p-6 bg-amber-50 rounded-2xl border border-amber-100 flex gap-4">
+                        <AlertCircle className="text-amber-500 flex-shrink-0" size={20} />
+                        <div>
+                            <p className="text-[11px] font-black text-amber-600 uppercase tracking-wider mb-1">Configuration Required</p>
+                            <p className="text-[12px] text-amber-700 leading-snug">Associate this item with a stall and session before publishing to the ordering site.</p>
+                        </div>
+                    </div>
+                </div>
+
+                <div className="space-y-6">
+                  <div>
+                    <label className="block text-[10px] uppercase font-black text-[#64748b] mb-2 tracking-widest ml-1">Product Media</label>
+                    <div 
+                      onClick={() => fileInputRef.current?.click()}
+                      className="border-2 border-dashed border-[#e2e8f0] rounded-3xl p-6 flex flex-col items-center justify-center text-[#94a3b8] hover:border-[#231651]/30 hover:bg-gray-50 transition-all cursor-pointer h-64 overflow-hidden shadow-inner bg-gray-50"
+                    >
+                      {formData.imageData ? (
+                        <img src={formData.imageData} alt="Preview" className="w-full h-full object-contain" />
+                      ) : (
+                        <>
+                          <div className="w-16 h-16 bg-white rounded-2xl flex items-center justify-center shadow-sm mb-3">
+                              <ImageIcon size={32} className="text-[#cbd5e1]" />
+                          </div>
+                          <p className="text-[10px] font-black uppercase tracking-widest text-[#94a3b8]">Upload Product Image</p>
+                          <p className="text-[10px] text-[#cbd5e1] mt-1">PNG, JPG, HEIC up to 2MB</p>
+                        </>
+                      )}
+                    </div>
+                    <input ref={fileInputRef} type="file" accept="image/*" onChange={handleImageChange} className="hidden" />
+                  </div>
+                </div>
+              </div>
+
+              <div className="mt-12 flex gap-4 p-8 bg-[#231651]/5 rounded-[2rem] border border-[#231651]/10">
+                  <div className="flex-1">
+                      <div className="flex items-center justify-between mb-4">
+                          <h3 className="text-sm font-black text-[#231651] uppercase tracking-wider">Availability Settings</h3>
+                          <button type="button" onClick={() => setFormData({ ...formData, sessionOptional: !formData.sessionOptional })} className={`w-12 h-6.5 rounded-full relative transition-all ${formData.sessionOptional ? 'bg-[#231651]' : 'bg-gray-300'}`}><div className={`absolute top-1 left-1 w-4.5 h-4.5 bg-white rounded-full transition-transform ${formData.sessionOptional ? 'translate-x-5.5' : ''}`} /></button>
+                      </div>
+                      <p className="text-xs text-[#64748b] mb-4">Control which times of day this product is visible to customers.</p>
+                      {formData.sessionOptional && (
+                        <button type="button" onClick={() => setShowSessionModal(true)} className="flex items-center gap-2 px-6 py-3 bg-white border border-[#231651]/20 text-[#231651] text-xs font-black rounded-xl hover:bg-white shadow-sm transition-all"><Clock size={16} /> Advanced Session Configuration</button>
+                      )}
+                  </div>
+                  <div className="w-[1px] bg-[#231651]/10 mx-6"></div>
+                  <div className="flex-1 flex flex-col justify-center">
+                    <button type="submit" disabled={isSaving} className="w-full py-5 bg-[#231651] text-white font-black rounded-2xl shadow-2xl shadow-[#231651]/30 hover:scale-[1.02] active:scale-[0.98] transition-all flex items-center justify-center gap-3 disabled:opacity-50">
+                        {isSaving ? <RefreshCw className="animate-spin" /> : <><Rocket size={22} /> Publish to Live Store</>}
+                    </button>
+                  </div>
+              </div>
+            </form>
+          </div>
+        </div>
+      )}
+
+      {/* Session Modal (Reused from Products.tsx) */}
+      {showSessionModal && formData && (
+        <div className="fixed inset-0 bg-[#231651]/60 backdrop-blur-md z-[120] flex items-center justify-center p-4">
+          <div className="bg-white rounded-[3rem] w-full max-w-4xl shadow-2xl overflow-hidden animate-in zoom-in duration-300">
+            <div className="p-12">
+              <h2 className="text-2xl font-black text-[#1e293b] text-center mb-10 tracking-tight">Weekly Availability Schedule</h2>
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-6 max-h-[50vh] overflow-y-auto px-4 custom-scrollbar">
+                {formData.sessions.map((session, index) => (
+                  <div key={session.dayOfWeek} className={`p-6 rounded-3xl border-2 transition-all ${session.active ? 'border-[#231651]/20 bg-[#231651]/5' : 'border-gray-100 bg-gray-50'}`}>
+                    <div className="flex items-center justify-between mb-6">
+                      <span className="text-lg font-black text-[#231651]">{session.dayOfWeek}</span>
+                      <div 
+                        onClick={() => updateSession(index, { active: !session.active })}
+                        className={`w-7 h-7 rounded-xl flex items-center justify-center cursor-pointer transition-all ${session.active ? 'bg-[#231651]' : 'border-2 border-gray-200 bg-white'}`}
+                      >
+                        {session.active && <Check size={16} className="text-white" strokeWidth={4} />}
+                      </div>
+                    </div>
+                    
+                    <div className={`grid grid-cols-2 gap-4 ${!session.active ? 'opacity-20 pointer-events-none' : ''}`}>
+                      <div className="space-y-1.5">
+                        <label className="text-[10px] font-black text-[#94a3b8] uppercase tracking-widest ml-1">Start</label>
+                        <input 
+                          type="time" 
+                          value={session.startTime} 
+                          onChange={(e) => updateSession(index, { startTime: e.target.value })}
+                          className="w-full bg-white border border-[#e2e8f0] rounded-xl px-4 py-3 text-sm font-bold text-[#1e293b] outline-none shadow-sm" 
+                        />
+                      </div>
+                      <div className="space-y-1.5">
+                        <label className="text-[10px] font-black text-[#94a3b8] uppercase tracking-widest ml-1">End</label>
+                        <input 
+                          type="time" 
+                          value={session.endTime} 
+                          onChange={(e) => updateSession(index, { endTime: e.target.value })}
+                          className="w-full bg-white border border-[#e2e8f0] rounded-xl px-4 py-3 text-sm font-bold text-[#1e293b] outline-none shadow-sm" 
+                        />
+                      </div>
+                    </div>
+                  </div>
+                ))}
+              </div>
+              <div className="flex justify-end gap-4 mt-12">
+                <button onClick={() => setShowSessionModal(false)} className="px-12 py-4 bg-[#231651] text-white font-black rounded-2xl shadow-xl hover:scale-105 transition-all">Confirm Schedule</button>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+
+      <style dangerouslySetInnerHTML={{ __html: `
+        .custom-scrollbar::-webkit-scrollbar { width: 6px; }
+        .custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
+        .custom-scrollbar::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 10px; }
+      ` }} />
+    </div>
+  );
+};
+
+export default NewArrivals;