// Shop tab: Services | Stock segmented. Services are what the shop sells (priced, addable, // variants link to stock). Stock is parts-on-shelf (cost, supplier, qty, auto-consumed by services). const { useState: useState3, useMemo: useMemo3 } = React; // ---- STOCK LOOKUP ---- const stockBySku = (stock) => Object.fromEntries(stock.map(s => [s.sku, s])); // ========================================================== // SERVICES TAB // ========================================================== const ServicesList = ({ services, stock, onAddService, onAddVariant, onEditVariant, onEditService }) => { const [expanded, setExpanded] = useState3(new Set(['screen'])); const bySku = useMemo3(() => stockBySku(stock), [stock]); const toggle = (id) => setExpanded(s => { const n = new Set(s); n.has(id) ? n.delete(id) : n.add(id); return n; }); // insight: how many variants are blocked by OOS stock? const blocked = useMemo3(() => { let n = 0; services.forEach(s => { if (s.kind !== 'variant') return; s.variants.forEach(v => { if (bySku[v.sku]?.qty === 0) n++; }); }); return n; }, [services, bySku]); return (

{/* Insight strip */} {blocked > 0 && (

{blocked} service{blocked > 1 ? 's' : ''} blocked by out-of-stock parts

)} {services.map(s => { const open = expanded.has(s.id); const variantCount = s.kind === 'variant' ? s.variants.length : 1; const priceRange = s.kind === 'flat' ? `£${s.price}` : (() => { const prices = s.variants.map(v => v.price); const min = Math.min(...prices), max = Math.max(...prices); return min === max ? `£${min}` : `£${min}–${max}`; })(); const lowVariants = s.kind === 'variant' ? s.variants.filter(v => (bySku[v.sku]?.qty ?? 0) <= (bySku[v.sku]?.min ?? 0)).length : 0; return (

{s.description}

{s.kind === 'flat' ? ( ) : (

{s.variants.map(v => { const stk = bySku[v.sku]; const qty = stk?.qty ?? 0; const min = stk?.min ?? 0; return ( ); })}

)}

); })}

); }; // Edit variant sheet (also used for "add variant" with blank) const VariantSheet = ({ service, variant, stock, onClose, onSave, onDelete }) => { const [device, setDevice] = useState3(''); const [price, setPrice] = useState3(''); const [sku, setSku] = useState3(''); const [dur, setDur] = useState3(''); React.useEffect(() => { if (!service) return; setDevice(variant?.device ?? ''); setPrice(variant?.price != null ? String(variant.price) : ''); setSku(variant?.sku ?? ''); setDur(variant?.durationMin != null ? String(variant.durationMin) : '45'); }, [service, variant]); if (!service) return null; const isNew = !variant; const stk = stock.find(s => s.sku === sku); return ( onSave({ device, price: Number(price) || 0, sku, durationMin: Number(dur) || 45 })}> {isNew ? 'Add variant' : 'Save changes'} , !isNew && onDelete(variant)}>Delete, Cancel, ].filter(Boolean)} >

setDevice(e.target.value)} style={fieldInput} placeholder="e.g. iPhone 15 Pro Max" />

setPrice(e.target.value.replace(/[^\d.]/g, ''))} style={fieldInput} placeholder="0.00" inputMode="decimal" /> setDur(e.target.value.replace(/\D/g, ''))} style={fieldInput} inputMode="numeric" />

setSku(e.target.value.toUpperCase())} style={fieldInput} placeholder="SCR-IP15PM-TI" /> {stk ? (

{stk.name} · £{stk.cost} cost

) : sku ? (

No stock item with that SKU. Add one in Stock tab.

) : null}

); }; // ========================================================== // STOCK TAB // ========================================================== const StockList = ({ stock, onEdit, onAdd, onAdjust }) => { const [q, setQ] = useState3(''); const [filter, setFilter] = useState3('all'); const filtered = useMemo3(() => stock.filter(s => { if (filter === 'low' && s.qty > s.min) return false; if (filter === 'out' && s.qty > 0) return false; if (q) { const hay = (s.name + ' ' + s.sku + ' ' + s.supplier).toLowerCase(); if (!hay.includes(q.toLowerCase())) return false; } return true; }), [stock, q, filter]); const totalValue = stock.reduce((a, s) => a + s.cost * s.qty, 0); const outCount = stock.filter(s => s.qty === 0).length; const lowCount = stock.filter(s => s.qty > 0 && s.qty <= s.min).length; return (

