import React, { useState, useCallback, useMemo } from "react"; import { Plus, X, UserCheck, UserX, Users, Calendar } from "lucide-react"; var LANG = (typeof navigator !== "undefined" ? navigator.language : "ko").slice(0, 2); var T = { ko: { title: "출석 체크", add: "멤버 추가", name: "이름", save: "추가", present: "출석", absent: "결석", rate: "출석률", total: "전체", today: "오늘", empty: "멤버를 추가하세요", emptyDesc: "출석 체크할 멤버를 등록하세요", reset: "오늘 초기화", history: "최근 기록" }, en: { title: "Attendance", add: "Add Member", name: "Name", save: "Add", present: "Present", absent: "Absent", rate: "Rate", total: "Total", today: "Today", empty: "Add members", emptyDesc: "Register members to check attendance", reset: "Reset Today", history: "Recent" }, ja: { title: "出席チェック", add: "メンバー追加", name: "名前", save: "追加", present: "出席", absent: "欠席", rate: "出席率", total: "全体", today: "今日", empty: "メンバーを追加してください", emptyDesc: "出席チェックするメンバーを登録しましょう", reset: "今日リセット", history: "最近の記録" }, zh: { title: "考勤", add: "添加成员", name: "姓名", save: "添加", present: "出勤", absent: "缺勤", rate: "出勤率", total: "全部", today: "今天", empty: "添加成员", emptyDesc: "注册需要考勤的成员", reset: "重置今天", history: "最近记录" }, }; var t = T[LANG] || T.en; export default function App() { var [members, setMembers] = useSharedStorage("attend_members", []); var [records, setRecords] = useSharedStorage("attend_records", []); var [showAdd, setShowAdd] = useState(false); var [name, setName] = useState(""); var today = new Date().toISOString().slice(0, 10); var todayRec = useMemo(function() { return (records || []).find(function(r) { return r.date === today; }) || { date: today, checks: {} }; }, [records, today]); var list = members || []; var presentCount = list.filter(function(m) { return todayRec.checks[m.id]; }).length; var rate = list.length > 0 ? Math.round((presentCount / list.length) * 100) : 0; var handleAdd = useCallback(function() { if (!name.trim()) return; setMembers(function(prev) { return [...(prev || []), { id: Date.now(), name: name.trim() }]; }); setName(""); setShowAdd(false); }, [name, setMembers]); var toggleCheck = useCallback(function(memberId) { setRecords(function(prev) { var recs = (prev || []).slice(); var idx = recs.findIndex(function(r) { return r.date === today; }); var rec = idx >= 0 ? { ...recs[idx], checks: { ...recs[idx].checks } } : { date: today, checks: {} }; if (rec.checks[memberId]) { delete rec.checks[memberId]; } else { rec.checks[memberId] = true; } if (idx >= 0) { recs[idx] = rec; } else { recs.unshift(rec); } return recs.slice(0, 30); }); }, [today, setRecords]); var removeMember = useCallback(function(id) { setMembers(function(prev) { return (prev || []).filter(function(m) { return m.id !== id; }); }); }, [setMembers]); return (

{t.title}

{today}

{rate}%

{t.rate}

{presentCount}/{list.length}

{t.present}

{list.length > 0 && (

)}

{list.length === 0 ? (

{t.empty}

{t.emptyDesc}

) : (

{list.map(function(member) { var checked = todayRec.checks[member.id]; return (

{member.name}

{checked ? t.present : t.absent}

); })}

)}

{showAdd && (

{t.add}

)}

); }

Attendance Check

Attendance Check

reviews