{isAccessRestricted && ( )}

{[ {id:"dashboard",label:"Dashboard",icon:"gauge-high"}, {id:"orders",label:"Orders",icon:"receipt",badge:orderGroups.new.length||null}, {id:"menu",label:"Menu",icon:"utensils"}, {id:"store_profile",label:"Store Profile",icon:"store"}, {id:"financials",label:"Financials",icon:"peso-sign"}, {id:"analytics",label:"Analytics",icon:"chart-line"}, {id:"marketing",label:"Marketing",icon:"bullhorn"}, {id:"settings",label:"Settings",icon:"gear"}, ].map(t=>( setActiveSection(t.id)}> {t.label} {t.badge && {t.badge}} ))}

Quick Controls

{orderGroups.new.length===0 &&

No new orders right now.

} {orderGroups.new.slice(0,5).map(renderOrderCard)} {orderGroups.new.length>5 && {setActiveSection("orders");setOrderTab("new");}}>View all {orderGroups.new.length} new orders}

uploadLogo(e.target.files?.[0])} style={{marginBottom:8}}/> {merchant.logoUrl && }

{[ {id:"active",label:"Active",count:activeOrderCount}, {id:"new",label:"New",count:orderGroups.new.length}, {id:"preparing",label:"Preparing",count:orderGroups.accepted.length+orderGroups.preparing.length}, {id:"ready",label:"Ready",count:orderGroups.ready.length}, {id:"delivery",label:"In Delivery",count:orderGroups.delivery.length}, {id:"archive",label:"Archive",count:orderGroups.delivered.length+orderGroups.cancelled.length}, ].map(t=>( setOrderTab(t.id)}>{t.label}{t.count} ))}

{editingId?"Update Listing":"Add Listing"}

