/* global React, Icon, fmt, fmtMoney, fmtCompact, fmtDate, StatusPill, Progress, useToast, Modal, DeleteConfirmModal, EditProjectModal, NewProjectModal */
const { useState, useMemo, useEffect } = React;

// ---- Excel / CSV export helper ----
function exportExcel(sheets, filename) {
  if (window.XLSX) {
    const wb = window.XLSX.utils.book_new();
    sheets.forEach(({ name, rows }) => {
      const ws = window.XLSX.utils.json_to_sheet(rows);
      window.XLSX.utils.book_append_sheet(wb, ws, name.substring(0, 31));
    });
    window.XLSX.writeFile(wb, `${filename}.xlsx`);
  } else {
    // CSV fallback with BOM for Thai
    const rows = sheets[0]?.rows || [];
    if (!rows.length) return;
    const headers = Object.keys(rows[0]);
    const csv = [headers.join(","), ...rows.map(r => headers.map(h => `"${String(r[h] ?? "").replace(/"/g, '""')}"`).join(","))].join("\n");
    const blob = new Blob(["" + csv], { type: "text/csv;charset=utf-8" });
    const url = URL.createObjectURL(blob);
    const a = document.createElement("a");
    a.href = url; a.download = `${filename}.csv`; a.click();
    URL.revokeObjectURL(url);
  }
}

// =====================================================
// LOGIN
// =====================================================
function LoginScreen({ onLogin }) {
  const [email, setEmail] = useState("");
  const [pw, setPw] = useState("");
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState("");
  const submit = async (e) => {
    e.preventDefault();
    setLoading(true); setError("");
    const ok = await onLogin(email, pw);
    setLoading(false);
    if (!ok) setError("อีเมลหรือรหัสผ่านไม่ถูกต้อง");
  };
  return (
    <div className="login-wrap">
      <div className="login-side">
        <div className="brand">
          <div style={{ width: 36, height: 36, borderRadius: 8, background: "linear-gradient(135deg,#2563EB,#1D4ED8)", display: "grid", placeItems: "center", fontWeight: 700, fontFamily: "IBM Plex Sans" }}>JS</div>
          <div>
            <div className="name">JS Contract</div>
            <div style={{ fontSize: 12, color: "rgba(203,213,225,0.6)" }}>Construction Contract Management</div>
          </div>
        </div>
        <div className="pitch">
          <h1>จัดการสัญญาก่อสร้าง<br/>ครบจบในที่เดียว</h1>
          <p>ติดตามมูลค่าสัญญา ยอดเบิกจ่าย และความคืบหน้าของบ้านทุกหลังในโครงการ พร้อมรายงานสรุปและการอัปโหลดเอกสารหลักฐาน</p>
        </div>
        <div className="quote">
          "จากที่ทำใน Excel หลายไฟล์ ใช้ JS Contract แล้วเหลือแค่หน้าจอเดียว เห็นภาพรวมทั้งโครงการได้ทันที"
          <div className="who">— คุณวีระ ผู้จัดการ บมจ. พฤกษา</div>
        </div>
      </div>
      <div style={{ display: "flex", alignItems: "center" }}>
        <form className="login-form" onSubmit={submit}>
          <h2>ลงชื่อเข้าใช้</h2>
          <p className="sub">ยินดีต้อนรับกลับ กรุณาเข้าสู่ระบบเพื่อจัดการโครงการของคุณ</p>
          <div className="form-grid">
            <div className="field">
              <label>อีเมล</label>
              <input className="input" type="email" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="name@company.com" />
            </div>
            <div className="field">
              <label>รหัสผ่าน</label>
              <input className="input" type="password" value={pw} onChange={(e) => setPw(e.target.value)} />
            </div>
            <div className="hstack" style={{ justifyContent: "space-between" }}>
              <label className="hstack" style={{ gap: 6, fontSize: 13, color: "var(--text-2)" }}>
                <input type="checkbox" defaultChecked /> จดจำการเข้าสู่ระบบ
              </label>
              <a href="#" style={{ fontSize: 13, color: "var(--brand)", textDecoration: "none" }}>ลืมรหัสผ่าน?</a>
            </div>
            {error && <div style={{ background: "#FEF2F2", border: "1px solid #FECACA", color: "#B91C1C", padding: "8px 12px", borderRadius: 6, fontSize: 13 }}>{error}</div>}
            <button className="btn primary lg" type="submit" disabled={loading || !email || !pw} style={{ justifyContent: "center", marginTop: 4 }}>
              {loading ? <><span className="spinner" /> กำลังเข้าสู่ระบบ...</> : <>เข้าสู่ระบบ <Icon name="arrowR" size={14} /></>}
            </button>
          </div>
          <div style={{ marginTop: 24, fontSize: 12, color: "var(--text-3)", textAlign: "center" }}>
            © 2025 JS Contract System · v3.0.0
          </div>
        </form>
      </div>
    </div>
  );
}

