f0d18a9e67
Added 'Back to Dashboard' buttons to all admin dashboard pages for improved navigation. Introduced AbortSignal timeouts to API client and middleware requests to prevent hanging network calls. Also enabled messaging customers from the order details page if Telegram info is available.
320 lines
12 KiB
TypeScript
320 lines
12 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";
|
|
import Link from "next/link";
|
|
|
|
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 className="flex items-center justify-between">
|
|
<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>
|
|
<Button asChild variant="outline" size="sm">
|
|
<Link href="/dashboard">Back to Dashboard</Link>
|
|
</Button>
|
|
</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>
|
|
);
|
|
}
|