import React, { useState } from 'react'; import { ShieldAlert, CheckCircle, AlertTriangle, Clock, MapPin, User, FileText, Send, Check, Calendar, Building, ExternalLink, Sliders, Layers, Flame, PenTool, Copy, Users } from 'lucide-react'; // Mock report details from the uploaded PDF const REPORT_METADATA = { ref: "KRM/SR/2605-044", surveyDate: "14 May 2026", preparedBy: ["Mr. Jeffry Anthony", "Mr. Isaac Arthur Moses"], checkedBy: "Mr. Wong Kee Huong", contactPerson: "Mr. Yap Min Su / En Zukipli Yakub (Caretaker)", distribution: [ { name: "Dato (Dr.) Henry Lau", role: "Managing Director" }, { name: "Mdm Amelia Lau", role: "Executive Director" }, { name: "Mr. Yap Min Su", role: "Crown Towers Representative" }, { name: "Mr. Wong Kee Choon", role: "General Manager" } ] }; const ZONES_DATA = [ { id: 'front', name: 'Front Section', rating: 'Good', color: 'text-green-600 bg-green-50 border-green-200', desc: 'Reasonably well-maintained. Perimeter fencing intact, clear access road, and tidy landscaping.' }, { id: 'p1_compound', name: 'Phase 1 - General Compound', rating: 'Fair', color: 'text-amber-600 bg-amber-50 border-amber-200', desc: 'Acceptable structural condition, but showing localized patches of neglect, overgrown spots, and general untidiness.' }, { id: 'p1_renovations', name: 'Phase 1 - Blocks A & B (Renovations)', rating: 'Fair to Poor', color: 'text-red-600 bg-red-50 border-red-200', desc: 'Temporary elevated risk due to active construction, exposed cabling, and flammable packaging.' }, { id: 'p1_backyard', name: 'Phase 1 Backyard', rating: 'Fair', color: 'text-amber-600 bg-amber-50 border-amber-200', desc: 'Large open green space. Mature trees pose falling branches / windstorm hazards if untrimmed.' }, { id: 'p2_compound', name: 'Phase 2 - Compound Front', rating: 'Good to Fair', color: 'text-emerald-600 bg-emerald-50 border-emerald-200', desc: 'Clear access roads and structurally well-maintained blocks. Tall palm trees scheduled for pruning.' }, { id: 'p2_backyard', name: 'Phase 2 Backyard', rating: 'Fair', color: 'text-amber-600 bg-amber-50 border-amber-200', desc: 'Better look than Phase 1 backyard, but same concern remains for large overhanging tree limbs.' }, { id: 'pump_room', name: 'Domestic Water Pump Room', rating: 'Poor', color: 'text-red-600 bg-red-50 border-red-200', desc: 'Currently cluttered with dozens of decommissioned/expired fire extinguishers awaiting disposal.' }, { id: 'p1_store', name: 'Phase 1 Maintenance Store', rating: 'Poor', color: 'text-red-600 bg-red-50 border-red-200', desc: 'Cluttered with tools, containers, and chemical solvents. Loose fire extinguishers stored along the outer corridor.' } ]; const PREVIOUS_RECOMMENDATIONS = [ { id: '25.05.01', title: 'Tall Palm Trees Attention', status: 'KIV / Approved', desc: 'Trim and remove dead, dry, or loose palm fronds.' }, { id: '25.05.02', title: 'Tall Trees / Overgrown Branches', status: 'KIV / Approved', desc: 'Cut back branches encroaching light fittings, facades, or roof areas.' }, { id: '25.05.03', title: 'Compound Lighting Assessment', status: 'Ongoing', desc: 'Identify and replace broken/discolored bulbs and remove stinging insect nests safely.' }, { id: '25.05.04', title: 'Rusted Cable Trench', status: 'Closed', desc: 'Progressive replacement of rusted electrical conduits with galvanized materials.' } ]; const INITIAL_RECOMMENDATIONS = [ { id: "26.05.01", title: "Disposal of Expired Fire Extinguishers from Pump Room", hazard: "The domestic water pump room is cluttered with a large number of decommissioned expired extinguishers. This restricts access to pump controls, creating crucial operational delays during emergencies.", recommendation: "Arrange disposal of expired extinguishers via a licensed contractor. Maintain the pump room clear of non-operational items. Create a replacement schedule for nearing-expiry units.", status: "Not Started", remarks: "", targetDate: "2026-07-15", owner: "En Zukipli Yakub (Caretaker)" }, { id: "26.05.02", title: "Housekeeping of Phase 1 Maintenance Store", hazard: "Disorganized space packed with combustible rags, chemicals, and flammable solvents next to tools without segregation. Multiple extinguishers are blocking corridors.", recommendation: "Reorganize the store, sorting and labeling all inventory. Segregate flammable chemicals into a designated locker away from heat sources. Establish a routine housekeeping inspection schedule.", status: "Not Started", remarks: "", targetDate: "2026-07-30", owner: "En Zukipli Yakub (Caretaker)" }, { id: "26.05.03", title: "Active Renovation Works - Fire Risk in Blocks A & B", hazard: "Renovation works introduce high-risk situations (exposed wires, timber offcuts, packaging, hot works with sparks) which elevate fire probability.", recommendation: "Brief all contractors on fire safety. Daily removal of timber offcuts and packaging. Place active fire extinguishers inside work units. Institute a permit-to-work system for all welding/cutting tasks.", status: "Not Started", remarks: "", targetDate: "2026-06-30", owner: "Mr. Yap Min Su" }, { id: "26.05.04", title: "Alarm Bell System - Verification & Servicing", hazard: "Hand-operated bells date back to 1998 with no test logs. Phase 2 electronic system (24V panel, battery, sirens) is untested to avoid occupant disruption.", recommendation: "Appoint a certified fire contractor to execute a full system functional test. Test Phase 1 manual bells individually and run a scheduled, pre-notified electronic drill in Phase 2. Keep testing records onsite.", status: "Not Started", remarks: "", targetDate: "2026-08-15", owner: "Mr. Yap Min Su" }, { id: "26.05.05", title: "Phase 1 General Compound - Grounds Maintenance", hazard: "Localized overgrown spots and untidy vegetation around ground floors. Promotes pest breeding and masks secondary structural hazards.", recommendation: "Implement a structured ground landscaping timeline (bi-weekly grass mowing, clearing leaf piles, scaling overgrown creepers near block bases).", status: "Not Started", remarks: "", targetDate: "2026-07-15", owner: "En Zukipli Yakub (Caretaker)" } ]; export default function App() { const [newRecs, setNewRecs] = useState(INITIAL_RECOMMENDATIONS); const [activeTab, setActiveTab] = useState('new-recommendations'); // Sign-off State const [signOffName, setSignOffName] = useState(''); const [signOffRole, setSignOffRole] = useState(''); const [signOffDate, setSignOffDate] = useState(new Date().toISOString().split('T')[0]); const [isSigned, setIsSigned] = useState(false); const [copied, setCopied] = useState(false); // Update a single recommendation's status or remarks const updateRec = (id, key, value) => { setNewRecs(prev => prev.map(rec => { if (rec.id === id) { return { ...rec, [key]: value }; } return rec; })); }; // Preset the sign-off details based on stakeholder selection const selectStakeholderPreset = (name, role) => { setSignOffName(name); setSignOffRole(role); }; // Compile full text update for WhatsApp or Clipboard const generateReportText = () => { let text = `*KTS VILLAGE - SAFETY COMPLIANCE REPORT UPDATE*\n`; text += `*Ref:* ${REPORT_METADATA.ref}\n`; text += `*Survey Date:* ${REPORT_METADATA.surveyDate}\n`; text += `------------------------------------------\n\n`; text += `*RECOMMENDATIONS COMPLIANCE LOG:*\n\n`; newRecs.forEach((rec, i) => { text += `${i + 1}. *[${rec.id}] ${rec.title}*\n`; text += ` • *Status:* ${rec.status.toUpperCase()}\n`; text += ` • *Action Taken / Remarks:* ${rec.remarks || 'No remarks provided yet.'}\n`; text += ` • *Owner:* ${rec.owner}\n`; text += ` • *Target:* ${rec.targetDate}\n\n`; }); text += `------------------------------------------\n`; text += `*ACKNOWLEDGED & SIGNED OFF BY:*\n`; text += `• *Name:* ${signOffName || '[Not Signed Yet]'}\n`; text += `• *Role:* ${signOffRole || '[Not Specified]'}\n`; text += `• *Date:* ${signOffDate}\n`; text += `• *Compliance Statement:* Fully acknowledged and agreed to coordinate actions.`; return text; }; const handleSendWhatsApp = () => { if (!signOffName) { alert("Please enter a name in the Stakeholder Acknowledgement section first."); return; } const reportText = generateReportText(); const encodedText = encodeURIComponent(reportText); const whatsappUrl = `https://wa.me/60128887738?text=${encodedText}`; window.open(whatsappUrl, '_blank'); }; const handleCopyClipboard = () => { const reportText = generateReportText(); // Canvas compatible safe copy fallback const textarea = document.createElement('textarea'); textarea.value = reportText; textarea.style.position = 'fixed'; // prevent scrolling to bottom document.body.appendChild(textarea); textarea.select(); try { document.execCommand('copy'); setCopied(true); setTimeout(() => setCopied(false), 3000); } catch (err) { console.error('Failed to copy', err); } document.body.removeChild(textarea); }; // Calculation for progress tracking const totalRecs = newRecs.length; const compliedRecs = newRecs.filter(r => r.status === 'Complied').length; const inProgressRecs = newRecs.filter(r => r.status === 'In Progress').length; const notStartedRecs = newRecs.filter(r => r.status === 'Not Started').length; const compliancePercentage = Math.round((compliedRecs / totalRecs) * 100); return (
{/* Upper Navigation / Corporate Banner */}

