From c103ed6efcaf54d4322fd4c8abaeef029788fc71 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sun, 9 Nov 2025 21:01:27 +0000
Subject: [PATCH] feat: Improve main entry point and inventory wizard UI/UX

Main Entry Point (ItemTypeSelector):
- Moved Registro de Ventas to first position (most common)
- Changed icon from DollarSign to Euro icon
- Fixed alignment between icons and text (items-center instead of items-start)
- Improved spacing between title and subtitle (mb-0.5, mt-1)
- Better visual centering of all elements

Inventory Wizard (TypeSelectionStep):
- Enhanced selection UI with ring and shadow when selected
- Better color feedback (10% opacity background, ring-2)
- Dynamic icon color (primary when selected, tertiary when not)
- Dynamic title color (primary when selected)
- Improved spacing between title and description (mb-3, mt-3)
- Added hover effects (shadow-lg, -translate-y-0.5)
- Better visual distinction for selected state

All changes improve visual feedback and user experience.
---
 .../unified-wizard/ItemTypeSelector.tsx       | 28 +++++-----
 .../wizards/InventoryWizard.tsx               | 56 +++++++++++++------
 2 files changed, 52 insertions(+), 32 deletions(-)

diff --git a/frontend/src/components/domain/unified-wizard/ItemTypeSelector.tsx b/frontend/src/components/domain/unified-wizard/ItemTypeSelector.tsx
index 53961360..a3225109 100644
--- a/frontend/src/components/domain/unified-wizard/ItemTypeSelector.tsx
+++ b/frontend/src/components/domain/unified-wizard/ItemTypeSelector.tsx
@@ -8,7 +8,7 @@ import {
   ShoppingCart,
   Users,
   UserPlus,
-  DollarSign,
+  Euro,
   Sparkles,
 } from 'lucide-react';
 
@@ -34,6 +34,15 @@ export interface ItemTypeConfig {
 }
 
 export const ITEM_TYPES: ItemTypeConfig[] = [
+  {
+    id: 'sales-entry',
+    title: 'Registro de Ventas',
+    subtitle: 'Manual o carga masiva',
+    icon: Euro,
+    badge: '⭐ Más Común',
+    badgeColor: 'bg-gradient-to-r from-amber-100 to-orange-100 text-orange-800 font-semibold',
+    isHighlighted: true,
+  },
   {
     id: 'inventory',
     title: 'Inventario',
@@ -98,15 +107,6 @@ export const ITEM_TYPES: ItemTypeConfig[] = [
     badge: 'Configuración',
     badgeColor: 'bg-blue-100 text-blue-700',
   },
-  {
-    id: 'sales-entry',
-    title: 'Registro de Ventas',
-    subtitle: 'Manual o carga masiva',
-    icon: DollarSign,
-    badge: '⭐ Más Común',
-    badgeColor: 'bg-gradient-to-r from-amber-100 to-orange-100 text-orange-800 font-semibold',
-    isHighlighted: true,
-  },
 ];
 
 interface ItemTypeSelectorProps {
@@ -162,7 +162,7 @@ export const ItemTypeSelector: React.FC<ItemTypeSelectorProps> = ({ onSelect })
               )}
 
               {/* Content */}
