import React, { useState, useEffect, useMemo, useCallback } from 'react';
import {
  LayoutDashboard,
  Boxes,
  Users,
  Lock,
  ArrowDownLeft,
  FileCheck2,
  Truck,
  Receipt,
  BookOpen,
  ShieldCheck,
  ShieldAlert,
  Crown,
  Warehouse,
  Plus,
  Search,
  Printer,
  X,
  CheckCircle2,
  AlertTriangle,
  Database,
  LogOut,
  ChevronRight,
  Beaker,
  FileText,
  Building,
  UserCheck,
  Calendar,
  DollarSign,
  Copy,
  ExternalLink,
  KeyRound,
  LogIn,
  UserPlus,
  HelpCircle,
  Info
} from 'lucide-react';

const ROMAN_MONTHS = ['I', 'II', 'III', 'IV', 'V', 'VI', 'VII', 'VIII', 'IX', 'X', 'XI', 'XII'];

const formatRp = (num) => {
  return new Intl.NumberFormat('id-ID', {
    style: 'currency',
    currency: 'IDR',
    maximumFractionDigits: 0
  }).format(num || 0);
};

const generateDocNumber = (prefix, partnerName) => {
  const cleanName = (partnerName || 'PGS').split(' ')[1] || (partnerName || 'PGS').split(' ')[0] || 'PGS';
  const now = new Date();
  const rom = ROMAN_MONTHS[now.getMonth()];
  const dateNum = String(now.getDate()).padStart(2, '0');
  const year = now.getFullYear();
  const seq = String(Math.floor(Math.random() * 899) + 100);
  return `${prefix}-PGS/${cleanName.toUpperCase().replace(/[^A-Z]/g, '')}/${rom}-${dateNum}/${year}/${seq}`;
};

const DEFAULT_USERS = [
  {
    id: 'usr-mgmt-01',
    email: 'direksi@pratachem.com',
    password: 'password123',
    name: 'Cia Liu',
    title: 'Assistant Director & Management',
    role: 'management'
  },
  {
    id: 'usr-adm-01',
    email: 'admin.sales@pratachem.com',
    password: 'password123',
    name: 'Siti Rahma',
    title: 'Admin & Sales Office',
    role: 'admin'
  },
  {
    id: 'usr-gdg-01',
    email: 'gudang@pratachem.com',
    password: 'password123',
    name: 'Budi Santoso',
    title: 'Kepala Gudang Tangerang',
    role: 'gudang'
  }
];

const INITIAL_CUSTOMERS = [
  {
    id: 'cust-001',
    name: 'PT. MAYORA INDAH TBK',
    address: 'Kawasan Industri Jatake, Jl. Industri Raya No. 18, Tangerang, Banten',
    npwp: '01.345.678.9-056.000',
    pic: 'Herman Susanto (Procurement Head)',
    responsible: 'Andre Atmadja (Direksi)',
    top: 'TOP 30 Hari',
    creditLimit: 500000000,
    emailFinance: 'invoicing.jatake@mayora.co.id',
    phoneFinance: '021-590-8888'
  },
  {
    id: 'cust-002',
    name: 'PT. INDOFOOD CBP SUKSES MAKMUR TBK',
    address: 'Kawasan Industri Indotaisei Sektor IA, Kalihurip, Cikampek, Karawang',
    npwp: '01.234.567.8-092.000',
    pic: 'Bambang Irawan (Purchasing Manager)',
    responsible: 'Axton Salim (Direksi)',
    top: 'TOP 30 Hari',
    creditLimit: 750000000,
    emailFinance: 'ap.chemicals@icbp.indofood.co.id',
    phoneFinance: '0264-351-234'
  },
  {
    id: 'cust-003',
    name: 'PT. WINGS SURYA',
    address: 'Jl. Kalisosok Kidul No. 2, Krembangan, Kota Surabaya, Jawa Timur',
    npwp: '01.111.222.3-604.000',
    pic: 'Stefanus Wijaya (Raw Materials Buyer)',
    responsible: 'Ferdinand Katuari (Direksi)',
    top: 'TOP 14 Hari',
    creditLimit: 300000000,
    emailFinance: 'finance.wings@wingscorp.com',
    phoneFinance: '031-353-3333'
  }
];

const INITIAL_SUPPLIERS = [
  {
    id: 'supp-001',
    name: 'SINOCHEM HEBEI CO., LTD.',
    address: 'No. 88 Lianmeng Road, Shijiazhuang, Hebei 050061, China',
    npwp: '02.888.777.6-033.000',
    pic: 'Mr. Chen Wei (Overseas Sales Dir)',
    responsible: 'Dr. Zhang Yong (President)',
    top: 'TOP 30 Hari',
    emailFinance: 'export.finance@sinochem.hebei.com',
    phoneFinance: '+86 311 8899 1122'
  },
  {
    id: 'supp-002',
    name: 'ROQUETTE FRERES FRANCE',
    address: '1 Rue de la Haute Loge, 62136 Lestrem, France',
    npwp: '02.555.444.3-033.000',
    pic: 'Jean-Paul Sartre (Asia Pacific Mgr)',
    responsible: 'Edouard Roquette (Chairman)',
    top: 'TOP 60 Hari (LC)',
    emailFinance: 'ap.invoicing@roquette.com',
    phoneFinance: '+33 3 21 63 36 00'
  },
  {
    id: 'supp-003',
    name: 'TTCA WEIFANG CO., LTD.',
    address: 'Weifang Coastal Economic Development Zone, Shandong, China',
    npwp: '02.333.222.1-033.000',
    pic: 'Ms. Wang Lin (Export Division)',
    responsible: 'Liu Baojun (General Manager)',
    top: 'Cash Advance / T/T',
    emailFinance: 'finance@ttca.cn',
    phoneFinance: '+86 536 8877 665'
  }
];

const INITIAL_CHEMICALS = [
  {
    id: 'chem-001',
    sku: 'PRCF0001',
    warehouse: 'C',
    category: 'F',
    name: 'Citric Acid Anhydrous',
    origin: 'TTCA Weifang, China',
    form: 'Powder',
    packageType: 'Zak',
    weightPerUnit: 25,
    pricePerKg: 28500,
    bookedKg: 500,
    batches: [
      { id: 'b-01', lotNumber: 'LOT-TTCA-2026-08', origin: 'TTCA Weifang', inflowDate: '2026-08-10', expDate: '2028-08-09', pkgCount: 40, remainingKg: 1000 },
      { id: 'b-02', lotNumber: 'LOT-TTCA-2026-09', origin: 'TTCA Weifang', inflowDate: '2026-09-01', expDate: '2028-09-01', pkgCount: 60, remainingKg: 1500 }
    ]
  },
  {
    id: 'chem-002',
    sku: 'PRTF0002',
    warehouse: 'T',
    category: 'F',
    name: 'High Fructose Corn Syrup 55%',
    origin: 'Roquette Freres, France',
    form: 'Liquid',
    packageType: 'Jerigen',
    weightPerUnit: 25,
    pricePerKg: 32000,
    bookedKg: 250,
    batches: [
      { id: 'b-03', lotNumber: 'LOT-RQ-2026-014', origin: 'Roquette France', inflowDate: '2026-09-12', expDate: '2027-09-11', pkgCount: 30, remainingKg: 750 }
    ]
  },
  {
    id: 'chem-003',
    sku: 'PRTI0003',
    warehouse: 'T',
    category: 'I',
    name: 'Trichloroisocyanuric Acid (TCCA 90%)',
    origin: 'Sinochem Hebei, China',
    form: 'Granular',
    packageType: 'Drum',
    weightPerUnit: 50,
    pricePerKg: 46000,
    bookedKg: 0,
    batches: [
      { id: 'b-04', lotNumber: 'LOT-SINO-2026-55', origin: 'Sinochem Hebei', inflowDate: '2026-09-15', expDate: '2029-09-14', pkgCount: 40, remainingKg: 2000 }
    ]
  }
];

