e.stopPropagation()}>

{isEdit ? 'Edit Equipment' : 'Add Equipment'}

{error &&

{error}

}

Equipment Name* set('name', e.target.value)}/>

Brand / Model set('brand_model', e.target.value)}/>

Serial Number* set('serial_number', e.target.value)}/>

Category

Status

Location set('location', e.target.value)}/>

Department set('department', e.target.value)}/>

Last Calibration Date set('last_cal_date', e.target.value)}/>

Next Calibration Due set('calibration_due', e.target.value)}/>

Certificate No. set('cert_number', e.target.value)}/>

Verified By set('verified_by', e.target.value)}/>

Certificate File (PDF, max 10 MB)

{file ? 'Change file…' : 'Choose PDF…'} {file ? file.name : (form.cert_url ? '✓ Existing certificate uploaded' : 'No file selected')}

Remark

set('remark', e.target.value)}/>
          </div>
        </div>

<div style={eqStyles.modalFooter}>
          <button style={eqStyles.btnSecondary} onClick={onClose} disabled={saving}>Cancel</button>
          <button
            style={{ ...eqStyles.btnPrimary, ...(!valid || saving ? eqStyles.btnPrimaryDisabled : {}) }}
            onClick={handleSubmit}
            disabled={!valid || saving}
          >
            {saving ? 'Saving…' : (isEdit ? 'Save Changes' : 'Add Equipment')}
          </button>
        </div>
      </div>
    </div>
  );
}

// ── View Equipment Modal ─────────────────────────────────────────────────────
function EquipmentViewModal({ equipment, certUrl, onClose, onEdit }) {
  return (
    <div style={eqStyles.modalOverlay} onClick={onClose}>
      <div style={eqStyles.modal} onClick={e => e.stopPropagation()}>
        <div style={eqStyles.modalHeader}>
          <div style={eqStyles.modalTitle}>{equipment.name}</div>
          <button style={eqStyles.modalClose} onClick={onClose}>
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
          </button>
        </div>
        <div style={eqStyles.modalBody}>
          <div style={{ marginBottom: 14 }}><EqBadge status={equipment.status}/></div>
          {[
            ['Brand / Model', equipment.brand_model],
            ['Serial Number', equipment.serial_number],
            ['Category', equipment.category],
            ['Location', equipment.location],
            ['Department', equipment.department],
            ['Last Cal. Date', fmtDate(equipment.last_cal_date)],
            ['Next Cal. Due', fmtDate(equipment.calibration_due)],
            ['Certificate No.', equipment.cert_number],
            ['Verified By', equipment.verified_by],
            ['Remark', equipment.remark],
          ].map(([label, value]) => (
            <div key={label} style={eqStyles.detailRow}>
              <div style={eqStyles.detailLabel}>{label}</div>
              <div style={eqStyles.detailValue}>{value || <span style={{ color: '#CBD5E1' }}>—</span>}</div>
            </div>
          ))}
          {certUrl && (
            <div style={eqStyles.detailRow}>
              <div style={eqStyles.detailLabel}>Certificate</div>
              <div style={eqStyles.detailValue}>
                <a href={certUrl} target="_blank" rel="noopener noreferrer" style={eqStyles.certLink}>📄 View certificate PDF →</a>
              </div>
            </div>
          )}
        </div>
        <div style={eqStyles.modalFooter}>
          <button style={eqStyles.btnSecondary} onClick={onClose}>Close</button>
          <button style={eqStyles.btnPrimary} onClick={onEdit}>Edit</button>
        </div>
      </div>
    </div>
  );
}

// ── Delete Confirmation Modal ────────────────────────────────────────────────
function DeleteConfirmModal({ equipment, onConfirm, onCancel, busy }) {
  return (
    <div style={eqStyles.modalOverlay} onClick={!busy ? onCancel : undefined}>
      <div style={{ ...eqStyles.modal, maxWidth: 440 }} onClick={e => e.stopPropagation()}>
        <div style={eqStyles.modalHeader}>
          <div style={eqStyles.modalTitle}>Delete Equipment?</div>
        </div>
        <div style={eqStyles.modalBody}>
          <div style={{ fontSize: 13, color: '#475569', lineHeight: 1.6 }}>
            Are you sure you want to delete <strong>{equipment.name}</strong> (<span style={{ fontFamily: "'JetBrains Mono', monospace" }}>{equipment.serial_number}</span>)?
            <br/><br/>
            This action cannot be undone. Related calibration records will also be removed.
          </div>
        </div>
        <div style={eqStyles.modalFooter}>
          <button style={eqStyles.btnSecondary} onClick={onCancel} disabled={busy}>Cancel</button>
          <button style={eqStyles.btnDanger} onClick={onConfirm} disabled={busy}>
            {busy ? 'Deleting…' : 'Delete'}
          </button>
        </div>
      </div>
    </div>
  );
}

