/* pages3.jsx — Transfers, Activity, Add cylinder, Vendors */

function Transfers({ navigate }) {
  const D = window.DATA;
  const toast = useToast();
  const [tab, setTab] = React.useState('all');
  const [show, setShow] = React.useState(false);
  const [list, setList] = React.useState(D.transfers);

  const tabs = [
    { id: 'all', label: 'All' },
    { id: 'pending', label: 'Needs action', count: list.filter(t => t.status === 'pending').length },
    { id: 'in-transit', label: 'In transit' },
    { id: 'accepted', label: 'Done' },
  ];
  let rows = tab === 'all' ? list : list.filter(t => t.status === tab);

  const act = (id, ok) => {
    setList(l => l.map(t => t.id === id ? { ...t, status: ok ? 'accepted' : 'rejected' } : t));
    toast[ok ? 'ok' : 'err'](ok ? 'Transfer accepted' : 'Transfer rejected', id);
  };

  return React.createElement('div', null,
    React.createElement('div', { className: 'page-head' },
      React.createElement('div', null, React.createElement('h1', null, 'Transfers'), React.createElement('p', null, 'Move cylinders between your 7 branches')),
      React.createElement('button', { className: 'btn btn-primary', onClick: () => setShow(true) }, React.createElement(Icon, { name: 'add', size: 18 }), 'New transfer')
    ),
    React.createElement('div', { className: 'branch-strip' },
      tabs.map(t => React.createElement('button', { key: t.id, className: `chip ${tab === t.id ? 'on' : ''}`, onClick: () => setTab(t.id) },
        t.label, t.count > 0 && React.createElement('span', { className: 'badge b-danger', style: { height: 18, padding: '0 6px', fontSize: 10.5 } }, t.count)))
    ),
    React.createElement('div', { className: 'grid', style: { gridTemplateColumns: 'repeat(auto-fill, minmax(320px, 1fr))' } },
      rows.map(t => {
        const from = D.branchById[t.from], to = D.branchById[t.to];
        return React.createElement('div', { key: t.id, className: 'card card-pad' },
          React.createElement('div', { className: 'between', style: { marginBottom: 16 } },
            React.createElement('b', { className: 'num', style: { fontSize: 15 } }, t.id),
            React.createElement('span', { className: `badge b-${t.status === 'in-transit' ? 'intransit' : t.status}` },
              React.createElement('span', { className: 'dot' }), t.status === 'pending' ? 'Needs action' : t.status === 'in-transit' ? 'In transit' : t.status === 'accepted' ? 'Received' : 'Rejected')
          ),
          React.createElement('div', { className: 'center', style: { justifyContent: 'space-between', marginBottom: 16 } },
            React.createElement('div', { style: { textAlign: 'center', flex: 1 } },
              React.createElement('div', { style: { fontSize: 12, color: 'var(--text-3)', fontWeight: 700 } }, 'FROM'),
              React.createElement('b', { style: { fontSize: 16 } }, from.name)),
            React.createElement('div', { style: { color: 'var(--info)', padding: '0 12px' } }, React.createElement(Icon, { name: 'arrowR', size: 24 })),
            React.createElement('div', { style: { textAlign: 'center', flex: 1 } },
              React.createElement('div', { style: { fontSize: 12, color: 'var(--text-3)', fontWeight: 700 } }, 'TO'),
              React.createElement('b', { style: { fontSize: 16 } }, to.name))
          ),
          React.createElement('div', { className: 'between', style: { padding: '12px 14px', background: 'var(--surface-2)', borderRadius: 'var(--r-sm)', marginBottom: 14 } },
            React.createElement('div', { className: 'center', style: { gap: 10 } }, React.createElement(Cylinder, { w: 16, gas: t.gas }), React.createElement('b', { className: 'num', style: { fontSize: 22 } }, t.count), React.createElement(GasPill, { gas: t.gas })),
            React.createElement('span', { style: { fontSize: 12, color: 'var(--text-3)' } }, t.created)
          ),
          t.status === 'pending'
            ? React.createElement('div', { style: { display: 'flex', gap: 10 } },
                React.createElement('button', { className: 'btn btn-primary btn-block', onClick: () => act(t.id, true) }, React.createElement(Icon, { name: 'check', size: 18 }), 'Accept'),
                React.createElement('button', { className: 'btn btn-danger', onClick: () => act(t.id, false) }, React.createElement(Icon, { name: 'x', size: 18 })))
            : React.createElement('div', { className: 'center', style: { fontSize: 12.5, color: 'var(--text-3)' } }, React.createElement(Icon, { name: 'user', size: 14 }), 'Raised by ', t.by)
        );
      })
    ),
    show && React.createElement(NewTransferModal, { onClose: () => setShow(false), onCreate: (t) => { setList(l => [t, ...l]); setShow(false); toast.ok('Transfer created', t.id); } })
  );
}