setForm(f=>({...f,description:e.target.value}))} rows={2}/> <div style={{display:"flex",gap:12,alignItems:"flex-end"}}> <div> <div className="section-label">Image</div> <input type="file" accept="image/*" onChange={e=>setListingImageFile(e.target.files?.[0]||null)}/> </div> <div className="preview-box"> {(listingImageFile||form.img)?<img src={listingImageFile?URL.createObjectURL(listingImageFile):form.img} alt="Preview"/>:<span className="muted" style={{fontSize:11}}>No image</span>} </div> </div> <div className="btn-group"> <button className="btn-primary" onClick={saveListing} disabled={savingListing}>{savingListing?"Saving...":(editingId?"Update Listing":"Save Listing")}</button> {editingId && <button className="btn-muted" onClick={()=>{setEditingId(null);setListingImageFile(null);setForm({name:"",cat:DEFAULT_LISTING_CATEGORY,price:"",unit:"pc",stock:"",img:"",menuTime:"all",description:""});}}>Cancel</button>} </div> </div> <div className="card stack"> <h3><i className="fas fa-tags" style={{marginRight:8,color:"var(--brand)"}}></i>Custom Store Categories</h3> <p className="muted" style={{fontSize:12}}>Add categories unique to your store (example: Milk Tea, Silog Meals). These appear in the user app store page and your menu filter.</p> <div className="btn-group"> <input placeholder="New category name" value={newCustomCategory} onChange={e=>setNewCustomCategory(e.target.value)} onKeyDown={e=>{if(e.key==="Enter"){e.preventDefault();addCustomCategory();}}}/> <button className="btn-primary" onClick={addCustomCategory}>Add Category</button> </div> <div style={{display:"flex",flexWrap:"wrap",gap:8}}> {merchantCustomCategories.length===0 && <span className="muted" style={{fontSize:12}}>No custom categories yet.</span>} {merchantCustomCategories.map(name=>( <span key={name} className="chip chip-purple" style={{display:"inline-flex",alignItems:"center",gap:6}}> {name} <button className="btn-danger btn-sm" style={{padding:"2px 6px"}} onClick={()=>removeCustomCategory(name)} title="Remove category"><i className="fas fa-xmark"></i></button> </span> ))} </div> </div> <div className="card"> <div className="card-header"> <h3>Your Menu ({listings.length})</h3> </div> <div className="tabs" style={{marginBottom:10}}> <button className={`tab ${menuFilter==="all"?"active":""}`} onClick={()=>setMenuFilter("all")}>All</button> {allListingCategories.map(c=>{ const count=listings.filter(l=>l.cat===c.id).length; return count>0 && <button key={c.id} className={`tab ${menuFilter===c.id?"active":""}`} onClick={()=>setMenuFilter(c.id)}>{c.label}<span className="count">{count}</span></button>; })} </div> {listings.filter(l=>menuFilter==="all"||l.cat===menuFilter).map(l=>( <div key={l.id} className="listing-row"> <div className="listing-info"> <img src={l.img||l.merchantLogo||merchant?.logoUrl||"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Crect fill='%23f1f5f9' width='40' height='40'/%3E%3C/svg%3E"} className="listing-thumb" alt={l.name}/> <div style={{minWidth:0}}> <div className="listing-name">{l.name}</div> <div className="listing-detail"> <span className={`chip ${CAT_MAP[l.cat]?'chip-blue':'chip-green'}`}>{categoryLabelMap[l.cat]||l.cat}</span> {l.menuTime&&l.menuTime!=="all" && <span className="chip chip-purple">{MENU_TIMES.find(t=>t.id===l.menuTime)?.label||l.menuTime}</span>} <span className={`chip ${l.soldOut?'chip-red':'chip-green'}`}>{l.soldOut?"Sold Out":"In Stock: "+Number(l.stock||0)}</span> </div> </div> </div> <div style={{display:"flex",alignItems:"center",gap:10,flexShrink:0}}> <span className="listing-price">{fmt(l.price)}</span> <label className="switch switch-sm" title={l.soldOut?"Mark available":"Mark sold out"}> <input type="checkbox" checked={!l.soldOut} onChange={()=>toggleSoldOut(l.id,l.soldOut)}/> <span className="slider"></span> </label> <button className="btn-muted btn-sm" onClick={()=>editListing(l)} title="Edit"><i className="fas fa-pen"></i></button> <button className="btn-danger btn-sm" onClick={()=>deleteListing(l.id)} title="Delete"><i className="fas fa-trash"></i></button> </div> </div> ))} {listings.length===0 && <div className="empty"><i className="fas fa-utensils"></i><p>No listings yet. Add your first item above.</p></div>} </div> </>)} {/* ═══ FINANCIALS ═══ */} {activeSection==="financials" && (<> <div className="tabs"> {[{id:"daily",label:"Today"},{id:"weekly",label:"This Week"},{id:"monthly",label:"This Month"},{id:"all",label:"All Time"}].map(t=>( <button key={t.id} className={`tab ${finPeriod===t.id?'active':''}`} onClick={()=>setFinPeriod(t.id)}>{t.label}</button> ))} </div> {(()=>{ const f=finPeriod==="daily"?financials.today:finPeriod==="weekly"?financials.week:finPeriod==="monthly"?financials.month:financials.allTime; return ( <div className="stat-grid"> <div className="stat-card"><div className="stat-val">{fmt(f.gross)}</div><div className="stat-label">Gross Sales</div></div> <div className="stat-card danger"><div className="stat-val">{fmt(f.commission)}</div><div className="stat-label">Platform Fee ({Math.round(COMMISSION_RATE*100)}%)</div></div> <div className="stat-card"><div className="stat-val" style={{color:"#16a34a"}}>{fmt(f.net)}</div><div className="stat-label">Net Earnings</div></div> <div className="stat-card info"><div className="stat-val">{f.count}</div><div className="stat-label">Completed Orders</div></div> </div> ); })()} <div className="card"> <h3 style={{marginBottom:14}}><i className="fas fa-list" style={{marginRight:8,color:"var(--brand)"}}></i>Transaction History</h3> {orders.filter(o=>o.status==='delivered').slice(0,30).map(o=>{ const gross=Number(o.total||0); const fee=Math.round(gross*COMMISSION_RATE); const net=gross-fee; return ( <div key={o.id} className="txn-row"> <div> <div style={{fontWeight:600,fontSize:13}}>{o.customer?.name||"Customer"}</div> <div style={{fontSize:11,color:"var(--muted)"}}>{new Date(o.completedAt||o.createdAt||0).toLocaleDateString("en-PH",{month:"short",day:"numeric",hour:"2-digit",minute:"2-digit"})}</div> </div> <div style={{textAlign:"right"}}> <div className="txn-amount positive">+{fmt(net)}</div> <div className="txn-fee">Gross {fmt(gross)} · Fee {fmt(fee)}</div> </div> </div> ); })} {orders.filter(o=>o.status==='delivered').length===0 && <div className="empty"><i className="fas fa-receipt"></i><p>No completed transactions yet.</p></div>} </div> <div className="card"> <h3 style={{marginBottom:14}}><i className="fas fa-wallet" style={{marginRight:8,color:"#8b5cf6"}}></i>Payout Status</h3> <div style={{padding:"12px 0"}}> <div style={{display:"flex",justifyContent:"space-between",fontSize:13,marginBottom:4}}> <span style={{fontWeight:700}}>Available Balance</span> <span style={{fontWeight:800,color:"#16a34a"}}>{fmt(financials.month.net)}</span> </div> <div className="payout-bar"><div className="payout-fill" style={{width:Math.min(100,financials.month.net>0?75:0)+"%"}}></div></div> <p className="muted" style={{fontSize:12,marginTop:8}}>Payouts are processed by the admin. Contact support if you have questions about your balance.</p> </div> </div> </>)} {/* ═══ ANALYTICS ═══ */} {activeSection==="analytics" && (<> <div className="tabs"> {[{id:"7d",label:"7 Days"},{id:"30d",label:"30 Days"},{id:"90d",label:"90 Days"}].map(t=>( <button key={t.id} className={`tab ${analyticsRange===t.id?'active':''}`} onClick={()=>setAnalyticsRange(t.id)}>{t.label}</button> ))} </div> <div className="stat-grid"> <div className="stat-card"><div className="stat-val">{financials.acceptRate}%</div><div className="stat-label">Acceptance Rate</div></div> <div className="stat-card info"><div className="stat-val">{prepTime}m</div><div className="stat-label">Avg Prep Time</div></div> <div className="stat-card danger"><div className="stat-val">{financials.cancelRate}%</div><div className="stat-label">Cancellation Rate</div></div> <div className="stat-card warn"><div className="stat-val">{fmt(financials.avgOrderValue)}</div><div className="stat-label">Avg Order Value</div></div> </div> <div className="card"> <h3 style={{marginBottom:8}}><i className="fas fa-chart-line" style={{marginRight:8,color:"var(--brand)"}}></i>Sales Trends</h3> <div className="chart-wrap"><canvas ref={earningsChartRef}></canvas></div> </div> <div className="card"> <h3 style={{marginBottom:8}}><i className="fas fa-clock" style={{marginRight:8,color:"#2563eb"}}></i>Peak Hours</h3> <div className="chart-wrap"><canvas ref={peakChartRef}></canvas></div> </div> <div className="card"> <h3 style={{marginBottom:14}}><i className="fas fa-trophy" style={{marginRight:8,color:"#f59e0b"}}></i>Top Selling Items</h3> {financials.topItems.length===0 && <p className="muted">No sales data yet.</p>} {financials.topItems.map((it,i)=>( <div key={it.name} className="txn-row"> <div style={{display:"flex",alignItems:"center",gap:8}}> <span style={{fontWeight:800,color:"var(--muted)",fontSize:12,width:20}}>{i+1}.</span> <div><div style={{fontWeight:700,fontSize:13}}>{it.name}</div><div className="muted" style={{fontSize:11}}>{it.qty} sold</div></div> </div> <span style={{fontWeight:700}}>{fmt(it.revenue)}</span> </div> ))} </div> <div className="card"> <h3 style={{marginBottom:14}}><i className="fas fa-star" style={{marginRight:8,color:"#f59e0b"}}></i>Customer Feedback</h3> {ratings.length===0 && <div className="empty"><i className="fas fa-comment-dots"></i><p>No reviews yet.</p></div>} {ratings.slice(0,20).map(r=>( <div key={r.id} className="review-card"> <div className="review-stars">{Array.from({length:5},(_,i)=><i key={i} className={`fa${i<(r.riderRating||r.rating||0)?'s':'r'} fa-star`}></i>)}</div> {r.comment && <div className="review-text">{r.comment}</div>} {r.merchantComment && <div className="review-text">{r.merchantComment}</div>} <div className="review-meta">{ago(r.createdAt)} {r.customerName&&("· "+r.customerName)}</div> </div> ))} </div> </>)} {/* ═══ MARKETING ═══ */} {activeSection==="marketing" && (<> <div className="card stack"> <h3><i className="fas fa-tags" style={{marginRight:8,color:"#8b5cf6"}}></i>Create Campaign</h3> <p className="muted" style={{fontSize:12}}>Set up promotions to attract more customers and increase orders.</p> <div className="grid-2"> <select value={campaignForm.type} onChange={e=>setCampaignForm(f=>({...f,type:e.target.value}))}> {CAMPAIGN_TYPES.map(t=><option key={t.id} value={t.id}>{t.label}</option>)} </select> <input placeholder="Campaign title" value={campaignForm.title} onChange={e=>setCampaignForm(f=>({...f,title:e.target.value}))}/> </div> <div className="grid-2"> <input placeholder={campaignForm.type==="percent_off"?"Discount %":campaignForm.type==="flat_off"?"Amount ₱":"Value"} type="number" value={campaignForm.value} onChange={e=>setCampaignForm(f=>({...f,value:e.target.value}))}/> <input placeholder="Min order ₱ (optional)" type="number" value={campaignForm.minOrder} onChange={e=>setCampaignForm(f=>({...f,minOrder:e.target.value}))}/> </div> <div className="grid-2"> <div><div className="section-label">Start Date</div><input type="date" value={campaignForm.startDate} onChange={e=>setCampaignForm(f=>({...f,startDate:e.target.value}))}/></div> <div><div className="section-label">End Date</div><input type="date" value={campaignForm.endDate} onChange={e=>setCampaignForm(f=>({...f,endDate:e.target.value}))}/></div> </div> <button className="btn-primary" onClick={saveCampaign} disabled={savingCampaign}>{savingCampaign?"Creating...":"Create Campaign"}</button> </div> <div className="card"> <div className="card-header"><h3>Active Campaigns ({campaigns.filter(c=>c.active).length})</h3></div> {campaigns.length===0 && <div className="empty"><i className="fas fa-bullhorn"></i><p>No campaigns yet. Create one above to get started.</p></div>} {campaigns.map(c=>{ const typeInfo=CAMPAIGN_TYPES.find(t=>t.id===c.type)||{icon:"tag",label:c.type}; return ( <div key={c.id} className="campaign-card"> <div className="left"> <div className="campaign-type" style={{color:c.active?"#16a34a":"#94a3b8"}}><i className={`fas fa-${typeInfo.icon}`} style={{marginRight:4}}></i>{typeInfo.label}</div> <div className="campaign-title">{c.title}</div> <div className="campaign-detail"> {c.type==="percent_off"&&`${c.value}% off`} {c.type==="flat_off"&&`₱${c.value} off`} {c.type==="bogo"&&"Buy 1 Get 1"} {c.type==="free_delivery"&&`Free delivery over ₱${c.minOrder||0}`} {c.endDate&&` · Ends ${new Date(c.endDate).toLocaleDateString("en-PH",{month:"short",day:"numeric"})}`} </div> </div> <div className="btn-group"> <button className={c.active?"btn-warn btn-sm":"btn-success btn-sm"} onClick={()=>toggleCampaign(c.id,!c.active)}>{c.active?"Pause":"Activate"}</button> <button className="btn-danger btn-sm" onClick={()=>removeCampaign(c.id)}><i className="fas fa-trash"></i></button> </div> </div> ); })} </div> <div className="card stack"> <h3><i className="fas fa-image" style={{marginRight:8,color:"#f59e0b"}}></i>Promotional Banners</h3> <p className="muted" style={{fontSize:12}}>Banners shown on your store profile in the customer app.</p> <input placeholder="Banner title" value={bannerForm.title} onChange={e=>setBannerForm(f=>({...f,title:e.target.value}))}/> <div className="grid-2"> <input placeholder="Link URL (optional)" value={bannerForm.linkUrl} onChange={e=>setBannerForm(f=>({...f,linkUrl:e.target.value}))}/> <label style={{display:"flex",alignItems:"center",gap:8,fontSize:13,fontWeight:700}}> <input type="checkbox" checked={bannerForm.active!==false} onChange={e=>setBannerForm(f=>({...f,active:e.target.checked}))} style={{width:16,height:16,padding:0,margin:0}}/>Active </label> </div> <input type="file" accept="image/*" onChange={e=>setBannerImageFile(e.target.files?.[0]||null)}/> <button className="btn-primary" onClick={saveBanner} disabled={savingBanner}>{savingBanner?"Saving...":"Save Banner"}</button> </div> {promoBanners.length>0 && ( <div className="card"> <h3 style={{marginBottom:10}}>Saved Banners ({promoBanners.length})</h3> {promoBanners.map(b=>( <div key={b.id} className="listing-row"> <div className="listing-info"> {b.imageUrl?<img src={b.imageUrl} className="listing-thumb" alt={b.title}/>:<div className="listing-thumb"></div>} <div style={{minWidth:0}}> <div className="listing-name">{b.title||"Untitled"}</div> <div className="listing-detail"><span className={`chip ${b.active===false?'chip-red':'chip-green'}`}>{b.active===false?"Inactive":"Active"}</span>{b.linkUrl&&<span className="muted">{b.linkUrl}</span>}</div> </div> </div> <div className="btn-group"> <button className="btn-muted btn-sm" onClick={()=>toggleBanner(b.id,b.active===false)}>{b.active===false?"Activate":"Pause"}</button> <button className="btn-danger btn-sm" onClick={()=>removeBanner(b.id)}><i className="fas fa-trash"></i></button> </div> </div> ))} </div> )} <div className="card"> <h3 style={{marginBottom:8}}><i className="fas fa-rocket" style={{marginRight:8,color:"#2563eb"}}></i>Boost Visibility</h3> <p className="muted" style={{fontSize:13}}>Get your store featured at the top of search results and category pages to reach more customers.</p> <div style={{padding:"16px",background:"var(--info-bg)",border:"1px solid var(--info-border)",borderRadius:12,marginTop:12}}> <div style={{fontWeight:700,fontSize:14,marginBottom:4}}>Featured Store Placement</div> <p className="muted" style={{fontSize:12}}>Boost your store visibility for 7 days. Your store will appear in the "Featured" section of the customer app.</p> <button className="btn-info" style={{marginTop:10}}>Contact Admin to Boost</button> </div> </div> </>)} {/* ═══ SETTINGS ═══ */} {/* ═══ STORE PROFILE ═══ */} {activeSection==="store_profile" && (<> {/* Preview Card */} <div className="card" style={{padding:0,overflow:"hidden",marginBottom:14}}> <div style={{height:100,background:merchant?.logoUrl?"linear-gradient(135deg,#166534,#22C55E)":"linear-gradient(135deg,#166534,#15803D)",position:"relative"}}> {promoBanners.filter(b=>b.active!==false&&b.imageUrl).length>0 && ( <img src={promoBanners.filter(b=>b.active!==false&&b.imageUrl)[0].imageUrl} alt="" style={{width:"100%",height:"100%",objectFit:"cover"}} /> )} <div style={{position:"absolute",inset:0,background:"linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.45))"}} /> <div style={{position:"absolute",top:10,right:10,padding:"4px 10px",borderRadius:20,fontSize:10,fontWeight:800,background:storeOpen?"rgba(22,163,74,.9)":"rgba(220,38,38,.9)",color:"#fff",display:"flex",alignItems:"center",gap:4}}> <span style={{width:6,height:6,borderRadius:"50%",background:storeOpen?"#86EFAC":"#FCA5A5"}} /> {storeOpen?(busyMode?"Busy":"Open"):"Closed"} </div> </div> <div style={{padding:"16px",marginTop:-28,position:"relative"}}> <div style={{display:"flex",alignItems:"flex-end",gap:12}}> {merchant?.logoUrl ? <img src={merchant.logoUrl} alt="" style={{width:56,height:56,borderRadius:14,objectFit:"cover",border:"3px solid #fff",boxShadow:"0 2px 8px rgba(0,0,0,.12)"}} /> : <div style={{width:56,height:56,borderRadius:14,background:"#F1F5F9",border:"3px solid #fff",boxShadow:"0 2px 8px rgba(0,0,0,.12)",display:"flex",alignItems:"center",justifyContent:"center"}}><i className="fas fa-store" style={{color:"#94A3B8",fontSize:22}}></i></div>} <div style={{flex:1,minWidth:0}}> <div style={{fontSize:18,fontWeight:900,color:"#111827"}}>{merchant?.storeName||"Your Store"}</div> <div style={{fontSize:11,color:"#64748B",marginTop:2}}> {CAT_MAP[merchant?.category]?.label||merchant?.storeCategory||"General Goods"} · {listings.length} items </div> </div> </div> {!!merchant?.description && <div style={{marginTop:10,fontSize:12,color:"#475569",lineHeight:1.5}}>{merchant.description}</div>} <div style={{marginTop:10,display:"flex",gap:8,flexWrap:"wrap"}}> {merchant?.operatingHours && <span style={{padding:"4px 10px",borderRadius:20,fontSize:10,fontWeight:700,background:"#EFF6FF",color:"#2563EB",border:"1px solid #BFDBFE"}}><i className="fas fa-clock" style={{marginRight:4}}></i>{merchant.operatingHours}</span>} {merchant?.contactPhone && <span style={{padding:"4px 10px",borderRadius:20,fontSize:10,fontWeight:700,background:"#F0FDF4",color:"#166534",border:"1px solid #BBF7D0"}}><i className="fas fa-phone" style={{marginRight:4}}></i>{merchant.contactPhone}</span>} {merchant?.address && <span style={{padding:"4px 10px",borderRadius:20,fontSize:10,fontWeight:700,background:"#F8FAFC",color:"#475569",border:"1px solid #E2E8F0"}}><i className="fas fa-location-dot" style={{marginRight:4}}></i>{merchant.address}</span>} </div> </div> </div> <div style={{fontSize:11,color:"var(--muted)",marginBottom:14,textAlign:"center"}}> <i className="fas fa-eye" style={{marginRight:4}}></i>This is how customers see your store </div> {/* Edit Form */} <div className="card stack"> <h3><i className="fas fa-pen" style={{marginRight:6,color:"var(--brand)"}}></i>Edit Store Profile</h3> <div> <div className="section-label">Store Logo</div> <div style={{display:"flex",alignItems:"center",gap:14}}> {merchant?.logoUrl ? <img src={merchant.logoUrl} alt="" style={{width:60,height:60,borderRadius:14,objectFit:"cover",border:"2px solid var(--brand-border)"}} /> : <div style={{width:60,height:60,borderRadius:14,background:"var(--brand-bg)",border:"2px dashed var(--brand-border)",display:"flex",alignItems:"center",justifyContent:"center"}}><i className="fas fa-camera" style={{color:"var(--brand)",fontSize:18}}></i></div>} <div> <label className="btn-muted btn-sm" style={{cursor:"pointer",display:"inline-block"}}> <i className="fas fa-upload" style={{marginRight:4}}></i>{logoFile?"Change Image":"Upload Logo"} <input type="file" accept="image/*" style={{display:"none"}} onChange={e=>{if(e.target.files[0])setLogoFile(e.target.files[0]);}} /> </label> {logoFile && <div style={{fontSize:10,color:"var(--brand)",marginTop:4,fontWeight:600}}>{logoFile.name}</div>} </div> </div> </div> <div> <div className="section-label">Store Name</div> <input value={profileForm.storeName} onChange={e=>setProfileForm(p=>({...p,storeName:e.target.value}))} placeholder="Your store name" /> </div> <div> <div className="section-label">Description</div> <textarea value={profileForm.description} onChange={e=>setProfileForm(p=>({...p,description:e.target.value}))} placeholder="Describe your store..." rows={3} /> </div> <div> <div className="section-label">Business Address</div> <input value={profileForm.address} onChange={e=>setProfileForm(p=>({...p,address:e.target.value}))} placeholder="Complete address" /> </div> <div> <div className="section-label">Contact Phone</div> <input value={profileForm.phone} onChange={e=>setProfileForm(p=>({...p,phone:e.target.value}))} placeholder="09XXXXXXXXX" maxLength={11} /> </div> <div> <div className="section-label">Operating Hours</div> <div style={{display:"grid",gridTemplateColumns:"1fr auto 1fr",gap:8,alignItems:"center"}}> <select value={profileForm.openTime} onChange={e=>setProfileForm(p=>({...p,openTime:e.target.value}))}> {Array.from({length:19},(_,i)=>i+5).flatMap(h=>[0,30].map(m=>{ const val=`${String(h).padStart(2,'0')}:${String(m).padStart(2,'0')}`; const h12=h>12?h-12:h===0?12:h; const ampm=h>=12?"PM":"AM"; return <option key={val} value={val}>{h12}:{String(m).padStart(2,'0')} {ampm}</option>; }))} </select> <span style={{fontWeight:700,color:"var(--muted)",fontSize:13}}>to</span> <select value={profileForm.closeTime} onChange={e=>setProfileForm(p=>({...p,closeTime:e.target.value}))}> {Array.from({length:19},(_,i)=>i+5).flatMap(h=>[0,30].map(m=>{ const val=`${String(h).padStart(2,'0')}:${String(m).padStart(2,'0')}`; const h12=h>12?h-12:h===0?12:h; const ampm=h>=12?"PM":"AM"; return <option key={val} value={val}>{h12}:{String(m).padStart(2,'0')} {ampm}</option>; }))} </select> </div> </div> <button className="btn-primary" onClick={saveStoreProfile} disabled={savingProfile} style={{marginTop:8}}> <i className={`fas fa-${savingProfile?"spinner fa-spin":"check"}`} style={{marginRight:6}}></i> {savingProfile?"Saving...":"Save Store Profile"} </button> </div> {/* Custom Categories */} <div className="card stack"> <h3><i className="fas fa-tags" style={{marginRight:6,color:"#A855F7"}}></i>Custom Categories</h3> <p className="muted" style={{fontSize:12}}>Add custom categories for your menu items beyond the standard ones.</p> <div style={{display:"flex",gap:8}}> <input value={newCustomCategory} onChange={e=>setNewCustomCategory(e.target.value)} placeholder="New category name" onKeyDown={e=>{if(e.key==="Enter")addCustomCategory();}} style={{flex:1}} /> <button className="btn-primary btn-sm" onClick={addCustomCategory}><i className="fas fa-plus"></i></button> </div> {merchantCustomCategories.length>0 && ( <div style={{display:"flex",gap:6,flexWrap:"wrap",marginTop:4}}> {merchantCustomCategories.map(name=>( <span key={name} style={{display:"inline-flex",alignItems:"center",gap:6,padding:"5px 10px",borderRadius:20,fontSize:11,fontWeight:700,background:"#FAF5FF",color:"#7C3AED",border:"1px solid #E9D5FF"}}> <i className="fas fa-tag" style={{fontSize:9}}></i>{name} <button onClick={()=>removeCustomCategory(name)} style={{background:"none",border:"none",color:"#DC2626",cursor:"pointer",fontSize:10,padding:0}}><i className="fas fa-xmark"></i></button> </span> ))} </div> )} {merchantCustomCategories.length===0 && <div className="muted" style={{fontSize:12}}>No custom categories yet.</div>} </div> {/* Prep Time */} <div className="card stack"> <h3><i className="fas fa-clock" style={{marginRight:6,color:"#2563EB"}}></i>Preparation Time</h3> <p className="muted" style={{fontSize:12}}>Average time to prepare orders. This helps set customer expectations.</p> <div style={{display:"flex",alignItems:"center",gap:10}}> <button className="btn-muted btn-sm" onClick={()=>updatePrepTime(prepTime-5)} disabled={prepTime<=5||isAccessRestricted}><i className="fas fa-minus"></i></button> <div style={{fontSize:24,fontWeight:800,color:"var(--text)",minWidth:50,textAlign:"center"}}>{prepTime}<span style={{fontSize:12,fontWeight:600,color:"var(--muted)"}}> min</span></div> <button className="btn-muted btn-sm" onClick={()=>updatePrepTime(prepTime+5)} disabled={prepTime>=120||isAccessRestricted}><i className="fas fa-plus"></i></button> </div> </div> </>)} {activeSection==="settings" && (<> <div className="card stack"> <h3><i className="fas fa-store" style={{marginRight:6}}></i>Store Information</h3> <div style={{padding:"12px",background:"#f8fafc",borderRadius:12,border:"1px solid var(--line)"}}> <div style={{fontWeight:700}}>{merchant.storeName||"Your Store"}</div> <div className="muted" style={{fontSize:12,marginTop:2}}>{merchant.address||merchant.businessAddress||"No address set"}</div> {(merchant.category||merchant.storeCategory) && <div className="muted" style={{fontSize:12,marginTop:2}}>Category: {CAT_MAP[merchant.category]?.label||merchant.category||merchant.storeCategory}</div>} {(merchant.contactPhone||merchant.phone) && <div className="muted" style={{fontSize:12,marginTop:2}}>Phone: {merchant.contactPhone||merchant.phone}</div>} {merchant.operatingHours && <div className="muted" style={{fontSize:12,marginTop:2}}>Hours: {merchant.operatingHours}</div>} {merchant.operatingDays && <div className="muted" style={{fontSize:12,marginTop:2}}>Days: {merchant.operatingDays}</div>} </div> </div> <div className="card stack"> <h3><i className="fas fa-toggle-on" style={{marginRight:6}}></i>Store Controls</h3> <div className="toggle-row"> <div><div className="toggle-label">{storeOpen?"Store Open":"Store Closed"}</div><div className="toggle-desc">Toggle to show or hide your store from customers.</div></div> <label className="switch"><input type="checkbox" checked={storeOpen} onChange={e=>setStoreOpen(e.target.checked)} disabled={updatingStoreStatus||isAccessRestricted}/><span className="slider"></span></label> </div> <div className={`toggle-row ${busyMode?'warn':''}`}> <div><div className="toggle-label">Busy Mode</div><div className="toggle-desc">{busyMode?"New orders paused.":"Temporarily stop receiving orders during rush."}</div></div> <label className="switch"><input type="checkbox" checked={busyMode} onChange={e=>toggleBusyMode(e.target.checked)} disabled={isAccessRestricted}/><span className="slider"></span></label> </div> </div> <div className="card stack"> <h3><i className="fas fa-user" style={{marginRight:6}}></i>Account</h3> <div style={{padding:"12px",background:"#f8fafc",borderRadius:12,border:"1px solid var(--line)",display:"flex",alignItems:"center",gap:12}}> {user.photoURL && <img src={user.photoURL} style={{width:36,height:36,borderRadius:"50%"}} alt="avatar"/>} <div><div style={{fontWeight:700,fontSize:14}}>{user.displayName||"Merchant"}</div><div className="muted" style={{fontSize:12}}>{user.email}</div></div> </div> <button className="btn-danger" onClick={()=>auth.signOut()} style={{marginTop:4}}><i className="fas fa-sign-out-alt" style={{marginRight:6}}></i>Sign Out</button> </div> <div className="card stack" style={{borderColor:"var(--danger-border)",background:"var(--danger-bg)"}}> <h3 style={{color:"#991b1b"}}><i className="fas fa-triangle-exclamation" style={{marginRight:6}}></i>Danger Zone</h3> <p className="muted" style={{fontSize:12,color:"#7f1d1d"}}> Delete this store permanently. This removes your products and storefront from the customer app. Admin records are retained. </p> <button className="btn-danger" onClick={deleteStorePermanently} disabled={deletingStore||isAccessRestricted}> <i className={`fas fa-${deletingStore?"spinner fa-spin":"trash"}`} style={{marginRight:6}}></i> {deletingStore?"Deleting Store...":"Delete Store Permanently"} </button> </div> </>)} </div> ); } ReactDOM.createRoot(document.getElementById('root')).render(<App/>); </script> </body> </html>