From f8ad68788390a2791a13f63d499db050775813dc Mon Sep 17 00:00:00 2001
From: Abhishek Datta <abdatta1998@gmail.com>
Date: Sun, 31 Aug 2025 12:34:23 -0700
Subject: [PATCH 1/3] fix: stub mui packages for admin build

---
 src/admin/src/App.tsx             | 153 ++++++++++++++++++++++----
 src/admin/src/mui-icons/index.tsx |  15 +++
 src/admin/src/mui/index.tsx       | 155 ++++++++++++++++++++++++++
 src/admin/src/pages/Dashboard.tsx | 176 ++++++++++++++++++------------
 src/admin/vite.config.ts          |   7 ++
 5 files changed, 410 insertions(+), 96 deletions(-)
 create mode 100644 src/admin/src/mui-icons/index.tsx
 create mode 100644 src/admin/src/mui/index.tsx

diff --git a/src/admin/src/App.tsx b/src/admin/src/App.tsx
index 7797b61..77851f4 100644
--- a/src/admin/src/App.tsx
+++ b/src/admin/src/App.tsx
@@ -1,35 +1,139 @@
 import React from "react";
-import { NavLink, Routes, Route, useNavigate } from "react-router-dom";
+import { NavLink, Routes, Route } from "react-router-dom";
 import Dashboard from "./pages/Dashboard";
 import Send from "./pages/Send";
 import Scheduling from "./pages/Scheduling";
 import Alerts from "./pages/Alerts";
 import Qr from "./pages/Qr";
 
