design overhaul + expenses page

- Stripe-style theme: single indigo (#635BFF) brand, 6px radius,
  Inter scale; rewritten themePrimitives + MUI customizations
  (solid primary, near-black secondary, severity-aware Alert)
- Sticky Header (brand-left nav, theme toggle, mobile drawer),
  inline Footer, route fade-in, per-route document.title
- Home hero + feature cards (dead /dashboard,/reports links replaced)
- Split-panel AuthPage with validation and password visibility
- Data pages: PageHeader/EmptyState, breadcrumbed Fetch Request
  pages, admin table polish (numeric alignment, row-hover actions,
  skeletons, empty states), single-accent admin SideMenu
- Global ToastProvider wired into app shell
- New /expenses page: month-grouped feed, single-open accordion
  with inline detail (account, tags, amount, timestamps)

src/Footer.tsx

@@ -1,52 +1,36 @@
 import * as React from 'react';
+import Box from '@mui/material/Box';
 import Container from '@mui/material/Container';
-import Link from '@mui/material/Link';
 import Typography from '@mui/material/Typography';
-import {AppBar, Box, Button, IconButton, Toolbar, Tooltip} from "@mui/material";
-import MenuIcon from "@mui/icons-material/Menu";
-import LogoutIcon from "@mui/icons-material/Logout";
-
-function Copyright() {
-  return (
-    <Typography variant="body2" sx={{ color: 'text.secondary' }}>
-      <Link color="text.secondary" href="https://www.aetoskia.com/">
-        {'Copyright © Aetoskia Internal Infrastructure — All rights reserved.'}
-      </Link>
-      &nbsp;
-      {new Date().getFullYear()}
-    </Typography>
-  );
-}
 
 export default function Footer() {
   return (
-    <AppBar
-      position="fixed"
-      color="default"
+    <Box
+      component="footer"
       sx={{
-        top: 'auto',
-        bottom: 0,
-        backdropFilter: 'blur(8px)',
-        boxShadow: 'none',
         borderTop: '1px solid',
         borderColor: 'divider',
+        py: 3,
+        mt: 'auto',
       }}
     >
-      <Toolbar>
-        <React.Fragment>
-          <Container
-            sx={{
-              display: 'flex',
-              flexDirection: 'column',
-              alignItems: 'center',
-              gap: { xs: 2, sm: 4 },
-              textAlign: { sm: 'center', md: 'left' },
-            }}
-          >
-            <Copyright />
-          </Container>
-        </React.Fragment>
-      </Toolbar>
-    </AppBar>
+      <Container
+        maxWidth="lg"
+        sx={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          gap: 2,
+          flexWrap: 'wrap',
+        }}
+      >
+        <Typography variant="body2" color="text.secondary" fontWeight={500}>
+          Khata
+        </Typography>
+        <Typography variant="caption" color="text.secondary">
+          © {new Date().getFullYear()} Aetoskia Internal Infrastructure — All rights reserved.
+        </Typography>
+      </Container>
+    </Box>
   );
-}
+}