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:
Claude
2025-11-06 13:50:44 +00:00
parent b22634388d
commit 244e59cb5c

View File

@@ -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>
);
};