From 0b5c6872e3cd412eb0b64edd3233290ec325d3b7 Mon Sep 17 00:00:00 2001
From: Urtzi Alfaro <urtzialfaro@MacBook-Pro-de-Urtzi.local>
Date: Sat, 30 Aug 2025 19:21:15 +0200
Subject: [PATCH] Add new page designs 2

---
 .../components/layout/AppShell/AppShell.tsx   |  1 +
 .../src/components/layout/Header/Header.tsx   | 19 ++++++++++++++-----
 .../operations/inventory/InventoryPage.tsx    |  2 +-
 .../app/operations/orders/OrdersPage.tsx      |  2 +-
 .../procurement/ProcurementPage.tsx           |  4 ++--
 .../operations/production/ProductionPage.tsx  |  2 +-
 .../app/operations/recipes/RecipesPage.tsx    |  2 +-
 7 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/frontend/src/components/layout/AppShell/AppShell.tsx b/frontend/src/components/layout/AppShell/AppShell.tsx
index fb06c545..1f2b7dbf 100644
--- a/frontend/src/components/layout/AppShell/AppShell.tsx
+++ b/frontend/src/components/layout/AppShell/AppShell.tsx
@@ -242,6 +242,7 @@ export const AppShell = forwardRef<AppShellRef, AppShellProps>(({
         <main
           className={clsx(
             'flex-1 flex flex-col transition-all duration-300 ease-in-out',
+            'overflow-x-hidden', // Prevent horizontal overflow
             // Add header offset
             shouldShowHeader && 'pt-[var(--header-height)]',
             // Adjust margins based on sidebar state
diff --git a/frontend/src/components/layout/Header/Header.tsx b/frontend/src/components/layout/Header/Header.tsx
index 8ab2b71f..e1c20575 100644
--- a/frontend/src/components/layout/Header/Header.tsx
+++ b/frontend/src/components/layout/Header/Header.tsx
@@ -300,7 +300,7 @@ export const Header = forwardRef<HeaderRef, HeaderProps>(({
 
       {/* Right section */}
       {isAuthenticated && (
-        <div className="flex items-center gap-1 h-full">
+        <div className="flex items-center gap-1">
           {/* Mobile search */}
           {showSearch && (
             <Button
@@ -388,7 +388,13 @@ export const Header = forwardRef<HeaderRef, HeaderProps>(({
                 variant="ghost"
                 size="sm"
                 onClick={toggleUserMenu}
-                className="flex items-center gap-2 pl-2 pr-2 py-1.5 h-10 min-w-0"
+                className={clsx(
+                  "flex items-center gap-2 pl-2 pr-3 py-1.5 h-9 min-w-0 rounded-lg",
+                  "hover:bg-[var(--bg-secondary)] hover:ring-2 hover:ring-[var(--color-primary)]/20",
+                  "transition-all duration-200 ease-in-out",
+                  "active:scale-95",
+                  isUserMenuOpen && "bg-[var(--bg-secondary)] ring-2 ring-[var(--color-primary)]/20"
+                )}
                 aria-label="Menú de usuario"
                 aria-expanded={isUserMenuOpen}
                 aria-haspopup="true"
@@ -397,13 +403,16 @@ export const Header = forwardRef<HeaderRef, HeaderProps>(({
                   src={user.avatar_url}
                   alt={user.full_name}
                   fallback={user.full_name}
-                  size="sm"
-                  className="flex-shrink-0"
+                  size="xs"
+                  className={clsx(
+                    "flex-shrink-0 transition-all duration-200",
+                    "hover:ring-2 hover:ring-[var(--color-primary)]/30",
+                    isUserMenuOpen && "ring-2 ring-[var(--color-primary)]/30"
+                  )}
                 />
                 <span className="hidden sm:block text-sm font-medium text-[var(--text-primary)] truncate max-w-[120px]">
                   {user.full_name}
                 </span>
-                <ChevronDown className="h-4 w-4 text-[var(--text-tertiary)] flex-shrink-0" />
               </Button>
 
               {isUserMenuOpen && (
diff --git a/frontend/src/pages/app/operations/inventory/InventoryPage.tsx b/frontend/src/pages/app/operations/inventory/InventoryPage.tsx
index 1efa6263..cf2228a0 100644
--- a/frontend/src/pages/app/operations/inventory/InventoryPage.tsx
+++ b/frontend/src/pages/app/operations/inventory/InventoryPage.tsx
@@ -230,7 +230,7 @@ const InventoryPage: React.FC = () => {
       {/* Stats Grid */}
       <StatsGrid 
         stats={inventoryStats}
-        columns={6}
+        columns={3}
       />
 
       {/* Low Stock Alert */}
diff --git a/frontend/src/pages/app/operations/orders/OrdersPage.tsx b/frontend/src/pages/app/operations/orders/OrdersPage.tsx
index 10e5df47..97904f10 100644
--- a/frontend/src/pages/app/operations/orders/OrdersPage.tsx
+++ b/frontend/src/pages/app/operations/orders/OrdersPage.tsx
@@ -188,7 +188,7 @@ const OrdersPage: React.FC = () => {
       {/* Stats Grid */}
       <StatsGrid 
         stats={stats}
-        columns={6}
+        columns={3}
       />
 
       {/* Simplified Controls */}
diff --git a/frontend/src/pages/app/operations/procurement/ProcurementPage.tsx b/frontend/src/pages/app/operations/procurement/ProcurementPage.tsx
index c6229a24..1ddbb90f 100644
--- a/frontend/src/pages/app/operations/procurement/ProcurementPage.tsx
+++ b/frontend/src/pages/app/operations/procurement/ProcurementPage.tsx
@@ -196,7 +196,7 @@ const ProcurementPage: React.FC = () => {
   ];
 
   return (
-    <div className="p-6 space-y-6">
+    <div className="space-y-6">
       <PageHeader
         title="Gestión de Compras"
         description="Administra órdenes de compra, proveedores y seguimiento de entregas"
@@ -221,7 +221,7 @@ const ProcurementPage: React.FC = () => {
       {/* Stats Grid */}
       <StatsGrid 
         stats={purchaseOrderStats}
-        columns={6}
+        columns={3}
       />
 
       {/* Tabs Navigation */}
diff --git a/frontend/src/pages/app/operations/production/ProductionPage.tsx b/frontend/src/pages/app/operations/production/ProductionPage.tsx
index db20fece..ad7c67de 100644
--- a/frontend/src/pages/app/operations/production/ProductionPage.tsx
+++ b/frontend/src/pages/app/operations/production/ProductionPage.tsx
@@ -183,7 +183,7 @@ const ProductionPage: React.FC = () => {
       {/* Production Stats */}
       <StatsGrid 
         stats={pagePresets.production(mockProductionStats)}
-        columns={6}
+        columns={3}
       />
 
       {/* Tabs Navigation */}
diff --git a/frontend/src/pages/app/operations/recipes/RecipesPage.tsx b/frontend/src/pages/app/operations/recipes/RecipesPage.tsx
index 55ad287e..61e41ff9 100644
--- a/frontend/src/pages/app/operations/recipes/RecipesPage.tsx
+++ b/frontend/src/pages/app/operations/recipes/RecipesPage.tsx
@@ -222,7 +222,7 @@ const RecipesPage: React.FC = () => {
       {/* Stats Grid */}
       <StatsGrid 
         stats={recipeStats}
-        columns={6}
+        columns={3}
       />
 
       {/* Simplified Controls */}