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

fix: Add dark mode support to all wizard input fields

Browse Source 
- Added bg-[var(--bg-primary)] and text-[var(--text-primary)] CSS variables
- Fixes white background + white text issue in dark mode
- Applied to all input, select, and textarea elements across 8 wizards

Wizards fixed:
- InventoryWizard
- CustomerWizard
- SupplierWizard
- RecipeWizard
- EquipmentWizard
- QualityTemplateWizard
- TeamMemberWizard
- CustomerOrderWizard

(SalesEntryWizard was already fixed in previous commit)

This completes the dark mode UI improvements (High Priority item).
All form inputs now properly support dark mode with correct contrast.
This commit is contained in:
Claude
2025-11-09 21:25:36 +00:00
parent 9adc9725fd
commit 89e672cb4f
8 changed files with 60 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
frontend/src/components/domain/unified-wizard/wizards/CustomerOrderWizard.tsx
View File

@@ -226,7 +226,7 @@ const CustomerSelectionStep: React.FC<WizardDataProps> = ({ data, onDataChange,
value={newCustomer.name} value={newCustomer.name}
onChange={(e) => setNewCustomer({ ...newCustomer, name: e.target.value })} onChange={(e) => setNewCustomer({ ...newCustomer, name: e.target.value })}
placeholder="Ej: Restaurante El Molino" placeholder="Ej: Restaurante El Molino"
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]" className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
/> />
</div> </div>
@@ -237,7 +237,7 @@ const CustomerSelectionStep: React.FC<WizardDataProps> = ({ data, onDataChange,
<select <select
value={newCustomer.type} value={newCustomer.type}
onChange={(e) => setNewCustomer({ ...newCustomer, type: e.target.value })} onChange={(e) => setNewCustomer({ ...newCustomer, type: e.target.value })}
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]" className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
> >
<option value="retail">Minorista</option> <option value="retail">Minorista</option>
<option value="wholesale">Mayorista</option> <option value="wholesale">Mayorista</option>
@@ -255,7 +255,7 @@ const CustomerSelectionStep: React.FC<WizardDataProps> = ({ data, onDataChange,
value={newCustomer.phone} value={newCustomer.phone}
onChange={(e) => setNewCustomer({ ...newCustomer, phone: e.target.value })} onChange={(e) => setNewCustomer({ ...newCustomer, phone: e.target.value })}
placeholder="+34 123 456 789" placeholder="+34 123 456 789"
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]" className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
/> />
</div> </div>
@@ -268,7 +268,7 @@ const CustomerSelectionStep: React.FC<WizardDataProps> = ({ data, onDataChange,
value={newCustomer.email} value={newCustomer.email}
onChange={(e) => setNewCustomer({ ...newCustomer, email: e.target.value })} onChange={(e) => setNewCustomer({ ...newCustomer, email: e.target.value })}
placeholder="contacto@restaurante.com" placeholder="contacto@restaurante.com"
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]" className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
/> />
</div> </div>
</div> </div>
@@ -681,7 +681,7 @@ const DeliveryPaymentStep: React.FC<WizardDataProps> = ({ data, onDataChange, on
value={deliveryData.deliveryDate} value={deliveryData.deliveryDate}
onChange={(e) => setDeliveryData({ ...deliveryData, deliveryDate: e.target.value })} onChange={(e) => setDeliveryData({ ...deliveryData, deliveryDate: e.target.value })}
min={new Date().toISOString().split('T')[0]} min={new Date().toISOString().split('T')[0]}
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]" className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
/> />
</div> </div>
@@ -693,7 +693,7 @@ const DeliveryPaymentStep: React.FC<WizardDataProps> = ({ data, onDataChange, on
type="time" type="time"
value={deliveryData.deliveryTime} value={deliveryData.deliveryTime}
onChange={(e) => setDeliveryData({ ...deliveryData, deliveryTime: e.target.value })} onChange={(e) => setDeliveryData({ ...deliveryData, deliveryTime: e.target.value })}
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]" className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
/> />
</div> </div>
</div> </div>
@@ -753,7 +753,7 @@ const DeliveryPaymentStep: React.FC<WizardDataProps> = ({ data, onDataChange, on
onChange={(e) => setDeliveryData({ ...deliveryData, deliveryAddress: e.target.value })} onChange={(e) => setDeliveryData({ ...deliveryData, deliveryAddress: e.target.value })}
placeholder="Calle, número, piso, código postal, ciudad..." placeholder="Calle, número, piso, código postal, ciudad..."
rows={3} rows={3}
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]" className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
/> />
</div> </div>
)} )}
@@ -767,7 +767,7 @@ const DeliveryPaymentStep: React.FC<WizardDataProps> = ({ data, onDataChange, on
<select <select
value={deliveryData.paymentMethod} value={deliveryData.paymentMethod}
onChange={(e) => setDeliveryData({ ...deliveryData, paymentMethod: e.target.value })} onChange={(e) => setDeliveryData({ ...deliveryData, paymentMethod: e.target.value })}
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]" className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
> >
<option value="cash">Efectivo</option> <option value="cash">Efectivo</option>
<option value="card">Tarjeta</option> <option value="card">Tarjeta</option>
@@ -786,7 +786,7 @@ const DeliveryPaymentStep: React.FC<WizardDataProps> = ({ data, onDataChange, on
<select <select
value={deliveryData.orderStatus} value={deliveryData.orderStatus}
onChange={(e) => setDeliveryData({ ...deliveryData, orderStatus: e.target.value })} onChange={(e) => setDeliveryData({ ...deliveryData, orderStatus: e.target.value })}
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]" className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
> >
<option value="pending">Pendiente</option> <option value="pending">Pendiente</option>
<option value="confirmed">Confirmado</option> <option value="confirmed">Confirmado</option>
@@ -804,7 +804,7 @@ const DeliveryPaymentStep: React.FC<WizardDataProps> = ({ data, onDataChange, on
onChange={(e) => setDeliveryData({ ...deliveryData, specialInstructions: e.target.value })} onChange={(e) => setDeliveryData({ ...deliveryData, specialInstructions: e.target.value })}
placeholder="Notas sobre el pedido, preferencias de entrega, etc..." placeholder="Notas sobre el pedido, preferencias de entrega, etc..."
rows={3} rows={3}
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]" className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
/> />
</div> </div>

26
frontend/src/components/domain/unified-wizard/wizards/CustomerWizard.tsx
View File

@@ -70,7 +70,7 @@ const CustomerDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange, on
value={customerData.name} value={customerData.name}
onChange={(e) => setCustomerData({ ...customerData, name: e.target.value })} onChange={(e) => setCustomerData({ ...customerData, name: e.target.value })}
placeholder="Ej: Restaurante El Molino" placeholder="Ej: Restaurante El Molino"
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]" className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
/> />
</div> </div>
@@ -81,7 +81,7 @@ const CustomerDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange, on
<select <select
value={customerData.customerType} value={customerData.customerType}
onChange={(e) => setCustomerData({ ...customerData, customerType: e.target.value })} onChange={(e) => setCustomerData({ ...customerData, customerType: e.target.value })}
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]" className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
> >
<option value="retail">Minorista</option> <option value="retail">Minorista</option>
<option value="wholesale">Mayorista</option> <option value="wholesale">Mayorista</option>
@@ -101,7 +101,7 @@ const CustomerDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange, on
value={customerData.contactPerson} value={customerData.contactPerson}
onChange={(e) => setCustomerData({ ...customerData, contactPerson: e.target.value })} onChange={(e) => setCustomerData({ ...customerData, contactPerson: e.target.value })}
placeholder="Nombre del contacto" placeholder="Nombre del contacto"
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]" className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
/> />
</div> </div>
</div> </div>
@@ -125,7 +125,7 @@ const CustomerDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange, on
value={customerData.phone} value={customerData.phone}
onChange={(e) => setCustomerData({ ...customerData, phone: e.target.value })} onChange={(e) => setCustomerData({ ...customerData, phone: e.target.value })}
placeholder="+34 123 456 789" placeholder="+34 123 456 789"
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]" className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
/> />
</div> </div>
@@ -139,7 +139,7 @@ const CustomerDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange, on
value={customerData.email} value={customerData.email}
onChange={(e) => setCustomerData({ ...customerData, email: e.target.value })} onChange={(e) => setCustomerData({ ...customerData, email: e.target.value })}
placeholder="contacto@empresa.com" placeholder="contacto@empresa.com"
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]" className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
/> />
</div> </div>
</div> </div>
@@ -162,7 +162,7 @@ const CustomerDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange, on
onChange={(e) => setCustomerData({ ...customerData, address: e.target.value })} onChange={(e) => setCustomerData({ ...customerData, address: e.target.value })}
placeholder="Calle, número, piso, etc..." placeholder="Calle, número, piso, etc..."
rows={2} rows={2}
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]" className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
/> />
</div> </div>
@@ -175,7 +175,7 @@ const CustomerDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange, on
value={customerData.city} value={customerData.city}
onChange={(e) => setCustomerData({ ...customerData, city: e.target.value })} onChange={(e) => setCustomerData({ ...customerData, city: e.target.value })}
placeholder="Ciudad" placeholder="Ciudad"
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]" className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
/> />
</div> </div>
@@ -188,7 +188,7 @@ const CustomerDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange, on
value={customerData.postalCode} value={customerData.postalCode}
onChange={(e) => setCustomerData({ ...customerData, postalCode: e.target.value })} onChange={(e) => setCustomerData({ ...customerData, postalCode: e.target.value })}
placeholder="28001" placeholder="28001"
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]" className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
/> />
</div> </div>
</div> </div>
@@ -357,7 +357,7 @@ const PreferencesTermsStep: React.FC<WizardDataProps> = ({ data, onDataChange, o
<select <select
value={preferences.paymentTerms} value={preferences.paymentTerms}
onChange={(e) => setPreferences({ ...preferences, paymentTerms: e.target.value })} onChange={(e) => setPreferences({ ...preferences, paymentTerms: e.target.value })}
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]" className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
> >
<option value="immediate">Pago Inmediato</option> <option value="immediate">Pago Inmediato</option>
<option value="net15">Net 15 días</option> <option value="net15">Net 15 días</option>
@@ -379,7 +379,7 @@ const PreferencesTermsStep: React.FC<WizardDataProps> = ({ data, onDataChange, o
setPreferences({ ...preferences, customPaymentDays: e.target.value }) setPreferences({ ...preferences, customPaymentDays: e.target.value })
} }
placeholder="45" placeholder="45"
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]" className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
min="1" min="1"
/> />
</div> </div>
@@ -396,7 +396,7 @@ const PreferencesTermsStep: React.FC<WizardDataProps> = ({ data, onDataChange, o
setPreferences({ ...preferences, discountPercentage: e.target.value }) setPreferences({ ...preferences, discountPercentage: e.target.value })
} }
placeholder="10" placeholder="10"
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]" className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
min="0" min="0"
max="100" max="100"
step="0.1" step="0.1"
@@ -493,7 +493,7 @@ const PreferencesTermsStep: React.FC<WizardDataProps> = ({ data, onDataChange, o
} }
placeholder="Ej: Vegano, sin azúcar, kosher, halal..." placeholder="Ej: Vegano, sin azúcar, kosher, halal..."
rows={2} rows={2}
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]" className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
/> />
</div> </div>
</div> </div>
@@ -509,7 +509,7 @@ const PreferencesTermsStep: React.FC<WizardDataProps> = ({ data, onDataChange, o
onChange={(e) => setPreferences({ ...preferences, notes: e.target.value })} onChange={(e) => setPreferences({ ...preferences, notes: e.target.value })}
placeholder="Información adicional sobre el cliente, preferencias especiales, historial..." placeholder="Información adicional sobre el cliente, preferencias especiales, historial..."
rows={3} rows={3}
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]" className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
/> />
</div> </div>

8
frontend/src/components/domain/unified-wizard/wizards/EquipmentWizard.tsx
View File

@@ -81,7 +81,7 @@ const EquipmentDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange, o
<select <select
value={equipmentData.type} value={equipmentData.type}
onChange={(e) => setEquipmentData({ ...equipmentData, type: e.target.value })} onChange={(e) => setEquipmentData({ ...equipmentData, type: e.target.value })}
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]" className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
> >
<option value="oven">Horno</option> <option value="oven">Horno</option>
<option value="mixer">Amasadora</option> <option value="mixer">Amasadora</option>
@@ -97,7 +97,7 @@ const EquipmentDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange, o
value={equipmentData.brand} value={equipmentData.brand}
onChange={(e) => setEquipmentData({ ...equipmentData, brand: e.target.value })} onChange={(e) => setEquipmentData({ ...equipmentData, brand: e.target.value })}
placeholder="Ej: Rational SCC 101" placeholder="Ej: Rational SCC 101"
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]" className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
/> />
</div> </div>
<div> <div>
@@ -107,7 +107,7 @@ const EquipmentDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange, o
value={equipmentData.location} value={equipmentData.location}
onChange={(e) => setEquipmentData({ ...equipmentData, location: e.target.value })} onChange={(e) => setEquipmentData({ ...equipmentData, location: e.target.value })}
placeholder="Ej: Cocina principal" placeholder="Ej: Cocina principal"
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]" className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
/> />
</div> </div>
<div> <div>
@@ -116,7 +116,7 @@ const EquipmentDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange, o
type="date" type="date"
value={equipmentData.purchaseDate} value={equipmentData.purchaseDate}
onChange={(e) => setEquipmentData({ ...equipmentData, purchaseDate: e.target.value })} onChange={(e) => setEquipmentData({ ...equipmentData, purchaseDate: e.target.value })}
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]" className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
/> />
</div> </div>
</div> </div>

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

