340 lines
20 KiB
TypeScript
340 lines
20 KiB
TypeScript
import React, { useEffect } from 'react';
|
|
import { useTranslation } from 'react-i18next';
|
|
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, onPrevious, canContinue }) => {
|
|
const { t } = useTranslation();
|
|
|
|
// Get tenant ID
|
|
const currentTenant = useCurrentTenant();
|
|
const user = useAuthUser();
|
|
const tenantId = currentTenant?.id || user?.tenant_id || '';
|
|
|
|
// Fetch all data for review
|
|
const { data: suppliersData, isLoading: suppliersLoading } = useSuppliers(tenantId);
|
|
const { data: ingredientsData, isLoading: ingredientsLoading } = useIngredients(tenantId);
|
|
const { data: recipesData, isLoading: recipesLoading } = useRecipes(tenantId);
|
|
const { data: qualityTemplatesData, isLoading: qualityLoading } = useQualityTemplates(tenantId);
|
|
|
|
const suppliers = suppliersData || [];
|
|
const ingredients = ingredientsData || [];
|
|
const recipes = recipesData || [];
|
|
const qualityTemplates = (qualityTemplatesData as unknown as QualityCheckTemplateList)?.templates || [];
|
|
|
|
const isLoading = suppliersLoading || ingredientsLoading || recipesLoading || qualityLoading;
|
|
|
|
// Always allow to continue (review step is informational)
|
|
useEffect(() => {
|
|
onUpdate?.({
|
|
itemsCount: suppliers.length + ingredients.length + recipes.length,
|
|
canContinue: true,
|
|
});
|
|
}, [suppliers.length, ingredients.length, recipes.length, onUpdate]);
|
|
|
|
// Calculate some helpful stats
|
|
const totalCost = ingredients.reduce((sum, ing) => sum + (ing.standard_cost || 0), 0);
|
|
const avgRecipeIngredients = recipes.length > 0
|
|
? recipes.reduce((sum, recipe) => sum + (recipe.ingredients?.length || 0), 0) / recipes.length
|
|
: 0;
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
{/* Header */}
|
|
<div className="text-center">
|
|
<div className="inline-flex items-center justify-center w-16 h-16 bg-gradient-to-br from-[var(--color-success)]/20 to-[var(--color-primary)]/20 rounded-full mb-4">
|
|
<svg className="w-8 h-8 text-[var(--color-success)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
</div>
|
|
<h2 className="text-2xl font-bold text-[var(--text-primary)] mb-2">
|
|
{t('setup_wizard:review.title', 'Review Your Setup')}
|
|
</h2>
|
|
<p className="text-[var(--text-secondary)] max-w-2xl mx-auto">
|
|
{t('setup_wizard:review.subtitle', "Let's review everything you've configured. You can go back and make changes if needed.")}
|
|
</p>
|
|
</div>
|
|
|
|
{isLoading ? (
|
|
<div className="text-center py-12">
|
|
<svg className="animate-spin h-8 w-8 text-[var(--color-primary)] mx-auto" fill="none" viewBox="0 0 24 24">
|
|
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
|
|
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
|
|
</svg>
|
|
<p className="mt-2 text-sm text-[var(--text-secondary)]">
|
|
{t('common:loading', 'Loading...')}
|
|
</p>
|
|
</div>
|
|
) : (
|
|
<>
|
|
{/* Overview Stats */}
|
|
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
|
|
<div className="bg-gradient-to-br from-blue-500/10 to-blue-600/5 border border-blue-500/20 rounded-lg p-4">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<p className="text-sm text-[var(--text-secondary)]">{t('setup_wizard:review.suppliers', 'Suppliers')}</p>
|
|
<p className="text-2xl font-bold text-[var(--text-primary)] mt-1">{suppliers.length}</p>
|
|
</div>
|
|
<svg className="w-10 h-10 text-blue-500/40" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="bg-gradient-to-br from-green-500/10 to-green-600/5 border border-green-500/20 rounded-lg p-4">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<p className="text-sm text-[var(--text-secondary)]">{t('setup_wizard:review.ingredients', 'Ingredients')}</p>
|
|
<p className="text-2xl font-bold text-[var(--text-primary)] mt-1">{ingredients.length}</p>
|
|
</div>
|
|
<svg className="w-10 h-10 text-green-500/40" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="bg-gradient-to-br from-purple-500/10 to-purple-600/5 border border-purple-500/20 rounded-lg p-4">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<p className="text-sm text-[var(--text-secondary)]">{t('setup_wizard:review.recipes', 'Recipes')}</p>
|
|
<p className="text-2xl font-bold text-[var(--text-primary)] mt-1">{recipes.length}</p>
|
|
</div>
|
|
<svg className="w-10 h-10 text-purple-500/40" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="bg-gradient-to-br from-orange-500/10 to-orange-600/5 border border-orange-500/20 rounded-lg p-4">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<p className="text-sm text-[var(--text-secondary)]">{t('setup_wizard:review.quality', 'Quality Checks')}</p>
|
|
<p className="text-2xl font-bold text-[var(--text-primary)] mt-1">{qualityTemplates.length}</p>
|
|
</div>
|
|
<svg className="w-10 h-10 text-orange-500/40" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Detailed Sections */}
|
|
<div className="space-y-4">
|
|
{/* Suppliers Section */}
|
|
{suppliers.length > 0 && (
|
|
<div className="border border-[var(--border-secondary)] rounded-lg p-4 bg-[var(--bg-secondary)]">
|
|
<div className="flex items-center justify-between mb-3">
|
|
<h3 className="font-semibold text-[var(--text-primary)] flex items-center gap-2">
|
|
<svg className="w-5 h-5 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
|
|
</svg>
|
|
{t('setup_wizard:review.suppliers_title', 'Suppliers')}
|
|
<span className="text-sm font-normal text-[var(--text-tertiary)]">({suppliers.length})</span>
|
|
</h3>
|
|
</div>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-2">
|
|
{suppliers.slice(0, 6).map((supplier) => (
|
|
<div key={supplier.id} className="flex items-center gap-2 p-2 bg-[var(--bg-primary)] rounded border border-[var(--border-secondary)]">
|
|
<div className="flex-1 min-w-0">
|
|
<p className="font-medium text-sm text-[var(--text-primary)] truncate">{supplier.name}</p>
|
|
{supplier.email && (
|
|
<p className="text-xs text-[var(--text-tertiary)] truncate">{supplier.email}</p>
|
|
)}
|
|
</div>
|
|
{supplier.status === SupplierStatus.ACTIVE && (
|
|
<span className="flex-shrink-0 w-2 h-2 bg-green-500 rounded-full" title="Active" />
|
|
)}
|
|
</div>
|
|
))}
|
|
{suppliers.length > 6 && (
|
|
<div className="flex items-center justify-center p-2 text-sm text-[var(--text-secondary)]">
|
|
+{suppliers.length - 6} {t('setup_wizard:review.more', 'more')}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Ingredients Section */}
|
|
{ingredients.length > 0 && (
|
|
<div className="border border-[var(--border-secondary)] rounded-lg p-4 bg-[var(--bg-secondary)]">
|
|
<div className="flex items-center justify-between mb-3">
|
|
<h3 className="font-semibold text-[var(--text-primary)] flex items-center gap-2">
|
|
<svg className="w-5 h-5 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
|
|
</svg>
|
|
{t('setup_wizard:review.ingredients_title', 'Inventory Items')}
|
|
<span className="text-sm font-normal text-[var(--text-tertiary)]">({ingredients.length})</span>
|
|
</h3>
|
|
{totalCost > 0 && (
|
|
<p className="text-sm text-[var(--text-secondary)]">
|
|
{t('setup_wizard:review.total_cost', 'Total value')}: <span className="font-medium text-[var(--text-primary)]">${totalCost.toFixed(2)}</span>
|
|
</p>
|
|
)}
|
|
</div>
|
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-2">
|
|
{ingredients.slice(0, 8).map((ingredient) => (
|
|
<div key={ingredient.id} className="flex items-center gap-2 p-2 bg-[var(--bg-primary)] rounded border border-[var(--border-secondary)]">
|
|
<div className="flex-1 min-w-0">
|
|
<p className="font-medium text-xs text-[var(--text-primary)] truncate">{ingredient.name}</p>
|
|
<p className="text-xs text-[var(--text-tertiary)]">{ingredient.unit_of_measure}</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
{ingredients.length > 8 && (
|
|
<div className="flex items-center justify-center p-2 text-sm text-[var(--text-secondary)]">
|
|
+{ingredients.length - 8} {t('setup_wizard:review.more', 'more')}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Recipes Section */}
|
|
{recipes.length > 0 && (
|
|
<div className="border border-[var(--border-secondary)] rounded-lg p-4 bg-[var(--bg-secondary)]">
|
|
<div className="flex items-center justify-between mb-3">
|
|
<h3 className="font-semibold text-[var(--text-primary)] flex items-center gap-2">
|
|
<svg className="w-5 h-5 text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
|
</svg>
|
|
{t('setup_wizard:review.recipes_title', 'Recipes')}
|
|
<span className="text-sm font-normal text-[var(--text-tertiary)]">({recipes.length})</span>
|
|
</h3>
|
|
{avgRecipeIngredients > 0 && (
|
|
<p className="text-sm text-[var(--text-secondary)]">
|
|
{t('setup_wizard:review.avg_ingredients', 'Avg ingredients')}: <span className="font-medium text-[var(--text-primary)]">{avgRecipeIngredients.toFixed(1)}</span>
|
|
</p>
|
|
)}
|
|
</div>
|
|
<div className="space-y-2">
|
|
{recipes.slice(0, 4).map((recipe) => (
|
|
<div key={recipe.id} className="flex items-center justify-between p-3 bg-[var(--bg-primary)] rounded border border-[var(--border-secondary)]">
|
|
<div className="flex-1 min-w-0">
|
|
<p className="font-medium text-sm text-[var(--text-primary)] truncate">{recipe.name}</p>
|
|
<div className="flex items-center gap-3 mt-1">
|
|
<span className="text-xs text-[var(--text-tertiary)]">
|
|
{recipe.ingredients?.length || 0} {t('setup_wizard:review.ingredients', 'ingredients')}
|
|
</span>
|
|
<span className="text-xs text-[var(--text-tertiary)]">
|
|
{t('setup_wizard:review.yields', 'Yields')}: {recipe.yield_quantity} {recipe.yield_unit}
|
|
</span>
|
|
{recipe.category && (
|
|
<span className="text-xs px-2 py-0.5 bg-[var(--bg-secondary)] rounded-full text-[var(--text-secondary)]">
|
|
{recipe.category}
|
|
</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
{recipe.estimated_cost_per_unit && (
|
|
<div className="ml-4 text-right">
|
|
<p className="text-xs text-[var(--text-tertiary)]">{t('setup_wizard:review.cost', 'Cost')}</p>
|
|
<p className="font-medium text-sm text-[var(--text-primary)]">${Number(recipe.estimated_cost_per_unit).toFixed(2)}</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
))}
|
|
{recipes.length > 4 && (
|
|
<div className="flex items-center justify-center p-2 text-sm text-[var(--text-secondary)]">
|
|
+{recipes.length - 4} {t('setup_wizard:review.more', 'more')}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Quality Templates Section */}
|
|
{qualityTemplates.length > 0 && (
|
|
<div className="border border-[var(--border-secondary)] rounded-lg p-4 bg-[var(--bg-secondary)]">
|
|
<div className="flex items-center justify-between mb-3">
|
|
<h3 className="font-semibold text-[var(--text-primary)] flex items-center gap-2">
|
|
<svg className="w-5 h-5 text-orange-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
{t('setup_wizard:review.quality_title', 'Quality Check Templates')}
|
|
<span className="text-sm font-normal text-[var(--text-tertiary)]">({qualityTemplates.length})</span>
|
|
</h3>
|
|
</div>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-2">
|
|
{qualityTemplates.map((template) => (
|
|
<div key={template.id} className="flex items-center gap-2 p-2 bg-[var(--bg-primary)] rounded border border-[var(--border-secondary)]">
|
|
<div className="flex-1 min-w-0">
|
|
<p className="font-medium text-sm text-[var(--text-primary)] truncate">{template.name}</p>
|
|
<p className="text-xs text-[var(--text-tertiary)]">{template.check_type}</p>
|
|
</div>
|
|
{template.is_required && (
|
|
<span className="flex-shrink-0 text-xs px-2 py-0.5 bg-red-500/10 text-red-600 rounded-full">
|
|
{t('setup_wizard:review.required', 'Required')}
|
|
</span>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Summary Message */}
|
|
<div className="bg-gradient-to-r from-[var(--color-success)]/10 to-[var(--color-primary)]/10 border border-[var(--color-success)]/20 rounded-lg p-6 text-center">
|
|
<svg className="w-12 h-12 text-[var(--color-success)] mx-auto mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
<h3 className="font-semibold text-lg text-[var(--text-primary)] mb-2">
|
|
{t('setup_wizard:review.ready_title', 'Your Bakery is Ready to Go!')}
|
|
</h3>
|
|
<p className="text-[var(--text-secondary)] max-w-xl mx-auto">
|
|
{t('setup_wizard:review.ready_message',
|
|
"You've successfully configured {{suppliers}} suppliers, {{ingredients}} ingredients, and {{recipes}} recipes. Click 'Complete Setup' to finish and start using the system.",
|
|
{ suppliers: suppliers.length, ingredients: ingredients.length, recipes: recipes.length }
|
|
)}
|
|
</p>
|
|
</div>
|
|
|
|
{/* Help Text */}
|
|
<div className="text-center">
|
|
<p className="text-sm text-[var(--text-tertiary)] flex items-center justify-center gap-2">
|
|
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
{t('setup_wizard:review.help', 'Need to make changes? Use the "Back" button to return to any step.')}
|
|
</p>
|
|
</div>
|
|
</>
|
|
)}
|
|
|
|
{/* Navigation buttons */}
|
|
{onComplete && (
|
|
<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>
|
|
);
|
|
};
|