Category filters on Work

lib/mvvm/views/home/home_screen.dart

@@ -135,9 +135,8 @@ class TablaDetalles extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     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),
@@ -153,8 +152,6 @@ class TablaDetalles extends StatelessWidget {
             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,
@@ -227,13 +224,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 +240,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 +250,7 @@ class TablaDetalles extends StatelessWidget {
                               const Text("Pedido Actual",
                                   style: TextStyle(
                                     fontWeight: FontWeight.bold,
+                                    fontSize: 20,
                                     color: Colors.black,
                                   )),
                               GestureDetector(
@@ -268,8 +259,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 +282,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),
+                            ),
+                          ],
+                        )
                       ]),
                     ),
 
@@ -338,14 +346,16 @@ class TableCard extends StatelessWidget {
       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);
+        icon = Icons.restaurant_rounded;
+        cardColor = Colors.white;
+        // 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);
+        cardColor = Colors.white;
+        // cardColor = const Color.fromARGB(255, 255, 238, 213);
         break;
       default:
         backgroundColor = Colors.grey.shade200;
@@ -356,6 +366,7 @@ class TableCard extends StatelessWidget {
     }
 
     return Card(
+      borderOnForeground: false,
       color: cardColor,
       child: Column(
         mainAxisAlignment: MainAxisAlignment.center,
@@ -384,6 +395,18 @@ class TableCard extends StatelessWidget {
               fontSize: 20,
               fontWeight: FontWeight.w500,
             ),
+          ),
+          Container(
+            padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
+            decoration: BoxDecoration(
+              color: backgroundColor,
+              borderRadius: BorderRadius.circular(20),
+            ),
+            child: Text(status.toString().split('.').last,
+                style: TextStyle(
+                  color: iconColor,
+                  fontWeight: FontWeight.bold,
+                )),
           )
         ],
       ),

lib/mvvm/views/pedido/creacion_pedido_screen.dart

@@ -323,6 +323,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 +343,160 @@ 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: 50,
+                  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, vertical: 10),
+                        decoration: BoxDecoration(
+                          color: Colors.grey.shade200,
+                          borderRadius: BorderRadius.circular(4),
+                          border: Border.all(
+                            color: Colors.grey.shade400,
+                            width: 1,
+                          ),
+                        ),
+                        child: Text(
+                          'Item $index',
+                          style: const TextStyle(fontSize: 16),
+                        ),
+                      );
+                    },
+                  ),
+                ),
+              ],
+            )
         ],
       ),
     );
   }
-}
 
-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: [