C4M
/
CARING_RESTORANT
4
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

design table

table
Stephane 4 months ago
parent
e99b26d0ba
commit
0dcd0ae0d2
1 changed files with 279 additions and 87 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 366
      lib/pages/tables.dart

366
lib/pages/tables.dart
View File

@ -61,7 +61,7 @@ class _TablesScreenState extends State<TablesScreen> {
case 'available': case 'available':
return Colors.green; return Colors.green;
case 'occupied': case 'occupied':
return Colors.red; return Colors.orange;
case 'reserved': case 'reserved':
return Colors.orange; return Colors.orange;
default: default:
@ -82,6 +82,10 @@ class _TablesScreenState extends State<TablesScreen> {
} }
} }
bool isTableSelectable(String status) {
return status == 'available';
}
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
final screenWidth = MediaQuery.of(context).size.width; final screenWidth = MediaQuery.of(context).size.width;
@ -94,107 +98,295 @@ class _TablesScreenState extends State<TablesScreen> {
} }
return Scaffold( return Scaffold(
appBar: AppBar(title: const Text('Sélectionner une table')), backgroundColor: Colors.grey.shade50,
body: isLoading body: Column(
? const Center(child: CircularProgressIndicator()) children: [
: Padding( // Header
padding: const EdgeInsets.all(12.0), Container(
child: GridView.builder( width: double.infinity,
itemCount: tables.length, color: Colors.white,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount( padding: const EdgeInsets.symmetric(vertical: 24, horizontal: 20),
crossAxisCount: crossAxisCount, child: Column(
crossAxisSpacing: 12, children: [
mainAxisSpacing: 12, const Text(
childAspectRatio: 2.3, // ⬅️ plus plat ici 'Sélectionner une table',
style: TextStyle(
fontSize: 24,
fontWeight: FontWeight.bold,
color: Colors.black87,
),
), ),
itemBuilder: (context, index) { const SizedBox(height: 8),
final table = tables[index]; Text(
final isAvailable = table.status == 'available'; 'Choisissez une table pour commencer une nouvelle commande',
style: TextStyle(fontSize: 14, color: Colors.grey.shade600),
return Card( ),
elevation: 1.5, ],
shape: RoundedRectangleBorder( ),
borderRadius: BorderRadius.circular(14), ),
),
child: Padding( // Tables Grid
padding: const EdgeInsets.all(10), Expanded(
child:
isLoading
? const Center(child: CircularProgressIndicator())
: Padding(
padding: const EdgeInsets.all(20.0),
child: Column( child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [ children: [
// Titre + badge Expanded(
Row( child: GridView.builder(
mainAxisAlignment: MainAxisAlignment.spaceBetween, itemCount: tables.length,
children: [ gridDelegate:
Text( SliverGridDelegateWithFixedCrossAxisCount(
table.nom, crossAxisCount: crossAxisCount,
style: const TextStyle( crossAxisSpacing: 16,
fontWeight: FontWeight.bold, mainAxisSpacing: 16,
fontSize: 13, childAspectRatio: 1.3,
), ),
), itemBuilder: (context, index) {
Container( final table = tables[index];
padding: const EdgeInsets.symmetric( final isSelectable = isTableSelectable(
horizontal: 8, table.status,
vertical: 2, );
),
decoration: BoxDecoration( return Container(
color: getStatusColor(table.status), decoration: BoxDecoration(
borderRadius: BorderRadius.circular(50),
),
child: Text(
getStatusLabel(table.status),
style: const TextStyle(
color: Colors.white, 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( Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [ children: [
const Icon(Icons.people_outline, _buildLegendItem('Disponible', Colors.green),
size: 14, color: Colors.grey), const SizedBox(width: 24),
const SizedBox(width: 4), _buildLegendItem(
Text( 'Occupée',
'${table.capacity} personnes', Colors.green.shade800,
style: const TextStyle(
fontSize: 11.5,
color: Colors.grey,
),
), ),
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),
),
],
); );
} }
} }

Write Preview
Loading…
Cancel
Save