// ── Import Excel Modal ───────────────────────────────────────────────────────
function ImportExcelModal({ user, onClose, onImported }) {
  const [file, setFile] = React.useState(null);
  const [busy, setBusy] = React.useState(false);
  const [result, setResult] = React.useState(null); // {inserted, skipped, errors} | {error}
  const [error, setError] = React.useState('');

const handleFile = (e) => {
    const f = e.target.files?.[0];
    if (!f) return;
    if (!/\.(xlsx|xls)$/i.test(f.name)) { setError('Please choose an .xlsx or .xls file.'); return; }
    setFile(f); setError(''); setResult(null);
  };

const runImport = async () => {
    if (!file) return;
    setBusy(true); setError(''); setResult(null);
    try {
      if (typeof window.XLSX === 'undefined') throw new Error('Excel library not loaded.');
      const buf = await file.arrayBuffer();
      const wb  = window.XLSX.read(buf, { type: 'array' });
      const ws  = wb.Sheets[wb.SheetNames[0]];
      const rows = window.XLSX.utils.sheet_to_json(ws, { header: 1, raw: false, defval: '' });

// Find the header row
      let headerIdx = -1;
      for (let i = 0; i < Math.min(10, rows.length); i++) {
        const cells = rows[i].map(c => String(c || '').toLowerCase());
        if (cells.some(c => c.includes('device name') || c.includes('equipment name') || c.includes('serial no'))) {
          headerIdx = i; break;
        }
      }
      if (headerIdx === -1) throw new Error('Could not find a header row. Expected columns like "Device Name" and "Serial No.".');

const records = [];
      for (let i = headerIdx + 1; i < rows.length; i++) {
        const r = rows[i];
        const name = r[c.name], serial = r[c.serial];
        if (!name || !serial) continue;
        records.push({
          user_id:         user.id,
          name:            String(name).trim(),
          brand_model:     c.brand   !== -1 && r[c.brand]   ? String(r[c.brand]).trim()   : null,
          serial_number:   String(serial).trim(),
          category:        c.cat     !== -1 && r[c.cat]     ? String(r[c.cat]).trim()    : null,
          last_cal_date:   parseExcelDate(r[c.lastCal]),
          calibration_due: parseExcelDate(r[c.due]),
          cert_number:     c.certNo  !== -1 && r[c.certNo]  ? String(r[c.certNo]).trim() : null,
          status:          mapStatusFromExcel(r[c.status]),
          location:        c.loc     !== -1 && r[c.loc]     ? String(r[c.loc]).trim()    : null,
          department:      c.dept    !== -1 && r[c.dept]    ? String(r[c.dept]).trim()   : null,
          remark:          c.remark  !== -1 && r[c.remark]  ? String(r[c.remark]).trim() : null,
          verified_by:     c.verify  !== -1 && r[c.verify]  ? String(r[c.verify]).trim() : null,
        });
      }
      if (records.length === 0) throw new Error('No valid data rows found in the file.');

// Detect duplicates by serial_number (skip them)
      const sb = window.supabaseClient;
      const incomingSerials = records.map(r => r.serial_number);
      const { data: existing } = await sb.from('equipment').select('serial_number').in('serial_number', incomingSerials);
      const existingSet = new Set((existing || []).map(e => e.serial_number));
      const toInsert = records.filter(r => !existingSet.has(r.serial_number));
      const skipped  = records.length - toInsert.length;

if (toInsert.length === 0) {
        setResult({ inserted: 0, skipped, total: records.length });
        setBusy(false);
        return;
      }

// Insert in batches of 100
      let inserted = 0;
      for (let i = 0; i < toInsert.length; i += 100) {
        const batch = toInsert.slice(i, i + 100);
        const { error: insErr } = await sb.from('equipment').insert(batch);
        if (insErr) throw insErr;
        inserted += batch.length;
      }
      setResult({ inserted, skipped, total: records.length });
      onImported?.();
    } catch (err) {
      console.error('[Equipment Import] error:', err);
      setError(err.message || 'Import failed.');
    } finally {
      setBusy(false);
    }
  };

return (
    <div style={eqStyles.modalOverlay} onClick={busy ? undefined : onClose}>
      <div style={{ ...eqStyles.modal, maxWidth: 520 }} onClick={e => e.stopPropagation()}>
        <div style={eqStyles.modalHeader}>
          <div style={eqStyles.modalTitle}>Import Equipment from Excel</div>
          <button style={eqStyles.modalClose} onClick={onClose} disabled={busy}>
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
          </button>
        </div>
        <div style={eqStyles.modalBody}>
          {error && <div style={eqStyles.errorBox}>{error}</div>}
          {result && (
            <div style={eqStyles.infoBox}>
              <strong>Import complete.</strong><br/>
              ✓ Inserted: {result.inserted}<br/>
              ⊝ Skipped (duplicate serial): {result.skipped}<br/>
              Total rows read: {result.total}
            </div>
          )}
          {!result && (
            <>
              <div style={{ fontSize: 13, color: '#475569', marginBottom: 14, lineHeight: 1.6 }}>
                Upload an Excel file with equipment data. Expected columns:
                <ul style={{ margin: '8px 0 0 18px', padding: 0, fontSize: 12, color: '#64748B', lineHeight: 1.8 }}>
                  <li><strong>Required:</strong> Device Name, Serial No.</li>
                  <li><strong>Optional:</strong> Model / Brand, Last Cal. Date, Next Due Date, Certificate No., Status, Location, Department, Remark, Verified By, Category</li>
                </ul>
                <div style={{ marginTop: 10, fontSize: 12, color: '#94A3B8' }}>
                  Dates in DD/MM/YYYY format. Duplicate Serial Numbers are skipped.
                </div>
              </div>
              <div style={eqStyles.field}>
                <label style={eqStyles.label}>Excel File (.xlsx)</label>
                <div style={eqStyles.fileWrap}>
                  <label style={eqStyles.fileBtn}>
                    {file ? 'Change file…' : 'Choose Excel…'}
                    <input type="file" accept=".xlsx,.xls,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" style={{ display: 'none' }} onChange={handleFile}/>
                  </label>
                  <span style={eqStyles.fileName}>{file ? file.name : 'No file selected'}</span>
                </div>
              </div>
            </>
          )}
        </div>
        <div style={eqStyles.modalFooter}>
          {result ? (
            <button style={eqStyles.btnPrimary} onClick={onClose}>Done</button>
          ) : (
            <>
              <button style={eqStyles.btnSecondary} onClick={onClose} disabled={busy}>Cancel</button>
              <button
                style={{ ...eqStyles.btnPrimary, ...((!file || busy) ? eqStyles.btnPrimaryDisabled : {}) }}
                onClick={runImport}
                disabled={!file || busy}
              >
                {busy ? 'Importing…' : 'Import Now'}
              </button>
            </>
          )}
        </div>
      </div>
    </div>
  );
}

