\n \n

Loading Watchly…

\n \n \n \n\n",[],[184,244],"49f36825-b5e0-4700-b59b-520b8219244a","favicon.svg","019f4902-5fa0-75aa-989f-f8c37c5e332d",3,["D",1783636373595],"\n",[],[184,252],["D",1783636575746],[],[184,81,66],["D",1783636549929],[215],[184,81],"91b78c80-56c7-4001-a7c2-ec048158932a","ui.tsx","be10f298-7be6-11f1-ad82-1607ee4eb77e","019f4902-5fa0-75aa-989f-f6816c56812d",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",[],[184,274,266],"components","44862aa0-d08a-44f6-b753-5aafc127771c","icons.tsx","40fb8cc8-7be6-11f1-b92c-1607ee4eb77e",4,["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",[],[184,274,276],"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",[],[184,274,284],"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",[],[184,274,292],"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",[],[184,274,300],"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",[],[184,274,308],"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",[],[184,274,316],"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",[],[184,274,324],"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",[],[184,274,332],"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",[],[184,274,340],"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",[],[184,274,348],"3ca483ee-07cf-4865-957c-a317a8197bcf",["D",1783636320055],[203,204,205,206,207,208,209,210,211,212,213],[184,274],"02a52b5e-4774-4025-ab41-3d1d4120bd59",["D",1783636320055],[202,214,216,217,218],[184],["D",1783636320055],["D",1789525245864],{"_11":12,"_141":72},{"_11":12,"_136":137,"_71":72,"_31":70,"_138":139,"_140":30},{"_40":123,"_13":16,"_34":37,"_124":84,"_125":126,"_127":128,"_129":89,"_130":131,"_132":133,"_134":14,"_135":12},"ctx",{"_54":-5,"_162":401,"_402":403,"_404":405,"_406":30,"_407":30,"_408":30,"_409":24,"_410":-5,"_411":-7,"_412":-7,"_413":26,"_414":30,"_415":30,"_416":-5,"_417":30,"_418":30,"_419":30,"_420":-5},"ENV",{"_372":373,"_374":375,"_376":16,"_377":378,"_379":380,"_381":382,"_383":384,"_385":386,"_387":388,"_389":390,"_391":392,"_393":394,"_395":396,"_397":398,"_399":400},"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 · data