citypulse/dashboard

FixMate Dashboard

A modern, responsive dashboard for managing civic issue reports with an interactive map interface.

Features

• Interactive Map: View reported issues on an interactive Leaflet map with clustering
• Advanced Filtering: Filter by category, severity, status, and date range
• Real-time Updates: Live status updates and filtering
• Responsive Design: Works seamlessly on desktop, tablet, and mobile devices
• Modern UI: Clean, professional interface with smooth animations
• Accessibility: Keyboard navigation and screen reader friendly
• Multi-language: Support for English and Bahasa Malaysia

UI Improvements Made

🎨 Modern Design System

• Color Palette: Updated with modern semantic colors and CSS custom properties
• Typography: Inter font family for better readability
• Spacing: Consistent spacing system using CSS custom properties
• Shadows: Subtle shadows and depth for better visual hierarchy

🔧 Enhanced Components

• Header: Modern sticky header with improved branding and language selector
• Filter Panel: Organized filter groups with hover states and better visual feedback
• Ticket Cards: Modern card design with hover effects and improved typography
• Map Container: Better map styling with loading states and empty state handling
• Detail Drawer: Slide-out drawer with improved layout and actions

📱 Responsive Design

• Mobile-first: Optimized layouts for mobile, tablet, and desktop
• Flexible Grid: CSS Grid layout that adapts to screen size
• Touch-friendly: Larger touch targets for mobile interactions

⚡ Performance & UX

• Loading States: Skeleton screens and loading indicators
• Smooth Animations: CSS transitions for better user experience
• Error Handling: Better error states and retry mechanisms
• Offline Support: Graceful handling when backend is unavailable

Technology Stack

• Frontend: React 18, JavaScript ES6+
• Styling: Modern CSS with custom properties (CSS variables)
• Maps: Leaflet with marker clustering
• Build: No build process - runs directly in browser
• Fonts: Google Fonts (Inter)

Getting Started

1. Start the Backend:

   cd backend
   python main.py
   

2. Open the Dashboard: Open index.html in your web browser, or serve it with a local server:

   # Using Python
   python -m http.server 8000
   
   # Using Node.js
   npx serve .
   

3. Access: Navigate to http://localhost:8000/dashboard/

Project Structure

dashboard/
├── index.html          # Main HTML file
├── styles.css          # Modern CSS styles
├── app.js              # React application
├── i18n/               # Internationalization files
│   ├── en.json
│   └── ms.json
└── data/
    └── demo-reports.json # Sample data for testing

Key Features

Map View

• Interactive Leaflet map with OpenStreetMap tiles
• Clustered markers for better performance
• Click markers to view details
• Heatmap overlay option

Filtering System

• Category filtering (pothole, streetlight, signage, etc.)
• Severity levels (high, medium, low)
• Status tracking (submitted, in progress, fixed)
• Date range filtering

Ticket Management

• View all reported issues in a scrollable list
• Click to navigate to location on map
• Update status directly from the list
• Detailed view in slide-out drawer

Responsive Breakpoints

• Desktop: 1200px+
• Tablet: 900px - 1200px
• Mobile: 600px - 900px
• Small Mobile: < 600px

Customization

The design system is built with CSS custom properties, making it easy to customize:

:root {
  --primary-500: #0ea5a4;    /* Main brand color */
  --severity-high: #dc2626;  /* High priority color */
  --spacing-4: 1rem;         /* Base spacing unit */
  --radius: 0.5rem;          /* Border radius */
}

Browser Support

• Chrome 90+
• Firefox 88+
• Safari 14+
• Edge 90+

License

This project is part of the FixMate civic engagement platform.