first commit. working

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>
+  );
+}