yatra / resources / js / components / dashboard / SystemAlerts.tsx

SystemAlerts.tsx in Yatra – Travel Booking & Tour Operator Software 3.0.13, at resources/js/components/dashboard/SystemAlerts.tsx

129 lines 4.0 KB

Raw Download Zip

1	/**
2	* System Alerts Widget
3	* Displays important system notifications and alerts
4	*/
5
6	import React from "react";
7	import { __ } from "../../lib/i18n";
8	import { Card, CardContent, CardHeader, CardTitle } from "../ui/card";
9	import { Badge } from "../ui/badge";
10	import { AlertCircle, Info, AlertTriangle, CheckCircle } from "lucide-react";
11
12	interface Alert {
13	id: number;
14	type: "info" \| "warning" \| "error" \| "success";
15	message: string;
16	timestamp: string;
17	action?: {
18	label: string;
19	onClick: () => void;
20	};
21	}
22
23	interface SystemAlertsProps {
24	alerts: Alert[];
25	loading?: boolean;
26	}
27
28	/**
29	* System Alerts Widget
30	*/
31	export const SystemAlerts: React.FC<SystemAlertsProps> = ({
32	alerts,
33	loading = false,
34	}) => {
35	const getIcon = (type: Alert["type"]) => {
36	switch (type) {
37	case "error":
38	return <AlertCircle className="w-5 h-5 text-red-500" />;
39	case "warning":
40	return <AlertTriangle className="w-5 h-5 text-yellow-500" />;
41	case "success":
42	return <CheckCircle className="w-5 h-5 text-green-500" />;
43	default:
44	return <Info className="w-5 h-5 text-blue-500" />;
45	}
46	};
47
48	if (loading) {
49	return (
50	<Card>
51	<CardHeader>
52	<CardTitle>{__("System Alerts", "yatra")}</CardTitle>
53	</CardHeader>
54	<CardContent>
55	<div className="text-sm text-gray-500 dark:text-gray-400">
56	{__("Loading...", "yatra")}
57	</div>
58	</CardContent>
59	</Card>
60	);
61	}
62
63	const criticalAlerts =
64	alerts?.filter((a) => a.type === "error" \|\| a.type === "warning") \|\| [];
65	const hasAlerts = alerts && alerts.length > 0;
66
67	return (
68	<Card>
69	<CardHeader>
70	<div className="flex items-center justify-between">
71	<CardTitle>{__("System Alerts", "yatra")}</CardTitle>
72	{criticalAlerts.length > 0 && (
73	<Badge variant="error">
74	{criticalAlerts.length} {__("critical", "yatra")}
75	</Badge>
76	)}
77	</div>
78	</CardHeader>
79	<CardContent>
80	{hasAlerts ? (
81	<div className="space-y-2">
82	{alerts.slice(0, 5).map((alert) => (
83	<div
84	key={alert.id}
85	className={`p-2.5 rounded-lg border ${
86	alert.type === "error"
87	? "border-red-200 bg-red-50 dark:border-red-800 dark:bg-red-900/20"
88	: alert.type === "warning"
89	? "border-yellow-200 bg-yellow-50 dark:border-yellow-800 dark:bg-yellow-900/20"
90	: alert.type === "success"
91	? "border-green-200 bg-green-50 dark:border-green-800 dark:bg-green-900/20"
92	: "border-blue-200 bg-blue-50 dark:border-blue-800 dark:bg-blue-900/20"
93	}`}
94	>
95	<div className="flex items-start gap-3">
96	{getIcon(alert.type)}
97	<div className="flex-1">
98	<p className="text-sm text-gray-900 dark:text-white">
99	{alert.message}
100	</p>
101	<p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
102	{new Date(alert.timestamp).toLocaleString()}
103	</p>
104	{alert.action && (
105	<button
106	onClick={alert.action.onClick}
107	className="text-xs text-blue-600 dark:text-blue-400 hover:underline mt-2"
108	>
109	{alert.action.label}
110	</button>
111	)}
112	</div>
113	</div>
114	</div>
115	))}
116	</div>
117	) : (
118	<div className="flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400">
119	<CheckCircle className="w-4 h-4 text-green-500" />
120	<span>{__("All systems operational", "yatra")}</span>
121	</div>
122	)}
123	</CardContent>
124	</Card>
125	);
126	};
127
128	export default SystemAlerts;
129