From a6ae730ef08cb28f7ff491f7324b89df546f460c Mon Sep 17 00:00:00 2001 From: Urtzi Alfaro Date: Thu, 18 Dec 2025 22:23:16 +0100 Subject: [PATCH] Add page UI imporvements --- .../analytics/ProcurementAnalyticsPage.tsx | 471 ++++++++++-------- .../app/analytics/ProductionAnalyticsPage.tsx | 44 +- .../analytics/ai-insights/AIInsightsPage.tsx | 39 +- .../analytics/events/EventRegistryPage.tsx | 124 ++--- .../analytics/forecasting/ForecastingPage.tsx | 77 +-- .../performance/PerformanceAnalyticsPage.tsx | 87 ++-- .../settings/bakery/BakerySettingsPage.tsx | 136 +++-- .../app/settings/profile/ProfilePage.tsx | 200 ++++---- 8 files changed, 636 insertions(+), 542 deletions(-) diff --git a/frontend/src/pages/app/analytics/ProcurementAnalyticsPage.tsx b/frontend/src/pages/app/analytics/ProcurementAnalyticsPage.tsx index 8289c77c..aabc989b 100644 --- a/frontend/src/pages/app/analytics/ProcurementAnalyticsPage.tsx +++ b/frontend/src/pages/app/analytics/ProcurementAnalyticsPage.tsx @@ -108,30 +108,30 @@ const ProcurementAnalyticsPage: React.FC = () => { showMobileNotice={true} > {activeTab === 'overview' && ( - <> +
{/* Overview Tab */} -
- {/* Plan Status Distribution */} - -
- {dashboard?.plan_status_distribution?.map((status: any) => ( -
- {status.status} -
-
-
+
+ {/* Plan Status Distribution */} + +
+ {dashboard?.plan_status_distribution?.map((status: any) => ( +
+ {status.status.replace('_', ' ')} +
+
+
+
+ + {status.count} +
- - {status.count} -
-
- ))} -
- + ))} +
+ {/* Critical Requirements */} { actions={} >
-
- Stock Crítico +
+
+
+ Stock Crítico +
{dashboard?.critical_requirements?.low_stock || 0}
-
- Entregas Atrasadas +
+
+
+ Entregas Atrasadas +
{dashboard?.critical_requirements?.overdue || 0}
-
- Alta Prioridad +
+
+
+ Alta Prioridad +
{dashboard?.critical_requirements?.high_priority || 0} @@ -163,33 +172,33 @@ const ProcurementAnalyticsPage: React.FC = () => { {/* Recent Plans */} -
+
- - - - - - + + + + + + {dashboard?.recent_plans?.map((plan: any) => ( - - - + + - - - @@ -198,40 +207,46 @@ const ProcurementAnalyticsPage: React.FC = () => {
PlanFechaEstadoRequerimientosCosto Total
PlanFechaEstadoRequerimientosCosto Total
{plan.plan_number} +
{plan.plan_number} {new Date(plan.plan_date).toLocaleDateString()} - + + {plan.status} + {plan.total_requirements} + €{formatters.currency(plan.total_estimated_cost)}
- +
)} {activeTab === 'performance' && ( - <> +
{/* Performance Tab */}
-
- -
+
+
+ +
+
{formatters.percentage(dashboard?.performance_metrics?.average_fulfillment_rate || 0)}
-
Tasa de Cumplimiento
+
Tasa de Cumplimiento
-
- -
+
+
+ +
+
{formatters.percentage(dashboard?.performance_metrics?.average_on_time_delivery || 0)}
-
Entregas a Tiempo
+
Entregas a Tiempo
-
- -
+
+
+ +
+
{dashboard?.performance_metrics?.supplier_performance?.toFixed(1) || '0.0'}
-
Puntuación de Calidad
+
Puntuación de Calidad
@@ -239,84 +254,110 @@ const ProcurementAnalyticsPage: React.FC = () => { {/* Performance Trend Chart */} {trends && trends.performance_trend && trends.performance_trend.length > 0 ? ( - - - - - `${(value * 100).toFixed(0)}%`} - /> - `${(value * 100).toFixed(1)}%`} - labelStyle={{ color: 'var(--text-primary)' }} - /> - - - - - +
+ + + + + `${(value * 100).toFixed(0)}%`} + tickLine={{ stroke: 'var(--border-primary)' }} + /> + `${(value * 100).toFixed(1)}%`} + labelStyle={{ color: 'var(--text-primary)', fontWeight: 600 }} + /> + + + + + +
) : ( -
- No hay datos de tendencias disponibles +
+ +

No hay datos de tendencias disponibles

)} - +
)} {activeTab === 'suppliers' && ( - <> +
{/* Suppliers Tab */} -
+
- - - - - - + + + + + + {dashboard?.supplier_performance?.map((supplier: any) => ( - - - - + + - - + ))} @@ -324,54 +365,72 @@ const ProcurementAnalyticsPage: React.FC = () => {
ProveedorÓrdenesTasa CumplimientoEntregas a TiempoCalidad
ProveedorÓrdenesCumplimientoPuntualidadCalidad
{supplier.name}{supplier.total_orders} - {formatters.percentage(supplier.fulfillment_rate)} +
{supplier.name} + + {supplier.total_orders} + - {formatters.percentage(supplier.on_time_rate)} + + = 0.9 ? 'bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-300' : + supplier.fulfillment_rate >= 0.7 ? 'bg-yellow-100 dark:bg-yellow-900/30 text-yellow-700 dark:text-yellow-300' : + 'bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-300' + }`}> + {formatters.percentage(supplier.fulfillment_rate)} + - {supplier.quality_score?.toFixed(1) || 'N/A'} + + = 0.9 ? 'bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-300' : + supplier.on_time_rate >= 0.7 ? 'bg-yellow-100 dark:bg-yellow-900/30 text-yellow-700 dark:text-yellow-300' : + 'bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-300' + }`}> + {formatters.percentage(supplier.on_time_rate)} + + + + {supplier.quality_score?.toFixed(1) || 'N/A'} +
- +
)} {activeTab === 'costs' && ( - <> +
{/* Costs Tab */} -
+
-
- Costo Total Estimado - - €{formatters.currency(dashboard?.summary?.total_estimated_cost || 0)} - +
+
+ Costo Total Estimado +
+ €{formatters.currency(dashboard?.summary?.total_estimated_cost || 0)} +
+
+
-
- Costo Total Aprobado - - €{formatters.currency(dashboard?.summary?.total_approved_cost || 0)} - +
+
+ Costo Total Aprobado +
+ €{formatters.currency(dashboard?.summary?.total_approved_cost || 0)} +
+
+
-
- Variación Promedio - +
+ Variación Promedio +
0 + ? 'text-[var(--color-error)]' + : 'text-[var(--color-success)]' + }`}> + {(dashboard?.summary?.cost_variance || 0) > 0 ? '+' : ''}€{formatters.currency(dashboard?.summary?.cost_variance || 0)} +
+
+ 0 ? 'text-[var(--color-error)]' - : 'text-[var(--color-success)]' - }`}> - €{formatters.currency(Math.abs(dashboard?.summary?.cost_variance || 0))} - + : 'text-[var(--color-success)] rotate-180' + }`} />
-
+
{dashboard?.cost_by_category?.map((category: any) => ( -
- {category.name} -
-
+
+
+ {category.name} + + €{formatters.currency(category.amount)} + +
+
+
- - €{formatters.currency(category.amount)} + + {((category.amount / (dashboard?.summary?.total_estimated_cost || 1)) * 100).toFixed(1)}%
@@ -379,79 +438,93 @@ const ProcurementAnalyticsPage: React.FC = () => {
- +
)} {activeTab === 'quality' && ( - <> +
{/* Quality Tab */} -
+
-
- Puntuación Promedio - - {dashboard?.quality_metrics?.avg_score?.toFixed(1) || '0.0'} / 10 - +
+ Puntuación Promedio +
+ + {dashboard?.quality_metrics?.avg_score?.toFixed(1) || '0.0'} + + / 10 +
-
- Productos con Calidad Alta - - {dashboard?.quality_metrics?.high_quality_count || 0} - -
-
- Productos con Calidad Baja - - {dashboard?.quality_metrics?.low_quality_count || 0} - +
+
+ + + {dashboard?.quality_metrics?.high_quality_count || 0} + + Calidad Alta +
+
+ + + {dashboard?.quality_metrics?.low_quality_count || 0} + + Calidad Baja +
{trends && trends.quality_trend && trends.quality_trend.length > 0 ? ( - - - - - - `${value.toFixed(1)} / 10`} - labelStyle={{ color: 'var(--text-primary)' }} - /> - - - +
+ + + + + + `${value.toFixed(1)} / 10`} + labelStyle={{ color: 'var(--text-primary)', fontWeight: 600 }} + /> + + + +
) : ( -
- No hay datos de calidad disponibles +
+ +

No hay datos de calidad disponibles

)}
- +
)} ); diff --git a/frontend/src/pages/app/analytics/ProductionAnalyticsPage.tsx b/frontend/src/pages/app/analytics/ProductionAnalyticsPage.tsx index 98e2a26a..c528a58b 100644 --- a/frontend/src/pages/app/analytics/ProductionAnalyticsPage.tsx +++ b/frontend/src/pages/app/analytics/ProductionAnalyticsPage.tsx @@ -144,58 +144,68 @@ const ProductionAnalyticsPage: React.FC = () => { mobileNoticeText={t('mobile.swipe_scroll_interact')} > {/* Tab Content */} -
+
{/* Overview Tab - Mixed Dashboard */} {activeTab === 'overview' && ( -
+
- +
+ + +
-
)} {/* Bakery Operations Tab */} {activeTab === 'operations' && ( -
+
- +
+ + +
-
)} {/* Cost & Efficiency Tab */} {activeTab === 'cost-efficiency' && ( -
- +
+
+ + +
-
)} {/* Quality Assurance Tab */} {activeTab === 'quality' && ( -
+
- - +
+ + +
)} {/* Equipment & Maintenance Tab */} {activeTab === 'equipment' && ( -
+
- - +
+ + +
)} {/* AI Insights Tab */} {activeTab === 'ai-insights' && ( -
+
diff --git a/frontend/src/pages/app/analytics/ai-insights/AIInsightsPage.tsx b/frontend/src/pages/app/analytics/ai-insights/AIInsightsPage.tsx index c3162075..3b522fbf 100644 --- a/frontend/src/pages/app/analytics/ai-insights/AIInsightsPage.tsx +++ b/frontend/src/pages/app/analytics/ai-insights/AIInsightsPage.tsx @@ -218,19 +218,20 @@ const AIInsightsPage: React.FC = () => { showMobileNotice={true} > {/* Category Filter */} - -
+ +

Filtrar por Categoría

+
{categories.map((category) => ( ))}
@@ -239,26 +240,32 @@ const AIInsightsPage: React.FC = () => { {/* Insights List */}
{filteredInsights.map((insight) => ( - +
-
-
+
+
{getTypeIcon(insight.type)}
-
+
- {insight.priority === 'high' ? 'Alta' : insight.priority === 'medium' ? 'Media' : 'Baja'} Prioridad + {insight.priority === 'high' ? '🔴 Alta' : insight.priority === 'medium' ? '🟡 Media' : '🟢 Baja'} Prioridad + + + + {insight.confidence}% confianza - {insight.confidence}% confianza {insight.actionable && ( - Accionable + + + Accionable + )}
- -

{insight.title}

-

{getInsightDescription(insight)}

+ +

{insight.title}

+

{getInsightDescription(insight)}

{/* Impact */} {insight.impact_value && insight.impact_type && ( diff --git a/frontend/src/pages/app/analytics/events/EventRegistryPage.tsx b/frontend/src/pages/app/analytics/events/EventRegistryPage.tsx index 6087a583..1517864e 100644 --- a/frontend/src/pages/app/analytics/events/EventRegistryPage.tsx +++ b/frontend/src/pages/app/analytics/events/EventRegistryPage.tsx @@ -119,53 +119,55 @@ const EventRegistryPage: React.FC = () => { )} {/* Controls Bar */} -
-
- - - {Object.keys(filters).length > 2 && ( + +
+
- )} -
-
- - + {Object.keys(filters).length > 2 && ( + + )} +
+ +
+ + +
-
+ {/* Main Content */}
@@ -213,38 +215,38 @@ const EventRegistryPage: React.FC = () => { ) : ( <> {/* Table */} -
+
- + - - - - - - - - + {auditLogs.map((event) => (
+ Timestamp + Servicio + Acción + Recurso + Severidad + Descripción + Acciones
@@ -299,31 +301,31 @@ const EventRegistryPage: React.FC = () => {
{/* Pagination */} -
+
-
+
Mostrando{' '} - + {(currentPage - 1) * pageSize + 1} {' '} a{' '} - + {Math.min(currentPage * pageSize, auditLogs.length)} {' '} de{' '} - {auditLogs.length}{' '} + {auditLogs.length}{' '} eventos
-
+
- + Página {currentPage} de {totalPages}
diff --git a/frontend/src/pages/app/analytics/forecasting/ForecastingPage.tsx b/frontend/src/pages/app/analytics/forecasting/ForecastingPage.tsx index e2efaddf..da20b3aa 100644 --- a/frontend/src/pages/app/analytics/forecasting/ForecastingPage.tsx +++ b/frontend/src/pages/app/analytics/forecasting/ForecastingPage.tsx @@ -254,9 +254,9 @@ const ForecastingPage: React.FC = () => { {/* Ingredient Selection Section */}
{/* Ingredients Grid - Similar to POSPage products */} - -

- + +

+ Ingredientes Disponibles ({products.length})

@@ -333,8 +333,8 @@ const ForecastingPage: React.FC = () => {
{/* Period Selection */} -

- +

+ Configuración

@@ -345,7 +345,7 @@ const ForecastingPage: React.FC = () => { { />
-
-