feat: introduce FixMate Flutter app and React dashboard
- 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
This commit is contained in:
543
lib/screens/map/map_screen.dart
Normal file
543
lib/screens/map/map_screen.dart
Normal file
@@ -0,0 +1,543 @@
|
||||
import 'dart:convert';
|
||||
import 'dart:io' show File;
|
||||
|
||||
import 'package:flutter/foundation.dart' show kIsWeb;
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_map/flutter_map.dart';
|
||||
import 'package:flutter_map_marker_cluster/flutter_map_marker_cluster.dart';
|
||||
import 'package:latlong2/latlong.dart';
|
||||
import 'package:url_launcher/url_launcher.dart';
|
||||
|
||||
import '../../l10n/i18n.dart';
|
||||
import '../../models/enums.dart';
|
||||
import '../../models/report.dart';
|
||||
import '../../services/location_service.dart';
|
||||
import '../../services/storage.dart';
|
||||
import '../../widgets/severity_badge.dart';
|
||||
import '../../widgets/status_badge.dart';
|
||||
import '../my_reports/my_reports_screen.dart';
|
||||
|
||||
/// MapScreen - displays reports on an interactive OpenStreetMap with clustering
|
||||
class MapScreen extends StatefulWidget {
|
||||
const MapScreen({super.key});
|
||||
|
||||
@override
|
||||
State<MapScreen> createState() => _MapScreenState();
|
||||
}
|
||||
|
||||
class _MapScreenState extends State<MapScreen> {
|
||||
final MapController _mapController = MapController();
|
||||
|
||||
List<Report> _allReports = [];
|
||||
List<Report> _filteredReports = [];
|
||||
bool _loading = true;
|
||||
|
||||
// In-memory filters
|
||||
Set<Category> _filterCategories = Category.all.toSet();
|
||||
Set<Severity> _filterSeverities = Severity.all.toSet();
|
||||
Set<Status> _filterStatuses = Status.all.toSet();
|
||||
DateTimeRange? _filterDateRange;
|
||||
|
||||
// Defaults
|
||||
static final LatLng _defaultCenter = LatLng(3.1390, 101.6869); // Kuala Lumpur
|
||||
static const double _defaultZoom = 13.0;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
_setDefaultDateRange();
|
||||
_refresh();
|
||||
}
|
||||
|
||||
void _setDefaultDateRange() {
|
||||
final now = DateTime.now();
|
||||
_filterDateRange = DateTimeRange(start: now.subtract(const Duration(days: 30)), end: now);
|
||||
}
|
||||
|
||||
Future<void> _refresh() async {
|
||||
setState(() => _loading = true);
|
||||
final reports = await StorageService.getReports();
|
||||
setState(() {
|
||||
_allReports = reports;
|
||||
_loading = false;
|
||||
});
|
||||
_applyFilters();
|
||||
// If we have filtered reports, fit; otherwise try device location
|
||||
if (_filteredReports.isNotEmpty) {
|
||||
WidgetsBinding.instance.addPostFrameCallback((_) => _fitToBounds());
|
||||
} else {
|
||||
await _centerOnDeviceOrDefault();
|
||||
}
|
||||
}
|
||||
|
||||
Future<void> _centerOnDeviceOrDefault() async {
|
||||
try {
|
||||
final pos = await LocationService.getBestAvailablePosition();
|
||||
if (pos != null) {
|
||||
_mapController.move(LatLng(pos.latitude, pos.longitude), _defaultZoom);
|
||||
return;
|
||||
}
|
||||
} catch (_) {}
|
||||
// fallback
|
||||
_mapController.move(_defaultCenter, _defaultZoom);
|
||||
}
|
||||
|
||||
void _applyFilters() {
|
||||
final range = _filterDateRange;
|
||||
_filteredReports = _allReports.where((r) {
|
||||
if (!_filterCategories.contains(r.category)) return false;
|
||||
if (!_filterSeverities.contains(r.severity)) return false;
|
||||
if (!_filterStatuses.contains(r.status)) return false;
|
||||
|
||||
if (range != null) {
|
||||
final created = DateTime.tryParse(r.createdAt);
|
||||
if (created == null) return false;
|
||||
// include the end day fully
|
||||
final endInclusive = DateTime(range.end.year, range.end.month, range.end.day, 23, 59, 59);
|
||||
if (created.isBefore(range.start) || created.isAfter(endInclusive)) return false;
|
||||
}
|
||||
return true;
|
||||
}).toList();
|
||||
|
||||
setState(() {});
|
||||
|
||||
if (_filteredReports.isNotEmpty) {
|
||||
WidgetsBinding.instance.addPostFrameCallback((_) => _fitToBounds());
|
||||
}
|
||||
}
|
||||
|
||||
void _fitToBounds() {
|
||||
if (_filteredReports.isEmpty) return;
|
||||
final points = _filteredReports.map((r) => LatLng(r.location.lat, r.location.lng)).toList();
|
||||
if (points.isEmpty) return;
|
||||
final bounds = LatLngBounds.fromPoints(points);
|
||||
try {
|
||||
_mapController.fitCamera(
|
||||
CameraFit.bounds(bounds: bounds, padding: const EdgeInsets.all(60)),
|
||||
);
|
||||
} catch (_) {
|
||||
// ignore
|
||||
}
|
||||
}
|
||||
|
||||
List<Marker> _buildMarkers() {
|
||||
return _filteredReports.map((r) {
|
||||
final latlng = LatLng(r.location.lat, r.location.lng);
|
||||
return Marker(
|
||||
point: latlng,
|
||||
width: 40,
|
||||
height: 40,
|
||||
child: GestureDetector(
|
||||
onTap: () => _onMarkerTap(r),
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Icon(Icons.location_on, color: r.severity.color, size: 36),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}).toList();
|
||||
}
|
||||
|
||||
void _onMarkerTap(Report r) {
|
||||
showModalBottomSheet(
|
||||
context: context,
|
||||
isScrollControlled: true,
|
||||
builder: (ctx) {
|
||||
return SafeArea(
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(16.0),
|
||||
child: Wrap(
|
||||
children: [
|
||||
Row(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
_buildThumbnail(r),
|
||||
const SizedBox(width: 12),
|
||||
Expanded(
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(I18n.t(r.category.key), style: Theme.of(context).textTheme.titleLarge),
|
||||
const SizedBox(height: 8),
|
||||
Row(children: [
|
||||
SeverityBadge(severity: r.severity, small: true),
|
||||
const SizedBox(width: 8),
|
||||
StatusBadge(status: r.status, small: true),
|
||||
]),
|
||||
const SizedBox(height: 8),
|
||||
Text('${I18n.t('label.location')}: ${r.location.lat.toStringAsFixed(6)}, ${r.location.lng.toStringAsFixed(6)}'),
|
||||
const SizedBox(height: 4),
|
||||
Text('${I18n.t('label.createdAt')}: ${r.createdAt.split('T').first}'),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
const SizedBox(height: 12),
|
||||
Row(
|
||||
mainAxisAlignment: MainAxisAlignment.end,
|
||||
children: [
|
||||
TextButton(
|
||||
onPressed: () {
|
||||
Navigator.of(ctx).pop(); // close sheet
|
||||
// Navigate to My Reports tab/screen (simplest)
|
||||
Navigator.push(context, MaterialPageRoute(builder: (_) => const MyReportsScreen()));
|
||||
ScaffoldMessenger.of(context).showSnackBar(
|
||||
SnackBar(content: Text(I18n.t('map.openedInMyReports') ?? I18n.t('nav.myReports'))),
|
||||
);
|
||||
},
|
||||
child: Text(I18n.t('btn.viewDetails')),
|
||||
),
|
||||
const SizedBox(width: 8),
|
||||
ElevatedButton(
|
||||
onPressed: () => _openExternalMap(r.location.lat, r.location.lng),
|
||||
child: Text(I18n.t('btn.openMap')),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildThumbnail(Report r) {
|
||||
final placeholder = Container(
|
||||
width: 120,
|
||||
height: 90,
|
||||
color: Colors.grey.shade200,
|
||||
alignment: Alignment.center,
|
||||
child: Icon(Icons.photo, color: Colors.grey.shade600),
|
||||
);
|
||||
|
||||
if (kIsWeb) {
|
||||
if (r.base64Photo != null && r.base64Photo!.isNotEmpty) {
|
||||
try {
|
||||
final bytes = base64Decode(r.base64Photo!);
|
||||
return Image.memory(bytes, width: 120, height: 90, fit: BoxFit.cover);
|
||||
} catch (_) {
|
||||
return placeholder;
|
||||
}
|
||||
}
|
||||
return placeholder;
|
||||
} else {
|
||||
if (r.photoPath != null && r.photoPath!.isNotEmpty) {
|
||||
final file = File(r.photoPath!);
|
||||
if (file.existsSync()) {
|
||||
return Image.file(file, width: 120, height: 90, fit: BoxFit.cover);
|
||||
}
|
||||
}
|
||||
return placeholder;
|
||||
}
|
||||
}
|
||||
|
||||
Future<void> _openExternalMap(double lat, double lng) async {
|
||||
final uri = Uri.parse('https://www.google.com/maps/search/?api=1&query=$lat,$lng');
|
||||
try {
|
||||
if (!await launchUrl(uri, mode: LaunchMode.externalApplication)) {
|
||||
ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text(I18n.t('error.openMap'))));
|
||||
}
|
||||
} catch (e) {
|
||||
ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text(I18n.t('error.openMap'))));
|
||||
}
|
||||
}
|
||||
|
||||
Future<void> _openFilterModal() async {
|
||||
// Use current filters as initial values
|
||||
final now = DateTime.now();
|
||||
Set<Category> selCategories = Set.from(_filterCategories);
|
||||
Set<Severity> selSeverities = Set.from(_filterSeverities);
|
||||
Set<Status> selStatuses = Set.from(_filterStatuses);
|
||||
DateTimeRange? selRange = _filterDateRange;
|
||||
|
||||
await showModalBottomSheet(
|
||||
context: context,
|
||||
isScrollControlled: true,
|
||||
builder: (ctx) {
|
||||
return StatefulBuilder(builder: (context, setModalState) {
|
||||
return Padding(
|
||||
padding: EdgeInsets.only(bottom: MediaQuery.of(ctx).viewInsets.bottom),
|
||||
child: SafeArea(
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(16.0),
|
||||
child: Column(mainAxisSize: MainAxisSize.min, children: [
|
||||
Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
children: [
|
||||
Text(I18n.t('btn.filter'), style: Theme.of(context).textTheme.titleMedium),
|
||||
IconButton(
|
||||
icon: const Icon(Icons.close),
|
||||
onPressed: () => Navigator.pop(ctx),
|
||||
)
|
||||
],
|
||||
),
|
||||
const SizedBox(height: 8),
|
||||
Align(alignment: Alignment.centerLeft, child: Text(I18n.t('filter.category'))),
|
||||
const SizedBox(height: 8),
|
||||
Wrap(
|
||||
spacing: 8,
|
||||
children: Category.all.map((c) {
|
||||
final selected = selCategories.contains(c);
|
||||
return FilterChip(
|
||||
label: Text(I18n.t(c.key)),
|
||||
selected: selected,
|
||||
onSelected: (v) {
|
||||
setModalState(() {
|
||||
if (v) {
|
||||
selCategories.add(c);
|
||||
} else {
|
||||
selCategories.remove(c);
|
||||
}
|
||||
});
|
||||
},
|
||||
);
|
||||
}).toList(),
|
||||
),
|
||||
const SizedBox(height: 12),
|
||||
Align(alignment: Alignment.centerLeft, child: Text(I18n.t('filter.severity'))),
|
||||
const SizedBox(height: 8),
|
||||
Wrap(
|
||||
spacing: 8,
|
||||
children: Severity.all.map((s) {
|
||||
final selected = selSeverities.contains(s);
|
||||
return FilterChip(
|
||||
label: Text(I18n.t(s.key)),
|
||||
selected: selected,
|
||||
onSelected: (v) {
|
||||
setModalState(() {
|
||||
if (v) {
|
||||
selSeverities.add(s);
|
||||
} else {
|
||||
selSeverities.remove(s);
|
||||
}
|
||||
});
|
||||
},
|
||||
);
|
||||
}).toList(),
|
||||
),
|
||||
const SizedBox(height: 12),
|
||||
Align(alignment: Alignment.centerLeft, child: Text(I18n.t('filter.status'))),
|
||||
const SizedBox(height: 8),
|
||||
Wrap(
|
||||
spacing: 8,
|
||||
children: Status.all.map((st) {
|
||||
final selected = selStatuses.contains(st);
|
||||
return FilterChip(
|
||||
label: Text(I18n.t(st.key)),
|
||||
selected: selected,
|
||||
onSelected: (v) {
|
||||
setModalState(() {
|
||||
if (v) {
|
||||
selStatuses.add(st);
|
||||
} else {
|
||||
selStatuses.remove(st);
|
||||
}
|
||||
});
|
||||
},
|
||||
);
|
||||
}).toList(),
|
||||
),
|
||||
const SizedBox(height: 12),
|
||||
Align(alignment: Alignment.centerLeft, child: Text(I18n.t('filter.dateRange'))),
|
||||
const SizedBox(height: 8),
|
||||
Row(children: [
|
||||
Expanded(
|
||||
child: OutlinedButton(
|
||||
onPressed: () async {
|
||||
final picked = await showDateRangePicker(
|
||||
context: context,
|
||||
firstDate: DateTime(2000),
|
||||
lastDate: now,
|
||||
initialDateRange: selRange ?? DateTimeRange(start: now.subtract(const Duration(days: 30)), end: now),
|
||||
);
|
||||
if (picked != null) {
|
||||
setModalState(() => selRange = picked);
|
||||
}
|
||||
},
|
||||
child: Text(selRange == null ? I18n.t('filter.dateRange') : '${selRange!.start.toLocal().toIso8601String().split('T').first} - ${selRange!.end.toLocal().toIso8601String().split('T').first}'),
|
||||
),
|
||||
),
|
||||
]),
|
||||
const SizedBox(height: 12),
|
||||
Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
children: [
|
||||
TextButton(
|
||||
onPressed: () {
|
||||
setModalState(() {
|
||||
selCategories = Category.all.toSet();
|
||||
selSeverities = Severity.all.toSet();
|
||||
selStatuses = Status.all.toSet();
|
||||
selRange = DateTimeRange(start: now.subtract(const Duration(days: 30)), end: now);
|
||||
});
|
||||
},
|
||||
child: Text(I18n.t('btn.reset')),
|
||||
),
|
||||
ElevatedButton(
|
||||
onPressed: () {
|
||||
// Apply
|
||||
setState(() {
|
||||
_filterCategories = selCategories;
|
||||
_filterSeverities = selSeverities;
|
||||
_filterStatuses = selStatuses;
|
||||
_filterDateRange = selRange;
|
||||
});
|
||||
_applyFilters();
|
||||
Navigator.pop(ctx);
|
||||
},
|
||||
child: Text(I18n.t('btn.apply')),
|
||||
),
|
||||
],
|
||||
),
|
||||
]),
|
||||
),
|
||||
),
|
||||
);
|
||||
});
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final markers = _buildMarkers();
|
||||
|
||||
return Scaffold(
|
||||
appBar: AppBar(
|
||||
title: Text(I18n.t('nav.map')),
|
||||
actions: [
|
||||
IconButton(icon: const Icon(Icons.filter_list), onPressed: _openFilterModal),
|
||||
IconButton(icon: const Icon(Icons.refresh), onPressed: _refresh),
|
||||
],
|
||||
),
|
||||
body: _loading
|
||||
? const Center(child: CircularProgressIndicator())
|
||||
: _filteredReports.isEmpty
|
||||
? Center(child: Text(I18n.t('map.noReports')))
|
||||
: Stack(
|
||||
children: [
|
||||
FlutterMap(
|
||||
mapController: _mapController,
|
||||
options: MapOptions(
|
||||
initialCenter: _filteredReports.isNotEmpty
|
||||
? LatLng(_filteredReports.first.location.lat, _filteredReports.first.location.lng)
|
||||
: _defaultCenter,
|
||||
initialZoom: _defaultZoom,
|
||||
minZoom: 3.0,
|
||||
maxZoom: 18.0,
|
||||
),
|
||||
children: [
|
||||
TileLayer(
|
||||
urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
|
||||
userAgentPackageName: 'com.example.citypulse',
|
||||
),
|
||||
if (markers.isNotEmpty)
|
||||
MarkerClusterLayerWidget(
|
||||
options: MarkerClusterLayerOptions(
|
||||
maxClusterRadius: 60,
|
||||
size: const Size(40, 40),
|
||||
markers: markers,
|
||||
spiderfyCircleRadius: 80,
|
||||
showPolygon: false,
|
||||
disableClusteringAtZoom: 16,
|
||||
builder: (context, markers) {
|
||||
return Container(
|
||||
alignment: Alignment.center,
|
||||
decoration: BoxDecoration(
|
||||
color: Theme.of(context).colorScheme.primary,
|
||||
shape: BoxShape.circle,
|
||||
),
|
||||
child: Text(
|
||||
markers.length.toString(),
|
||||
style: const TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
|
||||
),
|
||||
);
|
||||
},
|
||||
onClusterTap: (cluster) {
|
||||
try {
|
||||
final pts = cluster.markers.map((m) => m.point).toList();
|
||||
final bounds = LatLngBounds.fromPoints(pts);
|
||||
_mapController.fitCamera(
|
||||
CameraFit.bounds(bounds: bounds, padding: const EdgeInsets.all(60)),
|
||||
);
|
||||
} catch (_) {}
|
||||
},
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
// Legend overlay
|
||||
Positioned(
|
||||
top: 16,
|
||||
right: 16,
|
||||
child: Card(
|
||||
elevation: 2,
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
|
||||
child: Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
_legendItem(Severity.high, I18n.t('severity.high')),
|
||||
const SizedBox(width: 8),
|
||||
_legendItem(Severity.medium, I18n.t('severity.medium')),
|
||||
const SizedBox(width: 8),
|
||||
_legendItem(Severity.low, I18n.t('severity.low')),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _legendItem(Severity s, String label) {
|
||||
return Row(
|
||||
children: [
|
||||
Container(width: 12, height: 12, decoration: BoxDecoration(color: s.color, shape: BoxShape.circle)),
|
||||
const SizedBox(width: 6),
|
||||
Text(label, style: const TextStyle(fontSize: 12)),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/// Full screen report details used elsewhere in the app.
|
||||
class MapReportDetails extends StatelessWidget {
|
||||
final Report report;
|
||||
const MapReportDetails({super.key, required this.report});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final created = DateTime.tryParse(report.createdAt);
|
||||
return Scaffold(
|
||||
appBar: AppBar(title: Text(I18n.t('btn.details'))),
|
||||
body: SingleChildScrollView(
|
||||
padding: const EdgeInsets.all(16),
|
||||
child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
|
||||
if (kIsWeb && report.base64Photo != null)
|
||||
Image.memory(base64Decode(report.base64Photo!))
|
||||
else if (!kIsWeb && report.photoPath != null)
|
||||
Image.file(File(report.photoPath!))
|
||||
else
|
||||
Container(height: 180, color: Colors.grey.shade200, alignment: Alignment.center, child: const Icon(Icons.photo, size: 64)),
|
||||
const SizedBox(height: 12),
|
||||
Text(I18n.t(report.category.key), style: Theme.of(context).textTheme.titleLarge),
|
||||
const SizedBox(height: 8),
|
||||
Row(children: [SeverityBadge(severity: report.severity), const SizedBox(width: 8), StatusBadge(status: report.status)]),
|
||||
const SizedBox(height: 12),
|
||||
Text('${I18n.t('label.location')}: ${report.location.lat.toStringAsFixed(6)}, ${report.location.lng.toStringAsFixed(6)}'),
|
||||
const SizedBox(height: 8),
|
||||
Text('${I18n.t('label.createdAt')}: ${created != null ? created.toLocal().toString() : report.createdAt}'),
|
||||
const SizedBox(height: 8),
|
||||
if (report.notes != null) Text('${I18n.t('label.notes')}: ${report.notes}'),
|
||||
]),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
85
lib/screens/my_reports/my_reports_screen.dart
Normal file
85
lib/screens/my_reports/my_reports_screen.dart
Normal file
@@ -0,0 +1,85 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import '../../services/storage.dart';
|
||||
import '../../models/report.dart';
|
||||
import '../../widgets/report_card.dart';
|
||||
import '../map/map_screen.dart';
|
||||
import '../../l10n/i18n.dart';
|
||||
|
||||
class MyReportsScreen extends StatefulWidget {
|
||||
const MyReportsScreen({super.key});
|
||||
|
||||
@override
|
||||
State<MyReportsScreen> createState() => _MyReportsScreenState();
|
||||
}
|
||||
|
||||
class _MyReportsScreenState extends State<MyReportsScreen> {
|
||||
List<Report> _reports = [];
|
||||
bool _loading = true;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
_loadReports();
|
||||
}
|
||||
|
||||
Future<void> _loadReports() async {
|
||||
setState(() {
|
||||
_loading = true;
|
||||
});
|
||||
final reports = await StorageService.getReports();
|
||||
setState(() {
|
||||
_reports = reports.reversed.toList(); // newest first
|
||||
_loading = false;
|
||||
});
|
||||
}
|
||||
|
||||
void _onViewReport(Report r) {
|
||||
Navigator.push(
|
||||
context,
|
||||
MaterialPageRoute(builder: (_) => MapReportDetails(report: r)),
|
||||
);
|
||||
}
|
||||
|
||||
void _onDeleted() async {
|
||||
await _loadReports();
|
||||
}
|
||||
|
||||
void _onUpdated(Report updated) async {
|
||||
await _loadReports();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
appBar: AppBar(
|
||||
title: Text(I18n.t('nav.myReports')),
|
||||
actions: [
|
||||
IconButton(
|
||||
icon: const Icon(Icons.refresh),
|
||||
onPressed: _loadReports,
|
||||
)
|
||||
],
|
||||
),
|
||||
body: _loading
|
||||
? const Center(child: CircularProgressIndicator())
|
||||
: _reports.isEmpty
|
||||
? Center(child: Text(I18n.t('map.noReports')))
|
||||
: RefreshIndicator(
|
||||
onRefresh: _loadReports,
|
||||
child: ListView.builder(
|
||||
padding: const EdgeInsets.symmetric(vertical: 8),
|
||||
itemCount: _reports.length,
|
||||
itemBuilder: (context, index) {
|
||||
final r = _reports[index];
|
||||
return ReportCard(
|
||||
report: r,
|
||||
onView: () => _onViewReport(r),
|
||||
onDeleted: _onDeleted,
|
||||
onUpdated: _onUpdated,
|
||||
);
|
||||
},
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
166
lib/screens/report_flow/capture_screen.dart
Normal file
166
lib/screens/report_flow/capture_screen.dart
Normal file
@@ -0,0 +1,166 @@
|
||||
import 'dart:io';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:image_picker/image_picker.dart';
|
||||
import '../../l10n/i18n.dart';
|
||||
import '../../services/location_service.dart';
|
||||
import '../../services/mock_ai.dart';
|
||||
import '../../models/report.dart';
|
||||
import '../../models/enums.dart';
|
||||
import 'review_screen.dart';
|
||||
|
||||
class CaptureScreen extends StatefulWidget {
|
||||
const CaptureScreen({super.key});
|
||||
|
||||
@override
|
||||
State<CaptureScreen> createState() => _CaptureScreenState();
|
||||
}
|
||||
|
||||
class _CaptureScreenState extends State<CaptureScreen> {
|
||||
final ImagePicker _picker = ImagePicker();
|
||||
bool _isLoading = false;
|
||||
|
||||
Future<void> _pickImage(ImageSource source) async {
|
||||
setState(() {
|
||||
_isLoading = true;
|
||||
});
|
||||
|
||||
try {
|
||||
final XFile? image = await _picker.pickImage(
|
||||
source: source,
|
||||
maxWidth: 1920,
|
||||
maxHeight: 1080,
|
||||
imageQuality: 85,
|
||||
);
|
||||
|
||||
if (image != null) {
|
||||
await _processImage(image, source);
|
||||
}
|
||||
} catch (e) {
|
||||
if (mounted) {
|
||||
ScaffoldMessenger.of(context).showSnackBar(
|
||||
SnackBar(content: Text('Error picking image: $e')),
|
||||
);
|
||||
}
|
||||
} finally {
|
||||
if (mounted) {
|
||||
setState(() {
|
||||
_isLoading = false;
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Future<void> _processImage(XFile image, ImageSource source) async {
|
||||
try {
|
||||
// Get current position (Geolocator.Position)
|
||||
final position = await LocationService.getCurrentPosition();
|
||||
|
||||
if (position == null) {
|
||||
if (mounted) {
|
||||
ScaffoldMessenger.of(context).showSnackBar(
|
||||
const SnackBar(content: Text('Unable to get location. Please try again.')),
|
||||
);
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
// Convert Position -> LocationData (app model)
|
||||
final locationData = LocationService.positionToLocationData(position);
|
||||
|
||||
// Generate AI suggestion (seeded deterministic)
|
||||
final aiSuggestion = MockAIService.generateSuggestion(
|
||||
id: DateTime.now().millisecondsSinceEpoch.toString(),
|
||||
createdAt: DateTime.now().toIso8601String(),
|
||||
lat: locationData.lat,
|
||||
lng: locationData.lng,
|
||||
photoSizeBytes: await image.length(),
|
||||
);
|
||||
|
||||
// Create report with AI suggestion
|
||||
final report = Report(
|
||||
id: DateTime.now().millisecondsSinceEpoch.toString(),
|
||||
category: aiSuggestion.category,
|
||||
severity: aiSuggestion.severity,
|
||||
status: Status.submitted,
|
||||
photoPath: image.path,
|
||||
base64Photo: null, // Will be set on Web
|
||||
location: locationData,
|
||||
createdAt: DateTime.now().toIso8601String(),
|
||||
updatedAt: DateTime.now().toIso8601String(),
|
||||
deviceId: 'device_${DateTime.now().millisecondsSinceEpoch}',
|
||||
notes: null,
|
||||
address: null,
|
||||
source: source == ImageSource.camera ? 'camera' : 'gallery',
|
||||
editable: true,
|
||||
deletable: true,
|
||||
aiSuggestion: aiSuggestion,
|
||||
schemaVersion: 1,
|
||||
);
|
||||
|
||||
if (mounted) {
|
||||
Navigator.push(
|
||||
context,
|
||||
MaterialPageRoute(
|
||||
builder: (context) => ReviewScreen(report: report, imageFile: File(image.path)),
|
||||
),
|
||||
);
|
||||
}
|
||||
} catch (e) {
|
||||
if (mounted) {
|
||||
ScaffoldMessenger.of(context).showSnackBar(
|
||||
SnackBar(content: Text('Error processing image: $e')),
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
appBar: AppBar(
|
||||
title: Text(I18n.t('nav.report')),
|
||||
),
|
||||
body: Padding(
|
||||
padding: const EdgeInsets.all(16.0),
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
Text(
|
||||
'Take a photo of the issue',
|
||||
style: Theme.of(context).textTheme.headlineSmall,
|
||||
textAlign: TextAlign.center,
|
||||
),
|
||||
const SizedBox(height: 32),
|
||||
if (_isLoading)
|
||||
const CircularProgressIndicator()
|
||||
else ...[
|
||||
SizedBox(
|
||||
width: double.infinity,
|
||||
child: ElevatedButton.icon(
|
||||
onPressed: () => _pickImage(ImageSource.camera),
|
||||
icon: const Icon(Icons.camera_alt),
|
||||
label: Text(I18n.t('btn.camera')),
|
||||
style: ElevatedButton.styleFrom(
|
||||
padding: const EdgeInsets.symmetric(vertical: 16),
|
||||
),
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
SizedBox(
|
||||
width: double.infinity,
|
||||
child: OutlinedButton.icon(
|
||||
onPressed: () => _pickImage(ImageSource.gallery),
|
||||
icon: const Icon(Icons.photo_library),
|
||||
label: Text(I18n.t('btn.gallery')),
|
||||
style: OutlinedButton.styleFrom(
|
||||
padding: const EdgeInsets.symmetric(vertical: 16),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
289
lib/screens/report_flow/review_screen.dart
Normal file
289
lib/screens/report_flow/review_screen.dart
Normal file
@@ -0,0 +1,289 @@
|
||||
import 'dart:io';
|
||||
import 'package:flutter/material.dart';
|
||||
import '../../l10n/i18n.dart';
|
||||
import '../../models/report.dart';
|
||||
import '../../models/enums.dart';
|
||||
import '../../services/storage.dart';
|
||||
|
||||
class ReviewScreen extends StatefulWidget {
|
||||
final Report report;
|
||||
final File imageFile;
|
||||
|
||||
const ReviewScreen({
|
||||
super.key,
|
||||
required this.report,
|
||||
required this.imageFile,
|
||||
});
|
||||
|
||||
@override
|
||||
State<ReviewScreen> createState() => _ReviewScreenState();
|
||||
}
|
||||
|
||||
class _ReviewScreenState extends State<ReviewScreen> {
|
||||
late Category _selectedCategory;
|
||||
late Severity _selectedSeverity;
|
||||
late TextEditingController _notesController;
|
||||
bool _isSubmitting = false;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
_selectedCategory = widget.report.category;
|
||||
_selectedSeverity = widget.report.severity;
|
||||
_notesController = TextEditingController(text: widget.report.notes ?? '');
|
||||
}
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
_notesController.dispose();
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
Future<void> _submitReport() async {
|
||||
setState(() {
|
||||
_isSubmitting = true;
|
||||
});
|
||||
|
||||
try {
|
||||
// Update report with user selections
|
||||
final updatedReport = widget.report.copyWith(
|
||||
category: _selectedCategory,
|
||||
severity: _selectedSeverity,
|
||||
notes: _notesController.text.isEmpty ? null : _notesController.text,
|
||||
updatedAt: DateTime.now().toIso8601String(),
|
||||
);
|
||||
|
||||
// Save to storage
|
||||
await StorageService.saveReport(updatedReport);
|
||||
|
||||
if (mounted) {
|
||||
ScaffoldMessenger.of(context).showSnackBar(
|
||||
SnackBar(content: Text(I18n.t('toast.reportSaved'))),
|
||||
);
|
||||
|
||||
// Navigate back to main screen
|
||||
Navigator.of(context).popUntil((route) => route.isFirst);
|
||||
}
|
||||
} catch (e) {
|
||||
if (mounted) {
|
||||
ScaffoldMessenger.of(context).showSnackBar(
|
||||
SnackBar(content: Text('Error saving report: $e')),
|
||||
);
|
||||
}
|
||||
} finally {
|
||||
if (mounted) {
|
||||
setState(() {
|
||||
_isSubmitting = false;
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
appBar: AppBar(
|
||||
title: Text(I18n.t('btn.submit')),
|
||||
actions: [
|
||||
TextButton(
|
||||
onPressed: _isSubmitting ? null : _submitReport,
|
||||
child: _isSubmitting
|
||||
? const SizedBox(
|
||||
width: 20,
|
||||
height: 20,
|
||||
child: CircularProgressIndicator(strokeWidth: 2),
|
||||
)
|
||||
: Text(I18n.t('btn.submit')),
|
||||
),
|
||||
],
|
||||
),
|
||||
body: SingleChildScrollView(
|
||||
padding: const EdgeInsets.all(16),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
// Image preview
|
||||
Container(
|
||||
height: 200,
|
||||
width: double.infinity,
|
||||
decoration: BoxDecoration(
|
||||
border: Border.all(color: Colors.grey),
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
),
|
||||
child: Image.file(
|
||||
widget.imageFile,
|
||||
fit: BoxFit.cover,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 24),
|
||||
|
||||
// AI Suggestion Card
|
||||
Card(
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(16),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Row(
|
||||
children: [
|
||||
Icon(
|
||||
Icons.lightbulb,
|
||||
color: Theme.of(context).primaryColor,
|
||||
),
|
||||
const SizedBox(width: 8),
|
||||
Text(
|
||||
I18n.t('label.aiSuggestion'),
|
||||
style: Theme.of(context).textTheme.titleMedium,
|
||||
),
|
||||
],
|
||||
),
|
||||
const SizedBox(height: 12),
|
||||
Row(
|
||||
children: [
|
||||
_buildSuggestionChip(
|
||||
widget.report.aiSuggestion.category.displayName,
|
||||
Colors.blue.shade100,
|
||||
),
|
||||
const SizedBox(width: 8),
|
||||
_buildSuggestionChip(
|
||||
widget.report.aiSuggestion.severity.displayName,
|
||||
_getSeverityColor(widget.report.aiSuggestion.severity),
|
||||
),
|
||||
const SizedBox(width: 8),
|
||||
_buildSuggestionChip(
|
||||
'${(widget.report.aiSuggestion.confidence * 100).round()}%',
|
||||
Colors.grey.shade100,
|
||||
),
|
||||
],
|
||||
),
|
||||
const SizedBox(height: 12),
|
||||
Row(
|
||||
children: [
|
||||
Expanded(
|
||||
child: ElevatedButton(
|
||||
onPressed: () {
|
||||
setState(() {
|
||||
_selectedCategory = widget.report.aiSuggestion.category;
|
||||
_selectedSeverity = widget.report.aiSuggestion.severity;
|
||||
});
|
||||
},
|
||||
child: Text(I18n.t('btn.useSuggestion')),
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 8),
|
||||
Expanded(
|
||||
child: OutlinedButton(
|
||||
onPressed: () {
|
||||
// Keep manual selections
|
||||
},
|
||||
child: Text(I18n.t('btn.keepManual')),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 24),
|
||||
|
||||
// Category Selection
|
||||
Text(
|
||||
I18n.t('label.category'),
|
||||
style: Theme.of(context).textTheme.titleMedium,
|
||||
),
|
||||
const SizedBox(height: 8),
|
||||
Wrap(
|
||||
spacing: 8,
|
||||
children: Category.values.map((category) {
|
||||
return ChoiceChip(
|
||||
label: Text(category.displayName),
|
||||
selected: _selectedCategory == category,
|
||||
onSelected: (selected) {
|
||||
if (selected) {
|
||||
setState(() {
|
||||
_selectedCategory = category;
|
||||
});
|
||||
}
|
||||
},
|
||||
);
|
||||
}).toList(),
|
||||
),
|
||||
const SizedBox(height: 24),
|
||||
|
||||
// Severity Selection
|
||||
Text(
|
||||
I18n.t('label.severity'),
|
||||
style: Theme.of(context).textTheme.titleMedium,
|
||||
),
|
||||
const SizedBox(height: 8),
|
||||
Wrap(
|
||||
spacing: 8,
|
||||
children: Severity.values.map((severity) {
|
||||
return ChoiceChip(
|
||||
label: Text(severity.displayName),
|
||||
selected: _selectedSeverity == severity,
|
||||
onSelected: (selected) {
|
||||
if (selected) {
|
||||
setState(() {
|
||||
_selectedSeverity = severity;
|
||||
});
|
||||
}
|
||||
},
|
||||
);
|
||||
}).toList(),
|
||||
),
|
||||
const SizedBox(height: 24),
|
||||
|
||||
// Notes
|
||||
Text(
|
||||
I18n.t('label.notes'),
|
||||
style: Theme.of(context).textTheme.titleMedium,
|
||||
),
|
||||
const SizedBox(height: 8),
|
||||
TextField(
|
||||
controller: _notesController,
|
||||
decoration: InputDecoration(
|
||||
hintText: 'Add any additional notes...',
|
||||
border: const OutlineInputBorder(),
|
||||
),
|
||||
maxLines: 3,
|
||||
),
|
||||
const SizedBox(height: 24),
|
||||
|
||||
// Location info
|
||||
Text(
|
||||
I18n.t('label.location'),
|
||||
style: Theme.of(context).textTheme.titleMedium,
|
||||
),
|
||||
const SizedBox(height: 8),
|
||||
Text(
|
||||
'Lat: ${widget.report.location.lat.toStringAsFixed(6)}, '
|
||||
'Lng: ${widget.report.location.lng.toStringAsFixed(6)}',
|
||||
),
|
||||
if (widget.report.location.accuracy != null)
|
||||
Text('Accuracy: ${widget.report.location.accuracy!.toStringAsFixed(1)}m'),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildSuggestionChip(String label, Color color) {
|
||||
return Chip(
|
||||
label: Text(label),
|
||||
backgroundColor: color,
|
||||
);
|
||||
}
|
||||
|
||||
Color _getSeverityColor(Severity severity) {
|
||||
switch (severity) {
|
||||
case Severity.high:
|
||||
return Colors.red.shade100;
|
||||
case Severity.medium:
|
||||
return Colors.orange.shade100;
|
||||
case Severity.low:
|
||||
return Colors.green.shade100;
|
||||
}
|
||||
}
|
||||
}
|
||||
134
lib/screens/settings/settings_screen.dart
Normal file
134
lib/screens/settings/settings_screen.dart
Normal file
@@ -0,0 +1,134 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:provider/provider.dart';
|
||||
import '../../l10n/i18n.dart';
|
||||
import '../../l10n/locale_provider.dart';
|
||||
import '../../services/storage.dart';
|
||||
|
||||
class SettingsScreen extends StatefulWidget {
|
||||
const SettingsScreen({super.key});
|
||||
|
||||
@override
|
||||
State<SettingsScreen> createState() => _SettingsScreenState();
|
||||
}
|
||||
|
||||
class _SettingsScreenState extends State<SettingsScreen> {
|
||||
StorageStats? _stats;
|
||||
bool _loadingStats = true;
|
||||
bool _clearing = false;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
_loadStats();
|
||||
}
|
||||
|
||||
Future<void> _loadStats() async {
|
||||
setState(() {
|
||||
_loadingStats = true;
|
||||
});
|
||||
final stats = await StorageService.getStorageStats();
|
||||
if (mounted) {
|
||||
setState(() {
|
||||
_stats = stats;
|
||||
_loadingStats = false;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
Future<void> _confirmAndClearAll(BuildContext context) async {
|
||||
final confirmed = await showDialog<bool>(
|
||||
context: context,
|
||||
builder: (ctx) => AlertDialog(
|
||||
title: Text(I18n.t('confirm.clearData.title')),
|
||||
content: Text(I18n.t('confirm.clearData.message')),
|
||||
actions: [
|
||||
TextButton(onPressed: () => Navigator.pop(ctx, false), child: Text(I18n.t('btn.no'))),
|
||||
TextButton(onPressed: () => Navigator.pop(ctx, true), child: Text(I18n.t('btn.yes'))),
|
||||
],
|
||||
),
|
||||
);
|
||||
|
||||
if (confirmed == true) {
|
||||
setState(() {
|
||||
_clearing = true;
|
||||
});
|
||||
final ok = await StorageService.clearAllReports();
|
||||
setState(() {
|
||||
_clearing = false;
|
||||
});
|
||||
if (ok) {
|
||||
await _loadStats();
|
||||
if (mounted) {
|
||||
ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text(I18n.t('toast.storageCleared'))));
|
||||
}
|
||||
} else {
|
||||
if (mounted) {
|
||||
ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text('Failed to clear data')));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final localeProvider = Provider.of<LocaleProvider>(context);
|
||||
final isEnglish = localeProvider.isEnglish;
|
||||
|
||||
return Scaffold(
|
||||
appBar: AppBar(
|
||||
title: Text(I18n.t('nav.settings')),
|
||||
),
|
||||
body: ListView(
|
||||
padding: const EdgeInsets.all(16),
|
||||
children: [
|
||||
ListTile(
|
||||
title: Text(I18n.t('settings.language')),
|
||||
subtitle: Text(isEnglish ? I18n.t('lang.en') : I18n.t('lang.ms')),
|
||||
trailing: Switch(
|
||||
value: isEnglish,
|
||||
onChanged: (v) async {
|
||||
// toggle language and reload translations
|
||||
if (v) {
|
||||
await localeProvider.setEnglish();
|
||||
} else {
|
||||
await localeProvider.setMalay();
|
||||
}
|
||||
await I18n.init(localeProvider.locale);
|
||||
// Force rebuild
|
||||
setState(() {});
|
||||
},
|
||||
),
|
||||
),
|
||||
const Divider(),
|
||||
ListTile(
|
||||
title: Text(I18n.t('settings.theme')),
|
||||
subtitle: Text(I18n.t('settings.theme.light')),
|
||||
trailing: const Icon(Icons.light_mode),
|
||||
enabled: false,
|
||||
),
|
||||
const Divider(),
|
||||
ListTile(
|
||||
title: Text(I18n.t('settings.diagnostics')),
|
||||
subtitle: _loadingStats
|
||||
? const Text('Loading...')
|
||||
: Text('${I18n.t('toast.reportSaved')}: ${_stats?.reportCount ?? 0} • ${_stats?.formattedPhotoSize ?? "0 B"}'),
|
||||
),
|
||||
const SizedBox(height: 8),
|
||||
ElevatedButton.icon(
|
||||
onPressed: _clearing ? null : () => _confirmAndClearAll(context),
|
||||
icon: const Icon(Icons.delete_forever),
|
||||
label: _clearing ? const SizedBox(width: 16, height: 16, child: CircularProgressIndicator(strokeWidth: 2)) : Text(I18n.t('btn.clearAll')),
|
||||
style: ElevatedButton.styleFrom(backgroundColor: Colors.red),
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
Text('App', style: Theme.of(context).textTheme.titleMedium),
|
||||
const SizedBox(height: 8),
|
||||
ListTile(
|
||||
title: Text(I18n.t('app.name')),
|
||||
subtitle: Text('v1.0.0'),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user