mirror of
https://github.com/AeThex-Corporation/AeThex-OS.git
synced 2026-04-18 06:17:21 +00:00
237 lines
11 KiB
TypeScript
237 lines
11 KiB
TypeScript
import { useState } from "react";
|
|
import { Link, useLocation } from "wouter";
|
|
import { useAuth } from "@/lib/auth";
|
|
import {
|
|
Users, FileCode, Shield, Activity, LogOut,
|
|
BarChart3, User, Globe, Award, Key, Inbox,
|
|
Bell, Mail, AlertTriangle, CheckCircle, Settings
|
|
} from "lucide-react";
|
|
|
|
interface NotificationSetting {
|
|
id: string;
|
|
name: string;
|
|
description: string;
|
|
enabled: boolean;
|
|
category: "security" | "users" | "system";
|
|
}
|
|
|
|
const defaultSettings: NotificationSetting[] = [
|
|
{ id: "failed_logins", name: "Failed Login Attempts", description: "Alert when multiple failed login attempts are detected", enabled: true, category: "security" },
|
|
{ id: "new_user", name: "New User Registration", description: "Notify when a new architect joins the platform", enabled: true, category: "users" },
|
|
{ id: "critical_alert", name: "Critical Security Alerts", description: "Immediate notification for high-severity security events", enabled: true, category: "security" },
|
|
{ id: "verification", name: "Verification Requests", description: "Alert when an architect requests credential verification", enabled: false, category: "users" },
|
|
{ id: "system_down", name: "System Downtime", description: "Notify when any AeThex service goes offline", enabled: true, category: "system" },
|
|
{ id: "weekly_report", name: "Weekly Summary Report", description: "Receive a weekly digest of platform activity", enabled: false, category: "system" },
|
|
{ id: "application", name: "New Applications", description: "Alert when new job applications are submitted", enabled: true, category: "users" },
|
|
{ id: "threat_detected", name: "Threat Detection", description: "Real-time alerts from Aegis threat monitoring", enabled: true, category: "security" },
|
|
];
|
|
|
|
export default function AdminNotifications() {
|
|
const { user, logout } = useAuth();
|
|
const [, setLocation] = useLocation();
|
|
const [settings, setSettings] = useState<NotificationSetting[]>(() => {
|
|
if (typeof window !== "undefined") {
|
|
const saved = localStorage.getItem("aethex_notification_settings");
|
|
if (saved) return JSON.parse(saved);
|
|
}
|
|
return defaultSettings;
|
|
});
|
|
const [email, setEmail] = useState(() => {
|
|
if (typeof window !== "undefined") {
|
|
return localStorage.getItem("aethex_notification_email") || "";
|
|
}
|
|
return "";
|
|
});
|
|
const [saved, setSaved] = useState(false);
|
|
|
|
const toggleSetting = (id: string) => {
|
|
setSettings((prev) =>
|
|
prev.map((s) => (s.id === id ? { ...s, enabled: !s.enabled } : s))
|
|
);
|
|
setSaved(false);
|
|
};
|
|
|
|
const saveSettings = () => {
|
|
localStorage.setItem("aethex_notification_settings", JSON.stringify(settings));
|
|
localStorage.setItem("aethex_notification_email", email);
|
|
setSaved(true);
|
|
setTimeout(() => setSaved(false), 3000);
|
|
};
|
|
|
|
const handleLogout = async () => {
|
|
await logout();
|
|
setLocation("/");
|
|
};
|
|
|
|
const groupedSettings = {
|
|
security: settings.filter((s) => s.category === "security"),
|
|
users: settings.filter((s) => s.category === "users"),
|
|
system: settings.filter((s) => s.category === "system"),
|
|
};
|
|
|
|
return (
|
|
<div className="min-h-screen bg-background text-foreground font-mono flex">
|
|
<Sidebar user={user} onLogout={handleLogout} active="notifications" />
|
|
|
|
<div className="flex-1 overflow-auto">
|
|
<div className="p-8 max-w-4xl">
|
|
<div className="mb-8">
|
|
<h2 className="text-2xl font-display font-bold text-white uppercase tracking-wider">
|
|
Notification Settings
|
|
</h2>
|
|
<p className="text-muted-foreground text-sm mt-1">
|
|
Configure email alerts for critical system events
|
|
</p>
|
|
</div>
|
|
|
|
<div className="bg-card/50 border border-white/10 p-6 mb-8">
|
|
<h3 className="text-sm font-bold text-white uppercase tracking-widest mb-4 flex items-center gap-2">
|
|
<Mail className="w-4 h-4 text-primary" />
|
|
Email Configuration
|
|
</h3>
|
|
<div className="space-y-4">
|
|
<div>
|
|
<label className="text-xs text-muted-foreground uppercase tracking-wider block mb-2">
|
|
Notification Email Address
|
|
</label>
|
|
<input
|
|
type="email"
|
|
value={email}
|
|
onChange={(e) => { setEmail(e.target.value); setSaved(false); }}
|
|
placeholder="admin@example.com"
|
|
className="w-full max-w-md bg-black/20 border border-white/10 px-4 py-3 text-white placeholder:text-muted-foreground focus:outline-none focus:border-primary/50"
|
|
data-testid="input-notification-email"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-8">
|
|
<div className="bg-card/50 border border-white/10 p-6">
|
|
<h3 className="text-sm font-bold text-white uppercase tracking-widest mb-6 flex items-center gap-2">
|
|
<Shield className="w-4 h-4 text-destructive" />
|
|
Security Alerts
|
|
</h3>
|
|
<div className="space-y-4">
|
|
{groupedSettings.security.map((setting) => (
|
|
<SettingRow key={setting.id} setting={setting} onToggle={toggleSetting} />
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="bg-card/50 border border-white/10 p-6">
|
|
<h3 className="text-sm font-bold text-white uppercase tracking-widest mb-6 flex items-center gap-2">
|
|
<Users className="w-4 h-4 text-secondary" />
|
|
User Activity
|
|
</h3>
|
|
<div className="space-y-4">
|
|
{groupedSettings.users.map((setting) => (
|
|
<SettingRow key={setting.id} setting={setting} onToggle={toggleSetting} />
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="bg-card/50 border border-white/10 p-6">
|
|
<h3 className="text-sm font-bold text-white uppercase tracking-widest mb-6 flex items-center gap-2">
|
|
<Settings className="w-4 h-4 text-blue-500" />
|
|
System Notifications
|
|
</h3>
|
|
<div className="space-y-4">
|
|
{groupedSettings.system.map((setting) => (
|
|
<SettingRow key={setting.id} setting={setting} onToggle={toggleSetting} />
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-8 flex items-center gap-4">
|
|
<button
|
|
onClick={saveSettings}
|
|
className="bg-primary text-background px-6 py-3 font-bold uppercase tracking-wider hover:bg-primary/90 transition-colors"
|
|
data-testid="button-save-notifications"
|
|
>
|
|
Save Settings
|
|
</button>
|
|
{saved && (
|
|
<span className="text-green-500 text-sm flex items-center gap-2">
|
|
<CheckCircle className="w-4 h-4" /> Settings saved
|
|
</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function SettingRow({ setting, onToggle }: { setting: NotificationSetting; onToggle: (id: string) => void }) {
|
|
return (
|
|
<div className="flex items-center justify-between p-4 bg-black/20 border border-white/5">
|
|
<div>
|
|
<div className="text-white font-bold text-sm">{setting.name}</div>
|
|
<div className="text-xs text-muted-foreground">{setting.description}</div>
|
|
</div>
|
|
<button
|
|
onClick={() => onToggle(setting.id)}
|
|
className={`w-12 h-6 rounded-full relative transition-colors ${
|
|
setting.enabled ? "bg-primary" : "bg-white/10"
|
|
}`}
|
|
data-testid={`toggle-${setting.id}`}
|
|
>
|
|
<span
|
|
className={`absolute top-1 w-4 h-4 rounded-full bg-white transition-transform ${
|
|
setting.enabled ? "left-7" : "left-1"
|
|
}`}
|
|
/>
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function Sidebar({ user, onLogout, active }: { user: any; onLogout: () => void; active: string }) {
|
|
return (
|
|
<div className="w-64 bg-card border-r border-white/10 flex flex-col">
|
|
<div className="p-6 border-b border-white/10">
|
|
<h1 className="text-xl font-display font-bold text-white uppercase tracking-wider">AeThex</h1>
|
|
<p className="text-xs text-primary mt-1">Command Center</p>
|
|
</div>
|
|
<nav className="flex-1 p-4 space-y-2">
|
|
<NavItem icon={<BarChart3 className="w-4 h-4" />} label="Dashboard" href="/admin" active={active === 'dashboard'} />
|
|
<NavItem icon={<Activity className="w-4 h-4" />} label="Live Activity" href="/admin/activity" active={active === 'activity'} />
|
|
<NavItem icon={<Bell className="w-4 h-4" />} label="Notifications" href="/admin/notifications" active={active === 'notifications'} />
|
|
<NavItem icon={<Users className="w-4 h-4" />} label="Architects" href="/admin/architects" active={active === 'architects'} />
|
|
<NavItem icon={<Inbox className="w-4 h-4" />} label="Applications" href="/admin/applications" active={active === 'applications'} />
|
|
<NavItem icon={<Award className="w-4 h-4" />} label="Achievements" href="/admin/achievements" active={active === 'achievements'} />
|
|
<NavItem icon={<FileCode className="w-4 h-4" />} label="Credentials" href="/admin/credentials" active={active === 'credentials'} />
|
|
<NavItem icon={<Globe className="w-4 h-4" />} label="Sites" href="/admin/sites" active={active === 'sites'} />
|
|
<NavItem icon={<Key className="w-4 h-4" />} label="Auth Logs" href="/admin/logs" active={active === 'logs'} />
|
|
<NavItem icon={<Shield className="w-4 h-4" />} label="Aegis Monitor" href="/admin/aegis" active={active === 'aegis'} />
|
|
</nav>
|
|
<div className="p-4 border-t border-white/10">
|
|
<div className="flex items-center gap-3 mb-4">
|
|
<div className="w-8 h-8 bg-primary/20 rounded-full flex items-center justify-center">
|
|
<User className="w-4 h-4 text-primary" />
|
|
</div>
|
|
<div>
|
|
<div className="text-sm text-white font-bold">{user?.username}</div>
|
|
<div className="text-xs text-muted-foreground">{user?.isAdmin ? "Administrator" : "Member"}</div>
|
|
</div>
|
|
</div>
|
|
<button onClick={onLogout} className="w-full flex items-center gap-2 text-muted-foreground hover:text-white text-sm py-2 px-3 hover:bg-white/5 transition-colors">
|
|
<LogOut className="w-4 h-4" /> Sign Out
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function NavItem({ icon, label, href, active = false }: { icon: React.ReactNode; label: string; href: string; active?: boolean }) {
|
|
return (
|
|
<Link href={href}>
|
|
<div className={`flex items-center gap-3 px-3 py-2 text-sm transition-colors cursor-pointer ${active ? 'bg-primary/10 text-primary border-l-2 border-primary' : 'text-muted-foreground hover:text-white hover:bg-white/5'}`}>
|
|
{icon}
|
|
{label}
|
|
</div>
|
|
</Link>
|
|
);
|
|
}
|