first commit. working

components/ClockButton.tsx

@@ -0,0 +1,18 @@
+"use client";
+import React from 'react';
+import { useAttendance } from '../hooks/useAttendance';
+
+export default function ClockButton({ teacherId }: { teacherId: string }) {
+  const { todayRecords, clockToggle } = useAttendance();
+  const last = todayRecords.filter(r => r.teacherId === teacherId).pop();
+  const nextType = last?.type === 'in' ? 'out' : 'in';
+
+  return (
+    <button
+      onClick={() => clockToggle(teacherId)}
+      className="px-4 py-2 border rounded"
+    >
+      {nextType === 'in' ? 'Clock In' : 'Clock Out'}
+    </button>
+  );
+}

components/DailySummary.tsx

@@ -0,0 +1,38 @@
+"use client";
+import React from 'react';
+import { useAttendance } from '../hooks/useAttendance';
+import { useTeachers } from '../hooks/useTeachers';
+import { exportToCsv } from '../utils/csvExport';
+
+export default function DailySummary() {
+  const { todayRecords } = useAttendance();
+  const { teachers } = useTeachers();
+
+  const summary = teachers.map(t => {
+    const recs = todayRecords.filter(r => r.teacherId === t.id);
+    let total = 0;
+    for (let i = 0; i < recs.length; i += 2) {
+      if (recs[i+1]) {
+        total += (recs[i+1].timestamp - recs[i].timestamp) / (1000*60*60);
+      }
+    }
+    return { name: t.name, total: total.toFixed(2) };
+  });
+
+  return (
+    <div>
+      <h2 className="text-xl mb-2">Daily Summary</h2>
+      <button
+        onClick={() => exportToCsv('daily-summary.csv', summary)}
+        className="mb-2 px-4 py-2 border rounded"
+      >
+        Export CSV
+      </button>
+      <ul>
+        {summary.map(s => (
+          <li key={s.name}>{s.name}: {s.total} hrs</li>
+        ))}
+      </ul>
+    </div>
+  );
+}

components/SyncButton.tsx

@@ -0,0 +1,19 @@
+"use client";
+import React from 'react';
+
+export default function SyncButton() {
+  const handleSync = async () => {
+    const res = await fetch('/api/sync');
+    const json = await res.json();
+    alert(json.message);
+  };
+
+  return (
+    <button
+      onClick={handleSync}
+      className="mb-4 px-4 py-2 border rounded"
+    >
+      Sync
+    </button>
+  );
+}

components/TeacherList.tsx

@@ -0,0 +1,58 @@
+"use client";
+import React, { useState } from 'react';
+import { useTeachers } from '../hooks/useTeachers';
+import { useAttendance } from '../hooks/useAttendance';
+import ClockButton from './ClockButton';
+
+function roundTo15Minutes(date = new Date()) {
+  const ms = 1000 * 60 * 15; // 15 minutes in ms
+  return new Date(Math.round(date.getTime() / ms) * ms);
+}
+
+function formatTime(ts?: number) {
+  if (!ts) return '--:--';
+  const date = new Date(ts);
+  return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+}
+
+export default function TeacherList() {
+  const { teachers, addTeacher } = useTeachers();
+  const { todayRecords } = useAttendance();
+  const [name, setName] = useState('');
+
+  return (
+    <div>
+      <div className="flex mb-4">
+        <input
+          type="text"
+          value={name}
+          onChange={e => setName(e.target.value)}
+          placeholder="New teacher name"
+          className="flex-grow border p-2 mr-2 rounded"
+        />
+        <button
+          onClick={() => { addTeacher(name); setName(''); }}
+          className="px-4 py-2 border rounded"
+        >
+          Add
+        </button>
+      </div>
+      <ul>
+        {teachers.map(t => {
+          const records = todayRecords.filter(r => r.teacherId === t.id);
+          const lastIn = [...records].reverse().find(r => r.type === 'in');
+          const lastOut = [...records].reverse().find(r => r.type === 'out');
+          return (
+            <li key={t.id} className="flex justify-between items-center mb-2">
+              <span>{t.name}</span>
+              <span className="mx-2 text-sm text-gray-500">
+                In: {formatTime(lastIn?.timestamp)} | Out: {formatTime(lastOut?.timestamp)}
+              </span>
+              <ClockButton teacherId={t.id} />
+            </li>
+          );
+        })}
+      </ul>
+    </div>
+  );
+}