{/* Inventory summary */}

ON HAND

£{totalValue.toLocaleString('en-GB')}

LOW

{lowCount}

OUT

{outCount}

{/* Search + filters */}

setQ(e.target.value)} placeholder="Search SKU, name, supplier" style={{ width: '100%', height: 38, padding: '0 12px 0 34px', background: '#0a0a0a', border: '1px solid #1a1a1a', borderRadius: 10, color: '#fff', font: '13px Inter', outline: 'none' }} />

{[['all', 'All', stock.length], ['low', 'Low', lowCount], ['out', 'Out', outCount]].map(([k, lbl, n]) => ( ))}

{/* Stock rows */}

{filtered.map(s => (

{s.qty}

{(s.qty === 0 || s.qty <= s.min) && (

Min {s.min} · turns {s.turn}/mo · last in {s.lastIn}

)}

))}

); }; const StockSheet = ({ item, onClose, onSave, onDelete, isNew }) => { const [sku, setSku] = useState3(''); const [name, setName] = useState3(''); const [cost, setCost] = useState3(''); const [qty, setQty] = useState3(''); const [min, setMin] = useState3(''); const [supplier, setSupplier] = useState3(''); React.useEffect(() => { if (!item) return; setSku(item.sku ?? ''); setName(item.name ?? ''); setCost(item.cost != null ? String(item.cost) : ''); setQty(item.qty != null ? String(item.qty) : '0'); setMin(item.min != null ? String(item.min) : '1'); setSupplier(item.supplier ?? ''); }, [item]); if (!item) return null; return ( onSave({ sku, name, cost: Number(cost) || 0, qty: Number(qty) || 0, min: Number(min) || 0, supplier, })}>{isNew ? 'Add item' : 'Save changes'}, !isNew && onDelete(item)}>Delete, Cancel, ].filter(Boolean)} >

setSku(e.target.value.toUpperCase())} style={fieldInput} placeholder="SCR-IP15PM-TI" /> setName(e.target.value)} style={fieldInput} placeholder="iPhone 15 Pro Max screen" />

setCost(e.target.value.replace(/[^\d.]/g, ''))} style={fieldInput} inputMode="decimal" /> setQty(e.target.value.replace(/\D/g, ''))} style={fieldInput} inputMode="numeric" /> setMin(e.target.value.replace(/\D/g, ''))} style={fieldInput} inputMode="numeric" />

setSupplier(e.target.value)} style={fieldInput} placeholder="MobileSentrix" />

); }; // ========================================================== // CSV IMPORT (shared) // ========================================================== const CSVImportSheet = ({ open, target, onClose, onApply }) => { const [text, setText] = useState3(''); const [parsed, setParsed] = useState3(null); React.useEffect(() => { if (!open) { setText(''); setParsed(null); } }, [open]); const sample = target === 'stock' ? `sku,name,cost,qty,min,supplier\nSCR-IP15PM-TI,iPhone 15 Pro Max screen,110,3,1,MobileSentrix\nBAT-IP14,iPhone 14 battery,22,4,2,MobileSentrix` : `service,device,price,sku,durationMin\nScreen repair,iPhone 15,149,SCR-IP15-BLK,45\nBattery swap,iPhone 14,55,BAT-IP14,30`; const parse = () => { const lines = text.trim().split(/\r?\n/).filter(Boolean); if (lines.length < 2) { setParsed({ error: 'No rows found' }); return; } const header = lines[0].split(',').map(s => s.trim()); const rows = lines.slice(1).map(l => { const cells = l.split(',').map(s => s.trim()); return Object.fromEntries(header.map((h, i) => [h, cells[i]])); }); setParsed({ rows, header }); }; return ( onApply(parsed.rows)}>Apply {parsed.rows.length} row{parsed.rows.length > 1 ? 's' : ''} : Preview changes, Cancel, ]} >

