home changes for new routes

src/Header.tsx

@@ -91,6 +91,32 @@ export default function Header({
 
         <span style={{ flexGrow: 1 }} />
 
+        {/* NAV LINKS */}
+        <Box
+          sx={{
+            display: { xs: "none", md: "flex" },
+            alignItems: "center",
+            mr: 2,
+            gap: 1,
+          }}
+        >
+          {[
+            { label: "Dashboard", path: "/dashboard" },
+            { label: "Fetch", path: "/fetch-requests" },
+            { label: "Reports", path: "/reports" },
+          ].map(({ label, path }) => (
+            <Button
+              key={path}
+              color="inherit"
+              onClick={() => navigate(path)}
+              sx={{ textTransform: "none", fontWeight: 500, px: 1.5 }}
+              size="small"
+            >
+              {label}
+            </Button>
+          ))}
+        </Box>
+
         {/* AUTH SECTION */}
         {isAuthenticated ? (
           <>

src/Home.tsx

@@ -1,71 +1,180 @@
 import * as React from "react";
-import { Box, Typography, Button, Container, Stack } from "@mui/material";
+import { Box, Typography, Button, Container, Grid, Paper, Chip } from "@mui/material";
 import { useTheme, alpha } from "@mui/material/styles";
 import { useNavigate } from "react-router-dom";
+import DashboardIcon from "@mui/icons-material/Dashboard";
+import SyncIcon from "@mui/icons-material/Sync";
+import BarChartIcon from "@mui/icons-material/BarChart";
+import SettingsIcon from "@mui/icons-material/Settings";
 import ArrowForwardIcon from "@mui/icons-material/ArrowForward";
+import { useAuth } from "../react-auth";
 
-export default function Home() {
+interface FeatureCardProps {
+  icon: React.ReactNode;
+  title: string;
+  description: string;
+  path: string;
+  label?: string;
+  accent: string;
+}
+
+function FeatureCard({ icon, title, description, path, label, accent }: FeatureCardProps) {
   const navigate = useNavigate();
   const theme = useTheme();
 
+  return (
+    <Paper
+      elevation={0}
+      onClick={() => navigate(path)}
+      sx={{
+        p: 3,
+        borderRadius: 3,
+        border: "1px solid",
+        borderColor: "divider",
+        cursor: "pointer",
+        height: "100%",
+        display: "flex",
+        flexDirection: "column",
+        position: "relative",
+        overflow: "hidden",
+        transition: "all 0.25s ease",
+        "&::before": {
+          content: '""',
+          position: "absolute",
+          top: 0,
+          left: 0,
+          right: 0,
+          height: 3,
+          background: accent,
+          opacity: 0,
+          transition: "opacity 0.25s ease",
+        },
+        "&:hover": {
+          transform: "translateY(-4px)",
+          boxShadow: `0 12px 32px ${alpha(theme.palette.common.black, theme.palette.mode === "dark" ? 0.3 : 0.08)}`,
+          borderColor: "transparent",
+          "&::before": { opacity: 1 },
+        },
+      }}
+    >
+      <Box sx={{ display: "flex", alignItems: "center", gap: 1.5, mb: 1.5 }}>
+        <Box
+          sx={{
+            width: 40,
+            height: 40,
+            borderRadius: 2,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            background: alpha(accent, 0.12),
+            color: accent,
+          }}
+        >
+          {icon}
+        </Box>
+        <Typography variant="subtitle1" fontWeight={700}>
+          {title}
+        </Typography>
+      </Box>
+
+      <Typography variant="body2" color="text.secondary" sx={{ flex: 1, lineHeight: 1.6 }}>
+        {description}
+      </Typography>
+
+      {label && (
+        <Chip
+          label={label}
+          size="small"
+          variant="outlined"
+          sx={{ mt: 2, alignSelf: "flex-start", textTransform: "capitalize" }}
+        />
+      )}
+    </Paper>
+  );
+}
+
+export default function Home() {
+  const navigate = useNavigate();
+  const theme = useTheme();
+  const { currentUser } = useAuth();
+
+  const features = [
+    {
+      icon: <DashboardIcon />,
+      title: "Dashboard",
+      description: "Visualise inflows and outflows with interactive charts, drill into categories, and track trends over daily, weekly, and monthly periods.",
+      path: "/dashboard",
+      accent: theme.palette.mode === "dark" ? "#818cf8" : "#6366f1",
+    },
+    {
+      icon: <SyncIcon />,
+      title: "Fetch Requests",
+      description: "Upload bank statements or configure email ingestion to auto-import transactions. Track pipeline status from pending through to completion.",
+      path: "/fetch-requests",
+      accent: theme.palette.mode === "dark" ? "#34d399" : "#10b981",
+    },
+    {
+      icon: <BarChartIcon />,
+      title: "Report Snapshots",
+      description: "Generate cached report snapshots with custom filters — accounts, date ranges, amount bounds — then pin a snapshot on the dashboard for consistent comparisons.",
+      path: "/reports",
+      accent: theme.palette.mode === "dark" ? "#fbbf24" : "#f59e0b",
+    },
+    {
+      icon: <SettingsIcon />,
+      title: "Admin",
+      description: "Full CRUD over accounts, expenses, tags, and payors. Manage your data programmatically through the OpenAPI-driven admin panel.",
+      path: "/admin",
+      accent: theme.palette.mode === "dark" ? "#e879f9" : "#d946ef",
+    },
+  ];
+
   return (
     <Box
       sx={{
-        width: "100%",
-        minHeight: "calc(100vh - 64px)", // accounting for header
+        minHeight: "calc(100vh - 64px)",
         display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
+        flexDirection: "column",
         position: "relative",
         overflow: "hidden",
         "&::before": {
           content: '""',
           position: "absolute",
-          top: "-20%",
-          left: "-10%",
-          width: "50%",
-          height: "60%",
-          background: "radial-gradient(circle, rgba(99,102,241,0.15) 0%, rgba(0,0,0,0) 70%)",
+          top: "-15%",
+          left: "-8%",
+          width: "45%",
+          height: "55%",
+          background: "radial-gradient(circle, rgba(99,102,241,0.12) 0%, transparent 70%)",
           zIndex: 0,
         },
         "&::after": {
           content: '""',
           position: "absolute",
-          bottom: "-20%",
-          right: "-10%",
-          width: "50%",
-          height: "60%",
-          background: "radial-gradient(circle, rgba(236,72,153,0.15) 0%, rgba(0,0,0,0) 70%)",
+          bottom: "-15%",
+          right: "-8%",
+          width: "45%",
+          height: "55%",
+          background: "radial-gradient(circle, rgba(236,72,153,0.1) 0%, transparent 70%)",
           zIndex: 0,
         },
       }}
     >
-      <Container maxWidth="lg" sx={{ position: "relative", zIndex: 1 }}>
-        <Stack
-          spacing={4}
-          alignItems="center"
-          textAlign="center"
+      <Container maxWidth="lg" sx={{ position: "relative", zIndex: 1, flex: 1, display: "flex", flexDirection: "column", justifyContent: "center", py: 6 }}>
+        <Box
           sx={{
-            p: { xs: 4, md: 8 },
-            backdropFilter: "blur(20px)",
-            backgroundColor: (t) => alpha(t.palette.common.white, t.palette.mode === "dark" ? 0.04 : 0.6),
-            border: "1px solid",
-            borderColor: "divider",
-            borderRadius: 4,
-            boxShadow: (t) =>
-              t.palette.mode === "dark"
-                ? "0 8px 32px 0 rgba(0, 0, 0, 0.5)"
-                : "0 8px 32px 0 rgba(31, 38, 135, 0.07)",
+            textAlign: "center",
+            mb: 6,
           }}
         >
           <Typography
             variant="h1"
             sx={{
               fontWeight: 800,
-              fontSize: { xs: "3rem", md: "5rem" },
-              background: "linear-gradient(45deg, #6366f1 30%, #ec4899 90%)",
+              fontSize: { xs: "2.5rem", sm: "3.5rem", md: "5rem" },
+              background: "linear-gradient(135deg, #6366f1 0%, #ec4899 50%, #f59e0b 100%)",
               WebkitBackgroundClip: "text",
               WebkitTextFillColor: "transparent",
+              letterSpacing: "-0.03em",
               mb: 2,
             }}
           >
@@ -73,14 +182,20 @@ export default function Home() {
           </Typography>
 
           <Typography
-            variant="h5"
+            variant="h6"
             color="text.secondary"
-            sx={{ maxWidth: "600px", lineHeight: 1.6 }}
+            sx={{
+              maxWidth: 580,
+              mx: "auto",
+              lineHeight: 1.7,
+              fontWeight: 400,
+              fontSize: { xs: "1rem", md: "1.15rem" },
+            }}
           >
-            Your intelligent, extensible financial ledger. Control accounts, manage transactions, and track your data dynamically with our OpenAPI-driven architecture.
+            Your intelligent, extensible financial ledger. Import transactions, generate reports, and stay on top of your cashflow.
           </Typography>
 
-          <Box mt={4}>
+          <Box sx={{ mt: 4, display: "flex", gap: 2, justifyContent: "center", flexWrap: "wrap" }}>
             <Button
               variant="contained"
               size="large"
@@ -88,21 +203,44 @@ export default function Home() {
               onClick={() => navigate("/dashboard")}
               sx={{
                 px: 4,
-                py: 1.5,
+                py: 1.4,
                 borderRadius: "50px",
-                fontWeight: "bold",
-                background: "linear-gradient(45deg, #6366f1 30%, #ec4899 90%)",
-                transition: "transform 0.2s ease-in-out, box-shadow 0.2s",
+                fontWeight: 700,
+                background: "linear-gradient(135deg, #6366f1 0%, #ec4899 100%)",
+                transition: "transform 0.2s ease, box-shadow 0.2s",
                 "&:hover": {
-                  transform: "translateY(-3px)",
-                  boxShadow: (t) => `0 8px 20px ${alpha(t.palette.primary.main, 0.4)}`,
+                  transform: "translateY(-2px)",
+                  boxShadow: `0 8px 24px ${alpha(theme.palette.primary.main, 0.35)}`,
                 },
               }}
             >
               Enter Dashboard
             </Button>
+            <Button
+              variant="outlined"
+              size="large"
+              onClick={() => navigate("/fetch-requests")}
+              sx={{
+                px: 4,
+                py: 1.4,
+                borderRadius: "50px",
+                fontWeight: 600,
+                borderWidth: 2,
+                "&:hover": { borderWidth: 2 },
+              }}
+            >
+              Import Data
+            </Button>
           </Box>
-        </Stack>
+        </Box>
+
+        <Grid container spacing={3}>
+          {features.map((f) => (
+            <Grid key={f.title} size={{ xs: 12, sm: 6, md: 3 }}>
+              <FeatureCard {...f} />
+            </Grid>
+          ))}
+        </Grid>
       </Container>
     </Box>
   );