{twClock(now)}

{now.toLocaleDateString("zh-TW", { timeZone: "Asia/Taipei", year: "numeric", month: "long", day: "numeric", weekday: "long" })}

目前狀態 {myLast?.type === "in" ? "上班中" : "未上班"}

{myLast && (

最近一筆：{ATT_TYPE[myLast.type].label}於 {twDateTime(myLast.clockedAt)}

)}

setNote(e.target.value)} placeholder="備註（選填）" style={{ width: 180 }}/>

{overtimeEligible && (

已工作超過 {STANDARD_WORK_HOURS} 小時 {myOvertime ? ( 已送出加班申請，打下班卡後會自動算出時數、送管理員審核 ) : ( <> 要申請加班嗎？ setOtNote(e.target.value)} placeholder="加班原因（選填）" style={{ width: 200 }}/> )}

)} ); }; // 代改/刪除紀錄的 Modal（僅 canEdit 才會被叫出） const EditRecordModal = ({ record, onClose, onSaved }) => { const [type, setType] = useState(record.type); const [clockedAt, setClockedAt] = useState(twInputValue(record.clockedAt)); const [note, setNote] = useState(record.note ?? ""); const [reason, setReason] = useState(""); const [loading, setLoading] = useState(false); const [error, setError] = useState(""); const toast = useToast(); const save = async () => { if (reason.trim().length < 4) { setError("請填寫修正原因（至少 4 個字）"); return; } setError(""); setLoading(true); const res = await fetch(`/api/admin/attendance/${record.id}`, { method: "PATCH", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ type, clockedAt: new Date(`${clockedAt}:00+08:00`).toISOString(), note: note.trim(), reason: reason.trim(), }), }); setLoading(false); if (res.ok) { toast({ title: "已修正紀錄", icon: "check" }); onSaved(); } else { const d = await res.json().catch(() => ({})); setError(d.error ?? "修正失敗，請稍後再試"); } }; return (

修正打卡紀錄

員工

{record.employeeName}（{record.adminEmail}）

類型 setClockedAt(e.target.value)} style={{ width: "100%", padding: "8px 12px", fontSize: 14, border: "1px solid var(--border-strong)", borderRadius: 8, outline: 0 }}/>

備註 setNote(e.target.value)} placeholder="備註（選填）"/>

修正原因 *

setReason(e.target.value)} rows={2}
              placeholder="例：員工出差忘記打卡，依打卡機備援紀錄補登。"
              style={{ width: "100%", padding: "8px 12px", fontSize: 14, border: "1px solid var(--border-strong)", borderRadius: 8, fontFamily: "var(--font-sans)", resize: "vertical", outline: 0 }}/>
          </div>
          {error && <div style={{ fontSize: 12.5, color: "var(--danger)" }}>{error}</div>}
        </div>
        <div style={{ display: "flex", gap: 8, marginTop: 20, justifyContent: "flex-end" }}>
          <Button variant="secondary" onClick={onClose} disabled={loading}>取消</Button>
          <Button variant="primary" onClick={save} disabled={loading}>{loading ? "儲存中…" : "儲存修正"}</Button>
        </div>
      </div>
    </Modal>
  );
};

