setOpen(false)}/>}
{/* Main */}
);
}
/* ───────────── Icons (admin-specific minimal set) ───────────── */
const AdminIcons = {
dash: (p) => ,
bag: (p) => ,
grid: (p) => ,
box: (p) => ,
chat: (p) => ,
chart: (p) => ,
cog: (p) => ,
bell: (p) => ,
exit: (p) => ,
trash: (p) => ,
edit: (p) => ,
dots: (p) => ,
upload:(p) => ,
filter:(p) => ,
layers:(p) => ,
alert: (p) => ,
trend: (p) => ,
};
/* ───────────── Page: Dashboard ───────────── */
function AdminDashboard() {
const a = useAdmin();
return (
{/* Top bar */}
{children}
{ADMIN_KPIS.map(k => (
))}
{/* Sales chart + channels */}
{k.label}
{k.value}
= 0 ? 'text-rose' : 'text-deep/60'}`}>
{k.delta >= 0 ? '↑' : '↓'}
{Math.abs(k.delta)}%
vs previous
Revenue · Last 30 days
${ADMIN_SALES_30D.reduce((s,d)=>s+d.value,0).toLocaleString()}
{['7d','30d','90d','12m'].map((r, i) => (
))}
Traffic sources
-
{ADMIN_CHANNELS.map(c => (
- {c.name} {c.pct}% ))}
{/* Top products */}
{/* Recent orders */}
{/* Tickets + Geography */}
Top products
View all
-
{ADMIN_TOP_PRODUCTS.map((p, i) => {
const full = ALL_PRODUCTS.find(x => x.id === p.id);
return (
-
0{i+1}
{full &&
}
{p.name}{p.sold} sold${p.revenue.toLocaleString()}
);
})}
Recent orders
View all
| Order | Customer | Date | Status | Total |
|---|---|---|---|---|
| #{o.id} | {o.customer} | {o.date} | ${o.total} |
Latest tickets
Go to inbox
-
{a.tickets.slice(0, 4).map(t => (
-
By country
-
{ADMIN_COUNTRIES.map(c => (
-
{c.name} {c.pct}%{/* Inventory health */}))}{(() => { const units = a.products.reduce((s,p) => s + (p.stock||0), 0); const value = a.products.reduce((s,p) => s + (p.stock||0)*(p.price||0), 0); const low = a.products.filter(p => (p.stock||0) > 0 && (p.stock||0) < 10); const out = a.products.filter(p => (p.stock||0) === 0).length; return (Manage stockInventory health{[ ['Units in stock', units.toLocaleString()], ['Inventory value', `$${value.toLocaleString()}`], ['Low stock', low.length, low.length>0], ['Out of stock', out, out>0], ].map(([label, val, warn]) => (); })()}))} {low.length > 0 && ({label}{val}Running low: {low.slice(0,5).map(p => ( {p.name} {p.stock} left ))})}
{title}
{sub &&{sub}
}{actions}
}
{[['all','All'], ['live','Live'], ['draft','Drafts']].map(([k, l]) => (
))}
| Product | Category | Price | Stock | Status | Actions |
|---|---|---|---|---|---|
|
{p.name}
{p.id}
|
{p.category} | ${p.price} |
{p.stock}
{p.stock < 10 && Low}
|
Nothing here
No products match your filters.
{rows.length} of {a.products.length} pieces
1 / 1
Create a colour
{duo && (
)}
setName(e.target.value)} placeholder="Name (optional)" className="admin-input !w-[150px] !py-2 self-end"/>
{duo && (
Split swatch — half {a.toUpperCase()}, half {b.toUpperCase()}.
)}
{tags.length > 0 && (
);
}
function ImageUploader({ value, onChange }) {
const inputRef = useRef(null);
const [drag, setDrag] = useState(false);
const isData = typeof value === 'string' && value.startsWith('data:');
const readFile = (file) => {
if (!file || !file.type.startsWith('image/')) return;
const fr = new FileReader();
fr.onload = () => onChange(fr.result);
fr.readAsDataURL(file);
};
return (
<>
{tags.map((t, i) => (
{i === 0 && }
{t}
))}
)}
setInput(e.target.value)}
onKeyDown={e => { if (e.key === 'Enter') { e.preventDefault(); addTag(input); } }}
placeholder="Type a tag, press Enter…" className="admin-input"/>
{presets.filter(p => !tags.some(t => t.toLowerCase() === p.toLowerCase())).map(p => (
))}
The first tag shows as the badge on the storefront.
inputRef.current && inputRef.current.click()}
onDragOver={e => { e.preventDefault(); setDrag(true); }}
onDragLeave={() => setDrag(false)}
onDrop={e => { e.preventDefault(); setDrag(false); readFile(e.dataTransfer.files[0]); }}
className={`group mt-3 relative aspect-[3/4] overflow-hidden bg-blush-2 cursor-pointer transition-all
${drag ? 'ring-2 ring-rose ring-offset-2 ring-offset-ivory' : ''}`}>
{value && 
}
readFile(e.target.files[0])}/>
onChange(e.target.value)} className="admin-input mt-3" placeholder="…or paste an image URL"/>
{isData && {drag ? 'Drop to upload' : value ? 'Replace image' : 'Click or drop image'}
PNG · JPG · WEBP
Uploaded file attached ✓
}
);
}
/* ───────────── Page: Product form (new / edit) ───────────── */
function AdminProductFormPage({ productId }) {
const a = useAdmin();
const editing = productId && productId !== 'new';
const existing = editing ? a.products.find(p => p.id === productId) : null;
const [form, setForm] = useState(() => {
if (existing) return { ...existing, tags: existing.tags || (existing.tag ? [existing.tag] : []) };
return {
name: '', price: 0, category: 'dresses', stock: 20, status: 'draft',
description: '', img: IMG('photo-1539109136881-3be0616acf4b', 700),
colors: [SW.blush, SW.ivory], tags: ['New'], tag: 'New',
};
});
const set = (k, v) => setForm(f => ({...f, [k]: v}));
const setTags = (tags) => setForm(f => ({...f, tags, tag: tags[0] || ''}));
const onSave = (e) => {
e.preventDefault();
a.saveProduct(form);
window.location.hash = '#admin/products';
};
return (