Implement: Home Page with MUI Components (#13)

Reviewed and merged by Reid (Hermes Reviewer) Co-authored-by: crisleo-hermes <hermes@codescripters.org> Co-committed-by: crisleo-hermes <hermes@codescripters.org>
2026-05-26 06:21:33 +00:00
parent b91b7c364e
commit 5b6f628380
32 changed files with 2092 additions and 34 deletions
@@ -0,0 +1,72 @@
+import type { ReactNode } from "react";
+import { useNavigate } from "react-router-dom";
+import Box from "@mui/material/Box";
+import Typography from "@mui/material/Typography";
+import Button from "@mui/material/Button";
+import Grid from "@mui/material/Grid";
+import Alert from "@mui/material/Alert";
+import AddIcon from "@mui/icons-material/Add";
+import UpdateCard from "../components/UpdateCard.tsx";
+import MetricsPanel from "../components/MetricsPanel.tsx";
+import LoadingSkeleton from "../components/LoadingSkeleton.tsx";
+import { useDashboardData } from "../hooks/useDashboardData.ts";
+
+export default function HomePage(): ReactNode {
+  const navigate = useNavigate();
+  const { data, loading, error } = useDashboardData();
+
+  if (loading) {
+    return <LoadingSkeleton />;
+  }
+
+  return (
+    <Box>
+      <Typography variant="h4" component="h2" gutterBottom sx={{ fontWeight: 600 }}>
+        Dashboard
+      </Typography>
+
+      {error && (
+        <Alert severity="error" sx={{ mb: 3 }}>
+          Failed to load dashboard data: {error}
+        </Alert>
+      )}
+
+      {data && (
+        <>
+          <Box sx={{ mb: 4 }}>
+            <MetricsPanel metrics={data.metrics} />
+          </Box>
+
+          <Box sx={{ mb: 3, display: "flex", justifyContent: "flex-end" }}>
+            <Button
+              variant="contained"
+              size="large"
+              startIcon={<AddIcon />}
+              onClick={() => navigate("/applications/new")}
+            >
+              Create New Job Application
+            </Button>
+          </Box>
+
+          <Typography variant="h5" component="h3" gutterBottom sx={{ fontWeight: 600 }}>
+            Recent Updates
+          </Typography>
+
+          <Grid container spacing={3}>
+            {data.updates.map((update) => (
+              <Grid key={update.id} size={{ xs: 12, sm: 6, md: 4 }}>
+                <UpdateCard update={update} />
+              </Grid>
+            ))}
+          </Grid>
+
+          {data.updates.length === 0 && (
+            <Typography variant="body1" color="text.secondary" sx={{ mt: 2 }}>
+              No updates yet. Create your first job application to get started.
+            </Typography>
+          )}
+        </>
+      )}
+    </Box>
+  );
+}