ionic-planb-logistic-app-fl.../lib/pages/deliveries_page.dart

729 lines
24 KiB
Dart

import 'dart:io';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import '../l10n/app_localizations.dart';
import 'package:url_launcher/url_launcher.dart';
import 'package:image_picker/image_picker.dart';
import 'package:http/http.dart' as http;
import '../models/delivery.dart';
import '../providers/providers.dart';
import '../api/client.dart';
import '../api/openapi_config.dart';
import '../models/delivery_commands.dart';
import '../components/map_sidebar_layout.dart';
import '../components/dark_mode_map.dart';
import '../components/delivery_list_item.dart';
import '../utils/toast_helper.dart';
class DeliveriesPage extends ConsumerStatefulWidget {
final int routeFragmentId;
final String routeName;
final VoidCallback? onBack;
final bool showAsEmbedded;
final Delivery? selectedDelivery;
final ValueChanged<Delivery?>? onDeliverySelected;
const DeliveriesPage({
super.key,
required this.routeFragmentId,
required this.routeName,
this.onBack,
this.showAsEmbedded = false,
this.selectedDelivery,
this.onDeliverySelected,
});
@override
ConsumerState<DeliveriesPage> createState() => _DeliveriesPageState();
}
class _DeliveriesPageState extends ConsumerState<DeliveriesPage> {
late ScrollController _listScrollController;
Delivery? _selectedDelivery;
int? _lastRouteFragmentId;
@override
void initState() {
super.initState();
_listScrollController = ScrollController();
_selectedDelivery = widget.selectedDelivery;
}
@override
void didUpdateWidget(DeliveriesPage oldWidget) {
super.didUpdateWidget(oldWidget);
if (widget.selectedDelivery != oldWidget.selectedDelivery) {
setState(() {
_selectedDelivery = widget.selectedDelivery;
});
}
}
@override
void dispose() {
_listScrollController.dispose();
super.dispose();
}
Future<void> _autoScrollToFirstPending(List<Delivery> deliveries) async {
final firstPendingIndex = deliveries.indexWhere((d) => !d.delivered && !d.isSkipped);
if (_listScrollController.hasClients && firstPendingIndex != -1) {
await Future.delayed(const Duration(milliseconds: 200));
// Scroll to position first pending delivery at top of list
// Each item is approximately 70 pixels tall
final scrollOffset = firstPendingIndex * 70.0;
_listScrollController.animateTo(
scrollOffset.clamp(0, _listScrollController.position.maxScrollExtent),
duration: const Duration(milliseconds: 500),
curve: Curves.easeInOut,
);
}
}
@override
Widget build(BuildContext context) {
final deliveriesData = ref.watch(deliveriesProvider(widget.routeFragmentId));
final tokenAsync = ref.watch(authTokenProvider);
final token = tokenAsync.hasValue ? tokenAsync.value : null;
final l10n = AppLocalizations.of(context)!;
// When embedded in sidebar, show only the delivery list with back button
// This is a responsive sidebar that collapses like routes
if (widget.showAsEmbedded) {
final isExpanded = ref.watch(collapseStateProvider);
return deliveriesData.when(
data: (deliveries) {
// Auto-scroll to first pending delivery when page loads or route changes
if (_lastRouteFragmentId != widget.routeFragmentId) {
_lastRouteFragmentId = widget.routeFragmentId;
WidgetsBinding.instance.addPostFrameCallback((_) {
_autoScrollToFirstPending(deliveries);
});
}
// Responsive sidebar that changes width when collapsed (300px expanded, 80px collapsed)
return AnimatedContainer(
duration: const Duration(milliseconds: 300),
width: isExpanded ? 300 : 80,
child: Column(
children: [
// Header with back button
Container(
padding: EdgeInsets.symmetric(
horizontal: isExpanded ? 12 : 0,
vertical: 8,
),
decoration: BoxDecoration(
color: Theme.of(context).colorScheme.surface,
border: Border(
bottom: BorderSide(
color: Theme.of(context).dividerColor,
width: 1,
),
),
),
child: Row(
mainAxisAlignment: isExpanded
? MainAxisAlignment.start
: MainAxisAlignment.center,
children: [
if (isExpanded) ...[
IconButton(
icon: const Icon(Icons.arrow_back),
onPressed: widget.onBack,
tooltip: 'Back to routes',
),
const SizedBox(width: 8),
Expanded(
child: Text(
widget.routeName,
style: Theme.of(context).textTheme.titleLarge?.copyWith(
fontWeight: FontWeight.w700,
),
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
),
],
IconButton(
icon: Icon(isExpanded ? Icons.menu_open : Icons.menu),
onPressed: () {
ref.read(collapseStateProvider.notifier).toggle();
},
tooltip: isExpanded ? 'Collapse' : 'Expand',
),
],
),
),
// Delivery list
Expanded(
child: UnifiedDeliveryListView(
deliveries: deliveries,
selectedDelivery: _selectedDelivery,
scrollController: _listScrollController,
onDeliverySelected: (delivery) {
setState(() {
_selectedDelivery = delivery;
});
// Notify parent about delivery selection
widget.onDeliverySelected?.call(delivery);
},
onItemAction: (delivery, action) {
_handleDeliveryAction(context, delivery, action, token);
_autoScrollToFirstPending(deliveries);
},
isCollapsed: !isExpanded,
),
),
],
),
);
},
loading: () => const Center(
child: CircularProgressIndicator(),
),
error: (error, stackTrace) => Center(
child: Text(l10n.error(error.toString())),
),
);
}
// When not embedded, show full page with map
final routesData = ref.watch(deliveryRoutesProvider);
return Scaffold(
appBar: AppBar(
title: Text(widget.routeName),
elevation: 0,
),
body: SafeArea(
child: deliveriesData.when(
data: (deliveries) {
// Auto-scroll to first pending delivery when page loads or route changes
if (_lastRouteFragmentId != widget.routeFragmentId) {
_lastRouteFragmentId = widget.routeFragmentId;
WidgetsBinding.instance.addPostFrameCallback((_) {
_autoScrollToFirstPending(deliveries);
});
}
return routesData.when(
data: (routes) {
return MapSidebarLayout(
mapWidget: DarkModeMapComponent(
deliveries: deliveries,
selectedDelivery: _selectedDelivery,
onDeliverySelected: (delivery) {
setState(() {
_selectedDelivery = delivery;
});
},
onAction: (action) => _selectedDelivery != null
? _handleDeliveryAction(context, _selectedDelivery!, action, token)
: null,
),
sidebarBuilder: (isCollapsed) => UnifiedDeliveryListView(
deliveries: deliveries,
selectedDelivery: _selectedDelivery,
scrollController: _listScrollController,
onDeliverySelected: (delivery) {
setState(() {
_selectedDelivery = delivery;
});
},
onItemAction: (delivery, action) {
_handleDeliveryAction(context, delivery, action, token);
_autoScrollToFirstPending(deliveries);
},
isCollapsed: isCollapsed,
),
);
},
loading: () => const Center(
child: CircularProgressIndicator(),
),
error: (error, stackTrace) => MapSidebarLayout(
mapWidget: DarkModeMapComponent(
deliveries: deliveries,
selectedDelivery: _selectedDelivery,
onDeliverySelected: (delivery) {
setState(() {
_selectedDelivery = delivery;
});
},
onAction: (action) => _selectedDelivery != null
? _handleDeliveryAction(context, _selectedDelivery!, action, token)
: null,
),
sidebarBuilder: (isCollapsed) => UnifiedDeliveryListView(
deliveries: deliveries,
selectedDelivery: _selectedDelivery,
scrollController: _listScrollController,
onDeliverySelected: (delivery) {
setState(() {
_selectedDelivery = delivery;
});
},
onItemAction: (delivery, action) {
_handleDeliveryAction(context, delivery, action, token);
_autoScrollToFirstPending(deliveries);
},
isCollapsed: isCollapsed,
),
),
);
},
loading: () => const Center(
child: CircularProgressIndicator(),
),
error: (error, stackTrace) => Center(
child: Text(l10n.error(error.toString())),
),
),
),
);
}
Future<void> _handleDeliveryAction(
BuildContext context,
Delivery delivery,
String action,
String? token,
) async {
if (token == null) {
final l10n = AppLocalizations.of(context)!;
ToastHelper.showError(context, l10n.authenticationRequired);
return;
}
final authClient = CqrsApiClient(
config: ApiClientConfig(
baseUrl: ApiClientConfig.production.baseUrl,
defaultHeaders: {'Authorization': 'Bearer $token'},
),
);
switch (action) {
case 'complete':
final result = await authClient.executeCommand(
endpoint: 'completeDelivery',
command: CompleteDeliveryCommand(
deliveryId: delivery.id,
),
);
result.when(
success: (_) {
final l10n = AppLocalizations.of(context)!;
// ignore: unused_result
ref.refresh(deliveriesProvider(widget.routeFragmentId));
ToastHelper.showSuccess(context, l10n.deliverySuccessful);
},
onError: (error) {
final l10n = AppLocalizations.of(context)!;
ToastHelper.showError(context, l10n.error(error.message));
},
);
break;
case 'uncomplete':
final result = await authClient.executeCommand(
endpoint: 'markDeliveryAsUncompleted',
command: MarkDeliveryAsUncompletedCommand(deliveryId: delivery.id),
);
result.when(
success: (_) {
final l10n = AppLocalizations.of(context)!;
// ignore: unused_result
ref.refresh(deliveriesProvider(widget.routeFragmentId));
ToastHelper.showSuccess(context, 'Delivery marked as uncompleted');
},
onError: (error) {
final l10n = AppLocalizations.of(context)!;
ToastHelper.showError(context, l10n.error(error.message));
},
);
break;
case 'photo':
await _handlePhotoCapture(context, delivery, token);
break;
case 'call':
final contact = delivery.orders.isNotEmpty && delivery.orders.first.contact != null
? delivery.orders.first.contact
: null;
if (contact?.phoneNumber != null) {
final Uri phoneUri = Uri(scheme: 'tel', path: contact!.phoneNumber);
if (await canLaunchUrl(phoneUri)) {
await launchUrl(phoneUri);
}
}
break;
case 'map':
// Navigation is now handled in-app by the DeliveryMap component
// Just ensure the delivery is selected
break;
}
}
Future<void> _handlePhotoCapture(
BuildContext context,
Delivery delivery,
String? token,
) async {
if (token == null) {
final l10n = AppLocalizations.of(context)!;
ToastHelper.showError(context, l10n.authenticationRequired);
return;
}
final ImagePicker picker = ImagePicker();
XFile? pickedFile;
try {
pickedFile = await picker.pickImage(
source: ImageSource.camera,
imageQuality: 85,
);
} catch (e) {
if (context.mounted) {
ToastHelper.showError(context, 'Camera error: $e');
}
return;
}
if (pickedFile == null) {
return;
}
if (!context.mounted) return;
final bool? confirmed = await showDialog<bool>(
context: context,
builder: (BuildContext dialogContext) {
return AlertDialog(
title: const Text('Confirm Photo'),
content: Column(
mainAxisSize: MainAxisSize.min,
children: [
Image.file(
File(pickedFile!.path),
height: 300,
fit: BoxFit.contain,
),
const SizedBox(height: 16),
Text(
'Upload this photo for ${delivery.name}?',
textAlign: TextAlign.center,
),
],
),
actions: [
TextButton(
onPressed: () => Navigator.of(dialogContext).pop(false),
child: Text(AppLocalizations.of(context)!.cancel),
),
ElevatedButton(
onPressed: () => Navigator.of(dialogContext).pop(true),
child: Text(AppLocalizations.of(context)!.upload),
),
],
);
},
);
if (confirmed != true) {
return;
}
if (!context.mounted) return;
showDialog(
context: context,
barrierDismissible: false,
builder: (BuildContext dialogContext) {
return const Center(
child: Card(
child: Padding(
padding: EdgeInsets.all(24.0),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
CircularProgressIndicator(),
SizedBox(height: 16),
Text('Uploading photo...'),
],
),
),
),
);
},
);
try {
final Uri uploadUrl = Uri.parse(
'${ApiClientConfig.production.baseUrl}/api/delivery/uploadDeliveryPicture?deliveryId=${delivery.id}',
);
final http.MultipartRequest request = http.MultipartRequest('POST', uploadUrl);
request.headers['Authorization'] = 'Bearer $token';
request.files.add(await http.MultipartFile.fromPath('file', pickedFile.path));
final http.StreamedResponse streamedResponse = await request.send();
final http.Response response = await http.Response.fromStream(streamedResponse);
if (context.mounted) {
Navigator.of(context).pop();
}
if (response.statusCode >= 200 && response.statusCode < 300) {
if (context.mounted) {
ToastHelper.showSuccess(context, 'Photo uploaded successfully');
}
// ignore: unused_result
ref.refresh(deliveriesProvider(widget.routeFragmentId));
} else {
if (context.mounted) {
ToastHelper.showError(context, 'Upload failed: ${response.statusCode}');
}
}
} catch (e) {
if (context.mounted) {
Navigator.of(context).pop();
ToastHelper.showError(context, 'Upload error: $e');
}
}
}
}
class UnifiedDeliveryListView extends StatelessWidget {
final List<Delivery> deliveries;
final Delivery? selectedDelivery;
final ScrollController scrollController;
final ValueChanged<Delivery> onDeliverySelected;
final Function(Delivery, String) onItemAction;
final bool isCollapsed;
const UnifiedDeliveryListView({
super.key,
required this.deliveries,
this.selectedDelivery,
required this.scrollController,
required this.onDeliverySelected,
required this.onItemAction,
this.isCollapsed = false,
});
@override
Widget build(BuildContext context) {
final l10n = AppLocalizations.of(context)!;
if (deliveries.isEmpty) {
return Center(
child: Text(l10n.noDeliveries),
);
}
return RefreshIndicator(
onRefresh: () async {
// Trigger refresh via provider
},
child: ListView.builder(
controller: scrollController,
padding: const EdgeInsets.only(top: 4, bottom: 8),
physics: const AlwaysScrollableScrollPhysics(),
itemCount: deliveries.length, // Show all deliveries with scrolling
itemBuilder: (context, index) {
final delivery = deliveries[index];
return DeliveryListItem(
delivery: delivery,
isSelected: selectedDelivery?.id == delivery.id,
onTap: () => onDeliverySelected(delivery),
onCall: () => onItemAction(delivery, 'call'),
onAction: (action) => onItemAction(delivery, action),
animationIndex: index,
isCollapsed: isCollapsed,
);
},
),
);
}
}
class DeliveryCard extends StatelessWidget {
final Delivery delivery;
final bool isSelected;
final VoidCallback onTap;
final Function(Delivery, String) onAction;
const DeliveryCard({
super.key,
required this.delivery,
this.isSelected = false,
required this.onTap,
required this.onAction,
});
@override
Widget build(BuildContext context) {
final contact = delivery.orders.isNotEmpty && delivery.orders.first.contact != null
? delivery.orders.first.contact
: null;
final order = delivery.orders.isNotEmpty ? delivery.orders.first : null;
return Card(
margin: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
color: isSelected
? Theme.of(context).colorScheme.primaryContainer.withValues(alpha: 0.3)
: null,
child: InkWell(
onTap: onTap,
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
delivery.name,
style: Theme.of(context).textTheme.titleMedium,
maxLines: 2,
overflow: TextOverflow.ellipsis,
),
if (contact != null)
Text(
contact.fullName,
style: Theme.of(context).textTheme.bodySmall,
),
],
),
),
if (delivery.delivered)
Chip(
label: Text(AppLocalizations.of(context)!.delivered),
backgroundColor: Theme.of(context).colorScheme.primaryContainer,
)
else if (order?.isNewCustomer ?? false)
Chip(
label: Text(AppLocalizations.of(context)!.newCustomer),
backgroundColor: const Color(0xFFFFFBEB),
),
],
),
const SizedBox(height: 12),
if (delivery.deliveryAddress != null)
Text(
delivery.deliveryAddress!.formattedAddress,
style: Theme.of(context).textTheme.bodySmall,
maxLines: 2,
overflow: TextOverflow.ellipsis,
),
if (order != null) ...[
const SizedBox(height: 8),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
if (order.totalItems != null)
Text(
AppLocalizations.of(context)!.items(order.totalItems!),
style: Theme.of(context).textTheme.bodySmall,
),
Text(
AppLocalizations.of(context)!.moneyCurrency(order.totalAmount),
style: Theme.of(context).textTheme.titleSmall?.copyWith(
color: Theme.of(context).colorScheme.primary,
),
),
],
),
],
const SizedBox(height: 12),
Wrap(
spacing: 8,
children: [
if (contact?.phoneNumber != null)
OutlinedButton.icon(
onPressed: () => onAction(delivery, 'call'),
icon: const Icon(Icons.phone),
label: Text(AppLocalizations.of(context)!.call),
),
if (delivery.deliveryAddress != null)
OutlinedButton.icon(
onPressed: () {
onTap(); // Select the delivery
onAction(delivery, 'map');
},
icon: const Icon(Icons.map),
label: Text(AppLocalizations.of(context)!.navigate),
),
OutlinedButton.icon(
onPressed: () => _showDeliveryActions(context),
icon: const Icon(Icons.more_vert),
label: Text(AppLocalizations.of(context)!.more),
),
],
),
],
),
),
),
);
}
void _showDeliveryActions(BuildContext context) {
final l10n = AppLocalizations.of(context)!;
showModalBottomSheet(
context: context,
builder: (context) => SafeArea(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
if (!delivery.delivered)
ListTile(
leading: const Icon(Icons.check_circle),
title: Text(l10n.markAsCompleted),
onTap: () {
Navigator.pop(context);
onAction(delivery, 'complete');
},
)
else
ListTile(
leading: const Icon(Icons.undo),
title: Text(l10n.markAsUncompleted),
onTap: () {
Navigator.pop(context);
onAction(delivery, 'uncomplete');
},
),
ListTile(
leading: const Icon(Icons.camera_alt),
title: Text(l10n.uploadPhoto),
onTap: () {
Navigator.pop(context);
// TODO: Implement photo upload
},
),
ListTile(
leading: const Icon(Icons.description),
title: Text(l10n.viewDetails),
onTap: () {
Navigator.pop(context);
// TODO: Navigate to delivery details
},
),
],
),
),
);
}
}