bugfixes and some redesign

frontend/src/components/stats/SessionList.tsx

@@ -1,5 +1,7 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { useSessions } from '../../hooks/useSleepSession';
+import { Edit2, Check, X } from 'lucide-react';
+import type { SleepSessionRead } from '../../types';
 
 function formatDateTime(isoString: string): string {
   const iso = isoString.endsWith('Z') ? isoString : isoString + 'Z';
@@ -14,36 +16,121 @@ function formatDateTime(isoString: string): string {
   }).replace(',', ' ');
 }
 
+function toDatetimeLocal(isoString: string): string {
+  const iso = isoString.endsWith('Z') ? isoString : isoString + 'Z';
+  const d = new Date(iso);
+  const pad = (n: number) => n.toString().padStart(2, '0');
+  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`;
+}
+
 export function SessionList() {
-  const { sessions, isLoading } = useSessions();
+  const { sessions, isLoading, updateSession } = useSessions();
+  const [editingId, setEditingId] = useState<number | null>(null);
+  const [editStart, setEditStart] = useState('');
+  const [editEnd, setEditEnd] = useState('');
 
   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>;
 
+  const handleSave = async (id: number) => {
+    try {
+      await updateSession({
+        sessionId: id,
+        payload: {
+          start_time: new Date(editStart).toISOString(),
+          end_time: editEnd ? new Date(editEnd).toISOString() : null,
+        }
+      });
+      setEditingId(null);
+    } catch (err) {
+      console.error(err);
+      alert('Failed to update session');
+    }
+  };
+
+  const handleCancel = () => {
+    setEditingId(null);
+  };
+
+  const startEditing = (s: SleepSessionRead) => {
+    setEditingId(s.id);
+    setEditStart(toDatetimeLocal(s.start_time));
+    setEditEnd(s.end_time ? toDatetimeLocal(s.end_time) : '');
+  };
+
   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 key={s.id} className="border-b border-gray-100 last:border-0 pb-2">
+            {editingId === s.id ? (
+              <div className="flex flex-col space-y-2 py-1">
+                <div className="grid grid-cols-1 gap-2 text-xs text-gray-500">
+                  <div className="flex flex-col gap-1">
+                    <span>Start Time</span>
+                    <input
+                      type="datetime-local"
+                      className="border rounded px-1 py-0.5 text-sm text-black w-full"
+                      value={editStart}
+                      onChange={(e) => setEditStart(e.target.value)}
+                    />
+                  </div>
+                  <div className="flex flex-col gap-1">
+                    <span>End Time</span>
+                    <input
+                      type="datetime-local"
+                      className="border rounded px-1 py-0.5 text-sm text-black w-full"
+                      value={editEnd}
+                      onChange={(e) => setEditEnd(e.target.value)}
+                    />
+                  </div>
+                </div>
+                <div className="flex justify-end space-x-2">
+                  <button 
+                    onClick={handleCancel} 
+                    className="p-1 text-gray-500 hover:text-gray-700 transition-colors"
+                    title="Cancel"
+                  >
+                    <X size={18} />
+                  </button>
+                  <button 
+                    onClick={() => handleSave(s.id)} 
+                    className="p-1 text-green-600 hover:text-green-700 transition-colors"
+                    title="Save"
+                  >
+                    <Check size={18} />
+                  </button>
+                </div>
+              </div>
+            ) : (
+              <div 
+                className="flex justify-between items-center text-sm cursor-pointer hover:bg-gray-50 p-1 rounded transition-colors"
+                onClick={() => startEditing(s)}
+              >
+                <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>
+                <div className="flex items-center space-x-2">
+                  <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>
+                  <Edit2 size={14} className="text-gray-400" />
+                </div>
+              </div>
+            )}
           </div>
         ))}
       </div>
     </div>
   );
-}
+}