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.
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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 ${
|
||||
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)]/5'
|
||||
: 'border-[var(--border-secondary)]'
|
||||
}`}
|
||||
? '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 ${
|
||||
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)]/5'
|
||||
: 'border-[var(--border-secondary)]'
|
||||
}`}
|
||||
? '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>
|
||||
|
||||
Reference in New Issue
Block a user