import 'dart:convert'; import 'dart:io'; import 'package:flutter/material.dart'; import 'package:flutter/services.dart'; import 'package:image_picker/image_picker.dart'; import 'package:supplier_new/common/settings.dart'; import 'package:supplier_new/resources/tanker_details.dart'; import 'package:supplier_new/resources/tankers_model.dart'; import 'package:http/http.dart' as http; class FirstCharUppercaseFormatter extends TextInputFormatter { const FirstCharUppercaseFormatter(); @override TextEditingValue formatEditUpdate( TextEditingValue oldValue, TextEditingValue newValue, ) { final text = newValue.text; if (text.isEmpty) return newValue; // Find first non-space char final i = text.indexOf(RegExp(r'\S')); if (i == -1) return newValue; final first = text[i]; final upper = first.toUpperCase(); if (first == upper) return newValue; final newText = text.replaceRange(i, i + 1, upper); return newValue.copyWith( text: newText, selection: newValue.selection, composing: TextRange.empty, ); } } class ResourcesFleetScreen extends StatefulWidget { const ResourcesFleetScreen({super.key}); @override State createState() => _ResourcesFleetScreenState(); } class _ResourcesFleetScreenState extends State { final _formKey = GlobalKey(); // Controllers (sheet) final _nameCtrl = TextEditingController(); final _capacityCtrl = TextEditingController(); final _plateCtrl = TextEditingController(); final _mfgYearCtrl = TextEditingController(); final _insExpiryCtrl = TextEditingController(); // Dropdown selections (sheet) String? selectedType; String? selectedTypeOfWater; // Dropdown options (adjust to your backend) final List tankerTypes = const [ "Without Pump", "With Pump", ]; final List typeOfWater = const [ "Drinking water", "Bore water", ]; String? _required(String? v, {String field = "This field"}) { if (v == null || v.trim().isEmpty) return "$field is required"; return null; } int selectedTab = 0; String search = ''; bool isLoading = false; List tankersList = []; int activeCount = 0; int inactiveCount = 0; int maintenanceCount = 0; String? selectedFilter; String selectedSort = "name"; List filterOptions = [ "All", "Active", "Inactive", "Maintenance" ]; List sortOptions = [ "Name", "Capacity" ]; final ImagePicker _picker = ImagePicker(); List tankerImages = []; final int maxImages = 5; Future pickTankerImages(Function modalSetState) async { if(tankerImages.length>=5){ AppSettings.longFailedToast("Maximum 5 images allowed"); return; } final images = await _picker.pickMultiImage(imageQuality:70); if(images!=null){ int remaining = 5 - tankerImages.length; tankerImages.addAll( images.take(remaining) ); modalSetState((){}); } } Future pickFromCamera(Function modalSetState) async { if(tankerImages.length>=5){ AppSettings.longFailedToast("Maximum 5 images allowed"); return; } final image = await _picker.pickImage( source:ImageSource.camera, imageQuality:70, ); if(image!=null){ tankerImages.add(image); modalSetState((){}); } } @override void initState() { super.initState(); _fetchTankers(); } @override void dispose() { _nameCtrl.dispose(); _capacityCtrl.dispose(); _plateCtrl.dispose(); _mfgYearCtrl.dispose(); _insExpiryCtrl.dispose(); super.dispose(); } void _showFilterMenu(BuildContext context, Offset position) async { await showMenu( context: context, color: Colors.white, position: RelativeRect.fromLTRB( position.dx, position.dy, position.dx + 200, position.dy + 200), items: [ PopupMenuItem( enabled: false, child: Text( "Filter", style: fontTextStyle( 12, Color(0XFF2D2E30), FontWeight.w600), ), ), ...filterOptions.map((option){ return PopupMenuItem( child: RadioListTile( value: option, groupValue: selectedFilter ?? "All", activeColor: Color(0XFF1D7AFC), onChanged:(value){ setState(() { selectedFilter = value=="All" ? null : value; }); Navigator.pop(context); }, title: Text( option, style: fontTextStyle( 12, Color(0XFF2D2E30), FontWeight.w400), ), dense:true, visualDensity: VisualDensity( horizontal:-4, vertical:-4), ), ); }).toList() ], ); } void _showSortMenu(BuildContext context, Offset position) async { await showMenu( context: context, color: Colors.white, position: RelativeRect.fromLTRB( position.dx, position.dy, position.dx + 200, position.dy + 200), items: [ PopupMenuItem( enabled:false, child: Text( "Sort", style: fontTextStyle( 12, Color(0XFF2D2E30), FontWeight.w600), ), ), ...sortOptions.map((option){ return PopupMenuItem( child: RadioListTile( value: option, groupValue: selectedSort, activeColor: Color(0XFF1D7AFC), onChanged:(value){ setState(() { selectedSort = value.toString(); }); Navigator.pop(context); }, title: Text( option, style: fontTextStyle( 12, Color(0XFF2D2E30), FontWeight.w400), ), dense:true, visualDensity: VisualDensity( horizontal:-4, vertical:-4), ), ); }).toList() ], ); } Future _fetchTankers() async { setState(() => isLoading = true); try { final response = await AppSettings.getTankers(); final data = (jsonDecode(response)['data'] as List) .map((e) => TankersModel.fromJson(e)) .toList(); int active = 0; int inactive = 0; int maintenance = 0; for (final t in data) { final statuses = List.from(t.availability); if (statuses.contains('undermaintanence')) { maintenance++; } else if (statuses.contains('available') || statuses.contains('in-use')|| statuses.contains('empty')) { active++; } else if (statuses.contains('inactive')) { inactive++; } } if (!mounted) return; setState(() { tankersList = data; activeCount = active; inactiveCount = inactive; maintenanceCount = maintenance; isLoading = false; }); } catch (e) { debugPrint("⚠️ Error fetching tankers: $e"); setState(() => isLoading = false); } } Future _pickInsuranceDate() async { final picked = await showDatePicker( context: context, initialDate: DateTime.now(), firstDate: DateTime(2000), lastDate: DateTime(2100), builder: (context, child) { return Theme( data: Theme.of(context).copyWith( dialogBackgroundColor: Colors.white, colorScheme: Theme.of(context).colorScheme.copyWith( primary: const Color(0xFF8270DB), surface: Colors.white, onSurface: const Color(0xFF101214), ), ), child: child!, ); }, ); if (picked != null) { final dd = picked.day.toString().padLeft(2, '0'); final mm = picked.month.toString().padLeft(2, '0'); final yyyy = picked.year.toString(); _insExpiryCtrl.text = "$dd-$mm-$yyyy"; setState(() {}); } } void _resetForm() { _formKey.currentState?.reset(); _nameCtrl.clear(); _capacityCtrl.clear(); _plateCtrl.clear(); _mfgYearCtrl.clear(); _insExpiryCtrl.clear(); selectedType = null; selectedTypeOfWater = null; } Future _addTanker() async { // Validate final ok = _formKey.currentState?.validate() ?? false; if (!ok) { setState(() {}); // force rebuild to show errors return; } // Build payload keys to match your backend final payload = { "tankerName": _nameCtrl.text.trim(), "capacity": _capacityCtrl.text.trim(), "typeofwater": selectedTypeOfWater ?? "", "supplier_address": AppSettings.userAddress, "supplier_name": AppSettings.userName, "phoneNumber": AppSettings.phoneNumber, "tanker_type": selectedType ?? "", "license_plate": _plateCtrl.text.trim(), "manufacturing_year": _mfgYearCtrl.text.trim(), "insurance_exp_date": _insExpiryCtrl.text.trim(), }; try { final bool tankStatus = await AppSettings.addTankers(payload); if (!mounted) return; if (tankStatus) { AppSettings.longSuccessToast("Tanker Created Successfully"); Navigator.pop(context, true); // close sheet _resetForm(); _fetchTankers(); // refresh from server } else { AppSettings.longFailedToast("Tanker Creation failed"); } } catch (e) { debugPrint("⚠️ addTankers error: $e"); if (!mounted) return; AppSettings.longFailedToast("Something went wrong"); } } Future uploadTankerImages( String tankerId ) async { var request = http.MultipartRequest( 'POST', Uri.parse( AppSettings.host + "uploads_tanker_images/$tankerId" ) ); request.headers.addAll( await AppSettings.buildRequestHeaders() ); for(var img in tankerImages){ request.files.add( await http.MultipartFile.fromPath( 'files', img.path ) ); } var response = await request.send(); if(response.statusCode != 200){ throw Exception( "Upload failed" ); } } Future _addTankerNew() async { /// FORM VALIDATION final ok = _formKey.currentState?.validate() ?? false; if (!ok) { setState(() {}); return; } try { AppSettings.preLoaderDialog(context); /// STEP 1 → CREATE TANKER final payload = { "tankerName": _nameCtrl.text.trim(), "capacity": _capacityCtrl.text.trim(), "typeofwater": selectedTypeOfWater ?? "", "supplier_address": AppSettings.userAddress, "supplier_name": AppSettings.userName, "phoneNumber": AppSettings.phoneNumber, "tanker_type": selectedType ?? "", "license_plate": _plateCtrl.text.trim(), "manufacturing_year": _mfgYearCtrl.text.trim(), "insurance_exp_date": _insExpiryCtrl.text.trim(), }; final response = await AppSettings.addTankersWithResponse(payload); if(response == null){ Navigator.pop(context); AppSettings.longFailedToast( "Tanker creation failed" ); return; } /// IMPORTANT → GET TANKER ID String tankerId = response["tankerId"] ?? response["_id"] ?? ""; /// STEP 2 → UPLOAD IMAGES if(tankerImages.isNotEmpty){ try{ await uploadTankerImages(tankerId); } catch(e){ debugPrint( "Image upload failed $e" ); AppSettings.longFailedToast( "Tanker created but images failed" ); } } Navigator.pop(context); if (!mounted) return; AppSettings.longSuccessToast( "Tanker Created Successfully" ); Navigator.pop(context,true); _resetForm(); _fetchTankers(); } catch (e) { Navigator.pop(context); debugPrint( "⚠️ addTanker error $e" ); if (!mounted) return; AppSettings.longFailedToast( "Something went wrong" ); } } Future openTankerSimpleSheet(BuildContext context) async { await showModalBottomSheet( context: context, isScrollControlled: true, backgroundColor: Colors.transparent, builder: (context) { return StatefulBuilder( builder: (context, modalSetState) { final viewInsets = MediaQuery.of(context).viewInsets.bottom; return FractionallySizedBox( heightFactor: 0.75, child: Container( decoration: const BoxDecoration( color: Colors.white, borderRadius: BorderRadius.vertical(top: Radius.circular(20)), ), child: Padding( padding: EdgeInsets.fromLTRB(20,16,20,20+viewInsets), child: Form( key: _formKey, child: SingleChildScrollView( child: Column( crossAxisAlignment: CrossAxisAlignment.stretch, children: [ Row( children: [ Expanded( child: Center( child: Container( width: 86, height: 4, margin: const EdgeInsets.only(bottom: 12), decoration: BoxDecoration( color: const Color(0xFFE0E0E0), borderRadius: BorderRadius.circular(2), ), ), ), ), ], ), _LabeledField( label: "Tanker Name *", child: TextFormField( controller: _nameCtrl, validator: (v) => _required(v, field: "Tanker Name"), textCapitalization: TextCapitalization.characters, inputFormatters: const [ FirstCharUppercaseFormatter(), // << live first-letter caps ], decoration: InputDecoration( hintText: "Enter Tanker Name", hintStyle: fontTextStyle(14, const Color(0xFF939495), FontWeight.w400), border: const OutlineInputBorder(), isDense: true, ), textInputAction: TextInputAction.next, ), ), _LabeledField( label: "Tanker Capacity (in L) *", child: TextFormField( controller: _capacityCtrl, validator: (v) => _required(v, field: "Tanker Capacity"), decoration: InputDecoration( hintText: "10,000", hintStyle: fontTextStyle(14, const Color(0xFF939495), FontWeight.w400), border: const OutlineInputBorder(), isDense: true, ), keyboardType: TextInputType.number, inputFormatters: [ FilteringTextInputFormatter.allow(RegExp(r'[0-9,]')), ], textInputAction: TextInputAction.next, ), ), _LabeledField( label: "Tanker Type *", child: DropdownButtonFormField( value: selectedType, dropdownColor: Colors.white, items: tankerTypes .map((t) => DropdownMenuItem(value: t, child: Text(t))) .toList(), onChanged: (v) => setState(() => selectedType = v), validator: (v) => v == null || v.isEmpty ? "Tanker Type is required" : null, isExpanded: true, alignment: Alignment.centerLeft, hint: Text( "Select Type", style: fontTextStyle(14, const Color(0xFF939495), FontWeight.w400), ), icon: Image.asset('images/downarrow.png', width: 16, height: 16), decoration: const InputDecoration( border: OutlineInputBorder(), isDense: false, contentPadding: EdgeInsets.symmetric(horizontal: 12, vertical: 14), ), ), ), _LabeledField( label: "Type of water *", child: DropdownButtonFormField( value: selectedTypeOfWater, dropdownColor: Colors.white, items: typeOfWater .map((t) => DropdownMenuItem(value: t, child: Text(t))) .toList(), onChanged: (v) => setState(() => selectedTypeOfWater = v), validator: (v) => v == null || v.isEmpty ? "Type of water is required" : null, isExpanded: true, alignment: Alignment.centerLeft, hint: Text( "Select type of water", style: fontTextStyle(14, const Color(0xFF939495), FontWeight.w400), ), icon: Image.asset('images/downarrow.png', width: 16, height: 16), decoration: const InputDecoration( border: OutlineInputBorder(), isDense: false, contentPadding: EdgeInsets.symmetric(horizontal: 12, vertical: 14), ), ), ), _LabeledField( label: "License Plate *", child: TextFormField( controller: _plateCtrl, validator: (v) => _required(v, field: "License Plate"), decoration: InputDecoration( hintText: "AB 05 H 4948", hintStyle: fontTextStyle(14, const Color(0xFF939495), FontWeight.w400), border: const OutlineInputBorder(), isDense: true, ), textCapitalization: TextCapitalization.characters, textInputAction: TextInputAction.next, ), ), _LabeledField( label: " Age of vehicle (opt)", child: TextFormField( controller: _mfgYearCtrl, decoration: InputDecoration( hintText: "12", hintStyle: fontTextStyle(14, const Color(0xFF939495), FontWeight.w400), border: const OutlineInputBorder(), isDense: true, ), keyboardType: TextInputType.number, inputFormatters: [ FilteringTextInputFormatter.digitsOnly, LengthLimitingTextInputFormatter(4), ], textInputAction: TextInputAction.next, ), ), _LabeledField( label: "Insurance Expiry Date (opt)", child: TextFormField( controller: _insExpiryCtrl, readOnly: true, decoration: InputDecoration( hintText: "DD-MM-YYYY", hintStyle: fontTextStyle(14, const Color(0xFF939495), FontWeight.w400), border: const OutlineInputBorder(), isDense: true, suffixIcon: const Icon(Icons.calendar_today_outlined, size: 18), ), onTap: _pickInsuranceDate, ), ), _LabeledField( label: "Tanker Images (Max 5)", child: Column( children: [ /// IMAGE GRID if(tankerImages.isNotEmpty) GridView.builder( shrinkWrap:true, physics:NeverScrollableScrollPhysics(), itemCount:tankerImages.length, gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount( crossAxisCount:3, crossAxisSpacing:8, mainAxisSpacing:8, ), itemBuilder:(context,index){ return Stack( children:[ ClipRRect( borderRadius:BorderRadius.circular(8), child:Image.file( File(tankerImages[index].path), width:double.infinity, height:double.infinity, fit:BoxFit.cover, ), ), Positioned( right:4, top:4, child:GestureDetector( onTap:(){ tankerImages.removeAt(index); modalSetState((){}); /// FIXED }, child:Container( decoration:const BoxDecoration( color:Colors.red, shape:BoxShape.circle, ), child:const Icon( Icons.close, color:Colors.white, size:18, ), ), ), ) ], ); }, ), const SizedBox(height:10), /// BUTTONS Row( children:[ Expanded( child:OutlinedButton.icon( onPressed:(){ pickTankerImages(modalSetState); /// FIXED }, icon:Icon(Icons.photo), label:Text("Gallery"), ), ), const SizedBox(width:10), Expanded( child:OutlinedButton.icon( onPressed:(){ pickFromCamera(modalSetState); /// FIXED }, icon:Icon(Icons.camera_alt), label:Text("Camera"), ), ), ], ), const SizedBox(height:5), Text( "${tankerImages.length}/5 images selected", style: fontTextStyle( 12, Colors.grey, FontWeight.w400 ), ), ], ), ), /// SAVE BUTTON (UNCHANGED) const SizedBox(height:20), SizedBox( width:double.infinity, child:ElevatedButton( style:ElevatedButton.styleFrom( backgroundColor:const Color(0xFF8270DB), foregroundColor:Colors.white, padding:const EdgeInsets.symmetric(vertical:14), shape:RoundedRectangleBorder( borderRadius:BorderRadius.circular(24), ), ), onPressed:_addTankerNew, child:Text( "Save", style:fontTextStyle( 14, Colors.white, FontWeight.w600 ), ), ), ), ], ), ), ), ), ), ); }, ); }, ); } /*Future openTankerSimpleSheet1(BuildContext context) async { await showModalBottomSheet( context: context, isScrollControlled: true, backgroundColor: Colors.transparent, builder: (context) { final viewInsets = MediaQuery.of(context).viewInsets.bottom; return FractionallySizedBox( heightFactor: 0.75, child: Container( decoration: const BoxDecoration( color: Colors.white, borderRadius: BorderRadius.vertical(top: Radius.circular(20)), ), child: Padding( padding: EdgeInsets.fromLTRB(20, 16, 20, 20 + viewInsets), child: Form( key: _formKey, child: SingleChildScrollView( child: Column( crossAxisAlignment: CrossAxisAlignment.stretch, children: [ Row( children: [ Expanded( child: Center( child: Container( width: 86, height: 4, margin: const EdgeInsets.only(bottom: 12), decoration: BoxDecoration( color: const Color(0xFFE0E0E0), borderRadius: BorderRadius.circular(2), ), ), ), ), ], ), _LabeledField( label: "Tanker Name *", child: TextFormField( controller: _nameCtrl, validator: (v) => _required(v, field: "Tanker Name"), textCapitalization: TextCapitalization.characters, inputFormatters: const [ FirstCharUppercaseFormatter(), // << live first-letter caps ], decoration: InputDecoration( hintText: "Enter Tanker Name", hintStyle: fontTextStyle(14, const Color(0xFF939495), FontWeight.w400), border: const OutlineInputBorder(), isDense: true, ), textInputAction: TextInputAction.next, ), ), _LabeledField( label: "Tanker Capacity (in L) *", child: TextFormField( controller: _capacityCtrl, validator: (v) => _required(v, field: "Tanker Capacity"), decoration: InputDecoration( hintText: "10,000", hintStyle: fontTextStyle(14, const Color(0xFF939495), FontWeight.w400), border: const OutlineInputBorder(), isDense: true, ), keyboardType: TextInputType.number, inputFormatters: [ FilteringTextInputFormatter.allow(RegExp(r'[0-9,]')), ], textInputAction: TextInputAction.next, ), ), _LabeledField( label: "Tanker Type *", child: DropdownButtonFormField( value: selectedType, dropdownColor: Colors.white, items: tankerTypes .map((t) => DropdownMenuItem(value: t, child: Text(t))) .toList(), onChanged: (v) => setState(() => selectedType = v), validator: (v) => v == null || v.isEmpty ? "Tanker Type is required" : null, isExpanded: true, alignment: Alignment.centerLeft, hint: Text( "Select Type", style: fontTextStyle(14, const Color(0xFF939495), FontWeight.w400), ), icon: Image.asset('images/downarrow.png', width: 16, height: 16), decoration: const InputDecoration( border: OutlineInputBorder(), isDense: false, contentPadding: EdgeInsets.symmetric(horizontal: 12, vertical: 14), ), ), ), _LabeledField( label: "Type of water *", child: DropdownButtonFormField( value: selectedTypeOfWater, dropdownColor: Colors.white, items: typeOfWater .map((t) => DropdownMenuItem(value: t, child: Text(t))) .toList(), onChanged: (v) => setState(() => selectedTypeOfWater = v), validator: (v) => v == null || v.isEmpty ? "Type of water is required" : null, isExpanded: true, alignment: Alignment.centerLeft, hint: Text( "Select type of water", style: fontTextStyle(14, const Color(0xFF939495), FontWeight.w400), ), icon: Image.asset('images/downarrow.png', width: 16, height: 16), decoration: const InputDecoration( border: OutlineInputBorder(), isDense: false, contentPadding: EdgeInsets.symmetric(horizontal: 12, vertical: 14), ), ), ), _LabeledField( label: "License Plate *", child: TextFormField( controller: _plateCtrl, validator: (v) => _required(v, field: "License Plate"), decoration: InputDecoration( hintText: "AB 05 H 4948", hintStyle: fontTextStyle(14, const Color(0xFF939495), FontWeight.w400), border: const OutlineInputBorder(), isDense: true, ), textCapitalization: TextCapitalization.characters, textInputAction: TextInputAction.next, ), ), _LabeledField( label: " Age of vehicle (opt)", child: TextFormField( controller: _mfgYearCtrl, decoration: InputDecoration( hintText: "12", hintStyle: fontTextStyle(14, const Color(0xFF939495), FontWeight.w400), border: const OutlineInputBorder(), isDense: true, ), keyboardType: TextInputType.number, inputFormatters: [ FilteringTextInputFormatter.digitsOnly, LengthLimitingTextInputFormatter(4), ], textInputAction: TextInputAction.next, ), ), _LabeledField( label: "Insurance Expiry Date (opt)", child: TextFormField( controller: _insExpiryCtrl, readOnly: true, decoration: InputDecoration( hintText: "DD-MM-YYYY", hintStyle: fontTextStyle(14, const Color(0xFF939495), FontWeight.w400), border: const OutlineInputBorder(), isDense: true, suffixIcon: const Icon(Icons.calendar_today_outlined, size: 18), ), onTap: _pickInsuranceDate, ), ), _LabeledField( label: "Tanker Images (Max 5)", child: Column( children: [ /// Grid Images if(tankerImages.isNotEmpty) GridView.builder( shrinkWrap: true, physics: NeverScrollableScrollPhysics(), itemCount: tankerImages.length, gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount( crossAxisCount: 3, crossAxisSpacing: 8, mainAxisSpacing: 8, ), itemBuilder: (context,index){ return Stack( children: [ ClipRRect( borderRadius: BorderRadius.circular(8), child: Image.file( File(tankerImages[index].path), width: double.infinity, height: double.infinity, fit: BoxFit.cover, ), ), Positioned( right: 4, top: 4, child: GestureDetector( onTap: (){ tankerImages.removeAt(index); setState(() {}); }, child: Container( decoration: BoxDecoration( color: Colors.red, shape: BoxShape.circle, ), child: Icon( Icons.close, color: Colors.white, size: 18, ), ), ), ) ], ); }, ), const SizedBox(height:10), /// Add Buttons Row( children: [ Expanded( child: OutlinedButton.icon( onPressed: pickTankerImages, icon: Icon(Icons.photo), label: Text("Gallery"), ), ), const SizedBox(width:10), Expanded( child: OutlinedButton.icon( onPressed: pickFromCamera, icon: Icon(Icons.camera_alt), label: Text("Camera"), ), ), ], ), const SizedBox(height:5), Text( "${tankerImages.length}/5 images selected", style: fontTextStyle( 12, Colors.grey, FontWeight.w400 ), ), ], ), ), const SizedBox(height: 20), SizedBox( width: double.infinity, child: ElevatedButton( style: ElevatedButton.styleFrom( backgroundColor: const Color(0xFF8270DB), foregroundColor: Colors.white, padding: const EdgeInsets.symmetric(vertical: 14), shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(24), ), ), onPressed: _addTanker, child: Text( "Save", style: fontTextStyle(14, Colors.white, FontWeight.w600), ), ), ), ], ), ), ), ), ), ); }, ); }*/ @override Widget build(BuildContext context) { List filtered = tankersList.where((it) { final q = search.trim().toLowerCase(); String capacityClean = it.capacity.replaceAll(",", ""); bool matchesSearch = q.isEmpty || it.tanker_name.toLowerCase().contains(q) || capacityClean.contains(q.replaceAll(",", "")) || it.type_of_water.toLowerCase().contains(q); bool matchesFilter = true; if(selectedFilter=="Active"){ matchesFilter = it.availability.contains('available') || it.availability.contains('in-use') || it.availability.contains('empty'); } if(selectedFilter=="Inactive"){ matchesFilter = it.availability.contains('inactive'); } if(selectedFilter=="Maintenance"){ matchesFilter = it.availability.contains('undermaintanence'); } return matchesSearch && matchesFilter; }).toList(); if(selectedSort=="Name"){ filtered.sort((a,b)=> a.tanker_name.compareTo(b.tanker_name)); } if(selectedSort=="Capacity"){ filtered.sort((a,b)=> int.parse(a.capacity.replaceAll(",","")) .compareTo( int.parse(b.capacity.replaceAll(",","")) )); } return Scaffold( backgroundColor: Colors.white, body: Column( children: [ // Header section Container( color: Colors.white, padding: const EdgeInsets.fromLTRB(16, 12, 16, 12), child: Column( children: [ const SizedBox(height: 12), Container( width: double.infinity, padding: const EdgeInsets.all(14), decoration: BoxDecoration( color: Colors.white, borderRadius: BorderRadius.circular(12), border: Border.all(color: const Color(0xFF939495)), ), child: Row( children: [ Column( mainAxisSize: MainAxisSize.min, children: [ Container( width: 40, height: 40, decoration: const BoxDecoration( color: Color(0xFFF6F0FF), borderRadius: BorderRadius.all(Radius.circular(8)), ), child: Padding( padding: const EdgeInsets.all(8.0), child: Image.asset('images/truck.png', fit: BoxFit.contain), ), ), const SizedBox(height: 8), Text('Total Tankers', style: fontTextStyle(12, const Color(0xFF2D2E30), FontWeight.w500), ), ], ), const Spacer(), Expanded( child: Column( crossAxisAlignment: CrossAxisAlignment.end, mainAxisSize: MainAxisSize.min, children: [ Text( tankersList.length.toString(), style: fontTextStyle( 24, const Color(0xFF0D3771), FontWeight.w500), ), const SizedBox(height: 6), tankersList.isEmpty ? Text( 'You have not added any tankers please click + button to add new Tanker.', textAlign: TextAlign.right, softWrap: true, style: fontTextStyle( 10, const Color(0xFF646566), FontWeight.w400), ) : const SizedBox(), ], ), ) ], ), ), const SizedBox(height: 12), IntrinsicHeight( child: /*Row( crossAxisAlignment: CrossAxisAlignment.stretch, children: [ Expanded(child: SmallMetricBox(title: 'Active', value: activeCount.toString())), *//*const SizedBox(width: 8), Expanded(child: SmallMetricBox(title: 'Inactive', value: inactiveCount.toString())),*//* const SizedBox(width: 8), Expanded(child: SmallMetricBox(title: 'Under Maintenance', value: maintenanceCount.toString())), ], ),*/ Row( crossAxisAlignment: CrossAxisAlignment.stretch, children: [ Expanded( child: GestureDetector( onTap: (){ setState(() { selectedFilter = "Active"; }); }, child: SmallMetricBox( title: 'Active', value: activeCount.toString() ), ), ), SizedBox(width: 8), Expanded( child: GestureDetector( onTap: (){ setState(() { selectedFilter = "Maintenance"; }); }, child: SmallMetricBox( title: 'Under Maintenance', value: maintenanceCount.toString() ), ), ), ], ) ), ], ), ), // List section Expanded( child: Container( color: const Color(0xFFF5F5F5), child: Padding( padding: const EdgeInsets.fromLTRB(16, 12, 16, 0), child: Column( children: [ Row( children: [ SizedBox( width: 270, child: Container( padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6), decoration: BoxDecoration( border: Border.all(color: const Color(0xFF939495), width: 0.5), borderRadius: BorderRadius.circular(22), ), child: Row( children: [ Container( width: 20, height: 20, decoration: const BoxDecoration( image: DecorationImage( image: AssetImage('images/search.png'), fit: BoxFit.contain, ), ), ), const SizedBox(width: 8), Expanded( child: TextField( decoration: InputDecoration( hintText: 'Search', hintStyle: fontTextStyle(12, const Color(0xFF939495), FontWeight.w400), border: InputBorder.none, isDense: true, ), onChanged: (v) => setState(() => search = v), ), ), ], ), ), ), const SizedBox(width: 16), GestureDetector( onTapDown:(TapDownDetails details){ _showFilterMenu( context, details.globalPosition); }, child: Container( width: 24, height: 24, decoration: const BoxDecoration( image: DecorationImage( image: AssetImage('images/icon_tune.png'), fit: BoxFit.contain, ), ), ), ), const SizedBox(width: 16), GestureDetector( onTapDown:(TapDownDetails details){ _showSortMenu( context, details.globalPosition); }, child: Container( width: 24, height: 24, decoration: const BoxDecoration( image: DecorationImage( image: AssetImage('images/up_down_arrow.png'), fit: BoxFit.contain, ), ), ), ), ], ), const SizedBox(height: 12), Expanded( child: isLoading ? const Center(child: CircularProgressIndicator()) : (filtered.isEmpty ? Center( child: Padding( padding: const EdgeInsets.symmetric( vertical: 12), child: Text( 'No Data Available', style: fontTextStyle( 12, const Color(0xFF939495), FontWeight.w500), ), ), ) : ListView.separated( itemCount: filtered.length, separatorBuilder: (_, __) => const SizedBox(height: 10), itemBuilder: (context, idx) { final it = filtered[idx]; return GestureDetector( onTap: () async{ final result = await Navigator.push( context, MaterialPageRoute( builder: (context) => TankerDetailsPage(tankerDetails: it), ), ); if (result == true) { _fetchTankers(); } }, child: TankCard( title: it.tanker_name, subtitle: it.type_of_water, capacity: it.capacity, code: it.license_plate, owner: it.supplier_name, status: List.from(it.availability), ), ); }, )), ), ], ), ), ), ), ], ), floatingActionButton: FloatingActionButton( onPressed: () => openTankerSimpleSheet(context), backgroundColor: const Color(0xFF000000), shape: const CircleBorder(), child: const Icon(Icons.add, color: Colors.white), ), ); } } // ====== SmallMetricBox ====== class SmallMetricBox extends StatelessWidget { final String title; final String value; const SmallMetricBox({super.key, required this.title, required this.value}); @override Widget build(BuildContext context) { return Container( padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 10), decoration: BoxDecoration( borderRadius: BorderRadius.circular(12), border: Border.all(color: const Color(0xFF939495)), color: Colors.white, ), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Text( title, maxLines: 2, overflow: TextOverflow.ellipsis, style: fontTextStyle(12, const Color(0xFF2D2E30), FontWeight.w500), ), Text( value, style: fontTextStyle(24, const Color(0xFF0D3771), FontWeight.w500), ), ], ), ); } } // ====== TankCard ====== class TankCard extends StatelessWidget { final String title; final String subtitle; final String capacity; final String code; final String owner; final List status; const TankCard({ super.key, required this.title, required this.subtitle, required this.capacity, required this.code, required this.owner, required this.status, }); Color _chipColor(String s) { switch (s) { case 'filled': return const Color(0xFFFFFFFF); case 'available': return const Color(0xFFE8F0FF); case 'empty': return const Color(0xFFFFEEEE); case 'in-use': return const Color(0xFFFFF0E6); case 'maintenance': return const Color(0xFFFFF4E6); default: return const Color(0xFFECECEC); } } Color _chipTextColor(String s) { switch (s) { case 'filled': return const Color(0xFF1D7AFC); case 'available': return const Color(0xFF0A9E04); case 'empty': return const Color(0xFFE2483D); case 'in-use': return const Color(0xFFEA843B); case 'maintenance': return const Color(0xFFD0AE3C); default: return Colors.black87; } } @override Widget build(BuildContext context) { return Container( padding: const EdgeInsets.all(12), decoration: BoxDecoration( color: Colors.white, borderRadius: BorderRadius.circular(12), border: Border.all(color: Colors.grey.shade200), ), child: Row( children: [ Expanded( child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Row( children: status.map((s) { final chipTextColor = _chipTextColor(s); return Container( margin: const EdgeInsets.only(right: 6), padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4), decoration: BoxDecoration( color: _chipColor(s), borderRadius: BorderRadius.circular(8), border: Border.all(color: chipTextColor, width: 1), ), child: Text( s, style: fontTextStyle(10, chipTextColor, FontWeight.w400), ), ); }).toList(), ), const SizedBox(height: 8), Text(title, style: fontTextStyle(14, const Color(0xFF343637), FontWeight.w600)), const SizedBox(height: 6), Text("$subtitle - $capacity L", style: fontTextStyle(10, const Color(0xFF343637), FontWeight.w600)), const SizedBox(height: 10), Row( children: [ Image.asset('images/avatar.png', width: 12, height: 12), const SizedBox(width: 6), Expanded( child: Text(owner, style: fontTextStyle(8, const Color(0xFF646566), FontWeight.w400)), ), ], ), ], ), ), Column( crossAxisAlignment: CrossAxisAlignment.end, children: [ Text(code, style: fontTextStyle(10, const Color(0xFF515253), FontWeight.w400)), const SizedBox(height: 28), ], ), ], ), ); } } // ====== Labeled Field Wrapper ====== class _LabeledField extends StatelessWidget { final String label; final Widget child; const _LabeledField({required this.label, required this.child}); String _capFirstWord(String input) { if (input.isEmpty) return input; final i = input.indexOf(RegExp(r'\S')); if (i == -1) return input; return input.replaceRange(i, i + 1, input[i].toUpperCase()); } @override Widget build(BuildContext context) { return Padding( padding: const EdgeInsets.only(bottom: 14.0), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Text( _capFirstWord(label), style: fontTextStyle(12, const Color(0xFF515253), FontWeight.w600), ), const SizedBox(height: 6), child, ], ), ); } }