// screens-merchant.jsx — merchant (feed store) role: dashboard, orders, order detail (mark delivered), products, profile
(function(){
const { useState } = React;
const Icon = window.Icon;
const { Header, Badge, Segmented, Stars, ProductThumb, KV, SectionTitle, SecureNote } = window;
const fmt = (n)=> Number(n).toFixed(3);
const orderTotal = (o)=> fmt(o.sub + o.ship - o.disc);
function Switch({ on, onChange }){
return (
);
}
function OrderRow({ o, onOpen, compact }){
const D = window.DATA;
return (
onOpen(o)} style={{padding:14, marginBottom:10}}>
{o.items.slice(0,2).map((it,i)=>(
))}
{o.customer}
{o.items.length} منتجات · {o.time}
السبت، 10 مايو
{P.name} 🏪
{/* store-open toggle */}
{open?'المتجر مفتوح':'المتجر مغلق'}
{open?'يستقبل المتجر الطلبات الآن' : 'لن تصلك طلبات جديدة'}
{/* stats */}
{/* today's orders */}
طلبات اليوم
{todayOrders.length ? todayOrders.map(o=>(
))
: لا توجد طلبات اليوم
}
);
}
/* ───────────────────────── ORDERS ───────────────────────── */
const FILTERS = [
{ id:'all', label:'الكل' },
{ id:'preparing', label:'قيد التجهيز' },
{ id:'delivering', label:'قيد التوصيل' },
{ id:'delivered', label:'تم التوصيل' },
{ id:'cancelled', label:'ملغي' },
];
function MeOrders({ orders, onOpen }){
const [filter,setFilter] = useState('all');
const list = orders.filter(o=> filter==='all' ? true : o.status===filter);
return (
} />
{list.length ? list.map(o=>(
))
: لا توجد طلبات في هذه الحالة
}
);
}
/* ───────────────────────── ORDER DETAIL ───────────────────────── */
function MeOrderDetail({ o, back, onAdvance, onCancel }){
const D = window.DATA;
// contextual action by status
const action = o.status==='preparing' ? { label:'بدء التوصيل', next:'delivering', icon:'truck' }
: o.status==='delivering' ? { label:'تأكيد التسليم', next:'delivered', icon:'check' }
: null;
return (
} />
{/* head */}
{o.id}
{o.date} · {o.time}
{/* customer */}
{/* products */}
المنتجات
{o.items.map((it,i)=>{
const p = D.products[it.p];
return (
{p.name}
{it.unit} · {fmt(it.price)} د.ك × {it.qty}
{fmt(it.total)} د.ك
);
})}
{/* summary */}
ملخص الطلب
{o.disc>0 &&
}
طريقة الدفع: {o.pay}
{/* delivery */}
{/* action bar */}
{o.status==='delivered' ? (
) : o.status==='cancelled' ? (
) : (
)}
);
}
/* ───────────────────────── PRODUCTS ───────────────────────── */
function MeProducts({ stock, toggleStock }){
const D = window.DATA;
const keys = Object.keys(D.products);
return (
} />
{keys.map((k,i)=>{
const p = D.products[k];
const on = stock[k] !== false;
return (
{p.name}
{p.weight} · {fmt(p.price)} د.ك
{on?'متوفّر':'غير متوفّر'}
toggleStock(k)}/>
);
})}
);
}
/* ───────────────────────── PROFILE ───────────────────────── */
function MeProfile(){
const P = window.DATA.merchantProfile;
const rows = [
{ icon:'bag', k:'التصنيف', v:P.category },
{ icon:'phone', k:'الهاتف', v:P.phone, num:true },
{ icon:'doc', k:'البريد', v:P.email },
{ icon:'shield', k:'الترخيص', v:P.license, num:true },
{ icon:'pin', k:'الموقع', v:P.city },
];
return (
} />
{P.name}
{P.category}
({P.reviews} تقييم)
{rows.map((r,i)=>(
{r.k}
{r.v}
))}
);
}
/* ───────────────────────── TAB BAR + APP ───────────────────────── */
const ME_TABS = [
{ id:'home', label:'الرئيسية', icon:'home' },
{ id:'orders', label:'الطلبات', icon:'bag' },
{ id:'products', label:'المنتجات', icon:'box' },
{ id:'profile', label:'حسابي', icon:'user' },
];
function MeTabBar({ active, onTab, pending }){
return (
{ME_TABS.map(t=>(
))}
);
}
function MerchantApp(){
const D = window.DATA;
const [tab,setTab] = useState('home');
const [open,setOpen] = useState(true);
const [orders,setOrders] = useState(()=> D.merchantOrders.map(o=>({...o})));
const [stock,setStock] = useState({});
const [selId,setSelId] = useState(null);
const advance = (id,next)=> setOrders(os=> os.map(o=> o.id===id?{...o,status:next}:o));
const cancel = (id)=> setOrders(os=> os.map(o=> o.id===id?{...o,status:'cancelled'}:o));
const toggleStock = (k)=> setStock(s=> ({...s, [k]: s[k]===false ? true : false}));
const openOrder = (o)=> setSelId(o.id);
const closeOrder = ()=> setSelId(null);
const pending = orders.filter(o=> o.status==='preparing').length;
const sel = selId && orders.find(o=>o.id===selId);
if(sel){
return (
{ cancel(id); }}/>
);
}
const screens = {
home: ,
orders: ,
products: ,
profile: ,
};
return (
{React.cloneElement(screens[tab], { key: tab })}
);
}
window.MerchantApp = MerchantApp;
})();