khata-ui/src/Home.tsx

import * as React from "react";
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";

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={{
        minHeight: "calc(100vh - 64px)",
        display: "flex",
        flexDirection: "column",
        position: "relative",
        overflow: "hidden",
        "&::before": {
          content: '""',
          position: "absolute",
          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: "-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, flex: 1, display: "flex", flexDirection: "column", justifyContent: "center", py: 6 }}>
        <Box
          sx={{
            textAlign: "center",
            mb: 6,
          }}
        >
          <Typography
            variant="h1"
            sx={{
              fontWeight: 800,
              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,
            }}
          >
            Welcome to Khata
          </Typography>

          <Typography
            variant="h6"
            color="text.secondary"
            sx={{
              maxWidth: 580,
              mx: "auto",
              lineHeight: 1.7,
              fontWeight: 400,
              fontSize: { xs: "1rem", md: "1.15rem" },
            }}
          >
            Your intelligent, extensible financial ledger. Import transactions, generate reports, and stay on top of your cashflow.
          </Typography>

          <Box sx={{ mt: 4, display: "flex", gap: 2, justifyContent: "center", flexWrap: "wrap" }}>
            <Button
              variant="contained"
              size="large"
              endIcon={<ArrowForwardIcon />}
              onClick={() => navigate("/dashboard")}
              sx={{
                px: 4,
                py: 1.4,
                borderRadius: "50px",
                fontWeight: 700,
                background: "linear-gradient(135deg, #6366f1 0%, #ec4899 100%)",
                transition: "transform 0.2s ease, box-shadow 0.2s",
                "&:hover": {
                  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>
        </Box>

        <Grid container spacing={3}>
          {features.map((f) => (
            <Grid key={f.title} item xs={12} sm={6} md={3}>
              <FeatureCard {...f} />
            </Grid>
          ))}
        </Grid>
      </Container>
    </Box>
  );
}