FixMate — Front-end (Flutter & React Dashboard)

Overview

• FixMate is a citizen maintenance reporter used to quickly capture and track community issues during a hackathon-style demo.
• This repository contains front-end only implementations: a Flutter mobile/web app and a static React dashboard.
• There is no backend. AI is simulated deterministically. Data is stored locally or loaded from demo JSON.

Features implemented

• Flutter app tabs: Report, Map, My Reports, Settings (bilingual EN/BM)
• Capture flow: camera/gallery, GPS, deterministic mock AI, local storage
• Map: OSM via flutter_map with clustering, filters, marker details, legend, external maps link
• My Reports: list/detail with status cycle and delete
• Settings: language toggle and clear data
• React dashboard: filters, clustered map, queue, drawer, stats, heatmap toggle

Tech stack

• Flutter packages: flutter_map, flutter_map_marker_cluster, latlong2, geolocator, image_picker, path_provider, shared_preferences, uuid, url_launcher, provider
• Dashboard: React 18 UMD, Leaflet + markercluster (+ optional heat), Day.js

Project structure

• Key Flutter files:
  • lib/app.dart
  • lib/screens/report_flow/capture_screen.dart
  • lib/screens/map/map_screen.dart
  • lib/screens/my_reports/my_reports_screen.dart
  • lib/screens/settings/settings_screen.dart
  • lib/services/storage.dart, lib/services/mock_ai.dart, lib/services/location_service.dart
  • lib/models/report.dart, lib/models/enums.dart
  • assets/lang/en.json, assets/lang/ms.json
• Dashboard files:
  • dashboard/index.html, dashboard/app.js, dashboard/styles.css
  • dashboard/i18n/en.json, dashboard/i18n/ms.json
  • dashboard/data/demo-reports.json

Running the Flutter app

• Prerequisites: Flutter stable installed and a device/emulator or Chrome for web.
• Commands:
  • flutter pub get
  • flutter run (or flutter run -d chrome)
• Notes:
  • Android/iOS will prompt for camera and location permissions.
  • On the web, geolocation and camera require HTTPS; some browsers restrict camera on http.
  • Photos are stored as base64 on web; on mobile, images are saved to app storage and paths are persisted (see lib/services/storage.dart).

Running the React dashboard

• Serve the dashboard folder over HTTP (e.g., VSCode Live Server or Python):
  • cd dashboard && python -m http.server 8000
• Open http://127.0.0.1:8000 in a browser (or your Live Server URL).
• Behavior:
  • Language toggle persists using localStorage.
  • Filters drive the clustered Leaflet map, queue, drawer, stats, and optional heatmap overlay.

Known limitations

• No backend; all data is local or demo JSON.
• AI is simulated; severity/category are heuristic and not model-driven.
• Dashboard UI state is not persisted; a refresh resets filters and selections.
• OpenStreetMap tile usage is subject to their terms and rate limits.

Visual tokens

• Severity colors: High #D32F2F, Medium #F57C00, Low #388E3C
• Status colors: Submitted #1976D2, In Progress #7B1FA2, Fixed #455A64

License

• Placeholder: add a LICENSE file or specify licensing before distribution.

Acknowledgements

• OpenStreetMap, Leaflet, flutter_map and community plugins, React, Day.js, Flutter community.