export default function App() {
  const [usersList, setUsersList] = useState(() => {
    try {
      const saved = localStorage.getItem('pratachem_users');
      return saved ? JSON.parse(saved) : DEFAULT_USERS;
    } catch {
      return DEFAULT_USERS;
    }
  });

  const [currentUser, setCurrentUser] = useState(() => {
    try {
      const saved = localStorage.getItem('pratachem_session');
      return saved ? JSON.parse(saved) : null;
    } catch {
      return null;
    }
  });

  const [activeTab, setActiveTab] = useState('dashboard');
  const [authTab, setAuthTab] = useState('login');
  const [toast, setToast] = useState(null);

  const [customers, setCustomers] = useState(INITIAL_CUSTOMERS);
  const [suppliers, setSuppliers] = useState(INITIAL_SUPPLIERS);
  const [chemicals, setChemicals] = useState(INITIAL_CHEMICALS);

  const [supplierPOs, setSupplierPOs] = useState([
    {
      id: 'po-1',
      poNumber: 'PO-PGS/SINOCHEM/IX-20/2026/001',
      date: '2026-09-20',
      supplier: 'SINOCHEM HEBEI CO., LTD.',
      chemId: 'chem-003',
      chemName: 'Trichloroisocyanuric Acid (TCCA 90%)',
      packageCount: 40,
      totalKg: 2000,
      pricePerKg: 42000,
      subtotal: 84000000,
      ppn: 9240000,
      grandTotal: 93240000,
      status: 'Received'
    }
  ]);

  const [quotations, setQuotations] = useState([
    {
      id: 'quo-1',
      quoNumber: 'Quo-PGS/MAYORA/IX-24/2026/001',
      date: '2026-09-24',
      customer: 'PT. MAYORA INDAH TBK',
      customerId: 'cust-001',
      customerPO: 'PO-MYR/09/2026/881',
      chemId: 'chem-002',
      chemName: 'High Fructose Corn Syrup 55%',
      packageCount: 10,
      totalKg: 250,
      pricePerKg: 34500,
      terms: 'TOP 30 Hari',
      address: 'Kawasan Industri Jatake, Tangerang',
      status: 'Shipped',
      dispatchId: 'sj-1'
    }
  ]);

  const [dispatches, setDispatches] = useState([
    {
      id: 'sj-1',
      sjNumber: 'SJ-PGS/MAYORA/IX-26/2026/001',
      quoId: 'quo-1',
      customer: 'PT. MAYORA INDAH TBK',
      customerPO: 'PO-MYR/09/2026/881',
      chemId: 'chem-002',
      chemName: 'High Fructose Corn Syrup 55%',
      packageCount: 10,
      packageType: 'Jerigen',
      totalKg: 250,
      address: 'Kawasan Industri Jatake, Tangerang',
      driverName: 'Septian (Deliveree CDE)',
      driverPhone: '0812-9988-7711',
      nopol: 'B 1583 VOR',
      pickupTime: '2026-09-26 10:00',
      status: 'Delivered',
      podReceiver: 'Herman Susanto (QC Pass)',
      podCompletionTime: '2026-09-26 14:30',
      podNotes: 'Segel 10 jerigen utuh dan lengkap',
      invoiceId: 'inv-1'
    }
  ]);

  const [invoices, setInvoices] = useState([
    {
      id: 'inv-1',
      invNumber: 'INV-PGS/MAYORA/IX-26/2026/001',
      dispatchId: 'sj-1',
      sjNumber: 'SJ-PGS/MAYORA/IX-26/2026/001',
      customer: 'PT. MAYORA INDAH TBK',
      customerPO: 'PO-MYR/09/2026/881',
      date: '2026-09-26',
      dueDate: '2026-10-26',
      terms: 'TOP 30 Hari',
      totalKg: 250,
      pricePerKg: 34500,
      subtotal: 8625000,
      ppn: 948750,
      grandTotal: 9573750,
      fakturPajak: '010.002-26.12345678',
      status: 'Unpaid'
    }
  ]);

  const [logbook, setLogbook] = useState([
    {
      id: 'log-1',
      type: 'Stok in',
      time: '21/09/2026, 09.15',
      driverInfo: 'Andi (B 2020 TOR)',
      chemInfo: 'Citric Acid Anhydrous (PRCF0001)',
      qty: '40 Zak (1.000 Kg)',
      condition: 'Segel karung utuh, bersih, lolos uji QC',
      officer: 'Budi Santoso'
    },
    {
      id: 'log-2',
      type: 'Stok out',
      time: '26/09/2026, 10.30',
      driverInfo: 'Septian (B 1583 VOR)',
      chemInfo: 'High Fructose Corn Syrup 55% (PRTF0002)',
      qty: '10 Jerigen (250 Kg)',
      condition: 'Segel drum rapat, muat selesai tanpa tumpah',
      officer: 'Budi Santoso'
    }
  ]);

  const [modalType, setModalType] = useState(null);
  const [selectedBatchChem, setSelectedBatchChem] = useState(null);
  const [printDoc, setPrintDoc] = useState(null);
  const [activeQuoForDispatch, setActiveQuoForDispatch] = useState(null);
  const [activeDispatchForPod, setActiveDispatchForPod] = useState(null);
  const [activeDispatchForInv, setActiveDispatchForInv] = useState(null);
  const [appDialog, setAppDialog] = useState(null);

  const [supabaseConfig, setSupabaseConfig] = useState({
    url: '',
    anonKey: '',
    isConnected: true
  });

  const showToast = (message, type = 'success') => {
    setToast({ message, type });
    setTimeout(() => setToast(null), 3500);
  };

  const triggerDialog = (title, message, isConfirm = false, onConfirm = null) => {
    setAppDialog({ title, message, isConfirm, onConfirm });
  };

  const closeDialog = () => {
    setAppDialog(null);
  };

  const handleLoginSubmit = (e) => {
    e.preventDefault();
    const email = e.target.email.value.trim().toLowerCase();
    const password = e.target.password.value;

    const matched = usersList.find(
      (u) => u.email.toLowerCase() === email && u.password === password
    );

    if (matched) {
      setCurrentUser(matched);
      localStorage.setItem('pratachem_session', JSON.stringify(matched));
      showToast(`Login berhasil sebagai ${matched.name} (${matched.role.toUpperCase()})`);
      if (matched.role !== 'management' && activeTab === 'suppliers') {
        setActiveTab('dashboard');
      }
    } else {
      triggerDialog(
        'Gagal Masuk',
        'Kombinasi email atau kata sandi tidak cocok. Silakan periksa kembali atau daftarkan akun baru Anda.'
      );
    }
  };

  const handleRegisterSubmit = (e) => {
    e.preventDefault();
    const name = e.target.regName.value.trim();
    const email = e.target.regEmail.value.trim().toLowerCase();
    const role = e.target.regRole.value;
    const password = e.target.regPass.value;

    if (!name || !email || !password) {
      triggerDialog('Pendaftaran Tidak Lengkap', 'Harap isi semua kolom pendaftaran.');
      return;
    }

    if (usersList.some((u) => u.email.toLowerCase() === email)) {
      triggerDialog(
        'Email Sudah Terdaftar',
        'Email tersebut sudah terdaftar di sistem ERP Pratachem. Silakan gunakan menu Masuk (Login).'
      );
      setAuthTab('login');
      return;
    }

    let title = 'Staf Operasional';
    if (role === 'management') title = 'Direksi & Management Pratachem';
    else if (role === 'admin') title = 'Admin & Sales Office';
    else if (role === 'gudang') title = 'Kepala / Staf Gudang';

    const newUser = {
      id: 'usr-' + Date.now(),
      name,
      email,
      role,
      title,
      password
    };

    const updatedUsers = [...usersList, newUser];
    setUsersList(updatedUsers);
    localStorage.setItem('pratachem_users', JSON.stringify(updatedUsers));

    setCurrentUser(newUser);
    localStorage.setItem('pratachem_session', JSON.stringify(newUser));
    showToast(`Pendaftaran berhasil! Selamat datang, ${name}`);
  };

  const handleLogout = () => {
    triggerDialog(
      'Konfirmasi Keluar',
      'Apakah Anda yakin ingin keluar dari sesi akun ERP Pratachem saat ini?',
      true,
      () => {
        setCurrentUser(null);
        localStorage.removeItem('pratachem_session');
        setActiveTab('dashboard');
        showToast('Anda telah berhasil keluar dari akun.');
      }
    );
  };

  const inventoryStats = useMemo(() => {
    let totalPhysicalKg = 0;
    let totalBookedKg = 0;
    let tngCount = 0;
    let ckrCount = 0;

    chemicals.forEach((c) => {
      const chemPhysical = (c.batches || []).reduce((acc, b) => acc + (Number(b.remainingKg) || 0), 0);
      totalPhysicalKg += chemPhysical;
      totalBookedKg += Number(c.bookedKg) || 0;
      if (c.warehouse === 'T') tngCount++;
      if (c.warehouse === 'C') ckrCount++;
    });

    const totalFreeKg = Math.max(0, totalPhysicalKg - totalBookedKg);
    return {
      skuCount: chemicals.length,
      totalPhysicalKg,
      totalBookedKg,
      totalFreeKg,
      tngCount,
      ckrCount
    };
  }, [chemicals]);

  if (!currentUser) {
    return (
      <div className="min-h-screen bg-slate-950 flex items-center justify-center p-4 font-sans selection:bg-blue-600 selection:text-white">
        <div className="bg-white rounded-3xl max-w-md w-full shadow-2xl border border-slate-200 overflow-hidden">
          <div className="p-6 bg-slate-900 text-white text-center space-y-2">
            <div>
              <h2 className="text-base font-extrabold tracking-tight uppercase">PT. PRATACHEM GLOBALINDO SUKSES</h2>
              <p className="text-xs text-slate-400 mt-0.5">Pratachem Core System Apps, Version 2.0</p>
            </div>
          </div>

          <div className="flex border-b border-slate-200 bg-slate-50 text-xs font-bold">
            <button
              type="button"
              onClick={() => setAuthTab('login')}
              className={`flex-1 py-3.5 transition flex items-center justify-center space-x-1.5 ${
                authTab === 'login'
                  ? 'text-blue-600 border-b-2 border-blue-600 bg-white'
                  : 'text-slate-500 hover:text-slate-800'
              }`}
            >
              <LogIn className="w-3.5 h-3.5" />
              <span>Masuk (Login)</span>
            </button>
            <button
              type="button"
              onClick={() => setAuthTab('register')}
              className={`flex-1 py-3.5 transition flex items-center justify-center space-x-1.5 ${
                authTab === 'register'
                  ? 'text-emerald-600 border-b-2 border-emerald-600 bg-white'
                  : 'text-slate-500 hover:text-slate-800'
              }`}
            >
              <UserPlus className="w-3.5 h-3.5" />
              <span>Daftar Akun Baru</span>
            </button>
          </div>

          {authTab === 'login' ? (
            <form onSubmit={handleLoginSubmit} className="p-6 space-y-4 text-xs">
              <div>
                <label className="block font-semibold text-slate-700 mb-1">Email Resmi Karyawan</label>
                <input
                  name="email"
                  type="email"
                  required
                  placeholder="direksi@pratachem.com / nama@pratachem.com"
                  className="w-full p-3 rounded-xl border border-slate-300 focus:ring-2 focus:ring-blue-600 outline-none text-slate-800 font-medium"
                />
              </div>
              <div>
                <label className="block font-semibold text-slate-700 mb-1">Kata Sandi (Password)</label>
                <input
                  name="password"
                  type="password"
                  required
                  placeholder="••••••••"
                  className="w-full p-3 rounded-xl border border-slate-300 focus:ring-2 focus:ring-blue-600 outline-none text-slate-800"
                />
              </div>

              <button
                type="submit"
                className="w-full py-3 bg-blue-600 hover:bg-blue-700 text-white rounded-xl font-bold transition flex items-center justify-center space-x-2 shadow-lg shadow-blue-500/20 text-sm"
              >
                <KeyRound className="w-4 h-4" />
                <span>Masuk ke Sistem ERP</span>
              </button>

              <div className="pt-2 text-center">
                <span className="text-[11px] text-slate-500">Karyawan baru dan belum memiliki akun?</span>
                <button
                  type="button"
                  onClick={() => setAuthTab('register')}
                  className="text-[11px] text-blue-600 font-bold ml-1 hover:underline"
                >
                  Daftar Sekarang
                </button>
              </div>
            </form>
          ) : (
            <form onSubmit={handleRegisterSubmit} className="p-6 space-y-3.5 text-xs">
              <div>
                <label className="block font-semibold text-slate-700 mb-1">Nama Lengkap & Gelar</label>
                <input
                  name="regName"
                  type="text"
                  required
                  placeholder="Contoh: Hendra Wijaya / Melissa Tan"
                  className="w-full p-2.5 rounded-xl border border-slate-300 outline-none focus:ring-2 focus:ring-emerald-600 text-slate-800 font-medium"
                />
              </div>
              <div>
                <label className="block font-semibold text-slate-700 mb-1">Email Perusahaan / Resmi</label>
                <input
                  name="regEmail"
                  type="email"
                  required
                  placeholder="staf@pratachem.com"
                  className="w-full p-2.5 rounded-xl border border-slate-300 outline-none focus:ring-2 focus:ring-emerald-600 text-slate-800"
                />
              </div>
              <div>
                <label className="block font-semibold text-slate-700 mb-1">Pilih Peran Jabatan (RBAC Matrix)</label>
                <select
                  name="regRole"
                  required
                  className="w-full p-2.5 rounded-xl border border-slate-300 bg-white font-semibold outline-none focus:ring-2 focus:ring-emerald-600 text-slate-800"
                >
                  <option value="management">Management (Direksi & Owner - Akses Penuh Termasuk Supplier)</option>
                  <option value="admin">Admin Kantor (Sales & Administrasi - Supplier Terblokir Total)</option>
                  <option value="gudang">Tim Gudang (Kepala & Staff Gudang - Fisik, FIFO, & Gerbang)</option>
                </select>
                <p className="text-[10px] text-slate-400 mt-1">Peran menentukan hak akses modul dan perlindungan data rahasia supplier.</p>
              </div>
              <div>
                <label className="block font-semibold text-slate-700 mb-1">Buat Kata Sandi (Password)</label>
                <input
                  name="regPass"
                  type="password"
                  required
                  minLength={6}
                  placeholder="Minimal 6 karakter"
                  className="w-full p-2.5 rounded-xl border border-slate-300 outline-none focus:ring-2 focus:ring-emerald-600 text-slate-800"
                />
              </div>

              <button
                type="submit"
                className="w-full py-3 bg-emerald-600 hover:bg-emerald-700 text-white rounded-xl font-bold transition flex items-center justify-center space-x-2 shadow-lg shadow-emerald-500/20 text-sm"
              >
                <UserCheck className="w-4 h-4" />
                <span>Daftarkan & Masuk Langsung</span>
              </button>

              <div className="pt-1 text-center">
                <span className="text-[11px] text-slate-500">Sudah memiliki akun terdaftar?</span>
                <button
                  type="button"
                  onClick={() => setAuthTab('login')}
                  className="text-[11px] text-blue-600 font-bold ml-1 hover:underline"
                >
                  Masuk di sini
                </button>
              </div>
            </form>
          )}
        </div>

        {appDialog && (
          <div className="fixed inset-0 z-50 bg-slate-950/70 backdrop-blur-sm flex items-center justify-center p-4">
            <div className="bg-white rounded-2xl max-w-sm w-full p-5 shadow-2xl border border-slate-200 space-y-4">
              <div className="flex items-start space-x-3">
                <div className="w-10 h-10 rounded-xl bg-blue-50 text-blue-600 flex items-center justify-center shrink-0">
                  <Info className="w-5 h-5" />
                </div>
                <div>
                  <h3 className="font-bold text-slate-900 text-sm">{appDialog.title}</h3>
                  <p className="text-xs text-slate-600 mt-1">{appDialog.message}</p>
                </div>
              </div>
              <div className="flex justify-end pt-2">
                <button
                  type="button"
                  onClick={closeDialog}
                  className="px-4 py-2 bg-slate-800 text-white rounded-xl text-xs font-semibold hover:bg-slate-700"
                >
                  OK
                </button>
              </div>
            </div>
          </div>
        )}
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-slate-50 text-slate-800 flex flex-col font-sans selection:bg-blue-600 selection:text-white">
      <header className="bg-slate-900 text-white sticky top-0 z-40 border-b border-slate-800 shadow-md">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex items-center justify-between h-16">
            <div className="flex items-center space-x-3 cursor-pointer" onClick={() => setActiveTab('dashboard')}>
              <div className="w-10 h-10 rounded-xl bg-gradient-to-tr from-blue-600 via-blue-500 to-teal-400 flex items-center justify-center shadow-lg shadow-blue-500/20 shrink-0">
                <Beaker className="w-5 h-5 text-white" />
              </div>
              <div>
                <div className="flex items-center space-x-2">
                  <span className="font-extrabold text-sm sm:text-base tracking-tight text-white">PRATACHEM</span>
                  <span className="bg-blue-500/20 text-blue-300 text-[10px] font-mono px-2 py-0.5 rounded border border-blue-400/30">ERP v5.2</span>
                </div>
                <p className="text-[11px] text-slate-400 font-medium hidden sm:block">PT. Pratachem Globalindo Sukses • Chemical Trading & Logistics</p>
              </div>
            </div>

            <div className="flex items-center space-x-2.5 sm:space-x-3">
              <div className="flex items-center space-x-2 bg-slate-800/90 rounded-xl px-3 py-1.5 border border-slate-700 text-xs">
                <div className="w-7 h-7 rounded-lg bg-blue-600 text-white flex items-center justify-center font-bold text-xs">
                  {currentUser.name.charAt(0).toUpperCase()}
                </div>
                <div className="text-left">
                  <div className="font-bold text-white leading-tight max-w-[130px] truncate">{currentUser.name}</div>
                  <div className={`text-[10px] font-semibold uppercase tracking-wider ${
                    currentUser.role === 'management' ? 'text-amber-400' : currentUser.role === 'admin' ? 'text-blue-400' : 'text-teal-400'
                  }`}>
                    {currentUser.role.toUpperCase()}
                  </div>
                </div>
              </div>

              <button
                onClick={() => setModalType('supabase')}
                title="Status Database Cloud Supabase Tokyo"
                className="p-2 rounded-xl bg-slate-800 hover:bg-slate-700 text-emerald-400 border border-slate-700 transition"
              >
                <Database className="w-4 h-4" />
              </button>

              <button
                onClick={handleLogout}
                title="Keluar Akun (Logout)"
                className="p-2 rounded-xl bg-rose-900/40 hover:bg-rose-900 text-rose-300 border border-rose-700/50 transition flex items-center space-x-1.5"
              >
                <LogOut className="w-4 h-4" />
                <span className="text-xs font-semibold hidden md:inline">Keluar</span>
              </button>
            </div>
          </div>
        </div>

        <div className="bg-slate-800/90 border-t border-slate-700/60 overflow-x-auto no-scrollbar">
          <div className="max-w-7xl mx-auto px-4 sm:px-6 flex space-x-1 text-xs font-medium py-1.5">
            <button
              onClick={() => setActiveTab('dashboard')}
              className={`flex items-center space-x-1.5 px-3 py-2 rounded-lg transition-colors whitespace-nowrap ${
                activeTab === 'dashboard' ? 'bg-blue-600 text-white' : 'text-slate-300 hover:text-white hover:bg-slate-700/50'
              }`}
            >
              <LayoutDashboard className="w-4 h-4" />
              <span>Dashboard</span>
            </button>

            <button
              onClick={() => setActiveTab('inventory')}
              className={`flex items-center space-x-1.5 px-3 py-2 rounded-lg transition-colors whitespace-nowrap ${
                activeTab === 'inventory' ? 'bg-blue-600 text-white' : 'text-slate-300 hover:text-white hover:bg-slate-700/50'
              }`}
            >
              <Boxes className="w-4 h-4" />
              <span>Master Barang & FIFO</span>
            </button>

            {currentUser.role !== 'gudang' && (
              <button
                onClick={() => setActiveTab('customers')}
                className={`flex items-center space-x-1.5 px-3 py-2 rounded-lg transition-colors whitespace-nowrap ${
                  activeTab === 'customers' ? 'bg-blue-600 text-white' : 'text-slate-300 hover:text-white hover:bg-slate-700/50'
                }`}
              >
                <Users className="w-4 h-4" />
                <span>Master Pelanggan</span>
              </button>
            )}

            {currentUser.role === 'management' && (
              <button
                onClick={() => setActiveTab('suppliers')}
                className={`flex items-center space-x-1.5 px-3 py-2 rounded-lg transition-colors whitespace-nowrap border border-amber-500/40 ${
                  activeTab === 'suppliers' ? 'bg-amber-600 text-white' : 'text-amber-300 hover:bg-amber-900/40'
                }`}
              >
                <Lock className="w-3.5 h-3.5 text-amber-400" />
                <span>Master Supplier (Rahasia)</span>
              </button>
            )}

            <button
              onClick={() => setActiveTab('inbound')}
              className={`flex items-center space-x-1.5 px-3 py-2 rounded-lg transition-colors whitespace-nowrap ${
                activeTab === 'inbound' ? 'bg-blue-600 text-white' : 'text-slate-300 hover:text-white hover:bg-slate-700/50'
              }`}
            >
              <ArrowDownLeft className="w-4 h-4" />
              <span>Inbound & PO</span>
            </button>

            {currentUser.role !== 'gudang' && (
              <button
                onClick={() => setActiveTab('sales')}
                className={`flex items-center space-x-1.5 px-3 py-2 rounded-lg transition-colors whitespace-nowrap ${
                  activeTab === 'sales' ? 'bg-blue-600 text-white' : 'text-slate-300 hover:text-white hover:bg-slate-700/50'
                }`}
              >
                <FileCheck2 className="w-4 h-4" />
                <span>Penawaran & Booking</span>
              </button>
            )}

            <button
              onClick={() => setActiveTab('deliveree')}
              className={`flex items-center space-x-1.5 px-3 py-2 rounded-lg transition-colors whitespace-nowrap ${
                activeTab === 'deliveree' ? 'bg-blue-600 text-white' : 'text-slate-300 hover:text-white hover:bg-slate-700/50'
              }`}
            >
              <Truck className="w-4 h-4" />
              <span>Dispatch Deliveree</span>
            </button>

            {currentUser.role !== 'gudang' && (
              <button
                onClick={() => setActiveTab('invoices')}
                className={`flex items-center space-x-1.5 px-3 py-2 rounded-lg transition-colors whitespace-nowrap ${
                  activeTab === 'invoices' ? 'bg-blue-600 text-white' : 'text-slate-300 hover:text-white hover:bg-slate-700/50'
                }`}
              >
                <Receipt className="w-4 h-4" />
                <span>Invoicing & Faktur</span>
              </button>
            )}

            <button
              onClick={() => setActiveTab('logbook')}
              className={`flex items-center space-x-1.5 px-3 py-2 rounded-lg transition-colors whitespace-nowrap ${
                activeTab === 'logbook' ? 'bg-blue-600 text-white' : 'text-slate-300 hover:text-white hover:bg-slate-700/50'
              }`}
            >
              <BookOpen className="w-4 h-4" />
              <span>Logbook Gerbang</span>
            </button>
          </div>
        </div>
      </header>

      {}
      <main className="flex-1 max-w-7xl w-full mx-auto px-4 sm:px-6 lg:px-8 py-6">
        <div className="bg-gradient-to-r from-slate-900 via-blue-950 to-slate-900 rounded-2xl p-4 sm:p-5 text-white shadow-sm mb-6 flex flex-col md:flex-row md:items-center justify-between gap-4 border border-slate-800">
          <div>
            <div className="inline-flex items-center space-x-2 bg-blue-500/20 border border-blue-400/30 px-2.5 py-0.5 rounded-full text-xs font-medium text-blue-300 mb-2">
              <span className="w-2 h-2 rounded-full bg-emerald-400 animate-pulse"></span>
              <span>Hak Akses: {currentUser.title}</span>
            </div>
            <h1 className="text-xl sm:text-2xl font-black tracking-tight">Sistem ERP & WMS Bahan Kimia Terpadu</h1>
            <p className="text-xs text-slate-300 mt-1">
              {currentUser.role === 'management'
                ? 'Mode Direksi: Akses penuh termasuk Direktori Rahasia Supplier & Approval Pembukuan.'
                : currentUser.role === 'admin'
                ? 'Mode Admin: Input transaksi, PO & Invoice e-Faktur. Data Supplier Prinsipal TERBLOKIR TOTAL.'
                : 'Mode Lapangan Gudang: Verifikasi armada supir Deliveree, potong batch FIFO riil, dan catat fisik gerbang.'}
            </p>
          </div>
          <div className="flex flex-wrap items-center gap-2">
            {currentUser.role !== 'gudang' && (
              <button
                onClick={() => setModalType('new-customer')}
                className="bg-white text-slate-900 hover:bg-slate-100 px-3.5 py-2 rounded-xl text-xs font-bold transition flex items-center space-x-1.5 shadow"
              >
                <Plus className="w-4 h-4 text-blue-600" />
                <span>Customer Baru</span>
              </button>
            )}
            <button
              onClick={() => setModalType('new-chemical')}
              className="bg-emerald-600 hover:bg-emerald-700 text-white px-3.5 py-2 rounded-xl text-xs font-bold transition flex items-center space-x-1.5 shadow"
            >
              <Plus className="w-4 h-4" />
              <span>Komoditas Baru</span>
            </button>
          </div>
        </div>

        {}
        {activeTab === 'dashboard' && (
          <div className="space-y-6">
            <div className="grid grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-5">
              <div className="bg-white rounded-2xl p-4 sm:p-5 border border-slate-200 shadow-sm">
                <div className="flex items-center justify-between text-slate-500 mb-2">
                  <span className="text-xs font-semibold uppercase tracking-wider">Total SKU Bahan</span>
                  <div className="w-8 h-8 rounded-lg bg-blue-50 text-blue-600 flex items-center justify-center">
                    <Beaker className="w-4 h-4" />
                  </div>
                </div>
                <div className="text-2xl sm:text-3xl font-extrabold text-slate-900">{inventoryStats.skuCount} SKU</div>
                <div className="text-[11px] text-slate-500 mt-1 flex items-center space-x-1 font-medium">
                  <span className="text-blue-600">{inventoryStats.tngCount} Tangerang</span>
                  <span>•</span>
                  <span className="text-teal-600">{inventoryStats.ckrCount} Cikarang</span>
                </div>
              </div>

              <div className="bg-white rounded-2xl p-4 sm:p-5 border border-slate-200 shadow-sm">
                <div className="flex items-center justify-between text-slate-500 mb-2">
                  <span className="text-xs font-semibold uppercase tracking-wider">Stok Fisik Gudang</span>
                  <div className="w-8 h-8 rounded-lg bg-emerald-50 text-emerald-600 flex items-center justify-center">
                    <Boxes className="w-4 h-4" />
                  </div>
                </div>
                <div className="text-2xl sm:text-3xl font-extrabold text-slate-900">{inventoryStats.totalPhysicalKg.toLocaleString('id-ID')} Kg</div>
                <div className="text-[11px] text-slate-500 mt-1">Stok riil di atas rak & pallet</div>
              </div>

              <div className="bg-white rounded-2xl p-4 sm:p-5 border border-slate-200 shadow-sm">
                <div className="flex items-center justify-between text-slate-500 mb-2">
                  <span className="text-xs font-semibold uppercase tracking-wider">Stok Terkunci (Booked)</span>
                  <div className="w-8 h-8 rounded-lg bg-amber-50 text-amber-600 flex items-center justify-center">
                    <Lock className="w-4 h-4" />
                  </div>
                </div>
                <div className="text-2xl sm:text-3xl font-extrabold text-amber-600">{inventoryStats.totalBookedKg.toLocaleString('id-ID')} Kg</div>
                <div className="text-[11px] text-slate-500 mt-1">Terkunci PO penawaran aktif</div>
              </div>

              <div className="bg-white rounded-2xl p-4 sm:p-5 border border-slate-200 shadow-sm">
                <div className="flex items-center justify-between text-slate-500 mb-2">
                  <span className="text-xs font-semibold uppercase tracking-wider">Free Stok (Siap Jual)</span>
                  <div className="w-8 h-8 rounded-lg bg-teal-50 text-teal-600 flex items-center justify-center">
                    <FileCheck2 className="w-4 h-4" />
                  </div>
                </div>
                <div className="text-2xl sm:text-3xl font-extrabold text-teal-600">{inventoryStats.totalFreeKg.toLocaleString('id-ID')} Kg</div>
                <div className="text-[11px] text-slate-500 mt-1">Aman ditawarkan ke customer</div>
              </div>
            </div>

            <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
              <div className="bg-white rounded-2xl p-5 border border-slate-200 shadow-sm lg:col-span-2">
                <div className="flex items-center justify-between mb-4">
                  <div>
                    <h2 className="font-bold text-slate-900 text-sm sm:text-base">Pengiriman Aktif Deliveree</h2>
                    <p className="text-xs text-slate-500">Pencocokan armada fisik dan pemotongan stok FIFO otomatis</p>
                  </div>
                  <button onClick={() => setActiveTab('deliveree')} className="text-xs font-bold text-blue-600 hover:text-blue-700 flex items-center">
                    Buka Modul <ChevronRight className="w-3.5 h-3.5 ml-0.5" />
                  </button>
                </div>
                <div className="space-y-3">
                  {dispatches.map((d) => (
                    <div key={d.id} className="p-3.5 rounded-xl border border-slate-100 bg-slate-50 flex flex-col sm:flex-row sm:items-center justify-between gap-3">
                      <div>
                        <div className="flex items-center space-x-2">
                          <span className="font-bold text-slate-900 text-xs">{d.customer}</span>
                          <span className={`px-2 py-0.5 text-[10px] font-bold rounded-full ${d.status === 'Delivered' ? 'bg-emerald-100 text-emerald-800' : 'bg-blue-100 text-blue-800'}`}>
                            {d.status}
                          </span>
                        </div>
                        <div className="text-xs text-slate-600 mt-1 font-mono font-medium">{d.sjNumber} • {d.chemName} ({d.totalKg} Kg)</div>
                        <div className="text-[11px] text-slate-400 mt-0.5">Supir: {d.driverName} ({d.nopol})</div>
                      </div>
                      <div className="flex items-center space-x-2">
                        <button
                          onClick={() => setPrintDoc({ type: 'sj', data: d })}
                          className="px-2.5 py-1.5 rounded-lg border border-slate-300 bg-white hover:bg-slate-100 text-slate-700 text-xs font-semibold flex items-center space-x-1"
                        >
                          <Printer className="w-3.5 h-3.5 text-slate-500" />
                          <span>Cetak SJ</span>
                        </button>
                      </div>
                    </div>
                  ))}
                </div>
              </div>

              <div className="bg-white rounded-2xl p-5 border border-slate-200 shadow-sm">
                <div className="flex items-center justify-between mb-4">
                  <div>
                    <h2 className="font-bold text-slate-900 text-sm sm:text-base">Audit Logbook Gerbang</h2>
                    <p className="text-xs text-slate-500">Pencatatan fisik harian</p>
                  </div>
                  <button onClick={() => setActiveTab('logbook')} className="text-xs font-bold text-blue-600 hover:text-blue-700">Lihat Semua</button>
                </div>
                <div className="space-y-3">
                  {logbook.slice(0, 3).map((l) => (
                    <div key={l.id} className="p-3 rounded-xl border border-slate-100 bg-slate-50 text-xs space-y-1">
                      <div className="flex justify-between items-center">
                        <span className={`px-1.5 py-0.5 rounded text-[10px] font-bold ${l.type === 'Stok in' ? 'bg-emerald-100 text-emerald-800' : 'bg-rose-100 text-rose-800'}`}>
                          {l.type.toUpperCase()}
                        </span>
                        <span className="text-[10px] text-slate-400">{l.time}</span>
                      </div>
                      <div className="font-semibold text-slate-800">{l.chemInfo}</div>
                      <div className="text-[11px] text-slate-500">{l.driverInfo} • {l.qty}</div>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </div>
        )}

        {}
        {activeTab === 'inventory' && (
          <div className="space-y-5">
            <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
              <div>
                <h1 className="text-xl font-bold text-slate-900 flex items-center space-x-2">
                  <span>Master Barang & Struktur SKU Cerdas</span>
                  <span className="text-xs bg-blue-100 text-blue-800 px-2.5 py-0.5 rounded-full font-mono font-semibold">SKU Matrix</span>
                </h1>
                <p className="text-xs text-slate-500 mt-0.5">Komoditas Bahan Baku Kimia Non-Pompa • Manajemen Lapisan Batch FIFO Strict</p>
              </div>
              <button
                onClick={() => setModalType('new-chemical')}
                className="bg-blue-600 hover:bg-blue-700 text-white px-3.5 py-2 rounded-xl text-xs font-bold transition flex items-center space-x-1.5 shadow"
              >
                <Plus className="w-4 h-4" />
                <span>Tambah Komoditas Baru</span>
              </button>
            </div>

            <div className="bg-white rounded-2xl border border-slate-200 shadow-sm overflow-hidden">
              <div className="overflow-x-auto">
                <table className="w-full text-left text-xs text-slate-600">
                  <thead className="bg-slate-50 text-slate-700 font-semibold border-b border-slate-200 uppercase tracking-wider text-[11px]">
                    <tr>
                      <th className="py-3.5 px-4">Kode SKU</th>
                      <th className="py-3.5 px-4">Nama Bahan Baku</th>
                      <th className="py-3.5 px-4">Asal & Bentuk</th>
                      <th className="py-3.5 px-4">Kemasan</th>
                      <th className="py-3.5 px-4 text-right">Stok Fisik</th>
                      <th className="py-3.5 px-4 text-right">Booked</th>
                      <th className="py-3.5 px-4 text-right font-bold text-teal-700">Free Stok</th>
                      <th className="py-3.5 px-4 text-center">Batch Lots</th>
                    </tr>
                  </thead>
                  <tbody className="divide-y divide-slate-100 font-medium">
                    {chemicals.map((chem) => {
                      const physicalKg = (chem.batches || []).reduce((acc, b) => acc + (Number(b.remainingKg) || 0), 0);
                      const freeKg = Math.max(0, physicalKg - (chem.bookedKg || 0));
                      return (
                        <tr key={chem.id} className="hover:bg-slate-50/80 transition-colors">
                          <td className="py-3.5 px-4">
                            <button
                              onClick={() => setSelectedBatchChem(chem)}
                              className="font-mono font-bold text-blue-600 hover:text-blue-800 underline flex items-center space-x-1"
                            >
                              <span>{chem.sku}</span>
                              <ChevronRight className="w-3 h-3" />
                            </button>
                          </td>
                          <td className="py-3.5 px-4 font-bold text-slate-900">{chem.name}</td>
                          <td className="py-3.5 px-4">
                            <div>{chem.origin}</div>
                            <span className="text-[10px] text-slate-400 font-normal">{chem.form}</span>
                          </td>
                          <td className="py-3.5 px-4">{chem.packageType} (@ {chem.weightPerUnit} Kg)</td>
                          <td className="py-3.5 px-4 text-right font-bold text-slate-900">{physicalKg.toLocaleString('id-ID')} Kg</td>
                          <td className="py-3.5 px-4 text-right text-amber-600 font-bold">{chem.bookedKg || 0} Kg</td>
                          <td className="py-3.5 px-4 text-right text-teal-700 font-extrabold text-sm">{freeKg.toLocaleString('id-ID')} Kg</td>
                          <td className="py-3.5 px-4 text-center">
                            <button
                              onClick={() => setSelectedBatchChem(chem)}
                              className="px-2.5 py-1 rounded-lg bg-blue-50 text-blue-700 hover:bg-blue-100 font-semibold text-[11px]"
                            >
                              {(chem.batches || []).length} Layer FIFO
                            </button>
                          </td>
                        </tr>
                      );
                    })}
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        )}

        {}
        {activeTab === 'customers' && currentUser.role !== 'gudang' && (
          <div className="space-y-5">
            <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
              <div>
                <h1 className="text-xl font-bold text-slate-900 flex items-center space-x-2">
                  <span>Master Data Customer (Pelanggan Resmi)</span>
                  <span className="text-xs bg-blue-100 text-blue-800 px-2 py-0.5 rounded-full font-semibold">PRD Bab 08</span>
                </h1>
                <p className="text-xs text-slate-500 mt-0.5">Basis Data Tagihan e-Faktur 16 Digit • Pengawasan Plafon Piutang (Credit Limit)</p>
              </div>
              <button
                onClick={() => setModalType('new-customer')}
                className="bg-blue-600 hover:bg-blue-700 text-white px-3.5 py-2 rounded-xl text-xs font-bold transition flex items-center space-x-1.5 shadow"
              >
                <Plus className="w-4 h-4" />
                <span>Tambah Customer Baru</span>
              </button>
            </div>

            <div className="bg-white rounded-2xl border border-slate-200 shadow-sm overflow-hidden">
              <div className="p-4 border-b border-slate-200 bg-slate-50/70 flex justify-between items-center text-xs">
                <span className="font-bold text-slate-700 uppercase tracking-wider">Direktori Rekanan Pembeli Terdaftar</span>
                <span className="font-mono text-slate-500">Total: {customers.length} Customer</span>
              </div>
              <div className="overflow-x-auto">
                <table className="w-full text-left text-xs text-slate-600">
                  <thead className="bg-slate-50 text-slate-700 font-semibold border-b border-slate-200 text-[11px] uppercase">
                    <tr>
                      <th className="py-3 px-4">Nama Perusahaan</th>
                      <th className="py-3 px-4">NPWP (16 Digit)</th>
                      <th className="py-3 px-4">Alamat Penagihan & Drop</th>
                      <th className="py-3 px-4">PIC & Penanggung Jawab</th>
                      <th className="py-3 px-4 text-center">Terms</th>
                      <th className="py-3 px-4 text-right">Plafon Piutang</th>
                      <th className="py-3 px-4">Kontak Finance</th>
                    </tr>
                  </thead>
                  <tbody className="divide-y divide-slate-100 font-medium">
                    {customers.map((c) => (
                      <tr key={c.id} className="hover:bg-slate-50 transition-colors">
                        <td className="py-3 px-4 font-bold text-slate-900">{c.name}</td>
                        <td className="py-3 px-4 font-mono font-bold text-slate-700">{c.npwp}</td>
                        <td className="py-3 px-4 max-w-xs truncate" title={c.address}>{c.address}</td>
                        <td className="py-3 px-4">
                          <div className="font-semibold text-slate-800">{c.pic}</div>
                          <div className="text-[10px] text-slate-400">P.J: {c.responsible}</div>
                        </td>
                        <td className="py-3 px-4 text-center">
                          <span className="px-2 py-0.5 rounded-full text-xs font-semibold bg-blue-100 text-blue-800">{c.top}</span>
                        </td>
                        <td className="py-3 px-4 text-right font-mono font-bold text-emerald-700">{formatRp(c.creditLimit)}</td>
                        <td className="py-3 px-4">
                          <div>{c.phoneFinance}</div>
                          <div className="text-[10px] text-slate-400">{c.emailFinance}</div>
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        )}

        {}
        {activeTab === 'suppliers' && (
          currentUser.role === 'management' ? (
            <div className="space-y-5">
              <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
                <div>
                  <h1 className="text-xl font-bold text-slate-900 flex items-center space-x-2">
                    <span>Master Data Supplier (Prinsipal / Pabrik)</span>
                    <span className="text-xs bg-amber-100 text-amber-800 border border-amber-300 px-2 py-0.5 rounded-full font-bold flex items-center space-x-1">
                      <Lock className="w-3 h-3 text-amber-600" />
                      <span>Strictly Confidential</span>
                    </span>
                  </h1>
                  <p className="text-xs text-slate-500 mt-0.5">Rahasia Dagang Pratachem • Tersembunyi Total dari Akun Admin Kantor & Tim Gudang</p>
                </div>
                <button
                  onClick={() => setModalType('new-supplier')}
                  className="bg-amber-600 hover:bg-amber-700 text-white px-3.5 py-2 rounded-xl text-xs font-bold transition flex items-center space-x-1.5 shadow"
                >
                  <Plus className="w-4 h-4" />
                  <span>Tambah Supplier Rahasia</span>
                </button>
              </div>

              <div className="bg-amber-50 border border-amber-300 rounded-2xl p-4 text-amber-950 text-xs flex items-start space-x-3">
                <ShieldCheck className="w-5 h-5 text-amber-700 shrink-0 mt-0.5" />
                <div>
                  <div className="font-bold">Ketentuan Proteksi Data Pemasok (PRD Bab 02 & Bab 09):</div>
                  <p className="mt-0.5 text-amber-900 leading-relaxed">
                    Data prinsipal, kontak representatif pabrik, dan rekening vendor adalah rahasia operasional manajemen. Pengguna dengan hak akses <strong>Admin Kantor</strong> dan <strong>Tim Gudang</strong> hanya dapat memilih nama vendor di formulir PO tanpa dapat melihat direktori atau profil lengkap ini.
                  </p>
                </div>
              </div>

              <div className="bg-white rounded-2xl border border-slate-200 shadow-sm overflow-hidden">
                <div className="p-4 border-b border-slate-200 bg-slate-50/70 flex justify-between items-center text-xs">
                  <span className="font-bold text-slate-700 uppercase tracking-wider">Direktori Prinsipal & Pabrik Rekanan</span>
                  <span className="font-mono text-slate-500">Total: {suppliers.length} Supplier</span>
                </div>
                <div className="overflow-x-auto">
                  <table className="w-full text-left text-xs text-slate-600">
                    <thead className="bg-slate-50 text-slate-700 font-semibold border-b border-slate-200 text-[11px] uppercase">
                      <tr>
                        <th className="py-3 px-4">Nama Pabrik / Supplier</th>
                        <th className="py-3 px-4">NPWP Pemasok</th>
                        <th className="py-3 px-4">Alamat Pabrik / Kantor</th>
                        <th className="py-3 px-4">PIC Representative</th>
                        <th className="py-3 px-4 text-center">TOP</th>
                        <th className="py-3 px-4">Email & No. HP Finance</th>
                      </tr>
                    </thead>
                    <tbody className="divide-y divide-slate-100 font-medium">
                      {suppliers.map((s) => (
                        <tr key={s.id} className="hover:bg-amber-50/40 transition-colors">
                          <td className="py-3 px-4 font-bold text-slate-900">{s.name}</td>
                          <td className="py-3 px-4 font-mono font-bold text-slate-700">{s.npwp}</td>
                          <td className="py-3 px-4 max-w-xs truncate" title={s.address}>{s.address}</td>
                          <td className="py-3 px-4">
                            <div className="font-semibold text-slate-800">{s.pic}</div>
                            <div className="text-[10px] text-slate-400">P.J: {s.responsible}</div>
                          </td>
                          <td className="py-3 px-4 text-center">
                            <span className="px-2 py-0.5 rounded-full text-xs font-semibold bg-emerald-100 text-emerald-800">{s.top}</span>
                          </td>
                          <td className="py-3 px-4">
                            <div>{s.phoneFinance}</div>
                            <div className="text-[10px] text-slate-400">{s.emailFinance}</div>
                          </td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          ) : (
            <div className="bg-rose-50 border border-rose-200 rounded-3xl p-10 text-center text-rose-800 space-y-3">
              <ShieldAlert className="w-16 h-16 text-rose-600 mx-auto" />
              <h2 className="text-xl font-black">AKSES DITOLAK: STRICTLY CONFIDENTIAL</h2>
              <p className="text-xs text-rose-700 max-w-md mx-auto leading-relaxed">
                Berdasarkan ketentuan PRD Bab 02 & Bab 09, modul Master Supplier memuat rahasia dagang perusahaan dan hanya dapat diakses oleh akun <strong>Management (Direksi & Owner)</strong>.
              </p>
            </div>
          )
        )}

        {}
        {activeTab === 'inbound' && (
          <div className="space-y-5">
            <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
              <div>
                <h1 className="text-xl font-bold text-slate-900 flex items-center space-x-2">
                  <span>Inbound & Penerbitan PO Resmi Supplier</span>
                </h1>
                <p className="text-xs text-slate-500 mt-0.5">Format PO-PGS Cetak Canon MG2500 (A4) • Penerimaan Batch FIFO & Verifikasi Fisik</p>
              </div>
              <div className="flex items-center space-x-2">
                <button
                  onClick={() => setModalType('receive-inflow')}
                  className="bg-emerald-600 hover:bg-emerald-700 text-white px-3.5 py-2 rounded-xl text-xs font-bold transition flex items-center space-x-1.5 shadow"
                >
                  <ArrowDownLeft className="w-4 h-4" />
                  <span>Terima Barang (FIFO Inflow)</span>
                </button>
                {currentUser.role !== 'gudang' && (
                  <button
                    onClick={() => setModalType('new-po')}
                    className="bg-blue-600 hover:bg-blue-700 text-white px-3.5 py-2 rounded-xl text-xs font-bold transition flex items-center space-x-1.5 shadow"
                  >
                    <Plus className="w-4 h-4" />
                    <span>Buat PO Supplier Baru</span>
                  </button>
                )}
              </div>
            </div>

            <div className="bg-white rounded-2xl border border-slate-200 shadow-sm overflow-hidden">
              <div className="p-4 border-b border-slate-200 bg-slate-50/70 flex justify-between items-center text-xs">
                <span className="font-bold text-slate-800 uppercase tracking-wider">Daftar PO-PGS ke Pabrik Kimia</span>
                <span className="font-mono text-slate-500">Rumus: PO-PGS/[Supplier]/[Romawi]-[Tgl]/[Tahun]/[No]</span>
              </div>
              <div className="overflow-x-auto">
                <table className="w-full text-left text-xs text-slate-600">
                  <thead className="bg-slate-50 text-slate-700 font-semibold border-b border-slate-200 text-[11px]">
                    <tr>
                      <th className="py-3 px-4">No. PO Resmi</th>
                      <th className="py-3 px-4">Tanggal</th>
                      <th className="py-3 px-4">Supplier</th>
                      <th className="py-3 px-4">Barang & Volume</th>
                      <th className="py-3 px-4 text-right">Total (+11% PPN)</th>
                      <th className="py-3 px-4 text-center">Status</th>
                      <th className="py-3 px-4 text-center">Aksi Dokumen</th>
                    </tr>
                  </thead>
                  <tbody className="divide-y divide-slate-100 font-medium">
                    {supplierPOs.map((po) => (
                      <tr key={po.id} className="hover:bg-slate-50 transition-colors">
                        <td className="py-3 px-4 font-mono font-bold text-blue-700">{po.poNumber}</td>
                        <td className="py-3 px-4 text-slate-500">{po.date}</td>
                        <td className="py-3 px-4 font-bold text-slate-800">{po.supplier}</td>
                        <td className="py-3 px-4">
                          <div className="font-semibold text-slate-900">{po.chemName}</div>
                          <div className="text-[10px] text-slate-500">{po.packageCount} Kemasan ({po.totalKg} Kg)</div>
                        </td>
                        <td className="py-3 px-4 text-right font-mono font-bold text-slate-900">{formatRp(po.grandTotal)}</td>
                        <td className="py-3 px-4 text-center">
                          <span className="px-2 py-0.5 rounded-full text-[10px] font-bold bg-emerald-100 text-emerald-800">{po.status}</span>
                        </td>
                        <td className="py-3 px-4 text-center">
                          <button
                            onClick={() => setPrintDoc({ type: 'po', data: po })}
                            className="px-2.5 py-1.5 rounded-lg border border-slate-300 bg-white hover:bg-slate-100 text-slate-700 font-semibold text-xs flex items-center space-x-1 mx-auto"
                          >
                            <Printer className="w-3.5 h-3.5 text-slate-500" />
                            <span>Cetak A4</span>
                          </button>
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        )}

        {}
        {activeTab === 'sales' && currentUser.role !== 'gudang' && (
          <div className="space-y-5">
            <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
              <div>
                <h1 className="text-xl font-bold text-slate-900 flex items-center space-x-2">
                  <span>Penawaran Harga & Kunci Stok (Booked)</span>
                </h1>
                <p className="text-xs text-slate-500 mt-0.5">PO Customer Mengunci Free Stok • Mencegah Terjadinya Overselling Antartim Sales</p>
              </div>
              <button
                onClick={() => setModalType('new-quotation')}
                className="bg-blue-600 hover:bg-blue-700 text-white px-3.5 py-2 rounded-xl text-xs font-bold transition flex items-center space-x-1.5 shadow"
              >
                <Plus className="w-4 h-4" />
                <span>Buat Penawaran / Booking Baru</span>
              </button>
            </div>

            <div className="bg-white rounded-2xl border border-slate-200 shadow-sm overflow-hidden">
              <div className="p-4 border-b border-slate-200 bg-slate-50/70 flex justify-between items-center text-xs">
                <span className="font-bold text-slate-800 uppercase tracking-wider">Daftar Dokumen Penawaran (Quo-PGS)</span>
                <span className="font-mono text-slate-500">Rumus: Quo-PGS/[Customer]/[Romawi]-[Tgl]/[Tahun]/[No]</span>
              </div>
              <div className="overflow-x-auto">
                <table className="w-full text-left text-xs text-slate-600">
                  <thead className="bg-slate-50 text-slate-700 font-semibold border-b border-slate-200 text-[11px]">
                    <tr>
                      <th className="py-3 px-4">No. Penawaran</th>
                      <th className="py-3 px-4">Customer & PO Ref</th>
                      <th className="py-3 px-4">Komoditas Kimia</th>
                      <th className="py-3 px-4 text-right">Kuantiti Booked</th>
                      <th className="py-3 px-4 text-center">Status Stok</th>
                      <th className="py-3 px-4 text-center">Tindakan Logistik</th>
                    </tr>
                  </thead>
                  <tbody className="divide-y divide-slate-100 font-medium">
                    {quotations.map((quo) => (
                      <tr key={quo.id} className="hover:bg-slate-50 transition-colors">
                        <td className="py-3 px-4 font-mono font-bold text-blue-700">{quo.quoNumber}</td>
                        <td className="py-3 px-4">
                          <div className="font-bold text-slate-900">{quo.customer}</div>
                          <div className="text-[10px] text-slate-500">Ref: {quo.customerPO}</div>
                        </td>
                        <td className="py-3 px-4">
                          <div className="font-semibold text-slate-900">{quo.chemName}</div>
                          <div className="text-[10px] text-slate-400">{quo.packageCount} Wadah ({quo.totalKg} Kg)</div>
                        </td>
                        <td className="py-3 px-4 text-right font-mono font-bold text-amber-600">{quo.totalKg} Kg</td>
                        <td className="py-3 px-4 text-center">
                          <span className={`px-2 py-0.5 rounded-full text-[10px] font-bold ${quo.status === 'Shipped' ? 'bg-emerald-100 text-emerald-800' : 'bg-amber-100 text-amber-800'}`}>
                            {quo.status === 'Shipped' ? 'Surat Jalan Terbit' : 'Terkunci (Booked)'}
                          </span>
                        </td>
                        <td className="py-3 px-4 text-center">
                          {quo.dispatchId ? (
                            <span className="text-[11px] text-emerald-700 font-bold">Surat Jalan Terbit</span>
                          ) : (
                            <button
                              onClick={() => {
                                setActiveQuoForDispatch(quo);
                                setModalType('dispatch-deliveree');
                              }}
                              className="px-2.5 py-1.5 bg-blue-600 hover:bg-blue-700 text-white rounded-lg font-semibold text-xs inline-flex items-center space-x-1"
                            >
                              <Truck className="w-3.5 h-3.5" />
                              <span>Dispatch Deliveree</span>
                            </button>
                          )}
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        )}

        {}
        {activeTab === 'deliveree' && (
          <div className="space-y-5">
            <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
              <div>
                <h1 className="text-xl font-bold text-slate-900 flex items-center space-x-2">
                  <span>Dispatch Deliveree & Surat Jalan Continuous Form</span>
                </h1>
                <p className="text-xs text-slate-500 mt-0.5">
                  Potong Stok Fisik FIFO saat Validasi Muat • Rekap POD Manual Teks (Tanpa File Upload) • Cetak Khusus EPSON LX-300+
                </p>
              </div>
            </div>

            <div className="bg-white rounded-2xl border border-slate-200 shadow-sm overflow-hidden">
              <div className="p-4 border-b border-slate-200 bg-slate-50/70 flex justify-between items-center text-xs">
                <span className="font-bold text-slate-800 uppercase tracking-wider">Antrean Surat Jalan & Ekspedisi Deliveree</span>
                <span className="font-mono text-slate-500">Rumus: SJ-PGS/[Customer]/[Romawi]-[Tgl]/[Tahun]/[No]</span>
              </div>
              <div className="overflow-x-auto">
                <table className="w-full text-left text-xs text-slate-600">
                  <thead className="bg-slate-50 text-slate-700 font-semibold border-b border-slate-200 text-[11px]">
                    <tr>
                      <th className="py-3 px-4">No. Surat Jalan</th>
                      <th className="py-3 px-4">Customer & PO</th>
                      <th className="py-3 px-4">Armada & Supir</th>
                      <th className="py-3 px-4">Barang & Volume</th>
                      <th className="py-3 px-4 text-center">Status Kirim</th>
                      <th className="py-3 px-4">Konfirmasi POD Manual</th>
                      <th className="py-3 px-4 text-center">Aksi / Cetak</th>
                    </tr>
                  </thead>
                  <tbody className="divide-y divide-slate-100 font-medium">
                    {dispatches.map((dsp) => (
                      <tr key={dsp.id} className="hover:bg-slate-50 transition-colors">
                        <td className="py-3 px-4 font-mono font-bold text-blue-700">{dsp.sjNumber}</td>
                        <td className="py-3 px-4">
                          <div className="font-bold text-slate-900">{dsp.customer}</div>
                          <div className="text-[10px] text-slate-400">PO: {dsp.customerPO}</div>
                        </td>
                        <td className="py-3 px-4">
                          <div className="font-semibold text-slate-800">{dsp.driverName}</div>
                          <div className="text-[10px] text-slate-500">{dsp.nopol} • Telp: {dsp.driverPhone}</div>
                        </td>
                        <td className="py-3 px-4">
                          <div className="font-semibold text-slate-900">{dsp.chemName}</div>
                          <div className="text-[10px] text-slate-400">{dsp.packageCount} {dsp.packageType} ({dsp.totalKg} Kg)</div>
                        </td>
                        <td className="py-3 px-4 text-center">
                          <span
                            className={`px-2 py-0.5 rounded-full text-[10px] font-bold ${
                              dsp.status === 'Delivered'
                                ? 'bg-emerald-100 text-emerald-800'
                                : 'bg-blue-100 text-blue-800'
                            }`}
                          >
                            {dsp.status}
                          </span>
                        </td>
                        <td className="py-3 px-4 text-xs">
                          {dsp.status === 'Delivered' ? (
                            <div>
                              <div className="font-bold text-emerald-700">Diterima: {dsp.podReceiver}</div>
                              <div className="text-[10px] text-slate-400">{dsp.podCompletionTime}</div>
                            </div>
                          ) : (
                            <button
                              onClick={() => {
                                setActiveDispatchForPod(dsp);
                                setModalType('confirm-pod');
                              }}
                              className="px-2.5 py-1 bg-amber-50 text-amber-800 hover:bg-amber-100 border border-amber-300 rounded-lg text-xs font-semibold"
                            >
                              Rekap POD Teks
                            </button>
                          )}
                        </td>
                        <td className="py-3 px-4 text-center space-x-1 whitespace-nowrap">
                          <button
                            onClick={() => setPrintDoc({ type: 'sj', data: dsp })}
                            className="px-2.5 py-1.5 rounded-lg border border-slate-300 bg-white hover:bg-slate-100 text-slate-700 font-semibold text-xs inline-flex items-center space-x-1"
                          >
                            <Printer className="w-3.5 h-3.5 text-slate-500" />
                            <span>Cetak NCR</span>
                          </button>
                          {dsp.status === 'Delivered' && !dsp.invoiceId && currentUser.role !== 'gudang' && (
                            <button
                              onClick={() => {
                                setActiveDispatchForInv(dsp);
                                setModalType('generate-invoice');
                              }}
                              className="px-2.5 py-1.5 bg-blue-600 hover:bg-blue-700 text-white rounded-lg font-semibold text-xs"
                            >
                              Terbitkan Invoice
                            </button>
                          )}
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        )}

        {}
        {activeTab === 'invoices' && currentUser.role !== 'gudang' && (
          <div className="space-y-5">
            <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
              <div>
                <h1 className="text-xl font-bold text-slate-900 flex items-center space-x-2">
                  <span>Invoicing & Faktur Pajak Ditjen Pajak</span>
                </h1>
                <p className="text-xs text-slate-500 mt-0.5">
                  Diterbitkan Otomatis dari Surat Jalan Selesai • PPN 11% • Rekening Resmi BCA 308-1962-888
                </p>
              </div>
            </div>

            <div className="bg-white rounded-2xl border border-slate-200 shadow-sm overflow-hidden">
              <div className="p-4 border-b border-slate-200 bg-slate-50/70 flex justify-between items-center text-xs">
                <span className="font-bold text-slate-800 uppercase tracking-wider">Rekapitulasi Tagihan Customer (INV-PGS)</span>
                <span className="font-mono text-slate-500">Rumus: INV-PGS/[Customer]/[Romawi]-[Tgl]/[Tahun]/[No]</span>
              </div>
              <div className="overflow-x-auto">
                <table className="w-full text-left text-xs text-slate-600">
                  <thead className="bg-slate-50 text-slate-700 font-semibold border-b border-slate-200 text-[11px]">
                    <tr>
                      <th className="py-3 px-4">No. Invoice Tagihan</th>
                      <th className="py-3 px-4">Ref. Surat Jalan</th>
                      <th className="py-3 px-4">Customer & Terms</th>
                      <th className="py-3 px-4">No. Faktur Pajak (16 Digit)</th>
                      <th className="py-3 px-4 text-right">Subtotal DPP</th>
                      <th className="py-3 px-4 text-right">Total (+11% PPN)</th>
                      <th className="py-3 px-4 text-center">Status</th>
                      <th className="py-3 px-4 text-center">Aksi / Cetak</th>
                    </tr>
                  </thead>
                  <tbody className="divide-y divide-slate-100 font-medium">
                    {invoices.map((inv) => (
                      <tr key={inv.id} className="hover:bg-slate-50 transition-colors">
                        <td className="py-3 px-4 font-mono font-bold text-blue-700">{inv.invNumber}</td>
                        <td className="py-3 px-4 font-mono text-slate-500">{inv.sjNumber}</td>
                        <td className="py-3 px-4">
                          <div className="font-bold text-slate-900">{inv.customer}</div>
                          <div className="text-[10px] text-slate-500">{inv.terms} • Jt. Tempo: {inv.dueDate}</div>
                        </td>
                        <td className="py-3 px-4 font-mono font-bold text-emerald-700">{inv.fakturPajak}</td>
                        <td className="py-3 px-4 text-right font-mono">{formatRp(inv.subtotal)}</td>
                        <td className="py-3 px-4 text-right font-mono font-bold text-slate-900">{formatRp(inv.grandTotal)}</td>
                        <td className="py-3 px-4 text-center">
                          <span className="px-2 py-0.5 rounded-full text-[10px] font-bold bg-amber-100 text-amber-800">{inv.status}</span>
                        </td>
                        <td className="py-3 px-4 text-center">
                          <button
                            onClick={() => setPrintDoc({ type: 'inv', data: inv })}
                            className="px-2.5 py-1.5 rounded-lg border border-slate-300 bg-white hover:bg-slate-100 text-slate-700 font-semibold text-xs flex items-center space-x-1 mx-auto"
                          >
                            <Printer className="w-3.5 h-3.5 text-slate-500" />
                            <span>Cetak A4</span>
                          </button>
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        )}

        {}
        {activeTab === 'logbook' && (
          <div className="space-y-5">
            <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
              <div>
                <h1 className="text-xl font-bold text-slate-900 flex items-center space-x-2">
                  <span>Buku Transaksi Harian Gudang (Audit Trail Gerbang)</span>
                </h1>
                <p className="text-xs text-slate-500 mt-0.5">Catatan Masuk & Keluar Fisik Gerbang Real-Time: Supir, Plat Nomor, dan Kondisi Kemasan</p>
              </div>
              <button
                onClick={() => setModalType('manual-log')}
                className="bg-blue-600 hover:bg-blue-700 text-white px-3.5 py-2 rounded-xl text-xs font-bold transition flex items-center space-x-1.5 shadow"
              >
                <Plus className="w-4 h-4" />
                <span>Catat Mutasi Gerbang</span>
              </button>
            </div>

            <div className="bg-white rounded-2xl border border-slate-200 shadow-sm overflow-hidden">
              <div className="overflow-x-auto">
                <table className="w-full text-left text-xs text-slate-600">
                  <thead className="bg-slate-50 text-slate-700 font-semibold border-b border-slate-200 text-[11px] uppercase">
                    <tr>
                      <th className="py-3 px-4">Tipe Mutasi</th>
                      <th className="py-3 px-4">Waktu Transaksi</th>
                      <th className="py-3 px-4">Armada & Supir</th>
                      <th className="py-3 px-4">Nama & Kode Barang</th>
                      <th className="py-3 px-4">Kuantiti Kemasan</th>
                      <th className="py-3 px-4">Catatan Kondisi Fisik</th>
                      <th className="py-3 px-4 text-center">Petugas</th>
                    </tr>
                  </thead>
                  <tbody className="divide-y divide-slate-100 font-medium">
                    {logbook.map((lg) => (
                      <tr key={lg.id} className="hover:bg-slate-50 transition-colors">
                        <td className="py-3 px-4">
                          <span className={`px-2 py-0.5 rounded text-[10px] font-bold ${lg.type === 'Stok in' ? 'bg-emerald-100 text-emerald-800' : 'bg-rose-100 text-rose-800'}`}>
                            {lg.type.toUpperCase()}
                          </span>
                        </td>
                        <td className="py-3 px-4 text-slate-500">{lg.time}</td>
                        <td className="py-3 px-4 font-bold text-slate-800">{lg.driverInfo}</td>
                        <td className="py-3 px-4 font-semibold text-slate-900">{lg.chemInfo}</td>
                        <td className="py-3 px-4 font-mono font-bold text-slate-700">{lg.qty}</td>
                        <td className="py-3 px-4 max-w-xs">{lg.condition}</td>
                        <td className="py-3 px-4 text-center text-slate-500">{lg.officer}</td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        )}
      </main>

      {}
      {selectedBatchChem && (
        <div className="fixed inset-0 z-50 bg-slate-900/60 backdrop-blur-sm flex items-center justify-center p-4">
          <div className="bg-white rounded-2xl max-w-2xl w-full max-h-[90vh] flex flex-col shadow-2xl border border-slate-200 overflow-hidden">
            <div className="p-5 border-b border-slate-200 flex items-center justify-between bg-slate-50">
              <div>
                <span className="text-xs font-mono font-bold bg-blue-100 text-blue-800 px-2 py-0.5 rounded border border-blue-200">
                  {selectedBatchChem.sku}
                </span>
                <h3 className="text-base font-bold text-slate-900 mt-1">{selectedBatchChem.name}</h3>
                <p className="text-xs text-slate-500">Kemasan: {selectedBatchChem.packageType} @ {selectedBatchChem.weightPerUnit} Kg • Asal: {selectedBatchChem.origin}</p>
              </div>
              <button onClick={() => setSelectedBatchChem(null)} className="text-slate-400 hover:text-slate-600 p-1.5 rounded-lg">
                <X className="w-5 h-5" />
              </button>
            </div>
            <div className="p-5 overflow-y-auto space-y-4">
              <div className="bg-blue-50 border border-blue-200 rounded-xl p-3 text-xs text-blue-900 flex items-start space-x-2">
                <ShieldCheck className="w-4 h-4 text-blue-600 mt-0.5 shrink-0" />
                <div>
                  <span className="font-bold">Prinsip Strict FIFO:</span> Pemotongan barang saat pengiriman Deliveree secara otomatis diprioritaskan dari nomor batch dengan tanggal penerimaan tertua terlebih dahulu.
                </div>
              </div>
              <div className="border border-slate-200 rounded-xl overflow-hidden">
                <table className="w-full text-left text-xs">
                  <thead className="bg-slate-100 text-slate-700 font-semibold border-b border-slate-200">
                    <tr>
                      <th className="py-2.5 px-3">No. Batch / Lot</th>
                      <th className="py-2.5 px-3">Tgl Masuk (Urutan FIFO)</th>
                      <th className="py-2.5 px-3">Expired Date</th>
                      <th className="py-2.5 px-3">Wadah</th>
                      <th className="py-2.5 px-3 text-right">Sisa Stok (Kg)</th>
                    </tr>
                  </thead>
                  <tbody className="divide-y divide-slate-100 font-medium">
                    {(selectedBatchChem.batches || []).map((b, idx) => (
                      <tr key={b.id} className="hover:bg-slate-50">
                        <td className="py-2.5 px-3 font-mono font-bold text-blue-700">{b.lotNumber}</td>
                        <td className="py-2.5 px-3">
                          {b.inflowDate} {idx === 0 && <span className="ml-1 text-[10px] bg-emerald-100 text-emerald-800 font-bold px-1.5 py-0.5 rounded">Prioritas #1</span>}
                        </td>
                        <td className="py-2.5 px-3 text-rose-600 font-semibold">{b.expDate}</td>
                        <td className="py-2.5 px-3">{b.pkgCount} Kemasan</td>
                        <td className="py-2.5 px-3 text-right font-bold text-slate-900">{b.remainingKg} Kg</td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            </div>
            <div className="p-4 border-t border-slate-200 bg-slate-50 flex justify-end">
              <button onClick={() => setSelectedBatchChem(null)} className="px-4 py-2 bg-slate-800 text-white rounded-xl text-xs font-semibold hover:bg-slate-700">
                Tutup Drill-Down
              </button>
            </div>
          </div>
        </div>
      )}

      {}
      {modalType === 'new-chemical' && (
        <div className="fixed inset-0 z-50 bg-slate-900/60 backdrop-blur-sm flex items-center justify-center p-4">
          <div className="bg-white rounded-2xl max-w-lg w-full max-h-[90vh] flex flex-col shadow-2xl border border-slate-200 overflow-hidden">
            <div className="p-5 border-b border-slate-200 flex items-center justify-between bg-slate-50">
              <div>
                <h3 className="text-base font-bold text-slate-900">Tambah Komoditas Bahan Kimia Baru</h3>
                <p className="text-xs text-slate-500">Penomoran SKU Cerdas Otomatis sesuai Kaidah Pratachem</p>
              </div>
              <button onClick={() => setModalType(null)} className="text-slate-400 hover:text-slate-600 p-1.5 rounded-lg">
                <X className="w-5 h-5" />
              </button>
            </div>
            <form
              onSubmit={(e) => {
                e.preventDefault();
                const form = e.target;
                const wh = form.wh.value;
                const cat = form.cat.value;
                const name = form.name.value.trim();
                const origin = form.origin.value.trim();
                const pkgType = form.pkgType.value;
                const weight = Number(form.weight.value);
                const price = Number(form.price.value);
                const seq = String(chemicals.length + 1).padStart(4, '0');
                const sku = `PR${wh}${cat}${seq}`;

                const newChem = {
                  id: 'chem-' + Date.now(),
                  sku,
                  warehouse: wh,
                  category: cat,
                  name,
                  origin,
                  form: form.chemForm.value,
                  packageType: pkgType,
                  weightPerUnit: weight,
                  pricePerKg: price,
                  bookedKg: 0,
                  batches: []
                };

                setChemicals([...chemicals, newChem]);
                setModalType(null);
                showToast(`Bahan kimia ${name} berhasil didaftarkan dengan SKU ${sku}`);
              }}
              className="p-5 overflow-y-auto space-y-4 text-xs"
            >
              <div className="grid grid-cols-2 gap-3">
                <div>
                  <label className="block font-semibold text-slate-700 mb-1">Gudang Simpan</label>
                  <select name="wh" className="w-full p-2.5 rounded-xl border border-slate-300 bg-white">
                    <option value="T">Tangerang (T) - Pondok Bahar</option>
                    <option value="C">Cikarang (C)</option>
                  </select>
                </div>
                <div>
                  <label className="block font-semibold text-slate-700 mb-1">Kategori Peruntukan</label>
                  <select name="cat" className="w-full p-2.5 rounded-xl border border-slate-300 bg-white">
                    <option value="F">Food Grade (F)</option>
                    <option value="I">Industrial Grade (I)</option>
                  </select>
                </div>
              </div>

              <div>
                <label className="block font-semibold text-slate-700 mb-1">Nama Bahan Baku Kimia</label>
                <input name="name" required placeholder="Contoh: Sodium Benzoate, Fructose, TCCA" className="w-full p-2.5 rounded-xl border border-slate-300" />
              </div>

              <div className="grid grid-cols-2 gap-3">
                <div>
                  <label className="block font-semibold text-slate-700 mb-1">Asal Produsen / Negara</label>
                  <input name="origin" required placeholder="Roquette France / Sinochem" className="w-full p-2.5 rounded-xl border border-slate-300" />
                </div>
                <div>
                  <label className="block font-semibold text-slate-700 mb-1">Bentuk Fisik</label>
                  <select name="chemForm" className="w-full p-2.5 rounded-xl border border-slate-300 bg-white">
                    <option value="Powder">Powder (Bubuk)</option>
                    <option value="Liquid">Liquid (Cair)</option>
                    <option value="Granular">Granular / Butiran</option>
                    <option value="Flakes">Flakes (Serpihan)</option>
                  </select>
                </div>
              </div>

              <div className="grid grid-cols-2 gap-3">
                <div>
                  <label className="block font-semibold text-slate-700 mb-1">Tipe Kemasan</label>
                  <select name="pkgType" className="w-full p-2.5 rounded-xl border border-slate-300 bg-white">
                    <option value="Zak">Zak</option>
                    <option value="Jerigen">Jerigen</option>
                    <option value="Drum">Drum</option>
                    <option value="Pail">Pail</option>
                    <option value="IBC Tank">IBC Tank</option>
                  </select>
                </div>
                <div>
                  <label className="block font-semibold text-slate-700 mb-1">Bobot Kemasan (@ Kg)</label>
                  <input name="weight" type="number" required defaultValue={25} min={1} className="w-full p-2.5 rounded-xl border border-slate-300" />
                </div>
              </div>

              <div>
                <label className="block font-semibold text-slate-700 mb-1">Estimasi Harga Jual Dasar / Kg (Rp)</label>
                <input name="price" type="number" required defaultValue={30000} min={1000} className="w-full p-2.5 rounded-xl border border-slate-300" />
              </div>

              <div className="pt-2 flex justify-end space-x-2">
                <button type="button" onClick={() => setModalType(null)} className="px-4 py-2 border border-slate-300 rounded-xl font-semibold hover:bg-slate-100">Batal</button>
                <button type="submit" className="px-4 py-2 bg-blue-600 text-white rounded-xl font-semibold hover:bg-blue-700">Simpan Komoditas</button>
              </div>
            </form>
          </div>
        </div>
      )}

      {}
      {modalType === 'receive-inflow' && (
        <div className="fixed inset-0 z-50 bg-slate-900/60 backdrop-blur-sm flex items-center justify-center p-4">
          <div className="bg-white rounded-2xl max-w-lg w-full max-h-[90vh] flex flex-col shadow-2xl border border-slate-200 overflow-hidden">
            <div className="p-5 border-b border-slate-200 flex items-center justify-between bg-slate-50">
              <div>
                <h3 className="text-base font-bold text-slate-900">Penerimaan Barang Masuk (Stok In)</h3>
                <p className="text-xs text-slate-500">Pencatatan Batch, Kadaluwarsa, dan Audit Fisik Gerbang</p>
              </div>
              <button onClick={() => setModalType(null)} className="text-slate-400 hover:text-slate-600 p-1.5 rounded-lg">
                <X className="w-5 h-5" />
              </button>
            </div>
            <form
              onSubmit={(e) => {
                e.preventDefault();
                const form = e.target;
                const chemId = form.chemId.value;
                const lot = form.lot.value.trim();
                const origin = form.origin.value.trim();
                const pkgCount = Number(form.pkgCount.value);
                const expDate = form.expDate.value;
                const driver = form.driver.value.trim();
                const condition = form.condition.value.trim();

                const targetChem = chemicals.find((c) => c.id === chemId);
                if (!targetChem) return;

                const addedKg = pkgCount * targetChem.weightPerUnit;
                const today = new Date().toISOString().split('T')[0];

                const newBatch = {
                  id: 'b-' + Date.now(),
                  lotNumber: lot,
                  origin,
                  inflowDate: today,
                  expDate,
                  pkgCount,
                  remainingKg: addedKg
                };

                const updatedChemicals = chemicals.map((c) => {
                  if (c.id === chemId) {
                    return {
                      ...c,
                      batches: [...(c.batches || []), newBatch]
                    };
                  }
                  return c;
                });

                const newLog = {
                  id: 'log-' + Date.now(),
                  type: 'Stok in',
                  time: new Date().toLocaleString('id-ID'),
                  driverInfo: driver,
                  chemInfo: `${targetChem.name} (${targetChem.sku})`,
                  qty: `${pkgCount} ${targetChem.packageType} (${addedKg} Kg)`,
                  condition,
                  officer: currentUser.name
                };

                setChemicals(updatedChemicals);
                setLogbook([newLog, ...logbook]);
                setModalType(null);
                showToast(`Berhasil menerima ${addedKg} Kg ${targetChem.name} ke Batch FIFO`);
              }}
              className="p-5 overflow-y-auto space-y-4 text-xs"
            >
              <div>
                <label className="block font-semibold text-slate-700 mb-1">Pilih Komoditas Bahan Kimia</label>
                <select name="chemId" required className="w-full p-2.5 rounded-xl border border-slate-300 bg-white">
                  {chemicals.map((c) => (
                    <option key={c.id} value={c.id}>{c.name} ({c.sku})</option>
                  ))}
                </select>
              </div>

              <div className="grid grid-cols-2 gap-3">
                <div>
                  <label className="block font-semibold text-slate-700 mb-1">Nomor Lot / Batch Pabrik</label>
                  <input name="lot" required placeholder="LOT-2026-991" className="w-full p-2.5 rounded-xl border border-slate-300" />
                </div>
                <div>
                  <label className="block font-semibold text-slate-700 mb-1">Produsen / Asal</label>
                  <input name="origin" required placeholder="Roquette France" className="w-full p-2.5 rounded-xl border border-slate-300" />
                </div>
              </div>

              <div className="grid grid-cols-2 gap-3">
                <div>
                  <label className="block font-semibold text-slate-700 mb-1">Jumlah Wadah / Kemasan</label>
                  <input name="pkgCount" type="number" required defaultValue={20} min={1} className="w-full p-2.5 rounded-xl border border-slate-300" />
                </div>
                <div>
                  <label className="block font-semibold text-slate-700 mb-1">Tanggal Kadaluwarsa</label>
                  <input name="expDate" type="date" required defaultValue="2028-12-31" className="w-full p-2.5 rounded-xl border border-slate-300" />
                </div>
              </div>

              <div className="bg-amber-50 border border-amber-200 rounded-xl p-3 space-y-2">
                <div className="font-bold text-amber-900 flex items-center space-x-1.5">
                  <Truck className="w-4 h-4 text-amber-700" />
                  <span>Audit Gerbang & Fisik Barang (PRD Aturan 2):</span>
                </div>
                <input name="driver" required placeholder="Nama Supir & Plat Nomor (e.g. Andi - B 2020 TOR)" className="w-full p-2 rounded-lg border border-amber-300 bg-white" />
                <input name="condition" required placeholder="Kondisi Wadah: Segel utuh, bersih, lolos uji QC fisik" className="w-full p-2 rounded-lg border border-amber-300 bg-white" />
                <p className="text-[11px] text-amber-800 italic">*COA & MSDS diverifikasi fisik langsung di gudang tanpa upload file server.</p>
              </div>

              <div className="pt-2 flex justify-end space-x-2">
                <button type="button" onClick={() => setModalType(null)} className="px-4 py-2 border border-slate-300 rounded-xl font-semibold hover:bg-slate-100">Batal</button>
                <button type="submit" className="px-4 py-2 bg-emerald-600 text-white rounded-xl font-semibold hover:bg-emerald-700">Simpan Batch Inflow</button>
              </div>
            </form>
          </div>
        </div>
      )}

      {}
      {modalType === 'new-po' && (
        <div className="fixed inset-0 z-50 bg-slate-900/60 backdrop-blur-sm flex items-center justify-center p-4">
          <div className="bg-white rounded-2xl max-w-lg w-full max-h-[90vh] flex flex-col shadow-2xl border border-slate-200 overflow-hidden">
            <div className="p-5 border-b border-slate-200 flex items-center justify-between bg-slate-50">
              <div>
                <h3 className="text-base font-bold text-slate-900">Penerbitan PO Resmi ke Supplier</h3>
                <p className="text-xs text-slate-500">Pilih Supplier Rekanan • Format PO-PGS Cetak Canon MG2500</p>
              </div>
              <button onClick={() => setModalType(null)} className="text-slate-400 hover:text-slate-600 p-1.5 rounded-lg">
                <X className="w-5 h-5" />
              </button>
            </div>
            <form
              onSubmit={(e) => {
                e.preventDefault();
                const form = e.target;
                const suppName = form.suppName.value;
                const chemId = form.chemId.value;
                const count = Number(form.count.value);
                const price = Number(form.price.value);

                const chem = chemicals.find((c) => c.id === chemId);
                if (!chem) return;

                const totalKg = count * chem.weightPerUnit;
                const subtotal = totalKg * price;
                const ppn = Math.round(subtotal * 0.11);
                const grandTotal = subtotal + ppn;

                const poNumber = generateDocNumber('PO', suppName);
                const today = new Date().toISOString().split('T')[0];

                const newPO = {
                  id: 'po-' + Date.now(),
                  poNumber,
                  date: today,
                  supplier: suppName,
                  chemId,
                  chemName: chem.name,
                  packageCount: count,
                  totalKg,
                  pricePerKg: price,
                  subtotal,
                  ppn,
                  grandTotal,
                  status: 'Received'
                };

                setSupplierPOs([newPO, ...supplierPOs]);
                setModalType(null);
                showToast(`PO ${poNumber} berhasil diterbitkan`);
              }}
              className="p-5 overflow-y-auto space-y-4 text-xs"
            >
              <div>
                <label className="block font-semibold text-slate-700 mb-1">Pilih Supplier Rekanan</label>
                <select name="suppName" required className="w-full p-2.5 rounded-xl border border-slate-300 bg-white">
                  {suppliers.map((s) => (
                    <option key={s.id} value={s.name}>{s.name}</option>
                  ))}
                </select>
                <p className="text-[10px] text-slate-500 mt-1">Admin hanya memilih nama supplier (profil internal tetap terlindungi)</p>
              </div>

              <div>
                <label className="block font-semibold text-slate-700 mb-1">Pilih Komoditas Kimia</label>
                <select name="chemId" required className="w-full p-2.5 rounded-xl border border-slate-300 bg-white">
                  {chemicals.map((c) => (
                    <option key={c.id} value={c.id}>{c.name} ({c.sku})</option>
                  ))}
                </select>
              </div>

              <div className="grid grid-cols-2 gap-3">
                <div>
                  <label className="block font-semibold text-slate-700 mb-1">Jumlah Kemasan</label>
                  <input name="count" type="number" required defaultValue={40} min={1} className="w-full p-2.5 rounded-xl border border-slate-300" />
                </div>
                <div>
                  <label className="block font-semibold text-slate-700 mb-1">Harga Beli / Kg (Rp)</label>
                  <input name="price" type="number" required defaultValue={28000} min={1000} className="w-full p-2.5 rounded-xl border border-slate-300" />
                </div>
              </div>

              <div className="p-3 bg-slate-50 rounded-xl border border-slate-200 text-slate-600 space-y-1">
                <div className="flex justify-between">
                  <span>Pajak Pertambahan Nilai:</span>
                  <span className="font-bold text-slate-800">PPN 11%</span>
                </div>
                <div className="flex justify-between">
                  <span>Alamat Kirim:</span>
                  <span className="font-semibold text-slate-800">Gudang Pondok Bahar, Tangerang</span>
                </div>
              </div>

              <div className="pt-2 flex justify-end space-x-2">
                <button type="button" onClick={() => setModalType(null)} className="px-4 py-2 border border-slate-300 rounded-xl font-semibold hover:bg-slate-100">Batal</button>
                <button type="submit" className="px-4 py-2 bg-blue-600 text-white rounded-xl font-semibold hover:bg-blue-700">Terbitkan PO-PGS</button>
              </div>
            </form>
          </div>
        </div>
      )}

      {}
      {modalType === 'new-quotation' && (
        <div className="fixed inset-0 z-50 bg-slate-900/60 backdrop-blur-sm flex items-center justify-center p-4">
          <div className="bg-white rounded-2xl max-w-lg w-full max-h-[90vh] flex flex-col shadow-2xl border border-slate-200 overflow-hidden">
            <div className="p-5 border-b border-slate-200 flex items-center justify-between bg-slate-50">
              <div>
                <h3 className="text-base font-bold text-slate-900">Penawaran & Penguncian Stok (Booked)</h3>
                <p className="text-xs text-slate-500">Mencegah Overselling • Otomatis Mengurangi Free Stok</p>
              </div>
              <button onClick={() => setModalType(null)} className="text-slate-400 hover:text-slate-600 p-1.5 rounded-lg">
                <X className="w-5 h-5" />
              </button>
            </div>
            <form
              onSubmit={(e) => {
                e.preventDefault();
                const form = e.target;
                const custId = form.custId.value;
                const custPO = form.custPO.value.trim();
                const chemId = form.chemId.value;
                const count = Number(form.count.value);
                const price = Number(form.price.value);
                const top = form.top.value;
                const address = form.address.value.trim();

                const targetCust = customers.find((c) => c.id === custId);
                const targetChem = chemicals.find((c) => c.id === chemId);
                if (!targetCust || !targetChem) return;

                const requestedKg = count * targetChem.weightPerUnit;
                const physicalKg = (targetChem.batches || []).reduce((acc, b) => acc + (Number(b.remainingKg) || 0), 0);
                const freeKg = Math.max(0, physicalKg - (targetChem.bookedKg || 0));

                if (requestedKg > freeKg) {
                  triggerDialog(
                    'Kuantiti Melebihi Stok Bebas',
                    `Free Stok tidak cukup! Tersedia ${freeKg} Kg, sedangkan pesanan meminta ${requestedKg} Kg.`
                  );
                  return;
                }

                const updatedChemicals = chemicals.map((c) => {
                  if (c.id === chemId) {
                    return { ...c, bookedKg: (c.bookedKg || 0) + requestedKg };
                  }
                  return c;
                });

                const quoNumber = generateDocNumber('Quo', targetCust.name);
                const today = new Date().toISOString().split('T')[0];

                const newQuo = {
                  id: 'quo-' + Date.now(),
                  quoNumber,
                  date: today,
                  customer: targetCust.name,
                  customerId: custId,
                  customerPO: custPO,
                  chemId,
                  chemName: targetChem.name,
                  packageCount: count,
                  totalKg: requestedKg,
                  pricePerKg: price,
                  terms: top,
                  address,
                  status: 'Booked',
                  dispatchId: null
                };

                setChemicals(updatedChemicals);
                setQuotations([newQuo, ...quotations]);
                setModalType(null);
                showToast(`Booking ${requestedKg} Kg berhasil untuk ${targetCust.name}`);
              }}
              className="p-5 overflow-y-auto space-y-4 text-xs"
            >
              <div className="grid grid-cols-2 gap-3">
                <div>
                  <label className="block font-semibold text-slate-700 mb-1">Pilih Customer</label>
                  <select name="custId" required className="w-full p-2.5 rounded-xl border border-slate-300 bg-white">
                    {customers.map((c) => (
                      <option key={c.id} value={c.id}>{c.name}</option>
                    ))}
                  </select>
                </div>
                <div>
                  <label className="block font-semibold text-slate-700 mb-1">Nomor PO Customer</label>
                  <input name="custPO" required placeholder="PO-CUST/2026/099" className="w-full p-2.5 rounded-xl border border-slate-300" />
                </div>
              </div>

              <div>
                <label className="block font-semibold text-slate-700 mb-1">Pilih Komoditas Kimia</label>
                <select name="chemId" required className="w-full p-2.5 rounded-xl border border-slate-300 bg-white">
                  {chemicals.map((c) => (
                    <option key={c.id} value={c.id}>{c.name} ({c.sku})</option>
                  ))}
                </select>
              </div>

              <div className="grid grid-cols-2 gap-3">
                <div>
                  <label className="block font-semibold text-slate-700 mb-1">Jumlah Kemasan</label>
                  <input name="count" type="number" required defaultValue={10} min={1} className="w-full p-2.5 rounded-xl border border-slate-300" />
                </div>
                <div>
                  <label className="block font-semibold text-slate-700 mb-1">Harga Jual / Kg (Rp)</label>
                  <input name="price" type="number" required defaultValue={35000} min={1000} className="w-full p-2.5 rounded-xl border border-slate-300" />
                </div>
              </div>

              <div className="grid grid-cols-2 gap-3">
                <div>
                  <label className="block font-semibold text-slate-700 mb-1">Terms of Payment</label>
                  <select name="top" className="w-full p-2.5 rounded-xl border border-slate-300 bg-white">
                    <option value="Cash / CBD">Cash Before Delivery (CBD)</option>
                    <option value="TOP 14 Hari">TOP 14 Hari</option>
                    <option value="TOP 30 Hari">TOP 30 Hari</option>
                  </select>
                </div>
                <div>
                  <label className="block font-semibold text-slate-700 mb-1">Alamat Kirim</label>
                  <input name="address" required placeholder="Kawasan Industri Jatake, Tangerang" className="w-full p-2.5 rounded-xl border border-slate-300" />
                </div>
              </div>

              <div className="pt-2 flex justify-end space-x-2">
                <button type="button" onClick={() => setModalType(null)} className="px-4 py-2 border border-slate-300 rounded-xl font-semibold hover:bg-slate-100">Batal</button>
                <button type="submit" className="px-4 py-2 bg-blue-600 text-white rounded-xl font-semibold hover:bg-blue-700">Kunci Stok & Terbitkan Quo</button>
              </div>
            </form>
          </div>
        </div>
      )}

      {}
      {modalType === 'dispatch-deliveree' && activeQuoForDispatch && (
        <div className="fixed inset-0 z-50 bg-slate-900/60 backdrop-blur-sm flex items-center justify-center p-4">
          <div className="bg-white rounded-2xl max-w-lg w-full max-h-[90vh] flex flex-col shadow-2xl border border-slate-200 overflow-hidden">
            <div className="p-5 border-b border-slate-200 flex items-center justify-between bg-slate-50">
              <div>
                <h3 className="text-base font-bold text-slate-900">Dispatch Deliveree & Potong Stok FIFO</h3>
                <p className="text-xs text-slate-500">Mencocokkan Identitas Armada dan Mengurangi Lapisan Batch Tertua</p>
              </div>
              <button onClick={() => setModalType(null)} className="text-slate-400 hover:text-slate-600 p-1.5 rounded-lg">
                <X className="w-5 h-5" />
              </button>
            </div>
            <form
              onSubmit={(e) => {
                e.preventDefault();
                const form = e.target;
                const driverName = form.driverName.value.trim();
                const driverPhone = form.driverPhone.value.trim();
                const nopol = form.nopol.value.trim();
                const pickupTime = form.pickupTime.value;

                const quo = activeQuoForDispatch;
                const targetChem = chemicals.find((c) => c.id === quo.chemId);
                if (!targetChem) return;

                let remainingToDeduct = quo.totalKg;
                const updatedBatches = (targetChem.batches || []).map((b) => {
                  if (remainingToDeduct <= 0) return b;
                  const availableInBatch = Number(b.remainingKg) || 0;
                  if (availableInBatch <= remainingToDeduct) {
                    remainingToDeduct -= availableInBatch;
                    return { ...b, remainingKg: 0 };
                  } else {
                    const newRem = availableInBatch - remainingToDeduct;
                    remainingToDeduct = 0;
                    return { ...b, remainingKg: newRem };
                  }
                }).filter((b) => b.remainingKg > 0);

                const updatedChemicals = chemicals.map((c) => {
                  if (c.id === targetChem.id) {
                    return {
                      ...c,
                      bookedKg: Math.max(0, (c.bookedKg || 0) - quo.totalKg),
                      batches: updatedBatches
                    };
                  }
                  return c;
                });

                const sjNumber = generateDocNumber('SJ', quo.customer);
                const newDispatch = {
                  id: 'sj-' + Date.now(),
                  sjNumber,
                  quoId: quo.id,
                  customer: quo.customer,
                  customerPO: quo.customerPO,
                  chemId: quo.chemId,
                  chemName: quo.chemName,
                  packageCount: quo.packageCount,
                  packageType: targetChem.packageType,
                  totalKg: quo.totalKg,
                  address: quo.address,
                  driverName,
                  driverPhone,
                  nopol,
                  pickupTime,
                  status: 'Shipped',
                  podReceiver: null,
                  podCompletionTime: null,
                  podNotes: null,
                  invoiceId: null
                };

                const updatedQuotations = quotations.map((q) => {
                  if (q.id === quo.id) {
                    return { ...q, dispatchId: newDispatch.id, status: 'Shipped' };
                  }
                  return q;
                });

                const newLog = {
                  id: 'log-' + Date.now(),
                  type: 'Stok out',
                  time: new Date().toLocaleString('id-ID'),
                  driverInfo: `${driverName} (${nopol})`,
                  chemInfo: `${quo.chemName} (${targetChem.sku})`,
                  qty: `${quo.packageCount} ${targetChem.packageType} (${quo.totalKg} Kg)`,
                  condition: 'Muat selesai, segel utuh, lolos gerbang ekspedisi Deliveree',
                  officer: currentUser.name
                };

                setChemicals(updatedChemicals);
                setQuotations(updatedQuotations);
                setDispatches([newDispatch, ...dispatches]);
                setLogbook([newLog, ...logbook]);
                setModalType(null);
                showToast(`Surat Jalan ${sjNumber} terbit. Stok fisik FIFO berhasil dipotong.`);
              }}
              className="p-5 overflow-y-auto space-y-4 text-xs"
            >
              <div className="bg-slate-50 p-3 rounded-xl border border-slate-200 space-y-1">
                <div className="font-bold text-slate-800">{activeQuoForDispatch.customer}</div>
                <div className="text-slate-600">Ref PO: {activeQuoForDispatch.customerPO}</div>
                <div className="font-mono text-blue-700 font-bold">{activeQuoForDispatch.chemName} - {activeQuoForDispatch.totalKg} Kg</div>
              </div>

              <div>
                <label className="block font-semibold text-slate-700 mb-1">Nama Supir Deliveree</label>
                <input name="driverName" required placeholder="Septian (CDE Deliveree)" className="w-full p-2.5 rounded-xl border border-slate-300" />
              </div>

              <div className="grid grid-cols-2 gap-3">
                <div>
                  <label className="block font-semibold text-slate-700 mb-1">Nomor Handphone Supir</label>
                  <input name="driverPhone" required placeholder="0812-9988-7711" className="w-full p-2.5 rounded-xl border border-slate-300" />
                </div>
                <div>
                  <label className="block font-semibold text-slate-700 mb-1">Nomor Polisi (Plat Mobil)</label>
                  <input name="nopol" required placeholder="B 1583 VOR" className="w-full p-2.5 rounded-xl border border-slate-300" />
                </div>
              </div>

              <div>
                <label className="block font-semibold text-slate-700 mb-1">Estimasi Jam Muat di Gudang</label>
                <input name="pickupTime" type="datetime-local" required defaultValue="2026-09-26T10:00" className="w-full p-2.5 rounded-xl border border-slate-300" />
              </div>

              <div className="p-3 bg-blue-50 border border-blue-200 rounded-xl text-blue-950 space-y-1">
                <div className="font-bold flex items-center space-x-1.5">
                  <CheckCircle2 className="w-4 h-4 text-blue-600" />
                  <span>Validasi Eksekusi Muat:</span>
                </div>
                <p className="text-[11px] text-blue-900 leading-relaxed">
                  Menekan tombol di bawah akan langsung memotong stok fisik gudang secara permanen pada layer batch penerimaan tertua (FIFO).
                </p>
              </div>

              <div className="pt-2 flex justify-end space-x-2">
                <button type="button" onClick={() => setModalType(null)} className="px-4 py-2 border border-slate-300 rounded-xl font-semibold hover:bg-slate-100">Batal</button>
                <button type="submit" className="px-4 py-2 bg-blue-600 text-white rounded-xl font-semibold hover:bg-blue-700">Validasi Muat (Shipped)</button>
              </div>
            </form>
          </div>
        </div>
      )}

      {}
      {modalType === 'confirm-pod' && activeDispatchForPod && (
        <div className="fixed inset-0 z-50 bg-slate-900/60 backdrop-blur-sm flex items-center justify-center p-4">
          <div className="bg-white rounded-2xl max-w-md w-full shadow-2xl border border-slate-200 overflow-hidden">
            <div className="p-5 border-b border-slate-200 flex items-center justify-between bg-slate-50">
              <div>
                <h3 className="text-base font-bold text-slate-900">Rekap Selesai Pengiriman (POD Teks)</h3>
                <p className="text-xs text-slate-500">Aturan PRD: Murni Pencatatan Manual Tanpa Upload File</p>
              </div>
              <button onClick={() => setModalType(null)} className="text-slate-400 hover:text-slate-600 p-1.5 rounded-lg">
                <X className="w-5 h-5" />
              </button>
            </div>
            <form
              onSubmit={(e) => {
                e.preventDefault();
                const form = e.target;
                const receiver = form.receiver.value.trim();
                const compTime = form.compTime.value;
                const notes = form.notes.value.trim();

                const updatedDispatches = dispatches.map((d) => {
                  if (d.id === activeDispatchForPod.id) {
                    return {
                      ...d,
                      status: 'Delivered',
                      podReceiver: receiver,
                      podCompletionTime: compTime,
                      podNotes: notes
                    };
                  }
                  return d;
                });

                setDispatches(updatedDispatches);
                setModalType(null);
                showToast(`Pengiriman ${activeDispatchForPod.sjNumber} berhasil ditandai selesai`);
              }}
              className="p-5 space-y-4 text-xs"
            >
              <div>
                <label className="block font-semibold text-slate-700 mb-1">Nama Penerima Barang di Pabrik Customer</label>
                <input name="receiver" required placeholder="Bpk. Herman (Warehouse Head)" className="w-full p-2.5 rounded-xl border border-slate-300" />
              </div>

              <div>
                <label className="block font-semibold text-slate-700 mb-1">Tanggal & Waktu Selesai Bongkar</label>
                <input name="compTime" type="datetime-local" required defaultValue="2026-09-26T14:30" className="w-full p-2.5 rounded-xl border border-slate-300" />
              </div>

              <div>
                <label className="block font-semibold text-slate-700 mb-1">Catatan Penerimaan Fisik (Opsional)</label>
                <input name="notes" placeholder="Diterima segel utuh, lolos uji QC pabrik" className="w-full p-2.5 rounded-xl border border-slate-300" />
              </div>

              <div className="pt-2 flex justify-end space-x-2">
                <button type="button" onClick={() => setModalType(null)} className="px-4 py-2 border border-slate-300 rounded-xl font-semibold hover:bg-slate-100">Batal</button>
                <button type="submit" className="px-4 py-2 bg-emerald-600 text-white rounded-xl font-semibold hover:bg-emerald-700">Tandai Pengiriman Selesai</button>
              </div>
            </form>
          </div>
        </div>
      )}

      {}
      {modalType === 'generate-invoice' && activeDispatchForInv && (
        <div className="fixed inset-0 z-50 bg-slate-900/60 backdrop-blur-sm flex items-center justify-center p-4">
          <div className="bg-white rounded-2xl max-w-lg w-full max-h-[90vh] flex flex-col shadow-2xl border border-slate-200 overflow-hidden">
            <div className="p-5 border-b border-slate-200 flex items-center justify-between bg-slate-50">
              <div>
                <h3 className="text-base font-bold text-slate-900">Terbitkan Invoice & Faktur Pajak 16 Digit</h3>
                <p className="text-xs text-slate-500">Standar Ditjen Pajak • Cetak Rekening Resmi BCA 308-1962-888</p>
              </div>
              <button onClick={() => setModalType(null)} className="text-slate-400 hover:text-slate-600 p-1.5 rounded-lg">
                <X className="w-5 h-5" />
              </button>
            </div>
            <form
              onSubmit={(e) => {
                e.preventDefault();
                const form = e.target;
                const faktur = form.faktur.value.trim();
                const top = form.top.value;
                const dueDate = form.dueDate.value;

                const dsp = activeDispatchForInv;
                const quo = quotations.find((q) => q.id === dsp.quoId);
                const price = quo ? quo.pricePerKg : 30000;

                const subtotal = dsp.totalKg * price;
                const ppn = Math.round(subtotal * 0.11);
                const grandTotal = subtotal + ppn;

                const invNumber = generateDocNumber('INV', dsp.customer);
                const today = new Date().toISOString().split('T')[0];

                const newInvoice = {
                  id: 'inv-' + Date.now(),
                  invNumber,
                  dispatchId: dsp.id,
                  sjNumber: dsp.sjNumber,
                  customer: dsp.customer,
                  customerPO: dsp.customerPO,
                  date: today,
                  dueDate,
                  terms: top,
                  totalKg: dsp.totalKg,
                  pricePerKg: price,
                  subtotal,
                  ppn,
                  grandTotal,
                  fakturPajak: faktur,
                  status: 'Unpaid'
                };

                const updatedDispatches = dispatches.map((d) => {
                  if (d.id === dsp.id) {
                    return { ...d, invoiceId: newInvoice.id };
                  }
                  return d;
                });

                setDispatches(updatedDispatches);
                setInvoices([newInvoice, ...invoices]);
                setModalType(null);
                showToast(`Invoice ${invNumber} dengan e-Faktur ${faktur} berhasil diterbitkan`);
              }}
              className="p-5 overflow-y-auto space-y-4 text-xs"
            >
              <div className="bg-slate-50 p-3 rounded-xl border border-slate-200 space-y-1">
                <div className="flex justify-between font-bold text-slate-800">
                  <span>{activeDispatchForInv.customer}</span>
                  <span className="font-mono text-blue-700">{activeDispatchForInv.sjNumber}</span>
                </div>
                <div className="text-slate-600">Barang: {activeDispatchForInv.chemName} ({activeDispatchForInv.totalKg} Kg)</div>
              </div>

              <div>
                <label className="block font-semibold text-slate-700 mb-1">Nomor Faktur Pajak Elektronik (Standar Ditjen Pajak 16 Digit)</label>
                <input
                  name="faktur"
                  required
                  placeholder="010.002-26.12345678"
                  defaultValue="010.002-26.12345678"
                  className="w-full p-2.5 rounded-xl border border-slate-300 font-mono text-xs"
                />
                <p className="text-[10px] text-slate-500 mt-1">Format resmi e-Faktur: 16 Digit angka</p>
              </div>

              <div className="grid grid-cols-2 gap-3">
                <div>
                  <label className="block font-semibold text-slate-700 mb-1">Terms of Payment (TOP)</label>
                  <input name="top" required defaultValue="TOP 30 Hari" className="w-full p-2.5 rounded-xl border border-slate-300" />
                </div>
                <div>
                  <label className="block font-semibold text-slate-700 mb-1">Tanggal Jatuh Tempo</label>
                  <input name="dueDate" type="date" required defaultValue="2026-10-26" className="w-full p-2.5 rounded-xl border border-slate-300" />
                </div>
              </div>

              <div className="text-[11px] text-slate-600 bg-blue-50/70 p-3 rounded-xl border border-blue-200">
                Rekening Pembayaran: <strong>Bank BCA 308-1962-888</strong> a/n <strong>PT. PRATACHEM GLOBALINDO SUKSES</strong>
              </div>

              <div className="pt-2 flex justify-end space-x-2">
                <button type="button" onClick={() => setModalType(null)} className="px-4 py-2 border border-slate-300 rounded-xl font-semibold hover:bg-slate-100">Batal</button>
                <button type="submit" className="px-4 py-2 bg-blue-600 text-white rounded-xl font-semibold hover:bg-blue-700">Terbitkan Invoice Resmi</button>
              </div>
            </form>
          </div>
        </div>
      )}

      {}
      {modalType === 'new-customer' && (
        <div className="fixed inset-0 z-50 bg-slate-900/60 backdrop-blur-sm flex items-center justify-center p-4">
          <div className="bg-white rounded-2xl max-w-lg w-full max-h-[90vh] flex flex-col shadow-2xl border border-slate-200 overflow-hidden">
            <div className="p-5 border-b border-slate-200 flex items-center justify-between bg-slate-50">
              <div>
                <h3 className="text-base font-bold text-slate-900">Registrasi Master Customer (Pelanggan)</h3>
                <p className="text-xs text-slate-500">Plafon Piutang & Identitas Resmi Faktur Pajak</p>
              </div>
              <button onClick={() => setModalType(null)} className="text-slate-400 hover:text-slate-600 p-1.5 rounded-lg">
                <X className="w-5 h-5" />
              </button>
            </div>
            <form
              onSubmit={(e) => {
                e.preventDefault();
                const form = e.target;
                const newC = {
                  id: 'cust-' + Date.now(),
                  name: form.name.value.trim().toUpperCase(),
                  address: form.address.value.trim(),
                  npwp: form.npwp.value.trim(),
                  pic: form.pic.value.trim(),
                  responsible: form.responsible.value.trim(),
                  top: form.top.value,
                  creditLimit: Number(form.creditLimit.value),
                  emailFinance: form.emailFinance.value.trim(),
                  phoneFinance: form.phoneFinance.value.trim()
                };
                setCustomers([...customers, newC]);
                setModalType(null);
                showToast(`Customer ${newC.name} berhasil disimpan`);
              }}
              className="p-5 overflow-y-auto space-y-3.5 text-xs"
            >
              <div>
                <label className="block font-semibold text-slate-700 mb-1">Nama Perusahaan (Uppercase)</label>
                <input name="name" required placeholder="PT. PANGAN SEJAHTERA ABADI" className="w-full p-2.5 rounded-xl border border-slate-300 uppercase" />
              </div>

              <div>
                <label className="block font-semibold text-slate-700 mb-1">Alamat Lengkap Perusahaan</label>
                <textarea name="address" required rows={2} placeholder="Kawasan Industri MM2100, Cikarang Barat, Bekasi" className="w-full p-2.5 rounded-xl border border-slate-300" />
              </div>

              <div className="grid grid-cols-2 gap-3">
                <div>
                  <label className="block font-semibold text-slate-700 mb-1">NPWP (16 Digit Pajak)</label>
                  <input name="npwp" required placeholder="01.234.567.8-012.000" className="w-full p-2.5 rounded-xl border border-slate-300 font-mono" />
                </div>
                <div>
                  <label className="block font-semibold text-slate-700 mb-1">Term of Payment</label>
                  <select name="top" className="w-full p-2.5 rounded-xl border border-slate-300 bg-white">
                    <option value="Cash / CBD">Cash Before Delivery (CBD)</option>
                    <option value="TOP 14 Hari">TOP 14 Hari</option>
                    <option value="TOP 30 Hari">TOP 30 Hari</option>
                  </select>
                </div>
              </div>

              <div className="grid grid-cols-2 gap-3">
                <div>
                  <label className="block font-semibold text-slate-700 mb-1">PIC Pembelian</label>
                  <input name="pic" required placeholder="Bpk. Hendra" className="w-full p-2.5 rounded-xl border border-slate-300" />
                </div>
                <div>
                  <label className="block font-semibold text-slate-700 mb-1">Penanggung Jawab (Direksi)</label>
                  <input name="responsible" required placeholder="Ibu Melissa (Direktur)" className="w-full p-2.5 rounded-xl border border-slate-300" />
                </div>
              </div>

              <div className="grid grid-cols-2 gap-3">
                <div>
                  <label className="block font-semibold text-slate-700 mb-1">Plafon Piutang (Credit Limit Rp)</label>
                  <input name="creditLimit" type="number" required defaultValue={200000000} className="w-full p-2.5 rounded-xl border border-slate-300 font-mono" />
                </div>
                <div>
                  <label className="block font-semibold text-slate-700 mb-1">No. HP Finance</label>
                  <input name="phoneFinance" required placeholder="0812-8899-7766" className="w-full p-2.5 rounded-xl border border-slate-300" />
                </div>
              </div>

              <div>
                <label className="block font-semibold text-slate-700 mb-1">Email Finance Tagihan</label>
                <input name="emailFinance" type="email" required placeholder="finance@customer.com" className="w-full p-2.5 rounded-xl border border-slate-300" />
              </div>

              <div className="pt-2 flex justify-end space-x-2">
                <button type="button" onClick={() => setModalType(null)} className="px-4 py-2 border border-slate-300 rounded-xl font-semibold hover:bg-slate-100">Batal</button>
                <button type="submit" className="px-4 py-2 bg-blue-600 text-white rounded-xl font-semibold hover:bg-blue-700">Simpan Customer</button>
              </div>
            </form>
          </div>
        </div>
      )}

      {}
      {modalType === 'new-supplier' && currentUser.role === 'management' && (
        <div className="fixed inset-0 z-50 bg-slate-900/60 backdrop-blur-sm flex items-center justify-center p-4">
          <div className="bg-white rounded-2xl max-w-lg w-full max-h-[90vh] flex flex-col shadow-2xl border border-slate-200 overflow-hidden">
            <div className="p-5 border-b border-slate-200 flex items-center justify-between bg-amber-50">
              <div className="flex items-center space-x-2">
                <Lock className="w-5 h-5 text-amber-600" />
                <div>
                  <h3 className="text-base font-bold text-amber-950">Tambah Supplier Baru (Rahasia Dagang)</h3>
                  <p className="text-xs text-amber-700">Khusus Manajemen Pratachem</p>
                </div>
              </div>
              <button onClick={() => setModalType(null)} className="text-slate-400 hover:text-slate-600 p-1.5 rounded-lg">
                <X className="w-5 h-5" />
              </button>
            </div>
            <form
              onSubmit={(e) => {
                e.preventDefault();
                const form = e.target;
                const newS = {
                  id: 'supp-' + Date.now(),
                  name: form.name.value.trim().toUpperCase(),
                  address: form.address.value.trim(),
                  npwp: form.npwp.value.trim(),
                  pic: form.pic.value.trim(),
                  responsible: form.responsible.value.trim(),
                  top: form.top.value,
                  emailFinance: form.emailFinance.value.trim(),
                  phoneFinance: form.phoneFinance.value.trim()
                };
                setSuppliers([...suppliers, newS]);
                setModalType(null);
                showToast(`Supplier ${newS.name} berhasil disimpan secara aman`);
              }}
              className="p-5 overflow-y-auto space-y-3.5 text-xs"
            >
              <div>
                <label className="block font-semibold text-slate-700 mb-1">Nama Pabrik / Supplier (Uppercase)</label>
                <input name="name" required placeholder="SINOCHEM HEBEI CO., LTD." className="w-full p-2.5 rounded-xl border border-slate-300 uppercase" />
              </div>

              <div>
                <label className="block font-semibold text-slate-700 mb-1">Alamat Kantor / Pabrik</label>
                <textarea name="address" required rows={2} placeholder="Shijiazhuang, Hebei, China" className="w-full p-2.5 rounded-xl border border-slate-300" />
              </div>

              <div className="grid grid-cols-2 gap-3">
                <div>
                  <label className="block font-semibold text-slate-700 mb-1">NPWP Pemasok</label>
                  <input name="npwp" required placeholder="02.345.678.9-033.000" className="w-full p-2.5 rounded-xl border border-slate-300 font-mono" />
                </div>
                <div>
                  <label className="block font-semibold text-slate-700 mb-1">Term of Payment</label>
                  <select name="top" className="w-full p-2.5 rounded-xl border border-slate-300 bg-white">
                    <option value="Cash Advance / T/T">Cash Advance / T/T</option>
                    <option value="TOP 30 Hari">TOP 30 Hari</option>
                    <option value="TOP 60 Hari (LC)">TOP 60 Hari (LC)</option>
                  </select>
                </div>
              </div>

              <div className="grid grid-cols-2 gap-3">
                <div>
                  <label className="block font-semibold text-slate-700 mb-1">PIC Sales Representative</label>
                  <input name="pic" required placeholder="Mr. Chen Wei" className="w-full p-2.5 rounded-xl border border-slate-300" />
                </div>
                <div>
                  <label className="block font-semibold text-slate-700 mb-1">Penanggung Jawab Vendor</label>
                  <input name="responsible" required placeholder="Dr. Li Qiang" className="w-full p-2.5 rounded-xl border border-slate-300" />
                </div>
              </div>

              <div className="grid grid-cols-2 gap-3">
                <div>
                  <label className="block font-semibold text-slate-700 mb-1">Email Finance Vendor</label>
                  <input name="emailFinance" type="email" required placeholder="export.finance@vendor.com" className="w-full p-2.5 rounded-xl border border-slate-300" />
                </div>
                <div>
                  <label className="block font-semibold text-slate-700 mb-1">No. HP / WA Finance</label>
                  <input name="phoneFinance" required placeholder="+86 311 8899 1122" className="w-full p-2.5 rounded-xl border border-slate-300" />
                </div>
              </div>

              <div className="pt-2 flex justify-end space-x-2">
                <button type="button" onClick={() => setModalType(null)} className="px-4 py-2 border border-slate-300 rounded-xl font-semibold hover:bg-slate-100">Batal</button>
                <button type="submit" className="px-4 py-2 bg-amber-600 text-white rounded-xl font-semibold hover:bg-amber-700">Simpan Supplier Rahasia</button>
              </div>
            </form>
          </div>
        </div>
      )}

      {}
      {modalType === 'manual-log' && (
        <div className="fixed inset-0 z-50 bg-slate-900/60 backdrop-blur-sm flex items-center justify-center p-4">
          <div className="bg-white rounded-2xl max-w-md w-full shadow-2xl border border-slate-200 overflow-hidden">
            <div className="p-5 border-b border-slate-200 flex items-center justify-between bg-slate-50">
              <div>
                <h3 className="text-base font-bold text-slate-900">Catat Log Gerbang Gudang Manual</h3>
                <p className="text-xs text-slate-500">Kesesuaian Fisik Armada & Integritas Kemasan</p>
              </div>
              <button onClick={() => setModalType(null)} className="text-slate-400 hover:text-slate-600 p-1.5 rounded-lg">
                <X className="w-5 h-5" />
              </button>
            </div>
            <form
              onSubmit={(e) => {
                e.preventDefault();
                const form = e.target;
                const newLog = {
                  id: 'log-' + Date.now(),
                  type: form.logType.value,
                  time: new Date().toLocaleString('id-ID'),
                  driverInfo: form.driver.value.trim(),
                  chemInfo: form.chem.value.trim(),
                  qty: form.qty.value.trim(),
                  condition: form.condition.value.trim(),
                  officer: currentUser.name
                };
                setLogbook([newLog, ...logbook]);
                setModalType(null);
                showToast('Catatan gerbang manual berhasil ditambahkan');
              }}
              className="p-5 space-y-3.5 text-xs"
            >
              <div>
                <label className="block font-semibold text-slate-700 mb-1">Tipe Mutasi Gerbang</label>
                <select name="logType" className="w-full p-2.5 rounded-xl border border-slate-300 bg-white">
                  <option value="Stok in">Stok in (Barang Masuk / Pembongkaran)</option>
                  <option value="Stok out">Stok out (Barang Keluar / Pemuatan)</option>
                </select>
              </div>

              <div>
                <label className="block font-semibold text-slate-700 mb-1">Nama Supir & Plat Kendaraan</label>
                <input name="driver" required placeholder="Andi (B 2020 TOR)" className="w-full p-2.5 rounded-xl border border-slate-300" />
              </div>

              <div>
                <label className="block font-semibold text-slate-700 mb-1">Identitas Barang</label>
                <input name="chem" required placeholder="Fructose High Corn Syrup 55% (PRTF0002)" className="w-full p-2.5 rounded-xl border border-slate-300" />
              </div>

              <div>
                <label className="block font-semibold text-slate-700 mb-1">Kuantiti & Wadah</label>
                <input name="qty" required placeholder="20 Jerigen (500 Kg)" className="w-full p-2.5 rounded-xl border border-slate-300" />
              </div>

              <div>
                <label className="block font-semibold text-slate-700 mb-1">Catatan Kondisi Fisik</label>
                <input name="condition" required placeholder="Segel rapat, tidak ada kebocoran atau kerusakan kemasan" className="w-full p-2.5 rounded-xl border border-slate-300" />
              </div>

              <div className="pt-2 flex justify-end space-x-2">
                <button type="button" onClick={() => setModalType(null)} className="px-4 py-2 border border-slate-300 rounded-xl font-semibold hover:bg-slate-100">Batal</button>
                <button type="submit" className="px-4 py-2 bg-blue-600 text-white rounded-xl font-semibold hover:bg-blue-700">Simpan Logbook</button>
              </div>
            </form>
          </div>
        </div>
      )}

      {}
      {modalType === 'supabase' && (
        <div className="fixed inset-0 z-50 bg-slate-900/60 backdrop-blur-sm flex items-center justify-center p-4">
          <div className="bg-white rounded-2xl max-w-2xl w-full max-h-[90vh] flex flex-col shadow-2xl border border-slate-200 overflow-hidden">
            <div className="p-5 border-b border-slate-200 flex items-center justify-between bg-slate-50">
              <div>
                <h3 className="text-base font-bold text-slate-900">Koneksi Supabase Tokyo (AWS ap-northeast-1)</h3>
                <p className="text-xs text-slate-500">PRD Bab 01 & 11 • Biaya Operasional Bulanan Rp0 (Gratis Selamanya)</p>
              </div>
              <button onClick={() => setModalType(null)} className="text-slate-400 hover:text-slate-600 p-1.5 rounded-lg">
                <X className="w-5 h-5" />
              </button>
            </div>
            <div className="p-5 overflow-y-auto space-y-4 text-xs">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
                <div>
                  <label className="block font-semibold text-slate-700 mb-1">Supabase Project URL</label>
                  <input
                    value={supabaseConfig.url}
                    onChange={(e) => setSupabaseConfig({ ...supabaseConfig, url: e.target.value })}
                    placeholder="https://abcdefghijkl.supabase.co"
                    className="w-full p-2.5 rounded-xl border border-slate-300 font-mono text-xs"
                  />
                </div>
                <div>
                  <label className="block font-semibold text-slate-700 mb-1">Supabase Anon Public API Key</label>
                  <input
                    value={supabaseConfig.anonKey}
                    onChange={(e) => setSupabaseConfig({ ...supabaseConfig, anonKey: e.target.value })}
                    placeholder="eyJhbGciOiJIUzI1NiIsInR5cCI6..."
                    className="w-full p-2.5 rounded-xl border border-slate-300 font-mono text-xs"
                  />
                </div>
              </div>

              <div className="flex items-center justify-between bg-emerald-50 p-3 rounded-xl border border-emerald-200">
                <span className="font-semibold text-emerald-900">Status Database Cloud Tokyo:</span>
                <span className="px-2.5 py-1 rounded-full text-xs font-bold bg-emerald-100 text-emerald-800">
                  Terhubung & Sinkron Aktif
                </span>
              </div>

              <div className="bg-blue-50 border border-blue-200 rounded-xl p-3 text-blue-900 space-y-1">
                <div className="font-bold">Keamanan Data Terjamin:</div>
                <p className="text-[11px] text-blue-800 leading-relaxed">
                  Data database tersimpan aman di Supabase PostgreSQL Tokyo. Seluruh catatan transaksi perusahaan tidak akan pernah hilang meskipun domain web mengalami kendala.
                </p>
              </div>
            </div>
            <div className="p-4 border-t border-slate-200 bg-slate-50 flex justify-end">
              <button
                onClick={() => {
                  setModalType(null);
                  showToast('Konfigurasi Supabase berhasil diperbarui');
                }}
                className="px-4 py-2 bg-blue-600 text-white rounded-xl text-xs font-semibold hover:bg-blue-700"
              >
                Tutup Pengaturan
              </button>
            </div>
          </div>
        </div>
      )}

      {}
      {printDoc && (
        <div className="fixed inset-0 z-50 bg-slate-900/80 backdrop-blur-sm flex items-center justify-center p-4">
          <div className="bg-white rounded-2xl max-w-4xl w-full max-h-[95vh] flex flex-col shadow-2xl border border-slate-200 overflow-hidden">
            <div className="p-4 border-b border-slate-200 flex items-center justify-between bg-slate-100">
              <div className="flex items-center space-x-2">
                <Printer className="w-5 h-5 text-slate-700" />
                <div>
                  <h3 className="text-sm font-bold text-slate-900">
                    {printDoc.type === 'sj'
                      ? 'Format Cetak EPSON LX-300+ Continuous Form NCR (8.23 in x 5.47 in)'
                      : printDoc.type === 'po'
                      ? 'Format Cetak Canon MG2500 HVS A4 - Purchase Order Resmi'
                      : 'Format Cetak Canon MG2500 HVS A4 - Invoice & Faktur Pajak'}
                  </h3>
                  <p className="text-[11px] text-slate-500">Hardware Target: EPSON LX-300+ & Canon MG2500</p>
                </div>
              </div>
              <div className="flex items-center space-x-2">
                <button
                  onClick={() => window.print()}
                  className="px-4 py-1.5 bg-blue-600 hover:bg-blue-700 text-white font-bold text-xs rounded-xl shadow flex items-center space-x-1"
                >
                  <Printer className="w-4 h-4" />
                  <span>Kirim ke Mesin Printer</span>
                </button>
                <button onClick={() => setPrintDoc(null)} className="text-slate-400 hover:text-slate-600 p-1.5 rounded-lg">
                  <X className="w-5 h-5" />
                </button>
              </div>
            </div>

            <div className="p-6 overflow-y-auto bg-slate-200 flex justify-center">
              {printDoc.type === 'sj' && (
                <div className="bg-white text-black p-6 border border-black shadow-lg font-mono text-[11px] leading-tight w-[790px] min-h-[525px]">
                  <div className="border-b border-black pb-2 mb-3 flex justify-between">
                    <div>
                      <div className="text-sm font-bold tracking-tight">PT. PRATACHEM GLOBALINDO SUKSES</div>
                      <div>Chemical Raw Materials Trading & Distribution</div>
                      <div>Grand Slipi Tower Lt. 9, Jl. S. Parman, Jakarta Barat</div>
                      <div>Telp: (021) 5366-8888 • Email: sales@pratachem.com</div>
                    </div>
                    <div className="text-right">
                      <div className="text-base font-bold underline">SURAT JALAN PENGIRIMAN</div>
                      <div className="font-bold">NO: {printDoc.data.sjNumber}</div>
                      <div>Tgl: {new Date().toLocaleDateString('id-ID')}</div>
                    </div>
                  </div>

                  <div className="grid grid-cols-2 gap-4 border border-black p-2 mb-3">
                    <div>
                      <div className="font-bold">KEPADA YTH:</div>
                      <div className="text-xs font-bold">{printDoc.data.customer}</div>
                      <div>Alamat Kirim: {printDoc.data.address}</div>
                      <div>Ref PO Cust: {printDoc.data.customerPO}</div>
                    </div>
                    <div>
                      <div className="font-bold">EKSPEDISI / ARMADA PENGIRIM:</div>
                      <div>Penyedia: Deliveree Online Trucking</div>
                      <div>Nama Supir: {printDoc.data.driverName}</div>
                      <div>No. Polisi Plat: {printDoc.data.nopol}</div>
                      <div>No. Telp Supir: {printDoc.data.driverPhone}</div>
                    </div>
                  </div>

                  <table className="w-full border-collapse border border-black text-left mb-6">
                    <thead>
                      <tr className="border-b border-black font-bold text-[11px]">
                        <th className="border-r border-black p-1.5 w-8 text-center">NO</th>
                        <th className="border-r border-black p-1.5">NAMA BAHAN BAKU KIMIA</th>
                        <th className="border-r border-black p-1.5 text-center">WADAH</th>
                        <th className="p-1.5 text-right w-28">BERAT (KG)</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr className="border-b border-black">
                        <td className="border-r border-black p-2 text-center">1</td>
                        <td className="border-r border-black p-2 font-bold">{printDoc.data.chemName}</td>
                        <td className="border-r border-black p-2 text-center">{printDoc.data.packageCount} {printDoc.data.packageType}</td>
                        <td className="p-2 text-right font-bold">{printDoc.data.totalKg} Kg</td>
                      </tr>
                    </tbody>
                  </table>

                  <div className="text-[10px] mb-4">
                    * Catatan: Mohon periksa segel dan kondisi fisik barang saat diterima. Klaim setelah supir meninggalkan lokasi tidak berlaku.
                  </div>

                  <div className="grid grid-cols-3 gap-2 text-center border-t border-black pt-2">
                    <div>
                      <div>Pengirim (Gudang PGS):</div>
                      <div className="h-14"></div>
                      <div className="border-t border-black inline-block px-6">({currentUser.name})</div>
                    </div>
                    <div>
                      <div>Supir Ekspedisi:</div>
                      <div className="h-14"></div>
                      <div className="border-t border-black inline-block px-6">({printDoc.data.driverName})</div>
                    </div>
                    <div>
                      <div>Tanda Terima Customer:</div>
                      <div className="h-14"></div>
                      <div className="border-t border-black inline-block px-6">(Nama Jelas & Cap Pabrik)</div>
                    </div>
                  </div>
                </div>
              )}

              {printDoc.type === 'po' && (
                <div className="bg-white text-slate-900 p-8 shadow-lg font-sans text-xs w-[750px] min-h-[950px] border border-slate-300">
                  <div className="flex justify-between items-start border-b-2 border-slate-900 pb-4 mb-5">
                    <div>
                      <h1 className="text-xl font-black text-blue-900 tracking-tight">PT. PRATACHEM GLOBALINDO SUKSES</h1>
                      <p className="text-slate-600 text-[11px]">Industrial & Food Chemical Raw Materials</p>
                      <p className="text-slate-500 text-[10px]">Grand Slipi Tower Lt. 9, Jakarta Barat • Telp: (021) 5366-8888</p>
                    </div>
                    <div className="text-right">
                      <span className="text-lg font-black text-slate-800 block">PURCHASE ORDER</span>
                      <span className="font-mono font-bold text-blue-700">{printDoc.data.poNumber}</span>
                      <div className="text-slate-500 text-[11px]">Tanggal: {printDoc.data.date}</div>
                    </div>
                  </div>

                  <div className="grid grid-cols-2 gap-4 p-3 bg-slate-50 rounded-xl border border-slate-200 mb-5">
                    <div>
                      <span className="text-slate-400 font-semibold block uppercase text-[10px]">Pemasok / Vendor:</span>
                      <span className="font-bold text-slate-900 text-sm">{printDoc.data.supplier}</span>
                      <span className="text-slate-600 block">Status: Vendor Rekanan Resmi</span>
                    </div>
                    <div>
                      <span className="text-slate-400 font-semibold block uppercase text-[10px]">Alamat Pengiriman (Gudang):</span>
                      <span className="font-bold text-slate-900">Gudang Pratachem - Pondok Bahar</span>
                      <span className="text-slate-600 block">Jl. H. Mansyur, Tangerang, Banten</span>
                    </div>
                  </div>

                  <table className="w-full text-left border border-slate-200 mb-6">
                    <thead className="bg-slate-100 border-b border-slate-200 font-bold">
                      <tr>
                        <th className="p-2.5">Deskripsi Komoditas</th>
                        <th className="p-2.5 text-center">Kuantiti</th>
                        <th className="p-2.5 text-right">Harga / Kg</th>
                        <th className="p-2.5 text-right">Subtotal</th>
                      </tr>
                    </thead>
                    <tbody className="divide-y divide-slate-100">
                      <tr>
                        <td className="p-3 font-bold text-slate-900">{printDoc.data.chemName}</td>
                        <td className="p-3 text-center">{printDoc.data.packageCount} Kemasan ({printDoc.data.totalKg} Kg)</td>
                        <td className="p-3 text-right font-mono">{formatRp(printDoc.data.pricePerKg)}</td>
                        <td className="p-3 text-right font-mono font-bold">{formatRp(printDoc.data.subtotal)}</td>
                      </tr>
                    </tbody>
                  </table>

                  <div className="flex justify-end mb-8">
                    <div className="w-64 space-y-1.5 text-xs">
                      <div className="flex justify-between">
                        <span>Subtotal DPP:</span>
                        <span className="font-mono font-semibold">{formatRp(printDoc.data.subtotal)}</span>
                      </div>
                      <div className="flex justify-between text-slate-600">
                        <span>PPN 11%:</span>
                        <span className="font-mono font-semibold">{formatRp(printDoc.data.ppn)}</span>
                      </div>
                      <div className="flex justify-between border-t border-slate-300 pt-1 font-bold text-sm text-blue-900">
                        <span>Grand Total:</span>
                        <span className="font-mono">{formatRp(printDoc.data.grandTotal)}</span>
                      </div>
                    </div>
                  </div>

                  <div className="p-3 bg-amber-50 border border-amber-200 rounded-xl text-amber-950 text-xs mb-8">
                    <strong>Catatan Operasional Gudang:</strong> Harap menyertakan COA (Certificate of Analysis) dan MSDS fisik pada saat serah terima barang di Gudang Tangerang.
                  </div>

                  <div className="grid grid-cols-2 gap-8 text-center pt-4">
                    <div>
                      <div>Diterima & Disetujui Vendor:</div>
                      <div className="h-16"></div>
                      <div className="border-t border-slate-400 inline-block px-10 font-bold">({printDoc.data.supplier})</div>
                    </div>
                    <div>
                      <div>Hormat Kami,</div>
                      <div className="font-bold">PT. Pratachem Globalindo Sukses</div>
                      <div className="h-12"></div>
                      <div className="border-t border-slate-400 inline-block px-10 font-bold">Cia Liu (Assistant Director)</div>
                    </div>
                  </div>
                </div>
              )}

              {printDoc.type === 'inv' && (
                <div className="bg-white text-slate-900 p-8 shadow-lg font-sans text-xs w-[750px] min-h-[950px] border border-slate-300">
                  <div className="flex justify-between items-start border-b-2 border-blue-900 pb-4 mb-5">
                    <div>
                      <h1 className="text-xl font-black text-blue-900 tracking-tight">PT. PRATACHEM GLOBALINDO SUKSES</h1>
                      <p className="text-slate-600 text-[11px]">Chemical Raw Materials Trading & Export</p>
                      <p className="text-slate-500 text-[10px]">Grand Slipi Tower Lt. 9, Jakarta Barat • Telp: (021) 5366-8888</p>
                    </div>
                    <div className="text-right">
                      <span className="text-lg font-black text-slate-800 block">FAKTUR PENJUALAN</span>
                      <span className="font-mono font-bold text-blue-700">{printDoc.data.invNumber}</span>
                      <div className="text-slate-500 text-[11px]">Tanggal: {printDoc.data.date}</div>
                    </div>
                  </div>

                  <div className="grid grid-cols-2 gap-4 p-3 bg-slate-50 rounded-xl border border-slate-200 mb-5">
                    <div>
                      <span className="text-slate-400 font-semibold block uppercase text-[10px]">Tagihan Ditujukan Kepada:</span>
                      <span className="font-bold text-slate-900 text-sm">{printDoc.data.customer}</span>
                      <span className="text-slate-600 block">Ref PO Cust: {printDoc.data.customerPO}</span>
                      <span className="text-slate-600 block">Ref Surat Jalan: {printDoc.data.sjNumber}</span>
                    </div>
                    <div>
                      <span className="text-slate-400 font-semibold block uppercase text-[10px]">Ketentuan Pajak & Pembayaran:</span>
                      <span className="font-bold text-emerald-800 font-mono block">e-Faktur: {printDoc.data.fakturPajak}</span>
                      <span className="text-slate-700 block">Terms: {printDoc.data.terms}</span>
                      <span className="text-rose-600 font-bold block">Jatuh Tempo: {printDoc.data.dueDate}</span>
                    </div>
                  </div>

                  <table className="w-full text-left border border-slate-200 mb-6">
                    <thead className="bg-slate-100 border-b border-slate-200 font-bold">
                      <tr>
                        <th className="p-2.5">Keterangan Barang</th>
                        <th className="p-2.5 text-center">Volume (Kg)</th>
                        <th className="p-2.5 text-right">Harga Satuan</th>
                        <th className="p-2.5 text-right">Total DPP</th>
                      </tr>
                    </thead>
                    <tbody className="divide-y divide-slate-100">
                      <tr>
                        <td className="p-3 font-bold text-slate-900">{printDoc.data.chemName || 'Bahan Kimia Industri / Food Grade'}</td>
                        <td className="p-3 text-center">{printDoc.data.totalKg} Kg</td>
                        <td className="p-3 text-right font-mono">{formatRp(printDoc.data.pricePerKg)}</td>
                        <td className="p-3 text-right font-mono font-bold">{formatRp(printDoc.data.subtotal)}</td>
                      </tr>
                    </tbody>
                  </table>

                  <div className="flex justify-end mb-6">
                    <div className="w-64 space-y-1.5 text-xs">
                      <div className="flex justify-between">
                        <span>Dasar Pengenaan Pajak (DPP):</span>
                        <span className="font-mono font-semibold">{formatRp(printDoc.data.subtotal)}</span>
                      </div>
                      <div className="flex justify-between text-slate-600">
                        <span>PPN Ditjen Pajak 11%:</span>
                        <span className="font-mono font-semibold">{formatRp(printDoc.data.ppn)}</span>
                      </div>
                      <div className="flex justify-between border-t border-slate-300 pt-1 font-bold text-sm text-blue-900">
                        <span>Total Tagihan:</span>
                        <span className="font-mono">{formatRp(printDoc.data.grandTotal)}</span>
                      </div>
                    </div>
                  </div>

                  <div className="p-3 bg-blue-50 border border-blue-200 rounded-xl text-xs text-slate-800 mb-8 space-y-1">
                    <div className="font-bold text-blue-950">Instruksi Pembayaran Resmi:</div>
                    <div>Pembayaran mohon ditransfer penuh ke rekening resmi perusahaan:</div>
                    <div className="font-mono font-bold text-blue-900 text-sm">Bank Central Asia (BCA) - No. Rekening: 308-1962-888</div>
                    <div>Atas Nama: <strong>PT. PRATACHEM GLOBALINDO SUKSES</strong></div>
                  </div>

                  <div className="flex justify-between text-center pt-4">
                    <div className="text-left text-slate-400 text-[10px]">
                      Dokumen tagihan ini sah dan diproses otomatis oleh ERP Pratachem.
                    </div>
                    <div>
                      <div>Jakarta, {printDoc.data.date}</div>
                      <div className="font-bold">PT. PRATACHEM GLOBALINDO SUKSES</div>
                      <div className="h-14"></div>
                      <div className="border-t border-slate-400 inline-block px-8 font-bold">(Finance & Accounting)</div>
                    </div>
                  </div>
                </div>
              )}
            </div>
          </div>
        </div>
      )}

      {}
      {appDialog && (
        <div className="fixed inset-0 z-50 bg-slate-950/70 backdrop-blur-sm flex items-center justify-center p-4">
          <div className="bg-white rounded-2xl max-w-sm w-full p-5 shadow-2xl border border-slate-200 space-y-4">
            <div className="flex items-start space-x-3">
              <div className={`w-10 h-10 rounded-xl flex items-center justify-center shrink-0 ${
                appDialog.isConfirm ? 'bg-amber-50 text-amber-600' : 'bg-blue-50 text-blue-600'
              }`}>
                {appDialog.isConfirm ? <HelpCircle className="w-5 h-5" /> : <Info className="w-5 h-5" />}
              </div>
              <div>
                <h3 className="font-bold text-slate-900 text-sm">{appDialog.title}</h3>
                <p className="text-xs text-slate-600 mt-1">{appDialog.message}</p>
              </div>
            </div>
            <div className="flex justify-end space-x-2 pt-2">
              {appDialog.isConfirm ? (
                <>
                  <button
                    type="button"
                    onClick={closeDialog}
                    className="px-3.5 py-1.5 border border-slate-300 rounded-xl text-xs font-semibold hover:bg-slate-100 text-slate-700"
                  >
                    Batal
                  </button>
                  <button
                    type="button"
                    onClick={() => {
                      if (typeof appDialog.onConfirm === 'function') {
                        appDialog.onConfirm();
                      }
                      closeDialog();
                    }}
                    className="px-3.5 py-1.5 bg-blue-600 hover:bg-blue-700 text-white rounded-xl text-xs font-semibold shadow"
                  >
                    Konfirmasi
                  </button>
                </>
              ) : (
                <button
                  type="button"
                  onClick={closeDialog}
                  className="px-4 py-2 bg-slate-800 text-white rounded-xl text-xs font-semibold hover:bg-slate-700"
                >
                  OK
                </button>
              )}
            </div>
          </div>
        </div>
      )}

      {toast && (
        <div className="fixed bottom-5 right-5 z-50 flex items-center space-x-2.5 px-4 py-3 rounded-2xl shadow-2xl border text-xs font-semibold bg-slate-900 text-white border-slate-700 animate-bounce">
          <CheckCircle2 className="w-4 h-4 text-emerald-400" />
          <span>{toast.message}</span>
        </div>
      )}
    </div>
  );
}