bfc60012cf
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.
314 lines
11 KiB
TypeScript
314 lines
11 KiB
TypeScript
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>
|
|
);
|
|
}
|