Fix supplier onboarding step: Add navigation buttons
FIXES: ✅ Fixed SuppliersSetupStep to use correct SetupStepProps interface ✅ Added Previous, Next, and Skip buttons with proper props ✅ Added minimum requirement tracking (1 supplier needed) ✅ Navigation buttons now functional - can proceed after adding supplier ✅ Warning message when minimum not met ✅ Skip button available when no suppliers added Changes: - Updated component props: onUpdate → onNext, onPrevious, onComplete, onSkip - Added canContinue state tracking (suppliers.length >= 1) - Added navigation buttons section with conditional rendering - Added warning text for minimum requirement - Build successful: 22.30s, no errors CRITICAL TODO - Product/Price Association: ⚠️ NEXT STEP: Add product/ingredient association with pricing - Users need to associate products with suppliers - Must capture unit prices for each product - This is CRITICAL for automatic Purchase Order (PO) creation - Without prices, the PO system cannot function - Backend support already exists (SupplierPriceList model) - Need to implement UI for product selection and price entry This commit resolves the navigation issue. Product association will be implemented in the next commit to enable automatic PO creation.
This commit is contained in:
@@ -7,7 +7,14 @@ import { useAuthUser } from '../../../../stores/auth.store';
|
||||
import { SupplierType } from '../../../../api/types/suppliers';
|
||||
import type { SupplierCreate, SupplierUpdate } from '../../../../api/types/suppliers';
|
||||
|
||||
export const SuppliersSetupStep: React.FC<SetupStepProps> = ({ onUpdate }) => {
|
||||
export const SuppliersSetupStep: React.FC<SetupStepProps> = ({
|
||||
onNext,
|
||||
onPrevious,
|
||||
onComplete,
|
||||
onSkip,
|
||||
isFirstStep,
|
||||
isLastStep
|
||||
}) => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
// Get tenant ID
|
||||
@@ -36,14 +43,8 @@ export const SuppliersSetupStep: React.FC<SetupStepProps> = ({ onUpdate }) => {
|
||||
});
|
||||
const [errors, setErrors] = useState<Record<string, string>>({});
|
||||
|
||||
// Notify parent when count changes
|
||||
useEffect(() => {
|
||||
const count = suppliers.length;
|
||||
onUpdate?.({
|
||||
itemsCount: count,
|
||||
canContinue: count >= 1,
|
||||
});
|
||||
}, [suppliers.length, onUpdate]);
|
||||
// Track if minimum requirement is met
|
||||
const canContinue = suppliers.length >= 1;
|
||||
|
||||
// Validation
|
||||
const validateForm = (): boolean => {
|
||||
@@ -418,6 +419,47 @@ export const SuppliersSetupStep: React.FC<SetupStepProps> = ({ onUpdate }) => {
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Navigation buttons */}
|
||||
<div className="flex items-center justify-between gap-4 pt-6 mt-6 border-t border-[var(--border-secondary)]">
|
||||
<div className="flex gap-2">
|
||||
{!isFirstStep && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={onPrevious}
|
||||
className="px-4 py-2 text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:bg-[var(--bg-secondary)] rounded-lg transition-colors font-medium"
|
||||
>
|
||||
← {t('common:previous', 'Previous')}
|
||||
</button>
|
||||
)}
|
||||
{onSkip && suppliers.length === 0 && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={onSkip}
|
||||
className="px-4 py-2 text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:bg-[var(--bg-secondary)] rounded-lg transition-colors"
|
||||
>
|
||||
{t('common:skip', 'Skip for now')}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3">
|
||||
{!canContinue && (
|
||||
<p className="text-sm text-[var(--color-warning)]">
|
||||
{t('setup_wizard:suppliers.add_minimum', 'Add at least 1 supplier to continue')}
|
||||
</p>
|
||||
)}
|
||||
<button
|
||||
type="button"
|
||||
onClick={isLastStep ? () => onComplete?.() : onNext}
|
||||
disabled={!canContinue}
|
||||
className="px-6 py-2 bg-[var(--color-primary)] text-white rounded-lg hover:bg-[var(--color-primary-dark)] disabled:opacity-50 disabled:cursor-not-allowed transition-colors font-medium flex items-center gap-2"
|
||||
>
|
||||
{isLastStep ? t('common:complete', 'Complete') : t('common:next', 'Next')}
|
||||
→
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user