Citizen View
ReportForm.jsx
Mobile-first form component for submitting civic issues
Tap to upload photo
ReportList.jsx
List view of user-submitted reports
Pothole on Main St
Large pothole near traffic light
Street Light Outage
Dark street corner at night
ReportMap.jsx
Interactive map showing reported issues as markers
Interactive map placeholder
Admin View
Dashboard.jsx
Main admin panel with key metrics and overview
247
Total Reports
89
Pending
142
Resolved
16
High Priority
IssueTable.jsx
Table view of reported issues with status tracking
| ID | Title | Category | Status | Priority | Actions |
|---|---|---|---|---|---|
| #001 | Pothole on Main St | Infrastructure | Pending | Medium | |
| #002 | Street Light Broken | Utilities | Resolved | High |
Filters.jsx
Filter issues by category, location, or priority
Shared Components
Navbar.jsx
Responsive navigation component for both views
Civic Reporter
Features:
- • Mobile responsive hamburger menu
- • Active route highlighting
- • Smooth transitions
Sidebar.jsx
Collapsible sidebar for admin view
Admin Panel
Features:
- • Collapsible on mobile
- • Persistent state
- • Icon support
StatusBadge.jsx
Reusable status indicators
Pending
Waiting for review
In Progress
Currently being handled
Resolved
Issue completed
High Priority
Urgent attention needed
Features:
- • Multiple color variants
- • Size options (sm, md, lg)
- • Clickable with tooltips
Context Setup
ReportContext.jsx
React Context API for global report management
// ReportContext.jsx
import { createContext, useState } from 'react';
export const ReportContext = createContext();
export const ReportProvider = ({ children }) => {
const [reports, setReports] = useState([]);
const [loading, setLoading] = useState(false);
const addReport = (report) => {
setReports(prev => [...prev, report]);
};
return (...);
};
Key Features:
- • Centralized state management
- • Real-time updates
- • Persistence layer
useReports.js
Custom hook for report operations
// useReports.js
import { useContext } from 'react';
import { ReportContext } from './ReportContext';
export const useReports = () => {
const context = useContext(ReportContext);
if (!context) {
throw new Error('useReports must be used within ReportProvider');
}
return context;
};
Usage:
- • const { reports } = useReports()
- • const { addReport } = useReports()
- • Simplified component integration
reports.json
Mock data structure for development
// reports.json
[
{
"id": "rpt_001",
"title": "Pothole on Main St",
"description": "Large pothole near intersection",
"category": "infrastructure",
"priority": "medium",
"status": "pending",
"location": {
"lat": 40.7128,
"lng": -74.0060
},
"photos": ["photo1.jpg"],
"createdAt": "2024-01-15T10:30:00Z"
}
]
font-mono text-green-600 space-y-1g text-sm">
- NO DATA-3">
- •
• Reusable component">
• Reusable status-1">Use PWA Features
••• 2xl font-medium">@D0
examples:
0; text-white rounded-lg font-mono text-sm">import React app-crop=
...
serviceWorker.js
Offline caching and background sync
// serviceWorker.js
const CACHE_NAME = 'civic-app-v1';
const urlsToCache = [
'/',
'/static/js/bundle.js',
'/manifest.json'
];
self.addEventListener('install', event => {
event.waitUntil(
caches.open(CACHE_NAME)
.then(cache => cache.addAll(urlsToCache))
);
});
Features:
- • Offline mode support
- • Background sync
- • Push notifications
manifest.json
PWA configuration for install prompt
// manifest.json
{
"name": "Civic Issue Reporter",
"short_name": "CivicReporter",
"description": "Report civic issues easily",
"start_url": "/",
"display": "standalone",
"theme_color": "#2563eb",
"icons": [...]
}
Features:
- • Home screen installation
- • Splash screen
- • App-like experience
PWA Benefits
Enhanced user experience features
Offline Access
Report issues without internet
Push Notifications
Get updates on your reports
Fast Loading
Instant performance on mobile