-              <div className="flex items-start gap-4">
+              <div className="flex items-center gap-4">
                 {/* Icon */}
                 <div
                   className={`
@@ -178,11 +178,11 @@ export const ItemTypeSelector: React.FC<ItemTypeSelectorProps> = ({ onSelect })
                 </div>
 
                 {/* Text */}
-                <div className="flex-1 text-left min-h-[60px] flex flex-col justify-center">
-                  <h3 className="text-base md:text-lg font-semibold text-[var(--text-primary)] mb-1 group-hover:text-[var(--color-primary)] transition-colors">
+                <div className="flex-1 text-left">
+                  <h3 className="text-base md:text-lg font-semibold text-[var(--text-primary)] mb-0.5 group-hover:text-[var(--color-primary)] transition-colors">
                     {itemType.title}
                   </h3>
-                  <p className="text-sm text-[var(--text-secondary)] leading-tight">
+                  <p className="text-sm text-[var(--text-secondary)] leading-snug mt-1">
                     {itemType.subtitle}
                   </p>
                 </div>
diff --git a/frontend/src/components/domain/unified-wizard/wizards/InventoryWizard.tsx b/frontend/src/components/domain/unified-wizard/wizards/InventoryWizard.tsx
index b5824180..80eda200 100644
--- a/frontend/src/components/domain/unified-wizard/wizards/InventoryWizard.tsx
+++ b/frontend/src/components/domain/unified-wizard/wizards/InventoryWizard.tsx
@@ -29,36 +29,56 @@ const TypeSelectionStep: React.FC<WizardDataProps> = ({ data, onDataChange, onNe
       <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
         <button
           onClick={() => setSelectedType('ingredient')}
-          className={`p-6 rounded-xl border-2 transition-all ${
-            selectedType === 'ingredient'
-              ? 'border-[var(--color-primary)] bg-[var(--color-primary)]/5'
-              : 'border-[var(--border-secondary)]'
-          }`}
+          className={`
+            p-6 rounded-xl border-2 transition-all duration-200
+            hover:shadow-lg hover:-translate-y-0.5
+            ${
+              selectedType === 'ingredient'
+                ? 'border-[var(--color-primary)] bg-[var(--color-primary)]/10 shadow-md ring-2 ring-[var(--color-primary)]/20'
+                : 'border-[var(--border-secondary)] hover:border-[var(--color-primary)]/50'
+            }
+          `}
         >
-          <Leaf className="w-10 h-10 mx-auto mb-3 text-[var(--color-primary)]" />
-          <h4 className="font-semibold text-[var(--text-primary)] mb-2">Ingrediente</h4>
-          <p className="text-sm text-[var(--text-secondary)]">
+          <Leaf className={`w-10 h-10 mx-auto mb-4 transition-colors ${
+            selectedType === 'ingredient' ? 'text-[var(--color-primary)]' : 'text-[var(--text-tertiary)]'
+          }`} />
+          <h4 className={`font-semibold mb-3 transition-colors ${
+            selectedType === 'ingredient' ? 'text-[var(--color-primary)]' : 'text-[var(--text-primary)]'
+          }`}>
+            Ingrediente
+          </h4>
+          <p className="text-sm text-[var(--text-secondary)] leading-relaxed">
             Materias primas usadas en recetas
           </p>
-          <p className="text-xs text-[var(--text-tertiary)] mt-2">
+          <p className="text-xs text-[var(--text-tertiary)] mt-3 leading-relaxed">
             Ej: Harina, azúcar, huevos, mantequilla
           </p>
         </button>
 
         <button
           onClick={() => setSelectedType('finished_product')}
-          className={`p-6 rounded-xl border-2 transition-all ${
-            selectedType === 'finished_product'
-              ? 'border-[var(--color-primary)] bg-[var(--color-primary)]/5'
-              : 'border-[var(--border-secondary)]'
-          }`}
+          className={`
+            p-6 rounded-xl border-2 transition-all duration-200
+            hover:shadow-lg hover:-translate-y-0.5
+            ${
+              selectedType === 'finished_product'
+                ? 'border-[var(--color-primary)] bg-[var(--color-primary)]/10 shadow-md ring-2 ring-[var(--color-primary)]/20'
+                : 'border-[var(--border-secondary)] hover:border-[var(--color-primary)]/50'
+            }
+          `}
         >
-          <Cookie className="w-10 h-10 mx-auto mb-3 text-[var(--color-primary)]" />
-          <h4 className="font-semibold text-[var(--text-primary)] mb-2">Producto Terminado</h4>
-          <p className="text-sm text-[var(--text-secondary)]">
+          <Cookie className={`w-10 h-10 mx-auto mb-4 transition-colors ${
+            selectedType === 'finished_product' ? 'text-[var(--color-primary)]' : 'text-[var(--text-tertiary)]'
+          }`} />
+          <h4 className={`font-semibold mb-3 transition-colors ${
+            selectedType === 'finished_product' ? 'text-[var(--color-primary)]' : 'text-[var(--text-primary)]'
+          }`}>
+            Producto Terminado
+          </h4>
+          <p className="text-sm text-[var(--text-secondary)] leading-relaxed">
             Productos listos para venta
           </p>
-          <p className="text-xs text-[var(--text-tertiary)] mt-2">
+          <p className="text-xs text-[var(--text-tertiary)] mt-3 leading-relaxed">
             Ej: Baguettes, croissants, pasteles
           </p>
         </button>