// The Fone Shop — Admin PWA (mobile-first)
// Tabs: Leads · Bookings · Shop(Services|Stock) · Settings
const { useState, useMemo, useEffect, useRef } = React;
// ========== DATA ==========
const LEADS = [
{ ref: 'FS-20260419-M3R8', name: 'Karen Willis', phone: '07891 234 556', email: 'karen.w@gmail.com', device: 'iPhone 14', issue: 'Back glass cracked', channel: 'camera', received: '11 min ago', starting: 75 },
{ ref: 'FS-20260419-H2J1', name: 'Mark T.', phone: '07712 009 441', email: 'markt1988@outlook.com', device: 'Samsung Galaxy S22', issue: 'Screen replacement', channel: 'messenger', received: '38 min ago', starting: 120 },
{ ref: 'FS-20260419-Q9P4', name: 'Priya S.', phone: '07900 771 229', email: 'priya.s@icloud.com', device: 'MacBook Air M1', issue: 'Battery won\u2019t charge', channel: 'form', received: '1 h ago', starting: 135 },
{ ref: 'FS-20260419-X2Z7', name: 'Tom Walker', phone: '07545 118 904', email: null, device: 'Nintendo Switch', issue: 'Joy-Con drift', channel: 'camera', received: '2 h ago', starting: 45 },
];
const BOOKINGS = [
{ ref: 'FS-20260418-A7K3', name: 'John Saunders', phone: '07812 556 014', email: 'j.saunders@btinternet.com', device: 'iPhone 13', service: 'Screen repair', status: 'in_progress', due: 'Today 16:00', price: 89, consumes: 'SCR-IP13-BLK' },
{ ref: 'FS-20260418-B2M1', name: 'Ellie Price', phone: '07923 100 887', email: 'ellie.price@gmail.com', device: 'iPad Air 4', service: 'Battery swap', status: 'ready', due: 'Today 12:30', price: 110, consumes: 'BAT-IPAD-A4' },
{ ref: 'FS-20260418-C5H9', name: 'Marcus K.', phone: '07455 220 913', email: 'marcusk@hotmail.co.uk', device: 'PS5', service: 'HDMI port repair', status: 'in_progress', due: 'Today 17:00', price: 70, consumes: 'HDMI-PS5' },
{ ref: 'FS-20260417-D8L4', name: 'Sarah M.', phone: '07700 900 122', email: 'sarahm@icloud.com', device: 'iPhone 12', service: 'Back glass', status: 'collected', due: 'Yesterday', price: 55, consumes: 'BCK-IP12' },
{ ref: 'FS-20260418-E3N6', name: 'Dev Patel', phone: '07866 443 201', email: null, device: 'MacBook Pro', service: 'Keyboard repair', status: 'waiting_part', due: 'Mon 21 Apr', price: 195, consumes: 'KBD-MBP16' },
];
// SERVICES: what the shop sells. Each has variants (device-specific) or a flat price.
// Variants link to a stock SKU — completing the service consumes 1 from stock.
const SERVICES_SEED = [
{
id: 'screen', name: 'Screen repair', kind: 'variant',
icon: 'screen', description: 'OEM-grade screen replacement, 12-month warranty.',
variants: [
{ id: 'sv-ip15p', device: 'iPhone 15 Pro', price: 189, sku: 'SCR-IP15P-TI', durationMin: 45 },
{ id: 'sv-ip14', device: 'iPhone 14', price: 129, sku: 'SCR-IP14-BLK', durationMin: 45 },
{ id: 'sv-ip13', device: 'iPhone 13', price: 89, sku: 'SCR-IP13-BLK', durationMin: 40 },
{ id: 'sv-s22', device: 'Samsung S22', price: 120, sku: 'SCR-S22-BLK', durationMin: 50 },
{ id: 'sv-ipa4', device: 'iPad Air 4', price: 135, sku: 'SCR-IPAD-A4', durationMin: 60 },
],
},
{
id: 'battery', name: 'Battery swap', kind: 'variant',
icon: 'battery', description: 'Fresh cell, calibration, tested under load.',
variants: [
{ id: 'bv-ip13', device: 'iPhone 13', price: 55, sku: 'BAT-IP13', durationMin: 30 },
{ id: 'bv-ipa4', device: 'iPad Air 4', price: 110, sku: 'BAT-IPAD-A4', durationMin: 60 },
{ id: 'bv-mba', device: 'MacBook Air M1', price: 135, sku: 'BAT-MBA-M1', durationMin: 90 },
],
},
{
id: 'backglass', name: 'Back glass', kind: 'variant',
icon: 'glass', description: 'Laser cut, UV-bonded. Same-day on iPhone 12+.',
variants: [
{ id: 'gv-ip12', device: 'iPhone 12', price: 55, sku: 'BCK-IP12', durationMin: 45 },
{ id: 'gv-ip14', device: 'iPhone 14', price: 75, sku: 'BCK-IP14', durationMin: 45 },
],
},
{
id: 'hdmi', name: 'HDMI port repair', kind: 'variant',
icon: 'console', description: 'Console port micro-soldering.',
variants: [
{ id: 'hv-ps5', device: 'PS5', price: 70, sku: 'HDMI-PS5', durationMin: 90 },
{ id: 'hv-xbox', device: 'Xbox Series X', price: 75, sku: 'HDMI-XBXSX', durationMin: 90 },
],
},
{
id: 'diag', name: 'Diagnostic', kind: 'flat',
icon: 'diag', description: '30-minute workup. Fee redeemed against any repair.',
price: 15, durationMin: 30,
},
{
id: 'water', name: 'Liquid damage', kind: 'flat',
icon: 'water', description: 'Ultrasonic clean, board inspection, no-fix-no-fee.',
price: 45, durationMin: 120,
},
];
// STOCK: real parts. Cost = what the shop pays, not what it sells for.
const STOCK_SEED = [
{ sku: 'SCR-IP15P-TI', name: 'iPhone 15 Pro screen — Titanium', cost: 98, qty: 2, min: 1, supplier: 'MobileSentrix', lastIn: '12 Apr', turn: 8 },
{ sku: 'SCR-IP14-BLK', name: 'iPhone 14 screen — Black', cost: 62, qty: 1, min: 2, supplier: 'MobileSentrix', lastIn: '02 Apr', turn: 14 },
{ sku: 'SCR-IP13-BLK', name: 'iPhone 13 screen — Black', cost: 38, qty: 4, min: 2, supplier: 'MobileSentrix', lastIn: '09 Apr', turn: 22 },
{ sku: 'SCR-S22-BLK', name: 'Samsung S22 screen — Black', cost: 55, qty: 3, min: 1, supplier: 'ETrade', lastIn: '08 Apr', turn: 6 },
{ sku: 'SCR-IPAD-A4', name: 'iPad Air 4 screen', cost: 72, qty: 3, min: 1, supplier: 'iFixit', lastIn: '01 Apr', turn: 3 },
{ sku: 'BAT-IP13', name: 'iPhone 13 battery', cost: 18, qty: 6, min: 3, supplier: 'MobileSentrix', lastIn: '10 Apr', turn: 18 },
{ sku: 'BAT-IPAD-A4', name: 'iPad Air 4 battery', cost: 48, qty: 2, min: 1, supplier: 'iFixit', lastIn: '28 Mar', turn: 4 },
{ sku: 'BAT-MBA-M1', name: 'MacBook Air M1 battery', cost: 65, qty: 0, min: 1, supplier: 'iFixit', lastIn: '20 Mar', turn: 2 },
{ sku: 'BCK-IP12', name: 'iPhone 12 back glass', cost: 14, qty: 5, min: 2, supplier: 'MobileSentrix', lastIn: '11 Apr', turn: 12 },
{ sku: 'BCK-IP14', name: 'iPhone 14 back glass', cost: 22, qty: 3, min: 2, supplier: 'MobileSentrix', lastIn: '06 Apr', turn: 8 },
{ sku: 'HDMI-PS5', name: 'PS5 HDMI port', cost: 9, qty: 2, min: 1, supplier: 'AliExpress', lastIn: '03 Apr', turn: 4 },
{ sku: 'HDMI-XBXSX', name: 'Xbox Series X HDMI port', cost: 11, qty: 1, min: 1, supplier: 'AliExpress', lastIn: '25 Mar', turn: 2 },
{ sku: 'KBD-MBP16', name: 'MacBook Pro 16" keyboard', cost: 72, qty: 0, min: 1, supplier: 'iFixit', lastIn: '—', turn: 1 },
];
// ========== ATOMS ==========
const Eyebrow = ({ children, tone }) => (
{children}
);
const Mono = ({ children, style, ...rest }) => (
{children}
);
const StatusPill = ({ s }) => {
const MAP = {
in_progress: { label: 'In progress', color: '#ff9f0a' },
ready: { label: 'Ready', color: '#30d158' },
collected: { label: 'Collected', color: '#86868b' },
waiting_part: { label: 'Waiting part', color: '#2997ff' },
};
const m = MAP[s] || MAP.in_progress;
return (
{m.label}
);
};
const ChannelIcon = ({ c }) => {
const ICONS = {
camera: ,
messenger: ,
form: ,
};
return {ICONS[c]};
};
const ServiceIcon = ({ kind, size = 18, color = '#FF6B1A' }) => {
const s = { width: size, height: size, color };
switch (kind) {
case 'screen': return ;
case 'battery': return ;
case 'glass': return ;
case 'console': return ;
case 'diag': return ;
case 'water': return ;
default: return ;
}
};
const SegmentedControl = ({ value, onChange, options }) => (
{options.map(o => {
const active = o.value === value;
return (
);
})}
);
const StockBadge = ({ qty, min }) => {
const tone = qty === 0 ? { c: '#ff453a', bg: 'rgba(255,69,58,0.12)', l: 'OUT' }
: qty <= min ? { c: '#ff9f0a', bg: 'rgba(255,159,10,0.12)', l: 'LOW' }
: { c: '#30d158', bg: 'rgba(48,209,88,0.1)', l: 'OK' };
return (
{qty} {tone.l}
);
};
const Field = ({ label, children }) => (
);
const fieldInput = {
width: '100%', background: 'transparent', border: 0, outline: 'none',
color: '#fff', font: '14px Inter', letterSpacing: '-0.011em', padding: 0,
};
// Bottom sheet — thumb-friendly modal
const Sheet = ({ open, onClose, title, subtitle, children, actions }) => {
if (!open) return null;
return (
e.stopPropagation()} style={{
width: '100%', background: '#0a0a0a',
borderTop: '1px solid #2c2c2e',
borderRadius: '22px 22px 0 0',
padding: 16, maxHeight: '88%', overflow: 'auto',
animation: 'slideUp 320ms cubic-bezier(0.25,0.1,0.25,1)',
display: 'flex', flexDirection: 'column', gap: 14,
}}>
{(title || subtitle) && (
{subtitle &&
{subtitle}}
{title &&
{title}
}
)}
{children}
{actions &&
{actions}
}
);
};
const PrimaryButton = ({ children, disabled, tone = 'ember', onClick, flex = true }) => (
);
const GhostButton = ({ children, onClick }) => (
);
const qbtn = (disabled) => ({
width: 30, height: 30, borderRadius: 8,
background: disabled ? '#0a0a0a' : '#1d1d1f',
border: 0, color: disabled ? '#3a3a3c' : '#fff',
cursor: disabled ? 'not-allowed' : 'pointer',
font: '600 15px Inter', userSelect: 'none',
});
Object.assign(window, { Eyebrow, Mono, StatusPill, ChannelIcon, ServiceIcon,
SegmentedControl, StockBadge, Field, fieldInput, Sheet, PrimaryButton, GhostButton, qbtn });