// Certo — Internal Dashboard
const MOCK_ORDERS = [
{ id: 'CRT-2204-8841', customer: 'Adaeze Okoye', phone: '08031234567', address: '14 Adeola Odeku St, Victoria Island, Lagos', product: 'iPhone 15 Pro 256GB', status: 'Customs Clearance', usd: 1098, ngn: 1745820, date: 'Apr 22, 2026', flag: false },
{ id: 'CRT-2203-4412', customer: 'Emeka Obi', phone: '07056789012', address: '3 Aminu Kano Crescent, Wuse 2, Abuja', product: 'MacBook Air M3 13"', status: 'Delivered', usd: 1198, ngn: 1904820, date: 'Apr 18, 2026', flag: false },
{ id: 'CRT-2203-3301', customer: 'Ngozi Eze', phone: '09012345678', address: '7 Rumuola Rd, Port Harcourt, Rivers', product: 'AirPods Pro 2nd Gen', status: 'Delivered', usd: 348, ngn: 553320, date: 'Apr 15, 2026', flag: false },
{ id: 'CRT-2204-9210', customer: 'Tunde Balogun', phone: '08167890123', address: '22 Bodija Estate, Ibadan, Oyo', product: 'iPhone 15 Pro 512GB', status: 'Order Confirmed', usd: 1298, ngn: 2063820, date: 'Apr 24, 2026', flag: false },
{ id: 'CRT-2204-7752', customer: 'Chisom Nwosu', phone: '07034561234', address: '5 Independence Layout, Enugu', product: 'iPad Pro 11"', status: 'Purchased from Apple', usd: 999, ngn: 1588410, date: 'Apr 23, 2026', flag: true },
{ id: 'CRT-2202-1190', customer: 'Kemi Adeleke', phone: '08098765432', address: '9 GRA Phase 2, Benin City, Edo', product: 'Apple Watch S9 41mm', status: 'Delivered', usd: 399, ngn: 634410, date: 'Apr 10, 2026', flag: false },
{ id: 'CRT-2204-6631', customer: 'Femi Oladele', phone: '08123456789', address: '31 Allen Avenue, Ikeja, Lagos', product: 'MacBook Air M3 15"', status: 'In Transit to US Partner', usd: 1498, ngn: 2381820, date: 'Apr 25, 2026', flag: false },
{ id: 'CRT-2204-5502', customer: 'Amaka Chukwu', phone: '07089012345', address: '18 Trans-Amadi Industrial Layout, Port Harcourt', product: 'AirPods Pro 2 (Refurb)', status: 'Arrived in Nigeria', usd: 249, ngn: 395910, date: 'Apr 27, 2026', flag: false },
];
const INITIAL_PRODUCTS = PRODUCTS.map(p => ({
...p,
stock: p.inStock ? Math.floor(Math.random() * 8) + 1 : 0,
ngnPrice: p.usdPrice * CERTO_RATE,
}));
const ALL_STATUSES = [
'Order Confirmed',
'Purchased from Apple',
'In Transit to US Partner',
'Customs Clearance',
'Arrived in Nigeria',
'Out for Delivery',
'Delivered',
];
const statusColor = (s) => {
if (s === 'Delivered') return { bg: 'oklch(93% 0.06 155)', color: 'oklch(35% 0.15 155)' };
if (s === 'Order Confirmed') return { bg: 'oklch(93% 0.06 250)', color: 'oklch(40% 0.15 250)' };
if (s === 'Customs Clearance') return { bg: 'oklch(96% 0.06 80)', color: 'oklch(45% 0.15 65)' };
if (s === 'Arrived in Nigeria') return { bg: 'oklch(94% 0.08 155)', color: 'oklch(38% 0.16 155)' };
if (s === 'Out for Delivery') return { bg: 'oklch(95% 0.07 60)', color: 'oklch(42% 0.18 55)' };
if (s === 'In Transit to US Partner')return { bg: 'oklch(94% 0.06 220)', color: 'oklch(42% 0.14 220)' };
if (s === 'Purchased from Apple') return { bg: 'oklch(94% 0.05 30)', color: 'oklch(44% 0.14 30)' };
return { bg: 'oklch(94% 0.03 250)', color: 'oklch(45% 0.12 250)' };
};
// Module-level style constants used by the edit modal — stable references prevent remounts
const MODAL_FLD = {
padding: '9px 13px', borderRadius: 8, border: '1.5px solid var(--border)',
background: 'var(--bg-alt)', fontFamily: 'var(--font-body)', fontSize: 13,
color: 'var(--text)', outline: 'none', boxSizing: 'border-box', width: '100%',
};
const MODAL_LBL = { fontFamily: 'var(--font-body)', fontSize: 11, fontWeight: 600, color: 'var(--text-muted)', display: 'block', marginBottom: 5, textTransform: 'uppercase', letterSpacing: '0.04em' };
const modalFocus = e => e.target.style.borderColor = 'var(--accent)';
const modalBlur = e => e.target.style.borderColor = 'var(--border)';
// Defined outside DashboardPage so the component identity is stable across re-renders
const ListEditor = ({ label, listKey, blank = '', editDraft, setListItem, addListItem, removeListItem }) => (
{label}
{(editDraft[listKey] || []).map((item, i) => (
setListItem(listKey, i, e.target.value)}
onFocus={modalFocus} onBlur={modalBlur}
style={{ ...MODAL_FLD, flex: 1 }} />
))}
);
// Self-contained ConditionBadge so admin.html doesn't need ShopPage.jsx loaded
const ConditionBadge = ({ condition }) => {
const styles = {
new: { bg: 'oklch(93% 0.06 155)', color: 'oklch(35% 0.15 155)', label: 'New' },
refurb:{ bg: 'oklch(94% 0.06 250)', color: 'oklch(40% 0.15 250)', label: 'Refurbished' },
};
const s = styles[condition] || styles.new;
return (
{s.label}
);
};
const DashboardPage = ({ navigate, subPage = 'orders', liveRate }) => {
const { isMobile } = useResponsive();
const [activeTab, setActiveTab] = React.useState(subPage);
const [forexRate, setForexRate] = React.useState(liveRate || CERTO_RATE);
const [forexInput, setForexInput] = React.useState(String(liveRate || CERTO_RATE));
const [forexSaved, setForexSaved] = React.useState(false);
const [manualOverride, setManualOverride] = React.useState(false);
const [fetchedAt, setFetchedAt] = React.useState(() => {
try {
const ts = localStorage.getItem('certo_rate_ts');
return ts ? new Date(Number(ts)) : null;
} catch(e) { return null; }
});
const [autoRate, setAutoRate] = React.useState(null);
// Own fetch — dashboard is self-sufficient, doesn't wait on App.jsx timing
React.useEffect(() => {
fetch('https://api.exchangerate-api.com/v4/latest/USD')
.then(r => r.json())
.then(data => {
if (data.rates && data.rates.NGN) {
const rate = Math.round(data.rates.NGN) + 100;
const now = new Date();
CERTO_RATE = rate;
setFetchedAt(now);
setAutoRate(rate);
if (!manualOverride) {
setForexRate(rate);
setForexInput(String(rate));
}
try {
localStorage.setItem('certo_rate', String(rate));
localStorage.setItem('certo_rate_ts', String(now.getTime()));
} catch(e) {}
}
})
.catch(() => {});
}, []);
const [selectedOrder,setSelectedOrder]= React.useState(null);
const [orders, setOrders] = React.useState(MOCK_ORDERS);
const [products, setProducts] = React.useState(INITIAL_PRODUCTS);
const [editingProduct, setEditingProduct] = React.useState(null);
const [editDraft, setEditDraft] = React.useState({});
const [editSection, setEditSection] = React.useState('basic');
// Orders — filter + search state
const [orderSearch, setOrderSearch] = React.useState('');
const [orderStatusFilter,setOrderStatusFilter] = React.useState('all');
const [orderTimeFilter, setOrderTimeFilter] = React.useState('all');
const [orderFlaggedOnly, setOrderFlaggedOnly] = React.useState(false);
const tabs = [
{ key: 'orders', label: 'Orders', count: orders.filter(o => o.status !== 'Delivered').length },
{ key: 'products', label: 'Products' },
{ key: 'forex', label: 'Forex' },
{ key: 'revenue', label: 'Revenue' },
{ key: 'customers', label: 'Customers' },
];
const totalRevNgn = orders.reduce((s, o) => s + o.ngn, 0);
const totalRevUsd = orders.reduce((s, o) => s + o.usd, 0);
const delivered = orders.filter(o => o.status === 'Delivered').length;
const active = orders.filter(o => o.status !== 'Delivered').length;
// Filtering logic
const filteredOrders = React.useMemo(() => {
return orders.filter(o => {
if (orderSearch.trim()) {
const q = orderSearch.trim().toLowerCase();
const hit =
o.id.toLowerCase().includes(q) ||
o.customer.toLowerCase().includes(q) ||
o.phone.includes(q) ||
o.address.toLowerCase().includes(q) ||
o.product.toLowerCase().includes(q);
if (!hit) return false;
}
if (orderStatusFilter !== 'all' && o.status !== orderStatusFilter) return false;
if (orderFlaggedOnly && !o.flag) return false;
if (orderTimeFilter !== 'all') {
const d = new Date(o.date);
const now = new Date();
if (orderTimeFilter === 'today') {
if (d.toDateString() !== now.toDateString()) return false;
} else if (orderTimeFilter === 'week') {
if (d < new Date(now - 7 * 86400000)) return false;
} else if (orderTimeFilter === 'month') {
if (d < new Date(now - 30 * 86400000)) return false;
}
}
return true;
});
}, [orders, orderSearch, orderStatusFilter, orderTimeFilter, orderFlaggedOnly]);
const activeFilters =
(orderSearch.trim() ? 1 : 0) +
(orderStatusFilter !== 'all' ? 1 : 0) +
(orderTimeFilter !== 'all' ? 1 : 0) +
(orderFlaggedOnly ? 1 : 0);
const clearFilters = () => {
setOrderSearch('');
setOrderStatusFilter('all');
setOrderTimeFilter('all');
setOrderFlaggedOnly(false);
};
const inputStyle = {
padding: '9px 14px', borderRadius: 9, border: '1.5px solid var(--border)',
background: 'var(--bg)', fontFamily: 'var(--font-body)', fontSize: 13,
color: 'var(--text)', outline: 'none', cursor: 'pointer',
};
const StatCard = ({ label, value, sub, accent }) => (
{label}
{value}
{sub &&
{sub}
}
);
const OrdersTab = () => (
o.flag).length} accent="oklch(50% 0.18 25)" />
{selectedOrder ? (
{[
{ label: 'Customer', value: selectedOrder.customer },
{ label: 'Phone', value: selectedOrder.phone },
{ label: 'Product', value: selectedOrder.product },
{ label: 'Order Date', value: selectedOrder.date },
{ label: 'USD Total', value: `$${selectedOrder.usd.toLocaleString()}` },
{ label: 'NGN Total', value: `₦${selectedOrder.ngn.toLocaleString()}` },
{ label: 'Status', value: selectedOrder.status },
{ label: 'Address', value: selectedOrder.address },
].map(f => (
))}
) : (
{/* Search + filters bar */}
{/* Search */}
🔍
setOrderSearch(e.target.value)}
style={{ ...inputStyle, paddingLeft: 32, width: '100%', boxSizing: 'border-box' }}
/>
{/* Status filter */}
{/* Time filter */}
{/* Flagged toggle */}
{/* Clear filters */}
{activeFilters > 0 && (
)}
{filteredOrders.length} of {orders.length}
{/* Orders table */}
{['Order ID', 'Customer', 'Product', 'Status', 'NGN Total', 'Date', ''].map(h => (
| {h} |
))}
{filteredOrders.length === 0 ? (
|
No orders match your filters.
|
) : filteredOrders.map(o => {
const sc = statusColor(o.status);
return (
e.currentTarget.style.background = 'var(--bg-alt)'}
onMouseLeave={e => e.currentTarget.style.background = 'transparent'}
onClick={() => setSelectedOrder(o)}>
|
{o.flag && 🚩}{o.id}
|
{o.customer}
{o.phone}
|
{o.product} |
{o.status}
|
₦{o.ngn.toLocaleString()} |
{o.date} |
→
|
);
})}
)}
);
const openEdit = (p) => {
setEditDraft(JSON.parse(JSON.stringify(p))); // deep copy
setEditSection('basic');
setEditingProduct(p);
};
const openAdd = () => {
const blank = {
id: 'product-' + Date.now(),
name: 'New Product', subtitle: '', type: 'iPhone',
condition: 'new', conditionNote: '',
usdPrice: 0, images: [], badge: '', deliveryDays: '10–18 business days',
inStock: true, featured: false,
overview: [], specs: [], includes: [], features: [], techSpecs: [],
stock: 0, ngnPrice: 0,
};
setEditDraft(blank);
setEditSection('basic');
setEditingProduct(blank);
};
const saveEdit = () => {
const updated = {
...editDraft,
usdPrice: Number(editDraft.usdPrice),
ngnPrice: Number(editDraft.usdPrice) * forexRate,
stock: Number(editDraft.stock),
};
const exists = products.some(p => p.id === editingProduct.id);
if (exists) {
setProducts(prev => prev.map(p => p.id === editingProduct.id ? updated : p));
} else {
setProducts(prev => [...prev, updated]);
}
setEditingProduct(null);
};
// Draft mutation helpers
const setDF = (key, val) => setEditDraft(d => ({...d, [key]: val}));
const setListItem = (key, i, val) => setEditDraft(d => ({...d, [key]: d[key].map((x, j) => j === i ? val : x)}));
const addListItem = (key, blank) => setEditDraft(d => ({...d, [key]: [...(d[key]||[]), blank]}));
const removeListItem = (key, i) => setEditDraft(d => ({...d, [key]: d[key].filter((_, j) => j !== i)}));
const setFeature = (i, field, val) => setEditDraft(d => ({...d, features: d.features.map((f, j) => j === i ? {...f, [field]: val} : f)}));
const setSpecSection = (si, field, val) => setEditDraft(d => ({...d, techSpecs: d.techSpecs.map((s, j) => j === si ? {...s, [field]: val} : s)}));
const setSpecItem = (si, ii, val) => setEditDraft(d => ({...d, techSpecs: d.techSpecs.map((s, j) => j === si ? {...s, items: s.items.map((x, k) => k === ii ? val : x)} : s)}));
const addSpecItem = (si) => setEditDraft(d => ({...d, techSpecs: d.techSpecs.map((s, j) => j === si ? {...s, items: [...s.items, '']} : s)}));
const removeSpecItem = (si, ii) => setEditDraft(d => ({...d, techSpecs: d.techSpecs.map((s, j) => j === si ? {...s, items: s.items.filter((_, k) => k !== ii)} : s)}));
const renderEditModal = () => {
if (!editingProduct || !editDraft.name) return null;
const fld = MODAL_FLD;
const lbl = MODAL_LBL;
const focus = modalFocus;
const blur = modalBlur;
const isNew = !products.some(p => p.id === editingProduct.id);
const EDIT_SECTIONS = [
{ key: 'basic', label: 'Basic Info' },
{ key: 'condition', label: 'Condition' },
{ key: 'images', label: 'Images' },
{ key: 'overview', label: 'Overview' },
{ key: 'specs', label: 'Quick Specs' },
{ key: 'inbox', label: "What's in the Box" },
{ key: 'features', label: 'Features' },
{ key: 'techspecs', label: 'Tech Specs' },
];
const renderSection = () => {
switch (editSection) {
case 'basic': return (
);
case 'condition': return (