// ── Main Equipment Screen ────────────────────────────────────────────────────
function EquipmentScreen({ user, isFrozen }) {
  const [items, setItems] = React.useState([]);
  const [totalCount, setTotalCount] = React.useState(0);
  const [loading, setLoading] = React.useState(false);
  const [error, setError] = React.useState('');
  const [search, setSearch] = React.useState('');
  const [statusFilter, setStatusFilter] = React.useState('all');
  const [categoryFilter, setCategoryFilter] = React.useState('all');
  const [page, setPage] = React.useState(0);
  const [hovered, setHovered] = React.useState(null);
  const [sort, setSort] = React.useState({ field: 'created_at', dir: 'desc' });

const [editing, setEditing] = React.useState(null); // null | 'new' | equipment object
  const [viewing, setViewing] = React.useState(null);
  const [viewingCertUrl, setViewingCertUrl] = React.useState('');
  const [deleting, setDeleting] = React.useState(null);
  const [deleteBusy, setDeleteBusy] = React.useState(false);
  const [showImport, setShowImport] = React.useState(false);
  const [exporting, setExporting] = React.useState(false);

const { data, error: qErr, count } = await query;
      if (qErr) throw qErr;
      setItems(data || []);
      setTotalCount(count || 0);
    } catch (err) {
      console.error('[Equipment] Fetch error:', err);
      setError(err.message || 'Failed to load equipment.');
    } finally {
      setLoading(false);
    }
  }, [search, statusFilter, categoryFilter, page, sort]);

React.useEffect(() => { fetchEquipment(); }, [fetchEquipment]);

// Reset to page 0 when filters or sort change
  React.useEffect(() => { setPage(0); }, [search, statusFilter, categoryFilter, sort]);

