lib/mvvm/viewmodels/mesa_view_model.dart

@@ -140,7 +140,7 @@ class MesaViewModel extends ChangeNotifier {
   // }
 
   //todo: Cambio de estado de mesa provisional
-  void CambiarEstadoPedidoMesa(EstadoPedido nuevoestado) {
+  void cambiarEstadoPedidoMesa(EstadoPedido nuevoestado) {
     if (_selectedMesa != null) {
       _selectedMesa!.estado = nuevoestado;
       notifyListeners();

lib/mvvm/views/home/home_screen.dart

@@ -3,6 +3,7 @@ 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/utils/widgets/custom_card.dart';
+import 'package:turquessa_mesas_hoster/utils/widgets/get_status_style.dart';
 import 'package:turquessa_mesas_hoster/utils/widgets/navigation_rail.dart';
 
 import '../../../utils/widgets/ordenes_card.dart';
@@ -134,10 +135,11 @@ class TablaDetalles extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    final mesaViewModel = Provider.of<MesaViewModel>(context, listen: true);
+    final style = getStatusStyle(status);
     return Container(
-      padding: const EdgeInsets.all(10),
       decoration: BoxDecoration(
-        color: Colors.white,
+        color: Color.fromARGB(255, 247, 249, 250),
         boxShadow: [
           BoxShadow(
             color: Colors.grey.withOpacity(0.2),
@@ -152,9 +154,7 @@ class TablaDetalles extends StatelessWidget {
           Container(
             padding: const EdgeInsets.all(16),
             decoration: BoxDecoration(
-              color: table.activa! ? Colors.blue : Colors.grey,
-              borderRadius:
-                  const BorderRadius.vertical(top: Radius.circular(10)),
+              color: style.iconColor,
             ),
             child: Row(
               mainAxisAlignment: MainAxisAlignment.spaceBetween,
@@ -208,11 +208,16 @@ class TablaDetalles extends StatelessWidget {
                     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: GestureDetector(
+                    onTap: () {
+                      mesaViewModel.cambiarEstadoPedidoMesa(style.nextStatus);
+                    },
+                    child: Text(table.activa! ? 'Activa' : 'Inactiva',
+                        style: const TextStyle(
+                          color: Colors.white,
+                          fontWeight: FontWeight.bold,
+                        )),
+                  ),
                 ),
               ],
             ),
@@ -227,13 +232,13 @@ class TablaDetalles extends StatelessWidget {
                   children: [
                     Row(
                       children: [
-                        Text(
-                          "Estatus: ${status.toString().split('.').last}",
-                          style: const TextStyle(
-                            fontWeight: FontWeight.bold,
-                            color: Colors.black,
-                          ),
-                        ),
+                        // Text(
+                        //   "Estatus: ${status.toString().split('.').last}",
+                        //   style: const TextStyle(
+                        //     fontWeight: FontWeight.bold,
+                        //     color: Colors.black,
+                        //   ),
+                        // ),
                       ],
                     ),
                     // const SizedBox(height: 16),
@@ -243,13 +248,6 @@ class TablaDetalles extends StatelessWidget {
                       padding: const EdgeInsets.all(16),
                       decoration: BoxDecoration(
                         color: Colors.white,
-                        boxShadow: [
-                          BoxShadow(
-                            color: Colors.grey.withOpacity(0.2),
-                            blurRadius: 1,
-                            spreadRadius: 1,
-                          )
-                        ],
                         borderRadius: BorderRadius.circular(10),
                         border: Border.all(color: Colors.grey.shade200),
                       ),
@@ -260,6 +258,7 @@ class TablaDetalles extends StatelessWidget {
                               const Text("Pedido Actual",
                                   style: TextStyle(
                                     fontWeight: FontWeight.bold,
+                                    fontSize: 20,
                                     color: Colors.black,
                                   )),
                               GestureDetector(
@@ -268,8 +267,8 @@ class TablaDetalles extends StatelessWidget {
                                       .pushNamed('creacion-pedido');
                                 },
                                 child: const Row(children: [
-                                  const Text("Ver detalle"),
-                                  const Icon(Icons.arrow_forward_ios_rounded),
+                                  Text("Ver detalle"),
+                                  Icon(Icons.arrow_forward_ios_rounded),
                                 ]),
                               )
                             ]),
@@ -291,6 +290,23 @@ class TablaDetalles extends StatelessWidget {
                           precio: "15.20",
                           cantidad: 1,
                         ),
+                        const SizedBox(height: 10),
+                        const Divider(),
+                        const Row(
+                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                          children: [
+                            Text(
+                              "Total",
+                              style: TextStyle(
+                                  fontSize: 20, fontWeight: FontWeight.bold),
+                            ),
+                            Text(
+                              "\$45.60",
+                              style: TextStyle(
+                                  fontSize: 20, fontWeight: FontWeight.bold),
+                            ),
+                          ],
+                        )
                       ]),
                     ),
 
@@ -316,63 +332,26 @@ class TableCard extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final status = mesa.estado ?? EstadoPedido.disponible;
+    final mesaViewModel = Provider.of<MesaViewModel>(context, listen: true);
 
-    Color backgroundColor;
-    Color iconColor;
-    IconData icon;
-    Color cardColor;
-
-    switch (status) {
-      case EstadoPedido.disponible:
-        backgroundColor = const Color.fromARGB(255, 220, 252, 232);
-        iconColor = Colors.green;
-        icon = Icons.table_restaurant_rounded;
-        cardColor = const Color.fromARGB(255, 220, 252, 232);
-        break;
-      case EstadoPedido.surtida:
-        backgroundColor = const Color.fromARGB(255, 220, 234, 254);
-        iconColor = Colors.blue;
-        icon = Icons.coffee_rounded;
-        cardColor = const Color.fromARGB(255, 220, 234, 254);
-        break;
-      case EstadoPedido.preparacion:
-        backgroundColor = const Color.fromARGB(255, 243, 232, 255);
-        iconColor = Colors.deepPurple;
-        icon = Icons.kitchen_rounded;
-        cardColor = const Color.fromARGB(255, 243, 232, 255);
-        break;
-      case EstadoPedido.cobrado:
-        backgroundColor = const Color.fromARGB(255, 255, 238, 213);
-        iconColor = Colors.amber;
-        icon = Icons.attach_money_rounded;
-        cardColor = const Color.fromARGB(255, 255, 238, 213);
-        break;
-      default:
-        backgroundColor = Colors.grey.shade200;
-        iconColor = Colors.grey;
-        icon = Icons.settings;
-        cardColor = Colors.white;
-        break;
-    }
+    final style = getStatusStyle(status);
 
     return Card(
-      color: cardColor,
+      borderOnForeground: false,
+      color: style.cardColor,
       child: Column(
         mainAxisAlignment: MainAxisAlignment.center,
         children: [
           IconButton(
             onPressed: () {
-              if (status == EstadoPedido.disponible) {
-                final mesaViewModel =
-                    Provider.of<MesaViewModel>(context, listen: false);
-                mesaViewModel.CambiarEstadoPedidoMesa(EstadoPedido.preparacion);
-              }
+              mesaViewModel.cambiarEstadoPedidoMesa(style.nextStatus);
+              print('Cambiando estado de la mesa ${style.nextStatus}');
             },
             iconSize: 48,
             style: ButtonStyle(
-              backgroundColor: MaterialStateProperty.all(backgroundColor),
+              backgroundColor: MaterialStateProperty.all(style.backgroundColor),
             ),
-            icon: Icon(icon, color: iconColor),
+            icon: Icon(style.icon, color: style.iconColor),
           ),
           const SizedBox(height: 8),
           Text(
@@ -384,6 +363,20 @@ class TableCard extends StatelessWidget {
               fontSize: 20,
               fontWeight: FontWeight.w500,
             ),
+          ),
+          Container(
+            padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
+            decoration: BoxDecoration(
+              color: style.backgroundColor,
+              borderRadius: BorderRadius.circular(20),
+            ),
+            child: Text(
+              status.toString().split('.').last,
+              style: TextStyle(
+                color: style.iconColor,
+                fontWeight: FontWeight.bold,
+              ),
+            ),
           )
         ],
       ),

lib/mvvm/views/pedido/creacion_pedido_screen.dart

@@ -88,40 +88,42 @@ class _CreacionPedidoState extends State<CreacionPedido> {
                         scrollDirection: Axis.horizontal,
                         child: SingleChildScrollView(
                           scrollDirection: Axis.vertical,
-                          child: DataTable(
-                            columnSpacing: 16,
-                            horizontalMargin: 12,
-                            dataRowHeight: 60,
-                            headingRowHeight: 48,
-                            columns: const <DataColumn>[
-                              DataColumn(label: Text('Cant')),
-                              DataColumn(label: Text('Nombre')),
-                              DataColumn(label: Text('SubTotal')),
-                              DataColumn(label: Text('Acciones')),
-                            ],
-                            rows: creacionPedidoViewModel
-                                .carrito // Aquí usamos la lista de carrito
-                                .map(
-                                  (e) => DataRow(cells: [
-                                    DataCell(
-                                      Text(e.venta.toString()),
-                                    ),
-                                    DataCell(Text(e.nombre!)),
-                                    DataCell(
-                                      Text((e.precio! * e.venta!)
-                                          .toStringAsFixed(2)),
-                                    ),
-                                    DataCell(IconButton(
-                                      color: Colors.grey[600],
-                                      icon: const Icon(Icons.edit),
-                                      onPressed: () {
-                                        creacionPedidoViewModel
-                                            .eliminarDelCarrito(e);
-                                      },
-                                    )),
-                                  ]),
-                                )
-                                .toList(),
+                          child: SizedBox(
+                            width: double.infinity,
+                            child: DataTable(
+                              columnSpacing: 16,
+                              horizontalMargin: 12,
+                              headingRowHeight: 48,
+                              columns: const <DataColumn>[
+                                DataColumn(label: Text('Cant')),
+                                DataColumn(label: Text('Nombre')),
+                                DataColumn(label: Text('SubTotal')),
+                                DataColumn(label: Text('Acciones')),
+                              ],
+                              rows: creacionPedidoViewModel
+                                  .carrito // Aquí usamos la lista de carrito
+                                  .map(
+                                    (e) => DataRow(cells: [
+                                      DataCell(
+                                        Text(e.venta.toString()),
+                                      ),
+                                      DataCell(Text(e.nombre!)),
+                                      DataCell(
+                                        Text((e.precio! * e.venta!)
+                                            .toStringAsFixed(2)),
+                                      ),
+                                      DataCell(IconButton(
+                                        color: Colors.grey[600],
+                                        icon: const Icon(Icons.edit),
+                                        onPressed: () {
+                                          creacionPedidoViewModel
+                                              .eliminarDelCarrito(e);
+                                        },
+                                      )),
+                                    ]),
+                                  )
+                                  .toList(),
+                            ),
                           ),
                         ),
                       ),
@@ -323,6 +325,19 @@ class CategoryFilters extends StatefulWidget {
 }
 
 class CategoryFiltersState extends State<CategoryFilters> {
+  int _selectedNavIndex = 0;
+
+  @override
+  void initState() {
+    super.initState();
+  }
+
+  void _closeFilterView() {
+    setState(() {
+      _selectedNavIndex = 0;
+    });
+  }
+
   @override
   Widget build(BuildContext context) {
     return Container(
@@ -330,47 +345,162 @@ class CategoryFiltersState extends State<CategoryFilters> {
       decoration: BoxDecoration(
         border: Border(bottom: BorderSide(color: Colors.grey.shade300)),
       ),
-      child: Row(
+      child: Column(
+        mainAxisSize: MainAxisSize.min,
         children: [
-          // Buscador
-          Expanded(
-            child: Container(
-              height: 40,
-              padding: const EdgeInsets.symmetric(horizontal: 12),
-              decoration: BoxDecoration(
-                color: Colors.grey.shade200,
-                borderRadius: BorderRadius.circular(20),
-              ),
-              child: Row(
-                children: [
-                  Icon(Icons.search, color: Colors.grey.shade600),
-                  const SizedBox(width: 8),
-                  Text('Buscar', style: TextStyle(color: Colors.grey.shade600)),
-                ],
+          Row(
+            children: [
+              // Buscador
+              Expanded(
+                child: Container(
+                  height: 40,
+                  padding: const EdgeInsets.symmetric(horizontal: 12),
+                  decoration: BoxDecoration(
+                    color: Colors.grey.shade200,
+                    borderRadius: BorderRadius.circular(20),
+                  ),
+                  child: Row(
+                    children: [
+                      Icon(Icons.search, color: Colors.grey.shade600),
+                      const SizedBox(width: 8),
+                      Text('Buscar',
+                          style: TextStyle(color: Colors.grey.shade600)),
+                    ],
+                  ),
+                ),
               ),
-            ),
+              const SizedBox(width: 10),
+              // Botones de filtro
+              _buildFilterButton(1, 'Categoría'),
+              const SizedBox(width: 10),
+              _buildFilterButton(2, 'Topics'),
+              const SizedBox(width: 10),
+              _buildFilterButton(3, 'Extras'),
+            ],
           ),
-          const SizedBox(width: 10),
-
-          // Botones de filtro
-          _FilterButtonPLaceHolder('Categoría'),
-          const SizedBox(width: 10),
-          _FilterButtonPLaceHolder('Topics'),
-          const SizedBox(width: 10),
-          _FilterButtonPLaceHolder('Extras'),
+          const SizedBox(height: 5),
+          if (_selectedNavIndex != 0)
+            Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                Row(
+                  children: [
+                    Text(
+                      _getFilterTitle(_selectedNavIndex),
+                      style: const TextStyle(
+                        fontWeight: FontWeight.bold,
+                        fontSize: 16,
+                      ),
+                    ),
+                    const Spacer(),
+                    GestureDetector(
+                      onTap: _closeFilterView,
+                      child: Container(
+                        padding: const EdgeInsets.all(4),
+                        decoration: BoxDecoration(
+                          color: Colors.grey.shade300,
+                          shape: BoxShape.circle,
+                        ),
+                        child: Icon(
+                          Icons.close,
+                          size: 16,
+                          color: Colors.grey.shade800,
+                        ),
+                      ),
+                    ),
+                  ],
+                ),
+                const SizedBox(height: 8),
+                SizedBox(
+                  height: 80,
+                  child: ListView.builder(
+                    scrollDirection: Axis.horizontal,
+                    itemCount: 10,
+                    itemBuilder: (context, index) {
+                      return Container(
+                        margin: const EdgeInsets.only(right: 8),
+                        padding: const EdgeInsets.symmetric(horizontal: 20),
+                        decoration: BoxDecoration(
+                          color: Colors.grey.shade200,
+                          borderRadius: BorderRadius.circular(4),
+                          border: Border.all(
+                            color: Colors.grey.shade400,
+                            width: 1,
+                          ),
+                        ),
+                        child: Center(
+                          child: Text(
+                            '${_getFilterTitle(_selectedNavIndex)} $index',
+                            style: const TextStyle(fontSize: 16),
+                            textAlign: TextAlign.center,
+                          ),
+                        ),
+                      );
+                    },
+                  ),
+                ),
+              ],
+            )
         ],
       ),
     );
   }
-}
 
-Widget _FilterButtonPLaceHolder(String text) {
-  return Container(
-    padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 10),
-    decoration: BoxDecoration(
-      color: Colors.grey.shade200,
-      borderRadius: BorderRadius.circular(4),
-    ),
-    child: Text(text, style: const TextStyle(fontSize: 16)),
-  );
+  String _getFilterTitle(int index) {
+    switch (index) {
+      case 1:
+        return 'Categorías';
+      case 2:
+        return 'Topics';
+      case 3:
+        return 'Extras';
+      default:
+        return '';
+    }
+  }
+
+  Widget _buildFilterButton(int index, String text) {
+    final bool isSelected = _selectedNavIndex == index;
+    return GestureDetector(
+      onTap: () {
+        setState(() {
+          if (_selectedNavIndex == index) {
+            _selectedNavIndex = 0;
+          } else {
+            _selectedNavIndex = index;
+          }
+        });
+      },
+      child: Container(
+        padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
+        decoration: BoxDecoration(
+          color: isSelected ? Colors.blue.shade100 : Colors.grey.shade200,
+          borderRadius: BorderRadius.circular(16),
+          border: Border.all(
+            color: isSelected ? Colors.blue : Colors.transparent,
+            width: 1,
+          ),
+        ),
+        child: Row(
+          children: [
+            Text(
+              text,
+              style: TextStyle(
+                color: isSelected ? Colors.blue.shade800 : Colors.grey.shade800,
+                fontWeight: isSelected ? FontWeight.bold : FontWeight.normal,
+              ),
+            ),
+            if (isSelected) ...[
+              const SizedBox(width: 4),
+              Icon(
+                Icons.keyboard_arrow_down,
+                size: 16,
+                color: Colors.blue.shade800,
+              ),
+            ],
+          ],
+        ),
+      ),
+    );
+  }
 }

lib/utils/widgets/custom_card.dart

@@ -19,7 +19,6 @@ class CustomProductCard extends StatelessWidget {
       decoration: BoxDecoration(
         color: Colors.white,
         borderRadius: BorderRadius.circular(10),
-        border: Border.all(color: Colors.grey.shade200),
       ),
       child: Row(
         children: [

lib/utils/widgets/get_status_style.dart

@@ -0,0 +1,67 @@
+import 'package:turquessa_mesas_hoster/core/models/mesa_model.dart';
+import 'package:turquessa_mesas_hoster/mvvm/views/home/home_screen.dart';
+import 'package:flutter/material.dart';
+
+// Clase para encapsular todas las propiedades de estilo relacionadas con el estado
+class TableStatusStyle {
+  final Color backgroundColor;
+  final Color iconColor;
+  final IconData icon;
+  final Color cardColor;
+  final EstadoPedido nextStatus;
+
+  TableStatusStyle({
+    required this.backgroundColor,
+    required this.iconColor,
+    required this.icon,
+    required this.cardColor,
+    required this.nextStatus,
+  });
+}
+
+TableStatusStyle getStatusStyle(EstadoPedido? status) {
+  status = status ?? EstadoPedido.disponible;
+
+  switch (status) {
+    case EstadoPedido.disponible:
+      return TableStatusStyle(
+        backgroundColor: const Color.fromARGB(255, 220, 252, 232),
+        iconColor: Colors.green,
+        icon: Icons.table_restaurant_rounded,
+        cardColor: const Color.fromARGB(255, 220, 252, 232),
+        nextStatus: EstadoPedido.preparacion,
+      );
+    case EstadoPedido.surtida:
+      return TableStatusStyle(
+        backgroundColor: const Color.fromARGB(255, 220, 234, 254),
+        iconColor: Colors.blue,
+        icon: Icons.coffee_rounded,
+        cardColor: const Color.fromARGB(255, 220, 234, 254),
+        nextStatus: EstadoPedido.cobrado,
+      );
+    case EstadoPedido.preparacion:
+      return TableStatusStyle(
+        backgroundColor: const Color.fromARGB(255, 243, 232, 255),
+        iconColor: Colors.deepPurple,
+        icon: Icons.restaurant_rounded,
+        cardColor: Colors.white,
+        nextStatus: EstadoPedido.surtida,
+      );
+    case EstadoPedido.cobrado:
+      return TableStatusStyle(
+        backgroundColor: const Color.fromARGB(255, 255, 238, 213),
+        iconColor: Colors.amber,
+        icon: Icons.attach_money_rounded,
+        cardColor: Colors.white,
+        nextStatus: EstadoPedido.disponible,
+      );
+    default:
+      return TableStatusStyle(
+        backgroundColor: Colors.grey.shade200,
+        iconColor: Colors.grey,
+        icon: Icons.settings,
+        cardColor: Colors.white,
+        nextStatus: EstadoPedido.disponible,
+      );
+  }
+}