function NewTransferModal({ onClose, onCreate }) {
  const D = window.DATA;
  const [from, setFrom] = React.useState('PUN');
  const [to, setTo] = React.useState('MUM');
  const [gas, setGas] = React.useState('Oxygen');
  const [count, setCount] = React.useState(50);
  return React.createElement(Modal, { title: 'New transfer', icon: 'transfer', onClose,
    footer: [
      React.createElement('button', { key: 'c', className: 'btn btn-ghost', onClick: onClose }, 'Cancel'),
      React.createElement('button', { key: 's', className: 'btn btn-primary', onClick: () => onCreate({ id: 'TRF-' + (2042 + Math.floor(Math.random()*9)), from, to, gas, count: +count, status: 'pending', created: 'Just now', by: 'You' }) },
        React.createElement(Icon, { name: 'check', size: 18 }), 'Create transfer')
    ]},
    React.createElement('div', { className: 'grid g-2' },
      React.createElement('div', { className: 'field' }, React.createElement('label', null, 'From branch'),
        React.createElement('select', { className: 'select', value: from, onChange: e => setFrom(e.target.value) }, D.branches.map(b => React.createElement('option', { key: b.id, value: b.id }, b.name)))),
      React.createElement('div', { className: 'field' }, React.createElement('label', null, 'To branch'),
        React.createElement('select', { className: 'select', value: to, onChange: e => setTo(e.target.value) }, D.branches.map(b => React.createElement('option', { key: b.id, value: b.id }, b.name))))
    ),
    React.createElement('div', { className: 'grid g-2', style: { marginTop: 16 } },
      React.createElement('div', { className: 'field' }, React.createElement('label', null, 'Gas type'),
        React.createElement('select', { className: 'select', value: gas, onChange: e => setGas(e.target.value) }, Object.keys(D.gases).map(g => React.createElement('option', { key: g, value: g }, g)))),
      React.createElement('div', { className: 'field' }, React.createElement('label', null, 'How many cylinders?'),
        React.createElement('input', { className: 'input', type: 'number', value: count, onChange: e => setCount(e.target.value) }))
    )
  );
}

/* ---- Activity ---- */
function Activity() {
  const D = window.DATA;
  const [filter, setFilter] = React.useState('all');
  const typeMeta = {
    scan: { icon: 'scan', tone: 'info' }, alert: { icon: 'alert', tone: 'amber' }, transfer: { icon: 'transfer', tone: 'brand' },
    invoice: { icon: 'rupee', tone: 'violet' }, defect: { icon: 'alert', tone: 'danger' }, user: { icon: 'user', tone: 'info' }, sync: { icon: 'sync', tone: 'brand' },
  };
  const filters = [['all', 'Everything'], ['scan', 'Scans'], ['transfer', 'Transfers'], ['invoice', 'Billing'], ['alert', 'Alerts']];
  const rows = filter === 'all' ? D.activity : D.activity.filter(a => a.type === filter || (filter === 'alert' && a.type === 'defect'));
  return React.createElement('div', null,
    React.createElement('div', { className: 'page-head' },
      React.createElement('div', null, React.createElement('h1', null, 'Activity'), React.createElement('p', null, 'Every action is logged — who, what, when')),
      React.createElement('button', { className: 'btn btn-ghost' }, React.createElement(Icon, { name: 'download', size: 18 }), 'Export log')
    ),
    React.createElement('div', { className: 'branch-strip' },
      filters.map(([id, label]) => React.createElement('button', { key: id, className: `chip ${filter === id ? 'on' : ''}`, onClick: () => setFilter(id) }, label))
    ),
    React.createElement('div', { className: 'card card-pad' },
      React.createElement('div', { style: { position: 'relative' } },
        rows.map((a, i) => {
          const m = typeMeta[a.type] || typeMeta.scan;
          return React.createElement('div', { key: i, style: { display: 'flex', gap: 16, paddingBottom: i < rows.length - 1 ? 20 : 0, position: 'relative' } },
            i < rows.length - 1 && React.createElement('span', { style: { position: 'absolute', left: 21, top: 46, bottom: 0, width: 2, background: 'var(--border)' } }),
            React.createElement('div', { className: 'feed-ico', style: { width: 44, height: 44, flex: '0 0 44px', background: `var(--${m.tone}-soft)`, color: `var(--${m.tone})`, zIndex: 1 } }, React.createElement(Icon, { name: m.icon, size: 21 })),
            React.createElement('div', { style: { flex: 1, paddingTop: 3 } },
              React.createElement('div', { style: { fontSize: 14.5 } },
                React.createElement('b', null, a.who), ' ', React.createElement('span', { className: 't2' }, a.action), ' ',
                React.createElement('b', { className: 'num', style: { color: 'var(--info)' } }, a.target)),
              React.createElement('div', { style: { fontSize: 12.5, color: 'var(--text-3)', marginTop: 3 } }, a.detail)),
            React.createElement('div', { style: { fontSize: 12, color: 'var(--text-3)', fontWeight: 600, whiteSpace: 'nowrap' } }, a.time)
          );
        })
      )
    )
  );
}