// =====================================================
// DASHBOARD
// =====================================================
function Dashboard({ data, onOpenProject, onViewAllProjects, onAddProject }) {
  const [showNew, setShowNew] = useState(false);
  const toast = useToast();

  const totalValue = data.projects.reduce((s, p) => s + p.value_total, 0);
  const totalPaid = data.projects.reduce((s, p) => s + p.paid_total, 0);
  const totalRemain = totalValue - totalPaid;
  const active = data.projects.filter((p) => p.status === "active").length;
  const totalHouses = data.projects.reduce((s, p) => s + p.house_count, 0);

  const handleExcelExport = () => {
    const rows = data.projects.map(p => ({
      "โครงการ": p.name,
      "ลูกค้า": p.client,
      "สถานะ": p.status === "active" ? "กำลังดำเนินการ" : p.status === "completed" ? "เสร็จสิ้น" : "รอเริ่มงาน",
      "วันที่เริ่ม": p.start_date || "",
      "มูลค่ารวม (บาท)": p.value_total,
      "เบิกแล้ว (บาท)": p.paid_total,
      "คงเหลือ (บาท)": p.value_total - p.paid_total,
      "จำนวนสัญญา": p.contract_count,
      "จำนวนบ้าน": p.house_count,
    }));
    exportExcel([{ name: "โครงการ", rows }], "สรุปโครงการทั้งหมด");
    toast({ t: "ส่งออก Excel สำเร็จ", s: `${rows.length} โครงการ` });
  };

  return (
    <div className="page">
      <div className="page-head">
        <div>
          <h1 className="page-title">ภาพรวมระบบ</h1>
          <p className="page-sub">สรุปสถานะสัญญาและการเบิกจ่ายของทุกโครงการ — อัปเดตล่าสุด เมื่อสักครู่</p>
        </div>
        <div className="page-actions">
          <button className="btn" onClick={handleExcelExport}><Icon name="excel" size={13} /> ส่งออก Excel</button>
          <button className="btn primary" onClick={() => setShowNew(true)}><Icon name="plus" size={13} /> สร้างโครงการใหม่</button>
        </div>
      </div>

      <div className="stat-grid">
        <div className="stat">
          <div className="label"><Icon name="building" size={13} /> โครงการทั้งหมด</div>
          <div className="value">{data.projects.length}</div>
          <div className="delta up"><Icon name="arrowUp" size={11} /> {active} ดำเนินการอยู่</div>
          <div className="accent"><Icon name="building" size={15} /></div>
        </div>
        <div className="stat accent-green">
          <div className="label"><Icon name="money" size={13} /> มูลค่ารวม</div>
          <div className="value">{fmtCompact(totalValue)}</div>
          <div className="delta"><span style={{ color: "var(--text-2)" }}>฿{fmt(totalValue)}</span></div>
          <div className="accent"><Icon name="money" size={15} /></div>
        </div>
        <div className="stat">
          <div className="label"><Icon name="wallet" size={13} /> เบิกจ่ายแล้ว</div>
          <div className="value">{fmtCompact(totalPaid)}</div>
          <div className="delta up"><Icon name="arrowUp" size={11} /> {((totalPaid / Math.max(1, totalValue)) * 100).toFixed(1)}% ของยอดรวม</div>
          <div className="accent"><Icon name="wallet" size={15} /></div>
        </div>
        <div className="stat accent-warn">
          <div className="label"><Icon name="layers" size={13} /> คงเหลือเบิก</div>
          <div className="value">{fmtCompact(totalRemain)}</div>
          <div className="delta"><span style={{ color: "var(--text-2)" }}>{totalHouses} หลังในระบบ</span></div>
          <div className="accent"><Icon name="layers" size={15} /></div>
        </div>
      </div>

      <div className="dual">
        <div className="card card-flush">
          <div className="card-head">
            <h3>โครงการล่าสุด</h3>
            <span className="sub">{data.projects.length} โครงการ</span>
            <div style={{ flex: 1 }}></div>
            <button className="btn sm ghost" onClick={onViewAllProjects}>ดูทั้งหมด <Icon name="chevR" size={11} /></button>
          </div>
          <div className="tbl-wrap">
            <table className="tbl">
              <thead>
                <tr>
                  <th>โครงการ</th>
                  <th>ลูกค้า</th>
                  <th className="r">มูลค่า</th>
                  <th style={{ width: 160 }}>ความคืบหน้า</th>
                  <th>สถานะ</th>
                  <th></th>
                </tr>
              </thead>
              <tbody>
                {data.projects.map((p) => (
                  <tr key={p.id} onClick={() => onOpenProject(p.id)} style={{ cursor: "pointer" }}>
                    <td>
                      <div className="strong">{p.name}</div>
                      <div className="dim" style={{ fontSize: 11.5 }}>เริ่ม {fmtDate(p.start_date)} · {p.contract_count} สัญญา · {p.house_count} หลัง</div>
                    </td>
                    <td className="dim">{p.client}</td>
                    <td className="r num">{fmtCompact(p.value_total)}</td>
                    <td><Progress paid={p.paid_total} total={p.value_total} /></td>
                    <td><StatusPill status={p.status} /></td>
                    <td><Icon name="chevR" size={14} className="dim" /></td>
                  </tr>
                ))}
                {data.projects.length === 0 && (
                  <tr><td colSpan={6} className="c dim" style={{ padding: 40 }}>ยังไม่มีโครงการ — กด "สร้างโครงการใหม่"</td></tr>
                )}
              </tbody>
            </table>
          </div>
        </div>

        <div className="card card-flush">
          <div className="card-head">
            <h3>กิจกรรมล่าสุด</h3>
            <span className="sub">ทีม</span>
          </div>
          <div className="feed">
            {data.activity.length === 0 && (
              <div style={{ padding: "32px 16px", textAlign: "center", color: "var(--text-3)", fontSize: 13 }}>
                <Icon name="history" size={28} /><br />ยังไม่มีกิจกรรม
              </div>
            )}
            {data.activity.map((a) => (
              <div className="feed-item" key={a.id}>
                <div className="av">{a.who.charAt(0)}</div>
                <div className="content">
                  <div><b>{a.who}</b> {a.action} · <span className="dim">{a.target}</span></div>
                  {a.amount != null && <div className="meta">ยอด: <span className="amt">{fmtMoney(a.amount)}</span> · {a.time}</div>}
                  {a.amount == null && <div className="meta">{a.time}</div>}
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>

      {showNew && (
        <NewProjectModal
          onClose={() => setShowNew(false)}
          onCreate={async (p) => {
            try {
              await onAddProject(p);
              setShowNew(false);
              toast({ t: "สร้างโครงการสำเร็จ", s: p.name });
            } catch(e) {
              toast({ t: "ไม่สำเร็จ", s: e.message });
            }
          }}
        />
      )}
    </div>
  );
}

// =====================================================
// PROJECTS (Table + Detail panel)
// =====================================================
function ProjectsScreen({ data, selectedId, setSelectedId, onOpenContracts, onAddProject, onDeleteProject, onUpdateProject }) {
  const [search, setSearch] = useState("");
  const [showNew, setShowNew] = useState(false);
  const [filter, setFilter] = useState("all");
  const toast = useToast();

  const filtered = data.projects.filter((p) => {
    if (filter !== "all" && p.status !== filter) return false;
    if (search && !(p.name + p.client).toLowerCase().includes(search.toLowerCase())) return false;
    return true;
  });
  const selected = data.projects.find((p) => p.id === selectedId);

  const handleExcel = () => {
    const rows = filtered.map(p => ({
      "โครงการ": p.name,
      "ลูกค้า": p.client,
      "สถานะ": p.status === "active" ? "กำลังดำเนินการ" : p.status === "completed" ? "เสร็จสิ้น" : "รอเริ่มงาน",
      "วันที่เริ่ม": p.start_date || "",
      "มูลค่ารวม (บาท)": p.value_total,
      "เบิกแล้ว (บาท)": p.paid_total,
      "คงเหลือ (บาท)": p.value_total - p.paid_total,
    }));
    exportExcel([{ name: "โครงการ", rows }], "รายการโครงการ");
    toast({ t: "ส่งออก Excel สำเร็จ" });
  };

  return (
    <div className="page">
      <div className="page-head">
        <div>
          <h1 className="page-title">โครงการ</h1>
          <p className="page-sub">จัดการโครงการก่อสร้างทั้งหมด — คลิกแถวเพื่อดูรายละเอียดด้านขวา</p>
        </div>
        <div className="page-actions">
          <button className="btn" onClick={handleExcel}><Icon name="excel" size={13} /> Excel</button>
          <button className="btn primary" onClick={() => setShowNew(true)}><Icon name="plus" size={13} /> เพิ่มโครงการ</button>
        </div>
      </div>

      <div className="dual">
        <div>
          <div className="card card-flush" style={{ marginBottom: 14 }}>
            <div className="card-head" style={{ gap: 8 }}>
              <input className="input" placeholder="ค้นหาชื่อโครงการ หรือลูกค้า..." value={search} onChange={(e) => setSearch(e.target.value)} style={{ maxWidth: 320 }} />
              <div className="hstack" style={{ gap: 4, marginLeft: 8 }}>
                {[["all","ทั้งหมด"],["active","กำลังดำเนินการ"],["completed","เสร็จสิ้น"],["pending","รอเริ่ม"]].map(([k,l]) => (
                  <button key={k} className={`btn sm ${filter === k ? "primary" : ""}`} onClick={() => setFilter(k)}>{l}</button>
                ))}
              </div>
              <div style={{ flex: 1 }}></div>
              <span className="dim" style={{ fontSize: 12 }}>{filtered.length} รายการ</span>
            </div>
            <div className="tbl-wrap">
              <table className="tbl">
                <thead>
                  <tr>
                    <th>โครงการ</th>
                    <th>ลูกค้า</th>
                    <th>วันที่เริ่ม</th>
                    <th className="r">มูลค่า</th>
                    <th className="r">เบิกแล้ว</th>
                    <th style={{ width: 140 }}>คืบหน้า</th>
                  </tr>
                </thead>
                <tbody>
                  {filtered.map((p) => (
                    <tr key={p.id} className={selectedId === p.id ? "selected" : ""} onClick={() => setSelectedId(p.id)} style={{ cursor: "pointer" }}>
                      <td>
                        <div className="strong">{p.name}</div>
                        <div className="dim" style={{ fontSize: 11.5, marginTop: 2 }}>
                          <StatusPill status={p.status} /> <span style={{ marginLeft: 6 }}>{p.contract_count} สัญญา · {p.house_count} หลัง</span>
                        </div>
                      </td>
                      <td className="dim">{p.client}</td>
                      <td className="dim">{fmtDate(p.start_date)}</td>
                      <td className="r num">{fmt(p.value_total)}</td>
                      <td className="r num" style={{ color: "var(--brand-700)" }}>{fmt(p.paid_total)}</td>
                      <td><Progress paid={p.paid_total} total={p.value_total} /></td>
                    </tr>
                  ))}
                  {filtered.length === 0 && (
                    <tr><td colSpan={6} className="c dim" style={{ padding: 40 }}>ไม่พบโครงการที่ตรงเงื่อนไข</td></tr>
                  )}
                </tbody>
              </table>
            </div>
          </div>
        </div>

        <div className="detail-panel">
          {!selected ? (
            <div className="card">
              <div className="detail-empty">
                <div className="ico"><Icon name="building" size={36} /></div>
                <div style={{ fontWeight: 500, color: "var(--text-2)" }}>เลือกโครงการเพื่อดูรายละเอียด</div>
                <div style={{ fontSize: 12, marginTop: 4 }}>คลิกที่แถวในตารางด้านซ้าย</div>
              </div>
            </div>
          ) : (
            <ProjectDetail
              project={selected}
              onOpenContracts={() => onOpenContracts(selected.id)}
              onDelete={onDeleteProject}
              onUpdate={(fields) => onUpdateProject(selected.id, fields)}
              onAfterDelete={() => setSelectedId(null)}
            />
          )}
        </div>
      </div>

      {showNew && (
        <NewProjectModal
          onClose={() => setShowNew(false)}
          onCreate={async (p) => {
            try { await onAddProject(p); setShowNew(false); toast({ t: "สร้างโครงการสำเร็จ", s: p.name }); }
            catch(e) { toast({ t: "ไม่สำเร็จ", s: e.message }); }
          }}
        />
      )}
    </div>
  );
}

function ProjectDetail({ project, onOpenContracts, onDelete, onUpdate, onAfterDelete }) {
  const [showDelete, setShowDelete] = useState(false);
  const [showEdit, setShowEdit] = useState(false);
  const [delLoading, setDelLoading] = useState(false);
  const toast = useToast();

  const remain = project.value_total - project.paid_total;
  const pct = ((project.paid_total / Math.max(1, project.value_total)) * 100) || 0;

  const handleDelete = async () => {
    setDelLoading(true);
    try {
      await onDelete(project.id);
      toast({ t: "ลบโครงการสำเร็จ", s: project.name });
      setShowDelete(false);
      onAfterDelete();
    } catch(e) {
      toast({ t: "ลบไม่สำเร็จ", s: e.message });
    }
    setDelLoading(false);
  };

  const handleExportPDF = () => {
    const rows = `<tr><td>มูลค่ารวม</td><td class="r">฿${project.value_total.toLocaleString()}</td></tr>
      <tr><td>เบิกจ่ายแล้ว</td><td class="r" style="color:#16a34a">฿${project.paid_total.toLocaleString()}</td></tr>
      <tr><td>คงเหลือ</td><td class="r" style="color:#d97706">฿${remain.toLocaleString()}</td></tr>
      <tr><td>ความคืบหน้า</td><td class="r">${pct.toFixed(1)}%</td></tr>
      <tr><td>จำนวนสัญญา</td><td class="r">${project.contract_count} ฉบับ</td></tr>
      <tr><td>จำนวนบ้าน</td><td class="r">${project.house_count} หลัง</td></tr>`;
    const html = `<!DOCTYPE html><html lang="th"><head><meta charset="UTF-8"><title>${project.name}</title>
      <style>body{font-family:'Sarabun','Noto Sans Thai',sans-serif;padding:32px;color:#111}h1{color:#1D4ED8;font-size:22px}table{width:100%;border-collapse:collapse;margin-top:16px}td{padding:10px;border-bottom:1px solid #e2e8f0}.r{text-align:right}@media print{body{print-color-adjust:exact}}</style>
      </head><body><h1>${project.name}</h1><p style="color:#64748b">${project.client} · เริ่ม ${project.start_date || "-"}</p>
      <table>${rows}</table></body></html>`;
    const w = window.open("", "_blank");
    w.document.write(html); w.document.close();
    setTimeout(() => w.print(), 400);
  };

  const handleExportExcel = () => {
    exportExcel([{ name: "โครงการ", rows: [{
      "โครงการ": project.name, "ลูกค้า": project.client,
      "มูลค่า (บาท)": project.value_total, "เบิกแล้ว (บาท)": project.paid_total,
      "คงเหลือ (บาท)": remain, "สัญญา": project.contract_count, "บ้าน": project.house_count,
    }] }], project.name);
    toast({ t: "ส่งออก Excel สำเร็จ" });
  };

  return (
    <>
      <div className="card">
        <div className="card-head" style={{ flexDirection: "column", alignItems: "flex-start", gap: 6 }}>
          <div className="hstack" style={{ width: "100%" }}>
            <StatusPill status={project.status} />
            <div style={{ flex: 1 }}></div>
            <button className="ico-btn" title="แก้ไข" onClick={() => setShowEdit(true)}><Icon name="edit" size={13} /></button>
            <button className="ico-btn danger" title="ลบโครงการ" onClick={() => setShowDelete(true)}><Icon name="trash" size={13} /></button>
          </div>
          <h3 style={{ fontSize: 17 }}>{project.name}</h3>
          <div className="dim" style={{ fontSize: 12.5 }}>{project.client}</div>
        </div>
        <div className="card-body">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10, marginBottom: 14 }}>
            <div className="stat" style={{ padding: 12 }}>
              <div className="label" style={{ fontSize: 11 }}>มูลค่ารวม</div>
              <div className="value" style={{ fontSize: 18 }}>{fmtCompact(project.value_total)}</div>
            </div>
            <div className="stat accent-green" style={{ padding: 12 }}>
              <div className="label" style={{ fontSize: 11 }}>เบิกแล้ว</div>
              <div className="value" style={{ fontSize: 18, color: "var(--success)" }}>{fmtCompact(project.paid_total)}</div>
            </div>
          </div>

          <div className="prog" style={{ marginBottom: 14 }}>
            <div className="hstack" style={{ justifyContent: "space-between", marginBottom: 4 }}>
              <span style={{ fontSize: 12, fontWeight: 500 }}>ความคืบหน้าการเบิก</span>
              <span className="num" style={{ fontWeight: 600 }}>{pct.toFixed(1)}%</span>
            </div>
            <div className="prog-bar" style={{ height: 8 }}><div className="prog-fill" style={{ width: pct + "%" }}></div></div>
            <div className="prog-meta"><span>เบิกแล้ว ฿{fmt(project.paid_total)}</span><span>คงเหลือ ฿{fmt(remain)}</span></div>
          </div>

          <dl className="kv" style={{ marginBottom: 16 }}>
            <dt>วันที่เริ่ม</dt><dd>{fmtDate(project.start_date)}</dd>
            <dt>จำนวนสัญญา</dt><dd>{project.contract_count} สัญญา</dd>
            <dt>จำนวนบ้าน</dt><dd>{project.house_count} หลัง</dd>
            <dt>รหัสโครงการ</dt><dd className="mono">{project.id.toUpperCase()}</dd>
          </dl>

          <button className="btn primary" style={{ width: "100%", justifyContent: "center" }} onClick={onOpenContracts}>
            จัดการสัญญา & บ้าน <Icon name="arrowR" size={13} />
          </button>
          <div className="hstack" style={{ marginTop: 8, gap: 6 }}>
            <button className="btn" style={{ flex: 1, justifyContent: "center" }} onClick={handleExportPDF}><Icon name="print" size={13} /> รายงาน PDF</button>
            <button className="btn" style={{ flex: 1, justifyContent: "center" }} onClick={handleExportExcel}><Icon name="excel" size={13} /> ส่งออก</button>
          </div>
        </div>
      </div>

      {showDelete && (
        <DeleteConfirmModal
          title="ลบโครงการ"
          message={`ลบโครงการ "${project.name}" และข้อมูลทั้งหมด (${project.contract_count} สัญญา · ${project.house_count} หลัง) จะถูกลบถาวร`}
          loading={delLoading}
          onClose={() => setShowDelete(false)}
          onConfirm={handleDelete}
        />
      )}
      {showEdit && (
        <EditProjectModal
          project={project}
          onClose={() => setShowEdit(false)}
          onSave={async (fields) => {
            await onUpdate(fields);
            toast({ t: "แก้ไขโครงการสำเร็จ", s: fields.name });
          }}
        />
      )}
    </>
  );
}

function NewProjectModal({ onClose, onCreate }) {
  const [form, set] = useState({ name: "", client: "", start_date: "" });
  return (
    <Modal title="เพิ่มโครงการใหม่" icon="building" onClose={onClose} foot={
      <>
        <button className="btn" onClick={onClose}>ยกเลิก</button>
        <button className="btn primary" disabled={!form.name} onClick={() => onCreate(form)}><Icon name="check" size={13} /> สร้างโครงการ</button>
      </>
    }>
      <div className="vstack" style={{ gap: 12 }}>
        <div className="field">
          <label>ชื่อโครงการ <span style={{ color: "var(--danger)" }}>*</span></label>
          <input className="input" placeholder="เช่น บ้านสวยวิลเลจ เฟส 4" value={form.name} onChange={(e) => set({ ...form, name: e.target.value })} autoFocus />
        </div>
        <div className="field">
          <label>ลูกค้า / Developer</label>
          <input className="input" placeholder="ชื่อบริษัทลูกค้า" value={form.client} onChange={(e) => set({ ...form, client: e.target.value })} />
        </div>
        <div className="field">
          <label>วันที่เริ่มโครงการ</label>
          <input className="input" type="date" value={form.start_date} onChange={(e) => set({ ...form, start_date: e.target.value })} />
        </div>
      </div>
    </Modal>
  );
}

Object.assign(window, { LoginScreen, Dashboard, ProjectsScreen, exportExcel });