From 244e59cb5c657c7c0cf8bd699c8342c501b8bdf4 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Thu, 6 Nov 2025 13:50:44 +0000
Subject: [PATCH] Fix supplier onboarding step: Add navigation buttons
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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.
---
 .../setup-wizard/steps/SuppliersSetupStep.tsx | 60 ++++++++++++++++---
 1 file changed, 51 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/domain/setup-wizard/steps/SuppliersSetupStep.tsx b/frontend/src/components/domain/setup-wizard/steps/SuppliersSetupStep.tsx
index 0ec763b3..cf8f1cce 100644
--- a/frontend/src/components/domain/setup-wizard/steps/SuppliersSetupStep.tsx
+++ b/frontend/src/components/domain/setup-wizard/steps/SuppliersSetupStep.tsx
@@ -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>
   );
 };