<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vector CRM v40.8.6.2</title>
    <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=DM+Mono:wght@400&display=swap" rel="stylesheet">
    <style>
        :root {
            --bg: #f8f9fa; --card: #fff; --border: #e0e0e0;
            --text: #1a1a1a; --text2: #555; --muted: #999;
            --green: #00c875; --green-lt: #e6f9f1;
            --yellow: #fdab3d; --yellow-lt: #fff4e5;
            --red: #e2445c; --red-lt: #ffe5e9;
            --blue: #0073ea; --blue-lt: #e6f4ff;
            --purple: #a25ddc; --purple-lt: #f4ecfb;
            --gray: #c4c4c4; --gray-lt: #f5f6f8;
        }
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: 'DM Sans', sans-serif; background: var(--bg); color: var(--text); font-size: 14px; }
        .app { display: flex; min-height: 100vh; }
        .sidebar { width: 240px; background: #292f4c; color: #fff; position: fixed; height: 100vh; overflow-y: auto; }
        .sidebar-logo { padding: 20px; font-weight: 700; font-size: 18px; border-bottom: 1px solid rgba(255,255,255,0.1); display: flex; align-items: center; gap: 10px; }
        .sidebar-logo span { width: 32px; height: 32px; background: var(--blue); border-radius: 8px; display: flex; align-items: center; justify-content: center; }
        .nav-group { padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,0.1); }
        .nav-group-title { padding: 8px 20px; font-size: 11px; font-weight: 600; color: rgba(255,255,255,0.5); text-transform: uppercase; }
        .nav-item { display: flex; align-items: center; gap: 12px; padding: 10px 20px; color: rgba(255,255,255,0.8); cursor: pointer; }
        .nav-item:hover { background: rgba(255,255,255,0.1); }
        .nav-item.active { background: rgba(255,255,255,0.15); color: #fff; border-left: 3px solid var(--blue); }
        .nav-item svg { width: 18px; height: 18px; opacity: 0.7; }
        .nav-badge { margin-left: auto; background: var(--red); color: #fff; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 10px; }
        .nav-integrations { padding: 16px 20px; margin-top: auto; }
        .integration-item { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 13px; color: rgba(255,255,255,0.6); }
        .integration-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); margin-left: auto; }
        .main { flex: 1; margin-left: 240px; }
        .header { background: var(--card); border-bottom: 1px solid var(--border); padding: 16px 24px; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 50; }
        .header-left { display: flex; align-items: center; gap: 16px; }
        .header-title { font-size: 20px; font-weight: 700; }
        .header-tabs { display: flex; gap: 4px; margin-left: 24px; }
        .header-tab { padding: 8px 16px; font-size: 13px; font-weight: 500; color: var(--text2); border-radius: 6px; cursor: pointer; }
        .header-tab:hover { background: var(--gray-lt); }
        .header-tab.active { background: var(--blue-lt); color: var(--blue); }
        .btn { padding: 8px 16px; border-radius: 6px; font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; border: none; display: inline-flex; align-items: center; gap: 6px; }
        .btn-primary { background: var(--blue); color: #fff; }
        .btn-outline { background: var(--card); border: 1px solid var(--border); color: var(--text); }
        .btn:hover { opacity: 0.9; }
        .content { padding: 24px; }
        .spreadsheet { background: var(--card); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
        .po-group { border-bottom: 1px solid var(--border); }
        .po-header { display: grid; grid-template-columns: 40px 1fr 120px 120px 120px 100px 100px; background: #f8f9fa; cursor: pointer; }
        .po-header:hover { background: #f0f1f3; }
        .po-header > div { padding: 12px; border-right: 1px solid var(--border); display: flex; align-items: center; gap: 8px; }
        .po-expand { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; color: var(--muted); transition: transform 0.2s; }
        .po-expand.open { transform: rotate(90deg); }
        .po-subitems { display: none; }
        .po-subitems.open { display: block; }
        .subitem-header { display: grid; grid-template-columns: 40px 1fr 120px 120px 120px 100px 100px; background: #f5f6f8; font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; border-bottom: 1px solid var(--border); }
        .subitem-header > div { padding: 8px 12px; border-right: 1px solid var(--border); }
        .subitem-header > div:first-child { padding-left: 40px; }
        .subitem-row { display: grid; grid-template-columns: 40px 1fr 120px 120px 120px 100px 100px; border-bottom: 1px solid var(--border); cursor:pointer; }
        .subitem-row:hover { background: #fafbfc; }
        .subitem-row > div { padding: 10px 12px; border-right: 1px solid var(--border); display: flex; align-items: center; }
        .subitem-row > div:first-child { padding-left: 40px; }
        .add-subitem { padding: 8px 12px 8px 52px; color: var(--blue); font-size: 13px; cursor: pointer; }
        .add-subitem:hover { background: var(--blue-lt); }
        .status { padding: 4px 12px; border-radius: 4px; font-size: 12px; font-weight: 500; }
        .status-received { background: var(--green); color: #fff; }
        .status-not-received { background: var(--gray-lt); color: var(--text2); }
        .scans-header, .scans-row { display: grid; grid-template-columns: 40px 2fr 1fr 120px 100px 100px; }
        .scans-header { background: var(--gray-lt); font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; border-bottom: 1px solid var(--border); }
        .scans-header > div, .scans-row > div { padding: 10px 12px; border-right: 1px solid var(--border); display: flex; align-items: center; }
        .scans-row { border-bottom: 1px solid var(--border); cursor: pointer; }
        .scans-row:hover { background: #fafbfc; }
        .scan-indicator { width: 24px; height: 24px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 12px; }
        .scan-indicator.pending { background: var(--yellow-lt); }
        .scan-indicator.done { background: var(--green-lt); }
        .calendar-header { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
        .calendar-nav { display: flex; gap: 4px; }
        .calendar-nav button { width: 32px; height: 32px; border: 1px solid var(--border); background: var(--card); border-radius: 6px; cursor: pointer; }
        .calendar-month { font-size: 18px; font-weight: 600; min-width: 180px; }
        .calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
        .calendar-day-header { background: var(--gray-lt); padding: 10px; text-align: center; font-size: 12px; font-weight: 600; color: var(--muted); }
        .calendar-day { background: var(--card); min-height: 100px; padding: 8px; }
        .calendar-day.other { background: #fafafa; }
        .calendar-day.today { background: var(--blue-lt); }
        .day-num { font-size: 13px; font-weight: 500; margin-bottom: 4px; }
        .calendar-event { background: var(--green); color: #fff; padding: 2px 6px; border-radius: 4px; font-size: 11px; margin-bottom: 2px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .calendar-event.no-team { background: var(--yellow); }
        .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
        .card { background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 16px; cursor: pointer; }
        .card:hover { border-color: var(--blue); }
        .card-header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
        .card-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--purple-lt); color: var(--purple); display: flex; align-items: center; justify-content: center; font-weight: 700; }
        .card-title { font-weight: 600; }
        .card-subtitle { font-size: 13px; color: var(--text2); }
        .card-stats { display: flex; gap: 16px; font-size: 13px; color: var(--text2); padding-top: 12px; border-top: 1px solid var(--border); }
        .panel { position: fixed; top: 0; right: -500px; width: 500px; height: 100vh; background: var(--card); border-left: 1px solid var(--border); z-index: 100; transition: right 0.3s; overflow-y: auto; }
        .panel.open { right: 0; }
        .panel-header { padding: 20px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; }
        .panel-close { width: 32px; height: 32px; border: none; background: var(--gray-lt); border-radius: 6px; cursor: pointer; }
        .panel-title { font-size: 18px; font-weight: 700; }
        .panel-subtitle { font-size: 14px; color: var(--text2); margin-top: 4px; }
        .panel-body { padding: 20px; }
        .panel-section { margin-bottom: 24px; }
        .panel-section-title { font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; margin-bottom: 12px; }
        .team-item { display: flex; align-items: center; gap: 12px; padding: 10px; background: var(--gray-lt); border-radius: 6px; margin-bottom: 8px; cursor: pointer; }
        .team-item:hover { background: #e8e9eb; }
        .team-item.assigned { background: var(--green-lt); }
        .team-item.assigned .card-avatar { background: var(--green); color: #fff; }
        .team-check { width: 20px; height: 20px; border: 2px solid var(--border); border-radius: 4px; margin-left: auto; display: flex; align-items: center; justify-content: center; }
        .team-item.assigned .team-check { background: var(--green); border-color: var(--green); }
        .doc-item { display: flex; align-items: center; gap: 12px; padding: 12px; background: var(--gray-lt); border-radius: 6px; margin-bottom: 8px; cursor: pointer; }
        .doc-item:hover { background: #e8e9eb; }
        .doc-status { font-size: 12px; color: var(--muted); }
        .doc-status.has { color: var(--green); }
        .modal-bg { position: fixed; inset: 0; background: rgba(0,0,0,0.5); display: none; align-items: center; justify-content: center; z-index: 200; }
        .modal-bg.open { display: flex; }
        .modal { background: var(--card); border-radius: 12px; width: 100%; max-width: 520px; max-height: 90vh; overflow-y: auto; }
        .modal-header { padding: 20px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }
        .modal-title { font-size: 18px; font-weight: 700; }
        .modal-close { width: 32px; height: 32px; border: none; background: var(--gray-lt); border-radius: 6px; cursor: pointer; }
        .modal-body { padding: 20px; }
        .modal-footer { padding: 16px 20px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 10px; }
        .form-group { margin-bottom: 16px; }
        .form-label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 6px; }
        .form-label .req { color: var(--red); }
        .form-input, .form-select { width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 6px; font-family: inherit; font-size: 14px; }
        .form-input:focus, .form-select:focus { outline: none; border-color: var(--blue); }
        .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
        .form-hint { font-size: 12px; color: var(--muted); margin-top: 4px; }
        .inline-add { display: flex; gap: 8px; margin-top: 8px; padding: 10px; background: var(--blue-lt); border-radius: 6px; }
        .inline-add.hidden { display: none; }
        .file-attached { background: var(--green-lt); padding: 12px; border-radius: 6px; display: flex; align-items: center; gap: 10px; }
        .toast { position: fixed; bottom: 24px; right: 24px; background: #333; color: #fff; padding: 12px 20px; border-radius: 8px; transform: translateY(100px); opacity: 0; transition: all 0.3s; z-index: 300; }
        .toast.show { transform: translateY(0); opacity: 1; }
        .scan-alert { position: fixed; top: 20px; right: 20px; background: var(--card); border: 2px solid var(--green); border-radius: 12px; padding: 16px; width: 320px; display: none; z-index: 150; box-shadow: 0 4px 20px rgba(0,0,0,0.15); }
        .scan-alert.show { display: block; }
        .scan-alert-header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
        .scan-alert-icon { width: 40px; height: 40px; background: var(--green-lt); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 18px; }
        .scan-alert-title { font-weight: 600; }
        .scan-alert-file { font-size: 13px; color: var(--text2); }
        .scan-alert-actions { display: flex; gap: 8px; }
        .scan-alert-btn { flex: 1; padding: 10px; border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer; border: none; }
        .scan-alert-btn.primary { background: var(--green); color: #fff; }
        .scan-alert-btn.secondary { background: var(--gray-lt); }
        .view { display: none; }
        .view.active { display: block; }
        .tab-content { display: none; }
        .tab-content.active { display: block; }
        .punchlist-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 24px; }
        .punchlist-stat { background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 16px; }
        .punchlist-stat-label { font-size: 12px; color: var(--muted); text-transform: uppercase; font-weight: 600; margin-bottom: 8px; }
        .punchlist-stat-value { font-size: 28px; font-weight: 700; }
        .punchlist-filters { display: flex; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
        .punchlist-filter { padding: 8px 16px; border: 1px solid var(--border); border-radius: 6px; background: var(--card); cursor: pointer; font-size: 13px; }
        .punchlist-filter.active { background: var(--blue-lt); border-color: var(--blue); color: var(--blue); }
        .punchlist-table { background: var(--card); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
        .punchlist-header { display: grid; grid-template-columns: 1fr 120px 100px 120px 100px 120px; background: var(--gray-lt); padding: 12px; font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; border-bottom: 1px solid var(--border); }
        .punchlist-row { display: grid; grid-template-columns: 1fr 120px 100px 120px 100px 120px; padding: 12px; border-bottom: 1px solid var(--border); cursor: pointer; }
        .punchlist-row:hover { background: #fafbfc; }
        .punchlist-row > div { display: flex; align-items: center; gap: 8px; }
        .punchlist-info { display: flex; flex-direction: column; gap: 4px; }
        .punchlist-item-desc { font-weight: 500; }
        .punchlist-item-po { font-size: 12px; color: var(--muted); font-family: monospace; }
        .badge { display: inline-block; padding: 4px 10px; border-radius: 4px; font-size: 12px; font-weight: 600; }
        .badge-damaged { background: var(--red-lt); color: var(--red); }
        .badge-missing { background: var(--yellow-lt); color: var(--yellow); }
        .badge-backorder { background: var(--blue-lt); color: var(--blue); }
        .badge-open { background: var(--red-lt); color: var(--red); }
        .badge-inprogress { background: var(--yellow-lt); color: var(--yellow); }
        .badge-resolved { background: var(--green-lt); color: var(--green); }
        .photo-preview { width: 60px; height: 60px; border-radius: 6px; background: var(--gray-lt); display: flex; align-items: center; justify-content: center; overflow: hidden; }
        .photo-preview img { width: 100%; height: 100%; object-fit: cover; }
        .upload-photo-btn { padding: 8px 12px; background: var(--blue-lt); color: var(--blue); border: 1px dashed var(--blue); border-radius: 6px; cursor: pointer; font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
        .scan-thumbnail { width: 100%; max-width: 300px; max-height: 200px; border-radius: 8px; margin-top: 12px; border: 1px solid var(--border); }
        .hidden-file-input { display: none; }
        .wh-breadcrumb { display:flex; align-items:center; gap:8px; padding:12px 0; margin-bottom:16px; font-size:13px; flex-wrap:wrap; }
        .wh-breadcrumb a { color:var(--blue); cursor:pointer; text-decoration:none; padding:4px 8px; border-radius:4px; }
        .wh-breadcrumb a:hover { background:var(--blue-lt); }
        .wh-breadcrumb .separator { color:var(--text2); margin:0 4px; }
        .wh-breadcrumb .current { color:var(--text); font-weight:500; }
        .wh-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:16px; margin-bottom:24px; }
        .wh-card { background:var(--card); border:1px solid var(--border); border-radius:8px; padding:16px; cursor:pointer; transition:all 0.2s; display:flex; gap:12px; align-items:flex-start; }
        .wh-card:hover { border-color:var(--blue); box-shadow:0 2px 8px rgba(0,0,0,0.1); transform:translateY(-2px); }
        .wh-card-icon { width:48px; height:48px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:20px; font-weight:600; color:#fff; flex-shrink:0; }
        .wh-card-icon.row { background:var(--blue); } .wh-card-icon.bay { background:var(--purple); } .wh-card-icon.bin { background:var(--green); } .wh-card-icon.special { background:var(--yellow); }
        .wh-card-info .name { font-weight:500; color:var(--text); margin-bottom:4px; } .wh-card-info .count { font-size:12px; color:var(--text2); }
        .wh-item-card { background:var(--card); border:1px solid var(--border); border-radius:8px; padding:12px; cursor:pointer; transition:all 0.2s; display:flex; gap:12px; }
        .wh-item-card:hover { border-color:var(--blue); background:var(--bg); }
        .wh-item-card .thumb { width:60px; height:60px; border-radius:6px; background:var(--border); flex-shrink:0; overflow:hidden; display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:24px; }
        .wh-item-card .thumb img { width:100%; height:100%; object-fit:cover; }
        .wh-item-card .info .name { font-weight:500; margin-bottom:4px; } .wh-item-card .info .qty { font-size:13px; color:var(--text2); }
        .wh-detail { background:var(--card); border:1px solid var(--border); border-radius:8px; padding:24px; max-width:700px; }
        .wh-detail-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:20px; gap:12px; }
        .wh-detail-title { font-size:20px; font-weight:600; }
        .wh-detail-section { margin-bottom:20px; padding-bottom:20px; border-bottom:1px solid var(--border); }
        .wh-detail-section:last-child { border-bottom:none; }
        .wh-detail-label { font-size:11px; font-weight:600; text-transform:uppercase; color:var(--text2); margin-bottom:8px; letter-spacing:0.5px; }
        .wh-detail-value { font-size:14px; color:var(--text); }
        .wh-detail-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; }
        .wh-photos { display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:12px; }
        .wh-photo { aspect-ratio:1; border-radius:6px; overflow:hidden; background:var(--border); }
        .wh-photo img { width:100%; height:100%; object-fit:cover; }
        .wh-tag { display:inline-block; background:var(--gray-lt); color:var(--text); padding:4px 12px; border-radius:20px; font-size:12px; margin:0 8px 8px 0; }
        .wh-custom-field { display:grid; grid-template-columns:1fr 1fr auto; gap:12px; margin-bottom:12px; align-items:flex-end; }
        .wh-custom-field input { padding:8px 12px; border:1px solid var(--border); border-radius:4px; font-size:13px; }
        .wh-custom-field .remove-btn { padding:8px 12px; background:var(--red-lt); color:var(--red); border:1px solid var(--red); border-radius:4px; cursor:pointer; font-size:12px; }
        .wh-empty { text-align:center; padding:60px 20px; color:var(--text2); }
        .wh-empty-icon { font-size:48px; margin-bottom:16px; }
        /* Location Autocomplete */
        .loc-suggestions { position:absolute; top:100%; left:0; right:0; background:#fff; border:1px solid var(--border); border-radius:0 0 6px 6px; max-height:180px; overflow-y:auto; z-index:100; box-shadow:0 4px 12px rgba(0,0,0,0.12); }
        .loc-sug-item { padding:8px 12px; cursor:pointer; font-size:13px; border-bottom:1px solid var(--border); }
        .loc-sug-item:last-child { border-bottom:none; }
        .loc-sug-item:hover { background:var(--blue-lt); }
        .loc-sug-item strong { color:var(--blue); }
        /* Loading Sheet Styles */
        .ls-search-box { position:relative; margin-bottom:16px; }
        .ls-search-input { width:100%; padding:10px 12px 10px 36px; border:1px solid var(--border); border-radius:6px; font-size:14px; font-family:inherit; }
        .ls-search-input:focus { outline:none; border-color:var(--blue); }
        .ls-search-icon { position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--muted); }
        .ls-results { border:1px solid var(--border); border-radius:6px; max-height:250px; overflow-y:auto; margin-bottom:16px; }
        .ls-result-item { display:flex; align-items:center; gap:10px; padding:10px 12px; border-bottom:1px solid var(--border); }
        .ls-result-item:last-child { border-bottom:none; }
        .ls-po-label { font-family:monospace; font-weight:500; }
        .ls-po-meta { font-size:12px; color:var(--text2); }
        .ls-selected { background:var(--green-lt); border:1px solid var(--green); border-radius:6px; padding:12px; margin-bottom:16px; }
        .ls-selected-title { font-size:12px; font-weight:600; color:var(--green); text-transform:uppercase; margin-bottom:8px; }
        .ls-equipment { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
        .ls-equipment label { display:flex; align-items:center; gap:8px; padding:6px; cursor:pointer; font-size:13px; border-radius:4px; }
        .ls-equipment label:hover { background:var(--gray-lt); }
        .ls-split-banner { background:var(--yellow-lt); border:1px solid var(--yellow); border-radius:6px; padding:12px; margin-bottom:16px; display:flex; align-items:center; gap:10px; }
        .ls-history-card { padding:14px; border:1px solid var(--border); border-radius:8px; margin-bottom:10px; background:var(--card); }
        .ls-history-card:hover { border-color:var(--blue); }
        .ls-tag { display:inline-block; padding:2px 8px; border-radius:4px; font-size:11px; font-weight:600; }
        .ls-tag-loading { background:var(--yellow-lt); color:#b8860b; }
        .ls-tag-complete { background:var(--green-lt); color:var(--green); }
        .ls-tag-partial { background:var(--blue-lt); color:var(--blue); }
        .ls-tag-split { background:var(--purple-lt); color:var(--purple); }
        /* Project Completion Styles */
        .pc-section { margin-bottom:20px; padding-bottom:16px; border-bottom:1px solid var(--border); }
        .pc-section:last-child { border-bottom:none; }
        .pc-section-title { font-size:12px; font-weight:700; text-transform:uppercase; color:var(--text2); margin-bottom:10px; letter-spacing:0.5px; }
        .pc-checklist { display:flex; flex-direction:column; gap:6px; }
        .pc-checklist label { display:flex; align-items:center; gap:10px; padding:6px 8px; cursor:pointer; font-size:13px; border-radius:4px; }
        .pc-checklist label:hover { background:var(--gray-lt); }
        .pc-role-lock { background:var(--yellow-lt); border:1px solid var(--yellow); border-radius:8px; padding:16px; text-align:center; margin:24px 0; }
        .pc-role-lock-icon { font-size:32px; margin-bottom:8px; }
        .panel-tabs { display:flex; gap:4px; padding:0 20px; border-bottom:1px solid var(--border); }
        .panel-tab-btn { padding:10px 16px; font-size:13px; font-weight:500; color:var(--text2); cursor:pointer; border-bottom:2px solid transparent; }
        .panel-tab-btn:hover { color:var(--text); }
        .panel-tab-btn.active { color:var(--blue); border-bottom-color:var(--blue); }
        /* Client Portal Styles */
        .portal-overlay { position:fixed; top:0; left:0; width:100%; height:100%; background:#292f4c; z-index:9999; display:none; flex-direction:column; }
        .portal-overlay.active { display:flex; }
        .portal-login { max-width:400px; margin:auto; padding:40px; background:var(--card); border-radius:12px; box-shadow:0 20px 60px rgba(0,0,0,0.3); }
        .portal-login h1 { font-size:24px; font-weight:700; margin-bottom:8px; text-align:center; }
        .portal-login p { color:var(--text2); font-size:14px; text-align:center; margin-bottom:24px; }
        .portal-login .form-group { margin-bottom:16px; }
        .portal-login .form-label { display:block; font-weight:600; margin-bottom:6px; font-size:13px; }
        .portal-login .form-input { width:100%; padding:10px 12px; border:1px solid var(--border); border-radius:6px; font-family:inherit; font-size:14px; }
        .portal-login .btn-primary { width:100%; padding:12px; font-size:15px; margin-top:8px; }
        .portal-login .portal-error { color:var(--red); font-size:13px; text-align:center; margin-top:12px; display:none; }
        .portal-logo { text-align:center; margin-bottom:24px; }
        .portal-logo span { display:inline-flex; width:48px; height:48px; background:var(--blue); border-radius:12px; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:22px; }
        .portal-dash { display:none; flex-direction:column; height:100vh; background:var(--bg); }
        .portal-dash.active { display:flex; }
        .portal-topbar { background:#292f4c; color:#fff; padding:16px 24px; display:flex; align-items:center; justify-content:space-between; }
        .portal-topbar h2 { font-size:18px; font-weight:600; display:flex; align-items:center; gap:10px; }
        .portal-topbar h2 span { width:32px; height:32px; background:var(--blue); border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:14px; }
        .portal-topbar .btn-outline { color:#fff; border-color:rgba(255,255,255,0.3); }
        .portal-body { flex:1; overflow-y:auto; padding:24px; }
        .portal-section { margin-bottom:32px; }
        .portal-section h3 { font-size:18px; font-weight:700; margin-bottom:16px; display:flex; align-items:center; gap:8px; }
        .portal-project-card { background:var(--card); border:1px solid var(--border); border-radius:8px; padding:16px; margin-bottom:12px; cursor:pointer; }
        .portal-project-card:hover { border-color:var(--blue); }
        .portal-project-card h4 { font-size:16px; font-weight:600; margin-bottom:8px; }
        .portal-project-card .meta { display:flex; gap:16px; font-size:13px; color:var(--text2); }
        .portal-shipment-table { width:100%; border-collapse:collapse; background:var(--card); border:1px solid var(--border); border-radius:8px; overflow:hidden; }
        .portal-shipment-table th { background:var(--gray-lt); padding:10px 12px; text-align:left; font-size:11px; text-transform:uppercase; color:var(--muted); font-weight:600; border-bottom:1px solid var(--border); }
        .portal-shipment-table td { padding:10px 12px; border-bottom:1px solid var(--border); font-size:13px; }
        .portal-shipment-table tr:hover td { background:#fafbfc; }
        .portal-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:16px; margin-bottom:24px; }
        .portal-stat { background:var(--card); border:1px solid var(--border); border-radius:8px; padding:16px; text-align:center; }
        .portal-stat .num { font-size:28px; font-weight:700; color:var(--blue); }
        .portal-stat .label { font-size:12px; color:var(--text2); margin-top:4px; }

        /* Settings & Staff Management */
        .settings-tabs { display:flex; gap:4px; margin-bottom:24px; background:var(--gray-lt); border-radius:8px; padding:4px; }
        .settings-tab { padding:10px 20px; border-radius:6px; font-size:13px; font-weight:600; cursor:pointer; color:var(--text2); border:none; background:none; font-family:inherit; }
        .settings-tab:hover { background:rgba(0,0,0,0.05); }
        .settings-tab.active { background:var(--card); color:var(--blue); box-shadow:0 1px 3px rgba(0,0,0,0.1); }
        .settings-section { display:none; }
        .settings-section.active { display:block; }
        .settings-card { background:var(--card); border:1px solid var(--border); border-radius:10px; padding:20px; margin-bottom:16px; }
        .settings-card-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
        .settings-card-header h3 { font-size:16px; font-weight:700; }
        .settings-card-header .badge { font-size:11px; padding:4px 10px; border-radius:20px; font-weight:600; }
        .badge-connected { background:var(--green-lt); color:#0a8f4f; }
        .badge-disconnected { background:var(--gray-lt); color:var(--muted); }
        .integration-card { display:flex; gap:16px; align-items:flex-start; }
        .integration-icon { width:48px; height:48px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:24px; flex-shrink:0; }
        .integration-info { flex:1; }
        .integration-info p { font-size:13px; color:var(--text2); margin:4px 0 12px; }
        .toggle-switch { position:relative; width:44px; height:24px; cursor:pointer; }
        .toggle-switch input { display:none; }
        .toggle-slider { position:absolute; top:0; left:0; right:0; bottom:0; background:var(--gray); border-radius:24px; transition:0.3s; }
        .toggle-slider:before { content:''; position:absolute; width:18px; height:18px; left:3px; bottom:3px; background:#fff; border-radius:50%; transition:0.3s; }
        .toggle-switch input:checked + .toggle-slider { background:var(--green); }
        .toggle-switch input:checked + .toggle-slider:before { transform:translateX(20px); }
        .perm-grid { width:100%; border-collapse:separate; border-spacing:0; background:var(--card); border:1px solid var(--border); border-radius:8px; overflow:hidden; }
        .perm-grid th { padding:10px 14px; text-align:left; font-size:11px; text-transform:uppercase; color:var(--muted); font-weight:600; background:var(--gray-lt); border-bottom:1px solid var(--border); }
        .perm-grid th:not(:first-child) { text-align:center; }
        .perm-grid td { padding:10px 14px; border-bottom:1px solid var(--border); font-size:13px; }
        .perm-grid td:not(:first-child) { text-align:center; }
        .perm-grid tr:last-child td { border-bottom:none; }
        .perm-check { width:18px; height:18px; accent-color:var(--blue); cursor:pointer; }
        .staff-table { width:100%; border-collapse:separate; border-spacing:0; }
        .staff-table th { padding:10px 14px; text-align:left; font-size:11px; text-transform:uppercase; color:var(--muted); font-weight:600; background:var(--gray-lt); border-bottom:1px solid var(--border); }
        .staff-table td { padding:10px 14px; border-bottom:1px solid var(--border); font-size:13px; }
        .staff-table tr:hover td { background:#fafbfc; }
        .role-badge { display:inline-block; padding:3px 10px; border-radius:20px; font-size:11px; font-weight:600; }
        .role-admin { background:#fee2e2; color:#dc2626; }
        .role-lead { background:var(--blue-lt); color:var(--blue); }
        .role-installer { background:var(--green-lt); color:#0a8f4f; }
        .role-driver { background:var(--yellow-lt); color:#b45309; }
        .role-office { background:var(--purple-lt); color:var(--purple); }
        .role-card { background:var(--card); border:1px solid var(--border); border-radius:8px; padding:14px; display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
        .role-card .role-name { font-weight:600; font-size:14px; }
        .staff-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
        .staff-header h3 { font-size:16px; font-weight:700; }
        .system-item { display:flex; align-items:center; justify-content:space-between; padding:14px 0; border-bottom:1px solid var(--border); }
        .system-item:last-child { border-bottom:none; }
        .system-item .sys-label { font-weight:600; font-size:14px; }
        .system-item .sys-desc { font-size:12px; color:var(--text2); margin-top:2px; }
    
    /* Auth Overlay */
    #auth-overlay {
      position: fixed; top: 0; left: 0; width: 100%; height: 100%;
      background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
      display: flex; align-items: center; justify-content: center;
      z-index: 10000; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    }
    .auth-card {
      background: rgba(255,255,255,0.07); border-radius: 16px; padding: 48px;
      width: 400px; max-width: 90vw; text-align: center; backdrop-filter: blur(20px);
      border: 1px solid rgba(255,255,255,0.1); box-shadow: 0 25px 50px rgba(0,0,0,0.3);
    }
    .auth-card h1 { color: #fff; font-size: 28px; margin: 0 0 8px; font-weight: 700; }
    .auth-card p { color: rgba(255,255,255,0.6); margin: 0 0 32px; font-size: 14px; }
    .auth-btn {
      display: flex; align-items: center; justify-content: center; gap: 12px;
      width: 100%; padding: 14px 24px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.15);
      background: rgba(255,255,255,0.08); color: #fff; font-size: 15px; font-weight: 500;
      cursor: pointer; transition: all 0.2s; margin-bottom: 12px;
    }
    .auth-btn:hover { background: rgba(255,255,255,0.15); transform: translateY(-1px); }
    .auth-btn svg { width: 20px; height: 20px; }
    #auth-error { color: #ff6b6b; margin-top: 16px; font-size: 13px; display: none; }
    #auth-loading { color: rgba(255,255,255,0.5); margin-top: 16px; font-size: 13px; display: none; }
    .sign-out-btn {
      background: none; border: 1px solid rgba(255,255,255,0.2); color: rgba(255,255,255,0.7);
      padding: 6px 14px; border-radius: 6px; cursor: pointer; font-size: 12px;
      transition: all 0.2s; margin-left: 12px;
    }
    .sign-out-btn:hover { background: rgba(255,0,0,0.15); border-color: rgba(255,0,0,0.3); color: #ff6b6b; }
    .user-info { display: flex; align-items: center; gap: 8px; color: rgba(255,255,255,0.7); font-size: 13px; }
  

/* V38 layout fix */
aside.sidebar { position: fixed !important; top: 0; left: 0; bottom: 0; width: 240px; z-index: 2; overflow-y: auto; }
main.main { position: fixed !important; top: 0; left: 240px; right: 0; bottom: 0; overflow-y: auto; margin-left: 0 !important; z-index: 1; background: #f0f2f5; }

/* CamScanner Inbox */
.cs-inbox{background:#fff;border:1px solid var(--border);border-radius:8px;margin-bottom:16px;overflow:hidden}.cs-inbox-header{padding:12px 16px;font-weight:600;border-bottom:1px solid var(--border);background:#f8f9fa;display:flex;align-items:center;justify-content:space-between}.cs-scroll{overflow-x:auto}.cs-inbox table{width:100%;border-collapse:separate;border-spacing:0;font-size:12px}.cs-inbox th,.cs-inbox td{padding:8px 10px;border-bottom:1px solid var(--border);border-right:1px solid var(--border);vertical-align:top}.cs-inbox th{background:#f5f6f8;font-size:11px;font-weight:600;text-transform:uppercase;color:var(--muted)}.cs-inbox input,.cs-inbox select{width:100%;font-size:12px;padding:6px 8px;border:1px solid var(--border);border-radius:6px}
</style>
<script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
</head>
<body>
    <div id="auth-overlay">
      <div class="auth-card">
        <h1>Vector CRM</h1>
        <p>Sign in to continue</p>
        <button class="auth-btn" onclick="signInWithGoogle()">
          <svg viewBox="0 0 24 24"><path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 0 1-2.2 3.32v2.77h3.57c2.08-1.92 3.27-4.74 3.27-8.1z"/><path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/><path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/><path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/></svg>
          Sign in with Google
        </button>
        <button class="auth-btn" onclick="signInWithMicrosoft()">
          <svg viewBox="0 0 24 24"><rect fill="#F25022" x="1" y="1" width="10" height="10"/><rect fill="#7FBA00" x="13" y="1" width="10" height="10"/><rect fill="#00A4EF" x="1" y="13" width="10" height="10"/><rect fill="#FFB900" x="13" y="13" width="10" height="10"/></svg>
          Sign in with Microsoft
        </button>
        <div id="auth-error"></div>
        <div id="auth-loading">Signing in...</div>
      </div>
    </div>
    <!-- Client Portal -->
    <div class="portal-overlay" id="portal-overlay">
        <div class="portal-login" id="portal-login">
            <div class="portal-logo"><span>V</span></div>
            <h1>Client Portal</h1>
            <p>Sign in to view your projects and inventory</p>
            <div class="form-group">
                <label class="form-label">Email</label>
                <input type="email" class="form-input" id="portal-email" placeholder="your@email.com">
            </div>
            <div class="form-group">
                <label class="form-label">Access Code</label>
                <input type="password" class="form-input" id="portal-code" placeholder="Enter your access code">
            </div>
            <button class="btn btn-primary" onclick="portalLogin()">Sign In</button>
            <div class="portal-error" id="portal-error">Invalid email or access code</div>
        </div>
    </div>
    <div class="portal-dash" id="portal-dash">
        <div class="portal-topbar">
            <h2><span>V</span> <span id="portal-company">Client</span> — Portal</h2>
            <button class="btn btn-outline" onclick="portalLogout()">Sign Out</button>
        </div>
        <div class="portal-body" id="portal-body"></div>
    </div>

    <div class="app">
        <aside class="sidebar">
            <div class="sidebar-logo"><span>V</span> Vector CRM</div>
            <div class="nav-group">
                <div class="nav-group-title">Operations</div>
                <div class="nav-item active" onclick="showNav('receiving')">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/></svg>
                    Receiving
                    <span class="nav-badge" id="nav-scans-badge">0</span>
                </div>
                <div class="nav-item" onclick="showNav('warehouse');initWarehouse();">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 3h16v18H4z"/><path d="M4 10h16"/><path d="M12 3v7"/></svg>
                    Warehouse
                </div>
                <div class="nav-item" onclick="showNav('dispatch')">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 17H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-4"/><polyline points="12 15 17 20 7 20"/></svg>
                    Dispatch
                </div>
            </div>
            <div class="nav-group">
                <div class="nav-group-title">Planning</div>
                <div class="nav-item" onclick="showNav('calendar')">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
                    Calendar
                </div>
                <div class="nav-item" onclick="showNav('projects')">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg>
                    Projects
                </div>
            </div>
            <div class="nav-group">
                <div class="nav-group-title">Management</div>
                <div class="nav-item" onclick="showNav('people')">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/></svg>
                    People
                </div>
                <div class="nav-item" onclick="showNav('clients')">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/></svg>
                    Clients
                </div>
            </div>
            <div class="nav-group">
                <div class="nav-group-title">Admin</div>
                <div class="nav-item" onclick="showNav('settings');settingsTab('staff')">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
                    My Staff
                </div>
                <div class="nav-item" onclick="showNav('settings');settingsTab('integrations')">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
                    Settings
                </div>
            </div></div>
        </aside>
        <main class="main">
            <div id="view-receiving" class="view active">
                <header class="header">
                    <div class="header-left">
                        <h1 class="header-title">Receiving</h1>
                        <div class="header-tabs">
                            <div class="header-tab active" onclick="switchTab('scans', this)">Raw Scans</div>
                            <div class="header-tab" onclick="switchTab('shipments', this)">Shipments</div>
                        
                        </div>
                    </div>
                    <button class="btn btn-outline" onclick="openCameraUpload()">📷 Upload Scan</button>
                    <input type="file" id="camera-input" class="hidden-file-input" accept="image/*,.pdf" capture="environment" onchange="handleCameraUpload(event)">
                </header>
                <div class="content">
                    <div id="tab-scans" class="tab-content active"><div class="spreadsheet" id="scans-table"></div></div>
                    <div id="tab-shipments" class="tab-content"><div id="cam-inbox"></div>
                    <div class="spreadsheet" id="shipments-table"></div>
            </div>
            
            </div>
            </div><!-- close view-receiving -->
            <div id="view-calendar" class="view">
                <header class="header"><h1 class="header-title">Calendar</h1><button class="btn btn-outline">🔄 Sync Outlook</button></header>
                <div class="content">
                    <div class="calendar-header">
                        <div class="calendar-nav"><button onclick="changeMonth(-1)">◀</button><button onclick="changeMonth(1)">▶</button></div>
                        <div class="calendar-month" id="calendar-month"></div>
                        <button class="btn btn-outline" onclick="goToToday()">Today</button>
                    </div>
                    <div class="calendar-grid" id="calendar-grid"></div>
                </div>
            </div>
            <div id="view-projects" class="view">
                <header class="header"><h1 class="header-title">Projects</h1><button class="btn btn-primary" onclick="openModal('project')">+ New Project</button></header>
                <div class="content"><div class="card-grid" id="projects-list"></div></div>
            </div>
            <div id="view-people" class="view">
                <header class="header"><h1 class="header-title">People</h1><button class="btn btn-primary" onclick="openModal('person')">+ Add Person</button></header>
                <div class="content"><div class="card-grid" id="people-list"></div></div>
            </div>
            <div id="view-clients" class="view">
                <header class="header"><h1 class="header-title">Clients</h1><button class="btn btn-primary" onclick="openModal('client')">+ New Client</button></header>
                <div class="content"><div style="padding:12px;display:flex;justify-content:flex-end"><button class="btn btn-primary" onclick="openClientPanel(0)" style="font-size:13px">+ Add Client</button></div>
<div class="card-grid" id="clients-list"></div></div>
            </div>
            <div id="view-dispatch" class="view">
                <header class="header">
                    <div class="header-left">
                        <h1 class="header-title">Dispatch</h1>
                    </div>
                </header>
                <div class="content">
                    <div style="display:grid;grid-template-columns:1fr 1fr;gap:24px">
                        <div style="background:var(--card);border:1px solid var(--border);border-radius:8px;padding:20px">
                            <h3 style="margin-bottom:16px;font-weight:600">Prepare Dispatch</h3>
                            <div class="form-group">
                                <label class="form-label">Search by PO # or Project Name <span class="req">*</span></label>
                                <div class="ls-search-box">
                                    <span class="ls-search-icon">&#128269;</span>
                                    <input type="text" class="ls-search-input" id="ls-po-search" placeholder="Type PO number or project name..." oninput="searchPOShipments()">
                                </div>
                            </div>
                            <div id="ls-search-results"></div>
                            <div id="ls-selected-items" style="display:none"></div>
                            <div id="ls-split-section" style="display:none">
                                <div class="ls-split-banner">
                                    <input type="checkbox" id="ls-is-split" onchange="toggleSplitLoad()" style="cursor:pointer">
                                    <div>
                                        <div style="font-weight:600;font-size:13px">Split Load</div>
                                        <div style="font-size:12px;color:var(--text2)">Check if this PO needs multiple trucks</div>
                                    </div>
                                </div>
                                <div id="ls-split-details" style="display:none;margin-bottom:16px">
                                    <div class="form-row">
                                        <div class="form-group">
                                            <label class="form-label">Load #</label>
                                            <input type="number" class="form-input" id="ls-load-num" value="1" min="1">
                                        </div>
                                        <div class="form-group">
                                            <label class="form-label">Total Loads</label>
                                            <input type="number" class="form-input" id="ls-load-total" value="2" min="2">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="form-label">Driver <span class="req">*</span></label>
                                <select class="form-select" id="ls-driver"><option value="">Select driver...</option></select>
                            </div>
                            <div class="form-group">
                                <label class="form-label">Truck # <span class="req">*</span></label>
                                <select class="form-select" id="ls-truck">
                                    <option value="">Select truck...</option>
                                    <option>Truck 1</option><option>Truck 2</option><option>Truck 3</option><option>Truck 4</option>
                                    <option>White Van</option><option>BMG Van</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label class="form-label">Equipment</label>
                                <div class="ls-equipment">
                                    <label><input type="checkbox" class="ls-equip" value="Straps"> Straps</label>
                                    <label><input type="checkbox" class="ls-equip" value="Masonite"> Masonite</label>
                                    <label><input type="checkbox" class="ls-equip" value="Tape"> Tape</label>
                                    <label><input type="checkbox" class="ls-equip" value="Vacuum"> Vacuum</label>
                                    <label><input type="checkbox" class="ls-equip" value="Shrink Wrap"> Shrink Wrap</label>
                                    <label><input type="checkbox" class="ls-equip" value="Cleaning Kit"> Cleaning Kit</label>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="form-label">Is The Load Complete?</label>
                                <select class="form-select" id="ls-complete">
                                    <option value="">Select...</option>
                                    <option value="yes">Yes</option>
                                    <option value="no">No</option>
                                    <option value="partial">Partial</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label class="form-label">Notes</label>
                                <textarea class="form-input" id="ls-notes" placeholder="Add any special instructions..." style="resize:vertical;min-height:80px"></textarea>
                            </div>
                            <button class="btn btn-primary" style="width:100%" onclick="submitLoadingSheet()">Submit Dispatch</button>
                        </div>
                        <div>
                            <div style="background:var(--card);border:1px solid var(--border);border-radius:8px;padding:20px">
                                <h3 style="margin-bottom:16px;font-weight:600">Dispatch History</h3>
                                <div class="form-group">
                                    <input type="text" class="form-input" id="ls-history-search" placeholder="Search history by PO or project..." oninput="renderLoadingHistory()">
                                </div>
                                <div id="ls-history" style="max-height:600px;overflow-y:auto"></div>
                                <div id="d-history" style="max-height:400px;overflow-y:auto;margin-top:16px"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div id="view-warehouse" class="view">
                <header class="header"><div class="header-left"><h1 class="header-title">Warehouse</h1></div><button class="btn btn-primary" onclick="openItemModal(null)">+ Add Item</button></header>
                <div class="content">
                    <div id="wh-breadcrumb"></div>
                    <div id="wh-content"></div>
                </div>
            </div>

            <div id="view-settings" class="view">
                <header class="header"><div class="header-left"><h1 class="header-title">Settings</h1></div></header>
                <div class="content">
                    <div class="settings-tabs">
                        <button class="settings-tab active" onclick="settingsTab('integrations',this)">Integrations</button>
                        <button class="settings-tab" onclick="settingsTab('staff',this)">Staff & Permissions</button>
                        <button class="settings-tab" onclick="settingsTab('system',this)">System</button>
                    </div>
                    <div id="settings-integrations" class="settings-section active"></div>
                    <div id="settings-staff" class="settings-section"></div>
                    <div id="settings-system" class="settings-section"></div>
                </div>
            </div>
        
<!-- Client Edit Modal -->
<div id="client-edit-modal" style="display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5);z-index:1000;display:none;align-items:center;justify-content:center">
<div style="background:var(--bg-primary);border-radius:12px;padding:24px;width:90%;max-width:600px;max-height:90vh;overflow-y:auto;margin:auto;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)">
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:16px"><h3 id="client-modal-title">Edit Client</h3><button onclick="closeClientModal()" style="background:none;border:none;font-size:20px;cursor:pointer;color:var(--text-primary)">×</button></div>
<div class="form-group"><label class="form-label">Company Name *</label><input class="form-input" id="ce-company" placeholder="Company name"></div>
<div class="form-group"><label class="form-label">Email</label><input class="form-input" id="ce-email" type="email" placeholder="Email"></div>
<div class="form-group"><label class="form-label">Phone</label><input class="form-input" id="ce-phone" placeholder="Phone"></div>
<div style="display:grid;grid-template-columns:1fr 1fr;gap:12px">
<div class="form-group"><label class="form-label">Address</label><input class="form-input" id="ce-address" placeholder="Address"></div>
<div class="form-group"><label class="form-label">City</label><input class="form-input" id="ce-city" placeholder="City"></div>
</div>
<div style="display:grid;grid-template-columns:1fr 1fr;gap:12px">
<div class="form-group"><label class="form-label">State</label><input class="form-input" id="ce-state" placeholder="State"></div>
<div class="form-group"><label class="form-label">Zip</label><input class="form-input" id="ce-zip" placeholder="Zip"></div>
</div>
<div class="form-group"><label class="form-label">CC Emails</label><input class="form-input" id="ce-ccemails" placeholder="Comma-separated CC emails"></div>
<div class="form-group"><label class="form-label">Notes</label><textarea class="form-input" id="ce-notes" rows="3" placeholder="Notes"></textarea></div>
<div class="form-group"><label class="form-label">Project Managers</label> <div style="display:flex;gap:8px;align-items:center;margin-bottom:8px"><input class="form-input" id="pm-name" placeholder="PM name" style="flex:1"><input class="form-input" id="pm-email" placeholder="PM email" style="flex:1"><button class="btn btn-secondary" id="pm-save-btn" onclick="savePM()">Add</button></div> <div id="ce-pm-list"></div> </div> <div id="ce-projects" style="margin-bottom:16px"></div>
<div style="display:flex;gap:8px;justify-content:flex-end"><button class="btn btn-secondary" onclick="closeClientModal()">Cancel</button><button class="btn btn-primary" onclick="saveClientEdit()">Save</button></div>
</div></div>
</main>
    </div>
    <div class="panel" id="panel">
        <div class="panel-header"><div><div class="panel-title" id="panel-title"></div><div class="panel-subtitle" id="panel-subtitle"></div></div><button class="panel-close" onclick="closePanel()">✕</button></div>
        <div class="panel-tabs" id="panel-tabs">
            <div class="panel-tab-btn active" onclick="switchPanelTab('details',this)">Details</div>
            <div class="panel-tab-btn" onclick="switchPanelTab('completion',this)">Completion</div>
        </div>
        <div class="panel-body">
            <div id="panel-tab-details">
                <div class="panel-section"><div class="panel-section-title">Details</div><div id="panel-details"></div></div>
                <div class="panel-section"><div class="panel-section-title">Assigned Team</div><div id="panel-team"></div></div>
                <div class="panel-section"><div class="panel-section-title">Shipments</div><div id="panel-shipments"></div></div>
                <div class="panel-section"><div class="panel-section-title" style="display:flex;justify-content:space-between;align-items:center">Punchlist Items <button class="btn btn-outline" style="padding:4px 10px;font-size:12px" onclick="openPunchlistFromPanel()">+ Add Item</button></div><div id="panel-punchlist-stats" style="margin-bottom:8px"></div><div id="panel-punchlist"></div></div>
                <div class="panel-section"><div class="panel-section-title">Documents</div><div id="panel-docs"></div></div>
            </div>
            <div id="panel-tab-completion" style="display:none">
                <div id="pc-role-gate"></div>
            </div>
        </div>
    </div>
    <div class="modal-bg" id="modal-scan">
        <div class="modal">
            <div class="modal-header"><h2 class="modal-title">Process Scan</h2><button class="modal-close" onclick="closeModal('scan')">✕</button></div>
            <div class="modal-body">
                <div class="file-attached"><span style="color:var(--green)">✓</span><div><div style="font-weight:500" id="scan-filename"></div><div style="font-size:12px;color:var(--text2)" id="scan-time"></div></div></div>
                <div id="scan-thumbnail-container" style="margin-top:12px"></div>
                <div class="form-group" style="margin-top:16px"><label class="form-label">Purchase Order(PO) # <span class="req">*</span></label><input type="text" class="form-input" id="f-po"></div>
                <div class="form-group"><label class="form-label">Is this a Return Product?</label><select class="form-select" id="f-return"><option value="no">No</option><option value="yes">Yes</option></select></div>
                <div class="form-group"><label class="form-label">Client Name <span class="req">*</span></label><select class="form-select" id="f-client" onchange="onClientChange()"><option value="">Select...</option></select><div class="inline-add hidden" id="inline-client"><input type="text" class="form-input" id="il-client" placeholder="Company"><button class="btn btn-primary" onclick="addInlineClient()">Add</button></div><div class="form-hint"><a href="#" onclick="toggleInline('client');return false">+ Add new</a></div></div>
                <div class="form-group"><label class="form-label">Project Name <span class="req">*</span></label><select class="form-select" id="f-project"><option value="">Select...</option><option value="_unknown">🚩 Unknown</option></select><div class="inline-add hidden" id="inline-project"><input type="text" class="form-input" id="il-project" placeholder="Project"><button class="btn btn-primary" onclick="addInlineProject()">Add</button></div><div class="form-hint"><a href="#" onclick="toggleInline('project');return false">+ Add new</a></div></div>
                <div class="form-group"><label class="form-label">Manufacturer</label><input type="text" class="form-input" id="f-mfr"></div>
                <div class="form-group"><label class="form-label">Cartons/Pallets</label><input type="text" class="form-input" id="f-cartons"></div>
                <div class="form-group"><label class="form-label">Warehouse Location</label><div style="position:relative"><input type="text" class="form-input" id="f-location" placeholder="Select location..." oninput="showFormLocSuggestions(this,'f-loc-sug')" onfocus="focusFormLocInput(this,'f-loc-sug')" onblur="blurFormLocInput(this,'f-loc-sug')" autocomplete="off"><div class="loc-suggestions" id="f-loc-sug" style="display:none"></div></div></div>
                <div class="form-row">
                    <div class="form-group"><label class="form-label">Received Date</label><input type="date" class="form-input" id="f-date"></div>
                    <div class="form-group"><label class="form-label">Complete</label><select class="form-select" id="f-status"><option value="received">Received</option><option value="not-received">Not Received</option></select></div>
                </div>
            </div>
            <div class="modal-footer"><button class="btn btn-outline" onclick="closeModal('scan')">Cancel</button><button class="btn btn-primary" onclick="submitScan()">Submit</button></div>
        </div>
    </div>
    <div class="modal-bg" id="modal-punchitem"><div class="modal"><div class="modal-header"><h2 class="modal-title">New Punchlist Item</h2><button class="modal-close" onclick="closeModal('punchitem')">✕</button></div><div class="modal-body"><div class="form-group"><label class="form-label">Project <span class="req">*</span></label><select class="form-select" id="pi-project"><option value="">Select...</option></select></div><div class="form-group"><label class="form-label">Type <span class="req">*</span></label><select class="form-select" id="pi-type"><option value="">Select...</option><option value="damaged">Damaged</option><option value="missing">Missing</option><option value="backorder">Back-ordered</option></select></div><div class="form-group"><label class="form-label">Description <span class="req">*</span></label><input type="text" class="form-input" id="pi-description" placeholder="Item description"></div><div class="form-group"><label class="form-label">Manufacturer</label><input type="text" class="form-input" id="pi-manufacturer"></div><div class="form-group"><label class="form-label">PO # Reference</label><input type="text" class="form-input" id="pi-po" placeholder="e.g., 11041-18-MM HON"></div><div class="form-group"><label class="form-label">Quantity</label><input type="number" class="form-input" id="pi-qty" value="1" min="1"></div><div class="form-group"><label class="form-label">Reported By</label><select class="form-select" id="pi-reportedby"><option value="">Select...</option></select></div><div class="form-group"><label class="form-label">Status</label><select class="form-select" id="pi-status"><option value="open">Open</option><option value="inprogress">In Progress</option><option value="resolved">Resolved</option></select></div><div class="form-group"><label class="form-label">Photos</label><input type="file" class="form-input" id="pi-photos" accept="image/*" multiple style="padding:0" onchange="handlePunchlistPhotos(event)"><div id="pi-photo-previews" style="margin-top:8px;display:flex;gap:8px;flex-wrap:wrap"></div></div><div class="form-group"><label class="form-label">Notes</label><textarea class="form-input" id="pi-notes" placeholder="Additional notes" style="resize:vertical;min-height:80px"></textarea></div></div><div class="modal-footer"><button class="btn btn-outline" onclick="closeModal('punchitem')">Cancel</button><button class="btn btn-primary" onclick="savePunchlistItem()">Create</button></div></div></div>
    <div class="modal-bg" id="modal-project"><div class="modal"><div class="modal-header"><h2 class="modal-title">New Project</h2><button class="modal-close" onclick="closeModal('project')">✕</button></div><div class="modal-body"><div class="form-group"><label class="form-label">Project Name <span class="req">*</span></label><input type="text" class="form-input" id="p-name"></div><div class="form-group"><label class="form-label">Client <span class="req">*</span></label><select class="form-select" id="p-client" onchange="loadPMDropdown()"><option value="">Select...</option></select></div><div class="form-row"><div class="form-group"><label class="form-label">Install Date</label><input type="date" class="form-input" id="p-date"></div><div class="form-group"><label class="form-label">Time</label><input type="time" class="form-input" id="p-time" value="07:00"></div></div><div class="form-group"><label class="form-label">Location</label><input type="text" class="form-input" id="p-location"></div><div class="form-group"><label class="form-label">Project Manager</label><select class="form-select" id="p-project-manager"><option value="">Select PM...</option></select></div></div><div class="modal-footer"><button class="btn btn-outline" onclick="closeModal('project')">Cancel</button><button class="btn btn-primary" onclick="saveProject()">Create</button></div></div></div>
    <div class="modal-bg" id="modal-person"><div class="modal"><div class="modal-header"><h2 class="modal-title">Add Person</h2><button class="modal-close" onclick="closeModal('person')">✕</button></div><div class="modal-body"><div class="form-group"><label class="form-label">Name <span class="req">*</span></label><input type="text" class="form-input" id="pe-name"></div><div class="form-group"><label class="form-label">Role</label><select class="form-select" id="pe-role"><option>Installer</option><option>Lead Installer</option><option>Driver</option></select></div><div class="form-row"><div class="form-group"><label class="form-label">Phone</label><input type="tel" class="form-input" id="pe-phone"></div><div class="form-group"><label class="form-label">Email</label><input type="email" class="form-input" id="pe-email"></div></div></div><div class="modal-footer"><button class="btn btn-outline" onclick="closeModal('person')">Cancel</button><button class="btn btn-primary" onclick="savePerson()">Add</button></div></div></div>
    <div class="modal-bg" id="modal-client"><div class="modal"><div class="modal-header"><h2 class="modal-title">New Client</h2><button class="modal-close" onclick="closeModal('client')">✕</button></div><div class="modal-body"><div class="form-group"><label class="form-label">Company <span class="req">*</span></label><input type="text" class="form-input" id="c-company"></div><div class="form-group"><label class="form-label">Email</label><input type="email" class="form-input" id="c-email"></div></div><div class="modal-footer"><button class="btn btn-outline" onclick="closeModal('client')">Cancel</button><button class="btn btn-primary" onclick="saveClient()">Create</button></div></div></div>
    <div class="modal-bg" id="modal-delete-project"><div class="modal"><div class="modal-header"><h2 class="modal-title">Delete Project?</h2><button class="modal-close" onclick="closeModal('delete-project')">✕</button></div><div class="modal-body"><p id="delete-project-warning" style="color:var(--text2);margin-bottom:16px">This action will permanently delete the project and all associated data (shipments, punchlist items). This cannot be undone.</p></div><div class="modal-footer"><button class="btn btn-outline" onclick="closeModal('delete-project')">Cancel</button><button class="btn" style="background:var(--red);color:#fff" onclick="confirmDeleteProject()">Delete Project</button></div></div></div>
    <div class="modal-bg" id="modal-inventory-item"><div class="modal" style="max-width:560px"><div class="modal-header"><h2 class="modal-title" id="wh-modal-title">Add Item</h2><button class="modal-close" onclick="closeModal('inventory-item')">✕</button></div><div class="modal-body"><div class="form-group"><label class="form-label">Item Name <span class="req">*</span></label><input type="text" class="form-input" id="wh-item-name" placeholder="Enter item name"></div><div class="form-group"><label class="form-label">Location</label><div id="wh-location-display" style="padding:10px 12px;background:var(--gray-lt);border-radius:6px;font-size:13px;margin-bottom:8px">Not assigned</div><div class="form-group"><label class="form-label">Bin</label><select class="form-select" id="wh-item-bin"><option value="">Select bin...</option></select></div></div><div class="form-row"><div class="form-group"><label class="form-label">Quantity</label><input type="number" class="form-input" id="wh-item-quantity" value="0" min="0"></div><div class="form-group"><label class="form-label">Unit Type</label><select class="form-select" id="wh-item-unit"><option value="units">Units</option><option value="plt">Pallets</option><option value="box">Boxes</option><option value="pk">Packs</option></select></div></div><div class="form-row"><div class="form-group"><label class="form-label">Min Level</label><input type="number" class="form-input" id="wh-item-min-level" value="0" min="0"></div><div class="form-group"><label class="form-label">Price ($)</label><input type="number" class="form-input" id="wh-item-price" value="0" min="0" step="0.01"></div></div><div class="form-group"><label class="form-label">Tags (comma-separated)</label><input type="text" class="form-input" id="wh-item-tags" placeholder="e.g. fragile, electronics"></div><div class="form-group"><label class="form-label">Notes</label><textarea class="form-input" id="wh-item-notes" placeholder="Additional notes..." style="resize:vertical;min-height:80px"></textarea></div><div class="form-group"><label class="form-label">Barcode/QR ID</label><input type="text" class="form-input" id="wh-item-barcode" placeholder="Scan or enter barcode"></div><div class="form-group"><label class="form-label">Custom Fields</label><div id="wh-custom-fields-container"></div><button type="button" class="btn btn-outline" style="padding:4px 12px;font-size:12px;margin-top:8px" onclick="addCustomField()">+ Add Field</button></div></div><div class="modal-footer"><button class="btn btn-outline" onclick="closeModal('inventory-item')">Cancel</button><button class="btn btn-primary" onclick="saveItem()">Save</button></div></div></div>
    <div class="scan-alert" id="scan-alert"><div class="scan-alert-header"><div class="scan-alert-icon">📷</div><div><div class="scan-alert-title">New scan!</div><div class="scan-alert-file" id="alert-file"></div></div></div><div class="scan-alert-actions"><button class="scan-alert-btn primary" onclick="processNewScan()">Process</button><button class="scan-alert-btn secondary" onclick="closeScanAlert()">Later</button></div></div>
        <div class="modal-bg" id="modal-shipment-list"><div class="modal" style="max-width:720px;max-height:90vh"><div class="modal-header"><h2 class="modal-title">Upload Shipment List</h2><button class="modal-close" onclick="closeModal('shipment-list')">&#10005;</button></div><div class="modal-body" style="overflow-y:auto;max-height:60vh"><div class="form-group"><label class="form-label">Client <span class="req">*</span></label><select class="form-select" id="sl-client" onchange="onSLClientChange()"><option value="">Select...</option></select></div><div class="form-group"><label class="form-label">Project <span class="req">*</span></label><select class="form-select" id="sl-project"><option value="">Select...</option></select></div><div class="form-group"><label class="form-label">Customer PO # <span class="req">*</span></label><input type="text" class="form-input" id="sl-po" placeholder="e.g. DV061882116001"></div><div class="form-group"><label class="form-label">Paste Shipment Email <span class="req">*</span></label><textarea class="form-input" id="sl-email" placeholder="Paste the full shipment email here..." style="resize:vertical;min-height:160px;font-family:monospace;font-size:12px"></textarea></div><div class="form-group"><button class="btn btn-outline" onclick="parseShipmentEmail()" style="width:100%">&#128269; Parse Shipment List</button></div><div id="sl-preview" style="display:none"><div style="font-weight:600;margin-bottom:8px;font-size:14px">Preview &mdash; <span id="sl-count">0</span> orders found</div><div id="sl-items" style="max-height:300px;overflow-y:auto"></div></div></div><div class="modal-footer"><button class="btn btn-outline" onclick="closeModal('shipment-list')">Cancel</button><button class="btn btn-primary" id="sl-submit-btn" onclick="submitShipmentList()" disabled>Import Shipments</button></div></div></div>
<div class="toast" id="toast"><span id="toast-msg"></span></div>
<script>
// Supabase Configuration
const SUPABASE_URL = 'https://ilbrtyoeqrbkbbotoopu.supabase.co';
    let camScans = [], camScansLoaded = false;
    let scanTargetShipmentId = null;
    let _authAccessToken = null;
    // Synchronously read auth token from localStorage for immediate use
    try {
      var _storedSession = localStorage.getItem('sb-ilbrtyoeqrbkbbotoopu-auth-token');
      if (_storedSession) {
        var _parsed = JSON.parse(_storedSession);
        if (_parsed && _parsed.access_token) {
          _authAccessToken = _parsed.access_token;
          console.log('[AUTH] Token loaded from localStorage');
        }
      }
    } catch(_e) { console.log('[AUTH] No stored session'); }
    let _currentUser = null;

const SUPABASE_KEY = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImlsYnJ0eW9lcXJia2Jib3Rvb3B1Iiwicm9sZSI6ImFub24iLCJpYXQiOjE3NzA0MjIzMTcsImV4cCI6MjA4NTk5ODMxN30.yPscdd0HuC7jBkBWpPM3Cm4pNC_xGFz1YqvmGVxNVPM';
        const SB = SUPABASE_URL;
        const SK = SUPABASE_KEY;

// Helper function to make Supabase API calls
async function sbFetch(table, method = 'GET', query = '', data = null, headers = {}) {
    const url = `${SUPABASE_URL}/rest/v1/${table}${query}`;
    const options = {
        method,
        headers: {
            'apikey': SUPABASE_KEY,
            'Authorization': `Bearer ${_authAccessToken || SUPABASE_KEY}`,
            'Content-Type': 'application/json',
            ...headers
        }
    };
    if (data) options.body = JSON.stringify(data);

    try {
        const response = await fetch(url, options);
        if (!response.ok) {
            console.warn(`Supabase ${method} ${table} failed:`, response.status);
            return null;
        }
        return await response.json();
    } catch (e) {
        console.warn('Supabase fetch error:', e);
        return null;
    }
}

// Insert a row and get the generated id
async function sbInsert(table, obj) {
    const result = await sbFetch(table, 'POST', '', obj, { 'Prefer': 'return=representation' });
    return result && result[0] ? result[0].id : null;
}

// Update a row by id
async function sbUpdate(table, id, obj) {
    const query = `?id=eq.${id}`;
    return await sbFetch(table, 'PATCH', query, obj, { 'Prefer': 'return=representation' });
}

// Delete a row by id
async function sbDelete(table, id) {
    const query = `?id=eq.${id}`;
    return await sbFetch(table, 'DELETE', query, null, { 'Prefer': 'return=representation' });
}

// Field mapping: camelCase JS ↔ snake_case Supabase
function toDb(table, obj) {
    const mapping = {
        projects: { clientId: 'client_id', date: 'install_date', time: 'install_time' },
        shipments: { clientId: 'client_id', projectId: 'project_id', expectedDate: 'expected_date', date: 'received_date', inventoryStatus: 'inventory_status', location: 'sortly' },
        punchlist: { projectId: 'project_id', reportedById: 'reported_by_id', dateReported: 'date_reported' },
        dispatches: { projectId: 'project_id', dispatchDate: 'dispatch_date', dispatchedById: 'dispatched_by_id' }
    };
    const map = mapping[table] || {};
    const result = {};
    for (let [k, v] of Object.entries(obj)) {
        const dbKey = map[k] || k;
        result[dbKey] = v;
    }
    return result;
}

function fromDb(table, obj) {
    const mapping = {
        projects: { client_id: 'clientId', install_date: 'date', install_time: 'time' },
        shipments: { client_id: 'clientId', project_id: 'projectId', expected_date: 'expectedDate', received_date: 'date', inventory_status: 'inventoryStatus', sortly: 'location' },
        punchlist: { project_id: 'projectId', reported_by_id: 'reportedById', date_reported: 'dateReported' },
        dispatches: { project_id: 'projectId', dispatch_date: 'dispatchDate', dispatched_by_id: 'dispatchedById' }
    };
    const map = mapping[table] || {};
    const result = {};
    for (let [k, v] of Object.entries(obj)) {
        const jsKey = map[k] || k;
        result[jsKey] = v;
    }
    return result;
}

const $ = s => document.querySelector(s);
const $$ = s => document.querySelectorAll(s);
let clients=[], projects=[], people=[], scans=[], shipments=[], punchlist=[], dispatches=[];
let loadingSheets=[], projectCompletions=[];
let staffRoles=[], staffPermissions=[], crmUsers=[], crmIntegrations=[];
let activeSettingsTab = 'integrations';
let currentMonth = new Date(), currentScan = null, currentProject = null, pendingScan = null, openPOs = {};
let pendingPhotoUploads = [], punchlistFilter = {project: null, type: null, status: null};
let projectToDelete = null;
let currentUserId = null;

const sampleClients = [{id:1,company:'Red Thread',email:'client@redthread.com'},{id:2,company:'Service Champions',email:'client@sc.com'},{id:3,company:'Kayne',email:'client@kayne.com'}];
const samplePeople = [{id:1,name:'Carlos Martinez',role:'Lead Installer',phone:'(714) 555-0101',email:'carlos@vector.com'},{id:2,name:'James Wilson',role:'Installer',phone:'(714) 555-0102',email:'james@vector.com'},{id:3,name:'Mike Johnson',role:'Driver',phone:'(714) 555-0103',email:'mike@vector.com'}];
const sampleProjects = [{id:1,name:'Red Thread',clientId:1,date:'2025-02-10',time:'07:00',location:'123 Business Park',team:[1,2],docs:{}},{id:2,name:'Service Champions',clientId:2,date:'2025-02-08',time:'06:30',location:'456 Industrial',team:[3],docs:{}},{id:3,name:'Kayne',clientId:3,date:'2025-02-12',time:'07:30',location:'789 Corporate',team:[1,2,3],docs:{}}];
const sampleScans = [{id:1,filename:'Camera_02-06_14-30.jpg',timestamp:'2025-02-06T14:30:00',status:'pending',thumbnail:null},{id:2,filename:'Camera_02-06_11-15.jpg',timestamp:'2025-02-06T11:15:00',status:'pending',thumbnail:null},{id:3,filename:'Camera_02-05_09-00.jpg',timestamp:'2025-02-05T09:00:00',status:'done',po:'11041-18-MM HON',thumbnail:null}];
const sampleShipments = [
    {id:1,po:'11041',subitem:'11041-18-MM HON',clientId:1,projectId:1,mfr:'HON',expectedDate:'2025-02-08',date:'2025-02-06',status:'received',location:'A1-01',inventoryStatus:'in-warehouse'},
    {id:2,po:'11041',subitem:'11041-19-MM HON',clientId:1,projectId:1,mfr:'HON',expectedDate:'2025-02-08',date:'2025-02-06',status:'received',location:'A1-02',inventoryStatus:'in-warehouse'},
    {id:3,po:'11041',subitem:'11041-20-MM HON',clientId:1,projectId:1,mfr:'HON',expectedDate:'2025-02-08',date:'2025-02-06',status:'received',location:'A1-03',inventoryStatus:'in-warehouse'},
    {id:4,po:'11509',subitem:'11509 1',clientId:2,projectId:2,mfr:'',expectedDate:'2025-02-10',date:null,status:'not-received',location:'',inventoryStatus:'in-warehouse'},
    {id:5,po:'11509',subitem:'11509 2',clientId:2,projectId:2,mfr:'',expectedDate:'2025-02-10',date:null,status:'not-received',location:'',inventoryStatus:'in-warehouse'},
    {id:6,po:'11456',subitem:'11456-01-RS Deskmakers',clientId:3,projectId:3,mfr:'Deskmakers',expectedDate:'2025-02-09',date:null,status:'not-received',location:'',inventoryStatus:'in-warehouse'},
    {id:7,po:'11456',subitem:'11456-02-RS N9NE Furniture',clientId:3,projectId:3,mfr:'N9NE Furniture',expectedDate:'2025-02-09',date:'2025-02-06',status:'received',location:'B2-01',inventoryStatus:'in-warehouse'}
];
const samplePunchlist = [
    {id:1,projectId:1,type:'damaged',description:'Corner cabinet door damage',manufacturer:'HON',po:'11041-18-MM HON',quantity:1,status:'open',reportedById:1,dateReported:'2025-02-06',photos:[],notes:'Arrived with corner damage on left side'},
    {id:2,projectId:2,type:'missing',description:'Missing drawer hardware',manufacturer:'',po:'',quantity:4,status:'inprogress',reportedById:2,dateReported:'2025-02-05',photos:[],notes:'4 drawer handles not included in shipment'},
    {id:3,projectId:3,type:'backorder',description:'Credenza top in walnut',manufacturer:'Deskmakers',po:'11456-01-RS Deskmakers',quantity:1,status:'resolved',reportedById:3,dateReported:'2025-02-04',photos:[],notes:'Ordered and scheduled for delivery 2/15'}
];

document.addEventListener('DOMContentLoaded', async () => { await load(); await loadScanInbox(); render(); await syncCamScannerToSupabase();
    loadCamScannerDocs(); });

async function load() {
    // Try to load from Supabase first
    const sbClients = await sbFetch('clients', 'GET');
    const sbPeople = await sbFetch('people', 'GET');
    const sbProjects = await sbFetch('projects', 'GET');
    const sbScans = await sbFetch('scans', 'GET');
    const sbShipments = await sbFetch('shipments', 'GET');
    const sbPunchlist = await sbFetch('punchlist', 'GET');
    const sbDispatches = await sbFetch('dispatches', 'GET');
    const sbLoadingSheets = await sbFetch('loading_sheets', 'GET');
    const sbProjectCompletions = await sbFetch('project_completions', 'GET');
    const sbStaffRoles = await sbFetch('staff_roles', 'GET'); const sbStaffPerms = await sbFetch('staff_permissions', 'GET'); const sbUsers = await sbFetch('users', 'GET'); const sbIntegrations = await sbFetch('integrations', 'GET');

    if (sbClients && sbClients.length > 0) {
        // Supabase has data - use it
        clients = sbClients;
        people = sbPeople || [];
        projects = (sbProjects || []).map(p => fromDb('projects', p));
        scans = sbScans || [];
        shipments = (sbShipments || []).map(s => fromDb('shipments', s));
        punchlist = (sbPunchlist || []).map(p => fromDb('punchlist', p));
        dispatches = (sbDispatches || []).map(d => fromDb('dispatches', d));
        loadingSheets = sbLoadingSheets || [];
        projectCompletions = sbProjectCompletions || [];
      staffRoles = sbStaffRoles || []; staffPermissions = sbStaffPerms || []; crmUsers = sbUsers || []; crmIntegrations = sbIntegrations || [];
    } else {
        // Supabase is empty - seed with sample data
        const idMaps = { clients: {}, people: {}, projects: {}, scans: {}, shipments: {}, punchlist: {}, dispatches: {} };

        // Seed clients
        for (let sc of sampleClients) {
            const { id: oldId, ...data } = sc;
            const newId = await sbInsert('clients', data);
            idMaps.clients[oldId] = newId;
            clients.push({ id: newId, ...data });
        }

        // Seed people
        for (let sp of samplePeople) {
            const { id: oldId, ...data } = sp;
            const newId = await sbInsert('people', data);
            idMaps.people[oldId] = newId;
            people.push({ id: newId, ...data });
        }

        // Seed projects
        for (let sp of sampleProjects) {
            const { id: oldId, ...data } = sp;
            const dbData = toDb('projects', { ...data, team: data.team || [] });
            const newId = await sbInsert('projects', dbData);
            idMaps.projects[oldId] = newId;
            projects.push({ id: newId, ...data, clientId: idMaps.clients[data.clientId], team: data.team || [] });
        }

        // Seed scans
        for (let ss of sampleScans) {
            const { id: oldId, thumbnail, ...data } = ss;
            const newId = await sbInsert('scans', data);
            idMaps.scans[oldId] = newId;
            scans.push({ id: newId, ...data, thumbnail: null });
        }

        // Seed shipments
        for (let ss of sampleShipments) {
            const { id: oldId, ...data } = ss;
            const dbData = toDb('shipments', { ...data, clientId: idMaps.clients[data.clientId], projectId: idMaps.projects[data.projectId], inventoryStatus: data.inventoryStatus || 'in-warehouse' });
            const newId = await sbInsert('shipments', dbData);
            idMaps.shipments[oldId] = newId;
            shipments.push({ id: newId, ...data, clientId: idMaps.clients[data.clientId], projectId: idMaps.projects[data.projectId], inventoryStatus: data.inventoryStatus || 'in-warehouse' });
        }

        // Seed punchlist
        for (let sp of samplePunchlist) {
            const { id: oldId, ...data } = sp;
            const dbData = toDb('punchlist', { ...data, projectId: idMaps.projects[data.projectId], reportedById: idMaps.people[data.reportedById], photos: [] });
            const newId = await sbInsert('punchlist', dbData);
            idMaps.punchlist[oldId] = newId;
            punchlist.push({ id: newId, ...data, projectId: idMaps.projects[data.projectId], reportedById: idMaps.people[data.reportedById], photos: [] });
        }
    }

    // Cache to localStorage
    await loadCamScannerDocs();
    saveLocal();
    // Load warehouse bins for location dropdown
    var _whBinsData = await sbFetch('warehouse_bins','GET');
    whBins = (_whBinsData||[]).sort(function(a,b){return (a.sort_order||0)-(b.sort_order||0);});
}

function save() {
    // This function now just calls saveLocal() as fallback cache
    saveLocal();
}

function saveLocal() {
    localStorage.setItem('v10_clients', JSON.stringify(clients));
    localStorage.setItem('v10_projects', JSON.stringify(projects));
    localStorage.setItem('v10_people', JSON.stringify(people));
    localStorage.setItem('v10_scans', JSON.stringify(scans));
    localStorage.setItem('v10_shipments', JSON.stringify(shipments));
    localStorage.setItem('v10_punchlist', JSON.stringify(punchlist));
    localStorage.setItem('v10_dispatches', JSON.stringify(dispatches));
    localStorage.setItem('v10_loadingSheets', JSON.stringify(loadingSheets));
    localStorage.setItem('v10_projectCompletions', JSON.stringify(projectCompletions));
}
function render() { renderScans(); renderShipments(); renderCalendar(); renderProjects(); renderPeople(); renderClients(); renderPunchlist(); renderDispatches(); renderLoadingSheet(); populateSelects(); updateBadges(); renderSettings(); }
function updateBadges() { const p = scans.filter(s => s.status === 'pending').length; $('#nav-scans-badge').textContent = p; $('#nav-scans-badge').style.display = p > 0 ? 'inline' : 'none'; }

function renderScans() { var all = (typeof scans !== "undefined" ? scans : []).slice(); all.sort(function(a, b) { return new Date(b.timestamp || b.created_at) - new Date(a.timestamp || a.created_at); }); var el = document.getElementById("scans-table"); if (!el) return; if (all.length === 0) { el.innerHTML = "<p style='padding:16px;color:var(--text2)'>No scans yet.</p>"; return; }
  var html = '<table style="width:100%;border-collapse:collapse;font-size:13px"><thead><tr>';
  html += '<th style="text-align:left;padding:8px;border-bottom:2px solid var(--border);font-weight:600">File</th>';
  html += '<th style="text-align:left;padding:8px;border-bottom:2px solid var(--border);font-weight:600">PO</th>';
  html += '<th style="text-align:left;padding:8px;border-bottom:2px solid var(--border);font-weight:600">Date</th>';
  html += '<th style="text-align:left;padding:8px;border-bottom:2px solid var(--border);font-weight:600">Status</th>';
  html += '<th style="text-align:left;padding:8px;border-bottom:2px solid var(--border);font-weight:600">Actions</th>';
  html += '</tr></thead><tbody>';
  all.forEach(function(sc, idx) {
    var d = sc.timestamp || sc.created_at || "";
    var ds = d ? new Date(d).toLocaleDateString() : "";
    var isPending = sc.status === "pending";
    var rowStyle = "padding:8px;border-bottom:1px solid var(--border);" + (isPending ? "cursor:pointer" : "");
    var onclick = isPending ? " onclick=\"openScanProcessPanel("+idx+")\"" : "";
    var rowBg = isPending ? " style=\"background:#fffbe6\"" : "";
    html += '<tr'+rowBg+onclick+'>';
    html += '<td style="'+rowStyle+'">'+(sc.file_name||sc.filename||"")+'</td>';
    html += '<td style="'+rowStyle+'">'+(sc.po||"")+'</td>';
    html += '<td style="'+rowStyle+'">'+ds+'</td>';
    html += '<td style="'+rowStyle+'"><span style="padding:2px 8px;border-radius:4px;font-size:11px;font-weight:600;background:'+(isPending?"#fff3cd;color:#856404":"#d4edda;color:#155724")+'">'+(sc.status||"pending")+'</span></td>';
    var actions = "";
    if (sc.pdf_url) actions += '<a href="'+sc.pdf_url+'" target="_blank" style="color:var(--accent);font-size:12px" onclick="event.stopPropagation()">View PDF</a> ';
    if (isPending) actions += '<a href="#" onclick="event.preventDefault();event.stopPropagation();openScanProcessPanel('+idx+')" style="color:var(--accent);font-size:12px;font-weight:600">Process</a>';
    html += '<td style="'+rowStyle+'">'+actions+'</td>';
    html += '</tr>';
  });
  html += "</tbody></table>"; el.innerHTML = html; }
var _scanPanelOpen = null;
function openScanProcessPanel(idx) {
  var all = (typeof scans !== "undefined" ? scans : []).slice();
  all.sort(function(a,b){return new Date(b.timestamp||b.created_at)-new Date(a.timestamp||a.created_at);});
  var sc = all[idx]; if(!sc) return;
  _scanPanelOpen = sc;
  var panel = document.getElementById("detail-panel");
  if(!panel){panel=document.createElement("div");panel.id="detail-panel";panel.style.cssText="position:fixed;top:0;right:0;width:380px;height:100%;background:#fff;box-shadow:-2px 0 12px rgba(0,0,0,.15);z-index:1000;overflow-y:auto;padding:20px";document.body.appendChild(panel);}
  panel.style.display="block";
  var h='<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:16px"><div style="font-size:16px;font-weight:700">Process Scan</div><span onclick="document.getElementById(\'detail-panel\').style.display=\'none\'" style="cursor:pointer;font-size:20px">&times;</span></div>';
  h+='<div style="font-size:13px;color:var(--text2);margin-bottom:16px">'+(sc.file_name||sc.filename||"Scan")+'</div>';
  h+='<div class="panel-field"><label style="font-weight:600;font-size:12px;display:block;margin-bottom:4px">PO #</label><input id="sp-po" value="'+(sc.po||"")+'" style="width:100%;padding:8px;border:1px solid var(--border);border-radius:6px;font-size:13px"></div>';
  h+='<div class="panel-field" style="margin-top:12px"><label style="font-weight:600;font-size:12px;display:block;margin-bottom:4px">Subitem</label><input id="sp-subitem" value="" placeholder="e.g. 18-MM HON" style="width:100%;padding:8px;border:1px solid var(--border);border-radius:6px;font-size:13px"></div>';
  h+='<div class="panel-field" style="margin-top:12px"><label style="font-weight:600;font-size:12px;display:block;margin-bottom:4px">Client</label><select id="sp-client" onchange="scanPanelClientChange()" style="width:100%;padding:8px;border:1px solid var(--border);border-radius:6px;font-size:13px"><option value="">Select Client</option>';
  clients.forEach(function(c){h+='<option value="'+c.id+'">'+c.name+'</option>';});
  h+='</select></div>';
  h+='<div class="panel-field" style="margin-top:12px"><label style="font-weight:600;font-size:12px;display:block;margin-bottom:4px">Project</label><select id="sp-project" style="width:100%;padding:8px;border:1px solid var(--border);border-radius:6px;font-size:13px"><option value="">Select Project</option></select></div>';
  h+='<div class="panel-field" style="margin-top:12px"><label style="font-weight:600;font-size:12px;display:block;margin-bottom:4px">Project Managers</label><div id="sp-pms" style="font-size:13px;color:var(--text2)">Select a client first</div></div>';
  h+='<div class="panel-field" style="margin-top:12px"><label style="font-weight:600;font-size:12px;display:block;margin-bottom:4px">Manufacturer</label><input id="sp-mfr" value="" style="width:100%;padding:8px;border:1px solid var(--border);border-radius:6px;font-size:13px"></div>';
  h+='<div class="panel-field" style="margin-top:12px"><label style="font-weight:600;font-size:12px;display:block;margin-bottom:4px">Location</label><input id="sp-loc" value="" placeholder="e.g. A1-01" style="width:100%;padding:8px;border:1px solid var(--border);border-radius:6px;font-size:13px"></div>';
  h+='<div class="panel-field" style="margin-top:12px"><label style="font-weight:600;font-size:12px;display:block;margin-bottom:4px">Cartons</label><input id="sp-cartons" value="" placeholder="e.g. 5" style="width:100%;padding:8px;border:1px solid var(--border);border-radius:6px;font-size:13px"></div>';
  h+='<div class="panel-field" style="margin-top:12px"><label style="font-weight:600;font-size:12px;display:block;margin-bottom:4px">Received Date</label><input id="sp-date" type="date" value="'+new Date().toISOString().split("T")[0]+'" style="width:100%;padding:8px;border:1px solid var(--border);border-radius:6px;font-size:13px"></div>';
  h+='<div style="margin-top:20px;display:flex;gap:8px"><button onclick="processScanRow()" style="flex:1;padding:10px;background:var(--accent);color:#fff;border:none;border-radius:6px;font-weight:600;font-size:13px;cursor:pointer">Process & Send Email</button></div>';
  panel.innerHTML=h;
}
function scanPanelClientChange(){
  var cid=document.getElementById("sp-client").value;
  var projSel=document.getElementById("sp-project");
  var pmDiv=document.getElementById("sp-pms");
  projSel.innerHTML='<option value="">Select Project</option>';
  if(!cid){pmDiv.innerHTML='Select a client first';return;}
  var cProjs=projects.filter(function(p){return p.client_id===cid;});
  cProjs.forEach(function(p){projSel.innerHTML+='<option value="'+p.id+'">'+p.name+'</option>';});
  var cl=clients.find(function(c){return c.id===cid;});
  var pms=cl?getClientPMs(cl):[];
  if(pms.length){
    pmDiv.innerHTML=pms.map(function(pm,i){return '<label style="display:block;margin:4px 0;font-size:13px"><input type="checkbox" class="sp-pm-chk" value="'+(pm.email||"")+'" data-name="'+pm.name+'" checked> '+pm.name+(pm.email?' ('+pm.email+')':'')+'</label>';}).join("");
  } else { pmDiv.innerHTML='<span style="color:var(--text2)">No PMs assigned</span>'; }
}
async function processScanRow(){
  var po=document.getElementById("sp-po").value.trim();
  var subitem=document.getElementById("sp-subitem").value.trim();
  var clientId=document.getElementById("sp-client").value;
  var projectId=document.getElementById("sp-project").value;
  var mfr=document.getElementById("sp-mfr").value.trim();
  var loc=document.getElementById("sp-loc").value.trim();
  var cartons=document.getElementById("sp-cartons").value.trim();
  var recDate=document.getElementById("sp-date").value;
  if(!po){toast("PO # is required","error");return;}
  if(!clientId){toast("Client is required","error");return;}
  var pmChks=document.querySelectorAll(".sp-pm-chk:checked");
  var pmEmails=[];pmChks.forEach(function(c){if(c.value)pmEmails.push(c.value);});
  var shipData={po:po,subitem:subitem||po+"-"+mfr,clientId:clientId,projectId:projectId||null,manufacturer:mfr,location:loc,cartons:cartons,status:"received",inventoryStatus:"in-warehouse",date:recDate,packing_slip_url:_scanPanelOpen?_scanPanelOpen.pdf_url:""};
  await sbInsert("shipments",shipData);
  if(_scanPanelOpen&&_scanPanelOpen.id){await sbUpdate("scans",_scanPanelOpen.id,{status:"done",po:po});}
  var cl=clients.find(function(c){return c.id===clientId;});
  var proj=projectId?projects.find(function(p){return p.id===projectId;}):null;
  var toEmail=cl?cl.email:"";
  var ccEmails=pmEmails.join(",");
  var subj="Receiving: "+po;
  var body="PO: "+po+"\nProject: "+(proj?proj.name:"N/A")+"\nManufacturer: "+mfr+"\nLocation: "+loc+"\nCartons: "+cartons+"\nReceived: "+recDate;
  var mailto="mailto:"+toEmail+"?cc="+encodeURIComponent(ccEmails)+"&subject="+encodeURIComponent(subj)+"&body="+encodeURIComponent(body);
  window.open(mailto);
  document.getElementById("detail-panel").style.display="none";
  await load();renderScans();renderShipments();
  toast("Scan processed & shipment created","success");
}
 function renderShipments() {
  const groups = {};
  shipments.forEach(s => { if (!groups[s.po]) groups[s.po] = []; groups[s.po].push(s); });
  let h = '';
  Object.keys(groups).forEach(po => {
    const items = groups[po], isOpen = openPOs[po];
    const cl = items[0]?.clientId ? (clients.find(c=>c.id===items[0].clientId)||{}) : {};
    const clName = cl.company || '';
    const pr = items[0]?.projectId ? (projects.find(p=>p.id===items[0].projectId)||{}).name||'' : '';
    const pms = cl.id ? getClientPMs(cl) : [];
    const pmHtml = pms.length ? pms.map(function(pm){ return pm.email ? '<a href="mailto:'+pm.email+'" style="color:var(--accent);text-decoration:none" onclick="event.stopPropagation()">'+pm.name+'</a>' : pm.name; }).join(", ") : '';
    const packUrl = items[0]?.packing_slip_url || '';
    const packLink = packUrl ? '<a href="'+packUrl+'" target="_blank" onclick="event.stopPropagation()" style="color:var(--accent);text-decoration:none" title="'+packUrl+'">\u{1F4CE} Slip</a>' : '';
    h += '<div class="po-group" style="border:1px solid var(--border);border-radius:8px;margin-bottom:8px;overflow:hidden">';
    h += '<div class="po-header" onclick="openPOs[\x27'+po+'\x27]=!openPOs[\x27'+po+'\x27];renderShipments()" style="display:grid;grid-template-columns:30px 30px auto 120px 120px 100px 100px 100px 80px;align-items:center;padding:10px 12px;cursor:pointer;background:var(--card);gap:4px">';
    h += '<input type="checkbox" onclick="event.stopPropagation()">';
    h += '<span style="color:var(--text2)">'+(isOpen?'\u25BC':'\u25B6')+'</span>';
    h += '<span><b>'+po+'</b> <span style="color:var(--text2)">('+items.length+')</span></span>';
    h += '<span style="font-size:12px;color:var(--text2)">'+pr+'</span>';
    h += '<span style="font-size:12px">'+packLink+'</span>';
    h += '<span style="font-size:12px;color:var(--accent)">'+clName+'</span>';
    h += '<span style="font-size:12px;color:var(--text2)">'+pmHtml+'</span>';
    h += '<span></span>';
    h += '</div>';
    if (isOpen) {
      h += '<div style="padding:0 12px 8px"><div style="display:grid;grid-template-columns:30px auto 100px 80px 80px 80px 80px 80px;gap:4px;padding:4px 0;border-bottom:1px solid var(--border);font-size:11px;color:var(--text2);text-transform:uppercase">';
      h += '<span></span><span>Subitem</span><span>PM</span><span>Manufacturer</span><span>Location</span><span>Cartons</span><span>Status</span><span>Received</span><span>Inventory</span></div>';
      items.forEach(function(s) {
        var scanMatch = getScanForShipment(s);
        var scanLink = scanMatch ? ' <a href="#" onclick="event.stopPropagation();showScanDetail('+scanMatch.id+')" style="color:var(--accent);text-decoration:none">\u{1F4C4}</a>' : '';
        h += '<div class="subitem-row" onclick="openShipmentPanel('+s.id+')" style="display:grid;grid-template-columns:30px auto 100px 80px 80px 80px 80px 80px;gap:4px;padding:8px 0;border-bottom:1px solid var(--border);cursor:pointer;align-items:center;font-size:13px">';
        h += '<input type="checkbox" onclick="event.stopPropagation()">';
        h += '<span>'+s.subitem+scanLink+'</span>';
        var pmCl=s.clientId?clients.find(function(c){return c.id===s.clientId}):null; var pmN=pmCl?getClientPMs(pmCl).map(function(pm){return pm.name}).join(', '):''; h += '<span style="font-size:12px;color:var(--text2)">'+pmN+'</span>';
        h += '<span style="color:var(--text2)">'+(s.mfr||'')+'</span>';
        h += '<span style="font-family:monospace;font-size:12px">'+(s.location||'')+'</span>';
        h += '<span style="font-size:12px">'+(s.cartons||'')+'</span>';
        h += '<span><span class="status status-'+(s.status||'pending')+'">'+(s.status||'pending')+'</span></span>';
        h += '<span style="font-size:12px">'+(s.date||'')+'</span>';
        h += '<span style="font-size:12px">'+(s.inventoryStatus ? '<span class="status status-'+s.inventoryStatus+'">'+s.inventoryStatus+'</span>':'')+'</span>';
        h += '</div>';
      });
      h += '<div style="padding:6px 0"><a href="#" onclick="event.preventDefault();addSubitem(\x27'+po+'\x27)" style="color:var(--accent);font-size:13px">+ Add subitem</a></div>';
      h += '</div>';
    }
    h += '</div>';
  });
  h += '<div style="padding:8px"><a href="#" onclick="event.preventDefault();addShipmentPO()" style="color:var(--accent);font-size:13px">+ Add Item</a></div>';
  var el = document.getElementById('shipments-table');
  if (el) el.innerHTML = h;
}

function togglePO(po) { openPOs[po] = !openPOs[po]; renderShipments(); }
async function addSubitem(po) {
    const n = prompt('Subitem name:');
    if (!n) return;
    const e = shipments.find(s => s.po === po);

    const data = {
        po,
        subitem: n,
        client_id: e?.clientId,
        project_id: e?.projectId,
        mfr: '',
        expected_date: null,
        received_date: null,
        status: 'not-received',
        sortly: '',
        inventory_status: 'in-warehouse'
    };

    const newId = await sbInsert('shipments', data);
    if (newId) {
        shipments.push({
            id: newId,
            po,
            subitem: n,
            clientId: e?.clientId,
            projectId: e?.projectId,
            mfr: '',
            expectedDate: null,
            date: null,
            status: 'not-received',
            location: '',
            inventoryStatus: 'in-warehouse'
        });
    }
    openPOs[po] = true;
    saveLocal();
    render();
}
async function addNewPO() {
    const po = prompt('PO #:');
    if (!po) return;

    const data = {
        po: po.split('-')[0],
        subitem: po,
        client_id: null,
        project_id: null,
        mfr: '',
        expected_date: null,
        received_date: null,
        status: 'not-received',
        sortly: '',
        inventory_status: 'in-warehouse'
    };

    const newId = await sbInsert('shipments', data);
    if (newId) {
        shipments.push({
            id: newId,
            po: po.split('-')[0],
            subitem: po,
            clientId: null,
            projectId: null,
            mfr: '',
            expectedDate: null,
            date: null,
            status: 'not-received',
            location: '',
            inventoryStatus: 'in-warehouse'
        });
    }
    openPOs[po.split('-')[0]] = true;
    saveLocal();
    render();
}


// Shipment List Parser & Import
let parsedShipmentOrders = [];
function openShipmentListForProject(pid) {
    const p = projects.find(x=>x.id===pid);
    if(!p) return;
    openModal('shipment-list');
    if(p.clientId) { $('#sl-client').value = p.clientId; onSLClientChange(); }
    $('#sl-project').value = pid;
}

function onSLClientChange() {
    const cid = +$('#sl-client').value;
    const opts = '<option value="">Select...</option>' + projects.filter(p => !cid || p.clientId === cid).map(p => '<option value="'+p.id+'">'+p.name+'</option>').join('');
    $('#sl-project').innerHTML = opts;
}

function parseShipmentEmail() {
    const text = $('#sl-email').value;
    if (!text.trim()) return toast('Paste the shipment email first');
    parsedShipmentOrders = [];
    const orderBlocks = text.split(/Order Number:\s*/i).filter(b => b.trim());
    orderBlocks.forEach(block => {
        const order = {};
        const onMatch = block.match(/^(\S+)/);
        order.orderNumber = onMatch ? onMatch[1].trim() : '';
        const vcMatch = block.match(/Vendor Code:\s*(\w+),?\s*\(([^)]+)\)/i);
        order.vendorCode = vcMatch ? vcMatch[1].trim() : '';
        order.vendorName = vcMatch ? vcMatch[2].trim() : '';
        const sfMatch = block.match(/shipping from\s+([^,\n]+)/i);
        order.shipFrom = sfMatch ? sfMatch[1].trim().replace(/\s+/g,' ') : '';
        const dateMatch = block.match(/arrive between\s+(\d{1,2}\/\d{1,2}\/\d{2,4})\s*&\s*(\d{1,2}\/\d{1,2}\/\d{2,4})/i);
        order.arriveStart = dateMatch ? dateMatch[1] : '';
        order.arriveEnd = dateMatch ? dateMatch[2] : '';
        const ccMatch = block.match(/Carton Count:\s*(\d+)/i);
        order.cartons = ccMatch ? parseInt(ccMatch[1]) : 0;
        const wtMatch = block.match(/Total Approximate Weight:\s*([\d,]+)/i);
        order.weight = wtMatch ? wtMatch[1] : '';
        order.items = [];
        const itemLines = block.split('\n');
        let currentItem = null;
        for (let i = 0; i < itemLines.length; i++) {
            const line = itemLines[i].trim();
            const itemMatch = line.match(/^(\w+)\s+(.+?)\s+(\d+)\s+\$[\d.]+/);
            if (itemMatch) {
                currentItem = { itemNum: itemMatch[1], description: itemMatch[2].trim(), qty: parseInt(itemMatch[3]) };
                order.items.push(currentItem);
            }
            const altMatch = line.match(/^(\w+)\s+(.+?)\s+(\d+)\s*$/);
            if (altMatch && !itemMatch && altMatch[2].length > 5) {
                currentItem = { itemNum: altMatch[1], description: altMatch[2].trim(), qty: parseInt(altMatch[3]) };
                order.items.push(currentItem);
            }
            const skuMatch = line.match(/SKU Descr:\s*(.+)/i);
            if (skuMatch && currentItem) {
                currentItem.skuDesc = skuMatch[1].trim();
            }
        }
        if (order.orderNumber) parsedShipmentOrders.push(order);
    });
    if (parsedShipmentOrders.length === 0) {
        toast('No orders found. Check the email format.');
        return;
    }
    $('#sl-count').textContent = parsedShipmentOrders.length;
    let ph = '';
    parsedShipmentOrders.forEach((o, idx) => {
        const dateStr = o.arriveStart ? o.arriveStart+' - '+o.arriveEnd : 'Unknown';
        ph += '<div style="padding:12px;background:var(--gray-lt);border-radius:8px;margin-bottom:8px"><div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:6px"><div><strong style="font-family:monospace">'+o.orderNumber+'</strong><span style="color:var(--muted);margin-left:8px;font-size:12px">'+o.vendorCode+'</span></div><label style="font-size:12px;cursor:pointer"><input type="checkbox" checked id="sl-check-'+idx+'" style="margin-right:4px">Include</label></div><div style="font-size:12px;color:var(--text2);margin-bottom:4px">'+(o.vendorName||'Unknown')+' - '+(o.shipFrom||'Unknown')+'</div><div style="font-size:12px;color:var(--text2);margin-bottom:4px">'+o.cartons+' cartons - '+(o.weight||'?')+' lbs - '+dateStr+'</div><div style="font-size:12px;color:var(--muted)">'+o.items.length+' item(s): '+o.items.map(it => it.description.substring(0,40)+' x'+it.qty).join(', ')+'</div></div>';
    });
    $('#sl-items').innerHTML = ph;
    $('#sl-preview').style.display = 'block';
    $('#sl-submit-btn').disabled = false;
}

async function submitShipmentList() {
    const clientId = +$('#sl-client').value;
    const projectId = +$('#sl-project').value;
    const customerPO = $('#sl-po').value.trim();
    if (!clientId) return toast('Select a client');
    if (!projectId) return toast('Select a project');
    if (!customerPO) return toast('Enter the Customer PO #');
    if (!parsedShipmentOrders.length) return toast('Parse the email first');
    $('#sl-submit-btn').disabled = true;
    $('#sl-submit-btn').textContent = 'Importing...';
    let added = 0, updated = 0;
    for (let i = 0; i < parsedShipmentOrders.length; i++) {
        const chk = document.getElementById('sl-check-' + i);
        if (chk && !chk.checked) continue;
        const o = parsedShipmentOrders[i];
        let expectedDate = null;
        if (o.arriveEnd) {
            const parts = o.arriveEnd.split('/');
            if (parts.length === 3) {
                let yr = parts[2]; if (yr.length === 2) yr = '20' + yr;
                expectedDate = yr+'-'+parts[0].padStart(2,'0')+'-'+parts[1].padStart(2,'0');
            }
        }
        const shortPO = customerPO.length > 6 ? customerPO.substring(0,6) : customerPO;
        const subitemBase = shortPO+'-'+(o.vendorCode || o.orderNumber.substring(0,6));
        const existing = shipments.find(s => s.po === customerPO && s.subitem && s.subitem.includes(o.vendorCode));
        if (existing) {
            existing.expectedDate = expectedDate || existing.expectedDate;
            existing.mfr = o.vendorName || existing.mfr;
            existing.clientId = clientId;
            existing.projectId = projectId;
            await sbUpdate('shipments', existing.id, {
                expected_date: expectedDate,
                mfr: o.vendorName || existing.mfr,
                client_id: clientId,
                project_id: projectId
            });
            updated++;
        } else {
            const desc = o.items.map(it => it.description+' x'+it.qty).join('; ');
            const itemDesc = desc.substring(0, 100) || o.vendorName;
            const subitem = subitemBase + (o.items.length === 1 && o.items[0].description ? ' ' + o.items[0].description.substring(0,30) : '');
            const data = {
                po: customerPO,
                subitem: subitem,
                client_id: clientId,
                project_id: projectId,
                mfr: o.vendorName || o.vendorCode,
                expected_date: expectedDate,
                received_date: null,
                status: 'not-received',
                sortly: '',
                inventory_status: 'in-warehouse'
            };
            const newId = await sbInsert('shipments', data);
            if (newId) {
                shipments.push({
                    id: newId,
                    po: customerPO,
                    subitem: subitem,
                    clientId,
                    projectId,
                    mfr: o.vendorName || o.vendorCode,
                    expectedDate,
                    date: null,
                    status: 'not-received',
                    location: '',
                    inventoryStatus: 'in-warehouse'
                });
                added++;
            }
        }
    }
    openPOs[customerPO] = true;
    saveLocal();
    render();
    closeModal('shipment-list');
    toast('Imported '+added+' new, updated '+updated+' existing shipments');
    parsedShipmentOrders = [];
    $('#sl-email').value = '';
    $('#sl-preview').style.display = 'none';
    $('#sl-submit-btn').textContent = 'Import Shipments';
    $('#sl-submit-btn').disabled = true;
}


function openCameraUpload() {
    const input = $('#camera-input');
    input.value = '';
    input.click();
}

function handleCameraUpload(event) {
    const file = event.target.files[0];
    if (!file) return;

    const reader = new FileReader();
    reader.onload = (e) => {
        const timestamp = new Date();
        const filename = file.name || `Camera_${timestamp.toISOString().slice(5,16).replace('T','_').replace(/:/g,'-')}.${file.type.includes('pdf') ? 'pdf' : 'jpg'}`;

        let thumbnail = null;
        if (file.type.startsWith('image/')) {
            thumbnail = e.target.result;
        }

        pendingScan = {
            id: Date.now(),
            filename: filename,
            timestamp: timestamp.toISOString(),
            status: 'pending',
            thumbnail: thumbnail
        };

        $('#alert-file').textContent = filename;
        $('#scan-alert').classList.add('show');
    };

    if (file.type.startsWith('image/')) {
        reader.readAsDataURL(file);
    } else {
        reader.readAsArrayBuffer(file);
        pendingScan = {
            id: Date.now(),
            filename: file.name,
            timestamp: new Date().toISOString(),
            status: 'pending',
            thumbnail: null
        };
        $('#alert-file').textContent = file.name;
        $('#scan-alert').classList.add('show');
    }
}

function openScanForm(id) {
    currentScan = scans.find(s => s.id === id);
    if (!currentScan) return;
    $('#scan-filename').innerHTML = currentScan.pdf_url ? '<a href="'+currentScan.pdf_url+'" target="_blank" style="color:var(--accent)">' + currentScan.filename + ' 📄</a>' : currentScan.filename;
    $('#scan-time').textContent = new Date(currentScan.timestamp).toLocaleString();

    const thumbnailContainer = $('#scan-thumbnail-container');
    if (currentScan.thumbnail) {
        thumbnailContainer.innerHTML = `<img src="${currentScan.thumbnail}" class="scan-thumbnail" alt="Scan thumbnail">`;
    } else {
        thumbnailContainer.innerHTML = '';
    }

    $('#f-po').value = currentScan.po || '';
    $('#f-client').value = '';
    $('#f-project').innerHTML = '<option value="">Select...</option><option value="_unknown">🚩 Unknown</option>';
    $('#f-mfr').value = '';
    $('#f-cartons').value = '';
    $('#f-date').value = new Date().toISOString().split('T')[0];
    $('#f-status').value = 'received';
    openModal('scan');
}

function onClientChange() {
    const c = +$('#f-client').value;
    const p = c ? projects.filter(x => x.clientId === c) : projects;
    $('#f-project').innerHTML = '<option value="">Select...</option><option value="_unknown">🚩 Unknown</option>' + p.map(x => `<option value="${x.id}">${x.name}</option>`).join('');
}

async function submitScan() {
    if (!currentScan) return;
    const po = $('#f-po').value.trim(), cid = +$('#f-client').value, pid = $('#f-project').value;
    if (!po) return toast('Enter PO #');
    if (!cid) return toast('Select client');
    if (!pid) return toast('Select project');

    // Create shipment in Supabase
    const shipmentData = {
        po: po.split('-')[0],
        subitem: po,
        client_id: cid,
        project_id: pid === '_unknown' ? null : +pid,
        mfr: $('#f-mfr').value.trim(),
        expected_date: null,
        received_date: $('#f-date').value || null,
        status: $('#f-status').value,
        sortly: $('#f-location').value.trim() || '',
        inventory_status: 'in-warehouse'
    };

    const newShipmentId = await sbInsert('shipments', shipmentData);
    if (newShipmentId) {
        shipments.unshift({
            id: newShipmentId,
            po: po.split('-')[0],
            subitem: po,
            clientId: cid,
            projectId: pid === '_unknown' ? '_unknown' : +pid,
            mfr: shipmentData.mfr,
            expectedDate: null,
            date: shipmentData.received_date,
            status: shipmentData.status,
            location: shipmentData.sortly,
            inventoryStatus: 'in-warehouse'
        });
    }

    // Update scan status in Supabase
    await sbUpdate('scans', currentScan.id, { status: 'done', po: po });
    currentScan.status = 'done';
    currentScan.po = po;
    openPOs[po.split('-')[0]] = true;
    saveLocal();
    render();
    closeModal('scan');
    toast('Shipment added!');
    switchTab('shipments', $$('.header-tab')[1]);
}

function renderCalendar() {
    const y = currentMonth.getFullYear(), m = currentMonth.getMonth();
    $('#calendar-month').textContent = currentMonth.toLocaleDateString('en-US', {month:'long', year:'numeric'});
    const first = new Date(y, m, 1), last = new Date(y, m + 1, 0), start = first.getDay(), total = last.getDate(), today = new Date().toISOString().split('T')[0];
    let h = ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'].map(d => `<div class="calendar-day-header">${d}</div>`).join('');
    const prev = new Date(y, m, 0);
    for (let i = start - 1; i >= 0; i--) h += `<div class="calendar-day other"><div class="day-num">${prev.getDate() - i}</div></div>`;
    for (let d = 1; d <= total; d++) {
        const ds = `${y}-${String(m+1).padStart(2,'0')}-${String(d).padStart(2,'0')}`;
        const dp = projects.filter(p => p.date === ds);
        h += `<div class="calendar-day ${ds === today ? 'today' : ''}"><div class="day-num">${d}</div>${dp.map(p => `<div class="calendar-event ${p.team?.length ? '' : 'no-team'}" onclick="openPanel(${p.id})">${p.name}</div>`).join('')}</div>`;
    }
    const rem = 42 - (start + total);
    for (let d = 1; d <= rem; d++) h += `<div class="calendar-day other"><div class="day-num">${d}</div></div>`;
    $('#calendar-grid').innerHTML = h;
}
function changeMonth(d) { currentMonth.setMonth(currentMonth.getMonth() + d); renderCalendar(); }
function goToToday() { currentMonth = new Date(); renderCalendar(); }

function renderPunchlist() {
    // Punchlist now renders inside the project panel via openPanel()
    // This function is kept for compatibility with render() calls
}

function setPunchlistFilter(type, value) {
    if (type === 'project') punchlistFilter.project = value;
    if (type === 'type') punchlistFilter.type = punchlistFilter.type === value ? null : value;
    if (type === 'status') punchlistFilter.status = punchlistFilter.status === value ? null : value;
    renderPunchlist();
}

function handlePunchlistPhotos(event) {
    const files = event.target.files;
    pendingPhotoUploads = [];
    const container = $('#pi-photo-previews');
    container.innerHTML = '';

    Array.from(files).forEach((file, index) => {
        const reader = new FileReader();
        reader.onload = (e) => {
            pendingPhotoUploads[index] = e.target.result;
            const preview = document.createElement('div');
            preview.className = 'photo-preview';
            preview.innerHTML = `<img src="${e.target.result}" alt="preview">`;
            container.appendChild(preview);
        };
        reader.readAsDataURL(file);
    });
}

async function savePunchlistItem() {
    const projectId = +$('#pi-project').value;
    const type = $('#pi-type').value;
    const description = $('#pi-description').value.trim();
    const manufacturer = $('#pi-manufacturer').value.trim();
    const po = $('#pi-po').value.trim();
    const qty = +$('#pi-qty').value;
    const reportedById = +$('#pi-reportedby').value;
    const status = $('#pi-status').value;
    const notes = $('#pi-notes').value.trim();

    if (!projectId) return toast('Select project');
    if (!type) return toast('Select type');
    if (!description) return toast('Enter description');
    if (!reportedById) return toast('Select reporter');

    const data = {
        project_id: projectId,
        type,
        description,
        manufacturer,
        po,
        quantity: qty,
        status,
        reported_by_id: reportedById,
        date_reported: new Date().toISOString().split('T')[0],
        photos: [],
        notes
    };

    const newId = await sbInsert('punchlist', data);
    if (newId) {
        punchlist.push({
            id: newId,
            projectId,
            type,
            description,
            manufacturer,
            po,
            quantity: qty,
            status,
            reportedById,
            dateReported: data.date_reported,
            photos: [],
            notes
        });
    }

    saveLocal();
    render();
    closeModal('punchitem');
    toast('Item created!');
    pendingPhotoUploads = [];
    if (currentProject) openPanel(currentProject.id);
}

function openPunchlistFromPanel() {
    if (!currentProject) return;
    populateSelects();
    openModal('punchitem');
    $('#pi-project').value = currentProject.id;
    $('#pi-type').value = '';
    $('#pi-description').value = '';
    $('#pi-manufacturer').value = '';
    $('#pi-po').value = '';
    $('#pi-qty').value = 1;
    $('#pi-reportedby').value = '';
    $('#pi-status').value = 'open';
    $('#pi-notes').value = '';
    $('#pi-photo-previews').innerHTML = '';
    pendingPhotoUploads = [];
}

function editPunchlistItem(id) {
    const item = punchlist.find(p => p.id === id);
    if (!item) return;

    populateSelects();
    openModal('punchitem');
    document.querySelector('#modal-punchitem .modal-title').textContent = 'Edit Punchlist Item';
    const saveBtn = document.querySelector('#modal-punchitem .modal-footer .btn-primary');
    saveBtn.textContent = 'Save';
    saveBtn.setAttribute('onclick', `updatePunchlistItem(${id})`);

    $('#pi-project').value = item.projectId;
    $('#pi-type').value = item.type;
    $('#pi-description').value = item.description;
    $('#pi-manufacturer').value = item.manufacturer || '';
    $('#pi-po').value = item.po || '';
    $('#pi-qty').value = item.quantity;
    $('#pi-reportedby').value = item.reportedById || '';
    $('#pi-status').value = item.status;
    $('#pi-notes').value = item.notes || '';

    const container = $('#pi-photo-previews');
    container.innerHTML = (item.photos || []).map(src => `<div class="photo-preview"><img src="${src}" alt="photo"></div>`).join('');
    pendingPhotoUploads = item.photos || [];
}

async function updatePunchlistItem(id) {
    const item = punchlist.find(p => p.id === id);
    if (!item) return;

    const projectId = +$('#pi-project').value;
    const type = $('#pi-type').value;
    const description = $('#pi-description').value.trim();
    if (!projectId || !type || !description) return toast('Fill required fields');

    const data = {
        project_id: projectId,
        type,
        description,
        manufacturer: $('#pi-manufacturer').value.trim(),
        po: $('#pi-po').value.trim(),
        quantity: +$('#pi-qty').value,
        reported_by_id: +$('#pi-reportedby').value,
        status: $('#pi-status').value,
        notes: $('#pi-notes').value.trim(),
        photos: []
    };

    await sbUpdate('punchlist', id, data);
    item.projectId = projectId;
    item.type = type;
    item.description = description;
    item.manufacturer = data.manufacturer;
    item.po = data.po;
    item.quantity = data.quantity;
    item.reportedById = data.reported_by_id;
    item.status = data.status;
    item.notes = data.notes;
    item.photos = [];

    saveLocal();
    render();
    closeModal('punchitem');
    toast('Item updated!');
    pendingPhotoUploads = [];

    // Reset modal back to create mode
    document.querySelector('#modal-punchitem .modal-title').textContent = 'New Punchlist Item';
    const saveBtn = document.querySelector('#modal-punchitem .modal-footer .btn-primary');
    saveBtn.textContent = 'Create';
    saveBtn.setAttribute('onclick', 'savePunchlistItem()');

    if (currentProject) openPanel(currentProject.id);
}

function openPanel(pid) {
    currentProject = projects.find(p => p.id === pid);
    if (!currentProject) return;
    const client = clients.find(c => c.id === currentProject.clientId);
    $('#panel-title').textContent = currentProject.name;
    $('#panel-subtitle').textContent = client?.company || '';
    const dt = currentProject.date ? new Date(currentProject.date + 'T12:00:00') : null;
    $('#panel-details').innerHTML = `${dt ? '📅 ' + dt.toLocaleDateString('en-US', {weekday:'long', month:'long', day:'numeric'}) + '<br>' : ''}${currentProject.time ? '🕐 ' + currentProject.time + '<br>' : ''}${currentProject.location ? '📍 ' + currentProject.location : ''}`;
    const assigned = currentProject.team || [];
    $('#panel-team').innerHTML = people.map(p => `<div class="team-item ${assigned.includes(p.id) ? 'assigned' : ''}" onclick="toggleTeam(${p.id})"><div class="card-avatar">${p.name.split(' ').map(n=>n[0]).join('')}</div><div><div style="font-weight:500">${p.name}</div><div style="font-size:12px;color:var(--muted)">${p.role}</div></div><div class="team-check">${assigned.includes(p.id) ? '✓' : ''}</div></div>`).join('');
    const ps = shipments.filter(s => s.projectId === currentProject.id);
    let shipHtml = '';
    if (ps.length) {
        const rec = ps.filter(s=>s.status==='received').length;
        shipHtml += '<div style="font-size:12px;color:var(--muted);margin-bottom:8px;display:flex;justify-content:space-between;align-items:center"><span>'+rec+'/'+ps.length+' received</span><button class="btn btn-outline" style="padding:2px 10px;font-size:11px" onclick="openShipmentListForProject('+currentProject.id+')">Upload List</button></div>';
        shipHtml += ps.map(s => {
            const expD = s.expectedDate ? new Date(s.expectedDate+'T12:00:00') : null;
            const expStr = expD ? expD.toLocaleDateString('en-US',{month:'short',day:'numeric'}) : '';
            const locStr = s.location ? '<span style="color:var(--blue);font-size:11px;font-family:monospace">📍 '+s.location+'</span>' : '';
            return `<div style="display:flex;gap:8px;padding:8px 10px;background:var(--gray-lt);border-radius:6px;margin-bottom:4px;font-size:12px;align-items:center;cursor:pointer" onclick="openShipmentPanel(${s.id})"><span class="status status-${s.status}" style="font-size:10px;padding:2px 6px">${s.status === 'received' ? '✓' : '○'}</span><span style="font-family:monospace;flex:1">${s.subitem}</span><span style="color:var(--muted)">${s.mfr||''}</span>${locStr}${expStr ? '<span style="color:var(--text2);font-size:11px">📅 '+expStr+'</span>' : ''}</div>`;
        }).join('');
    } else {
        shipHtml = '<div style="color:var(--muted);text-align:center;padding:12px"><div>No shipments yet</div><button class="btn btn-outline" style="margin-top:8px;font-size:12px" onclick="openShipmentListForProject('+currentProject.id+')">Upload Shipment List</button></div>';
    }
    $('#panel-shipments').innerHTML = shipHtml;

    const pl = punchlist.filter(p => p.projectId === currentProject.id);
    const plStats = { open: pl.filter(i => i.status === 'open').length, inprogress: pl.filter(i => i.status === 'inprogress').length, resolved: pl.filter(i => i.status === 'resolved').length };
    $('#panel-punchlist-stats').innerHTML = pl.length ? `<div style="display:flex;gap:12px;font-size:12px;margin-bottom:8px"><span style="color:var(--red);font-weight:600">${plStats.open} Open</span><span style="color:var(--yellow);font-weight:600">${plStats.inprogress} In Progress</span><span style="color:var(--green);font-weight:600">${plStats.resolved} Resolved</span></div>` : '';
    $('#panel-punchlist').innerHTML = pl.length ? pl.map(p => {
        const typeColor = p.type === 'damaged' ? 'damaged' : p.type === 'missing' ? 'missing' : 'backorder';
        const statusColor = p.status === 'open' ? 'open' : p.status === 'inprogress' ? 'inprogress' : 'resolved';
        const typeLbl = p.type === 'backorder' ? 'Back-ordered' : p.type.charAt(0).toUpperCase() + p.type.slice(1);
        const statusLbl = p.status === 'inprogress' ? 'In Progress' : p.status.charAt(0).toUpperCase() + p.status.slice(1);
        return `<div style="padding:10px;background:var(--gray-lt);border-radius:6px;margin-bottom:6px;cursor:pointer" onclick="editPunchlistItem(${p.id})"><div style="display:flex;gap:8px;align-items:center;margin-bottom:4px"><span class="badge badge-${typeColor}" style="padding:2px 8px;font-size:11px">${typeLbl}</span><span class="badge badge-${statusColor}" style="padding:2px 8px;font-size:11px">${statusLbl}</span>${p.photos?.length ? '<span style="font-size:11px;color:var(--muted)">📷 '+p.photos.length+'</span>' : ''}</div><div style="font-weight:500;font-size:13px">${p.description}</div><div style="font-size:12px;color:var(--muted);margin-top:2px">${p.manufacturer ? p.manufacturer + ' • ' : ''}${p.po ? 'PO: ' + p.po : ''}${p.quantity > 1 ? ' • Qty: ' + p.quantity : ''}</div></div>`;
    }).join('') : '<div style="color:var(--muted);padding:12px;text-align:center">No punchlist items yet</div>';

    const docs = currentProject.docs || {};
    const dt2 = [{k:'workOrder',n:'Work Order',i:'📋'},{k:'deliveryReceipt',n:'Delivery Receipt',i:'🚚'},{k:'packingSlips',n:'Packing Slips',i:'📄'},{k:'photos',n:'Photos',i:'📷'}];
    $('#panel-docs').innerHTML = dt2.map(d => `<div class="doc-item" onclick="uploadDoc('${d.k}')"><div style="font-size:20px">${d.i}</div><div><div style="font-weight:500">${d.n}</div><div class="doc-status ${docs[d.k] ? 'has' : ''}">${docs[d.k] ? '✓ Uploaded' : 'Not uploaded'}</div></div></div>`).join('');

    const panelBody = document.querySelector('.panel-body');
    const existingActionBtn = panelBody?.querySelector('.panel-action-btn');
    if (existingActionBtn) existingActionBtn.remove();

    const actionBtn = document.createElement('div');
    actionBtn.className = 'panel-action-btn';
    actionBtn.style.cssText = 'display:flex;gap:8px;margin-top:16px';
    actionBtn.innerHTML = `<button class="btn btn-primary" onclick="notifyTeam()" style="flex:1">📧 Send Notification</button>` +
        (currentProject.status === 'completed'
            ? `<button class="btn" style="flex:1;background:var(--red);color:#fff" onclick="completeProject()">🗑️ Delete Project</button>`
            : `<button class="btn btn-outline" style="flex:1" onclick="completeProject()">✓ Complete Project</button>`);
    panelBody.appendChild(actionBtn);

    // Reset to Details tab
    document.getElementById('panel-tab-details').style.display = 'block';
    document.getElementById('panel-tab-completion').style.display = 'none';
    document.querySelectorAll('.panel-tab-btn').forEach(t => t.classList.remove('active'));
    document.querySelector('.panel-tab-btn').classList.add('active');

    $('#panel').classList.add('open');
}
function closePanel() { $('#panel').classList.remove('open'); }

function openShipmentPanel(shipId) {
    const s = shipments.find(x => x.id === shipId);
    if (!s) return;
    $('#panel-title').textContent = s.subitem || s.po;
    $('#panel-subtitle').textContent = 'PO: ' + s.po;
    $('#panel-tabs').style.display = 'none';
    let h = '<div style="margin-bottom:12px;font-size:11px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:0.5px">DETAILS</div>';
    // Client - editable dropdown
    h += '<div class="panel-field"><div class="panel-field-label">Client</div><div class="panel-field-value"><select class="form-select" onchange="updateShipmentField('+s.id+',\'clientId\',+this.value)" style="max-width:220px">';
    h += '<option value="">Select...</option>';
    clients.forEach(c => { h += '<option value="'+c.id+'"'+(s.clientId===c.id?' selected':'')+'>'+c.company+'</option>'; });
    h += '</select></div></div>';
    // Project - editable dropdown
    h += '<div class="panel-field"><div class="panel-field-label">Project</div><div class="panel-field-value"><select class="form-select" onchange="updateShipmentField('+s.id+',\'projectId\',+this.value)" style="max-width:220px">';
    h += '<option value="">Select...</option>';
    projects.forEach(p => { h += '<option value="'+p.id+'"'+(s.projectId===p.id?' selected':'')+'>'+p.name+'</option>'; });
    h += '</select></div></div>';
    // Project Manager - derived from client
    var pmCl = s.clientId ? clients.find(function(c){return c.id===s.clientId}) : null;
    var pmArr = pmCl ? getClientPMs(pmCl) : [];
    h += '<div class="panel-field"><div class="panel-field-label">Project Manager</div><div class="panel-field-value">';
    if (pmArr.length) { h += pmArr.map(function(pm){ return pm.email ? '<a href="mailto:'+pm.email+'" style="color:var(--accent)">'+pm.name+'</a>' : pm.name; }).join(', '); }
    else { h += '<span style="color:var(--text2)">None assigned</span>'; }
    h += '</div></div>';
    // Manufacturer - editable text
    h += '<div class="panel-field"><div class="panel-field-label">Manufacturer</div><div class="panel-field-value"><input type="text" class="form-input" value="'+(s.mfr||'')+'" onchange="updateShipmentField('+s.id+',\'mfr\',this.value)" style="max-width:220px"></div></div>';
    // Location - searchable autocomplete
    h += '<div class="panel-field"><div class="panel-field-label">Location</div><div class="panel-field-value"><div style="position:relative;max-width:220px"><input type="text" class="form-input loc-autocomplete" id="ship-loc-'+s.id+'" value="'+(s.location||'')+'" placeholder="Select location..." oninput="showLocSuggestions(this,'+s.id+')" onfocus="focusLocInput(this,'+s.id+')" onblur="blurLocInput(this,'+s.id+')" onchange="updateShipmentLocation('+s.id+',this.value)" placeholder="e.g. A1-01" autocomplete="off"><div class="loc-suggestions" id="loc-sug-'+s.id+'" style="display:none"></div></div></div></div>';
    // Status - editable dropdown
    h += '<div class="panel-field"><div class="panel-field-label">Status</div><div class="panel-field-value"><select class="form-select" onchange="updateShipmentField('+s.id+',\'status\',this.value)" style="max-width:220px">';
    h += '<option value="received"'+(s.status==='received'?' selected':'')+'>Received</option>';
    h += '<option value="not-received"'+(s.status==='not-received'?' selected':'')+'>Not Received</option>';
    h += '</select></div></div>';
    // Inventory - editable dropdown
    h += '<div class="panel-field"><div class="panel-field-label">Inventory</div><div class="panel-field-value"><select class="form-select" onchange="updateShipmentField('+s.id+',\'inventoryStatus\',this.value)" style="max-width:220px">';
    h += '<option value="in-warehouse"'+(s.inventoryStatus==='in-warehouse'?' selected':'')+'>In Warehouse</option>';
    h += '<option value="dispatched"'+(s.inventoryStatus==='dispatched'?' selected':'')+'>Dispatched</option>';
    h += '<option value="delivered"'+(s.inventoryStatus==='delivered'?' selected':'')+'>Delivered</option>';
    h += '</select></div></div>';
    // Received Date - editable
    h += '<div class="panel-field"><div class="panel-field-label">Received Date</div><div class="panel-field-value"><input type="date" class="form-input" value="'+(s.date||'')+'" onchange="updateShipmentField('+s.id+',\'date\',this.value)" style="max-width:220px"></div></div>';
    // Expected Date - editable
    h += '<div class="panel-field"><div class="panel-field-label">Expected Date</div><div class="panel-field-value"><input type="date" class="form-input" value="'+(s.expectedDate||'')+'" onchange="updateShipmentField('+s.id+',\'expectedDate\',this.value)" style="max-width:220px"></div></div>';
    $('#panel-details').innerHTML = h;
    $('#panel-team').innerHTML = '';
    $('#panel-shipments').innerHTML = '';
    document.querySelector('#panel-punchlist-stats')&&($('#panel-punchlist-stats').innerHTML = '');
    $('#panel-punchlist').innerHTML = '';
    $('#panel-docs').innerHTML = '';
    $('#panel-tab-details').style.display = '';
    $('#panel-tab-completion').style.display = 'none';
    $('#panel').classList.add('open');
}

async function updateShipmentLocation(shipId, loc) {
    const s = shipments.find(x => x.id === shipId);
    if (!s) return;
    s.location = loc;
    if (loc && loc.trim() && s.inventoryStatus !== 'dispatched') {
        s.inventoryStatus = 'in-warehouse';
        s.status = 'received';
    }
    await sbUpdate('shipments', shipId, { sortly: loc, inventory_status: s.inventoryStatus, status: s.status });
    saveLocal();
    renderShipments();
    if(typeof renderWarehouse==='function' && document.getElementById('wh-content')) renderWarehouse();
    const sugEl = document.getElementById('loc-sug-'+shipId);
    if(sugEl) sugEl.style.display='none';
    toast('Location updated' + (loc ? ' — moved to warehouse' : ''));
}

// Generic shipment field updater
async function updateShipmentField(shipId, field, value) {
    const s = shipments.find(x => x.id === shipId);
    if (!s) return;
    s[field] = value;
    // Map JS fields to DB fields
    const dbMap = { clientId:'client_id', projectId:'project_id', expectedDate:'expected_date', date:'received_date', inventoryStatus:'inventory_status', mfr:'mfr', status:'status' };
    const dbField = dbMap[field] || field;
    const update = {};
    update[dbField] = value;
    await sbUpdate('shipments', shipId, update);
    saveLocal();
    renderShipments();
    toast(field.replace(/([A-Z])/g,' $1').replace(/^./,s=>s.toUpperCase()) + ' updated');
}

// Location autocomplete
function getKnownLocations() {
    if(typeof whBins!=='undefined' && whBins.length) {
        return whBins.map(function(b){ return b.name; }).sort();
    }
    var locs = new Set();
    shipments.forEach(function(s){ if(s.location && s.location.trim()) locs.add(s.location.trim()); });
    return Array.from(locs).sort();
}

function showLocSuggestions(input, shipId) {
    var val = input.value.trim().toUpperCase().replace(/[-\s]/g, '');
    var allLocs = getKnownLocations();
    var filtered = val ? allLocs.filter(function(l) {
        return l.toUpperCase().replace(/[-\s]/g, '').indexOf(val) > -1;
    }) : allLocs;
    var limited = filtered.slice(0, 20);
    var sugEl = document.getElementById('loc-sug-' + shipId);
    if (!sugEl) return;
    if (limited.length === 0) { sugEl.style.display = 'none'; return; }
    sugEl.innerHTML = limited.map(function(l) {
        var display = l;
        if (val) {
            var idx = l.toUpperCase().replace(/[-\s]/g, '').indexOf(val);
            display = '<strong>' + l + '</strong>';
        } else {
            display = '<strong>' + l + '</strong>';
        }
        return '<div class="loc-sug-item" onmousedown="selectLocSuggestion(\'' + l + '\',' + shipId + ')">' + display + '</div>';
    }).join('');
    sugEl.style.display = 'block';
}

function focusLocInput(input, shipId) { showLocSuggestions(input, shipId); }
function blurLocInput(input, shipId) {
    setTimeout(()=>{ const sugEl=document.getElementById('loc-sug-'+shipId); if(sugEl) sugEl.style.display='none'; },200);
    const val = input.value.trim();
    if(val) { const locs=getKnownLocations(); if(!locs.some(l=>l.toLowerCase()===val.toLowerCase())){ input.value=''; toast('Please select a valid location from the list'); } }
}

function selectLocSuggestion(loc, shipId) {
    const input = document.getElementById('ship-loc-'+shipId);
    if(input) input.value = loc;
    const sugEl = document.getElementById('loc-sug-'+shipId);
    if(sugEl) sugEl.style.display='none';
    updateShipmentLocation(shipId, loc);
}

// Also for the scan form location autocomplete
function showFormLocSuggestions(input, sugId) {
    var val = input.value.trim().toUpperCase().replace(/[-\s]/g, '');
    var inputId = input.id || '';
    var allLocs = getKnownLocations();
    var filtered = val ? allLocs.filter(function(l) {
        return l.toUpperCase().replace(/[-\s]/g, '').indexOf(val) > -1;
    }) : allLocs;
    var limited = filtered.slice(0, 20);
    var sugEl = document.getElementById(sugId);
    if (!sugEl) return;
    if (limited.length === 0) { sugEl.style.display = 'none'; return; }
    sugEl.innerHTML = limited.map(function(l) {
        return '<div class="loc-sug-item" onmousedown="selectFormLocSuggestion(\'' + l + '\',\'' + inputId + '\',\'' + sugId + '\')"><strong>' + l + '</strong></div>';
    }).join('');
    sugEl.style.display = 'block';
}
function focusFormLocInput(input, sugId) { showFormLocSuggestions(input, sugId); }
function blurFormLocInput(input, sugId) {
    setTimeout(()=>{ const sugEl=document.getElementById(sugId); if(sugEl) sugEl.style.display='none'; },200);
    const val = input.value.trim();
    if(val) { const locs=getKnownLocations(); if(!locs.some(l=>l.toLowerCase()===val.toLowerCase())){ input.value=''; toast('Please select a valid location from the list'); } }
}
function selectFormLocSuggestion(loc, inputId, sugId) {
    document.getElementById(inputId).value = loc;
    document.getElementById(sugId).style.display = 'none';
}
async function toggleTeam(pid) {
    if (!currentProject) return;
    if (!currentProject.team) currentProject.team = [];
    const i = currentProject.team.indexOf(pid);
    if (i >= 0) currentProject.team.splice(i, 1);
    else currentProject.team.push(pid);

    await sbUpdate('projects', currentProject.id, { team: currentProject.team });
    saveLocal();
    openPanel(currentProject.id);
    renderCalendar();
}
async function uploadDoc(k) {
    if (!currentProject) return;
    if (!currentProject.docs) currentProject.docs = {};
    currentProject.docs[k] = true;

    await sbUpdate('projects', currentProject.id, { docs: currentProject.docs });
    saveLocal();
    openPanel(currentProject.id);
    toast('Uploaded');
}
function notifyTeam() { if (!currentProject?.team?.length) return toast('No team'); const m = people.filter(p => currentProject.team.includes(p.id)); window.open(`mailto:${m.map(p=>p.email).join(';')}?subject=Install: ${currentProject.name}`, '_blank'); }

function renderDispatches() {
    // Consolidated dispatch - render loading sheet form and history
    renderLoadingSheet();
    renderLoadingHistory();
}

function updateAvailableItems() {
    const projId = +$('#d-project').value;
    if (!projId) {
        $('#d-items-list').innerHTML = '<div style="padding:12px;color:var(--muted)">Select a project first</div>';
        return;
    }

    const projShipments = shipments.filter(s => s.projectId === projId);
    if (projShipments.length === 0) {
        $('#d-items-list').innerHTML = '<div style="padding:12px;color:var(--muted)">No shipments for this project</div>';
        return;
    }

    // Group by PO number
    const poGroups = {};
    projShipments.forEach(s => {
        const po = s.po || s.subitem?.split('-')[0] || 'Unknown';
        if (!poGroups[po]) poGroups[po] = [];
        poGroups[po].push(s);
    });

    let html = '';
    Object.entries(poGroups).forEach(([po, items]) => {
        html += `<div style="border-bottom:2px solid var(--border)">`;
        html += `<div style="display:flex;align-items:center;justify-content:space-between;padding:8px 12px;background:var(--gray-lt);font-weight:600;font-size:13px">`;
        html += `<span>PO: ${po}</span><span style="font-size:11px;color:var(--text2)">${items.length} item${items.length>1?'s':''}</span></div>`;
        items.forEach(s => {
            const inWH = s.inventoryStatus === 'in-warehouse';
            const received = s.status === 'received';
            const dispatched = s.inventoryStatus === 'dispatched';
            let statusBadge = '';
            let disabled = '';
            if (dispatched) {
                statusBadge = '<span style="background:var(--blue-lt);color:var(--blue);padding:2px 6px;border-radius:4px;font-size:10px;font-weight:600">DISPATCHED</span>';
                disabled = 'disabled';
            } else if (inWH && received) {
                statusBadge = '<span style="background:var(--green-lt);color:var(--green);padding:2px 6px;border-radius:4px;font-size:10px;font-weight:600">IN WAREHOUSE</span>';
            } else if (inWH && !received) {
                statusBadge = '<span style="background:var(--yellow-lt);color:#b8860b;padding:2px 6px;border-radius:4px;font-size:10px;font-weight:600">PENDING</span>';
            } else {
                statusBadge = '<span style="background:var(--gray-lt);color:var(--muted);padding:2px 6px;border-radius:4px;font-size:10px;font-weight:600">' + (s.inventoryStatus || s.status || 'UNKNOWN').toUpperCase() + '</span>';
            }
            const loc = s.location ? `<span style="font-size:11px;color:var(--text2);margin-left:4px">[${s.location}]</span>` : '';
            html += `<label style="display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--border);cursor:${disabled?'not-allowed':'pointer'};${dispatched?'opacity:0.5;':''}">`;
            html += `<input type="checkbox" class="d-item-checkbox" value="${s.id}" style="cursor:pointer;min-width:16px" ${disabled}>`;
            html += `<div style="flex:1;min-width:0">`;
            html += `<div style="display:flex;align-items:center;gap:6px;flex-wrap:wrap"><span style="font-family:monospace;font-size:13px;font-weight:500">${s.subitem || s.po}</span>${loc}</div>`;
            html += `<div style="display:flex;align-items:center;gap:6px;margin-top:3px">${statusBadge}`;
            if (s.mfr) html += `<span style="font-size:11px;color:var(--text2)">${s.mfr}</span>`;
            html += `</div></div></label>`;
        });
        html += `</div>`;
    });

    // Select all / deselect all controls
    const totalSelectable = projShipments.filter(s => s.inventoryStatus !== 'dispatched').length;
    let controls = `<div style="display:flex;justify-content:space-between;align-items:center;padding:8px 12px;background:var(--card);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:1">`;
    controls += `<span style="font-size:12px;font-weight:600;color:var(--text2)">${projShipments.length} shipment${projShipments.length>1?'s':''}</span>`;
    controls += `<div style="display:flex;gap:8px">`;
    controls += `<button onclick="document.querySelectorAll('.d-item-checkbox:not(:disabled)').forEach(c=>c.checked=true)" style="background:none;border:none;color:var(--blue);font-size:11px;cursor:pointer;font-weight:600">Select All</button>`;
    controls += `<button onclick="document.querySelectorAll('.d-item-checkbox').forEach(c=>c.checked=false)" style="background:none;border:none;color:var(--muted);font-size:11px;cursor:pointer;font-weight:600">Clear</button>`;
    controls += `</div></div>`;

    $('#d-items-list').innerHTML = controls + html;
}

function renderDispatchHistory() {
    const projId = +$('#d-project').value;
    if (!projId) {
        $('#d-history').innerHTML = '<div style="padding:12px;color:var(--muted)">Select a project to view history</div>';
        return;
    }

    const projDispatches = dispatches.filter(d => d.projectId === projId).sort((a, b) => new Date(b.dispatchDate) - new Date(a.dispatchDate));
    if (projDispatches.length === 0) {
        $('#d-history').innerHTML = '<div style="padding:12px;color:var(--muted)">No dispatches yet</div>';
        return;
    }

    let historyHtml = '';
    projDispatches.forEach(d => {
        const person = people.find(p => p.id === d.dispatchedById);
        const statusColor = d.status === 'loading' ? 'yellow' : d.status === 'in-transit' ? 'blue' : 'green';
        const itemCount = d.items?.length || 0;
        historyHtml += `<div style="padding:12px;border-bottom:1px solid var(--border);background:var(--gray-lt);border-radius:6px;margin-bottom:8px">
            <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:6px">
                <div style="font-weight:600">Dispatch ${d.id}</div>
                <div style="background:var(--${statusColor});color:#fff;padding:2px 8px;border-radius:4px;font-size:11px;font-weight:600;text-transform:capitalize">${d.status}</div>
            </div>
            <div style="font-size:12px;color:var(--text2);margin-bottom:4px">📅 ${new Date(d.dispatchDate).toLocaleDateString('en-US', {month:'short', day:'numeric', year:'numeric'})}</div>
            <div style="font-size:12px;color:var(--text2);margin-bottom:4px">👤 ${person?.name || 'Unknown'}</div>
            <div style="font-size:12px;color:var(--text2);margin-bottom:4px">🚚 ${d.vehicles?.join(', ') || 'N/A'}</div>
            <div style="font-size:12px;color:var(--text2);margin-bottom:4px">${itemCount} items dispatched</div>
            ${d.notes ? '<div style="font-size:12px;color:var(--muted);margin-top:6px;padding-top:6px;border-top:1px solid var(--border)"><strong>Notes:</strong> ' + d.notes + '</div>' : ''}
        </div>`;
    });
    $('#d-history').innerHTML = historyHtml;
}

async function submitDispatch() {
    const projId = +$('#d-project').value;
    if (!projId) return toast('Select project');

    const itemCheckboxes = document.querySelectorAll('.d-item-checkbox:checked');
    const itemIds = Array.from(itemCheckboxes).map(cb => +cb.value);
    if (itemIds.length === 0) return toast('Select at least one item');

    const vehicleCheckboxes = document.querySelectorAll('.d-vehicle-checkbox:checked');
    const vehicles = Array.from(vehicleCheckboxes).map(cb => cb.value);
    if (vehicles.length === 0) return toast('Select at least one vehicle');

    // Get first person as dispatched_by (warehouse staff)
    const dispatchedById = people[0]?.id || 1;

    const dispatchData = {
        project_id: projId,
        items: itemIds,
        vehicles: vehicles,
        dispatch_date: new Date().toISOString().split('T')[0],
        dispatched_by_id: dispatchedById,
        status: 'loading',
        notes: $('#d-notes').value.trim()
    };

    const newId = await sbInsert('dispatches', dispatchData);
    if (newId) {
        dispatches.unshift({
            id: newId,
            projectId: projId,
            items: itemIds,
            vehicles: vehicles,
            dispatchDate: dispatchData.dispatch_date,
            dispatchedById: dispatchedById,
            status: 'loading',
            notes: dispatchData.notes
        });

        // Update shipments to mark as dispatched
        for (let itemId of itemIds) {
            const shipment = shipments.find(s => s.id === itemId);
            if (shipment) {
                shipment.inventoryStatus = 'dispatched';
                await sbUpdate('shipments', itemId, { inventory_status: 'dispatched' });
            }
        }
    }

    saveLocal();
    render();
    showNav('dispatch');
    toast('Dispatch submitted!');
}

// === Dispatch (consolidated) ===
function switchDispatchTab(tab, el) {
    // Legacy function - no longer needed since consolidated
    renderLoadingSheet();
}

// === Loading Sheet Functions ===
function renderLoadingSheet() {
    // Populate driver dropdown
    const driverOpts = '<option value="">Select driver...</option>' +
        people.map(p => '<option value="' + p.id + '">' + p.name + ' (' + p.role + ')</option>').join('');
    const driverEl = document.getElementById('ls-driver');
    if (driverEl) driverEl.innerHTML = driverOpts;
    renderLoadingHistory();
}

function searchPOShipments() {
    const query = document.getElementById('ls-po-search').value.trim().toLowerCase();
    const resultsEl = document.getElementById('ls-search-results');
    const selectedEl = document.getElementById('ls-selected-items');
    const splitEl = document.getElementById('ls-split-section');

    if (!query || query.length < 2) {
        resultsEl.innerHTML = '';
        selectedEl.style.display = 'none';
        splitEl.style.display = 'none';
        return;
    }

    // Search by PO number OR project name
    const matchesByPO = shipments.filter(s =>
        s.po.toLowerCase().startsWith(query) ||
        s.subitem.toLowerCase().includes(query)
    );
    const matchesByProject = shipments.filter(s => {
        const proj = projects.find(p => p.id === s.projectId);
        return proj && proj.name.toLowerCase().includes(query) && !matchesByPO.includes(s);
    });
    const matches = [...matchesByPO, ...matchesByProject];

    if (matches.length === 0) {
        resultsEl.innerHTML = '<div style="padding:16px;color:var(--muted);text-align:center">No shipments found for &quot;' + query + '&quot;</div>';
        splitEl.style.display = 'none';
        return;
    }

    // Group by PO
    const groups = {};
    matches.forEach(s => {
        if (!groups[s.po]) groups[s.po] = [];
        groups[s.po].push(s);
    });

    let h = '<div class="ls-results">';
    for (let po of Object.keys(groups)) {
        const items = groups[po];
        const proj = projects.find(p => p.id === items[0].projectId);
        h += '<div style="padding:8px 12px;background:var(--gray-lt);font-weight:600;font-size:12px;border-bottom:1px solid var(--border)">PO: ' + po + (proj ? ' &mdash; ' + proj.name : '') + '</div>';
        items.forEach(s => {
            const statusIcon = s.inventoryStatus === 'dispatched' ? '&#128666;' : s.inventoryStatus === 'delivered' ? '&#9989;' : '&#128230;';
            const disabled = s.inventoryStatus === 'dispatched' || s.inventoryStatus === 'delivered';
            h += '<div class="ls-result-item" style="' + (disabled ? 'opacity:0.5' : '') + '">' +
                '<input type="checkbox" class="ls-item-cb" value="' + s.id + '"' + (disabled ? ' disabled' : '') + ' onchange="updateSelectedItems()" style="cursor:pointer">' +
                '<div style="flex:1">' +
                '<div class="ls-po-label">' + s.subitem + '</div>' +
                '<div class="ls-po-meta">' + (s.mfr || 'No mfr') + ' &middot; ' + (s.location || 'No location') + ' &middot; ' + statusIcon + ' ' + (s.inventoryStatus || 'in-warehouse') + '</div>' +
                '</div></div>';
        });
    }
    h += '</div>';
    resultsEl.innerHTML = h;
    splitEl.style.display = 'block';
}

function updateSelectedItems() {
    const checked = document.querySelectorAll('.ls-item-cb:checked');
    const selectedEl = document.getElementById('ls-selected-items');

    if (checked.length === 0) {
        selectedEl.style.display = 'none';
        return;
    }

    const ids = Array.from(checked).map(cb => +cb.value);
    const selected = shipments.filter(s => ids.includes(s.id));

    let h = '<div class="ls-selected"><div class="ls-selected-title">Selected (' + selected.length + ' items)</div>';
    selected.forEach(s => {
        h += '<div style="font-family:monospace;font-size:13px;padding:4px 0">' + s.subitem + '</div>';
    });
    h += '</div>';
    selectedEl.innerHTML = h;
    selectedEl.style.display = 'block';
}

function toggleSplitLoad() {
    const isChecked = document.getElementById('ls-is-split').checked;
    document.getElementById('ls-split-details').style.display = isChecked ? 'block' : 'none';
}

async function submitLoadingSheet() {
    const checked = document.querySelectorAll('.ls-item-cb:checked');
    const itemIds = Array.from(checked).map(cb => +cb.value);
    if (itemIds.length === 0) return toast('Select at least one shipment');

    const driverId = +document.getElementById('ls-driver').value;
    if (!driverId) return toast('Select a driver');

    const truck = document.getElementById('ls-truck').value;
    if (!truck) return toast('Select a truck');

    const equipment = Array.from(document.querySelectorAll('.ls-equip:checked')).map(cb => cb.value);
    const splitEl = document.getElementById('ls-is-split');
    const isSplit = splitEl ? splitEl.checked : false;
    const loadNum = isSplit ? +(document.getElementById('ls-load-num').value) : 1;
    const loadTotal = isSplit ? +(document.getElementById('ls-load-total').value) : 1;
    const loadComplete = document.getElementById('ls-complete').value;
    const notes = document.getElementById('ls-notes').value.trim();

    // Get the PO from the first selected shipment
    const firstShipment = shipments.find(s => s.id === itemIds[0]);
    const poSearch = firstShipment ? firstShipment.po : '';
    const projId = firstShipment ? firstShipment.projectId : null;
    const proj = projId ? projects.find(p => p.id === projId) : null;

    const data = {
        po_search: poSearch,
        project_id: projId,
        project_name: proj ? proj.name : '',
        items: itemIds,
        driver_id: driverId,
        truck: truck,
        equipment: equipment,
        is_split: isSplit,
        load_number: loadNum,
        total_loads: loadTotal,
        load_complete: loadComplete,
        notes: notes,
        submitted_at: new Date().toISOString(),
        status: loadComplete === 'yes' ? 'complete' : 'loading'
    };

    const newId = await sbInsert('loading_sheets', data);
    if (newId) {
        loadingSheets.unshift({ id: newId, ...data });

        // Mark items as dispatched
        for (let itemId of itemIds) {
            const shipment = shipments.find(s => s.id === itemId);
            if (shipment) {
                shipment.inventoryStatus = 'dispatched';
                await sbUpdate('shipments', itemId, { inventory_status: 'dispatched' });
            }
        }
    } else {
        // Fallback: save locally even if Supabase fails
        loadingSheets.unshift({ id: Date.now(), ...data });
    }

    // Reset form
    document.getElementById('ls-po-search').value = '';
    document.getElementById('ls-search-results').innerHTML = '';
    document.getElementById('ls-selected-items').style.display = 'none';
    document.getElementById('ls-split-section').style.display = 'none';
    if (splitEl) splitEl.checked = false;
    const splitDet = document.getElementById('ls-split-details');
    if (splitDet) splitDet.style.display = 'none';
    document.getElementById('ls-driver').value = '';
    document.getElementById('ls-truck').value = '';
    document.querySelectorAll('.ls-equip').forEach(cb => { cb.checked = false; });
    document.getElementById('ls-complete').value = '';
    document.getElementById('ls-notes').value = '';

    saveLocal();
    renderLoadingHistory();
    toast('Loading sheet submitted!');
}

function renderLoadingHistory() {
    const historyEl = document.getElementById('ls-history');
    if (!historyEl) return;
    const searchQ = (document.getElementById('ls-history-search')?.value || '').trim().toLowerCase();
    let sheets = [...loadingSheets];

    if (searchQ) {
        sheets = sheets.filter(ls =>
            (ls.po_search || '').toLowerCase().includes(searchQ) ||
            (ls.project_name || '').toLowerCase().includes(searchQ) ||
            (ls.truck || '').toLowerCase().includes(searchQ)
        );
    }

    sheets.sort((a, b) => new Date(b.submitted_at) - new Date(a.submitted_at));

    if (sheets.length === 0) {
        historyEl.innerHTML = '<div style="padding:20px;text-align:center;color:var(--muted)">No loading sheets yet</div>';
        return;
    }

    let h = '';
    sheets.forEach(ls => {
        const driver = people.find(p => p.id === (ls.driver_id));
        const itemCount = ls.items ? ls.items.length : 0;
        const statusClass = ls.status === 'complete' ? 'complete' : ls.load_complete === 'partial' ? 'partial' : 'loading';
        const date = ls.submitted_at ? new Date(ls.submitted_at) : new Date();

        h += '<div class="ls-history-card">' +
            '<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:8px">' +
            '<div style="font-weight:600;font-family:monospace">PO: ' + (ls.po_search || 'N/A') + '</div>' +
            '<div style="display:flex;gap:6px">' +
            (ls.is_split ? '<span class="ls-tag ls-tag-split">Split ' + (ls.load_number||1) + '/' + (ls.total_loads||1) + '</span>' : '') +
            '<span class="ls-tag ls-tag-' + statusClass + '">' + (statusClass === 'complete' ? 'Complete' : statusClass === 'partial' ? 'Partial' : 'Loading') + '</span>' +
            '</div></div>' +
            '<div style="font-size:12px;color:var(--text2);display:grid;grid-template-columns:1fr 1fr;gap:4px">' +
            '<div>&#128666; ' + (ls.truck || 'N/A') + '</div>' +
            '<div>&#128100; ' + (driver ? driver.name : 'Unknown') + '</div>' +
            '<div>&#128230; ' + itemCount + ' items</div>' +
            '<div>&#128197; ' + date.toLocaleDateString('en-US', {month:'short',day:'numeric'}) + '</div>' +
            '</div>' +
            (ls.equipment && ls.equipment.length ? '<div style="margin-top:8px;font-size:11px;color:var(--muted)">&#128295; ' + ls.equipment.join(', ') + '</div>' : '') +
            (ls.project_name ? '<div style="margin-top:4px;font-size:11px;color:var(--muted)">&#128193; ' + ls.project_name + '</div>' : '') +
            (ls.notes ? '<div style="margin-top:6px;padding-top:6px;border-top:1px solid var(--border);font-size:12px;color:var(--muted)"><strong>Notes:</strong> ' + ls.notes + '</div>' : '') +
            '</div>';
    });

    historyEl.innerHTML = h;
}

// === Panel Tab Switcher ===
function switchPanelTab(tab, el) {
    document.querySelectorAll('.panel-tab-btn').forEach(t => t.classList.remove('active'));
    el.classList.add('active');
    document.getElementById('panel-tab-details').style.display = tab === 'details' ? 'block' : 'none';
    document.getElementById('panel-tab-completion').style.display = tab === 'completion' ? 'block' : 'none';
    if (tab === 'completion') renderProjectCompletion();
}

// === Project Completion Functions ===
function renderProjectCompletion() {
    const gate = document.getElementById('pc-role-gate');
    if (!gate || !currentProject) return;

    // Build user selector + role gate
    let h = '<div class="pc-section">' +
        '<div class="pc-section-title">Identify Yourself</div>' +
        '<select class="form-select" id="pc-user-select" onchange="onPCUserChange()">' +
        '<option value="">Select your name...</option>';
    people.forEach(p => {
        h += '<option value="' + p.id + '"' + (currentUserId === p.id ? ' selected' : '') + '>' + p.name + ' (' + p.role + ')</option>';
    });
    h += '</select></div>';

    // Check if a lead is selected
    const selectedPerson = currentUserId ? people.find(p => p.id === currentUserId) : null;
    const isLead = selectedPerson && selectedPerson.role.toLowerCase().includes('lead');

    if (!currentUserId) {
        h += '<div class="pc-role-lock"><div class="pc-role-lock-icon">&#128100;</div><div style="font-weight:600">Select your name above</div><div style="font-size:13px;color:var(--text2);margin-top:4px">Only Lead Installers can fill this form</div></div>';
    } else if (!isLead) {
        h += '<div class="pc-role-lock"><div class="pc-role-lock-icon">&#128274;</div><div style="font-weight:600">Access Restricted</div><div style="font-size:13px;color:var(--text2);margin-top:4px">Only Lead Installers can submit the completion form. Your role: ' + selectedPerson.role + '</div></div>';
    } else {
        // Show the full completion form
        const existing = projectCompletions.find(pc => pc.project_id === currentProject.id);
        const d = existing || {};

        h += '<div style="background:var(--green-lt);padding:10px 12px;border-radius:6px;margin-bottom:16px;font-size:13px;color:var(--green)">&#9989; Logged in as <strong>' + selectedPerson.name + '</strong> (Lead)</div>';

        // Is Final Day
        h += '<div class="pc-section"><div class="pc-section-title">Project Info</div>' +
            '<div class="form-group"><label class="form-label">Is This The Final Day of The Project? <span class="req">*</span></label>' +
            '<select class="form-select" id="pc-final-day"><option value="">Select...</option><option value="yes"' + (d.is_final_day === 'yes' ? ' selected' : '') + '>Yes</option><option value="no"' + (d.is_final_day === 'no' ? ' selected' : '') + '>No</option></select></div>' +
            '<div class="form-group"><label class="form-label">Project Name</label><input type="text" class="form-input" id="pc-proj-name" value="' + (currentProject.name || '') + '" readonly style="background:var(--gray-lt)"></div>' +
            '<div class="form-group"><label class="form-label">PO Number</label><input type="text" class="form-input" id="pc-po" value="' + (d.po_number || '') + '"></div>' +
            '<div class="form-group"><label class="form-label">Lead Name</label><input type="text" class="form-input" id="pc-lead-name" value="' + selectedPerson.name + '" readonly style="background:var(--gray-lt)"></div>' +
            '<div class="form-group"><label class="form-label">Phone</label><input type="tel" class="form-input" id="pc-phone" value="' + (d.phone || selectedPerson.phone || '') + '"></div></div>';

        // Product Placement Checklist
        h += '<div class="pc-section"><div class="pc-section-title">Product Placement Checklist</div><div class="pc-checklist">' +
            pcCheckbox('pc-panels-straight', 'Panels Are Straight', d) +
            pcCheckbox('pc-furniture-correct', 'Furniture Is Placed Correctly', d) +
            '</div></div>';

        // Leveling Checklist
        h += '<div class="pc-section"><div class="pc-section-title">Leveling Checklist</div><div class="pc-checklist">' +
            pcCheckbox('pc-panels-leveled', 'Panels Are Leveled', d) +
            pcCheckbox('pc-lateral-leveled', 'Lateral Files Are Leveled', d) +
            pcCheckbox('pc-surfaces-leveled', 'Surfaces Are Leveled', d) +
            '</div></div>';

        // Cleaning
        h += '<div class="pc-section"><div class="pc-section-title">Cleaning</div><div class="pc-checklist">' +
            pcCheckbox('pc-clean-panels', 'Panels / Workstations', d) +
            pcCheckbox('pc-clean-surfaces', 'Surfaces Are Clean', d) +
            pcCheckbox('pc-clean-pedestals', 'Pedestals and Drawers', d) +
            pcCheckbox('pc-clean-lateral', 'Lateral Files Are Clean', d) +
            pcCheckbox('pc-clean-legs', 'Legs Are Clean', d) +
            pcCheckbox('pc-clean-trash', 'Trash Is Removed', d) +
            pcCheckbox('pc-clean-vacuum', 'Vacuum Floors', d) +
            '</div></div>';

        // End of Day Checklist
        h += '<div class="pc-section"><div class="pc-section-title">End Of Day Checklist</div><div class="pc-checklist">' +
            pcCheckbox('pc-eod-trash', 'Trash Is Organized/Removed', d) +
            pcCheckbox('pc-eod-hallways', 'Hallways Are Clear', d) +
            pcCheckbox('pc-eod-pictures', 'Take Pictures', d) +
            '</div></div>';

        // Product Return
        h += '<div class="pc-section"><div class="pc-section-title">Product Return</div>' +
            '<div class="form-group"><label class="form-label">Product Return</label>' +
            '<select class="form-select" id="pc-return"><option value="">Select...</option><option value="yes"' + (d.product_return === 'yes' ? ' selected' : '') + '>Yes</option><option value="no"' + (d.product_return === 'no' ? ' selected' : '') + '>No</option></select></div>' +
            '<div class="form-group"><label class="form-label">Product Return Inventory</label>' +
            '<textarea class="form-input" id="pc-return-inv" placeholder="Ex: 2 speedpacks, 1 chair, 1 desk" style="resize:vertical;min-height:60px">' + (d.product_return_inventory || '') + '</textarea></div></div>';

        // Product Damaged
        h += '<div class="pc-section"><div class="pc-section-title">Product Damaged</div>' +
            '<div class="form-group"><label class="form-label">Product Damaged</label>' +
            '<select class="form-select" id="pc-damaged"><option value="">Select...</option><option value="yes"' + (d.product_damaged === 'yes' ? ' selected' : '') + '>Yes</option><option value="no"' + (d.product_damaged === 'no' ? ' selected' : '') + '>No</option></select></div>' +
            '<div class="form-group"><label class="form-label">Take Photos Of The Following:</label><div class="pc-checklist">' +
            pcCheckbox('pc-photo-damage', 'Damage On Item', d) +
            pcCheckbox('pc-photo-sticker', 'Sticker/Label', d) +
            pcCheckbox('pc-photo-box', 'Complete Box', d) +
            '</div></div>' +
            '<div class="form-group"><label class="form-label">Inventory Of Damaged Items</label>' +
            '<textarea class="form-input" id="pc-damaged-inv" placeholder="Ex: 1 Shared Leg SN 158342" style="resize:vertical;min-height:60px">' + (d.inventory_damaged_items || '') + '</textarea></div></div>';

        // Submit
        h += '<button class="btn btn-primary" style="width:100%;margin-top:8px" onclick="submitProjectCompletion()">' + (existing ? 'Update Completion Form' : 'Submit Completion Form') + '</button>';
        if (existing) {
            h += '<div style="text-align:center;margin-top:8px;font-size:12px;color:var(--muted)">Last submitted: ' + new Date(existing.submitted_at).toLocaleString() + '</div>';
        }
    }

    gate.innerHTML = h;
}

function pcCheckbox(id, label, data) {
    const checked = data && data.checklists && data.checklists[id] ? ' checked' : '';
    return '<label><input type="checkbox" id="' + id + '"' + checked + ' style="cursor:pointer"> <span>' + label + '</span></label>';
}

function onPCUserChange() {
    currentUserId = +document.getElementById('pc-user-select').value || null;
    renderProjectCompletion();
}

async function submitProjectCompletion() {
    if (!currentProject || !currentUserId) return toast('Select your name first');

    const checklists = {};
    document.querySelectorAll('#panel-tab-completion input[type="checkbox"]').forEach(cb => {
        if (cb.id && cb.id.startsWith('pc-')) checklists[cb.id] = cb.checked;
    });

    const data = {
        project_id: currentProject.id,
        lead_id: currentUserId,
        is_final_day: document.getElementById('pc-final-day').value,
        po_number: document.getElementById('pc-po').value.trim(),
        phone: document.getElementById('pc-phone').value.trim(),
        checklists: checklists,
        product_return: document.getElementById('pc-return').value,
        product_return_inventory: document.getElementById('pc-return-inv').value.trim(),
        product_damaged: document.getElementById('pc-damaged').value,
        inventory_damaged_items: document.getElementById('pc-damaged-inv').value.trim(),
        submitted_at: new Date().toISOString()
    };

    const existing = projectCompletions.find(pc => pc.project_id === currentProject.id);
    if (existing) {
        await sbUpdate('project_completions', existing.id, data);
        Object.assign(existing, data);
        toast('Completion form updated!');
    } else {
        const newId = await sbInsert('project_completions', data);
        if (newId) {
            projectCompletions.push({ id: newId, ...data });
        } else {
            projectCompletions.push({ id: Date.now(), ...data });
        }
        toast('Completion form submitted!');
    }

    saveLocal();
    renderProjectCompletion();
}

function completeProject() {
    if (!currentProject) return;
    const proj = projects.find(p => p.id === currentProject.id);
    if (!proj) return;

    if (proj.status === 'completed') {
        projectToDelete = proj;
        openModal('delete-project');
    } else {
        proj.status = 'completed';
        sbUpdate('projects', proj.id, { status: 'completed' });
        saveLocal();
        render();
        openPanel(proj.id);
        toast('Project marked complete');
    }
}

async function confirmDeleteProject() {
    if (!projectToDelete) return;

    // Delete all shipments for this project
    const projShipments = shipments.filter(s => s.projectId === projectToDelete.id);
    for (let s of projShipments) {
        await sbDelete('shipments', s.id);
    }
    shipments = shipments.filter(s => s.projectId !== projectToDelete.id);

    // Delete all punchlist items for this project
    const projPunchlist = punchlist.filter(p => p.projectId === projectToDelete.id);
    for (let p of projPunchlist) {
        await sbDelete('punchlist', p.id);
    }
    punchlist = punchlist.filter(p => p.projectId !== projectToDelete.id);

    // Delete all dispatches for this project
    const projDispatches = dispatches.filter(d => d.projectId === projectToDelete.id);
    for (let d of projDispatches) {
        await sbDelete('dispatches', d.id);
    }
    dispatches = dispatches.filter(d => d.projectId !== projectToDelete.id);

    // Delete the project
    await sbDelete('projects', projectToDelete.id);
    projects = projects.filter(p => p.id !== projectToDelete.id);

    projectToDelete = null;
    saveLocal();
    render();
    closeModal('delete-project');
    closePanel();
    toast('Project deleted');
}

function renderProjects() { $('#projects-list').innerHTML = projects.map(p => { const c = clients.find(x => x.id === p.clientId); const ps = shipments.filter(s => s.projectId === p.id); const rec = ps.filter(s => s.status === 'received').length; const isCompleted = p.status === 'completed'; return `<div class="card" onclick="openPanel(${p.id})" style="${isCompleted ? 'opacity:0.6;border-color:var(--gray)' : ''}"><div class="card-header"><div class="card-avatar" style="background:${isCompleted ? 'var(--gray-lt)' : 'var(--green-lt)'};color:${isCompleted ? 'var(--muted)' : 'var(--green)'}">${isCompleted ? '✓' : '📁'}</div><div><div class="card-title">${p.name}${isCompleted ? ' <span style="font-size:12px;background:var(--gray-lt);color:var(--muted);padding:2px 8px;border-radius:4px;margin-left:8px">Completed</span>' : ''}</div><div class="card-subtitle">${c?.company || ''}</div></div></div><div class="card-stats"><span><strong>${rec}/${ps.length}</strong> received</span><span><strong>${p.team?.length || 0}</strong> assigned</span></div></div>`; }).join(''); }
function renderPeople() { $('#people-list').innerHTML = people.map(p => `<div class="card" style="cursor:default"><div class="card-header"><div class="card-avatar">${p.name.split(' ').map(n=>n[0]).join('')}</div><div><div class="card-title">${p.name}</div><div class="card-subtitle">${p.role}</div></div></div><div class="card-stats"><span>${p.phone || ''}</span></div></div>`).join(''); }
function renderClients() {
    var list = $('#clients-list');
    if (!list) return;
    list.innerHTML = clients.map(function(c) {
      var projCount = projects.filter(function(p) { return p.clientId === c.id; }).length;
      return '<div class="card" style="cursor:pointer;padding:12px;margin-bottom:8px" onclick="openClientPanel(' + c.id + ')">' +
        '<div style="display:flex;justify-content:space-between;align-items:center">' +
        '<div><strong>' + (c.company || '') + '</strong>' +
        (c.email ? '<div style="font-size:12px;color:var(--text-secondary)">' + c.email + '</div>' : '') + '</div>' +
        '<div style="text-align:right;font-size:12px;color:var(--text-secondary)">' + projCount + ' project' + (projCount !== 1 ? 's' : '') + '</div>' +
        '</div></div>';
    }).join('');
  }

function populateSelects() {
    const o = '<option value="">Select...</option>' + clients.map(c => `<option value="${c.id}">${c.company}</option>`).join('');
    $('#f-client').innerHTML = o;
    $('#p-client').innerHTML = o;

    const projOptions = '<option value="">Select...</option>' + projects.map(p => `<option value="${p.id}">${p.name}</option>`).join('');
    $('#pi-project').innerHTML = projOptions;

    const peopleOptions = '<option value="">Select...</option>' + people.map(p => `<option value="${p.id}">${p.name}</option>`).join('');
    $('#pi-reportedby').innerHTML = peopleOptions;
}

async function saveProject() {
    const n = $('#p-name').value.trim();
    const c = +$('#p-client').value;
    if (!n) return toast('Enter name');
    if (!c) return toast('Select client');

    const data = {
        name: n,
        client_id: c,
        install_date: $('#p-date').value || null,
        install_time: $('#p-time').value || '07:00',
        location: $('#p-location').value.trim(),
        project_manager: document.getElementById('p-project-manager').value || null,
        project_manager_id: document.getElementById('p-project-manager').selectedOptions[0]?.dataset?.personId ? parseInt(document.getElementById('p-project-manager').selectedOptions[0].dataset.personId) : null,
        team: [],
        docs: {}
    };

    const newId = await sbInsert('projects', data);
    if (newId) {
        projects.push({ id: newId, name: n, clientId: c, date: data.install_date, time: data.install_time, location: data.location, team: [], docs: {} });
    }
    saveLocal();
    render();
    closeModal('project');
    toast('Created');
}
async function savePerson() {
    const n = $('#pe-name').value.trim();
    if (!n) return toast('Enter name');

    const data = {
        name: n,
        role: $('#pe-role').value,
        phone: $('#pe-phone').value.trim(),
        email: $('#pe-email').value.trim()
    };

    const newId = await sbInsert('people', data);
    if (newId) {
        people.push({ id: newId, ...data });
    }
    saveLocal();
    render();
    closeModal('person');
    toast('Added');
}
async function saveClient() {
    const c = $('#c-company').value.trim();
    if (!c) return toast('Enter company');

    const data = {
        company: c,
        email: $('#c-email').value.trim()
    };

    const newId = await sbInsert('clients', data);
    if (newId) {
        clients.push({ id: newId, ...data });
    }
    saveLocal();
    render();
    closeModal('client');
    toast('Created');
}

function toggleInline(t) { $(`#inline-${t}`).classList.toggle('hidden'); }
async function addInlineClient() {
    const n = $('#il-client').value.trim();
    if (!n) return;

    const data = { company: n, email: '' };
    const newId = await sbInsert('clients', data);
    if (newId) {
        const c = { id: newId, ...data };
        clients.push(c);
    }
    saveLocal();
    populateSelects();
    $('#f-client').value = newId;
    onClientChange();
    $('#il-client').value = '';
    $('#inline-client').classList.add('hidden');
}
async function addInlineProject() {
    const n = $('#il-project').value.trim();
    const c = +$('#f-client').value;
    if (!n) return;
    if (!c) return toast('Select client first');

    const data = {
        name: n,
        client_id: c,
        install_date: null,
        install_time: '07:00',
        location: '',
        team: [],
        docs: {}
    };

    const newId = await sbInsert('projects', data);
    if (newId) {
        const p = {
            id: newId,
            name: n,
            clientId: c,
            date: null,
            time: '07:00',
            location: '',
            team: [],
            docs: {}
        };
        projects.push(p);
    }
    saveLocal();
    onClientChange();
    $('#f-project').value = newId;
    $('#il-project').value = '';
    $('#inline-project').classList.add('hidden');
}

async function processNewScan() {
    if (pendingScan) {
        const data = {
            filename: pendingScan.filename,
            timestamp: pendingScan.timestamp,
            status: pendingScan.status,
            po: null,
            thumbnail: null,
            onedrive_url: null,
            pdf_url: pendingScan.pdf_url || null,
            camscanner_id: pendingScan.camscanner_id || null
        };

        const newId = await sbInsert('scans', data);
        if (newId) {
            pendingScan.id = newId;
            scans.unshift(pendingScan);
        }
        saveLocal();
        render();
        closeScanAlert();
        openScanForm(newId || pendingScan.id);
        pendingScan = null;
    }
}
async function closeScanAlert() {
    if (pendingScan) {
        const data = {
            filename: pendingScan.filename,
            timestamp: pendingScan.timestamp,
            status: pendingScan.status,
            po: null,
            thumbnail: null,
            onedrive_url: null
        };

        const newId = await sbInsert('scans', data);
        if (newId) {
            pendingScan.id = newId;
            scans.unshift(pendingScan);
        }
        saveLocal();
        render();
        pendingScan = null;
    }
    $('#scan-alert').classList.remove('show');
}

function showNav(v) { $$('.view').forEach(x => x.classList.remove('active')); $(`#view-${v}`).classList.add('active'); $$('.nav-item').forEach(n => n.classList.remove('active')); const navEl = $(`.nav-item[onclick="showNav('${v}')"]`) || $(`.nav-item[onclick*="showNav('${v}')"]`); if(navEl) navEl.classList.add('active'); closePanel(); }
function switchTab(t, el) {
  document.querySelectorAll(".header-tab").forEach(function(x){ x.classList.remove("active"); });
  el.classList.add("active");
  document.querySelectorAll(".tab-content").forEach(function(x){ x.classList.remove("active"); });
  var target = document.getElementById("tab-" + t);
  if (target) target.classList.add("active");
}
function openModal(t) {
      if (arguments[0] === 'project') loadPMDropdown(); document.getElementById('modal-'+t).classList.add('open'); if(t==='shipment-list'){ document.getElementById('sl-client').innerHTML='<option value="">Select...</option>'+clients.map(function(c){return '<option value="'+c.id+'">'+c.company+'</option>';}).join(''); document.getElementById('sl-project').innerHTML='<option value="">Select...</option>'+projects.map(function(p){return '<option value="'+p.id+'">'+p.name+'</option>';}).join(''); document.getElementById('sl-email').value='';document.getElementById('sl-po').value='';document.getElementById('sl-preview').style.display='none';document.getElementById('sl-submit-btn').disabled=true;document.getElementById('sl-submit-btn').textContent='Import Shipments';parsedShipmentOrders=[]; } }
function closeModal(t) { $(`#modal-${t}`).classList.remove('open'); }
function toast(m) { $('#toast-msg').textContent = m; $('#toast').classList.add('show'); setTimeout(() => $('#toast').classList.remove('show'), 3000); }

// ===== WAREHOUSE MODULE =====
let whRows=[],whBays=[],whBins=[],whItems=[],whCustomFields=[];
let whNav={level:'rows',rowId:null,bayId:null,binId:null,itemId:null};
let currentItemEdit=null, currentItemCFs=[], whLoaded=false;

function naturalSort(a,b){ return new Intl.Collator(undefined,{numeric:true,sensitivity:'base'}).compare(a,b); }

async function loadWarehouse(){
    const r=await sbFetch('warehouse_rows','GET');
    whRows=(r||[]).sort((a,b)=>(a.sort_order||0)-(b.sort_order||0));
    const b=await sbFetch('warehouse_bays','GET');
    whBays=(b||[]).sort((a,b2)=>naturalSort(a.name,b2.name));
    const bn=await sbFetch('warehouse_bins','GET');
    whBins=(bn||[]).sort((a,b2)=>(a.sort_order||0)-(b2.sort_order||0));
    const it=await sbFetch('inventory_items','GET');
    whItems=it||[];
    const cf=await sbFetch('item_custom_fields','GET');
    whCustomFields=cf||[];
}

async function initWarehouse(){
    if(!whLoaded){ await loadWarehouse(); whLoaded=true; }
    renderWarehouse();
}

function renderWarehouse(){
    const bc=$('#wh-breadcrumb'), ct=$('#wh-content');
    if(!bc||!ct) return;
    // Breadcrumb
    let crumbs=[`<a onclick="whNavigate('rows')">All Rows</a>`];
    if(whNav.rowId){ const row=whRows.find(r=>r.id==whNav.rowId); if(row) crumbs.push(`<span class="separator">›</span><a onclick="whNavigate('bays',${whNav.rowId})">${row.name}</a>`); }
    if(whNav.bayId){ const bay=whBays.find(b=>b.id==whNav.bayId); if(bay) crumbs.push(`<span class="separator">›</span><a onclick="whNavigate('bins',${whNav.bayId})">${bay.name}</a>`); }
    if(whNav.binId){ const bin=whBins.find(b=>b.id==whNav.binId); if(bin) crumbs.push(`<span class="separator">›</span><a onclick="whNavigate('items',${whNav.binId})">${bin.name}</a>`); }
    if(whNav.level==='detail'&&whNav.itemId){ const item=whItems.find(i=>i.id==whNav.itemId); if(item) crumbs.push(`<span class="separator">›</span><span class="current">${item.name}</span>`); }
    bc.innerHTML=`<div class="wh-breadcrumb">${crumbs.join('')}</div>`;

    let h='';
    if(whNav.level==='rows') h=renderWhRows();
    else if(whNav.level==='bays') h=renderWhBays(whNav.rowId);
    else if(whNav.level==='bins') h=renderWhBins(whNav.bayId);
    else if(whNav.level==='items') h=renderWhItems(whNav.binId);
    else if(whNav.level==='detail') h=renderWhItemDetail(whNav.itemId);
    ct.innerHTML=h;
}

function whNavigate(level,id){
    if(level==='rows') whNav={level:'rows',rowId:null,bayId:null,binId:null,itemId:null};
    else if(level==='bays'){ whNav.level='bays'; whNav.rowId=id; whNav.bayId=null; whNav.binId=null; whNav.itemId=null; }
    else if(level==='bins'){ whNav.level='bins'; whNav.bayId=id; whNav.binId=null; whNav.itemId=null; }
    else if(level==='items'){ whNav.level='items'; whNav.binId=id; whNav.itemId=null; }
    else if(level==='detail'){ whNav.level='detail'; whNav.itemId=id; }
    renderWarehouse();
}

function renderWhRows(){ var rows=(typeof whRows!=="undefined"&&Array.isArray(whRows))?whRows:[]; if(rows.length===0) return '<div class="wh-empty"><div class="wh-empty-icon">\u{1F3ED}</div>No warehouse rows found</div>'; var h='<div class="wh-grid">'; rows.forEach(function(row){ var bc=whBays.filter(function(b){return b.row_id===row.id;}).length; var totalBins=whBins.filter(function(b){ var bayIds=whBays.filter(function(bay){return bay.row_id===row.id;}).map(function(bay){return bay.id;}); return bayIds.indexOf(b.bay_id)!==-1; }).length; h+='<div class="wh-card" onclick="whNavigate(\'bays\','+row.id+')">'; h+='<div class="wh-card-icon row">'+row.name.charAt(0)+'</div>'; h+='<div class="wh-card-info"><div class="name">Row '+row.name+(row.is_special?" \u2B50":"")+'</div>'; h+='<div class="count">'+bc+' bay'+(bc!==1?"s":"")+' \u00B7 '+totalBins+' bin'+(totalBins!==1?"s":"")+'</div></div></div>'; }); return h+'</div>'; } function renderWhBays(rowId){
    const bays=whBays.filter(b=>b.row_id==rowId).sort((a,b)=>naturalSort(a.name,b.name));
    if(!bays.length) return '<div class="wh-empty"><div class="wh-empty-icon">📦</div>No bays found</div>';
    let h='<div class="wh-grid">';
    bays.forEach(bay=>{
        const bc=whBins.filter(b=>b.bay_id===bay.id).length;
        h+=`<div class="wh-card" onclick="whNavigate('bins',${bay.id})"><div class="wh-card-icon bay">${bay.name.replace(/[^A-Z]/gi,'').charAt(0)}</div><div class="wh-card-info"><div class="name">${bay.name}</div><div class="count">${bc} bin${bc!==1?'s':''}</div></div></div>`;
    });
    return h+'</div>';
}

function renderWhBins(bayId){
    const bins=whBins.filter(b=>b.bay_id==bayId).sort((a,b)=>(a.sort_order||0)-(b.sort_order||0));
    if(!bins.length) return '<div class="wh-empty"><div class="wh-empty-icon">📦</div>No bins found</div>';
    let h='<div class="wh-grid">';
    bins.forEach(bin=>{
        const ic=whItems.filter(i=>i.bin_id===bin.id).length;
        const sc=shipments.filter(s=>s.location&&s.location.toLowerCase()===bin.name.toLowerCase()).length;
        const total=ic+sc;
        h+=`<div class="wh-card" onclick="whNavigate('items',${bin.id})"><div class="wh-card-icon bin">${bin.name.split('-').pop().charAt(0)}</div><div class="wh-card-info"><div class="name">${bin.name}</div><div class="count">${total} item${total!==1?'s':''}${sc?' ('+sc+' shipment'+(sc!==1?'s':'')+')':''}</div></div></div>`;
    });
    return h+'</div>';
}

function renderWhItems(binId){
    const items=whItems.filter(i=>i.bin_id==binId);
    const bin=whBins.find(b=>b.id==binId);
    const binName=bin?bin.name:'';
    const binShipments=binName?shipments.filter(s=>s.location&&s.location.toLowerCase()===binName.toLowerCase()):[];
    if(!items.length&&!binShipments.length) return '<div class="wh-empty"><div class="wh-empty-icon">📦</div>No items in this bin<br><button class="btn btn-primary" style="margin-top:16px" onclick="openItemModal(null)">+ Add Item</button></div>';
    let h='';
    if(binShipments.length){
        h+='<div style="margin-bottom:16px"><div style="font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:8px">Shipments in this bin</div><div class="wh-grid">';
        binShipments.forEach(s=>{
            const cl=clients.find(c=>c.id===s.clientId);
            h+=`<div class="wh-item-card" onclick="openShipmentPanel(${s.id})" style="border-left:3px solid var(--blue)"><div class="thumb">📦</div><div class="info"><div class="name">${s.subitem||s.po}</div><div class="qty">${s.mfr||''}${cl?' · '+cl.company:''}</div></div></div>`;
        });
        h+='</div></div>';
    }
    if(items.length){
        if(binShipments.length) h+='<div style="font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:8px">Inventory items</div>';
        h+='<div class="wh-grid">';
        items.forEach(item=>{
            const photos=item.photos||[];
            const thumb=photos.length?`<img src="${photos[0]}">`:'📦';
            h+=`<div class="wh-item-card" onclick="whNavigate('detail',${item.id})"><div class="thumb">${thumb}</div><div class="info"><div class="name">${item.name}</div><div class="qty">${item.quantity} ${item.unit_type||'units'}${item.price?' · $'+(item.quantity*item.price).toFixed(2):''}</div></div></div>`;
        });
        h+='</div>';
    }
    return h;
}

function renderWhItemDetail(itemId){
    const item=whItems.find(i=>i.id==itemId);
    if(!item) return '<p>Item not found</p>';
    const bin=whBins.find(b=>b.id===item.bin_id);
    const bay=bin?whBays.find(b=>b.id===bin.bay_id):null;
    const row=bay?whRows.find(r=>r.id===bay.row_id):null;
    const loc=row&&bay&&bin?`${row.name} › ${bay.name} › ${bin.name}`:'Unknown';
    const tv=(item.quantity||0)*(item.price||0);
    const fields=whCustomFields.filter(f=>f.item_id==itemId).sort((a,b)=>(a.sort_order||0)-(b.sort_order||0));
    const tags=item.tags?item.tags.split(',').map(t=>t.trim()).filter(t=>t):[];
    let h=`<div class="wh-detail"><div class="wh-detail-header"><div class="wh-detail-title">${item.name}</div><div style="display:flex;gap:8px"><button class="btn btn-outline" onclick="openItemModal(${item.id})">Edit</button><button class="btn" style="background:var(--red);color:#fff" onclick="deleteItem(${item.id})">Delete</button></div></div>`;
    h+=`<div class="wh-detail-section"><div class="wh-detail-label">Location</div><div class="wh-detail-value">${loc}</div></div>`;
    h+=`<div class="wh-detail-section"><div class="wh-detail-row"><div><div class="wh-detail-label">Quantity</div><div class="wh-detail-value">${item.quantity} ${item.unit_type||'units'}</div></div><div><div class="wh-detail-label">Min Level</div><div class="wh-detail-value">${item.min_level||0}</div></div></div><div class="wh-detail-row"><div><div class="wh-detail-label">Unit Price</div><div class="wh-detail-value">$${(item.price||0).toFixed(2)}</div></div><div><div class="wh-detail-label">Total Value</div><div class="wh-detail-value">$${tv.toFixed(2)}</div></div></div></div>`;
    if(tags.length) { h+='<div class="wh-detail-section"><div class="wh-detail-label">Tags</div><div>'; tags.forEach(t=>{h+=`<span class="wh-tag">${t}</span>`;}); h+='</div></div>'; }
    if(item.notes) h+=`<div class="wh-detail-section"><div class="wh-detail-label">Notes</div><div class="wh-detail-value">${item.notes}</div></div>`;
    if(fields.length){ h+='<div class="wh-detail-section"><div class="wh-detail-label">Custom Fields</div>'; fields.forEach(f=>{h+=`<div style="margin-bottom:8px"><strong>${f.field_name}:</strong> ${f.field_value}</div>`;}); h+='</div>'; }
    if(item.barcode_id) h+=`<div class="wh-detail-section"><div class="wh-detail-label">Barcode/QR ID</div><div class="wh-detail-value" style="font-family:monospace">${item.barcode_id}</div></div>`;
    return h+'</div>';
}

function openItemModal(itemId){
    currentItemEdit=itemId?whItems.find(i=>i.id==itemId):null;
    currentItemCFs=itemId?whCustomFields.filter(f=>f.item_id==itemId).sort((a,b)=>(a.sort_order||0)-(b.sort_order||0)):[];
    $('#wh-modal-title').textContent=currentItemEdit?'Edit Item':'Add Item';
    // Populate bin dropdown
    let binOpts='<option value="">Select bin...</option>';
    whRows.forEach(row=>{
        const bays=whBays.filter(b=>b.row_id===row.id);
        bays.forEach(bay=>{
            const bins=whBins.filter(b=>b.bay_id===bay.id);
            bins.forEach(bin=>{ binOpts+=`<option value="${bin.id}">${row.name} › ${bay.name} › ${bin.name}</option>`; });
        });
    });
    $('#wh-item-bin').innerHTML=binOpts;
    if(currentItemEdit){
        $('#wh-item-name').value=currentItemEdit.name||'';
        $('#wh-item-quantity').value=currentItemEdit.quantity||0;
        $('#wh-item-unit').value=currentItemEdit.unit_type||'units';
        $('#wh-item-min-level').value=currentItemEdit.min_level||0;
        $('#wh-item-price').value=currentItemEdit.price||0;
        $('#wh-item-tags').value=currentItemEdit.tags||'';
        $('#wh-item-notes').value=currentItemEdit.notes||'';
        $('#wh-item-barcode').value=currentItemEdit.barcode_id||'';
        $('#wh-item-bin').value=currentItemEdit.bin_id||'';
        const bin=whBins.find(b=>b.id===currentItemEdit.bin_id);
        const bay=bin?whBays.find(b=>b.id===bin.bay_id):null;
        const row=bay?whRows.find(r=>r.id===bay.row_id):null;
        $('#wh-location-display').textContent=row&&bay&&bin?`${row.name} › ${bay.name} › ${bin.name}`:'Not assigned';
    } else {
        $('#wh-item-name').value=''; $('#wh-item-quantity').value=0; $('#wh-item-unit').value='units';
        $('#wh-item-min-level').value=0; $('#wh-item-price').value=0; $('#wh-item-tags').value='';
        $('#wh-item-notes').value=''; $('#wh-item-barcode').value=''; currentItemCFs=[];
        if(whNav.binId) $('#wh-item-bin').value=whNav.binId;
        const bin=whBins.find(b=>b.id==whNav.binId);
        const bay=bin?whBays.find(b=>b.id===bin.bay_id):null;
        const row=bay?whRows.find(r=>r.id===bay.row_id):null;
        $('#wh-location-display').textContent=row&&bay&&bin?`${row.name} › ${bay.name} › ${bin.name}`:'Select below';
    }
    renderCFsForm();
    openModal('inventory-item');
}

function renderCFsForm(){
    let h='';
    currentItemCFs.forEach((f,i)=>{
        h+=`<div class="wh-custom-field"><input type="text" class="form-input wh-cf-name" value="${f.field_name||''}" placeholder="Field name"><input type="text" class="form-input wh-cf-val" value="${f.field_value||''}" placeholder="Value"><button type="button" class="remove-btn" onclick="removeCF(${i})">✕</button></div>`;
    });
    $('#wh-custom-fields-container').innerHTML=h;
}
function addCustomField(){ currentItemCFs.push({field_name:'',field_value:'',sort_order:currentItemCFs.length}); renderCFsForm(); }
function removeCF(i){ currentItemCFs.splice(i,1); renderCFsForm(); }

async function saveItem(){
    const name=$('#wh-item-name').value.trim();
    if(!name) return toast('Enter item name');
    const binId=$('#wh-item-bin').value;
    if(!binId) return toast('Select a bin location');
    const obj={name, bin_id:+binId, quantity:+($('#wh-item-quantity').value)||0, unit_type:$('#wh-item-unit').value, min_level:+($('#wh-item-min-level').value)||0, price:+($('#wh-item-price').value)||0, tags:$('#wh-item-tags').value.trim(), notes:$('#wh-item-notes').value.trim(), barcode_id:$('#wh-item-barcode').value.trim(), updated_at:new Date().toISOString()};
    try {
        let itemId;
        if(currentItemEdit){
            await sbUpdate('inventory_items',currentItemEdit.id,obj);
            itemId=currentItemEdit.id;
        } else {
            obj.photos=[];
            itemId=await sbInsert('inventory_items',obj);
        }
        // Save custom fields
        const names=$$('.wh-cf-name'), vals=$$('.wh-cf-val');
        if(currentItemEdit){ for(let f of currentItemCFs){ if(f.id) await sbDelete('item_custom_fields',f.id); } }
        for(let i=0;i<names.length;i++){
            const fn=names[i].value.trim(), fv=vals[i].value.trim();
            if(fn||fv) await sbInsert('item_custom_fields',{item_id:itemId,field_name:fn,field_value:fv,sort_order:i});
        }
        closeModal('inventory-item');
        await loadWarehouse();
        renderWarehouse();
        toast(currentItemEdit?'Item updated':'Item added');
    } catch(e){ console.error('Save item error:',e); toast('Error saving item'); }
}

async function deleteItem(id){
    if(!confirm('Delete this item permanently?')) return;
    const fields=whCustomFields.filter(f=>f.item_id==id);
    for(let f of fields) await sbDelete('item_custom_fields',f.id);
    await sbDelete('inventory_items',id);
    await loadWarehouse();
    whNavigate('items',whNav.binId);
    toast('Item deleted');
}

/* ====================== SETTINGS & STAFF MANAGEMENT ====================== */

function settingsTab(tab, el) {
    activeSettingsTab = tab;
    document.querySelectorAll('.settings-tab').forEach(t => t.classList.remove('active'));
    document.querySelectorAll('.settings-section').forEach(s => s.classList.remove('active'));
    if (el) { el.classList.add('active'); }
    else {
        const tabs = document.querySelectorAll('.settings-tab');
        const tabMap = {integrations:0, staff:1, system:2};
        if(tabs[tabMap[tab]]) tabs[tabMap[tab]].classList.add('active');
    }
    const sec = document.getElementById('settings-'+tab);
    if(sec) sec.classList.add('active');
    renderSettings();
}

function renderSettings() {
    renderIntegrations();
    renderStaffTab();
    renderSystemTab();
}

function renderIntegrations() {
    const el = document.getElementById('settings-integrations');
    if(!el) return;
    const outlookInt = crmIntegrations.find(i => i.type === 'outlook');
    const isConnected = outlookInt && outlookInt.status === 'connected';
    const cameraInt = crmIntegrations.find(i => i.type === 'camera');
    const cameraOn = cameraInt && cameraInt.status === 'connected';

    el.innerHTML = '<div class="settings-card"><div class="settings-card-header"><h3>Microsoft Outlook Calendar</h3><span class="badge '+(isConnected?'badge-connected':'badge-disconnected')+'">'+(isConnected?'Connected':'Not Connected')+'</span></div><div class="integration-card"><div class="integration-icon" style="background:#0078d4;color:#fff">\u{1F4C5}</div><div class="integration-info"><p>Sync your Outlook calendar to see upcoming installs, deliveries, and team schedules directly in Vector CRM.</p>'+(isConnected?'<div style="display:flex;gap:8px;align-items:center"><button class="btn btn-outline" onclick="syncOutlookCalendar()">\u{1F504} Sync Now</button><button class="btn btn-outline" style="color:var(--red);border-color:var(--red)" onclick="disconnectOutlook()">Disconnect</button></div>':'<button class="btn btn-primary" onclick="initiateOutlookAuth()">Connect Outlook</button><span style="font-size:11px;color:var(--muted);margin-left:8px">Requires Microsoft 365 account</span>')+'</div></div></div><div class="settings-card"><div class="settings-card-header"><h3>Camera Upload</h3><span class="badge '+(cameraOn?'badge-connected':'badge-disconnected')+'">'+(cameraOn?'Active':'Inactive')+'</span></div><div class="integration-card"><div class="integration-icon" style="background:var(--green);color:#fff">\u{1F4F8}</div><div class="integration-info"><p>Enable camera photo capture for receiving, punchlist documentation, and project completion photos.</p><label class="toggle-switch"><input type="checkbox" '+(cameraOn?'checked':'')+' onchange="toggleCameraIntegration(this.checked)"><span class="toggle-slider"></span></label></div></div></div><div class="settings-card"><div class="settings-card-header"><h3>Supabase Database</h3><span class="badge badge-connected">Connected</span></div><div class="integration-card"><div class="integration-icon" style="background:#3ecf8e;color:#fff">\u{1F5C4}\u{FE0F}</div><div class="integration-info"><p>Cloud database powering Vector CRM. All data syncs in real-time.</p><span style="font-size:12px;color:var(--muted)">8 active tables</span></div></div></div>';
}


function generateCodeVerifier() {
    const arr = new Uint8Array(32);
    crypto.getRandomValues(arr);
    return btoa(String.fromCharCode(...arr)).replace(/\+/g,'-').replace(/\//g,'_').replace(/=/g,'');
}

async function generateCodeChallenge(verifier) {
    const encoder = new TextEncoder();
    const data = encoder.encode(verifier);
    const digest = await crypto.subtle.digest('SHA-256', data);
    return btoa(String.fromCharCode(...new Uint8Array(digest))).replace(/\+/g,'-').replace(/\//g,'_').replace(/=/g,'');
}

async function initiateOutlookAuth() {
    const outlookInt = crmIntegrations.find(i => i.type === 'outlook');
    const config = outlookInt && outlookInt.config ? (typeof outlookInt.config === 'string' ? JSON.parse(outlookInt.config) : outlookInt.config) : {};
    const clientId = config.clientId || '';
    if (!clientId) { openOAuthSetupModal(); return; }
    const verifier = generateCodeVerifier();
    sessionStorage.setItem('oauth_verifier', verifier);
    const challenge = await generateCodeChallenge(verifier);
    const redirectUri = encodeURIComponent(window.location.origin + window.location.pathname);
    const scope = encodeURIComponent('Calendars.ReadWrite offline_access User.Read');
    window.location.href = 'https://login.microsoftonline.com/common/oauth2/v2.0/authorize?client_id='+clientId+'&response_type=code&redirect_uri='+redirectUri+'&scope='+scope+'&code_challenge='+challenge+'&code_challenge_method=S256&response_mode=query';
}

function openOAuthSetupModal() {
    const modal = document.createElement('div');
    modal.className = 'modal open';
    modal.id = 'modal-oauth-setup';
    modal.innerHTML = '<div class="modal-content" style="max-width:560px"><div class="modal-header"><h3>Connect Microsoft Outlook</h3><button class="modal-close" onclick="this.closest(\'.modal\').remove()">\u2715</button></div><div class="modal-body" style="padding:20px"><div style="background:var(--blue-lt);border-radius:8px;padding:16px;margin-bottom:16px"><strong>Setup Required</strong><p style="font-size:13px;color:var(--text2);margin-top:4px">To connect Outlook, you need to register an Azure AD app first.</p></div><ol style="font-size:13px;color:var(--text2);line-height:1.8;padding-left:20px"><li>Go to <a href="https://portal.azure.com/#blade/Microsoft_AAD_RegisteredApps/ApplicationsListBlade" target="_blank" style="color:var(--blue)">Azure App Registrations</a></li><li>Click "New registration"</li><li>Name: <strong>Vector CRM</strong></li><li>Redirect URI: <strong>SPA</strong> \u2192 <code style="background:var(--gray-lt);padding:2px 6px;border-radius:4px">'+window.location.origin+window.location.pathname+'</code></li><li>Copy the Application (client) ID and paste below</li></ol><div class="form-group" style="margin-top:16px"><label class="form-label">Azure Application Client ID</label><input type="text" class="form-input" id="oauth-client-id" placeholder="e.g. 12345678-abcd-efgh-ijkl-123456789012"></div><div style="display:flex;gap:8px;margin-top:16px"><button class="btn btn-primary" onclick="saveOAuthClientId()">Save & Connect</button><button class="btn btn-outline" onclick="this.closest(\'.modal\').remove()">Cancel</button></div></div></div>';
    document.body.appendChild(modal);
}

async function saveOAuthClientId() {
    const clientId = document.getElementById('oauth-client-id').value.trim();
    if (!clientId) { toast('Please enter a Client ID'); return; }
    const existing = crmIntegrations.find(i => i.type === 'outlook');
    if (existing) {
        await sbUpdate('integrations', existing.id, {config: JSON.stringify({clientId})});
        existing.config = JSON.stringify({clientId});
    } else {
        try {
            const newId = await sbInsert('integrations', {type:'outlook', status:'pending', config: JSON.stringify({clientId})});
            if(newId) crmIntegrations.push({id:newId, type:'outlook', status:'pending', config: JSON.stringify({clientId})});
        } catch(e) {}
    }
    document.getElementById('modal-oauth-setup').remove();
    toast('Client ID saved! Starting OAuth...');
    const verifier = generateCodeVerifier();
    sessionStorage.setItem('oauth_verifier', verifier);
    const challenge = await generateCodeChallenge(verifier);
    const redirectUri = encodeURIComponent(window.location.origin + window.location.pathname);
    const scope = encodeURIComponent('Calendars.ReadWrite offline_access User.Read');
    window.location.href = 'https://login.microsoftonline.com/common/oauth2/v2.0/authorize?client_id='+clientId+'&response_type=code&redirect_uri='+redirectUri+'&scope='+scope+'&code_challenge='+challenge+'&code_challenge_method=S256&response_mode=query';
}

async function handleOAuthCallback() {
    const params = new URLSearchParams(window.location.search);
    const code = params.get('code');
    if (!code) return;
    const verifier = sessionStorage.getItem('oauth_verifier');
    if (!verifier) return;
    const outlookInt = crmIntegrations.find(i => i.type === 'outlook');
    const config = outlookInt && outlookInt.config ? (typeof outlookInt.config === 'string' ? JSON.parse(outlookInt.config) : outlookInt.config) : {};
    const clientId = config.clientId;
    if (!clientId) { toast('OAuth error: no client ID'); return; }
    try {
        const tokenRes = await fetch('https://login.microsoftonline.com/common/oauth2/v2.0/token', {
            method: 'POST', headers: {'Content-Type':'application/x-www-form-urlencoded'},
            body: new URLSearchParams({client_id:clientId, grant_type:'authorization_code', code:code, redirect_uri:window.location.origin+window.location.pathname, code_verifier:verifier, scope:'Calendars.ReadWrite offline_access User.Read'})
        });
        const tokens = await tokenRes.json();
        if (tokens.access_token) {
            const ud = {status:'connected', access_token:tokens.access_token, refresh_token:tokens.refresh_token||'', token_expires:new Date(Date.now()+tokens.expires_in*1000).toISOString(), config:JSON.stringify(config)};
            if (outlookInt) { await sbUpdate('integrations', outlookInt.id, ud); Object.assign(outlookInt, ud); }
            toast('Outlook connected!');
            sessionStorage.removeItem('oauth_verifier');
            window.history.replaceState({}, '', window.location.pathname);
            renderSettings();
        } else { toast('OAuth error: '+(tokens.error_description||tokens.error)); }
    } catch(e) { toast('OAuth error: '+e.message); }
}

async function syncOutlookCalendar() {
    const outlookInt = crmIntegrations.find(i => i.type === 'outlook' && i.status === 'connected');
    if (!outlookInt) { toast('Outlook not connected'); return; }
    toast('Syncing calendar...');
    try {
        const now = new Date().toISOString();
        const future = new Date(Date.now()+30*24*60*60*1000).toISOString();
        const res = await fetch('https://graph.microsoft.com/v1.0/me/calendarview?startDateTime='+now+'&endDateTime='+future+'&$top=50', {headers:{'Authorization':'Bearer '+outlookInt.access_token}});
        const data = await res.json();
        if (data.value) { toast('Synced '+data.value.length+' events'); renderSettings(); }
    } catch(e) { toast('Sync error: '+e.message); }
}

async function disconnectOutlook() {
    if (!confirm('Disconnect Outlook Calendar?')) return;
    const outlookInt = crmIntegrations.find(i => i.type === 'outlook');
    if (outlookInt) {
        await sbUpdate('integrations', outlookInt.id, {status:'disconnected', access_token:'', refresh_token:''});
        outlookInt.status = 'disconnected'; outlookInt.access_token = '';
    }
    toast('Outlook disconnected'); renderSettings();
}

async function toggleCameraIntegration(on) {
    const cam = crmIntegrations.find(i => i.type === 'camera');
    if (cam) { await sbUpdate('integrations', cam.id, {status:on?'connected':'disconnected'}); cam.status = on?'connected':'disconnected'; }
    else { try { const nid = await sbInsert('integrations', {type:'camera', status:on?'connected':'disconnected', config:'{}'}); if(nid) crmIntegrations.push({id:nid, type:'camera', status:on?'connected':'disconnected'}); } catch(e) {} }
    toast(on?'Camera enabled':'Camera disabled'); renderSettings();
}


function renderStaffTab() {
    const el = document.getElementById('settings-staff');
    if(!el) return;
    let h = '<div class="staff-header"><h3>Team Members</h3><button class="btn btn-primary" onclick="openAddStaffModal()">+ Add Staff</button></div><div class="settings-card" style="padding:0;overflow:hidden"><table class="staff-table"><thead><tr><th>Name</th><th>Role</th><th>Email</th><th>Phone</th><th>Status</th><th>Actions</th></tr></thead><tbody>';
    people.forEach(p => {
        const user = crmUsers.find(u => u.person_id === p.id);
        const role = user ? staffRoles.find(r => r.id === user.role_id) : null;
        const roleName = role ? role.name : (p.role || 'Unassigned');
        const roleClass = getRoleClass(roleName);
        const isActive = user ? user.is_active !== false : true;
        h += '<tr><td><div style="display:flex;align-items:center;gap:8px"><div style="width:32px;height:32px;border-radius:50%;background:var(--blue-lt);color:var(--blue);display:flex;align-items:center;justify-content:center;font-weight:600;font-size:12px">'+p.name.split(' ').map(n=>n[0]).join('')+'</div>'+p.name+'</div></td><td><span class="role-badge '+roleClass+'">'+roleName+'</span></td><td>'+(p.email||'\u2014')+'</td><td>'+(p.phone||'\u2014')+'</td><td><span style="color:'+(isActive?'var(--green)':'var(--muted)')+'">'+(isActive?'\u25CF Active':'\u25CB Inactive')+'</span></td><td><button class="btn btn-outline" style="padding:4px 10px;font-size:11px" onclick="editStaffMember('+p.id+')">Edit</button></td></tr>';
    });
    h += '</tbody></table></div>';

    h += '<div class="staff-header" style="margin-top:32px"><h3>Roles</h3><button class="btn btn-outline" onclick="openAddRoleModal()">+ New Role</button></div>';
    staffRoles.forEach(r => {
        const count = people.filter(p => (p.role||'').toLowerCase().includes(r.name.toLowerCase())).length;
        h += '<div class="role-card"><div><div class="role-name">'+r.name+'</div><div style="font-size:12px;color:var(--text2)">'+(r.description||'')+'</div></div><div style="display:flex;align-items:center;gap:12px"><span class="role-count">'+count+' member'+(count!==1?'s':'')+'</span><button class="btn btn-outline" style="padding:4px 10px;font-size:11px" onclick="editRole('+r.id+')">Edit</button></div></div>';
    });

    h += '<div class="staff-header" style="margin-top:32px"><h3>Permissions</h3><div style="display:flex;gap:8px"><select class="form-input" id="perm-role-select" style="width:200px" onchange="renderPermissionGrid()">'+staffRoles.map(r => '<option value="'+r.id+'">'+r.name+'</option>').join('')+'</select></div></div><div id="perm-grid-container"></div>';
    el.innerHTML = h;
    renderPermissionGrid();
}

function getRoleClass(name) {
    const n = (name||'').toLowerCase();
    if (n.includes('admin')) return 'role-admin';
    if (n.includes('lead')) return 'role-lead';
    if (n.includes('installer')) return 'role-installer';
    if (n.includes('driver')) return 'role-driver';
    if (n.includes('office')) return 'role-office';
    return 'role-installer';
}

function renderPermissionGrid() {
    const container = document.getElementById('perm-grid-container');
    if(!container) return;
    const sel = document.getElementById('perm-role-select');
    const roleId = sel ? parseInt(sel.value) : (staffRoles[0] ? staffRoles[0].id : null);
    if (!roleId) { container.innerHTML = '<p style="color:var(--muted)">No roles defined.</p>'; return; }
    const sections = [{key:'receiving',icon:'\u{1F4E6}',label:'Receiving'},{key:'warehouse',icon:'\u{1F3ED}',label:'Warehouse'},{key:'dispatch',icon:'\u{1F69A}',label:'Dispatch'},{key:'calendar',icon:'\u{1F4C5}',label:'Calendar'},{key:'projects',icon:'\u{1F4C1}',label:'Projects'},{key:'people',icon:'\u{1F464}',label:'People'},{key:'clients',icon:'\u{1F3E2}',label:'Clients'},{key:'settings',icon:'\u2699\uFE0F',label:'Settings'}];
    const actions = ['view','create','edit','delete'];
    let g = '<table class="perm-grid"><thead><tr><th>Section</th>';
    actions.forEach(a => { g += '<th>'+a.charAt(0).toUpperCase()+a.slice(1)+'</th>'; });
    g += '</tr></thead><tbody>';
    sections.forEach(sec => {
        g += '<tr><td><span class="section-icon">'+sec.icon+'</span>'+sec.label+'</td>';
        actions.forEach(act => {
            const perm = staffPermissions.find(p => p.role_id === roleId && p.section === sec.key && p.action === act);
            const checked = perm ? perm.allowed : false;
            g += '<td><input type="checkbox" class="perm-check" '+(checked?'checked':'')+' onchange="togglePermission('+roleId+',\''+sec.key+'\',\''+act+'\',this.checked)"></td>';
        });
        g += '</tr>';
    });
    g += '</tbody></table>';
    g += '<div style="margin-top:12px;display:flex;gap:8px"><button class="btn btn-outline" style="font-size:11px" onclick="quickAssignPerms('+roleId+',\'all\')">Full Access</button><button class="btn btn-outline" style="font-size:11px" onclick="quickAssignPerms('+roleId+',\'view\')">View Only</button><button class="btn btn-outline" style="font-size:11px" onclick="quickAssignPerms('+roleId+',\'field\')">Field Only</button><button class="btn btn-outline" style="font-size:11px" onclick="quickAssignPerms('+roleId+',\'none\')">No Access</button></div>';
    container.innerHTML = g;
}

async function togglePermission(roleId, section, action, allowed) {
    const existing = staffPermissions.find(p => p.role_id === roleId && p.section === section && p.action === action);
    if (existing) { await sbUpdate('staff_permissions', existing.id, {allowed}); existing.allowed = allowed; }
    else { try { const nid = await sbInsert('staff_permissions', {role_id:roleId, section, action, allowed}); if(nid) staffPermissions.push({id:nid, role_id:roleId, section, action, allowed}); } catch(e) {} }
}

async function quickAssignPerms(roleId, preset) {
    const sections = ['receiving','warehouse','dispatch','calendar','projects','people','clients','settings'];
    const actions = ['view','create','edit','delete'];
    const fieldSections = ['receiving','warehouse','dispatch','projects'];
    for (const sec of sections) {
        for (const act of actions) {
            let allowed = false;
            if (preset === 'all') allowed = true;
            else if (preset === 'view') allowed = (act === 'view');
            else if (preset === 'field') allowed = fieldSections.includes(sec);
            await togglePermission(roleId, sec, act, allowed);
        }
    }
    renderPermissionGrid();
    toast('Permissions set to "'+preset+'"');
}


function openAddStaffModal() {
    const roleOpts = staffRoles.map(r => '<option value="'+r.id+'">'+r.name+'</option>').join('');
    const modal = document.createElement('div');
    modal.className = 'modal open'; modal.id = 'modal-add-staff';
    modal.innerHTML = '<div class="modal-content" style="max-width:480px"><div class="modal-header"><h3>Add Staff Member</h3><button class="modal-close" onclick="this.closest(\'.modal\').remove()">\u2715</button></div><div class="modal-body" style="padding:20px"><div class="form-group"><label class="form-label">Full Name</label><input type="text" class="form-input" id="staff-name"></div><div class="form-group"><label class="form-label">Email</label><input type="email" class="form-input" id="staff-email"></div><div class="form-group"><label class="form-label">Phone</label><input type="text" class="form-input" id="staff-phone"></div><div class="form-group"><label class="form-label">Role</label><select class="form-input" id="staff-role">'+roleOpts+'</select></div><div style="display:flex;gap:8px;margin-top:16px"><button class="btn btn-primary" onclick="saveNewStaff()">Add Member</button><button class="btn btn-outline" onclick="this.closest(\'.modal\').remove()">Cancel</button></div></div></div>';
    document.body.appendChild(modal);
}

async function saveNewStaff() {
    const name = document.getElementById('staff-name').value.trim();
    const email = document.getElementById('staff-email').value.trim();
    const phone = document.getElementById('staff-phone').value.trim();
    const roleId = parseInt(document.getElementById('staff-role').value);
    if (!name) { toast('Name is required'); return; }
    const role = staffRoles.find(r => r.id === roleId);
    const roleName = role ? role.name : '';
    const personId = await sbInsert('people', {name, email, phone, role: roleName});
    if (personId) {
        people.push({id:personId, name, email, phone, role:roleName});
        try { const uid = await sbInsert('users', {person_id:personId, role_id:roleId, email, is_active:true}); if(uid) crmUsers.push({id:uid, person_id:personId, role_id:roleId, email, is_active:true}); } catch(e) {}
    }
    document.getElementById('modal-add-staff').remove();
    renderSettings(); renderPeople();
    toast(name+' added to team');
}

function editStaffMember(personId) {
    const p = people.find(x => x.id === personId);
    if (!p) return;
    const user = crmUsers.find(u => u.person_id === personId);
    const currentRoleId = user ? user.role_id : '';
    const roleOpts = staffRoles.map(r => '<option value="'+r.id+'" '+(r.id===currentRoleId?'selected':'')+'>'+r.name+'</option>').join('');
    const modal = document.createElement('div');
    modal.className = 'modal open'; modal.id = 'modal-edit-staff';
    modal.innerHTML = '<div class="modal-content" style="max-width:480px"><div class="modal-header"><h3>Edit Staff \u2014 '+p.name+'</h3><button class="modal-close" onclick="this.closest(\'.modal\').remove()">\u2715</button></div><div class="modal-body" style="padding:20px"><div class="form-group"><label class="form-label">Full Name</label><input type="text" class="form-input" id="edit-staff-name" value="'+p.name+'"></div><div class="form-group"><label class="form-label">Email</label><input type="email" class="form-input" id="edit-staff-email" value="'+(p.email||'')+'"></div><div class="form-group"><label class="form-label">Phone</label><input type="text" class="form-input" id="edit-staff-phone" value="'+(p.phone||'')+'"></div><div class="form-group"><label class="form-label">Role</label><select class="form-input" id="edit-staff-role">'+roleOpts+'</select></div><div style="display:flex;gap:8px;margin-top:16px"><button class="btn btn-primary" onclick="saveEditStaff('+personId+')">Save Changes</button><button class="btn btn-outline" style="color:var(--red);border-color:var(--red)" onclick="deactivateStaff('+personId+')">Deactivate</button><button class="btn btn-outline" onclick="this.closest(\'.modal\').remove()">Cancel</button></div></div></div>';
    document.body.appendChild(modal);
}

async function saveEditStaff(personId) {
    const name = document.getElementById('edit-staff-name').value.trim();
    const email = document.getElementById('edit-staff-email').value.trim();
    const phone = document.getElementById('edit-staff-phone').value.trim();
    const roleId = parseInt(document.getElementById('edit-staff-role').value);
    if (!name) { toast('Name is required'); return; }
    const role = staffRoles.find(r => r.id === roleId);
    const roleName = role ? role.name : '';
    await sbUpdate('people', personId, {name, email, phone, role:roleName});
    const p = people.find(x => x.id === personId);
    if (p) { p.name=name; p.email=email; p.phone=phone; p.role=roleName; }
    const user = crmUsers.find(u => u.person_id === personId);
    if (user) { await sbUpdate('users', user.id, {role_id:roleId, email}); user.role_id=roleId; user.email=email; }
    else { try { const uid = await sbInsert('users', {person_id:personId, role_id:roleId, email, is_active:true}); if(uid) crmUsers.push({id:uid, person_id:personId, role_id:roleId, email, is_active:true}); } catch(e) {} }
    document.getElementById('modal-edit-staff').remove();
    renderSettings(); renderPeople();
    toast(name+' updated');
}

async function deactivateStaff(personId) {
    if (!confirm('Deactivate this staff member?')) return;
    const user = crmUsers.find(u => u.person_id === personId);
    if (user) { await sbUpdate('users', user.id, {is_active:false}); user.is_active=false; }
    const modal = document.getElementById('modal-edit-staff');
    if(modal) modal.remove();
    renderSettings(); toast('Staff member deactivated');
}


function openAddRoleModal() {
    const modal = document.createElement('div');
    modal.className = 'modal open'; modal.id = 'modal-add-role';
    modal.innerHTML = '<div class="modal-content" style="max-width:400px"><div class="modal-header"><h3>New Role</h3><button class="modal-close" onclick="this.closest(\'.modal\').remove()">\u2715</button></div><div class="modal-body" style="padding:20px"><div class="form-group"><label class="form-label">Role Name</label><input type="text" class="form-input" id="new-role-name" placeholder="e.g. Project Manager"></div><div class="form-group"><label class="form-label">Description</label><input type="text" class="form-input" id="new-role-desc" placeholder="Brief description"></div><div style="display:flex;gap:8px;margin-top:16px"><button class="btn btn-primary" onclick="saveNewRole()">Create Role</button><button class="btn btn-outline" onclick="this.closest(\'.modal\').remove()">Cancel</button></div></div></div>';
    document.body.appendChild(modal);
}

async function saveNewRole() {
    const name = document.getElementById('new-role-name').value.trim();
    const desc = document.getElementById('new-role-desc').value.trim();
    if (!name) { toast('Role name is required'); return; }
    try { const nid = await sbInsert('staff_roles', {name, description:desc, is_default:false}); if(nid) staffRoles.push({id:nid, name, description:desc, is_default:false}); } catch(e) { toast('Error creating role'); return; }
    document.getElementById('modal-add-role').remove();
    renderSettings(); toast('Role "'+name+'" created');
}

function editRole(roleId) {
    const r = staffRoles.find(x => x.id === roleId);
    if (!r) return;
    const modal = document.createElement('div');
    modal.className = 'modal open'; modal.id = 'modal-edit-role';
    modal.innerHTML = '<div class="modal-content" style="max-width:400px"><div class="modal-header"><h3>Edit Role</h3><button class="modal-close" onclick="this.closest(\'.modal\').remove()">\u2715</button></div><div class="modal-body" style="padding:20px"><div class="form-group"><label class="form-label">Role Name</label><input type="text" class="form-input" id="edit-role-name" value="'+r.name+'"></div><div class="form-group"><label class="form-label">Description</label><input type="text" class="form-input" id="edit-role-desc" value="'+(r.description||'')+'"></div><div style="display:flex;gap:8px;margin-top:16px"><button class="btn btn-primary" onclick="saveEditRole('+roleId+')">Save</button>'+(!r.is_default?'<button class="btn btn-outline" style="color:var(--red);border-color:var(--red)" onclick="deleteRole('+roleId+')">Delete</button>':'')+'<button class="btn btn-outline" onclick="this.closest(\'.modal\').remove()">Cancel</button></div></div></div>';
    document.body.appendChild(modal);
}

async function saveEditRole(roleId) {
    const name = document.getElementById('edit-role-name').value.trim();
    const desc = document.getElementById('edit-role-desc').value.trim();
    if (!name) { toast('Role name is required'); return; }
    await sbUpdate('staff_roles', roleId, {name, description:desc});
    const r = staffRoles.find(x => x.id === roleId);
    if(r) { r.name=name; r.description=desc; }
    document.getElementById('modal-edit-role').remove();
    renderSettings(); toast('Role "'+name+'" updated');
}

async function deleteRole(roleId) {
    if (!confirm('Delete this role?')) return;
    const perms = staffPermissions.filter(p => p.role_id === roleId);
    for (const p of perms) { try { await sbDelete('staff_permissions', p.id); } catch(e) {} }
    staffPermissions = staffPermissions.filter(p => p.role_id !== roleId);
    try { await sbDelete('staff_roles', roleId); } catch(e) {}
    staffRoles = staffRoles.filter(r => r.id !== roleId);
    document.getElementById('modal-edit-role').remove();
    renderSettings(); toast('Role deleted');
}

function hasPermission(section, action) {
    if (!currentUserId) return true;
    const user = crmUsers.find(u => u.person_id === currentUserId);
    if (!user) return true;
    const role = staffRoles.find(r => r.id === user.role_id);
    if (role && role.name === 'Admin') return true;
    const perm = staffPermissions.find(p => p.role_id === user.role_id && p.section === section && p.action === action);
    return perm ? perm.allowed : false;
}

function renderSystemTab() {
    const el = document.getElementById('settings-system');
    if(!el) return;
    el.innerHTML = '<div class="settings-card"><h3 style="margin-bottom:16px">Company Information</h3><div class="form-group"><label class="form-label">Company Name</label><input type="text" class="form-input" id="sys-company" value="Vector Installations" style="max-width:400px"></div><div class="form-group"><label class="form-label">Email</label><input type="email" class="form-input" id="sys-email" value="ismael@vectorinstallations.com" style="max-width:400px"></div><button class="btn btn-primary" style="margin-top:8px" onclick="toast(\'Company info saved\')">Save</button></div><div class="settings-card"><h3 style="margin-bottom:16px">Data Management</h3><div class="system-item"><div><div class="sys-label">Export All Data</div><div class="sys-desc">Download all CRM data as a JSON file for backup</div></div><button class="btn btn-outline" onclick="exportAllData()">Export JSON</button></div><div class="system-item"><div><div class="sys-label">Clear Local Cache</div><div class="sys-desc">Remove cached data from browser. Data is preserved in Supabase.</div></div><button class="btn btn-outline" onclick="clearLocalCache()">Clear Cache</button></div><div class="system-item"><div><div class="sys-label">Database Status</div><div class="sys-desc">Connected to Supabase \u2022 '+clients.length+' clients, '+people.length+' people, '+projects.length+' projects, '+shipments.length+' shipments</div></div><span class="badge badge-connected">Online</span></div></div><div class="settings-card"><h3 style="margin-bottom:16px">About</h3><div style="font-size:13px;color:var(--text2)"><p><strong>Vector CRM</strong> v16</p><p style="margin-top:4px">Built for Vector Installations.</p></div></div>';
}

function exportAllData() {
    const data = {clients, people, projects, scans, shipments, punchlist, dispatches, loadingSheets, projectCompletions, staffRoles, staffPermissions, crmUsers, crmIntegrations};
    const blob = new Blob([JSON.stringify(data, null, 2)], {type:'application/json'});
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url; a.download = 'vector-crm-backup-'+new Date().toISOString().split('T')[0]+'.json';
    a.click(); URL.revokeObjectURL(url);
    toast('Data exported');
}

function clearLocalCache() {
    if (!confirm('Clear all cached data?')) return;
    Object.keys(localStorage).filter(k => k.startsWith('v10_')).forEach(k => localStorage.removeItem(k));
    toast('Local cache cleared');
}


/* ====================== CLIENT PORTAL ====================== */
let portalClient = null;

function initPortal() {
    if (window.location.search.includes('portal')) {
        document.querySelector('.app').style.display = 'none';
        document.getElementById('portal-overlay').classList.add('active');
        // Check if already logged in via sessionStorage
        const saved = sessionStorage.getItem('portalClient');
        if (saved) {
            portalClient = JSON.parse(saved);
            showPortalDashboard();
        }
    }
}

async function portalLogin() {
    const email = document.getElementById('portal-email').value.trim().toLowerCase();
    const code = document.getElementById('portal-code').value.trim();
    const errEl = document.getElementById('portal-error');
    errEl.style.display = 'none';
    if (!email || !code) { errEl.textContent = 'Please enter both email and access code'; errEl.style.display = 'block'; return; }
    // Look up client by email
    try {
        const r = await fetch(SB + '/rest/v1/clients?email=eq.' + encodeURIComponent(email) + '&select=*', { headers: { apikey: SK, Authorization: 'Bearer ' + SK } });
        const data = await r.json();
        if (!data || data.length === 0) { errEl.textContent = 'No account found with that email'; errEl.style.display = 'block'; return; }
        const client = data[0];
        // Check access code (stored in portal_code column; default is company name lowercase no spaces)
        const validCode = client.portal_code || client.company.toLowerCase().replace(/\s+/g, '');
        if (code !== validCode) { errEl.textContent = 'Invalid access code'; errEl.style.display = 'block'; return; }
        portalClient = { id: client.id, company: client.company, email: client.email };
        sessionStorage.setItem('portalClient', JSON.stringify(portalClient));
        showPortalDashboard();
    } catch(e) { errEl.textContent = 'Connection error. Please try again.'; errEl.style.display = 'block'; console.error(e); }
}

async function showPortalDashboard() {
    document.getElementById('portal-login').style.display = 'none';
    document.getElementById('portal-overlay').classList.remove('active');
    document.getElementById('portal-dash').classList.add('active');
    document.getElementById('portal-company').textContent = portalClient.company;
    // Fetch projects for this client
    const pRes = await fetch(SB + '/rest/v1/projects?client_id=eq.' + portalClient.id + '&select=*', { headers: { apikey: SK, Authorization: 'Bearer ' + SK } });
    const clientProjects = await pRes.json();
    // Fetch shipments for this client
    const sRes = await fetch(SB + '/rest/v1/shipments?client_id=eq.' + portalClient.id + '&select=*', { headers: { apikey: SK, Authorization: 'Bearer ' + SK } });
    const clientShipments = await sRes.json();
    // Calculate stats
    const totalShipments = clientShipments.length;
    const received = clientShipments.filter(s => s.status === 'received').length;
    const inWarehouse = clientShipments.filter(s => s.inventory_status === 'in-warehouse').length;
    const dispatched = clientShipments.filter(s => s.inventory_status === 'dispatched').length;
    let html = '';
    // Stats bar
    html += '<div class="portal-stats">';
    html += '<div class="portal-stat"><div class="num">' + clientProjects.length + '</div><div class="label">Projects</div></div>';
    html += '<div class="portal-stat"><div class="num">' + totalShipments + '</div><div class="label">Total Shipments</div></div>';
    html += '<div class="portal-stat"><div class="num">' + inWarehouse + '</div><div class="label">In Warehouse</div></div>';
    html += '<div class="portal-stat"><div class="num">' + dispatched + '</div><div class="label">Dispatched</div></div>';
    html += '</div>';
    // Projects section
    html += '<div class="portal-section"><h3>Your Projects</h3>';
    if (clientProjects.length === 0) {
        html += '<p style="color:var(--text2)">No projects found.</p>';
    } else {
        clientProjects.forEach(p => {
            const projShipments = clientShipments.filter(s => s.project_id === p.id);
            const projReceived = projShipments.filter(s => s.status === 'received').length;
            html += '<div class="portal-project-card" onclick="portalShowProject(' + p.id + ')">';
            html += '<h4>' + (p.name || 'Unnamed Project') + '</h4>';
            html += '<div class="meta">';
            if (p.install_date) html += '<span>Install: ' + p.install_date + '</span>';
            if (p.location) html += '<span>Location: ' + p.location + '</span>';
            html += '<span>Shipments: ' + projReceived + '/' + projShipments.length + ' received</span>';
            html += '</div></div>';
        });
    }
    html += '</div>';
    // All shipments table
    html += '<div class="portal-section"><h3>Warehouse Inventory</h3>';
    if (clientShipments.length === 0) {
        html += '<p style="color:var(--text2)">No shipments found.</p>';
    } else {
        html += '<table class="portal-shipment-table"><thead><tr>';
        html += '<th>PO</th><th>Item</th><th>Manufacturer</th><th>Location</th><th>Status</th><th>Received</th>';
        html += '</tr></thead><tbody>';
        clientShipments.forEach(s => {
            const statusClass = s.status === 'received' ? 'status-received' : 'status-not-received';
            const statusText = s.status === 'received' ? 'Received' : 'Pending';
            const invText = s.inventory_status === 'dispatched' ? ' (Dispatched)' : (s.inventory_status === 'in-warehouse' ? '' : '');
            html += '<tr>';
            html += '<td><strong>' + (s.po || '—') + '</strong></td>';
            html += '<td>' + (s.subitem || '—') + '</td>';
            html += '<td>' + (s.mfr || '—') + '</td>';
            html += '<td>' + (s.sortly || '—') + '</td>';
            html += '<td><span class="status ' + statusClass + '">' + statusText + invText + '</span></td>';
            html += '<td>' + (s.received_date || '—') + '</td>';
            html += '</tr>';
        });
        html += '</tbody></table>';
    }
    html += '</div>';
    document.getElementById('portal-body').innerHTML = html;
}

async function portalShowProject(projId) {
    const sRes = await fetch(SB + '/rest/v1/shipments?client_id=eq.' + portalClient.id + '&project_id=eq.' + projId + '&select=*', { headers: { apikey: SK, Authorization: 'Bearer ' + SK } });
    const projShipments = await sRes.json();
    const pRes = await fetch(SB + '/rest/v1/projects?id=eq.' + projId + '&select=*', { headers: { apikey: SK, Authorization: 'Bearer ' + SK } });
    const projData = await pRes.json();
    const proj = projData[0];
    let html = '<div style="margin-bottom:16px"><button class="btn btn-outline" onclick="showPortalDashboard()">Back to Dashboard</button></div>';
    html += '<div class="portal-section"><h3>' + (proj?.name || 'Project') + '</h3>';
    if (proj?.location) html += '<p style="color:var(--text2);margin-bottom:8px">Location: ' + proj.location + '</p>';
    if (proj?.install_date) html += '<p style="color:var(--text2);margin-bottom:16px">Install Date: ' + proj.install_date + (proj.install_time ? ' at ' + proj.install_time : '') + '</p>';
    const received = projShipments.filter(s => s.status === 'received').length;
    html += '<div class="portal-stats">';
    html += '<div class="portal-stat"><div class="num">' + projShipments.length + '</div><div class="label">Total Items</div></div>';
    html += '<div class="portal-stat"><div class="num">' + received + '</div><div class="label">Received</div></div>';
    html += '<div class="portal-stat"><div class="num">' + (projShipments.length - received) + '</div><div class="label">Pending</div></div>';
    html += '</div>';
    if (projShipments.length > 0) {
        // Group by PO
        const pos = {};
        projShipments.forEach(s => { if (!pos[s.po]) pos[s.po] = []; pos[s.po].push(s); });
        Object.keys(pos).forEach(po => {
            html += '<h4 style="margin:16px 0 8px;font-size:14px;color:var(--text2)">PO: ' + po + '</h4>';
            html += '<table class="portal-shipment-table"><thead><tr><th>Item</th><th>Manufacturer</th><th>Location</th><th>Status</th><th>Received</th></tr></thead><tbody>';
            pos[po].forEach(s => {
                const sc = s.status === 'received' ? 'status-received' : 'status-not-received';
                const inv = s.inventory_status === 'dispatched' ? ' (Dispatched)' : '';
                html += '<tr><td>' + (s.subitem||'—') + '</td><td>' + (s.mfr||'—') + '</td><td>' + (s.sortly||'—') + '</td><td><span class="status ' + sc + '">' + (s.status==='received'?'Received':'Pending') + inv + '</span></td><td>' + (s.received_date||'—') + '</td></tr>';
            });
            html += '</tbody></table>';
        });
    } else {
        html += '<p style="color:var(--text2)">No shipments for this project yet.</p>';
    }
    html += '</div>';
    document.getElementById('portal-body').innerHTML = html;
}

function portalLogout() {
    sessionStorage.removeItem('portalClient');
    portalClient = null;
    document.getElementById('portal-dash').classList.remove('active');
    document.getElementById('portal-overlay').classList.add('active');
    document.getElementById('portal-login').style.display = '';
    document.getElementById('portal-email').value = '';
    document.getElementById('portal-code').value = '';
}

// Initialize portal check on page load
document.addEventListener('DOMContentLoaded', () => { initPortal(); });
</script>

<script>
// ========== AUTH SYSTEM ==========
const _supabaseAuth = window.supabase.createClient(SUPABASE_URL, SUPABASE_KEY);

function showLoginScreen() {
    document.getElementById('auth-overlay').style.display = 'flex';
    document.getElementById('auth-loading').style.display = 'none';
    document.getElementById('auth-error').style.display = 'none';
}

function hideLoginScreen() {
    document.getElementById('auth-overlay').style.display = 'none';
}

function showAuthError(msg) {
    var el = document.getElementById('auth-error');
    el.textContent = msg;
    el.style.display = 'block';
    document.getElementById('auth-loading').style.display = 'none';
}

async function signInWithGoogle() {
    document.getElementById('auth-loading').style.display = 'block';
    document.getElementById('auth-error').style.display = 'none';
    var { error } = await _supabaseAuth.auth.signInWithOAuth({
        provider: 'google',
        options: { redirectTo: window.location.origin }
    });
    if (error) showAuthError(error.message);
}

async function signInWithMicrosoft() {
    document.getElementById('auth-loading').style.display = 'block';
    document.getElementById('auth-error').style.display = 'none';
    var { error } = await _supabaseAuth.auth.signInWithOAuth({
        provider: 'azure',
        options: {
            redirectTo: window.location.origin,
            scopes: 'openid email profile'
        }
    });
    if (error) showAuthError(error.message);
}

async function signOutUser() {
    await _supabaseAuth.auth.signOut();
    _authAccessToken = null;
    _currentUser = null;
    showLoginScreen();
}

async function handleAuthSession(session) {
    if (!session) { showLoginScreen(); return; }
    
    try {
        console.log('[AUTH] handleAuthSession for:', session.user.email);
        _authAccessToken = session.access_token;
        
        // Check if user exists in DB
        var { data: userData, error: userError } = await _supabaseAuth
            .from('users')
            .select('*')
            .eq('auth_id', session.user.id)
            .maybeSingle();
        
        if (userError) console.error('[AUTH] Error checking user:', userError);
        
        if (userData) {
            console.log('[AUTH] User found:', userData.id, userData.email, 'role:', userData.role);
            _currentUser = userData;
            // Update last login
            await _supabaseAuth.from('users')
                .update({ last_login: new Date().toISOString() })
                .eq('auth_id', session.user.id);
        } else {
            // Check if user exists by email (pre-created record)
            var { data: emailUser } = await _supabaseAuth
                .from('users')
                .select('*')
                .eq('email', session.user.email)
                .maybeSingle();
            
            if (emailUser) {
                // Link auth_id to existing user
                console.log('[AUTH] Linking auth_id to existing user:', emailUser.email);
                await _supabaseAuth.from('users')
                    .update({ auth_id: session.user.id, last_login: new Date().toISOString() })
                    .eq('id', emailUser.id);
                _currentUser = { ...emailUser, auth_id: session.user.id };
            } else {
                // Create new user (staff by default for now)
                console.log('[AUTH] Creating new user for:', session.user.email);
                var { data: newUser } = await _supabaseAuth.from('users')
                    .insert({ 
                        email: session.user.email, 
                        auth_id: session.user.id, 
                        is_staff: true, 
                        is_active: true,
                        role: 'staff'
                    })
                    .select()
                    .single();
                _currentUser = newUser;
            }
        }
        
        // Hide overlay and let the CRM load
        hideLoginScreen();
        
        // Add sign-out button
        addSignOutButton();
        
        // If data was already loaded with anon key (401), reload to use auth token
        if (!window._crmDataLoaded) {
            console.log('[AUTH] First sign-in, reloading to fetch data with auth token');
            window._crmDataLoaded = true;
            location.reload();
            return;
        }
        
    } catch (err) {
        console.error('[AUTH] handleAuthSession error:', err);
        showAuthError('Authentication error: ' + err.message);
    }
}

function addSignOutButton() {
    if (document.getElementById('sign-out-container')) return;
    var sidebar = document.querySelector('.sidebar, #sidebar, [class*="sidebar"]');
    if (sidebar) {
        var container = document.createElement('div');
        container.id = 'sign-out-container';
        container.style.cssText = 'position: absolute; bottom: 0; left: 0; right: 0; padding: 12px 16px; background: rgba(0,0,0,0.2); border-top: 1px solid rgba(255,255,255,0.1); display: flex; flex-direction: column; gap: 6px;';
        var email = _currentUser ? _currentUser.email : '';
        var role = _currentUser ? (_currentUser.role || 'staff') : '';
        container.innerHTML = '<div style="display:flex;align-items:center;gap:8px;">' +
            '<div style="width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,0.15);display:flex;align-items:center;justify-content:center;font-size:12px;color:rgba(255,255,255,0.8);">' + (email ? email[0].toUpperCase() : 'U') + '</div>' +
            '<div style="flex:1;min-width:0;"><div style="font-size:12px;color:rgba(255,255,255,0.8);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">' + email + '</div>' +
            '<div style="font-size:10px;color:rgba(255,255,255,0.4);text-transform:uppercase;">' + role + '</div></div>' +
            '<button onclick="signOutUser()" style="background:none;border:1px solid rgba(255,255,255,0.2);color:rgba(255,255,255,0.6);padding:4px 10px;border-radius:4px;cursor:pointer;font-size:11px;white-space:nowrap;" onmouseover="this.style.borderColor=\'rgba(255,100,100,0.4)\';this.style.color=\'#ff6b6b\'" onmouseout="this.style.borderColor=\'rgba(255,255,255,0.2)\';this.style.color=\'rgba(255,255,255,0.6)\'">Sign Out</button></div>';
        sidebar.style.position = 'relative';
        sidebar.style.paddingBottom = '60px';
        sidebar.appendChild(container);
    }
}

async function initAuth() {
    // If we already have a token from localStorage, hide overlay immediately
    if (_authAccessToken) {
        hideLoginScreen();
        addSignOutButton();
        window._crmDataLoaded = true;
    }
    console.log('[AUTH] initAuth called');
    try {
        var { data: { session } } = await _supabaseAuth.auth.getSession();
        if (session) {
            console.log('[AUTH] Session found for:', session.user.email);
            await handleAuthSession(session);
        } else {
            console.log('[AUTH] No session found, showing login');
            showLoginScreen();
        }
        
        // Listen for auth changes (token refresh, sign in/out)
        _supabaseAuth.auth.onAuthStateChange(async (event, session) => {
            console.log('[AUTH] Auth state changed:', event);
            if (event === 'SIGNED_IN' || event === 'TOKEN_REFRESHED') {
                await handleAuthSession(session);
            } else if (event === 'SIGNED_OUT') {
                showLoginScreen();
            }
        });
    } catch (err) {
        console.error('[AUTH] initAuth error:', err);
        showLoginScreen();
    }
}

// Initialize auth on page load
initAuth();

    // V39: Populate Project Manager dropdown from people table
    async function loadPMDropdown() { var sel = document.getElementById("p-project-manager"); if (!sel) return; sel.innerHTML = '<option value="">Select PM...</option>'; var clientId = +(document.getElementById("p-client").value || 0); var client = clients.find(function(c) { return c.id === clientId; }); var pms = client ? getClientPMs(client) : []; if (pms.length) { pms.forEach(function(pm) { var opt = document.createElement("option"); opt.value = pm.name || ""; opt.textContent = pm.email ? pm.name + " \u2014 " + pm.email : pm.name; sel.appendChild(opt); }); } else { sel.innerHTML += '<option value="">(No PMs for this client)</option>'; } }
// V39: Override openModal to populate PM dropdown when project modal opens
    var _origOpenModal = typeof openModal === 'function' ? openModal : null;
    

// CamScanner auth helper
// CamScanner direct API auth (token-based, no proxy needed)
function getCsToken() { return localStorage.getItem("cs_token") || ""; }
function setCsToken(v) { localStorage.setItem("cs_token", v); }

function promptCsToken() {
  var cur = getCsToken();
  var msg = cur ? "Current CamScanner token is set. Paste new token or leave blank to clear:" : "To sync CamScanner docs, paste your CamScanner API token here.\n\nSteps:\n1. Open CamScanner web (camscanner.com)\n2. Press F12 > Network tab\n3. Look for requests to d82.intsig.net\n4. Copy the token= value from the URL\n5. Paste below:";
  var val = prompt(msg, cur);
  if (val === null) return;
  setCsToken(val);
  if (val) { alert("CamScanner token saved! Syncing now..."); loadCamScannerDocs(true); }
  else alert("CamScanner token cleared.");
}

async function fetchCamScannerPdf(docId) {
  try {
    var resp = await csFetch('/api/camscanner?endpoint=doc/detail&doc_id=' + docId);
    var data = await resp.json();
    if (data && data.data && data.data.download_url) {
      return data.data.download_url;
    }
  } catch(e) { console.log('CamScanner PDF fetch error:', e); }
  return null;
}

function countScanPdfs() {
  window.scanPdfCount = scans.filter(function(s) { return s.pdf_url; }).length;
}


// === CLIENT EDIT PANEL ===
var editingClientId = null;
function openClientPanel(id) {
  var c = id ? clients.find(function(x) { return x.id === id; }) : null;
  if (!c && id) return;
  if (!c) c = {id:0, company:'', email:'', phone:'', address:'', city:'', state:'', zip:'', cc_emails:'', notes:'', project_managers:[]};
  editingClientId = id;
  $('#client-modal-title').textContent = 'Edit Client: ' + (c.company || '');
  $('#ce-company').value = c.company || '';
  $('#ce-email').value = c.email || '';
  $('#ce-phone').value = c.phone || '';
  $('#ce-address').value = c.address || '';
  $('#ce-city').value = c.city || '';
  $('#ce-state').value = c.state || '';
  $('#ce-zip').value = c.zip || '';
  $('#ce-ccemails').value = c.cc_emails || '';
  $('#ce-notes').value = c.notes || '';
  // Show current PMs
  if(document.getElementById("pm-name")){document.getElementById("pm-name").value="";document.getElementById("pm-email").value="";document.getElementById("pm-save-btn").textContent="Add";} editingPMIndex=null; renderClientPMs(c);
  // Show projects for this client
  var cProjs = projects.filter(function(p) { return p.clientId === id; });
  var projHTML = '<label class="form-label">Projects (' + cProjs.length + ')</label>';
  if (cProjs.length) { projHTML += '<div style="font-size:13px">' + cProjs.map(function(p) { return '<div style="padding:4px 0;border-bottom:1px solid var(--border)">' + p.name + (p.project_manager ? ' <span style="color:var(--text-secondary)">PM: '+p.project_manager+'</span>' : '') + '</div>'; }).join('') + '</div>'; }
  $('#ce-projects').innerHTML = projHTML;
  $('#client-edit-modal').style.display = 'block';
}

let editingPMIndex = null;
function getClientPMs(c) { let pms = c && c.project_managers ? c.project_managers : []; if (typeof pms === "string") { try { pms = JSON.parse(pms); } catch(e) { pms = []; } } return Array.isArray(pms) ? pms : []; }
function renderClientPMs(c) { var pms = getClientPMs(c); if (!pms.length) { $("#ce-pm-list").innerHTML = '<span style="color:var(--text-secondary);font-size:13px">No PMs assigned</span>'; return; } $("#ce-pm-list").innerHTML = pms.map(function(pm, i) { var label = (pm.name || "") + (pm.email ? " \u2014 " + pm.email : ""); return '<div style="display:flex;align-items:center;justify-content:space-between;gap:8px;background:var(--bg-secondary);padding:6px 10px;border-radius:6px;margin:4px 0"><div style="font-size:13px">' + label + '</div><div style="display:flex;gap:6px"><button class="btn btn-outline" style="padding:3px 8px;font-size:11px" onclick="editPM(' + i + ')">Edit</button><button class="btn btn-outline" style="padding:3px 8px;font-size:11px;color:var(--red);border-color:var(--red)" onclick="deletePM(' + i + ')">Delete</button></div></div>'; }).join(""); }
function savePM() { var name = $("#pm-name").value.trim(); var email = $("#pm-email").value.trim(); if (!name) return toast("Enter PM name"); var c = clients.find(function(x) { return x.id === editingClientId; }); if (!c) return; var pms = getClientPMs(c); var pmObj = { name: name, email: email }; if (editingPMIndex !== null) { pms[editingPMIndex] = pmObj; } else { pms.push(pmObj); } c.project_managers = pms; editingPMIndex = null; $("#pm-name").value = ""; $("#pm-email").value = ""; $("#pm-save-btn").textContent = "Add"; renderClientPMs(c); }
function editPM(idx) { var c = clients.find(function(x) { return x.id === editingClientId; }); if (!c) return; var pms = getClientPMs(c); var pm = pms[idx]; if (!pm) return; $("#pm-name").value = pm.name || ""; $("#pm-email").value = pm.email || ""; editingPMIndex = idx; $("#pm-save-btn").textContent = "Save"; }
function deletePM(idx) { var c = clients.find(function(x) { return x.id === editingClientId; }); if (!c) return; var pms = getClientPMs(c); pms.splice(idx, 1); c.project_managers = pms; renderClientPMs(c); }
function closeClientModal() {
  $('#client-edit-modal').style.display = 'none';
  editingClientId = null;
}

        async function saveClientEdit() {
            var c = clients.find(function(x) { return x.id === editingClientId; });
            var isNew = !editingClientId || !c;
            var pms = (c && c.project_managers) ? c.project_managers : [];
            if (typeof pms === 'string') { try { pms = JSON.parse(pms); } catch(e) { pms = []; } }
            var updates = {
                company: $('#ce-company').value || '',
                email: $('#ce-email').value || '',
                phone: $('#ce-phone').value || '',
                address: $('#ce-address').value || '',
                city: $('#ce-city').value || '',
                state: $('#ce-state').value || '',
                zip: $('#ce-zip').value || '',
                cc_emails: pms.map(function(pm){return pm.email}).filter(Boolean).join(','),
                notes: $('#ce-notes').value || '',
                project_managers: JSON.stringify(pms)
            };
            try {
                if (isNew) {
                    var newId = await sbInsert('clients', updates);
                    if (!newId) throw new Error('Client insert failed');
                    c = { id: newId, ...updates };
                    clients.push(c);
                    editingClientId = newId;
                } else {
                    await sbUpdate('clients', editingClientId, updates);
                    Object.assign(c, updates);
                }
                renderClients();
                closeClientModal();
            } catch(e) {
                console.error('Save client error:', e);
                alert('Error saving client: ' + e.message);
            }
        }


function getProjectEmailRecipients(projectId) { var proj = projects.find(function(p) { return p.id === projectId; }); if (!proj) return {to:"", cc:[]}; var client = clients.find(function(c) { return c.id === proj.clientId; }); if (!client) return {to:"", cc:[]}; var pms = typeof getClientPMs === "function" ? getClientPMs(client) : []; var to = client.email || ""; var cc = []; if (proj.project_manager) { var pm = pms.find(function(x) { return (x.name || x) === proj.project_manager; }); if (pm && pm.email) cc = [pm.email]; } else { cc = pms.map(function(pm){return pm.email}).filter(Boolean); } return {to:to, cc:cc}; }
function emailClient(projectId) { var rec = getProjectEmailRecipients(projectId); if (!rec.to) return toast("No client email on file"); var subject = "Project Update"; var ccStr = rec.cc.join(";"); window.open("mailto:" + encodeURIComponent(rec.to) + "?cc=" + encodeURIComponent(ccStr) + "&subject=" + encodeURIComponent(subject), "_blank"); }
function getCamScanForShipment(s) { return getScanForShipment(s); } function getScanForShipment(s) { if (!s) return null; return scans.find(function(sc) { return sc.po && (sc.po === s.subitem || sc.po === s.po); }) || null; }

function showScanDetail(scanId) {
  var sc = scans.find(function(s){ return s.id === scanId; });
  if (!sc) { showToast("Scan not found","error"); return; }
  var links = [];
  if (sc.pdf_url) links.push('<a href="'+sc.pdf_url+'" target="_blank" style="color:var(--accent)">View PDF</a>');
  if (sc.onedrive_url) links.push('<a href="'+sc.onedrive_url+'" target="_blank" style="color:var(--accent)">OneDrive</a>');
  if (sc.camscanner_id) links.push('<a href="https://www.camscanner.com/file/detail?id='+sc.camscanner_id+'" target="_blank" style="color:var(--accent)">CamScanner</a>');
  var d = sc.timestamp ? new Date(sc.timestamp).toLocaleDateString() : (sc.created_at ? new Date(sc.created_at).toLocaleDateString() : "");
  var html = '<div style="padding:20px;max-width:440px"><h3 style="margin:0 0 16px;font-size:18px">Scan Details</h3>';
  html += '<div style="margin-bottom:10px"><b>File:</b> '+(sc.filename||"Untitled")+'</div>';
  html += '<div style="margin-bottom:10px"><b>PO:</b> <span style="font-family:monospace">'+(sc.po||"None")+'</span></div>';
  html += '<div style="margin-bottom:10px"><b>Date:</b> '+d+'</div>';
  html += '<div style="margin-bottom:10px"><b>Status:</b> <span class="status status-'+(sc.status||"pending")+'">'+(sc.status||"pending")+'</span></div>';
  if (links.length) html += '<div style="margin-top:16px;display:flex;gap:12px">'+links.join("")+'</div>';
  else html += '<div style="margin-top:16px;color:var(--text2);font-size:13px">No external links available yet. Upload to CamScanner to generate links.</div>';
  html += '<div style="margin-top:20px;text-align:right"><button onclick="this.closest(\'.modal-overlay\').remove()" style="padding:8px 20px;background:var(--accent);color:#fff;border:none;border-radius:6px;cursor:pointer">Close</button></div>';
  html += '</div>';
  var overlay = document.createElement("div");
  overlay.className = "modal-overlay";
  overlay.style.cssText = "position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;z-index:9999";
  overlay.onclick = function(e){ if(e.target===overlay) overlay.remove(); };
  var box = document.createElement("div");
  box.style.cssText = "background:var(--card);border-radius:12px;box-shadow:0 8px 32px rgba(0,0,0,.3);max-width:90vw";
  box.innerHTML = html;
  overlay.appendChild(box);
  document.body.appendChild(overlay);
}

// === CAMSCANNER INBOX SYSTEM ===
var scanInbox = [];

async function loadScanInbox() {
  var data = await sbFetch("scan_inbox?status=eq.pending&order=created_at.desc", "GET");
  scanInbox = data || [];
}

async function syncCamScannerToSupabase() {
  try {
    var tk = getCsToken();
    if (!tk) { console.warn("No CamScanner token for sync"); return; }
    var resp = await fetch("https://d82.intsig.net/sync/query_recent_doc_list?num=50&order_type=0&platform=web&token=" + tk);
    var data = await resp.json();
    var docs = data.doc_list || [];
    var rows = docs.map(function(doc) {
      var fileId = doc.file_name ? doc.file_name.replace(".jdoc", "") : "";
      return { file_id: fileId, doc_id: fileId, title: doc.title, page_count: parseInt(doc.page_num) || 0, created_at: doc.timestamp, updated_at: doc.modify_time, status: "pending" };
    });
    for (var i = 0; i < rows.length; i++) {
      await sbFetch("scans", "POST", rows[i], { upsert: "file_id" });
    }
    console.log("Synced " + rows.length + " CamScanner docs to Supabase");
  } catch (e) {
    console.warn("CamScanner sync error:", e);
  }
}

function renderCamScanInbox() {
  var el = document.getElementById("cam-inbox");
  if (!el) return;
  if (!scanInbox.length) { el.innerHTML = ""; return; }
  var html = '<div class="cs-inbox">';
  html += '<div class="cs-inbox-header"><div>\ud83d\udce5 CamScanner Inbox</div><div style="display:flex;align-items:center;gap:8px"><a href="#" onclick="promptCsToken();return false" style="font-size:11px;color:var(--accent)">Setup</a><div style="font-size:12px;color:var(--muted)">' + scanInbox.length + ' pending</div></div></div>';
  html += '<div class="cs-scroll"><table><thead><tr>';
  html += '<th>Document</th><th>PO #</th><th>Packing Slip</th><th>Client</th><th>Project</th><th>PMs</th><th>Manufacturer</th><th>Received</th><th>Cartons</th><th>Location</th><th>Actions</th>';
  html += '</tr></thead><tbody>';
  scanInbox.forEach(function(row) {
    var cId = row.client_id || "";
    var pId = row.project_id || "";
    var cOpts = '<option value="">Select...</option>' + clients.map(function(c){ return '<option value="'+c.id+'" '+(cId==c.id?"selected":"")+'>'+c.company+'</option>'; }).join("");
    var pList = cId ? projects.filter(function(p){ return p.clientId==cId; }) : projects;
    var pOpts = '<option value="">Select...</option>' + pList.map(function(p){ return '<option value="'+p.id+'" '+(pId==p.id?"selected":"")+'>'+p.name+'</option>'; }).join("");
    var cl = clients.find(function(c){ return c.id==cId; });
    var pms = cl ? getClientPMs(cl) : [];
    var pmEm = Array.isArray(row.pm_emails) ? row.pm_emails : [];
    var pmOpts = pms.map(function(pm){ return '<option value="'+(pm.email||"")+'" data-email="'+(pm.email||"")+'" '+(pmEm.indexOf(pm.email)>-1?"selected":"")+'>'+pm.name+(pm.email?" \u2014 "+pm.email:"") +'</option>'; }).join("");
    html += '<tr>';
    html += '<td style="min-width:140px;font-weight:500">' + (row.title||row.po||"CamScanner Doc") + '</td>';
    html += '<td style="min-width:100px"><input value="' + (row.po||"") + '" onchange="updateInboxRow(\x27'+row.id+'\x27,{po:this.value})"></td>';
    html += '<td>' + (row.pdf_url ? '<a href="'+row.pdf_url+'" target="_blank" style="color:var(--accent)">View PDF</a>' : "") + '</td>';
    html += '<td style="min-width:130px"><select onchange="updateInboxRow(\x27'+row.id+'\x27,{client_id:this.value});setTimeout(renderCamScanInbox,300)">'+cOpts+'</select></td>';
    html += '<td style="min-width:120px"><select onchange="updateInboxRow(\x27'+row.id+'\x27,{project_id:this.value})">'+pOpts+'</select></td>';
    html += '<td style="min-width:140px"><select multiple size="2" onchange="updateInboxPMs(\x27'+row.id+'\x27,this)">'+pmOpts+'</select></td>';
    html += '<td><input value="' + (row.manufacturer||"") + '" onchange="updateInboxRow(\x27'+row.id+'\x27,{manufacturer:this.value})"></td>';
    html += '<td><input type="date" value="' + (row.received_date||"") + '" onchange="updateInboxRow(\x27'+row.id+'\x27,{received_date:this.value})"></td>';
    html += '<td><input value="' + (row.cartons||"") + '" onchange="updateInboxRow(\x27'+row.id+'\x27,{cartons:this.value})"></td>';
    html += '<td><input value="' + (row.location||"") + '" onchange="updateInboxRow(\x27'+row.id+'\x27,{location:this.value})"></td>';
    html += '<td><button class="btn btn-primary" style="padding:4px 10px;font-size:11px;white-space:nowrap" onclick="processInboxRow(\x27'+row.id+'\x27)">\u2705 Process</button></td>';
    html += '</tr>';
  });
  html += '</tbody></table></div></div>';
  el.innerHTML = html;
}

async function updateInboxRow(id, patch) {
  await sbUpdate("scan_inbox", id, patch);
  var row = scanInbox.find(function(r){ return r.id===id; });
  if (row) Object.assign(row, patch);
}

async function updateInboxPMs(id, el) {
  var emails = [];
  for(var i=0;i<el.options.length;i++){ if(el.options[i].selected) emails.push(el.options[i].dataset.email); }
  emails = emails.filter(Boolean);
  await updateInboxRow(id, {pm_emails: emails});
}

async function processInboxRow(id) {
  var row = scanInbox.find(function(r){ return r.id===id; });
  if (!row) return;
  if (!row.po) { toast("Enter PO #","error"); return; }
  if (!row.client_id) { toast("Select client","error"); return; }
  var shipData = {
    po: row.po.split("-")[0],
    subitem: row.po,
    clientId: row.client_id,
    projectId: row.project_id && row.project_id !== "_unknown" ? row.project_id : null,
    mfr: row.manufacturer || "",
    expectedDate: null,
    date: row.received_date || null,
    status: "received",
    location: row.location || "",
    inventoryStatus: "in-warehouse",
    cartons: row.cartons || "",
    packing_slip_url: row.pdf_url || ""
  };
  var newId = await sbInsert("shipments", shipData);
  await sbUpdate("scan_inbox", row.id, {status:"processed", shipment_id:newId||null});
  sendReceivingEmailMulti(row.client_id, row.pm_emails||[], row.po, row.project_id||null);
  await loadScanInbox();
  await load();
  renderCamScanInbox();
  renderShipments();
  toast("Processed and emailed","success");
}

function sendReceivingEmailMulti(clientId, pmEmails, po, projectId) {
  var client = clients.find(function(c){ return c.id===clientId; });
  if (!client || !client.email) return;
  var proj = projectId ? projects.find(function(p){ return p.id===projectId; }) : null;
  var subject = "Receiving: " + (po||"");
  var body = "PO: " + (po||"") + (proj ? "\nProject: " + proj.name : "");
  var ccStr = (pmEmails||[]).filter(Boolean).join(";");
  var url = "mailto:" + encodeURIComponent(client.email) + "?cc=" + encodeURIComponent(ccStr) + "&subject=" + encodeURIComponent(subject) + "&body=" + encodeURIComponent(body);
  window.open(url, "_blank");
}

// === CAMSCANNER PDF INTEGRATION ===
async function loadCamScannerDocs(force) {
  try {
    var tk = getCsToken();
    if (!tk) { console.warn("No CamScanner token set"); renderCamScannerInbox(); return; }
    var resp = await fetch("https://d82.intsig.net/sync/query_recent_doc_list?num=50&order_type=0&platform=web&token=" + tk);
    var data = await resp.json();
    var docs = data.doc_list || [];
    camScans = docs.map(function(doc) {
      var fileId = doc.file_name ? doc.file_name.replace(".jdoc", "") : "";
      return { file_id: fileId, doc_id: fileId, title: doc.title, page_count: parseInt(doc.page_num) || 0, created_at: doc.timestamp, updated_at: doc.modify_time, status: "pending" };
    });
    renderCamScannerInbox();
  } catch (e) {
    console.warn("CamScanner load error:", e);
  }
}

</script>
</body>
</html>