From 34afbd0b437cfa4055be19c319955617aee4b431 Mon Sep 17 00:00:00 2001 From: Claude Date: Thu, 6 Nov 2025 14:36:10 +0000 Subject: [PATCH] Unify AI suggestions step UI with recipe step design MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ✨ Complete UI redesign of UploadSalesDataStep to match beautiful recipe step pattern: - Add "Why This Matters" info box with icon and explanation - Replace summary section with clean progress indicator showing count and success state - Change product list from vertical layout to responsive 2-column grid - Implement custom checkboxes with visual checkmark instead of native inputs - Separate edit form into gradient-background section (matching recipe templates) - Update file format guide colors from hardcoded blue to CSS variables - Clean up actions sections and remove unnecessary comments - Add emojis for visual interest (❄️ refrigeration, 🧊 freezing, 🌿 seasonal, 📊 sales) - Improve spacing, hierarchy, and overall visual consistency throughout The AI suggestions step now has the same beautiful, modern, and easy-to-use UI/UX as the recipe step, providing a consistent onboarding experience. --- .../onboarding/steps/UploadSalesDataStep.tsx | 342 +++++++++++------- 1 file changed, 213 insertions(+), 129 deletions(-) diff --git a/frontend/src/components/domain/onboarding/steps/UploadSalesDataStep.tsx b/frontend/src/components/domain/onboarding/steps/UploadSalesDataStep.tsx index 51451f76..e69ab371 100644 --- a/frontend/src/components/domain/onboarding/steps/UploadSalesDataStep.tsx +++ b/frontend/src/components/domain/onboarding/steps/UploadSalesDataStep.tsx @@ -374,90 +374,165 @@ export const UploadSalesDataStep: React.FC = ({ if (showInventoryStep) { return (
-
-

- ¡Perfecto! Hemos analizado automáticamente tus datos de ventas y generado estas sugerencias de inventario inteligentes. - Revisa y selecciona los artículos que te gustaría agregar a tu inventario. + {/* Why This Matters */} +

+

+ + + + {t('onboarding:ai_suggestions.why_title', 'AI Smart Inventory')} +

+

+ {t('onboarding:ai_suggestions.why_desc', '¡Perfecto! Hemos analizado tus datos de ventas y generado sugerencias inteligentes de inventario. Selecciona los artículos que deseas agregar.')}

- {/* Summary */} -
-
-
-

- {selectedCount} de {inventoryItems.length} artículos seleccionados -

-

- Los artículos con alta confianza están preseleccionados -

-
- + {allSelected ? t('common:deselect_all', 'Deseleccionar Todos') : t('common:select_all', 'Seleccionar Todos')} +
- {/* Inventory Items */} -
- {inventoryItems.map((item) => ( -
-
-
- handleToggleSelection(item.suggestion_id)} - className="w-4 h-4 text-[var(--color-primary)] border-[var(--border-secondary)] rounded focus:ring-[var(--color-primary)]" - /> -
- -
-
-

- {item.suggested_name} -

-

- {item.category} • Unidad: {item.unit_of_measure} -

-
- - Confianza: {Math.round(item.confidence_score * 100)}% - - {item.requires_refrigeration && ( - - Requiere refrigeración - - )} - {item.requires_freezing && ( - - Requiere congelación - - )} - {item.is_seasonal && ( - - Producto estacional - + {/* Product suggestions grid */} +
+

+ {t('onboarding:ai_suggestions.suggested_products', 'Productos Sugeridos')} +

+
+ {inventoryItems.map((item) => ( +
handleToggleSelection(item.suggestion_id)} + className={`p-4 border rounded-lg cursor-pointer transition-all ${ + item.selected + ? 'border-[var(--color-primary)] bg-[var(--color-primary)]/5 shadow-sm' + : 'border-[var(--border-secondary)] hover:border-[var(--border-primary)] hover:bg-[var(--bg-secondary)]' + }`} + > +
+ {/* Checkbox */} +
+
+ {item.selected && ( + + + )}
- {item.selected && ( -
- +
+ {item.suggested_name} +
+

+ {item.category} • {item.unit_of_measure} +

+ + {/* Tags */} +
+ + {Math.round(item.confidence_score * 100)}% confianza + + {item.requires_refrigeration && ( + + ❄️ Refrigeración + + )} + {item.requires_freezing && ( + + 🧊 Congelación + + )} + {item.is_seasonal && ( + + 🌿 Estacional + + )} +
+ + {/* Sales data preview */} + {item.sales_data && ( +
+
+ + 📊 {item.sales_data.average_daily_sales.toFixed(1)}/día + + + 📦 {item.sales_data.total_quantity} total + +
+
+ )} +
+
+
+ ))} +
+
+ + {/* Edit selected items section */} + {selectedCount > 0 && ( +
+
+
+

+ + + + {t('onboarding:ai_suggestions.edit_details', 'Configurar Detalles')} +

+

+ {t('onboarding:ai_suggestions.edit_desc', 'Ajusta el stock inicial y costos para los artículos seleccionados')} +

+
+
+ +
+ {inventoryItems.filter(item => item.selected).map((item) => ( +
+
+ {item.suggested_name} +
+
+
+ + = ({ 'stock_quantity', Number(e.target.value) )} - size="sm" + onClick={(e) => e.stopPropagation()} + className="w-full px-3 py-2 text-sm bg-[var(--bg-secondary)] border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] text-[var(--text-primary)]" + placeholder="0" /> - +
+ + = ({ 'cost_per_unit', Number(e.target.value) )} - size="sm" + onClick={(e) => e.stopPropagation()} + className="w-full px-3 py-2 text-sm bg-[var(--bg-secondary)] border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] text-[var(--text-primary)]" + placeholder="0.00" /> - +
+ + = ({ 'estimated_shelf_life_days', Number(e.target.value) )} - size="sm" - className="sm:col-span-2 lg:col-span-1" + onClick={(e) => e.stopPropagation()} + className="w-full px-3 py-2 text-sm bg-[var(--bg-secondary)] border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] text-[var(--text-primary)]" + placeholder="30" />
- )} +
-
+ ))}
- ))} -
+
+ )} {error && (
@@ -509,8 +597,7 @@ export const UploadSalesDataStep: React.FC = ({ )} {/* Actions */} -
{/* Removed back button */} - +
{/* File Format Guide */} -
+
- + -

+

{t('onboarding:steps.inventory_setup.file_format_guide.title', 'Guía de Formato de Archivo')}

{/* Quick Summary - Always Visible */} -
+

- {t('onboarding:steps.inventory_setup.file_format_guide.supported_formats.title', 'Formatos Soportados')}:{' '} + {t('onboarding:steps.inventory_setup.file_format_guide.supported_formats.title', 'Formatos Soportados')}:{' '} CSV, JSON, Excel (XLSX) • {t('onboarding:steps.inventory_setup.file_format_guide.supported_formats.max_size', 'Tamaño máximo: 10MB')}

- {t('onboarding:steps.inventory_setup.file_format_guide.required_columns.title', 'Columnas Requeridas')}:{' '} + {t('onboarding:steps.inventory_setup.file_format_guide.required_columns.title', 'Columnas Requeridas')}:{' '} {t('onboarding:steps.inventory_setup.file_format_guide.required_columns.date', 'Fecha')},{' '} {t('onboarding:steps.inventory_setup.file_format_guide.required_columns.product', 'Nombre del Producto')},{' '} {t('onboarding:steps.inventory_setup.file_format_guide.required_columns.quantity', 'Cantidad Vendida')} @@ -577,28 +664,28 @@ export const UploadSalesDataStep: React.FC = ({ {/* Detailed Guide - Collapsible */} {showGuide && ( -

+
{/* Required Columns Detail */}
-

+

{t('onboarding:steps.inventory_setup.file_format_guide.required_columns.title', 'Columnas Requeridas')}

-
+

- • {t('onboarding:steps.inventory_setup.file_format_guide.required_columns.date', 'Fecha')}:{' '} - + • {t('onboarding:steps.inventory_setup.file_format_guide.required_columns.date', 'Fecha')}:{' '} + {t('onboarding:steps.inventory_setup.file_format_guide.required_columns.date_examples', 'date, fecha, data')}

- • {t('onboarding:steps.inventory_setup.file_format_guide.required_columns.product', 'Nombre del Producto')}:{' '} - + • {t('onboarding:steps.inventory_setup.file_format_guide.required_columns.product', 'Nombre del Producto')}:{' '} + {t('onboarding:steps.inventory_setup.file_format_guide.required_columns.product_examples', 'product, producto, product_name')}

- • {t('onboarding:steps.inventory_setup.file_format_guide.required_columns.quantity', 'Cantidad Vendida')}:{' '} - + • {t('onboarding:steps.inventory_setup.file_format_guide.required_columns.quantity', 'Cantidad Vendida')}:{' '} + {t('onboarding:steps.inventory_setup.file_format_guide.required_columns.quantity_examples', 'quantity, cantidad, quantity_sold')}

@@ -607,10 +694,10 @@ export const UploadSalesDataStep: React.FC = ({ {/* Optional Columns */}
-

+

{t('onboarding:steps.inventory_setup.file_format_guide.optional_columns.title', 'Columnas Opcionales')}

-
+

• {t('onboarding:steps.inventory_setup.file_format_guide.optional_columns.revenue', 'Ingresos (revenue, ingresos, ventas)')}

• {t('onboarding:steps.inventory_setup.file_format_guide.optional_columns.unit_price', 'Precio Unitario (unit_price, precio, price)')}

• {t('onboarding:steps.inventory_setup.file_format_guide.optional_columns.category', 'Categoría (category, categoria)')}

@@ -621,10 +708,10 @@ export const UploadSalesDataStep: React.FC = ({ {/* Date Formats */}
-

+

{t('onboarding:steps.inventory_setup.file_format_guide.date_formats.title', 'Formatos de Fecha Soportados')}

-
+

{t('onboarding:steps.inventory_setup.file_format_guide.date_formats.formats', 'YYYY-MM-DD, DD/MM/YYYY, MM/DD/YYYY, DD-MM-YYYY, y más')}

{t('onboarding:steps.inventory_setup.file_format_guide.date_formats.with_time', 'También se admiten formatos con hora')}

@@ -632,10 +719,10 @@ export const UploadSalesDataStep: React.FC = ({ {/* Automatic Features */}
-

+

{t('onboarding:steps.inventory_setup.file_format_guide.features.title', 'Características Automáticas')}

-
+

✓ {t('onboarding:steps.inventory_setup.file_format_guide.features.multilingual', 'Detección multiidioma de columnas')}

✓ {t('onboarding:steps.inventory_setup.file_format_guide.features.validation', 'Validación automática con reporte detallado')}

✓ {t('onboarding:steps.inventory_setup.file_format_guide.features.ai_classification', 'Clasificación de productos con IA')}

@@ -757,27 +844,24 @@ export const UploadSalesDataStep: React.FC = ({
)} - {/* Actions */} -
{/* Removed back button */} - - {selectedFile && !showInventoryStep && ( -
- {isValidating ? ( - <> -
- Procesando automáticamente... - - ) : validationResult ? ( - <> - - - - Archivo procesado exitosamente - - ) : null} -
- )} -
+ {/* Status indicator */} + {selectedFile && !showInventoryStep && ( +
+ {isValidating ? ( + <> +
+ Procesando automáticamente... + + ) : validationResult ? ( + <> + + + + Archivo procesado exitosamente + + ) : null} +
+ )}
); }; \ No newline at end of file