{car.name}
-{car.make} {car.model} ({car.year})
-Fuel Type: {car.fuelType}
-
-
- β Add Mileage
-
-
- β Add Fill-Up
-
-
- π View Stats
-
+
+
);
diff --git a/src/app/dashboard/cars/[carId]/stats/page.tsx b/src/app/dashboard/cars/[carId]/stats/page.tsx
index da98e35..01d65cc 100644
--- a/src/app/dashboard/cars/[carId]/stats/page.tsx
+++ b/src/app/dashboard/cars/[carId]/stats/page.tsx
@@ -1,7 +1,7 @@
import { getSession } from '@/lib/auth';
import { prisma } from '@/lib/prisma';
import { redirect } from 'next/navigation';
-import StatCard from '@/components/StatCard';
+import StatsPageClient from '@/components/StatsPageClient';
interface StatsProps {
params: {
@@ -10,60 +10,28 @@ interface StatsProps {
}
export default async function StatsPage({ params }: StatsProps) {
- const session = await getSession();
- if (!session) redirect('/auth/login');
+ let fillUpsWithCarName = [];
+ let error = null;
+ try {
+ const session = await getSession();
+ if (!session) redirect('/auth/login');
- const car = await prisma.car.findFirst({
- where: {
- id: params.carId,
- user: { email: session.user?.email || '' },
- },
- include: {
- fillUps: {
- orderBy: { mileage: 'asc' },
+ const car = await prisma.car.findFirst({
+ where: {
+ id: params.carId,
+ user: { email: session.user?.email || '' },
},
- },
- });
+ include: {
+ fillUps: {
+ orderBy: { mileage: 'asc' },
+ },
+ },
+ });
- if (!car) return
-
- );
+ if (!car) throw new Error('Car not found or unauthorized.');
+ fillUpsWithCarName = car.fillUps.map(f => ({ ...f, car: { name: car.name, fuelType: car.fuelType } }));
+ } catch (e: any) {
+ error = e?.message || 'An unexpected error occurred.';
}
-
- // Compute stats
- const first = fillUps[0];
- const last = fillUps[fillUps.length - 1];
-
- const totalDistance = last.mileage - first.mileage;
- const totalLiters = fillUps.slice(1).reduce((sum, f) => sum + f.liters, 0); // ignore first fill
- const totalCost = fillUps.slice(1).reduce((sum, f) => sum + f.cost, 0);
-
- const avgConsumption = (totalLiters / totalDistance) * 100; // L/100km
- const costPerKm = totalCost / totalDistance;
-
- return (
-
-
- );
+ return
-
);
diff --git a/src/app/dashboard/page.tsx b/src/app/dashboard/page.tsx
index 73624bf..060aa44 100644
--- a/src/app/dashboard/page.tsx
+++ b/src/app/dashboard/page.tsx
@@ -1,39 +1,62 @@
-import Link from 'next/link';
import { getSession } from '@/lib/auth';
import { prisma } from '@/lib/prisma';
+import Link from 'next/link';
import { redirect } from 'next/navigation';
-import CarCard from '@/components/CarCard';
+import CarGrid from '@/components/CarGrid';
+import RecentActivity from '@/components/RecentActivity';
export default async function DashboardPage() {
const session = await getSession();
if (!session) redirect('/auth/login');
const userEmail = session.user.email!;
- const user = await prisma.user.findUnique({
- where: { email: userEmail },
- include: { cars: true },
+ // Fetch cars with last fill-up and mileage entries
+ const cars = await prisma.car.findMany({
+ where: { user: { email: userEmail } },
+ include: {
+ fillUps: { orderBy: { date: 'desc' }, take: 1 },
+ mileage: { orderBy: { date: 'desc' }, take: 5 }, // fixed: use 'mileage' not 'mileageEntries'
+ },
});
return (
-
-
+ {/* Car Icon & Header */}
+
+
+ {/* Car Details */}
+ + {car.name} + {car.year} +
+ {fuelMeta[car.fuelType]?.icon}{car.fuelType} +
+
+ {/* Actions */}
+
+
+
+
+
+
+
+ {fuelMeta[car.fuelType]?.icon}
+ Fuel:
+ {car.fuelType}
+
+
+
+ β Add Mileage
+
+
+ β Add Fill-Up
+
+
+ π View Stats
+
+
Car not found or unauthorized.
;
- const fillUps = car.fillUps;
-
- if (fillUps.length < 2) {
- return (
-
- β½
-
- Not Enough Data
-Add at least 2 fill-ups to see your fuel statistics and insights.
- β Add Fill-Up -- π Fuel Stats -
-
-
- Add New Car
-
-
+ {/* Personalized Greeting */}
+
Your Cars
- +
+
+ {session.user?.name?.[0]?.toUpperCase() || session.user?.email?.[0]?.toUpperCase() || 'U'}
+
+
+
+
+
+ Welcome back{session.user?.name ? `, ${session.user.name.split(' ')[0]}` : ''}!
+Ready to track your next fill-up?
+
+
- {user?.cars.length ? (
- Your Cars
+ + Add Car-
- {user.cars.map((car) => (
-
-
+
);
}
diff --git a/src/app/favicon.ico b/src/app/favicon.ico
deleted file mode 100644
index 718d6fe..0000000
Binary files a/src/app/favicon.ico and /dev/null differ
diff --git a/src/app/globals.css b/src/app/globals.css
index 1f0af3e..7a9c4ab 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -8,22 +8,29 @@
--accent: #a21caf; /* purple-700 */
--muted: #f3f4f6; /* gray-100 */
--border: #e5e7eb; /* gray-200 */
+ --statcard-primary-bg: #e0e7ff; /* indigo-100 */
+ --statcard-primary-border: #2563eb; /* blue-600 */
+ --statcard-secondary-bg: #dcfce7; /* green-100 */
+ --statcard-secondary-border: #22c55e; /* green-500 */
+ --statcard-accent-bg: #f3e8ff; /* purple-100 */
+ --statcard-accent-border: #a21caf; /* purple-700 */
+ --statcard-default-bg: var(--background);
+ --statcard-default-border: var(--border);
}
-@theme inline {
- --color-background: var(--background);
- --color-foreground: var(--foreground);
- --font-sans: var(--font-geist-sans);
- --font-mono: var(--font-geist-mono);
-}
-
-@media (prefers-color-scheme: dark) {
- :root {
- --background: #0a0a0a;
- --foreground: #ededed;
- --muted: #171717;
- --border: #232323;
- }
+.dark {
+ --background: #0a0a0a;
+ --foreground: #ededed;
+ --muted: #171717;
+ --border: #232323;
+ --statcard-primary-bg: #1e293b; /* slate-800 */
+ --statcard-primary-border: #2563eb; /* blue-600 */
+ --statcard-secondary-bg: #052e16; /* green-950 */
+ --statcard-secondary-border: #22c55e; /* green-500 */
+ --statcard-accent-bg: #3b0764; /* purple-950 */
+ --statcard-accent-border: #a21caf; /* purple-700 */
+ --statcard-default-bg: var(--background);
+ --statcard-default-border: var(--border);
}
body {
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index a6003b8..9a310df 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -24,8 +24,24 @@ export default async function RootLayout({
}: Readonly<{
children: React.ReactNode;
}>) {
+ // This script will set the correct theme class on before hydration
+ const setThemeScript = `
+ (function() {
+ try {
+ var theme = localStorage.getItem('theme');
+ if (theme === 'dark' || (!theme && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+ document.documentElement.classList.add('dark');
+ } else {
+ document.documentElement.classList.remove('dark');
+ }
+ } catch (e) {}
+ })();
+ `;
return (
+
+
+
diff --git a/src/components/Achievements.tsx b/src/components/Achievements.tsx
new file mode 100644
index 0000000..31cf606
--- /dev/null
+++ b/src/components/Achievements.tsx
@@ -0,0 +1,30 @@
+import React from "react";
+
+export type Achievement = {
+ id: string;
+ label: string;
+ description: string;
+ icon: string;
+ achieved: boolean;
+};
+
+export default function Achievements({ achievements }: { achievements: Achievement[] }) {
+ return (
+
No cars added yet.
- Add your first car +
+
+
)}
+
+ {/* Recent Activity Section */}
+ No cars added yet.
+ Add your first car to get started!
+
+ + Add Car
+
Recent Activity
+
+ {achievements.map(a => (
+
+ );
+}
diff --git a/src/components/AchievementsSkeleton.tsx b/src/components/AchievementsSkeleton.tsx
new file mode 100644
index 0000000..f66fcbd
--- /dev/null
+++ b/src/components/AchievementsSkeleton.tsx
@@ -0,0 +1,13 @@
+export default function AchievementsSkeleton() {
+ return (
+
+ {a.icon}
+ {a.label}
+ {a.description}
+
+ ))}
+
+ {[...Array(4)].map((_, i) => (
+
+ );
+}
diff --git a/src/components/CarCard.tsx b/src/components/CarCard.tsx
index 7f7cd1a..1538370 100644
--- a/src/components/CarCard.tsx
+++ b/src/components/CarCard.tsx
@@ -1,13 +1,44 @@
-import { Car } from '@prisma/client';
import Link from 'next/link';
-export default function CarCard({ car }: { car: Car }) {
+// Removed unused Car import and suppressed 'any' type warning for pragmatic dashboard use
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export default function CarCard({ car }: { car: any }) {
+ const lastFill = car.fillUps?.[0];
+ const mileageEntries = car.mileage || [];
+ const avgMileage = mileageEntries.length > 1
+ ? Math.round((mileageEntries[0].mileage - mileageEntries[mileageEntries.length - 1].mileage) / (mileageEntries.length - 1))
+ : null;
+
+ function getFuelBadgeColor(fuelType: string) {
+ switch (fuelType) {
+ case 'GASOLINE': return 'bg-blue-200 text-blue-800 dark:bg-blue-400 dark:text-blue-900';
+ case 'DIESEL': return 'bg-yellow-100 text-yellow-800 dark:bg-yellow-300 dark:text-yellow-900';
+ case 'LPG': return 'bg-purple-100 text-purple-800 dark:bg-purple-300 dark:text-purple-900';
+ case 'ELECTRIC': return 'bg-green-100 text-green-800 dark:bg-green-300 dark:text-green-900';
+ default: return 'bg-gray-200 text-gray-700 dark:bg-gray-400 dark:text-gray-900';
+ }
+ }
+
return (
-
-
+
+
+
+
+ ))}
+
-
Dashboard
{isLoggedIn && Add Car }
+
{car.name}
-{car.make} {car.model} ({car.year})
-Fuel Type: {car.fuelType}
+ +
+
);
diff --git a/src/components/CarGrid.tsx b/src/components/CarGrid.tsx
new file mode 100644
index 0000000..ded9cd5
--- /dev/null
+++ b/src/components/CarGrid.tsx
@@ -0,0 +1,56 @@
+"use client";
+import { useState, useMemo } from 'react';
+import CarCard from '@/components/CarCard';
+
+const fuelTypes = ['ALL', 'GASOLINE', 'DIESEL', 'LPG', 'ELECTRIC'];
+const sortOptions = [
+ { value: 'recent', label: 'Most Recent' },
+ { value: 'name', label: 'Name (A-Z)' },
+ { value: 'year', label: 'Year (Newest)' },
+];
+
+export default function CarGrid({ cars }: { cars: any[] }) {
+ const [fuel, setFuel] = useState('ALL');
+ const [sort, setSort] = useState('recent');
+
+ const filtered = useMemo(() => {
+ let filtered = fuel === 'ALL' ? cars : cars.filter((c) => c.fuelType === fuel);
+ if (sort === 'name') filtered = [...filtered].sort((a, b) => a.name.localeCompare(b.name));
+ else if (sort === 'year') filtered = [...filtered].sort((a, b) => b.year - a.year);
+ else filtered = [...filtered].sort((a, b) => b.id.localeCompare(a.id)); // fallback: recent
+ return filtered;
+ }, [cars, fuel, sort]);
+
+ return (
+
+
+ {car.name}
+ {car.fuelType} +{car.make} {car.model} ({car.year})
+
+ {lastFill ? (
+
Last Fill-Up: {new Date(lastFill.date).toLocaleDateString()} ({lastFill.mileage} km)
+ ) : (
+ Last Fill-Up: Not enough data
+ )}
+ {avgMileage !== null ? (
+ Avg. Mileage: {avgMileage} km
+ ) : (
+ Avg. Mileage: Not enough data
+ )}
+
+
+ );
+}
diff --git a/src/components/ChartSkeleton.tsx b/src/components/ChartSkeleton.tsx
new file mode 100644
index 0000000..1f916f3
--- /dev/null
+++ b/src/components/ChartSkeleton.tsx
@@ -0,0 +1,7 @@
+export default function ChartSkeleton() {
+ return (
+
+
+
+
+
+
+ {filtered.length ? (
+ -
+ {filtered.map((car) => (
+
-
+
+
+ ))}
+
+
+
+ )}
+ No cars match your filter.
+
+
+
+ );
+}
diff --git a/src/components/ClientNavbar.tsx b/src/components/ClientNavbar.tsx
index d50fd41..5e908aa 100644
--- a/src/components/ClientNavbar.tsx
+++ b/src/components/ClientNavbar.tsx
@@ -3,6 +3,7 @@ import Link from "next/link";
import { usePathname } from "next/navigation";
import { useState } from "react";
import { useSession } from "next-auth/react";
+import ThemeToggle from "./ThemeToggle";
export default function ClientNavbar() {
const { data: session } = useSession();
@@ -16,7 +17,8 @@ export default function ClientNavbar() {
return (
{children}
@@ -34,13 +36,14 @@ export default function ClientNavbar() {
{userInitial}
@@ -72,7 +75,7 @@ export default function ClientNavbar() {
-
{fill.mileage} km - {fill.liters} L
-
+ (null);
+ const tooltipId = `tooltip-${label.replace(/\s+/g, '-')}`;
+
+ // Close tooltip on Escape key
+ useEffect(() => {
+ if (!open) return;
+ function onKeyDown(e: KeyboardEvent) {
+ if (e.key === 'Escape') setOpen(false);
+ }
+ window.addEventListener('keydown', onKeyDown);
+ return () => window.removeEventListener('keydown', onKeyDown);
+ }, [open]);
+
+ return (
+
+
+ {open && (
+
+
diff --git a/src/components/FuelStatsChart.tsx b/src/components/FuelStatsChart.tsx
new file mode 100644
index 0000000..9ae8476
--- /dev/null
+++ b/src/components/FuelStatsChart.tsx
@@ -0,0 +1,80 @@
+"use client";
+import { LineChart, Line, XAxis, YAxis, Tooltip as RechartsTooltip, ResponsiveContainer, CartesianGrid } from 'recharts';
+import InfoTooltip from "./InfoTooltip";
+import { Units } from './UnitsToggle';
+
+interface FillUp {
+ date: string;
+ mileage: number;
+ liters: number;
+ cost: number;
+ currency: string;
+}
+
+function kmToMiles(km: number) { return km * 0.621371; }
+function litersToGallons(l: number) { return l * 0.264172; }
+function lPer100kmToMpg(l100: number) { return l100 > 0 ? 235.215 / l100 : 0; }
+
+export default function FuelStatsChart({ fillUps, units = 'metric' }: { fillUps: (FillUp & { car?: { fuelType?: string } })[]; units?: Units }) {
+ if (!fillUps || fillUps.length < 2) return null;
+
+ // Get fuel type from first fill-up
+ const fuelType = fillUps[0]?.car?.fuelType;
+ const isElectric = fuelType === 'ELECTRIC';
+ // Always use metric for electric cars
+ const displayUnits = isElectric ? 'metric' : units;
+
+ // Prepare data: skip first fill (no consumption calc)
+ const chartData = fillUps.slice(1).map((f, i) => {
+ const prev = fillUps[i];
+ const distance = displayUnits === 'imperial' ? kmToMiles(f.mileage - prev.mileage) : f.mileage - prev.mileage;
+ const liters = displayUnits === 'imperial' ? litersToGallons(f.liters) : f.liters;
+ const consumption = isElectric
+ ? (liters / distance) * 100
+ : (displayUnits === 'imperial'
+ ? lPer100kmToMpg((f.liters / (f.mileage - prev.mileage)) * 100)
+ : (liters / distance) * 100);
+ return {
+ date: new Date(f.date).toLocaleDateString(),
+ consumption: Number.isFinite(consumption) ? Number(consumption.toFixed(2)) : 0,
+ cost: f.cost,
+ mileage: displayUnits === 'imperial' ? kmToMiles(f.mileage) : f.mileage,
+ };
+ });
+
+ // Chart title with info icon
+ const chartTitle = (
+
+ Fuel Consumption Over Time
+
+ {fill.mileage} km - {fill.liters} {isElectric ? 'kWh' : 'L'}
+
+
{fill.cost} {fill.currency} β {new Date(fill.date).toLocaleString()}
+
+ );
+}
diff --git a/src/components/InfoTooltip.tsx b/src/components/InfoTooltip.tsx
new file mode 100644
index 0000000..0ca5c93
--- /dev/null
+++ b/src/components/InfoTooltip.tsx
@@ -0,0 +1,50 @@
+import { useState, useRef, useEffect } from 'react';
+
+interface InfoTooltipProps {
+ label: string;
+ description: string;
+}
+
+export default function InfoTooltip({ label, description }: InfoTooltipProps) {
+ const [open, setOpen] = useState(false);
+ const iconRef = useRef{chartTitle}
+
+
+
+ v}
+ label={{ value: isElectric ? 'kWh/100km' : (displayUnits === 'imperial' ? 'MPG' : 'L/100km'), angle: -90, position: 'insideLeft', offset: 10 }}
+ />
+
+
+
+ {/* Y-axis info icon for screen readers, visually above chart */}
+ Fuel consumption is measured in {isElectric ? 'kilowatt-hours per 100 kilometers (kWh/100km)' : (displayUnits === 'imperial' ? 'miles per gallon (MPG)' : 'liters per 100 kilometers (L/100km)')}.
+
+ {description}
+
+ )}
+
+ );
+}
diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
index 16133f7..243ec69 100644
--- a/src/components/Layout.tsx
+++ b/src/components/Layout.tsx
@@ -1,6 +1,6 @@
export default function Layout({ children }: { children: React.ReactNode }) {
return (
-
+
{children}
);
diff --git a/src/components/RecentActivity.tsx b/src/components/RecentActivity.tsx
new file mode 100644
index 0000000..2decfe9
--- /dev/null
+++ b/src/components/RecentActivity.tsx
@@ -0,0 +1,58 @@
+"use client";
+import { useEffect, useState } from 'react';
+
+interface ActivityItem {
+ type: 'fillup' | 'mileage';
+ id: string;
+ car: { name: string; make: string; model: string };
+ mileage: number;
+ liters?: number;
+ cost?: number;
+ currency?: string;
+ date: string;
+}
+
+export default function RecentActivity() {
+ const [activity, setActivity] = useState([]);
+ const [loading, setLoading] = useState(true);
+
+ useEffect(() => {
+ fetch('/api/activity')
+ .then((res) => res.json())
+ .then((data) => {
+ setActivity(data);
+ setLoading(false);
+ })
+ .catch(() => setLoading(false));
+ }, []);
+
+ if (loading) return
Loading activity...
;
+ if (!activity.length) return (
+
+
+
+ );
+
+ return (
+ No recent activity yet.
+ Start by logging a fill-up or mileage entry!
+ -
+ {activity.map((item) => (
+
-
+
+ +++ {item.type === 'fillup' ? 'Fill-Up' : 'Mileage'} for {item.car.name} +++ {item.type === 'fillup' + ? `${item.liters} L, ${item.mileage} km${item.cost ? `, ${item.cost} ${item.currency}` : ''}` + : `${item.mileage} km`} + {' '}on {new Date(item.date).toLocaleDateString()} ++
+ ))}
+
- {icon && {icon}}
-
- (30);
+ const [units, setUnits] = useState('metric');
+ const now = useMemo(() => new Date(), []);
+ const filtered = useMemo(() => {
+ if (!range) return fillUps;
+ return fillUps.filter(f => {
+ const d = typeof f.date === 'string' ? new Date(f.date) : f.date;
+ return d >= new Date(now.getTime() - (range ?? 30) * 24 * 60 * 60 * 1000);
+ });
+ }, [fillUps, range, now]);
+
+ if (error) {
+ return (
+
+
+
+ );
+ }
+
+ if (loading) {
+ return (
+
+
+ );
+ }
+
+ // Comparative insights logic
+ const last30 = filtered;
+ const prev30 = fillUps.filter(f => {
+ const d = typeof f.date === 'string' ? new Date(f.date) : f.date;
+ return d < new Date(now.getTime() - (range ?? 30) * 24 * 60 * 60 * 1000) && d >= new Date(now.getTime() - 2 * (range ?? 30) * 24 * 60 * 60 * 1000);
+ });
+ function avgCons(list: FillUp[]) {
+ if (list.length < 2) return null;
+ let totalDist = 0, totalLit = 0;
+ for (let i = 1; i < list.length; i++) {
+ totalDist += list[i].mileage - list[i - 1].mileage;
+ totalLit += list[i].liters;
+ }
+ return totalDist > 0 ? (totalLit / totalDist) * 100 : null;
+ }
+ const avgLast30 = avgCons(last30);
+ const avgPrev30 = avgCons(prev30);
+ let comparison = null;
+ if (avgLast30 && avgPrev30) {
+ const diff = avgLast30 - avgPrev30;
+ const percent = (diff / avgPrev30) * 100;
+ comparison = {
+ improved: diff < 0,
+ percent: Math.abs(percent).toFixed(1),
+ diff: diff.toFixed(2),
+ };
+ }
+ let insight = '';
+ if (comparison) {
+ if (comparison.improved) {
+ insight = `Great job! Your average fuel consumption improved by ${comparison.percent}% over the selected period.`;
+ } else if (Number(comparison.percent) > 0) {
+ insight = `Heads up! Your average fuel consumption increased by ${comparison.percent}% over the selected period.`;
+ }
+ }
+
+ // Stats calculations
+ if (filtered.length < 2) {
+ return (
+
+
+ );
+ }
+
+ // Conversion helpers
+ function kmToMiles(km: number) { return km * 0.621371; }
+ function litersToGallons(l: number) { return l * 0.264172; }
+ function lPer100kmToMpg(l100: number) { return l100 > 0 ? 235.215 / l100 : 0; }
+
+ const first = filtered[0];
+ const last = filtered[filtered.length - 1];
+ const totalDistance = units === 'imperial' ? kmToMiles(last.mileage - first.mileage) : last.mileage - first.mileage;
+ const totalLiters = filtered.slice(1).reduce((sum, f) => sum + (units === 'imperial' ? litersToGallons(f.liters) : f.liters), 0);
+ const totalCost = filtered.slice(1).reduce((sum, f) => sum + f.cost, 0);
+ const avgConsumption = (() => {
+ const dist = last.mileage - first.mileage;
+ const lit = filtered.slice(1).reduce((sum, f) => sum + f.liters, 0);
+ if (units === 'imperial') {
+ return lPer100kmToMpg((lit / dist) * 100);
+ } else {
+ return (lit / dist) * 100;
+ }
+ })();
+ const costPerDist = totalCost / (units === 'imperial' ? kmToMiles(last.mileage - first.mileage) : last.mileage - first.mileage);
+ const chartFillUps = filtered.map(f => ({ ...f, date: typeof f.date === 'string' ? f.date : f.date.toISOString() }));
+
+ // Achievement logic
+ const numFillUps = filtered.length;
+ const totalKm = last.mileage - first.mileage;
+ const bestEfficiency = Math.min(...filtered.slice(1).map((f, i) => {
+ if (i === 0) return Infinity;
+ const dist = filtered[i].mileage - filtered[i - 1].mileage;
+ return dist > 0 ? (filtered[i].liters / dist) * 100 : Infinity;
+ }));
+ const achievements: Achievement[] = [
+ {
+ id: 'first-fill',
+ label: 'First Fill-Up',
+ description: 'Logged your first fill-up!',
+ icon: 'β½',
+ achieved: numFillUps >= 1,
+ },
+ {
+ id: 'ten-fills',
+ label: '10 Fill-Ups',
+ description: 'Logged 10 fill-ups!',
+ icon: 'π',
+ achieved: numFillUps >= 10,
+ },
+ {
+ id: '1000km',
+ label: '1,000 km',
+ description: 'Tracked 1,000 km!',
+ icon: 'π£οΈ',
+ achieved: totalKm >= 1000,
+ },
+ {
+ id: 'best-eff',
+ label: 'Best Efficiency',
+ description: 'Achieved <6 L/100km!',
+ icon: 'π±',
+ achieved: bestEfficiency < 6,
+ },
+ ];
+
+ // Get fuel type from first fill-up (all fill-ups for a car have the same type)
+ const fuelType = fillUps[0]?.car?.fuelType;
+ const isElectric = fuelType === 'ELECTRIC';
+ // If electric, always use metric units
+ const displayUnits = isElectric ? 'metric' : units;
+
+ return (
+
+
+ );
+}
diff --git a/src/components/StatsSkeleton.tsx b/src/components/StatsSkeleton.tsx
new file mode 100644
index 0000000..1bf33c0
--- /dev/null
+++ b/src/components/StatsSkeleton.tsx
@@ -0,0 +1,17 @@
+export default function StatsSkeleton() {
+ return (
+
{label}
-{value}
+
+
);
diff --git a/src/components/StatsExportButton.tsx b/src/components/StatsExportButton.tsx
new file mode 100644
index 0000000..1aa865a
--- /dev/null
+++ b/src/components/StatsExportButton.tsx
@@ -0,0 +1,50 @@
+"use client";
+
+import { Units } from './UnitsToggle';
+
+export default function StatsExportButton({ fillUps, units, isElectric: isElectricProp }: { fillUps: { car?: { fuelType?: string; name?: string }; mileage: number; liters: number; cost: number; currency: string; date: string | Date }[]; units: Units; isElectric?: boolean }) {
+ function kmToMiles(km: number) { return km * 0.621371; }
+ function litersToGallons(l: number) { return l * 0.264172; }
+
+ // Determine if electric from prop or fillUps
+ const isElectric = isElectricProp ?? (fillUps[0]?.car?.fuelType === 'ELECTRIC');
+
+ function handleExport() {
+ if (!fillUps?.length) return;
+ // Only export selected fields: car name, mileage, liters/gallons/kWh, cost, currency, date
+ const headers = [
+ "Car Name",
+ isElectric ? "Mileage (km)" : (units === 'imperial' ? "Mileage (mi)" : "Mileage (km)"),
+ isElectric ? "kWh" : (units === 'imperial' ? "Gallons" : "Liters"),
+ "Cost",
+ "Currency",
+ "Date"
+ ];
+ const rows = fillUps.map(f => [
+ f.car?.name || '',
+ isElectric ? f.mileage : (units === 'imperial' ? kmToMiles(f.mileage).toFixed(1) : f.mileage),
+ isElectric ? f.liters : (units === 'imperial' ? litersToGallons(f.liters).toFixed(2) : f.liters),
+ f.cost,
+ f.currency,
+ f.date instanceof Date ? f.date.toISOString() : f.date
+ ]);
+ const csv = [headers.join(","), ...rows.map(r => r.join(","))].join("\n");
+ const blob = new Blob([csv], { type: "text/csv" });
+ const url = URL.createObjectURL(blob);
+ const a = document.createElement("a");
+ a.href = url;
+ a.download = `car-stats-${isElectric ? 'electric' : units}.csv`;
+ a.click();
+ URL.revokeObjectURL(url);
+ }
+ return (
+
+ );
+}
diff --git a/src/components/StatsPageClient.tsx b/src/components/StatsPageClient.tsx
new file mode 100644
index 0000000..fe3c742
--- /dev/null
+++ b/src/components/StatsPageClient.tsx
@@ -0,0 +1,236 @@
+"use client";
+import FuelStatsChart from '@/components/FuelStatsChart';
+import StatCard from '@/components/StatCard';
+import StatsTimeRangeFilter from '@/components/StatsTimeRangeFilter';
+import StatsExportButton from '@/components/StatsExportButton';
+import UnitsToggle, { Units } from '@/components/UnitsToggle';
+import Achievements, { Achievement } from '@/components/Achievements';
+import StatsSkeleton from '@/components/StatsSkeleton';
+import AchievementsSkeleton from '@/components/AchievementsSkeleton';
+import ChartSkeleton from '@/components/ChartSkeleton';
+import { useMemo, useState } from 'react';
+
+interface FillUp {
+ id: string;
+ mileage: number;
+ liters: number;
+ cost: number;
+ currency: string;
+ date: string | Date;
+ car?: { fuelType?: string };
+}
+
+export default function StatsPageClient({ fillUps, carId, error, loading = false }: { fillUps: FillUp[]; carId: string; error?: string; loading?: boolean }) {
+ const [range, setRange] = useState
+ {icon && {icon}}
+
+
+ {label}
+ {info && (
+
{value}
+
+
+
+
+
+
+
+
+ π
+
+ No Stats Yet
+Add at least 2 fill-ups to unlock your personalized fuel stats, insights, and achievements. Start tracking your carβs journey today!
+ β Add Your First Fill-Up +
+
+ + π Fuel Stats +
+
+ {!isElectric && (
+
+
+
+
+
+
+
+
+
+ {comparison && (
+
+ {comparison.improved ? 'β¬οΈ' : 'β¬οΈ'}
+
+ Avg. consumption: {units === 'imperial' ? `${lPer100kmToMpg(avgLast30 ?? 0).toFixed(2)} MPG` : `${avgLast30?.toFixed(2)} L/100km`} ({comparison.improved ? '-' : '+'}{comparison.percent}%)
+ (Prev: {units === 'imperial' ? `${lPer100kmToMpg(avgPrev30 ?? 0).toFixed(2)} MPG` : `${avgPrev30?.toFixed(2)} L/100km`})
+
+
+ )}
+ {insight && (
+
+ π‘ {insight}
+
+ )}
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/src/components/StatsTimeRangeFilter.tsx b/src/components/StatsTimeRangeFilter.tsx
new file mode 100644
index 0000000..9da3679
--- /dev/null
+++ b/src/components/StatsTimeRangeFilter.tsx
@@ -0,0 +1,47 @@
+"use client";
+import { useState } from "react";
+
+const ranges = [
+ { label: "7d", value: 7, aria: "Show stats for last 7 days" },
+ { label: "30d", value: 30, aria: "Show stats for last 30 days" },
+ { label: "Year", value: 365, aria: "Show stats for last year" },
+ { label: "All", value: null, aria: "Show stats for all time" },
+];
+
+export default function StatsTimeRangeFilter({
+ value,
+ onChange,
+}: {
+ value: number | null;
+ onChange: (v: number | null) => void;
+}) {
+ return (
+
+ {[...Array(5)].map((_, i) => (
+
+
+
+
+ ))}
+
+
+
+
+
+
+ Sort by:
+
+
+ );
+}
diff --git a/src/components/ThemeToggle.tsx b/src/components/ThemeToggle.tsx
new file mode 100644
index 0000000..ba11561
--- /dev/null
+++ b/src/components/ThemeToggle.tsx
@@ -0,0 +1,45 @@
+"use client";
+import { useEffect, useState } from 'react';
+
+export default function ThemeToggle() {
+ const [theme, setTheme] = useState('system');
+
+ useEffect(() => {
+ // On mount, check localStorage or system preference
+ const stored = localStorage.getItem('theme');
+ if (stored) setTheme(stored);
+ else if (window.matchMedia('(prefers-color-scheme: dark)').matches) setTheme('dark');
+ else setTheme('light');
+ }, []);
+
+ useEffect(() => {
+ if (theme === 'system') {
+ document.documentElement.classList.remove('dark');
+ if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+ document.documentElement.classList.add('dark');
+ }
+ } else if (theme === 'dark') {
+ document.documentElement.classList.add('dark');
+ } else {
+ document.documentElement.classList.remove('dark');
+ }
+ localStorage.setItem('theme', theme);
+ }, [theme]);
+
+ return (
+
+ {ranges.map((r) => (
+
+ ))}
+
+
+
+
+
+ );
+}
diff --git a/src/components/UnitsToggle.tsx b/src/components/UnitsToggle.tsx
new file mode 100644
index 0000000..6cdbccd
--- /dev/null
+++ b/src/components/UnitsToggle.tsx
@@ -0,0 +1,43 @@
+import React from "react";
+
+export type Units = "metric" | "imperial";
+
+export default function UnitsToggle({ units, setUnits, disabled = false }: { units: Units; setUnits: (u: Units) => void; disabled?: boolean }) {
+ return (
+
+ Fuel:
+
+ );
+}
+
+
+
+