// ---------- Attendance ---------- function Attendance({ role }) { const isBoss = role === 'boss'; const [tab, setTab] = React.useState('today'); // today | history const [rows, setRows] = React.useState(() => seedTodayRows()); const [editing, setEditing] = React.useState(null); const [editClockIn, setEditClockIn] = React.useState(''); const [editClockOut, setEditClockOut] = React.useState(''); const [editReason, setEditReason] = React.useState(''); const [auditEdits, setAuditEdits] = React.useState([]); const [fromDate, setFromDate] = React.useState('2026-04-01'); const [toDate, setToDate] = React.useState('2026-04-26'); const [empFilter, setEmpFilter] = React.useState('all'); const presentToday = rows.filter(r => r.status !== 'absent' && r.clock_in).length; const lateArrivals = rows.filter(r => r.status === 'late').length; const absentToday = rows.filter(r => r.status === 'absent').length; React.useEffect(() => { window.__attendanceLateTodayCount = lateArrivals; }, [lateArrivals]); const openEdit = (r) => { setEditing(r); setEditClockIn(r.clock_in || ''); setEditClockOut(r.clock_out || ''); setEditReason(''); }; const saveEdit = () => { if (!editing) return; if (!editReason.trim()) return; setRows(rows.map(r => { if (r.id !== editing.id) return r; const next = { ...r, clock_in: editClockIn || null, clock_out: editClockOut || null, manually_edited: true, edited_by: 'boss', edit_reason: editReason.trim(), }; const recalc = computeStatus(next.shift_start, next.clock_in, next.clock_out); return { ...next, status: recalc.status, hours_worked: recalc.hours_worked }; })); setAuditEdits([ { id: 'ae_' + Math.random().toString(16).slice(2), employee: editing.employee_name, at: fmtDateTime(new Date().toISOString()), reason: editReason.trim(), }, ...auditEdits, ].slice(0, 8)); setEditing(null); }; const filteredHistory = seedHistoryRows() .filter(r => (!fromDate || r.work_date >= fromDate) && (!toDate || r.work_date <= toDate)) .filter(r => empFilter === 'all' ? true : r.employee_id === empFilter); return (

{[['today','Today'],['history','Clock-in history']].map(([k,l]) => ( ))}

{tab === 'today' && ( <>

Shift start 09:00

} > {isBoss && } {rows.map(r => ( {isBoss && ( )} ))}

Employee	Clock In	Clock Out	Hours Worked	Status	Notes	Manual Override
{r.initials} {r.employee_name} {r.department}	{r.clock_in \|\| '—'}	{r.clock_out \|\| '—'}	{r.hours_worked != null ? r.hours_worked.toFixed(2) : '—'}		{r.notes \|\| '—'}

Device Setup Instructions

1. Connect NGTeco device to WiFi

2. Set webhook URL to: https://[project].supabase.co/functions/v1/clock-punch

3. Map each badge ID to an employee in Settings > Attendance Devices

4. Test with a tap — it should appear here in real time

Payload {`{ employee_id, device_id, punch_type: 'in' | 'out', timestamp }`}

Database: attendance table (SQL)

Paste this into Supabase SQL editor.

{ATTENDANCE_SQL}

{isBoss && ( Boss only} > {auditEdits.length === 0 ? ( ) : auditEdits.map(a => ( ))}

Employee	Edited at	Reason
No edits yet.
{a.employee}	{a.at}	{a.reason}

)} )} {tab === 'history' && ( <>

Date from setFromDate(e.target.value)} />

Date to setToDate(e.target.value)} />

Employee

{filteredHistory.map(r => ( ))}

Date	Employee	Clock In	Clock Out	Hours	Status	Notes
{r.work_date}	{r.employee_name}	{r.clock_in \|\| '—'}	{r.clock_out \|\| '—'}	{r.hours_worked != null ? r.hours_worked.toFixed(2) : '—'}		{r.notes \|\| '—'}

)} {editing && (

setEditing(null)}>

e.stopPropagation()} style={{maxWidth:640}}>

Manual override

{editing.employee_name} · {editing.work_date}

Clock in (HH:MM) setEditClockIn(e.target.value)} placeholder="e.g. 09:02"/>

Clock out (HH:MM) setEditClockOut(e.target.value)} placeholder="e.g. 17:10"/>

Reason (required)

setEditReason(e.target.value)} placeholder="Explain why this edit is needed..."/>
              </div>
            </div>
            <div style={{display:'flex',gap:10,justifyContent:'flex-end',marginTop:20}}>
              <button className="btn btn-ghost btn-sm" onClick={()=>setEditing(null)}>Cancel</button>
              <button className="btn btn-primary btn-sm" onClick={saveEdit} disabled={!editReason.trim()}>
                Save
              </button>
            </div>
          </div>
        </div>
      )}

