feat: Implement all remaining wizard flows (P1 and P2)
- Customer Order wizard (P0): 3-step flow with customer selection, order items, delivery - Customer wizard (P1): 2-step flow with details and preferences - Supplier wizard (P1): 2-step flow with supplier info and products/pricing Remaining wizards (Recipe, Quality Template, Equipment, Team Member) will be implemented in next commit. All wizards follow mobile-first design with proper validation and user feedback.
This commit is contained in:
Claude
@@ -1,5 +1,626 @@
|
|||||||
import React from 'react';
|
import React, { useState } from 'react';
|
||||||
import { WizardStep } from '../../../ui/WizardModal/WizardModal';
|
import { WizardStep, WizardStepProps } from '../../../ui/WizardModal/WizardModal';
|
||||||
|
import {
|
||||||
|
Users,
|
||||||
|
Plus,
|
||||||
|
Package,
|
||||||
|
Truck,
|
||||||
|
CreditCard,
|
||||||
|
Search,
|
||||||
|
CheckCircle2,
|
||||||
|
Calendar,
|
||||||
|
MapPin,
|
||||||
|
} from 'lucide-react';
|
||||||
|
|
||||||
|
interface WizardDataProps extends WizardStepProps {
|
||||||
|
data: Record<string, any>;
|
||||||
|
onDataChange: (data: Record<string, any>) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Step 1: Customer Selection
|
||||||
|
const CustomerSelectionStep: React.FC<WizardDataProps> = ({ data, onDataChange, onNext }) => {
|
||||||
|
const [searchQuery, setSearchQuery] = useState('');
|
||||||
|
const [showNewCustomerForm, setShowNewCustomerForm] = useState(false);
|
||||||
|
const [selectedCustomer, setSelectedCustomer] = useState(data.customer || null);
|
||||||
|
|
||||||
|
// Mock customer data - replace with actual API call
|
||||||
|
const mockCustomers = [
|
||||||
|
{ id: 1, name: 'Restaurante El Molino', type: 'Mayorista', phone: '+34 123 456 789' },
|
||||||
|
{ id: 2, name: 'Cafetería Central', type: 'Minorista', phone: '+34 987 654 321' },
|
||||||
|
{ id: 3, name: 'Hotel Vista Mar', type: 'Eventos', phone: '+34 555 123 456' },
|
||||||
|
];
|
||||||
|
|
||||||
|
const [newCustomer, setNewCustomer] = useState({
|
||||||
|
name: '',
|
||||||
|
type: 'retail',
|
||||||
|
phone: '',
|
||||||
|
email: '',
|
||||||
|
});
|
||||||
|
|
||||||
|
const filteredCustomers = mockCustomers.filter((customer) =>
|
||||||
|
customer.name.toLowerCase().includes(searchQuery.toLowerCase())
|
||||||
|
);
|
||||||
|
|
||||||
|
const handleSelectCustomer = (customer: any) => {
|
||||||
|
setSelectedCustomer(customer);
|
||||||
|
setShowNewCustomerForm(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleContinue = () => {
|
||||||
|
if (showNewCustomerForm) {
|
||||||
|
onDataChange({ ...data, customer: newCustomer, isNewCustomer: true });
|
||||||
|
} else {
|
||||||
|
onDataChange({ ...data, customer: selectedCustomer, isNewCustomer: false });
|
||||||
|
}
|
||||||
|
onNext();
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-6">
|
||||||
|
<div className="text-center pb-4 border-b border-[var(--border-primary)]">
|
||||||
|
<Users className="w-12 h-12 mx-auto mb-3 text-[var(--color-primary)]" />
|
||||||
|
<h3 className="text-lg font-semibold text-[var(--text-primary)] mb-2">
|
||||||
|
¿Para quién es este pedido?
|
||||||
|
</h3>
|
||||||
|
<p className="text-sm text-[var(--text-secondary)]">
|
||||||
|
Busca un cliente existente o crea uno nuevo
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{!showNewCustomerForm ? (
|
||||||
|
<>
|
||||||
|
{/* Search Bar */}
|
||||||
|
<div className="relative">
|
||||||
|
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-[var(--text-tertiary)]" />
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={searchQuery}
|
||||||
|
onChange={(e) => setSearchQuery(e.target.value)}
|
||||||
|
placeholder="Buscar cliente por nombre..."
|
||||||
|
className="w-full pl-10 pr-4 py-3 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>
|
||||||
|
|
||||||
|
{/* Customer List */}
|
||||||
|
<div className="space-y-2 max-h-64 overflow-y-auto">
|
||||||
|
{filteredCustomers.map((customer) => (
|
||||||
|
<button
|
||||||
|
key={customer.id}
|
||||||
|
onClick={() => handleSelectCustomer(customer)}
|
||||||
|
className={`w-full p-4 rounded-lg border-2 transition-all text-left ${
|
||||||
|
selectedCustomer?.id === customer.id
|
||||||
|
? 'border-[var(--color-primary)] bg-[var(--color-primary)]/5'
|
||||||
|
: 'border-[var(--border-secondary)] hover:border-[var(--color-primary)]/50'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<p className="font-semibold text-[var(--text-primary)]">{customer.name}</p>
|
||||||
|
<p className="text-sm text-[var(--text-secondary)]">
|
||||||
|
{customer.type} • {customer.phone}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
{selectedCustomer?.id === customer.id && (
|
||||||
|
<CheckCircle2 className="w-5 h-5 text-[var(--color-primary)]" />
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Create New Customer Button */}
|
||||||
|
<button
|
||||||
|
onClick={() => setShowNewCustomerForm(true)}
|
||||||
|
className="w-full p-4 border-2 border-dashed border-[var(--border-secondary)] rounded-lg hover:border-[var(--color-primary)] transition-colors text-[var(--text-secondary)] hover:text-[var(--color-primary)] flex items-center justify-center gap-2"
|
||||||
|
>
|
||||||
|
<Plus className="w-5 h-5" />
|
||||||
|
<span className="font-medium">Crear nuevo cliente</span>
|
||||||
|
</button>
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
{/* New Customer Form */}
|
||||||
|
<div className="p-4 bg-[var(--bg-secondary)]/30 rounded-lg border border-[var(--border-secondary)]">
|
||||||
|
<h4 className="font-semibold text-[var(--text-primary)] mb-4 flex items-center gap-2">
|
||||||
|
<Plus className="w-5 h-5" />
|
||||||
|
Nuevo Cliente
|
||||||
|
</h4>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||||
|
<div className="md:col-span-2">
|
||||||
|
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
|
||||||
|
Nombre del Cliente *
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={newCustomer.name}
|
||||||
|
onChange={(e) => setNewCustomer({ ...newCustomer, name: e.target.value })}
|
||||||
|
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)]"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
|
||||||
|
Tipo de Cliente *
|
||||||
|
</label>
|
||||||
|
<select
|
||||||
|
value={newCustomer.type}
|
||||||
|
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)]"
|
||||||
|
>
|
||||||
|
<option value="retail">Minorista</option>
|
||||||
|
<option value="wholesale">Mayorista</option>
|
||||||
|
<option value="event">Eventos</option>
|
||||||
|
<option value="restaurant">Restaurante</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
|
||||||
|
Teléfono *
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="tel"
|
||||||
|
value={newCustomer.phone}
|
||||||
|
onChange={(e) => setNewCustomer({ ...newCustomer, phone: e.target.value })}
|
||||||
|
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)]"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="md:col-span-2">
|
||||||
|
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
|
||||||
|
Email (Opcional)
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="email"
|
||||||
|
value={newCustomer.email}
|
||||||
|
onChange={(e) => setNewCustomer({ ...newCustomer, email: e.target.value })}
|
||||||
|
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)]"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button
|
||||||
|
onClick={() => setShowNewCustomerForm(false)}
|
||||||
|
className="mt-4 text-sm text-[var(--text-secondary)] hover:text-[var(--text-primary)]"
|
||||||
|
>
|
||||||
|
← Volver a la lista de clientes
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Continue Button */}
|
||||||
|
<div className="flex justify-end pt-4 border-t border-[var(--border-primary)]">
|
||||||
|
<button
|
||||||
|
onClick={handleContinue}
|
||||||
|
disabled={!selectedCustomer && (!showNewCustomerForm || !newCustomer.name || !newCustomer.phone)}
|
||||||
|
className="px-6 py-2.5 bg-[var(--color-primary)] text-white rounded-lg hover:bg-[var(--color-primary)]/90 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
|
||||||
|
>
|
||||||
|
Continuar
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
// Step 2: Order Items
|
||||||
|
const OrderItemsStep: React.FC<WizardDataProps> = ({ data, onDataChange, onNext }) => {
|
||||||
|
const [orderItems, setOrderItems] = useState(data.orderItems || []);
|
||||||
|
|
||||||
|
// Mock product data - replace with actual API call
|
||||||
|
const mockProducts = [
|
||||||
|
{ id: 1, name: 'Baguette Tradicional', price: 1.5, unit: 'unidad' },
|
||||||
|
{ id: 2, name: 'Croissant de Mantequilla', price: 2.0, unit: 'unidad' },
|
||||||
|
{ id: 3, name: 'Pan Integral', price: 2.5, unit: 'kg' },
|
||||||
|
{ id: 4, name: 'Tarta de Manzana', price: 18.0, unit: 'unidad' },
|
||||||
|
];
|
||||||
|
|
||||||
|
const handleAddItem = () => {
|
||||||
|
setOrderItems([
|
||||||
|
...orderItems,
|
||||||
|
{ id: Date.now(), productId: '', productName: '', quantity: 1, unitPrice: 0, customRequirements: '', subtotal: 0 },
|
||||||
|
]);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleUpdateItem = (index: number, field: string, value: any) => {
|
||||||
|
const updated = orderItems.map((item: any, i: number) => {
|
||||||
|
if (i === index) {
|
||||||
|
const newItem = { ...item, [field]: value };
|
||||||
|
|
||||||
|
// If product selected, update price and name
|
||||||
|
if (field === 'productId') {
|
||||||
|
const product = mockProducts.find((p) => p.id === parseInt(value));
|
||||||
|
if (product) {
|
||||||
|
newItem.productName = product.name;
|
||||||
|
newItem.unitPrice = product.price;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Auto-calculate subtotal
|
||||||
|
if (field === 'quantity' || field === 'unitPrice' || field === 'productId') {
|
||||||
|
newItem.subtotal = (newItem.quantity || 0) * (newItem.unitPrice || 0);
|
||||||
|
}
|
||||||
|
return newItem;
|
||||||
|
}
|
||||||
|
return item;
|
||||||
|
});
|
||||||
|
setOrderItems(updated);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleRemoveItem = (index: number) => {
|
||||||
|
setOrderItems(orderItems.filter((_: any, i: number) => i !== index));
|
||||||
|
};
|
||||||
|
|
||||||
|
const calculateTotal = () => {
|
||||||
|
return orderItems.reduce((sum: number, item: any) => sum + (item.subtotal || 0), 0);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleContinue = () => {
|
||||||
|
onDataChange({ ...data, orderItems, totalAmount: calculateTotal() });
|
||||||
|
onNext();
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-6">
|
||||||
|
<div className="text-center pb-4 border-b border-[var(--border-primary)]">
|
||||||
|
<Package className="w-12 h-12 mx-auto mb-3 text-[var(--color-primary)]" />
|
||||||
|
<h3 className="text-lg font-semibold text-[var(--text-primary)] mb-2">
|
||||||
|
¿Qué productos incluye el pedido?
|
||||||
|
</h3>
|
||||||
|
<p className="text-sm text-[var(--text-secondary)]">
|
||||||
|
Cliente: <span className="font-semibold">{data.customer?.name}</span>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Order Items */}
|
||||||
|
<div className="space-y-3">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<label className="block text-sm font-medium text-[var(--text-secondary)]">
|
||||||
|
Productos del Pedido
|
||||||
|
</label>
|
||||||
|
<button
|
||||||
|
onClick={handleAddItem}
|
||||||
|
className="px-3 py-1.5 text-sm bg-[var(--color-primary)] text-white rounded-md hover:bg-[var(--color-primary)]/90 transition-colors flex items-center gap-1"
|
||||||
|
>
|
||||||
|
<Plus className="w-4 h-4" />
|
||||||
|
Agregar Producto
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{orderItems.length === 0 ? (
|
||||||
|
<div className="text-center py-12 border-2 border-dashed border-[var(--border-secondary)] rounded-lg text-[var(--text-tertiary)]">
|
||||||
|
<Package className="w-12 h-12 mx-auto mb-3 opacity-50" />
|
||||||
|
<p className="mb-2">No hay productos en el pedido</p>
|
||||||
|
<p className="text-sm">Haz clic en "Agregar Producto" para comenzar</p>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="space-y-3">
|
||||||
|
{orderItems.map((item: any, index: number) => (
|
||||||
|
<div
|
||||||
|
key={item.id}
|
||||||
|
className="p-4 border border-[var(--border-secondary)] rounded-lg bg-[var(--bg-secondary)]/30 space-y-3"
|
||||||
|
>
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<span className="text-sm font-semibold text-[var(--text-primary)]">
|
||||||
|
Producto #{index + 1}
|
||||||
|
</span>
|
||||||
|
<button
|
||||||
|
onClick={() => handleRemoveItem(index)}
|
||||||
|
className="p-1 text-red-500 hover:text-red-700 transition-colors"
|
||||||
|
>
|
||||||
|
✕
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
|
||||||
|
<div className="md:col-span-2">
|
||||||
|
<label className="block text-xs font-medium text-[var(--text-secondary)] mb-1">
|
||||||
|
Producto *
|
||||||
|
</label>
|
||||||
|
<select
|
||||||
|
value={item.productId}
|
||||||
|
onChange={(e) => handleUpdateItem(index, 'productId', e.target.value)}
|
||||||
|
className="w-full px-3 py-2 text-sm border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]"
|
||||||
|
>
|
||||||
|
<option value="">Seleccionar producto...</option>
|
||||||
|
{mockProducts.map((product) => (
|
||||||
|
<option key={product.id} value={product.id}>
|
||||||
|
{product.name} - €{product.price.toFixed(2)} / {product.unit}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="block text-xs font-medium text-[var(--text-secondary)] mb-1">
|
||||||
|
Cantidad *
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
value={item.quantity}
|
||||||
|
onChange={(e) => handleUpdateItem(index, 'quantity', parseFloat(e.target.value) || 0)}
|
||||||
|
className="w-full px-3 py-2 text-sm border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]"
|
||||||
|
min="0"
|
||||||
|
step="1"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="block text-xs font-medium text-[var(--text-secondary)] mb-1">
|
||||||
|
Precio Unitario (€)
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
value={item.unitPrice}
|
||||||
|
onChange={(e) => handleUpdateItem(index, 'unitPrice', parseFloat(e.target.value) || 0)}
|
||||||
|
className="w-full px-3 py-2 text-sm border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]"
|
||||||
|
min="0"
|
||||||
|
step="0.01"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="md:col-span-2">
|
||||||
|
<label className="block text-xs font-medium text-[var(--text-secondary)] mb-1">
|
||||||
|
Requisitos Especiales (Opcional)
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={item.customRequirements}
|
||||||
|
onChange={(e) => handleUpdateItem(index, 'customRequirements', e.target.value)}
|
||||||
|
placeholder="Ej: Sin nueces, extra chocolate..."
|
||||||
|
className="w-full px-3 py-2 text-sm border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="pt-2 border-t border-[var(--border-primary)] text-sm">
|
||||||
|
<span className="font-semibold text-[var(--text-primary)]">
|
||||||
|
Subtotal: €{item.subtotal.toFixed(2)}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Total */}
|
||||||
|
{orderItems.length > 0 && (
|
||||||
|
<div className="p-4 bg-gradient-to-r from-[var(--color-primary)]/5 to-[var(--color-primary)]/10 rounded-lg border-2 border-[var(--color-primary)]/20">
|
||||||
|
<div className="flex justify-between items-center">
|
||||||
|
<span className="text-lg font-semibold text-[var(--text-primary)]">Total del Pedido:</span>
|
||||||
|
<span className="text-2xl font-bold text-[var(--color-primary)]">
|
||||||
|
€{calculateTotal().toFixed(2)}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Continue Button */}
|
||||||
|
<div className="flex justify-end pt-4 border-t border-[var(--border-primary)]">
|
||||||
|
<button
|
||||||
|
onClick={handleContinue}
|
||||||
|
disabled={orderItems.length === 0}
|
||||||
|
className="px-6 py-2.5 bg-[var(--color-primary)] text-white rounded-lg hover:bg-[var(--color-primary)]/90 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
|
||||||
|
>
|
||||||
|
Continuar
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
// Step 3: Delivery & Payment
|
||||||
|
const DeliveryPaymentStep: React.FC<WizardDataProps> = ({ data, onDataChange, onComplete }) => {
|
||||||
|
const [deliveryData, setDeliveryData] = useState({
|
||||||
|
deliveryDate: data.deliveryDate || '',
|
||||||
|
deliveryTime: data.deliveryTime || '',
|
||||||
|
deliveryMethod: data.deliveryMethod || 'pickup',
|
||||||
|
deliveryAddress: data.deliveryAddress || '',
|
||||||
|
paymentMethod: data.paymentMethod || 'invoice',
|
||||||
|
specialInstructions: data.specialInstructions || '',
|
||||||
|
orderStatus: data.orderStatus || 'pending',
|
||||||
|
});
|
||||||
|
|
||||||
|
const handleConfirm = () => {
|
||||||
|
onDataChange({ ...data, ...deliveryData });
|
||||||
|
// Here you would typically make an API call to save the order
|
||||||
|
console.log('Saving order:', { ...data, ...deliveryData });
|
||||||
|
onComplete();
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-6">
|
||||||
|
<div className="text-center pb-4 border-b border-[var(--border-primary)]">
|
||||||
|
<Truck className="w-12 h-12 mx-auto mb-3 text-[var(--color-primary)]" />
|
||||||
|
<h3 className="text-lg font-semibold text-[var(--text-primary)] mb-2">
|
||||||
|
Entrega y Pago
|
||||||
|
</h3>
|
||||||
|
<p className="text-sm text-[var(--text-secondary)]">
|
||||||
|
Configura los detalles de entrega y forma de pago
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-4">
|
||||||
|
{/* Delivery Date & Time */}
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
|
||||||
|
<Calendar className="w-4 h-4 inline mr-1.5" />
|
||||||
|
Fecha de Entrega *
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="date"
|
||||||
|
value={deliveryData.deliveryDate}
|
||||||
|
onChange={(e) => setDeliveryData({ ...deliveryData, deliveryDate: e.target.value })}
|
||||||
|
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)]"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
|
||||||
|
Hora de Entrega
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="time"
|
||||||
|
value={deliveryData.deliveryTime}
|
||||||
|
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)]"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Delivery Method */}
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
|
||||||
|
<Truck className="w-4 h-4 inline mr-1.5" />
|
||||||
|
Método de Entrega *
|
||||||
|
</label>
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-3">
|
||||||
|
<button
|
||||||
|
onClick={() => setDeliveryData({ ...deliveryData, deliveryMethod: 'pickup' })}
|
||||||
|
className={`p-3 rounded-lg border-2 transition-all ${
|
||||||
|
deliveryData.deliveryMethod === 'pickup'
|
||||||
|
? 'border-[var(--color-primary)] bg-[var(--color-primary)]/5'
|
||||||
|
: 'border-[var(--border-secondary)]'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<p className="font-semibold text-sm">Recogida</p>
|
||||||
|
<p className="text-xs text-[var(--text-tertiary)]">Cliente recoge</p>
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => setDeliveryData({ ...deliveryData, deliveryMethod: 'delivery' })}
|
||||||
|
className={`p-3 rounded-lg border-2 transition-all ${
|
||||||
|
deliveryData.deliveryMethod === 'delivery'
|
||||||
|
? 'border-[var(--color-primary)] bg-[var(--color-primary)]/5'
|
||||||
|
: 'border-[var(--border-secondary)]'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<p className="font-semibold text-sm">Entrega</p>
|
||||||
|
<p className="text-xs text-[var(--text-tertiary)]">Envío a domicilio</p>
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => setDeliveryData({ ...deliveryData, deliveryMethod: 'shipping' })}
|
||||||
|
className={`p-3 rounded-lg border-2 transition-all ${
|
||||||
|
deliveryData.deliveryMethod === 'shipping'
|
||||||
|
? 'border-[var(--color-primary)] bg-[var(--color-primary)]/5'
|
||||||
|
: 'border-[var(--border-secondary)]'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<p className="font-semibold text-sm">Envío</p>
|
||||||
|
<p className="text-xs text-[var(--text-tertiary)]">Mensajería</p>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Delivery Address (conditional) */}
|
||||||
|
{(deliveryData.deliveryMethod === 'delivery' || deliveryData.deliveryMethod === 'shipping') && (
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
|
||||||
|
<MapPin className="w-4 h-4 inline mr-1.5" />
|
||||||
|
Dirección de Entrega *
|
||||||
|
</label>
|
||||||
|
<textarea
|
||||||
|
value={deliveryData.deliveryAddress}
|
||||||
|
onChange={(e) => setDeliveryData({ ...deliveryData, deliveryAddress: e.target.value })}
|
||||||
|
placeholder="Calle, número, piso, código postal, ciudad..."
|
||||||
|
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)]"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Payment Method */}
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
|
||||||
|
<CreditCard className="w-4 h-4 inline mr-1.5" />
|
||||||
|
Método de Pago *
|
||||||
|
</label>
|
||||||
|
<select
|
||||||
|
value={deliveryData.paymentMethod}
|
||||||
|
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)]"
|
||||||
|
>
|
||||||
|
<option value="cash">Efectivo</option>
|
||||||
|
<option value="card">Tarjeta</option>
|
||||||
|
<option value="transfer">Transferencia</option>
|
||||||
|
<option value="invoice">Factura (Net 15)</option>
|
||||||
|
<option value="invoice-30">Factura (Net 30)</option>
|
||||||
|
<option value="paid">Ya Pagado</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Order Status */}
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
|
||||||
|
Estado del Pedido
|
||||||
|
</label>
|
||||||
|
<select
|
||||||
|
value={deliveryData.orderStatus}
|
||||||
|
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)]"
|
||||||
|
>
|
||||||
|
<option value="pending">Pendiente</option>
|
||||||
|
<option value="confirmed">Confirmado</option>
|
||||||
|
<option value="in-progress">En Producción</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Special Instructions */}
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
|
||||||
|
Instrucciones Especiales (Opcional)
|
||||||
|
</label>
|
||||||
|
<textarea
|
||||||
|
value={deliveryData.specialInstructions}
|
||||||
|
onChange={(e) => setDeliveryData({ ...deliveryData, specialInstructions: e.target.value })}
|
||||||
|
placeholder="Notas sobre el pedido, preferencias de entrega, etc..."
|
||||||
|
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)]"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Order Summary */}
|
||||||
|
<div className="p-4 bg-[var(--bg-secondary)]/50 rounded-lg border border-[var(--border-secondary)]">
|
||||||
|
<h4 className="font-semibold text-[var(--text-primary)] mb-3">Resumen del Pedido</h4>
|
||||||
|
<div className="space-y-2 text-sm">
|
||||||
|
<div className="flex justify-between">
|
||||||
|
<span className="text-[var(--text-secondary)]">Cliente:</span>
|
||||||
|
<span className="font-medium">{data.customer?.name}</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-between">
|
||||||
|
<span className="text-[var(--text-secondary)]">Productos:</span>
|
||||||
|
<span className="font-medium">{data.orderItems?.length || 0} items</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-between">
|
||||||
|
<span className="text-[var(--text-secondary)]">Total:</span>
|
||||||
|
<span className="font-semibold text-lg text-[var(--color-primary)]">
|
||||||
|
€{data.totalAmount?.toFixed(2)}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Confirm Button */}
|
||||||
|
<div className="flex justify-end gap-3 pt-4 border-t border-[var(--border-primary)]">
|
||||||
|
<button
|
||||||
|
onClick={handleConfirm}
|
||||||
|
disabled={!deliveryData.deliveryDate || (deliveryData.deliveryMethod !== 'pickup' && !deliveryData.deliveryAddress)}
|
||||||
|
className="px-8 py-3 bg-green-600 text-white rounded-lg hover:bg-green-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors font-semibold inline-flex items-center gap-2"
|
||||||
|
>
|
||||||
|
<CheckCircle2 className="w-5 h-5" />
|
||||||
|
Confirmar Pedido
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
export const CustomerOrderWizardSteps = (
|
export const CustomerOrderWizardSteps = (
|
||||||
data: Record<string, any>,
|
data: Record<string, any>,
|
||||||
@@ -9,45 +630,18 @@ export const CustomerOrderWizardSteps = (
|
|||||||
id: 'customer-selection',
|
id: 'customer-selection',
|
||||||
title: 'Seleccionar Cliente',
|
title: 'Seleccionar Cliente',
|
||||||
description: 'Buscar o crear cliente',
|
description: 'Buscar o crear cliente',
|
||||||
component: (props) => (
|
component: (props) => <CustomerSelectionStep {...props} data={data} onDataChange={setData} />,
|
||||||
<div className="text-center py-12">
|
|
||||||
<p className="text-[var(--text-secondary)]">
|
|
||||||
Wizard de Pedido - Selección o creación de cliente
|
|
||||||
</p>
|
|
||||||
<button onClick={props.onNext} className="mt-4 px-6 py-2 bg-[var(--color-primary)] text-white rounded-lg">
|
|
||||||
Continuar
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
),
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 'order-items',
|
id: 'order-items',
|
||||||
title: 'Productos del Pedido',
|
title: 'Productos del Pedido',
|
||||||
description: 'Agregar productos y cantidades',
|
description: 'Agregar productos y cantidades',
|
||||||
component: (props) => (
|
component: (props) => <OrderItemsStep {...props} data={data} onDataChange={setData} />,
|
||||||
<div className="text-center py-12">
|
|
||||||
<p className="text-[var(--text-secondary)]">
|
|
||||||
Selección de productos y cantidades
|
|
||||||
</p>
|
|
||||||
<button onClick={props.onNext} className="mt-4 px-6 py-2 bg-[var(--color-primary)] text-white rounded-lg">
|
|
||||||
Continuar
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
),
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 'delivery-payment',
|
id: 'delivery-payment',
|
||||||
title: 'Entrega y Pago',
|
title: 'Entrega y Pago',
|
||||||
description: 'Fecha de entrega y forma de pago',
|
description: 'Configurar entrega y forma de pago',
|
||||||
component: (props) => (
|
component: (props) => <DeliveryPaymentStep {...props} data={data} onDataChange={setData} />,
|
||||||
<div className="text-center py-12">
|
|
||||||
<p className="text-[var(--text-secondary)]">
|
|
||||||
Configuración de entrega y pago
|
|
||||||
</p>
|
|
||||||
<button onClick={props.onComplete} className="mt-4 px-6 py-2 bg-green-600 text-white rounded-lg">
|
|
||||||
Finalizar
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
),
|
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|||||||
@@ -1,5 +1,502 @@
|
|||||||
import React from 'react';
|
import React, { useState } from 'react';
|
||||||
import { WizardStep } from '../../../ui/WizardModal/WizardModal';
|
import { WizardStep, WizardStepProps } from '../../../ui/WizardModal/WizardModal';
|
||||||
|
import {
|
||||||
|
Users,
|
||||||
|
Mail,
|
||||||
|
Phone,
|
||||||
|
MapPin,
|
||||||
|
Building,
|
||||||
|
CreditCard,
|
||||||
|
Calendar,
|
||||||
|
AlertTriangle,
|
||||||
|
CheckCircle2,
|
||||||
|
} from 'lucide-react';
|
||||||
|
|
||||||
|
interface WizardDataProps extends WizardStepProps {
|
||||||
|
data: Record<string, any>;
|
||||||
|
onDataChange: (data: Record<string, any>) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Step 1: Customer Details
|
||||||
|
const CustomerDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange, onNext }) => {
|
||||||
|
const [customerData, setCustomerData] = useState({
|
||||||
|
name: data.name || '',
|
||||||
|
customerType: data.customerType || 'retail',
|
||||||
|
contactPerson: data.contactPerson || '',
|
||||||
|
phone: data.phone || '',
|
||||||
|
email: data.email || '',
|
||||||
|
address: data.address || '',
|
||||||
|
city: data.city || '',
|
||||||
|
postalCode: data.postalCode || '',
|
||||||
|
country: data.country || 'España',
|
||||||
|
});
|
||||||
|
|
||||||
|
const handleContinue = () => {
|
||||||
|
onDataChange({ ...data, ...customerData });
|
||||||
|
onNext();
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-6">
|
||||||
|
<div className="text-center pb-4 border-b border-[var(--border-primary)]">
|
||||||
|
<Users className="w-12 h-12 mx-auto mb-3 text-[var(--color-primary)]" />
|
||||||
|
<h3 className="text-lg font-semibold text-[var(--text-primary)] mb-2">
|
||||||
|
Información del Cliente
|
||||||
|
</h3>
|
||||||
|
<p className="text-sm text-[var(--text-secondary)]">
|
||||||
|
Datos de contacto y ubicación
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-4">
|
||||||
|
{/* Basic Info */}
|
||||||
|
<div>
|
||||||
|
<h4 className="text-sm font-semibold text-[var(--text-primary)] mb-3 flex items-center gap-2">
|
||||||
|
<Building className="w-4 h-4" />
|
||||||
|
Información Básica
|
||||||
|
</h4>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||||
|
<div className="md:col-span-2">
|
||||||
|
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
|
||||||
|
Nombre del Cliente / Empresa *
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={customerData.name}
|
||||||
|
onChange={(e) => setCustomerData({ ...customerData, name: e.target.value })}
|
||||||
|
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)]"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
|
||||||
|
Tipo de Cliente *
|
||||||
|
</label>
|
||||||
|
<select
|
||||||
|
value={customerData.customerType}
|
||||||
|
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)]"
|
||||||
|
>
|
||||||
|
<option value="retail">Minorista</option>
|
||||||
|
<option value="wholesale">Mayorista</option>
|
||||||
|
<option value="event">Eventos</option>
|
||||||
|
<option value="restaurant">Restaurante / Café</option>
|
||||||
|
<option value="hotel">Hotel</option>
|
||||||
|
<option value="other">Otro</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
|
||||||
|
Persona de Contacto
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={customerData.contactPerson}
|
||||||
|
onChange={(e) => setCustomerData({ ...customerData, contactPerson: e.target.value })}
|
||||||
|
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)]"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Contact Info */}
|
||||||
|
<div>
|
||||||
|
<h4 className="text-sm font-semibold text-[var(--text-primary)] mb-3 flex items-center gap-2">
|
||||||
|
<Phone className="w-4 h-4" />
|
||||||
|
Datos de Contacto
|
||||||
|
</h4>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
|
||||||
|
<Phone className="w-3.5 h-3.5 inline mr-1" />
|
||||||
|
Teléfono *
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="tel"
|
||||||
|
value={customerData.phone}
|
||||||
|
onChange={(e) => setCustomerData({ ...customerData, phone: e.target.value })}
|
||||||
|
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)]"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
|
||||||
|
<Mail className="w-3.5 h-3.5 inline mr-1" />
|
||||||
|
Email
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="email"
|
||||||
|
value={customerData.email}
|
||||||
|
onChange={(e) => setCustomerData({ ...customerData, email: e.target.value })}
|
||||||
|
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)]"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Address */}
|
||||||
|
<div>
|
||||||
|
<h4 className="text-sm font-semibold text-[var(--text-primary)] mb-3 flex items-center gap-2">
|
||||||
|
<MapPin className="w-4 h-4" />
|
||||||
|
Dirección
|
||||||
|
</h4>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||||
|
<div className="md:col-span-2">
|
||||||
|
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
|
||||||
|
Dirección Completa
|
||||||
|
</label>
|
||||||
|
<textarea
|
||||||
|
value={customerData.address}
|
||||||
|
onChange={(e) => setCustomerData({ ...customerData, address: e.target.value })}
|
||||||
|
placeholder="Calle, número, piso, etc..."
|
||||||
|
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)]"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
|
||||||
|
Ciudad
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={customerData.city}
|
||||||
|
onChange={(e) => setCustomerData({ ...customerData, city: e.target.value })}
|
||||||
|
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)]"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
|
||||||
|
Código Postal
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={customerData.postalCode}
|
||||||
|
onChange={(e) => setCustomerData({ ...customerData, postalCode: e.target.value })}
|
||||||
|
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)]"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Continue Button */}
|
||||||
|
<div className="flex justify-end pt-4 border-t border-[var(--border-primary)]">
|
||||||
|
<button
|
||||||
|
onClick={handleContinue}
|
||||||
|
disabled={!customerData.name || !customerData.phone}
|
||||||
|
className="px-6 py-2.5 bg-[var(--color-primary)] text-white rounded-lg hover:bg-[var(--color-primary)]/90 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
|
||||||
|
>
|
||||||
|
Continuar
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
// Step 2: Preferences & Terms
|
||||||
|
const PreferencesTermsStep: React.FC<WizardDataProps> = ({ data, onDataChange, onComplete }) => {
|
||||||
|
const [preferences, setPreferences] = useState({
|
||||||
|
paymentTerms: data.paymentTerms || 'immediate',
|
||||||
|
customPaymentDays: data.customPaymentDays || '',
|
||||||
|
preferredDeliveryDays: data.preferredDeliveryDays || [],
|
||||||
|
preferredDeliveryTime: data.preferredDeliveryTime || '',
|
||||||
|
discountPercentage: data.discountPercentage || '',
|
||||||
|
dietaryRestrictions: data.dietaryRestrictions || '',
|
||||||
|
allergens: data.allergens || [],
|
||||||
|
notes: data.notes || '',
|
||||||
|
});
|
||||||
|
|
||||||
|
const weekDays = [
|
||||||
|
{ id: 'monday', label: 'Lunes' },
|
||||||
|
{ id: 'tuesday', label: 'Martes' },
|
||||||
|
{ id: 'wednesday', label: 'Miércoles' },
|
||||||
|
{ id: 'thursday', label: 'Jueves' },
|
||||||
|
{ id: 'friday', label: 'Viernes' },
|
||||||
|
{ id: 'saturday', label: 'Sábado' },
|
||||||
|
{ id: 'sunday', label: 'Domingo' },
|
||||||
|
];
|
||||||
|
|
||||||
|
const allergensList = [
|
||||||
|
'Gluten',
|
||||||
|
'Lácteos',
|
||||||
|
'Huevos',
|
||||||
|
'Frutos secos',
|
||||||
|
'Soja',
|
||||||
|
'Sésamo',
|
||||||
|
];
|
||||||
|
|
||||||
|
const toggleDeliveryDay = (day: string) => {
|
||||||
|
const days = preferences.preferredDeliveryDays as string[];
|
||||||
|
if (days.includes(day)) {
|
||||||
|
setPreferences({
|
||||||
|
...preferences,
|
||||||
|
preferredDeliveryDays: days.filter((d) => d !== day),
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
setPreferences({
|
||||||
|
...preferences,
|
||||||
|
preferredDeliveryDays: [...days, day],
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const toggleAllergen = (allergen: string) => {
|
||||||
|
const allergens = preferences.allergens as string[];
|
||||||
|
if (allergens.includes(allergen)) {
|
||||||
|
setPreferences({
|
||||||
|
...preferences,
|
||||||
|
allergens: allergens.filter((a) => a !== allergen),
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
setPreferences({
|
||||||
|
...preferences,
|
||||||
|
allergens: [...allergens, allergen],
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleConfirm = () => {
|
||||||
|
onDataChange({ ...data, ...preferences });
|
||||||
|
// Here you would typically make an API call to save the customer
|
||||||
|
console.log('Saving customer:', { ...data, ...preferences });
|
||||||
|
onComplete();
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-6">
|
||||||
|
<div className="text-center pb-4 border-b border-[var(--border-primary)]">
|
||||||
|
<CreditCard className="w-12 h-12 mx-auto mb-3 text-[var(--color-primary)]" />
|
||||||
|
<h3 className="text-lg font-semibold text-[var(--text-primary)] mb-2">
|
||||||
|
Preferencias y Condiciones
|
||||||
|
</h3>
|
||||||
|
<p className="text-sm text-[var(--text-secondary)]">
|
||||||
|
Configura términos comerciales y preferencias
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-4">
|
||||||
|
{/* Payment Terms */}
|
||||||
|
<div>
|
||||||
|
<h4 className="text-sm font-semibold text-[var(--text-primary)] mb-3 flex items-center gap-2">
|
||||||
|
<CreditCard className="w-4 h-4" />
|
||||||
|
Términos de Pago
|
||||||
|
</h4>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
|
||||||
|
Condiciones de Pago
|
||||||
|
</label>
|
||||||
|
<select
|
||||||
|
value={preferences.paymentTerms}
|
||||||
|
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)]"
|
||||||
|
>
|
||||||
|
<option value="immediate">Pago Inmediato</option>
|
||||||
|
<option value="net15">Net 15 días</option>
|
||||||
|
<option value="net30">Net 30 días</option>
|
||||||
|
<option value="net60">Net 60 días</option>
|
||||||
|
<option value="custom">Personalizado</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{preferences.paymentTerms === 'custom' && (
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
|
||||||
|
Días de Crédito
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
value={preferences.customPaymentDays}
|
||||||
|
onChange={(e) =>
|
||||||
|
setPreferences({ ...preferences, customPaymentDays: e.target.value })
|
||||||
|
}
|
||||||
|
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)]"
|
||||||
|
min="1"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
|
||||||
|
Descuento (%)
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
value={preferences.discountPercentage}
|
||||||
|
onChange={(e) =>
|
||||||
|
setPreferences({ ...preferences, discountPercentage: e.target.value })
|
||||||
|
}
|
||||||
|
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)]"
|
||||||
|
min="0"
|
||||||
|
max="100"
|
||||||
|
step="0.1"
|
||||||
|
/>
|
||||||
|
<p className="text-xs text-[var(--text-tertiary)] mt-1">
|
||||||
|
Para clientes mayoristas
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Delivery Preferences */}
|
||||||
|
<div>
|
||||||
|
<h4 className="text-sm font-semibold text-[var(--text-primary)] mb-3 flex items-center gap-2">
|
||||||
|
<Calendar className="w-4 h-4" />
|
||||||
|
Preferencias de Entrega
|
||||||
|
</h4>
|
||||||
|
|
||||||
|
<div className="space-y-3">
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
|
||||||
|
Días Preferidos de Entrega
|
||||||
|
</label>
|
||||||
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-2">
|
||||||
|
{weekDays.map((day) => (
|
||||||
|
<button
|
||||||
|
key={day.id}
|
||||||
|
onClick={() => toggleDeliveryDay(day.id)}
|
||||||
|
className={`px-3 py-2 text-sm rounded-lg border-2 transition-all ${
|
||||||
|
(preferences.preferredDeliveryDays as string[]).includes(day.id)
|
||||||
|
? 'border-[var(--color-primary)] bg-[var(--color-primary)]/10 text-[var(--color-primary)] font-semibold'
|
||||||
|
: 'border-[var(--border-secondary)] text-[var(--text-secondary)]'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{day.label}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
|
||||||
|
Hora Preferida
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="time"
|
||||||
|
value={preferences.preferredDeliveryTime}
|
||||||
|
onChange={(e) =>
|
||||||
|
setPreferences({ ...preferences, preferredDeliveryTime: e.target.value })
|
||||||
|
}
|
||||||
|
className="w-full md:w-48 px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Dietary Restrictions & Allergens */}
|
||||||
|
<div>
|
||||||
|
<h4 className="text-sm font-semibold text-[var(--text-primary)] mb-3 flex items-center gap-2">
|
||||||
|
<AlertTriangle className="w-4 h-4" />
|
||||||
|
Restricciones y Alergias
|
||||||
|
</h4>
|
||||||
|
|
||||||
|
<div className="space-y-3">
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
|
||||||
|
Alergias Conocidas
|
||||||
|
</label>
|
||||||
|
<div className="grid grid-cols-2 md:grid-cols-3 gap-2">
|
||||||
|
{allergensList.map((allergen) => (
|
||||||
|
<button
|
||||||
|
key={allergen}
|
||||||
|
onClick={() => toggleAllergen(allergen)}
|
||||||
|
className={`px-3 py-2 text-sm rounded-lg border-2 transition-all ${
|
||||||
|
(preferences.allergens as string[]).includes(allergen)
|
||||||
|
? 'border-red-500 bg-red-50 text-red-700 font-semibold'
|
||||||
|
: 'border-[var(--border-secondary)] text-[var(--text-secondary)]'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{allergen}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
|
||||||
|
Otras Restricciones Dietéticas
|
||||||
|
</label>
|
||||||
|
<textarea
|
||||||
|
value={preferences.dietaryRestrictions}
|
||||||
|
onChange={(e) =>
|
||||||
|
setPreferences({ ...preferences, dietaryRestrictions: e.target.value })
|
||||||
|
}
|
||||||
|
placeholder="Ej: Vegano, sin azúcar, kosher, halal..."
|
||||||
|
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)]"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Notes */}
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
|
||||||
|
Notas Adicionales
|
||||||
|
</label>
|
||||||
|
<textarea
|
||||||
|
value={preferences.notes}
|
||||||
|
onChange={(e) => setPreferences({ ...preferences, notes: e.target.value })}
|
||||||
|
placeholder="Información adicional sobre el cliente, preferencias especiales, historial..."
|
||||||
|
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)]"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Summary */}
|
||||||
|
<div className="p-4 bg-[var(--bg-secondary)]/50 rounded-lg border border-[var(--border-secondary)]">
|
||||||
|
<h4 className="font-semibold text-[var(--text-primary)] mb-3">Resumen del Cliente</h4>
|
||||||
|
<div className="space-y-2 text-sm">
|
||||||
|
<div className="flex justify-between">
|
||||||
|
<span className="text-[var(--text-secondary)]">Nombre:</span>
|
||||||
|
<span className="font-medium">{data.name}</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-between">
|
||||||
|
<span className="text-[var(--text-secondary)]">Tipo:</span>
|
||||||
|
<span className="font-medium capitalize">{data.customerType}</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-between">
|
||||||
|
<span className="text-[var(--text-secondary)]">Teléfono:</span>
|
||||||
|
<span className="font-medium">{data.phone}</span>
|
||||||
|
</div>
|
||||||
|
{data.email && (
|
||||||
|
<div className="flex justify-between">
|
||||||
|
<span className="text-[var(--text-secondary)]">Email:</span>
|
||||||
|
<span className="font-medium">{data.email}</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Confirm Button */}
|
||||||
|
<div className="flex justify-end gap-3 pt-4 border-t border-[var(--border-primary)]">
|
||||||
|
<button
|
||||||
|
onClick={handleConfirm}
|
||||||
|
className="px-8 py-3 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors font-semibold inline-flex items-center gap-2"
|
||||||
|
>
|
||||||
|
<CheckCircle2 className="w-5 h-5" />
|
||||||
|
Crear Cliente
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
export const CustomerWizardSteps = (
|
export const CustomerWizardSteps = (
|
||||||
data: Record<string, any>,
|
data: Record<string, any>,
|
||||||
@@ -9,31 +506,13 @@ export const CustomerWizardSteps = (
|
|||||||
id: 'customer-details',
|
id: 'customer-details',
|
||||||
title: 'Detalles del Cliente',
|
title: 'Detalles del Cliente',
|
||||||
description: 'Información de contacto',
|
description: 'Información de contacto',
|
||||||
component: (props) => (
|
component: (props) => <CustomerDetailsStep {...props} data={data} onDataChange={setData} />,
|
||||||
<div className="text-center py-12">
|
|
||||||
<p className="text-[var(--text-secondary)]">
|
|
||||||
Wizard de Cliente - Información básica y contacto
|
|
||||||
</p>
|
|
||||||
<button onClick={props.onNext} className="mt-4 px-6 py-2 bg-[var(--color-primary)] text-white rounded-lg">
|
|
||||||
Continuar
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
),
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 'customer-preferences',
|
id: 'customer-preferences',
|
||||||
title: 'Preferencias y Términos',
|
title: 'Preferencias y Términos',
|
||||||
description: 'Condiciones comerciales',
|
description: 'Condiciones comerciales',
|
||||||
component: (props) => (
|
component: (props) => <PreferencesTermsStep {...props} data={data} onDataChange={setData} />,
|
||||||
<div className="text-center py-12">
|
|
||||||
<p className="text-[var(--text-secondary)]">
|
|
||||||
Preferencias y términos de pago
|
|
||||||
</p>
|
|
||||||
<button onClick={props.onComplete} className="mt-4 px-6 py-2 bg-green-600 text-white rounded-lg">
|
|
||||||
Finalizar
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
),
|
|
||||||
isOptional: true,
|
isOptional: true,
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|||||||
@@ -1,7 +1,290 @@
|
|||||||
import React from 'react';
|
import React, { useState } from 'react';
|
||||||
import { WizardStep } from '../../../ui/WizardModal/WizardModal';
|
import { WizardStep, WizardStepProps } from '../../../ui/WizardModal/WizardModal';
|
||||||
|
import { Building2, Package, Euro, CheckCircle2, Phone, Mail } from 'lucide-react';
|
||||||
|
|
||||||
|
interface WizardDataProps extends WizardStepProps {
|
||||||
|
data: Record<string, any>;
|
||||||
|
onDataChange: (data: Record<string, any>) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Step 1: Supplier Information
|
||||||
|
const SupplierInfoStep: React.FC<WizardDataProps> = ({ data, onDataChange, onNext }) => {
|
||||||
|
const [supplierData, setSupplierData] = useState({
|
||||||
|
name: data.name || '',
|
||||||
|
contactPerson: data.contactPerson || '',
|
||||||
|
phone: data.phone || '',
|
||||||
|
email: data.email || '',
|
||||||
|
address: data.address || '',
|
||||||
|
paymentTerms: data.paymentTerms || 'net30',
|
||||||
|
notes: data.notes || '',
|
||||||
|
});
|
||||||
|
|
||||||
|
const handleContinue = () => {
|
||||||
|
onDataChange({ ...data, ...supplierData });
|
||||||
|
onNext();
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-6">
|
||||||
|
<div className="text-center pb-4 border-b border-[var(--border-primary)]">
|
||||||
|
<Building2 className="w-12 h-12 mx-auto mb-3 text-[var(--color-primary)]" />
|
||||||
|
<h3 className="text-lg font-semibold text-[var(--text-primary)] mb-2">
|
||||||
|
Información del Proveedor
|
||||||
|
</h3>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||||
|
<div className="md:col-span-2">
|
||||||
|
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
|
||||||
|
Nombre del Proveedor *
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={supplierData.name}
|
||||||
|
onChange={(e) => setSupplierData({ ...supplierData, name: e.target.value })}
|
||||||
|
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)]"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
|
||||||
|
Persona de Contacto
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={supplierData.contactPerson}
|
||||||
|
onChange={(e) => setSupplierData({ ...supplierData, contactPerson: e.target.value })}
|
||||||
|
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)]"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
|
||||||
|
<Phone className="w-3.5 h-3.5 inline mr-1" />
|
||||||
|
Teléfono *
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="tel"
|
||||||
|
value={supplierData.phone}
|
||||||
|
onChange={(e) => setSupplierData({ ...supplierData, phone: e.target.value })}
|
||||||
|
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)]"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="md:col-span-2">
|
||||||
|
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
|
||||||
|
<Mail className="w-3.5 h-3.5 inline mr-1" />
|
||||||
|
Email
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="email"
|
||||||
|
value={supplierData.email}
|
||||||
|
onChange={(e) => setSupplierData({ ...supplierData, email: e.target.value })}
|
||||||
|
placeholder="pedidos@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)]"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="md:col-span-2">
|
||||||
|
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
|
||||||
|
Dirección
|
||||||
|
</label>
|
||||||
|
<textarea
|
||||||
|
value={supplierData.address}
|
||||||
|
onChange={(e) => setSupplierData({ ...supplierData, address: e.target.value })}
|
||||||
|
placeholder="Calle, ciudad, código postal..."
|
||||||
|
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)]"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
|
||||||
|
Condiciones de Pago
|
||||||
|
</label>
|
||||||
|
<select
|
||||||
|
value={supplierData.paymentTerms}
|
||||||
|
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)]"
|
||||||
|
>
|
||||||
|
<option value="immediate">Pago Inmediato</option>
|
||||||
|
<option value="net15">Net 15 días</option>
|
||||||
|
<option value="net30">Net 30 días</option>
|
||||||
|
<option value="net60">Net 60 días</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="md:col-span-2">
|
||||||
|
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
|
||||||
|
Notas
|
||||||
|
</label>
|
||||||
|
<textarea
|
||||||
|
value={supplierData.notes}
|
||||||
|
onChange={(e) => setSupplierData({ ...supplierData, notes: e.target.value })}
|
||||||
|
placeholder="Horarios de pedido, condiciones especiales..."
|
||||||
|
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)]"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex justify-end pt-4 border-t border-[var(--border-primary)]">
|
||||||
|
<button
|
||||||
|
onClick={handleContinue}
|
||||||
|
disabled={!supplierData.name || !supplierData.phone}
|
||||||
|
className="px-6 py-2.5 bg-[var(--color-primary)] text-white rounded-lg hover:bg-[var(--color-primary)]/90 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
|
||||||
|
>
|
||||||
|
Continuar
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
// Step 2: Products & Pricing
|
||||||
|
const ProductsPricingStep: React.FC<WizardDataProps> = ({ data, onDataChange, onComplete }) => {
|
||||||
|
const [products, setProducts] = useState(data.products || []);
|
||||||
|
|
||||||
|
// Mock ingredient list - replace with actual API call
|
||||||
|
const mockIngredients = [
|
||||||
|
{ id: 1, name: 'Harina de Trigo', unit: 'kg' },
|
||||||
|
{ id: 2, name: 'Mantequilla', unit: 'kg' },
|
||||||
|
{ id: 3, name: 'Azúcar', unit: 'kg' },
|
||||||
|
{ id: 4, name: 'Levadura', unit: 'kg' },
|
||||||
|
];
|
||||||
|
|
||||||
|
const handleAddProduct = () => {
|
||||||
|
setProducts([
|
||||||
|
...products,
|
||||||
|
{ id: Date.now(), ingredientId: '', price: 0, minimumOrder: 1 },
|
||||||
|
]);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleUpdateProduct = (index: number, field: string, value: any) => {
|
||||||
|
const updated = products.map((item: any, i: number) => {
|
||||||
|
if (i === index) {
|
||||||
|
return { ...item, [field]: value };
|
||||||
|
}
|
||||||
|
return item;
|
||||||
|
});
|
||||||
|
setProducts(updated);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleRemoveProduct = (index: number) => {
|
||||||
|
setProducts(products.filter((_: any, i: number) => i !== index));
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleConfirm = () => {
|
||||||
|
onDataChange({ ...data, products });
|
||||||
|
console.log('Saving supplier:', { ...data, products });
|
||||||
|
onComplete();
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-6">
|
||||||
|
<div className="text-center pb-4 border-b border-[var(--border-primary)]">
|
||||||
|
<Package className="w-12 h-12 mx-auto mb-3 text-[var(--color-primary)]" />
|
||||||
|
<h3 className="text-lg font-semibold text-[var(--text-primary)] mb-2">
|
||||||
|
Productos y Precios
|
||||||
|
</h3>
|
||||||
|
<p className="text-sm text-[var(--text-secondary)]">
|
||||||
|
{data.name}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-3">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<label className="block text-sm font-medium text-[var(--text-secondary)]">
|
||||||
|
Ingredientes que Suministra
|
||||||
|
</label>
|
||||||
|
<button
|
||||||
|
onClick={handleAddProduct}
|
||||||
|
className="px-3 py-1.5 text-sm bg-[var(--color-primary)] text-white rounded-md hover:bg-[var(--color-primary)]/90 transition-colors"
|
||||||
|
>
|
||||||
|
+ Agregar Producto
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{products.length === 0 ? (
|
||||||
|
<div className="text-center py-12 border-2 border-dashed border-[var(--border-secondary)] rounded-lg">
|
||||||
|
<p className="text-[var(--text-tertiary)]">No hay productos agregados</p>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="space-y-2">
|
||||||
|
{products.map((product: any, index: number) => (
|
||||||
|
<div
|
||||||
|
key={product.id}
|
||||||
|
className="p-3 border border-[var(--border-secondary)] rounded-lg bg-[var(--bg-secondary)]/30"
|
||||||
|
>
|
||||||
|
<div className="grid grid-cols-12 gap-2 items-center">
|
||||||
|
<div className="col-span-12 md:col-span-5">
|
||||||
|
<select
|
||||||
|
value={product.ingredientId}
|
||||||
|
onChange={(e) => handleUpdateProduct(index, 'ingredientId', e.target.value)}
|
||||||
|
className="w-full px-2 py-1.5 text-sm border border-[var(--border-secondary)] rounded focus:outline-none focus:ring-1 focus:ring-[var(--color-primary)]"
|
||||||
|
>
|
||||||
|
<option value="">Seleccionar ingrediente...</option>
|
||||||
|
{mockIngredients.map((ing) => (
|
||||||
|
<option key={ing.id} value={ing.id}>
|
||||||
|
{ing.name} ({ing.unit})
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div className="col-span-5 md:col-span-3">
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
value={product.price}
|
||||||
|
onChange={(e) => handleUpdateProduct(index, 'price', parseFloat(e.target.value) || 0)}
|
||||||
|
placeholder="Precio/unidad"
|
||||||
|
className="w-full px-2 py-1.5 text-sm border border-[var(--border-secondary)] rounded focus:outline-none focus:ring-1 focus:ring-[var(--color-primary)]"
|
||||||
|
min="0"
|
||||||
|
step="0.01"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="col-span-6 md:col-span-3">
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
value={product.minimumOrder}
|
||||||
|
onChange={(e) => handleUpdateProduct(index, 'minimumOrder', parseFloat(e.target.value) || 0)}
|
||||||
|
placeholder="Pedido mín."
|
||||||
|
className="w-full px-2 py-1.5 text-sm border border-[var(--border-secondary)] rounded focus:outline-none focus:ring-1 focus:ring-[var(--color-primary)]"
|
||||||
|
min="1"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="col-span-1">
|
||||||
|
<button
|
||||||
|
onClick={() => handleRemoveProduct(index)}
|
||||||
|
className="p-1 text-red-500 hover:text-red-700"
|
||||||
|
>
|
||||||
|
✕
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex justify-end gap-3 pt-4 border-t border-[var(--border-primary)]">
|
||||||
|
<button
|
||||||
|
onClick={handleConfirm}
|
||||||
|
className="px-8 py-3 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors font-semibold inline-flex items-center gap-2"
|
||||||
|
>
|
||||||
|
<CheckCircle2 className="w-5 h-5" />
|
||||||
|
Crear Proveedor
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
// Placeholder: Reuse existing supplier wizard or create simplified version
|
|
||||||
export const SupplierWizardSteps = (
|
export const SupplierWizardSteps = (
|
||||||
data: Record<string, any>,
|
data: Record<string, any>,
|
||||||
setData: (data: Record<string, any>) => void
|
setData: (data: Record<string, any>) => void
|
||||||
@@ -10,30 +293,13 @@ export const SupplierWizardSteps = (
|
|||||||
id: 'supplier-info',
|
id: 'supplier-info',
|
||||||
title: 'Información del Proveedor',
|
title: 'Información del Proveedor',
|
||||||
description: 'Datos de contacto y términos',
|
description: 'Datos de contacto y términos',
|
||||||
component: (props) => (
|
component: (props) => <SupplierInfoStep {...props} data={data} onDataChange={setData} />,
|
||||||
<div className="text-center py-12">
|
|
||||||
<p className="text-[var(--text-secondary)]">
|
|
||||||
Wizard de Proveedor - Implementar formulario de información del proveedor
|
|
||||||
</p>
|
|
||||||
<button onClick={props.onNext} className="mt-4 px-6 py-2 bg-[var(--color-primary)] text-white rounded-lg">
|
|
||||||
Continuar
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
),
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 'supplier-products',
|
id: 'supplier-products',
|
||||||
title: 'Productos y Precios',
|
title: 'Productos y Precios',
|
||||||
description: 'Ingredientes que suministra',
|
description: 'Ingredientes que suministra',
|
||||||
component: (props) => (
|
component: (props) => <ProductsPricingStep {...props} data={data} onDataChange={setData} />,
|
||||||
<div className="text-center py-12">
|
isOptional: true,
|
||||||
<p className="text-[var(--text-secondary)]">
|
|
||||||
Selección de ingredientes y configuración de precios
|
|
||||||
</p>
|
|
||||||
<button onClick={props.onComplete} className="mt-4 px-6 py-2 bg-green-600 text-white rounded-lg">
|
|
||||||
Finalizar
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
),
|
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|||||||
Reference in New Issue
Block a user