EntityStore.close()}
/>
{cur && (
<>
{stack.length > 1 ? (
) : (
{Icon && }
)}
{meta.label}
{stack.length > 1 && (
{stack.length}
)}
)}
);
};
// ── Dispatcher ─────────────────────────────────────────────────────────────────
const EntityView = ({ type, id }) => {
switch (type) {
case "order": return
;
case "store": return
;
case "product": return
;
case "user": return
;
case "delivery": return
;
default: return
Unknown entity type “{type}”.;
}
};
// ── Shared view primitives ─────────────────────────────────────────────────────
const ViewMsg = ({ children }) => (
{children}
);
const ViewLoading = () => (
Loading…
);
const ESection = ({ title, right, children }) => (
{title}
{right &&
{right}
}
{children}
);
const EKv = ({ k, v }) => (
{k}
{v}
);
// A big headline value block at the top of a view.
const EHero = ({ value, sub, chip }) => (
);
// Small stat tile used in grids inside a view.
const ETile = ({ label, value, accent }) => (
);
// A person/store row that is itself an entity link.
const ERefRow = ({ type, id, name, sub, initial }) => (
id && EntityStore.open(type, id)}
style={{ display: "flex", alignItems: "center", gap: 10, padding: "8px 10px", border: "1.5px solid var(--hairline)", cursor: id ? "pointer" : "default", background: "var(--surface)" }}
>
{(initial || name || "?")[0]?.toUpperCase()}
{name || "—"}
{sub &&
{sub}
}
{id &&
}
);
// ── ORDER view — reuses the real OrderDetail from the Orders page ──────────────
const OrderEntityView = ({ id }) => {
const sb = window.supabaseClient;
const D = window.PipalData;
const I = window.Icons;
const [order, setOrder] = useStateE(null);
const [state, setState] = useStateE("loading"); // loading | ok | missing
const load = useCallbackE(async () => {
setState("loading");
// id may be an order UUID or an order_number — resolve both.
let q = sb.from("orders").select(window.ORDER_SELECT);
q = /^[0-9a-f]{8}-/i.test(String(id)) ? q.eq("id", id) : q.or(`id.eq.${id},order_number.eq.${id}`);
const { data } = await q.limit(1);
const row = data && data[0];
if (!row) { setState("missing"); return; }
const [enriched] = await window.enrichOrders(sb, [row]);
setOrder(enriched);
setState("ok");
}, [id]);
useEffectE(() => { load(); }, [load]);
if (state === "loading") return
;
if (state === "missing") return
Order not found.;
// window.OrderDetail renders its own panel-h + everything below it.
const OrderDetail = window.OrderDetail;
return (
setOrder(o => o && o.id === oid ? { ...o, order_status: status } : o)} />
);
};
// ── STORE view ─────────────────────────────────────────────────────────────────
const StoreEntityView = ({ id }) => {
const sb = window.supabaseClient;
const D = window.PipalData;
const [store, setStore] = useStateE(null);
const [metrics, setMetrics] = useStateE(null);
const [recent, setRecent] = useStateE([]);
const [state, setState] = useStateE("loading");
useEffectE(() => {
let alive = true;
(async () => {
setState("loading");
const { data: s } = await sb.from("stores")
.select("id, name, slug, category, logo_url, phone, seller_id, verification_status, created_at")
.eq("id", id).single();
if (!alive) return;
if (!s) { setState("missing"); return; }
const [{ data: sm }, { data: orders }] = await Promise.all([
sb.from("seller_metrics").select("total_orders, orders_last_30_days, revenue_last_30_days, avg_rating").eq("store_id", id).maybeSingle(),
sb.from("orders").select("id, order_number, total_amount, order_status, created_at").eq("store_id", id).order("created_at", { ascending: false }).limit(6),
]);
if (!alive) return;
setStore(s); setMetrics(sm || null); setRecent(orders || []); setState("ok");
})();
return () => { alive = false; };
}, [id]);
if (state === "loading") return
;
if (state === "missing") return
Store not found.;
const chip = { verified: "pos", pending: "warn", unverified: "warn", rejected: "neg" }[store.verification_status] || "warn";
return (
{store.verification_status || "unverified"}}
/>
{metrics && (
)}
{String(store.id).slice(0, 8).toUpperCase()}} />
{store.phone && }
{recent.length === 0
? No orders
: recent.map(o => (
{D.compactCurrency(Number(o.total_amount || 0))}
))}
);
};
// ── PRODUCT view ───────────────────────────────────────────────────────────────
const ProductEntityView = ({ id }) => {
const sb = window.supabaseClient;
const D = window.PipalData;
const [p, setP] = useStateE(null);
const [state, setState] = useStateE("loading");
useEffectE(() => {
let alive = true;
(async () => {
setState("loading");
const { data } = await sb.from("products")
.select("id, name, images, price, compare_at_price, status, quantity, low_stock_threshold, sales_count, sku, store_id, created_at, stores(id, name)")
.eq("id", id).single();
if (!alive) return;
if (!data) { setState("missing"); return; }
setP(data); setState("ok");
})();
return () => { alive = false; };
}, [id]);
if (state === "loading") return
;
if (state === "missing") return
Product not found.;
const img = Array.isArray(p.images) ? p.images[0] : null;
const noStock = (p.quantity ?? 0) <= 0;
const lowStock = !noStock && p.quantity <= (p.low_stock_threshold || 5);
const stockChip = noStock ? "neg" : lowStock ? "warn" : "pos";
const stockLabel = noStock ? "out of stock" : lowStock ? "low stock" : "in stock";
return (
{img ?
:
}
{p.name}
{D.currency(Number(p.price || 0))}
{p.compare_at_price && Number(p.compare_at_price) > Number(p.price) && (
{D.currency(Number(p.compare_at_price))}
)}
{stockLabel}
{p.status && {p.status}}
{String(p.id).slice(0, 8).toUpperCase()}} />
{p.sku && {p.sku}} />}
);
};
// ── USER / DRIVER view ─────────────────────────────────────────────────────────
const UserEntityView = ({ id }) => {
const sb = window.supabaseClient;
const D = window.PipalData;
const [u, setU] = useStateE(null);
const [driver, setDriver] = useStateE(null);
const [orders, setOrders] = useStateE([]);
const [state, setState] = useStateE("loading");
useEffectE(() => {
let alive = true;
(async () => {
setState("loading");
const { data: prof } = await sb.from("user_profiles")
.select("id, display_name, username, phone, email, verification_level, account_status, can_deliver, created_at")
.eq("id", id).single();
if (!alive) return;
if (!prof) { setState("missing"); return; }
const [{ data: dp }, { data: buyerOrders }] = await Promise.all([
sb.from("delivery_partners").select("status, vehicle_type, coverage_city, rating, total_deliveries, completed_deliveries").eq("user_id", id).maybeSingle(),
sb.from("orders").select("id, order_number, total_amount, order_status, created_at").eq("buyer_id", id).order("created_at", { ascending: false }).limit(5),
]);
if (!alive) return;
setU(prof); setDriver(dp || null); setOrders(buyerOrders || []); setState("ok");
})();
return () => { alive = false; };
}, [id]);
if (state === "loading") return
;
if (state === "missing") return
User not found.;
const name = u.display_name || u.username || "Unknown";
return (
{name[0]?.toUpperCase()}
{name}
{u.username ? "@" + u.username : ""}{u.phone ? " · " + u.phone : ""}
{u.account_status && {u.account_status}}
{u.verification_level && {u.verification_level}}
{u.can_deliver && driver}
{driver && (
)}
{u.email && }
{String(u.id).slice(0, 8).toUpperCase()}} />
{orders.length === 0
? No orders
: orders.map(o => (
{D.compactCurrency(Number(o.total_amount || 0))}
))}
);
};
// ── DELIVERY view ──────────────────────────────────────────────────────────────
const DeliveryEntityView = ({ id }) => {
const sb = window.supabaseClient;
const D = window.PipalData;
const [d, setD] = useStateE(null);
const [state, setState] = useStateE("loading");
useEffectE(() => {
let alive = true;
(async () => {
setState("loading");
const { data } = await sb.from("deliveries")
.select("id, tracking_number, status, delivery_tier, is_flash, pickup_address, delivery_address, distance_km, fee, created_at, driver_id, order_id, orders(id, order_number, total_amount, store_id, stores(id, name))")
.eq("id", id).single();
if (!alive) return;
if (!data) { setState("missing"); return; }
let driverName = null;
if (data.driver_id) {
const { data: dp } = await sb.from("user_profiles").select("display_name, username").eq("id", data.driver_id).maybeSingle();
driverName = dp?.display_name || dp?.username || null;
}
if (!alive) return;
setD({ ...data, driverName }); setState("ok");
})();
return () => { alive = false; };
}, [id]);
if (state === "loading") return
;
if (state === "missing") return
Delivery not found.;
const statusChip = { delivered: "pos", failed: "neg", returned: "neg", returning_to_store: "warn", assigned: "info", picked_up: "accent" }[d.status] || "warn";
return (
{String(d.status || "").replace(/_/g, " ")}}
/>
{d.orders?.store_id && (
)}
{d.driver_id && (
)}
{d.pickup_address || "—"}} />
{d.delivery_address || "—"}} />
{d.fee != null && }
{String(d.id).slice(0, 8).toUpperCase()}} />
);
};
// ── Exports ────────────────────────────────────────────────────────────────────
window.EntityLink = EntityLink;
window.EntityDrawer = EntityDrawer;
window.EntityStore = EntityStore;