jacobh2/babymonitor
1
0
Fork 0
Code Issues Actions Packages Projects Releases Wiki Activity

Update stats
Build Backend / build (push) Successful in 1m59s
Details
Build Frontend / build (push) Failing after 2m55s
Details

Browse Source
This commit is contained in:
Jacob Hagstedt
2026-05-31 09:23:50 +02:00
parent 7d9c22d5d3
commit 7061e78305
9 changed files with 173 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/stats/SummaryCards.tsx
+37 -15
View File
@@ -10,24 +10,46 @@ const SummaryCards: React.FC<SummaryCardsProps> = ({ summary }) => {
if (!summary) return null;
return (
<div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
<div className="bg-white p-6 rounded-[2rem] shadow-md border border-gray-100 flex items-center space-x-4">
<div className="p-3 bg-indigo-50 rounded-2xl text-indigo-600">
<Moon size={28} />
<div className="bg-white p-6 rounded-[2rem] shadow-md border border-gray-100">
<div className="grid grid-cols-2 gap-6">
<div className="flex items-center space-x-4">
<div className="p-3 bg-indigo-50 rounded-2xl text-indigo-600">
<Moon size={24} />
</div>
<div>
<p className="text-xs font-medium text-gray-500">Total sleeps in period</p>
<p className="text-lg font-bold text-gray-900">{summary.total_sleeps}</p>
</div>
</div>
<div>
<p className="text-sm font-medium text-gray-500">Total Sleeps</p>
<p className="text-2xl font-bold text-gray-900">{summary.total_sleeps}</p>
</div>
</div>
<div className="bg-white p-6 rounded-[2rem] shadow-md border border-gray-100 flex items-center space-x-4">
<div className="p-3 bg-amber-50 rounded-2xl text-amber-600">
<Calendar size={28} />
<div className="flex items-center space-x-4">
<div className="p-3 bg-amber-50 rounded-2xl text-amber-600">
<Calendar size={24} />
</div>
<div>
<p className="text-xs font-medium text-gray-500">Avg sleeps per day in period</p>
<p className="text-lg font-bold text-gray-900">{summary.avg_sleeps_per_day.toFixed(1)}</p>
</div>
</div>
<div>
<p className="text-sm font-medium text-gray-500">Avg Sleeps / Day</p>
<p className="text-2xl font-bold text-gray-900">{summary.avg_sleeps_per_day.toFixed(1)}</p>
<div className="flex items-center space-x-4">
<div className="p-3 bg-indigo-100 rounded-2xl text-indigo-700">
<Moon size={24} />
</div>
<div>
<p className="text-xs font-medium text-gray-500">Total sleeps (all time)</p>
<p className="text-lg font-bold text-gray-900">{summary.total_sleeps_all_time}</p>
</div>
</div>
<div className="flex items-center space-x-4">
<div className="p-3 bg-amber-100 rounded-2xl text-amber-700">
<Calendar size={24} />
</div>
<div>
<p className="text-xs font-medium text-gray-500">Avg sleeps per day (all time)</p>
<p className="text-lg font-bold text-gray-900">{summary.avg_sleeps_per_day_all_time.toFixed(1)}</p>
</div>
</div>
</div>
</div>
frontend/src/types/index.ts
+2
View File
@@ -1,6 +1,8 @@
export interface SummaryResponse {
total_sleeps: number;
avg_sleeps_per_day: number;
total_sleeps_all_time: number;
avg_sleeps_per_day_all_time: number;
}
export interface SleepSession {