| | 1 | 1 | | import React from 'react'; |
| | 1 | 2 | | import { useMaintenance } from '../context/MaintenanceContext.js'; |
| | 1 | 3 | | import { Bell, ShieldAlert, Info } from 'lucide-react'; |
| | 1 | 4 | | |
| | 1 | 5 | | export function AlertsPanel() { |
| | 18 | 6 | | const { alerts } = useMaintenance(); |
| | 18 | 7 | | |
| | 18 | 8 | | return ( |
| | 18 | 9 | | <div style={{ padding: '10px' }}> |
| | 18 | 10 | | <div style={{ display: 'flex', alignItems: 'center', gap: '10px', marginBottom: '15px' }}> |
| | 18 | 11 | | <Bell size={20} color="#e67e22" /> |
| | 18 | 12 | | <h3 style={{ margin: 0, fontSize: '1.2rem' }}>System Notifications</h3> |
| | 18 | 13 | | </div> |
| | 18 | 14 | | |
| | 18 | 15 | | <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}> |
| | 18 | 16 | | {alerts.map((alert) => ( |
| | 3 | 17 | | <div key={alert.id} style={{ |
| | 3 | 18 | | padding: '12px', |
| | 3 | 19 | | borderRadius: '8px', |
| | 3 | 20 | | backgroundColor: alert.severity === 'CRITICAL' ? '#fdf2f2' : '#f0f7ff', |
| | 3 | 21 | | border: `1px solid ${alert.severity === 'CRITICAL' ? '#fbd5d5' : '#d1e9ff'}`, |
| | 3 | 22 | | fontSize: '0.85rem' |
| | 3 | 23 | | }}> |
| | 3 | 24 | | <div style={{ display: 'flex', gap: '10px' }}> |
| | 3 | 25 | | {alert.severity === 'CRITICAL' ? ( |
| | 2 | 26 | | <ShieldAlert size={18} color="#c81e1e" /> |
| | 1 | 27 | | ) : ( |
| | 1 | 28 | | <Info size={18} color="#1c64f2" /> |
| | 3 | 29 | | )} |
| | 3 | 30 | | <div style={{ flex: 1 }}> |
| | 3 | 31 | | <div style={{ |
| | 3 | 32 | | fontWeight: 'bold', |
| | 3 | 33 | | color: alert.severity === 'CRITICAL' ? '#9b1c1c' : '#1e429f', |
| | 3 | 34 | | marginBottom: '2px' |
| | 3 | 35 | | }}> |
| | 3 | 36 | | {alert.severity} |
| | 3 | 37 | | </div> |
| | 3 | 38 | | <div style={{ color: '#4b5563', lineHeight: '1.4' }}>{alert.message}</div> |
| | 3 | 39 | | <div style={{ marginTop: '8px', fontSize: '0.75rem', color: '#9ca3af' }}> |
| | 3 | 40 | | {alert.created_at} |
| | 3 | 41 | | </div> |
| | 3 | 42 | | </div> |
| | 3 | 43 | | </div> |
| | 3 | 44 | | </div> |
| | 18 | 45 | | ))} |
| | 18 | 46 | | </div> |
| | 18 | 47 | | </div> |
| | 18 | 48 | | ); |
| | 18 | 49 | | } |