design table
This commit is contained in:
parent
e99b26d0ba
commit
0dcd0ae0d2
@ -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(
|
// Tables Grid
|
||||||
elevation: 1.5,
|
Expanded(
|
||||||
shape: RoundedRectangleBorder(
|
child:
|
||||||
borderRadius: BorderRadius.circular(14),
|
isLoading
|
||||||
),
|
? const Center(child: CircularProgressIndicator())
|
||||||
child: Padding(
|
: Padding(
|
||||||
padding: const EdgeInsets.all(10),
|
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,
|
||||||
),
|
|
||||||
),
|
|
||||||
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(
|
|
||||||
color: Colors.white,
|
|
||||||
fontSize: 10,
|
|
||||||
),
|
),
|
||||||
),
|
itemBuilder: (context, index) {
|
||||||
),
|
final table = tables[index];
|
||||||
],
|
final isSelectable = isTableSelectable(
|
||||||
),
|
table.status,
|
||||||
const Spacer(),
|
);
|
||||||
Row(
|
|
||||||
children: [
|
return Container(
|
||||||
const Icon(Icons.people_outline,
|
decoration: BoxDecoration(
|
||||||
size: 14, color: Colors.grey),
|
color: Colors.white,
|
||||||
const SizedBox(width: 4),
|
borderRadius: BorderRadius.circular(12),
|
||||||
Text(
|
border: Border.all(
|
||||||
'${table.capacity} personnes',
|
color: Colors.grey.shade200,
|
||||||
style: const TextStyle(
|
),
|
||||||
fontSize: 11.5,
|
boxShadow: [
|
||||||
color: Colors.grey,
|
BoxShadow(
|
||||||
),
|
color: Colors.grey.shade100,
|
||||||
),
|
blurRadius: 4,
|
||||||
],
|
offset: const Offset(0, 2),
|
||||||
),
|
),
|
||||||
const SizedBox(height: 8),
|
],
|
||||||
SizedBox(
|
),
|
||||||
width: double.infinity,
|
child: Padding(
|
||||||
height: 30,
|
padding: const EdgeInsets.all(16),
|
||||||
child: ElevatedButton(
|
child: Column(
|
||||||
onPressed: isAvailable ? () {} : null,
|
crossAxisAlignment:
|
||||||
style: ElevatedButton.styleFrom(
|
CrossAxisAlignment.start,
|
||||||
backgroundColor: Colors.deepOrange,
|
children: [
|
||||||
padding: EdgeInsets.zero,
|
// Table name and status badge
|
||||||
shape: RoundedRectangleBorder(
|
Row(
|
||||||
borderRadius: BorderRadius.circular(6),
|
mainAxisAlignment:
|
||||||
),
|
MainAxisAlignment.spaceBetween,
|
||||||
),
|
children: [
|
||||||
child: const Text(
|
Text(
|
||||||
"Réserver",
|
table.nom,
|
||||||
style: TextStyle(
|
style: const TextStyle(
|
||||||
color: Colors.white,
|
fontWeight: FontWeight.bold,
|
||||||
fontSize: 12,
|
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,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
},
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
|
|
||||||
|
// Legend
|
||||||
|
const SizedBox(height: 20),
|
||||||
|
Row(
|
||||||
|
mainAxisAlignment: MainAxisAlignment.center,
|
||||||
|
children: [
|
||||||
|
_buildLegendItem('Disponible', Colors.green),
|
||||||
|
const SizedBox(width: 24),
|
||||||
|
_buildLegendItem(
|
||||||
|
'Occupée',
|
||||||
|
Colors.green.shade800,
|
||||||
|
),
|
||||||
|
const SizedBox(width: 24),
|
||||||
|
_buildLegendItem('Réservée', Colors.orange),
|
||||||
|
],
|
||||||
|
),
|
||||||
],
|
],
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
);
|
),
|
||||||
},
|
|
||||||
),
|
// 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),
|
||||||
|
),
|
||||||
|
],
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user