Initial commit

2026-04-24 08:02:13 +02:00
commit 867c06295c
76 changed files with 10573 additions and 0 deletions
@@ -0,0 +1,49 @@
+import React from 'react';
+import { useSessions } from '../../hooks/useSleepSession';
+
+function formatDateTime(isoString: string): string {
+  const iso = isoString.endsWith('Z') ? isoString : isoString + 'Z';
+  const d = new Date(iso);
+  return d.toLocaleString('sv-SE', {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit',
+    hour12: false
+  }).replace(',', ' ');
+}
+
+export function SessionList() {
+  const { sessions, isLoading } = useSessions();
+
+  if (isLoading) return <div className="text-center p-4">Loading sessions...</div>;
+  if (!sessions.length) return <div className="text-center p-4 text-gray-500">No sessions recorded.</div>;
+
+  return (
+    <div className="bg-white p-4 rounded-xl shadow-sm border border-gray-200">
+      <h3 className="text-lg font-semibold mb-4 text-gray-800">Sleep Sessions</h3>
+      <div className="space-y-2">
+        {sessions.map((s) => (
+          <div key={s.id} className="flex justify-between items-center text-sm border-b border-gray-100 pb-2">
+            <div className="flex flex-col">
+              <span className="text-gray-900 font-medium">
+                {formatDateTime(s.start_time)}
+              </span>
+              <span className="text-gray-500 text-xs">
+                {s.end_time
+                  ? `${formatDateTime(s.start_time)} → ${formatDateTime(s.end_time)}`
+                  : 'In progress'}
+              </span>
+            </div>
+            <span className="text-blue-600 font-mono text-sm">
+              {s.end_time && s.start_time
+                ? `${Math.round((new Date(s.end_time + 'Z').getTime() - new Date(s.start_time + 'Z').getTime()) / 60000)} min`
+                : '—'}
+            </span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}