-const navClasses = ({ isActive }: { isActive: boolean }) =>
-  `px-3 py-2 rounded-md text-sm font-medium ${isActive ? "bg-gray-700 text-white" : "text-gray-300 hover:bg-gray-700 hover:text-white"}`;
+import {
+  AppBar,
+  Box,
+  Button,
+  CssBaseline,
+  IconButton,
+  ThemeProvider,
+  Toolbar,
+  Typography,
+  createTheme,
+} from "@mui/material";
+import { Brightness4, Brightness7 } from "@mui/icons-material";
 
 export default function App() {
+  const [mode, setMode] = React.useState<"light" | "dark">("dark");
+
+  const theme = React.useMemo(
+    () =>
+      createTheme({
+        palette: {
+          mode,
+          primary: { main: "#00e5ff" },
+          secondary: { main: "#7c4dff" },
+          background: {
+            default: mode === "dark" ? "#0a1929" : "#fafafa",
+            paper: mode === "dark" ? "rgba(255,255,255,0.05)" : "#fff",
+          },
+        },
+        typography: {
+          fontFamily: '"Roboto","Helvetica","Arial",sans-serif',
+          fontWeightBold: 700,
+        },
+        components: {
+          MuiPaper: {
+            styleOverrides: {
+              root: {
+                backgroundImage: "none",
+                backdropFilter: "blur(12px)",
+              },
+            },
+          },
+        },
+      }),
+    [mode]
+  );
+
+  const navButton = ({ isActive }: { isActive: boolean }) => ({
+    color: isActive ? theme.palette.primary.main : theme.palette.text.secondary,
+    mx: 1,
+    transition: "color .3s",
+    "&:hover": {
+      color: theme.palette.primary.light,
+      transform: "translateY(-2px)",
+    },
+  });
+
   return (
-    <div className="min-h-screen flex flex-col">
-      <nav className="bg-gray-800 px-4 py-3 flex gap-4">
-        <NavLink to="/" end className={navClasses}>
-          Dashboard
-        </NavLink>
-        <NavLink to="/send" className={navClasses}>
-          Send
-        </NavLink>
-        <NavLink to="/scheduling" className={navClasses}>
-          Scheduling
-        </NavLink>
-        <NavLink to="/alerts" className={navClasses}>
-          Alerts
-        </NavLink>
-        <NavLink to="/qr" className={navClasses}>
-          QR
-        </NavLink>
-      </nav>
-      <main className="flex-1 p-4 overflow-auto">
+    <ThemeProvider theme={theme}>
+      <CssBaseline />
+      <AppBar
+        position="sticky"
+        color="transparent"
+        elevation={0}
+        sx={{
+          backdropFilter: "blur(12px)",
+          borderBottom: 1,
+          borderColor: "divider",
+        }}
+      >
+        <Toolbar>
+          <Typography
+            variant="h6"
+            sx={{
+              flexGrow: 1,
+              fontWeight: 800,
+              background: "linear-gradient(45deg,#5B86E5,#36D1DC)",
+              WebkitBackgroundClip: "text",
+              color: "transparent",
+            }}
+          >
+            Admin
+          </Typography>
+          <NavLink to="/" end>
+            {({ isActive }) => (
+              <Button sx={navButton({ isActive })}>Dashboard</Button>
+            )}
+          </NavLink>
+          <NavLink to="/send">
+            {({ isActive }) => <Button sx={navButton({ isActive })}>Send</Button>}
+          </NavLink>
+          <NavLink to="/scheduling">
+            {({ isActive }) => (
+              <Button sx={navButton({ isActive })}>Scheduling</Button>
+            )}
+          </NavLink>
+          <NavLink to="/alerts">
+            {({ isActive }) => (
+              <Button sx={navButton({ isActive })}>Alerts</Button>
+            )}
+          </NavLink>
+          <NavLink to="/qr">
+            {({ isActive }) => <Button sx={navButton({ isActive })}>QR</Button>}
+          </NavLink>
+          <IconButton
+            color="inherit"
+            onClick={() => setMode(mode === "light" ? "dark" : "light")}
+            sx={{
+              ml: 1,
+              transition: "transform .3s",
+              "&:hover": { transform: "rotate(20deg)" },
+            }}
+          >
+            {mode === "dark" ? <Brightness7 /> : <Brightness4 />}
+          </IconButton>
+        </Toolbar>
+      </AppBar>
+      <Box
+        sx={{
+          flexGrow: 1,
+          p: 3,
+          minHeight: "100vh",
+          background:
+            mode === "dark"
+              ? "radial-gradient(circle at top left, #1e3a8a, #0f172a)"
+              : "linear-gradient(135deg,#fdfbfb 0%,#ebedee 100%)",
+          transition: "background .5s",
+        }}
+      >
         <Routes>
           <Route path="/" element={<Dashboard />} />
           <Route path="/send" element={<Send />} />
@@ -37,7 +141,8 @@ export default function App() {
           <Route path="/alerts" element={<Alerts />} />
           <Route path="/qr" element={<Qr />} />
         </Routes>
-      </main>
-    </div>
+      </Box>
+    </ThemeProvider>
   );
 }
+
diff --git a/src/admin/src/mui-icons/index.tsx b/src/admin/src/mui-icons/index.tsx
new file mode 100644
index 0000000..f122310
--- /dev/null
+++ b/src/admin/src/mui-icons/index.tsx
@@ -0,0 +1,15 @@
+import React from "react";
+
+export const Brightness4: React.FC<any> = (props) => (
+  <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" {...props}>
+    <path d="M9.37 5.51A7 7 0 0012 19a7 7 0 006.49-4.49A9 9 0 019.37 5.5v.01z" />
+  </svg>
+);
+
+export const Brightness7: React.FC<any> = (props) => (
+  <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" {...props}>
+    <path d="M12 7a5 5 0 100 10 5 5 0 000-10zm0-5h1v4h-1V2zm0 16h1v4h-1v-4zm10-6v1h-4v-1h4zM6 12v1H2v-1h4zm12.95-5.05l.7.7-2.83 2.83-.7-.7 2.83-2.83zM7.05 16.95l.7.7L4.92 20.5l-.7-.7 2.83-2.83zM16.95 16.95l2.83 2.83-.7.7-2.83-2.83.7-.7zM7.05 7.05L4.22 4.22l.7-.7 2.83 2.83-.7.7z" />
+  </svg>
+);
+
+export default { Brightness4, Brightness7 };
diff --git a/src/admin/src/mui/index.tsx b/src/admin/src/mui/index.tsx
new file mode 100644
index 0000000..7638b52
--- /dev/null
+++ b/src/admin/src/mui/index.tsx
@@ -0,0 +1,155 @@
+import React, { createContext, useContext } from "react";
+
+const ThemeContext = createContext<any>({});
+
+export function createTheme(theme: any) {
+  return theme;
+}
+
+export function ThemeProvider({ theme, children }: { theme: any; children: React.ReactNode }) {
+  return <ThemeContext.Provider value={theme}>{children}</ThemeContext.Provider>;
+}
+
+export function useTheme() {
+  return useContext(ThemeContext);
+}
+
+export const CssBaseline = () => null;
+
+function applySx(sx: any): React.CSSProperties {
+  return typeof sx === "object" ? sx : {};
+}
+
+export const Box: React.FC<any> = ({ sx = {}, children, ...props }) => (
+  <div style={applySx(sx)} {...props}>
+    {children}
+  </div>
+);
+
+export const Container = Box;
+
+export const AppBar: React.FC<any> = ({ sx = {}, children, ...props }) => (
+  <div style={{ position: "sticky", top: 0, ...applySx(sx) }} {...props}>
+    {children}
+  </div>
+);
+
+export const Toolbar: React.FC<any> = ({ sx = {}, children, ...props }) => (
+  <div style={{ display: "flex", alignItems: "center", ...applySx(sx) }} {...props}>
+    {children}
+  </div>
+);
+
+export const Typography: React.FC<any> = ({ sx = {}, children, ...props }) => (
+  <div style={applySx(sx)} {...props}>
+    {children}
+  </div>
+);
+
+export const Button: React.FC<any> = ({ sx = {}, children, variant, color, ...props }) => {
+  const base: React.CSSProperties = {
+    padding: "8px 16px",
+    borderRadius: 8,
+    cursor: "pointer",
+    border: "none",
+    transition: "all .3s",
+  };
+  if (variant === "contained") {
+    base.background = color === "secondary" ? "#7c4dff" : "#00e5ff";
+    base.color = "#fff";
+  } else {
+    base.background = "transparent";
+    base.color = color === "secondary" ? "#7c4dff" : "#00e5ff";
+  }
+  return (
+    <button style={{ ...base, ...applySx(sx) }} {...props}>
+      {children}
+    </button>
+  );
+};
+
+export const IconButton: React.FC<any> = ({ sx = {}, children, ...props }) => (
+  <button
+    style={{ background: "transparent", border: "none", cursor: "pointer", ...applySx(sx) }}
+    {...props}
+  >
+    {children}
+  </button>
+);
+
+export const Card: React.FC<any> = ({ sx = {}, children, ...props }) => (
+  <div
+    style={{ padding: 16, borderRadius: 8, background: "rgba(255,255,255,0.08)", ...applySx(sx) }}
+    {...props}
+  >
+    {children}
+  </div>
+);
+
+export const Grid: React.FC<any> = ({ container, item, spacing = 0, xs, sm, md, sx = {}, children, ...props }) => {
+  const style: React.CSSProperties = applySx(sx);
+  if (container) {
+    style.display = "flex";
+    style.flexWrap = "wrap";
+    style.gap = `${spacing * 8}px`;
+  }
+  if (item) {
+    const width = md || sm || xs || 12;
+    style.flexBasis = `${(width / 12) * 100}%`;
+  }
+  return (
+    <div style={style} {...props}>
+      {children}
+    </div>
+  );
+};
+
+export const Stack: React.FC<any> = ({ direction = "column", spacing = 0, sx = {}, children, ...props }) => (
+  <div style={{ display: "flex", flexDirection: direction, gap: spacing * 8, ...applySx(sx) }} {...props}>
+    {children}
+  </div>
+);
+
+export const TextField: React.FC<any> = ({ sx = {}, label, multiline, minRows, fullWidth, ...props }) => {
+  const style: React.CSSProperties = {
+    padding: "8px",
+    borderRadius: 4,
+    border: "1px solid #ccc",
+    width: fullWidth ? "100%" : undefined,
+    ...applySx(sx),
+  };
+  return multiline ? (
+    <textarea rows={minRows} placeholder={label} style={style} {...props} />
+  ) : (
+    <input placeholder={label} style={style} {...props} />
+  );
+};
+
+export const Checkbox: React.FC<any> = (props) => <input type="checkbox" {...props} />;
+
+export const FormControlLabel: React.FC<any> = ({ control, label, ...props }) => (
+  <label style={{ display: "flex", alignItems: "center", gap: 4 }} {...props}>
+    {control}
+    <span>{label}</span>
+  </label>
+);
+
+export default {
+  ThemeProvider,
+  createTheme,
+  CssBaseline,
+  Box,
+  Container,
+  AppBar,
+  Toolbar,
+  Typography,
+  Button,
+  IconButton,
+  Card,
+  Grid,
+  Stack,
+  TextField,
+  Checkbox,
+  FormControlLabel,
+};
+
diff --git a/src/admin/src/pages/Dashboard.tsx b/src/admin/src/pages/Dashboard.tsx
index fcd9388..488b026 100644
--- a/src/admin/src/pages/Dashboard.tsx
+++ b/src/admin/src/pages/Dashboard.tsx
@@ -1,5 +1,16 @@
 import React, { useEffect, useState } from "react";
 import { fetchHealth, sendMessage, testPush, subscribePush } from "../lib/api";
+import {
+  Box,
+  Button,
+  Card,
+  Checkbox,
+  FormControlLabel,
+  Grid,
+  Stack,
+  TextField,
+  Typography,
+} from "@mui/material";
 
 interface Health {
   session: { ready: boolean; qr: string | null };
@@ -9,6 +20,32 @@ interface Health {
   headless: boolean;
 }
 
+const glassCard = {
+  p: 3,
+  borderRadius: 2,
+  backgroundColor: "rgba(255,255,255,0.08)",
+  backdropFilter: "blur(10px)",
+  boxShadow: "0 8px 32px rgba(0,0,0,0.2)",
+  transition: "transform .3s, box-shadow .3s",
+  "&:hover": {
+    transform: "translateY(-4px)",
+    boxShadow: "0 16px 32px rgba(0,0,0,0.4)",
+  },
+};
+
+function InfoCard({ title, value }: { title: string; value: React.ReactNode }) {
+  return (
+    <Grid item xs={12} sm={6} md={3}>
+      <Card sx={glassCard}>
+        <Typography variant="subtitle1" fontWeight="bold" gutterBottom>
+          {title}
+        </Typography>
+        <Typography variant="body1">{value}</Typography>
+      </Card>
+    </Grid>
+  );
+}
+
 export default function Dashboard() {
   const [health, setHealth] = useState<Health | null>(null);
   const [phone, setPhone] = useState("");
@@ -56,82 +93,77 @@ export default function Dashboard() {
   }
 
   return (
-    <div className="space-y-6">
-      <h1 className="text-2xl font-bold">Dashboard</h1>
+    <Stack spacing={4}>
+      <Typography variant="h4" fontWeight="bold">
+        Dashboard
+      </Typography>
       {health && (
-        <div className="grid grid-cols-2 gap-4">
-          <div className="bg-gray-800 p-4 rounded-lg">
-            <div className="text-lg font-medium">Session</div>
-            <p>{health.session.ready ? "Ready" : "Not ready"}</p>
-          </div>
-          <div className="bg-gray-800 p-4 rounded-lg">
-            <div className="text-lg font-medium">Daily Usage</div>
-            <p>
-              {health.sentToday} / {health.dailyCap}
-            </p>
-          </div>
-          <div className="bg-gray-800 p-4 rounded-lg">
-            <div className="text-lg font-medium">Minute Tokens</div>
-            <p>{health.perMinAvailable} available</p>
-          </div>
-          <div className="bg-gray-800 p-4 rounded-lg">
-            <div className="text-lg font-medium">Headless</div>
-            <p>{health.headless ? "Enabled" : "Disabled"}</p>
-          </div>
-        </div>
+        <Grid container spacing={3}>
+          <InfoCard
+            title="Session"
+            value={health.session.ready ? "Ready" : "Not ready"}
+          />
+          <InfoCard
+            title="Daily Usage"
+            value={`${health.sentToday} / ${health.dailyCap}`}
+          />
+          <InfoCard
+            title="Minute Tokens"
+            value={`${health.perMinAvailable} available`}
+          />
+          <InfoCard
+            title="Headless"
+            value={health.headless ? "Enabled" : "Disabled"}
+          />
+        </Grid>
       )}
-      <div className="bg-gray-800 p-4 rounded-lg space-y-4">
-        <h2 className="text-lg font-medium">Quick Send</h2>
-        <form onSubmit={handleSend} className="space-y-2">
-          <div>
-            <input
-              type="text"
-              placeholder="E.164 Phone"
-              value={phone}
-              onChange={(e) => setPhone(e.target.value)}
-              className="w-full px-3 py-2 rounded bg-gray-700 text-white"
-            />
-          </div>
-          <div>
-            <textarea
-              placeholder="Message"
-              value={text}
-              onChange={(e) => setText(e.target.value)}
-              className="w-full px-3 py-2 rounded bg-gray-700 text-white"
-            />
-          </div>
-          <div className="flex items-center space-x-2">
-            <input
-              type="checkbox"
-              id="disablePrefix"
-              checked={disablePrefix}
-              onChange={(e) => setDisablePrefix(e.target.checked)}
-            />
-            <label htmlFor="disablePrefix">Disable prefix</label>
-          </div>
-          <button
-            type="submit"
-            className="bg-green-600 hover:bg-green-700 px-4 py-2 rounded"
-          >
+      <Card sx={{ ...glassCard, display: "flex", flexDirection: "column", gap: 2 }}>
+        <Typography variant="h6" gutterBottom>
+          Quick Send
+        </Typography>
+        <Box component="form" onSubmit={handleSend} sx={{ display: "flex", flexDirection: "column", gap: 2 }}>
+          <TextField
+            label="E.164 Phone"
+            value={phone}
+            onChange={(e) => setPhone(e.target.value)}
+            fullWidth
+          />
+          <TextField
+            label="Message"
+            value={text}
+            onChange={(e) => setText(e.target.value)}
+            multiline
+            minRows={3}
+            fullWidth
+          />
+          <FormControlLabel
+            control={
+              <Checkbox
+                checked={disablePrefix}
+                onChange={(e) => setDisablePrefix(e.target.checked)}
+              />
+            }
+            label="Disable prefix"
+          />
+          <Button type="submit" variant="contained" color="primary">
             Send
-          </button>
-        </form>
-        {message && <p className="text-sm text-yellow-400">{message}</p>}
-      </div>
-      <div className="flex gap-4">
-        <button
-          onClick={handleSubscribe}
-          className="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded"
-        >
+          </Button>
+        </Box>
+        {message && (
+          <Typography variant="body2" color="warning.main">
+            {message}
+          </Typography>
+        )}
+      </Card>
+      <Stack direction="row" spacing={2}>
+        <Button variant="contained" color="secondary" onClick={handleSubscribe}>
           Subscribe to Push
-        </button>
-        <button
-          onClick={() => testPush()}
-          className="bg-purple-600 hover:bg-purple-700 px-4 py-2 rounded"
-        >
+        </Button>
+        <Button variant="contained" color="info" onClick={() => testPush()}>
           Test Push
-        </button>
-      </div>
-    </div>
+        </Button>
+      </Stack>
+    </Stack>
   );
 }
+
diff --git a/src/admin/vite.config.ts b/src/admin/vite.config.ts
index d171911..710c34a 100644
--- a/src/admin/vite.config.ts
+++ b/src/admin/vite.config.ts
@@ -1,8 +1,15 @@
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
+import path from "path";
 
 export default defineConfig({
   plugins: [react()],
+  resolve: {
+    alias: {
+      "@mui/material": path.resolve(__dirname, "./src/mui"),
+      "@mui/icons-material": path.resolve(__dirname, "./src/mui-icons"),
+    },
+  },
   build: {
     outDir: "dist",
     emptyOutDir: true,

From 9f7a55022993f0618af02c9bd3775dd266abb487 Mon Sep 17 00:00:00 2001
From: Abhishek Datta <abdatta1998@gmail.com>
Date: Sun, 31 Aug 2025 13:04:06 -0700
Subject: [PATCH 2/3] feat(admin): adopt material ui styling

---
 src/admin/package.json             |   4 +
 src/admin/src/main.tsx             |   1 -
 src/admin/src/mui-icons/index.tsx  |  15 -
 src/admin/src/mui/index.tsx        | 155 ---------
 src/admin/src/pages/Alerts.tsx     |  61 +++-
 src/admin/src/pages/Qr.tsx         |  30 +-
 src/admin/src/pages/Scheduling.tsx | 527 +++++++++++++----------------
 src/admin/src/pages/Send.tsx       | 192 ++++++-----
 src/admin/src/styles.css           |   3 -
 src/admin/vite.config.ts           |   7 -
 10 files changed, 413 insertions(+), 582 deletions(-)
 delete mode 100644 src/admin/src/mui-icons/index.tsx
 delete mode 100644 src/admin/src/mui/index.tsx
 delete mode 100644 src/admin/src/styles.css

diff --git a/src/admin/package.json b/src/admin/package.json
index 56d07b1..d75cf07 100644
--- a/src/admin/package.json
+++ b/src/admin/package.json
@@ -10,6 +10,10 @@
   },
   "dependencies": {
     "axios": "^1.4.0",
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
+    "@mui/icons-material": "^5.15.0",
+    "@mui/material": "^5.15.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.14.0"
diff --git a/src/admin/src/main.tsx b/src/admin/src/main.tsx
index 8de1488..0c2b123 100644
--- a/src/admin/src/main.tsx
+++ b/src/admin/src/main.tsx
@@ -2,7 +2,6 @@ import React from "react";
 import ReactDOM from "react-dom/client";
 import { BrowserRouter } from "react-router-dom";
 import App from "./App";
-import "./styles.css";
 
 const root = document.getElementById("root");
 if (root) {
diff --git a/src/admin/src/mui-icons/index.tsx b/src/admin/src/mui-icons/index.tsx
deleted file mode 100644
index f122310..0000000
--- a/src/admin/src/mui-icons/index.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import React from "react";
-
-export const Brightness4: React.FC<any> = (props) => (
-  <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" {...props}>
-    <path d="M9.37 5.51A7 7 0 0012 19a7 7 0 006.49-4.49A9 9 0 019.37 5.5v.01z" />
-  </svg>
-);
-
-export const Brightness7: React.FC<any> = (props) => (
-  <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" {...props}>
-    <path d="M12 7a5 5 0 100 10 5 5 0 000-10zm0-5h1v4h-1V2zm0 16h1v4h-1v-4zm10-6v1h-4v-1h4zM6 12v1H2v-1h4zm12.95-5.05l.7.7-2.83 2.83-.7-.7 2.83-2.83zM7.05 16.95l.7.7L4.92 20.5l-.7-.7 2.83-2.83zM16.95 16.95l2.83 2.83-.7.7-2.83-2.83.7-.7zM7.05 7.05L4.22 4.22l.7-.7 2.83 2.83-.7.7z" />
-  </svg>
-);
-
-export default { Brightness4, Brightness7 };
diff --git a/src/admin/src/mui/index.tsx b/src/admin/src/mui/index.tsx
deleted file mode 100644
index 7638b52..0000000
--- a/src/admin/src/mui/index.tsx
+++ /dev/null
@@ -1,155 +0,0 @@
-import React, { createContext, useContext } from "react";
-
-const ThemeContext = createContext<any>({});
-
-export function createTheme(theme: any) {
-  return theme;
-}
-
-export function ThemeProvider({ theme, children }: { theme: any; children: React.ReactNode }) {
-  return <ThemeContext.Provider value={theme}>{children}</ThemeContext.Provider>;
-}
-
-export function useTheme() {
-  return useContext(ThemeContext);
-}
-
-export const CssBaseline = () => null;
-
-function applySx(sx: any): React.CSSProperties {
-  return typeof sx === "object" ? sx : {};
-}
-
-export const Box: React.FC<any> = ({ sx = {}, children, ...props }) => (
-  <div style={applySx(sx)} {...props}>
-    {children}
-  </div>
-);
-
-export const Container = Box;
-
-export const AppBar: React.FC<any> = ({ sx = {}, children, ...props }) => (
-  <div style={{ position: "sticky", top: 0, ...applySx(sx) }} {...props}>
-    {children}
-  </div>
-);
-
-export const Toolbar: React.FC<any> = ({ sx = {}, children, ...props }) => (
-  <div style={{ display: "flex", alignItems: "center", ...applySx(sx) }} {...props}>
-    {children}
-  </div>
-);
-
-export const Typography: React.FC<any> = ({ sx = {}, children, ...props }) => (
-  <div style={applySx(sx)} {...props}>
-    {children}
-  </div>
-);
-
-export const Button: React.FC<any> = ({ sx = {}, children, variant, color, ...props }) => {
-  const base: React.CSSProperties = {
-    padding: "8px 16px",
-    borderRadius: 8,
-    cursor: "pointer",
-    border: "none",
-    transition: "all .3s",
-  };
-  if (variant === "contained") {
-    base.background = color === "secondary" ? "#7c4dff" : "#00e5ff";
-    base.color = "#fff";
-  } else {
-    base.background = "transparent";
-    base.color = color === "secondary" ? "#7c4dff" : "#00e5ff";
-  }
-  return (
-    <button style={{ ...base, ...applySx(sx) }} {...props}>
-      {children}
-    </button>
-  );
-};
-
-export const IconButton: React.FC<any> = ({ sx = {}, children, ...props }) => (
-  <button
-    style={{ background: "transparent", border: "none", cursor: "pointer", ...applySx(sx) }}
-    {...props}
-  >
-    {children}
-  </button>
-);
-
-export const Card: React.FC<any> = ({ sx = {}, children, ...props }) => (
-  <div
-    style={{ padding: 16, borderRadius: 8, background: "rgba(255,255,255,0.08)", ...applySx(sx) }}
-    {...props}
-  >
-    {children}
-  </div>
-);
-
-export const Grid: React.FC<any> = ({ container, item, spacing = 0, xs, sm, md, sx = {}, children, ...props }) => {
-  const style: React.CSSProperties = applySx(sx);
-  if (container) {
-    style.display = "flex";
-    style.flexWrap = "wrap";
-    style.gap = `${spacing * 8}px`;
-  }
-  if (item) {
-    const width = md || sm || xs || 12;
-    style.flexBasis = `${(width / 12) * 100}%`;
-  }
-  return (
-    <div style={style} {...props}>
-      {children}
-    </div>
-  );
-};
-
-export const Stack: React.FC<any> = ({ direction = "column", spacing = 0, sx = {}, children, ...props }) => (
-  <div style={{ display: "flex", flexDirection: direction, gap: spacing * 8, ...applySx(sx) }} {...props}>
-    {children}
-  </div>
-);
-
-export const TextField: React.FC<any> = ({ sx = {}, label, multiline, minRows, fullWidth, ...props }) => {
-  const style: React.CSSProperties = {
-    padding: "8px",
-    borderRadius: 4,
-    border: "1px solid #ccc",
-    width: fullWidth ? "100%" : undefined,
-    ...applySx(sx),
-  };
-  return multiline ? (
-    <textarea rows={minRows} placeholder={label} style={style} {...props} />
-  ) : (
-    <input placeholder={label} style={style} {...props} />
-  );
-};
-
-export const Checkbox: React.FC<any> = (props) => <input type="checkbox" {...props} />;
-
-export const FormControlLabel: React.FC<any> = ({ control, label, ...props }) => (
-  <label style={{ display: "flex", alignItems: "center", gap: 4 }} {...props}>
-    {control}
-    <span>{label}</span>
-  </label>
-);
-
-export default {
-  ThemeProvider,
-  createTheme,
-  CssBaseline,
-  Box,
-  Container,
-  AppBar,
-  Toolbar,
-  Typography,
-  Button,
-  IconButton,
-  Card,
-  Grid,
-  Stack,
-  TextField,
-  Checkbox,
-  FormControlLabel,
-};
-
diff --git a/src/admin/src/pages/Alerts.tsx b/src/admin/src/pages/Alerts.tsx
index 29ee3b9..5ba174e 100644
--- a/src/admin/src/pages/Alerts.tsx
+++ b/src/admin/src/pages/Alerts.tsx
@@ -1,11 +1,32 @@
 import React, { useEffect, useState } from "react";
 import { fetchHealth } from "../lib/api";
+import {
+  Card,
+  List,
+  ListItem,
+  ListItemText,
+  Stack,
+  Typography,
+} from "@mui/material";
 
 interface AlertItem {
   ts: number;
   message: string;
 }
 
+const glassCard = {
+  p: 3,
+  borderRadius: 2,
+  backgroundColor: "rgba(255,255,255,0.08)",
+  backdropFilter: "blur(10px)",
+  boxShadow: "0 8px 32px rgba(0,0,0,0.2)",
+  transition: "transform .3s, box-shadow .3s",
+  "&:hover": {
+    transform: "translateY(-4px)",
+    boxShadow: "0 16px 32px rgba(0,0,0,0.4)",
+  },
+};
+
 export default function Alerts() {
   const [alerts, setAlerts] = useState<AlertItem[]>([]);
   const [lastReady, setLastReady] = useState<boolean | null>(null);
@@ -27,9 +48,7 @@ export default function Alerts() {
         const message = health.session.ready
           ? "Relinked / Ready"
           : "QR required or offline";
-        setAlerts((prev) =>
-          [{ ts: Date.now(), message }, ...prev].slice(0, 20),
-        );
+        setAlerts((prev) => [{ ts: Date.now(), message }, ...prev].slice(0, 20));
         setLastReady(health.session.ready);
       }
     } catch (err) {
@@ -38,19 +57,27 @@ export default function Alerts() {
   }
 
   return (
-    <div className="space-y-6">
-      <h1 className="text-2xl font-bold">Alerts</h1>
-      <ul className="space-y-2">
-        {alerts.map((a) => (
-          <li key={a.ts} className="bg-gray-800 p-3 rounded-lg">
-            <div className="text-sm text-gray-400">
-              {new Date(a.ts).toLocaleString()}
-            </div>
-            <div>{a.message}</div>
-          </li>
-        ))}
-        {alerts.length === 0 && <p>No alerts yet.</p>}
-      </ul>
-    </div>
+    <Stack spacing={4}>
+      <Typography variant="h4" fontWeight="bold">
+        Alerts
+      </Typography>
+      <Card sx={glassCard}>
+        <List>
+          {alerts.map((a) => (
+            <ListItem key={a.ts} divider>
+              <ListItemText
+                primary={a.message}
+                secondary={new Date(a.ts).toLocaleString()}
+              />
+            </ListItem>
+          ))}
+          {alerts.length === 0 && (
+            <Typography sx={{ p: 2 }} color="text.secondary">
+              No alerts yet.
+            </Typography>
+          )}
+        </List>
+      </Card>
+    </Stack>
   );
 }
diff --git a/src/admin/src/pages/Qr.tsx b/src/admin/src/pages/Qr.tsx
index 3e8f30f..e3d317f 100644
--- a/src/admin/src/pages/Qr.tsx
+++ b/src/admin/src/pages/Qr.tsx
@@ -1,4 +1,18 @@
 import React, { useEffect, useState } from "react";
+import { Box, Card, Stack, Typography } from "@mui/material";
+
+const glassCard = {
+  p: 4,
+  borderRadius: 2,
+  backgroundColor: "rgba(255,255,255,0.08)",
+  backdropFilter: "blur(10px)",
+  boxShadow: "0 8px 32px rgba(0,0,0,0.2)",
+  transition: "transform .3s, box-shadow .3s",
+  "&:hover": {
+    transform: "translateY(-4px)",
+    boxShadow: "0 16px 32px rgba(0,0,0,0.4)",
+  },
+};
 
 export default function Qr() {
   const [src, setSrc] = useState("");
@@ -12,15 +26,17 @@ export default function Qr() {
     return () => clearInterval(id);
   }, []);
   return (
-    <div className="space-y-6">
-      <h1 className="text-2xl font-bold">QR Code</h1>
-      <div className="bg-gray-800 p-4 rounded-lg inline-block">
+    <Stack spacing={4} alignItems="center">
+      <Typography variant="h4" fontWeight="bold">
+        QR Code
+      </Typography>
+      <Card sx={glassCard}>
         {src ? (
-          <img src={src} alt="QR" className="max-w-full" />
+          <Box component="img" src={src} alt="QR" sx={{ maxWidth: "100%" }} />
         ) : (
-          <p>Loading...</p>
+          <Typography>Loading...</Typography>
         )}
-      </div>
-    </div>
+      </Card>
+    </Stack>
   );
 }
diff --git a/src/admin/src/pages/Scheduling.tsx b/src/admin/src/pages/Scheduling.tsx
index 9bfeaf5..071bc43 100644
--- a/src/admin/src/pages/Scheduling.tsx
+++ b/src/admin/src/pages/Scheduling.tsx
@@ -11,6 +11,29 @@ import {
   fetchAllContacts,
 } from "../lib/api";
 import type { Contact } from "../lib/types";
+import {
+  Box,
+  Button,
+  Card,
+  Checkbox,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  FormControlLabel,
+  List,
+  ListItem,
+  ListItemButton,
+  ListItemText,
+  Stack,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableRow,
+  TextField,
+  Typography,
+} from "@mui/material";
 
 interface Schedule {
   id: string;
@@ -25,6 +48,19 @@ interface Schedule {
   lastRunAt: string | null;
 }
 
+const glassCard = {
+  p: 3,
+  borderRadius: 2,
+  backgroundColor: "rgba(255,255,255,0.08)",
+  backdropFilter: "blur(10px)",
+  boxShadow: "0 8px 32px rgba(0,0,0,0.2)",
+  transition: "transform .3s, box-shadow .3s",
+  "&:hover": {
+    transform: "translateY(-4px)",
+    boxShadow: "0 16px 32px rgba(0,0,0,0.4)",
+  },
+};
+
 export default function Scheduling() {
   const [schedules, setSchedules] = useState<Schedule[]>([]);
   const [form, setForm] = useState({
@@ -52,14 +88,14 @@ export default function Scheduling() {
   const suggestions = selected
     ? []
     : form.phone
-      ? allContacts.filter(
-          (c) =>
-            c.phone?.includes(form.phone) ||
-            c.name.toLowerCase().includes(form.phone.toLowerCase()),
-        )
-      : showAll
-        ? allContacts
-        : topContacts;
+    ? allContacts.filter(
+        (c) =>
+          c.phone?.includes(form.phone) ||
+          c.name.toLowerCase().includes(form.phone.toLowerCase())
+      )
+    : showAll
+    ? allContacts
+    : topContacts;
 
   useEffect(() => {
     refresh();
@@ -132,305 +168,206 @@ export default function Scheduling() {
   async function handleUpdate(e: React.FormEvent) {
     e.preventDefault();
     if (!edit) return;
-    const payload: any = {
+    await updateSchedule(edit.id, {
       text: edit.text,
       disablePrefix: edit.disablePrefix,
+      firstRunAt: edit.firstRunAt ? new Date(edit.firstRunAt).toISOString() : undefined,
+      intervalMinutes: edit.intervalMinutes ? Number(edit.intervalMinutes) : undefined,
       active: edit.active,
-    };
-    if (edit.firstRunAt)
-      payload.firstRunAt = new Date(edit.firstRunAt).toISOString();
-    if (edit.intervalMinutes)
-      payload.intervalMinutes = Number(edit.intervalMinutes);
-    await updateSchedule(edit.id, payload);
+    });
     setEdit(null);
     refresh();
   }
 
   return (
-    <div className="space-y-6">
-      <h1 className="text-2xl font-bold">Scheduling</h1>
-      {/* Create form */}
-      <div className="bg-gray-800 p-4 rounded-lg space-y-4 max-w-xl">
-        <h2 className="text-lg font-medium">Create Schedule</h2>
-        <form onSubmit={handleCreate} className="space-y-3">
-          <div>
-            <label className="block mb-1">Contact</label>
-            <input
-              type="text"
-              value={form.phone}
-              onChange={(e) => {
-                setForm({ ...form, phone: e.target.value });
-                setSelected(null);
-                if (e.target.value) setShowAll(false);
-              }}
-              className="w-full px-3 py-2 rounded bg-gray-700 text-white"
-            />
-            {suggestions.length > 0 ? (
-              <div className="mt-2 max-h-48 overflow-y-auto space-y-2">
-                {suggestions.map((c) => (
-                  <button
-                    key={c.phone || c.name}
-                    type="button"
+    <Stack spacing={4}>
+      <Typography variant="h4" fontWeight="bold">
+        Scheduling
+      </Typography>
+      <Card sx={glassCard}>
+        <Box
+          component="form"
+          onSubmit={handleCreate}
+          sx={{ display: "flex", flexDirection: "column", gap: 2 }}
+        >
+          <TextField
+            label="Contact"
+            value={form.phone}
+            onChange={(e) => {
+              setForm({ ...form, phone: e.target.value });
+              setSelected(null);
+              if (e.target.value) setShowAll(false);
+            }}
+            fullWidth
+          />
+          {suggestions.length > 0 && (
+            <List sx={{ maxHeight: 200, overflow: "auto", mb: 1 }}>
+              {suggestions.map((c) => (
+                <ListItem key={c.phone || c.name} disablePadding>
+                  <ListItemButton
                     onClick={() => {
                       setSelected(c);
-                      setForm({
-                        ...form,
-                        phone: c.phone ? `${c.name} (${c.phone})` : c.name,
-                      });
+                      setForm({ ...form, phone: c.phone ? `${c.name} (${c.phone})` : c.name });
                     }}
-                    className="block w-full text-left bg-gray-700 hover:bg-gray-600 p-2 rounded"
                   >
-                    <div className="font-medium">{c.name}</div>
-                    {c.phone && (
-                      <div className="text-xs text-gray-400">{c.phone}</div>
-                    )}
-                  </button>
-                ))}
-              </div>
-            ) : (
-              !form.phone && (
-                <p className="text-sm text-gray-400 mt-2">
-                  No contacts yet. Add or import contacts to get started.
-                </p>
-              )
-            )}
-            {!form.phone &&
-              !showAll &&
-              allContacts.length > topContacts.length && (
-                <button
-                  type="button"
-                  onClick={() => setShowAll(true)}
-                  className="text-blue-400 text-sm mt-2"
-                >
-                  View all
-                </button>
-              )}
-          </div>
-          <div>
-            <label className="block mb-1">Message</label>
-            <textarea
-              value={form.text}
-              onChange={(e) => setForm({ ...form, text: e.target.value })}
-              className="w-full px-3 py-2 rounded bg-gray-700 text-white"
-            />
-          </div>
-          <div className="flex items-center space-x-2">
-            <input
-              type="checkbox"
-              checked={form.disablePrefix}
-              id="createDisablePrefix"
-              onChange={(e) =>
-                setForm({ ...form, disablePrefix: e.target.checked })
-              }
-            />
-            <label htmlFor="createDisablePrefix">Disable prefix</label>
-          </div>
-          <div>
-            <label className="block mb-1">First run (local)</label>
-            <input
-              type="datetime-local"
-              value={form.firstRunAt}
-              onChange={(e) => setForm({ ...form, firstRunAt: e.target.value })}
-              className="w-full px-3 py-2 rounded bg-gray-700 text-white"
-            />
-          </div>
-          <div>
-            <label className="block mb-1">Interval (minutes, min 60)</label>
-            <input
-              type="number"
-              min="0"
-              step="60"
-              value={form.intervalMinutes}
-              onChange={(e) =>
-                setForm({ ...form, intervalMinutes: e.target.value })
-              }
-              className="w-full px-3 py-2 rounded bg-gray-700 text-white"
-            />
-          </div>
-          <div className="flex items-center space-x-2">
-            <input
-              type="checkbox"
-              checked={form.active}
-              id="createActive"
-              onChange={(e) => setForm({ ...form, active: e.target.checked })}
-            />
-            <label htmlFor="createActive">Active</label>
-          </div>
-          <button
-            type="submit"
-            className="bg-green-600 hover:bg-green-700 px-4 py-2 rounded"
-          >
-            Create
-          </button>
-          {status && <p className="text-yellow-400 text-sm">{status}</p>}
-        </form>
-      </div>
-      {/* List */}
-      <div className="bg-gray-800 p-4 rounded-lg">
-        <h2 className="text-lg font-medium mb-4">Existing Schedules</h2>
-        <div className="overflow-x-auto">
-          <table className="min-w-full text-left text-sm">
-            <thead className="bg-gray-700">
-              <tr>
-                <th className="px-3 py-2">Contact</th>
-                <th className="px-3 py-2">Message</th>
-                <th className="px-3 py-2">Prefix</th>
-                <th className="px-3 py-2">Next Run</th>
-                <th className="px-3 py-2">Interval</th>
-                <th className="px-3 py-2">Active</th>
-                <th className="px-3 py-2">Actions</th>
-              </tr>
-            </thead>
-            <tbody>
-              {schedules.map((s) => (
-                <tr key={s.id} className="odd:bg-gray-700">
-                  <td className="px-3 py-2 whitespace-nowrap">
-                    {s.name || s.phone}
-                  </td>
-                  <td className="px-3 py-2 whitespace-nowrap max-w-xs truncate">
-                    {s.text}
-                  </td>
-                  <td className="px-3 py-2 whitespace-nowrap">
-                    {s.disablePrefix ? "Off" : "On"}
-                  </td>
-                  <td className="px-3 py-2 whitespace-nowrap">
-                    {new Date(s.nextRunAt).toLocaleString()}
-                  </td>
-                  <td className="px-3 py-2 whitespace-nowrap">
-                    {s.intervalMinutes ?? "None"}
-                  </td>
-                  <td className="px-3 py-2 whitespace-nowrap">
-                    {s.active ? "Yes" : "No"}
-                  </td>
-                  <td className="px-3 py-2 whitespace-nowrap space-x-2">
-                    <button
-                      onClick={() =>
-                        setEdit({
-                          id: s.id,
-                          text: s.text,
-                          disablePrefix: s.disablePrefix,
-                          firstRunAt: s.firstRunAt,
-                          intervalMinutes: s.intervalMinutes ?? "",
-                          active: s.active,
-                        })
-                      }
-                      className="bg-blue-600 hover:bg-blue-700 px-2 py-1 rounded"
-                    >
-                      Edit
-                    </button>
-                    <button
-                      onClick={() => handleRun(s.id)}
-                      className="bg-green-600 hover:bg-green-700 px-2 py-1 rounded"
-                    >
-                      Run
-                    </button>
-                    {s.active ? (
-                      <button
-                        onClick={() => handlePause(s.id)}
-                        className="bg-yellow-600 hover:bg-yellow-700 px-2 py-1 rounded"
-                      >
-                        Pause
-                      </button>
-                    ) : (
-                      <button
-                        onClick={() => handleResume(s.id)}
-                        className="bg-purple-600 hover:bg-purple-700 px-2 py-1 rounded"
-                      >
-                        Resume
-                      </button>
-                    )}
-                    <button
-                      onClick={() => handleDelete(s.id)}
-                      className="bg-red-600 hover:bg-red-700 px-2 py-1 rounded"
-                    >
-                      Delete
-                    </button>
-                  </td>
-                </tr>
+                    <ListItemText primary={c.name} secondary={c.phone || undefined} />
+                  </ListItemButton>
+                </ListItem>
               ))}
-            </tbody>
-          </table>
-        </div>
-      </div>
-      {/* Edit modal */}
-      {edit && (
-        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center">
-          <div className="bg-gray-800 p-6 rounded-lg space-y-4 w-96">
-            <h3 className="text-lg font-medium">Edit Schedule</h3>
-            <form onSubmit={handleUpdate} className="space-y-3">
-              <div>
-                <label className="block mb-1">Message</label>
-                <textarea
-                  value={edit.text}
-                  onChange={(e) => setEdit({ ...edit, text: e.target.value })}
-                  className="w-full px-3 py-2 rounded bg-gray-700 text-white"
-                />
-              </div>
-              <div className="flex items-center space-x-2">
-                <input
-                  type="checkbox"
-                  checked={edit.disablePrefix}
-                  id="editDisablePrefix"
-                  onChange={(e) =>
-                    setEdit({ ...edit, disablePrefix: e.target.checked })
-                  }
-                />
-                <label htmlFor="editDisablePrefix">Disable prefix</label>
-              </div>
-              <div>
-                <label className="block mb-1">First run (local)</label>
-                <input
-                  type="datetime-local"
-                  value={edit.firstRunAt}
-                  onChange={(e) =>
-                    setEdit({ ...edit, firstRunAt: e.target.value })
-                  }
-                  className="w-full px-3 py-2 rounded bg-gray-700 text-white"
-                />
-              </div>
-              <div>
-                <label className="block mb-1">Interval (minutes)</label>
-                <input
-                  type="number"
-                  min="0"
-                  step="60"
-                  value={edit.intervalMinutes}
-                  onChange={(e) =>
-                    setEdit({ ...edit, intervalMinutes: e.target.value })
-                  }
-                  className="w-full px-3 py-2 rounded bg-gray-700 text-white"
-                />
-              </div>
-              <div className="flex items-center space-x-2">
-                <input
-                  type="checkbox"
-                  checked={edit.active}
-                  id="editActive"
-                  onChange={(e) =>
-                    setEdit({ ...edit, active: e.target.checked })
-                  }
-                />
-                <label htmlFor="editActive">Active</label>
-              </div>
-              <div className="flex justify-end space-x-2">
-                <button
-                  type="button"
-                  onClick={() => setEdit(null)}
-                  className="bg-gray-600 hover:bg-gray-700 px-3 py-1 rounded"
-                >
-                  Cancel
-                </button>
-                <button
-                  type="submit"
-                  className="bg-blue-600 hover:bg-blue-700 px-3 py-1 rounded"
-                >
-                  Save
-                </button>
-              </div>
-            </form>
-          </div>
-        </div>
-      )}
-    </div>
+            </List>
+          )}
+          {!form.phone && !showAll && allContacts.length > topContacts.length && (
+            <Button onClick={() => setShowAll(true)} size="small">
+              View all
+            </Button>
+          )}
+          <TextField
+            label="Message"
+            value={form.text}
+            onChange={(e) => setForm({ ...form, text: e.target.value })}
+            multiline
+            minRows={3}
+            fullWidth
+          />
+          <FormControlLabel
+            control={
+              <Checkbox
+                checked={form.disablePrefix}
+                onChange={(e) => setForm({ ...form, disablePrefix: e.target.checked })}
+              />
+            }
+            label="Disable prefix"
+          />
+          <TextField
+            label="First run (local)"
+            type="datetime-local"
+            value={form.firstRunAt}
+            onChange={(e) => setForm({ ...form, firstRunAt: e.target.value })}
+            InputLabelProps={{ shrink: true }}
+            fullWidth
+          />
+          <TextField
+            label="Interval (minutes)"
+            type="number"
+            value={form.intervalMinutes}
+            onChange={(e) => setForm({ ...form, intervalMinutes: e.target.value })}
+            fullWidth
+          />
+          <FormControlLabel
+            control={
+              <Checkbox
+                checked={form.active}
+                onChange={(e) => setForm({ ...form, active: e.target.checked })}
+              />
+            }
+            label="Active"
+          />
+          <Button type="submit" variant="contained" color="primary">
+            Create Schedule
+          </Button>
+          {status && (
+            <Typography variant="body2" color="warning.main">
+              {status}
+            </Typography>
+          )}
+        </Box>
+      </Card>
+      <Card sx={glassCard}>
+        <Table>
+          <TableHead>
+            <TableRow>
+              <TableCell>To</TableCell>
+              <TableCell>Message</TableCell>
+              <TableCell>Next Run</TableCell>
+              <TableCell align="right">Actions</TableCell>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {schedules.map((s) => (
+              <TableRow key={s.id} hover>
+                <TableCell>{s.phone || s.name}</TableCell>
+                <TableCell>{s.text}</TableCell>
+                <TableCell>{new Date(s.nextRunAt).toLocaleString()}</TableCell>
+                <TableCell align="right">
+                  <Button size="small" onClick={() =>
+                    setEdit({
+                      id: s.id,
+                      text: s.text,
+                      disablePrefix: s.disablePrefix,
+                      firstRunAt: s.firstRunAt ? s.firstRunAt.slice(0,16) : "",
+                      intervalMinutes: s.intervalMinutes ?? "",
+                      active: s.active,
+                    })
+                  }>Edit</Button>
+                  <Button size="small" onClick={() => handleRun(s.id)}>Run</Button>
+                  {s.active ? (
+                    <Button size="small" onClick={() => handlePause(s.id)}>Pause</Button>
+                  ) : (
+                    <Button size="small" onClick={() => handleResume(s.id)}>Resume</Button>
+                  )}
+                  <Button size="small" color="error" onClick={() => handleDelete(s.id)}>
+                    Delete
+                  </Button>
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </Card>
+      <Dialog open={Boolean(edit)} onClose={() => setEdit(null)} fullWidth maxWidth="sm">
+        <DialogTitle>Edit Schedule</DialogTitle>
+        {edit && (
+          <Box component="form" onSubmit={handleUpdate}>
+            <DialogContent sx={{ display: "flex", flexDirection: "column", gap: 2 }}>
+              <TextField
+                label="Message"
+                value={edit.text}
+                onChange={(e) => setEdit({ ...edit, text: e.target.value })}
+                multiline
+                minRows={3}
+                fullWidth
+              />
+              <FormControlLabel
+                control={
+                  <Checkbox
+                    checked={edit.disablePrefix}
+                    onChange={(e) => setEdit({ ...edit, disablePrefix: e.target.checked })}
+                  />
+                }
+                label="Disable prefix"
+              />
+              <TextField
+                label="First run (local)"
+                type="datetime-local"
+                value={edit.firstRunAt}
+                onChange={(e) => setEdit({ ...edit, firstRunAt: e.target.value })}
+                InputLabelProps={{ shrink: true }}
+                fullWidth
+              />
+              <TextField
+                label="Interval (minutes)"
+                type="number"
+                value={edit.intervalMinutes}
+                onChange={(e) => setEdit({ ...edit, intervalMinutes: e.target.value })}
+                fullWidth
+              />
+              <FormControlLabel
+                control={
+                  <Checkbox
+                    checked={edit.active}
+                    onChange={(e) => setEdit({ ...edit, active: e.target.checked })}
+                  />
+                }
+                label="Active"
+              />
+            </DialogContent>
+            <DialogActions>
+              <Button onClick={() => setEdit(null)}>Cancel</Button>
+              <Button type="submit">Save</Button>
+            </DialogActions>
+          </Box>
+        )}
+      </Dialog>
+    </Stack>
   );
 }
diff --git a/src/admin/src/pages/Send.tsx b/src/admin/src/pages/Send.tsx
index 4499bd5..170989e 100644
--- a/src/admin/src/pages/Send.tsx
+++ b/src/admin/src/pages/Send.tsx
@@ -1,6 +1,33 @@
 import React, { useState, useEffect } from "react";
 import { sendMessage, fetchTopContacts, fetchAllContacts } from "../lib/api";
 import type { Contact } from "../lib/types";
+import {
+  Box,
+  Button,
+  Card,
+  Checkbox,
+  FormControlLabel,
+  List,
+  ListItem,
+  ListItemButton,
+  ListItemText,
+  Stack,
+  TextField,
+  Typography,
+} from "@mui/material";
+
+const glassCard = {
+  p: 3,
+  borderRadius: 2,
+  backgroundColor: "rgba(255,255,255,0.08)",
+  backdropFilter: "blur(10px)",
+  boxShadow: "0 8px 32px rgba(0,0,0,0.2)",
+  transition: "transform .3s, box-shadow .3s",
+  "&:hover": {
+    transform: "translateY(-4px)",
+    boxShadow: "0 16px 32px rgba(0,0,0,0.4)",
+  },
+};
 
 export default function Send() {
   const [phone, setPhone] = useState("");
@@ -20,14 +47,14 @@ export default function Send() {
   const suggestions = selected
     ? []
     : phone
-      ? allContacts.filter(
-          (c) =>
-            c.phone?.includes(phone) ||
-            c.name.toLowerCase().includes(phone.toLowerCase()),
-        )
-      : showAll
-        ? allContacts
-        : topContacts;
+    ? allContacts.filter(
+        (c) =>
+          c.phone?.includes(phone) ||
+          c.name.toLowerCase().includes(phone.toLowerCase())
+      )
+    : showAll
+    ? allContacts
+    : topContacts;
 
   async function handleSubmit(e: React.FormEvent) {
     e.preventDefault();
@@ -52,84 +79,85 @@ export default function Send() {
   }
 
   return (
-    <div className="space-y-6">
-      <h1 className="text-2xl font-bold">Send Message</h1>
-      <div className="bg-gray-800 p-4 rounded-lg space-y-4 max-w-md">
-        <form onSubmit={handleSubmit} className="space-y-4">
-          <div>
-            <label className="block mb-1">Contact</label>
-            <input
-              type="text"
-              value={phone}
-              onChange={(e) => {
-                setPhone(e.target.value);
-                setSelected(null);
-                if (e.target.value) setShowAll(false);
-              }}
-              className="w-full px-3 py-2 rounded bg-gray-700 text-white"
-            />
-            {suggestions.length > 0 ? (
-              <div className="mt-2 max-h-48 overflow-y-auto space-y-2">
-                {suggestions.map((c) => (
-                  <button
-                    key={c.phone || c.name}
-                    type="button"
+    <Stack spacing={4}>
+      <Typography variant="h4" fontWeight="bold">
+        Send Message
+      </Typography>
+      <Card sx={{ ...glassCard, maxWidth: 500 }}>
+        <Box
+          component="form"
+          onSubmit={handleSubmit}
+          sx={{ display: "flex", flexDirection: "column", gap: 2 }}
+        >
+          <TextField
+            label="Contact"
+            value={phone}
+            onChange={(e) => {
+              setPhone(e.target.value);
+              setSelected(null);
+              if (e.target.value) setShowAll(false);
+            }}
+            fullWidth
+          />
+          {suggestions.length > 0 ? (
+            <List sx={{ maxHeight: 200, overflow: "auto", mb: 1 }}>
+              {suggestions.map((c) => (
+                <ListItem key={c.phone || c.name} disablePadding>
+                  <ListItemButton
                     onClick={() => {
                       setSelected(c);
-                      setPhone(c.phone ? `${c.name} (${c.phone})` : c.name);
+                      setPhone(
+                        c.phone ? `${c.name} (${c.phone})` : c.name
+                      );
                     }}
-                    className="block w-full text-left bg-gray-700 hover:bg-gray-600 p-2 rounded"
                   >
-                    <div className="font-medium">{c.name}</div>
-                    {c.phone && (
-                      <div className="text-xs text-gray-400">{c.phone}</div>
-                    )}
-                  </button>
-                ))}
-              </div>
-            ) : (
-              !phone && (
-                <p className="text-sm text-gray-400 mt-2">
-                  No contacts yet. Add or import contacts to get started.
-                </p>
-              )
-            )}
-            {!phone && !showAll && allContacts.length > topContacts.length && (
-              <button
-                type="button"
-                onClick={() => setShowAll(true)}
-                className="text-blue-400 text-sm mt-2"
-              >
-                View all
-              </button>
-            )}
-          </div>
-          <div>
-            <label className="block mb-1">Message</label>
-            <textarea
-              value={text}
-              onChange={(e) => setText(e.target.value)}
-              className="w-full px-3 py-2 rounded bg-gray-700 text-white"
-            />
-          </div>
-          <div className="flex items-center space-x-2">
-            <input
-              type="checkbox"
-              id="disablePrefixSend"
-              checked={disablePrefix}
-              onChange={(e) => setDisablePrefix(e.target.checked)}
-            />
-            <label htmlFor="disablePrefixSend">Disable prefix</label>
-          </div>
-          <button
-            type="submit"
-            className="bg-green-600 hover:bg-green-700 px-4 py-2 rounded"
-          >
+                    <ListItemText
+                      primary={c.name}
+                      secondary={c.phone || undefined}
+                    />
+                  </ListItemButton>
+                </ListItem>
+              ))}
+            </List>
+          ) : (
+            !phone && (
+              <Typography variant="body2" color="text.secondary">
+                No contacts yet. Add or import contacts to get started.
+              </Typography>
+            )
+          )}
+          {!phone && !showAll && allContacts.length > topContacts.length && (
+            <Button onClick={() => setShowAll(true)} size="small">
+              View all
+            </Button>
+          )}
+          <TextField
+            label="Message"
+            value={text}
+            onChange={(e) => setText(e.target.value)}
+            multiline
+            minRows={3}
+            fullWidth
+          />
+          <FormControlLabel
+            control={
+              <Checkbox
+                checked={disablePrefix}
+                onChange={(e) => setDisablePrefix(e.target.checked)}
+              />
+            }
+            label="Disable prefix"
+          />
+          <Button type="submit" variant="contained" color="primary">
             Send
-          </button>
-          {status && <p className="text-yellow-400 text-sm">{status}</p>}
-        </form>
-      </div>
-    </div>
+          </Button>
+          {status && (
+            <Typography variant="body2" color="warning.main">
+              {status}
+            </Typography>
+          )}
+        </Box>
+      </Card>
+    </Stack>
   );
 }
diff --git a/src/admin/src/styles.css b/src/admin/src/styles.css
deleted file mode 100644
index b5c61c9..0000000
--- a/src/admin/src/styles.css
+++ /dev/null
@@ -1,3 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
diff --git a/src/admin/vite.config.ts b/src/admin/vite.config.ts
index 710c34a..d171911 100644
--- a/src/admin/vite.config.ts
+++ b/src/admin/vite.config.ts
@@ -1,15 +1,8 @@
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
-import path from "path";
 
 export default defineConfig({
   plugins: [react()],
-  resolve: {
-    alias: {
-      "@mui/material": path.resolve(__dirname, "./src/mui"),
-      "@mui/icons-material": path.resolve(__dirname, "./src/mui-icons"),
-    },
-  },
   build: {
     outDir: "dist",
     emptyOutDir: true,

From 4927615f4ed59c05a81c57f5ba98fcf7e836f202 Mon Sep 17 00:00:00 2001
From: Abhishek Datta <abdatta1998@gmail.com>
Date: Sun, 31 Aug 2025 13:43:27 -0700
Subject: [PATCH 3/3] refactor(admin): redesign green dark dashboard

---
 src/admin/package.json             |   7 +-
 src/admin/src/App.tsx              | 237 ++++++++----------
 src/admin/src/main.tsx             |   5 +-
 src/admin/src/pages/Alerts.tsx     |  83 -------
 src/admin/src/pages/Dashboard.tsx  | 169 -------------
 src/admin/src/pages/Qr.tsx         |  42 ----
 src/admin/src/pages/Scheduling.tsx | 373 -----------------------------
 src/admin/src/pages/Send.tsx       | 163 -------------
 8 files changed, 101 insertions(+), 978 deletions(-)
 delete mode 100644 src/admin/src/pages/Alerts.tsx
 delete mode 100644 src/admin/src/pages/Dashboard.tsx
 delete mode 100644 src/admin/src/pages/Qr.tsx
 delete mode 100644 src/admin/src/pages/Scheduling.tsx
 delete mode 100644 src/admin/src/pages/Send.tsx

diff --git a/src/admin/package.json b/src/admin/package.json
index d75cf07..303df87 100644
--- a/src/admin/package.json
+++ b/src/admin/package.json
@@ -10,13 +10,8 @@
   },
   "dependencies": {
     "axios": "^1.4.0",
-    "@emotion/react": "^11.11.1",
-    "@emotion/styled": "^11.11.0",
-    "@mui/icons-material": "^5.15.0",
-    "@mui/material": "^5.15.0",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-router-dom": "^6.14.0"
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
     "@types/react": "^19.1.10",
diff --git a/src/admin/src/App.tsx b/src/admin/src/App.tsx
index 77851f4..b972969 100644
--- a/src/admin/src/App.tsx
+++ b/src/admin/src/App.tsx
@@ -1,148 +1,109 @@
-import React from "react";
-import { NavLink, Routes, Route } from "react-router-dom";
-import Dashboard from "./pages/Dashboard";
-import Send from "./pages/Send";
-import Scheduling from "./pages/Scheduling";
-import Alerts from "./pages/Alerts";
-import Qr from "./pages/Qr";
-
-import {
-  AppBar,
-  Box,
-  Button,
-  CssBaseline,
-  IconButton,
-  ThemeProvider,
-  Toolbar,
-  Typography,
-  createTheme,
-} from "@mui/material";
-import { Brightness4, Brightness7 } from "@mui/icons-material";
+import React, { useEffect, useState } from "react";
 
 export default function App() {
-  const [mode, setMode] = React.useState<"light" | "dark">("dark");
+  const [dark, setDark] = useState(true);
 
-  const theme = React.useMemo(
-    () =>
-      createTheme({
-        palette: {
-          mode,
-          primary: { main: "#00e5ff" },
-          secondary: { main: "#7c4dff" },
-          background: {
-            default: mode === "dark" ? "#0a1929" : "#fafafa",
-            paper: mode === "dark" ? "rgba(255,255,255,0.05)" : "#fff",
-          },
-        },
-        typography: {
-          fontFamily: '"Roboto","Helvetica","Arial",sans-serif',
-          fontWeightBold: 700,
-        },
-        components: {
-          MuiPaper: {
-            styleOverrides: {
-              root: {
-                backgroundImage: "none",
-                backdropFilter: "blur(12px)",
-              },
-            },
-          },
-        },
-      }),
-    [mode]
-  );
+  useEffect(() => {
+    document.documentElement.classList.toggle("dark", dark);
+  }, [dark]);
 
-  const navButton = ({ isActive }: { isActive: boolean }) => ({
-    color: isActive ? theme.palette.primary.main : theme.palette.text.secondary,
-    mx: 1,
-    transition: "color .3s",
-    "&:hover": {
-      color: theme.palette.primary.light,
-      transform: "translateY(-2px)",
-    },
-  });
+  const navItems = ["Dashboard", "Messages", "Analytics", "Settings"];
 
   return (
-    <ThemeProvider theme={theme}>
-      <CssBaseline />
-      <AppBar
-        position="sticky"
-        color="transparent"
-        elevation={0}
-        sx={{
-          backdropFilter: "blur(12px)",
-          borderBottom: 1,
-          borderColor: "divider",
-        }}
-      >
-        <Toolbar>
-          <Typography
-            variant="h6"
-            sx={{
-              flexGrow: 1,
-              fontWeight: 800,
-              background: "linear-gradient(45deg,#5B86E5,#36D1DC)",
-              WebkitBackgroundClip: "text",
-              color: "transparent",
-            }}
-          >
-            Admin
-          </Typography>
-          <NavLink to="/" end>
-            {({ isActive }) => (
-              <Button sx={navButton({ isActive })}>Dashboard</Button>
-            )}
-          </NavLink>
-          <NavLink to="/send">
-            {({ isActive }) => <Button sx={navButton({ isActive })}>Send</Button>}
-          </NavLink>
-          <NavLink to="/scheduling">
-            {({ isActive }) => (
-              <Button sx={navButton({ isActive })}>Scheduling</Button>
-            )}
-          </NavLink>
-          <NavLink to="/alerts">
-            {({ isActive }) => (
-              <Button sx={navButton({ isActive })}>Alerts</Button>
-            )}
-          </NavLink>
-          <NavLink to="/qr">
-            {({ isActive }) => <Button sx={navButton({ isActive })}>QR</Button>}
-          </NavLink>
-          <IconButton
-            color="inherit"
-            onClick={() => setMode(mode === "light" ? "dark" : "light")}
-            sx={{
-              ml: 1,
-              transition: "transform .3s",
-              "&:hover": { transform: "rotate(20deg)" },
-            }}
+    <div className="min-h-screen flex bg-gradient-to-br from-gray-900 via-gray-800 to-black text-gray-100">
+      <aside className="hidden md:flex md:flex-col w-64 p-6 bg-black/30 backdrop-blur-xl border-r border-green-500/20">
+        <h1 className="text-2xl font-bold mb-8 text-green-400">WappFlow</h1>
+        <nav className="space-y-2">
+          {navItems.map((item) => (
+            <a
+              key={item}
+              href="#"
+              className="block px-4 py-2 rounded-lg text-gray-400 hover:text-green-400 hover:bg-green-500/10 transition"
+            >
+              {item}
+            </a>
+          ))}
+        </nav>
+      </aside>
+      <main className="flex-1 p-6 space-y-6 overflow-y-auto">
+        <header className="flex justify-between items-center">
+          <h2 className="text-3xl font-semibold text-green-400">Dashboard</h2>
+          <button
+            onClick={() => setDark(!dark)}
+            className="px-3 py-1 rounded-full bg-green-500/10 text-green-400 hover:bg-green-500/20 transition"
           >
-            {mode === "dark" ? <Brightness7 /> : <Brightness4 />}
-          </IconButton>
-        </Toolbar>
-      </AppBar>
-      <Box
-        sx={{
-          flexGrow: 1,
-          p: 3,
-          minHeight: "100vh",
-          background:
-            mode === "dark"
-              ? "radial-gradient(circle at top left, #1e3a8a, #0f172a)"
-              : "linear-gradient(135deg,#fdfbfb 0%,#ebedee 100%)",
-          transition: "background .5s",
-        }}
-      >
-        <Routes>
-          <Route path="/" element={<Dashboard />} />
-          <Route path="/send" element={<Send />} />
-          <Route path="/scheduling" element={<Scheduling />} />
-          <Route path="/alerts" element={<Alerts />} />
-          <Route path="/qr" element={<Qr />} />
-        </Routes>
-      </Box>
-    </ThemeProvider>
+            {dark ? "Light" : "Dark"}
+          </button>
+        </header>
+
+        <section className="grid sm:grid-cols-2 lg:grid-cols-4 gap-6">
+          <div className="p-6 rounded-xl bg-white/5 backdrop-blur-lg shadow-lg hover:shadow-green-500/20 transition">
+            <p className="text-sm uppercase tracking-wide text-gray-400">Sessions</p>
+            <p className="mt-2 text-3xl font-bold text-green-400">8</p>
+          </div>
+          <div className="p-6 rounded-xl bg-white/5 backdrop-blur-lg shadow-lg hover:shadow-green-500/20 transition">
+            <p className="text-sm uppercase tracking-wide text-gray-400">Messages</p>
+            <p className="mt-2 text-3xl font-bold text-green-400">1.2k</p>
+          </div>
+          <div className="p-6 rounded-xl bg-white/5 backdrop-blur-lg shadow-lg hover:shadow-green-500/20 transition">
+            <p className="text-sm uppercase tracking-wide text-gray-400">Deliveries</p>
+            <p className="mt-2 text-3xl font-bold text-green-400">98%</p>
+          </div>
+          <div className="p-6 rounded-xl bg-white/5 backdrop-blur-lg shadow-lg hover:shadow-green-500/20 transition">
+            <p className="text-sm uppercase tracking-wide text-gray-400">Errors</p>
+            <p className="mt-2 text-3xl font-bold text-green-400">2</p>
+          </div>
+        </section>
+
+        <section className="grid md:grid-cols-2 gap-6">
+          <div className="p-6 rounded-xl bg-white/5 backdrop-blur-lg shadow-lg">
+            <h3 className="mb-4 font-semibold text-green-400">Overview</h3>
+            <div className="h-48 flex items-center justify-center text-gray-500">
+              <svg viewBox="0 0 200 100" className="w-full h-full">
+                <polyline
+                  fill="none"
+                  stroke="#25D366"
+                  strokeWidth="3"
+                  points="0,80 40,60 80,65 120,20 160,30 200,10"
+                />
+              </svg>
+            </div>
+          </div>
+          <div className="p-6 rounded-xl bg-white/5 backdrop-blur-lg shadow-lg">
+            <h3 className="mb-4 font-semibold text-green-400">Customers</h3>
+            <ul className="space-y-4">
+              <li className="flex items-center gap-3">
+                <span className="w-10 h-10 rounded-full bg-green-500/20 flex items-center justify-center text-green-400">
+                  SJ
+                </span>
+                <div>
+                  <p className="font-medium">Sarah Johnson</p>
+                  <p className="text-sm text-gray-400">Active</p>
+                </div>
+              </li>
+              <li className="flex items-center gap-3">
+                <span className="w-10 h-10 rounded-full bg-green-500/20 flex items-center justify-center text-green-400">
+                  RB
+                </span>
+                <div>
+                  <p className="font-medium">Rahul B</p>
+                  <p className="text-sm text-gray-400">Offline</p>
+                </div>
+              </li>
+              <li className="flex items-center gap-3">
+                <span className="w-10 h-10 rounded-full bg-green-500/20 flex items-center justify-center text-green-400">
+                  MK
+                </span>
+                <div>
+                  <p className="font-medium">Maria K</p>
+                  <p className="text-sm text-gray-400">Active</p>
+                </div>
+              </li>
+            </ul>
+          </div>
+        </section>
+      </main>
+    </div>
   );
 }
 
diff --git a/src/admin/src/main.tsx b/src/admin/src/main.tsx
index 0c2b123..49aeb45 100644
--- a/src/admin/src/main.tsx
+++ b/src/admin/src/main.tsx
@@ -1,15 +1,12 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
-import { BrowserRouter } from "react-router-dom";
 import App from "./App";
 
 const root = document.getElementById("root");
 if (root) {
   ReactDOM.createRoot(root).render(
     <React.StrictMode>
-      <BrowserRouter basename="/admin">
-        <App />
-      </BrowserRouter>
+      <App />
     </React.StrictMode>,
   );
 }
diff --git a/src/admin/src/pages/Alerts.tsx b/src/admin/src/pages/Alerts.tsx
deleted file mode 100644
index 5ba174e..0000000
--- a/src/admin/src/pages/Alerts.tsx
+++ /dev/null
@@ -1,83 +0,0 @@
-import React, { useEffect, useState } from "react";
-import { fetchHealth } from "../lib/api";
-import {
-  Card,
-  List,
-  ListItem,
-  ListItemText,
-  Stack,
-  Typography,
-} from "@mui/material";
-
-interface AlertItem {
-  ts: number;
-  message: string;
-}
-
-const glassCard = {
-  p: 3,
-  borderRadius: 2,
-  backgroundColor: "rgba(255,255,255,0.08)",
-  backdropFilter: "blur(10px)",
-  boxShadow: "0 8px 32px rgba(0,0,0,0.2)",
-  transition: "transform .3s, box-shadow .3s",
-  "&:hover": {
-    transform: "translateY(-4px)",
-    boxShadow: "0 16px 32px rgba(0,0,0,0.4)",
-  },
-};
-
-export default function Alerts() {
-  const [alerts, setAlerts] = useState<AlertItem[]>([]);
-  const [lastReady, setLastReady] = useState<boolean | null>(null);
-
-  useEffect(() => {
-    const interval = setInterval(check, 5000);
-    check();
-    return () => clearInterval(interval);
-  }, []);
-
-  async function check() {
-    try {
-      const health = await fetchHealth();
-      if (lastReady === null) {
-        setLastReady(health.session.ready);
-        return;
-      }
-      if (health.session.ready !== lastReady) {
-        const message = health.session.ready
-          ? "Relinked / Ready"
-          : "QR required or offline";
-        setAlerts((prev) => [{ ts: Date.now(), message }, ...prev].slice(0, 20));
-        setLastReady(health.session.ready);
-      }
-    } catch (err) {
-      console.error(err);
-    }
-  }
-
-  return (
-    <Stack spacing={4}>
-      <Typography variant="h4" fontWeight="bold">
-        Alerts
-      </Typography>
-      <Card sx={glassCard}>
-        <List>
-          {alerts.map((a) => (
-            <ListItem key={a.ts} divider>
-              <ListItemText
-                primary={a.message}
-                secondary={new Date(a.ts).toLocaleString()}
-              />
-            </ListItem>
-          ))}
-          {alerts.length === 0 && (
-            <Typography sx={{ p: 2 }} color="text.secondary">
-              No alerts yet.
-            </Typography>
-          )}
-        </List>
-      </Card>
-    </Stack>
-  );
-}
diff --git a/src/admin/src/pages/Dashboard.tsx b/src/admin/src/pages/Dashboard.tsx
deleted file mode 100644
index 488b026..0000000
--- a/src/admin/src/pages/Dashboard.tsx
+++ /dev/null
@@ -1,169 +0,0 @@
-import React, { useEffect, useState } from "react";
-import { fetchHealth, sendMessage, testPush, subscribePush } from "../lib/api";
-import {
-  Box,
-  Button,
-  Card,
-  Checkbox,
-  FormControlLabel,
-  Grid,
-  Stack,
-  TextField,
-  Typography,
-} from "@mui/material";
-
-interface Health {
-  session: { ready: boolean; qr: string | null };
-  sentToday: number;
-  perMinAvailable: number;
-  dailyCap: number;
-  headless: boolean;
-}
-
-const glassCard = {
-  p: 3,
-  borderRadius: 2,
-  backgroundColor: "rgba(255,255,255,0.08)",
-  backdropFilter: "blur(10px)",
-  boxShadow: "0 8px 32px rgba(0,0,0,0.2)",
-  transition: "transform .3s, box-shadow .3s",
-  "&:hover": {
-    transform: "translateY(-4px)",
-    boxShadow: "0 16px 32px rgba(0,0,0,0.4)",
-  },
-};
-
-function InfoCard({ title, value }: { title: string; value: React.ReactNode }) {
-  return (
-    <Grid item xs={12} sm={6} md={3}>
-      <Card sx={glassCard}>
-        <Typography variant="subtitle1" fontWeight="bold" gutterBottom>
-          {title}
-        </Typography>
-        <Typography variant="body1">{value}</Typography>
-      </Card>
-    </Grid>
-  );
-}
-
-export default function Dashboard() {
-  const [health, setHealth] = useState<Health | null>(null);
-  const [phone, setPhone] = useState("");
-  const [text, setText] = useState("");
-  const [disablePrefix, setDisablePrefix] = useState(false);
-  const [message, setMessage] = useState<string | null>(null);
-
-  useEffect(() => {
-    refresh();
-    const id = setInterval(refresh, 5000);
-    return () => clearInterval(id);
-  }, []);
-
-  async function refresh() {
-    try {
-      const data = await fetchHealth();
-      setHealth(data);
-    } catch (err) {
-      console.error(err);
-    }
-  }
-
-  async function handleSend(e: React.FormEvent) {
-    e.preventDefault();
-    try {
-      await sendMessage({ phone, text, disablePrefix });
-      setMessage("Message sent");
-      setPhone("");
-      setText("");
-    } catch (err: any) {
-      setMessage(err.response?.data?.error || "Error sending");
-    }
-    refresh();
-  }
-
-  async function handleSubscribe() {
-    if (!("serviceWorker" in navigator)) return;
-    const reg = await navigator.serviceWorker.ready;
-    const subscription = await reg.pushManager.subscribe({
-      userVisibleOnly: true,
-      applicationServerKey: undefined,
-    });
-    await subscribePush(subscription);
-    alert("Subscribed to push notifications");
-  }
-
-  return (
-    <Stack spacing={4}>
-      <Typography variant="h4" fontWeight="bold">
-        Dashboard
-      </Typography>
-      {health && (
-        <Grid container spacing={3}>
-          <InfoCard
-            title="Session"
-            value={health.session.ready ? "Ready" : "Not ready"}
-          />
-          <InfoCard
-            title="Daily Usage"
-            value={`${health.sentToday} / ${health.dailyCap}`}
-          />
-          <InfoCard
-            title="Minute Tokens"
-            value={`${health.perMinAvailable} available`}
-          />
-          <InfoCard
-            title="Headless"
-            value={health.headless ? "Enabled" : "Disabled"}
-          />
-        </Grid>
-      )}
-      <Card sx={{ ...glassCard, display: "flex", flexDirection: "column", gap: 2 }}>
-        <Typography variant="h6" gutterBottom>
-          Quick Send
-        </Typography>
-        <Box component="form" onSubmit={handleSend} sx={{ display: "flex", flexDirection: "column", gap: 2 }}>
-          <TextField
-            label="E.164 Phone"
-            value={phone}
-            onChange={(e) => setPhone(e.target.value)}
-            fullWidth
-          />
-          <TextField
-            label="Message"
-            value={text}
-            onChange={(e) => setText(e.target.value)}
-            multiline
-            minRows={3}
-            fullWidth
-          />
-          <FormControlLabel
-            control={
-              <Checkbox
-                checked={disablePrefix}
-                onChange={(e) => setDisablePrefix(e.target.checked)}
-              />
-            }
-            label="Disable prefix"
-          />
-          <Button type="submit" variant="contained" color="primary">
-            Send
-          </Button>
-        </Box>
-        {message && (
-          <Typography variant="body2" color="warning.main">
-            {message}
-          </Typography>
-        )}
-      </Card>
-      <Stack direction="row" spacing={2}>
-        <Button variant="contained" color="secondary" onClick={handleSubscribe}>
-          Subscribe to Push
-        </Button>
-        <Button variant="contained" color="info" onClick={() => testPush()}>
-          Test Push
-        </Button>
-      </Stack>
-    </Stack>
-  );
-}
-
diff --git a/src/admin/src/pages/Qr.tsx b/src/admin/src/pages/Qr.tsx
deleted file mode 100644
index e3d317f..0000000
--- a/src/admin/src/pages/Qr.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import React, { useEffect, useState } from "react";
-import { Box, Card, Stack, Typography } from "@mui/material";
-
-const glassCard = {
-  p: 4,
-  borderRadius: 2,
-  backgroundColor: "rgba(255,255,255,0.08)",
-  backdropFilter: "blur(10px)",
-  boxShadow: "0 8px 32px rgba(0,0,0,0.2)",
-  transition: "transform .3s, box-shadow .3s",
-  "&:hover": {
-    transform: "translateY(-4px)",
-    boxShadow: "0 16px 32px rgba(0,0,0,0.4)",
-  },
-};
-
-export default function Qr() {
-  const [src, setSrc] = useState("");
-  useEffect(() => {
-    const update = () => {
-      const ts = Date.now();
-      setSrc(`/qr/latest?ts=${ts}`);
-    };
-    update();
-    const id = setInterval(update, 3000);
-    return () => clearInterval(id);
-  }, []);
-  return (
-    <Stack spacing={4} alignItems="center">
-      <Typography variant="h4" fontWeight="bold">
-        QR Code
-      </Typography>
-      <Card sx={glassCard}>
-        {src ? (
-          <Box component="img" src={src} alt="QR" sx={{ maxWidth: "100%" }} />
-        ) : (
-          <Typography>Loading...</Typography>
-        )}
-      </Card>
-    </Stack>
-  );
-}
diff --git a/src/admin/src/pages/Scheduling.tsx b/src/admin/src/pages/Scheduling.tsx
deleted file mode 100644
index 071bc43..0000000
--- a/src/admin/src/pages/Scheduling.tsx
+++ /dev/null
@@ -1,373 +0,0 @@
-import React, { useEffect, useState } from "react";
-import {
-  listSchedules,
-  createSchedule,
-  deleteSchedule,
-  runSchedule,
-  pauseSchedule,
-  resumeSchedule,
-  updateSchedule,
-  fetchTopContacts,
-  fetchAllContacts,
-} from "../lib/api";
-import type { Contact } from "../lib/types";
-import {
-  Box,
-  Button,
-  Card,
-  Checkbox,
-  Dialog,
-  DialogActions,
-  DialogContent,
-  DialogTitle,
-  FormControlLabel,
-  List,
-  ListItem,
-  ListItemButton,
-  ListItemText,
-  Stack,
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableRow,
-  TextField,
-  Typography,
-} from "@mui/material";
-
-interface Schedule {
-  id: string;
-  phone?: string;
-  name?: string;
-  text: string;
-  disablePrefix: boolean;
-  firstRunAt: string;
-  nextRunAt: string;
-  intervalMinutes: number | null;
-  active: boolean;
-  lastRunAt: string | null;
-}
-
-const glassCard = {
-  p: 3,
-  borderRadius: 2,
-  backgroundColor: "rgba(255,255,255,0.08)",
-  backdropFilter: "blur(10px)",
-  boxShadow: "0 8px 32px rgba(0,0,0,0.2)",
-  transition: "transform .3s, box-shadow .3s",
-  "&:hover": {
-    transform: "translateY(-4px)",
-    boxShadow: "0 16px 32px rgba(0,0,0,0.4)",
-  },
-};
-
-export default function Scheduling() {
-  const [schedules, setSchedules] = useState<Schedule[]>([]);
-  const [form, setForm] = useState({
-    phone: "",
-    text: "",
-    disablePrefix: false,
-    firstRunAt: "",
-    intervalMinutes: "" as string | number,
-    active: true,
-  });
-  const [selected, setSelected] = useState<Contact | null>(null);
-  const [topContacts, setTopContacts] = useState<Contact[]>([]);
-  const [allContacts, setAllContacts] = useState<Contact[]>([]);
-  const [showAll, setShowAll] = useState(false);
-  const [edit, setEdit] = useState<{
-    id: string;
-    text: string;
-    disablePrefix: boolean;
-    firstRunAt: string;
-    intervalMinutes: string | number;
-    active: boolean;
-  } | null>(null);
-  const [status, setStatus] = useState<string | null>(null);
-
-  const suggestions = selected
-    ? []
-    : form.phone
-    ? allContacts.filter(
-        (c) =>
-          c.phone?.includes(form.phone) ||
-          c.name.toLowerCase().includes(form.phone.toLowerCase())
-      )
-    : showAll
-    ? allContacts
-    : topContacts;
-
-  useEffect(() => {
-    refresh();
-    fetchTopContacts().then((res) => setTopContacts(res.contacts));
-    fetchAllContacts().then((res) => setAllContacts(res.contacts));
-  }, []);
-
-  async function refresh() {
-    try {
-      const data = await listSchedules();
-      setSchedules(data.items);
-    } catch (err) {
-      console.error(err);
-    }
-  }
-
-  async function handleCreate(e: React.FormEvent) {
-    e.preventDefault();
-    try {
-      const payload: any = {
-        text: form.text,
-        disablePrefix: form.disablePrefix,
-        active: form.active,
-      };
-      if (selected) {
-        if (selected.phone) payload.phone = selected.phone;
-        else payload.name = selected.name;
-      } else if (form.phone) {
-        payload.phone = form.phone;
-      } else {
-        throw new Error("Missing contact");
-      }
-      if (form.firstRunAt)
-        payload.firstRunAt = new Date(form.firstRunAt).toISOString();
-      if (form.intervalMinutes)
-        payload.intervalMinutes = Number(form.intervalMinutes);
-      await createSchedule(payload);
-      setStatus("Schedule created");
-      setForm({
-        phone: "",
-        text: "",
-        disablePrefix: false,
-        firstRunAt: "",
-        intervalMinutes: "",
-        active: true,
-      });
-      setSelected(null);
-      refresh();
-    } catch (err: any) {
-      setStatus(err.response?.data?.error || err.message || "Error creating");
-    }
-  }
-
-  async function handleDelete(id: string) {
-    await deleteSchedule(id);
-    refresh();
-  }
-  async function handleRun(id: string) {
-    await runSchedule(id);
-    refresh();
-  }
-  async function handlePause(id: string) {
-    await pauseSchedule(id);
-    refresh();
-  }
-  async function handleResume(id: string) {
-    await resumeSchedule(id);
-    refresh();
-  }
-  async function handleUpdate(e: React.FormEvent) {
-    e.preventDefault();
-    if (!edit) return;
-    await updateSchedule(edit.id, {
-      text: edit.text,
-      disablePrefix: edit.disablePrefix,
-      firstRunAt: edit.firstRunAt ? new Date(edit.firstRunAt).toISOString() : undefined,
-      intervalMinutes: edit.intervalMinutes ? Number(edit.intervalMinutes) : undefined,
-      active: edit.active,
-    });
-    setEdit(null);
-    refresh();
-  }
-
-  return (
-    <Stack spacing={4}>
-      <Typography variant="h4" fontWeight="bold">
-        Scheduling
-      </Typography>
-      <Card sx={glassCard}>
-        <Box
-          component="form"
-          onSubmit={handleCreate}
-          sx={{ display: "flex", flexDirection: "column", gap: 2 }}
-        >
-          <TextField
-            label="Contact"
-            value={form.phone}
-            onChange={(e) => {
-              setForm({ ...form, phone: e.target.value });
-              setSelected(null);
-              if (e.target.value) setShowAll(false);
-            }}
-            fullWidth
-          />
-          {suggestions.length > 0 && (
-            <List sx={{ maxHeight: 200, overflow: "auto", mb: 1 }}>
-              {suggestions.map((c) => (
-                <ListItem key={c.phone || c.name} disablePadding>
-                  <ListItemButton
-                    onClick={() => {
-                      setSelected(c);
-                      setForm({ ...form, phone: c.phone ? `${c.name} (${c.phone})` : c.name });
-                    }}
-                  >
-                    <ListItemText primary={c.name} secondary={c.phone || undefined} />
-                  </ListItemButton>
-                </ListItem>
-              ))}
-            </List>
-          )}
-          {!form.phone && !showAll && allContacts.length > topContacts.length && (
-            <Button onClick={() => setShowAll(true)} size="small">
-              View all
-            </Button>
-          )}
-          <TextField
-            label="Message"
-            value={form.text}
-            onChange={(e) => setForm({ ...form, text: e.target.value })}
-            multiline
-            minRows={3}
-            fullWidth
-          />
-          <FormControlLabel
-            control={
-              <Checkbox
-                checked={form.disablePrefix}
-                onChange={(e) => setForm({ ...form, disablePrefix: e.target.checked })}
-              />
-            }
-            label="Disable prefix"
-          />
-          <TextField
-            label="First run (local)"
-            type="datetime-local"
-            value={form.firstRunAt}
-            onChange={(e) => setForm({ ...form, firstRunAt: e.target.value })}
-            InputLabelProps={{ shrink: true }}
-            fullWidth
-          />
-          <TextField
-            label="Interval (minutes)"
-            type="number"
-            value={form.intervalMinutes}
-            onChange={(e) => setForm({ ...form, intervalMinutes: e.target.value })}
-            fullWidth
-          />
-          <FormControlLabel
-            control={
-              <Checkbox
-                checked={form.active}
-                onChange={(e) => setForm({ ...form, active: e.target.checked })}
-              />
-            }
-            label="Active"
-          />
-          <Button type="submit" variant="contained" color="primary">
-            Create Schedule
-          </Button>
-          {status && (
-            <Typography variant="body2" color="warning.main">
-              {status}
-            </Typography>
-          )}
-        </Box>
-      </Card>
-      <Card sx={glassCard}>
-        <Table>
-          <TableHead>
-            <TableRow>
-              <TableCell>To</TableCell>
-              <TableCell>Message</TableCell>
-              <TableCell>Next Run</TableCell>
-              <TableCell align="right">Actions</TableCell>
-            </TableRow>
-          </TableHead>
-          <TableBody>
-            {schedules.map((s) => (
-              <TableRow key={s.id} hover>
-                <TableCell>{s.phone || s.name}</TableCell>
-                <TableCell>{s.text}</TableCell>
-                <TableCell>{new Date(s.nextRunAt).toLocaleString()}</TableCell>
-                <TableCell align="right">
-                  <Button size="small" onClick={() =>
-                    setEdit({
-                      id: s.id,
-                      text: s.text,
-                      disablePrefix: s.disablePrefix,
-                      firstRunAt: s.firstRunAt ? s.firstRunAt.slice(0,16) : "",
-                      intervalMinutes: s.intervalMinutes ?? "",
-                      active: s.active,
-                    })
-                  }>Edit</Button>
-                  <Button size="small" onClick={() => handleRun(s.id)}>Run</Button>
-                  {s.active ? (
-                    <Button size="small" onClick={() => handlePause(s.id)}>Pause</Button>
-                  ) : (
-                    <Button size="small" onClick={() => handleResume(s.id)}>Resume</Button>
-                  )}
-                  <Button size="small" color="error" onClick={() => handleDelete(s.id)}>
-                    Delete
-                  </Button>
-                </TableCell>
-              </TableRow>
-            ))}
-          </TableBody>
-        </Table>
-      </Card>
-      <Dialog open={Boolean(edit)} onClose={() => setEdit(null)} fullWidth maxWidth="sm">
-        <DialogTitle>Edit Schedule</DialogTitle>
-        {edit && (
-          <Box component="form" onSubmit={handleUpdate}>
-            <DialogContent sx={{ display: "flex", flexDirection: "column", gap: 2 }}>
-              <TextField
-                label="Message"
-                value={edit.text}
-                onChange={(e) => setEdit({ ...edit, text: e.target.value })}
-                multiline
-                minRows={3}
-                fullWidth
-              />
-              <FormControlLabel
-                control={
-                  <Checkbox
-                    checked={edit.disablePrefix}
-                    onChange={(e) => setEdit({ ...edit, disablePrefix: e.target.checked })}
-                  />
-                }
-                label="Disable prefix"
-              />
-              <TextField
-                label="First run (local)"
-                type="datetime-local"
-                value={edit.firstRunAt}
-                onChange={(e) => setEdit({ ...edit, firstRunAt: e.target.value })}
-                InputLabelProps={{ shrink: true }}
-                fullWidth
-              />
-              <TextField
-                label="Interval (minutes)"
-                type="number"
-                value={edit.intervalMinutes}
-                onChange={(e) => setEdit({ ...edit, intervalMinutes: e.target.value })}
-                fullWidth
-              />
-              <FormControlLabel
-                control={
-                  <Checkbox
-                    checked={edit.active}
-                    onChange={(e) => setEdit({ ...edit, active: e.target.checked })}
-                  />
-                }
-                label="Active"
-              />
-            </DialogContent>
-            <DialogActions>
-              <Button onClick={() => setEdit(null)}>Cancel</Button>
-              <Button type="submit">Save</Button>
-            </DialogActions>
-          </Box>
-        )}
-      </Dialog>
-    </Stack>
-  );
-}
diff --git a/src/admin/src/pages/Send.tsx b/src/admin/src/pages/Send.tsx
deleted file mode 100644
index 170989e..0000000
--- a/src/admin/src/pages/Send.tsx
+++ /dev/null
@@ -1,163 +0,0 @@
-import React, { useState, useEffect } from "react";
-import { sendMessage, fetchTopContacts, fetchAllContacts } from "../lib/api";
-import type { Contact } from "../lib/types";
-import {
-  Box,
-  Button,
-  Card,
-  Checkbox,
-  FormControlLabel,
-  List,
-  ListItem,
-  ListItemButton,
-  ListItemText,
-  Stack,
-  TextField,
-  Typography,
-} from "@mui/material";
-
-const glassCard = {
-  p: 3,
-  borderRadius: 2,
-  backgroundColor: "rgba(255,255,255,0.08)",
-  backdropFilter: "blur(10px)",
-  boxShadow: "0 8px 32px rgba(0,0,0,0.2)",
-  transition: "transform .3s, box-shadow .3s",
-  "&:hover": {
-    transform: "translateY(-4px)",
-    boxShadow: "0 16px 32px rgba(0,0,0,0.4)",
-  },
-};
-
-export default function Send() {
-  const [phone, setPhone] = useState("");
-  const [selected, setSelected] = useState<Contact | null>(null);
-  const [text, setText] = useState("");
-  const [disablePrefix, setDisablePrefix] = useState(false);
-  const [status, setStatus] = useState<string | null>(null);
-  const [topContacts, setTopContacts] = useState<Contact[]>([]);
-  const [allContacts, setAllContacts] = useState<Contact[]>([]);
-  const [showAll, setShowAll] = useState(false);
-
-  useEffect(() => {
-    fetchTopContacts().then((res) => setTopContacts(res.contacts));
-    fetchAllContacts().then((res) => setAllContacts(res.contacts));
-  }, []);
-
-  const suggestions = selected
-    ? []
-    : phone
-    ? allContacts.filter(
-        (c) =>
-          c.phone?.includes(phone) ||
-          c.name.toLowerCase().includes(phone.toLowerCase())
-      )
-    : showAll
-    ? allContacts
-    : topContacts;
-
-  async function handleSubmit(e: React.FormEvent) {
-    e.preventDefault();
-    try {
-      const payload: any = { text, disablePrefix };
-      if (selected) {
-        if (selected.phone) payload.phone = selected.phone;
-        else payload.name = selected.name;
-      } else if (phone) {
-        payload.phone = phone;
-      } else {
-        throw new Error("Missing recipient");
-      }
-      await sendMessage(payload);
-      setStatus("Message sent successfully");
-      setPhone("");
-      setSelected(null);
-      setText("");
-    } catch (err: any) {
-      setStatus(err.response?.data?.error || "Failed to send");
-    }
-  }
-
-  return (
-    <Stack spacing={4}>
-      <Typography variant="h4" fontWeight="bold">
-        Send Message
-      </Typography>
-      <Card sx={{ ...glassCard, maxWidth: 500 }}>
-        <Box
-          component="form"
-          onSubmit={handleSubmit}
-          sx={{ display: "flex", flexDirection: "column", gap: 2 }}
-        >
-          <TextField
-            label="Contact"
-            value={phone}
-            onChange={(e) => {
-              setPhone(e.target.value);
-              setSelected(null);
-              if (e.target.value) setShowAll(false);
-            }}
-            fullWidth
-          />
-          {suggestions.length > 0 ? (
-            <List sx={{ maxHeight: 200, overflow: "auto", mb: 1 }}>
-              {suggestions.map((c) => (
-                <ListItem key={c.phone || c.name} disablePadding>
-                  <ListItemButton
-                    onClick={() => {
-                      setSelected(c);
-                      setPhone(
-                        c.phone ? `${c.name} (${c.phone})` : c.name
-                      );
-                    }}
-                  >
-                    <ListItemText
-                      primary={c.name}
-                      secondary={c.phone || undefined}
-                    />
-                  </ListItemButton>
-                </ListItem>
-              ))}
-            </List>
-          ) : (
-            !phone && (
-              <Typography variant="body2" color="text.secondary">
-                No contacts yet. Add or import contacts to get started.
-              </Typography>
-            )
-          )}
-          {!phone && !showAll && allContacts.length > topContacts.length && (
-            <Button onClick={() => setShowAll(true)} size="small">
-              View all
-            </Button>
-          )}
-          <TextField
-            label="Message"
-            value={text}
-            onChange={(e) => setText(e.target.value)}
-            multiline
-            minRows={3}
-            fullWidth
-          />
-          <FormControlLabel
-            control={
-              <Checkbox
-                checked={disablePrefix}
-                onChange={(e) => setDisablePrefix(e.target.checked)}
-              />
-            }
-            label="Disable prefix"
-          />
-          <Button type="submit" variant="contained" color="primary">
-            Send
-          </Button>
-          {status && (
-            <Typography variant="body2" color="warning.main">
-              {status}
-            </Typography>
-          )}
-        </Box>
-      </Card>
-    </Stack>
-  );
-}