\n \n

Loading Watchly…

\n \n \n \n\n",[18,97],"49f36825-b5e0-4700-b59b-520b8219244a",["D",1783636373595],"\n",[18,91],"3b2203dc-3706-4c9e-8d2a-93cd2d5409ac",["D",1783636549929],[18,128],"3ca483ee-07cf-4865-957c-a317a8197bcf",["D",1783636320055],[18,79],"pulls","branches","forks","envVars",{"_98":26,"_258":26},"connections",{"_98":26,"_257":26},"unfilledCount","emptyCount",{"_36":220,"_13":18,"_77":129,"_46":-5,"_38":39,"_221":43,"_222":24,"_40":404,"_42":26,"_80":81,"_224":-5,"_82":30,"_225":-5,"_284":405,"_17":406},{"_36":247,"_13":79,"_77":78,"_46":129,"_38":39,"_221":43,"_222":24,"_40":401,"_42":26,"_80":81,"_224":-5,"_82":30,"_225":-5,"_284":402,"_17":403},{"_36":393,"_13":394,"_77":395,"_46":78,"_38":39,"_221":396,"_222":24,"_40":397,"_42":43,"_80":103,"_224":398,"_82":30,"_225":-5,"_284":399,"_17":400},{"_36":385,"_13":386,"_77":387,"_46":78,"_38":39,"_221":388,"_222":24,"_40":389,"_42":43,"_80":103,"_224":390,"_82":30,"_225":-5,"_284":391,"_17":392},{"_36":377,"_13":378,"_77":379,"_46":78,"_38":39,"_221":380,"_222":24,"_40":381,"_42":43,"_80":103,"_224":382,"_82":30,"_225":-5,"_284":383,"_17":384},{"_36":369,"_13":370,"_77":371,"_46":78,"_38":39,"_221":372,"_222":24,"_40":373,"_42":26,"_80":103,"_224":374,"_82":30,"_225":-5,"_284":375,"_17":376},{"_36":361,"_13":362,"_77":363,"_46":78,"_38":39,"_221":364,"_222":24,"_40":365,"_42":26,"_80":103,"_224":366,"_82":30,"_225":-5,"_284":367,"_17":368},{"_36":353,"_13":354,"_77":355,"_46":78,"_38":39,"_221":356,"_222":24,"_40":357,"_42":43,"_80":103,"_224":358,"_82":30,"_225":-5,"_284":359,"_17":360},{"_36":345,"_13":346,"_77":347,"_46":78,"_38":39,"_221":348,"_222":24,"_40":349,"_42":26,"_80":103,"_224":350,"_82":30,"_225":-5,"_284":351,"_17":352},{"_36":337,"_13":338,"_77":339,"_46":78,"_38":39,"_221":340,"_222":24,"_40":341,"_42":114,"_80":103,"_224":342,"_82":30,"_225":-5,"_284":343,"_17":344},{"_36":329,"_13":330,"_77":331,"_46":78,"_38":39,"_221":332,"_222":24,"_40":333,"_42":26,"_80":103,"_224":334,"_82":30,"_225":-5,"_284":335,"_17":336},{"_36":322,"_13":323,"_77":324,"_46":78,"_38":39,"_221":99,"_222":24,"_40":325,"_42":26,"_80":103,"_224":326,"_82":30,"_225":-5,"_284":327,"_17":328},{"_36":314,"_13":315,"_77":316,"_46":78,"_38":39,"_221":317,"_222":24,"_40":318,"_42":106,"_80":103,"_224":319,"_82":30,"_225":-5,"_284":320,"_17":321},{"_36":244,"_13":128,"_77":127,"_46":129,"_38":39,"_221":121,"_222":24,"_40":311,"_42":26,"_80":81,"_224":-5,"_82":30,"_225":-5,"_284":312,"_17":313},{"_36":303,"_13":304,"_77":305,"_46":127,"_38":39,"_221":306,"_222":24,"_40":307,"_42":43,"_80":103,"_224":308,"_82":30,"_225":-5,"_284":309,"_17":310},{"_36":240,"_13":91,"_77":90,"_46":129,"_38":39,"_221":114,"_222":24,"_40":300,"_42":43,"_80":21,"_224":242,"_82":30,"_225":-5,"_284":301,"_17":302},{"_36":236,"_13":97,"_77":96,"_46":129,"_38":39,"_221":106,"_222":24,"_40":297,"_42":43,"_80":21,"_224":238,"_82":30,"_225":-5,"_284":298,"_17":299},{"_36":232,"_13":102,"_77":101,"_46":129,"_38":39,"_221":43,"_222":24,"_40":294,"_42":26,"_80":103,"_224":234,"_82":30,"_225":-5,"_284":295,"_17":296},{"_36":287,"_13":288,"_77":289,"_46":-5,"_38":39,"_221":169,"_222":24,"_40":290,"_42":43,"_80":21,"_224":291,"_82":30,"_225":-5,"_284":292,"_17":293},{"_36":279,"_13":280,"_77":142,"_46":-5,"_38":39,"_221":43,"_222":24,"_40":281,"_42":26,"_80":282,"_224":283,"_82":30,"_225":-5,"_284":285,"_17":286},"ce3ada09-c197-41ff-8f4a-6f78ab48a4b6","index.ts",["D",1783636320055],"http","import { parseVal, serveFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { Hono } from \"npm:hono\";\n\nconst app = new Hono();\n\n// Serve index.html at the root /\napp.get(\"/\", () => serveFile(\"/frontend/index.html\"));\n\n// Serve all /frontend files\napp.get(\"/frontend/**/*\", (c) => serveFile(c.req.path));\n\n// View source redirect\napp.get(\"/source\", (c) => c.redirect(parseVal().links.self.val));\n\n// Add your API routes here\n// app.get(\"/api/data\", c => c.json({ hello: \"world\" }));\n\n// Unwrap and rethrow Hono errors as the original error\n// If you delete this, all errors will be \"Internal Server Error\"\napp.onError((err) => Promise.reject(err));\n\n// HTTP vals expect an exported \"fetch handler\"\n// This is how you \"run the server\" in Val Town with Hono\nexport default app.fetch;\n","children",[],[280],"4b57aee2-a758-44b7-9226-5f41f86f2f98","README.md","019f4902-5fa0-75aa-98a0-08574ef36550",["D",1783637116546],"# Watchly — Community Safety Intelligence Platform\n\nA premium enterprise civic-tech platform for residential communities in Nigeria to report, verify, manage, and monitor local security incidents through community collaboration.\n\n## Features\n\n- **Authentication** — Login & Register with split-screen branding\n- **Dashboard** — Safety score gauge, stats, active incidents, urgent alerts, activity feed\n- **Incident Feed** — Searchable, filterable, sortable incident cards with confidence meters\n- **Incident Details** — Timeline, evidence gallery, location map, admin updates, verification actions\n- **Report Incident** — Multi-step flow (Category → Details → Location → Evidence → Review → Confirmation)\n- **Alerts** — Urgent, verified, notices, and resolved alerts with pinning\n- **Analytics** — Monthly trends, category breakdown, risk areas, community safety scores\n- **Communities** — Directory with safety scores and member counts\n- **Members** — Table with roles, status, and activity metrics\n- **Reports** — Export-ready report types\n- **Settings** — Community, notifications, security, and preferences tabs\n- **Help** — FAQ and support\n\n## Design System\n\n- **Primary**: #5B3FD9 (Deep Purple) · **Secondary**: #1D2433 (Dark Navy)\n- **Background**: #F8F9FC · **Font**: Inter\n- Rounded corners (16px), soft shadows, 8-point spacing\n- Status chips, priority badges, confidence meters, progress bars\n\n## Tech Stack\n\n- React 18 (client-side SPA)\n- Hono server (Val Town)\n- Twind (Tailwind CSS at runtime)\n- Inter font via Google Fonts\n\n## Architecture\n\n```\nindex.ts ← Hono backend (serves frontend)\nfrontend/\n index.html ← HTML shell (Twind + Inter + React)\n index.tsx ← React entrypoint\n components/\n App.tsx ← Root: routing + auth + layout\n Sidebar.tsx ← Navigation sidebar\n TopBar.tsx ← Search, community selector, notifications, profile\n Dashboard.tsx ← Safety overview with charts\n IncidentFeed.tsx ← Filterable incident list\n IncidentDetails.tsx← Timeline, evidence, map, actions\n ReportIncident.tsx ← Multi-step report form\n Analytics.tsx ← Charts and risk analysis\n SimplePages.tsx ← Communities, Alerts, Members, Reports, Settings, Help\n ui.tsx ← Shared component library\n icons.tsx ← Inline SVG icon set\n data/\n mockData.ts ← Realistic Nigerian incident data\n```\n",[],[288],["D",1783636320055],[],[18,102],["D",1783636373593],[],[18,97],["D",1783636373595],[],[18,91],"0f79422f-a936-4625-ba3d-b89f70f6367a","mockData.ts","893063e2-7be6-11f1-9593-1607ee4eb77e",6,["D",1783636575746],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\nexport type IncidentStatus = \"pending\" | \"verified\" | \"resolved\" | \"rejected\";\nexport type Priority = \"urgent\" | \"high\" | \"medium\" | \"low\";\nexport type Role = \"resident\" | \"admin\" | \"security\";\n\nexport interface Incident {\n id: string; category: string; title: string; description: string;\n location: string; community: string; date: string; time: string;\n status: IncidentStatus; priority: Priority; confidence: number;\n corroborationCount: number;\n reporter: { name: string; role: Role; initials: string };\n evidence: { type: \"image\" | \"video\"; label: string }[];\n timeline: { time: string; event: string; actor: string }[];\n updates: { author: string; role: Role; text: string; time: string }[];\n distance: string; safetyAdvice: string; relatedReports: number;\n}\n\nexport interface Community {\n id: string; name: string; location: string; members: number;\n safetyScore: number; activeIncidents: number; verifiedThisMonth: number;\n description: string; status: \"active\" | \"pending\";\n}\n\nexport interface Member {\n id: string; name: string; email: string; role: Role; community: string;\n joinedDate: string; status: \"active\" | \"pending\"; reportsFiled: number;\n reportsVerified: number; initials: string;\n}\n\nexport interface Alert {\n id: string; title: string; message: string;\n type: \"urgent\" | \"verified\" | \"notice\" | \"resolved\";\n community: string; date: string; pinned: boolean; recipients: number;\n}\n\nexport interface ActivityItem {\n id: string; type: \"report\" | \"verification\" | \"alert\" | \"join\" | \"resolution\";\n description: string; actor: string; time: string;\n}\n\nexport const incidents: Incident[] = [\n { id:\"INC-2024-001\", category:\"Robbery\", title:\"Armed robbery near Lekki Phase 1 roundabout\", description:\"Two unidentified men on a motorcycle approached a resident at the roundabout near Lekki Phase 1, demanding phones and valuables at gunpoint. Incident occurred around 8:45 PM. Suspects fled towards Chevron Drive.\", location:\"Lekki Phase 1 Roundabout, Lekki\", community:\"Lekki Phase 1 RA\", date:\"2024-07-08\", time:\"20:45\", status:\"verified\", priority:\"urgent\", confidence:92, corroborationCount:7, reporter:{name:\"Adaeze Okonkwo\",role:\"resident\",initials:\"AO\"}, evidence:[{type:\"image\",label:\"Street photo showing motorcycle\"},{type:\"image\",label:\"Damage to vehicle window\"},{type:\"video\",label:\"CCTV footage from nearby shop\"}], timeline:[{time:\"20:45\",event:\"Incident reported by resident\",actor:\"Adaeze Okonkwo\"},{time:\"20:52\",event:\"Alert sent to community members\",actor:\"System\"},{time:\"21:10\",event:\"Security team dispatched to location\",actor:\"Emeka Nwosu\"},{time:\"21:30\",event:\"Corroborated by 3 additional residents\",actor:\"Community\"},{time:\"22:15\",event:\"Verified by community admin\",actor:\"Tunde Bakare\"},{time:\"23:00\",event:\"Police report filed, case reference obtained\",actor:\"Emeka Nwosu\"}], updates:[{author:\"Tunde Bakare\",role:\"admin\",text:\"Incident verified based on multiple witness accounts and CCTV evidence. Community alert has been sent.\",time:\"22:15\"},{author:\"Emeka Nwosu\",role:\"security\",text:\"Patrol team arrived at scene. Area has been secured. Police have been notified and are en route.\",time:\"21:35\"}], distance:\"0.8 km\", safetyAdvice:\"Avoid the Lekki Phase 1 roundabout area after 8 PM. Travel in groups when possible and keep emergency contacts saved. Report any suspicious motorcycle activity to community security.\", relatedReports:3 },\n { id:\"INC-2024-002\", category:\"Suspicious Activity\", title:\"Unidentified individuals loitering near Chevron Estate gate\", description:\"Three men were observed standing near the Chevron Estate main gate for over 30 minutes without apparent purpose. They left when security approached but returned 15 minutes later.\", location:\"Chevron Estate Gate 2, Lekki\", community:\"Chevron Estate\", date:\"2024-07-08\", time:\"14:20\", status:\"pending\", priority:\"medium\", confidence:58, corroborationCount:2, reporter:{name:\"Chidi Eze\",role:\"resident\",initials:\"CE\"}, evidence:[{type:\"image\",label:\"Photo from car window\"}], timeline:[{time:\"14:20\",event:\"Incident reported by resident\",actor:\"Chidi Eze\"},{time:\"14:35\",event:\"Corroborated by 1 additional resident\",actor:\"Community\"},{time:\"14:50\",event:\"Security team notified for monitoring\",actor:\"System\"}], updates:[], distance:\"1.2 km\", safetyAdvice:\"Remain vigilant. If you observe these individuals again, do not approach. Note physical descriptions and report immediately.\", relatedReports:0 },\n { id:\"INC-2024-003\", category:\"Burglary\", title:\"Home break-in on Gerald Road, Ikoyi\", description:\"Resident returned home to find back door forced open. Jewelry and electronics missing. No signs of forced entry through front. Incident likely occurred between 9 AM and 3 PM while resident was at work.\", location:\"Gerald Road, Ikoyi\", community:\"Ikoyi Community Watch\", date:\"2024-07-07\", time:\"15:30\", status:\"resolved\", priority:\"high\", confidence:88, corroborationCount:4, reporter:{name:\"Funke Adebayo\",role:\"resident\",initials:\"FA\"}, evidence:[{type:\"image\",label:\"Forced back door\"},{type:\"image\",label:\"Missing items inventory\"}], timeline:[{time:\"15:30\",event:\"Incident reported by resident\",actor:\"Funke Adebayo\"},{time:\"15:45\",event:\"Security team arrived at scene\",actor:\"Ibrahim Sule\"},{time:\"16:00\",event:\"Police contacted and report filed\",actor:\"Ibrahim Sule\"},{time:\"16:30\",event:\"Verified by community admin\",actor:\"Tunde Bakare\"},{time:\"18:00\",event:\"Security patrol increased in area\",actor:\"Tunde Bakare\"},{time:\"Jul 09\",event:\"Suspect identified via CCTV. Investigation ongoing.\",actor:\"Ibrahim Sule\"}], updates:[{author:\"Tunde Bakare\",role:\"admin\",text:\"Incident resolved. Security patrol frequency has been doubled for Gerald Road and surrounding streets. Please ensure all entry points are secured.\",time:\"18:00\"}], distance:\"3.5 km\", safetyAdvice:\"Ensure all doors and windows are locked before leaving home. Consider installing motion-sensor lights and a security camera system.\", relatedReports:1 },\n { id:\"INC-2024-004\", category:\"Fire\", title:\"Electrical fire in Trans Amadi industrial area\", description:\"Fire broke out in a warehouse in the Trans Amadi industrial area, likely due to an electrical fault. Fire service responded within 25 minutes. No casualties reported. Nearby residents advised to keep windows closed due to smoke.\", location:\"Trans Amadi Industrial Layout, Port Harcourt\", community:\"Trans Amadi\", date:\"2024-07-07\", time:\"11:15\", status:\"verified\", priority:\"urgent\", confidence:95, corroborationCount:12, reporter:{name:\"Nnamdi Okafor\",role:\"resident\",initials:\"NO\"}, evidence:[{type:\"image\",label:\"Smoke visible from nearby street\"},{type:\"video\",label:\"Fire service response footage\"},{type:\"image\",label:\"Aftermath photo\"}], timeline:[{time:\"11:15\",event:\"Incident reported by resident\",actor:\"Nnamdi Okafor\"},{time:\"11:20\",event:\"Urgent alert sent to all community members\",actor:\"System\"},{time:\"11:30\",event:\"Fire service contacted\",actor:\"Emeka Nwosu\"},{time:\"11:40\",event:\"Fire service arrived on scene\",actor:\"Emeka Nwosu\"},{time:\"12:30\",event:\"Fire contained\",actor:\"Fire Service\"},{time:\"13:00\",event:\"Verified and resolved\",actor:\"Tunde Bakare\"}], updates:[{author:\"Emeka Nwosu\",role:\"security\",text:\"Fire has been contained. Fire service confirms no casualties. Smoke is clearing. Residents can now open windows.\",time:\"12:30\"}], distance:\"5.0 km\", safetyAdvice:\"Ensure your electrical installations are certified by a licensed electrician. Keep fire extinguishers accessible. Know your nearest fire exit and emergency numbers.\", relatedReports:0 },\n { id:\"INC-2024-005\", category:\"Road Accident\", title:\"Two-vehicle collision on Wuse II market road\", description:\"A Toyota Camry and a commercial bus collided near the Wuse II market entrance. Minor injuries reported. Traffic backed up in both directions. Road safety personnel on scene.\", location:\"Aminu Kano Crescent, Wuse II\", community:\"Wuse II\", date:\"2024-07-06\", time:\"17:45\", status:\"resolved\", priority:\"medium\", confidence:85, corroborationCount:6, reporter:{name:\"Aisha Mohammed\",role:\"resident\",initials:\"AM\"}, evidence:[{type:\"image\",label:\"Vehicle damage photo\"},{type:\"image\",label:\"Traffic backup\"}], timeline:[{time:\"17:45\",event:\"Incident reported by resident\",actor:\"Aisha Mohammed\"},{time:\"17:50\",event:\"Traffic alert sent to community\",actor:\"System\"},{time:\"18:00\",event:\"Road safety personnel arrived\",actor:\"FRSC\"},{time:\"18:45\",event:\"Vehicles cleared, traffic normalizing\",actor:\"FRSC\"},{time:\"19:00\",event:\"Incident resolved\",actor:\"Tunde Bakare\"}], updates:[], distance:\"2.1 km\", safetyAdvice:\"Drive cautiously near market areas, especially during peak hours. Maintain safe following distances.\", relatedReports:0 },\n { id:\"INC-2024-006\", category:\"Power Outage\", title:\"Extended power outage in Maitama district\", description:\"Power has been out in the Maitama district since 6 AM. EDC has been contacted and reports a fault with the transformer serving the area. Estimated restoration: 6 PM today.\", location:\"Maitama, Abuja\", community:\"Maitama\", date:\"2024-07-08\", time:\"06:00\", status:\"resolved\", priority:\"low\", confidence:90, corroborationCount:15, reporter:{name:\"Yusuf Bello\",role:\"resident\",initials:\"YB\"}, evidence:[], timeline:[{time:\"06:00\",event:\"Power outage reported\",actor:\"Yusuf Bello\"},{time:\"06:30\",event:\"Notice sent to community\",actor:\"System\"},{time:\"08:00\",event:\"EDC contacted, transformer fault confirmed\",actor:\"Tunde Bakare\"},{time:\"17:45\",event:\"Power restored\",actor:\"EDC\"},{time:\"18:00\",event:\"Incident resolved\",actor:\"Tunde Bakare\"}], updates:[{author:\"Tunde Bakare\",role:\"admin\",text:\"Power has been restored. EDC confirmed the transformer fault has been repaired. Thank you for your patience.\",time:\"18:00\"}], distance:\"4.2 km\", safetyAdvice:\"Keep phones charged and have backup power sources. Report prolonged outages to EDC directly and through Watchly for community visibility.\", relatedReports:0 },\n { id:\"INC-2024-007\", category:\"Missing Person\", title:\"Elderly resident missing from GRA Port Harcourt\", description:\"78-year-old Mr. Ezekiel Hart was last seen leaving his home on Tombia Street, GRA Port Harcourt at approximately 10 AM. He has mild dementia and was not carrying identification. Wearing a blue agbada and brown sandals.\", location:\"Tombia Street, GRA Port Harcourt\", community:\"GRA Port Harcourt\", date:\"2024-07-08\", time:\"14:00\", status:\"verified\", priority:\"high\", confidence:87, corroborationCount:9, reporter:{name:\"Grace Hart\",role:\"resident\",initials:\"GH\"}, evidence:[{type:\"image\",label:\"Recent photo of Mr. Ezekiel Hart\"}], timeline:[{time:\"14:00\",event:\"Missing person reported by family\",actor:\"Grace Hart\"},{time:\"14:10\",event:\"Urgent alert sent to community\",actor:\"System\"},{time:\"14:30\",event:\"Search team organized\",actor:\"Ibrahim Sule\"},{time:\"15:00\",event:\"Police notified, missing person report filed\",actor:\"Ibrahim Sule\"},{time:\"16:45\",event:\"Mr. Hart found near Artillery Junction, safe\",actor:\"Search Team\"},{time:\"17:00\",event:\"Incident resolved\",actor:\"Tunde Bakare\"}], updates:[{author:\"Ibrahim Sule\",role:\"security\",text:\"UPDATE: Mr. Hart has been found near Artillery Junction. He is safe and being reunited with his family. Thank you to everyone who assisted.\",time:\"16:45\"}], distance:\"6.0 km\", safetyAdvice:\"Ensure elderly family members carry identification and emergency contact information. Consider GPS tracking devices for vulnerable family members.\", relatedReports:0 },\n { id:\"INC-2024-008\", category:\"Vandalism\", title:\"Street lights vandalized on Admiralty Way\", description:\"Multiple street lights along Admiralty Way have been vandalized, leaving a 200-meter stretch in darkness. Residents report seeing the damage this morning.\", location:\"Admiralty Way, Lekki Phase 1\", community:\"Lekki Phase 1 RA\", date:\"2024-07-08\", time:\"07:15\", status:\"pending\", priority:\"low\", confidence:72, corroborationCount:3, reporter:{name:\"David Adeleke\",role:\"resident\",initials:\"DA\"}, evidence:[{type:\"image\",label:\"Damaged street light pole\"}], timeline:[{time:\"07:15\",event:\"Vandalism reported by resident\",actor:\"David Adeleke\"},{time:\"07:30\",event:\"Corroborated by 2 additional residents\",actor:\"Community\"}], updates:[], distance:\"1.0 km\", safetyAdvice:\"Report vandalized infrastructure promptly. Avoid poorly lit areas at night. Community is working with local authorities to repair damaged street lights.\", relatedReports:2 },\n { id:\"INC-2024-009\", category:\"Medical Emergency\", title:\"Resident experienced cardiac event at Chevron Estate\", description:\"A 55-year-old male resident experienced a cardiac event while jogging in Chevron Estate. Neighbors administered CPR and called emergency services. Ambulance arrived within 12 minutes.\", location:\"Chevron Drive, Chevron Estate\", community:\"Chevron Estate\", date:\"2024-07-05\", time:\"06:30\", status:\"resolved\", priority:\"high\", confidence:93, corroborationCount:5, reporter:{name:\"Patricia Eze\",role:\"resident\",initials:\"PE\"}, evidence:[], timeline:[{time:\"06:30\",event:\"Emergency reported by neighbor\",actor:\"Patricia Eze\"},{time:\"06:35\",event:\"CPR initiated by trained resident\",actor:\"Community\"},{time:\"06:40\",event:\"Ambulance dispatched\",actor:\"Emeka Nwosu\"},{time:\"06:42\",event:\"Ambulance arrived\",actor:\"EMS\"},{time:\"07:00\",event:\"Resident stabilized and transported\",actor:\"EMS\"},{time:\"Jul 06\",event:\"Resident in stable condition at hospital\",actor:\"Family\"}], updates:[], distance:\"1.5 km\", safetyAdvice:\"Learn basic CPR and first aid. Keep emergency numbers saved. Know the location of your nearest hospital and emergency services.\", relatedReports:0 },\n { id:\"INC-2024-010\", category:\"Flood\", title:\"Flash flooding on Trans Amadi road after heavy rainfall\", description:\"Heavy rainfall caused flash flooding on the main Trans Amadi road, with water levels reaching knee-height in some areas. Several vehicles stalled. No injuries reported but traffic severely affected.\", location:\"Trans Amadi Road, Port Harcourt\", community:\"Trans Amadi\", date:\"2024-07-04\", time:\"16:00\", status:\"verified\", priority:\"medium\", confidence:91, corroborationCount:11, reporter:{name:\"Blessing Wabara\",role:\"resident\",initials:\"BW\"}, evidence:[{type:\"image\",label:\"Flooded road section\"},{type:\"video\",label:\"Water level footage\"}], timeline:[{time:\"16:00\",event:\"Flooding reported by resident\",actor:\"Blessing Wabara\"},{time:\"16:10\",event:\"Alert sent to community\",actor:\"System\"},{time:\"16:30\",event:\"Road closed by security team\",actor:\"Ibrahim Sule\"},{time:\"18:00\",event:\"Water levels receding\",actor:\"Ibrahim Sule\"},{time:\"20:00\",event:\"Road reopened\",actor:\"Ibrahim Sule\"}], updates:[], distance:\"4.5 km\", safetyAdvice:\"Avoid driving through flooded roads. Do not attempt to walk through moving water. Monitor weather forecasts during rainy season.\", relatedReports:1 },\n];\n\nexport const communities: Community[] = [\n { id:\"C1\", name:\"Lekki Phase 1 RA\", location:\"Lekki, Lagos\", members:1247, safetyScore:78, activeIncidents:3, verifiedThisMonth:18, description:\"Resident association covering Lekki Phase 1 estate\", status:\"active\" },\n { id:\"C2\", name:\"Chevron Estate\", location:\"Chevron Drive, Lekki\", members:892, safetyScore:85, activeIncidents:1, verifiedThisMonth:12, description:\"Chevron Drive residential community\", status:\"active\" },\n { id:\"C3\", name:\"Ikoyi Community Watch\", location:\"Ikoyi, Lagos\", members:634, safetyScore:72, activeIncidents:2, verifiedThisMonth:9, description:\"Community watch program for Ikoyi residents\", status:\"active\" },\n { id:\"C4\", name:\"GRA Port Harcourt\", location:\"GRA, Port Harcourt\", members:1089, safetyScore:81, activeIncidents:1, verifiedThisMonth:15, description:\"Government Reserved Area Port Harcourt\", status:\"active\" },\n { id:\"C5\", name:\"Trans Amadi\", location:\"Trans Amadi, Port Harcourt\", members:567, safetyScore:68, activeIncidents:2, verifiedThisMonth:7, description:\"Trans Amadi industrial-residential area\", status:\"active\" },\n { id:\"C6\", name:\"Wuse II\", location:\"Wuse II, Abuja\", members:1456, safetyScore:83, activeIncidents:1, verifiedThisMonth:14, description:\"Wuse II district community\", status:\"active\" },\n { id:\"C7\", name:\"Maitama\", location:\"Maitama, Abuja\", members:723, safetyScore:88, activeIncidents:0, verifiedThisMonth:6, description:\"Maitama district residential community\", status:\"active\" },\n { id:\"C8\", name:\"Banana Island\", location:\"Banana Island, Ikoyi\", members:0, safetyScore:0, activeIncidents:0, verifiedThisMonth:0, description:\"Pending community registration\", status:\"pending\" },\n];\n\nexport const members: Member[] = [\n { id:\"M1\", name:\"Tunde Bakare\", email:\"t.bakare@watchly.ng\", role:\"admin\", community:\"Lekki Phase 1 RA\", joinedDate:\"2023-01-15\", status:\"active\", reportsFiled:0, reportsVerified:45, initials:\"TB\" },\n { id:\"M2\", name:\"Adaeze Okonkwo\", email:\"adaeze.o@email.com\", role:\"resident\", community:\"Lekki Phase 1 RA\", joinedDate:\"2023-03-22\", status:\"active\", reportsFiled:12, reportsVerified:8, initials:\"AO\" },\n { id:\"M3\", name:\"Emeka Nwosu\", email:\"e.nwosu@watchly.ng\", role:\"security\", community:\"Lekki Phase 1 RA\", joinedDate:\"2023-02-10\", status:\"active\", reportsFiled:5, reportsVerified:30, initials:\"EN\" },\n { id:\"M4\", name:\"Funke Adebayo\", email:\"funke.adebayo@email.com\", role:\"resident\", community:\"Ikoyi Community Watch\", joinedDate:\"2023-04-18\", status:\"active\", reportsFiled:7, reportsVerified:5, initials:\"FA\" },\n { id:\"M5\", name:\"Ibrahim Sule\", email:\"i.sule@watchly.ng\", role:\"security\", community:\"GRA Port Harcourt\", joinedDate:\"2023-01-30\", status:\"active\", reportsFiled:3, reportsVerified:22, initials:\"IS\" },\n { id:\"M6\", name:\"Nnamdi Okafor\", email:\"nnamdi.o@email.com\", role:\"resident\", community:\"Trans Amadi\", joinedDate:\"2023-05-14\", status:\"active\", reportsFiled:9, reportsVerified:7, initials:\"NO\" },\n { id:\"M7\", name:\"Aisha Mohammed\", email:\"aisha.m@email.com\", role:\"resident\", community:\"Wuse II\", joinedDate:\"2023-06-01\", status:\"active\", reportsFiled:4, reportsVerified:3, initials:\"AM\" },\n { id:\"M8\", name:\"Yusuf Bello\", email:\"yusuf.b@email.com\", role:\"resident\", community:\"Maitama\", joinedDate:\"2023-07-20\", status:\"active\", reportsFiled:2, reportsVerified:2, initials:\"YB\" },\n { id:\"M9\", name:\"Grace Hart\", email:\"grace.h@email.com\", role:\"resident\", community:\"GRA Port Harcourt\", joinedDate:\"2023-08-15\", status:\"active\", reportsFiled:1, reportsVerified:1, initials:\"GH\" },\n { id:\"M10\", name:\"Chidi Eze\", email:\"chidi.eze@email.com\", role:\"resident\", community:\"Chevron Estate\", joinedDate:\"2024-01-10\", status:\"pending\", reportsFiled:1, reportsVerified:0, initials:\"CE\" },\n { id:\"M11\", name:\"David Adeleke\", email:\"d.adeleke@email.com\", role:\"resident\", community:\"Lekki Phase 1 RA\", joinedDate:\"2024-02-05\", status:\"pending\", reportsFiled:1, reportsVerified:0, initials:\"DA\" },\n { id:\"M12\", name:\"Blessing Wabara\", email:\"b.wabara@email.com\", role:\"resident\", community:\"Trans Amadi\", joinedDate:\"2024-03-12\", status:\"active\", reportsFiled:6, reportsVerified:4, initials:\"BW\" },\n];\n\nexport const alerts: Alert[] = [\n { id:\"A1\", title:\"Armed Robbery — Lekki Phase 1 Roundabout\", message:\"Verified armed robbery incident. Avoid the roundabout area. Suspects fled towards Chevron Drive. Security team and police are on scene.\", type:\"urgent\", community:\"Lekki Phase 1 RA\", date:\"2024-07-08 22:15\", pinned:true, recipients:1247 },\n { id:\"A2\", title:\"Missing Person Found — GRA Port Harcourt\", message:\"Mr. Ezekiel Hart has been found safe near Artillery Junction. Thank you to all who assisted in the search.\", type:\"resolved\", community:\"GRA Port Harcourt\", date:\"2024-07-08 17:00\", pinned:false, recipients:1089 },\n { id:\"A3\", title:\"Fire Contained — Trans Amadi\", message:\"The warehouse fire in Trans Amadi has been contained. No casualties. Smoke is clearing. Residents may now open windows.\", type:\"verified\", community:\"Trans Amadi\", date:\"2024-07-07 12:30\", pinned:false, recipients:567 },\n { id:\"A4\", title:\"Increased Patrols — Gerald Road, Ikoyi\", message:\"Following the burglary incident, security patrols have been doubled on Gerald Road and surrounding streets. Report any suspicious activity.\", type:\"verified\", community:\"Ikoyi Community Watch\", date:\"2024-07-07 18:00\", pinned:false, recipients:634 },\n { id:\"A5\", title:\"Power Outage — Maitama District\", message:\"Power outage affecting Maitama district. ECD reports transformer fault. Estimated restoration: 6 PM today.\", type:\"notice\", community:\"Maitama\", date:\"2024-07-08 06:30\", pinned:false, recipients:723 },\n { id:\"A6\", title:\"Road Closure — Trans Amadi Road\", message:\"Trans Amadi Road temporarily closed due to flash flooding. Use alternative routes via Aba Road.\", type:\"notice\", community:\"Trans Amadi\", date:\"2024-07-04 16:30\", pinned:false, recipients:567 },\n];\n\nexport const activityFeed: ActivityItem[] = [\n { id:\"AC1\", type:\"verification\", description:\"Verified incident: Armed robbery near Lekki Phase 1 roundabout\", actor:\"Tunde Bakare\", time:\"22:15\" },\n { id:\"AC2\", type:\"report\", description:\"New incident reported: Vandalism on Admiralty Way\", actor:\"David Adeleke\", time:\"07:15\" },\n { id:\"AC3\", type:\"report\", description:\"New incident reported: Suspicious activity near Chevron Estate gate\", actor:\"Chidi Eze\", time:\"14:20\" },\n { id:\"AC4\", type:\"resolution\", description:\"Resolved: Missing person — Mr. Ezekiel Hart found safe\", actor:\"Ibrahim Sule\", time:\"16:45\" },\n { id:\"AC5\", type:\"alert\", description:\"Alert sent: Power outage in Maitama district\", actor:\"System\", time:\"06:30\" },\n { id:\"AC6\", type:\"join\", description:\"New member joined: Blessing Wabara (Trans Amadi)\", actor:\"Blessing Wabara\", time:\"Mar 12\" },\n { id:\"AC7\", type:\"verification\", description:\"Verified incident: Flash flooding on Trans Amadi road\", actor:\"Tunde Bakare\", time:\"Jul 04\" },\n { id:\"AC8\", type:\"report\", description:\"New incident reported: Fire in Trans Amadi industrial area\", actor:\"Nnamdi Okafor\", time:\"Jul 07\" },\n];\n\nexport const analyticsData = {\n weeklyIncidents: [\n { day:\"Mon\", count:4 }, { day:\"Tue\", count:7 }, { day:\"Wed\", count:3 },\n { day:\"Thu\", count:8 }, { day:\"Fri\", count:12 }, { day:\"Sat\", count:6 }, { day:\"Sun\", count:4 },\n ],\n monthlyTrend: [\n { month:\"Jan\", count:45 }, { month:\"Feb\", count:38 }, { month:\"Mar\", count:52 },\n { month:\"Apr\", count:41 }, { month:\"May\", count:36 }, { month:\"Jun\", count:48 }, { month:\"Jul\", count:44 },\n ],\n categoryBreakdown: [\n { category:\"Robbery\", count:18, percentage:22 },\n { category:\"Suspicious Activity\", count:14, percentage:17 },\n { category:\"Burglary\", count:12, percentage:15 },\n { category:\"Road Accident\", count:9, percentage:11 },\n { category:\"Fire\", count:7, percentage:9 },\n { category:\"Flood\", count:6, percentage:7 },\n { category:\"Vandalism\", count:6, percentage:7 },\n { category:\"Medical Emergency\", count:5, percentage:6 },\n { category:\"Power Outage\", count:5, percentage:6 },\n { category:\"Missing Person\", count:3, percentage:4 },\n ],\n riskAreas: [\n { area:\"Lekki Phase 1 Roundabout\", incidents:8, riskLevel:\"high\" },\n { area:\"Admiralty Way\", incidents:5, riskLevel:\"medium\" },\n { area:\"Gerald Road, Ikoyi\", incidents:4, riskLevel:\"medium\" },\n { area:\"Trans Amadi Road\", incidents:6, riskLevel:\"high\" },\n { area:\"Aminu Kano Crescent\", incidents:3, riskLevel:\"low\" },\n ],\n stats: {\n totalIncidents:81, pendingVerification:8, verifiedIncidents:62, resolvedIncidents:54,\n rejectedReports:11, avgResolutionTime:\"4.2 hrs\", verificationRate:76.5,\n communityHealthScore:78, activeCommunities:7, totalMembers:6608,\n reportsToday:7, alertsSent:23,\n },\n};\n\nexport const currentUser = {\n name:\"Tunde Bakare\", email:\"t.bakare@watchly.ng\", role:\"admin\" as Role,\n community:\"Lekki Phase 1 RA\", initials:\"TB\",\n};\n",[],[18,128,304],["D",1783636549929],[273],[18,128],"91b78c80-56c7-4001-a7c2-ec048158932a","ui.tsx","be10f298-7be6-11f1-ad82-1607ee4eb77e",9,["D",1783636662588],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\nimport * as Icons from \"./icons.tsx\";\n\nexport const C = {\n primary: \"#5B3FD9\", navy: \"#1D2433\", bg: \"#F8F9FC\", success: \"#16A34A\",\n warning: \"#F59E0B\", danger: \"#DC2626\", info: \"#2563EB\",\n textPrimary: \"#1D2433\", textSecondary: \"#64748B\", textTertiary: \"#94A3B8\",\n border: \"#E2E8F0\",\n};\n\nexport function Card({ children, onClick, style }: { children: React.ReactNode; onClick?: () => void; style?: any }) {\n return

{children}

;\n}\n\nexport function Button({ children, variant = \"primary\", size = \"md\", icon, onClick, fullWidth }: { children?: any; variant?: string; size?: string; icon?: any; onClick?: () => void; fullWidth?: boolean }) {\n const v: any = { primary: { background: C.primary, color: \"#fff\" }, secondary: { background: C.navy, color: \"#fff\" }, ghost: { background: \"transparent\", color: C.primary }, danger: { background: C.danger, color: \"#fff\" }, success: { background: C.success, color: \"#fff\" }, outline: { background: \"transparent\", color: C.textPrimary, border: \"1px solid #E2E8F0\" } };\n const s: any = { sm: { padding: \"6px 14px\", fontSize: 13 }, md: { padding: \"10px 20px\", fontSize: 14 }, lg: { padding: \"14px 28px\", fontSize: 15 } };\n return ;\n}\n\nexport function StatusChip({ status }: { status: string }) {\n const c: any = {\n pending: { bg: \"#FEF3C7\", color: \"#92400E\", label: \"Pending\", icon: },\n verified: { bg: \"#DBEAFE\", color: \"#1E40AF\", label: \"Verified\", icon: },\n resolved: { bg: \"#DCFCE7\", color: \"#166534\", label: \"Resolved\", icon: },\n rejected: { bg: \"#FEE2E2\", color: \"#991B1B\", label: \"Rejected\", icon: },\n };\n const x = c[status] || c.pending;\n return {x.icon}{x.label};\n}\n\nexport function PriorityBadge({ priority }: { priority: string }) {\n const c: any = { urgent: { color: C.danger, label: \"Urgent\" }, high: { color: C.warning, label: \"High\" }, medium: { color: C.info, label: \"Medium\" }, low: { color: C.textSecondary, label: \"Low\" } };\n const x = c[priority] || c.low;\n return {x.label};\n}\n\nexport function RoleBadge({ role }: { role: string }) {\n const c: any = { admin: { bg: \"#EDE9FE\", color: \"#5B3FD9\", label: \"Admin\" }, security: { bg: \"#DBEAFE\", color: \"#2563EB\", label: \"Security\" }, resident: { bg: \"#F1F5F9\", color: \"#475569\", label: \"Resident\" } };\n const x = c[role] || c.resident;\n return {x.label};\n}\n\nexport function Avatar({ initials, size = 36, color }: { initials: string; size?: number; color?: string }) {\n const colors = [\"#5B3FD9\", \"#2563EB\", \"#16A34A\", \"#F59E0B\", \"#DC2626\", \"#0891B2\", \"#7C3AED\"];\n const idx = (initials.charCodeAt(0) + (initials.charCodeAt(1) || 0)) % colors.length;\n return

{initials}

;\n}\n\nexport function ProgressBar({ value, color = C.primary, height = 8 }: { value: number; color?: string; height?: number }) {\n return

;\n}\n\nexport function StatCard({ label, value, icon, trend, trendUp, color = C.primary }: { label: string; value: any; icon: any; trend?: string; trendUp?: boolean; color?: string }) {\n return (\n

\n {icon}\n

\n {trend &&

{trendUp ? : }{trend}

}\n

{value}

{label}

\n );\n}\n\nexport function SectionHeader({ title, subtitle, action }: { title: string; subtitle?: string; action?: any }) {\n return (\n

{title}

{subtitle &&

{subtitle}

}

\n {action}\n

\n );\n}\n\nexport function Tabs({ tabs, active, onChange }: { tabs: { id: string; label: string; count?: number }[]; active: string; onChange: (id: string) => void }) {\n return (\n

\n {tabs.map(t => (\n \n ))}\n

\n );\n}\n\nexport function SearchBar({ placeholder = \"Search...\", value, onChange }: { placeholder?: string; value: string; onChange: (v: string) => void }) {\n return (\n

\n onChange(e.target.value)} placeholder={placeholder} className=\"w-full border border-[#E2E8F0] outline-none focus:border-[#5B3FD9]\" style={{ borderRadius: 10, padding: \"10px 14px 10px 40px\", fontSize: 14, color: C.textPrimary, background: \"#fff\" }} />\n

\n );\n}\n\nexport function EmptyState({ icon, title, description, action }: { icon: any; title: string; description?: string; action?: any }) {\n return (\n

{icon}

{title}

\n {description &&

{description}

}\n {action &&

{action}

}\n

\n );\n}\n\nexport function ConfidenceMeter({ value }: { value: number }) {\n const color = value >= 80 ? C.success : value >= 60 ? C.warning : C.danger;\n return

{value}%

;\n}\n\nexport function Breadcrumbs({ items }: { items: { label: string; onClick?: () => void }[] }) {\n return (\n

\n {items.map((item, i) => (\n \n {item.onClick ? : {item.label}}\n {i < items.length - 1 && }\n \n ))}\n

\n );\n}\n",[],[18,79,315],"44862aa0-d08a-44f6-b753-5aafc127771c","icons.tsx","40fb8cc8-7be6-11f1-b92c-1607ee4eb77e",["D",1783636428792],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\n\ntype IconProps = { size?: number; className?: string; strokeWidth?: number };\n\nconst make = (paths: React.ReactNode) =>\n ({ size = 20, className = \"\", strokeWidth = 2 }: IconProps) => (\n \n {paths}\n \n );\n\nexport const Home = make(<>);\nexport const Rss = make(<>);\nexport const Plus = make(<>);\nexport const Users = make(<>);\nexport const Bell = make(<>);\nexport const BarChart = make(<>);\nexport const FileText = make(<>);\nexport const Settings = make(<>);\nexport const HelpCircle = make(<>);\nexport const Search = make(<>);\nexport const MapPin = make(<>);\nexport const Clock = make(<>);\nexport const Shield = make(<>);\nexport const ShieldCheck = make(<>);\nexport const CheckCircle = make(<>);\nexport const XCircle = make(<>);\nexport const AlertTriangle = make(<>);\nexport const TrendingUp = make(<>);\nexport const TrendingDown = make(<>);\nexport const Camera = make(<>);\nexport const Upload = make(<>);\nexport const ChevronRight = make(<>);\nexport const ChevronDown = make(<>);\nexport const ChevronLeft = make(<>);\nexport const Menu = make(<>);\nexport const MoreVertical = make(<>);\nexport const Filter = make(<>);\nexport const ArrowLeft = make(<>);\nexport const ArrowUp = make(<>);\nexport const ArrowRight = make(<>);\nexport const Eye = make(<>);\nexport const Flag = make(<>);\nexport const X = make(<>);\nexport const Check = make(<>);\nexport const MessageSquare = make(<>);\nexport const ThumbsUp = make(<>);\nexport const Activity = make(<>);\nexport const Zap = make(<>);\nexport const Download = make(<>);\nexport const Star = make(<>);\nexport const Pin = make(<>);\nexport const Image = make(<>);\nexport const Video = make(<>);\nexport const Phone = make(<>);\nexport const Mail = make(<>);\nexport const Lock = make(<>);\nexport const LogOut = make(<>);\nexport const User = make(<>);\nexport const Building = make(<>);\nexport const Layers = make(<>);\nexport const GitBranch = make(<>);\nexport const Info = make(<>);\nexport const Calendar = make(<>);\nexport const Droplet = make(<>);\nexport const Flame = make(<>);\nexport const Car = make(<>);\nexport const HeartPulse = make(<>);\nexport const UserSearch = make(<>);\nexport const Wrench = make(<>);\nexport const AlertOctagon = make(<>);\nexport const Power = make(<>);\nexport const Moon = make(<>);\nexport const Globe = make(<>);\nexport const Send = make(<>);\nexport const Trash = make(<>);\nexport const Edit = make(<>);\nexport const ExternalLink = make(<>);\nexport const RefreshCw = make(<>);\nexport const Loader = make(<>);\n",[],[18,79,323],"83f6ca07-762b-43ff-a875-ce798d0b5e30","TopBar.tsx","e5794fce-7be6-11f1-a7a1-1607ee4eb77e",11,["D",1783636704723],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\nimport * as Icons from \"./icons.tsx\";\nimport { C, Avatar, RoleBadge } from \"./ui.tsx\";\nimport { currentUser, communities } from \"../data/mockData.ts\";\n\nexport function TopBar({ title, onSearch }: { title: string; onSearch?: (v: string) => void }) {\n const [showNotif, setShowNotif] = React.useState(false);\n const [showProfile, setShowProfile] = React.useState(false);\n const [showComm, setShowComm] = React.useState(false);\n const [search, setSearch] = React.useState(\"\");\n\n return (\n

