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

Improve UI

Browse Source
This commit is contained in:
Urtzi Alfaro
2025-12-30 14:40:20 +01:00
parent e494ea8635
commit c07df124fb
71 changed files with 647 additions and 265 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
frontend/src/components/domain/production/analytics/widgets/AIInsightsWidget.tsx
View File

@@ -4,6 +4,7 @@ import { Brain, TrendingUp, AlertTriangle, Target, Zap, DollarSign, Clock } from
import { AnalyticsWidget } from '../AnalyticsWidget';
import { Badge, Button } from '../../../../ui';
import { useCurrentTenant } from '../../../../../stores/tenant.store';
import { useTenantCurrency } from '../../../../../hooks/useTenantCurrency';
interface AIInsight {
id: string;
@@ -27,6 +28,7 @@ interface AIInsight {
export const AIInsightsWidget: React.FC = () => {
const { t } = useTranslation('production');
const currentTenant = useCurrentTenant();
const { currencySymbol } = useTenantCurrency();
// Mock AI insights data - replace with real AI API call
const aiInsights: AIInsight[] = [
@@ -172,7 +174,7 @@ export const AIInsightsWidget: React.FC = () => {
const formatImpactValue = (impact: AIInsight['impact']) => {
switch (impact.unit) {
case 'euros': return `€${impact.value}`;
case 'euros': return `${currencySymbol}${impact.value}`;
case 'percentage': return `${impact.value}%`;
case 'hours': return `${impact.value}h`;
case 'units': return `${impact.value} unidades`;
@@ -222,9 +224,9 @@ export const AIInsightsWidget: React.FC = () => {
</div>
<div className="text-center p-4 bg-[var(--color-success)]/10 rounded-lg border border-[var(--color-success)]/20 hover:border-[var(--color-success)]/40 transition-colors">
<div className="w-8 h-8 mx-auto bg-[var(--color-success)]/20 rounded-full flex items-center justify-center mb-2">
<span className="text-[var(--color-success)] font-bold text-sm">€</span>
<span className="text-[var(--color-success)] font-bold text-sm">{currencySymbol}</span>
</div>
<p className="text-2xl font-bold text-[var(--color-success)]">€{totalPotentialSavings}</p>
<p className="text-2xl font-bold text-[var(--color-success)]">{currencySymbol}{totalPotentialSavings}</p>
<p className="text-sm text-[var(--text-secondary)] font-medium">{t('ai.stats.potential_savings')}</p>
</div>
<div className="text-center p-4 bg-[var(--color-info)]/10 rounded-lg border border-[var(--color-info)]/20 hover:border-[var(--color-info)]/40 transition-colors">
@@ -371,7 +373,7 @@ export const AIInsightsWidget: React.FC = () => {
</p>
<p className="text-xs text-[var(--text-secondary)]">
{implementedInsights.length} {t('ai.performance.insights_implemented')}
{totalPotentialSavings > 0 && `, €${totalPotentialSavings} ${t('ai.performance.in_savings_identified')}`}
{totalPotentialSavings > 0 && `, ${currencySymbol}${totalPotentialSavings} ${t('ai.performance.in_savings_identified')}`}
</p>
</div>
</div>

12
frontend/src/components/domain/production/analytics/widgets/CostPerUnitWidget.tsx
View File

@@ -6,6 +6,7 @@ import { AnalyticsChart, ChartSeries } from '../AnalyticsChart';
import { Button } from '../../../../ui';
import { useActiveBatches } from '../../../../../api/hooks/production';
import { useCurrentTenant } from '../../../../../stores/tenant.store';
import { useTenantCurrency } from '../../../../../hooks/useTenantCurrency';
interface ProductCostData {
product: string;
@@ -21,6 +22,7 @@ export const CostPerUnitWidget: React.FC = () => {
const { t } = useTranslation('production');
const currentTenant = useCurrentTenant();
const tenantId = currentTenant?.id || '';
const { currencySymbol } = useTenantCurrency();
const { data: batchesData, isLoading, error } = useActiveBatches(tenantId);
const batches = batchesData?.batches || [];
@@ -162,7 +164,7 @@ export const CostPerUnitWidget: React.FC = () => {
<div className="flex items-center justify-center space-x-2 mb-2">
<DollarSign className="w-5 h-5 text-[var(--color-primary)]" />
<span className="text-lg font-bold text-[var(--text-primary)]">
€{averageCostPerUnit.toFixed(2)}
{currencySymbol}{averageCostPerUnit.toFixed(2)}
</span>
</div>
<p className="text-sm text-[var(--text-secondary)]">{t('cost.average_cost_per_unit')}</p>
@@ -171,7 +173,7 @@ export const CostPerUnitWidget: React.FC = () => {
<div className="flex items-center justify-center space-x-2 mb-2">
<TrendingUp className="w-5 h-5 text-[var(--color-primary)]" />
<span className="text-lg font-bold text-[var(--text-primary)]">
€{totalCosts.toFixed(0)}
{currencySymbol}{totalCosts.toFixed(0)}
</span>
</div>
<p className="text-sm text-[var(--text-secondary)]">{t('cost.total_production_cost')}</p>
@@ -221,7 +223,7 @@ export const CostPerUnitWidget: React.FC = () => {
</span>
</div>
<span className="text-lg font-bold text-[var(--text-primary)]">
€{item.costPerUnit.toFixed(2)}
{currencySymbol}{item.costPerUnit.toFixed(2)}
</span>
</div>
@@ -229,13 +231,13 @@ export const CostPerUnitWidget: React.FC = () => {
<div>
<p className="text-[var(--text-secondary)]">{t('cost.estimated')}</p>
<p className="font-semibold text-[var(--text-primary)]">
€{item.estimatedCost.toFixed(2)}
{currencySymbol}{item.estimatedCost.toFixed(2)}
</p>
</div>
<div>
<p className="text-[var(--text-secondary)]">{t('cost.actual')}</p>
<p className="font-semibold text-[var(--text-primary)]">
€{item.actualCost.toFixed(2)}
{currencySymbol}{item.actualCost.toFixed(2)}
</p>
</div>
<div>

8
frontend/src/components/domain/production/analytics/widgets/MaintenanceScheduleWidget.tsx
View File

@@ -4,6 +4,7 @@ import { Calendar, Clock, Wrench, AlertCircle, CheckCircle2 } from 'lucide-react
import { AnalyticsWidget } from '../AnalyticsWidget';
import { Badge, Button } from '../../../../ui';
import { useCurrentTenant } from '../../../../../stores/tenant.store';
import { useTenantCurrency } from '../../../../../hooks/useTenantCurrency';
interface MaintenanceTask {
id: string;
@@ -24,6 +25,7 @@ interface MaintenanceTask {
export const MaintenanceScheduleWidget: React.FC = () => {
const { t } = useTranslation('production');
const currentTenant = useCurrentTenant();
const { currencySymbol } = useTenantCurrency();
// Mock maintenance data - replace with real API call
const maintenanceTasks: MaintenanceTask[] = [
@@ -185,9 +187,9 @@ export const MaintenanceScheduleWidget: React.FC = () => {
</div>
<div className="text-center p-4 bg-[var(--bg-secondary)] rounded-lg">
<div className="w-8 h-8 mx-auto bg-green-100 dark:bg-green-900/20 rounded-full flex items-center justify-center mb-2">
<span className="text-green-600 font-bold text-sm">€</span>
<span className="text-green-600 font-bold text-sm">{currencySymbol}</span>
</div>
<p className="text-2xl font-bold text-[var(--text-primary)]">€{totalCost}</p>
<p className="text-2xl font-bold text-[var(--text-primary)]">{currencySymbol}{totalCost}</p>
<p className="text-sm text-[var(--text-secondary)]">{t('equipment.maintenance.total_cost')}</p>
</div>
</div>
@@ -234,7 +236,7 @@ export const MaintenanceScheduleWidget: React.FC = () => {
<div className="flex items-center space-x-4 text-xs text-[var(--text-secondary)]">
<span>{t('equipment.maintenance.scheduled')}: {formatDate(task.scheduledDate)}</span>
<span>{t('equipment.maintenance.duration')}: {task.estimatedDuration}h</span>
{task.cost && <span>{t('equipment.maintenance.cost')}: €{task.cost}</span>}
{task.cost && <span>{t('equipment.maintenance.cost')}: {currencySymbol}{task.cost}</span>}
{task.technician && <span>{t('equipment.maintenance.technician')}: {task.technician}</span>}
</div>
</div>

8
frontend/src/components/domain/production/analytics/widgets/PredictiveMaintenanceWidget.tsx
View File

@@ -5,6 +5,7 @@ import { AnalyticsWidget } from '../AnalyticsWidget';
import { AnalyticsChart, ChartSeries } from '../AnalyticsChart';
import { Badge, Button } from '../../../../ui';
import { useCurrentTenant } from '../../../../../stores/tenant.store';
import { useTenantCurrency } from '../../../../../hooks/useTenantCurrency';
interface PredictiveMaintenanceAlert {
id: string;
@@ -34,6 +35,7 @@ interface PredictiveMaintenanceAlert {
export const PredictiveMaintenanceWidget: React.FC = () => {
const { t } = useTranslation('production');
const currentTenant = useCurrentTenant();
const { currencySymbol } = useTenantCurrency();
// Mock predictive maintenance data - replace with real ML API call
const maintenanceAlerts: PredictiveMaintenanceAlert[] = [
@@ -239,9 +241,9 @@ export const PredictiveMaintenanceWidget: React.FC = () => {
</div>
<div className="text-center p-4 bg-[var(--bg-secondary)] rounded-lg">
<div className="w-8 h-8 mx-auto bg-orange-100 dark:bg-orange-900/20 rounded-full flex items-center justify-center mb-2">
<span className="text-orange-600 font-bold text-sm">€</span>
<span className="text-orange-600 font-bold text-sm">{currencySymbol}</span>
</div>
<p className="text-2xl font-bold text-[var(--text-primary)]">€{totalEstimatedCost}</p>
<p className="text-2xl font-bold text-[var(--text-primary)]">{currencySymbol}{totalEstimatedCost}</p>
<p className="text-sm text-[var(--text-secondary)]">{t('ai.predictive_maintenance.estimated_cost')}</p>
</div>
<div className="text-center p-4 bg-[var(--bg-secondary)] rounded-lg">
@@ -365,7 +367,7 @@ export const PredictiveMaintenanceWidget: React.FC = () => {
<div className="flex items-center space-x-4 text-xs">
<span className="flex items-center space-x-1">
<span className="w-2 h-2 bg-orange-500 rounded-full"></span>
<span>{t('ai.predictive_maintenance.estimated_cost')}: €{alert.estimatedCost}</span>
<span>{t('ai.predictive_maintenance.estimated_cost')}: {currencySymbol}{alert.estimatedCost}</span>
</span>
<span className="flex items-center space-x-1">
<span className="w-2 h-2 bg-red-500 rounded-full"></span>

6
frontend/src/components/domain/production/analytics/widgets/TopDefectTypesWidget.tsx
View File

@@ -6,6 +6,7 @@ import { AnalyticsChart, ChartSeries } from '../AnalyticsChart';
import { Button, Badge } from '../../../../ui';
import { useActiveBatches } from '../../../../../api/hooks/production';
import { useCurrentTenant } from '../../../../../stores/tenant.store';
import { useTenantCurrency } from '../../../../../hooks/useTenantCurrency';
interface DefectType {
type: string;
@@ -20,6 +21,7 @@ export const TopDefectTypesWidget: React.FC = () => {
const { t } = useTranslation('production');
const currentTenant = useCurrentTenant();
const tenantId = currentTenant?.id || '';
const { currencySymbol } = useTenantCurrency();
const { data: batchesData, isLoading, error } = useActiveBatches(tenantId);
const batches = batchesData?.batches || [];
@@ -193,7 +195,7 @@ export const TopDefectTypesWidget: React.FC = () => {
<div className="p-4 bg-[var(--bg-secondary)] rounded-lg text-center">
<div className="flex items-center justify-center space-x-2 mb-1">
<span className="text-2xl font-bold text-red-600">
€{totalDefectCost.toFixed(0)}
{currencySymbol}{totalDefectCost.toFixed(0)}
</span>
</div>
<p className="text-sm text-[var(--text-secondary)]">{t('quality.estimated_cost')}</p>
@@ -229,7 +231,7 @@ export const TopDefectTypesWidget: React.FC = () => {
<div className="flex items-center space-x-3 text-xs text-[var(--text-secondary)]">
<span>{defect.count} {t('quality.incidents')}</span>
<span>•</span>
<span>€{defect.estimatedCost.toFixed(2)} {t('quality.cost')}</span>
<span>{currencySymbol}{defect.estimatedCost.toFixed(2)} {t('quality.cost')}</span>
<span className={getTrendColor(defect.trend)}>
{getTrendIcon(defect.trend)} {t(`quality.trend.${defect.trend}`)}
</span>

6
frontend/src/components/domain/production/analytics/widgets/WasteDefectTrackerWidget.tsx
View File

@@ -6,6 +6,7 @@ import { AnalyticsChart, ChartSeries } from '../AnalyticsChart';
import { Button, Badge } from '../../../../ui';
import { useActiveBatches } from '../../../../../api/hooks/production';
import { useCurrentTenant } from '../../../../../stores/tenant.store';
import { useTenantCurrency } from '../../../../../hooks/useTenantCurrency';
interface WasteSource {
source: string;
@@ -19,6 +20,7 @@ export const WasteDefectTrackerWidget: React.FC = () => {
const { t } = useTranslation('production');
const currentTenant = useCurrentTenant();
const tenantId = currentTenant?.id || '';
const { currencySymbol } = useTenantCurrency();
const { data: batchesData, isLoading, error } = useActiveBatches(tenantId);
const batches = batchesData?.batches || [];
@@ -202,7 +204,7 @@ export const WasteDefectTrackerWidget: React.FC = () => {
<div className="flex items-center justify-center space-x-2 mb-1">
<TrendingDown className="w-5 h-5 text-[var(--color-success)]" />
<span className="text-2xl font-bold text-[var(--color-success)]">
€{totalWasteCost.toFixed(0)}
{currencySymbol}{totalWasteCost.toFixed(0)}
</span>
</div>
<p className="text-xs text-[var(--text-secondary)] font-medium">{t('cost.waste_cost')}</p>
@@ -241,7 +243,7 @@ export const WasteDefectTrackerWidget: React.FC = () => {
{source.source}
</p>
<p className="text-xs text-[var(--text-secondary)]">
{source.count} {t('common.units')} • €{source.cost.toFixed(2)}
{source.count} {t('common.units')} • {currencySymbol}{source.cost.toFixed(2)}
</p>
</div>
</div>