Imporve onboarding UI
This commit is contained in:
@@ -1,14 +1,16 @@
|
||||
import React, { useEffect } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import type { SetupStepProps } from '../SetupWizard';
|
||||
import { SetupStepProps } from '../types';
|
||||
import { useSuppliers } from '../../../../api/hooks/suppliers';
|
||||
import { useIngredients } from '../../../../api/hooks/inventory';
|
||||
import { useRecipes } from '../../../../api/hooks/recipes';
|
||||
import { useQualityTemplates } from '../../../../api/hooks/qualityTemplates';
|
||||
import { useCurrentTenant } from '../../../../stores/tenant.store';
|
||||
import { useAuthUser } from '../../../../stores/auth.store';
|
||||
import { SupplierStatus } from '../../../../api/types/suppliers';
|
||||
import { QualityCheckTemplateList } from '../../../../api/types/qualityTemplates';
|
||||
|
||||
export const ReviewSetupStep: React.FC<SetupStepProps> = ({ onUpdate, onComplete, canContinue }) => {
|
||||
export const ReviewSetupStep: React.FC<SetupStepProps> = ({ onUpdate, onComplete, onPrevious, canContinue }) => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
// Get tenant ID
|
||||
@@ -25,7 +27,7 @@ export const ReviewSetupStep: React.FC<SetupStepProps> = ({ onUpdate, onComplete
|
||||
const suppliers = suppliersData || [];
|
||||
const ingredients = ingredientsData || [];
|
||||
const recipes = recipesData || [];
|
||||
const qualityTemplates = qualityTemplatesData || [];
|
||||
const qualityTemplates = (qualityTemplatesData as unknown as QualityCheckTemplateList)?.templates || [];
|
||||
|
||||
const isLoading = suppliersLoading || ingredientsLoading || recipesLoading || qualityLoading;
|
||||
|
||||
@@ -146,7 +148,7 @@ export const ReviewSetupStep: React.FC<SetupStepProps> = ({ onUpdate, onComplete
|
||||
<p className="text-xs text-[var(--text-tertiary)] truncate">{supplier.email}</p>
|
||||
)}
|
||||
</div>
|
||||
{supplier.is_active && (
|
||||
{supplier.status === SupplierStatus.ACTIVE && (
|
||||
<span className="flex-shrink-0 w-2 h-2 bg-green-500 rounded-full" title="Active" />
|
||||
)}
|
||||
</div>
|
||||
@@ -307,16 +309,29 @@ export const ReviewSetupStep: React.FC<SetupStepProps> = ({ onUpdate, onComplete
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Continue button - only shown when used in onboarding context */}
|
||||
{/* Navigation buttons */}
|
||||
{onComplete && (
|
||||
<div className="flex justify-end mt-6 pt-6 border-t border-[var(--border-secondary)]">
|
||||
<button
|
||||
onClick={() => onComplete()}
|
||||
disabled={canContinue === false}
|
||||
className="px-6 py-3 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"
|
||||
>
|
||||
{t('setup_wizard:navigation.continue', 'Continue →')}
|
||||
</button>
|
||||
<div className="flex items-center justify-between gap-4 pt-6 mt-6 border-t border-[var(--border-secondary)]">
|
||||
<div className="flex gap-2">
|
||||
<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', 'Anterior')}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onComplete()}
|
||||
disabled={canContinue === false}
|
||||
className="px-6 py-2.5 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"
|
||||
>
|
||||
{t('common:next', 'Completar Configuración ✓')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user