/* ---- Add asset (guided, asset-type aware: Cylinder | Vehicle) ---- */
function AddAsset({ navigate }) {
  const D = window.DATA;
  const toast = useToast();
  const [step, setStep] = React.useState(0);
  const [form, setForm] = React.useState({
    asset_type: 'cylinder', tracking_type: 'rfid',
    asset_no: '', tag_id: '', engraved_id: '', gps_device_id: '',
    gas: 'Oxygen', capacity: 47, vehicle_type: 'Truck',
    branch: 'PUN', owner: 'Cryo Air Fluid', location: 'Gate IN', status: 'in-storage',
  });
  const set = (k, v) => setForm(f => ({ ...f, [k]: v }));
  const isVehicle = form.asset_type === 'vehicle';
  const gasColor = (D.gases[form.gas] || D.gases[(form.gas || '').replace('₂', '2')] || {}).color || 'var(--text-3)';
  const steps = ['Type', 'Tag', 'Details', 'Confirm'];

  const pickType = (t) => setForm(f => ({
    ...f, asset_type: t,
    tracking_type: t === 'vehicle' ? 'gps' : 'rfid',
    tag_id: '', asset_no: '',
  }));

  const scanTag = () => {
    if (isVehicle) { set('tag_id', 'GPS-IMEI-' + Math.floor(100000000 + Math.random()*899999999)); toast.info('Tracker linked', 'GPS device paired'); }
    else { set('tag_id', 'CA0101' + Array.from({length:14},()=>'0123456789ABCDEF'[Math.floor(Math.random()*16)]).join('')); toast.info('Tag read', form.tracking_type.toUpperCase() + ' linked'); }
  };

  const next = () => setStep(s => s + 1);
  const fallbackNo = isVehicle ? 'MH-12-AB-3456' : 'CYL-10678';

  return React.createElement('div', { style: { maxWidth: 660, margin: '0 auto' } },
    React.createElement('button', { className: 'chip', style: { marginBottom: 18 }, onClick: () => navigate('inventory') }, React.createElement(Icon, { name: 'chevL', size: 15 }), 'Cancel'),
    React.createElement('div', { className: 'center', style: { justifyContent: 'space-between', marginBottom: 22 } },
      steps.map((s, i) => React.createElement('div', { key: i, style: { display: 'flex', alignItems: 'center', flex: i < 3 ? 1 : '0 0 auto' } },
        React.createElement('div', { className: 'center', style: { gap: 8 } },
          React.createElement('div', { style: { width: 32, height: 32, borderRadius: '50%', display: 'grid', placeItems: 'center', fontWeight: 800, fontSize: 14,
            background: i <= step ? 'var(--brand)' : 'var(--surface-3)', color: i <= step ? '#fff' : 'var(--text-3)' } },
            i < step ? React.createElement(Icon, { name: 'check', size: 16 }) : (i + 1)),
          React.createElement('span', { className: 'desktop-only', style: { fontSize: 13, fontWeight: 700, color: i <= step ? 'var(--text)' : 'var(--text-3)' } }, s)),
        i < 3 && React.createElement('div', { style: { flex: 1, height: 2, margin: '0 10px', background: i < step ? 'var(--brand)' : 'var(--border)' } })
      ))
    ),
    React.createElement('div', { className: 'card card-pad' },
      // STEP 0 — asset type + number + type-specific top field
      step === 0 && React.createElement('div', { className: 'col' },
        React.createElement('h3', { style: { fontSize: 18, fontWeight: 800 } }, 'What are you adding?'),
        React.createElement('div', { className: 'grid g-2' },
          D.assetTypes.map(t => React.createElement('button', { key: t.value, onClick: () => pickType(t.value),
            style: { display: 'flex', alignItems: 'center', gap: 14, padding: '16px 18px', borderRadius: 'var(--r)', textAlign: 'left',
              border: `2px solid ${form.asset_type === t.value ? 'var(--brand)' : 'var(--border)'}`,
              background: form.asset_type === t.value ? 'var(--brand-soft)' : 'var(--surface)', transition: 'all .15s' } },
            React.createElement('div', { className: 'feed-ico', style: { width: 46, height: 46, background: form.asset_type === t.value ? 'var(--brand)' : 'var(--surface-3)', color: form.asset_type === t.value ? '#fff' : 'var(--text-2)' } }, React.createElement(Icon, { name: t.icon, size: 23 })),
            React.createElement('div', null, React.createElement('b', { style: { fontSize: 16 } }, t.label), React.createElement('div', { style: { fontSize: 12, color: 'var(--text-3)', marginTop: 2 } }, t.sub))
          ))
        ),
        React.createElement('div', { className: 'field' }, React.createElement('label', null, isVehicle ? 'Registration number' : 'Asset number'),
          React.createElement('input', { className: 'input', placeholder: isVehicle ? 'e.g. MH-12-AB-3456' : 'e.g. CYL-10678', value: form.asset_no, onChange: e => set('asset_no', e.target.value) })),
        isVehicle
          ? React.createElement('div', { className: 'field' }, React.createElement('label', null, 'Vehicle type'),
              React.createElement('div', { style: { display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 8 } },
                D.vehicleTypes.map(v => React.createElement('button', { key: v.value, type: 'button', onClick: () => set('vehicle_type', v.value),
                  style: { display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6, padding: '14px 6px', borderRadius: 'var(--r-sm)',
                    border: `2px solid ${form.vehicle_type === v.value ? 'var(--brand)' : 'var(--border)'}`,
                    background: form.vehicle_type === v.value ? 'var(--brand-soft)' : 'var(--surface)', transition: 'all .14s',
                    color: form.vehicle_type === v.value ? 'var(--brand-deep)' : 'var(--text-2)' } },
                  React.createElement(VehicleIcon, { name: v.icon, size: 32 }),
                  React.createElement('span', { style: { fontSize: 12.5, fontWeight: 700, color: 'var(--text)' } }, v.label),
                  React.createElement('span', { style: { fontSize: 10, color: 'var(--text-3)', textAlign: 'center', lineHeight: 1.25 } }, v.sub)))))
          : React.createElement('div', { className: 'grid g-2' },
              React.createElement('div', { className: 'field' },
                React.createElement('label', { style: { display: 'flex', alignItems: 'center', gap: 7 } }, 'Gas type', React.createElement('span', { style: { width: 11, height: 11, borderRadius: 3, background: gasColor } })),
                React.createElement('select', { className: 'select', value: form.gas, onChange: e => set('gas', e.target.value) }, D.gasTypesFull.map(g => React.createElement('option', { key: g, value: g }, g)))),
              React.createElement('div', { className: 'field' }, React.createElement('label', null, 'Capacity (kg)'),
                React.createElement('select', { className: 'select', value: form.capacity, onChange: e => set('capacity', e.target.value) }, [5,10,15,20,40,47].map(c => React.createElement('option', { key: c, value: c }, c + ' kg')))))
      ),
      // STEP 1 — tracking type + scan tag/tracker
      step === 1 && React.createElement('div', { className: 'col', style: { alignItems: 'stretch' } },
        React.createElement('h3', { style: { fontSize: 18, fontWeight: 800 } }, isVehicle ? 'Link the tracker' : 'Link the tag'),
        React.createElement('div', { className: 'field' }, React.createElement('label', null, 'Tracking type'),
          React.createElement('div', { className: 'branch-strip', style: { margin: 0 } },
            D.trackingTypes.map(tt => React.createElement('button', { key: tt.value, className: `chip ${form.tracking_type === tt.value ? 'on' : ''}`, onClick: () => set('tracking_type', tt.value) }, tt.label)))),
        React.createElement('div', { style: { textAlign: 'center', padding: '8px 0' } },
          React.createElement('button', { onClick: scanTag, style: { width: 150, height: 150, borderRadius: '50%', margin: '0 auto 14px', border: '3px solid var(--brand)', background: 'var(--brand-soft)', color: 'var(--brand-deep)', display: 'grid', placeItems: 'center' } },
            React.createElement('div', null, React.createElement(Icon, { name: isVehicle ? 'pin' : 'scan', size: 48 }), React.createElement('div', { style: { fontWeight: 800, marginTop: 6, fontSize: 13 } }, isVehicle ? 'Pair tracker' : 'Tap tag'))),
          form.tag_id
            ? React.createElement('div', { className: 'center', style: { justifyContent: 'center', gap: 10, color: 'var(--brand-deep)', fontWeight: 700 } }, React.createElement(Icon, { name: 'check2', size: 20 }), React.createElement('span', { className: 'mono', style: { fontSize: 12 } }, form.tag_id))
            : React.createElement('p', { className: 'muted' }, isVehicle ? 'Pair the GPS tracker, or type the ID below' : 'Hold the reader near the tag, or type the ID below')
        ),
        React.createElement('div', { className: 'field' }, React.createElement('label', null, isVehicle ? 'Primary tracker / scan ID' : 'Primary tag / scan ID'),
          React.createElement('input', { className: 'input mono', style: { fontSize: 13 }, placeholder: isVehicle ? 'GPS-IMEI-123456789' : 'CA0101010300000000010000', value: form.tag_id, onChange: e => set('tag_id', e.target.value) })),
        isVehicle
          ? React.createElement('div', { className: 'field' }, React.createElement('label', null, 'GPS device ID'),
              React.createElement('input', { className: 'input mono', style: { fontSize: 13 }, placeholder: 'IMEI or tracker serial number', value: form.gps_device_id, onChange: e => set('gps_device_id', e.target.value) }))
          : React.createElement('div', { className: 'field' }, React.createElement('label', null, 'Engraved / body ID'),
              React.createElement('input', { className: 'input mono', style: { fontSize: 13 }, placeholder: 'Body number engraved on cylinder', value: form.engraved_id, onChange: e => set('engraved_id', e.target.value) }))
      ),
      // STEP 2 — owner / location / status / branch
      step === 2 && React.createElement('div', { className: 'col' },
        React.createElement('h3', { style: { fontSize: 18, fontWeight: 800 } }, 'Details'),
        React.createElement('div', { className: 'field' }, React.createElement('label', null, isVehicle ? 'Owner / operator' : 'Owner / pool'),
          React.createElement('input', { className: 'input', value: form.owner, onChange: e => set('owner', e.target.value) })),
        React.createElement('div', { className: 'grid g-2' },
          React.createElement('div', { className: 'field' }, React.createElement('label', null, 'Location'),
            React.createElement('select', { className: 'select', value: form.location, onChange: e => set('location', e.target.value) }, D.locationsList.map(l => React.createElement('option', { key: l, value: l }, l)))),
          React.createElement('div', { className: 'field' }, React.createElement('label', null, 'Status'),
            React.createElement('select', { className: 'select', value: form.status, onChange: e => set('status', e.target.value) }, D.assetStatuses.map(s => React.createElement('option', { key: s.value, value: s.value }, s.label))))),
        React.createElement('div', { className: 'field' }, React.createElement('label', null, 'Branch'),
          React.createElement('select', { className: 'select', value: form.branch, onChange: e => set('branch', e.target.value) }, D.branches.map(b => React.createElement('option', { key: b.id, value: b.id }, b.id + ' — ' + b.name))))
      ),
      // STEP 3 — confirm
      step === 3 && React.createElement('div', { style: { textAlign: 'center' } },
        isVehicle
          ? React.createElement('div', { className: 'feed-ico', style: { width: 64, height: 64, margin: '0 auto 16px', background: 'var(--info-soft)', color: 'var(--info)' } }, React.createElement(VehicleIcon, { name: (D.vehicleTypes.find(v => v.value === form.vehicle_type) || {}).icon || 'truck', size: 34 }))
          : React.createElement(Cylinder, { w: 52, gas: form.gas, style: { marginBottom: 16 } }),
        React.createElement('h3', { style: { fontSize: 20, fontWeight: 800 } }, form.asset_no || fallbackNo),
        React.createElement('div', { className: 'center', style: { justifyContent: 'center', gap: 8, margin: '12px 0 18px', flexWrap: 'wrap' } },
          React.createElement('span', { className: 'tag-soft' }, isVehicle ? 'Vehicle' : 'Cylinder'),
          isVehicle ? React.createElement('span', { className: 'tag-soft' }, (D.vehicleTypes.find(v => v.value === form.vehicle_type) || {}).label || form.vehicle_type) : React.createElement(GasPill, { gas: form.gas }),
          !isVehicle && React.createElement('span', { className: 'tag-soft' }, form.capacity + ' kg'),
          React.createElement('span', { className: 'tag-soft' }, form.tracking_type.toUpperCase()),
          React.createElement('span', { className: 'tag-soft' }, D.branchById[form.branch].name)),
        React.createElement('div', { className: 'mono muted', style: { fontSize: 12 } }, form.tag_id || (isVehicle ? 'No tracker linked' : 'No tag linked'))
      ),
      React.createElement('div', { className: 'between', style: { marginTop: 24 } },
        React.createElement('button', { className: 'btn btn-ghost', onClick: () => step === 0 ? navigate('inventory') : setStep(step - 1) }, step === 0 ? 'Cancel' : 'Back'),
        step < 3
          ? React.createElement('button', { className: 'btn btn-primary', onClick: next }, 'Continue', React.createElement(Icon, { name: 'chevR', size: 18 }))
          : React.createElement('button', { className: 'btn btn-primary', onClick: () => { toast.ok((isVehicle ? 'Vehicle' : 'Cylinder') + ' registered!', (form.asset_no || fallbackNo) + ' added'); navigate('inventory'); } }, React.createElement(Icon, { name: 'check', size: 18 }), 'Save asset')
      )
    )
  );
}