Paste CSV. First row = headers.

setText(e.target.value)} rows={6} style={{ ...fieldInput, resize: 'none', lineHeight: 1.5, fontSize: 11 }} placeholder={sample} /></Mono>
        </Field>
        {parsed?.error && <div style={{ color: '#ff453a', fontSize: 13 }}>{parsed.error}</div>}
        {parsed?.rows && (
          <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
            <Eyebrow>{parsed.rows.length} ROWS PARSED</Eyebrow>
            {parsed.rows.slice(0, 4).map((r, i) => (
              <div key={i} style={{ padding: '8px 10px', background: '#000', border: '1px solid #1a1a1a', borderRadius: 8, fontSize: 11 }}>
                <Mono>{parsed.header.map(h => `${h}=${r[h] ?? '—'}`).join('  ')}</Mono>
              </div>
            ))}
            {parsed.rows.length > 4 && <div style={{ fontSize: 11, color: '#86868b', textAlign: 'center' }}>+{parsed.rows.length - 4} more</div>}
          </div>
        )}
      </div>
    </Sheet>
  );
};

// ==========================================================
// SHOP TAB (wraps Services/Stock with segmented control)
// ==========================================================
const ShopTab = () => {
  const [seg, setSeg] = useState3('services');
  const [services, setServices] = useState3(SERVICES_SEED);
  const [stock, setStock] = useState3(STOCK_SEED);

// sheet state
  const [variantSheet, setVariantSheet] = useState3(null);   // { service, variant? }
  const [stockSheet, setStockSheet] = useState3(null);       // item or {new:true}
  const [csvTarget, setCsvTarget] = useState3(null);         // 'services'|'stock'|null
  const [serviceAdd, setServiceAdd] = useState3(false);

const bySku = useMemo3(() => stockBySku(stock), [stock]);
  const outCount = stock.filter(s => s.qty === 0).length;
  const lowCount = stock.filter(s => s.qty > 0 && s.qty <= s.min).length;

// VARIANT save/delete
  const saveVariant = (payload) => {
    const { service, variant } = variantSheet;
    setServices(prev => prev.map(s => {
      if (s.id !== service.id) return s;
      if (variant) {
        return { ...s, variants: s.variants.map(v => v.id === variant.id ? { ...v, ...payload } : v) };
      }
      return { ...s, variants: [...s.variants, { id: 'v-' + Date.now(), ...payload }] };
    }));
    setVariantSheet(null);
  };
  const deleteVariant = (variant) => {
    const { service } = variantSheet;
    setServices(prev => prev.map(s => s.id === service.id ? { ...s, variants: s.variants.filter(v => v.id !== variant.id) } : s));
    setVariantSheet(null);
  };

// STOCK save/delete/adjust
  const saveStock = (payload) => {
    const isNew = !stock.find(s => s.sku === stockSheet.sku);
    setStock(prev => isNew
      ? [...prev, { ...payload, lastIn: 'today', turn: 0 }]
      : prev.map(s => s.sku === stockSheet.sku ? { ...s, ...payload } : s));
    setStockSheet(null);
  };
  const deleteStock = (item) => {
    setStock(prev => prev.filter(s => s.sku !== item.sku));
    setStockSheet(null);
  };
  const adjustStock = (item, delta) => {
    setStock(prev => prev.map(s => s.sku === item.sku ? { ...s, qty: Math.max(0, s.qty + delta) } : s));
  };

// Services: add flat service placeholder
  const addFlatService = (name) => {
    const id = name.toLowerCase().replace(/\s+/g, '-').slice(0, 16) + '-' + Date.now().toString(36).slice(-3);
    setServices(prev => [...prev, { id, name, kind: 'variant', icon: 'diag', description: 'Add a description.', variants: [] }]);
    setServiceAdd(false);
  };

// CSV apply
  const applyCSV = (rows) => {
    if (csvTarget === 'stock') {
      setStock(prev => {
        const map = new Map(prev.map(s => [s.sku, s]));
        rows.forEach(r => {
          if (!r.sku) return;
          map.set(r.sku, {
            ...(map.get(r.sku) || { turn: 0, lastIn: 'today' }),
            sku: r.sku, name: r.name ?? map.get(r.sku)?.name ?? r.sku,
            cost: Number(r.cost) || 0, qty: Number(r.qty) || 0,
            min: Number(r.min) || 0, supplier: r.supplier ?? '',
          });
        });
        return Array.from(map.values());
      });
    } else {
      // simplified: add each row as variant under a matching service, creating service if missing
      setServices(prev => {
        const out = [...prev];
        rows.forEach(r => {
          if (!r.service || !r.device) return;
          let s = out.find(x => x.name.toLowerCase() === r.service.toLowerCase());
          if (!s) {
            s = { id: 'svc-' + Date.now() + Math.random().toString(36).slice(-3), name: r.service, kind: 'variant', icon: 'diag', description: '', variants: [] };
            out.push(s);
          }
          s.variants = [...s.variants, { id: 'v-' + Date.now() + Math.random().toString(36).slice(-3), device: r.device, price: Number(r.price) || 0, sku: r.sku || '', durationMin: Number(r.durationMin) || 45 }];
        });
        return out;
      });
    }
    setCsvTarget(null);
  };

return (
    <div>
      <SegmentedControl
        value={seg}
        onChange={setSeg}
        options={[
          { value: 'services', label: 'Services', badge: services.length },
          { value: 'stock',    label: 'Stock',    badge: outCount > 0 ? outCount : lowCount > 0 ? lowCount : stock.length },
        ]}
      />
      {/* CSV row */}
      <div style={{ marginTop: 10, marginBottom: 12, display: 'flex', gap: 6, justifyContent: 'flex-end' }}>
        <button onClick={() => setCsvTarget(seg)} style={{
          height: 32, padding: '0 12px',
          background: 'transparent', color: '#86868b',
          border: 0, borderRadius: 8, boxShadow: 'inset 0 0 0 1px #1a1a1a',
          font: '500 12px Inter', cursor: 'pointer',
          display: 'inline-flex', alignItems: 'center', gap: 6,
        }}>
          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><path d="M17 8l-5-5-5 5"/><path d="M12 3v12"/></svg>
          Import CSV
        </button>
      </div>

{seg === 'services' ? (
        <ServicesList
          services={services}
          stock={stock}
          onAddService={() => setServiceAdd(true)}
          onAddVariant={(service) => setVariantSheet({ service, variant: null })}
          onEditVariant={(service, variant) => setVariantSheet({ service, variant })}
          onEditService={(s) => setVariantSheet({ service: s, variant: null })}
        />
      ) : (
        <StockList
          stock={stock}
          onAdd={() => setStockSheet({ sku: '', name: '', cost: 0, qty: 0, min: 1, supplier: '' })}
          onEdit={(s) => setStockSheet(s)}
          onAdjust={adjustStock}
        />
      )}

<VariantSheet
        service={variantSheet?.service}
        variant={variantSheet?.variant}
        stock={stock}
        onClose={() => setVariantSheet(null)}
        onSave={saveVariant}
        onDelete={deleteVariant}
      />
      <StockSheet
        item={stockSheet}
        isNew={stockSheet && !stock.find(s => s.sku === stockSheet.sku)}
        onClose={() => setStockSheet(null)}
        onSave={saveStock}
        onDelete={deleteStock}
      />
      <CSVImportSheet
        open={!!csvTarget}
        target={csvTarget}
        onClose={() => setCsvTarget(null)}
        onApply={applyCSV}
      />
      {serviceAdd && <AddServiceSheet onClose={() => setServiceAdd(false)} onCreate={addFlatService} />}
    </div>
  );
};

Object.assign(window, { ShopTab });