bakery-admin/bakery-ia
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

IMPORVE ONBOARDING STEPS

Browse Source
This commit is contained in:
Urtzi Alfaro
2025-11-09 09:22:08 +01:00
parent 4678f96f8f
commit cbe19a3cd1
27 changed files with 2801 additions and 1149 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
frontend/src/components/domain/onboarding/steps/InitialStockEntryStep.tsx
View File

@@ -15,7 +15,7 @@ export interface ProductWithStock {
}
export interface InitialStockEntryStepProps {
products: ProductWithStock[];
products?: ProductWithStock[]; // Made optional - will use empty array if not provided
onUpdate?: (data: { productsWithStock: ProductWithStock[] }) => void;
onComplete?: () => void;
onPrevious?: () => void;
@@ -36,6 +36,10 @@ export const InitialStockEntryStep: React.FC<InitialStockEntryStepProps> = ({
if (initialData?.productsWithStock) {
return initialData.productsWithStock;
}
// Handle case where initialProducts is undefined (shouldn't happen, but defensive)
if (!initialProducts || initialProducts.length === 0) {
return [];
}
return initialProducts.map(p => ({
...p,
initialStock: p.initialStock ?? undefined,
@@ -78,17 +82,37 @@ export const InitialStockEntryStep: React.FC<InitialStockEntryStepProps> = ({
const productsWithStock = products.filter(p => p.initialStock !== undefined && p.initialStock >= 0);
const productsWithoutStock = products.filter(p => p.initialStock === undefined);
const completionPercentage = (productsWithStock.length / products.length) * 100;
const completionPercentage = products.length > 0 ? (productsWithStock.length / products.length) * 100 : 100;
const allCompleted = productsWithoutStock.length === 0;
// If no products, show a skip message
if (products.length === 0) {
return (
<div className="max-w-4xl mx-auto p-4 md:p-6 space-y-4 md:space-y-6">
<div className="text-center space-y-4">
<div className="text-6xl">✓</div>
<h2 className="text-xl md:text-2xl font-bold text-[var(--text-primary)]">
{t('onboarding:stock.no_products_title', 'Stock Inicial')}
</h2>
<p className="text-[var(--text-secondary)]">
{t('onboarding:stock.no_products_message', 'Podrás configurar los niveles de stock más tarde en la sección de inventario.')}
</p>
<Button onClick={handleContinue} variant="primary" rightIcon={<ArrowRight />}>
{t('common:continue', 'Continuar')}
</Button>
</div>
</div>
);
}
return (
<div className="max-w-4xl mx-auto p-6 space-y-6">
<div className="max-w-4xl mx-auto p-4 md:p-6 space-y-4 md:space-y-6">
{/* Header */}
<div className="text-center space-y-3">
<h1 className="text-2xl font-bold text-text-primary">
<div className="text-center space-y-2 md:space-y-3">
<h1 className="text-xl md:text-2xl font-bold text-text-primary px-2">
{t('onboarding:stock.title', 'Niveles de Stock Inicial')}
</h1>
<p className="text-text-secondary max-w-2xl mx-auto">
<p className="text-sm md:text-base text-text-secondary max-w-2xl mx-auto px-4">
{t(
'onboarding:stock.subtitle',
'Ingresa las cantidades actuales de cada producto. Esto permite que el sistema rastree el inventario desde hoy.'
@@ -133,11 +157,11 @@ export const InitialStockEntryStep: React.FC<InitialStockEntryStepProps> = ({
</div>
{/* Quick Actions */}
<div className="flex justify-between items-center">
<Button onClick={handleSetAllToZero} variant="outline" size="sm">
<div className="flex flex-col sm:flex-row justify-between items-stretch sm:items-center gap-2">
<Button onClick={handleSetAllToZero} variant="outline" size="sm" className="w-full sm:w-auto">
{t('onboarding:stock.set_all_zero', 'Establecer todo a 0')}
</Button>
<Button onClick={handleSkipForNow} variant="ghost" size="sm">
<Button onClick={handleSkipForNow} variant="ghost" size="sm" className="w-full sm:w-auto">
{t('onboarding:stock.skip_for_now', 'Omitir por ahora (se establecerá a 0)')}
</Button>
</div>
@@ -178,7 +202,7 @@ export const InitialStockEntryStep: React.FC<InitialStockEntryStepProps> = ({
placeholder="0"
min="0"
step="0.01"
className="w-24 text-right"
className="w-20 sm:w-24 text-right min-h-[44px]"
/>
<span className="text-sm text-text-secondary whitespace-nowrap">
{product.unit || 'kg'}