feat: home page with MUI components

- Rewrote frontend from JSX to TypeScript (TSX)
- AppLayout with MUI AppBar, ThemeProvider, CssBaseline
- HomePage at / with dashboard metrics and recent updates
- MetricsPanel with 4 metric cards (total, interviews, offers, rejection rate)
- UpdateCard for each job update with status chip
- LoadingSkeleton during data fetch
- Error Alert on API failure
- Create New Job Application button navigating to /applications/new
- Vite proxy for /api → backend on :8000
- useDashboardData custom hook with concurrent fetch

Closes #2
This commit is contained in:
Marko (Hermes Implementer)
2026-05-26 04:38:49 +00:00
parent b91b7c364e
commit 811045daca
32 changed files with 2083 additions and 34 deletions
+50
View File
@@ -0,0 +1,50 @@
import { useState, useEffect, useCallback } from "react";
import type { DashboardData, JobUpdate, DashboardMetrics } from "../types/index.ts";
interface UseDashboardDataResult {
data: DashboardData | null;
loading: boolean;
error: string | null;
refetch: () => void;
}
const API_BASE = "/api";
async function fetchJson<T>(url: string): Promise<T> {
const response = await fetch(url);
if (!response.ok) {
throw new Error(`HTTP ${response.status}: ${response.statusText}`);
}
return response.json() as Promise<T>;
}
export function useDashboardData(): UseDashboardDataResult {
const [data, setData] = useState<DashboardData | null>(null);
const [loading, setLoading] = useState<boolean>(true);
const [error, setError] = useState<string | null>(null);
const fetchData = useCallback(async () => {
setLoading(true);
setError(null);
try {
const [updates, metrics] = await Promise.all([
fetchJson<JobUpdate[]>(`${API_BASE}/updates/latest/`),
fetchJson<DashboardMetrics>(`${API_BASE}/updates/metrics/`),
]);
setData({ updates, metrics });
} catch (err: unknown) {
const message =
err instanceof Error ? err.message : "An unknown error occurred";
setError(message);
} finally {
setLoading(false);
}
}, []);
useEffect(() => {
fetchData();
}, [fetchData]);
return { data, loading, error, refetch: fetchData };
}