/* ---- Vendors & customers ---- */
function Vendors({ navigate }) {
  const D = window.DATA;
  const toast = useToast();
  const [tab, setTab] = React.useState('customers');
  const [customers, setCustomers] = React.useState(D.customers);
  const [vendors, setVendors] = React.useState(D.vendors);
  const [custOpen, setCustOpen] = React.useState(false);
  const [vendOpen, setVendOpen] = React.useState(false);
  const totalDue = customers.reduce((a, c) => a + c.due, 0);
  const overdue = customers.filter(c => c.status === 'overdue').length;
  return React.createElement('div', null,
    React.createElement('div', { className: 'page-head' },
      React.createElement('div', null, React.createElement('h1', null, 'Vendors & customers'), React.createElement('p', null, 'Refill partners, 3rd-party cylinders, and dues')),
      React.createElement('button', { className: 'btn btn-primary', onClick: () => tab === 'customers' ? setCustOpen(true) : setVendOpen(true) }, React.createElement(Icon, { name: 'add', size: 18 }), 'Add ' + (tab === 'customers' ? 'customer' : 'vendor'))
    ),
    React.createElement('div', { className: 'grid g-3', style: { marginBottom: 20 } },
      React.createElement(Kpi, { tone: 'violet', icon: 'rupee', label: 'Total dues', value: fmtINR(totalDue), foot: 'across ' + customers.length + ' customers' }),
      React.createElement(Kpi, { tone: 'danger', icon: 'alert', label: 'Overdue accounts', value: overdue, foot: 'need follow-up' }),
      React.createElement(Kpi, { tone: 'info', icon: 'vendors', label: 'Active vendors', value: vendors.length, foot: vendors.reduce((a,v)=>a+v.open_po,0) + ' open POs' })
    ),
    React.createElement('div', { className: 'seg', style: { marginBottom: 16 } },
      React.createElement('button', { className: tab === 'customers' ? 'on' : '', onClick: () => setTab('customers') }, React.createElement(Icon, { name: 'users', size: 16 }), 'Customers & dues'),
      React.createElement('button', { className: tab === 'vendors' ? 'on' : '', onClick: () => setTab('vendors') }, React.createElement(Icon, { name: 'vendors', size: 16 }), 'Refill vendors')
    ),
    tab === 'customers'
      ? React.createElement('div', { className: 'card', style: { overflow: 'hidden' } },
          React.createElement('div', { style: { overflowX: 'auto' } }, React.createElement('table', { className: 'tbl' },
            React.createElement('thead', null, React.createElement('tr', null, ['Customer', 'Branch', 'Cylinders held', 'Outstanding', 'Ageing', 'Status'].map((h, i) => React.createElement('th', { key: i }, h)))),
            React.createElement('tbody', null, customers.map(c => React.createElement('tr', { key: c.name },
              React.createElement('td', null, React.createElement('div', { className: 'center', style: { gap: 11 } }, React.createElement('div', { className: 'avatar', style: { width: 34, height: 34, fontSize: 13, borderRadius: 10 } }, c.name.split(' ').map(w=>w[0]).slice(0,2).join('')), React.createElement('b', null, c.name))),
              React.createElement('td', null, React.createElement('span', { className: 'tag-soft' }, (D.branchById[c.branch] || {}).name || c.branch)),
              React.createElement('td', { className: 'num' }, c.holding),
              React.createElement('td', { className: 'num', style: { fontWeight: 800, color: c.due > 0 ? 'var(--text)' : 'var(--text-3)' } }, c.due > 0 ? fmtINRfull(c.due) : '—'),
              React.createElement('td', null, c.ageing > 0 ? React.createElement('span', { className: 'num', style: { color: c.ageing > 30 ? 'var(--danger)' : 'var(--text-2)' } }, c.ageing + ' days') : React.createElement('span', { className: 'muted' }, '—')),
              React.createElement('td', null, c.status === 'overdue' ? React.createElement('span', { className: 'badge b-overdue' }, React.createElement('span', { className: 'dot' }), 'Overdue') : React.createElement('span', { className: 'badge b-full' }, React.createElement('span', { className: 'dot' }), 'Up to date'))
            )))
          ))
        )
      : React.createElement('div', { className: 'grid', style: { gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))' } },
          vendors.map(v => React.createElement('div', { key: v.name, className: 'card card-pad' },
            React.createElement('div', { className: 'between', style: { marginBottom: 14 } },
              React.createElement('div', { className: 'feed-ico', style: { width: 46, height: 46, background: 'var(--info-soft)', color: 'var(--info)' } }, React.createElement(Icon, { name: 'vendors', size: 22 })),
              React.createElement('span', { className: 'badge b-active' }, React.createElement('span', { className: 'dot' }), 'Active')),
            React.createElement('b', { style: { fontSize: 16 } }, v.name),
            React.createElement('div', { style: { fontSize: 12.5, color: 'var(--text-3)', marginTop: 3, marginBottom: 16 } }, v.type),
            React.createElement('div', { className: 'between', style: { paddingTop: 14, borderTop: '1px solid var(--border)' } },
              React.createElement('div', null, React.createElement('div', { className: 'num', style: { fontSize: 20, fontWeight: 800 } }, v.cyls.toLocaleString('en-IN')), React.createElement('div', { style: { fontSize: 11, color: 'var(--text-3)' } }, 'cylinders')),
              React.createElement('div', { style: { textAlign: 'right' } }, React.createElement('div', { className: 'num', style: { fontSize: 20, fontWeight: 800, color: v.open_po > 0 ? 'var(--warn)' : 'var(--text-3)' } }, v.open_po), React.createElement('div', { style: { fontSize: 11, color: 'var(--text-3)' } }, 'open POs')))
          ))
        ),
    custOpen && React.createElement(AddCustomerModal, { onClose: () => setCustOpen(false), onCreate: (c) => { setCustomers(list => [c, ...list]); setCustOpen(false); toast.ok('Customer added', c.name); } }),
    vendOpen && React.createElement(AddVendorModal, { onClose: () => setVendOpen(false), onCreate: (v) => { setVendors(list => [v, ...list]); setVendOpen(false); toast.ok('Vendor added', v.name); } })
  );
}

