Improve the UI add button
This commit is contained in:
Urtzi Alfaro
@@ -7,62 +7,23 @@ import { showToast } from '../../../../utils/toast';
|
||||
import { AdvancedOptionsSection } from '../../../ui/AdvancedOptionsSection';
|
||||
import Tooltip from '../../../ui/Tooltip/Tooltip';
|
||||
|
||||
interface WizardDataProps extends WizardStepProps {
|
||||
data: Record<string, any>;
|
||||
onDataChange: (data: Record<string, any>) => void;
|
||||
}
|
||||
|
||||
const SupplierDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange, onComplete }) => {
|
||||
const SupplierDetailsStep: React.FC<WizardStepProps> = ({ dataRef, onDataChange, onComplete }) => {
|
||||
// New architecture: access data from dataRef.current
|
||||
const data = dataRef?.current || {};
|
||||
const { currentTenant } = useTenant();
|
||||
const [supplierData, setSupplierData] = useState({
|
||||
// Required fields
|
||||
name: data.name || '',
|
||||
supplierType: data.supplierType || 'ingredients',
|
||||
status: data.status || 'pending_approval',
|
||||
paymentTerms: data.paymentTerms || 'net_30',
|
||||
currency: data.currency || 'EUR',
|
||||
standardLeadTime: data.standardLeadTime || 3,
|
||||
|
||||
// Basic optional fields
|
||||
contactPerson: data.contactPerson || '',
|
||||
email: data.email || '',
|
||||
phone: data.phone || '',
|
||||
|
||||
// Advanced optional fields
|
||||
supplierCode: data.supplierCode || '',
|
||||
taxId: data.taxId || '',
|
||||
registrationNumber: data.registrationNumber || '',
|
||||
mobile: data.mobile || '',
|
||||
website: data.website || '',
|
||||
addressLine1: data.addressLine1 || '',
|
||||
addressLine2: data.addressLine2 || '',
|
||||
city: data.city || '',
|
||||
stateProvince: data.stateProvince || '',
|
||||
postalCode: data.postalCode || '',
|
||||
country: data.country || '',
|
||||
creditLimit: data.creditLimit || '',
|
||||
minimumOrderAmount: data.minimumOrderAmount || '',
|
||||
deliveryArea: data.deliveryArea || '',
|
||||
isPreferredSupplier: data.isPreferredSupplier || false,
|
||||
autoApproveEnabled: data.autoApproveEnabled || false,
|
||||
notes: data.notes || '',
|
||||
certifications: data.certifications || '',
|
||||
specializations: data.specializations || '',
|
||||
});
|
||||
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (!supplierData.supplierCode && supplierData.name) {
|
||||
const code = `SUP-${supplierData.name.substring(0, 3).toUpperCase()}-${Date.now().toString().slice(-4)}`;
|
||||
setSupplierData(prev => ({ ...prev, supplierCode: code }));
|
||||
}
|
||||
}, [supplierData.name]);
|
||||
const handleFieldChange = (field: string, value: any) => {
|
||||
onDataChange?.({ ...data, [field]: value });
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
onDataChange({ ...data, ...supplierData });
|
||||
}, [supplierData]);
|
||||
if (!data.supplierCode && data.name) {
|
||||
const code = `SUP-${data.name.substring(0, 3).toUpperCase()}-${Date.now().toString().slice(-4)}`;
|
||||
onDataChange?.({ ...data, supplierCode: code });
|
||||
}
|
||||
}, [data.name]);
|
||||
|
||||
const handleCreateSupplier = async () => {
|
||||
if (!currentTenant?.id) {
|
||||
@@ -75,41 +36,41 @@ const SupplierDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange, on
|
||||
|
||||
try {
|
||||
const payload = {
|
||||
name: supplierData.name,
|
||||
supplier_type: supplierData.supplierType,
|
||||
status: supplierData.status,
|
||||
payment_terms: supplierData.paymentTerms,
|
||||
currency: supplierData.currency,
|
||||
standard_lead_time: supplierData.standardLeadTime,
|
||||
supplier_code: supplierData.supplierCode || undefined,
|
||||
tax_id: supplierData.taxId || undefined,
|
||||
registration_number: supplierData.registrationNumber || undefined,
|
||||
contact_person: supplierData.contactPerson || undefined,
|
||||
email: supplierData.email || undefined,
|
||||
phone: supplierData.phone || undefined,
|
||||
mobile: supplierData.mobile || undefined,
|
||||
website: supplierData.website || undefined,
|
||||
address_line1: supplierData.addressLine1 || undefined,
|
||||
address_line2: supplierData.addressLine2 || undefined,
|
||||
city: supplierData.city || undefined,
|
||||
state_province: supplierData.stateProvince || undefined,
|
||||
postal_code: supplierData.postalCode || undefined,
|
||||
country: supplierData.country || undefined,
|
||||
credit_limit: supplierData.creditLimit ? parseFloat(supplierData.creditLimit) : undefined,
|
||||
minimum_order_amount: supplierData.minimumOrderAmount ? parseFloat(supplierData.minimumOrderAmount) : undefined,
|
||||
delivery_area: supplierData.deliveryArea || undefined,
|
||||
is_preferred_supplier: supplierData.isPreferredSupplier,
|
||||
auto_approve_enabled: supplierData.autoApproveEnabled,
|
||||
notes: supplierData.notes || undefined,
|
||||
certifications: supplierData.certifications ? JSON.parse(`{"items": ${JSON.stringify(supplierData.certifications.split(',').map(c => c.trim()))}}`) : undefined,
|
||||
specializations: supplierData.specializations ? JSON.parse(`{"items": ${JSON.stringify(supplierData.specializations.split(',').map(s => s.trim()))}}`) : undefined,
|
||||
name: data.name,
|
||||
supplier_type: data.supplierType,
|
||||
status: data.status,
|
||||
payment_terms: data.paymentTerms,
|
||||
currency: data.currency,
|
||||
standard_lead_time: data.standardLeadTime,
|
||||
supplier_code: data.supplierCode || undefined,
|
||||
tax_id: data.taxId || undefined,
|
||||
registration_number: data.registrationNumber || undefined,
|
||||
contact_person: data.contactPerson || undefined,
|
||||
email: data.email || undefined,
|
||||
phone: data.phone || undefined,
|
||||
mobile: data.mobile || undefined,
|
||||
website: data.website || undefined,
|
||||
address_line1: data.addressLine1 || undefined,
|
||||
address_line2: data.addressLine2 || undefined,
|
||||
city: data.city || undefined,
|
||||
state_province: data.stateProvince || undefined,
|
||||
postal_code: data.postalCode || undefined,
|
||||
country: data.country || undefined,
|
||||
credit_limit: data.creditLimit ? parseFloat(data.creditLimit) : undefined,
|
||||
minimum_order_amount: data.minimumOrderAmount ? parseFloat(data.minimumOrderAmount) : undefined,
|
||||
delivery_area: data.deliveryArea || undefined,
|
||||
is_preferred_supplier: data.isPreferredSupplier,
|
||||
auto_approve_enabled: data.autoApproveEnabled,
|
||||
notes: data.notes || undefined,
|
||||
certifications: data.certifications ? JSON.parse(`{"items": ${JSON.stringify(data.certifications.split(',').map(c => c.trim()))}}`) : undefined,
|
||||
specializations: data.specializations ? JSON.parse(`{"items": ${JSON.stringify(data.specializations.split(',').map(s => s.trim()))}}`) : undefined,
|
||||
created_by: currentTenant.id,
|
||||
updated_by: currentTenant.id,
|
||||
};
|
||||
|
||||
await suppliersService.createSupplier(currentTenant.id, payload);
|
||||
showToast.success('Supplier created successfully');
|
||||
onComplete();
|
||||
// Let the wizard handle completion via the Next/Complete button
|
||||
} catch (err: any) {
|
||||
console.error('Error creating supplier:', err);
|
||||
const errorMessage = err.response?.data?.detail || 'Error creating supplier';
|
||||
@@ -143,8 +104,8 @@ const SupplierDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange, on
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={supplierData.name}
|
||||
onChange={(e) => setSupplierData({ ...supplierData, name: e.target.value })}
|
||||
value={data.name}
|
||||
onChange={(e) => handleFieldChange('name', e.target.value)}
|
||||
placeholder="e.g., Premium Flour Suppliers Ltd."
|
||||
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)]"
|
||||
/>
|
||||
@@ -158,8 +119,8 @@ const SupplierDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange, on
|
||||
</Tooltip>
|
||||
</label>
|
||||
<select
|
||||
value={supplierData.supplierType}
|
||||
onChange={(e) => setSupplierData({ ...supplierData, supplierType: e.target.value })}
|
||||
value={data.supplierType}
|
||||
onChange={(e) => handleFieldChange('supplierType', 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)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
|
||||
>
|
||||
<option value="ingredients">Ingredients</option>
|
||||
@@ -176,8 +137,8 @@ const SupplierDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange, on
|
||||
Status *
|
||||
</label>
|
||||
<select
|
||||
value={supplierData.status}
|
||||
onChange={(e) => setSupplierData({ ...supplierData, status: e.target.value })}
|
||||
value={data.status}
|
||||
onChange={(e) => handleFieldChange('status', 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)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
|
||||
>
|
||||
<option value="active">Active</option>
|
||||
@@ -193,8 +154,8 @@ const SupplierDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange, on
|
||||
Payment Terms *
|
||||
</label>
|
||||
<select
|
||||
value={supplierData.paymentTerms}
|
||||
onChange={(e) => setSupplierData({ ...supplierData, paymentTerms: e.target.value })}
|
||||
value={data.paymentTerms}
|
||||
onChange={(e) => handleFieldChange('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)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
|
||||
>
|
||||
<option value="cod">COD (Cash on Delivery)</option>
|
||||
@@ -213,8 +174,8 @@ const SupplierDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange, on
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={supplierData.currency}
|
||||
onChange={(e) => setSupplierData({ ...supplierData, currency: e.target.value })}
|
||||
value={data.currency}
|
||||
onChange={(e) => handleFieldChange('currency', e.target.value)}
|
||||
placeholder="EUR"
|
||||
maxLength={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)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
|
||||
@@ -230,8 +191,8 @@ const SupplierDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange, on
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
value={supplierData.standardLeadTime}
|
||||
onChange={(e) => setSupplierData({ ...supplierData, standardLeadTime: parseInt(e.target.value) || 0 })}
|
||||
value={data.standardLeadTime}
|
||||
onChange={(e) => handleFieldChange('standardLeadTime', parseInt(e.target.value) || 0)}
|
||||
placeholder="3"
|
||||
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)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
|
||||
@@ -246,8 +207,8 @@ const SupplierDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange, on
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={supplierData.contactPerson}
|
||||
onChange={(e) => setSupplierData({ ...supplierData, contactPerson: e.target.value })}
|
||||
value={data.contactPerson}
|
||||
onChange={(e) => handleFieldChange('contactPerson', e.target.value)}
|
||||
placeholder="John Doe"
|
||||
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)]"
|
||||
/>
|
||||
@@ -259,8 +220,8 @@ const SupplierDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange, on
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
value={supplierData.email}
|
||||
onChange={(e) => setSupplierData({ ...supplierData, email: e.target.value })}
|
||||
value={data.email}
|
||||
onChange={(e) => handleFieldChange('email', e.target.value)}
|
||||
placeholder="contact@supplier.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)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
|
||||
/>
|
||||
@@ -272,8 +233,8 @@ const SupplierDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange, on
|
||||
</label>
|
||||
<input
|
||||
type="tel"
|
||||
value={supplierData.phone}
|
||||
onChange={(e) => setSupplierData({ ...supplierData, phone: e.target.value })}
|
||||
value={data.phone}
|
||||
onChange={(e) => handleFieldChange('phone', e.target.value)}
|
||||
placeholder="+1 234 567 8900"
|
||||
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)]"
|
||||
/>
|
||||
@@ -294,8 +255,8 @@ const SupplierDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange, on
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={supplierData.supplierCode}
|
||||
onChange={(e) => setSupplierData({ ...supplierData, supplierCode: e.target.value })}
|
||||
value={data.supplierCode}
|
||||
onChange={(e) => handleFieldChange('supplierCode', e.target.value)}
|
||||
placeholder="SUP-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)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
|
||||
/>
|
||||
@@ -307,8 +268,8 @@ const SupplierDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange, on
|
||||
</label>
|
||||
<input
|
||||
type="tel"
|
||||
value={supplierData.mobile}
|
||||
onChange={(e) => setSupplierData({ ...supplierData, mobile: e.target.value })}
|
||||
value={data.mobile}
|
||||
onChange={(e) => handleFieldChange('mobile', e.target.value)}
|
||||
placeholder="+1 234 567 8900"
|
||||
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)]"
|
||||
/>
|
||||
@@ -320,8 +281,8 @@ const SupplierDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange, on
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={supplierData.taxId}
|
||||
onChange={(e) => setSupplierData({ ...supplierData, taxId: e.target.value })}
|
||||
value={data.taxId}
|
||||
onChange={(e) => handleFieldChange('taxId', e.target.value)}
|
||||
placeholder="VAT/Tax ID"
|
||||
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)]"
|
||||
/>
|
||||
@@ -333,8 +294,8 @@ const SupplierDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange, on
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={supplierData.registrationNumber}
|
||||
onChange={(e) => setSupplierData({ ...supplierData, registrationNumber: e.target.value })}
|
||||
value={data.registrationNumber}
|
||||
onChange={(e) => handleFieldChange('registrationNumber', e.target.value)}
|
||||
placeholder="Business registration number"
|
||||
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)]"
|
||||
/>
|
||||
@@ -346,8 +307,8 @@ const SupplierDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange, on
|
||||
</label>
|
||||
<input
|
||||
type="url"
|
||||
value={supplierData.website}
|
||||
onChange={(e) => setSupplierData({ ...supplierData, website: e.target.value })}
|
||||
value={data.website}
|
||||
onChange={(e) => handleFieldChange('website', e.target.value)}
|
||||
placeholder="https://www.supplier.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)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
|
||||
/>
|
||||
@@ -359,8 +320,8 @@ const SupplierDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange, on
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={supplierData.addressLine1}
|
||||
onChange={(e) => setSupplierData({ ...supplierData, addressLine1: e.target.value })}
|
||||
value={data.addressLine1}
|
||||
onChange={(e) => handleFieldChange('addressLine1', e.target.value)}
|
||||
placeholder="Street address"
|
||||
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)]"
|
||||
/>
|
||||
@@ -372,8 +333,8 @@ const SupplierDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange, on
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={supplierData.addressLine2}
|
||||
onChange={(e) => setSupplierData({ ...supplierData, addressLine2: e.target.value })}
|
||||
value={data.addressLine2}
|
||||
onChange={(e) => handleFieldChange('addressLine2', e.target.value)}
|
||||
placeholder="Suite, building, etc."
|
||||
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)]"
|
||||
/>
|
||||
@@ -385,8 +346,8 @@ const SupplierDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange, on
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={supplierData.city}
|
||||
onChange={(e) => setSupplierData({ ...supplierData, city: e.target.value })}
|
||||
value={data.city}
|
||||
onChange={(e) => handleFieldChange('city', e.target.value)}
|
||||
placeholder="City"
|
||||
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)]"
|
||||
/>
|
||||
@@ -398,8 +359,8 @@ const SupplierDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange, on
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={supplierData.stateProvince}
|
||||
onChange={(e) => setSupplierData({ ...supplierData, stateProvince: e.target.value })}
|
||||
value={data.stateProvince}
|
||||
onChange={(e) => handleFieldChange('stateProvince', e.target.value)}
|
||||
placeholder="State"
|
||||
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)]"
|
||||
/>
|
||||
@@ -411,8 +372,8 @@ const SupplierDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange, on
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={supplierData.postalCode}
|
||||
onChange={(e) => setSupplierData({ ...supplierData, postalCode: e.target.value })}
|
||||
value={data.postalCode}
|
||||
onChange={(e) => handleFieldChange('postalCode', e.target.value)}
|
||||
placeholder="12345"
|
||||
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)]"
|
||||
/>
|
||||
@@ -424,8 +385,8 @@ const SupplierDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange, on
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={supplierData.country}
|
||||
onChange={(e) => setSupplierData({ ...supplierData, country: e.target.value })}
|
||||
value={data.country}
|
||||
onChange={(e) => handleFieldChange('country', e.target.value)}
|
||||
placeholder="Country"
|
||||
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)]"
|
||||
/>
|
||||
@@ -437,8 +398,8 @@ const SupplierDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange, on
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
value={supplierData.creditLimit}
|
||||
onChange={(e) => setSupplierData({ ...supplierData, creditLimit: e.target.value })}
|
||||
value={data.creditLimit}
|
||||
onChange={(e) => handleFieldChange('creditLimit', e.target.value)}
|
||||
placeholder="10000.00"
|
||||
min="0"
|
||||
step="0.01"
|
||||
@@ -452,8 +413,8 @@ const SupplierDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange, on
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
value={supplierData.minimumOrderAmount}
|
||||
onChange={(e) => setSupplierData({ ...supplierData, minimumOrderAmount: e.target.value })}
|
||||
value={data.minimumOrderAmount}
|
||||
onChange={(e) => handleFieldChange('minimumOrderAmount', e.target.value)}
|
||||
placeholder="100.00"
|
||||
min="0"
|
||||
step="0.01"
|
||||
@@ -467,8 +428,8 @@ const SupplierDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange, on
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={supplierData.deliveryArea}
|
||||
onChange={(e) => setSupplierData({ ...supplierData, deliveryArea: e.target.value })}
|
||||
value={data.deliveryArea}
|
||||
onChange={(e) => handleFieldChange('deliveryArea', e.target.value)}
|
||||
placeholder="e.g., New York Metro Area"
|
||||
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)]"
|
||||
/>
|
||||
@@ -480,8 +441,8 @@ const SupplierDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange, on
|
||||
<input
|
||||
type="checkbox"
|
||||
id="isPreferredSupplier"
|
||||
checked={supplierData.isPreferredSupplier}
|
||||
onChange={(e) => setSupplierData({ ...supplierData, isPreferredSupplier: e.target.checked })}
|
||||
checked={data.isPreferredSupplier}
|
||||
onChange={(e) => handleFieldChange('isPreferredSupplier', e.target.checked)}
|
||||
className="w-4 h-4 text-[var(--color-primary)] border-[var(--border-secondary)] rounded focus:ring-2 focus:ring-[var(--color-primary)]"
|
||||
/>
|
||||
<label htmlFor="isPreferredSupplier" className="text-sm font-medium text-[var(--text-secondary)]">
|
||||
@@ -493,8 +454,8 @@ const SupplierDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange, on
|
||||
<input
|
||||
type="checkbox"
|
||||
id="autoApproveEnabled"
|
||||
checked={supplierData.autoApproveEnabled}
|
||||
onChange={(e) => setSupplierData({ ...supplierData, autoApproveEnabled: e.target.checked })}
|
||||
checked={data.autoApproveEnabled}
|
||||
onChange={(e) => handleFieldChange('autoApproveEnabled', e.target.checked)}
|
||||
className="w-4 h-4 text-[var(--color-primary)] border-[var(--border-secondary)] rounded focus:ring-2 focus:ring-[var(--color-primary)]"
|
||||
/>
|
||||
<label htmlFor="autoApproveEnabled" className="text-sm font-medium text-[var(--text-secondary)]">
|
||||
@@ -509,8 +470,8 @@ const SupplierDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange, on
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={supplierData.certifications}
|
||||
onChange={(e) => setSupplierData({ ...supplierData, certifications: e.target.value })}
|
||||
value={data.certifications}
|
||||
onChange={(e) => handleFieldChange('certifications', e.target.value)}
|
||||
placeholder="e.g., ISO 9001, HACCP, Organic (comma-separated)"
|
||||
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)]"
|
||||
/>
|
||||
@@ -522,8 +483,8 @@ const SupplierDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange, on
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={supplierData.specializations}
|
||||
onChange={(e) => setSupplierData({ ...supplierData, specializations: e.target.value })}
|
||||
value={data.specializations}
|
||||
onChange={(e) => handleFieldChange('specializations', e.target.value)}
|
||||
placeholder="e.g., Organic flours, Gluten-free products (comma-separated)"
|
||||
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)]"
|
||||
/>
|
||||
@@ -534,8 +495,8 @@ const SupplierDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange, on
|
||||
Notes
|
||||
</label>
|
||||
<textarea
|
||||
value={supplierData.notes}
|
||||
onChange={(e) => setSupplierData({ ...supplierData, notes: e.target.value })}
|
||||
value={data.notes}
|
||||
onChange={(e) => handleFieldChange('notes', e.target.value)}
|
||||
placeholder="Additional notes about this supplier..."
|
||||
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={3}
|
||||
@@ -544,48 +505,22 @@ const SupplierDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange, on
|
||||
</div>
|
||||
</AdvancedOptionsSection>
|
||||
|
||||
<div className="flex justify-center pt-4 border-t border-[var(--border-primary)]">
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleCreateSupplier}
|
||||
disabled={loading}
|
||||
className="px-8 py-3 bg-green-600 text-white rounded-lg hover:bg-green-700 font-semibold inline-flex items-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
{loading ? (
|
||||
<>
|
||||
<Loader2 className="w-5 h-5 animate-spin" />
|
||||
Creating supplier...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<CheckCircle2 className="w-5 h-5" />
|
||||
Create Supplier
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const SupplierWizardSteps = (
|
||||
data: Record<string, any>,
|
||||
dataRef: React.MutableRefObject<Record<string, any>>,
|
||||
setData: (data: Record<string, any>) => void
|
||||
): WizardStep[] => [
|
||||
{
|
||||
id: 'supplier-details',
|
||||
title: 'Supplier Details',
|
||||
description: 'Essential supplier information',
|
||||
component: (props) => <SupplierDetailsStep {...props} data={data} onDataChange={setData} />,
|
||||
validate: () => {
|
||||
return !!(
|
||||
data.name &&
|
||||
data.supplierType &&
|
||||
data.status &&
|
||||
data.paymentTerms &&
|
||||
data.currency &&
|
||||
data.standardLeadTime >= 0
|
||||
);
|
||||
): WizardStep[] => {
|
||||
// New architecture: return direct component reference instead of arrow function
|
||||
// dataRef and onDataChange are now passed through WizardModal props
|
||||
return [
|
||||
{
|
||||
id: 'supplier-details',
|
||||
title: 'Supplier Details',
|
||||
description: 'Essential supplier information',
|
||||
component: SupplierDetailsStep,
|
||||
},
|
||||
},
|
||||
];
|
||||
];
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user