@@ -132,7 +132,7 @@ const CoreDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange, onNext
value={formData.name} value={formData.name}
onChange={(e) => setFormData({ ...formData, name: e.target.value })} onChange={(e) => setFormData({ ...formData, name: e.target.value })}
placeholder={isIngredient ? "Ej: Harina de trigo" : "Ej: Baguette tradicional"} placeholder={isIngredient ? "Ej: Harina de trigo" : "Ej: Baguette tradicional"}
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]" className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
/> />
</div> </div>
@@ -143,7 +143,7 @@ const CoreDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange, onNext
<select <select
value={formData.category} value={formData.category}
onChange={(e) => setFormData({ ...formData, category: e.target.value })} onChange={(e) => setFormData({ ...formData, category: e.target.value })}
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]" className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
> >
<option value="">Seleccionar...</option> <option value="">Seleccionar...</option>
{isIngredient ? ( {isIngredient ? (
@@ -173,7 +173,7 @@ const CoreDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange, onNext
<select <select
value={formData.unit} value={formData.unit}
onChange={(e) => setFormData({ ...formData, unit: e.target.value })} onChange={(e) => setFormData({ ...formData, unit: e.target.value })}
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]" className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
> >
<option value="">Seleccionar...</option> <option value="">Seleccionar...</option>
<option value="kg">Kilogramos (kg)</option> <option value="kg">Kilogramos (kg)</option>
@@ -191,7 +191,7 @@ const CoreDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange, onNext
<select <select
value={formData.storage} value={formData.storage}
onChange={(e) => setFormData({ ...formData, storage: e.target.value })} onChange={(e) => setFormData({ ...formData, storage: e.target.value })}
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]" className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
> >
<option value="dry">Seco</option> <option value="dry">Seco</option>
<option value="refrigerated">Refrigerado</option> <option value="refrigerated">Refrigerado</option>
@@ -208,7 +208,7 @@ const CoreDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange, onNext
value={formData.reorderPoint} value={formData.reorderPoint}
onChange={(e) => setFormData({ ...formData, reorderPoint: e.target.value })} onChange={(e) => setFormData({ ...formData, reorderPoint: e.target.value })}
placeholder="Cantidad mínima" placeholder="Cantidad mínima"
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]" className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
min="0" min="0"
/> />
</div> </div>
@@ -281,7 +281,7 @@ const InitialLotStep: React.FC<WizardDataProps> = ({ data, onDataChange, onCompl
value={lotData.quantity} value={lotData.quantity}
onChange={(e) => setLotData({ ...lotData, quantity: e.target.value })} onChange={(e) => setLotData({ ...lotData, quantity: e.target.value })}
placeholder="100" placeholder="100"
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]" className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
min="0" min="0"
/> />
</div> </div>
@@ -295,7 +295,7 @@ const InitialLotStep: React.FC<WizardDataProps> = ({ data, onDataChange, onCompl
value={lotData.batchNumber} value={lotData.batchNumber}
onChange={(e) => setLotData({ ...lotData, batchNumber: e.target.value })} onChange={(e) => setLotData({ ...lotData, batchNumber: e.target.value })}
placeholder="LOT-2025-001" placeholder="LOT-2025-001"
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]" className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
/> />
</div> </div>
@@ -307,7 +307,7 @@ const InitialLotStep: React.FC<WizardDataProps> = ({ data, onDataChange, onCompl
type="date" type="date"
value={lotData.expiryDate} value={lotData.expiryDate}
onChange={(e) => setLotData({ ...lotData, expiryDate: e.target.value })} onChange={(e) => setLotData({ ...lotData, expiryDate: e.target.value })}
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]" className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
/> />
</div> </div>
@@ -320,7 +320,7 @@ const InitialLotStep: React.FC<WizardDataProps> = ({ data, onDataChange, onCompl
value={lotData.costPerUnit} value={lotData.costPerUnit}
onChange={(e) => setLotData({ ...lotData, costPerUnit: e.target.value })} onChange={(e) => setLotData({ ...lotData, costPerUnit: e.target.value })}
placeholder="1.50" placeholder="1.50"
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]" className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
min="0" min="0"
step="0.01" step="0.01"
/> />

6
frontend/src/components/domain/unified-wizard/wizards/QualityTemplateWizard.tsx
View File

@@ -97,7 +97,7 @@ const TemplateInfoStep: React.FC<WizardDataProps> = ({ data, onDataChange, onCom
value={templateData.name} value={templateData.name}
onChange={(e) => setTemplateData({ ...templateData, name: e.target.value })} onChange={(e) => setTemplateData({ ...templateData, name: e.target.value })}
placeholder="Ej: Control de Calidad de Pan" placeholder="Ej: Control de Calidad de Pan"
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]" className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
/> />
</div> </div>
<div> <div>
@@ -105,7 +105,7 @@ const TemplateInfoStep: React.FC<WizardDataProps> = ({ data, onDataChange, onCom
<select <select
value={templateData.scope} value={templateData.scope}
onChange={(e) => setTemplateData({ ...templateData, scope: e.target.value })} onChange={(e) => setTemplateData({ ...templateData, scope: e.target.value })}
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]" className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
> >
<option value="product">Calidad de Producto</option> <option value="product">Calidad de Producto</option>
<option value="process">Higiene de Proceso</option> <option value="process">Higiene de Proceso</option>
@@ -118,7 +118,7 @@ const TemplateInfoStep: React.FC<WizardDataProps> = ({ data, onDataChange, onCom
<select <select
value={templateData.frequency} value={templateData.frequency}
onChange={(e) => setTemplateData({ ...templateData, frequency: e.target.value })} onChange={(e) => setTemplateData({ ...templateData, frequency: e.target.value })}
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]" className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
> >
<option value="batch">Cada Lote</option> <option value="batch">Cada Lote</option>
<option value="daily">Diario</option> <option value="daily">Diario</option>

14
frontend/src/components/domain/unified-wizard/wizards/RecipeWizard.tsx
View File

@@ -60,7 +60,7 @@ const RecipeDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange, onNe
value={recipeData.name} value={recipeData.name}
onChange={(e) => setRecipeData({ ...recipeData, name: e.target.value })} onChange={(e) => setRecipeData({ ...recipeData, name: e.target.value })}
placeholder="Ej: Baguette Tradicional" placeholder="Ej: Baguette Tradicional"
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]" className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
/> />
</div> </div>
<div> <div>
@@ -68,7 +68,7 @@ const RecipeDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange, onNe
<select <select
value={recipeData.category} value={recipeData.category}
onChange={(e) => setRecipeData({ ...recipeData, category: e.target.value })} onChange={(e) => setRecipeData({ ...recipeData, category: e.target.value })}
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]" className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
> >
<option value="bread">Pan</option> <option value="bread">Pan</option>
<option value="pastry">Pastelería</option> <option value="pastry">Pastelería</option>
@@ -82,7 +82,7 @@ const RecipeDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange, onNe
<select <select
value={recipeData.finishedProductId} value={recipeData.finishedProductId}
onChange={(e) => setRecipeData({ ...recipeData, finishedProductId: e.target.value })} onChange={(e) => setRecipeData({ ...recipeData, finishedProductId: e.target.value })}
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]" className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
disabled={loading} disabled={loading}
> >
<option value="">Seleccionar producto...</option> <option value="">Seleccionar producto...</option>
@@ -98,7 +98,7 @@ const RecipeDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange, onNe
value={recipeData.yieldQuantity} value={recipeData.yieldQuantity}
onChange={(e) => setRecipeData({ ...recipeData, yieldQuantity: e.target.value })} onChange={(e) => setRecipeData({ ...recipeData, yieldQuantity: e.target.value })}
placeholder="12" placeholder="12"
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]" className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
min="1" min="1"
/> />
</div> </div>
@@ -107,7 +107,7 @@ const RecipeDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange, onNe
<select <select
value={recipeData.yieldUnit} value={recipeData.yieldUnit}
onChange={(e) => setRecipeData({ ...recipeData, yieldUnit: e.target.value })} onChange={(e) => setRecipeData({ ...recipeData, yieldUnit: e.target.value })}
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]" className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
> >
<option value="units">Unidades</option> <option value="units">Unidades</option>
<option value="kg">Kilogramos</option> <option value="kg">Kilogramos</option>
@@ -124,7 +124,7 @@ const RecipeDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange, onNe
value={recipeData.prepTime} value={recipeData.prepTime}
onChange={(e) => setRecipeData({ ...recipeData, prepTime: e.target.value })} onChange={(e) => setRecipeData({ ...recipeData, prepTime: e.target.value })}
placeholder="60" placeholder="60"
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]" className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
min="0" min="0"
/> />
</div> </div>
@@ -134,7 +134,7 @@ const RecipeDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange, onNe
value={recipeData.instructions} value={recipeData.instructions}
onChange={(e) => setRecipeData({ ...recipeData, instructions: e.target.value })} onChange={(e) => setRecipeData({ ...recipeData, instructions: e.target.value })}
placeholder="Pasos de preparación de la receta..." placeholder="Pasos de preparación de la receta..."
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]" className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
rows={4} rows={4}
/> />
</div> </div>

16
frontend/src/components/domain/unified-wizard/wizards/SupplierWizard.tsx
View File

@@ -49,7 +49,7 @@ const SupplierInfoStep: React.FC<WizardDataProps> = ({ data, onDataChange, onNex
value={supplierData.name} value={supplierData.name}
onChange={(e) => setSupplierData({ ...supplierData, name: e.target.value })} onChange={(e) => setSupplierData({ ...supplierData, name: e.target.value })}
placeholder="Ej: Harinas Premium S.L." placeholder="Ej: Harinas Premium S.L."
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]" className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
/> />
</div> </div>
@@ -62,7 +62,7 @@ const SupplierInfoStep: React.FC<WizardDataProps> = ({ data, onDataChange, onNex
value={supplierData.contactPerson} value={supplierData.contactPerson}
onChange={(e) => setSupplierData({ ...supplierData, contactPerson: e.target.value })} onChange={(e) => setSupplierData({ ...supplierData, contactPerson: e.target.value })}
placeholder="Nombre del contacto" placeholder="Nombre del contacto"
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]" className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
/> />
</div> </div>
@@ -76,7 +76,7 @@ const SupplierInfoStep: React.FC<WizardDataProps> = ({ data, onDataChange, onNex
value={supplierData.phone} value={supplierData.phone}
onChange={(e) => setSupplierData({ ...supplierData, phone: e.target.value })} onChange={(e) => setSupplierData({ ...supplierData, phone: e.target.value })}
placeholder="+34 123 456 789" placeholder="+34 123 456 789"
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]" className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
/> />
</div> </div>
@@ -90,7 +90,7 @@ const SupplierInfoStep: React.FC<WizardDataProps> = ({ data, onDataChange, onNex
value={supplierData.email} value={supplierData.email}
onChange={(e) => setSupplierData({ ...supplierData, email: e.target.value })} onChange={(e) => setSupplierData({ ...supplierData, email: e.target.value })}
placeholder="contacto@proveedor.com" placeholder="contacto@proveedor.com"
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]" className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
/> />
</div> </div>
@@ -103,7 +103,7 @@ const SupplierInfoStep: React.FC<WizardDataProps> = ({ data, onDataChange, onNex
value={supplierData.address} value={supplierData.address}
onChange={(e) => setSupplierData({ ...supplierData, address: e.target.value })} onChange={(e) => setSupplierData({ ...supplierData, address: e.target.value })}
placeholder="Calle, Ciudad, País" placeholder="Calle, Ciudad, País"
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]" className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
/> />
</div> </div>
@@ -118,7 +118,7 @@ const SupplierInfoStep: React.FC<WizardDataProps> = ({ data, onDataChange, onNex
onChange={(e) => setSupplierData({ ...supplierData, leadTimeDays: e.target.value })} onChange={(e) => setSupplierData({ ...supplierData, leadTimeDays: e.target.value })}
placeholder="Ej: 7" placeholder="Ej: 7"
min="0" min="0"
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]" className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
/> />
</div> </div>
@@ -129,7 +129,7 @@ const SupplierInfoStep: React.FC<WizardDataProps> = ({ data, onDataChange, onNex
<select <select
value={supplierData.paymentTerms} value={supplierData.paymentTerms}
onChange={(e) => setSupplierData({ ...supplierData, paymentTerms: e.target.value })} onChange={(e) => setSupplierData({ ...supplierData, paymentTerms: e.target.value })}
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]" className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
> >
<option value="">Seleccionar...</option> <option value="">Seleccionar...</option>
<option value="immediate">Inmediato</option> <option value="immediate">Inmediato</option>
@@ -148,7 +148,7 @@ const SupplierInfoStep: React.FC<WizardDataProps> = ({ data, onDataChange, onNex
onChange={(e) => setSupplierData({ ...supplierData, notes: e.target.value })} onChange={(e) => setSupplierData({ ...supplierData, notes: e.target.value })}
placeholder="Información adicional sobre el proveedor..." placeholder="Información adicional sobre el proveedor..."
rows={3} rows={3}
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]" className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
/> />
</div> </div>
</div> </div>

12
frontend/src/components/domain/unified-wizard/wizards/TeamMemberWizard.tsx
View File

@@ -32,7 +32,7 @@ const MemberDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange, onNe
value={memberData.fullName} value={memberData.fullName}
onChange={(e) => setMemberData({ ...memberData, fullName: e.target.value })} onChange={(e) => setMemberData({ ...memberData, fullName: e.target.value })}
placeholder="Ej: Juan García" placeholder="Ej: Juan García"
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]" className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
/> />
</div> </div>
<div> <div>
@@ -45,7 +45,7 @@ const MemberDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange, onNe
value={memberData.email} value={memberData.email}
onChange={(e) => setMemberData({ ...memberData, email: e.target.value })} onChange={(e) => setMemberData({ ...memberData, email: e.target.value })}
placeholder="juan@panaderia.com" placeholder="juan@panaderia.com"
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]" className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
/> />
</div> </div>
<div> <div>
@@ -58,7 +58,7 @@ const MemberDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange, onNe
value={memberData.phone} value={memberData.phone}
onChange={(e) => setMemberData({ ...memberData, phone: e.target.value })} onChange={(e) => setMemberData({ ...memberData, phone: e.target.value })}
placeholder="+34 123 456 789" placeholder="+34 123 456 789"
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]" className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
/> />
</div> </div>
<div> <div>
@@ -66,7 +66,7 @@ const MemberDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange, onNe
<select <select
value={memberData.position} value={memberData.position}
onChange={(e) => setMemberData({ ...memberData, position: e.target.value })} onChange={(e) => setMemberData({ ...memberData, position: e.target.value })}
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]" className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
> >
<option value="baker">Panadero</option> <option value="baker">Panadero</option>
<option value="pastry-chef">Pastelero</option> <option value="pastry-chef">Pastelero</option>
@@ -80,7 +80,7 @@ const MemberDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange, onNe
<select <select
value={memberData.employmentType} value={memberData.employmentType}
onChange={(e) => setMemberData({ ...memberData, employmentType: e.target.value })} onChange={(e) => setMemberData({ ...memberData, employmentType: e.target.value })}
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]" className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
> >
<option value="full-time">Tiempo Completo</option> <option value="full-time">Tiempo Completo</option>
<option value="part-time">Medio Tiempo</option> <option value="part-time">Medio Tiempo</option>
@@ -175,7 +175,7 @@ const PermissionsStep: React.FC<WizardDataProps> = ({ data, onDataChange, onComp
<select <select
value={permissions.role} value={permissions.role}
onChange={(e) => setPermissions({ ...permissions, role: e.target.value })} onChange={(e) => setPermissions({ ...permissions, role: e.target.value })}
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]" className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
> >
<option value="admin">Administrador</option> <option value="admin">Administrador</option>
<option value="manager">Gerente</option> <option value="manager">Gerente</option>