Side Panel

lib/core/models/mesas_model.dart

@@ -2,12 +2,12 @@ import 'package:flutter/material.dart';
 import 'package:turquessa_mesas_hoster/core/models/basico_model.dart';
 import 'package:turquessa_mesas_hoster/core/models/mesa_model.dart';
 
-// enum EstadoPedido {
-//   disponible,
-//   surtida,
-//   preparacion,
-//   cobrado,
-// }
+enum EstadoPedido {
+  disponible,
+  surtida,
+  preparacion,
+  cobrado,
+}
 
 // class Mesas extends Basico {
 //   String? nombre;
@@ -29,11 +29,11 @@ import 'package:turquessa_mesas_hoster/core/models/mesa_model.dart';
 //     }..addAll(super.toJson());
 //   }
 // }
+
 class TableItem extends Basico {
   final int id;
   final String name;
-
-  final String status;
+  final EstadoPedido status;
 
   TableItem({
     required this.id,

lib/mvvm/views/home/home_screen.dart

@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:provider/provider.dart';
+import 'package:turquessa_mesas_hoster/core/models/mesa_model.dart';
 import 'package:turquessa_mesas_hoster/utils/widgets/custom_appbar.dart';
 import 'package:turquessa_mesas_hoster/core/models/mesas_model.dart';
 
@@ -13,6 +14,7 @@ class HomeScreen extends StatefulWidget {
 }
 
 class Formulario extends State<HomeScreen> {
+  int _selectedIndex = 0;
   @override
   void initState() {
     super.initState();
@@ -30,7 +32,7 @@ class Formulario extends State<HomeScreen> {
   @override
   Widget build(BuildContext context) {
     final mesaViewModel = Provider.of<MesaViewModel>(context);
-    var _selectedIndex;
+
     return Scaffold(
       backgroundColor: Colors.grey.shade200,
       appBar: AppBar(
@@ -40,7 +42,7 @@ class Formulario extends State<HomeScreen> {
         children: [
           NavigationRail(
             backgroundColor: Color.fromARGB(255, 25, 30, 41),
-            selectedIndex: ,
+            selectedIndex: _selectedIndex,
             onDestinationSelected: (int index) {
               setState(() {
                 _selectedIndex = index;
@@ -83,7 +85,9 @@ class Formulario extends State<HomeScreen> {
                   final mesa = mesaViewModel.mesas[index];
                   return GestureDetector(
                     onTap: () {
-                      mesaViewModel.selectMesa(mesa);
+                      setState(() {
+                        mesaViewModel.selectMesa(mesa);
+                      });
                     },
                     child: TableCard(
                       icon: Icons.table_chart,
@@ -96,24 +100,27 @@ class Formulario extends State<HomeScreen> {
               ),
             ),
           ),
-          //if (mesaViewModel.selectedMesa != null)
-          Expanded(
-              flex: 1,
-              child: Container(
-                margin: const EdgeInsets.all(10),
-                decoration: BoxDecoration(
-                  color: Colors.white,
-                  borderRadius: BorderRadius.circular(10),
-                  boxShadow: [
-                    BoxShadow(
-                      color: Colors.grey.withOpacity(0.2),
-                      blurRadius: 5,
-                      spreadRadius: 1,
-                    )
-                  ],
-                ),
-                // child: TablaDetalles(table: selectedTable!),
-              )),
+          if (mesaViewModel.selectedMesa != null)
+            Expanded(
+                flex: 1,
+                child: Container(
+                  margin: const EdgeInsets.all(10),
+                  decoration: BoxDecoration(
+                    color: Colors.white,
+                    borderRadius: BorderRadius.circular(10),
+                    boxShadow: [
+                      BoxShadow(
+                        color: Colors.grey.withOpacity(0.2),
+                        blurRadius: 5,
+                        spreadRadius: 1,
+                      )
+                    ],
+                  ),
+                  child: TablaDetalles(
+                      table: mesaViewModel.selectedMesa ??
+                          Mesa(
+                              activa: false, id: 0, nombre: 'Mesa sin nombre')),
+                )),
         ],
       ),
     );
@@ -152,42 +159,85 @@ class TableCard extends StatelessWidget {
   }
 }
 
-class TableDetailsPanel extends StatelessWidget {
-  final TableItem table;
+class TablaDetalles extends StatelessWidget {
+  final Mesa table;
 
-  const TableDetailsPanel({
+  const TablaDetalles({
     Key? key,
     required this.table,
   }) : super(key: key);
 
   @override
   Widget build(BuildContext context) {
-    return Column(
-      crossAxisAlignment: CrossAxisAlignment.start,
-      children: [
-        // Encabezado del panel
-        Container(
-          padding: const EdgeInsets.all(16),
-          decoration: BoxDecoration(
-            borderRadius: const BorderRadius.vertical(top: Radius.circular(10)),
+    return Container(
+      decoration: BoxDecoration(
+        color: Colors.white,
+        borderRadius: BorderRadius.circular(10),
+      ),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          // Encabezado del panel
+          Container(
+            padding: const EdgeInsets.all(16),
+            decoration: BoxDecoration(
+              color: table.activa! ? Colors.blue : Colors.grey,
+              borderRadius:
+                  const BorderRadius.vertical(top: Radius.circular(10)),
+            ),
+            child: Row(
+              mainAxisAlignment: MainAxisAlignment.spaceBetween,
+              children: [
+                Row(
+                  children: [
+                    const Icon(Icons.table_restaurant,
+                        color: Colors.white, size: 24),
+                    const SizedBox(width: 8),
+                    Text(
+                      table.nombre ?? 'Mesa sin nombre',
+                      style: const TextStyle(
+                        color: Colors.white,
+                        fontSize: 20,
+                        fontWeight: FontWeight.bold,
+                      ),
+                    ),
+                  ],
+                ),
+                // Indicador de estado
+                Container(
+                  padding:
+                      const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
+                  decoration: BoxDecoration(
+                    color: Colors.white.withOpacity(0.2),
+                    borderRadius: BorderRadius.circular(20),
+                  ),
+                  child: Text(
+                    table.activa! ? 'Activa' : 'Inactiva',
+                    style: const TextStyle(
+                      color: Colors.white,
+                      fontWeight: FontWeight.bold,
+                    ),
+                  ),
+                ),
+              ],
+            ),
           ),
-          child: Row(
-            children: [
-              Icon(Icons.person, color: Colors.white, size: 24),
-              const SizedBox(width: 8),
-              Text(
-                table.name,
-                style: const TextStyle(
-                  color: Colors.white,
-                  fontSize: 20,
-                  fontWeight: FontWeight.bold,
+          // Contenido de la mesa
+          Padding(
+            padding: const EdgeInsets.all(16),
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                Text(
+                  'ID: ${table.id}',
+                  style: const TextStyle(fontSize: 16),
                 ),
-              ),
-            ],
+                const SizedBox(height: 8),
+              ],
+            ),
           ),
-        ),
-        // Contenido específico según el tipo
-      ],
+        ],
+      ),
     );
   }
 }