first app design
This commit is contained in:
root
@@ -0,0 +1,295 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_riverpod/flutter_riverpod.dart';
|
||||
import 'package:intl/intl.dart';
|
||||
import '../providers/dashboard_providers.dart';
|
||||
import '../../../widgets/status_badge.dart';
|
||||
import '../../../widgets/error_view.dart';
|
||||
|
||||
class ReservationDetailScreen extends ConsumerWidget {
|
||||
final String id;
|
||||
|
||||
const ReservationDetailScreen({super.key, required this.id});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context, WidgetRef ref) {
|
||||
final async = ref.watch(reservationDetailProvider(id));
|
||||
|
||||
return async.when(
|
||||
loading: () =>
|
||||
const Scaffold(body: Center(child: CircularProgressIndicator())),
|
||||
error: (e, _) => Scaffold(
|
||||
appBar: AppBar(),
|
||||
body: ErrorView(
|
||||
message: 'Could not load reservation',
|
||||
onRetry: () => ref.invalidate(reservationDetailProvider(id)),
|
||||
),
|
||||
),
|
||||
data: (res) {
|
||||
final fmt = DateFormat('MMM d, yyyy');
|
||||
final canConfirm = res.status == 'DRAFT';
|
||||
final canCancel =
|
||||
res.status == 'DRAFT' || res.status == 'CONFIRMED';
|
||||
final canCheckin = res.status == 'CONFIRMED';
|
||||
final canCheckout = res.status == 'ACTIVE';
|
||||
|
||||
return Scaffold(
|
||||
appBar: AppBar(
|
||||
title: Text('Reservation #${id.substring(0, 8)}'),
|
||||
actions: [
|
||||
StatusBadge(status: res.status),
|
||||
const SizedBox(width: 16),
|
||||
],
|
||||
),
|
||||
body: ListView(
|
||||
padding: const EdgeInsets.all(16),
|
||||
children: [
|
||||
_Section(
|
||||
title: 'Vehicle',
|
||||
child: res.vehicle != null
|
||||
? _InfoRow(label: 'Vehicle', value: res.vehicle!.displayName)
|
||||
: const Text('N/A'),
|
||||
),
|
||||
_Section(
|
||||
title: 'Customer',
|
||||
child: res.customer != null
|
||||
? Column(
|
||||
children: [
|
||||
_InfoRow(
|
||||
label: 'Name', value: res.customer!.fullName),
|
||||
if (res.customer!.email != null)
|
||||
_InfoRow(
|
||||
label: 'Email', value: res.customer!.email!),
|
||||
if (res.customer!.phone != null)
|
||||
_InfoRow(
|
||||
label: 'Phone', value: res.customer!.phone!),
|
||||
],
|
||||
)
|
||||
: const Text('Walk-in customer'),
|
||||
),
|
||||
_Section(
|
||||
title: 'Dates',
|
||||
child: Column(
|
||||
children: [
|
||||
_InfoRow(label: 'Start', value: fmt.format(res.startDate)),
|
||||
_InfoRow(label: 'End', value: fmt.format(res.endDate)),
|
||||
_InfoRow(label: 'Duration', value: '${res.days} days'),
|
||||
],
|
||||
),
|
||||
),
|
||||
_Section(
|
||||
title: 'Payment',
|
||||
child: Column(
|
||||
children: [
|
||||
_InfoRow(
|
||||
label: 'Total',
|
||||
value: '\$${res.totalAmount.toStringAsFixed(2)}'),
|
||||
Row(
|
||||
children: [
|
||||
const Text('Status: ',
|
||||
style: TextStyle(color: Color(0xFF6B7280))),
|
||||
const SizedBox(width: 4),
|
||||
StatusBadge(status: res.paymentStatus),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
if (canConfirm)
|
||||
_ActionButton(
|
||||
label: 'Confirm Reservation',
|
||||
color: const Color(0xFF0E9F6E),
|
||||
icon: Icons.check_circle_outline,
|
||||
onTap: () async {
|
||||
await ref
|
||||
.read(reservationServiceProvider)
|
||||
.confirmReservation(id);
|
||||
ref.invalidate(reservationDetailProvider(id));
|
||||
},
|
||||
),
|
||||
if (canCheckin)
|
||||
_ActionButton(
|
||||
label: 'Check In',
|
||||
color: const Color(0xFF1A56DB),
|
||||
icon: Icons.login,
|
||||
onTap: () => _showMileageDialog(context, ref, 'checkin'),
|
||||
),
|
||||
if (canCheckout)
|
||||
_ActionButton(
|
||||
label: 'Check Out',
|
||||
color: const Color(0xFF5521B5),
|
||||
icon: Icons.logout,
|
||||
onTap: () => _showMileageDialog(context, ref, 'checkout'),
|
||||
),
|
||||
if (canCancel)
|
||||
_ActionButton(
|
||||
label: 'Cancel Reservation',
|
||||
color: const Color(0xFFE02424),
|
||||
icon: Icons.cancel_outlined,
|
||||
onTap: () => _showCancelDialog(context, ref),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
void _showMileageDialog(
|
||||
BuildContext context, WidgetRef ref, String type) {
|
||||
final ctrl = TextEditingController();
|
||||
showDialog(
|
||||
context: context,
|
||||
builder: (_) => AlertDialog(
|
||||
title: Text(type == 'checkin' ? 'Check In' : 'Check Out'),
|
||||
content: TextField(
|
||||
controller: ctrl,
|
||||
keyboardType: TextInputType.number,
|
||||
decoration: const InputDecoration(
|
||||
labelText: 'Current mileage (km)',
|
||||
),
|
||||
),
|
||||
actions: [
|
||||
TextButton(
|
||||
onPressed: () => Navigator.pop(context),
|
||||
child: const Text('Cancel')),
|
||||
ElevatedButton(
|
||||
onPressed: () async {
|
||||
final mileage = int.tryParse(ctrl.text);
|
||||
if (mileage == null) return;
|
||||
Navigator.pop(context);
|
||||
try {
|
||||
if (type == 'checkin') {
|
||||
await ref
|
||||
.read(reservationServiceProvider)
|
||||
.checkin(id, mileage);
|
||||
} else {
|
||||
await ref
|
||||
.read(reservationServiceProvider)
|
||||
.checkout(id, mileage);
|
||||
}
|
||||
ref.invalidate(reservationDetailProvider(id));
|
||||
} catch (_) {}
|
||||
},
|
||||
child: const Text('Confirm'),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
void _showCancelDialog(BuildContext context, WidgetRef ref) {
|
||||
final ctrl = TextEditingController();
|
||||
showDialog(
|
||||
context: context,
|
||||
builder: (_) => AlertDialog(
|
||||
title: const Text('Cancel Reservation'),
|
||||
content: TextField(
|
||||
controller: ctrl,
|
||||
decoration: const InputDecoration(labelText: 'Reason'),
|
||||
maxLines: 3,
|
||||
),
|
||||
actions: [
|
||||
TextButton(
|
||||
onPressed: () => Navigator.pop(context),
|
||||
child: const Text('Back')),
|
||||
ElevatedButton(
|
||||
style: ElevatedButton.styleFrom(
|
||||
backgroundColor: const Color(0xFFE02424)),
|
||||
onPressed: () async {
|
||||
Navigator.pop(context);
|
||||
await ref
|
||||
.read(reservationServiceProvider)
|
||||
.cancelReservation(id, ctrl.text);
|
||||
ref.invalidate(reservationDetailProvider(id));
|
||||
},
|
||||
child: const Text('Cancel Reservation'),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _Section extends StatelessWidget {
|
||||
final String title;
|
||||
final Widget child;
|
||||
|
||||
const _Section({required this.title, required this.child});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Card(
|
||||
margin: const EdgeInsets.only(bottom: 12),
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(16),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(title,
|
||||
style: const TextStyle(
|
||||
fontWeight: FontWeight.bold,
|
||||
color: Color(0xFF6B7280),
|
||||
fontSize: 12)),
|
||||
const SizedBox(height: 10),
|
||||
child,
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _InfoRow extends StatelessWidget {
|
||||
final String label;
|
||||
final String value;
|
||||
|
||||
const _InfoRow({required this.label, required this.value});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Padding(
|
||||
padding: const EdgeInsets.symmetric(vertical: 3),
|
||||
child: Row(
|
||||
children: [
|
||||
Text('$label: ',
|
||||
style: const TextStyle(color: Color(0xFF6B7280))),
|
||||
Expanded(
|
||||
child: Text(value,
|
||||
style: const TextStyle(fontWeight: FontWeight.w500)),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _ActionButton extends StatelessWidget {
|
||||
final String label;
|
||||
final Color color;
|
||||
final IconData icon;
|
||||
final VoidCallback onTap;
|
||||
|
||||
const _ActionButton({
|
||||
required this.label,
|
||||
required this.color,
|
||||
required this.icon,
|
||||
required this.onTap,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Padding(
|
||||
padding: const EdgeInsets.only(bottom: 10),
|
||||
child: ElevatedButton.icon(
|
||||
style: ElevatedButton.styleFrom(
|
||||
backgroundColor: color,
|
||||
minimumSize: const Size.fromHeight(48),
|
||||
),
|
||||
icon: Icon(icon),
|
||||
label: Text(label),
|
||||
onPressed: onTap,
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user