Imporve onboarding UI

This commit is contained in:
Urtzi Alfaro
2025-12-19 13:10:24 +01:00
parent 71ee2976a2
commit bfa5ff0637
39 changed files with 1016 additions and 483 deletions

View File

@@ -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>