bakery-admin/bakery-ia
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Improve main entry point and inventory wizard UI/UX

Browse Source 
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.
This commit is contained in:
Claude
2025-11-09 21:01:27 +00:00
parent 0a4a9f4c06
commit c103ed6efc
2 changed files with 52 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
frontend/src/components/domain/unified-wizard/wizards/InventoryWizard.tsx
View File

@@ -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>