KTS VILLAGE SAFETY PORTAL

Risk Assessment & Interactive Compliance Tracker

Ref: {REPORT_METADATA.ref} Survey: {REPORT_METADATA.surveyDate} Emergency Coordinator: +60128887738
{/* Executive Quick Overview Widgets */}
Safety Audit Status

Active Assessment

Prepared by KTS Risk Management Sdn Bhd.

Kuching Main Center
Compliance Track Score {compliancePercentage}% Complied
{notStartedRecs}
Pending
{inProgressRecs}
In Progress
{compliedRecs}
Complied
Feedback Target

WhatsApp Dispatch

Clicking dispatch automatically packs all compliance notes and forwards to:

+60128887738
Jump to Sign-off
{/* Tab Navigation */}
{/* TAB 1: New Audit Actions (THE INTERACTIVE COMPLIANCE CENTER) */} {activeTab === 'new-recommendations' && (

Key Safety Actions Requiring Response

Please select the status and fill in your compliance update for each item below.

{newRecs.map((rec) => (
{/* Status Strip Accent */}
{/* Left: Hazard and Recommendation details */}
REC {rec.id}

{rec.title}

{/* Status pill badge */} {rec.status}
{/* Hazard Box */}

Hazard Identification

{rec.hazard}

{/* Solution / Recommendation */}

Recommended Action

{rec.recommendation}

{/* Meta Info */}
Owner: {rec.owner} Target Date: {rec.targetDate}
{/* Right: Interaction Form */}
{['Not Started', 'In Progress', 'Complied'].map((statusOption) => ( ))}