Cambios de disenio y funcionalidad en el flujo de pestanias

lib/mvvm/viewmodels/creacion_pedido_view_model.dart

@@ -5,8 +5,10 @@ import 'package:turquessa_mesas_hoster/core/models/pedido_model.dart';
 import 'package:turquessa_mesas_hoster/core/models/producto_model.dart';
 
 class CreacionPedidoViewModel extends ChangeNotifier {
-  final List<Producto> _pedidosProvisionales = <Producto>[
-     Producto(
+  // Lista de productos disponibles para elegir
+  final List<Producto> _productosDisponibles = <Producto>[
+    Producto(
+      id: 1, // Añadido id para facilitar la búsqueda
       idCategoria: 1,
       nombre: 'Café Latte',
       descripcion: 'Café con leche y espuma',
@@ -27,36 +29,140 @@ class CreacionPedidoViewModel extends ChangeNotifier {
       idWeb: 101,
       sincronizado: 'Sí',
     ),
-     Producto(
+    Producto(
+      id: 2,
       idCategoria: 1,
-      nombre: 'Café Latte',
-      descripcion: 'Café con leche y espuma',
-      imagen: 'https://example.com/cafe_latte.jpg',
+      nombre: 'Pizza al horno',
+      descripcion: 'Pizza tradicional italiana',
+      imagen: 'https://example.com/pizza.jpg',
       venta: 1,
       existencia: 50,
       precio: 4.50,
       verMenu: 1,
-      codigo: 'CL001',
+      codigo: 'PZ001',
+      descuento: '10%',
+      toping: 1,
+      topings: [
+        Producto(id: 3, nombre: 'Extra queso', precio: 0.50),
+        Producto(id: 4, nombre: 'Champiñones', precio: 0.75),
+      ],
+      activo: 1,
+      media: [],
+      idWeb: 102,
+      sincronizado: 'Sí',
+    ),
+    Producto(
+      id: 3,
+      idCategoria: 1,
+      nombre: 'Capuchino',
+      descripcion: 'Café con espuma de leche',
+      imagen: 'https://example.com/capuchino.jpg',
+      venta: 1,
+      existencia: 50,
+      precio: 4.50,
+      verMenu: 1,
+      codigo: 'CP001',
       descuento: '10%',
       toping: 1,
       topings: [
         Producto(id: 1, nombre: 'Crema Batida', precio: 0.50),
-        Producto(id: 2, nombre: 'Chocolate', precio: 0.75),
+        Producto(id: 5, nombre: 'Canela', precio: 0.25),
       ],
       activo: 1,
       media: [],
-      idWeb: 101,
+      idWeb: 103,
+      sincronizado: 'Sí',
+    ),
+    Producto(
+      id: 4,
+      idCategoria: 1,
+      nombre: 'Pastel de Chocolate',
+      descripcion: 'Pastel casero de chocolate',
+      imagen: 'https://example.com/pastel.jpg',
+      venta: 1,
+      existencia: 50,
+      precio: 4.50,
+      verMenu: 1,
+      codigo: 'PC001',
+      descuento: '10%',
+      toping: 1,
+      topings: [
+        Producto(id: 6, nombre: 'Helado', precio: 1.00),
+        Producto(id: 7, nombre: 'Frutos rojos', precio: 0.75),
+      ],
+      activo: 1,
+      media: [],
+      idWeb: 104,
       sincronizado: 'Sí',
     )
   ];
-  List<Producto> get pedidosProvisionales => _pedidosProvisionales;
 
-  void addPedidoProvisional(Producto pedido) {
-    _pedidosProvisionales.add(pedido);
+  // Lista del carrito que se mostrará en el DataTable
+  final List<Producto> _carrito = [];
+
+  // Getters
+  List<Producto> get productosDisponibles => _productosDisponibles;
+  List<Producto> get carrito => _carrito;
+
+  // Método para agregar un producto al carrito
+  void agregarAlCarrito(Producto producto) {
+    // Buscar si el producto ya está en el carrito
+    int index = _carrito.indexWhere((p) => p.id == producto.id);
+
+    if (index != -1) {
+      // Si ya existe en el carrito, incrementar cantidad
+      _carrito[index].venta = (_carrito[index].venta ?? 0) + 1;
+    } else {
+      // Si no existe, crear una copia del producto y añadirlo al carrito
+      final productoCarrito = Producto(
+        id: producto.id,
+        nombre: producto.nombre,
+        precio: producto.precio,
+        descripcion: producto.descripcion,
+        imagen: producto.imagen,
+        venta: 1, // Iniciar con cantidad 1
+        codigo: producto.codigo,
+        topings: producto.topings,
+        // Otros atributos que necesites copiar
+      );
+      _carrito.add(productoCarrito);
+    }
+    notifyListeners();
+  }
+
+  // Método para reducir la cantidad de un producto en el carrito
+  void reducirDelCarrito(Producto producto) {
+    int index = _carrito.indexWhere((p) => p.id == producto.id);
+
+    if (index != -1) {
+      if (_carrito[index].venta! > 1) {
+        // Reducir cantidad si es mayor que 1
+        _carrito[index].venta = _carrito[index].venta! - 1;
+      } else {
+        // Eliminar del carrito si la cantidad llega a 0
+        _carrito.removeAt(index);
+      }
+      notifyListeners();
+    }
+  }
+
+  // Método para eliminar un producto específico del carrito
+  void eliminarDelCarrito(Producto producto) {
+    _carrito.removeWhere((p) => p.id == producto.id);
+    notifyListeners();
+  }
+
+  // Método para limpiar todo el carrito
+  void limpiarCarrito() {
+    _carrito.clear();
     notifyListeners();
   }
 
-  void deletePedidoProvisional(Producto pedido) {
-    _pedidosProvisionales.remove(pedido);
+  // Método para calcular el total del carrito
+  double calcularTotalCarrito() {
+    return _carrito.fold(
+        0,
+        (total, producto) =>
+            total + ((producto.precio ?? 0) * (producto.venta ?? 0)));
   }
 }

lib/mvvm/views/home/home_screen.dart

@@ -2,6 +2,7 @@ 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/utils/widgets/custom_card.dart';
 import 'package:turquessa_mesas_hoster/utils/widgets/navigation_rail.dart';
 
 import '../../../utils/widgets/ordenes_card.dart';
@@ -57,6 +58,7 @@ class Formulario extends State<HomeScreen> {
           children: [
             CustomNavigationRail(selectedIndex: _selectedIndex),
             Expanded(
+              flex: 1,
               child: Center(
                 child: Container(
                   decoration: const BoxDecoration(
@@ -65,7 +67,7 @@ class Formulario extends State<HomeScreen> {
                   child: GridView.builder(
                     gridDelegate:
                         const SliverGridDelegateWithFixedCrossAxisCount(
-                      crossAxisCount: 4,
+                      crossAxisCount: 3,
                       childAspectRatio: 1.0,
                       crossAxisSpacing: 10.0,
                       mainAxisSpacing: 10.0,
@@ -162,13 +164,40 @@ class TablaDetalles extends StatelessWidget {
                     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,
-                      ),
+                    Column(
+                      crossAxisAlignment: CrossAxisAlignment.start,
+                      children: [
+                        Text(
+                          table.nombre ?? 'Mesa sin nombre',
+                          style: const TextStyle(
+                            color: Colors.white,
+                            fontSize: 20,
+                            fontWeight: FontWeight.bold,
+                          ),
+                        ),
+                        const Row(
+                          crossAxisAlignment: CrossAxisAlignment.center,
+                          mainAxisSize: MainAxisSize.min,
+                          children: [
+                            Icon(
+                              Icons.access_time_rounded,
+                              color: Colors.white70,
+                              size: 16,
+                            ),
+                            Padding(
+                              padding: EdgeInsets.only(left: 4),
+                              child: Text(
+                                "03:56",
+                                style: TextStyle(
+                                  fontSize: 14,
+                                  color: Colors.white,
+                                  fontWeight: FontWeight.normal,
+                                ),
+                              ),
+                            ),
+                          ],
+                        )
+                      ],
                     ),
                   ],
                 ),
@@ -179,18 +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: Text(table.activa! ? 'Activa' : 'Inactiva',
+                      style: const TextStyle(
+                        color: Colors.white,
+                        fontWeight: FontWeight.bold,
+                      )),
                 ),
               ],
             ),
           ),
-          // Contenido scrolleable
+
           Expanded(
             child: SingleChildScrollView(
               child: Padding(
@@ -198,19 +225,13 @@ class TablaDetalles extends StatelessWidget {
                 child: Column(
                   crossAxisAlignment: CrossAxisAlignment.start,
                   children: [
-                    Text(
-                      'ID: ${table.id}',
-                      style: const TextStyle(fontSize: 16),
-                    ),
-                    const SizedBox(height: 16),
                     Row(
                       children: [
-                        const Text('Estado: '),
                         Text(
-                          status.toString().split('.').last,
+                          "Estatus: ${status.toString().split('.').last}",
                           style: const TextStyle(
                             fontWeight: FontWeight.bold,
-                            color: Colors.blue,
+                            color: Colors.black,
                           ),
                         ),
                       ],
@@ -218,18 +239,62 @@ class TablaDetalles extends StatelessWidget {
                     // const SizedBox(height: 16),
                     // IconDataByStatus(status: status),
                     const SizedBox(height: 16),
-                    IconButton.outlined(
-                        style: const ButtonStyle(
-                            backgroundColor:
-                                MaterialStatePropertyAll(Colors.lightGreen)),
-                        onPressed: () {
-                          Navigator.of(context).pushNamed('creacion-pedido');
-                        },
-                        icon: const Icon(
-                          Icons.start_rounded,
-                          color: Colors.white,
-                        ))
-                    // const OrdenesScreen(),
+                    Container(
+                      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),
+                      ),
+                      child: Column(children: [
+                        Row(
+                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                            children: [
+                              const Text("Pedido Actual",
+                                  style: TextStyle(
+                                    fontWeight: FontWeight.bold,
+                                    color: Colors.black,
+                                  )),
+                              GestureDetector(
+                                onTap: () {
+                                  Navigator.of(context)
+                                      .pushNamed('creacion-pedido');
+                                },
+                                child: const Row(children: [
+                                  const Text("Ver detalle"),
+                                  const Icon(Icons.arrow_forward_ios_rounded),
+                                ]),
+                              )
+                            ]),
+                        const SizedBox(height: 10),
+                        const CustomProductCard(
+                          titulo: "Original Cheesse Meat burger with Chips",
+                          precio: "15.20",
+                          cantidad: 1,
+                        ),
+                        const SizedBox(height: 10),
+                        const CustomProductCard(
+                          titulo: "Original Cheesse Meat burger with Chips",
+                          precio: "15.20",
+                          cantidad: 1,
+                        ),
+                        const SizedBox(height: 10),
+                        const CustomProductCard(
+                          titulo: "Original Cheesse Meat burger with Chips",
+                          precio: "15.20",
+                          cantidad: 1,
+                        ),
+                      ]),
+                    ),
+
+                    //? const OrdenesScreen(),
                   ],
                 ),
               ),

lib/mvvm/views/pedido/creacion_pedido_screen.dart

@@ -2,7 +2,9 @@ import 'package:flutter/material.dart';
 import 'package:provider/provider.dart';
 import 'package:turquessa_mesas_hoster/core/models/producto_model.dart';
 import 'package:turquessa_mesas_hoster/mvvm/viewmodels/creacion_pedido_view_model.dart';
+import 'package:turquessa_mesas_hoster/utils/themes.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/navigation_rail.dart';
 
 class CreacionPedido extends StatefulWidget {
@@ -24,8 +26,8 @@ class _CreacionPedidoState extends State<CreacionPedido> {
   @override
   Widget build(BuildContext context) {
     CreacionPedidoViewModel creacionPedidoViewModel =
-        Provider.of<CreacionPedidoViewModel>(context, listen: false);
-    List<Producto> listaPedido = creacionPedidoViewModel.pedidosProvisionales;
+        Provider.of<CreacionPedidoViewModel>(context, listen: true);
+    List<Producto> listaPedido = creacionPedidoViewModel.productosDisponibles;
     return Container(
       decoration: const BoxDecoration(
           gradient: LinearGradient(
@@ -45,7 +47,7 @@ class _CreacionPedidoState extends State<CreacionPedido> {
           children: [
             CustomNavigationRail(selectedIndex: _selectedIndex),
             Expanded(
-              flex: 5,
+              flex: 8,
               child: Container(
                 decoration: const BoxDecoration(
                   color: Colors.white,
@@ -81,71 +83,68 @@ class _CreacionPedidoState extends State<CreacionPedido> {
                         ),
                       ),
                       const Divider(),
+                      // En el DataTable
                       SingleChildScrollView(
-                        child: DataTable(
-                            columnSpacing: 10,
-                            dataRowMinHeight: 40,
-                            dataRowMaxHeight: 80,
+                        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: <DataRow>[
-                              DataRow(selected: true, cells: <DataCell>[
-                                const DataCell(Text('1')),
-                                const DataCell(Text('Mesa 1')),
-                                const DataCell(Text('\$100.00')),
-                                DataCell(IconButton(
-                                    icon: const Icon(Icons.pending_sharp),
-                                    onPressed: () {}))
-                              ]),
-                              // DataRow(cells: <DataCell>[
-                              //   const DataCell(Text('1')),
-                              //   const DataCell(Text(
-                              //       'Hamburguesa de Queso y Ahumado sin cebolla ni tomate')),
-                              //   const DataCell(Text("\$100.00")),
-                              //   DataCell(IconButton(
-                              //       icon: const Icon(Icons.pending_sharp),
-                              //       onPressed: () {}))
-                              // ]),
-                              // DataRow(cells: <DataCell>[
-                              //   const DataCell(Text('1')),
-                              //   const DataCell(Text(
-                              //       'Hamburguesa de Queso y Ahumado sin cebolla ni tomate')),
-                              //   const DataCell(Text("\$100.00")),
-                              //   DataCell(IconButton(
-                              //       icon: const Icon(Icons.pending_sharp),
-                              //       onPressed: () {}))
-                              // ]),
-                              // DataRow(cells: <DataCell>[
-                              //   const DataCell(Text('1')),
-                              //   const DataCell(Text(
-                              //       'Hamburguesa de Queso y Ahumado sin cebolla ni tomate')),
-                              //   const DataCell(Text("\$100.00")),
-                              //   DataCell(IconButton(
-                              //       icon: const Icon(Icons.pending_sharp),
-                              //       onPressed: () {}))
-                              // ]),
-                            ]),
+                            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(),
+                          ),
+                        ),
                       ),
                       Expanded(
                         child: Column(
                           children: [
+                            const SizedBox(
+                              height: 100,
+                              width: double.infinity,
+                            ),
                             const Divider(),
-                            const Row(
+                            Row(
                               mainAxisAlignment: MainAxisAlignment.spaceBetween,
                               children: [
-                                Text(
+                                const Text(
                                   "Total",
                                   style: TextStyle(
                                       fontSize: 20,
                                       fontWeight: FontWeight.bold),
                                 ),
                                 Text(
-                                  "\$300.00",
-                                  style: TextStyle(
+                                  "\$${creacionPedidoViewModel.calcularTotalCarrito().toStringAsFixed(2)}",
+                                  style: const TextStyle(
                                       fontSize: 20,
                                       fontWeight: FontWeight.bold),
                                 ),
@@ -177,18 +176,18 @@ class _CreacionPedidoState extends State<CreacionPedido> {
                                                 Colors.white),
                                         iconColor: MaterialStatePropertyAll(
                                             Colors.red)),
-                                    icon: const Icon(
-                                      Icons.delete,
-                                      color: Colors.red,
-                                    ),
-                                    onPressed: () {},
+                                    icon: const Icon(Icons.delete,
+                                        color: Colors.red),
+                                    onPressed: () {
+                                      creacionPedidoViewModel.limpiarCarrito();
+                                    },
                                   ),
                                 ),
                               ],
-                            )
+                            ),
                           ],
                         ),
-                      )
+                      ),
                     ],
                   ),
                 ),
@@ -208,17 +207,27 @@ class CategoryGrid extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    CreacionPedidoViewModel creacionPedidoViewModel =
+        Provider.of<CreacionPedidoViewModel>(context);
+    List<Producto> listaProductos =
+        creacionPedidoViewModel.productosDisponibles;
     return Expanded(
       child: Container(
         padding: const EdgeInsets.all(8),
         child: GridView.builder(
           gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
-            crossAxisCount: 4,
+            crossAxisCount: 3,
             crossAxisSpacing: 10,
             mainAxisSpacing: 15,
           ),
-          itemCount: 20,
+          itemCount: listaProductos.length,
           itemBuilder: (context, index) {
+            int carritoIndex = creacionPedidoViewModel.carrito
+                .indexWhere((p) => p.id == listaProductos[index].id);
+            int cantidad = carritoIndex != -1
+                ? creacionPedidoViewModel.carrito[carritoIndex].venta!
+                : 0;
+
             return Card(
               shadowColor: Colors.grey.shade700,
               surfaceTintColor: Colors.white,
@@ -226,7 +235,7 @@ class CategoryGrid extends StatelessWidget {
                 Padding(
                   padding: const EdgeInsets.all(3),
                   child: Container(
-                    height: 80,
+                    height: 140,
                     width: double.infinity,
                     decoration: BoxDecoration(
                       color: Colors.white,
@@ -240,14 +249,63 @@ class CategoryGrid extends StatelessWidget {
                 ),
                 Center(
                   child: Text(
-                    "Producto $index",
+                    listaProductos[index].nombre ?? "Error",
                     style: const TextStyle(
                         fontWeight: FontWeight.bold,
                         fontSize: 16,
                         color: Colors.black),
                   ),
                 ),
-                const Text("Precio: \$50.00")
+                Text(
+                  "\$${listaProductos[index].precio}",
+                  textAlign: TextAlign.left,
+                  style: TextStyle(
+                    color: Colors.green[600],
+                    fontWeight: FontWeight.bold,
+                  ),
+                ),
+                const Spacer(),
+                Padding(
+                  padding: const EdgeInsets.symmetric(horizontal: 10),
+                  child: Row(
+                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                    children: [
+                      IconButton(
+                          style: ButtonStyle(
+                              backgroundColor:
+                                  MaterialStatePropertyAll(AppTheme.primary)),
+                          onPressed: () {
+                            if (cantidad > 0) {
+                              creacionPedidoViewModel
+                                  .reducirDelCarrito(listaProductos[index]);
+                            }
+                          },
+                          icon: const Icon(
+                            Icons.remove,
+                            color: Colors.black,
+                          )),
+                      Text(
+                        "$cantidad",
+                        style: const TextStyle(
+                          fontSize: 20,
+                          fontWeight: FontWeight.bold,
+                        ),
+                      ),
+                      IconButton(
+                          style: ButtonStyle(
+                              backgroundColor:
+                                  MaterialStatePropertyAll(AppTheme.primary)),
+                          onPressed: () {
+                            creacionPedidoViewModel
+                                .agregarAlCarrito(listaProductos[index]);
+                          },
+                          icon: const Icon(
+                            Icons.add,
+                            color: Colors.black,
+                          )),
+                    ],
+                  ),
+                )
               ]),
             );
           },

lib/utils/widgets/custom_card.dart

@@ -0,0 +1,87 @@
+import 'package:flutter/material.dart';
+
+class CustomProductCard extends StatelessWidget {
+  final String? imageURL;
+  final String? titulo;
+  final String? precio;
+  final int? cantidad;
+  const CustomProductCard(
+      {super.key,
+      this.imageURL,
+      required this.titulo,
+      required this.precio,
+      required this.cantidad});
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      padding: const EdgeInsets.symmetric(vertical: 8, horizontal: 10),
+      decoration: BoxDecoration(
+        color: Colors.white,
+        borderRadius: BorderRadius.circular(10),
+        border: Border.all(color: Colors.grey.shade200),
+      ),
+      child: Row(
+        children: [
+          // Imagen del producto
+          ClipRRect(
+            borderRadius: BorderRadius.circular(5),
+            child: Image.network(
+              'https://picsum.photos/200/300?random=3',
+              width: 80,
+              height: 80,
+              fit: BoxFit.cover,
+            ),
+          ),
+          const SizedBox(width: 10),
+          // Contenido del texto (título)
+          Expanded(
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              mainAxisSize: MainAxisSize.min,
+              children: [
+                Text(
+                  titulo ?? "Titulo Producto",
+                  softWrap: true,
+                  maxLines: 2,
+                  overflow: TextOverflow.ellipsis,
+                  style: const TextStyle(
+                    fontWeight: FontWeight.bold,
+                    fontSize: 14,
+                    color: Colors.black87,
+                  ),
+                ),
+                const SizedBox(height: 4),
+                // Precio
+                Row(
+                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                  mainAxisSize: MainAxisSize.max,
+                  children: [
+                    Text(
+                      '\$$precio',
+                      style: TextStyle(
+                        fontSize: 16,
+                        fontWeight: FontWeight.bold,
+                        color: Colors.green[700],
+                      ),
+                    ),
+                    Text(
+                      "${cantidad}x",
+                      style: TextStyle(
+                        fontSize: 16,
+                        fontWeight: FontWeight.w500,
+                        color: Colors.grey[600],
+                      ),
+                    ),
+                  ],
+                ),
+              ],
+            ),
+          ),
+
+          // Cantidad
+        ],
+      ),
+    );
+  }
+}