<style>{`
        @media (max-width: 900px) {
          .att-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </div>
  );
}

function AttendanceStatusBadge({ status }) {
  const map = {
    on_time: ['On Time', 'badge-green'],
    late: ['Late', 'badge-gold'],
    absent: ['Absent', 'badge-red'],
    left_early: ['Left Early', 'badge-blue'],
  };
  const [label, cls] = map[status] || [status, 'badge-muted'];
  return <span className={'badge '+cls}><span className="badge-dot" style={{background:'currentColor'}}/>{label}</span>;
}

function seedTodayRows() {
  const emps = (EMPLOYEES || []).filter(e => e.status === 'active').slice(0, 9);
  const workDate = '2026-04-26';
  const shiftStart = '09:00';
  return emps.map((e, i) => {
    const variant = i % 7;
    const clockIn =
      variant === 0 ? '08:55' :
      variant === 1 ? '09:04' :
      variant === 2 ? '09:18' :
      variant === 3 ? null :
      variant === 4 ? '09:12' :
      variant === 5 ? '08:58' :
      '09:27';
    const clockOut =
      clockIn == null ? null :
      variant === 5 ? '15:40' :
      '17:08';
    const computed = computeStatus(shiftStart, clockIn, clockOut);
    return {
      id: 'att_' + e.id,
      employee_id: e.id,
      employee_name: e.full_name,
      initials: e.initials,
      department: e.department,
      work_date: workDate,
      shift_start: shiftStart,
      clock_in: clockIn,
      clock_out: clockOut,
      status: computed.status,
      hours_worked: computed.hours_worked,
      notes: computed.status === 'absent' ? 'No punch recorded' : computed.status === 'late' ? 'Traffic reported' : computed.status === 'left_early' ? 'Left with manager approval' : '',
      manually_edited: false,
    };
  });
}

// Provide a deterministic badge count for the sidebar before the page is opened.
try {
  window.__attendanceLateTodayCount = seedTodayRows().filter(r => r.status === 'late').length;
} catch {}

function seedHistoryRows() {
  const emps = (EMPLOYEES || []).filter(e => e.status === 'active').slice(0, 8);
  const days = ['2026-04-26','2026-04-25','2026-04-24','2026-04-23','2026-04-22','2026-04-21','2026-04-20'];
  const shiftStart = '09:00';
  const out = [];
  for (const d of days) {
    emps.forEach((e, i) => {
      const seed = (d.charCodeAt(9) + i) % 9;
      const clockIn =
        seed === 0 ? '08:58' :
        seed === 1 ? '09:03' :
        seed === 2 ? '09:16' :
        seed === 3 ? null :
        seed === 4 ? '09:11' :
        seed === 5 ? '09:25' :
        seed === 6 ? '08:52' :
        '09:07';
      const clockOut = clockIn == null ? null : (seed === 6 ? '15:20' : '17:05');
      const computed = computeStatus(shiftStart, clockIn, clockOut);
      out.push({
        id: `ath_${d}_${e.id}`,
        employee_id: e.id,
        employee_name: e.full_name,
        work_date: d,
        clock_in: clockIn,
        clock_out: clockOut,
        status: computed.status,
        hours_worked: computed.hours_worked,
        notes: computed.status === 'absent' ? 'No punch recorded' : '',
      });
    });
  }
  return out;
}

function computeStatus(shiftStart, clockIn, clockOut) {
  if (!clockIn) return { status:'absent', hours_worked: null };
  const shiftMin = hhmmToMin(shiftStart);
  const inMin = hhmmToMin(clockIn);
  const outMin = clockOut ? hhmmToMin(clockOut) : null;
  const late = inMin > (shiftMin + 10);
  const leftEarly = outMin != null && outMin < (17 * 60);
  const hours = outMin != null ? Math.max(0, (outMin - inMin) / 60) : null;
  return { status: leftEarly ? 'left_early' : late ? 'late' : 'on_time', hours_worked: hours };
}

function hhmmToMin(s) {
  const m = /^(\d{1,2}):(\d{2})$/.exec(String(s || '').trim());
  if (!m) return 0;
  return parseInt(m[1], 10) * 60 + parseInt(m[2], 10);
}

const ATTENDANCE_SQL = `CREATE TABLE attendance (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  employee_id UUID REFERENCES profiles(id) ON DELETE CASCADE,
  clock_in TIMESTAMPTZ,
  clock_out TIMESTAMPTZ,
  work_date DATE DEFAULT CURRENT_DATE,
  status TEXT CHECK (status IN ('on_time','late','absent','left_early')) DEFAULT 'on_time',
  notes TEXT,
  manually_edited BOOLEAN DEFAULT FALSE,
  edited_by UUID REFERENCES profiles(id),
  edit_reason TEXT,
  device_id TEXT,
  created_at TIMESTAMPTZ DEFAULT NOW()
);

ALTER TABLE attendance ENABLE ROW LEVEL SECURITY;

CREATE POLICY "Boss views all attendance" ON attendance FOR ALL USING (
  EXISTS (SELECT 1 FROM profiles WHERE id = auth.uid() AND role = 'boss')
);
CREATE POLICY "Employees view own attendance" ON attendance FOR SELECT USING (
  auth.uid() = employee_id
);
CREATE POLICY "System inserts attendance" ON attendance FOR INSERT WITH CHECK (true);`;

Object.assign(window, { Attendance });