function AddCustomerModal({ onClose, onCreate }) {
  const D = window.DATA;
  const [name, setName] = React.useState('');
  const [branch, setBranch] = React.useState('PUN');
  const [contact, setContact] = React.useState('');
  const [phone, setPhone] = React.useState('');
  const [gst, setGst] = React.useState('');
  const [opening, setOpening] = React.useState('');
  const create = () => {
    const due = parseInt(opening, 10) || 0;
    onCreate({ name, branch, holding: 0, due, ageing: due > 0 ? 1 : 0, status: due > 0 ? 'overdue' : 'ok', contact, phone, gst });
  };
  return React.createElement(Modal, { title: 'Add customer', icon: 'user', onClose,
    footer: [
      React.createElement('button', { key: 'c', className: 'btn btn-ghost', onClick: onClose }, 'Cancel'),
      React.createElement('button', { key: 's', className: 'btn btn-primary', disabled: !name.trim(), onClick: create }, React.createElement(Icon, { name: 'check', size: 18 }), 'Save customer')
    ]},
    React.createElement('div', { className: 'field', style: { marginBottom: 16 } }, React.createElement('label', null, 'Customer name'),
      React.createElement('input', { className: 'input', placeholder: 'e.g. Tata Steel Ltd', value: name, onChange: e => setName(e.target.value) })),
    React.createElement('div', { className: 'grid g-2', style: { marginBottom: 16 } },
      React.createElement('div', { className: 'field' }, React.createElement('label', null, 'Branch'),
        React.createElement('select', { className: 'select', value: branch, onChange: e => setBranch(e.target.value) }, D.branches.map(b => React.createElement('option', { key: b.id, value: b.id }, b.id + ' — ' + b.name)))),
      React.createElement('div', { className: 'field' }, React.createElement('label', null, 'Opening dues (₹)'),
        React.createElement('input', { className: 'input mono', type: 'number', placeholder: '0', value: opening, onChange: e => setOpening(e.target.value) }))),
    React.createElement('div', { className: 'grid g-2', style: { marginBottom: 16 } },
      React.createElement('div', { className: 'field' }, React.createElement('label', null, 'Contact person'),
        React.createElement('input', { className: 'input', placeholder: 'Name', value: contact, onChange: e => setContact(e.target.value) })),
      React.createElement('div', { className: 'field' }, React.createElement('label', null, 'Phone'),
        React.createElement('input', { className: 'input mono', placeholder: '+91 ', value: phone, onChange: e => setPhone(e.target.value) }))),
    React.createElement('div', { className: 'field' }, React.createElement('label', null, 'GSTIN (optional)'),
      React.createElement('input', { className: 'input mono', placeholder: '27ABCDE1234F1Z5', value: gst, onChange: e => setGst(e.target.value) }))
  );
}

