Add new page designs 2

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

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 && (

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 */}

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 */}

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 */}

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 */}

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 */}