{title}

\n\n

\n {/* Search */}\n

\n { setSearch(e.target.value); onSearch?.(e.target.value); }} placeholder=\"Search incidents, alerts...\" className=\"border border-[#E2E8F0] outline-none focus:border-[#5B3FD9] w-full\" style={{ borderRadius: 10, padding: \"8px 12px 8px 38px\", fontSize: 13, color: C.textPrimary }} />\n

\n\n {/* Community Selector */}\n

\n \n {showComm && (\n

Switch Community

\n {communities.filter(c => c.status === \"active\").map(c => (\n \n ))}\n

\n )}\n

\n\n {/* Quick Action */}\n \n\n {/* Notifications */}\n

\n \n {showNotif && (\n

NotificationsMark all read

\n {[\n { icon: , color: C.danger, title: \"Urgent: Armed robbery verified\", time: \"5 min ago\" },\n { icon: , color: C.success, title: \"Missing person found safe\", time: \"1 hour ago\" },\n { icon: , color: C.info, title: \"2 new join requests pending\", time: \"3 hours ago\" },\n ].map((n, i) => (\n

{n.icon}

{n.title}

{n.time}

\n ))}\n

\n )}\n

\n\n {/* Profile */}\n

\n \n {showProfile && (\n

{currentUser.name}

{currentUser.email}

\n {[\n { icon: , label: \"My Profile\" },\n { icon: , label: \"My Reports\" },\n { icon: , label: \"Settings\" },\n { icon: , label: \"Help & Support\" },\n ].map((item, i) => (\n \n ))}\n

\n \n

\n )}\n

\n );\n}\n",[],[18,79,330],"4e46149d-3d91-4222-aaca-f38897fdaf7e","SimplePages.tsx","9a83b724-7be7-11f1-b332-1607ee4eb77e",23,["D",1783637058010],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\nimport * as Icons from \"./icons.tsx\";\nimport { C, ProgressBar, Button, Avatar, RoleBadge } from \"./ui.tsx\";\nimport { communities, members, alerts } from \"../data/mockData.ts\";\n\nexport function CommunitiesPage() {\n return (\n

All Communities

\n \n

\n {communities.map(c => (\n

{c.name}

{c.location} · {c.members.toLocaleString()} members

\n = 80 ? C.success : c.safetyScore >= 70 ? C.warning : C.danger} height={6} />\n

Safety Score= 80 ? C.success : C.warning }}>{c.safetyScore || \"—\"}

\n ))}\n

\n );\n}\n\nexport function AlertsPage() {\n const [tab, setTab] = React.useState(\"all\");\n const filtered = tab === \"all\" ? alerts : alerts.filter(a => a.type === tab);\n const typeConfig: any = {\n urgent: { color: C.danger, bg: \"#FEF2F2\", border: \"#FECACA\", icon: , label: \"Urgent\" },\n verified: { color: C.info, bg: \"#F0F9FF\", border: \"#BAE6FD\", icon: , label: \"Verified\" },\n notice: { color: C.warning, bg: \"#FFFBEB\", border: \"#FDE68A\", icon: , label: \"Notice\" },\n resolved: { color: C.success, bg: \"#F0FDF4\", border: \"#BBF7D0\", icon: , label: \"Resolved\" },\n };\n return (\n

\n {[{id:\"all\",label:\"All\"},{id:\"urgent\",label:\"Urgent\"},{id:\"verified\",label:\"Verified\"},{id:\"notice\",label:\"Notices\"},{id:\"resolved\",label:\"Resolved\"}].map(t => (\n \n ))}\n

\n {filtered.map(a => { const cfg = typeConfig[a.type]; return (\n

\n {a.pinned && }\n

{cfg.icon}

{a.title}

{cfg.label}

{a.message}

{a.community}{a.date}{a.recipients.toLocaleString()} recipients

\n ); })}\n

\n );\n}\n\nexport function MembersPage() {\n return (\n

{members.length} Members

\n \n

\n \n \n {[\"Member\",\"Role\",\"Community\",\"Joined\",\"Reports\",\"Status\",\"Actions\"].map(h => )}\n \n \n {members.map(m => (\n \n \n \n \n \n \n \n \n \n ))}\n \n

{h}
{m.name} {m.email}		{m.community}	{m.joinedDate}	{m.reportsFiled}	{m.status}

\n );\n}\n\nexport function ReportsPage() {\n const reportTypes = [\n { title: \"Incident Reports\", desc: \"All reported incidents by status, category, and community\", icon: Icons.Rss, count: 81 },\n { title: \"Verification Reports\", desc: \"Verification rates and admin review activity\", icon: Icons.ShieldCheck, count: 62 },\n { title: \"Community Reports\", desc: \"Community health, membership, and activity metrics\", icon: Icons.Building, count: 7 },\n { title: \"Monthly Reports\", desc: \"Comprehensive monthly safety intelligence summaries\", icon: Icons.Calendar, count: 12 },\n ];\n return (\n

\n {reportTypes.map((r, i) => { const Icon = r.icon; return (\n

\n {r.count}\n

{r.title}

{r.desc}

\n \n

\n ); })}\n

\n );\n}\n\nexport function SettingsPage() {\n const [tab, setTab] = React.useState(\"community\");\n const tabs = [{id:\"community\",label:\"Community\"},{id:\"notifications\",label:\"Notifications\"},{id:\"security\",label:\"Security\"},{id:\"preferences\",label:\"Preferences\"}];\n return (\n

\n {tabs.map(t => )}\n

\n {tab === \"community\" &&

Community Settings

\n {[[\"Community Name\",\"Lekki Phase 1 RA\"],[\"Location\",\"Lekki, Lagos\"],[\"Description\",\"Resident association covering Lekki Phase 1 estate\"]].map(([label, val]: any, i) => (\n

{label}

\n ))}\n \n

}\n {tab === \"notifications\" &&

\n {[[\"Incident Alerts\",\"Get notified about verified incidents in your community\"],[\"Corroboration Updates\",\"Updates when your reports are corroborated\"],[\"Resolution Notices\",\"Notices when incidents are resolved\"],[\"Community Announcements\",\"Important community-wide announcements\"]].map(([title, desc]: any, i) => (\n

{title}

{desc}

\n ))}\n

}\n {tab === \"security\" &&

Security

Current Password

\n \n

}\n {tab === \"preferences\" &&

\n {[[\"Language\",\"English (Nigeria)\"],[\"Timezone\",\"WAT (UTC+1)\"],[\"Date Format\",\"DD/MM/YYYY\"]].map(([label, val]: any, i) => (\n

{label}{val}

\n ))}\n

}\n

\n );\n}\n\nexport function HelpPage() {\n const faqs = [\n { q: \"How do I report an incident?\", a: \"Click 'Report Incident' in the sidebar, select a category, provide details and location, optionally upload evidence, then submit.\" },\n { q: \"What does verification mean?\", a: \"Verification means community admins and security personnel have reviewed your report and confirmed it as genuine based on evidence and corroboration.\" },\n { q: \"How is the safety score calculated?\", a: \"The safety score is based on incident frequency, resolution rate, verification rate, and community response times.\" },\n { q: \"Can I report anonymously?\", a: \"Yes, you can choose to submit reports anonymously. Your identity will only be visible to community admins.\" },\n ];\n return (\n

Help & Support

Find answers to common questions about Watchly.

\n {faqs.map((f, i) => (\n

{f.q}

{f.a}

\n ))}\n

\n );\n}\n",[],[18,79,338],"d1915213-68da-491d-ba72-15d68182d918","Sidebar.tsx","e571ed38-7be6-11f1-87e5-1607ee4eb77e",10,["D",1783636704721],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\nimport * as Icons from \"./icons.tsx\";\nimport { C } from \"./ui.tsx\";\nimport { currentUser } from \"../data/mockData.ts\";\n\nconst navItems = [\n { id: \"dashboard\", label: \"Dashboard\", icon: Icons.Home },\n { id: \"feed\", label: \"Incident Feed\", icon: Icons.Rss },\n { id: \"report\", label: \"Report Incident\", icon: Icons.Plus },\n { id: \"communities\", label: \"Communities\", icon: Icons.Building },\n { id: \"alerts\", label: \"Alerts\", icon: Icons.Bell },\n { id: \"analytics\", label: \"Analytics\", icon: Icons.BarChart },\n { id: \"reports\", label: \"Reports\", icon: Icons.FileText },\n { id: \"members\", label: \"Members\", icon: Icons.Users },\n];\n\nconst bottomItems = [\n { id: \"settings\", label: \"Settings\", icon: Icons.Settings },\n { id: \"help\", label: \"Help\", icon: Icons.HelpCircle },\n];\n\nexport function Sidebar({ currentPage, onNavigate }: { currentPage: string; onNavigate: (page: string) => void }) {\n return (\n

\n {/* Logo */}\n

\n \n

Watchly

Safety Intelligence

\n\n {/* Nav */}\n

\n {navItems.map(item => {\n const Icon = item.icon;\n const active = currentPage === item.id;\n return (\n \n );\n })}\n\n

System

\n {bottomItems.map(item => {\n const Icon = item.icon;\n const active = currentPage === item.id;\n return (\n \n );\n })}\n

\n\n {/* User */}\n

{currentUser.initials}

{currentUser.name}

{currentUser.role} · {currentUser.community}

\n \n

\n );\n}\n",[],[18,79,346],"469e914c-8244-41a0-9bdf-fb4002cac1bb","ReportIncident.tsx","5fd4bdf8-7be7-11f1-b118-1607ee4eb77e",17,["D",1783636930379],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\nimport * as Icons from \"./icons.tsx\";\nimport { C, Button, Card } from \"./ui.tsx\";\n\nconst cats = [\n [\"Robbery\", Icons.AlertTriangle], [\"Burglary\", Icons.Lock], [\"Suspicious Activity\", Icons.Eye],\n [\"Fire\", Icons.Flame], [\"Flood\", Icons.Droplet], [\"Road Accident\", Icons.Car],\n [\"Medical Emergency\", Icons.HeartPulse], [\"Power Outage\", Icons.Power],\n [\"Missing Person\", Icons.UserSearch], [\"Vandalism\", Icons.Wrench],\n];\n\nexport function ReportIncident({ onComplete }: { onComplete: () => void }) {\n const [step, setStep] = React.useState(0);\n const [cat, setCat] = React.useState(\"\");\n const [title, setTitle] = React.useState(\"\");\n const [desc, setDesc] = React.useState(\"\");\n const [loc, setLoc] = React.useState(\"\");\n const labels = [\"Category\", \"Details\", \"Location\", \"Evidence\", \"Review\"];\n\n if (step === 5) return (\n

\n \n

Report Submitted

Your report has been submitted. Admins will review and verify it.

\n \n \n

\n );\n\n return (\n

\n {labels.map((s, i) => (\n \n

\n {i < step ? : i + 1}\n

\n {s}\n

\n {i < 4 &&

}\n \n ))}\n

\n \n {step === 0 && (\n

Select Category

\n {cats.map(([id, Icon]: any) => (\n \n ))}\n

\n )}\n {step === 1 && (\n

Incident Details

Title setTitle(e.target.value)} placeholder=\"Brief summary\" className=\"w-full border border-[#E2E8F0] outline-none focus:border-[#5B3FD9]\" style={{ borderRadius: 10, padding: \"10px 14px\", fontSize: 14 }} />

Description

setDesc(e.target.value)} placeholder=\"Describe what happened...\" rows={4} className=\"w-full border border-[#E2E8F0] outline-none focus:border-[#5B3FD9] resize-none\" style={{ borderRadius: 10, padding: \"10px 14px\", fontSize: 14 }} /></div>\n              <div className=\"flex justify-end gap-2\"><Button variant=\"outline\" size=\"sm\" onClick={() => setStep(0)}>Back</Button><Button size=\"sm\" onClick={() => setStep(2)} disabled={!title || !desc}>Continue</Button></div>\n            </div>\n          </div>\n        )}\n        {step === 2 && (\n          <div>\n            <h2 className=\"text-lg font-bold mb-4\" style={{ color: C.textPrimary }}>Location</h2>\n            <div className=\"space-y-4\">\n              <div><label className=\"block text-sm font-semibold mb-1.5\" style={{ color: C.textPrimary }}>Address / Landmark</label><input value={loc} onChange={(e: any) => setLoc(e.target.value)} placeholder=\"e.g. Admiralty Way, Lekki\" className=\"w-full border border-[#E2E8F0] outline-none focus:border-[#5B3FD9]\" style={{ borderRadius: 10, padding: \"10px 14px\", fontSize: 14 }} /></div>\n              <div className=\"flex items-center justify-center\" style={{ height: 160, background: \"#F1F5F9\", borderRadius: 12, color: C.textTertiary }}><Icons.MapPin size={32} /></div>\n              <div className=\"flex justify-end gap-2\"><Button variant=\"outline\" size=\"sm\" onClick={() => setStep(1)}>Back</Button><Button size=\"sm\" onClick={() => setStep(3)} disabled={!loc}>Continue</Button></div>\n            </div>\n          </div>\n        )}\n        {step === 3 && (\n          <div>\n            <h2 className=\"text-lg font-bold mb-4\" style={{ color: C.textPrimary }}>Upload Evidence</h2>\n            <div className=\"border-2 border-dashed border-[#E2E8F0] flex flex-col items-center justify-center cursor-pointer hover:border-[#5B3FD9]\" style={{ borderRadius: 12, padding: \"40px 20px\" }}>\n              <Icons.Upload size={32} className=\"text-[#94A3B8]\" />\n              <p className=\"text-sm font-semibold mt-2\" style={{ color: C.textPrimary }}>Click to upload or drag files</p>\n              <p className=\"text-xs mt-1\" style={{ color: C.textTertiary }}>Images and videos · Max 10MB</p>\n            </div>\n            <div className=\"flex justify-end gap-2 mt-4\"><Button variant=\"outline\" size=\"sm\" onClick={() => setStep(2)}>Back</Button><Button size=\"sm\" onClick={() => setStep(4)}>Continue</Button></div>\n          </div>\n        )}\n        {step === 4 && (\n          <div>\n            <h2 className=\"text-lg font-bold mb-4\" style={{ color: C.textPrimary }}>Review & Submit</h2>\n            <div className=\"space-y-3\" style={{ background: \"#F8F9FC\", borderRadius: 12, padding: 16 }}>\n              <div className=\"flex justify-between\"><span className=\"text-sm\" style={{ color: C.textSecondary }}>Category</span><span className=\"text-sm font-semibold\" style={{ color: C.textPrimary }}>{cat}</span></div>\n              <div className=\"flex justify-between\"><span className=\"text-sm\" style={{ color: C.textSecondary }}>Title</span><span className=\"text-sm font-semibold\" style={{ color: C.textPrimary }}>{title}</span></div>\n              <div className=\"flex justify-between\"><span className=\"text-sm\" style={{ color: C.textSecondary }}>Location</span><span className=\"text-sm font-semibold\" style={{ color: C.textPrimary }}>{loc}</span></div>\n            </div>\n            <div className=\"flex justify-end gap-2 mt-4\"><Button variant=\"outline\" size=\"sm\" onClick={() => setStep(3)}>Back</Button><Button variant=\"success\" size=\"sm\" icon={<Icons.Check size={15} />} onClick={() => setStep(5)}>Submit Report</Button></div>\n          </div>\n        )}\n      </Card>\n    </div>\n  );\n}\n",[],[18,79,354],"c6ae6d49-ab68-47e2-ab3f-6d5cb31640b5","IncidentFeed.tsx","28bf7592-7be7-11f1-ab42-1607ee4eb77e",14,["D",1783636817636],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\nimport * as Icons from \"./icons.tsx\";\nimport { C, SearchBar, StatusChip, PriorityBadge, Avatar, ConfidenceMeter, EmptyState, Tabs } from \"./ui.tsx\";\nimport { incidents } from \"../data/mockData.ts\";\n\nconst catIcons: any = {\n  Robbery: <Icons.AlertTriangle size={18} />, Burglary: <Icons.Lock size={18} />,\n  \"Suspicious Activity\": <Icons.Eye size={18} />, Fire: <Icons.Flame size={18} />,\n  Flood: <Icons.Droplet size={18} />, \"Road Accident\": <Icons.Car size={18} />,\n  \"Medical Emergency\": <Icons.HeartPulse size={18} />, \"Power Outage\": <Icons.Power size={18} />,\n  \"Missing Person\": <Icons.UserSearch size={18} />, Vandalism: <Icons.Wrench size={18} />,\n};\n\nexport function IncidentFeed({ search, onSelectIncident }: { search: string; onSelectIncident: (id: string) => void }) {\n  const [localSearch, setLocalSearch] = React.useState(\"\");\n  const [statusFilter, setStatusFilter] = React.useState(\"all\");\n  const [sortBy, setSortBy] = React.useState(\"recent\");\n  const query = search || localSearch;\n  let filtered = incidents.filter(i => (statusFilter === \"all\" || i.status === statusFilter) && (!query || i.title.toLowerCase().includes(query.toLowerCase()) || i.location.toLowerCase().includes(query.toLowerCase()) || i.category.toLowerCase().includes(query.toLowerCase())));\n  if (sortBy === \"confidence\") filtered = [...filtered].sort((a, b) => b.confidence - a.confidence);\n  else if (sortBy === \"corroboration\") filtered = [...filtered].sort((a, b) => b.corroborationCount - a.corroborationCount);\n\n  return (\n    <div className=\"space-y-5\">\n      <div className=\"flex items-center justify-between gap-4\">\n        <SearchBar placeholder=\"Search by title, location, or category...\" value={query} onChange={setLocalSearch} />\n        <select value={sortBy} onChange={(e: any) => setSortBy(e.target.value)} className=\"border border-[#E2E8F0] outline-none\" style={{ borderRadius: 10, padding: \"9px 12px\", fontSize: 13, color: C.textPrimary, background: \"#fff\", cursor: \"pointer\" }}>\n          <option value=\"recent\">Most Recent</option><option value=\"confidence\">Highest Confidence</option><option value=\"corroboration\">Most Corroborated</option>\n        </select>\n      </div>\n      <Tabs tabs={[{id:\"all\",label:\"All\",count:incidents.length},{id:\"pending\",label:\"Pending\",count:incidents.filter(i=>i.status===\"pending\").length},{id:\"verified\",label:\"Verified\",count:incidents.filter(i=>i.status===\"verified\").length},{id:\"resolved\",label:\"Resolved\",count:incidents.filter(i=>i.status===\"resolved\").length}]} active={statusFilter} onChange={setStatusFilter} />\n      {filtered.length === 0 ? <EmptyState icon={<Icons.Rss size={28} />} title=\"No incidents found\" description=\"Try adjusting your search or filters.\" /> : (\n        <div className=\"space-y-3\">\n          {filtered.map(inc => (\n            <div key={inc.id} onClick={() => onSelectIncident(inc.id)} className=\"bg-white border border-[#E2E8F0] cursor-pointer hover:border-[#5B3FD9]/40 hover:shadow-lg transition-all\" style={{ borderRadius: 16, padding: \"20px 24px\" }}>\n              <div className=\"flex items-start gap-4\">\n                <div className=\"flex items-center justify-center flex-shrink-0\" style={{ width: 48, height: 48, borderRadius: 12, background: inc.priority === \"urgent\" ? C.danger + \"15\" : C.primary + \"15\", color: inc.priority === \"urgent\" ? C.danger : C.primary }}>{catIcons[inc.category] || <Icons.AlertOctagon size={18} />}</div>\n                <div className=\"flex-1 min-w-0\">\n                  <div className=\"flex items-center gap-2 flex-wrap mb-1\"><span className=\"text-xs font-semibold px-2 py-0.5 rounded\" style={{ background: \"#F1F5F9\", color: C.textSecondary }}>{inc.category}</span><StatusChip status={inc.status} /><PriorityBadge priority={inc.priority} /></div>\n                  <h3 className=\"text-base font-bold mb-1\" style={{ color: C.textPrimary }}>{inc.title}</h3>\n                  <p className=\"text-sm mb-2\" style={{ color: C.textSecondary }}>{inc.description.slice(0, 120)}...</p>\n                  <div className=\"flex items-center gap-4 text-xs flex-wrap\" style={{ color: C.textTertiary }}>\n                    <span className=\"flex items-center gap-1\"><Icons.MapPin size={12} />{inc.location}</span>\n                    <span className=\"flex items-center gap-1\"><Icons.Clock size={12} />{inc.date} {inc.time}</span>\n                    <span className=\"flex items-center gap-1\"><Icons.ThumbsUp size={12} />{inc.corroborationCount} corroborations</span>\n                  </div>\n                </div>\n                <div className=\"flex flex-col items-end gap-2 flex-shrink-0\">\n                  <div className=\"flex items-center gap-2\"><Avatar initials={inc.reporter.initials} size={28} /><span className=\"text-xs font-medium\" style={{ color: C.textSecondary }}>{inc.reporter.name}</span></div>\n                  <ConfidenceMeter value={inc.confidence} />\n                </div>\n              </div>\n            </div>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n",[],[18,79,362],"87fb0220-be52-423d-858b-fc937aada8b3","IncidentDetails.tsx","35cb9d06-7be7-11f1-8179-1607ee4eb77e",15,["D",1783636839522],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\nimport * as Icons from \"./icons.tsx\";\nimport { C, StatusChip, PriorityBadge, Avatar, ConfidenceMeter, Button, Breadcrumbs, RoleBadge } from \"./ui.tsx\";\nimport { incidents } from \"../data/mockData.ts\";\n\nexport function IncidentDetails({ incidentId, onBack }: { incidentId: string; onBack: () => void }) {\n  const inc = incidents.find(i => i.id === incidentId) || incidents[0];\n  const [tab, setTab] = React.useState(\"timeline\");\n  return (\n    <div className=\"space-y-5\">\n      <Breadcrumbs items={[{ label: \"Incident Feed\", onClick: onBack }, { label: inc.id }]} />\n      <div className=\"grid gap-6\" style={{ gridTemplateColumns: \"2fr 1fr\" }}>\n        <div className=\"space-y-5\">\n          <div className=\"bg-white border border-[#E2E8F0]\" style={{ borderRadius: 16, padding: 24 }}>\n            <div className=\"flex items-center gap-2 mb-3 flex-wrap\">\n              <span className=\"text-xs font-semibold px-2 py-0.5 rounded\" style={{ background: \"#F1F5F9\", color: C.textSecondary }}>{inc.category}</span>\n              <StatusChip status={inc.status} /><PriorityBadge priority={inc.priority} />\n              <span className=\"text-xs\" style={{ color: C.textTertiary }}>· {inc.id}</span>\n            </div>\n            <h1 className=\"text-xl font-bold mb-2\" style={{ color: C.textPrimary }}>{inc.title}</h1>\n            <p className=\"text-sm mb-4\" style={{ color: C.textSecondary, lineHeight: 1.6 }}>{inc.description}</p>\n            <div className=\"flex items-center gap-4 text-xs flex-wrap\" style={{ color: C.textTertiary }}>\n              <span className=\"flex items-center gap-1\"><Icons.MapPin size={13} />{inc.location}</span>\n              <span className=\"flex items-center gap-1\"><Icons.Clock size={13} />{inc.date} at {inc.time}</span>\n            </div>\n          </div>\n          <div className=\"flex items-center gap-1 border-b border-[#E2E8F0]\">\n            {[\"timeline\",\"evidence\",\"map\",\"updates\"].map(t => (\n              <button key={t} onClick={() => setTab(t)} className=\"font-semibold capitalize\" style={{ padding: \"10px 16px\", fontSize: 14, color: tab === t ? C.primary : C.textSecondary, borderBottom: tab === t ? `2px solid ${C.primary}` : \"2px solid transparent\" }}>{t}</button>\n            ))}\n          </div>\n          {tab === \"timeline\" && (\n            <div className=\"bg-white border border-[#E2E8F0]\" style={{ borderRadius: 16, padding: 24 }}>\n              <h3 className=\"text-sm font-bold mb-4\" style={{ color: C.textPrimary }}>Incident Timeline</h3>\n              {inc.timeline.map((t, i) => (\n                <div key={i} className=\"flex gap-4 pb-5 last:pb-0 relative\">\n                  {i < inc.timeline.length - 1 && <div style={{ position: \"absolute\", left: 11, top: 24, bottom: 0, width: 2, background: \"#E2E8F0\" }} />}\n                  <div className=\"flex items-center justify-center flex-shrink-0\" style={{ width: 24, height: 24, borderRadius: \"50%\", background: i === 0 ? C.primary : \"#F1F5F9\", color: i === 0 ? \"#fff\" : C.textTertiary, fontSize: 10, zIndex: 1 }}>{i === 0 ? <Icons.Check size={12} /> : i + 1}</div>\n                  <div className=\"flex-1\"><div className=\"text-sm font-semibold\" style={{ color: C.textPrimary }}>{t.event}</div><div className=\"text-xs mt-0.5\" style={{ color: C.textSecondary }}>{t.actor} · {t.time}</div></div>\n                </div>\n              ))}\n            </div>\n          )}\n          {tab === \"evidence\" && (\n            <div className=\"bg-white border border-[#E2E8F0]\" style={{ borderRadius: 16, padding: 24 }}>\n              <h3 className=\"text-sm font-bold mb-4\" style={{ color: C.textPrimary }}>Evidence ({inc.evidence.length})</h3>\n              {inc.evidence.length === 0 ? <p className=\"text-sm\" style={{ color: C.textTertiary }}>No evidence submitted.</p> : (\n                <div className=\"grid grid-cols-3 gap-3\">\n                  {inc.evidence.map((e, i) => (\n                    <div key={i} className=\"border border-[#E2E8F0]\" style={{ borderRadius: 12, overflow: \"hidden\" }}>\n                      <div className=\"flex items-center justify-center\" style={{ height: 120, background: \"#F8F9FC\", color: C.textTertiary }}>{e.type === \"video\" ? <Icons.Video size={28} /> : <Icons.Image size={28} />}</div>\n                      <div style={{ padding: \"8px 12px\" }}><div className=\"text-xs font-medium\" style={{ color: C.textPrimary }}>{e.label}</div></div>\n                    </div>\n                  ))}\n                </div>\n              )}\n            </div>\n          )}\n          {tab === \"map\" && (\n            <div className=\"bg-white border border-[#E2E8F0]\" style={{ borderRadius: 16, padding: 24 }}>\n              <h3 className=\"text-sm font-bold mb-4\" style={{ color: C.textPrimary }}>Location</h3>\n              <div className=\"flex items-center justify-center flex-col gap-2\" style={{ height: 280, background: \"#F1F5F9\", borderRadius: 12 }}>\n                <div className=\"flex items-center justify-center\" style={{ width: 48, height: 48, borderRadius: \"50%\", background: C.primary, color: \"#fff\" }}><Icons.MapPin size={24} /></div>\n                <div className=\"text-sm font-semibold\" style={{ color: C.textPrimary }}>{inc.location}</div>\n              </div>\n            </div>\n          )}\n          {tab === \"updates\" && (\n            <div className=\"bg-white border border-[#E2E8F0]\" style={{ borderRadius: 16, padding: 24 }}>\n              <h3 className=\"text-sm font-bold mb-4\" style={{ color: C.textPrimary }}>Updates</h3>\n              {inc.updates.length === 0 ? <p className=\"text-sm\" style={{ color: C.textTertiary }}>No updates yet.</p> : inc.updates.map((u, i) => (\n                <div key={i} className=\"flex gap-3 mb-4 last:mb-0\">\n                  <Avatar initials={u.author.split(\" \").map((n: string) => n[0]).join(\"\")} size={36} />\n                  <div><div className=\"flex items-center gap-2 mb-1\"><span className=\"text-sm font-semibold\" style={{ color: C.textPrimary }}>{u.author}</span><RoleBadge role={u.role} /></div><p className=\"text-sm\" style={{ color: C.textSecondary }}>{u.text}</p></div>\n                </div>\n              ))}\n            </div>\n          )}\n        </div>\n        <div className=\"space-y-5\">\n          <div className=\"bg-white border border-[#E2E8F0]\" style={{ borderRadius: 16, padding: 20 }}>\n            <h3 className=\"text-sm font-bold mb-3\" style={{ color: C.textPrimary }}>Reported By</h3>\n            <div className=\"flex items-center gap-3 mb-3\"><Avatar initials={inc.reporter.initials} size={40} /><div><div className=\"text-sm font-semibold\" style={{ color: C.textPrimary }}>{inc.reporter.name}</div><RoleBadge role={inc.reporter.role} /></div></div>\n            <div className=\"space-y-2 text-xs\" style={{ color: C.textSecondary }}>\n              <div className=\"flex justify-between items-center\"><span>Confidence</span><ConfidenceMeter value={inc.confidence} /></div>\n              <div className=\"flex justify-between\"><span>Corroborations</span><span className=\"font-semibold\" style={{ color: C.textPrimary }}>{inc.corroborationCount}</span></div>\n              <div className=\"flex justify-between\"><span>Evidence</span><span className=\"font-semibold\" style={{ color: C.textPrimary }}>{inc.evidence.length} items</span></div>\n            </div>\n          </div>\n          <div className=\"border\" style={{ borderRadius: 16, padding: 20, background: \"#F0F9FF\", borderColor: \"#BAE6FD\" }}>\n            <div className=\"flex items-center gap-2 mb-2\"><Icons.ShieldCheck size={18} className=\"text-[#2563EB]\" /><h3 className=\"text-sm font-bold\" style={{ color: C.textPrimary }}>Safety Advice</h3></div>\n            <p className=\"text-xs\" style={{ color: C.textSecondary, lineHeight: 1.6 }}>{inc.safetyAdvice}</p>\n          </div>\n          <div className=\"bg-white border border-[#E2E8F0]\" style={{ borderRadius: 16, padding: 20 }}>\n            <h3 className=\"text-sm font-bold mb-3\" style={{ color: C.textPrimary }}>Actions</h3>\n            <div className=\"space-y-2\">\n              <Button variant=\"success\" size=\"sm\" fullWidth icon={<Icons.CheckCircle size={15} />}>Approve & Verify</Button>\n              <Button variant=\"danger\" size=\"sm\" fullWidth icon={<Icons.XCircle size={15} />}>Reject Report</Button>\n              <Button variant=\"outline\" size=\"sm\" fullWidth icon={<Icons.MessageSquare size={15} />}>Request Info</Button>\n              <Button variant=\"outline\" size=\"sm\" fullWidth icon={<Icons.Bell size={15} />}>Send Alert</Button>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n}\n",[],[18,79,370],"0b8535cc-ef46-496c-a7ec-700878274c13","Dashboard.tsx","f65d745a-7be6-11f1-bd42-1607ee4eb77e",13,["D",1783636759031],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\nimport * as Icons from \"./icons.tsx\";\nimport { C, StatCard, StatusChip, PriorityBadge, Avatar, ConfidenceMeter } from \"./ui.tsx\";\nimport { incidents, alerts, activityFeed, analyticsData, currentUser } from \"../data/mockData.ts\";\n\nfunction SafetyGauge({ score }: { score: number }) {\n  const r = 54, circ = 2 * Math.PI * r, off = circ - (score / 100) * circ;\n  const color = score >= 80 ? C.success : score >= 70 ? C.warning : C.danger;\n  return (\n    <div className=\"relative flex items-center justify-center\" style={{ width: 140, height: 140 }}>\n      <svg width=\"140\" height=\"140\" style={{ transform: \"rotate(-90deg)\" }}>\n        <circle cx=\"70\" cy=\"70\" r={r} fill=\"none\" stroke=\"#E2E8F0\" strokeWidth=\"10\" />\n        <circle cx=\"70\" cy=\"70\" r={r} fill=\"none\" stroke={color} strokeWidth=\"10\" strokeLinecap=\"round\" strokeDasharray={circ} strokeDashoffset={off} style={{ transition: \"stroke-dashoffset 1s ease\" }} />\n      </svg>\n      <div className=\"absolute flex flex-col items-center\">\n        <div className=\"text-3xl font-bold\" style={{ color }}>{score}</div>\n        <div className=\"text-xs font-semibold\" style={{ color: C.textSecondary }}>Safety</div>\n      </div>\n    </div>\n  );\n}\n\nexport function Dashboard({ onNavigate, onSelectIncident }: { onNavigate: (p: string) => void; onSelectIncident: (id: string) => void }) {\n  const s = analyticsData.stats;\n  const activeIncidents = incidents.filter(i => i.status === \"verified\" || i.status === \"pending\");\n  const recentActivity = activityFeed.slice(0, 6);\n  const maxWeekly = Math.max(...analyticsData.weeklyIncidents.map(d => d.count));\n\n  return (\n    <div className=\"space-y-6\">\n      <div className=\"flex items-center justify-between\" style={{ background: `linear-gradient(135deg, ${C.primary}, #7C3AED)`, borderRadius: 16, padding: \"24px 28px\" }}>\n        <div>\n          <h2 className=\"text-2xl font-bold text-white\">Good evening, {currentUser.name.split(\" \")[0]}</h2>\n          <p className=\"text-sm mt-1\" style={{ color: \"rgba(255,255,255,0.8)\" }}>Community safety overview for {currentUser.community}</p>\n        </div>\n        <div className=\"flex gap-3\">\n          <button onClick={() => onNavigate(\"report\")} className=\"flex items-center gap-2 font-semibold text-white\" style={{ background: \"rgba(255,255,255,0.2)\", borderRadius: 10, padding: \"10px 18px\", fontSize: 14 }}><Icons.Plus size={16} /> Report</button>\n          <button onClick={() => onNavigate(\"analytics\")} className=\"flex items-center gap-2 font-semibold\" style={{ background: \"rgba(255,255,255,0.15)\", color: \"#fff\", borderRadius: 10, padding: \"10px 18px\", fontSize: 14 }}><Icons.BarChart size={16} /> Analytics</button>\n        </div>\n      </div>\n\n      <div className=\"grid grid-cols-4 gap-4\">\n        <StatCard label=\"Total Incidents\" value={s.totalIncidents} icon={<Icons.Rss size={22} />} trend=\"+12%\" trendUp color={C.primary} />\n        <StatCard label=\"Pending Review\" value={s.pendingVerification} icon={<Icons.Clock size={22} />} trend=\"-3\" trendUp color={C.warning} />\n        <StatCard label=\"Resolved\" value={s.resolvedIncidents} icon={<Icons.CheckCircle size={22} />} trend=\"+8%\" trendUp color={C.success} />\n        <StatCard label=\"Communities\" value={s.activeCommunities} icon={<Icons.Building size={22} />} color={C.info} />\n      </div>\n\n      <div className=\"grid gap-6\" style={{ gridTemplateColumns: \"2fr 1fr\" }}>\n        {/* Left column */}\n        <div className=\"space-y-6\">\n          {/* Safety Score + Weekly Chart */}\n          <div className=\"grid gap-4\" style={{ gridTemplateColumns: \"1fr 2fr\" }}>\n            <div className=\"bg-white border border-[#E2E8F0]\" style={{ borderRadius: 16, padding: 24, boxShadow: \"0 1px 3px rgba(0,0,0,0.04)\" }}>\n              <div className=\"text-sm font-semibold mb-3\" style={{ color: C.textSecondary }}>Community Health</div>\n              <SafetyGauge score={s.communityHealthScore} />\n              <div className=\"mt-3 text-center\">\n                <span className=\"text-sm font-semibold\" style={{ color: s.communityHealthScore >= 80 ? C.success : C.warning }}>{s.communityHealthScore >= 80 ? \"Good\" : \"Moderate\"}</span>\n              </div>\n            </div>\n            <div className=\"bg-white border border-[#E2E8F0]\" style={{ borderRadius: 16, padding: 24, boxShadow: \"0 1px 3px rgba(0,0,0,0.04)\" }}>\n              <div className=\"flex items-center justify-between mb-4\">\n                <div><h3 className=\"text-sm font-bold\" style={{ color: C.textPrimary }}>Weekly Incident Reports</h3><p className=\"text-xs mt-0.5\" style={{ color: C.textSecondary }}>Last 7 days</p></div>\n                <span className=\"text-2xl font-bold\" style={{ color: C.primary }}>{s.reportsToday}</span>\n              </div>\n              <div className=\"flex items-end justify-between gap-2\" style={{ height: 120 }}>\n                {analyticsData.weeklyIncidents.map((d, i) => (\n                  <div key={i} className=\"flex flex-col items-center gap-1.5 flex-1\">\n                    <div className=\"text-xs font-semibold\" style={{ color: C.textSecondary }}>{d.count}</div>\n                    <div className=\"w-full flex items-end justify-center\" style={{ height: 80 }}>\n                      <div style={{ width: \"60%\", height: `${(d.count / maxWeekly) * 80}px`, background: i === 4 ? C.primary : \"#E2E8F0\", borderRadius: \"6px 6px 0 0\", transition: \"height 0.5s\" }} />\n                    </div>\n                    <div className=\"text-xs\" style={{ color: C.textTertiary }}>{d.day}</div>\n                  </div>\n                ))}\n              </div>\n            </div>\n          </div>\n\n          {/* Active Incidents */}\n          <div className=\"bg-white border border-[#E2E8F0]\" style={{ borderRadius: 16, padding: 24, boxShadow: \"0 1px 3px rgba(0,0,0,0.04)\" }}>\n            <div className=\"flex items-center justify-between mb-4\">\n              <h3 className=\"text-sm font-bold\" style={{ color: C.textPrimary }}>Active Incidents</h3>\n              <button onClick={() => onNavigate(\"feed\")} className=\"text-xs font-semibold\" style={{ color: C.primary }}>View all →</button>\n            </div>\n            <div className=\"space-y-3\">\n              {activeIncidents.slice(0, 4).map(inc => (\n                <div key={inc.id} onClick={() => onSelectIncident(inc.id)} className=\"flex items-center gap-4 cursor-pointer hover:bg-[#F8F9FC] transition-colors\" style={{ padding: \"12px 14px\", borderRadius: 12, border: \"1px solid #F1F5F9\" }}>\n                  <div className=\"flex items-center justify-center flex-shrink-0\" style={{ width: 40, height: 40, borderRadius: 10, background: inc.priority === \"urgent\" ? C.danger + \"15\" : C.primary + \"15\", color: inc.priority === \"urgent\" ? C.danger : C.primary }}>\n                    {inc.category === \"Robbery\" ? <Icons.AlertTriangle size={20} /> : inc.category === \"Fire\" ? <Icons.Flame size={20} /> : inc.category === \"Flood\" ? <Icons.Droplet size={20} /> : inc.category === \"Suspicious Activity\" ? <Icons.Eye size={20} /> : inc.category === \"Vandalism\" ? <Icons.Wrench size={20} /> : <Icons.AlertOctagon size={20} />}\n                  </div>\n                  <div className=\"flex-1 min-w-0\">\n                    <div className=\"text-sm font-semibold truncate\" style={{ color: C.textPrimary }}>{inc.title}</div>\n                    <div className=\"flex items-center gap-2 mt-1\">\n                      <span className=\"text-xs flex items-center gap-1\" style={{ color: C.textSecondary }}><Icons.MapPin size={11} />{inc.location.split(\",\")[0]}</span>\n                      <span className=\"text-xs\" style={{ color: C.textTertiary }}>· {inc.distance}</span>\n                    </div>\n                  </div>\n                  <div className=\"flex items-center gap-2 flex-shrink-0\">\n                    <ConfidenceMeter value={inc.confidence} />\n                    <StatusChip status={inc.status} />\n                  </div>\n                </div>\n              ))}\n            </div>\n          </div>\n        </div>\n\n        {/* Right column */}\n        <div className=\"space-y-6\">\n          {/* Urgent Alerts */}\n          <div className=\"bg-white border border-[#E2E8F0]\" style={{ borderRadius: 16, padding: 24, boxShadow: \"0 1px 3px rgba(0,0,0,0.04)\" }}>\n            <div className=\"flex items-center justify-between mb-4\">\n              <h3 className=\"text-sm font-bold\" style={{ color: C.textPrimary }}>Urgent Alerts</h3>\n              <button onClick={() => onNavigate(\"alerts\")} className=\"text-xs font-semibold\" style={{ color: C.primary }}>View all →</button>\n            </div>\n            {alerts.filter(a => a.type === \"urgent\" || a.type === \"verified\").slice(0, 3).map(a => (\n              <div key={a.id} className=\"mb-3 last:mb-0\" style={{ padding: \"12px 14px\", borderRadius: 12, background: a.type === \"urgent\" ? \"#FEF2F2\" : \"#F0F9FF\", border: `1px solid ${a.type === \"urgent\" ? \"#FECACA\" : \"#BAE6FD\"}` }}>\n                <div className=\"flex items-start gap-2\">\n                  <div style={{ color: a.type === \"urgent\" ? C.danger : C.info, marginTop: 2 }}>{a.type === \"urgent\" ? <Icons.AlertTriangle size={16} /> : <Icons.ShieldCheck size={16} />}</div>\n                  <div className=\"flex-1\">\n                    <div className=\"text-sm font-semibold\" style={{ color: C.textPrimary }}>{a.title}</div>\n                    <div className=\"text-xs mt-1\" style={{ color: C.textSecondary }}>{a.message.slice(0, 80)}...</div>\n                    <div className=\"text-xs mt-1.5\" style={{ color: C.textTertiary }}>{a.date}</div>\n                  </div>\n                </div>\n              </div>\n            ))}\n          </div>\n\n          {/* Activity Feed */}\n          <div className=\"bg-white border border-[#E2E8F0]\" style={{ borderRadius: 16, padding: 24, boxShadow: \"0 1px 3px rgba(0,0,0,0.04)\" }}>\n            <h3 className=\"text-sm font-bold mb-4\" style={{ color: C.textPrimary }}>Recent Activity</h3>\n            <div className=\"space-y-3\">\n              {recentActivity.map(a => {\n                const icons: any = { report: <Icons.Rss size={14} />, verification: <Icons.ShieldCheck size={14} />, alert: <Icons.Bell size={14} />, join: <Icons.Users size={14} />, resolution: <Icons.CheckCircle size={14} /> };\n                const colors: any = { report: C.primary, verification: C.success, alert: C.warning, join: C.info, resolution: C.success };\n                return (\n                  <div key={a.id} className=\"flex items-start gap-3\">\n                    <div className=\"flex items-center justify-center flex-shrink-0\" style={{ width: 28, height: 28, borderRadius: 8, background: colors[a.type] + \"15\", color: colors[a.type] }}>{icons[a.type]}</div>\n                    <div className=\"flex-1 min-w-0\">\n                      <div className=\"text-xs font-medium\" style={{ color: C.textPrimary }}>{a.description}</div>\n                      <div className=\"text-xs mt-0.5\" style={{ color: C.textTertiary }}>{a.actor} · {a.time}</div>\n                    </div>\n                  </div>\n                );\n              })}\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n}\n",[],[18,79,378],"da919027-0f30-4235-b7ec-3cec14511ca7","App.tsx","019f4902-5fa0-75aa-989f-ec526b1a7bc3",24,["D",1783637085137],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\nimport * as Icons from \"./icons.tsx\";\nimport { C, Button } from \"./ui.tsx\";\nimport { Sidebar } from \"./Sidebar.tsx\";\nimport { TopBar } from \"./TopBar.tsx\";\nimport { Dashboard } from \"./Dashboard.tsx\";\nimport { IncidentFeed } from \"./IncidentFeed.tsx\";\nimport { IncidentDetails } from \"./IncidentDetails.tsx\";\nimport { ReportIncident } from \"./ReportIncident.tsx\";\nimport { Analytics } from \"./Analytics.tsx\";\nimport { CommunitiesPage, AlertsPage, MembersPage, ReportsPage, SettingsPage, HelpPage } from \"./SimplePages.tsx\";\n\nconst pageTitles: any = {\n  dashboard: \"Dashboard\", feed: \"Incident Feed\", report: \"Report Incident\",\n  communities: \"Communities\", alerts: \"Alerts\", analytics: \"Analytics\",\n  reports: \"Reports\", members: \"Members\", settings: \"Settings\", help: \"Help & Support\",\n};\n\nfunction LoginScreen({ onLogin }: { onLogin: () => void }) {\n  const [mode, setMode] = React.useState<\"login\" | \"register\">(\"login\");\n  return (\n    <div className=\"flex\" style={{ minHeight: \"100vh\" }}>\n      {/* Left panel */}\n      <div className=\"flex flex-col justify-between\" style={{ width: \"45%\", background: C.navy, padding: \"48px\", position: \"relative\", overflow: \"hidden\" }}>\n        <div style={{ position: \"absolute\", top: -100, right: -100, width: 300, height: 300, borderRadius: \"50%\", background: C.primary + \"30\", filter: \"blur(80px)\" }} />\n        <div style={{ position: \"absolute\", bottom: -50, left: -50, width: 200, height: 200, borderRadius: \"50%\", background: \"#2563EB\" + \"20\", filter: \"blur(60px)\" }} />\n        <div className=\"flex items-center gap-3 relative z-10\">\n          <div className=\"flex items-center justify-center\" style={{ width: 40, height: 40, borderRadius: 10, background: C.primary }}><Icons.Shield size={22} className=\"text-white\" /></div>\n          <div><div className=\"text-white font-bold text-xl\">Watchly</div><div className=\"text-xs\" style={{ color: \"#94A3B8\" }}>Community Safety Intelligence</div></div>\n        </div>\n        <div className=\"relative z-10\">\n          <h1 className=\"text-3xl font-bold text-white mb-3\" style={{ lineHeight: 1.3 }}>Safer communities through verified intelligence</h1>\n          <p className=\"text-base\" style={{ color: \"#94A3B8\", lineHeight: 1.6 }}>Report, verify, and monitor local security incidents. Reduce misinformation, improve trust, and build reliable safety information for your community.</p>\n          <div className=\"mt-8 space-y-3\">\n            {[[\"Real-time incident reporting and verification\",\"\"],[\"Community-driven corroboration system\",\"\"],[\"Verified safety alerts and notifications\",\"\"],[\"Comprehensive analytics and reporting\",\"\"]].map(([t]: any, i) => (\n              <div key={i} className=\"flex items-center gap-3\"><div className=\"flex items-center justify-center\" style={{ width: 24, height: 24, borderRadius: \"50%\", background: C.success + \"20\" }}><Icons.Check size={14} className=\"text-[#16A34A]\" /></div><span className=\"text-sm\" style={{ color: \"#CBD5E1\" }}>{t}</span></div>\n            ))}\n          </div>\n        </div>\n        <div className=\"relative z-10 text-xs\" style={{ color: \"#64748B\" }}>© 2024 Watchly. Trusted by communities across Nigeria.</div>\n      </div>\n      {/* Right panel */}\n      <div className=\"flex-1 flex items-center justify-center\" style={{ background: C.bg, padding: \"48px\" }}>\n        <div style={{ width: 400 }}>\n          <h2 className=\"text-2xl font-bold mb-1\" style={{ color: C.textPrimary }}>{mode === \"login\" ? \"Welcome back\" : \"Create account\"}</h2>\n          <p className=\"text-sm mb-6\" style={{ color: C.textSecondary }}>{mode === \"login\" ? \"Sign in to your Watchly account\" : \"Join your community safety network\"}</p>\n          <div className=\"space-y-4\">\n            {mode === \"register\" && (\n              <div><label className=\"block text-sm font-semibold mb-1.5\" style={{ color: C.textPrimary }}>Full Name</label><input placeholder=\"Enter your name\" className=\"w-full border border-[#E2E8F0] outline-none focus:border-[#5B3FD9]\" style={{ borderRadius: 10, padding: \"11px 14px\", fontSize: 14 }} /></div>\n            )}\n            <div><label className=\"block text-sm font-semibold mb-1.5\" style={{ color: C.textPrimary }}>Email</label><input placeholder=\"you@example.com\" className=\"w-full border border-[#E2E8F0] outline-none focus:border-[#5B3FD9]\" style={{ borderRadius: 10, padding: \"11px 14px\", fontSize: 14 }} /></div>\n            <div><label className=\"block text-sm font-semibold mb-1.5\" style={{ color: C.textPrimary }}>Password</label><input type=\"password\" placeholder=\"••••••••\" className=\"w-full border border-[#E2E8F0] outline-none focus:border-[#5B3FD9]\" style={{ borderRadius: 10, padding: \"11px 14px\", fontSize: 14 }} /></div>\n            {mode === \"login\" && <div className=\"flex items-center justify-between text-sm\"><label className=\"flex items-center gap-2 cursor-pointer\"><input type=\"checkbox\" style={{ accentColor: C.primary }} /><span style={{ color: C.textSecondary }}>Remember me</span></label><a href=\"#\" style={{ color: C.primary, fontWeight: 600 }}>Forgot password?</a></div>}\n            <Button fullWidth size=\"lg\" onClick={onLogin}>{mode === \"login\" ? \"Sign In\" : \"Create Account\"}</Button>\n          </div>\n          <p className=\"text-sm text-center mt-6\" style={{ color: C.textSecondary }}>\n            {mode === \"login\" ? \"Don't have an account? \" : \"Already have an account? \"}\n            <button onClick={() => setMode(mode === \"login\" ? \"register\" : \"login\")} className=\"font-semibold\" style={{ color: C.primary }}>{mode === \"login\" ? \"Sign up\" : \"Sign in\"}</button>\n          </p>\n        </div>\n      </div>\n    </div>\n  );\n}\n\nexport function App() {\n  const [authed, setAuthed] = React.useState(false);\n  const [page, setPage] = React.useState(\"dashboard\");\n  const [incidentId, setIncidentId] = React.useState(\"\");\n  const [search, setSearch] = React.useState(\"\");\n\n  React.useEffect(() => {\n    const handler = (e: any) => setPage(e.detail);\n    window.addEventListener(\"navigate\", handler);\n    return () => window.removeEventListener(\"navigate\", handler);\n  }, []);\n\n  if (!authed) return <LoginScreen onLogin={() => setAuthed(true)} />;\n\n  const navigate = (p: string) => { setPage(p); setIncidentId(\"\"); };\n  const selectIncident = (id: string) => { setIncidentId(id); setPage(\"incident\"); };\n  const goBack = () => setPage(\"feed\");\n\n  return (\n    <div style={{ minHeight: \"100vh\", background: C.bg }}>\n      <Sidebar currentPage={page} onNavigate={navigate} />\n      <div style={{ marginLeft: 256 }}>\n        <TopBar title={pageTitles[page] || \"Watchly\"} onSearch={setSearch} />\n        <div style={{ padding: \"24px 32px\", maxWidth: 1280, margin: \"0 auto\" }}>\n          {page === \"dashboard\" && <Dashboard onNavigate={navigate} onSelectIncident={selectIncident} />}\n          {page === \"feed\" && <IncidentFeed search={search} onSelectIncident={selectIncident} />}\n          {page === \"incident\" && <IncidentDetails incidentId={incidentId} onBack={goBack} />}\n          {page === \"report\" && <ReportIncident onComplete={() => navigate(\"dashboard\")} />}\n          {page === \"analytics\" && <Analytics />}\n          {page === \"communities\" && <CommunitiesPage />}\n          {page === \"alerts\" && <AlertsPage />}\n          {page === \"members\" && <MembersPage />}\n          {page === \"reports\" && <ReportsPage />}\n          {page === \"settings\" && <SettingsPage />}\n          {page === \"help\" && <HelpPage />}\n        </div>\n      </div>\n      <div style={{ textAlign: \"center\", padding: \"16px\", color: C.textTertiary, fontSize: 12 }}>\n        <a href=\"/source\" style={{ color: C.textTertiary }}>view source</a> · Watchly © 2024\n      </div>\n    </div>\n  );\n}\n",[],[18,79,386],"f362ea4a-a3d5-497d-a56f-07720a2fe6bd","Analytics.tsx","7fd8304e-7be7-11f1-a901-1607ee4eb77e",19,["D",1783636973651],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\nimport * as Icons from \"./icons.tsx\";\nimport { C, StatCard, ProgressBar } from \"./ui.tsx\";\nimport { analyticsData } from \"../data/mockData.ts\";\n\nexport function Analytics() {\n  const s = analyticsData.stats;\n  const mx = Math.max(...analyticsData.monthlyTrend.map(d => d.count));\n  return (\n    <div className=\"space-y-6\">\n      <div className=\"grid grid-cols-4 gap-4\">\n        <StatCard label=\"Verification Rate\" value={s.verificationRate + \"%\"} icon={<Icons.ShieldCheck size={22} />} trend=\"+5%\" trendUp color={C.success} />\n        <StatCard label=\"Avg Resolution\" value={s.avgResolutionTime} icon={<Icons.Clock size={22} />} trend=\"-0.8h\" trendUp color={C.info} />\n        <StatCard label=\"Alerts Sent\" value={s.alertsSent} icon={<Icons.Bell size={22} />} color={C.warning} />\n        <StatCard label=\"Total Members\" value={s.totalMembers.toLocaleString()} icon={<Icons.Users size={22} />} trend=\"+142\" trendUp color={C.primary} />\n      </div>\n\n      <div className=\"grid gap-6\" style={{ gridTemplateColumns: \"2fr 1fr\" }}>\n        <div className=\"bg-white border border-[#E2E8F0]\" style={{ borderRadius: 16, padding: 24 }}>\n          <h3 className=\"text-sm font-bold mb-4\" style={{ color: C.textPrimary }}>Monthly Incident Trends</h3>\n          <div className=\"flex items-end justify-between gap-3\" style={{ height: 200 }}>\n            {analyticsData.monthlyTrend.map((d, i) => (\n              <div key={i} className=\"flex flex-col items-center gap-2 flex-1\">\n                <div className=\"text-xs font-semibold\" style={{ color: C.textSecondary }}>{d.count}</div>\n                <div className=\"w-full flex items-end justify-center\" style={{ height: 140 }}>\n                  <div style={{ width: \"60%\", height: (d.count / mx) * 140 + \"px\", background: i === 6 ? C.primary : \"#E2E8F0\", borderRadius: \"6px 6px 0 0\" }} />\n                </div>\n                <div className=\"text-xs\" style={{ color: C.textTertiary }}>{d.month}</div>\n              </div>\n            ))}\n          </div>\n        </div>\n        <div className=\"bg-white border border-[#E2E8F0]\" style={{ borderRadius: 16, padding: 24 }}>\n          <h3 className=\"text-sm font-bold mb-4\" style={{ color: C.textPrimary }}>Categories</h3>\n          <div className=\"space-y-2.5\">\n            {analyticsData.categoryBreakdown.slice(0, 7).map((c, i) => (\n              <div key={i}><div className=\"flex justify-between text-xs mb-1\"><span className=\"font-medium\" style={{ color: C.textPrimary }}>{c.category}</span><span style={{ color: C.textSecondary }}>{c.count}</span></div><ProgressBar value={c.percentage * 3} color={[C.danger, C.warning, C.info, C.primary, \"#0891B2\", \"#7C3AED\", \"#DB2777\"][i % 7]} height={6} /></div>\n            ))}\n          </div>\n        </div>\n      </div>\n\n      <div className=\"grid gap-6\" style={{ gridTemplateColumns: \"1fr 1fr\" }}>\n        <div className=\"bg-white border border-[#E2E8F0]\" style={{ borderRadius: 16, padding: 24 }}>\n          <h3 className=\"text-sm font-bold mb-4\" style={{ color: C.textPrimary }}>Risk Areas</h3>\n          <div className=\"space-y-3\">\n            {analyticsData.riskAreas.map((r, i) => {\n              const col = r.riskLevel === \"high\" ? C.danger : r.riskLevel === \"medium\" ? C.warning : C.success;\n              return <div key={i} className=\"flex items-center justify-between\" style={{ padding: \"10px 14px\", borderRadius: 10, background: \"#F8F9FC\" }}>\n                <div className=\"flex items-center gap-2\"><Icons.MapPin size={14} className=\"text-[#94A3B8]\" /><span className=\"text-sm font-medium\" style={{ color: C.textPrimary }}>{r.area}</span></div>\n                <div className=\"flex items-center gap-2\"><span className=\"text-sm font-semibold\" style={{ color: C.textSecondary }}>{r.incidents}</span><span className=\"text-xs font-semibold px-2 py-0.5 rounded\" style={{ background: col + \"15\", color: col }}>{r.riskLevel}</span></div>\n              </div>;\n            })}\n          </div>\n        </div>\n        <div className=\"bg-white border border-[#E2E8F0]\" style={{ borderRadius: 16, padding: 24 }}>\n          <h3 className=\"text-sm font-bold mb-4\" style={{ color: C.textPrimary }}>Safety Scores</h3>\n          <div className=\"space-y-3\">\n            {[[\"Lekki Phase 1 RA\", 78], [\"Chevron Estate\", 85], [\"Ikoyi Watch\", 72], [\"GRA PH\", 81], [\"Trans Amadi\", 68], [\"Wuse II\", 83], [\"Maitama\", 88]].map(([n, sc]: any, i) => (\n              <div key={i}><div className=\"flex justify-between text-xs mb-1\"><span className=\"font-medium\" style={{ color: C.textPrimary }}>{n}</span><span className=\"font-semibold\" style={{ color: sc >= 80 ? C.success : sc >= 70 ? C.warning : C.danger }}>{sc}</span></div><ProgressBar value={sc} color={sc >= 80 ? C.success : sc >= 70 ? C.warning : C.danger} height={6} /></div>\n            ))}\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n}\n",[],[18,79,394],["D",1783636320055],[261,262,263,264,265,266,267,268,269,270,271],[18,79],["D",1783636320055],[260,272,274,275,276],[18],["D",1783636320055],["D",1789525245864],{"_11":12,"_186":85},{"_11":12,"_181":182,"_84":85,"_31":83,"_183":184,"_185":30},{"_42":169,"_13":16,"_36":39,"_170":131,"_171":74,"_172":173,"_174":135,"_175":176,"_177":178,"_179":14,"_180":12},"ctx",{"_55":-5,"_207":445,"_446":447,"_448":449,"_450":30,"_451":30,"_452":30,"_453":24,"_454":-5,"_455":-7,"_456":-7,"_457":26,"_458":30,"_459":30,"_460":-5,"_461":30,"_462":30,"_463":30,"_464":-5},"ENV",{"_416":417,"_418":419,"_420":16,"_421":422,"_423":424,"_425":426,"_427":428,"_429":430,"_431":432,"_433":434,"_435":436,"_437":438,"_439":440,"_441":442,"_443":444},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]
</article></body></html>

History · frontend