// Live updates via Supabase Realtime — table refreshes on any change
  React.useEffect(() => {
    if (!user) return;
    const sb = window.supabaseClient;
    if (!sb) return;
    const channel = sb.channel(`equipment-list-${user.id}`)
      .on('postgres_changes',
        { event: '*', schema: 'public', table: 'equipment', filter: `user_id=eq.${user.id}` },
        () => { fetchEquipment(); }
      )
      .subscribe();
    return () => { sb.removeChannel(channel); };
  }, [user, fetchEquipment]);

// ── Export current filtered view to Excel ────────────────────────────────
  const handleExport = async () => {
    if (typeof window.XLSX === 'undefined') { alert('Excel library not loaded. Refresh the page.'); return; }
    setExporting(true);
    try {
      const sb = window.supabaseClient;
      // Build same query as fetchEquipment, but without pagination — export everything that matches filters
      let q = sb.from('equipment').select('*').order('created_at', { ascending: false });
      if (statusFilter !== 'all')   q = q.eq('status', statusFilter);
      if (categoryFilter !== 'all') q = q.eq('category', categoryFilter);
      if (search.trim()) {
        const term = search.trim();
        q = q.or(`name.ilike.%${term}%,serial_number.ilike.%${term}%`);
      }
      const { data, error: expErr } = await q;
      if (expErr) throw expErr;
      if (!data || data.length === 0) { alert('No equipment to export with current filters.'); return; }

const rows = data.map((eq, i) => ({
        'No.':              i + 1,
        'Device Name':      eq.name,
        'Model / Brand':    eq.brand_model || '',
        'Serial No.':       eq.serial_number,
        'Last Cal. Date':   isoToDMY(eq.last_cal_date),
        'Next Due Date':    isoToDMY(eq.calibration_due),
        'Certificate No.':  eq.cert_number || '',
        'Certificate File / Ref.': eq.cert_url ? 'Uploaded' : '',
        'Status':           STATUS_TO_EXCEL[eq.status] || eq.status || '',
        'Location':         eq.location || '',
        'Department':       eq.department || '',
        'Remark':           eq.remark || '',
        'Verified By':      eq.verified_by || '',
        'Category':         eq.category || '',
      }));

const totalPages = Math.max(1, Math.ceil(totalCount / PAGE_SIZE));
  const showingFrom = totalCount === 0 ? 0 : page * PAGE_SIZE + 1;
  const showingTo   = Math.min((page + 1) * PAGE_SIZE, totalCount);

return (
    <div style={eqStyles.page}>
      <div style={eqStyles.toolbar}>
        <div style={eqStyles.searchWrap}>
          <svg style={eqStyles.searchIcon} width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
          <input
            style={eqStyles.searchInput}
            placeholder="Search by name or serial number…"
            value={search}
            onChange={e => setSearch(e.target.value)}
          />
        </div>
        <select style={eqStyles.select} value={categoryFilter} onChange={e => setCategoryFilter(e.target.value)}>
          <option value="all">All Categories</option>
          {CATEGORIES.map(c => <option key={c} value={c}>{c}</option>)}
        </select>
        <select style={eqStyles.select} value={statusFilter} onChange={e => setStatusFilter(e.target.value)}>
          <option value="all">All Statuses</option>
          {STATUS_OPTIONS.map(o => <option key={o.value} value={o.value}>{o.label}</option>)}
        </select>
        <button
          style={{ ...eqStyles.addBtn, marginLeft: 'auto', background: 'white', color: '#475569', border: '1px solid #CBD5E1', ...(isFrozen ? { color: '#CBD5E1', cursor: 'not-allowed' } : {}) }}
          onClick={() => !isFrozen && setShowImport(true)}
          disabled={isFrozen}
          title={isFrozen ? 'Subscription lapsed — read-only mode' : 'Import equipment from Excel'}
        >
          <svg width="13" height="13" 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"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
          Import
        </button>
        <button
          style={{ ...eqStyles.addBtn, marginLeft: 0, background: 'white', color: '#475569', border: '1px solid #CBD5E1', ...(exporting ? { color: '#CBD5E1' } : {}) }}
          onClick={handleExport}
          disabled={exporting}
          title="Export current filtered view to Excel"
        >
          <svg width="13" height="13" 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"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
          {exporting ? 'Exporting…' : 'Export'}
        </button>
        <button
          style={{ ...eqStyles.addBtn, marginLeft: 0, ...(isFrozen ? eqStyles.addBtnDisabled : {}) }}
          onClick={() => !isFrozen && setEditing('new')}
          disabled={isFrozen}
          title={isFrozen ? 'Subscription lapsed — read-only mode' : ''}
        >
          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
          Add Equipment
        </button>
      </div>

{error && <div style={eqStyles.errorBox}>{error}</div>}

{loading && items.length === 0 ? (
          <div style={eqStyles.emptyState}>
            <div style={eqStyles.emptyTitle}>Loading equipment…</div>
          </div>
        ) : items.length === 0 ? (
          <div style={eqStyles.emptyState}>
            <div style={eqStyles.emptyIcon}>
              <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#94A3B8" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><line x1="9" y1="9" x2="15" y2="9"/><line x1="9" y1="13" x2="15" y2="13"/><line x1="9" y1="17" x2="12" y2="17"/></svg>
            </div>
            <div style={eqStyles.emptyTitle}>No equipment yet</div>
            <div style={eqStyles.emptySub}>
              {search || statusFilter !== 'all' || categoryFilter !== 'all'
                ? 'No results match your filters. Try clearing them.'
                : 'Click "Add Equipment" above to register your first item.'}
            </div>
          </div>
        ) : (
          items.map((r, i) => (
            <div
              key={r.id}
              style={{ ...eqStyles.tableRow, background: hovered === i ? '#F8FAFC' : 'white' }}
              onMouseEnter={() => setHovered(i)}
              onMouseLeave={() => setHovered(null)}
              onClick={() => handleView(r)}
            >
              <div>
                <div style={eqStyles.tdName}>{r.name}</div>
                <div style={eqStyles.tdMono}>{r.serial_number}</div>
              </div>
              <div style={eqStyles.tdCell}>{r.category || '—'}</div>
              <div style={eqStyles.tdCell}>{r.location || '—'}</div>
              <div style={eqStyles.tdCell}>{r.department || '—'}</div>
              <div style={{ ...eqStyles.tdCell, fontSize: 12 }}>{fmtDate(r.calibration_due)}</div>
              <div style={eqStyles.tdCell}><EqBadge status={r.status} /></div>
              <div style={eqStyles.rowActions} onClick={e => e.stopPropagation()}>
                <button style={eqStyles.iconBtn} title="Edit" onClick={() => !isFrozen && setEditing(r)} disabled={isFrozen}>
                  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
                </button>
                <button style={{ ...eqStyles.iconBtn, color: '#DC2626' }} title="Delete" onClick={() => !isFrozen && setDeleting(r)} disabled={isFrozen}>
                  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-2 14a2 2 0 0 1-2 2H9a2 2 0 0 1-2-2L5 6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>
                </button>
              </div>
            </div>
          ))
        )}

<div style={eqStyles.pagination}>
          <span style={eqStyles.pageInfo}>
            {totalCount === 0
              ? 'No equipment'
              : `Showing ${showingFrom}–${showingTo} of ${totalCount}`}
          </span>
          <div style={eqStyles.pageButtons}>
            <button
              style={{ ...eqStyles.pageBtn, ...(page === 0 ? eqStyles.pageBtnDisabled : {}) }}
              onClick={() => page > 0 && setPage(p => p - 1)}
              disabled={page === 0}
            >‹ Prev</button>
            <span style={{ ...eqStyles.pageBtn, ...eqStyles.pageBtnActive }}>
              {page + 1} / {totalPages}
            </span>
            <button
              style={{ ...eqStyles.pageBtn, ...(page + 1 >= totalPages ? eqStyles.pageBtnDisabled : {}) }}
              onClick={() => page + 1 < totalPages && setPage(p => p + 1)}
              disabled={page + 1 >= totalPages}
            >Next ›</button>
          </div>
        </div>
      </div>

{/* Add / Edit Modal */}
      {editing && (
        <EquipmentFormModal
          initial={editing === 'new' ? null : editing}
          user={user}
          onClose={() => setEditing(null)}
          onSave={() => { setEditing(null); fetchEquipment(); }}
        />
      )}

{/* View Modal */}
      {viewing && !editing && (
        <EquipmentViewModal
          equipment={viewing}
          certUrl={viewingCertUrl}
          onClose={() => setViewing(null)}
          onEdit={() => { setEditing(viewing); setViewing(null); }}
        />
      )}

{/* Delete Confirm Modal */}
      {deleting && (
        <DeleteConfirmModal
          equipment={deleting}
          busy={deleteBusy}
          onCancel={() => !deleteBusy && setDeleting(null)}
          onConfirm={handleDelete}
        />
      )}

{/* Import Excel Modal */}
      {showImport && (
        <ImportExcelModal
          user={user}
          onClose={() => setShowImport(false)}
          onImported={() => fetchEquipment()}
        />
      )}
    </div>
  );
}

Object.assign(window, { EquipmentScreen });