59 lines
1.8 KiB
TypeScript
59 lines
1.8 KiB
TypeScript
"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>
|
|
);
|
|
}
|