Zahar
6518df8ac1
- Add Flutter app shell (FixMateApp/MainScreen) with tabs: Report, Map, My Reports, Settings - Implement capture and review flow (image_picker, geolocator, deterministic mock AI), and local storage (SharedPreferences + photo files on mobile) - Build Map screen with flutter_map, marker clustering, filters, legend, marker details, and external maps deeplink - Add My Reports list (view details, cycle status, delete) and Settings (language toggle via Provider, diagnostics, clear all data) - Introduce JSON i18n loader and LocaleProvider; add EN/BM assets - Define models (Report, enums) and UI badges (severity, status) - Add static React dashboard (Leaflet map with clustering, heatmap toggle, filters incl. date range, queue, detail drawer), i18n (EN/BM), and demo data - Update build/config and platform setup: - Extend pubspec with required packages and register i18n assets - Android: add CAMERA and location permissions; pin NDK version - iOS: add usage descriptions for camera, photo library, location - Gradle properties tuned for Windows/UNC stability - Register desktop plugins (Linux/macOS/Windows) - .gitignore: ignore .kilocode - Overhaul README and replace sample widget test
67 lines
3.8 KiB
Markdown
67 lines
3.8 KiB
Markdown
# 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/app.dart:1)
|
|
- [lib/screens/report_flow/capture_screen.dart](lib/screens/report_flow/capture_screen.dart:1)
|
|
- [lib/screens/map/map_screen.dart](lib/screens/map/map_screen.dart:1)
|
|
- [lib/screens/my_reports/my_reports_screen.dart](lib/screens/my_reports/my_reports_screen.dart:1)
|
|
- [lib/screens/settings/settings_screen.dart](lib/screens/settings/settings_screen.dart:1)
|
|
- [lib/services/storage.dart](lib/services/storage.dart:1), [lib/services/mock_ai.dart](lib/services/mock_ai.dart:1), [lib/services/location_service.dart](lib/services/location_service.dart:1)
|
|
- [lib/models/report.dart](lib/models/report.dart:1), [lib/models/enums.dart](lib/models/enums.dart:1)
|
|
- [assets/lang/en.json](assets/lang/en.json:1), [assets/lang/ms.json](assets/lang/ms.json:1)
|
|
- Dashboard files:
|
|
- [dashboard/index.html](dashboard/index.html:1), [dashboard/app.js](dashboard/app.js:1), [dashboard/styles.css](dashboard/styles.css:1)
|
|
- [dashboard/i18n/en.json](dashboard/i18n/en.json:1), [dashboard/i18n/ms.json](dashboard/i18n/ms.json:1)
|
|
- [dashboard/data/demo-reports.json](dashboard/data/demo-reports.json:1)
|
|
|
|
## 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](lib/services/storage.dart:1)).
|
|
|
|
## 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. |