const VENDOR_TYPES = ['Maintenance', 'Supplier', 'Transporter', 'Other'];
function AddVendorModal({ onClose, onCreate }) {
  const [name, setName] = React.useState('');
  const [type, setType] = React.useState('Supplier');
  const [contact, setContact] = React.useState('');
  const [phone, setPhone] = React.useState('');
  const [address, setAddress] = React.useState('');
  const [notes, setNotes] = React.useState('');
  const create = () => onCreate({ name, type, contact, phone, address, notes, cyls: 0, open_po: 0, status: 'active' });
  return React.createElement(Modal, { title: 'Add vendor', icon: 'vendors', onClose,
    footer: [
      React.createElement('button', { key: 'c', className: 'btn btn-ghost', onClick: onClose }, 'Cancel'),
      React.createElement('button', { key: 's', className: 'btn btn-primary', disabled: !name.trim(), onClick: create }, React.createElement(Icon, { name: 'check', size: 18 }), 'Save vendor')
    ]},
    React.createElement('div', { className: 'field', style: { marginBottom: 16 } }, React.createElement('label', null, 'Vendor name'),
      React.createElement('input', { className: 'input', placeholder: 'e.g. Inox Air Products', value: name, onChange: e => setName(e.target.value) })),
    React.createElement('div', { className: 'field', style: { marginBottom: 16 } }, React.createElement('label', null, 'Type'),
      React.createElement('div', { className: 'branch-strip', style: { margin: 0 } },
        VENDOR_TYPES.map(t => React.createElement('button', { key: t, className: `chip ${type === t ? 'on' : ''}`, onClick: () => setType(t) }, t)))),
    React.createElement('div', { className: 'grid g-2', style: { marginBottom: 16 } },
      React.createElement('div', { className: 'field' }, React.createElement('label', null, 'Contact person'),
        React.createElement('input', { className: 'input', placeholder: 'Name', value: contact, onChange: e => setContact(e.target.value) })),
      React.createElement('div', { className: 'field' }, React.createElement('label', null, 'Phone'),
        React.createElement('input', { className: 'input mono', placeholder: '+91 ', value: phone, onChange: e => setPhone(e.target.value) }))),
    React.createElement('div', { className: 'field', style: { marginBottom: 16 } }, React.createElement('label', null, 'Address'),
      React.createElement('input', { className: 'input', placeholder: 'City, state', value: address, onChange: e => setAddress(e.target.value) })),
    React.createElement('div', { className: 'field' }, React.createElement('label', null, 'Notes'),
      React.createElement('textarea', { className: 'input', rows: 2, placeholder: 'Optional', value: notes, onChange: e => setNotes(e.target.value) }))
  );
}

Object.assign(window, { Transfers, Activity, AddAsset, Vendors, AddCustomerModal, AddVendorModal });