feat: add admin frontend in /admin-frontend
This commit is contained in:
MWorld Deployer
parent
384eb31752
commit
1112e6f062
4
admin-frontend/.gitignore
vendored
Normal file
4
admin-frontend/.gitignore
vendored
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
node_modules
|
||||||
|
dist
|
||||||
|
.wrangler
|
||||||
|
.env
|
||||||
13
admin-frontend/index.html
Normal file
13
admin-frontend/index.html
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Dissolve</title>
|
||||||
|
<script async src="https://data-analytics.mworld.cloud/analytics.js" data-site-id="xd1uom"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="root"></div>
|
||||||
|
<script type="module" src="/src/main.tsx"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
3660
admin-frontend/package-lock.json
generated
Normal file
3660
admin-frontend/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
44
admin-frontend/package.json
Normal file
44
admin-frontend/package.json
Normal file
@ -0,0 +1,44 @@
|
|||||||
|
{
|
||||||
|
"name": "admin-dissolve-xd1uom",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "vite build",
|
||||||
|
"preview": "vite preview"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"react": "^18.2.0",
|
||||||
|
"react-dom": "^18.2.0",
|
||||||
|
"clsx": "^2.0.0",
|
||||||
|
"tailwind-merge": "^1.14.0",
|
||||||
|
"class-variance-authority": "^0.7.0",
|
||||||
|
"tailwindcss-animate": "^1.0.7",
|
||||||
|
"react-hook-form": "^7.48.2",
|
||||||
|
"@hookform/resolvers": "^3.3.2",
|
||||||
|
"zod": "^3.22.4",
|
||||||
|
"@radix-ui/react-slot": "^1.0.2",
|
||||||
|
"sonner": "latest",
|
||||||
|
"axios": "^1.6.0",
|
||||||
|
"@tanstack/react-query": "^5.0.0",
|
||||||
|
"@tanstack/react-table": "^8.20.5",
|
||||||
|
"framer-motion": "^10.16.4",
|
||||||
|
"recharts": "^2.13.0",
|
||||||
|
"lucide-react": "^0.378.0",
|
||||||
|
"react-router-dom": "^6.18.0",
|
||||||
|
"date-fns": "^3.0.0",
|
||||||
|
"zustand": "^4.5.7",
|
||||||
|
"@cashfreepayments/cashfree-js": "^1.0.6"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"vite": "^5.4.0",
|
||||||
|
"@vitejs/plugin-react": "^4.3.0",
|
||||||
|
"tailwindcss": "^3.4.0",
|
||||||
|
"@tailwindcss/typography": "^0.5.10",
|
||||||
|
"autoprefixer": "^10.4.20",
|
||||||
|
"postcss": "^8.4.47",
|
||||||
|
"typescript": "^5.2.2",
|
||||||
|
"@types/react": "^18.2.37",
|
||||||
|
"@types/react-dom": "^18.2.15"
|
||||||
|
}
|
||||||
|
}
|
||||||
1
admin-frontend/postcss.config.js
Normal file
1
admin-frontend/postcss.config.js
Normal file
@ -0,0 +1 @@
|
|||||||
|
export default { plugins: { tailwindcss: {}, autoprefixer: {} } }
|
||||||
37
admin-frontend/src/App.tsx
Normal file
37
admin-frontend/src/App.tsx
Normal file
@ -0,0 +1,37 @@
|
|||||||
|
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
|
||||||
|
import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
|
||||||
|
import { Toaster } from 'sonner';
|
||||||
|
import Layout from './components/Layout';
|
||||||
|
import { DashboardPage, ReportsQueuePage, ReportDetailPage, UserManagementPage } from './pages';
|
||||||
|
|
||||||
|
const queryClient = new QueryClient();
|
||||||
|
|
||||||
|
function App() {
|
||||||
|
return (
|
||||||
|
<QueryClientProvider client={queryClient}>
|
||||||
|
<Router>
|
||||||
|
<Routes>
|
||||||
|
<Route path="/" element={<Layout />}>
|
||||||
|
<Route index element={<DashboardPage />} />
|
||||||
|
<Route path="reports" element={<ReportsQueuePage />} />
|
||||||
|
<Route path="reports/:reportId" element={<ReportDetailPage />} />
|
||||||
|
<Route path="users" element={<UserManagementPage />} />
|
||||||
|
<Route path="*" element={<Navigate to="/" replace />} />
|
||||||
|
</Route>
|
||||||
|
</Routes>
|
||||||
|
</Router>
|
||||||
|
<Toaster
|
||||||
|
position="bottom-right"
|
||||||
|
toastOptions={{
|
||||||
|
classNames: {
|
||||||
|
toast: 'bg-neutral-800 border border-neutral-700 text-white rounded-md',
|
||||||
|
success: '!bg-green-accent/10 !text-green-accent border-green-accent/20',
|
||||||
|
error: '!bg-red-500/10 !text-red-500 border-red-500/20',
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</QueryClientProvider>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default App;
|
||||||
43
admin-frontend/src/api.ts
Normal file
43
admin-frontend/src/api.ts
Normal file
@ -0,0 +1,43 @@
|
|||||||
|
|
||||||
|
import axios from 'axios';
|
||||||
|
|
||||||
|
export const API_URL = (window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1')
|
||||||
|
? "http://localhost:8787"
|
||||||
|
: "https://app-xd1uom.laflabs-tech.workers.dev";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* The admin panel is protected by an auth_token in the URL query string.
|
||||||
|
* We read it once on load and store in sessionStorage so API requests can use it.
|
||||||
|
* This token is verified against a stored hash in the backend DB's settings table.
|
||||||
|
*/
|
||||||
|
function getAdminAuthToken(): string | null {
|
||||||
|
// Try URL first (initial load), then fall back to sessionStorage (subsequent navigations)
|
||||||
|
const urlToken = new URLSearchParams(window.location.search).get('auth_token');
|
||||||
|
if (urlToken) {
|
||||||
|
sessionStorage.setItem('admin_auth_token', urlToken);
|
||||||
|
return urlToken;
|
||||||
|
}
|
||||||
|
return sessionStorage.getItem('admin_auth_token');
|
||||||
|
}
|
||||||
|
|
||||||
|
export const api = axios.create({
|
||||||
|
baseURL: API_URL,
|
||||||
|
headers: { 'Content-Type': 'application/json' }
|
||||||
|
});
|
||||||
|
|
||||||
|
api.interceptors.request.use((config) => {
|
||||||
|
const token = getAdminAuthToken();
|
||||||
|
if (token) {
|
||||||
|
config.headers.Authorization = `Bearer ${token}`;
|
||||||
|
}
|
||||||
|
config.headers['x-mworld-origin'] = window.location.origin;
|
||||||
|
return config;
|
||||||
|
});
|
||||||
|
|
||||||
|
api.interceptors.response.use(
|
||||||
|
(response) => response,
|
||||||
|
(error) => {
|
||||||
|
// Do NOT clear token on 401 in admin panel — the token is URL-based and valid for the session
|
||||||
|
return Promise.reject(error);
|
||||||
|
}
|
||||||
|
);
|
||||||
26
admin-frontend/src/components/Layout.tsx
Normal file
26
admin-frontend/src/components/Layout.tsx
Normal file
@ -0,0 +1,26 @@
|
|||||||
|
import { Outlet } from 'react-router-dom';
|
||||||
|
import Sidebar from './Sidebar';
|
||||||
|
import { motion } from 'framer-motion';
|
||||||
|
|
||||||
|
const Layout = () => {
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-black text-neutral-200 font-sans flex antialiased relative">
|
||||||
|
<div className="fixed inset-0 bg-noise opacity-10 pointer-events-none"></div>
|
||||||
|
<Sidebar />
|
||||||
|
<main className="flex-1 pl-64">
|
||||||
|
<motion.div
|
||||||
|
key={location.pathname}
|
||||||
|
initial={{ opacity: 0, y: 10 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
exit={{ opacity: 0, y: -10 }}
|
||||||
|
transition={{ duration: 0.3, ease: 'easeInOut' }}
|
||||||
|
className="p-8"
|
||||||
|
>
|
||||||
|
<Outlet />
|
||||||
|
</motion.div>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Layout;
|
||||||
55
admin-frontend/src/components/Sidebar.tsx
Normal file
55
admin-frontend/src/components/Sidebar.tsx
Normal file
@ -0,0 +1,55 @@
|
|||||||
|
import { NavLink, useLocation } from 'react-router-dom';
|
||||||
|
import { cn } from '../lib/utils';
|
||||||
|
import { Home, List, Users, Triangle } from 'lucide-react';
|
||||||
|
import { useUserStore } from '../stores/userStore';
|
||||||
|
|
||||||
|
const navigation = [
|
||||||
|
{ name: 'Dashboard', href: '/', icon: Home },
|
||||||
|
{ name: 'Reports', href: '/reports', icon: List },
|
||||||
|
{ name: 'Users', href: '/users', icon: Users, adminOnly: true },
|
||||||
|
];
|
||||||
|
|
||||||
|
const Sidebar = () => {
|
||||||
|
const { user } = useUserStore();
|
||||||
|
const location = useLocation();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<aside className="fixed top-0 left-0 h-full w-64 bg-neutral-950/50 backdrop-blur-sm border-r border-neutral-800 flex flex-col">
|
||||||
|
<div className="flex items-center justify-center h-20 border-b border-neutral-800">
|
||||||
|
<Triangle className="h-6 w-6 text-green-accent" />
|
||||||
|
<h1 className="text-xl font-bold ml-3 font-mono tracking-wider">DISSOLVE</h1>
|
||||||
|
</div>
|
||||||
|
<nav className="flex-1 px-4 py-6">
|
||||||
|
<ul>
|
||||||
|
{navigation.map((item) =>
|
||||||
|
(!item.adminOnly || user?.role === 'admin') && (
|
||||||
|
<li key={item.name} className="mb-2">
|
||||||
|
<NavLink
|
||||||
|
to={item.href}
|
||||||
|
end={item.href === '/'}
|
||||||
|
className={({ isActive }) =>
|
||||||
|
cn(
|
||||||
|
'flex items-center px-4 py-3 text-sm font-medium rounded-md transition-colors duration-200',
|
||||||
|
isActive
|
||||||
|
? 'bg-green-accent/10 text-green-accent'
|
||||||
|
: 'text-neutral-400 hover:bg-neutral-800 hover:text-neutral-100'
|
||||||
|
)
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<item.icon className="h-5 w-5 mr-4" />
|
||||||
|
<span>{item.name}</span>
|
||||||
|
</NavLink>
|
||||||
|
</li>
|
||||||
|
)
|
||||||
|
)}
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
<div className="p-4 border-t border-neutral-800">
|
||||||
|
<p className="text-xs text-neutral-500">Logged in as</p>
|
||||||
|
<p className="text-sm font-medium text-neutral-300">{user?.email}</p>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Sidebar;
|
||||||
49
admin-frontend/src/components/ui/button.tsx
Normal file
49
admin-frontend/src/components/ui/button.tsx
Normal file
@ -0,0 +1,49 @@
|
|||||||
|
import * as React from 'react';
|
||||||
|
import { cva, type VariantProps } from 'class-variance-authority';
|
||||||
|
import { cn } from '../../lib/utils';
|
||||||
|
|
||||||
|
const buttonVariants = cva(
|
||||||
|
'inline-flex items-center justify-center rounded-md text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-black disabled:pointer-events-none disabled:opacity-50',
|
||||||
|
{
|
||||||
|
variants: {
|
||||||
|
variant: {
|
||||||
|
default:
|
||||||
|
'bg-green-accent text-black hover:bg-green-accent/80 focus-visible:ring-green-accent',
|
||||||
|
destructive:
|
||||||
|
'bg-red-500 text-neutral-50 hover:bg-red-500/90 focus-visible:ring-red-500',
|
||||||
|
outline:
|
||||||
|
'border border-neutral-700 bg-transparent hover:bg-neutral-800 hover:text-neutral-100 focus-visible:ring-neutral-500',
|
||||||
|
ghost:
|
||||||
|
'hover:bg-neutral-800 hover:text-neutral-100',
|
||||||
|
},
|
||||||
|
size: {
|
||||||
|
default: 'h-10 px-4 py-2',
|
||||||
|
sm: 'h-9 rounded-md px-3',
|
||||||
|
lg: 'h-11 rounded-md px-8',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
defaultVariants: {
|
||||||
|
variant: 'default',
|
||||||
|
size: 'default',
|
||||||
|
},
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
export interface ButtonProps
|
||||||
|
extends React.ButtonHTMLAttributes<HTMLButtonElement>,
|
||||||
|
VariantProps<typeof buttonVariants> {}
|
||||||
|
|
||||||
|
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
|
||||||
|
({ className, variant, size, ...props }, ref) => {
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
className={cn(buttonVariants({ variant, size, className }))}
|
||||||
|
ref={ref}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
);
|
||||||
|
Button.displayName = 'Button';
|
||||||
|
|
||||||
|
export { Button, buttonVariants };
|
||||||
72
admin-frontend/src/components/ui/dialog.tsx
Normal file
72
admin-frontend/src/components/ui/dialog.tsx
Normal file
@ -0,0 +1,72 @@
|
|||||||
|
import * as React from 'react';
|
||||||
|
import { X } from 'lucide-react';
|
||||||
|
import { AnimatePresence, motion } from 'framer-motion';
|
||||||
|
import { Button } from './button';
|
||||||
|
|
||||||
|
interface DialogProps {
|
||||||
|
isOpen: boolean;
|
||||||
|
onClose: () => void;
|
||||||
|
title: string;
|
||||||
|
description?: string;
|
||||||
|
children?: React.ReactNode;
|
||||||
|
onConfirm?: () => void;
|
||||||
|
confirmText?: string;
|
||||||
|
showCloseButton?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const Dialog = ({
|
||||||
|
isOpen,
|
||||||
|
onClose,
|
||||||
|
title,
|
||||||
|
description,
|
||||||
|
children,
|
||||||
|
onConfirm,
|
||||||
|
confirmText,
|
||||||
|
showCloseButton = true
|
||||||
|
}: DialogProps) => {
|
||||||
|
return (
|
||||||
|
<AnimatePresence>
|
||||||
|
{isOpen && (
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0 }}
|
||||||
|
animate={{ opacity: 1 }}
|
||||||
|
exit={{ opacity: 0 }}
|
||||||
|
className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm"
|
||||||
|
onClick={onClose}
|
||||||
|
>
|
||||||
|
<motion.div
|
||||||
|
initial={{ scale: 0.95, y: 20 }}
|
||||||
|
animate={{ scale: 1, y: 0 }}
|
||||||
|
exit={{ scale: 0.95, y: 20 }}
|
||||||
|
transition={{ duration: 0.2, ease: 'easeOut' }}
|
||||||
|
className="relative w-full max-w-md p-6 bg-neutral-900 border border-neutral-800 rounded-lg shadow-xl"
|
||||||
|
onClick={(e) => e.stopPropagation()}
|
||||||
|
>
|
||||||
|
{showCloseButton && (
|
||||||
|
<button
|
||||||
|
onClick={onClose}
|
||||||
|
className="absolute top-3 right-3 text-neutral-500 hover:text-neutral-100 transition-colors"
|
||||||
|
>
|
||||||
|
<X className="h-5 w-5" />
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
<h2 className="text-lg font-bold font-mono text-neutral-100">{title}</h2>
|
||||||
|
|
||||||
|
{description && <p className="mt-2 text-sm text-neutral-400">{description}</p>}
|
||||||
|
|
||||||
|
<div className="mt-4">{children}</div>
|
||||||
|
|
||||||
|
{onConfirm && (
|
||||||
|
<div className="flex justify-end gap-2 pt-4 mt-4 border-t border-neutral-800">
|
||||||
|
<Button variant="outline" onClick={onClose}>Cancel</Button>
|
||||||
|
<Button variant={confirmText?.toLowerCase().includes('delete') ? 'destructive' : 'default'} onClick={onConfirm}>
|
||||||
|
{confirmText || 'Confirm'}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</motion.div>
|
||||||
|
</motion.div>
|
||||||
|
)}
|
||||||
|
</AnimatePresence>
|
||||||
|
);
|
||||||
|
};
|
||||||
27
admin-frontend/src/components/ui/input.tsx
Normal file
27
admin-frontend/src/components/ui/input.tsx
Normal file
@ -0,0 +1,27 @@
|
|||||||
|
import * as React from 'react';
|
||||||
|
import { cn } from '../../lib/utils';
|
||||||
|
|
||||||
|
export interface InputProps
|
||||||
|
extends React.InputHTMLAttributes<HTMLInputElement> {}
|
||||||
|
|
||||||
|
const Input = React.forwardRef<HTMLInputElement, InputProps>(
|
||||||
|
({ className, type, ...props }, ref) => {
|
||||||
|
return (
|
||||||
|
<input
|
||||||
|
type={type}
|
||||||
|
className={cn(
|
||||||
|
'flex h-10 w-full rounded-md border border-neutral-700 bg-neutral-900 px-3 py-2 text-sm text-neutral-100',
|
||||||
|
'file:border-0 file:bg-transparent file:text-sm file:font-medium',
|
||||||
|
'placeholder:text-neutral-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-green-accent focus-visible:ring-offset-2 focus-visible:ring-offset-black',
|
||||||
|
'disabled:cursor-not-allowed disabled:opacity-50',
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
ref={ref}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
);
|
||||||
|
Input.displayName = 'Input';
|
||||||
|
|
||||||
|
export { Input };
|
||||||
42
admin-frontend/src/index.css
Normal file
42
admin-frontend/src/index.css
Normal file
@ -0,0 +1,42 @@
|
|||||||
|
|
||||||
|
@tailwind base;
|
||||||
|
@tailwind components;
|
||||||
|
@tailwind utilities;
|
||||||
|
|
||||||
|
@layer base {
|
||||||
|
:root {
|
||||||
|
--background: 0 0% 100%;
|
||||||
|
--foreground: 240 10% 3.9%;
|
||||||
|
--card: 0 0% 100%;
|
||||||
|
--card-foreground: 240 10% 3.9%;
|
||||||
|
--popover: 0 0% 100%;
|
||||||
|
--popover-foreground: 240 10% 3.9%;
|
||||||
|
--primary: 240 5.9% 10%;
|
||||||
|
--primary-foreground: 0 0% 98%;
|
||||||
|
--secondary: 240 4.8% 95.9%;
|
||||||
|
--secondary-foreground: 240 5.9% 10%;
|
||||||
|
--muted: 240 4.8% 95.9%;
|
||||||
|
--muted-foreground: 240 3.8% 46.1%;
|
||||||
|
--accent: 240 4.8% 95.9%;
|
||||||
|
--accent-foreground: 240 5.9% 10%;
|
||||||
|
--destructive: 0 84.2% 60.2%;
|
||||||
|
--destructive-foreground: 0 0% 98%;
|
||||||
|
--border: 240 5.9% 90%;
|
||||||
|
--input: 240 5.9% 90%;
|
||||||
|
--ring: 240 5.9% 10%;
|
||||||
|
--radius: 0.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@layer base {
|
||||||
|
* {
|
||||||
|
border-color: hsl(var(--border));
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
background-color: hsl(var(--background));
|
||||||
|
color: hsl(var(--foreground));
|
||||||
|
font-feature-settings: "rlig" 1, "calt" 1;
|
||||||
|
@apply antialiased;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
7
admin-frontend/src/lib/utils.ts
Normal file
7
admin-frontend/src/lib/utils.ts
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
|
||||||
|
import { clsx, type ClassValue } from 'clsx';
|
||||||
|
import { twMerge } from 'tailwind-merge';
|
||||||
|
|
||||||
|
export function cn(...inputs: ClassValue[]) {
|
||||||
|
return twMerge(clsx(inputs));
|
||||||
|
}
|
||||||
79
admin-frontend/src/main.tsx
Normal file
79
admin-frontend/src/main.tsx
Normal file
@ -0,0 +1,79 @@
|
|||||||
|
|
||||||
|
import React from 'react'
|
||||||
|
import { createRoot } from 'react-dom/client'
|
||||||
|
import App from './App'
|
||||||
|
import './index.css'
|
||||||
|
|
||||||
|
const deny = (msg: string) => {
|
||||||
|
document.body.innerHTML = `<div style="display:flex;align-items:center;justify-content:center;min-height:100vh;font-family:system-ui,sans-serif;background:#f8fafc;color:#0f172a;">${msg}</div>`;
|
||||||
|
};
|
||||||
|
|
||||||
|
async function boot() {
|
||||||
|
const urlParams = new URLSearchParams(window.location.search);
|
||||||
|
const agenticToken = urlParams.get('agentic_token');
|
||||||
|
const legacyToken = urlParams.get('auth_token');
|
||||||
|
const activeToken = agenticToken || legacyToken;
|
||||||
|
|
||||||
|
if (!activeToken) {
|
||||||
|
// Check sessionStorage in case the user navigated away and back
|
||||||
|
const storedToken = sessionStorage.getItem('admin_auth_token');
|
||||||
|
if (!storedToken) {
|
||||||
|
deny('Invalid or missing admin access token.');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
// Token is in sessionStorage and was already validated - mount app directly
|
||||||
|
const root = document.getElementById('root');
|
||||||
|
if (!root) { deny('Unable to load admin app.'); return; }
|
||||||
|
createRoot(root).render(<React.StrictMode><App /></React.StrictMode>);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (agenticToken) {
|
||||||
|
try {
|
||||||
|
const verifyRes = await fetch('https://api.mauth.mworld.cloud/mAuthAG/verifyToken', {
|
||||||
|
headers: { 'mAuthAgenticToken': agenticToken }
|
||||||
|
});
|
||||||
|
const verifyData = await verifyRes.json();
|
||||||
|
if (!verifyData.success) {
|
||||||
|
deny(`Unauthorized: ${verifyData.msg || 'Invalid agentic token'}`);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
localStorage.setItem('auth_token', agenticToken);
|
||||||
|
} catch (err) {
|
||||||
|
deny('Authentication service unavailable.');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
} else if (legacyToken) {
|
||||||
|
// Legacy hash-based validation
|
||||||
|
const data = new TextEncoder().encode(legacyToken);
|
||||||
|
const digest = await crypto.subtle.digest('SHA-256', data);
|
||||||
|
const hash = Array.from(new Uint8Array(digest))
|
||||||
|
.map((value) => value.toString(16).padStart(2, '0'))
|
||||||
|
.join('');
|
||||||
|
|
||||||
|
if (hash !== 'f030682d992c5e6c98594043c5a1f2763576f643f7bfbd940e325e46379c772f') {
|
||||||
|
deny('Invalid or missing admin access token.');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
localStorage.setItem('auth_token', legacyToken);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Persist token in sessionStorage so API calls work after React Router navigations
|
||||||
|
sessionStorage.setItem('admin_auth_token', activeToken);
|
||||||
|
|
||||||
|
const root = document.getElementById('root');
|
||||||
|
if (!root) {
|
||||||
|
deny('Unable to load admin app.');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
createRoot(root).render(
|
||||||
|
<React.StrictMode>
|
||||||
|
<App />
|
||||||
|
</React.StrictMode>,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
boot().catch(() => {
|
||||||
|
deny('Unable to validate admin access token.');
|
||||||
|
});
|
||||||
65
admin-frontend/src/pages/DashboardPage.tsx
Normal file
65
admin-frontend/src/pages/DashboardPage.tsx
Normal file
@ -0,0 +1,65 @@
|
|||||||
|
import { useQuery } from '@tanstack/react-query';
|
||||||
|
import { api } from '../api';
|
||||||
|
import { AlertTriangle, List, Loader2, Users, FileText } from 'lucide-react';
|
||||||
|
import { motion } from 'framer-motion';
|
||||||
|
|
||||||
|
interface StatCardProps {
|
||||||
|
title: string;
|
||||||
|
value: number | string;
|
||||||
|
icon: React.ElementType;
|
||||||
|
index: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
const StatCard = ({ title, value, icon: Icon, index }: StatCardProps) => (
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ duration: 0.5, delay: index * 0.1 }}
|
||||||
|
className="bg-neutral-900 border border-neutral-800 p-6 rounded-lg"
|
||||||
|
>
|
||||||
|
<div className="flex justify-between items-start">
|
||||||
|
<div className="flex flex-col">
|
||||||
|
<p className="text-sm text-neutral-400 font-mono uppercase tracking-wider">{title}</p>
|
||||||
|
<span className="text-4xl font-bold text-neutral-100 mt-2">{value}</span>
|
||||||
|
</div>
|
||||||
|
<Icon className="h-8 w-8 text-neutral-600" />
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
);
|
||||||
|
|
||||||
|
const DashboardPage = () => {
|
||||||
|
const { data, isLoading, isError, error } = useQuery({
|
||||||
|
queryKey: ['adminDashboardStats'],
|
||||||
|
queryFn: async () => {
|
||||||
|
const res = await api.get('/api/admin/dashboard');
|
||||||
|
return res.data;
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="container mx-auto">
|
||||||
|
<h1 className="text-3xl font-bold font-mono mb-8">Dashboard</h1>
|
||||||
|
{isLoading && (
|
||||||
|
<div className="flex items-center justify-center h-64">
|
||||||
|
<Loader2 className="h-8 w-8 animate-spin text-green-accent" />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{isError && (
|
||||||
|
<div className="bg-red-500/10 border border-red-500/20 text-red-400 p-4 rounded-lg flex items-center">
|
||||||
|
<AlertTriangle className="h-5 w-5 mr-3" />
|
||||||
|
<span>Error fetching stats: {error.message}</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{data && (
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||||
|
<StatCard title="Pending Reports" value={data.pendingReports} icon={AlertTriangle} index={0} />
|
||||||
|
<StatCard title="Active Posts" value={data.activePosts} icon={List} index={1} />
|
||||||
|
<StatCard title="Posts Today" value={data.postsToday} icon={FileText} index={2} />
|
||||||
|
<StatCard title="Total Users" value={data.totalUsers} icon={Users} index={3} />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default DashboardPage;
|
||||||
117
admin-frontend/src/pages/ReportDetailPage.tsx
Normal file
117
admin-frontend/src/pages/ReportDetailPage.tsx
Normal file
@ -0,0 +1,117 @@
|
|||||||
|
import { useLocation, useNavigate, useParams } from 'react-router-dom';
|
||||||
|
import { useMutation, useQueryClient } from '@tanstack/react-query';
|
||||||
|
import { api, API_URL } from '../api';
|
||||||
|
import { toast } from 'sonner';
|
||||||
|
import { Button } from '../components/ui/button';
|
||||||
|
import { ArrowLeft, Trash2, CheckCircle, Play } from 'lucide-react';
|
||||||
|
import { useState } from 'react';
|
||||||
|
import { Dialog } from '../components/ui/dialog';
|
||||||
|
|
||||||
|
const PostContent = ({ post }: { post: any }) => {
|
||||||
|
if (!post) return <div className="text-neutral-500">No content to display.</div>;
|
||||||
|
|
||||||
|
const fullUrl = post.contentData?.startsWith('/api/') ? `${API_URL}${post.contentData}` : post.contentData;
|
||||||
|
|
||||||
|
switch (post.contentType) {
|
||||||
|
case 'text':
|
||||||
|
return <p className="text-lg text-neutral-200 whitespace-pre-wrap font-serif leading-relaxed">{post.contentData}</p>;
|
||||||
|
case 'image':
|
||||||
|
return <img src={fullUrl} alt="Reported content" className="max-w-full rounded-lg mx-auto" />;
|
||||||
|
case 'audio':
|
||||||
|
return (
|
||||||
|
<div className="flex items-center justify-center p-8 bg-neutral-800 rounded-lg">
|
||||||
|
<audio controls src={fullUrl} className="w-full">Your browser does not support the audio element.</audio>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
default:
|
||||||
|
return <div className="text-neutral-500">Unknown content type: {post.contentType}</div>;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const ReportDetailPage = () => {
|
||||||
|
const { reportId } = useParams();
|
||||||
|
const location = useLocation();
|
||||||
|
const navigate = useNavigate();
|
||||||
|
const queryClient = useQueryClient();
|
||||||
|
const { report } = location.state || {};
|
||||||
|
|
||||||
|
const [isConfirmingDelete, setIsConfirmingDelete] = useState(false);
|
||||||
|
|
||||||
|
const reviewMutation = useMutation({
|
||||||
|
mutationFn: (action: 'dismiss' | 'delete_post') => api.post(`/api/admin/reports/${reportId}/review`, { action }),
|
||||||
|
onSuccess: (_, action) => {
|
||||||
|
toast.success(action === 'dismiss' ? 'Report dismissed.' : 'Post deleted successfully.');
|
||||||
|
queryClient.invalidateQueries({ queryKey: ['adminReports'] });
|
||||||
|
navigate('/reports');
|
||||||
|
},
|
||||||
|
onError: (error: any) => {
|
||||||
|
toast.error(error.response?.data?.error || 'Action failed.');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!report) {
|
||||||
|
// In a real app, you might fetch the report details here if not passed in state
|
||||||
|
return <div>Report not found. Go back to the queue.</div>;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<Dialog
|
||||||
|
isOpen={isConfirmingDelete}
|
||||||
|
onClose={() => setIsConfirmingDelete(false)}
|
||||||
|
onConfirm={() => {
|
||||||
|
reviewMutation.mutate('delete_post');
|
||||||
|
setIsConfirmingDelete(false);
|
||||||
|
}}
|
||||||
|
title="Confirm Post Deletion"
|
||||||
|
description="This will permanently delete the post associated with this report. This action cannot be undone."
|
||||||
|
confirmText="Yes, Delete Post"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<Button variant="ghost" onClick={() => navigate('/reports')} className="mb-8">
|
||||||
|
<ArrowLeft className="h-4 w-4 mr-2" />
|
||||||
|
Back to Queue
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
||||||
|
<div className="lg:col-span-2 bg-neutral-900 border border-neutral-800 p-8 rounded-lg">
|
||||||
|
<h2 className="font-mono text-lg text-neutral-400 mb-4">Reported Content</h2>
|
||||||
|
<PostContent post={report.post} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex flex-col gap-4">
|
||||||
|
<div className="bg-neutral-900 border border-neutral-800 p-6 rounded-lg">
|
||||||
|
<h3 className="font-mono text-neutral-400 mb-2">Report Details</h3>
|
||||||
|
<p><strong className="font-medium text-neutral-100">Reason:</strong> {report.reason}</p>
|
||||||
|
<p><strong className="font-medium text-neutral-100">Emotion:</strong> {report.post.emotionTag}</p>
|
||||||
|
<p><strong className="font-medium text-neutral-100">Post ID:</strong> <span className="font-mono text-xs">{report.postId}</span></p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="bg-neutral-900 border border-neutral-800 p-6 rounded-lg flex flex-col gap-4">
|
||||||
|
<h3 className="font-mono text-neutral-400 mb-2">Actions</h3>
|
||||||
|
<Button
|
||||||
|
onClick={() => reviewMutation.mutate('dismiss')}
|
||||||
|
disabled={reviewMutation.isPending}
|
||||||
|
className="w-full"
|
||||||
|
variant="outline"
|
||||||
|
>
|
||||||
|
<CheckCircle className="h-4 w-4 mr-2" />
|
||||||
|
Dismiss Report
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
onClick={() => setIsConfirmingDelete(true)}
|
||||||
|
disabled={reviewMutation.isPending}
|
||||||
|
className="w-full"
|
||||||
|
variant="destructive"
|
||||||
|
>
|
||||||
|
<Trash2 className="h-4 w-4 mr-2" />
|
||||||
|
Delete Post
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ReportDetailPage;
|
||||||
102
admin-frontend/src/pages/ReportsQueuePage.tsx
Normal file
102
admin-frontend/src/pages/ReportsQueuePage.tsx
Normal file
@ -0,0 +1,102 @@
|
|||||||
|
import { useQuery } from '@tanstack/react-query';
|
||||||
|
import { api } from '../api';
|
||||||
|
import { createColumnHelper, flexRender, getCoreRowModel, useReactTable } from '@tanstack/react-table';
|
||||||
|
import { useNavigate } from 'react-router-dom';
|
||||||
|
import { formatDistanceToNow } from 'date-fns';
|
||||||
|
import { Button } from '../components/ui/button';
|
||||||
|
import { Loader2, AlertTriangle, ChevronRight } from 'lucide-react';
|
||||||
|
|
||||||
|
const columnHelper = createColumnHelper<any>();
|
||||||
|
|
||||||
|
const columns = [
|
||||||
|
columnHelper.accessor('reportId', {
|
||||||
|
header: 'ID',
|
||||||
|
cell: info => <span className="font-mono text-neutral-400">#{info.getValue()}</span>,
|
||||||
|
}),
|
||||||
|
columnHelper.accessor('reason', {
|
||||||
|
header: 'Reason',
|
||||||
|
cell: info => <span className="text-neutral-100">{info.getValue()}</span>,
|
||||||
|
}),
|
||||||
|
columnHelper.accessor('reportedAt', {
|
||||||
|
header: 'Reported',
|
||||||
|
cell: info => <span className="text-neutral-400">{formatDistanceToNow(new Date(info.getValue()), { addSuffix: true })}</span>,
|
||||||
|
}),
|
||||||
|
columnHelper.accessor('actions', {
|
||||||
|
header: 'Actions',
|
||||||
|
cell: ({ row }) => {
|
||||||
|
const navigate = useNavigate();
|
||||||
|
return (
|
||||||
|
<Button variant="outline" size="sm" onClick={() => navigate(`/reports/${row.original.reportId}`, { state: { report: row.original } })}>
|
||||||
|
Review
|
||||||
|
<ChevronRight className="h-4 w-4 ml-2" />
|
||||||
|
</Button>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
];
|
||||||
|
|
||||||
|
const ReportsQueuePage = () => {
|
||||||
|
const { data, isLoading, isError } = useQuery({
|
||||||
|
queryKey: ['adminReports'],
|
||||||
|
queryFn: async () => {
|
||||||
|
const res = await api.get('/api/admin/reports');
|
||||||
|
return res.data.reports;
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const table = useReactTable({
|
||||||
|
data: data || [],
|
||||||
|
columns,
|
||||||
|
getCoreRowModel: getCoreRowModel(),
|
||||||
|
});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<h1 className="text-3xl font-bold font-mono mb-8">Reports Queue</h1>
|
||||||
|
|
||||||
|
<div className="bg-neutral-900 border border-neutral-800 rounded-lg overflow-hidden">
|
||||||
|
{isLoading ? (
|
||||||
|
<div className="flex items-center justify-center p-12">
|
||||||
|
<Loader2 className="h-8 w-8 animate-spin text-green-accent" />
|
||||||
|
</div>
|
||||||
|
) : isError ? (
|
||||||
|
<div className="flex items-center text-red-400 p-8">
|
||||||
|
<AlertTriangle className="h-5 w-5 mr-3" />
|
||||||
|
<span>Failed to load reports.</span>
|
||||||
|
</div>
|
||||||
|
) : table.getRowModel().rows.length === 0 ? (
|
||||||
|
<div className="flex items-center justify-center text-neutral-500 p-12">
|
||||||
|
<p>No pending reports. The queue is clear.</p>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<table className="w-full text-sm">
|
||||||
|
<thead className="bg-neutral-800/50">
|
||||||
|
{table.getHeaderGroups().map(headerGroup => (
|
||||||
|
<tr key={headerGroup.id}>
|
||||||
|
{headerGroup.headers.map(header => (
|
||||||
|
<th key={header.id} className="p-4 text-left font-mono text-neutral-400 uppercase tracking-wider">
|
||||||
|
{flexRender(header.column.columnDef.header, header.getContext())}
|
||||||
|
</th>
|
||||||
|
))}
|
||||||
|
</tr>
|
||||||
|
))}
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{table.getRowModel().rows.map(row => (
|
||||||
|
<tr key={row.id} className="border-b border-neutral-800 last:border-b-0 hover:bg-neutral-800/30 transition-colors">
|
||||||
|
{row.getVisibleCells().map(cell => (
|
||||||
|
<td key={cell.id} className="p-4">
|
||||||
|
{flexRender(cell.column.columnDef.cell, cell.getContext())}
|
||||||
|
</td>
|
||||||
|
))}
|
||||||
|
</tr>
|
||||||
|
))}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ReportsQueuePage;
|
||||||
212
admin-frontend/src/pages/UserManagementPage.tsx
Normal file
212
admin-frontend/src/pages/UserManagementPage.tsx
Normal file
@ -0,0 +1,212 @@
|
|||||||
|
import React, { useState, useEffect } from 'react';
|
||||||
|
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
||||||
|
import { useForm } from 'react-hook-form';
|
||||||
|
import { zodResolver } from '@hookform/resolvers/zod';
|
||||||
|
import * as z from 'zod';
|
||||||
|
import { api } from '../api';
|
||||||
|
import { toast } from 'sonner';
|
||||||
|
import { createColumnHelper, flexRender, getCoreRowModel, useReactTable } from '@tanstack/react-table';
|
||||||
|
import { format } from 'date-fns';
|
||||||
|
import { Button } from '../components/ui/button';
|
||||||
|
import { Dialog } from '../components/ui/dialog';
|
||||||
|
import { Input } from '../components/ui/input';
|
||||||
|
import { Loader2, AlertTriangle, UserPlus, Pencil, Trash2 } from 'lucide-react';
|
||||||
|
import { cn } from '../lib/utils';
|
||||||
|
|
||||||
|
const userSchema = z.object({
|
||||||
|
fullName: z.string().min(2, 'Full name is required'),
|
||||||
|
email: z.string().email('Invalid email address'),
|
||||||
|
role: z.enum(['admin', 'moderator']),
|
||||||
|
});
|
||||||
|
|
||||||
|
type UserFormData = z.infer<typeof userSchema>;
|
||||||
|
|
||||||
|
type User = UserFormData & { created_at: string };
|
||||||
|
|
||||||
|
const columnHelper = createColumnHelper<User>();
|
||||||
|
|
||||||
|
const UserForm = ({ user, onClose }: { user: User | null; onClose: () => void }) => {
|
||||||
|
const queryClient = useQueryClient();
|
||||||
|
const isEditing = !!user;
|
||||||
|
|
||||||
|
const { register, handleSubmit, formState: { errors }, reset } = useForm<UserFormData>({
|
||||||
|
resolver: zodResolver(userSchema),
|
||||||
|
defaultValues: user ? { fullName: user.fullName, email: user.email, role: user.role } : { role: 'moderator' },
|
||||||
|
});
|
||||||
|
|
||||||
|
const mutation = useMutation({
|
||||||
|
mutationFn: (data: UserFormData) => {
|
||||||
|
return isEditing ? api.put(`/api/admin/users/${user.email}`, data) : api.post('/api/admin/users', data);
|
||||||
|
},
|
||||||
|
onSuccess: () => {
|
||||||
|
toast.success(isEditing ? 'User updated successfully' : 'User created successfully');
|
||||||
|
queryClient.invalidateQueries({ queryKey: ['adminUsers'] });
|
||||||
|
onClose();
|
||||||
|
},
|
||||||
|
onError: (error: any) => {
|
||||||
|
toast.error(error.response?.data?.error || 'An error occurred');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
reset(user ? { fullName: user.fullName, email: user.email, role: user.role } : { role: 'moderator' });
|
||||||
|
}, [user, reset]);
|
||||||
|
|
||||||
|
const onSubmit = (data: UserFormData) => mutation.mutate(data);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
|
||||||
|
<div>
|
||||||
|
<label className="text-xs font-mono text-neutral-400">Full Name</label>
|
||||||
|
<Input {...register('fullName')} className="mt-1" />
|
||||||
|
{errors.fullName && <p className="text-red-400 text-sm mt-1">{errors.fullName.message}</p>}
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="text-xs font-mono text-neutral-400">Email</label>
|
||||||
|
<Input {...register('email')} disabled={isEditing} className="mt-1" />
|
||||||
|
{errors.email && <p className="text-red-400 text-sm mt-1">{errors.email.message}</p>}
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="text-xs font-mono text-neutral-400">Role</label>
|
||||||
|
<select {...register('role')} className="w-full mt-1 p-2 bg-neutral-800 border border-neutral-700 rounded-md focus:ring-2 focus:ring-green-accent focus:border-green-accent outline-none">
|
||||||
|
<option value="moderator">Moderator</option>
|
||||||
|
<option value="admin">Admin</option>
|
||||||
|
</select>
|
||||||
|
{errors.role && <p className="text-red-400 text-sm mt-1">{errors.role.message}</p>}
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-end gap-2 pt-4">
|
||||||
|
<Button type="button" variant="outline" onClick={onClose}>Cancel</Button>
|
||||||
|
<Button type="submit" disabled={mutation.isPending}>{mutation.isPending ? <Loader2 className="animate-spin h-4 w-4" /> : 'Save'}</Button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const UserManagementPage = () => {
|
||||||
|
const [isFormOpen, setIsFormOpen] = useState(false);
|
||||||
|
const [isDeleteConfirmOpen, setIsDeleteConfirmOpen] = useState(false);
|
||||||
|
const [selectedUser, setSelectedUser] = useState<User | null>(null);
|
||||||
|
const queryClient = useQueryClient();
|
||||||
|
|
||||||
|
const { data: users, isLoading, isError } = useQuery<User[]>({
|
||||||
|
queryKey: ['adminUsers'],
|
||||||
|
queryFn: async () => {
|
||||||
|
const res = await api.get('/api/admin/users');
|
||||||
|
return res.data;
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const deleteMutation = useMutation({
|
||||||
|
mutationFn: (email: string) => api.delete(`/api/admin/users/${email}`),
|
||||||
|
onSuccess: () => {
|
||||||
|
toast.success('User deleted successfully');
|
||||||
|
queryClient.invalidateQueries({ queryKey: ['adminUsers'] });
|
||||||
|
setIsDeleteConfirmOpen(false);
|
||||||
|
setSelectedUser(null);
|
||||||
|
},
|
||||||
|
onError: (error: any) => {
|
||||||
|
toast.error(error.response?.data?.error || 'Failed to delete user');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const columns = [
|
||||||
|
columnHelper.accessor('fullName', {
|
||||||
|
header: 'User',
|
||||||
|
cell: info => (
|
||||||
|
<div className='flex flex-col'>
|
||||||
|
<span className='font-medium text-neutral-100'>{info.getValue()}</span>
|
||||||
|
<span className='text-xs text-neutral-400 font-mono'>{info.row.original.email}</span>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}),
|
||||||
|
columnHelper.accessor('role', {
|
||||||
|
header: 'Role',
|
||||||
|
cell: info => <span className={cn('px-2 py-1 text-xs rounded-full font-mono', info.getValue() === 'admin' ? 'bg-green-accent/10 text-green-accent' : 'bg-neutral-700 text-neutral-300')}>{info.getValue()}</span>,
|
||||||
|
}),
|
||||||
|
columnHelper.accessor('created_at', {
|
||||||
|
header: 'Created',
|
||||||
|
cell: info => <span className="text-neutral-400">{format(new Date(info.getValue()), 'MMM d, yyyy')}</span>,
|
||||||
|
}),
|
||||||
|
columnHelper.accessor('email', {
|
||||||
|
header: 'Actions',
|
||||||
|
id: 'actions',
|
||||||
|
cell: ({ row }) => (
|
||||||
|
<div className="flex gap-2">
|
||||||
|
<Button variant="ghost" size="sm" onClick={() => { setSelectedUser(row.original); setIsFormOpen(true); }}>
|
||||||
|
<Pencil className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
<Button variant="ghost" size="sm" className="text-red-500 hover:text-red-400 hover:bg-red-500/10" onClick={() => { setSelectedUser(row.original); setIsDeleteConfirmOpen(true); }}>
|
||||||
|
<Trash2 className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
),
|
||||||
|
}),
|
||||||
|
];
|
||||||
|
|
||||||
|
const table = useReactTable({ data: users || [], columns, getCoreRowModel: getCoreRowModel() });
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<Dialog
|
||||||
|
isOpen={isFormOpen}
|
||||||
|
onClose={() => { setIsFormOpen(false); setSelectedUser(null); }}
|
||||||
|
title={selectedUser ? 'Edit User' : 'Create New User'}
|
||||||
|
showCloseButton={false}
|
||||||
|
>
|
||||||
|
<UserForm user={selectedUser} onClose={() => { setIsFormOpen(false); setSelectedUser(null); }} />
|
||||||
|
</Dialog>
|
||||||
|
|
||||||
|
<Dialog
|
||||||
|
isOpen={isDeleteConfirmOpen}
|
||||||
|
onClose={() => { setIsDeleteConfirmOpen(false); setSelectedUser(null); }}
|
||||||
|
title="Confirm Deletion"
|
||||||
|
description={`Are you sure you want to delete the user ${selectedUser?.email}? This action cannot be undone.`}
|
||||||
|
confirmText="Yes, Delete User"
|
||||||
|
onConfirm={() => selectedUser && deleteMutation.mutate(selectedUser.email)}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div className="flex justify-between items-center mb-8">
|
||||||
|
<h1 className="text-3xl font-bold font-mono">User Management</h1>
|
||||||
|
<Button onClick={() => { setSelectedUser(null); setIsFormOpen(true); }}>
|
||||||
|
<UserPlus className="h-4 w-4 mr-2" />
|
||||||
|
New User
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="bg-neutral-900 border border-neutral-800 rounded-lg overflow-hidden">
|
||||||
|
{isLoading ? (
|
||||||
|
<div className="flex items-center justify-center p-12"><Loader2 className="h-8 w-8 animate-spin text-green-accent" /></div>
|
||||||
|
) : isError ? (
|
||||||
|
<div className="flex items-center text-red-400 p-8"><AlertTriangle className="h-5 w-5 mr-3" /><span>Failed to load users.</span></div>
|
||||||
|
) : (
|
||||||
|
<table className="w-full text-sm">
|
||||||
|
<thead className="bg-neutral-800/50">
|
||||||
|
{table.getHeaderGroups().map(headerGroup => (
|
||||||
|
<tr key={headerGroup.id}>
|
||||||
|
{headerGroup.headers.map(header => (
|
||||||
|
<th key={header.id} className="p-4 text-left font-mono text-neutral-400 uppercase tracking-wider">
|
||||||
|
{flexRender(header.column.columnDef.header, header.getContext())}
|
||||||
|
</th>
|
||||||
|
))}
|
||||||
|
</tr>
|
||||||
|
))}
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{table.getRowModel().rows.map(row => (
|
||||||
|
<tr key={row.id} className="border-b border-neutral-800 last:border-b-0 hover:bg-neutral-800/30 transition-colors">
|
||||||
|
{row.getVisibleCells().map(cell => (
|
||||||
|
<td key={cell.id} className="p-4">
|
||||||
|
{flexRender(cell.column.columnDef.cell, cell.getContext())}
|
||||||
|
</td>
|
||||||
|
))}
|
||||||
|
</tr>
|
||||||
|
))}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default UserManagementPage;
|
||||||
4
admin-frontend/src/pages/index.ts
Normal file
4
admin-frontend/src/pages/index.ts
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
export { default as DashboardPage } from './DashboardPage';
|
||||||
|
export { default as ReportsQueuePage } from './ReportsQueuePage';
|
||||||
|
export { default as ReportDetailPage } from './ReportDetailPage';
|
||||||
|
export { default as UserManagementPage } from './UserManagementPage';
|
||||||
23
admin-frontend/src/stores/userStore.ts
Normal file
23
admin-frontend/src/stores/userStore.ts
Normal file
@ -0,0 +1,23 @@
|
|||||||
|
import { create } from 'zustand';
|
||||||
|
|
||||||
|
interface User {
|
||||||
|
email: string;
|
||||||
|
fullName: string;
|
||||||
|
role: 'admin' | 'moderator';
|
||||||
|
}
|
||||||
|
|
||||||
|
interface UserState {
|
||||||
|
user: User | null;
|
||||||
|
_setUser: (user: User) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
const mockAdminUser: User = {
|
||||||
|
email: 'admin@dissolve.app',
|
||||||
|
fullName: 'Admin User',
|
||||||
|
role: 'admin',
|
||||||
|
};
|
||||||
|
|
||||||
|
export const useUserStore = create<UserState>((set) => ({
|
||||||
|
user: mockAdminUser, // Initialize with a mock admin for access to all features
|
||||||
|
_setUser: (user) => set({ user }),
|
||||||
|
}));
|
||||||
51
admin-frontend/tailwind.config.js
Normal file
51
admin-frontend/tailwind.config.js
Normal file
@ -0,0 +1,51 @@
|
|||||||
|
|
||||||
|
import tailwindAnimate from "tailwindcss-animate";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
colors: {
|
||||||
|
border: "hsl(var(--border) / <alpha-value>)",
|
||||||
|
input: "hsl(var(--input) / <alpha-value>)",
|
||||||
|
ring: "hsl(var(--ring) / <alpha-value>)",
|
||||||
|
background: "hsl(var(--background) / <alpha-value>)",
|
||||||
|
foreground: "hsl(var(--foreground) / <alpha-value>)",
|
||||||
|
primary: {
|
||||||
|
DEFAULT: "hsl(var(--primary) / <alpha-value>)",
|
||||||
|
foreground: "hsl(var(--primary-foreground) / <alpha-value>)",
|
||||||
|
},
|
||||||
|
secondary: {
|
||||||
|
DEFAULT: "hsl(var(--secondary) / <alpha-value>)",
|
||||||
|
foreground: "hsl(var(--secondary-foreground) / <alpha-value>)",
|
||||||
|
},
|
||||||
|
destructive: {
|
||||||
|
DEFAULT: "hsl(var(--destructive) / <alpha-value>)",
|
||||||
|
foreground: "hsl(var(--destructive-foreground) / <alpha-value>)",
|
||||||
|
},
|
||||||
|
muted: {
|
||||||
|
DEFAULT: "hsl(var(--muted) / <alpha-value>)",
|
||||||
|
foreground: "hsl(var(--muted-foreground) / <alpha-value>)",
|
||||||
|
},
|
||||||
|
accent: {
|
||||||
|
DEFAULT: "hsl(var(--accent) / <alpha-value>)",
|
||||||
|
foreground: "hsl(var(--accent-foreground) / <alpha-value>)",
|
||||||
|
},
|
||||||
|
popover: {
|
||||||
|
DEFAULT: "hsl(var(--popover) / <alpha-value>)",
|
||||||
|
foreground: "hsl(var(--popover-foreground) / <alpha-value>)",
|
||||||
|
},
|
||||||
|
card: {
|
||||||
|
DEFAULT: "hsl(var(--card) / <alpha-value>)",
|
||||||
|
foreground: "hsl(var(--card-foreground) / <alpha-value>)",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
fontFamily: {
|
||||||
|
body: ["Inter", "system-ui", "sans-serif"],
|
||||||
|
display: ["Cal Sans", "Inter", "system-ui", "sans-serif"],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
plugins: [tailwindAnimate],
|
||||||
|
}
|
||||||
|
|
||||||
25
admin-frontend/tsconfig.json
Normal file
25
admin-frontend/tsconfig.json
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "ESNext",
|
||||||
|
"lib": [
|
||||||
|
"DOM",
|
||||||
|
"DOM.Iterable",
|
||||||
|
"ESNext"
|
||||||
|
],
|
||||||
|
"allowJs": true,
|
||||||
|
"skipLibCheck": true,
|
||||||
|
"esModuleInterop": true,
|
||||||
|
"strict": false,
|
||||||
|
"noImplicitAny": false,
|
||||||
|
"noUnusedLocals": false,
|
||||||
|
"noUnusedParameters": false,
|
||||||
|
"module": "ESNext",
|
||||||
|
"moduleResolution": "Node",
|
||||||
|
"resolveJsonModule": true,
|
||||||
|
"isolatedModules": true,
|
||||||
|
"jsx": "react-jsx"
|
||||||
|
},
|
||||||
|
"include": [
|
||||||
|
"src"
|
||||||
|
]
|
||||||
|
}
|
||||||
27
admin-frontend/vite.config.ts
Normal file
27
admin-frontend/vite.config.ts
Normal file
@ -0,0 +1,27 @@
|
|||||||
|
|
||||||
|
import { defineConfig } from 'vite'
|
||||||
|
import react from '@vitejs/plugin-react'
|
||||||
|
import { fileURLToPath } from 'url'
|
||||||
|
import path from 'path'
|
||||||
|
|
||||||
|
const __dirname = path.dirname(fileURLToPath(import.meta.url))
|
||||||
|
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [react()],
|
||||||
|
resolve: {
|
||||||
|
alias: {
|
||||||
|
"@": path.resolve(__dirname, "./src"),
|
||||||
|
"react-query": "@tanstack/react-query",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
build: {
|
||||||
|
rollupOptions: {
|
||||||
|
onwarn(warning, warn) {
|
||||||
|
if (warning.code === 'MODULE_LEVEL_DIRECTIVE' && warning.message.includes('use client')) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
warn(warning);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
})
|
||||||
Loading…
Reference in New Issue
Block a user