diff --git a/lib/pages/tables.dart b/lib/pages/tables.dart index 6aa14a7..89133aa 100644 --- a/lib/pages/tables.dart +++ b/lib/pages/tables.dart @@ -61,7 +61,7 @@ class _TablesScreenState extends State { case 'available': return Colors.green; case 'occupied': - return Colors.red; + return Colors.orange; case 'reserved': return Colors.orange; default: @@ -82,6 +82,10 @@ class _TablesScreenState extends State { } } + bool isTableSelectable(String status) { + return status == 'available'; + } + @override Widget build(BuildContext context) { final screenWidth = MediaQuery.of(context).size.width; @@ -94,107 +98,295 @@ class _TablesScreenState extends State { } return Scaffold( - appBar: AppBar(title: const Text('Sélectionner une table')), - body: isLoading - ? const Center(child: CircularProgressIndicator()) - : Padding( - padding: const EdgeInsets.all(12.0), - child: GridView.builder( - itemCount: tables.length, - gridDelegate: SliverGridDelegateWithFixedCrossAxisCount( - crossAxisCount: crossAxisCount, - crossAxisSpacing: 12, - mainAxisSpacing: 12, - childAspectRatio: 2.3, // ⬅️ plus plat ici + backgroundColor: Colors.grey.shade50, + body: Column( + children: [ + // Header + Container( + width: double.infinity, + color: Colors.white, + padding: const EdgeInsets.symmetric(vertical: 24, horizontal: 20), + child: Column( + children: [ + const Text( + 'Sélectionner une table', + style: TextStyle( + fontSize: 24, + fontWeight: FontWeight.bold, + color: Colors.black87, + ), ), - itemBuilder: (context, index) { - final table = tables[index]; - final isAvailable = table.status == 'available'; - - return Card( - elevation: 1.5, - shape: RoundedRectangleBorder( - borderRadius: BorderRadius.circular(14), - ), - child: Padding( - padding: const EdgeInsets.all(10), + const SizedBox(height: 8), + Text( + 'Choisissez une table pour commencer une nouvelle commande', + style: TextStyle(fontSize: 14, color: Colors.grey.shade600), + ), + ], + ), + ), + + // Tables Grid + Expanded( + child: + isLoading + ? const Center(child: CircularProgressIndicator()) + : Padding( + padding: const EdgeInsets.all(20.0), child: Column( - crossAxisAlignment: CrossAxisAlignment.start, children: [ - // Titre + badge - Row( - mainAxisAlignment: MainAxisAlignment.spaceBetween, - children: [ - Text( - table.nom, - style: const TextStyle( - fontWeight: FontWeight.bold, - fontSize: 13, - ), - ), - Container( - padding: const EdgeInsets.symmetric( - horizontal: 8, - vertical: 2, - ), - decoration: BoxDecoration( - color: getStatusColor(table.status), - borderRadius: BorderRadius.circular(50), - ), - child: Text( - getStatusLabel(table.status), - style: const TextStyle( + Expanded( + child: GridView.builder( + itemCount: tables.length, + gridDelegate: + SliverGridDelegateWithFixedCrossAxisCount( + crossAxisCount: crossAxisCount, + crossAxisSpacing: 16, + mainAxisSpacing: 16, + childAspectRatio: 1.3, + ), + itemBuilder: (context, index) { + final table = tables[index]; + final isSelectable = isTableSelectable( + table.status, + ); + + return Container( + decoration: BoxDecoration( color: Colors.white, - fontSize: 10, + borderRadius: BorderRadius.circular(12), + border: Border.all( + color: Colors.grey.shade200, + ), + boxShadow: [ + BoxShadow( + color: Colors.grey.shade100, + blurRadius: 4, + offset: const Offset(0, 2), + ), + ], ), - ), - ), - ], + child: Padding( + padding: const EdgeInsets.all(16), + child: Column( + crossAxisAlignment: + CrossAxisAlignment.start, + children: [ + // Table name and status badge + Row( + mainAxisAlignment: + MainAxisAlignment.spaceBetween, + children: [ + Text( + table.nom, + style: const TextStyle( + fontWeight: FontWeight.bold, + fontSize: 16, + color: Colors.black87, + ), + ), + Container( + padding: + const EdgeInsets.symmetric( + horizontal: 12, + vertical: 4, + ), + decoration: BoxDecoration( + color: getStatusColor( + table.status, + ), + borderRadius: + BorderRadius.circular(20), + ), + child: Text( + getStatusLabel(table.status), + style: const TextStyle( + color: Colors.white, + fontSize: 12, + fontWeight: FontWeight.w500, + ), + ), + ), + ], + ), + + const SizedBox(height: 12), + + // Capacity + Row( + children: [ + Icon( + Icons.people_outline, + size: 16, + color: Colors.grey.shade600, + ), + const SizedBox(width: 6), + Text( + 'Capacité: ${table.capacity} personnes', + style: TextStyle( + fontSize: 13, + color: Colors.grey.shade600, + ), + ), + ], + ), + + const Spacer(), + + // Button + SizedBox( + width: double.infinity, + height: 36, + child: ElevatedButton( + onPressed: + isSelectable ? () {} : null, + style: ElevatedButton.styleFrom( + backgroundColor: + isSelectable + ? Colors.green.shade700 + : Colors.grey.shade300, + foregroundColor: Colors.white, + elevation: 0, + shape: RoundedRectangleBorder( + borderRadius: + BorderRadius.circular(8), + ), + ), + child: Text( + isSelectable + ? "Sélectionner" + : "Indisponible", + style: TextStyle( + fontSize: 13, + fontWeight: FontWeight.w500, + color: + isSelectable + ? Colors.white + : Colors.grey.shade600, + ), + ), + ), + ), + ], + ), + ), + ); + }, + ), ), - const Spacer(), + + // Legend + const SizedBox(height: 20), Row( + mainAxisAlignment: MainAxisAlignment.center, children: [ - const Icon(Icons.people_outline, - size: 14, color: Colors.grey), - const SizedBox(width: 4), - Text( - '${table.capacity} personnes', - style: const TextStyle( - fontSize: 11.5, - color: Colors.grey, - ), + _buildLegendItem('Disponible', Colors.green), + const SizedBox(width: 24), + _buildLegendItem( + 'Occupée', + Colors.green.shade800, ), + const SizedBox(width: 24), + _buildLegendItem('Réservée', Colors.orange), ], ), - const SizedBox(height: 8), - SizedBox( - width: double.infinity, - height: 30, - child: ElevatedButton( - onPressed: isAvailable ? () {} : null, - style: ElevatedButton.styleFrom( - backgroundColor: Colors.deepOrange, - padding: EdgeInsets.zero, - shape: RoundedRectangleBorder( - borderRadius: BorderRadius.circular(6), - ), - ), - child: const Text( - "Réserver", - style: TextStyle( - color: Colors.white, - fontSize: 12, - ), - ), - ), - ), ], ), ), - ); - }, - ), + ), + + // Bottom Navigation + Container( + color: Colors.white, + padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 12), + child: Row( + children: [ + Container( + padding: const EdgeInsets.symmetric( + horizontal: 16, + vertical: 8, + ), + decoration: BoxDecoration( + color: Colors.green.shade700, + borderRadius: BorderRadius.circular(20), + ), + child: const Row( + mainAxisSize: MainAxisSize.min, + children: [ + Icon( + Icons.table_restaurant, + color: Colors.white, + size: 16, + ), + SizedBox(width: 6), + Text( + 'Tables', + style: TextStyle( + color: Colors.white, + fontWeight: FontWeight.w500, + ), + ), + ], + ), + ), + const SizedBox(width: 20), + Row( + children: [ + Icon( + Icons.receipt_long_outlined, + color: Colors.grey.shade600, + size: 16, + ), + const SizedBox(width: 6), + Text( + 'Commandes', + style: TextStyle(color: Colors.grey.shade600), + ), + ], + ), + const Spacer(), + Row( + children: [ + Icon( + Icons.person_outline, + color: Colors.grey.shade600, + size: 16, + ), + const SizedBox(width: 6), + Text( + 'Chef Pierre', + style: TextStyle(color: Colors.grey.shade600), + ), + const SizedBox(width: 8), + Icon( + Icons.expand_more, + color: Colors.grey.shade600, + size: 16, + ), + ], + ), + ], ), + ), + ], + ), + ); + } + + Widget _buildLegendItem(String label, Color color) { + return Row( + mainAxisSize: MainAxisSize.min, + children: [ + Container( + width: 12, + height: 12, + decoration: BoxDecoration(color: color, shape: BoxShape.circle), + ), + const SizedBox(width: 6), + Text( + label, + style: TextStyle(fontSize: 13, color: Colors.grey.shade700), + ), + ], ); } }