Add admin dashboard pages and restructure admin route
Introduces new admin dashboard pages for alerts, bans, invites, orders, settings, status, and vendors under app/dashboard/admin/. Moves the main admin page to the new dashboard structure and adds a shared admin layout. Updates sidebar configuration and adds supporting components and hooks for admin features.
This commit is contained in:
NotII
313
app/dashboard/admin/alerts/page.tsx
Normal file
313
app/dashboard/admin/alerts/page.tsx
Normal file
@@ -0,0 +1,313 @@
|
||||
import React from "react";
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Alert, AlertDescription } from "@/components/ui/alert";
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
|
||||
import { AlertTriangle, CheckCircle, XCircle, Clock, Bell, Shield } from "lucide-react";
|
||||
|
||||
export default function AdminAlertsPage() {
|
||||
// Mock data for system alerts
|
||||
const alerts = [
|
||||
{
|
||||
id: "1",
|
||||
type: "security",
|
||||
severity: "high",
|
||||
title: "Suspicious Login Attempts",
|
||||
description: "Multiple failed login attempts detected from IP 192.168.1.100",
|
||||
timestamp: "2024-01-20 14:30:00",
|
||||
status: "active",
|
||||
affectedUsers: 3
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
type: "system",
|
||||
severity: "medium",
|
||||
title: "High Memory Usage",
|
||||
description: "Server memory usage has exceeded 85% for the past hour",
|
||||
timestamp: "2024-01-20 13:45:00",
|
||||
status: "resolved",
|
||||
affectedUsers: 0
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
type: "payment",
|
||||
severity: "high",
|
||||
title: "Payment Processing Error",
|
||||
description: "Bitcoin payment gateway experiencing delays",
|
||||
timestamp: "2024-01-20 12:15:00",
|
||||
status: "active",
|
||||
affectedUsers: 12
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
type: "user",
|
||||
severity: "low",
|
||||
title: "New Vendor Registration",
|
||||
description: "New vendor 'tech_supplies' has registered and requires approval",
|
||||
timestamp: "2024-01-20 11:20:00",
|
||||
status: "pending",
|
||||
affectedUsers: 1
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
type: "security",
|
||||
severity: "critical",
|
||||
title: "Potential Security Breach",
|
||||
description: "Unusual API access patterns detected from multiple IPs",
|
||||
timestamp: "2024-01-20 10:30:00",
|
||||
status: "investigating",
|
||||
affectedUsers: 0
|
||||
}
|
||||
];
|
||||
|
||||
const getSeverityColor = (severity: string) => {
|
||||
switch (severity) {
|
||||
case "critical": return "destructive";
|
||||
case "high": return "destructive";
|
||||
case "medium": return "secondary";
|
||||
case "low": return "outline";
|
||||
default: return "outline";
|
||||
}
|
||||
};
|
||||
|
||||
const getStatusColor = (status: string) => {
|
||||
switch (status) {
|
||||
case "active": return "destructive";
|
||||
case "resolved": return "default";
|
||||
case "pending": return "secondary";
|
||||
case "investigating": return "outline";
|
||||
default: return "outline";
|
||||
}
|
||||
};
|
||||
|
||||
const getTypeIcon = (type: string) => {
|
||||
switch (type) {
|
||||
case "security": return <Shield className="h-4 w-4" />;
|
||||
case "system": return <AlertTriangle className="h-4 w-4" />;
|
||||
case "payment": return <Bell className="h-4 w-4" />;
|
||||
case "user": return <CheckCircle className="h-4 w-4" />;
|
||||
default: return <AlertTriangle className="h-4 w-4" />;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<h1 className="text-2xl font-semibold tracking-tight">System Alerts</h1>
|
||||
<p className="text-sm text-muted-foreground mt-1">Monitor system alerts and security notifications</p>
|
||||
</div>
|
||||
|
||||
{/* Alert Summary */}
|
||||
<div className="grid gap-4 md:grid-cols-4">
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">Active Alerts</CardTitle>
|
||||
<AlertTriangle className="h-4 w-4 text-muted-foreground" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold">8</div>
|
||||
<p className="text-xs text-muted-foreground">Require attention</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">Critical</CardTitle>
|
||||
<XCircle className="h-4 w-4 text-muted-foreground" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold">2</div>
|
||||
<p className="text-xs text-muted-foreground">Immediate action needed</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">Resolved Today</CardTitle>
|
||||
<CheckCircle className="h-4 w-4 text-muted-foreground" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold">15</div>
|
||||
<p className="text-xs text-muted-foreground">Successfully resolved</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">Avg Response</CardTitle>
|
||||
<Clock className="h-4 w-4 text-muted-foreground" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold">12m</div>
|
||||
<p className="text-xs text-muted-foreground">Average resolution time</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Critical Alerts */}
|
||||
<Alert variant="destructive">
|
||||
<AlertTriangle className="h-4 w-4" />
|
||||
<AlertDescription>
|
||||
<strong>Critical Alert:</strong> Potential security breach detected. Multiple unusual API access patterns from different IP addresses. Immediate investigation required.
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
|
||||
{/* Alerts Table */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<CardTitle>System Alerts</CardTitle>
|
||||
<CardDescription>Recent system alerts and notifications</CardDescription>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<Button variant="outline" size="sm">
|
||||
Mark All Read
|
||||
</Button>
|
||||
<Button variant="outline" size="sm">
|
||||
Clear Resolved
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Type</TableHead>
|
||||
<TableHead>Alert</TableHead>
|
||||
<TableHead>Severity</TableHead>
|
||||
<TableHead>Status</TableHead>
|
||||
<TableHead>Affected Users</TableHead>
|
||||
<TableHead>Timestamp</TableHead>
|
||||
<TableHead className="text-right">Actions</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{alerts.map((alert) => (
|
||||
<TableRow key={alert.id}>
|
||||
<TableCell>
|
||||
<div className="flex items-center space-x-2">
|
||||
{getTypeIcon(alert.type)}
|
||||
<span className="capitalize">{alert.type}</span>
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<div>
|
||||
<div className="font-medium">{alert.title}</div>
|
||||
<div className="text-sm text-muted-foreground max-w-[300px] truncate">
|
||||
{alert.description}
|
||||
</div>
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Badge variant={getSeverityColor(alert.severity)}>
|
||||
{alert.severity}
|
||||
</Badge>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Badge variant={getStatusColor(alert.status)}>
|
||||
{alert.status}
|
||||
</Badge>
|
||||
</TableCell>
|
||||
<TableCell>{alert.affectedUsers}</TableCell>
|
||||
<TableCell className="text-sm text-muted-foreground">
|
||||
{alert.timestamp}
|
||||
</TableCell>
|
||||
<TableCell className="text-right">
|
||||
<div className="flex items-center justify-end space-x-2">
|
||||
<Button variant="outline" size="sm">
|
||||
View Details
|
||||
</Button>
|
||||
{alert.status === "active" && (
|
||||
<Button variant="outline" size="sm">
|
||||
Resolve
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Alert Categories */}
|
||||
<div className="grid gap-6 md:grid-cols-3">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center">
|
||||
<Shield className="h-5 w-5 mr-2" />
|
||||
Security Alerts
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-2">
|
||||
<div className="flex justify-between">
|
||||
<span className="text-sm">Failed Logins</span>
|
||||
<Badge variant="destructive">3</Badge>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-sm">Suspicious Activity</span>
|
||||
<Badge variant="destructive">1</Badge>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-sm">API Abuse</span>
|
||||
<Badge variant="secondary">0</Badge>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center">
|
||||
<AlertTriangle className="h-5 w-5 mr-2" />
|
||||
System Alerts
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-2">
|
||||
<div className="flex justify-between">
|
||||
<span className="text-sm">High CPU Usage</span>
|
||||
<Badge variant="secondary">1</Badge>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-sm">Memory Issues</span>
|
||||
<Badge variant="default">0</Badge>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-sm">Database Slow</span>
|
||||
<Badge variant="secondary">0</Badge>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center">
|
||||
<Bell className="h-5 w-5 mr-2" />
|
||||
Payment Alerts
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-2">
|
||||
<div className="flex justify-between">
|
||||
<span className="text-sm">Gateway Issues</span>
|
||||
<Badge variant="destructive">1</Badge>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-sm">Failed Transactions</span>
|
||||
<Badge variant="secondary">2</Badge>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-sm">High Volume</span>
|
||||
<Badge variant="outline">0</Badge>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user