const AttendancePage = ({ adminEmail }) => {
  const [range, setRange] = useState("thisMonth");
  const [customFrom, setCustomFrom] = useState("");
  const [customTo, setCustomTo] = useState("");
  const [employeeFilter, setEmployeeFilter] = useState("all");
  const [records, setRecords] = useState([]);
  const [employees, setEmployees] = useState([]);
  const [canManageAll, setCanManageAll] = useState(false);
  const [canEdit, setCanEdit] = useState(false);
  const [loading, setLoading] = useState(true);
  const [editing, setEditing] = useState(null);
  const [deleting, setDeleting] = useState(null);
  const [myLast, setMyLast] = useState(null);
  const [myOvertime, setMyOvertime] = useState(null);
  const [overtimeRequests, setOvertimeRequests] = useState([]);
  const [otCanManageAll, setOtCanManageAll] = useState(false);
  const [otCanReview, setOtCanReview] = useState(false);
  const [otAction, setOtAction] = useState(null); // { type: "approve"|"reject", req }
  const toast = useToast();

// 目前這次上班（如果還在上班中）掛著的加班申請：clockOutAt 還是 null 就是「還在計算中」，
  // 用來決定打卡卡片要顯示「申請加班」按鈕還是「已申請」的提示。
  const loadMyOvertime = () => {
    fetch(`/api/admin/overtime?employee=${encodeURIComponent(adminEmail)}`)
      .then(r => r.ok ? r.json() : null)
      .then(d => { if (d) setMyOvertime((d.requests ?? []).find(r => !r.clockOutAt) ?? null); })
      .catch(() => {});
  };
  useEffect(loadMyOvertime, [adminEmail]);

return (
    <div className="fade-in">
      <PageHeader
        title="員工打卡鐘"
        subtitle={canManageAll ? "全體員工上下班打卡紀錄" : "我的上下班打卡紀錄"}
        actions={<>
          {canManageAll && (
            <Select value={employeeFilter} onChange={setEmployeeFilter} icon="users"
              options={[{ value: "all", label: "全部員工" }, ...employees.map(e => ({ value: e.email, label: e.name }))]}/>
          )}
          <Select value={range} onChange={setRange} icon="calendar" options={ATT_RANGE_OPTS}/>
          {range === "custom" && (
            <>
              <Input type="date" value={customFrom} onChange={e => setCustomFrom(e.target.value)} style={{ width: 150 }}/>
              <span style={{ color: "var(--ink-4)" }}>~</span>
              <Input type="date" value={customTo} onChange={e => setCustomTo(e.target.value)} style={{ width: 150 }}/>
            </>
          )}
          <Button variant="secondary" icon="refresh" onClick={load}>重新整理</Button>
          <Button variant="primary" icon="download" onClick={handleExport}>匯出 CSV</Button>
        </>}
      />

<ClockInCard
        myLast={myLast} myOvertime={myOvertime}
        onPunched={() => { load(); loadMyLast(); loadMyOvertime(); loadOvertimeRequests(); }}
        onOvertimeApplied={() => { loadMyOvertime(); loadOvertimeRequests(); }}
      />

{editing && (
        <EditRecordModal record={editing} onClose={() => setEditing(null)} onSaved={() => { setEditing(null); load(); }}/>
      )}

{deleting && (
        <ConfirmDialog
          open onClose={() => setDeleting(null)}
          variant="danger" icon="ban" confirmText="確認作廢"
          reasonLabel="作廢原因"
          reasonPlaceholder="例：重複打卡誤植，作廢多餘紀錄。"
          title="作廢打卡紀錄"
          description={`確認作廢「${deleting.employeeName}」於 ${twDateTime(deleting.clockedAt)} 的${ATT_TYPE[deleting.type]?.label}打卡紀錄？原始紀錄仍會保留、標示為已作廢，不會真的消失。`}
          onConfirm={confirmVoid}
        />
      )}

{otAction && (
        <ConfirmDialog
          open onClose={() => setOtAction(null)}
          variant={otAction.type === "approve" ? "info" : "danger"}
          icon={otAction.type === "approve" ? "check" : "alert"}
          confirmText={otAction.type === "approve" ? "確認核准" : "確認駁回"}
          requireReason={otAction.type === "reject"}
          reasonLabel="駁回原因"
          reasonPlaceholder="例：時數認列有誤，請重新確認。"
          title={otAction.type === "approve"
            ? `核准加班申請 · ${otAction.req.overtimeHours} 小時`
            : `駁回加班申請 · ${otAction.req.overtimeHours} 小時`}
          description={otAction.type === "approve"
            ? `確認核准「${otAction.req.employeeName}」這次加班 ${otAction.req.overtimeHours} 小時，核准後這筆加班算成功。`
            : `確認駁回「${otAction.req.employeeName}」的加班申請，這筆加班不會被採計。`}
          onConfirm={submitOvertimeAction}
        />
      )}
    </div>
  );
};

window.AttendancePage = AttendancePage;