import React from 'react'; import './AlarmTable.css'; const AlarmTable = ({ alarms }) => { if (!alarms || alarms.length === 0) { return (

No alarms found.

); } return (

{alarms.map(alarm => ( ))}

ID	Type	Message	Zone	Date	Time	Status	Media
{alarm.alarm_id}	{alarm.alarm_message_to_display}	{alarm.alarm_message}	{alarm.zone_name}	{alarm.date}	{alarm.time}	{alarm.alarm_status}	{alarm.alarm_media && (alarm.alarm_media.image.length > 0 \|\| alarm.alarm_media.video.length > 0) ? ( {alarm.alarm_media.image.map((img, idx) => ( Image {idx + 1} ))} {alarm.alarm_media.video.map((vid, idx) => ( Video {idx + 1} ))} ) : ( - )}

); }; export default AlarmTable; import React, { useState } from 'react'; import AlarmTable from './AlarmTable'; import './TabView.css'; const TabView = ({ alarms }) => { const [activeTab, setActiveTab] = useState('past'); return (

{activeTab === 'pending' ? (

No pending alarms.

) : ( )}

); }; export default TabView; import React from 'react'; import TabView from './components/TabView'; const apiData = { baseImagePathSociety: '/image/alarm/', baseIconPath: '/image/icons/', alarmsList: [ { alarm_id: '2298', alarm_type_id: 3, alarm_message: 'Smoke detected at Master Bedroom at 2025-04-15 12:07:03', alarm_message_to_display: 'Smoke Detected Alarm', zone_name: 'Master Bedroom', date: '2025-04-15', time: '12:07:03', alarm_media: { image: [], video: [ 'ws://192.168.1.80:9002/api/recordedstream/undefined/20250415t120653z/20250415t120713z' ] }, camera_id: null, alarm_status: 'Turned Off' }, { alarm_id: '2297', alarm_type_id: 2, alarm_message: 'Gas Leakage detected at Kitchen at 2025-04-15 12:06:10', alarm_message_to_display: 'Gas Leakage Alarm', zone_name: 'Kitchen', date: '2025-04-15', time: '12:06:10', alarm_media: { image: [], video: [ 'ws://192.168.1.80:9002/api/recordedstream/undefined/20250415t120600z/20250415t120620z' ] }, camera_id: null, alarm_status: 'Turned Off' }, { alarm_id: '2296', alarm_type_id: 2, alarm_message: 'Gas Leakage detected at Kitchen at 2025-03-26 14:59:07', alarm_message_to_display: 'Gas Leakage Alarm', zone_name: 'Kitchen', date: '2025-03-26', time: '14:59:07', alarm_media: { image: [], video: [ 'ws://192.168.1.80:9002/api/recordedstream/undefined/20250326t145857z/20250326t145917z' ] }, camera_id: null, alarm_status: 'Turned Off' }, { alarm_id: '2295', alarm_type_id: 3, alarm_message: 'Smoke detected at Master Bedroom at 2025-03-26 12:46:08', alarm_message_to_display: 'Smoke Detected Alarm', zone_name: 'Master Bedroom', date: '2025-03-26', time: '12:46:08', alarm_media: { image: [], video: [ 'ws://192.168.1.80:9002/api/recordedstream/undefined/20250326t124558z/20250326t124618z' ] }, camera_id: null, alarm_status: 'Turned Off' }, { alarm_id: '2294', alarm_type_id: 2, alarm_message: 'Gas Leakage detected at Kitchen at 2025-03-26 12:45:54', alarm_message_to_display: 'Gas Leakage Alarm', zone_name: 'Kitchen', date: '2025-03-26', time: '12:45:54', alarm_media: { image: [], video: [ 'ws://192.168.1.80:9002/api/recordedstream/undefined/20250326t124544z/20250326t124604z' ] }, camera_id: null, alarm_status: 'Turned Off' }, { alarm_id: '2293', alarm_type_id: 2, alarm_message: 'Gas Leakage detected at Kitchen at 2025-03-13 14:38:46', alarm_message_to_display: 'Gas Leakage Alarm', zone_name: 'Kitchen', date: '2025-03-13', time: '14:38:46', alarm_media: { image: [], video: [ 'ws://192.168.1.80:9002/api/recordedstream/undefined/20250313t143836z/20250313t143856z' ] }, camera_id: null, alarm_status: 'Turned Off' } ] }; function App() { return (

Alarm History

); } export default App; .alarm-table-container { background: #fff; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.07); padding: 20px; margin: 0 auto; max-width: 1100px; } .alarm-table { width: 100%; border-collapse: collapse; font-size: 15px; } .alarm-table th, .alarm-table td { padding: 10px 12px; border-bottom: 1px solid #eaeaea; text-align: left; } .alarm-table th { background: #f2f4f8; font-weight: 600; color: #333; } .alarm-table tr:last-child td { border-bottom: none; } .status-badge { padding: 4px 10px; border-radius: 12px; font-size: 13px; font-weight: 500; display: inline-block; } .status-badge.off { background: #ffeaea; color: #d32f2f; } .status-badge.on { background: #eaffea; color: #388e3c; } .media-links { display: flex; flex-direction: column; gap: 4px; } .media-links a { color: #1976d2; text-decoration: underline; font-size: 14px; } .no-media { color: #aaa; font-size: 13px; } .empty-table { text-align: center; color: #888; padding: 40px 0; font-size: 18px; } .tab-view { background: #fff; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.07); max-width: 1150px; margin: 0 auto; padding: 0 0 24px 0; } .tabs { display: flex; border-bottom: 1px solid #eaeaea; margin-bottom: 20px; } .tabs button { background: none; border: none; outline: none; padding: 16px 32px; font-size: 16px; font-weight: 500; cursor: pointer; color: #888; border-bottom: 2px solid transparent; transition: color 0.2s, border-bottom 0.2s; } .tabs button.active { color: #1976d2; border-bottom: 2.5px solid #1976d2; background: #f7f8fa; } .tab-content { padding: 0 20px; } .empty-state { text-align: center; padding: 60px 0; color: #888; } .empty-img { width: 90px; margin-bottom: 18px; opacity: 0.7; }