Initial commit

2026-04-24 08:02:13 +02:00
commit 867c06295c
76 changed files with 10573 additions and 0 deletions
@@ -0,0 +1,53 @@
+import React from 'react';
+import { useStats } from '../../hooks/useStats';
+
+interface TimetableProps {
+  from_date: string;
+  to_date: string;
+  day_start: string;
+  day_end: string;
+};
+
+const Timetable: React.FC<TimetableProps> = ({ from_date, to_date, day_start, day_end }) => {
+  const { timetable, isLoading } = useStats(from_date, to_date, day_start, day_end);
+
+  if (isLoading) return <div className="text-center p-4">Loading timetable...</div>;
+  if (!timetable?.slots || timetable.slots.length === 0) {
+    return <div className="text-center p-4 text-gray-500">No data available for this period.</div>;
+  }
+
+  // Grouping slots by date to make it easier to render rows
+  const groupedSlots = timetable.slots.reduce((acc: any, slot) => {
+    if (!acc[slot.date]) acc[slot.date] = [];
+    acc[slot.date].push(slot);
+    return acc;
+  }, {});
+
+  return (
+    <div className="bg-white p-4 rounded-xl shadow-sm border border-gray-200 overflow-x-auto">
+      <h3 className="text-lg font-semibold mb-4 text-gray-800">Sleep Timetable</h3>
+      <div className="min-w-[800px]">
+        {Object.keys(groupedSlots).map((date) => (
+          <div key={date} className="mb-6 last:mb-0">
+            <h4 className="text-sm font-medium text-gray-500 mb-2">{date}</h4>
+            <div className="grid grid-cols-[repeat(auto-fill,minmax(20px,1fr))] gap-1">
+              {groupedSlots[date].map((slot: any) => (
+<div
+  key={`${date}-${slot.slot_start}`}
+  className={`h-6 w-full rounded-sm ${
+    slot.sleeping ? 'bg-blue-900' : 'bg-gray-100'
+  }`}
+  title={`${slot.slot_start} - ${slot.slot_end}`}
+>
+  <span className="text-[10px] text-white/50">{slot.slot_start}</span>
+</div>
+              ))}
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default Timetable;