Clean frontend
This commit is contained in:
Urtzi Alfaro
@@ -1,617 +0,0 @@
|
|||||||
import React, { useState, useCallback, useEffect } from 'react';
|
|
||||||
import { Card, Button, Badge, Select, DatePicker } from '../../ui';
|
|
||||||
import { ChartWidget } from './ChartWidget';
|
|
||||||
import { ReportsTable } from './ReportsTable';
|
|
||||||
import { FilterPanel } from './FilterPanel';
|
|
||||||
import { ExportOptions } from './ExportOptions';
|
|
||||||
import type {
|
|
||||||
BakeryMetrics,
|
|
||||||
AnalyticsReport,
|
|
||||||
ChartWidget as ChartWidgetType,
|
|
||||||
FilterPanel as FilterPanelType,
|
|
||||||
AppliedFilter,
|
|
||||||
TimeRange,
|
|
||||||
ExportFormat
|
|
||||||
} from './types';
|
|
||||||
|
|
||||||
interface AnalyticsDashboardProps {
|
|
||||||
className?: string;
|
|
||||||
initialTimeRange?: TimeRange;
|
|
||||||
showFilters?: boolean;
|
|
||||||
showExport?: boolean;
|
|
||||||
customCharts?: ChartWidgetType[];
|
|
||||||
onMetricsLoad?: (metrics: BakeryMetrics) => void;
|
|
||||||
onExport?: (format: ExportFormat, options: any) => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
const DEFAULT_TIME_RANGES: { value: TimeRange; label: string }[] = [
|
|
||||||
{ value: 'today', label: 'Hoy' },
|
|
||||||
{ value: 'yesterday', label: 'Ayer' },
|
|
||||||
{ value: 'thisWeek', label: 'Esta semana' },
|
|
||||||
{ value: 'lastWeek', label: 'Semana pasada' },
|
|
||||||
{ value: 'thisMonth', label: 'Este mes' },
|
|
||||||
{ value: 'lastMonth', label: 'Mes pasado' },
|
|
||||||
{ value: 'thisQuarter', label: 'Este trimestre' },
|
|
||||||
{ value: 'thisYear', label: 'Este año' },
|
|
||||||
{ value: 'custom', label: 'Personalizado' },
|
|
||||||
];
|
|
||||||
|
|
||||||
export const AnalyticsDashboard: React.FC<AnalyticsDashboardProps> = ({
|
|
||||||
className = '',
|
|
||||||
initialTimeRange = 'thisMonth',
|
|
||||||
showFilters = true,
|
|
||||||
showExport = true,
|
|
||||||
customCharts = [],
|
|
||||||
onMetricsLoad,
|
|
||||||
onExport,
|
|
||||||
}) => {
|
|
||||||
const [selectedTimeRange, setSelectedTimeRange] = useState<TimeRange>(initialTimeRange);
|
|
||||||
const [customDateRange, setCustomDateRange] = useState<{ from: Date; to: Date } | null>(null);
|
|
||||||
const [bakeryMetrics, setBakeryMetrics] = useState<BakeryMetrics | null>(null);
|
|
||||||
const [reports, setReports] = useState<AnalyticsReport[]>([]);
|
|
||||||
const [appliedFilters, setAppliedFilters] = useState<AppliedFilter[]>([]);
|
|
||||||
const [loading, setLoading] = useState(false);
|
|
||||||
const [activeView, setActiveView] = useState<'overview' | 'sales' | 'production' | 'inventory' | 'financial' | 'reports'>('overview');
|
|
||||||
const [isExportModalOpen, setIsExportModalOpen] = useState(false);
|
|
||||||
const [selectedMetricCards, setSelectedMetricCards] = useState<string[]>([]);
|
|
||||||
|
|
||||||
const loadAnalyticsData = useCallback(async () => {
|
|
||||||
setLoading(true);
|
|
||||||
try {
|
|
||||||
// Mock data - in real implementation, this would fetch from API
|
|
||||||
const mockMetrics: BakeryMetrics = {
|
|
||||||
sales: {
|
|
||||||
total_revenue: 45250.75,
|
|
||||||
total_orders: 1247,
|
|
||||||
average_order_value: 36.32,
|
|
||||||
revenue_growth: 12.5,
|
|
||||||
order_growth: 8.3,
|
|
||||||
conversion_rate: 67.8,
|
|
||||||
top_products: [
|
|
||||||
{
|
|
||||||
product_id: 'prod-1',
|
|
||||||
product_name: 'Pan de Molde Integral',
|
|
||||||
category: 'Pan',
|
|
||||||
quantity_sold: 342,
|
|
||||||
revenue: 8540.50,
|
|
||||||
profit_margin: 45.2,
|
|
||||||
growth_rate: 15.3,
|
|
||||||
stock_turns: 12.4
|
|
||||||
},
|
|
||||||
{
|
|
||||||
product_id: 'prod-2',
|
|
||||||
product_name: 'Croissant Mantequilla',
|
|
||||||
category: 'Bollería',
|
|
||||||
quantity_sold: 289,
|
|
||||||
revenue: 7225.00,
|
|
||||||
profit_margin: 52.1,
|
|
||||||
growth_rate: 22.7,
|
|
||||||
stock_turns: 8.9
|
|
||||||
}
|
|
||||||
],
|
|
||||||
sales_by_channel: [
|
|
||||||
{
|
|
||||||
channel: 'Tienda Física',
|
|
||||||
revenue: 28500.45,
|
|
||||||
orders: 789,
|
|
||||||
customers: 634,
|
|
||||||
conversion_rate: 72.1,
|
|
||||||
average_order_value: 36.12,
|
|
||||||
growth_rate: 8.5
|
|
||||||
},
|
|
||||||
{
|
|
||||||
channel: 'Online',
|
|
||||||
revenue: 16750.30,
|
|
||||||
orders: 458,
|
|
||||||
customers: 412,
|
|
||||||
conversion_rate: 61.3,
|
|
||||||
average_order_value: 36.58,
|
|
||||||
growth_rate: 18.9
|
|
||||||
}
|
|
||||||
],
|
|
||||||
hourly_sales: [],
|
|
||||||
seasonal_trends: []
|
|
||||||
},
|
|
||||||
production: {
|
|
||||||
total_batches: 156,
|
|
||||||
success_rate: 94.2,
|
|
||||||
waste_percentage: 3.8,
|
|
||||||
production_efficiency: 87.5,
|
|
||||||
quality_score: 92.1,
|
|
||||||
capacity_utilization: 76.3,
|
|
||||||
production_costs: 18750.25,
|
|
||||||
batch_cycle_time: 4.2,
|
|
||||||
top_recipes: [
|
|
||||||
{
|
|
||||||
recipe_id: 'rec-1',
|
|
||||||
recipe_name: 'Pan de Molde Tradicional',
|
|
||||||
batches_produced: 45,
|
|
||||||
success_rate: 96.8,
|
|
||||||
average_yield: 98.2,
|
|
||||||
cost_per_unit: 1.25,
|
|
||||||
quality_score: 94.5,
|
|
||||||
profitability: 65.2
|
|
||||||
}
|
|
||||||
],
|
|
||||||
quality_trends: []
|
|
||||||
},
|
|
||||||
inventory: {
|
|
||||||
total_stock_value: 12350.80,
|
|
||||||
turnover_rate: 8.4,
|
|
||||||
days_of_inventory: 12.5,
|
|
||||||
stockout_rate: 2.1,
|
|
||||||
waste_value: 245.30,
|
|
||||||
carrying_costs: 1850.75,
|
|
||||||
reorder_efficiency: 89.3,
|
|
||||||
supplier_performance: [
|
|
||||||
{
|
|
||||||
supplier_id: 'sup-1',
|
|
||||||
supplier_name: 'Harinas Premium SA',
|
|
||||||
on_time_delivery: 94.2,
|
|
||||||
quality_rating: 4.6,
|
|
||||||
cost_competitiveness: 87.5,
|
|
||||||
total_orders: 24,
|
|
||||||
total_value: 8450.75,
|
|
||||||
reliability_score: 91.8
|
|
||||||
}
|
|
||||||
],
|
|
||||||
stock_levels: [],
|
|
||||||
expiry_alerts: []
|
|
||||||
},
|
|
||||||
financial: {
|
|
||||||
gross_profit: 26500.25,
|
|
||||||
net_profit: 18750.30,
|
|
||||||
profit_margin: 41.4,
|
|
||||||
cost_of_goods_sold: 18750.50,
|
|
||||||
operating_expenses: 7750.95,
|
|
||||||
break_even_point: 28500.00,
|
|
||||||
cash_flow: 15250.80,
|
|
||||||
roi: 23.8,
|
|
||||||
expense_breakdown: [
|
|
||||||
{
|
|
||||||
category: 'Ingredientes',
|
|
||||||
amount: 12500.25,
|
|
||||||
percentage: 66.7,
|
|
||||||
change_from_previous: 5.2,
|
|
||||||
budget_variance: -2.1
|
|
||||||
},
|
|
||||||
{
|
|
||||||
category: 'Personal',
|
|
||||||
amount: 4250.25,
|
|
||||||
percentage: 22.7,
|
|
||||||
change_from_previous: 8.5,
|
|
||||||
budget_variance: 3.2
|
|
||||||
},
|
|
||||||
{
|
|
||||||
category: 'Suministros',
|
|
||||||
amount: 2000.00,
|
|
||||||
percentage: 10.6,
|
|
||||||
change_from_previous: -1.5,
|
|
||||||
budget_variance: -0.8
|
|
||||||
}
|
|
||||||
],
|
|
||||||
profit_trends: []
|
|
||||||
},
|
|
||||||
customer: {
|
|
||||||
total_customers: 1524,
|
|
||||||
new_customers: 234,
|
|
||||||
returning_customers: 1290,
|
|
||||||
customer_retention_rate: 84.6,
|
|
||||||
customer_lifetime_value: 285.40,
|
|
||||||
average_purchase_frequency: 2.8,
|
|
||||||
customer_satisfaction: 4.6,
|
|
||||||
customer_segments: [
|
|
||||||
{
|
|
||||||
segment_id: 'seg-1',
|
|
||||||
segment_name: 'Clientes Frecuentes',
|
|
||||||
customer_count: 456,
|
|
||||||
revenue_contribution: 68.2,
|
|
||||||
average_order_value: 42.50,
|
|
||||||
purchase_frequency: 5.2,
|
|
||||||
retention_rate: 92.3,
|
|
||||||
growth_rate: 12.8
|
|
||||||
}
|
|
||||||
],
|
|
||||||
loyalty_program_performance: []
|
|
||||||
},
|
|
||||||
operational: {
|
|
||||||
staff_productivity: 87.5,
|
|
||||||
equipment_uptime: 94.2,
|
|
||||||
energy_consumption: 2450.75,
|
|
||||||
delivery_performance: 91.8,
|
|
||||||
food_safety_score: 98.5,
|
|
||||||
compliance_rate: 96.2,
|
|
||||||
maintenance_costs: 1250.30,
|
|
||||||
operational_efficiency: 89.4
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
setBakeryMetrics(mockMetrics);
|
|
||||||
if (onMetricsLoad) {
|
|
||||||
onMetricsLoad(mockMetrics);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Mock reports
|
|
||||||
const mockReports: AnalyticsReport[] = [
|
|
||||||
{
|
|
||||||
id: 'rep-1',
|
|
||||||
name: 'Reporte de Ventas Mensual',
|
|
||||||
description: 'Análisis completo de ventas del mes',
|
|
||||||
type: 'sales',
|
|
||||||
category: 'Ventas',
|
|
||||||
status: 'active',
|
|
||||||
created_at: new Date().toISOString(),
|
|
||||||
updated_at: new Date().toISOString(),
|
|
||||||
tenant_id: 'tenant-1',
|
|
||||||
config: {
|
|
||||||
data_source: 'sales_db',
|
|
||||||
refresh_interval: 60,
|
|
||||||
cache_duration: 30,
|
|
||||||
max_records: 10000,
|
|
||||||
default_time_range: 'thisMonth',
|
|
||||||
default_filters: {},
|
|
||||||
visualization_type: 'bar',
|
|
||||||
aggregation_rules: []
|
|
||||||
},
|
|
||||||
metrics: [],
|
|
||||||
filters: [],
|
|
||||||
access_permissions: [],
|
|
||||||
tags: ['ventas', 'mensual']
|
|
||||||
}
|
|
||||||
];
|
|
||||||
|
|
||||||
setReports(mockReports);
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Error loading analytics data:', error);
|
|
||||||
} finally {
|
|
||||||
setLoading(false);
|
|
||||||
}
|
|
||||||
}, [selectedTimeRange, customDateRange, appliedFilters, onMetricsLoad]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
loadAnalyticsData();
|
|
||||||
}, [loadAnalyticsData]);
|
|
||||||
|
|
||||||
const handleTimeRangeChange = (newRange: TimeRange) => {
|
|
||||||
setSelectedTimeRange(newRange);
|
|
||||||
if (newRange !== 'custom') {
|
|
||||||
setCustomDateRange(null);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleFiltersChange = (filters: AppliedFilter[]) => {
|
|
||||||
setAppliedFilters(filters);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleExport = (format: ExportFormat, options: any) => {
|
|
||||||
if (onExport) {
|
|
||||||
onExport(format, { ...options, view: activeView, metrics: bakeryMetrics });
|
|
||||||
}
|
|
||||||
setIsExportModalOpen(false);
|
|
||||||
};
|
|
||||||
|
|
||||||
const renderKPICard = (title: string, value: string | number, subtitle?: string, trend?: number, icon?: string, colorClass: string = 'text-blue-600') => (
|
|
||||||
<Card className="p-4">
|
|
||||||
<div className="flex items-center justify-between">
|
|
||||||
<div>
|
|
||||||
<p className="text-sm text-gray-600">{title}</p>
|
|
||||||
<p className={`text-2xl font-bold ${colorClass}`}>{value}</p>
|
|
||||||
{subtitle && <p className="text-sm text-gray-500">{subtitle}</p>}
|
|
||||||
{trend !== undefined && (
|
|
||||||
<div className="flex items-center mt-1">
|
|
||||||
<span className={`text-xs ${trend >= 0 ? 'text-green-600' : 'text-red-600'}`}>
|
|
||||||
{trend >= 0 ? '↗' : '↘'} {Math.abs(trend).toFixed(1)}%
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
{icon && <span className="text-2xl">{icon}</span>}
|
|
||||||
</div>
|
|
||||||
</Card>
|
|
||||||
);
|
|
||||||
|
|
||||||
const renderOverviewDashboard = () => {
|
|
||||||
if (!bakeryMetrics) return null;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="space-y-6">
|
|
||||||
{/* KPI Cards */}
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
|
||||||
{renderKPICard(
|
|
||||||
'Ingresos Totales',
|
|
||||||
`€${bakeryMetrics.sales.total_revenue.toLocaleString()}`,
|
|
||||||
undefined,
|
|
||||||
bakeryMetrics.sales.revenue_growth,
|
|
||||||
'💰',
|
|
||||||
'text-green-600'
|
|
||||||
)}
|
|
||||||
{renderKPICard(
|
|
||||||
'Pedidos',
|
|
||||||
bakeryMetrics.sales.total_orders.toLocaleString(),
|
|
||||||
`Ticket medio: €${bakeryMetrics.sales.average_order_value.toFixed(2)}`,
|
|
||||||
bakeryMetrics.sales.order_growth,
|
|
||||||
'📦',
|
|
||||||
'text-blue-600'
|
|
||||||
)}
|
|
||||||
{renderKPICard(
|
|
||||||
'Margen de Beneficio',
|
|
||||||
`${bakeryMetrics.financial.profit_margin.toFixed(1)}%`,
|
|
||||||
`Beneficio: €${bakeryMetrics.financial.net_profit.toLocaleString()}`,
|
|
||||||
undefined,
|
|
||||||
'📈',
|
|
||||||
'text-purple-600'
|
|
||||||
)}
|
|
||||||
{renderKPICard(
|
|
||||||
'Tasa de Éxito Producción',
|
|
||||||
`${bakeryMetrics.production.success_rate.toFixed(1)}%`,
|
|
||||||
`${bakeryMetrics.production.total_batches} lotes`,
|
|
||||||
undefined,
|
|
||||||
'🏭',
|
|
||||||
'text-orange-600'
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Charts Grid */}
|
|
||||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
|
||||||
<Card className="p-6">
|
|
||||||
<h3 className="text-lg font-semibold mb-4">Ventas por Canal</h3>
|
|
||||||
<div className="space-y-3">
|
|
||||||
{bakeryMetrics.sales.sales_by_channel.map((channel, index) => (
|
|
||||||
<div key={index} className="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
|
|
||||||
<div>
|
|
||||||
<p className="font-medium">{channel.channel}</p>
|
|
||||||
<p className="text-sm text-gray-600">
|
|
||||||
{channel.orders} pedidos • {channel.customers} clientes
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div className="text-right">
|
|
||||||
<p className="font-semibold text-green-600">
|
|
||||||
€{channel.revenue.toLocaleString()}
|
|
||||||
</p>
|
|
||||||
<p className="text-sm text-gray-600">
|
|
||||||
Conv. {channel.conversion_rate.toFixed(1)}%
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
<Card className="p-6">
|
|
||||||
<h3 className="text-lg font-semibold mb-4">Productos Top</h3>
|
|
||||||
<div className="space-y-3">
|
|
||||||
{bakeryMetrics.sales.top_products.map((product, index) => (
|
|
||||||
<div key={product.product_id} className="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
|
|
||||||
<div>
|
|
||||||
<p className="font-medium">{product.product_name}</p>
|
|
||||||
<p className="text-sm text-gray-600">
|
|
||||||
{product.category} • {product.quantity_sold} vendidos
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div className="text-right">
|
|
||||||
<p className="font-semibold text-green-600">
|
|
||||||
€{product.revenue.toLocaleString()}
|
|
||||||
</p>
|
|
||||||
<p className="text-sm text-gray-600">
|
|
||||||
Margen {product.profit_margin.toFixed(1)}%
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</Card>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Operational Metrics */}
|
|
||||||
<Card className="p-6">
|
|
||||||
<h3 className="text-lg font-semibold mb-4">Métricas Operacionales</h3>
|
|
||||||
<div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-8 gap-4">
|
|
||||||
<div className="text-center">
|
|
||||||
<p className="text-2xl font-bold text-blue-600">
|
|
||||||
{bakeryMetrics.operational.staff_productivity.toFixed(1)}%
|
|
||||||
</p>
|
|
||||||
<p className="text-sm text-gray-600">Productividad Personal</p>
|
|
||||||
</div>
|
|
||||||
<div className="text-center">
|
|
||||||
<p className="text-2xl font-bold text-green-600">
|
|
||||||
{bakeryMetrics.operational.equipment_uptime.toFixed(1)}%
|
|
||||||
</p>
|
|
||||||
<p className="text-sm text-gray-600">Tiempo Activo Equipos</p>
|
|
||||||
</div>
|
|
||||||
<div className="text-center">
|
|
||||||
<p className="text-2xl font-bold text-orange-600">
|
|
||||||
{bakeryMetrics.production.waste_percentage.toFixed(1)}%
|
|
||||||
</p>
|
|
||||||
<p className="text-sm text-gray-600">Desperdicio</p>
|
|
||||||
</div>
|
|
||||||
<div className="text-center">
|
|
||||||
<p className="text-2xl font-bold text-purple-600">
|
|
||||||
{bakeryMetrics.operational.food_safety_score.toFixed(1)}%
|
|
||||||
</p>
|
|
||||||
<p className="text-sm text-gray-600">Seguridad Alimentaria</p>
|
|
||||||
</div>
|
|
||||||
<div className="text-center">
|
|
||||||
<p className="text-2xl font-bold text-red-600">
|
|
||||||
{bakeryMetrics.inventory.stockout_rate.toFixed(1)}%
|
|
||||||
</p>
|
|
||||||
<p className="text-sm text-gray-600">Roturas Stock</p>
|
|
||||||
</div>
|
|
||||||
<div className="text-center">
|
|
||||||
<p className="text-2xl font-bold text-indigo-600">
|
|
||||||
{bakeryMetrics.customer.customer_retention_rate.toFixed(1)}%
|
|
||||||
</p>
|
|
||||||
<p className="text-sm text-gray-600">Retención Clientes</p>
|
|
||||||
</div>
|
|
||||||
<div className="text-center">
|
|
||||||
<p className="text-2xl font-bold text-pink-600">
|
|
||||||
€{bakeryMetrics.customer.customer_lifetime_value.toFixed(0)}
|
|
||||||
</p>
|
|
||||||
<p className="text-sm text-gray-600">Valor Cliente</p>
|
|
||||||
</div>
|
|
||||||
<div className="text-center">
|
|
||||||
<p className="text-2xl font-bold text-teal-600">
|
|
||||||
{bakeryMetrics.inventory.turnover_rate.toFixed(1)}
|
|
||||||
</p>
|
|
||||||
<p className="text-sm text-gray-600">Rotación Inventario</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Card>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
const renderViewContent = () => {
|
|
||||||
switch (activeView) {
|
|
||||||
case 'overview':
|
|
||||||
return renderOverviewDashboard();
|
|
||||||
case 'reports':
|
|
||||||
return (
|
|
||||||
<Card className="p-6">
|
|
||||||
<ReportsTable
|
|
||||||
reports={reports}
|
|
||||||
loading={loading}
|
|
||||||
onReportClick={(report) => console.log('View report:', report)}
|
|
||||||
onEditReport={(report) => console.log('Edit report:', report)}
|
|
||||||
onDeleteReport={(id) => console.log('Delete report:', id)}
|
|
||||||
onExportReport={(report, format) => console.log('Export report:', report, format)}
|
|
||||||
bulkActions={true}
|
|
||||||
sortable={true}
|
|
||||||
pagination={{
|
|
||||||
current: 1,
|
|
||||||
pageSize: 10,
|
|
||||||
total: reports.length,
|
|
||||||
onChange: (page, pageSize) => console.log('Page change:', page, pageSize)
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</Card>
|
|
||||||
);
|
|
||||||
default:
|
|
||||||
return (
|
|
||||||
<Card className="p-8 text-center">
|
|
||||||
<p className="text-gray-500">Vista en desarrollo: {activeView}</p>
|
|
||||||
<p className="text-sm text-gray-400 mt-2">
|
|
||||||
Esta vista estará disponible próximamente con métricas detalladas.
|
|
||||||
</p>
|
|
||||||
</Card>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className={`space-y-6 ${className}`}>
|
|
||||||
{/* Header */}
|
|
||||||
<div className="flex flex-col lg:flex-row justify-between items-start lg:items-center gap-4">
|
|
||||||
<div>
|
|
||||||
<h1 className="text-3xl font-bold text-gray-900">Analytics Dashboard</h1>
|
|
||||||
<p className="text-gray-600">Análisis integral de rendimiento de la panadería</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex flex-wrap gap-2">
|
|
||||||
<Select
|
|
||||||
value={selectedTimeRange}
|
|
||||||
onChange={(e) => handleTimeRangeChange(e.target.value as TimeRange)}
|
|
||||||
className="w-48"
|
|
||||||
>
|
|
||||||
{DEFAULT_TIME_RANGES.map((range) => (
|
|
||||||
<option key={range.value} value={range.value}>
|
|
||||||
{range.label}
|
|
||||||
</option>
|
|
||||||
))}
|
|
||||||
</Select>
|
|
||||||
|
|
||||||
{selectedTimeRange === 'custom' && (
|
|
||||||
<div className="flex gap-2">
|
|
||||||
<DatePicker
|
|
||||||
value={customDateRange?.from}
|
|
||||||
onChange={(date) => setCustomDateRange(prev => ({
|
|
||||||
...prev,
|
|
||||||
from: date || new Date()
|
|
||||||
} as { from: Date; to: Date }))}
|
|
||||||
placeholder="Fecha inicio"
|
|
||||||
/>
|
|
||||||
<DatePicker
|
|
||||||
value={customDateRange?.to}
|
|
||||||
onChange={(date) => setCustomDateRange(prev => ({
|
|
||||||
...prev,
|
|
||||||
to: date || new Date()
|
|
||||||
} as { from: Date; to: Date }))}
|
|
||||||
placeholder="Fecha fin"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{showExport && (
|
|
||||||
<Button
|
|
||||||
variant="outline"
|
|
||||||
onClick={() => setIsExportModalOpen(true)}
|
|
||||||
disabled={loading}
|
|
||||||
>
|
|
||||||
📊 Exportar
|
|
||||||
</Button>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<Button
|
|
||||||
variant="outline"
|
|
||||||
onClick={loadAnalyticsData}
|
|
||||||
disabled={loading}
|
|
||||||
>
|
|
||||||
{loading ? '🔄 Cargando...' : '🔄 Actualizar'}
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Navigation Tabs */}
|
|
||||||
<div className="border-b border-gray-200">
|
|
||||||
<nav className="flex space-x-8">
|
|
||||||
{[
|
|
||||||
{ key: 'overview', label: 'Resumen', icon: '📊' },
|
|
||||||
{ key: 'sales', label: 'Ventas', icon: '💰' },
|
|
||||||
{ key: 'production', label: 'Producción', icon: '🏭' },
|
|
||||||
{ key: 'inventory', label: 'Inventario', icon: '📦' },
|
|
||||||
{ key: 'financial', label: 'Financiero', icon: '💳' },
|
|
||||||
{ key: 'reports', label: 'Reportes', icon: '📋' },
|
|
||||||
].map((tab) => (
|
|
||||||
<button
|
|
||||||
key={tab.key}
|
|
||||||
onClick={() => setActiveView(tab.key as any)}
|
|
||||||
className={`py-2 px-1 border-b-2 font-medium text-sm whitespace-nowrap ${
|
|
||||||
activeView === tab.key
|
|
||||||
? 'border-blue-500 text-blue-600'
|
|
||||||
: 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
<span className="mr-1">{tab.icon}</span>
|
|
||||||
{tab.label}
|
|
||||||
</button>
|
|
||||||
))}
|
|
||||||
</nav>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Content */}
|
|
||||||
{loading ? (
|
|
||||||
<div className="flex justify-center items-center h-64">
|
|
||||||
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
renderViewContent()
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Export Modal */}
|
|
||||||
{isExportModalOpen && (
|
|
||||||
<ExportOptions
|
|
||||||
type="report"
|
|
||||||
title={`Analytics Dashboard - ${activeView}`}
|
|
||||||
description="Exportar datos del dashboard de analytics"
|
|
||||||
onExport={handleExport}
|
|
||||||
loading={false}
|
|
||||||
showScheduling={true}
|
|
||||||
showTemplates={true}
|
|
||||||
className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4"
|
|
||||||
onClose={() => setIsExportModalOpen(false)}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default AnalyticsDashboard;
|
|
||||||
@@ -1,660 +0,0 @@
|
|||||||
import React, { useState, useRef, useEffect, useMemo } from 'react';
|
|
||||||
import { Card, Button, Badge, Select, Modal } from '../../ui';
|
|
||||||
import type {
|
|
||||||
ChartWidget as ChartWidgetType,
|
|
||||||
ChartSeries,
|
|
||||||
ChartConfig,
|
|
||||||
ChartFilter,
|
|
||||||
ExportFormat,
|
|
||||||
ChartType
|
|
||||||
} from './types';
|
|
||||||
|
|
||||||
interface ChartWidgetProps {
|
|
||||||
widget: ChartWidgetType;
|
|
||||||
data?: ChartSeries[];
|
|
||||||
loading?: boolean;
|
|
||||||
error?: string;
|
|
||||||
onConfigChange?: (config: Partial<ChartConfig>) => void;
|
|
||||||
onFiltersChange?: (filters: ChartFilter[]) => void;
|
|
||||||
onRefresh?: () => void;
|
|
||||||
onExport?: (format: ExportFormat) => void;
|
|
||||||
onFullscreen?: () => void;
|
|
||||||
interactive?: boolean;
|
|
||||||
showControls?: boolean;
|
|
||||||
showTitle?: boolean;
|
|
||||||
showSubtitle?: boolean;
|
|
||||||
className?: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface ChartPoint {
|
|
||||||
x: number;
|
|
||||||
y: number;
|
|
||||||
label: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
const CHART_TYPE_LABELS: Record<ChartType, string> = {
|
|
||||||
line: 'Líneas',
|
|
||||||
bar: 'Barras',
|
|
||||||
pie: 'Circular',
|
|
||||||
area: 'Área',
|
|
||||||
scatter: 'Dispersión',
|
|
||||||
doughnut: 'Dona',
|
|
||||||
radar: 'Radar',
|
|
||||||
mixed: 'Mixto',
|
|
||||||
};
|
|
||||||
|
|
||||||
const EXPORT_FORMATS: ExportFormat[] = ['png', 'svg', 'pdf', 'csv', 'excel'];
|
|
||||||
|
|
||||||
export const ChartWidget: React.FC<ChartWidgetProps> = ({
|
|
||||||
widget,
|
|
||||||
data = [],
|
|
||||||
loading = false,
|
|
||||||
error,
|
|
||||||
onConfigChange,
|
|
||||||
onFiltersChange,
|
|
||||||
onRefresh,
|
|
||||||
onExport,
|
|
||||||
onFullscreen,
|
|
||||||
interactive = true,
|
|
||||||
showControls = true,
|
|
||||||
showTitle = true,
|
|
||||||
showSubtitle = true,
|
|
||||||
className = '',
|
|
||||||
}) => {
|
|
||||||
const canvasRef = useRef<HTMLCanvasElement>(null);
|
|
||||||
const [isConfigModalOpen, setIsConfigModalOpen] = useState(false);
|
|
||||||
const [isFullscreen, setIsFullscreen] = useState(false);
|
|
||||||
const [hoveredPoint, setHoveredPoint] = useState<{ seriesIndex: number; pointIndex: number } | null>(null);
|
|
||||||
const [selectedExportFormat, setSelectedExportFormat] = useState<ExportFormat>('png');
|
|
||||||
|
|
||||||
const chartDimensions = useMemo(() => ({
|
|
||||||
width: widget.dimensions?.width || '100%',
|
|
||||||
height: widget.dimensions?.height || 400,
|
|
||||||
aspectRatio: widget.dimensions?.aspect_ratio || '16:9',
|
|
||||||
}), [widget.dimensions]);
|
|
||||||
|
|
||||||
// Simple chart rendering logic
|
|
||||||
useEffect(() => {
|
|
||||||
if (!canvasRef.current || !data.length || loading) return;
|
|
||||||
|
|
||||||
const canvas = canvasRef.current;
|
|
||||||
const ctx = canvas.getContext('2d');
|
|
||||||
if (!ctx) return;
|
|
||||||
|
|
||||||
// Set canvas size
|
|
||||||
const rect = canvas.getBoundingClientRect();
|
|
||||||
canvas.width = rect.width;
|
|
||||||
canvas.height = rect.height;
|
|
||||||
|
|
||||||
// Clear canvas
|
|
||||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
||||||
|
|
||||||
// Draw based on chart type
|
|
||||||
switch (widget.type) {
|
|
||||||
case 'bar':
|
|
||||||
drawBarChart(ctx, canvas, data);
|
|
||||||
break;
|
|
||||||
case 'line':
|
|
||||||
drawLineChart(ctx, canvas, data);
|
|
||||||
break;
|
|
||||||
case 'pie':
|
|
||||||
drawPieChart(ctx, canvas, data);
|
|
||||||
break;
|
|
||||||
case 'area':
|
|
||||||
drawAreaChart(ctx, canvas, data);
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
drawBarChart(ctx, canvas, data);
|
|
||||||
}
|
|
||||||
}, [data, widget.type, loading]);
|
|
||||||
|
|
||||||
const drawBarChart = (ctx: CanvasRenderingContext2D, canvas: HTMLCanvasElement, chartData: ChartSeries[]) => {
|
|
||||||
if (!chartData.length) return;
|
|
||||||
|
|
||||||
const padding = 60;
|
|
||||||
const chartWidth = canvas.width - 2 * padding;
|
|
||||||
const chartHeight = canvas.height - 2 * padding;
|
|
||||||
|
|
||||||
// Get all data points
|
|
||||||
const allPoints = chartData.flatMap(series => series.data);
|
|
||||||
const maxY = Math.max(...allPoints.map(point => point.y));
|
|
||||||
const minY = Math.min(...allPoints.map(point => point.y));
|
|
||||||
|
|
||||||
const firstSeries = chartData[0];
|
|
||||||
const barWidth = chartWidth / firstSeries.data.length / chartData.length;
|
|
||||||
const barSpacing = barWidth * 0.1;
|
|
||||||
|
|
||||||
// Draw grid
|
|
||||||
ctx.strokeStyle = '#e5e7eb';
|
|
||||||
ctx.lineWidth = 1;
|
|
||||||
for (let i = 0; i <= 5; i++) {
|
|
||||||
const y = padding + (chartHeight * i) / 5;
|
|
||||||
ctx.beginPath();
|
|
||||||
ctx.moveTo(padding, y);
|
|
||||||
ctx.lineTo(padding + chartWidth, y);
|
|
||||||
ctx.stroke();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Draw bars
|
|
||||||
chartData.forEach((series, seriesIndex) => {
|
|
||||||
const color = series.color || widget.config.color_scheme[seriesIndex % widget.config.color_scheme.length];
|
|
||||||
ctx.fillStyle = color;
|
|
||||||
|
|
||||||
series.data.forEach((point, pointIndex) => {
|
|
||||||
const x = padding + (pointIndex * chartWidth) / firstSeries.data.length + (seriesIndex * barWidth);
|
|
||||||
const barHeight = ((point.y - minY) / (maxY - minY)) * chartHeight;
|
|
||||||
const y = padding + chartHeight - barHeight;
|
|
||||||
|
|
||||||
ctx.fillRect(x + barSpacing, y, barWidth - barSpacing, barHeight);
|
|
||||||
|
|
||||||
// Add value labels if enabled
|
|
||||||
if (widget.config.show_tooltips) {
|
|
||||||
ctx.fillStyle = '#374151';
|
|
||||||
ctx.font = '12px sans-serif';
|
|
||||||
ctx.textAlign = 'center';
|
|
||||||
ctx.fillText(point.y.toString(), x + barWidth / 2, y - 5);
|
|
||||||
ctx.fillStyle = color;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
// Draw axes
|
|
||||||
ctx.strokeStyle = '#374151';
|
|
||||||
ctx.lineWidth = 2;
|
|
||||||
ctx.beginPath();
|
|
||||||
ctx.moveTo(padding, padding);
|
|
||||||
ctx.lineTo(padding, padding + chartHeight);
|
|
||||||
ctx.lineTo(padding + chartWidth, padding + chartHeight);
|
|
||||||
ctx.stroke();
|
|
||||||
|
|
||||||
// Draw labels
|
|
||||||
ctx.fillStyle = '#6b7280';
|
|
||||||
ctx.font = '12px sans-serif';
|
|
||||||
ctx.textAlign = 'center';
|
|
||||||
|
|
||||||
// X-axis labels
|
|
||||||
firstSeries.data.forEach((point, index) => {
|
|
||||||
const x = padding + (index + 0.5) * (chartWidth / firstSeries.data.length);
|
|
||||||
ctx.fillText(point.x.toString(), x, padding + chartHeight + 20);
|
|
||||||
});
|
|
||||||
|
|
||||||
// Y-axis labels
|
|
||||||
ctx.textAlign = 'right';
|
|
||||||
for (let i = 0; i <= 5; i++) {
|
|
||||||
const y = padding + (chartHeight * i) / 5;
|
|
||||||
const value = maxY - ((maxY - minY) * i) / 5;
|
|
||||||
ctx.fillText(value.toFixed(0), padding - 10, y + 4);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const drawLineChart = (ctx: CanvasRenderingContext2D, canvas: HTMLCanvasElement, chartData: ChartSeries[]) => {
|
|
||||||
if (!chartData.length) return;
|
|
||||||
|
|
||||||
const padding = 60;
|
|
||||||
const chartWidth = canvas.width - 2 * padding;
|
|
||||||
const chartHeight = canvas.height - 2 * padding;
|
|
||||||
|
|
||||||
const allPoints = chartData.flatMap(series => series.data);
|
|
||||||
const maxY = Math.max(...allPoints.map(point => point.y));
|
|
||||||
const minY = Math.min(...allPoints.map(point => point.y));
|
|
||||||
|
|
||||||
// Draw grid
|
|
||||||
ctx.strokeStyle = '#e5e7eb';
|
|
||||||
ctx.lineWidth = 1;
|
|
||||||
for (let i = 0; i <= 5; i++) {
|
|
||||||
const y = padding + (chartHeight * i) / 5;
|
|
||||||
ctx.beginPath();
|
|
||||||
ctx.moveTo(padding, y);
|
|
||||||
ctx.lineTo(padding + chartWidth, y);
|
|
||||||
ctx.stroke();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Draw lines
|
|
||||||
chartData.forEach((series, seriesIndex) => {
|
|
||||||
if (!series.visible) return;
|
|
||||||
|
|
||||||
const color = series.color || widget.config.color_scheme[seriesIndex % widget.config.color_scheme.length];
|
|
||||||
ctx.strokeStyle = color;
|
|
||||||
ctx.lineWidth = 2;
|
|
||||||
ctx.beginPath();
|
|
||||||
|
|
||||||
series.data.forEach((point, pointIndex) => {
|
|
||||||
const x = padding + (pointIndex * chartWidth) / (series.data.length - 1);
|
|
||||||
const y = padding + chartHeight - ((point.y - minY) / (maxY - minY)) * chartHeight;
|
|
||||||
|
|
||||||
if (pointIndex === 0) {
|
|
||||||
ctx.moveTo(x, y);
|
|
||||||
} else {
|
|
||||||
ctx.lineTo(x, y);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
ctx.stroke();
|
|
||||||
|
|
||||||
// Draw points
|
|
||||||
ctx.fillStyle = color;
|
|
||||||
series.data.forEach((point, pointIndex) => {
|
|
||||||
const x = padding + (pointIndex * chartWidth) / (series.data.length - 1);
|
|
||||||
const y = padding + chartHeight - ((point.y - minY) / (maxY - minY)) * chartHeight;
|
|
||||||
|
|
||||||
ctx.beginPath();
|
|
||||||
ctx.arc(x, y, 4, 0, 2 * Math.PI);
|
|
||||||
ctx.fill();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
// Draw axes
|
|
||||||
ctx.strokeStyle = '#374151';
|
|
||||||
ctx.lineWidth = 2;
|
|
||||||
ctx.beginPath();
|
|
||||||
ctx.moveTo(padding, padding);
|
|
||||||
ctx.lineTo(padding, padding + chartHeight);
|
|
||||||
ctx.lineTo(padding + chartWidth, padding + chartHeight);
|
|
||||||
ctx.stroke();
|
|
||||||
};
|
|
||||||
|
|
||||||
const drawPieChart = (ctx: CanvasRenderingContext2D, canvas: HTMLCanvasElement, chartData: ChartSeries[]) => {
|
|
||||||
if (!chartData.length) return;
|
|
||||||
|
|
||||||
const centerX = canvas.width / 2;
|
|
||||||
const centerY = canvas.height / 2;
|
|
||||||
const radius = Math.min(canvas.width, canvas.height) / 3;
|
|
||||||
|
|
||||||
const firstSeries = chartData[0];
|
|
||||||
const total = firstSeries.data.reduce((sum, point) => sum + point.y, 0);
|
|
||||||
|
|
||||||
let startAngle = -Math.PI / 2;
|
|
||||||
|
|
||||||
firstSeries.data.forEach((point, index) => {
|
|
||||||
const sliceAngle = (point.y / total) * 2 * Math.PI;
|
|
||||||
const color = widget.config.color_scheme[index % widget.config.color_scheme.length];
|
|
||||||
|
|
||||||
ctx.fillStyle = color;
|
|
||||||
ctx.beginPath();
|
|
||||||
ctx.moveTo(centerX, centerY);
|
|
||||||
ctx.arc(centerX, centerY, radius, startAngle, startAngle + sliceAngle);
|
|
||||||
ctx.closePath();
|
|
||||||
ctx.fill();
|
|
||||||
|
|
||||||
// Draw slice border
|
|
||||||
ctx.strokeStyle = '#ffffff';
|
|
||||||
ctx.lineWidth = 2;
|
|
||||||
ctx.stroke();
|
|
||||||
|
|
||||||
// Draw labels
|
|
||||||
const labelAngle = startAngle + sliceAngle / 2;
|
|
||||||
const labelX = centerX + Math.cos(labelAngle) * (radius + 30);
|
|
||||||
const labelY = centerY + Math.sin(labelAngle) * (radius + 30);
|
|
||||||
|
|
||||||
ctx.fillStyle = '#374151';
|
|
||||||
ctx.font = '12px sans-serif';
|
|
||||||
ctx.textAlign = 'center';
|
|
||||||
ctx.fillText(point.x.toString(), labelX, labelY);
|
|
||||||
|
|
||||||
const percentage = ((point.y / total) * 100).toFixed(1);
|
|
||||||
ctx.fillText(`${percentage}%`, labelX, labelY + 15);
|
|
||||||
|
|
||||||
startAngle += sliceAngle;
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const drawAreaChart = (ctx: CanvasRenderingContext2D, canvas: HTMLCanvasElement, chartData: ChartSeries[]) => {
|
|
||||||
if (!chartData.length) return;
|
|
||||||
|
|
||||||
const padding = 60;
|
|
||||||
const chartWidth = canvas.width - 2 * padding;
|
|
||||||
const chartHeight = canvas.height - 2 * padding;
|
|
||||||
|
|
||||||
const allPoints = chartData.flatMap(series => series.data);
|
|
||||||
const maxY = Math.max(...allPoints.map(point => point.y));
|
|
||||||
const minY = Math.min(...allPoints.map(point => point.y));
|
|
||||||
|
|
||||||
chartData.forEach((series, seriesIndex) => {
|
|
||||||
if (!series.visible) return;
|
|
||||||
|
|
||||||
const color = series.color || widget.config.color_scheme[seriesIndex % widget.config.color_scheme.length];
|
|
||||||
|
|
||||||
// Create gradient
|
|
||||||
const gradient = ctx.createLinearGradient(0, padding, 0, padding + chartHeight);
|
|
||||||
gradient.addColorStop(0, color + '80'); // Semi-transparent
|
|
||||||
gradient.addColorStop(1, color + '10'); // Very transparent
|
|
||||||
|
|
||||||
ctx.fillStyle = gradient;
|
|
||||||
ctx.beginPath();
|
|
||||||
|
|
||||||
// Start from bottom-left
|
|
||||||
const firstX = padding;
|
|
||||||
const firstY = padding + chartHeight;
|
|
||||||
ctx.moveTo(firstX, firstY);
|
|
||||||
|
|
||||||
// Draw the area path
|
|
||||||
series.data.forEach((point, pointIndex) => {
|
|
||||||
const x = padding + (pointIndex * chartWidth) / (series.data.length - 1);
|
|
||||||
const y = padding + chartHeight - ((point.y - minY) / (maxY - minY)) * chartHeight;
|
|
||||||
ctx.lineTo(x, y);
|
|
||||||
});
|
|
||||||
|
|
||||||
// Close the path at bottom-right
|
|
||||||
const lastX = padding + chartWidth;
|
|
||||||
const lastY = padding + chartHeight;
|
|
||||||
ctx.lineTo(lastX, lastY);
|
|
||||||
ctx.closePath();
|
|
||||||
ctx.fill();
|
|
||||||
|
|
||||||
// Draw the line on top
|
|
||||||
ctx.strokeStyle = color;
|
|
||||||
ctx.lineWidth = 2;
|
|
||||||
ctx.beginPath();
|
|
||||||
series.data.forEach((point, pointIndex) => {
|
|
||||||
const x = padding + (pointIndex * chartWidth) / (series.data.length - 1);
|
|
||||||
const y = padding + chartHeight - ((point.y - minY) / (maxY - minY)) * chartHeight;
|
|
||||||
|
|
||||||
if (pointIndex === 0) {
|
|
||||||
ctx.moveTo(x, y);
|
|
||||||
} else {
|
|
||||||
ctx.lineTo(x, y);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
ctx.stroke();
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleExport = () => {
|
|
||||||
if (onExport) {
|
|
||||||
onExport(selectedExportFormat);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleFullscreen = () => {
|
|
||||||
setIsFullscreen(!isFullscreen);
|
|
||||||
if (onFullscreen) {
|
|
||||||
onFullscreen();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const renderLegend = () => {
|
|
||||||
if (!widget.config.show_legend || !data.length) return null;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="flex flex-wrap gap-4 mt-4">
|
|
||||||
{data.map((series, index) => (
|
|
||||||
<div key={series.id} className="flex items-center gap-2">
|
|
||||||
<div
|
|
||||||
className="w-3 h-3 rounded-full"
|
|
||||||
style={{
|
|
||||||
backgroundColor: series.color || widget.config.color_scheme[index % widget.config.color_scheme.length]
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<span className="text-sm text-gray-600">{series.name}</span>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
const renderControls = () => {
|
|
||||||
if (!showControls || !interactive) return null;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="flex items-center gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
|
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
size="sm"
|
|
||||||
onClick={() => setIsConfigModalOpen(true)}
|
|
||||||
title="Configurar gráfico"
|
|
||||||
>
|
|
||||||
⚙️
|
|
||||||
</Button>
|
|
||||||
|
|
||||||
<Select
|
|
||||||
value={selectedExportFormat}
|
|
||||||
onChange={(e) => setSelectedExportFormat(e.target.value as ExportFormat)}
|
|
||||||
className="w-20 text-xs"
|
|
||||||
>
|
|
||||||
{EXPORT_FORMATS.map(format => (
|
|
||||||
<option key={format} value={format}>{format.toUpperCase()}</option>
|
|
||||||
))}
|
|
||||||
</Select>
|
|
||||||
|
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
size="sm"
|
|
||||||
onClick={handleExport}
|
|
||||||
title="Exportar gráfico"
|
|
||||||
>
|
|
||||||
📥
|
|
||||||
</Button>
|
|
||||||
|
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
size="sm"
|
|
||||||
onClick={handleFullscreen}
|
|
||||||
title="Pantalla completa"
|
|
||||||
>
|
|
||||||
{isFullscreen ? '📋' : '🔍'}
|
|
||||||
</Button>
|
|
||||||
|
|
||||||
{onRefresh && (
|
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
size="sm"
|
|
||||||
onClick={onRefresh}
|
|
||||||
disabled={loading}
|
|
||||||
title="Actualizar datos"
|
|
||||||
>
|
|
||||||
🔄
|
|
||||||
</Button>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
if (error) {
|
|
||||||
return (
|
|
||||||
<Card className={`p-6 ${className}`}>
|
|
||||||
<div className="text-center">
|
|
||||||
<p className="text-red-600 font-medium">Error al cargar el gráfico</p>
|
|
||||||
<p className="text-sm text-gray-500 mt-1">{error}</p>
|
|
||||||
{onRefresh && (
|
|
||||||
<Button variant="outline" size="sm" onClick={onRefresh} className="mt-3">
|
|
||||||
Reintentar
|
|
||||||
</Button>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</Card>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<Card className={`group relative ${className}`} style={{
|
|
||||||
width: chartDimensions.width,
|
|
||||||
height: isFullscreen ? '90vh' : chartDimensions.height
|
|
||||||
}}>
|
|
||||||
{/* Header */}
|
|
||||||
<div className="flex items-start justify-between p-4 pb-2">
|
|
||||||
<div className="flex-1">
|
|
||||||
{showTitle && (
|
|
||||||
<h3 className="text-lg font-semibold text-gray-900">
|
|
||||||
{widget.title}
|
|
||||||
</h3>
|
|
||||||
)}
|
|
||||||
{showSubtitle && widget.subtitle && (
|
|
||||||
<p className="text-sm text-gray-600 mt-1">
|
|
||||||
{widget.subtitle}
|
|
||||||
</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{renderControls()}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Chart Area */}
|
|
||||||
<div className="px-4 pb-4" style={{ height: `calc(100% - 80px)` }}>
|
|
||||||
{loading ? (
|
|
||||||
<div className="flex items-center justify-center h-full">
|
|
||||||
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
|
|
||||||
</div>
|
|
||||||
) : data.length === 0 ? (
|
|
||||||
<div className="flex items-center justify-center h-full">
|
|
||||||
<div className="text-center">
|
|
||||||
<p className="text-gray-500">No hay datos disponibles</p>
|
|
||||||
<p className="text-sm text-gray-400 mt-1">
|
|
||||||
Ajusta los filtros o verifica la conexión de datos
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<div className="h-full">
|
|
||||||
<canvas
|
|
||||||
ref={canvasRef}
|
|
||||||
className="w-full h-full"
|
|
||||||
style={{ maxHeight: '100%' }}
|
|
||||||
/>
|
|
||||||
{renderLegend()}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Last Updated */}
|
|
||||||
{widget.last_updated && (
|
|
||||||
<div className="absolute bottom-2 right-2 text-xs text-gray-400">
|
|
||||||
Actualizado: {new Date(widget.last_updated).toLocaleTimeString()}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
{/* Configuration Modal */}
|
|
||||||
<Modal
|
|
||||||
isOpen={isConfigModalOpen}
|
|
||||||
onClose={() => setIsConfigModalOpen(false)}
|
|
||||||
title="Configuración del Gráfico"
|
|
||||||
>
|
|
||||||
<div className="space-y-4">
|
|
||||||
<div>
|
|
||||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
|
||||||
Tipo de gráfico
|
|
||||||
</label>
|
|
||||||
<Select
|
|
||||||
value={widget.type}
|
|
||||||
onChange={(e) => {
|
|
||||||
if (onConfigChange) {
|
|
||||||
onConfigChange({ visualization_type: e.target.value as ChartType });
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{Object.entries(CHART_TYPE_LABELS).map(([value, label]) => (
|
|
||||||
<option key={value} value={value}>{label}</option>
|
|
||||||
))}
|
|
||||||
</Select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="grid grid-cols-2 gap-4">
|
|
||||||
<div>
|
|
||||||
<label className="flex items-center">
|
|
||||||
<input
|
|
||||||
type="checkbox"
|
|
||||||
checked={widget.config.show_legend}
|
|
||||||
onChange={(e) => {
|
|
||||||
if (onConfigChange) {
|
|
||||||
onConfigChange({ show_legend: e.target.checked });
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
className="mr-2"
|
|
||||||
/>
|
|
||||||
Mostrar leyenda
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label className="flex items-center">
|
|
||||||
<input
|
|
||||||
type="checkbox"
|
|
||||||
checked={widget.config.show_grid}
|
|
||||||
onChange={(e) => {
|
|
||||||
if (onConfigChange) {
|
|
||||||
onConfigChange({ show_grid: e.target.checked });
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
className="mr-2"
|
|
||||||
/>
|
|
||||||
Mostrar cuadrícula
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label className="flex items-center">
|
|
||||||
<input
|
|
||||||
type="checkbox"
|
|
||||||
checked={widget.config.show_tooltips}
|
|
||||||
onChange={(e) => {
|
|
||||||
if (onConfigChange) {
|
|
||||||
onConfigChange({ show_tooltips: e.target.checked });
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
className="mr-2"
|
|
||||||
/>
|
|
||||||
Mostrar tooltips
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label className="flex items-center">
|
|
||||||
<input
|
|
||||||
type="checkbox"
|
|
||||||
checked={widget.config.animation_enabled}
|
|
||||||
onChange={(e) => {
|
|
||||||
if (onConfigChange) {
|
|
||||||
onConfigChange({ animation_enabled: e.target.checked });
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
className="mr-2"
|
|
||||||
/>
|
|
||||||
Animaciones
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
|
||||||
Posición de la leyenda
|
|
||||||
</label>
|
|
||||||
<Select
|
|
||||||
value={widget.config.legend_position}
|
|
||||||
onChange={(e) => {
|
|
||||||
if (onConfigChange) {
|
|
||||||
onConfigChange({ legend_position: e.target.value as any });
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<option value="top">Arriba</option>
|
|
||||||
<option value="bottom">Abajo</option>
|
|
||||||
<option value="left">Izquierda</option>
|
|
||||||
<option value="right">Derecha</option>
|
|
||||||
</Select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex justify-end gap-2 pt-4 border-t">
|
|
||||||
<Button
|
|
||||||
variant="outline"
|
|
||||||
onClick={() => setIsConfigModalOpen(false)}
|
|
||||||
>
|
|
||||||
Cancelar
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
variant="primary"
|
|
||||||
onClick={() => {
|
|
||||||
setIsConfigModalOpen(false);
|
|
||||||
if (onRefresh) onRefresh();
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Aplicar cambios
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Modal>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default ChartWidget;
|
|
||||||
@@ -1,592 +0,0 @@
|
|||||||
import React, { useState } from 'react';
|
|
||||||
import { Card, Button, Badge, Input, Select } from '../../ui';
|
|
||||||
import type {
|
|
||||||
ExportOptionsProps,
|
|
||||||
ExportOptions,
|
|
||||||
ExportFormat,
|
|
||||||
ExportTemplate,
|
|
||||||
ReportSchedule
|
|
||||||
} from './types';
|
|
||||||
|
|
||||||
const FORMAT_LABELS: Record<ExportFormat, string> = {
|
|
||||||
pdf: 'PDF',
|
|
||||||
excel: 'Excel',
|
|
||||||
csv: 'CSV',
|
|
||||||
png: 'PNG',
|
|
||||||
svg: 'SVG',
|
|
||||||
json: 'JSON',
|
|
||||||
};
|
|
||||||
|
|
||||||
const FORMAT_DESCRIPTIONS: Record<ExportFormat, string> = {
|
|
||||||
pdf: 'Documento PDF con formato profesional',
|
|
||||||
excel: 'Hoja de cálculo de Microsoft Excel',
|
|
||||||
csv: 'Archivo de valores separados por comas',
|
|
||||||
png: 'Imagen PNG de alta calidad',
|
|
||||||
svg: 'Imagen vectorial escalable',
|
|
||||||
json: 'Datos estructurados en formato JSON',
|
|
||||||
};
|
|
||||||
|
|
||||||
const FORMAT_ICONS: Record<ExportFormat, string> = {
|
|
||||||
pdf: '📄',
|
|
||||||
excel: '📊',
|
|
||||||
csv: '📋',
|
|
||||||
png: '🖼️',
|
|
||||||
svg: '🎨',
|
|
||||||
json: '⚙️',
|
|
||||||
};
|
|
||||||
|
|
||||||
const FREQUENCY_OPTIONS = [
|
|
||||||
{ value: 'daily', label: 'Diario' },
|
|
||||||
{ value: 'weekly', label: 'Semanal' },
|
|
||||||
{ value: 'monthly', label: 'Mensual' },
|
|
||||||
{ value: 'quarterly', label: 'Trimestral' },
|
|
||||||
{ value: 'yearly', label: 'Anual' },
|
|
||||||
];
|
|
||||||
|
|
||||||
const TIME_OPTIONS = [
|
|
||||||
{ value: '06:00', label: '6:00 AM' },
|
|
||||||
{ value: '09:00', label: '9:00 AM' },
|
|
||||||
{ value: '12:00', label: '12:00 PM' },
|
|
||||||
{ value: '15:00', label: '3:00 PM' },
|
|
||||||
{ value: '18:00', label: '6:00 PM' },
|
|
||||||
{ value: '21:00', label: '9:00 PM' },
|
|
||||||
];
|
|
||||||
|
|
||||||
const DAYS_OF_WEEK = [
|
|
||||||
{ value: 1, label: 'Lunes' },
|
|
||||||
{ value: 2, label: 'Martes' },
|
|
||||||
{ value: 3, label: 'Miércoles' },
|
|
||||||
{ value: 4, label: 'Jueves' },
|
|
||||||
{ value: 5, label: 'Viernes' },
|
|
||||||
{ value: 6, label: 'Sábado' },
|
|
||||||
{ value: 0, label: 'Domingo' },
|
|
||||||
];
|
|
||||||
|
|
||||||
interface ExportOptionsComponentProps extends ExportOptionsProps {
|
|
||||||
onClose?: () => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
export const ExportOptions: React.FC<ExportOptionsComponentProps> = ({
|
|
||||||
type,
|
|
||||||
title,
|
|
||||||
description,
|
|
||||||
availableFormats = ['pdf', 'excel', 'csv', 'png'],
|
|
||||||
templates = [],
|
|
||||||
onExport,
|
|
||||||
onSchedule,
|
|
||||||
loading = false,
|
|
||||||
disabled = false,
|
|
||||||
showScheduling = true,
|
|
||||||
showTemplates = true,
|
|
||||||
showAdvanced = true,
|
|
||||||
defaultOptions,
|
|
||||||
className = '',
|
|
||||||
onClose,
|
|
||||||
}) => {
|
|
||||||
const [selectedFormat, setSelectedFormat] = useState<ExportFormat>(
|
|
||||||
defaultOptions?.format || availableFormats[0]
|
|
||||||
);
|
|
||||||
const [selectedTemplate, setSelectedTemplate] = useState<string>(
|
|
||||||
templates.find(t => t.is_default)?.id || ''
|
|
||||||
);
|
|
||||||
const [exportOptions, setExportOptions] = useState<Partial<ExportOptions>>({
|
|
||||||
include_headers: true,
|
|
||||||
include_filters: true,
|
|
||||||
include_summary: true,
|
|
||||||
date_format: 'DD/MM/YYYY',
|
|
||||||
number_format: '#,##0.00',
|
|
||||||
currency_format: '€#,##0.00',
|
|
||||||
locale: 'es-ES',
|
|
||||||
timezone: 'Europe/Madrid',
|
|
||||||
page_size: 'A4',
|
|
||||||
orientation: 'portrait',
|
|
||||||
password_protected: false,
|
|
||||||
...defaultOptions,
|
|
||||||
});
|
|
||||||
|
|
||||||
const [scheduleOptions, setScheduleOptions] = useState<Partial<ReportSchedule>>({
|
|
||||||
enabled: false,
|
|
||||||
frequency: 'weekly',
|
|
||||||
time: '09:00',
|
|
||||||
days_of_week: [1], // Monday
|
|
||||||
recipients: [],
|
|
||||||
format: selectedFormat,
|
|
||||||
include_attachments: true,
|
|
||||||
});
|
|
||||||
|
|
||||||
const [recipientsInput, setRecipientsInput] = useState('');
|
|
||||||
const [activeTab, setActiveTab] = useState<'export' | 'schedule'>('export');
|
|
||||||
const [showAdvancedOptions, setShowAdvancedOptions] = useState(false);
|
|
||||||
|
|
||||||
const handleExportOptionChange = (key: keyof ExportOptions, value: any) => {
|
|
||||||
setExportOptions(prev => ({ ...prev, [key]: value }));
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleScheduleOptionChange = (key: keyof ReportSchedule, value: any) => {
|
|
||||||
setScheduleOptions(prev => ({ ...prev, [key]: value }));
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleExport = () => {
|
|
||||||
if (onExport) {
|
|
||||||
const fullOptions: ExportOptions = {
|
|
||||||
format: selectedFormat,
|
|
||||||
template: selectedTemplate || undefined,
|
|
||||||
include_headers: true,
|
|
||||||
include_filters: true,
|
|
||||||
include_summary: true,
|
|
||||||
date_format: 'DD/MM/YYYY',
|
|
||||||
number_format: '#,##0.00',
|
|
||||||
currency_format: '€#,##0.00',
|
|
||||||
locale: 'es-ES',
|
|
||||||
timezone: 'Europe/Madrid',
|
|
||||||
page_size: 'A4',
|
|
||||||
orientation: 'portrait',
|
|
||||||
...exportOptions,
|
|
||||||
// format: selectedFormat, // Ensure format matches selection - handled by exportOptions
|
|
||||||
};
|
|
||||||
onExport(fullOptions);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleSchedule = () => {
|
|
||||||
if (onSchedule) {
|
|
||||||
const recipients = recipientsInput
|
|
||||||
.split(',')
|
|
||||||
.map(email => email.trim())
|
|
||||||
.filter(email => email.length > 0);
|
|
||||||
|
|
||||||
const fullSchedule: ReportSchedule = {
|
|
||||||
enabled: true,
|
|
||||||
frequency: 'weekly',
|
|
||||||
time: '09:00',
|
|
||||||
recipients: recipients,
|
|
||||||
format: selectedFormat,
|
|
||||||
include_attachments: true,
|
|
||||||
...scheduleOptions,
|
|
||||||
};
|
|
||||||
onSchedule(fullSchedule);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const renderFormatSelector = () => (
|
|
||||||
<div className="space-y-3">
|
|
||||||
<h4 className="font-medium text-gray-900">Formato de exportación</h4>
|
|
||||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
|
|
||||||
{availableFormats.map(format => (
|
|
||||||
<button
|
|
||||||
key={format}
|
|
||||||
onClick={() => setSelectedFormat(format)}
|
|
||||||
className={`p-3 border rounded-lg text-left transition-colors ${
|
|
||||||
selectedFormat === format
|
|
||||||
? 'border-blue-500 bg-blue-50'
|
|
||||||
: 'border-gray-200 hover:border-gray-300'
|
|
||||||
}`}
|
|
||||||
disabled={disabled || loading}
|
|
||||||
>
|
|
||||||
<div className="flex items-center gap-2 mb-1">
|
|
||||||
<span className="text-xl">{FORMAT_ICONS[format]}</span>
|
|
||||||
<span className="font-medium">{FORMAT_LABELS[format]}</span>
|
|
||||||
</div>
|
|
||||||
<p className="text-sm text-gray-600">{FORMAT_DESCRIPTIONS[format]}</p>
|
|
||||||
</button>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
|
|
||||||
const renderTemplateSelector = () => {
|
|
||||||
if (!showTemplates || templates.length === 0) return null;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="space-y-3">
|
|
||||||
<h4 className="font-medium text-gray-900">Plantilla</h4>
|
|
||||||
<Select
|
|
||||||
value={selectedTemplate}
|
|
||||||
onChange={(e) => setSelectedTemplate(e.target.value)}
|
|
||||||
disabled={disabled || loading}
|
|
||||||
>
|
|
||||||
<option value="">Plantilla predeterminada</option>
|
|
||||||
{templates.map(template => (
|
|
||||||
<option key={template.id} value={template.id}>
|
|
||||||
{template.name}
|
|
||||||
{template.is_default && ' (Predeterminada)'}
|
|
||||||
</option>
|
|
||||||
))}
|
|
||||||
</Select>
|
|
||||||
|
|
||||||
{selectedTemplate && (
|
|
||||||
<div className="text-sm text-gray-600">
|
|
||||||
{templates.find(t => t.id === selectedTemplate)?.description}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
const renderBasicOptions = () => (
|
|
||||||
<div className="space-y-4">
|
|
||||||
<h4 className="font-medium text-gray-900">Opciones básicas</h4>
|
|
||||||
|
|
||||||
<div className="space-y-3">
|
|
||||||
<label className="flex items-center">
|
|
||||||
<input
|
|
||||||
type="checkbox"
|
|
||||||
checked={exportOptions.include_headers || false}
|
|
||||||
onChange={(e) => handleExportOptionChange('include_headers', e.target.checked)}
|
|
||||||
className="mr-2 rounded"
|
|
||||||
disabled={disabled || loading}
|
|
||||||
/>
|
|
||||||
Incluir encabezados de columna
|
|
||||||
</label>
|
|
||||||
|
|
||||||
<label className="flex items-center">
|
|
||||||
<input
|
|
||||||
type="checkbox"
|
|
||||||
checked={exportOptions.include_filters || false}
|
|
||||||
onChange={(e) => handleExportOptionChange('include_filters', e.target.checked)}
|
|
||||||
className="mr-2 rounded"
|
|
||||||
disabled={disabled || loading}
|
|
||||||
/>
|
|
||||||
Incluir información de filtros aplicados
|
|
||||||
</label>
|
|
||||||
|
|
||||||
<label className="flex items-center">
|
|
||||||
<input
|
|
||||||
type="checkbox"
|
|
||||||
checked={exportOptions.include_summary || false}
|
|
||||||
onChange={(e) => handleExportOptionChange('include_summary', e.target.checked)}
|
|
||||||
className="mr-2 rounded"
|
|
||||||
disabled={disabled || loading}
|
|
||||||
/>
|
|
||||||
Incluir resumen y estadísticas
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
|
|
||||||
const renderAdvancedOptions = () => {
|
|
||||||
if (!showAdvanced || !showAdvancedOptions) return null;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="space-y-4 pt-4 border-t border-gray-200">
|
|
||||||
<h4 className="font-medium text-gray-900">Opciones avanzadas</h4>
|
|
||||||
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
||||||
<div>
|
|
||||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|
||||||
Formato de fecha
|
|
||||||
</label>
|
|
||||||
<Select
|
|
||||||
value={exportOptions.date_format || 'DD/MM/YYYY'}
|
|
||||||
onChange={(e) => handleExportOptionChange('date_format', e.target.value)}
|
|
||||||
disabled={disabled || loading}
|
|
||||||
>
|
|
||||||
<option value="DD/MM/YYYY">DD/MM/YYYY</option>
|
|
||||||
<option value="MM/DD/YYYY">MM/DD/YYYY</option>
|
|
||||||
<option value="YYYY-MM-DD">YYYY-MM-DD</option>
|
|
||||||
<option value="DD-MMM-YYYY">DD-MMM-YYYY</option>
|
|
||||||
</Select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|
||||||
Formato de números
|
|
||||||
</label>
|
|
||||||
<Select
|
|
||||||
value={exportOptions.number_format || '#,##0.00'}
|
|
||||||
onChange={(e) => handleExportOptionChange('number_format', e.target.value)}
|
|
||||||
disabled={disabled || loading}
|
|
||||||
>
|
|
||||||
<option value="#,##0.00">#,##0.00</option>
|
|
||||||
<option value="#.##0,00">#.##0,00</option>
|
|
||||||
<option value="#,##0">#,##0</option>
|
|
||||||
<option value="0.00">0.00</option>
|
|
||||||
</Select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{(['pdf'] as ExportFormat[]).includes(selectedFormat) && (
|
|
||||||
<>
|
|
||||||
<div>
|
|
||||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|
||||||
Tamaño de página
|
|
||||||
</label>
|
|
||||||
<Select
|
|
||||||
value={exportOptions.page_size || 'A4'}
|
|
||||||
onChange={(e) => handleExportOptionChange('page_size', e.target.value)}
|
|
||||||
disabled={disabled || loading}
|
|
||||||
>
|
|
||||||
<option value="A4">A4</option>
|
|
||||||
<option value="A3">A3</option>
|
|
||||||
<option value="Letter">Carta</option>
|
|
||||||
<option value="Legal">Legal</option>
|
|
||||||
</Select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|
||||||
Orientación
|
|
||||||
</label>
|
|
||||||
<Select
|
|
||||||
value={exportOptions.orientation || 'portrait'}
|
|
||||||
onChange={(e) => handleExportOptionChange('orientation', e.target.value)}
|
|
||||||
disabled={disabled || loading}
|
|
||||||
>
|
|
||||||
<option value="portrait">Vertical</option>
|
|
||||||
<option value="landscape">Horizontal</option>
|
|
||||||
</Select>
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label className="flex items-center">
|
|
||||||
<input
|
|
||||||
type="checkbox"
|
|
||||||
checked={exportOptions.password_protected || false}
|
|
||||||
onChange={(e) => handleExportOptionChange('password_protected', e.target.checked)}
|
|
||||||
className="mr-2 rounded"
|
|
||||||
disabled={disabled || loading}
|
|
||||||
/>
|
|
||||||
Proteger con contraseña
|
|
||||||
</label>
|
|
||||||
|
|
||||||
{exportOptions.password_protected && (
|
|
||||||
<div className="mt-2">
|
|
||||||
<Input
|
|
||||||
type="password"
|
|
||||||
placeholder="Contraseña"
|
|
||||||
value={exportOptions.password || ''}
|
|
||||||
onChange={(e) => handleExportOptionChange('password', e.target.value)}
|
|
||||||
disabled={disabled || loading}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
const renderScheduleTab = () => (
|
|
||||||
<div className="space-y-4">
|
|
||||||
<div>
|
|
||||||
<label className="flex items-center mb-4">
|
|
||||||
<input
|
|
||||||
type="checkbox"
|
|
||||||
checked={scheduleOptions.enabled || false}
|
|
||||||
onChange={(e) => handleScheduleOptionChange('enabled', e.target.checked)}
|
|
||||||
className="mr-2 rounded"
|
|
||||||
disabled={disabled || loading}
|
|
||||||
/>
|
|
||||||
<span className="font-medium text-gray-900">Habilitar programación automática</span>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{scheduleOptions.enabled && (
|
|
||||||
<div className="space-y-4 pl-6 border-l-2 border-blue-200">
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
||||||
<div>
|
|
||||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|
||||||
Frecuencia
|
|
||||||
</label>
|
|
||||||
<Select
|
|
||||||
value={scheduleOptions.frequency || 'weekly'}
|
|
||||||
onChange={(e) => handleScheduleOptionChange('frequency', e.target.value)}
|
|
||||||
disabled={disabled || loading}
|
|
||||||
>
|
|
||||||
{FREQUENCY_OPTIONS.map(option => (
|
|
||||||
<option key={option.value} value={option.value}>
|
|
||||||
{option.label}
|
|
||||||
</option>
|
|
||||||
))}
|
|
||||||
</Select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|
||||||
Hora de envío
|
|
||||||
</label>
|
|
||||||
<Select
|
|
||||||
value={scheduleOptions.time || '09:00'}
|
|
||||||
onChange={(e) => handleScheduleOptionChange('time', e.target.value)}
|
|
||||||
disabled={disabled || loading}
|
|
||||||
>
|
|
||||||
{TIME_OPTIONS.map(option => (
|
|
||||||
<option key={option.value} value={option.value}>
|
|
||||||
{option.label}
|
|
||||||
</option>
|
|
||||||
))}
|
|
||||||
</Select>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{scheduleOptions.frequency === 'weekly' && (
|
|
||||||
<div>
|
|
||||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
|
||||||
Días de la semana
|
|
||||||
</label>
|
|
||||||
<div className="flex flex-wrap gap-2">
|
|
||||||
{DAYS_OF_WEEK.map(day => (
|
|
||||||
<label key={day.value} className="flex items-center">
|
|
||||||
<input
|
|
||||||
type="checkbox"
|
|
||||||
checked={(scheduleOptions.days_of_week || []).includes(day.value)}
|
|
||||||
onChange={(e) => {
|
|
||||||
const currentDays = scheduleOptions.days_of_week || [];
|
|
||||||
const newDays = e.target.checked
|
|
||||||
? [...currentDays, day.value]
|
|
||||||
: currentDays.filter(d => d !== day.value);
|
|
||||||
handleScheduleOptionChange('days_of_week', newDays);
|
|
||||||
}}
|
|
||||||
className="mr-1 rounded"
|
|
||||||
disabled={disabled || loading}
|
|
||||||
/>
|
|
||||||
<span className="text-sm">{day.label}</span>
|
|
||||||
</label>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|
||||||
Destinatarios (emails separados por comas)
|
|
||||||
</label>
|
|
||||||
<Input
|
|
||||||
type="text"
|
|
||||||
value={recipientsInput}
|
|
||||||
onChange={(e) => setRecipientsInput(e.target.value)}
|
|
||||||
placeholder="ejemplo@empresa.com, otro@empresa.com"
|
|
||||||
disabled={disabled || loading}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label className="flex items-center">
|
|
||||||
<input
|
|
||||||
type="checkbox"
|
|
||||||
checked={scheduleOptions.include_attachments || false}
|
|
||||||
onChange={(e) => handleScheduleOptionChange('include_attachments', e.target.checked)}
|
|
||||||
className="mr-2 rounded"
|
|
||||||
disabled={disabled || loading}
|
|
||||||
/>
|
|
||||||
Incluir archivo adjunto con los datos
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className={`bg-white rounded-lg shadow-lg max-w-2xl mx-auto ${className}`}>
|
|
||||||
<Card className="p-0">
|
|
||||||
{/* Header */}
|
|
||||||
<div className="flex items-center justify-between p-6 border-b border-gray-200">
|
|
||||||
<div>
|
|
||||||
<h2 className="text-xl font-semibold text-gray-900">{title}</h2>
|
|
||||||
{description && (
|
|
||||||
<p className="text-sm text-gray-600 mt-1">{description}</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{onClose && (
|
|
||||||
<Button variant="ghost" size="sm" onClick={onClose}>
|
|
||||||
✕
|
|
||||||
</Button>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Tabs */}
|
|
||||||
<div className="border-b border-gray-200">
|
|
||||||
<nav className="flex space-x-8 px-6">
|
|
||||||
<button
|
|
||||||
onClick={() => setActiveTab('export')}
|
|
||||||
className={`py-4 px-1 border-b-2 font-medium text-sm ${
|
|
||||||
activeTab === 'export'
|
|
||||||
? 'border-blue-500 text-blue-600'
|
|
||||||
: 'border-transparent text-gray-500 hover:text-gray-700'
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
📥 Exportación inmediata
|
|
||||||
</button>
|
|
||||||
|
|
||||||
{showScheduling && (
|
|
||||||
<button
|
|
||||||
onClick={() => setActiveTab('schedule')}
|
|
||||||
className={`py-4 px-1 border-b-2 font-medium text-sm ${
|
|
||||||
activeTab === 'schedule'
|
|
||||||
? 'border-blue-500 text-blue-600'
|
|
||||||
: 'border-transparent text-gray-500 hover:text-gray-700'
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
📅 Programación
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
</nav>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Content */}
|
|
||||||
<div className="p-6 space-y-6" style={{ maxHeight: '70vh', overflowY: 'auto' }}>
|
|
||||||
{activeTab === 'export' ? (
|
|
||||||
<>
|
|
||||||
{renderFormatSelector()}
|
|
||||||
{renderTemplateSelector()}
|
|
||||||
{renderBasicOptions()}
|
|
||||||
|
|
||||||
{showAdvanced && (
|
|
||||||
<div>
|
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
size="sm"
|
|
||||||
onClick={() => setShowAdvancedOptions(!showAdvancedOptions)}
|
|
||||||
className="text-blue-600"
|
|
||||||
>
|
|
||||||
{showAdvancedOptions ? '▲' : '▼'} Opciones avanzadas
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{renderAdvancedOptions()}
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
renderScheduleTab()
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Footer */}
|
|
||||||
<div className="flex justify-end gap-3 p-6 border-t border-gray-200">
|
|
||||||
{onClose && (
|
|
||||||
<Button
|
|
||||||
variant="outline"
|
|
||||||
onClick={onClose}
|
|
||||||
disabled={loading}
|
|
||||||
>
|
|
||||||
Cancelar
|
|
||||||
</Button>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{activeTab === 'export' ? (
|
|
||||||
<Button
|
|
||||||
variant="primary"
|
|
||||||
onClick={handleExport}
|
|
||||||
disabled={disabled || loading}
|
|
||||||
>
|
|
||||||
{loading ? '🔄 Exportando...' : `${FORMAT_ICONS[selectedFormat]} Exportar ${FORMAT_LABELS[selectedFormat]}`}
|
|
||||||
</Button>
|
|
||||||
) : (
|
|
||||||
<Button
|
|
||||||
variant="primary"
|
|
||||||
onClick={handleSchedule}
|
|
||||||
disabled={disabled || loading || !scheduleOptions.enabled || !recipientsInput.trim()}
|
|
||||||
>
|
|
||||||
{loading ? '🔄 Programando...' : '📅 Programar reporte'}
|
|
||||||
</Button>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</Card>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default ExportOptions;
|
|
||||||
@@ -1,632 +0,0 @@
|
|||||||
import React, { useState, useCallback, useMemo } from 'react';
|
|
||||||
import { Card, Button, Badge, Input, Select, DatePicker } from '../../ui';
|
|
||||||
import type {
|
|
||||||
FilterPanelProps,
|
|
||||||
AnalyticsFilter,
|
|
||||||
FilterOption,
|
|
||||||
AppliedFilter,
|
|
||||||
FilterPreset,
|
|
||||||
FilterType
|
|
||||||
} from './types';
|
|
||||||
|
|
||||||
const FILTER_TYPE_ICONS: Record<FilterType, string> = {
|
|
||||||
date: '📅',
|
|
||||||
select: '📋',
|
|
||||||
multiselect: '☑️',
|
|
||||||
range: '↔️',
|
|
||||||
text: '🔍',
|
|
||||||
number: '#️⃣',
|
|
||||||
boolean: '✓',
|
|
||||||
};
|
|
||||||
|
|
||||||
export const FilterPanel: React.FC<FilterPanelProps> = ({
|
|
||||||
panel,
|
|
||||||
appliedFilters = [],
|
|
||||||
onFiltersChange,
|
|
||||||
onPresetSelect,
|
|
||||||
onPresetSave,
|
|
||||||
onPresetDelete,
|
|
||||||
onReset,
|
|
||||||
loading = false,
|
|
||||||
disabled = false,
|
|
||||||
compact = false,
|
|
||||||
showPresets = true,
|
|
||||||
showReset = true,
|
|
||||||
className = '',
|
|
||||||
}) => {
|
|
||||||
const [isCollapsed, setIsCollapsed] = useState(panel.default_collapsed);
|
|
||||||
const [localFilters, setLocalFilters] = useState<Record<string, any>>({});
|
|
||||||
const [isPresetModalOpen, setIsPresetModalOpen] = useState(false);
|
|
||||||
const [newPresetName, setNewPresetName] = useState('');
|
|
||||||
const [newPresetDescription, setNewPresetDescription] = useState('');
|
|
||||||
const [validationErrors, setValidationErrors] = useState<Record<string, string>>({});
|
|
||||||
|
|
||||||
const appliedFiltersMap = useMemo(() => {
|
|
||||||
const map: Record<string, AppliedFilter> = {};
|
|
||||||
appliedFilters.forEach(filter => {
|
|
||||||
map[filter.filter_id] = filter;
|
|
||||||
});
|
|
||||||
return map;
|
|
||||||
}, [appliedFilters]);
|
|
||||||
|
|
||||||
const getFilterValue = useCallback((filter: AnalyticsFilter) => {
|
|
||||||
const applied = appliedFiltersMap[filter.id];
|
|
||||||
if (applied) {
|
|
||||||
return applied.value;
|
|
||||||
}
|
|
||||||
|
|
||||||
const local = localFilters[filter.id];
|
|
||||||
if (local !== undefined) {
|
|
||||||
return local;
|
|
||||||
}
|
|
||||||
|
|
||||||
return filter.default_value;
|
|
||||||
}, [appliedFiltersMap, localFilters]);
|
|
||||||
|
|
||||||
const updateFilterValue = useCallback((filterId: string, value: any) => {
|
|
||||||
setLocalFilters(prev => ({ ...prev, [filterId]: value }));
|
|
||||||
|
|
||||||
// Clear validation error for this filter
|
|
||||||
setValidationErrors(prev => {
|
|
||||||
const newErrors = { ...prev };
|
|
||||||
delete newErrors[filterId];
|
|
||||||
return newErrors;
|
|
||||||
});
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const validateFilter = useCallback((filter: AnalyticsFilter, value: any): string | null => {
|
|
||||||
if (!filter.validation_rules) return null;
|
|
||||||
|
|
||||||
for (const rule of filter.validation_rules) {
|
|
||||||
switch (rule.rule) {
|
|
||||||
case 'required':
|
|
||||||
if (!value || (Array.isArray(value) && value.length === 0)) {
|
|
||||||
return rule.message;
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
case 'min':
|
|
||||||
if (typeof value === 'number' && value < rule.value) {
|
|
||||||
return rule.message;
|
|
||||||
}
|
|
||||||
if (typeof value === 'string' && value.length < rule.value) {
|
|
||||||
return rule.message;
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
case 'max':
|
|
||||||
if (typeof value === 'number' && value > rule.value) {
|
|
||||||
return rule.message;
|
|
||||||
}
|
|
||||||
if (typeof value === 'string' && value.length > rule.value) {
|
|
||||||
return rule.message;
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
case 'pattern':
|
|
||||||
if (typeof value === 'string' && !new RegExp(rule.value).test(value)) {
|
|
||||||
return rule.message;
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return null;
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const applyFilters = useCallback(() => {
|
|
||||||
const errors: Record<string, string> = {};
|
|
||||||
const newAppliedFilters: AppliedFilter[] = [];
|
|
||||||
|
|
||||||
panel.filters.forEach(filter => {
|
|
||||||
const value = getFilterValue(filter);
|
|
||||||
|
|
||||||
// Validate the filter
|
|
||||||
const validationError = validateFilter(filter, value);
|
|
||||||
if (validationError) {
|
|
||||||
errors[filter.id] = validationError;
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Skip if no value and not required
|
|
||||||
if ((value === undefined || value === null || value === '') && !filter.required) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Create applied filter
|
|
||||||
const appliedFilter: AppliedFilter = {
|
|
||||||
filter_id: filter.id,
|
|
||||||
field: filter.field,
|
|
||||||
operator: getOperatorForFilterType(filter.type),
|
|
||||||
value,
|
|
||||||
display_value: formatDisplayValue(filter, value),
|
|
||||||
};
|
|
||||||
|
|
||||||
newAppliedFilters.push(appliedFilter);
|
|
||||||
});
|
|
||||||
|
|
||||||
setValidationErrors(errors);
|
|
||||||
|
|
||||||
if (Object.keys(errors).length === 0 && onFiltersChange) {
|
|
||||||
onFiltersChange(newAppliedFilters);
|
|
||||||
}
|
|
||||||
}, [panel.filters, getFilterValue, validateFilter, onFiltersChange]);
|
|
||||||
|
|
||||||
const resetFilters = useCallback(() => {
|
|
||||||
setLocalFilters({});
|
|
||||||
setValidationErrors({});
|
|
||||||
if (onReset) {
|
|
||||||
onReset();
|
|
||||||
}
|
|
||||||
}, [onReset]);
|
|
||||||
|
|
||||||
const getOperatorForFilterType = (type: FilterType): string => {
|
|
||||||
switch (type) {
|
|
||||||
case 'select':
|
|
||||||
case 'boolean':
|
|
||||||
return 'eq';
|
|
||||||
case 'multiselect':
|
|
||||||
return 'in';
|
|
||||||
case 'range':
|
|
||||||
return 'between';
|
|
||||||
case 'text':
|
|
||||||
return 'like';
|
|
||||||
case 'number':
|
|
||||||
case 'date':
|
|
||||||
return 'eq';
|
|
||||||
default:
|
|
||||||
return 'eq';
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const formatDisplayValue = (filter: AnalyticsFilter, value: any): string => {
|
|
||||||
if (value === undefined || value === null) return '';
|
|
||||||
|
|
||||||
switch (filter.type) {
|
|
||||||
case 'select':
|
|
||||||
case 'multiselect':
|
|
||||||
if (filter.options) {
|
|
||||||
const options = Array.isArray(value) ? value : [value];
|
|
||||||
return options
|
|
||||||
.map(v => filter.options?.find(opt => opt.value === v)?.label || v)
|
|
||||||
.join(', ');
|
|
||||||
}
|
|
||||||
return Array.isArray(value) ? value.join(', ') : String(value);
|
|
||||||
case 'boolean':
|
|
||||||
return value ? 'Sí' : 'No';
|
|
||||||
case 'date':
|
|
||||||
return new Date(value).toLocaleDateString('es-ES');
|
|
||||||
case 'range':
|
|
||||||
return Array.isArray(value) ? `${value[0]} - ${value[1]}` : String(value);
|
|
||||||
default:
|
|
||||||
return String(value);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handlePresetSelect = (presetId: string) => {
|
|
||||||
const preset = panel.presets.find(p => p.id === presetId);
|
|
||||||
if (preset) {
|
|
||||||
setLocalFilters(preset.values);
|
|
||||||
if (onPresetSelect) {
|
|
||||||
onPresetSelect(presetId);
|
|
||||||
}
|
|
||||||
// Auto-apply filters when preset is selected
|
|
||||||
setTimeout(applyFilters, 0);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handlePresetSave = () => {
|
|
||||||
if (!newPresetName.trim()) return;
|
|
||||||
|
|
||||||
const currentValues: Record<string, any> = {};
|
|
||||||
panel.filters.forEach(filter => {
|
|
||||||
const value = getFilterValue(filter);
|
|
||||||
if (value !== undefined && value !== null && value !== '') {
|
|
||||||
currentValues[filter.id] = value;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
const newPreset: Omit<FilterPreset, 'id'> = {
|
|
||||||
name: newPresetName.trim(),
|
|
||||||
description: newPresetDescription.trim() || undefined,
|
|
||||||
is_default: false,
|
|
||||||
is_public: false,
|
|
||||||
values: currentValues,
|
|
||||||
};
|
|
||||||
|
|
||||||
if (onPresetSave) {
|
|
||||||
onPresetSave(newPreset);
|
|
||||||
}
|
|
||||||
|
|
||||||
setIsPresetModalOpen(false);
|
|
||||||
setNewPresetName('');
|
|
||||||
setNewPresetDescription('');
|
|
||||||
};
|
|
||||||
|
|
||||||
const renderFilter = (filter: AnalyticsFilter) => {
|
|
||||||
const value = getFilterValue(filter);
|
|
||||||
const error = validationErrors[filter.id];
|
|
||||||
const isDisabled = disabled || loading;
|
|
||||||
|
|
||||||
const commonProps = {
|
|
||||||
disabled: isDisabled,
|
|
||||||
className: error ? 'border-red-300 focus:border-red-500' : '',
|
|
||||||
};
|
|
||||||
|
|
||||||
let filterInput: React.ReactNode;
|
|
||||||
|
|
||||||
switch (filter.type) {
|
|
||||||
case 'text':
|
|
||||||
filterInput = (
|
|
||||||
<Input
|
|
||||||
type="text"
|
|
||||||
placeholder={filter.placeholder}
|
|
||||||
value={value || ''}
|
|
||||||
onChange={(e) => updateFilterValue(filter.id, e.target.value)}
|
|
||||||
{...commonProps}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
break;
|
|
||||||
|
|
||||||
case 'number':
|
|
||||||
filterInput = (
|
|
||||||
<Input
|
|
||||||
type="number"
|
|
||||||
placeholder={filter.placeholder}
|
|
||||||
value={value || ''}
|
|
||||||
onChange={(e) => updateFilterValue(filter.id, parseFloat(e.target.value) || null)}
|
|
||||||
{...commonProps}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
break;
|
|
||||||
|
|
||||||
case 'select':
|
|
||||||
filterInput = (
|
|
||||||
<Select
|
|
||||||
value={value || ''}
|
|
||||||
onChange={(e) => updateFilterValue(filter.id, e.target.value)}
|
|
||||||
{...commonProps}
|
|
||||||
>
|
|
||||||
<option value="">Seleccionar...</option>
|
|
||||||
{filter.options?.map((option) => (
|
|
||||||
<option
|
|
||||||
key={option.value}
|
|
||||||
value={option.value}
|
|
||||||
disabled={option.disabled}
|
|
||||||
>
|
|
||||||
{option.icon} {option.label}
|
|
||||||
</option>
|
|
||||||
))}
|
|
||||||
</Select>
|
|
||||||
);
|
|
||||||
break;
|
|
||||||
|
|
||||||
case 'multiselect':
|
|
||||||
const selectedValues = Array.isArray(value) ? value : [];
|
|
||||||
filterInput = (
|
|
||||||
<div className="space-y-2">
|
|
||||||
<div className="max-h-32 overflow-y-auto border border-gray-300 rounded p-2">
|
|
||||||
{filter.options?.map((option) => (
|
|
||||||
<label key={option.value} className="flex items-center gap-2 p-1">
|
|
||||||
<input
|
|
||||||
type="checkbox"
|
|
||||||
checked={selectedValues.includes(option.value)}
|
|
||||||
onChange={(e) => {
|
|
||||||
const newValues = e.target.checked
|
|
||||||
? [...selectedValues, option.value]
|
|
||||||
: selectedValues.filter(v => v !== option.value);
|
|
||||||
updateFilterValue(filter.id, newValues);
|
|
||||||
}}
|
|
||||||
disabled={isDisabled || option.disabled}
|
|
||||||
className="rounded"
|
|
||||||
/>
|
|
||||||
<span className="text-sm">
|
|
||||||
{option.icon} {option.label}
|
|
||||||
</span>
|
|
||||||
</label>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
{selectedValues.length > 0 && (
|
|
||||||
<div className="flex flex-wrap gap-1">
|
|
||||||
{selectedValues.map((val) => {
|
|
||||||
const option = filter.options?.find(opt => opt.value === val);
|
|
||||||
return (
|
|
||||||
<Badge key={val} className="bg-blue-100 text-blue-800 text-xs">
|
|
||||||
{option?.label || val}
|
|
||||||
<button
|
|
||||||
onClick={() => {
|
|
||||||
const newValues = selectedValues.filter(v => v !== val);
|
|
||||||
updateFilterValue(filter.id, newValues);
|
|
||||||
}}
|
|
||||||
className="ml-1 text-blue-600 hover:text-blue-800"
|
|
||||||
>
|
|
||||||
×
|
|
||||||
</button>
|
|
||||||
</Badge>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
break;
|
|
||||||
|
|
||||||
case 'boolean':
|
|
||||||
filterInput = (
|
|
||||||
<Select
|
|
||||||
value={value === true ? 'true' : value === false ? 'false' : ''}
|
|
||||||
onChange={(e) => {
|
|
||||||
const val = e.target.value === 'true' ? true : e.target.value === 'false' ? false : null;
|
|
||||||
updateFilterValue(filter.id, val);
|
|
||||||
}}
|
|
||||||
{...commonProps}
|
|
||||||
>
|
|
||||||
<option value="">Seleccionar...</option>
|
|
||||||
<option value="true">Sí</option>
|
|
||||||
<option value="false">No</option>
|
|
||||||
</Select>
|
|
||||||
);
|
|
||||||
break;
|
|
||||||
|
|
||||||
case 'date':
|
|
||||||
filterInput = (
|
|
||||||
<DatePicker
|
|
||||||
value={value ? new Date(value) : null}
|
|
||||||
onChange={(date) => updateFilterValue(filter.id, date?.toISOString())}
|
|
||||||
placeholder={filter.placeholder}
|
|
||||||
disabled={isDisabled}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
break;
|
|
||||||
|
|
||||||
case 'range':
|
|
||||||
const rangeValue = Array.isArray(value) ? value : [null, null];
|
|
||||||
filterInput = (
|
|
||||||
<div className="flex gap-2 items-center">
|
|
||||||
<Input
|
|
||||||
type="number"
|
|
||||||
placeholder="Mín"
|
|
||||||
value={rangeValue[0] || ''}
|
|
||||||
onChange={(e) => {
|
|
||||||
const newRange = [parseFloat(e.target.value) || null, rangeValue[1]];
|
|
||||||
updateFilterValue(filter.id, newRange);
|
|
||||||
}}
|
|
||||||
{...commonProps}
|
|
||||||
className="flex-1"
|
|
||||||
/>
|
|
||||||
<span className="text-gray-500">-</span>
|
|
||||||
<Input
|
|
||||||
type="number"
|
|
||||||
placeholder="Máx"
|
|
||||||
value={rangeValue[1] || ''}
|
|
||||||
onChange={(e) => {
|
|
||||||
const newRange = [rangeValue[0], parseFloat(e.target.value) || null];
|
|
||||||
updateFilterValue(filter.id, newRange);
|
|
||||||
}}
|
|
||||||
{...commonProps}
|
|
||||||
className="flex-1"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
break;
|
|
||||||
|
|
||||||
default:
|
|
||||||
filterInput = (
|
|
||||||
<div className="text-gray-500 text-sm">
|
|
||||||
Tipo de filtro no soportado: {filter.type}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div key={filter.id} className={compact ? 'space-y-1' : 'space-y-2'}>
|
|
||||||
<div className="flex items-center justify-between">
|
|
||||||
<label className={`font-medium text-gray-700 ${compact ? 'text-sm' : ''}`}>
|
|
||||||
<span className="mr-1">{FILTER_TYPE_ICONS[filter.type]}</span>
|
|
||||||
{filter.display_name}
|
|
||||||
{filter.required && <span className="text-red-500 ml-1">*</span>}
|
|
||||||
</label>
|
|
||||||
|
|
||||||
{filter.help_text && (
|
|
||||||
<span className="text-xs text-gray-500" title={filter.help_text}>
|
|
||||||
ℹ️
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{filterInput}
|
|
||||||
|
|
||||||
{error && (
|
|
||||||
<p className="text-sm text-red-600">{error}</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
const renderPresets = () => {
|
|
||||||
if (!showPresets || panel.presets.length === 0) return null;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="space-y-2">
|
|
||||||
<div className="flex items-center justify-between">
|
|
||||||
<h4 className="font-medium text-gray-700">Filtros guardados</h4>
|
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
size="sm"
|
|
||||||
onClick={() => setIsPresetModalOpen(true)}
|
|
||||||
disabled={disabled || loading}
|
|
||||||
>
|
|
||||||
💾 Guardar
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex flex-wrap gap-2">
|
|
||||||
{panel.presets.map((preset) => (
|
|
||||||
<div key={preset.id} className="flex items-center gap-1">
|
|
||||||
<Button
|
|
||||||
variant="outline"
|
|
||||||
size="sm"
|
|
||||||
onClick={() => handlePresetSelect(preset.id)}
|
|
||||||
disabled={disabled || loading}
|
|
||||||
className={panel.active_preset === preset.id ? 'bg-blue-50 border-blue-300' : ''}
|
|
||||||
>
|
|
||||||
{preset.icon && <span className="mr-1">{preset.icon}</span>}
|
|
||||||
{preset.name}
|
|
||||||
</Button>
|
|
||||||
|
|
||||||
{onPresetDelete && !preset.is_public && (
|
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
size="sm"
|
|
||||||
onClick={() => onPresetDelete(preset.id)}
|
|
||||||
className="text-red-600 hover:text-red-800 p-1"
|
|
||||||
>
|
|
||||||
×
|
|
||||||
</Button>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
if (panel.collapsible && isCollapsed) {
|
|
||||||
return (
|
|
||||||
<Card className={`p-3 ${className}`}>
|
|
||||||
<button
|
|
||||||
onClick={() => setIsCollapsed(false)}
|
|
||||||
className="flex items-center justify-between w-full text-left"
|
|
||||||
>
|
|
||||||
<h3 className="font-semibold text-gray-900">{panel.title}</h3>
|
|
||||||
<span className="text-gray-500">▼</span>
|
|
||||||
</button>
|
|
||||||
</Card>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
const gridClass = panel.layout === 'grid' ? 'grid grid-cols-1 md:grid-cols-2 gap-4' :
|
|
||||||
panel.layout === 'horizontal' ? 'grid grid-cols-1 lg:grid-cols-3 gap-4' :
|
|
||||||
'space-y-4';
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<Card className={`p-4 ${className}`}>
|
|
||||||
<div className="space-y-4">
|
|
||||||
{/* Header */}
|
|
||||||
<div className="flex items-center justify-between">
|
|
||||||
<h3 className="font-semibold text-gray-900">{panel.title}</h3>
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
{loading && (
|
|
||||||
<div className="animate-spin rounded-full h-4 w-4 border-b-2 border-blue-600"></div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{panel.collapsible && (
|
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
size="sm"
|
|
||||||
onClick={() => setIsCollapsed(true)}
|
|
||||||
>
|
|
||||||
▲
|
|
||||||
</Button>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Presets */}
|
|
||||||
{renderPresets()}
|
|
||||||
|
|
||||||
{/* Filters */}
|
|
||||||
<div className={gridClass}>
|
|
||||||
{panel.filters.map(filter => renderFilter(filter))}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Actions */}
|
|
||||||
<div className="flex items-center justify-between pt-4 border-t border-gray-200">
|
|
||||||
<div className="text-sm text-gray-600">
|
|
||||||
{appliedFilters.length} filtro{appliedFilters.length !== 1 ? 's' : ''} aplicado{appliedFilters.length !== 1 ? 's' : ''}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex gap-2">
|
|
||||||
{showReset && appliedFilters.length > 0 && (
|
|
||||||
<Button
|
|
||||||
variant="outline"
|
|
||||||
size="sm"
|
|
||||||
onClick={resetFilters}
|
|
||||||
disabled={disabled || loading}
|
|
||||||
>
|
|
||||||
Limpiar
|
|
||||||
</Button>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<Button
|
|
||||||
variant="primary"
|
|
||||||
size="sm"
|
|
||||||
onClick={applyFilters}
|
|
||||||
disabled={disabled || loading}
|
|
||||||
>
|
|
||||||
Aplicar filtros
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
{/* Save Preset Modal */}
|
|
||||||
{isPresetModalOpen && (
|
|
||||||
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
|
|
||||||
<Card className="w-full max-w-md p-6">
|
|
||||||
<h3 className="text-lg font-semibold mb-4">Guardar filtro</h3>
|
|
||||||
|
|
||||||
<div className="space-y-4">
|
|
||||||
<div>
|
|
||||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|
||||||
Nombre del filtro *
|
|
||||||
</label>
|
|
||||||
<Input
|
|
||||||
type="text"
|
|
||||||
value={newPresetName}
|
|
||||||
onChange={(e) => setNewPresetName(e.target.value)}
|
|
||||||
placeholder="Ej: Ventas del último mes"
|
|
||||||
className="w-full"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|
||||||
Descripción (opcional)
|
|
||||||
</label>
|
|
||||||
<Input
|
|
||||||
type="text"
|
|
||||||
value={newPresetDescription}
|
|
||||||
onChange={(e) => setNewPresetDescription(e.target.value)}
|
|
||||||
placeholder="Descripción del filtro"
|
|
||||||
className="w-full"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex justify-end gap-2 pt-4 border-t border-gray-200">
|
|
||||||
<Button
|
|
||||||
variant="outline"
|
|
||||||
onClick={() => {
|
|
||||||
setIsPresetModalOpen(false);
|
|
||||||
setNewPresetName('');
|
|
||||||
setNewPresetDescription('');
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Cancelar
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
variant="primary"
|
|
||||||
onClick={handlePresetSave}
|
|
||||||
disabled={!newPresetName.trim()}
|
|
||||||
>
|
|
||||||
Guardar
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Card>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default FilterPanel;
|
|
||||||
@@ -1,651 +0,0 @@
|
|||||||
import React, { useState, useMemo } from 'react';
|
|
||||||
import { Card, Button, Badge, Input, Select, Modal } from '../../ui';
|
|
||||||
import { Table } from '../../ui';
|
|
||||||
import type {
|
|
||||||
AnalyticsReport,
|
|
||||||
ReportsTableProps,
|
|
||||||
ExportFormat,
|
|
||||||
ReportType,
|
|
||||||
CustomAction
|
|
||||||
} from './types';
|
|
||||||
|
|
||||||
const REPORT_TYPE_LABELS: Record<ReportType, string> = {
|
|
||||||
sales: 'Ventas',
|
|
||||||
production: 'Producción',
|
|
||||||
inventory: 'Inventario',
|
|
||||||
financial: 'Financiero',
|
|
||||||
customer: 'Clientes',
|
|
||||||
performance: 'Rendimiento',
|
|
||||||
};
|
|
||||||
|
|
||||||
const STATUS_COLORS = {
|
|
||||||
active: 'bg-green-100 text-green-800 border-green-200',
|
|
||||||
inactive: 'bg-yellow-100 text-yellow-800 border-yellow-200',
|
|
||||||
archived: 'bg-gray-100 text-gray-800 border-gray-200',
|
|
||||||
};
|
|
||||||
|
|
||||||
const STATUS_LABELS = {
|
|
||||||
active: 'Activo',
|
|
||||||
inactive: 'Inactivo',
|
|
||||||
archived: 'Archivado',
|
|
||||||
};
|
|
||||||
|
|
||||||
export const ReportsTable: React.FC<ReportsTableProps> = ({
|
|
||||||
reports = [],
|
|
||||||
loading = false,
|
|
||||||
error,
|
|
||||||
selectedReports = [],
|
|
||||||
onSelectionChange,
|
|
||||||
onReportClick,
|
|
||||||
onEditReport,
|
|
||||||
onDeleteReport,
|
|
||||||
onScheduleReport,
|
|
||||||
onShareReport,
|
|
||||||
onExportReport,
|
|
||||||
filters = [],
|
|
||||||
onFiltersChange,
|
|
||||||
sortable = true,
|
|
||||||
pagination,
|
|
||||||
bulkActions = false,
|
|
||||||
customActions = [],
|
|
||||||
tableConfig,
|
|
||||||
}) => {
|
|
||||||
const [searchTerm, setSearchTerm] = useState('');
|
|
||||||
const [typeFilter, setTypeFilter] = useState<ReportType | 'all'>('all');
|
|
||||||
const [statusFilter, setStatusFilter] = useState<'all' | 'active' | 'inactive' | 'archived'>('all');
|
|
||||||
const [sortField, setSortField] = useState<keyof AnalyticsReport>('updated_at');
|
|
||||||
const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('desc');
|
|
||||||
const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
|
|
||||||
const [reportToDelete, setReportToDelete] = useState<string | null>(null);
|
|
||||||
const [isScheduleModalOpen, setIsScheduleModalOpen] = useState(false);
|
|
||||||
const [reportToSchedule, setReportToSchedule] = useState<AnalyticsReport | null>(null);
|
|
||||||
const [isShareModalOpen, setIsShareModalOpen] = useState(false);
|
|
||||||
const [reportToShare, setReportToShare] = useState<AnalyticsReport | null>(null);
|
|
||||||
|
|
||||||
const filteredAndSortedReports = useMemo(() => {
|
|
||||||
let filtered = reports.filter(report => {
|
|
||||||
const matchesSearch = !searchTerm ||
|
|
||||||
report.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
|
||||||
report.description?.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
|
||||||
report.category.toLowerCase().includes(searchTerm.toLowerCase());
|
|
||||||
|
|
||||||
const matchesType = typeFilter === 'all' || report.type === typeFilter;
|
|
||||||
const matchesStatus = statusFilter === 'all' || report.status === statusFilter;
|
|
||||||
|
|
||||||
return matchesSearch && matchesType && matchesStatus;
|
|
||||||
});
|
|
||||||
|
|
||||||
if (sortable && sortField) {
|
|
||||||
filtered.sort((a, b) => {
|
|
||||||
const aVal = a[sortField];
|
|
||||||
const bVal = b[sortField];
|
|
||||||
|
|
||||||
if (aVal === null || aVal === undefined) return 1;
|
|
||||||
if (bVal === null || bVal === undefined) return -1;
|
|
||||||
|
|
||||||
let comparison = 0;
|
|
||||||
if (typeof aVal === 'string' && typeof bVal === 'string') {
|
|
||||||
comparison = aVal.localeCompare(bVal);
|
|
||||||
} else if (typeof aVal === 'number' && typeof bVal === 'number') {
|
|
||||||
comparison = aVal - bVal;
|
|
||||||
} else {
|
|
||||||
comparison = String(aVal).localeCompare(String(bVal));
|
|
||||||
}
|
|
||||||
|
|
||||||
return sortDirection === 'asc' ? comparison : -comparison;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
return filtered;
|
|
||||||
}, [reports, searchTerm, typeFilter, statusFilter, sortField, sortDirection, sortable]);
|
|
||||||
|
|
||||||
const handleSort = (field: keyof AnalyticsReport) => {
|
|
||||||
if (sortField === field) {
|
|
||||||
setSortDirection(sortDirection === 'asc' ? 'desc' : 'asc');
|
|
||||||
} else {
|
|
||||||
setSortField(field);
|
|
||||||
setSortDirection('asc');
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleSelectAll = (checked: boolean) => {
|
|
||||||
if (onSelectionChange) {
|
|
||||||
onSelectionChange(checked ? filteredAndSortedReports.map(r => r.id) : []);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleSelectReport = (reportId: string, checked: boolean) => {
|
|
||||||
if (onSelectionChange) {
|
|
||||||
if (checked) {
|
|
||||||
onSelectionChange([...selectedReports, reportId]);
|
|
||||||
} else {
|
|
||||||
onSelectionChange(selectedReports.filter(id => id !== reportId));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleDeleteConfirm = () => {
|
|
||||||
if (reportToDelete && onDeleteReport) {
|
|
||||||
onDeleteReport(reportToDelete);
|
|
||||||
}
|
|
||||||
setIsDeleteModalOpen(false);
|
|
||||||
setReportToDelete(null);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleBulkDelete = () => {
|
|
||||||
if (selectedReports.length > 0 && onDeleteReport) {
|
|
||||||
selectedReports.forEach(id => onDeleteReport(id));
|
|
||||||
if (onSelectionChange) {
|
|
||||||
onSelectionChange([]);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const renderActionButton = (report: AnalyticsReport, action: string) => {
|
|
||||||
switch (action) {
|
|
||||||
case 'view':
|
|
||||||
return (
|
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
size="sm"
|
|
||||||
onClick={() => onReportClick?.(report)}
|
|
||||||
title="Ver reporte"
|
|
||||||
>
|
|
||||||
👁️
|
|
||||||
</Button>
|
|
||||||
);
|
|
||||||
case 'edit':
|
|
||||||
return (
|
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
size="sm"
|
|
||||||
onClick={() => onEditReport?.(report)}
|
|
||||||
title="Editar reporte"
|
|
||||||
>
|
|
||||||
✏️
|
|
||||||
</Button>
|
|
||||||
);
|
|
||||||
case 'schedule':
|
|
||||||
return (
|
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
size="sm"
|
|
||||||
onClick={() => {
|
|
||||||
setReportToSchedule(report);
|
|
||||||
setIsScheduleModalOpen(true);
|
|
||||||
}}
|
|
||||||
title="Programar reporte"
|
|
||||||
>
|
|
||||||
📅
|
|
||||||
</Button>
|
|
||||||
);
|
|
||||||
case 'share':
|
|
||||||
return (
|
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
size="sm"
|
|
||||||
onClick={() => {
|
|
||||||
setReportToShare(report);
|
|
||||||
setIsShareModalOpen(true);
|
|
||||||
}}
|
|
||||||
title="Compartir reporte"
|
|
||||||
>
|
|
||||||
📤
|
|
||||||
</Button>
|
|
||||||
);
|
|
||||||
case 'export':
|
|
||||||
return (
|
|
||||||
<div className="flex items-center gap-1">
|
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
size="sm"
|
|
||||||
onClick={() => onExportReport?.(report, 'pdf')}
|
|
||||||
title="Exportar como PDF"
|
|
||||||
>
|
|
||||||
📄
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
size="sm"
|
|
||||||
onClick={() => onExportReport?.(report, 'excel')}
|
|
||||||
title="Exportar como Excel"
|
|
||||||
>
|
|
||||||
📊
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
case 'delete':
|
|
||||||
return (
|
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
size="sm"
|
|
||||||
onClick={() => {
|
|
||||||
setReportToDelete(report.id);
|
|
||||||
setIsDeleteModalOpen(true);
|
|
||||||
}}
|
|
||||||
title="Eliminar reporte"
|
|
||||||
className="text-red-600 hover:text-red-800"
|
|
||||||
>
|
|
||||||
🗑️
|
|
||||||
</Button>
|
|
||||||
);
|
|
||||||
default:
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const tableColumns = [
|
|
||||||
{
|
|
||||||
key: 'select',
|
|
||||||
title: (
|
|
||||||
<input
|
|
||||||
type="checkbox"
|
|
||||||
checked={selectedReports.length === filteredAndSortedReports.length && filteredAndSortedReports.length > 0}
|
|
||||||
onChange={(e) => handleSelectAll(e.target.checked)}
|
|
||||||
className="rounded"
|
|
||||||
/>
|
|
||||||
),
|
|
||||||
render: (report: AnalyticsReport) => (
|
|
||||||
<input
|
|
||||||
type="checkbox"
|
|
||||||
checked={selectedReports.includes(report.id)}
|
|
||||||
onChange={(e) => handleSelectReport(report.id, e.target.checked)}
|
|
||||||
className="rounded"
|
|
||||||
/>
|
|
||||||
),
|
|
||||||
width: 50,
|
|
||||||
visible: bulkActions,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'name',
|
|
||||||
title: 'Nombre',
|
|
||||||
sortable: true,
|
|
||||||
render: (report: AnalyticsReport) => (
|
|
||||||
<div>
|
|
||||||
<button
|
|
||||||
onClick={() => onReportClick?.(report)}
|
|
||||||
className="font-medium text-blue-600 hover:text-blue-800 text-left"
|
|
||||||
>
|
|
||||||
{report.name}
|
|
||||||
</button>
|
|
||||||
{report.description && (
|
|
||||||
<p className="text-sm text-gray-500 mt-1">{report.description}</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
),
|
|
||||||
minWidth: 200,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'type',
|
|
||||||
title: 'Tipo',
|
|
||||||
sortable: true,
|
|
||||||
render: (report: AnalyticsReport) => (
|
|
||||||
<Badge className="bg-blue-100 text-blue-800">
|
|
||||||
{REPORT_TYPE_LABELS[report.type]}
|
|
||||||
</Badge>
|
|
||||||
),
|
|
||||||
width: 120,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'category',
|
|
||||||
title: 'Categoría',
|
|
||||||
sortable: true,
|
|
||||||
width: 120,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'status',
|
|
||||||
title: 'Estado',
|
|
||||||
sortable: true,
|
|
||||||
render: (report: AnalyticsReport) => (
|
|
||||||
<Badge className={STATUS_COLORS[report.status]}>
|
|
||||||
{STATUS_LABELS[report.status]}
|
|
||||||
</Badge>
|
|
||||||
),
|
|
||||||
width: 100,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'last_run',
|
|
||||||
title: 'Última ejecución',
|
|
||||||
sortable: true,
|
|
||||||
render: (report: AnalyticsReport) => (
|
|
||||||
report.last_run
|
|
||||||
? new Date(report.last_run).toLocaleDateString('es-ES')
|
|
||||||
: '-'
|
|
||||||
),
|
|
||||||
width: 140,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'next_run',
|
|
||||||
title: 'Próxima ejecución',
|
|
||||||
sortable: true,
|
|
||||||
render: (report: AnalyticsReport) => (
|
|
||||||
report.next_run
|
|
||||||
? new Date(report.next_run).toLocaleDateString('es-ES')
|
|
||||||
: '-'
|
|
||||||
),
|
|
||||||
width: 140,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'updated_at',
|
|
||||||
title: 'Actualizado',
|
|
||||||
sortable: true,
|
|
||||||
render: (report: AnalyticsReport) => (
|
|
||||||
new Date(report.updated_at).toLocaleDateString('es-ES')
|
|
||||||
),
|
|
||||||
width: 120,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'actions',
|
|
||||||
title: 'Acciones',
|
|
||||||
render: (report: AnalyticsReport) => (
|
|
||||||
<div className="flex items-center gap-1">
|
|
||||||
{renderActionButton(report, 'view')}
|
|
||||||
{renderActionButton(report, 'edit')}
|
|
||||||
{renderActionButton(report, 'schedule')}
|
|
||||||
{renderActionButton(report, 'export')}
|
|
||||||
{renderActionButton(report, 'delete')}
|
|
||||||
</div>
|
|
||||||
),
|
|
||||||
width: 200,
|
|
||||||
},
|
|
||||||
].filter(col => col.visible !== false);
|
|
||||||
|
|
||||||
if (error) {
|
|
||||||
return (
|
|
||||||
<Card className="p-6">
|
|
||||||
<div className="text-center">
|
|
||||||
<p className="text-red-600 font-medium">Error al cargar los reportes</p>
|
|
||||||
<p className="text-sm text-gray-500 mt-1">{error}</p>
|
|
||||||
</div>
|
|
||||||
</Card>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<Card className="overflow-hidden">
|
|
||||||
{/* Filters and Actions */}
|
|
||||||
<div className="p-4 border-b border-gray-200 bg-gray-50">
|
|
||||||
<div className="flex flex-col lg:flex-row gap-4">
|
|
||||||
{/* Search */}
|
|
||||||
{(tableConfig?.showSearch !== false) && (
|
|
||||||
<div className="flex-1">
|
|
||||||
<Input
|
|
||||||
type="text"
|
|
||||||
placeholder="Buscar reportes..."
|
|
||||||
value={searchTerm}
|
|
||||||
onChange={(e) => setSearchTerm(e.target.value)}
|
|
||||||
className="w-full"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Filters */}
|
|
||||||
<div className="flex gap-2">
|
|
||||||
<Select
|
|
||||||
value={typeFilter}
|
|
||||||
onChange={(e) => setTypeFilter(e.target.value as ReportType | 'all')}
|
|
||||||
className="w-40"
|
|
||||||
>
|
|
||||||
<option value="all">Todos los tipos</option>
|
|
||||||
{Object.entries(REPORT_TYPE_LABELS).map(([value, label]) => (
|
|
||||||
<option key={value} value={value}>{label}</option>
|
|
||||||
))}
|
|
||||||
</Select>
|
|
||||||
|
|
||||||
<Select
|
|
||||||
value={statusFilter}
|
|
||||||
onChange={(e) => setStatusFilter(e.target.value as any)}
|
|
||||||
className="w-32"
|
|
||||||
>
|
|
||||||
<option value="all">Todos</option>
|
|
||||||
<option value="active">Activos</option>
|
|
||||||
<option value="inactive">Inactivos</option>
|
|
||||||
<option value="archived">Archivados</option>
|
|
||||||
</Select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Bulk Actions */}
|
|
||||||
{bulkActions && selectedReports.length > 0 && (
|
|
||||||
<div className="flex gap-2">
|
|
||||||
<Button
|
|
||||||
variant="outline"
|
|
||||||
size="sm"
|
|
||||||
onClick={handleBulkDelete}
|
|
||||||
className="text-red-600 border-red-300 hover:bg-red-50"
|
|
||||||
>
|
|
||||||
Eliminar seleccionados ({selectedReports.length})
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Table */}
|
|
||||||
<div className="overflow-x-auto">
|
|
||||||
<Table
|
|
||||||
columns={tableColumns}
|
|
||||||
data={filteredAndSortedReports}
|
|
||||||
loading={loading}
|
|
||||||
sortable={sortable}
|
|
||||||
onSort={handleSort}
|
|
||||||
currentSort={{ field: sortField as string, direction: sortDirection }}
|
|
||||||
emptyMessage="No se encontraron reportes"
|
|
||||||
className="min-w-full"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Pagination */}
|
|
||||||
{pagination && (
|
|
||||||
<div className="p-4 border-t border-gray-200 bg-gray-50">
|
|
||||||
<div className="flex items-center justify-between">
|
|
||||||
<p className="text-sm text-gray-700">
|
|
||||||
Mostrando {Math.min(pagination.pageSize * (pagination.current - 1) + 1, pagination.total)} - {Math.min(pagination.pageSize * pagination.current, pagination.total)} de {pagination.total} reportes
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<Button
|
|
||||||
variant="outline"
|
|
||||||
size="sm"
|
|
||||||
onClick={() => pagination.onChange(pagination.current - 1, pagination.pageSize)}
|
|
||||||
disabled={pagination.current <= 1}
|
|
||||||
>
|
|
||||||
Anterior
|
|
||||||
</Button>
|
|
||||||
|
|
||||||
<span className="text-sm font-medium">
|
|
||||||
Página {pagination.current} de {Math.ceil(pagination.total / pagination.pageSize)}
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<Button
|
|
||||||
variant="outline"
|
|
||||||
size="sm"
|
|
||||||
onClick={() => pagination.onChange(pagination.current + 1, pagination.pageSize)}
|
|
||||||
disabled={pagination.current >= Math.ceil(pagination.total / pagination.pageSize)}
|
|
||||||
>
|
|
||||||
Siguiente
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
{/* Delete Confirmation Modal */}
|
|
||||||
<Modal
|
|
||||||
isOpen={isDeleteModalOpen}
|
|
||||||
onClose={() => {
|
|
||||||
setIsDeleteModalOpen(false);
|
|
||||||
setReportToDelete(null);
|
|
||||||
}}
|
|
||||||
title="Confirmar eliminación"
|
|
||||||
>
|
|
||||||
<div className="space-y-4">
|
|
||||||
<p>¿Estás seguro de que deseas eliminar este reporte? Esta acción no se puede deshacer.</p>
|
|
||||||
|
|
||||||
<div className="flex justify-end gap-2">
|
|
||||||
<Button
|
|
||||||
variant="outline"
|
|
||||||
onClick={() => {
|
|
||||||
setIsDeleteModalOpen(false);
|
|
||||||
setReportToDelete(null);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Cancelar
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
variant="danger"
|
|
||||||
onClick={handleDeleteConfirm}
|
|
||||||
>
|
|
||||||
Eliminar
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Modal>
|
|
||||||
|
|
||||||
{/* Schedule Modal */}
|
|
||||||
<Modal
|
|
||||||
isOpen={isScheduleModalOpen}
|
|
||||||
onClose={() => {
|
|
||||||
setIsScheduleModalOpen(false);
|
|
||||||
setReportToSchedule(null);
|
|
||||||
}}
|
|
||||||
title="Programar reporte"
|
|
||||||
>
|
|
||||||
<div className="space-y-4">
|
|
||||||
<p>Configurar programación para: <strong>{reportToSchedule?.name}</strong></p>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
|
||||||
Frecuencia
|
|
||||||
</label>
|
|
||||||
<Select>
|
|
||||||
<option value="daily">Diario</option>
|
|
||||||
<option value="weekly">Semanal</option>
|
|
||||||
<option value="monthly">Mensual</option>
|
|
||||||
<option value="quarterly">Trimestral</option>
|
|
||||||
</Select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
|
||||||
Hora de ejecución
|
|
||||||
</label>
|
|
||||||
<Input type="time" defaultValue="09:00" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
|
||||||
Destinatarios (emails separados por coma)
|
|
||||||
</label>
|
|
||||||
<Input
|
|
||||||
type="text"
|
|
||||||
placeholder="ejemplo@empresa.com, otro@empresa.com"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex justify-end gap-2">
|
|
||||||
<Button
|
|
||||||
variant="outline"
|
|
||||||
onClick={() => {
|
|
||||||
setIsScheduleModalOpen(false);
|
|
||||||
setReportToSchedule(null);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Cancelar
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
variant="primary"
|
|
||||||
onClick={() => {
|
|
||||||
if (reportToSchedule && onScheduleReport) {
|
|
||||||
onScheduleReport(reportToSchedule);
|
|
||||||
}
|
|
||||||
setIsScheduleModalOpen(false);
|
|
||||||
setReportToSchedule(null);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Programar
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Modal>
|
|
||||||
|
|
||||||
{/* Share Modal */}
|
|
||||||
<Modal
|
|
||||||
isOpen={isShareModalOpen}
|
|
||||||
onClose={() => {
|
|
||||||
setIsShareModalOpen(false);
|
|
||||||
setReportToShare(null);
|
|
||||||
}}
|
|
||||||
title="Compartir reporte"
|
|
||||||
>
|
|
||||||
<div className="space-y-4">
|
|
||||||
<p>Compartir: <strong>{reportToShare?.name}</strong></p>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
|
||||||
Generar enlace de acceso
|
|
||||||
</label>
|
|
||||||
<div className="flex gap-2">
|
|
||||||
<Input
|
|
||||||
type="text"
|
|
||||||
value={`${window.location.origin}/reports/${reportToShare?.id}/shared`}
|
|
||||||
readOnly
|
|
||||||
className="flex-1"
|
|
||||||
/>
|
|
||||||
<Button
|
|
||||||
variant="outline"
|
|
||||||
size="sm"
|
|
||||||
onClick={() => {
|
|
||||||
navigator.clipboard.writeText(`${window.location.origin}/reports/${reportToShare?.id}/shared`);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Copiar
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<input type="checkbox" id="expire-link" />
|
|
||||||
<label htmlFor="expire-link" className="text-sm">
|
|
||||||
El enlace expira en 7 días
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<input type="checkbox" id="password-protect" />
|
|
||||||
<label htmlFor="password-protect" className="text-sm">
|
|
||||||
Proteger con contraseña
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex justify-end gap-2">
|
|
||||||
<Button
|
|
||||||
variant="outline"
|
|
||||||
onClick={() => {
|
|
||||||
setIsShareModalOpen(false);
|
|
||||||
setReportToShare(null);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Cancelar
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
variant="primary"
|
|
||||||
onClick={() => {
|
|
||||||
if (reportToShare && onShareReport) {
|
|
||||||
onShareReport(reportToShare);
|
|
||||||
}
|
|
||||||
setIsShareModalOpen(false);
|
|
||||||
setReportToShare(null);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Generar enlace
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Modal>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default ReportsTable;
|
|
||||||
@@ -1,298 +0,0 @@
|
|||||||
import React, { forwardRef, HTMLAttributes, ReactNode, useState } from 'react';
|
|
||||||
import { clsx } from 'clsx';
|
|
||||||
import { Card, CardHeader, CardBody, CardFooter, Button, Badge } from '../../ui';
|
|
||||||
|
|
||||||
export interface DashboardCardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
|
|
||||||
// Card variants for different dashboard contexts
|
|
||||||
variant?: 'metric' | 'chart' | 'list' | 'activity' | 'status' | 'action';
|
|
||||||
|
|
||||||
// Header props
|
|
||||||
title?: ReactNode;
|
|
||||||
subtitle?: ReactNode;
|
|
||||||
icon?: ReactNode;
|
|
||||||
headerActions?: ReactNode;
|
|
||||||
|
|
||||||
// Loading and state management
|
|
||||||
isLoading?: boolean;
|
|
||||||
hasError?: boolean;
|
|
||||||
errorMessage?: string;
|
|
||||||
isEmpty?: boolean;
|
|
||||||
emptyMessage?: string;
|
|
||||||
|
|
||||||
// Footer props
|
|
||||||
footerActions?: ReactNode;
|
|
||||||
footerText?: ReactNode;
|
|
||||||
|
|
||||||
// Badge/notification support
|
|
||||||
badge?: string | number;
|
|
||||||
badgeVariant?: 'default' | 'primary' | 'success' | 'warning' | 'error';
|
|
||||||
|
|
||||||
// Interactive behavior
|
|
||||||
interactive?: boolean;
|
|
||||||
onClick?: () => void;
|
|
||||||
onRefresh?: () => void;
|
|
||||||
|
|
||||||
// Layout customization
|
|
||||||
padding?: 'none' | 'sm' | 'md' | 'lg';
|
|
||||||
headerPadding?: 'none' | 'sm' | 'md' | 'lg';
|
|
||||||
bodyPadding?: 'none' | 'sm' | 'md' | 'lg';
|
|
||||||
|
|
||||||
// Accessibility
|
|
||||||
'aria-label'?: string;
|
|
||||||
'aria-describedby'?: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
const DashboardCard = forwardRef<HTMLDivElement, DashboardCardProps>(({
|
|
||||||
variant = 'metric',
|
|
||||||
title,
|
|
||||||
subtitle,
|
|
||||||
icon,
|
|
||||||
headerActions,
|
|
||||||
isLoading = false,
|
|
||||||
hasError = false,
|
|
||||||
errorMessage = 'Ha ocurrido un error',
|
|
||||||
isEmpty = false,
|
|
||||||
emptyMessage = 'No hay datos disponibles',
|
|
||||||
footerActions,
|
|
||||||
footerText,
|
|
||||||
badge,
|
|
||||||
badgeVariant = 'primary',
|
|
||||||
interactive = false,
|
|
||||||
onClick,
|
|
||||||
onRefresh,
|
|
||||||
padding = 'md',
|
|
||||||
headerPadding,
|
|
||||||
bodyPadding,
|
|
||||||
className,
|
|
||||||
children,
|
|
||||||
'aria-label': ariaLabel,
|
|
||||||
'aria-describedby': ariaDescribedby,
|
|
||||||
...props
|
|
||||||
}, ref) => {
|
|
||||||
const [isRefreshing, setIsRefreshing] = useState(false);
|
|
||||||
|
|
||||||
const handleRefresh = async () => {
|
|
||||||
if (onRefresh && !isRefreshing) {
|
|
||||||
setIsRefreshing(true);
|
|
||||||
try {
|
|
||||||
await onRefresh();
|
|
||||||
} finally {
|
|
||||||
setIsRefreshing(false);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const variantStyles = {
|
|
||||||
metric: 'bg-gradient-to-br from-white to-blue-50 border-blue-200 hover:border-blue-300',
|
|
||||||
chart: 'bg-white border-gray-200 hover:border-gray-300',
|
|
||||||
list: 'bg-white border-gray-200 hover:border-gray-300',
|
|
||||||
activity: 'bg-gradient-to-br from-white to-green-50 border-green-200 hover:border-green-300',
|
|
||||||
status: 'bg-gradient-to-br from-white to-purple-50 border-purple-200 hover:border-purple-300',
|
|
||||||
action: 'bg-gradient-to-br from-white to-amber-50 border-amber-200 hover:border-amber-300 hover:shadow-lg'
|
|
||||||
};
|
|
||||||
|
|
||||||
const cardClasses = clsx(
|
|
||||||
variantStyles[variant],
|
|
||||||
'transition-all duration-300',
|
|
||||||
{
|
|
||||||
'cursor-pointer transform hover:-translate-y-1': interactive || onClick,
|
|
||||||
'opacity-50': isLoading,
|
|
||||||
'border-red-300 bg-red-50': hasError,
|
|
||||||
},
|
|
||||||
className
|
|
||||||
);
|
|
||||||
|
|
||||||
const hasHeader = title || subtitle || icon || headerActions || badge || onRefresh;
|
|
||||||
|
|
||||||
const renderSkeletonContent = () => {
|
|
||||||
switch (variant) {
|
|
||||||
case 'metric':
|
|
||||||
return (
|
|
||||||
<div className="space-y-3">
|
|
||||||
<div className="h-8 bg-gray-200 rounded animate-pulse" />
|
|
||||||
<div className="h-12 bg-gray-200 rounded animate-pulse" />
|
|
||||||
<div className="h-4 bg-gray-200 rounded animate-pulse w-2/3" />
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
case 'chart':
|
|
||||||
return (
|
|
||||||
<div className="space-y-4">
|
|
||||||
<div className="h-6 bg-gray-200 rounded animate-pulse w-1/2" />
|
|
||||||
<div className="h-32 bg-gray-200 rounded animate-pulse" />
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
case 'list':
|
|
||||||
return (
|
|
||||||
<div className="space-y-2">
|
|
||||||
{Array.from({ length: 3 }).map((_, i) => (
|
|
||||||
<div key={i} className="flex items-center space-x-3">
|
|
||||||
<div className="w-8 h-8 bg-gray-200 rounded-full animate-pulse" />
|
|
||||||
<div className="flex-1 space-y-2">
|
|
||||||
<div className="h-4 bg-gray-200 rounded animate-pulse" />
|
|
||||||
<div className="h-3 bg-gray-200 rounded animate-pulse w-2/3" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
default:
|
|
||||||
return <div className="h-24 bg-gray-200 rounded animate-pulse" />;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const renderErrorContent = () => (
|
|
||||||
<div className="text-center py-8">
|
|
||||||
<div className="text-red-500 mb-4">
|
|
||||||
<svg
|
|
||||||
className="w-12 h-12 mx-auto"
|
|
||||||
fill="none"
|
|
||||||
stroke="currentColor"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
strokeLinecap="round"
|
|
||||||
strokeLinejoin="round"
|
|
||||||
strokeWidth={2}
|
|
||||||
d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.732-.833-2.464 0L4.35 16.5c-.77.833.192 2.5 1.732 2.5z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
<p className="text-gray-600 mb-4">{errorMessage}</p>
|
|
||||||
{onRefresh && (
|
|
||||||
<Button
|
|
||||||
variant="outline"
|
|
||||||
size="sm"
|
|
||||||
onClick={handleRefresh}
|
|
||||||
isLoading={isRefreshing}
|
|
||||||
>
|
|
||||||
Reintentar
|
|
||||||
</Button>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
|
|
||||||
const renderEmptyContent = () => (
|
|
||||||
<div className="text-center py-8">
|
|
||||||
<div className="text-gray-400 mb-4">
|
|
||||||
<svg
|
|
||||||
className="w-12 h-12 mx-auto"
|
|
||||||
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>
|
|
||||||
<p className="text-gray-500">{emptyMessage}</p>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Card
|
|
||||||
ref={ref}
|
|
||||||
className={cardClasses}
|
|
||||||
padding={padding}
|
|
||||||
interactive={interactive}
|
|
||||||
onClick={onClick}
|
|
||||||
aria-label={ariaLabel}
|
|
||||||
aria-describedby={ariaDescribedby}
|
|
||||||
{...props}
|
|
||||||
>
|
|
||||||
{hasHeader && (
|
|
||||||
<CardHeader
|
|
||||||
padding={headerPadding}
|
|
||||||
className="flex items-center justify-between"
|
|
||||||
>
|
|
||||||
<div className="flex items-center space-x-3 min-w-0 flex-1">
|
|
||||||
{icon && (
|
|
||||||
<div className="flex-shrink-0 text-gray-600">
|
|
||||||
{icon}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
<div className="min-w-0 flex-1">
|
|
||||||
{title && (
|
|
||||||
<div className="flex items-center space-x-2">
|
|
||||||
<h3 className="text-lg font-semibold text-gray-900 truncate">
|
|
||||||
{title}
|
|
||||||
</h3>
|
|
||||||
{badge && (
|
|
||||||
<Badge
|
|
||||||
variant={badgeVariant}
|
|
||||||
size="sm"
|
|
||||||
shape="pill"
|
|
||||||
>
|
|
||||||
{badge}
|
|
||||||
</Badge>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{subtitle && (
|
|
||||||
<p className="text-sm text-gray-600 mt-1 truncate">
|
|
||||||
{subtitle}
|
|
||||||
</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex items-center space-x-2 flex-shrink-0">
|
|
||||||
{onRefresh && (
|
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
size="sm"
|
|
||||||
onClick={handleRefresh}
|
|
||||||
isLoading={isRefreshing}
|
|
||||||
aria-label="Actualizar datos"
|
|
||||||
className="text-gray-500 hover:text-gray-700"
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
className="w-4 h-4"
|
|
||||||
fill="none"
|
|
||||||
stroke="currentColor"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
strokeLinecap="round"
|
|
||||||
strokeLinejoin="round"
|
|
||||||
strokeWidth={2}
|
|
||||||
d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</Button>
|
|
||||||
)}
|
|
||||||
{headerActions}
|
|
||||||
</div>
|
|
||||||
</CardHeader>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<CardBody padding={bodyPadding}>
|
|
||||||
{isLoading
|
|
||||||
? renderSkeletonContent()
|
|
||||||
: hasError
|
|
||||||
? renderErrorContent()
|
|
||||||
: isEmpty
|
|
||||||
? renderEmptyContent()
|
|
||||||
: children}
|
|
||||||
</CardBody>
|
|
||||||
|
|
||||||
{(footerActions || footerText) && (
|
|
||||||
<CardFooter className="flex items-center justify-between">
|
|
||||||
<div className="text-sm text-gray-600">
|
|
||||||
{footerText}
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center space-x-2">
|
|
||||||
{footerActions}
|
|
||||||
</div>
|
|
||||||
</CardFooter>
|
|
||||||
)}
|
|
||||||
</Card>
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
DashboardCard.displayName = 'DashboardCard';
|
|
||||||
|
|
||||||
export default DashboardCard;
|
|
||||||
@@ -1,258 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
import { motion } from 'framer-motion';
|
|
||||||
import {
|
|
||||||
TrendingUp,
|
|
||||||
Package,
|
|
||||||
AlertCircle,
|
|
||||||
Cloud,
|
|
||||||
Clock,
|
|
||||||
DollarSign,
|
|
||||||
Users,
|
|
||||||
ShoppingCart
|
|
||||||
} from 'lucide-react';
|
|
||||||
import { Card } from '../../ui';
|
|
||||||
import { Badge } from '../../ui';
|
|
||||||
import { useQuery } from '@tanstack/react-query';
|
|
||||||
import { dashboardService } from '../../../services/api/dashboard.service';
|
|
||||||
import { ForecastChart } from '../forecasting/ForecastChart';
|
|
||||||
import { SalesChart } from '../sales/SalesChart';
|
|
||||||
import { AIInsightCard } from '../ai/AIInsightCard';
|
|
||||||
import { ProductionStatusCard } from '../production/ProductionStatusCard';
|
|
||||||
import { AlertsFeed } from '../alerts/AlertsFeed';
|
|
||||||
import { useBakeryStore } from '../../../stores/bakery.store';
|
|
||||||
|
|
||||||
export const DashboardGrid: React.FC = () => {
|
|
||||||
const { currentTenant, bakeryType } = useBakeryStore();
|
|
||||||
|
|
||||||
const { data: dashboardData, isLoading } = useQuery({
|
|
||||||
queryKey: ['dashboard', currentTenant?.id],
|
|
||||||
queryFn: () => dashboardService.getDashboardData(currentTenant!.id),
|
|
||||||
enabled: !!currentTenant,
|
|
||||||
refetchInterval: 60000, // Refresh every minute
|
|
||||||
});
|
|
||||||
|
|
||||||
const containerVariants = {
|
|
||||||
hidden: { opacity: 0 },
|
|
||||||
visible: {
|
|
||||||
opacity: 1,
|
|
||||||
transition: {
|
|
||||||
staggerChildren: 0.1,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
const itemVariants = {
|
|
||||||
hidden: { y: 20, opacity: 0 },
|
|
||||||
visible: {
|
|
||||||
y: 0,
|
|
||||||
opacity: 1,
|
|
||||||
transition: {
|
|
||||||
type: 'spring',
|
|
||||||
stiffness: 100,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
if (isLoading) {
|
|
||||||
return <DashboardSkeleton />;
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<motion.div
|
|
||||||
className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 p-6"
|
|
||||||
variants={containerVariants}
|
|
||||||
initial="hidden"
|
|
||||||
animate="visible"
|
|
||||||
>
|
|
||||||
{/* KPI Cards Row */}
|
|
||||||
<motion.div variants={itemVariants}>
|
|
||||||
<KPICard
|
|
||||||
title="Ventas Hoy"
|
|
||||||
value={`€${dashboardData?.sales_today || 0}`}
|
|
||||||
change={dashboardData?.sales_change || 0}
|
|
||||||
icon={<DollarSign className="w-5 h-5" />}
|
|
||||||
color="green"
|
|
||||||
/>
|
|
||||||
</motion.div>
|
|
||||||
|
|
||||||
<motion.div variants={itemVariants}>
|
|
||||||
<KPICard
|
|
||||||
title="Productos Vendidos"
|
|
||||||
value={dashboardData?.products_sold || 0}
|
|
||||||
change={dashboardData?.products_change || 0}
|
|
||||||
icon={<Package className="w-5 h-5" />}
|
|
||||||
color="blue"
|
|
||||||
/>
|
|
||||||
</motion.div>
|
|
||||||
|
|
||||||
<motion.div variants={itemVariants}>
|
|
||||||
<KPICard
|
|
||||||
title="Alertas Activas"
|
|
||||||
value={dashboardData?.active_alerts || 0}
|
|
||||||
urgent={dashboardData?.urgent_alerts || 0}
|
|
||||||
icon={<AlertCircle className="w-5 h-5" />}
|
|
||||||
color="orange"
|
|
||||||
/>
|
|
||||||
</motion.div>
|
|
||||||
|
|
||||||
<motion.div variants={itemVariants}>
|
|
||||||
<WeatherCard
|
|
||||||
temperature={dashboardData?.weather?.temperature}
|
|
||||||
condition={dashboardData?.weather?.condition}
|
|
||||||
impact={dashboardData?.weather?.sales_impact}
|
|
||||||
/>
|
|
||||||
</motion.div>
|
|
||||||
|
|
||||||
{/* Charts Row */}
|
|
||||||
<motion.div variants={itemVariants} className="col-span-full lg:col-span-2">
|
|
||||||
<Card className="h-full">
|
|
||||||
<Card.Header>
|
|
||||||
<Card.Title>Predicción de Demanda - 7 Días</Card.Title>
|
|
||||||
</Card.Header>
|
|
||||||
<Card.Content className="h-80">
|
|
||||||
<ForecastChart
|
|
||||||
data={dashboardData?.forecast_data || []}
|
|
||||||
confidence={dashboardData?.confidence_interval}
|
|
||||||
interactive
|
|
||||||
/>
|
|
||||||
</Card.Content>
|
|
||||||
</Card>
|
|
||||||
</motion.div>
|
|
||||||
|
|
||||||
<motion.div variants={itemVariants} className="col-span-full lg:col-span-2">
|
|
||||||
<Card className="h-full">
|
|
||||||
<Card.Header>
|
|
||||||
<Card.Title>Análisis de Ventas</Card.Title>
|
|
||||||
</Card.Header>
|
|
||||||
<Card.Content className="h-80">
|
|
||||||
<SalesChart
|
|
||||||
data={dashboardData?.sales_data || []}
|
|
||||||
comparison="previous_week"
|
|
||||||
breakdown="category"
|
|
||||||
/>
|
|
||||||
</Card.Content>
|
|
||||||
</Card>
|
|
||||||
</motion.div>
|
|
||||||
|
|
||||||
{/* Status Cards */}
|
|
||||||
{bakeryType === 'individual' && (
|
|
||||||
<motion.div variants={itemVariants} className="col-span-full xl:col-span-2">
|
|
||||||
<ProductionStatusCard
|
|
||||||
batches={dashboardData?.production_batches || []}
|
|
||||||
efficiency={dashboardData?.production_efficiency}
|
|
||||||
/>
|
|
||||||
</motion.div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* AI Insights */}
|
|
||||||
<motion.div variants={itemVariants} className="col-span-full xl:col-span-1">
|
|
||||||
<AIInsightCard
|
|
||||||
insights={dashboardData?.ai_insights || []}
|
|
||||||
onActionClick={(action) => console.log('AI Action:', action)}
|
|
||||||
/>
|
|
||||||
</motion.div>
|
|
||||||
|
|
||||||
{/* Real-time Alerts Feed */}
|
|
||||||
<motion.div variants={itemVariants} className="col-span-full xl:col-span-1">
|
|
||||||
<AlertsFeed />
|
|
||||||
</motion.div>
|
|
||||||
</motion.div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
// KPI Card Component
|
|
||||||
interface KPICardProps {
|
|
||||||
title: string;
|
|
||||||
value: string | number;
|
|
||||||
change?: number;
|
|
||||||
urgent?: number;
|
|
||||||
icon: React.ReactNode;
|
|
||||||
color: 'green' | 'blue' | 'orange' | 'red';
|
|
||||||
}
|
|
||||||
|
|
||||||
const KPICard: React.FC<KPICardProps> = ({
|
|
||||||
title,
|
|
||||||
value,
|
|
||||||
change,
|
|
||||||
urgent,
|
|
||||||
icon,
|
|
||||||
color
|
|
||||||
}) => {
|
|
||||||
const colorClasses = {
|
|
||||||
green: 'bg-green-50 text-green-600 border-green-200',
|
|
||||||
blue: 'bg-blue-50 text-blue-600 border-blue-200',
|
|
||||||
orange: 'bg-orange-50 text-orange-600 border-orange-200',
|
|
||||||
red: 'bg-red-50 text-red-600 border-red-200',
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Card className={`relative overflow-hidden ${colorClasses[color]} border-2`}>
|
|
||||||
<Card.Content className="p-6">
|
|
||||||
<div className="flex items-center justify-between mb-4">
|
|
||||||
<div className={`p-2 rounded-lg ${color === 'green' ? 'bg-green-100' : color === 'blue' ? 'bg-blue-100' : color === 'orange' ? 'bg-orange-100' : 'bg-red-100'}`}>
|
|
||||||
{icon}
|
|
||||||
</div>
|
|
||||||
{urgent !== undefined && urgent > 0 && (
|
|
||||||
<Badge variant="destructive" className="animate-pulse">
|
|
||||||
{urgent} Urgente
|
|
||||||
</Badge>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="space-y-1">
|
|
||||||
<p className="text-sm font-medium text-gray-600">{title}</p>
|
|
||||||
<p className="text-2xl font-bold">{value}</p>
|
|
||||||
|
|
||||||
{change !== undefined && (
|
|
||||||
<div className="flex items-center space-x-1 text-sm">
|
|
||||||
<TrendingUp className={`w-4 h-4 ${change >= 0 ? 'text-green-500' : 'text-red-500 rotate-180'}`} />
|
|
||||||
<span className={change >= 0 ? 'text-green-600' : 'text-red-600'}>
|
|
||||||
{Math.abs(change)}%
|
|
||||||
</span>
|
|
||||||
<span className="text-gray-500">vs ayer</span>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</Card.Content>
|
|
||||||
</Card>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
// Weather Impact Card
|
|
||||||
const WeatherCard: React.FC<{
|
|
||||||
temperature?: number;
|
|
||||||
condition?: string;
|
|
||||||
impact?: string;
|
|
||||||
}> = ({ temperature, condition, impact }) => {
|
|
||||||
return (
|
|
||||||
<Card className="bg-gradient-to-br from-blue-50 to-cyan-50 border-blue-200">
|
|
||||||
<Card.Content className="p-6">
|
|
||||||
<div className="flex items-center justify-between mb-4">
|
|
||||||
<Cloud className="w-8 h-8 text-blue-500" />
|
|
||||||
<Badge variant={impact === 'positive' ? 'success' : impact === 'negative' ? 'destructive' : 'secondary'}>
|
|
||||||
{impact === 'positive' ? '↑' : impact === 'negative' ? '↓' : '='} Impacto
|
|
||||||
</Badge>
|
|
||||||
</div>
|
|
||||||
<div className="space-y-1">
|
|
||||||
<p className="text-2xl font-bold">{temperature}°C</p>
|
|
||||||
<p className="text-sm text-gray-600">{condition}</p>
|
|
||||||
</div>
|
|
||||||
</Card.Content>
|
|
||||||
</Card>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
const DashboardSkeleton: React.FC = () => {
|
|
||||||
return (
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 p-6">
|
|
||||||
{[...Array(8)].map((_, i) => (
|
|
||||||
<Card key={i} className="animate-pulse">
|
|
||||||
<Card.Content className="p-6">
|
|
||||||
<div className="h-8 bg-gray-200 rounded w-3/4 mb-4" />
|
|
||||||
<div className="h-12 bg-gray-300 rounded w-1/2" />
|
|
||||||
</Card.Content>
|
|
||||||
</Card>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@@ -1,382 +0,0 @@
|
|||||||
import React, { KeyboardEvent, useCallback, useMemo } from 'react';
|
|
||||||
import { clsx } from 'clsx';
|
|
||||||
import { Button, Badge } from '../../ui';
|
|
||||||
|
|
||||||
export interface QuickAction {
|
|
||||||
id: string;
|
|
||||||
title: string;
|
|
||||||
description?: string;
|
|
||||||
icon: React.ReactNode;
|
|
||||||
onClick: () => void;
|
|
||||||
href?: string;
|
|
||||||
|
|
||||||
// Badge/notification support
|
|
||||||
badge?: string | number;
|
|
||||||
badgeVariant?: 'default' | 'primary' | 'success' | 'warning' | 'error';
|
|
||||||
|
|
||||||
// Access control
|
|
||||||
permissions?: string[];
|
|
||||||
requiredRole?: string;
|
|
||||||
isDisabled?: boolean;
|
|
||||||
disabledReason?: string;
|
|
||||||
|
|
||||||
// Styling
|
|
||||||
variant?: 'primary' | 'secondary' | 'outline' | 'success' | 'warning' | 'danger';
|
|
||||||
color?: string;
|
|
||||||
backgroundGradient?: string;
|
|
||||||
|
|
||||||
// Keyboard shortcuts
|
|
||||||
shortcut?: string;
|
|
||||||
|
|
||||||
// Priority for ordering
|
|
||||||
priority?: number;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface QuickActionsProps {
|
|
||||||
actions: QuickAction[];
|
|
||||||
|
|
||||||
// Layout configuration
|
|
||||||
columns?: 2 | 3 | 4 | 5 | 6;
|
|
||||||
gap?: 'sm' | 'md' | 'lg';
|
|
||||||
size?: 'sm' | 'md' | 'lg';
|
|
||||||
|
|
||||||
// Filtering and user context
|
|
||||||
userRole?: string;
|
|
||||||
userPermissions?: string[];
|
|
||||||
showDisabled?: boolean;
|
|
||||||
maxActions?: number;
|
|
||||||
|
|
||||||
// Event handlers
|
|
||||||
onActionClick?: (action: QuickAction) => void;
|
|
||||||
onActionHover?: (action: QuickAction) => void;
|
|
||||||
|
|
||||||
// Accessibility
|
|
||||||
'aria-label'?: string;
|
|
||||||
className?: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Predefined bakery actions with Spanish context
|
|
||||||
export const BAKERY_QUICK_ACTIONS: QuickAction[] = [
|
|
||||||
{
|
|
||||||
id: 'new-order',
|
|
||||||
title: 'Nuevo Pedido',
|
|
||||||
description: 'Crear un nuevo pedido de cliente',
|
|
||||||
icon: (
|
|
||||||
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
|
|
||||||
</svg>
|
|
||||||
),
|
|
||||||
onClick: () => console.log('Nuevo pedido'),
|
|
||||||
variant: 'primary',
|
|
||||||
backgroundGradient: 'from-blue-500 to-blue-600',
|
|
||||||
priority: 1
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'add-product',
|
|
||||||
title: 'Agregar Producto',
|
|
||||||
description: 'Añadir nuevo producto al inventario',
|
|
||||||
icon: (
|
|
||||||
<svg className="w-6 h-6" 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>
|
|
||||||
),
|
|
||||||
onClick: () => console.log('Agregar producto'),
|
|
||||||
variant: 'success',
|
|
||||||
backgroundGradient: 'from-green-500 to-green-600',
|
|
||||||
priority: 2
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'view-inventory',
|
|
||||||
title: 'Ver Inventario',
|
|
||||||
description: 'Consultar stock y productos',
|
|
||||||
icon: (
|
|
||||||
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" />
|
|
||||||
</svg>
|
|
||||||
),
|
|
||||||
onClick: () => console.log('Ver inventario'),
|
|
||||||
variant: 'outline',
|
|
||||||
backgroundGradient: 'from-purple-500 to-purple-600',
|
|
||||||
priority: 3,
|
|
||||||
badge: '5',
|
|
||||||
badgeVariant: 'warning'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'production-batch',
|
|
||||||
title: 'Nueva Producción',
|
|
||||||
description: 'Programar lote de producción',
|
|
||||||
icon: (
|
|
||||||
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
|
|
||||||
</svg>
|
|
||||||
),
|
|
||||||
onClick: () => console.log('Nueva producción'),
|
|
||||||
variant: 'warning',
|
|
||||||
backgroundGradient: 'from-orange-500 to-orange-600',
|
|
||||||
priority: 4
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'sales-report',
|
|
||||||
title: 'Reporte Ventas',
|
|
||||||
description: 'Ver análisis de ventas',
|
|
||||||
icon: (
|
|
||||||
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
|
|
||||||
</svg>
|
|
||||||
),
|
|
||||||
onClick: () => console.log('Reporte ventas'),
|
|
||||||
variant: 'secondary',
|
|
||||||
backgroundGradient: 'from-indigo-500 to-indigo-600',
|
|
||||||
priority: 5
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'manage-suppliers',
|
|
||||||
title: 'Proveedores',
|
|
||||||
description: 'Gestionar proveedores',
|
|
||||||
icon: (
|
|
||||||
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
|
|
||||||
</svg>
|
|
||||||
),
|
|
||||||
onClick: () => console.log('Proveedores'),
|
|
||||||
variant: 'outline',
|
|
||||||
backgroundGradient: 'from-teal-500 to-teal-600',
|
|
||||||
priority: 6
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'pos-system',
|
|
||||||
title: 'Sistema POS',
|
|
||||||
description: 'Punto de venta',
|
|
||||||
icon: (
|
|
||||||
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z" />
|
|
||||||
</svg>
|
|
||||||
),
|
|
||||||
onClick: () => console.log('Sistema POS'),
|
|
||||||
variant: 'primary',
|
|
||||||
backgroundGradient: 'from-emerald-500 to-emerald-600',
|
|
||||||
priority: 7
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'quality-control',
|
|
||||||
title: 'Control Calidad',
|
|
||||||
description: 'Verificación de calidad',
|
|
||||||
icon: (
|
|
||||||
<svg className="w-6 h-6" 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>
|
|
||||||
),
|
|
||||||
onClick: () => console.log('Control calidad'),
|
|
||||||
variant: 'success',
|
|
||||||
backgroundGradient: 'from-lime-500 to-lime-600',
|
|
||||||
priority: 8,
|
|
||||||
requiredRole: 'quality_manager'
|
|
||||||
}
|
|
||||||
];
|
|
||||||
|
|
||||||
const QuickActions: React.FC<QuickActionsProps> = ({
|
|
||||||
actions,
|
|
||||||
columns = 3,
|
|
||||||
gap = 'md',
|
|
||||||
size = 'md',
|
|
||||||
userRole,
|
|
||||||
userPermissions = [],
|
|
||||||
showDisabled = false,
|
|
||||||
maxActions,
|
|
||||||
onActionClick,
|
|
||||||
onActionHover,
|
|
||||||
'aria-label': ariaLabel = 'Acciones rápidas',
|
|
||||||
className
|
|
||||||
}) => {
|
|
||||||
// Filter and sort actions
|
|
||||||
const visibleActions = useMemo(() => {
|
|
||||||
let filteredActions = actions.filter(action => {
|
|
||||||
// Role-based filtering
|
|
||||||
if (action.requiredRole && userRole !== action.requiredRole) {
|
|
||||||
return showDisabled;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Permission-based filtering
|
|
||||||
if (action.permissions && action.permissions.length > 0) {
|
|
||||||
const hasPermission = action.permissions.some(perm =>
|
|
||||||
userPermissions.includes(perm)
|
|
||||||
);
|
|
||||||
if (!hasPermission) {
|
|
||||||
return showDisabled;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return true;
|
|
||||||
});
|
|
||||||
|
|
||||||
// Sort by priority
|
|
||||||
filteredActions.sort((a, b) => (a.priority || 999) - (b.priority || 999));
|
|
||||||
|
|
||||||
// Limit actions if specified
|
|
||||||
if (maxActions) {
|
|
||||||
filteredActions = filteredActions.slice(0, maxActions);
|
|
||||||
}
|
|
||||||
|
|
||||||
return filteredActions;
|
|
||||||
}, [actions, userRole, userPermissions, showDisabled, maxActions]);
|
|
||||||
|
|
||||||
const handleActionClick = useCallback((action: QuickAction) => {
|
|
||||||
if (action.isDisabled) return;
|
|
||||||
|
|
||||||
onActionClick?.(action);
|
|
||||||
action.onClick();
|
|
||||||
}, [onActionClick]);
|
|
||||||
|
|
||||||
const handleKeyDown = useCallback((event: KeyboardEvent<HTMLButtonElement>, action: QuickAction) => {
|
|
||||||
if (event.key === 'Enter' || event.key === ' ') {
|
|
||||||
event.preventDefault();
|
|
||||||
handleActionClick(action);
|
|
||||||
}
|
|
||||||
}, [handleActionClick]);
|
|
||||||
|
|
||||||
const gridClasses = {
|
|
||||||
2: 'grid-cols-2 sm:grid-cols-2',
|
|
||||||
3: 'grid-cols-2 sm:grid-cols-3',
|
|
||||||
4: 'grid-cols-2 sm:grid-cols-3 lg:grid-cols-4',
|
|
||||||
5: 'grid-cols-2 sm:grid-cols-3 lg:grid-cols-5',
|
|
||||||
6: 'grid-cols-2 sm:grid-cols-3 lg:grid-cols-6'
|
|
||||||
};
|
|
||||||
|
|
||||||
const gapClasses = {
|
|
||||||
sm: 'gap-2',
|
|
||||||
md: 'gap-4',
|
|
||||||
lg: 'gap-6'
|
|
||||||
};
|
|
||||||
|
|
||||||
const sizeClasses = {
|
|
||||||
sm: 'p-3 min-h-[80px]',
|
|
||||||
md: 'p-4 min-h-[100px]',
|
|
||||||
lg: 'p-6 min-h-[120px]'
|
|
||||||
};
|
|
||||||
|
|
||||||
if (visibleActions.length === 0) {
|
|
||||||
return (
|
|
||||||
<div className="text-center py-8 text-gray-500">
|
|
||||||
<p>No hay acciones disponibles</p>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
className={clsx(
|
|
||||||
'grid',
|
|
||||||
gridClasses[columns],
|
|
||||||
gapClasses[gap],
|
|
||||||
className
|
|
||||||
)}
|
|
||||||
role="grid"
|
|
||||||
aria-label={ariaLabel}
|
|
||||||
>
|
|
||||||
{visibleActions.map((action) => {
|
|
||||||
const isDisabled = action.isDisabled ||
|
|
||||||
(action.requiredRole && userRole !== action.requiredRole) ||
|
|
||||||
(action.permissions && !action.permissions.some(perm => userPermissions.includes(perm)));
|
|
||||||
|
|
||||||
const buttonClasses = clsx(
|
|
||||||
'relative group transition-all duration-200',
|
|
||||||
'border border-gray-200 rounded-xl',
|
|
||||||
'flex flex-col items-center justify-center text-center',
|
|
||||||
'hover:shadow-lg hover:-translate-y-1',
|
|
||||||
'focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2',
|
|
||||||
sizeClasses[size],
|
|
||||||
{
|
|
||||||
'bg-white hover:bg-gray-50': !action.backgroundGradient,
|
|
||||||
'bg-gradient-to-br text-white hover:opacity-90': action.backgroundGradient,
|
|
||||||
'opacity-50 cursor-not-allowed hover:transform-none hover:shadow-none': isDisabled,
|
|
||||||
}
|
|
||||||
);
|
|
||||||
|
|
||||||
const gradientStyle = action.backgroundGradient ? {
|
|
||||||
background: `linear-gradient(135deg, var(--tw-gradient-stops))`,
|
|
||||||
} : undefined;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<button
|
|
||||||
key={action.id}
|
|
||||||
className={buttonClasses}
|
|
||||||
onClick={() => handleActionClick(action)}
|
|
||||||
onKeyDown={(e) => handleKeyDown(e, action)}
|
|
||||||
onMouseEnter={() => onActionHover?.(action)}
|
|
||||||
disabled={isDisabled}
|
|
||||||
title={isDisabled ? action.disabledReason || 'Acción no disponible' : action.description}
|
|
||||||
aria-label={`${action.title}. ${action.description || ''}`}
|
|
||||||
style={gradientStyle}
|
|
||||||
>
|
|
||||||
{/* Badge */}
|
|
||||||
{action.badge && (
|
|
||||||
<Badge
|
|
||||||
variant={action.badgeVariant}
|
|
||||||
size="sm"
|
|
||||||
className="absolute -top-2 -right-2 z-10"
|
|
||||||
>
|
|
||||||
{action.badge}
|
|
||||||
</Badge>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Icon */}
|
|
||||||
<div className={clsx(
|
|
||||||
'mb-2 transition-transform duration-200',
|
|
||||||
'group-hover:scale-110',
|
|
||||||
{
|
|
||||||
'text-gray-600': !action.backgroundGradient,
|
|
||||||
'text-white': action.backgroundGradient,
|
|
||||||
}
|
|
||||||
)}>
|
|
||||||
{action.icon}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Title */}
|
|
||||||
<span className={clsx(
|
|
||||||
'font-medium text-sm leading-tight',
|
|
||||||
{
|
|
||||||
'text-gray-900': !action.backgroundGradient,
|
|
||||||
'text-white': action.backgroundGradient,
|
|
||||||
}
|
|
||||||
)}>
|
|
||||||
{action.title}
|
|
||||||
</span>
|
|
||||||
|
|
||||||
{/* Description */}
|
|
||||||
{action.description && (
|
|
||||||
<span className={clsx(
|
|
||||||
'text-xs mt-1 opacity-75 leading-tight',
|
|
||||||
{
|
|
||||||
'text-gray-600': !action.backgroundGradient,
|
|
||||||
'text-white': action.backgroundGradient,
|
|
||||||
}
|
|
||||||
)}>
|
|
||||||
{action.description}
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Keyboard shortcut */}
|
|
||||||
{action.shortcut && (
|
|
||||||
<div className={clsx(
|
|
||||||
'absolute bottom-1 right-1 text-xs opacity-50',
|
|
||||||
{
|
|
||||||
'text-gray-500': !action.backgroundGradient,
|
|
||||||
'text-white': action.backgroundGradient,
|
|
||||||
}
|
|
||||||
)}>
|
|
||||||
{action.shortcut}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Hover effect overlay */}
|
|
||||||
<div className="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-5 rounded-xl transition-all duration-200" />
|
|
||||||
</button>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
QuickActions.displayName = 'QuickActions';
|
|
||||||
|
|
||||||
export default QuickActions;
|
|
||||||
@@ -1,524 +0,0 @@
|
|||||||
import React, { useMemo, useState, useCallback } from 'react';
|
|
||||||
import { clsx } from 'clsx';
|
|
||||||
import { Avatar, Badge, Button } from '../../ui';
|
|
||||||
|
|
||||||
export interface ActivityUser {
|
|
||||||
id: string;
|
|
||||||
name: string;
|
|
||||||
avatar?: string;
|
|
||||||
role?: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface ActivityItem {
|
|
||||||
id: string;
|
|
||||||
type: ActivityType;
|
|
||||||
title: string;
|
|
||||||
description: string;
|
|
||||||
timestamp: string;
|
|
||||||
user?: ActivityUser;
|
|
||||||
metadata?: Record<string, any>;
|
|
||||||
status?: ActivityStatus;
|
|
||||||
category?: string;
|
|
||||||
|
|
||||||
// Navigation support
|
|
||||||
href?: string;
|
|
||||||
onClick?: () => void;
|
|
||||||
|
|
||||||
// Visual styling
|
|
||||||
icon?: React.ReactNode;
|
|
||||||
color?: string;
|
|
||||||
priority?: ActivityPriority;
|
|
||||||
}
|
|
||||||
|
|
||||||
export enum ActivityType {
|
|
||||||
ORDER = 'order',
|
|
||||||
PRODUCTION = 'production',
|
|
||||||
INVENTORY = 'inventory',
|
|
||||||
SALES = 'sales',
|
|
||||||
USER = 'user',
|
|
||||||
SYSTEM = 'system',
|
|
||||||
QUALITY = 'quality',
|
|
||||||
SUPPLIER = 'supplier',
|
|
||||||
FINANCE = 'finance',
|
|
||||||
ALERT = 'alert'
|
|
||||||
}
|
|
||||||
|
|
||||||
export enum ActivityStatus {
|
|
||||||
SUCCESS = 'success',
|
|
||||||
WARNING = 'warning',
|
|
||||||
ERROR = 'error',
|
|
||||||
INFO = 'info',
|
|
||||||
PENDING = 'pending',
|
|
||||||
IN_PROGRESS = 'in_progress',
|
|
||||||
CANCELLED = 'cancelled'
|
|
||||||
}
|
|
||||||
|
|
||||||
export enum ActivityPriority {
|
|
||||||
LOW = 'low',
|
|
||||||
MEDIUM = 'medium',
|
|
||||||
HIGH = 'high',
|
|
||||||
URGENT = 'urgent'
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface RecentActivityProps {
|
|
||||||
activities: ActivityItem[];
|
|
||||||
|
|
||||||
// Display configuration
|
|
||||||
maxItems?: number;
|
|
||||||
showTimestamp?: boolean;
|
|
||||||
showUserAvatar?: boolean;
|
|
||||||
showTypeIcons?: boolean;
|
|
||||||
compact?: boolean;
|
|
||||||
|
|
||||||
// Filtering
|
|
||||||
allowFiltering?: boolean;
|
|
||||||
filterTypes?: ActivityType[];
|
|
||||||
defaultFilter?: ActivityType | 'all';
|
|
||||||
|
|
||||||
// Pagination and loading
|
|
||||||
hasMore?: boolean;
|
|
||||||
isLoading?: boolean;
|
|
||||||
onLoadMore?: () => void;
|
|
||||||
|
|
||||||
// Event handlers
|
|
||||||
onActivityClick?: (activity: ActivityItem) => void;
|
|
||||||
onRefresh?: () => void;
|
|
||||||
|
|
||||||
// Accessibility and styling
|
|
||||||
className?: string;
|
|
||||||
'aria-label'?: string;
|
|
||||||
emptyMessage?: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Spanish activity type labels and icons
|
|
||||||
const ACTIVITY_CONFIG = {
|
|
||||||
[ActivityType.ORDER]: {
|
|
||||||
label: 'Pedidos',
|
|
||||||
icon: (
|
|
||||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
|
|
||||||
</svg>
|
|
||||||
),
|
|
||||||
color: 'blue',
|
|
||||||
bgColor: 'bg-blue-100',
|
|
||||||
textColor: 'text-blue-600',
|
|
||||||
borderColor: 'border-blue-200'
|
|
||||||
},
|
|
||||||
[ActivityType.PRODUCTION]: {
|
|
||||||
label: 'Producción',
|
|
||||||
icon: (
|
|
||||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
|
|
||||||
</svg>
|
|
||||||
),
|
|
||||||
color: 'orange',
|
|
||||||
bgColor: 'bg-orange-100',
|
|
||||||
textColor: 'text-orange-600',
|
|
||||||
borderColor: 'border-orange-200'
|
|
||||||
},
|
|
||||||
[ActivityType.INVENTORY]: {
|
|
||||||
label: 'Inventario',
|
|
||||||
icon: (
|
|
||||||
<svg className="w-4 h-4" 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>
|
|
||||||
),
|
|
||||||
color: 'purple',
|
|
||||||
bgColor: 'bg-purple-100',
|
|
||||||
textColor: 'text-purple-600',
|
|
||||||
borderColor: 'border-purple-200'
|
|
||||||
},
|
|
||||||
[ActivityType.SALES]: {
|
|
||||||
label: 'Ventas',
|
|
||||||
icon: (
|
|
||||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
|
|
||||||
</svg>
|
|
||||||
),
|
|
||||||
color: 'green',
|
|
||||||
bgColor: 'bg-green-100',
|
|
||||||
textColor: 'text-green-600',
|
|
||||||
borderColor: 'border-green-200'
|
|
||||||
},
|
|
||||||
[ActivityType.USER]: {
|
|
||||||
label: 'Usuarios',
|
|
||||||
icon: (
|
|
||||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
|
|
||||||
</svg>
|
|
||||||
),
|
|
||||||
color: 'indigo',
|
|
||||||
bgColor: 'bg-indigo-100',
|
|
||||||
textColor: 'text-indigo-600',
|
|
||||||
borderColor: 'border-indigo-200'
|
|
||||||
},
|
|
||||||
[ActivityType.SYSTEM]: {
|
|
||||||
label: 'Sistema',
|
|
||||||
icon: (
|
|
||||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
|
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
|
||||||
</svg>
|
|
||||||
),
|
|
||||||
color: 'gray',
|
|
||||||
bgColor: 'bg-gray-100',
|
|
||||||
textColor: 'text-gray-600',
|
|
||||||
borderColor: 'border-gray-200'
|
|
||||||
},
|
|
||||||
[ActivityType.QUALITY]: {
|
|
||||||
label: 'Calidad',
|
|
||||||
icon: (
|
|
||||||
<svg className="w-4 h-4" 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>
|
|
||||||
),
|
|
||||||
color: 'green',
|
|
||||||
bgColor: 'bg-green-100',
|
|
||||||
textColor: 'text-green-600',
|
|
||||||
borderColor: 'border-green-200'
|
|
||||||
},
|
|
||||||
[ActivityType.SUPPLIER]: {
|
|
||||||
label: 'Proveedores',
|
|
||||||
icon: (
|
|
||||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
|
|
||||||
</svg>
|
|
||||||
),
|
|
||||||
color: 'teal',
|
|
||||||
bgColor: 'bg-teal-100',
|
|
||||||
textColor: 'text-teal-600',
|
|
||||||
borderColor: 'border-teal-200'
|
|
||||||
},
|
|
||||||
[ActivityType.FINANCE]: {
|
|
||||||
label: 'Finanzas',
|
|
||||||
icon: (
|
|
||||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
||||||
</svg>
|
|
||||||
),
|
|
||||||
color: 'emerald',
|
|
||||||
bgColor: 'bg-emerald-100',
|
|
||||||
textColor: 'text-emerald-600',
|
|
||||||
borderColor: 'border-emerald-200'
|
|
||||||
},
|
|
||||||
[ActivityType.ALERT]: {
|
|
||||||
label: 'Alertas',
|
|
||||||
icon: (
|
|
||||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.732-.833-2.464 0L4.35 16.5c-.77.833.192 2.5 1.732 2.5z" />
|
|
||||||
</svg>
|
|
||||||
),
|
|
||||||
color: 'red',
|
|
||||||
bgColor: 'bg-red-100',
|
|
||||||
textColor: 'text-red-600',
|
|
||||||
borderColor: 'border-red-200'
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const STATUS_CONFIG = {
|
|
||||||
[ActivityStatus.SUCCESS]: { color: 'green', bgColor: 'bg-green-500' },
|
|
||||||
[ActivityStatus.WARNING]: { color: 'yellow', bgColor: 'bg-yellow-500' },
|
|
||||||
[ActivityStatus.ERROR]: { color: 'red', bgColor: 'bg-red-500' },
|
|
||||||
[ActivityStatus.INFO]: { color: 'blue', bgColor: 'bg-blue-500' },
|
|
||||||
[ActivityStatus.PENDING]: { color: 'gray', bgColor: 'bg-gray-500' },
|
|
||||||
[ActivityStatus.IN_PROGRESS]: { color: 'purple', bgColor: 'bg-purple-500' },
|
|
||||||
[ActivityStatus.CANCELLED]: { color: 'gray', bgColor: 'bg-gray-400' }
|
|
||||||
};
|
|
||||||
|
|
||||||
const formatRelativeTime = (timestamp: string): string => {
|
|
||||||
const date = new Date(timestamp);
|
|
||||||
const now = new Date();
|
|
||||||
const diffInMs = now.getTime() - date.getTime();
|
|
||||||
const diffInMinutes = Math.floor(diffInMs / (1000 * 60));
|
|
||||||
const diffInHours = Math.floor(diffInMinutes / 60);
|
|
||||||
const diffInDays = Math.floor(diffInHours / 24);
|
|
||||||
|
|
||||||
if (diffInMinutes < 1) {
|
|
||||||
return 'Ahora mismo';
|
|
||||||
} else if (diffInMinutes < 60) {
|
|
||||||
return `Hace ${diffInMinutes} min`;
|
|
||||||
} else if (diffInHours < 24) {
|
|
||||||
return `Hace ${diffInHours}h`;
|
|
||||||
} else if (diffInDays === 1) {
|
|
||||||
return 'Ayer';
|
|
||||||
} else if (diffInDays < 7) {
|
|
||||||
return `Hace ${diffInDays} días`;
|
|
||||||
} else {
|
|
||||||
return date.toLocaleDateString('es-ES', {
|
|
||||||
day: 'numeric',
|
|
||||||
month: 'short'
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const RecentActivity: React.FC<RecentActivityProps> = ({
|
|
||||||
activities,
|
|
||||||
maxItems = 10,
|
|
||||||
showTimestamp = true,
|
|
||||||
showUserAvatar = true,
|
|
||||||
showTypeIcons = true,
|
|
||||||
compact = false,
|
|
||||||
allowFiltering = true,
|
|
||||||
filterTypes = Object.values(ActivityType),
|
|
||||||
defaultFilter = 'all',
|
|
||||||
hasMore = false,
|
|
||||||
isLoading = false,
|
|
||||||
onLoadMore,
|
|
||||||
onActivityClick,
|
|
||||||
onRefresh,
|
|
||||||
className,
|
|
||||||
'aria-label': ariaLabel = 'Actividad reciente',
|
|
||||||
emptyMessage = 'No hay actividad reciente'
|
|
||||||
}) => {
|
|
||||||
const [activeFilter, setActiveFilter] = useState<ActivityType | 'all'>(defaultFilter);
|
|
||||||
|
|
||||||
const filteredActivities = useMemo(() => {
|
|
||||||
let filtered = activities;
|
|
||||||
|
|
||||||
if (activeFilter !== 'all') {
|
|
||||||
filtered = activities.filter(activity => activity.type === activeFilter);
|
|
||||||
}
|
|
||||||
|
|
||||||
return filtered.slice(0, maxItems);
|
|
||||||
}, [activities, activeFilter, maxItems]);
|
|
||||||
|
|
||||||
const handleActivityClick = useCallback((activity: ActivityItem) => {
|
|
||||||
onActivityClick?.(activity);
|
|
||||||
if (activity.onClick) {
|
|
||||||
activity.onClick();
|
|
||||||
}
|
|
||||||
}, [onActivityClick]);
|
|
||||||
|
|
||||||
const renderActivityItem = (activity: ActivityItem) => {
|
|
||||||
const config = ACTIVITY_CONFIG[activity.type] || {
|
|
||||||
label: 'Actividad',
|
|
||||||
icon: <div className="w-4 h-4 bg-gray-300 rounded" />,
|
|
||||||
color: 'gray',
|
|
||||||
bgColor: 'bg-gray-100',
|
|
||||||
textColor: 'text-gray-600',
|
|
||||||
borderColor: 'border-gray-200'
|
|
||||||
};
|
|
||||||
const statusConfig = activity.status ? STATUS_CONFIG[activity.status] : null;
|
|
||||||
|
|
||||||
const itemClasses = clsx(
|
|
||||||
'group relative flex items-start gap-3 p-3 rounded-lg transition-all duration-200',
|
|
||||||
'hover:bg-gray-50 hover:shadow-sm',
|
|
||||||
{
|
|
||||||
'cursor-pointer': activity.onClick || activity.href,
|
|
||||||
'p-2': compact,
|
|
||||||
'border-l-4': !compact,
|
|
||||||
[config.borderColor]: !compact
|
|
||||||
}
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
key={activity.id}
|
|
||||||
className={itemClasses}
|
|
||||||
onClick={activity.onClick || activity.href ? () => handleActivityClick(activity) : undefined}
|
|
||||||
role={activity.onClick || activity.href ? 'button' : undefined}
|
|
||||||
tabIndex={activity.onClick || activity.href ? 0 : undefined}
|
|
||||||
>
|
|
||||||
{/* Timeline indicator */}
|
|
||||||
<div className="relative flex-shrink-0">
|
|
||||||
{showTypeIcons && (
|
|
||||||
<div className={clsx(
|
|
||||||
'flex items-center justify-center rounded-full',
|
|
||||||
{
|
|
||||||
'w-8 h-8': !compact,
|
|
||||||
'w-6 h-6': compact
|
|
||||||
},
|
|
||||||
config.bgColor,
|
|
||||||
config.textColor
|
|
||||||
)}>
|
|
||||||
{activity.icon || config.icon}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Status indicator */}
|
|
||||||
{activity.status && statusConfig && (
|
|
||||||
<div className={clsx(
|
|
||||||
'absolute -bottom-1 -right-1 w-3 h-3 rounded-full border-2 border-white',
|
|
||||||
statusConfig.bgColor
|
|
||||||
)} />
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Content */}
|
|
||||||
<div className="flex-1 min-w-0">
|
|
||||||
<div className="flex items-start justify-between gap-2">
|
|
||||||
<div className="min-w-0 flex-1">
|
|
||||||
<p className={clsx(
|
|
||||||
'font-medium text-gray-900 truncate',
|
|
||||||
{
|
|
||||||
'text-sm': compact,
|
|
||||||
'text-base': !compact
|
|
||||||
}
|
|
||||||
)}>
|
|
||||||
{activity.title}
|
|
||||||
</p>
|
|
||||||
<p className={clsx(
|
|
||||||
'text-gray-600 mt-1',
|
|
||||||
{
|
|
||||||
'text-xs line-clamp-1': compact,
|
|
||||||
'text-sm line-clamp-2': !compact
|
|
||||||
}
|
|
||||||
)}>
|
|
||||||
{activity.description}
|
|
||||||
</p>
|
|
||||||
|
|
||||||
{/* User info */}
|
|
||||||
{activity.user && showUserAvatar && (
|
|
||||||
<div className="flex items-center gap-2 mt-2">
|
|
||||||
<Avatar
|
|
||||||
size="xs"
|
|
||||||
src={activity.user.avatar}
|
|
||||||
alt={activity.user.name}
|
|
||||||
/>
|
|
||||||
<span className="text-xs text-gray-500">
|
|
||||||
{activity.user.name}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Timestamp */}
|
|
||||||
{showTimestamp && (
|
|
||||||
<time className={clsx(
|
|
||||||
'text-gray-500 flex-shrink-0',
|
|
||||||
{
|
|
||||||
'text-xs': compact,
|
|
||||||
'text-sm': !compact
|
|
||||||
}
|
|
||||||
)}>
|
|
||||||
{formatRelativeTime(activity.timestamp)}
|
|
||||||
</time>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
if (activities.length === 0) {
|
|
||||||
return (
|
|
||||||
<div className="text-center py-8 text-gray-500">
|
|
||||||
<div className="text-gray-400 mb-4">
|
|
||||||
<svg
|
|
||||||
className="w-12 h-12 mx-auto"
|
|
||||||
fill="none"
|
|
||||||
stroke="currentColor"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
strokeLinecap="round"
|
|
||||||
strokeLinejoin="round"
|
|
||||||
strokeWidth={2}
|
|
||||||
d="M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
<p>{emptyMessage}</p>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className={clsx('space-y-4', className)} aria-label={ariaLabel}>
|
|
||||||
{/* Filters */}
|
|
||||||
{allowFiltering && filterTypes.length > 1 && (
|
|
||||||
<div className="flex items-center gap-2 pb-2 border-b border-gray-200">
|
|
||||||
<Button
|
|
||||||
variant={activeFilter === 'all' ? 'primary' : 'ghost'}
|
|
||||||
size="sm"
|
|
||||||
onClick={() => setActiveFilter('all')}
|
|
||||||
>
|
|
||||||
Todos
|
|
||||||
</Button>
|
|
||||||
{filterTypes.map((type) => {
|
|
||||||
const config = ACTIVITY_CONFIG[type] || {
|
|
||||||
label: 'Actividad',
|
|
||||||
icon: <div className="w-4 h-4 bg-gray-300 rounded" />,
|
|
||||||
color: 'gray',
|
|
||||||
bgColor: 'bg-gray-100',
|
|
||||||
textColor: 'text-gray-600',
|
|
||||||
borderColor: 'border-gray-200'
|
|
||||||
};
|
|
||||||
const count = activities.filter(a => a.type === type).length;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Button
|
|
||||||
key={type}
|
|
||||||
variant={activeFilter === type ? 'primary' : 'ghost'}
|
|
||||||
size="sm"
|
|
||||||
onClick={() => setActiveFilter(type)}
|
|
||||||
leftIcon={config.icon}
|
|
||||||
>
|
|
||||||
{config.label}
|
|
||||||
{count > 0 && (
|
|
||||||
<Badge size="xs" className="ml-1">
|
|
||||||
{count}
|
|
||||||
</Badge>
|
|
||||||
)}
|
|
||||||
</Button>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
|
|
||||||
{onRefresh && (
|
|
||||||
<div className="ml-auto">
|
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
size="sm"
|
|
||||||
onClick={onRefresh}
|
|
||||||
aria-label="Actualizar actividad"
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
className="w-4 h-4"
|
|
||||||
fill="none"
|
|
||||||
stroke="currentColor"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
strokeLinecap="round"
|
|
||||||
strokeLinejoin="round"
|
|
||||||
strokeWidth={2}
|
|
||||||
d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Activity list */}
|
|
||||||
<div className="space-y-1">
|
|
||||||
{filteredActivities.map(renderActivityItem)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Loading state */}
|
|
||||||
{isLoading && (
|
|
||||||
<div className="flex justify-center py-4">
|
|
||||||
<div className="animate-spin rounded-full h-6 w-6 border-b-2 border-blue-500" />
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Load more */}
|
|
||||||
{hasMore && onLoadMore && !isLoading && (
|
|
||||||
<div className="text-center pt-4">
|
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
size="sm"
|
|
||||||
onClick={onLoadMore}
|
|
||||||
>
|
|
||||||
Ver más actividad
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
RecentActivity.displayName = 'RecentActivity';
|
|
||||||
|
|
||||||
export default RecentActivity;
|
|
||||||
@@ -1,725 +0,0 @@
|
|||||||
import React, { useState, useMemo, useCallback } from 'react';
|
|
||||||
import { clsx } from 'clsx';
|
|
||||||
import { Card, CardHeader, CardBody } from '../../ui';
|
|
||||||
import { Button } from '../../ui';
|
|
||||||
import { Badge } from '../../ui';
|
|
||||||
import { Select } from '../../ui';
|
|
||||||
import { Input } from '../../ui';
|
|
||||||
import {
|
|
||||||
ForecastAlert,
|
|
||||||
ForecastAlertType,
|
|
||||||
AlertSeverity,
|
|
||||||
} from '../../../types/forecasting.types';
|
|
||||||
|
|
||||||
export interface AlertsPanelProps {
|
|
||||||
className?: string;
|
|
||||||
title?: string;
|
|
||||||
alerts?: ForecastAlert[];
|
|
||||||
loading?: boolean;
|
|
||||||
error?: string | null;
|
|
||||||
onAlertAction?: (alertId: string, action: 'acknowledge' | 'resolve' | 'snooze' | 'production_adjust' | 'inventory_check') => void;
|
|
||||||
onAlertDismiss?: (alertId: string) => void;
|
|
||||||
onBulkAction?: (alertIds: string[], action: string) => void;
|
|
||||||
showFilters?: boolean;
|
|
||||||
compact?: boolean;
|
|
||||||
maxItems?: number;
|
|
||||||
autoRefresh?: boolean;
|
|
||||||
refreshInterval?: number;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface AlertFilter {
|
|
||||||
severity: AlertSeverity | 'all';
|
|
||||||
type: ForecastAlertType | 'all';
|
|
||||||
status: 'active' | 'acknowledged' | 'resolved' | 'all';
|
|
||||||
product: string;
|
|
||||||
dateRange: 'today' | 'week' | 'month' | 'all';
|
|
||||||
}
|
|
||||||
|
|
||||||
interface AlertActionGroup {
|
|
||||||
critical: AlertAction[];
|
|
||||||
high: AlertAction[];
|
|
||||||
medium: AlertAction[];
|
|
||||||
low: AlertAction[];
|
|
||||||
}
|
|
||||||
|
|
||||||
interface AlertAction {
|
|
||||||
id: string;
|
|
||||||
label: string;
|
|
||||||
icon: string;
|
|
||||||
variant: 'primary' | 'secondary' | 'success' | 'warning' | 'danger';
|
|
||||||
description: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
const SPANISH_ALERT_TYPES: Record<ForecastAlertType, string> = {
|
|
||||||
[ForecastAlertType.HIGH_DEMAND_PREDICTED]: 'Alta Demanda Predicha',
|
|
||||||
[ForecastAlertType.LOW_DEMAND_PREDICTED]: 'Baja Demanda Predicha',
|
|
||||||
[ForecastAlertType.ACCURACY_DROP]: 'Caída de Precisión',
|
|
||||||
[ForecastAlertType.MODEL_DRIFT]: 'Deriva del Modelo',
|
|
||||||
[ForecastAlertType.DATA_ANOMALY]: 'Anomalía de Datos',
|
|
||||||
[ForecastAlertType.MISSING_DATA]: 'Datos Faltantes',
|
|
||||||
[ForecastAlertType.SEASONAL_SHIFT]: 'Cambio Estacional',
|
|
||||||
};
|
|
||||||
|
|
||||||
const SPANISH_SEVERITIES: Record<AlertSeverity, string> = {
|
|
||||||
[AlertSeverity.CRITICAL]: 'Crítica',
|
|
||||||
[AlertSeverity.HIGH]: 'Alta',
|
|
||||||
[AlertSeverity.MEDIUM]: 'Media',
|
|
||||||
[AlertSeverity.LOW]: 'Baja',
|
|
||||||
};
|
|
||||||
|
|
||||||
const SEVERITY_COLORS: Record<AlertSeverity, string> = {
|
|
||||||
[AlertSeverity.CRITICAL]: 'text-red-600 bg-red-50 border-red-200',
|
|
||||||
[AlertSeverity.HIGH]: 'text-orange-600 bg-orange-50 border-orange-200',
|
|
||||||
[AlertSeverity.MEDIUM]: 'text-yellow-600 bg-yellow-50 border-yellow-200',
|
|
||||||
[AlertSeverity.LOW]: 'text-blue-600 bg-blue-50 border-blue-200',
|
|
||||||
};
|
|
||||||
|
|
||||||
const SEVERITY_BADGE_VARIANTS: Record<AlertSeverity, 'danger' | 'warning' | 'success' | 'info'> = {
|
|
||||||
[AlertSeverity.CRITICAL]: 'danger',
|
|
||||||
[AlertSeverity.HIGH]: 'warning',
|
|
||||||
[AlertSeverity.MEDIUM]: 'warning',
|
|
||||||
[AlertSeverity.LOW]: 'info',
|
|
||||||
};
|
|
||||||
|
|
||||||
const ALERT_TYPE_ICONS: Record<ForecastAlertType, string> = {
|
|
||||||
[ForecastAlertType.HIGH_DEMAND_PREDICTED]: '📈',
|
|
||||||
[ForecastAlertType.LOW_DEMAND_PREDICTED]: '📉',
|
|
||||||
[ForecastAlertType.ACCURACY_DROP]: '🎯',
|
|
||||||
[ForecastAlertType.MODEL_DRIFT]: '🔄',
|
|
||||||
[ForecastAlertType.DATA_ANOMALY]: '⚠️',
|
|
||||||
[ForecastAlertType.MISSING_DATA]: '📊',
|
|
||||||
[ForecastAlertType.SEASONAL_SHIFT]: '🍂',
|
|
||||||
};
|
|
||||||
|
|
||||||
const ALERT_ACTIONS: AlertActionGroup = {
|
|
||||||
critical: [
|
|
||||||
{
|
|
||||||
id: 'production_adjust',
|
|
||||||
label: 'Ajustar Producción',
|
|
||||||
icon: '🏭',
|
|
||||||
variant: 'primary',
|
|
||||||
description: 'Modificar inmediatamente el plan de producción',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'inventory_check',
|
|
||||||
label: 'Verificar Inventario',
|
|
||||||
icon: '📦',
|
|
||||||
variant: 'warning',
|
|
||||||
description: 'Revisar niveles de stock y materias primas',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'emergency_order',
|
|
||||||
label: 'Pedido Urgente',
|
|
||||||
icon: '🚚',
|
|
||||||
variant: 'danger',
|
|
||||||
description: 'Realizar pedido urgente a proveedores',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
high: [
|
|
||||||
{
|
|
||||||
id: 'production_adjust',
|
|
||||||
label: 'Ajustar Producción',
|
|
||||||
icon: '🏭',
|
|
||||||
variant: 'primary',
|
|
||||||
description: 'Ajustar plan de producción para mañana',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'inventory_alert',
|
|
||||||
label: 'Alerta Inventario',
|
|
||||||
icon: '📋',
|
|
||||||
variant: 'warning',
|
|
||||||
description: 'Crear alerta de inventario preventiva',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'team_notify',
|
|
||||||
label: 'Notificar Equipo',
|
|
||||||
icon: '👥',
|
|
||||||
variant: 'secondary',
|
|
||||||
description: 'Informar al equipo de producción',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
medium: [
|
|
||||||
{
|
|
||||||
id: 'production_review',
|
|
||||||
label: 'Revisar Producción',
|
|
||||||
icon: '📊',
|
|
||||||
variant: 'secondary',
|
|
||||||
description: 'Revisar plan de producción esta semana',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'monitor',
|
|
||||||
label: 'Monitorear',
|
|
||||||
icon: '👁️',
|
|
||||||
variant: 'secondary',
|
|
||||||
description: 'Mantener bajo observación',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
low: [
|
|
||||||
{
|
|
||||||
id: 'monitor',
|
|
||||||
label: 'Monitorear',
|
|
||||||
icon: '👁️',
|
|
||||||
variant: 'secondary',
|
|
||||||
description: 'Mantener bajo observación',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'data_review',
|
|
||||||
label: 'Revisar Datos',
|
|
||||||
icon: '🔍',
|
|
||||||
variant: 'secondary',
|
|
||||||
description: 'Revisar calidad de los datos',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
};
|
|
||||||
|
|
||||||
const RECOMMENDATION_MESSAGES: Record<ForecastAlertType, (product: string, value: number) => string> = {
|
|
||||||
[ForecastAlertType.HIGH_DEMAND_PREDICTED]: (product, value) =>
|
|
||||||
`Se predice un aumento del ${value}% en la demanda de ${product}. Considera aumentar la producción.`,
|
|
||||||
[ForecastAlertType.LOW_DEMAND_PREDICTED]: (product, value) =>
|
|
||||||
`Se predice una disminución del ${Math.abs(value)}% en la demanda de ${product}. Considera reducir la producción para evitar desperdicios.`,
|
|
||||||
[ForecastAlertType.ACCURACY_DROP]: (product, value) =>
|
|
||||||
`La precisión del modelo para ${product} ha disminuido al ${value}%. Es recomendable reentrenar el modelo.`,
|
|
||||||
[ForecastAlertType.MODEL_DRIFT]: (product, value) =>
|
|
||||||
`Detectada deriva en el modelo de ${product}. Los patrones de demanda han cambiado significativamente.`,
|
|
||||||
[ForecastAlertType.DATA_ANOMALY]: (product, value) =>
|
|
||||||
`Anomalía detectada en los datos de ${product}. Verifica la calidad de los datos de entrada.`,
|
|
||||||
[ForecastAlertType.MISSING_DATA]: (product, value) =>
|
|
||||||
`Faltan ${value} días de datos para ${product}. Esto puede afectar la precisión de las predicciones.`,
|
|
||||||
[ForecastAlertType.SEASONAL_SHIFT]: (product, value) =>
|
|
||||||
`Detectado cambio en el patrón estacional de ${product}. El pico de demanda se ha adelantado/retrasado.`,
|
|
||||||
};
|
|
||||||
|
|
||||||
const AlertsPanel: React.FC<AlertsPanelProps> = ({
|
|
||||||
className,
|
|
||||||
title = 'Alertas y Recomendaciones',
|
|
||||||
alerts = [],
|
|
||||||
loading = false,
|
|
||||||
error = null,
|
|
||||||
onAlertAction,
|
|
||||||
onAlertDismiss,
|
|
||||||
onBulkAction,
|
|
||||||
showFilters = true,
|
|
||||||
compact = false,
|
|
||||||
maxItems,
|
|
||||||
autoRefresh = false,
|
|
||||||
refreshInterval = 30000,
|
|
||||||
}) => {
|
|
||||||
const [filters, setFilters] = useState<AlertFilter>({
|
|
||||||
severity: 'all',
|
|
||||||
type: 'all',
|
|
||||||
status: 'active',
|
|
||||||
product: '',
|
|
||||||
dateRange: 'all',
|
|
||||||
});
|
|
||||||
|
|
||||||
const [selectedAlerts, setSelectedAlerts] = useState<string[]>([]);
|
|
||||||
const [expandedAlerts, setExpandedAlerts] = useState<string[]>([]);
|
|
||||||
|
|
||||||
// Filter alerts
|
|
||||||
const filteredAlerts = useMemo(() => {
|
|
||||||
let filtered = [...alerts];
|
|
||||||
|
|
||||||
// Filter by status
|
|
||||||
if (filters.status !== 'all') {
|
|
||||||
filtered = filtered.filter(alert => {
|
|
||||||
if (filters.status === 'active') return alert.is_active && !alert.acknowledged_at && !alert.resolved_at;
|
|
||||||
if (filters.status === 'acknowledged') return !!alert.acknowledged_at && !alert.resolved_at;
|
|
||||||
if (filters.status === 'resolved') return !!alert.resolved_at;
|
|
||||||
return true;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Filter by severity
|
|
||||||
if (filters.severity !== 'all') {
|
|
||||||
filtered = filtered.filter(alert => alert.severity === filters.severity);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Filter by type
|
|
||||||
if (filters.type !== 'all') {
|
|
||||||
filtered = filtered.filter(alert => alert.alert_type === filters.type);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Filter by product
|
|
||||||
if (filters.product) {
|
|
||||||
filtered = filtered.filter(alert =>
|
|
||||||
alert.product_name?.toLowerCase().includes(filters.product.toLowerCase())
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Filter by date range
|
|
||||||
if (filters.dateRange !== 'all') {
|
|
||||||
const now = new Date();
|
|
||||||
const filterDate = new Date();
|
|
||||||
|
|
||||||
switch (filters.dateRange) {
|
|
||||||
case 'today':
|
|
||||||
filterDate.setHours(0, 0, 0, 0);
|
|
||||||
break;
|
|
||||||
case 'week':
|
|
||||||
filterDate.setDate(now.getDate() - 7);
|
|
||||||
break;
|
|
||||||
case 'month':
|
|
||||||
filterDate.setMonth(now.getMonth() - 1);
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
|
|
||||||
filtered = filtered.filter(alert => new Date(alert.created_at) >= filterDate);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Sort by severity and creation date
|
|
||||||
filtered.sort((a, b) => {
|
|
||||||
const severityOrder: Record<AlertSeverity, number> = {
|
|
||||||
[AlertSeverity.CRITICAL]: 4,
|
|
||||||
[AlertSeverity.HIGH]: 3,
|
|
||||||
[AlertSeverity.MEDIUM]: 2,
|
|
||||||
[AlertSeverity.LOW]: 1,
|
|
||||||
};
|
|
||||||
|
|
||||||
if (a.severity !== b.severity) {
|
|
||||||
return severityOrder[b.severity] - severityOrder[a.severity];
|
|
||||||
}
|
|
||||||
|
|
||||||
return new Date(b.created_at).getTime() - new Date(a.created_at).getTime();
|
|
||||||
});
|
|
||||||
|
|
||||||
// Limit items if specified
|
|
||||||
if (maxItems) {
|
|
||||||
filtered = filtered.slice(0, maxItems);
|
|
||||||
}
|
|
||||||
|
|
||||||
return filtered;
|
|
||||||
}, [alerts, filters, maxItems]);
|
|
||||||
|
|
||||||
// Get alert statistics
|
|
||||||
const alertStats = useMemo(() => {
|
|
||||||
const stats = {
|
|
||||||
total: alerts.length,
|
|
||||||
active: alerts.filter(a => a.is_active && !a.acknowledged_at && !a.resolved_at).length,
|
|
||||||
critical: alerts.filter(a => a.severity === AlertSeverity.CRITICAL && a.is_active).length,
|
|
||||||
high: alerts.filter(a => a.severity === AlertSeverity.HIGH && a.is_active).length,
|
|
||||||
};
|
|
||||||
return stats;
|
|
||||||
}, [alerts]);
|
|
||||||
|
|
||||||
// Handle alert expansion
|
|
||||||
const toggleAlertExpansion = useCallback((alertId: string) => {
|
|
||||||
setExpandedAlerts(prev =>
|
|
||||||
prev.includes(alertId)
|
|
||||||
? prev.filter(id => id !== alertId)
|
|
||||||
: [...prev, alertId]
|
|
||||||
);
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
// Handle alert selection
|
|
||||||
const toggleAlertSelection = useCallback((alertId: string) => {
|
|
||||||
setSelectedAlerts(prev =>
|
|
||||||
prev.includes(alertId)
|
|
||||||
? prev.filter(id => id !== alertId)
|
|
||||||
: [...prev, alertId]
|
|
||||||
);
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
// Handle bulk selection
|
|
||||||
const handleSelectAll = useCallback(() => {
|
|
||||||
const activeAlerts = filteredAlerts.filter(a => a.is_active).map(a => a.id);
|
|
||||||
setSelectedAlerts(prev =>
|
|
||||||
prev.length === activeAlerts.length ? [] : activeAlerts
|
|
||||||
);
|
|
||||||
}, [filteredAlerts]);
|
|
||||||
|
|
||||||
// Get available actions for alert
|
|
||||||
const getAlertActions = useCallback((alert: ForecastAlert): AlertAction[] => {
|
|
||||||
return ALERT_ACTIONS[alert.severity] || [];
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
// Get recommendation message
|
|
||||||
const getRecommendation = useCallback((alert: ForecastAlert): string => {
|
|
||||||
const generator = RECOMMENDATION_MESSAGES[alert.alert_type];
|
|
||||||
if (!generator) return alert.message;
|
|
||||||
|
|
||||||
const value = alert.predicted_value || alert.threshold_value || 0;
|
|
||||||
return generator(alert.product_name || 'Producto', value);
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
// Format time ago
|
|
||||||
const formatTimeAgo = useCallback((dateString: string): string => {
|
|
||||||
const date = new Date(dateString);
|
|
||||||
const now = new Date();
|
|
||||||
const diffMs = now.getTime() - date.getTime();
|
|
||||||
const diffMins = Math.floor(diffMs / (1000 * 60));
|
|
||||||
const diffHours = Math.floor(diffMins / 60);
|
|
||||||
const diffDays = Math.floor(diffHours / 24);
|
|
||||||
|
|
||||||
if (diffMins < 1) return 'Ahora mismo';
|
|
||||||
if (diffMins < 60) return `Hace ${diffMins} min`;
|
|
||||||
if (diffHours < 24) return `Hace ${diffHours}h`;
|
|
||||||
if (diffDays < 7) return `Hace ${diffDays}d`;
|
|
||||||
return date.toLocaleDateString('es-ES');
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
// Loading state
|
|
||||||
if (loading) {
|
|
||||||
return (
|
|
||||||
<Card className={className}>
|
|
||||||
<CardHeader>
|
|
||||||
<h3 className="text-lg font-semibold text-text-primary">{title}</h3>
|
|
||||||
</CardHeader>
|
|
||||||
<CardBody>
|
|
||||||
<div className="flex items-center justify-center h-32">
|
|
||||||
<div className="flex items-center space-x-2">
|
|
||||||
<div className="animate-spin rounded-full h-6 w-6 border-b-2 border-color-primary"></div>
|
|
||||||
<span className="text-text-secondary">Cargando alertas...</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</CardBody>
|
|
||||||
</Card>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Error state
|
|
||||||
if (error) {
|
|
||||||
return (
|
|
||||||
<Card className={className} variant="outlined">
|
|
||||||
<CardHeader>
|
|
||||||
<h3 className="text-lg font-semibold text-text-primary">{title}</h3>
|
|
||||||
</CardHeader>
|
|
||||||
<CardBody>
|
|
||||||
<div className="flex items-center justify-center h-32">
|
|
||||||
<div className="text-center">
|
|
||||||
<div className="text-red-500 mb-2">
|
|
||||||
<svg className="w-8 h-8 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
<p className="text-text-secondary text-sm">{error}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</CardBody>
|
|
||||||
</Card>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Card className={className}>
|
|
||||||
<CardHeader>
|
|
||||||
<div className="flex items-center justify-between flex-wrap gap-4">
|
|
||||||
<div className="flex items-center gap-3">
|
|
||||||
<h3 className="text-lg font-semibold text-text-primary">{title}</h3>
|
|
||||||
{alertStats.critical > 0 && (
|
|
||||||
<Badge variant="danger" className="animate-pulse">
|
|
||||||
{alertStats.critical} críticas
|
|
||||||
</Badge>
|
|
||||||
)}
|
|
||||||
{alertStats.high > 0 && (
|
|
||||||
<Badge variant="warning">
|
|
||||||
{alertStats.high} altas
|
|
||||||
</Badge>
|
|
||||||
)}
|
|
||||||
<Badge variant="ghost">
|
|
||||||
{alertStats.active}/{alertStats.total} activas
|
|
||||||
</Badge>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
{selectedAlerts.length > 0 && onBulkAction && (
|
|
||||||
<div className="flex gap-1">
|
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
size="sm"
|
|
||||||
onClick={() => onBulkAction(selectedAlerts, 'acknowledge')}
|
|
||||||
>
|
|
||||||
✓ Confirmar Todas
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
size="sm"
|
|
||||||
onClick={() => onBulkAction(selectedAlerts, 'production_plan')}
|
|
||||||
>
|
|
||||||
📋 Plan Producción
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{autoRefresh && (
|
|
||||||
<div className="flex items-center gap-1 text-xs text-text-tertiary">
|
|
||||||
<div className="animate-spin w-3 h-3 border border-color-primary border-t-transparent rounded-full"></div>
|
|
||||||
Auto-actualización
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</CardHeader>
|
|
||||||
|
|
||||||
{showFilters && (
|
|
||||||
<div className="px-6 py-3 border-b border-border-primary bg-bg-secondary">
|
|
||||||
<div className="grid grid-cols-2 md:grid-cols-5 gap-3">
|
|
||||||
<Select
|
|
||||||
value={filters.status}
|
|
||||||
onChange={(value) => setFilters(prev => ({ ...prev, status: value as any }))}
|
|
||||||
className="text-sm"
|
|
||||||
>
|
|
||||||
<option value="all">Todos los estados</option>
|
|
||||||
<option value="active">Activas</option>
|
|
||||||
<option value="acknowledged">Confirmadas</option>
|
|
||||||
<option value="resolved">Resueltas</option>
|
|
||||||
</Select>
|
|
||||||
|
|
||||||
<Select
|
|
||||||
value={filters.severity}
|
|
||||||
onChange={(value) => setFilters(prev => ({ ...prev, severity: value as any }))}
|
|
||||||
className="text-sm"
|
|
||||||
>
|
|
||||||
<option value="all">Toda severidad</option>
|
|
||||||
{Object.entries(SPANISH_SEVERITIES).map(([key, label]) => (
|
|
||||||
<option key={key} value={key}>{label}</option>
|
|
||||||
))}
|
|
||||||
</Select>
|
|
||||||
|
|
||||||
<Select
|
|
||||||
value={filters.type}
|
|
||||||
onChange={(value) => setFilters(prev => ({ ...prev, type: value as any }))}
|
|
||||||
className="text-sm"
|
|
||||||
>
|
|
||||||
<option value="all">Todos los tipos</option>
|
|
||||||
{Object.entries(SPANISH_ALERT_TYPES).map(([key, label]) => (
|
|
||||||
<option key={key} value={key}>{label}</option>
|
|
||||||
))}
|
|
||||||
</Select>
|
|
||||||
|
|
||||||
<Input
|
|
||||||
placeholder="Buscar producto..."
|
|
||||||
value={filters.product}
|
|
||||||
onChange={(e) => setFilters(prev => ({ ...prev, product: e.target.value }))}
|
|
||||||
className="text-sm"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<Select
|
|
||||||
value={filters.dateRange}
|
|
||||||
onChange={(value) => setFilters(prev => ({ ...prev, dateRange: value as any }))}
|
|
||||||
className="text-sm"
|
|
||||||
>
|
|
||||||
<option value="all">Todo el tiempo</option>
|
|
||||||
<option value="today">Hoy</option>
|
|
||||||
<option value="week">Última semana</option>
|
|
||||||
<option value="month">Último mes</option>
|
|
||||||
</Select>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<CardBody padding={compact ? 'sm' : 'md'}>
|
|
||||||
{filteredAlerts.length === 0 ? (
|
|
||||||
<div className="flex items-center justify-center h-32">
|
|
||||||
<div className="text-center">
|
|
||||||
<div className="text-green-500 mb-2">
|
|
||||||
<svg className="w-8 h-8 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
<p className="text-text-secondary text-sm">No hay alertas que mostrar</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<div className="space-y-3">
|
|
||||||
{/* Bulk actions bar */}
|
|
||||||
{filteredAlerts.some(a => a.is_active) && (
|
|
||||||
<div className="flex items-center gap-3 pb-2 border-b border-border-secondary">
|
|
||||||
<input
|
|
||||||
type="checkbox"
|
|
||||||
className="rounded border-input-border focus:ring-color-primary"
|
|
||||||
checked={selectedAlerts.length === filteredAlerts.filter(a => a.is_active).length}
|
|
||||||
onChange={handleSelectAll}
|
|
||||||
/>
|
|
||||||
<span className="text-sm text-text-secondary">
|
|
||||||
{selectedAlerts.length > 0
|
|
||||||
? `${selectedAlerts.length} alertas seleccionadas`
|
|
||||||
: 'Seleccionar todas'
|
|
||||||
}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Alerts list */}
|
|
||||||
{filteredAlerts.map((alert) => {
|
|
||||||
const isExpanded = expandedAlerts.includes(alert.id);
|
|
||||||
const isSelected = selectedAlerts.includes(alert.id);
|
|
||||||
const availableActions = getAlertActions(alert);
|
|
||||||
const recommendation = getRecommendation(alert);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
key={alert.id}
|
|
||||||
className={clsx(
|
|
||||||
'rounded-lg border transition-all duration-200',
|
|
||||||
SEVERITY_COLORS[alert.severity],
|
|
||||||
{
|
|
||||||
'opacity-60': !alert.is_active || alert.resolved_at,
|
|
||||||
'ring-2 ring-color-primary': isSelected,
|
|
||||||
}
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
<div className="p-4">
|
|
||||||
<div className="flex items-start gap-3">
|
|
||||||
{/* Selection checkbox */}
|
|
||||||
{alert.is_active && !alert.resolved_at && (
|
|
||||||
<input
|
|
||||||
type="checkbox"
|
|
||||||
className="mt-1 rounded border-input-border focus:ring-color-primary"
|
|
||||||
checked={isSelected}
|
|
||||||
onChange={() => toggleAlertSelection(alert.id)}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Alert icon */}
|
|
||||||
<div className="text-2xl mt-1">
|
|
||||||
{ALERT_TYPE_ICONS[alert.alert_type]}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Alert content */}
|
|
||||||
<div className="flex-1 min-w-0">
|
|
||||||
<div className="flex items-center gap-2 mb-2">
|
|
||||||
<h4 className="font-semibold text-text-primary text-sm">
|
|
||||||
{alert.title}
|
|
||||||
</h4>
|
|
||||||
<Badge
|
|
||||||
variant={SEVERITY_BADGE_VARIANTS[alert.severity]}
|
|
||||||
size="sm"
|
|
||||||
>
|
|
||||||
{SPANISH_SEVERITIES[alert.severity]}
|
|
||||||
</Badge>
|
|
||||||
{alert.product_name && (
|
|
||||||
<Badge variant="ghost" size="sm">
|
|
||||||
{alert.product_name}
|
|
||||||
</Badge>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<p className="text-text-secondary text-sm mb-2">
|
|
||||||
{compact ? alert.message.slice(0, 100) + '...' : alert.message}
|
|
||||||
</p>
|
|
||||||
|
|
||||||
{!compact && (
|
|
||||||
<p className="text-text-primary text-sm mb-3 font-medium">
|
|
||||||
💡 {recommendation}
|
|
||||||
</p>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<div className="flex items-center justify-between">
|
|
||||||
<div className="flex items-center gap-3 text-xs text-text-tertiary">
|
|
||||||
<span>{formatTimeAgo(alert.created_at)}</span>
|
|
||||||
{alert.acknowledged_at && (
|
|
||||||
<span>• Confirmada</span>
|
|
||||||
)}
|
|
||||||
{alert.resolved_at && (
|
|
||||||
<span>• Resuelta</span>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex items-center gap-1">
|
|
||||||
{/* Quick actions */}
|
|
||||||
{alert.is_active && !alert.resolved_at && (
|
|
||||||
<div className="flex gap-1">
|
|
||||||
{availableActions.slice(0, compact ? 1 : 2).map((action) => (
|
|
||||||
<Button
|
|
||||||
key={action.id}
|
|
||||||
variant={action.variant as any}
|
|
||||||
size="sm"
|
|
||||||
onClick={() => onAlertAction?.(alert.id, action.id as any)}
|
|
||||||
title={action.description}
|
|
||||||
>
|
|
||||||
{action.icon} {compact ? '' : action.label}
|
|
||||||
</Button>
|
|
||||||
))}
|
|
||||||
|
|
||||||
{availableActions.length > (compact ? 1 : 2) && (
|
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
size="sm"
|
|
||||||
onClick={() => toggleAlertExpansion(alert.id)}
|
|
||||||
>
|
|
||||||
{isExpanded ? '▼' : '▶'}
|
|
||||||
</Button>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Dismiss button */}
|
|
||||||
{onAlertDismiss && alert.is_active && (
|
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
size="sm"
|
|
||||||
onClick={() => onAlertDismiss(alert.id)}
|
|
||||||
title="Descartar alerta"
|
|
||||||
>
|
|
||||||
✕
|
|
||||||
</Button>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Expanded actions */}
|
|
||||||
{isExpanded && availableActions.length > (compact ? 1 : 2) && (
|
|
||||||
<div className="mt-3 pt-3 border-t border-border-secondary">
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-2">
|
|
||||||
{availableActions.slice(compact ? 1 : 2).map((action) => (
|
|
||||||
<Button
|
|
||||||
key={action.id}
|
|
||||||
variant={action.variant as any}
|
|
||||||
size="sm"
|
|
||||||
onClick={() => onAlertAction?.(alert.id, action.id as any)}
|
|
||||||
className="justify-start"
|
|
||||||
>
|
|
||||||
<span className="mr-2">{action.icon}</span>
|
|
||||||
<div className="text-left">
|
|
||||||
<div className="font-medium">{action.label}</div>
|
|
||||||
<div className="text-xs opacity-75">{action.description}</div>
|
|
||||||
</div>
|
|
||||||
</Button>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Alert details */}
|
|
||||||
{!compact && isExpanded && (
|
|
||||||
<div className="mt-3 pt-3 border-t border-border-secondary">
|
|
||||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-3 text-xs">
|
|
||||||
<div>
|
|
||||||
<span className="text-text-secondary">Tipo:</span>
|
|
||||||
<div className="font-medium">{SPANISH_ALERT_TYPES[alert.alert_type]}</div>
|
|
||||||
</div>
|
|
||||||
{alert.predicted_value && (
|
|
||||||
<div>
|
|
||||||
<span className="text-text-secondary">Valor Predicho:</span>
|
|
||||||
<div className="font-medium">{alert.predicted_value}</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{alert.threshold_value && (
|
|
||||||
<div>
|
|
||||||
<span className="text-text-secondary">Umbral:</span>
|
|
||||||
<div className="font-medium">{alert.threshold_value}</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{alert.model_accuracy && (
|
|
||||||
<div>
|
|
||||||
<span className="text-text-secondary">Precisión Modelo:</span>
|
|
||||||
<div className="font-medium">{(alert.model_accuracy * 100).toFixed(1)}%</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</CardBody>
|
|
||||||
</Card>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default AlertsPanel;
|
|
||||||
@@ -1,575 +0,0 @@
|
|||||||
import React, { useState, useEffect, useMemo, useCallback } from 'react';
|
|
||||||
import { clsx } from 'clsx';
|
|
||||||
import {
|
|
||||||
LineChart,
|
|
||||||
Line,
|
|
||||||
XAxis,
|
|
||||||
YAxis,
|
|
||||||
CartesianGrid,
|
|
||||||
Tooltip,
|
|
||||||
ResponsiveContainer,
|
|
||||||
ReferenceLine,
|
|
||||||
Area,
|
|
||||||
ComposedChart,
|
|
||||||
Legend,
|
|
||||||
Brush,
|
|
||||||
ReferenceDot,
|
|
||||||
} from 'recharts';
|
|
||||||
import { Card, CardHeader, CardBody } from '../../ui';
|
|
||||||
import { Button } from '../../ui';
|
|
||||||
import { Select } from '../../ui';
|
|
||||||
import { Badge } from '../../ui';
|
|
||||||
import {
|
|
||||||
ForecastResponse,
|
|
||||||
DemandTrend,
|
|
||||||
TrendDirection,
|
|
||||||
WeatherCondition,
|
|
||||||
EventType,
|
|
||||||
} from '../../../types/forecasting.types';
|
|
||||||
|
|
||||||
export interface DemandChartProps {
|
|
||||||
className?: string;
|
|
||||||
title?: string;
|
|
||||||
data?: DemandTrend[];
|
|
||||||
products?: string[];
|
|
||||||
selectedProducts?: string[];
|
|
||||||
onProductSelectionChange?: (products: string[]) => void;
|
|
||||||
timeframe?: 'weekly' | 'monthly' | 'quarterly' | 'yearly';
|
|
||||||
onTimeframeChange?: (timeframe: 'weekly' | 'monthly' | 'quarterly' | 'yearly') => void;
|
|
||||||
showConfidenceInterval?: boolean;
|
|
||||||
showEvents?: boolean;
|
|
||||||
showWeatherOverlay?: boolean;
|
|
||||||
events?: Array<{
|
|
||||||
date: string;
|
|
||||||
type: EventType;
|
|
||||||
name: string;
|
|
||||||
impact: 'high' | 'medium' | 'low';
|
|
||||||
}>;
|
|
||||||
weatherData?: Array<{
|
|
||||||
date: string;
|
|
||||||
condition: WeatherCondition;
|
|
||||||
temperature: number;
|
|
||||||
}>;
|
|
||||||
loading?: boolean;
|
|
||||||
error?: string | null;
|
|
||||||
height?: number;
|
|
||||||
onExport?: (format: 'png' | 'pdf' | 'csv') => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface ChartDataPoint {
|
|
||||||
date: string;
|
|
||||||
actualDemand?: number;
|
|
||||||
predictedDemand?: number;
|
|
||||||
confidenceLower?: number;
|
|
||||||
confidenceUpper?: number;
|
|
||||||
accuracy?: number;
|
|
||||||
trendDirection?: TrendDirection;
|
|
||||||
seasonalFactor?: number;
|
|
||||||
anomalyScore?: number;
|
|
||||||
hasEvent?: boolean;
|
|
||||||
eventType?: EventType;
|
|
||||||
eventName?: string;
|
|
||||||
eventImpact?: 'high' | 'medium' | 'low';
|
|
||||||
weather?: WeatherCondition;
|
|
||||||
temperature?: number;
|
|
||||||
}
|
|
||||||
|
|
||||||
const PRODUCT_COLORS = [
|
|
||||||
'#8884d8', // Croissants
|
|
||||||
'#82ca9d', // Pan de molde
|
|
||||||
'#ffc658', // Roscón de Reyes
|
|
||||||
'#ff7c7c', // Torrijas
|
|
||||||
'#8dd1e1', // Magdalenas
|
|
||||||
'#d084d0', // Empanadas
|
|
||||||
'#ffb347', // Tarta de Santiago
|
|
||||||
'#87ceeb', // Mazapán
|
|
||||||
];
|
|
||||||
|
|
||||||
const EVENT_ICONS: Record<EventType, string> = {
|
|
||||||
[EventType.HOLIDAY]: '🎉',
|
|
||||||
[EventType.FESTIVAL]: '🎪',
|
|
||||||
[EventType.SPORTS_EVENT]: '⚽',
|
|
||||||
[EventType.WEATHER_EVENT]: '🌧️',
|
|
||||||
[EventType.SCHOOL_EVENT]: '🎒',
|
|
||||||
[EventType.CONCERT]: '🎵',
|
|
||||||
[EventType.CONFERENCE]: '📊',
|
|
||||||
[EventType.CONSTRUCTION]: '🚧',
|
|
||||||
};
|
|
||||||
|
|
||||||
const WEATHER_ICONS: Record<WeatherCondition, string> = {
|
|
||||||
[WeatherCondition.SUNNY]: '☀️',
|
|
||||||
[WeatherCondition.CLOUDY]: '☁️',
|
|
||||||
[WeatherCondition.RAINY]: '🌧️',
|
|
||||||
[WeatherCondition.STORMY]: '⛈️',
|
|
||||||
[WeatherCondition.SNOWY]: '❄️',
|
|
||||||
[WeatherCondition.FOGGY]: '🌫️',
|
|
||||||
[WeatherCondition.WINDY]: '🌪️',
|
|
||||||
};
|
|
||||||
|
|
||||||
const SPANISH_EVENT_NAMES: Record<EventType, string> = {
|
|
||||||
[EventType.HOLIDAY]: 'Festividad',
|
|
||||||
[EventType.FESTIVAL]: 'Festival',
|
|
||||||
[EventType.SPORTS_EVENT]: 'Evento Deportivo',
|
|
||||||
[EventType.WEATHER_EVENT]: 'Evento Climático',
|
|
||||||
[EventType.SCHOOL_EVENT]: 'Evento Escolar',
|
|
||||||
[EventType.CONCERT]: 'Concierto',
|
|
||||||
[EventType.CONFERENCE]: 'Conferencia',
|
|
||||||
[EventType.CONSTRUCTION]: 'Construcción',
|
|
||||||
};
|
|
||||||
|
|
||||||
const DemandChart: React.FC<DemandChartProps> = ({
|
|
||||||
className,
|
|
||||||
title = 'Predicción de Demanda',
|
|
||||||
data = [],
|
|
||||||
products = [],
|
|
||||||
selectedProducts = [],
|
|
||||||
onProductSelectionChange,
|
|
||||||
timeframe = 'weekly',
|
|
||||||
onTimeframeChange,
|
|
||||||
showConfidenceInterval = true,
|
|
||||||
showEvents = true,
|
|
||||||
showWeatherOverlay = false,
|
|
||||||
events = [],
|
|
||||||
weatherData = [],
|
|
||||||
loading = false,
|
|
||||||
error = null,
|
|
||||||
height = 400,
|
|
||||||
onExport,
|
|
||||||
}) => {
|
|
||||||
const [selectedPeriod, setSelectedPeriod] = useState<{ start?: Date; end?: Date }>({});
|
|
||||||
const [zoomedData, setZoomedData] = useState<ChartDataPoint[]>([]);
|
|
||||||
const [hoveredPoint, setHoveredPoint] = useState<ChartDataPoint | null>(null);
|
|
||||||
|
|
||||||
// Process and merge data with events and weather
|
|
||||||
const chartData = useMemo(() => {
|
|
||||||
const processedData: ChartDataPoint[] = data.map(point => {
|
|
||||||
const dateStr = point.date;
|
|
||||||
const event = events.find(e => e.date === dateStr);
|
|
||||||
const weather = weatherData.find(w => w.date === dateStr);
|
|
||||||
|
|
||||||
return {
|
|
||||||
date: dateStr,
|
|
||||||
actualDemand: point.actual_demand,
|
|
||||||
predictedDemand: point.predicted_demand,
|
|
||||||
confidenceLower: point.confidence_lower,
|
|
||||||
confidenceUpper: point.confidence_upper,
|
|
||||||
accuracy: point.accuracy,
|
|
||||||
trendDirection: point.trend_direction,
|
|
||||||
seasonalFactor: point.seasonal_factor,
|
|
||||||
anomalyScore: point.anomaly_score,
|
|
||||||
hasEvent: !!event,
|
|
||||||
eventType: event?.type,
|
|
||||||
eventName: event?.name,
|
|
||||||
eventImpact: event?.impact,
|
|
||||||
weather: weather?.condition,
|
|
||||||
temperature: weather?.temperature,
|
|
||||||
};
|
|
||||||
});
|
|
||||||
|
|
||||||
return processedData;
|
|
||||||
}, [data, events, weatherData]);
|
|
||||||
|
|
||||||
// Filter data based on selected period
|
|
||||||
const filteredData = useMemo(() => {
|
|
||||||
if (!selectedPeriod.start || !selectedPeriod.end) {
|
|
||||||
return chartData;
|
|
||||||
}
|
|
||||||
|
|
||||||
return chartData.filter(point => {
|
|
||||||
const pointDate = new Date(point.date);
|
|
||||||
return pointDate >= selectedPeriod.start! && pointDate <= selectedPeriod.end!;
|
|
||||||
});
|
|
||||||
}, [chartData, selectedPeriod]);
|
|
||||||
|
|
||||||
// Update zoomed data when filtered data changes
|
|
||||||
useEffect(() => {
|
|
||||||
setZoomedData(filteredData);
|
|
||||||
}, [filteredData]);
|
|
||||||
|
|
||||||
// Handle brush selection
|
|
||||||
const handleBrushChange = useCallback((brushData: any) => {
|
|
||||||
if (brushData && brushData.startIndex !== undefined && brushData.endIndex !== undefined) {
|
|
||||||
const newData = filteredData.slice(brushData.startIndex, brushData.endIndex + 1);
|
|
||||||
setZoomedData(newData);
|
|
||||||
} else {
|
|
||||||
setZoomedData(filteredData);
|
|
||||||
}
|
|
||||||
}, [filteredData]);
|
|
||||||
|
|
||||||
// Reset zoom
|
|
||||||
const handleResetZoom = useCallback(() => {
|
|
||||||
setZoomedData(filteredData);
|
|
||||||
setSelectedPeriod({});
|
|
||||||
}, [filteredData]);
|
|
||||||
|
|
||||||
// Custom tooltip
|
|
||||||
const CustomTooltip = ({ active, payload, label }: any) => {
|
|
||||||
if (!active || !payload || !payload.length) return null;
|
|
||||||
|
|
||||||
const data = payload[0].payload as ChartDataPoint;
|
|
||||||
const formattedDate = new Date(label).toLocaleDateString('es-ES', {
|
|
||||||
day: 'numeric',
|
|
||||||
month: 'short',
|
|
||||||
year: 'numeric',
|
|
||||||
});
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="bg-card-bg border border-border-primary rounded-lg shadow-lg p-4 max-w-sm">
|
|
||||||
<h4 className="font-semibold text-text-primary mb-2">{formattedDate}</h4>
|
|
||||||
|
|
||||||
<div className="space-y-1">
|
|
||||||
{data.actualDemand !== undefined && (
|
|
||||||
<div className="flex justify-between items-center">
|
|
||||||
<span className="text-text-secondary text-sm">Demanda Real:</span>
|
|
||||||
<span className="font-medium text-blue-600">{data.actualDemand}</span>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{data.predictedDemand !== undefined && (
|
|
||||||
<div className="flex justify-between items-center">
|
|
||||||
<span className="text-text-secondary text-sm">Demanda Predicha:</span>
|
|
||||||
<span className="font-medium text-green-600">{data.predictedDemand.toFixed(1)}</span>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{showConfidenceInterval && data.confidenceLower !== undefined && data.confidenceUpper !== undefined && (
|
|
||||||
<div className="flex justify-between items-center">
|
|
||||||
<span className="text-text-secondary text-sm">Intervalo de Confianza:</span>
|
|
||||||
<span className="text-sm text-text-tertiary">
|
|
||||||
{data.confidenceLower.toFixed(1)} - {data.confidenceUpper.toFixed(1)}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{data.accuracy !== undefined && (
|
|
||||||
<div className="flex justify-between items-center">
|
|
||||||
<span className="text-text-secondary text-sm">Precisión:</span>
|
|
||||||
<Badge
|
|
||||||
variant={data.accuracy > 0.8 ? 'success' : data.accuracy > 0.6 ? 'warning' : 'danger'}
|
|
||||||
size="sm"
|
|
||||||
>
|
|
||||||
{(data.accuracy * 100).toFixed(1)}%
|
|
||||||
</Badge>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{showEvents && data.hasEvent && (
|
|
||||||
<div className="mt-3 pt-2 border-t border-border-secondary">
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<span className="text-lg">{EVENT_ICONS[data.eventType!]}</span>
|
|
||||||
<div className="flex-1">
|
|
||||||
<div className="font-medium text-text-primary text-sm">{data.eventName}</div>
|
|
||||||
<div className="text-xs text-text-tertiary">
|
|
||||||
{SPANISH_EVENT_NAMES[data.eventType!]}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<Badge
|
|
||||||
variant={data.eventImpact === 'high' ? 'danger' : data.eventImpact === 'medium' ? 'warning' : 'success'}
|
|
||||||
size="sm"
|
|
||||||
>
|
|
||||||
{data.eventImpact === 'high' ? 'Alto' : data.eventImpact === 'medium' ? 'Medio' : 'Bajo'}
|
|
||||||
</Badge>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{showWeatherOverlay && data.weather && (
|
|
||||||
<div className="mt-3 pt-2 border-t border-border-secondary">
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<span className="text-lg">{WEATHER_ICONS[data.weather]}</span>
|
|
||||||
<div className="flex-1">
|
|
||||||
<div className="text-sm text-text-primary capitalize">
|
|
||||||
{data.weather.replace('_', ' ')}
|
|
||||||
</div>
|
|
||||||
{data.temperature && (
|
|
||||||
<div className="text-xs text-text-tertiary">
|
|
||||||
{data.temperature}°C
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
// Event reference dots
|
|
||||||
const renderEventDots = () => {
|
|
||||||
if (!showEvents) return null;
|
|
||||||
|
|
||||||
return events
|
|
||||||
.filter(event => {
|
|
||||||
const eventData = zoomedData.find(d => d.date === event.date);
|
|
||||||
return eventData;
|
|
||||||
})
|
|
||||||
.map((event, index) => {
|
|
||||||
const eventData = zoomedData.find(d => d.date === event.date);
|
|
||||||
if (!eventData) return null;
|
|
||||||
|
|
||||||
const yValue = eventData.predictedDemand || eventData.actualDemand || 0;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<ReferenceDot
|
|
||||||
key={`event-${index}`}
|
|
||||||
x={event.date}
|
|
||||||
y={yValue}
|
|
||||||
r={8}
|
|
||||||
fill={event.impact === 'high' ? '#ef4444' : event.impact === 'medium' ? '#f59e0b' : '#10b981'}
|
|
||||||
stroke="#ffffff"
|
|
||||||
strokeWidth={2}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
// Loading state
|
|
||||||
if (loading) {
|
|
||||||
return (
|
|
||||||
<Card className={className}>
|
|
||||||
<CardHeader>
|
|
||||||
<h3 className="text-lg font-semibold text-text-primary">{title}</h3>
|
|
||||||
</CardHeader>
|
|
||||||
<CardBody>
|
|
||||||
<div className="flex items-center justify-center h-64">
|
|
||||||
<div className="flex items-center space-x-2">
|
|
||||||
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-color-primary"></div>
|
|
||||||
<span className="text-text-secondary">Cargando gráfico de demanda...</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</CardBody>
|
|
||||||
</Card>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Error state
|
|
||||||
if (error) {
|
|
||||||
return (
|
|
||||||
<Card className={className} variant="outlined">
|
|
||||||
<CardHeader>
|
|
||||||
<h3 className="text-lg font-semibold text-text-primary">{title}</h3>
|
|
||||||
</CardHeader>
|
|
||||||
<CardBody>
|
|
||||||
<div className="flex items-center justify-center h-64">
|
|
||||||
<div className="text-center">
|
|
||||||
<div className="text-red-500 mb-2">
|
|
||||||
<svg className="w-12 h-12 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
<p className="text-text-secondary">{error}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</CardBody>
|
|
||||||
</Card>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Empty state
|
|
||||||
if (zoomedData.length === 0) {
|
|
||||||
return (
|
|
||||||
<Card className={className}>
|
|
||||||
<CardHeader>
|
|
||||||
<h3 className="text-lg font-semibold text-text-primary">{title}</h3>
|
|
||||||
</CardHeader>
|
|
||||||
<CardBody>
|
|
||||||
<div className="flex items-center justify-center h-64">
|
|
||||||
<div className="text-center">
|
|
||||||
<div className="text-text-tertiary mb-2">
|
|
||||||
<svg className="w-12 h-12 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1} d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
<p className="text-text-secondary">No hay datos de demanda disponibles</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</CardBody>
|
|
||||||
</Card>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Card className={className}>
|
|
||||||
<CardHeader>
|
|
||||||
<div className="flex items-center justify-between flex-wrap gap-4">
|
|
||||||
<h3 className="text-lg font-semibold text-text-primary">{title}</h3>
|
|
||||||
|
|
||||||
<div className="flex items-center gap-3 flex-wrap">
|
|
||||||
{/* Time period selector */}
|
|
||||||
<Select
|
|
||||||
value={timeframe}
|
|
||||||
onChange={(value) => onTimeframeChange?.(value as 'weekly' | 'monthly' | 'quarterly' | 'yearly')}
|
|
||||||
className="w-32"
|
|
||||||
>
|
|
||||||
<option value="weekly">Semanal</option>
|
|
||||||
<option value="monthly">Mensual</option>
|
|
||||||
<option value="quarterly">Trimestral</option>
|
|
||||||
<option value="yearly">Anual</option>
|
|
||||||
</Select>
|
|
||||||
|
|
||||||
{/* Export options */}
|
|
||||||
{onExport && (
|
|
||||||
<div className="flex gap-1">
|
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
size="sm"
|
|
||||||
onClick={() => onExport('png')}
|
|
||||||
title="Exportar como PNG"
|
|
||||||
>
|
|
||||||
📊
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
size="sm"
|
|
||||||
onClick={() => onExport('csv')}
|
|
||||||
title="Exportar datos CSV"
|
|
||||||
>
|
|
||||||
📋
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Reset zoom */}
|
|
||||||
{zoomedData.length !== filteredData.length && (
|
|
||||||
<Button variant="ghost" size="sm" onClick={handleResetZoom}>
|
|
||||||
Restablecer Zoom
|
|
||||||
</Button>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</CardHeader>
|
|
||||||
|
|
||||||
<CardBody padding="lg">
|
|
||||||
<div style={{ width: '100%', height }}>
|
|
||||||
<ResponsiveContainer>
|
|
||||||
<ComposedChart data={zoomedData} margin={{ top: 20, right: 30, left: 20, bottom: 5 }}>
|
|
||||||
<CartesianGrid strokeDasharray="3 3" stroke="#e5e7eb" />
|
|
||||||
<XAxis
|
|
||||||
dataKey="date"
|
|
||||||
stroke="#6b7280"
|
|
||||||
fontSize={12}
|
|
||||||
tickFormatter={(value) => {
|
|
||||||
const date = new Date(value);
|
|
||||||
return timeframe === 'weekly'
|
|
||||||
? date.toLocaleDateString('es-ES', { month: 'short', day: 'numeric' })
|
|
||||||
: timeframe === 'monthly'
|
|
||||||
? date.toLocaleDateString('es-ES', { month: 'short', year: '2-digit' })
|
|
||||||
: date.getFullYear().toString();
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<YAxis
|
|
||||||
stroke="#6b7280"
|
|
||||||
fontSize={12}
|
|
||||||
tickFormatter={(value) => `${value}`}
|
|
||||||
/>
|
|
||||||
<Tooltip content={<CustomTooltip />} />
|
|
||||||
<Legend />
|
|
||||||
|
|
||||||
{/* Confidence interval area */}
|
|
||||||
{showConfidenceInterval && (
|
|
||||||
<Area
|
|
||||||
type="monotone"
|
|
||||||
dataKey="confidenceUpper"
|
|
||||||
stackId={1}
|
|
||||||
stroke="none"
|
|
||||||
fill="#10b98120"
|
|
||||||
fillOpacity={0.3}
|
|
||||||
name="Intervalo de Confianza Superior"
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
{showConfidenceInterval && (
|
|
||||||
<Area
|
|
||||||
type="monotone"
|
|
||||||
dataKey="confidenceLower"
|
|
||||||
stackId={1}
|
|
||||||
stroke="none"
|
|
||||||
fill="#ffffff"
|
|
||||||
name="Intervalo de Confianza Inferior"
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Actual demand line */}
|
|
||||||
<Line
|
|
||||||
type="monotone"
|
|
||||||
dataKey="actualDemand"
|
|
||||||
stroke="#3b82f6"
|
|
||||||
strokeWidth={3}
|
|
||||||
dot={false}
|
|
||||||
activeDot={{ r: 6, stroke: '#3b82f6', strokeWidth: 2 }}
|
|
||||||
name="Demanda Real"
|
|
||||||
/>
|
|
||||||
|
|
||||||
{/* Predicted demand line */}
|
|
||||||
<Line
|
|
||||||
type="monotone"
|
|
||||||
dataKey="predictedDemand"
|
|
||||||
stroke="#10b981"
|
|
||||||
strokeWidth={2}
|
|
||||||
strokeDasharray="5 5"
|
|
||||||
dot={false}
|
|
||||||
activeDot={{ r: 4, stroke: '#10b981', strokeWidth: 2 }}
|
|
||||||
name="Demanda Predicha"
|
|
||||||
/>
|
|
||||||
|
|
||||||
{renderEventDots()}
|
|
||||||
</ComposedChart>
|
|
||||||
</ResponsiveContainer>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Brush for zooming */}
|
|
||||||
{filteredData.length > 20 && (
|
|
||||||
<div className="mt-4" style={{ width: '100%', height: 80 }}>
|
|
||||||
<ResponsiveContainer>
|
|
||||||
<LineChart data={filteredData}>
|
|
||||||
<Line
|
|
||||||
type="monotone"
|
|
||||||
dataKey="predictedDemand"
|
|
||||||
stroke="#10b981"
|
|
||||||
strokeWidth={1}
|
|
||||||
dot={false}
|
|
||||||
/>
|
|
||||||
<Brush
|
|
||||||
dataKey="date"
|
|
||||||
height={30}
|
|
||||||
stroke="#8884d8"
|
|
||||||
onChange={handleBrushChange}
|
|
||||||
tickFormatter={(value) => {
|
|
||||||
const date = new Date(value);
|
|
||||||
return date.toLocaleDateString('es-ES', { month: 'short', day: 'numeric' });
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</LineChart>
|
|
||||||
</ResponsiveContainer>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Chart legend */}
|
|
||||||
<div className="flex items-center justify-center gap-6 mt-4 text-sm">
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<div className="w-4 h-0.5 bg-blue-500"></div>
|
|
||||||
<span className="text-text-secondary">Demanda Real</span>
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<div className="w-4 h-0.5 bg-green-500 border-dashed border-t-2 border-green-500"></div>
|
|
||||||
<span className="text-text-secondary">Demanda Predicha</span>
|
|
||||||
</div>
|
|
||||||
{showConfidenceInterval && (
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<div className="w-4 h-2 bg-green-500 bg-opacity-20"></div>
|
|
||||||
<span className="text-text-secondary">Intervalo de Confianza</span>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{showEvents && events.length > 0 && (
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<div className="w-2 h-2 bg-red-500 rounded-full"></div>
|
|
||||||
<span className="text-text-secondary">Eventos</span>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</CardBody>
|
|
||||||
</Card>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default DemandChart;
|
|
||||||
@@ -1,653 +0,0 @@
|
|||||||
import React, { useState, useMemo, useCallback } from 'react';
|
|
||||||
import { clsx } from 'clsx';
|
|
||||||
import { Card, CardHeader, CardBody } from '../../ui';
|
|
||||||
import { Button } from '../../ui';
|
|
||||||
import { Badge } from '../../ui';
|
|
||||||
import { Select } from '../../ui';
|
|
||||||
import { Input } from '../../ui';
|
|
||||||
import { Table, TableColumn } from '../../ui';
|
|
||||||
import {
|
|
||||||
ForecastResponse,
|
|
||||||
TrendDirection,
|
|
||||||
ModelType,
|
|
||||||
} from '../../../types/forecasting.types';
|
|
||||||
|
|
||||||
export interface ForecastTableProps {
|
|
||||||
className?: string;
|
|
||||||
title?: string;
|
|
||||||
data?: ForecastResponse[];
|
|
||||||
loading?: boolean;
|
|
||||||
error?: string | null;
|
|
||||||
pageSize?: number;
|
|
||||||
onExportCSV?: (data: ForecastResponse[]) => void;
|
|
||||||
onBulkAction?: (action: string, selectedItems: ForecastResponse[]) => void;
|
|
||||||
onProductClick?: (productName: string) => void;
|
|
||||||
showBulkActions?: boolean;
|
|
||||||
showFilters?: boolean;
|
|
||||||
compact?: boolean;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface FilterState {
|
|
||||||
productName: string;
|
|
||||||
category: string;
|
|
||||||
accuracyRange: 'all' | 'high' | 'medium' | 'low';
|
|
||||||
trendDirection: TrendDirection | 'all';
|
|
||||||
confidenceLevel: number | 'all';
|
|
||||||
dateRange: 'today' | 'week' | 'month' | 'quarter' | 'all';
|
|
||||||
}
|
|
||||||
|
|
||||||
interface SortState {
|
|
||||||
field: string;
|
|
||||||
order: 'asc' | 'desc';
|
|
||||||
}
|
|
||||||
|
|
||||||
const SPANISH_TRENDS: Record<TrendDirection, string> = {
|
|
||||||
[TrendDirection.INCREASING]: 'Creciente',
|
|
||||||
[TrendDirection.DECREASING]: 'Decreciente',
|
|
||||||
[TrendDirection.STABLE]: 'Estable',
|
|
||||||
[TrendDirection.VOLATILE]: 'Volátil',
|
|
||||||
[TrendDirection.SEASONAL]: 'Estacional',
|
|
||||||
};
|
|
||||||
|
|
||||||
const TREND_COLORS: Record<TrendDirection, string> = {
|
|
||||||
[TrendDirection.INCREASING]: 'text-green-600',
|
|
||||||
[TrendDirection.DECREASING]: 'text-red-600',
|
|
||||||
[TrendDirection.STABLE]: 'text-blue-600',
|
|
||||||
[TrendDirection.VOLATILE]: 'text-yellow-600',
|
|
||||||
[TrendDirection.SEASONAL]: 'text-purple-600',
|
|
||||||
};
|
|
||||||
|
|
||||||
const TREND_ICONS: Record<TrendDirection, string> = {
|
|
||||||
[TrendDirection.INCREASING]: '↗️',
|
|
||||||
[TrendDirection.DECREASING]: '↘️',
|
|
||||||
[TrendDirection.STABLE]: '➡️',
|
|
||||||
[TrendDirection.VOLATILE]: '📈',
|
|
||||||
[TrendDirection.SEASONAL]: '🔄',
|
|
||||||
};
|
|
||||||
|
|
||||||
const BAKERY_CATEGORIES = [
|
|
||||||
{ value: 'all', label: 'Todas las categorías' },
|
|
||||||
{ value: 'pan', label: 'Pan y Bollería' },
|
|
||||||
{ value: 'dulces', label: 'Dulces y Postres' },
|
|
||||||
{ value: 'salados', label: 'Salados' },
|
|
||||||
{ value: 'estacional', label: 'Productos Estacionales' },
|
|
||||||
{ value: 'bebidas', label: 'Bebidas' },
|
|
||||||
];
|
|
||||||
|
|
||||||
const SPANISH_PRODUCTS = [
|
|
||||||
'Croissants',
|
|
||||||
'Pan de molde',
|
|
||||||
'Roscón de Reyes',
|
|
||||||
'Torrijas',
|
|
||||||
'Magdalenas',
|
|
||||||
'Empanadas',
|
|
||||||
'Tarta de Santiago',
|
|
||||||
'Mazapán',
|
|
||||||
'Pan tostado',
|
|
||||||
'Palmeras',
|
|
||||||
'Napolitanas',
|
|
||||||
'Ensaimadas',
|
|
||||||
'Churros',
|
|
||||||
'Polvorones',
|
|
||||||
'Turrones',
|
|
||||||
];
|
|
||||||
|
|
||||||
const ForecastTable: React.FC<ForecastTableProps> = ({
|
|
||||||
className,
|
|
||||||
title = 'Predicciones de Demanda',
|
|
||||||
data = [],
|
|
||||||
loading = false,
|
|
||||||
error = null,
|
|
||||||
pageSize = 20,
|
|
||||||
onExportCSV,
|
|
||||||
onBulkAction,
|
|
||||||
onProductClick,
|
|
||||||
showBulkActions = true,
|
|
||||||
showFilters = true,
|
|
||||||
compact = false,
|
|
||||||
}) => {
|
|
||||||
const [filters, setFilters] = useState<FilterState>({
|
|
||||||
productName: '',
|
|
||||||
category: 'all',
|
|
||||||
accuracyRange: 'all',
|
|
||||||
trendDirection: 'all',
|
|
||||||
confidenceLevel: 'all',
|
|
||||||
dateRange: 'all',
|
|
||||||
});
|
|
||||||
|
|
||||||
const [sort, setSort] = useState<SortState>({
|
|
||||||
field: 'forecast_date',
|
|
||||||
order: 'desc',
|
|
||||||
});
|
|
||||||
|
|
||||||
const [selectedRows, setSelectedRows] = useState<React.Key[]>([]);
|
|
||||||
const [currentPage, setCurrentPage] = useState(1);
|
|
||||||
|
|
||||||
// Get product category (simplified mapping)
|
|
||||||
const getProductCategory = useCallback((productName: string): string => {
|
|
||||||
const name = productName.toLowerCase();
|
|
||||||
if (name.includes('pan') || name.includes('croissant') || name.includes('magdalena')) return 'pan';
|
|
||||||
if (name.includes('roscón') || name.includes('tarta') || name.includes('mazapán') || name.includes('polvorón')) return 'dulces';
|
|
||||||
if (name.includes('empanada') || name.includes('churro')) return 'salados';
|
|
||||||
if (name.includes('torrija') || name.includes('turrón')) return 'estacional';
|
|
||||||
return 'pan';
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
// Filter and sort data
|
|
||||||
const filteredAndSortedData = useMemo(() => {
|
|
||||||
let filtered = [...data];
|
|
||||||
|
|
||||||
// Apply filters
|
|
||||||
if (filters.productName) {
|
|
||||||
filtered = filtered.filter(item =>
|
|
||||||
item.product_name.toLowerCase().includes(filters.productName.toLowerCase())
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (filters.category !== 'all') {
|
|
||||||
filtered = filtered.filter(item => getProductCategory(item.product_name) === filters.category);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (filters.accuracyRange !== 'all') {
|
|
||||||
filtered = filtered.filter(item => {
|
|
||||||
const accuracy = item.accuracy_score || 0;
|
|
||||||
switch (filters.accuracyRange) {
|
|
||||||
case 'high': return accuracy >= 0.8;
|
|
||||||
case 'medium': return accuracy >= 0.6 && accuracy < 0.8;
|
|
||||||
case 'low': return accuracy < 0.6;
|
|
||||||
default: return true;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
if (filters.trendDirection !== 'all') {
|
|
||||||
filtered = filtered.filter(item => {
|
|
||||||
// Determine trend from predicted vs historical (simplified)
|
|
||||||
const trend = item.predicted_demand > (item.actual_demand || 0) ? TrendDirection.INCREASING : TrendDirection.DECREASING;
|
|
||||||
return trend === filters.trendDirection;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
if (filters.confidenceLevel !== 'all') {
|
|
||||||
filtered = filtered.filter(item => item.confidence_level >= filters.confidenceLevel);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (filters.dateRange !== 'all') {
|
|
||||||
const now = new Date();
|
|
||||||
const filterDate = new Date();
|
|
||||||
|
|
||||||
switch (filters.dateRange) {
|
|
||||||
case 'today':
|
|
||||||
filterDate.setHours(0, 0, 0, 0);
|
|
||||||
break;
|
|
||||||
case 'week':
|
|
||||||
filterDate.setDate(now.getDate() - 7);
|
|
||||||
break;
|
|
||||||
case 'month':
|
|
||||||
filterDate.setMonth(now.getMonth() - 1);
|
|
||||||
break;
|
|
||||||
case 'quarter':
|
|
||||||
filterDate.setMonth(now.getMonth() - 3);
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
|
|
||||||
filtered = filtered.filter(item => new Date(item.forecast_date) >= filterDate);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Apply sorting
|
|
||||||
filtered.sort((a, b) => {
|
|
||||||
let aValue: any;
|
|
||||||
let bValue: any;
|
|
||||||
|
|
||||||
switch (sort.field) {
|
|
||||||
case 'product_name':
|
|
||||||
aValue = a.product_name;
|
|
||||||
bValue = b.product_name;
|
|
||||||
break;
|
|
||||||
case 'predicted_demand':
|
|
||||||
aValue = a.predicted_demand;
|
|
||||||
bValue = b.predicted_demand;
|
|
||||||
break;
|
|
||||||
case 'accuracy_score':
|
|
||||||
aValue = a.accuracy_score || 0;
|
|
||||||
bValue = b.accuracy_score || 0;
|
|
||||||
break;
|
|
||||||
case 'confidence_level':
|
|
||||||
aValue = a.confidence_level;
|
|
||||||
bValue = b.confidence_level;
|
|
||||||
break;
|
|
||||||
case 'forecast_date':
|
|
||||||
aValue = new Date(a.forecast_date);
|
|
||||||
bValue = new Date(b.forecast_date);
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
return 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (aValue < bValue) return sort.order === 'asc' ? -1 : 1;
|
|
||||||
if (aValue > bValue) return sort.order === 'asc' ? 1 : -1;
|
|
||||||
return 0;
|
|
||||||
});
|
|
||||||
|
|
||||||
return filtered;
|
|
||||||
}, [data, filters, sort, getProductCategory]);
|
|
||||||
|
|
||||||
// Paginated data
|
|
||||||
const paginatedData = useMemo(() => {
|
|
||||||
const startIndex = (currentPage - 1) * pageSize;
|
|
||||||
return filteredAndSortedData.slice(startIndex, startIndex + pageSize);
|
|
||||||
}, [filteredAndSortedData, currentPage, pageSize]);
|
|
||||||
|
|
||||||
// Handle sort change
|
|
||||||
const handleSort = useCallback((field: string, order: 'asc' | 'desc' | null) => {
|
|
||||||
if (order === null) {
|
|
||||||
setSort({ field: 'forecast_date', order: 'desc' });
|
|
||||||
} else {
|
|
||||||
setSort({ field, order });
|
|
||||||
}
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
// Handle filter change
|
|
||||||
const handleFilterChange = useCallback((key: keyof FilterState, value: any) => {
|
|
||||||
setFilters(prev => ({ ...prev, [key]: value }));
|
|
||||||
setCurrentPage(1); // Reset to first page when filtering
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
// Handle bulk actions
|
|
||||||
const handleBulkAction = useCallback((action: string) => {
|
|
||||||
const selectedData = filteredAndSortedData.filter(item =>
|
|
||||||
selectedRows.includes(item.id)
|
|
||||||
);
|
|
||||||
onBulkAction?.(action, selectedData);
|
|
||||||
}, [filteredAndSortedData, selectedRows, onBulkAction]);
|
|
||||||
|
|
||||||
// Calculate accuracy percentage and trend
|
|
||||||
const getAccuracyInfo = useCallback((item: ForecastResponse) => {
|
|
||||||
const accuracy = item.accuracy_score || 0;
|
|
||||||
const percentage = (accuracy * 100).toFixed(1);
|
|
||||||
|
|
||||||
let variant: 'success' | 'warning' | 'danger' = 'success';
|
|
||||||
if (accuracy < 0.6) variant = 'danger';
|
|
||||||
else if (accuracy < 0.8) variant = 'warning';
|
|
||||||
|
|
||||||
return { percentage, variant };
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
// Get trend info
|
|
||||||
const getTrendInfo = useCallback((item: ForecastResponse) => {
|
|
||||||
// Simplified trend calculation
|
|
||||||
const trend = item.predicted_demand > (item.actual_demand || 0) ?
|
|
||||||
TrendDirection.INCREASING : TrendDirection.DECREASING;
|
|
||||||
|
|
||||||
return {
|
|
||||||
direction: trend,
|
|
||||||
label: SPANISH_TRENDS[trend],
|
|
||||||
color: TREND_COLORS[trend],
|
|
||||||
icon: TREND_ICONS[trend],
|
|
||||||
};
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
// Table columns
|
|
||||||
const columns: TableColumn<ForecastResponse>[] = useMemo(() => {
|
|
||||||
const baseColumns: TableColumn<ForecastResponse>[] = [
|
|
||||||
{
|
|
||||||
key: 'product_name',
|
|
||||||
title: 'Producto',
|
|
||||||
dataIndex: 'product_name',
|
|
||||||
sortable: true,
|
|
||||||
width: compact ? 120 : 160,
|
|
||||||
render: (value: string, record: ForecastResponse) => (
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<button
|
|
||||||
onClick={() => onProductClick?.(value)}
|
|
||||||
className="font-medium text-text-primary hover:text-color-primary transition-colors duration-150"
|
|
||||||
>
|
|
||||||
{value}
|
|
||||||
</button>
|
|
||||||
<Badge variant="ghost" size="sm">
|
|
||||||
{getProductCategory(value)}
|
|
||||||
</Badge>
|
|
||||||
</div>
|
|
||||||
),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'predicted_demand',
|
|
||||||
title: 'Demanda Predicha',
|
|
||||||
dataIndex: 'predicted_demand',
|
|
||||||
sortable: true,
|
|
||||||
align: 'right' as const,
|
|
||||||
width: compact ? 100 : 120,
|
|
||||||
render: (value: number) => (
|
|
||||||
<div className="font-semibold text-green-600">
|
|
||||||
{value.toFixed(0)}
|
|
||||||
</div>
|
|
||||||
),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'actual_demand',
|
|
||||||
title: 'Demanda Real',
|
|
||||||
dataIndex: 'actual_demand',
|
|
||||||
align: 'right' as const,
|
|
||||||
width: compact ? 80 : 100,
|
|
||||||
render: (value?: number) => (
|
|
||||||
<div className="font-medium text-blue-600">
|
|
||||||
{value ? value.toFixed(0) : '-'}
|
|
||||||
</div>
|
|
||||||
),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'accuracy_score',
|
|
||||||
title: 'Precisión',
|
|
||||||
dataIndex: 'accuracy_score',
|
|
||||||
sortable: true,
|
|
||||||
align: 'center' as const,
|
|
||||||
width: 80,
|
|
||||||
render: (value: number | undefined, record: ForecastResponse) => {
|
|
||||||
const { percentage, variant } = getAccuracyInfo(record);
|
|
||||||
return (
|
|
||||||
<Badge variant={variant} size="sm">
|
|
||||||
{percentage}%
|
|
||||||
</Badge>
|
|
||||||
);
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'trend',
|
|
||||||
title: 'Tendencia',
|
|
||||||
align: 'center' as const,
|
|
||||||
width: compact ? 80 : 100,
|
|
||||||
render: (_, record: ForecastResponse) => {
|
|
||||||
const trend = getTrendInfo(record);
|
|
||||||
return (
|
|
||||||
<div className="flex items-center justify-center gap-1">
|
|
||||||
<span className="text-lg">{trend.icon}</span>
|
|
||||||
<span className={clsx('text-xs font-medium', trend.color)}>
|
|
||||||
{compact ? '' : trend.label}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'confidence_interval',
|
|
||||||
title: 'Intervalo de Confianza',
|
|
||||||
align: 'center' as const,
|
|
||||||
width: compact ? 120 : 140,
|
|
||||||
render: (_, record: ForecastResponse) => (
|
|
||||||
<div className="text-sm text-text-secondary">
|
|
||||||
{record.confidence_lower.toFixed(0)} - {record.confidence_upper.toFixed(0)}
|
|
||||||
<div className="text-xs text-text-tertiary">
|
|
||||||
({(record.confidence_level * 100).toFixed(0)}%)
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
),
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
if (!compact) {
|
|
||||||
baseColumns.push(
|
|
||||||
{
|
|
||||||
key: 'forecast_date',
|
|
||||||
title: 'Fecha de Predicción',
|
|
||||||
dataIndex: 'forecast_date',
|
|
||||||
sortable: true,
|
|
||||||
width: 120,
|
|
||||||
render: (value: string) => (
|
|
||||||
<div className="text-sm">
|
|
||||||
{new Date(value).toLocaleDateString('es-ES', {
|
|
||||||
day: 'numeric',
|
|
||||||
month: 'short',
|
|
||||||
year: '2-digit',
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'model_version',
|
|
||||||
title: 'Modelo',
|
|
||||||
dataIndex: 'model_version',
|
|
||||||
width: 80,
|
|
||||||
render: (value: string) => (
|
|
||||||
<Badge variant="outlined" size="sm">
|
|
||||||
v{value}
|
|
||||||
</Badge>
|
|
||||||
),
|
|
||||||
}
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return baseColumns;
|
|
||||||
}, [compact, onProductClick, getProductCategory, getAccuracyInfo, getTrendInfo]);
|
|
||||||
|
|
||||||
// Loading state
|
|
||||||
if (loading) {
|
|
||||||
return (
|
|
||||||
<Card className={className}>
|
|
||||||
<CardHeader>
|
|
||||||
<h3 className="text-lg font-semibold text-text-primary">{title}</h3>
|
|
||||||
</CardHeader>
|
|
||||||
<CardBody>
|
|
||||||
<div className="flex items-center justify-center h-64">
|
|
||||||
<div className="flex items-center space-x-2">
|
|
||||||
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-color-primary"></div>
|
|
||||||
<span className="text-text-secondary">Cargando predicciones...</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</CardBody>
|
|
||||||
</Card>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Error state
|
|
||||||
if (error) {
|
|
||||||
return (
|
|
||||||
<Card className={className} variant="outlined">
|
|
||||||
<CardHeader>
|
|
||||||
<h3 className="text-lg font-semibold text-text-primary">{title}</h3>
|
|
||||||
</CardHeader>
|
|
||||||
<CardBody>
|
|
||||||
<div className="flex items-center justify-center h-64">
|
|
||||||
<div className="text-center">
|
|
||||||
<div className="text-red-500 mb-2">
|
|
||||||
<svg className="w-12 h-12 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
<p className="text-text-secondary">{error}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</CardBody>
|
|
||||||
</Card>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Card className={className}>
|
|
||||||
<CardHeader>
|
|
||||||
<div className="flex items-center justify-between flex-wrap gap-4">
|
|
||||||
<div className="flex items-center gap-3">
|
|
||||||
<h3 className="text-lg font-semibold text-text-primary">{title}</h3>
|
|
||||||
<Badge variant="ghost">
|
|
||||||
{filteredAndSortedData.length} predicciones
|
|
||||||
</Badge>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
{onExportCSV && (
|
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
size="sm"
|
|
||||||
onClick={() => onExportCSV(filteredAndSortedData)}
|
|
||||||
>
|
|
||||||
📊 Exportar CSV
|
|
||||||
</Button>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{showBulkActions && selectedRows.length > 0 && (
|
|
||||||
<div className="flex gap-1">
|
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
size="sm"
|
|
||||||
onClick={() => handleBulkAction('production_plan')}
|
|
||||||
>
|
|
||||||
📋 Plan de Producción
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
size="sm"
|
|
||||||
onClick={() => handleBulkAction('inventory_alert')}
|
|
||||||
>
|
|
||||||
🚨 Alertas de Inventario
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</CardHeader>
|
|
||||||
|
|
||||||
{showFilters && (
|
|
||||||
<div className="px-6 py-4 border-b border-border-primary bg-bg-secondary">
|
|
||||||
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
|
|
||||||
<Input
|
|
||||||
placeholder="Buscar producto..."
|
|
||||||
value={filters.productName}
|
|
||||||
onChange={(e) => handleFilterChange('productName', e.target.value)}
|
|
||||||
className="text-sm"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<Select
|
|
||||||
value={filters.category}
|
|
||||||
onChange={(value) => handleFilterChange('category', value)}
|
|
||||||
className="text-sm"
|
|
||||||
>
|
|
||||||
{BAKERY_CATEGORIES.map(cat => (
|
|
||||||
<option key={cat.value} value={cat.value}>{cat.label}</option>
|
|
||||||
))}
|
|
||||||
</Select>
|
|
||||||
|
|
||||||
<Select
|
|
||||||
value={filters.accuracyRange}
|
|
||||||
onChange={(value) => handleFilterChange('accuracyRange', value)}
|
|
||||||
className="text-sm"
|
|
||||||
>
|
|
||||||
<option value="all">Toda precisión</option>
|
|
||||||
<option value="high">Alta (>80%)</option>
|
|
||||||
<option value="medium">Media (60-80%)</option>
|
|
||||||
<option value="low">Baja (<60%)</option>
|
|
||||||
</Select>
|
|
||||||
|
|
||||||
<Select
|
|
||||||
value={filters.trendDirection}
|
|
||||||
onChange={(value) => handleFilterChange('trendDirection', value)}
|
|
||||||
className="text-sm"
|
|
||||||
>
|
|
||||||
<option value="all">Todas las tendencias</option>
|
|
||||||
{Object.entries(SPANISH_TRENDS).map(([key, label]) => (
|
|
||||||
<option key={key} value={key}>{label}</option>
|
|
||||||
))}
|
|
||||||
</Select>
|
|
||||||
|
|
||||||
<Select
|
|
||||||
value={filters.confidenceLevel}
|
|
||||||
onChange={(value) => handleFilterChange('confidenceLevel', value === 'all' ? 'all' : parseFloat(value))}
|
|
||||||
className="text-sm"
|
|
||||||
>
|
|
||||||
<option value="all">Toda confianza</option>
|
|
||||||
<option value="0.9">Alta (>90%)</option>
|
|
||||||
<option value="0.8">Media (>80%)</option>
|
|
||||||
<option value="0.7">Baja (>70%)</option>
|
|
||||||
</Select>
|
|
||||||
|
|
||||||
<Select
|
|
||||||
value={filters.dateRange}
|
|
||||||
onChange={(value) => handleFilterChange('dateRange', value)}
|
|
||||||
className="text-sm"
|
|
||||||
>
|
|
||||||
<option value="all">Todo el tiempo</option>
|
|
||||||
<option value="today">Hoy</option>
|
|
||||||
<option value="week">Última semana</option>
|
|
||||||
<option value="month">Último mes</option>
|
|
||||||
<option value="quarter">Último trimestre</option>
|
|
||||||
</Select>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<CardBody padding="none">
|
|
||||||
<Table
|
|
||||||
columns={columns}
|
|
||||||
data={paginatedData}
|
|
||||||
rowSelection={showBulkActions ? {
|
|
||||||
selectedRowKeys: selectedRows,
|
|
||||||
onSelectAll: (selected, selectedRows, changeRows) => {
|
|
||||||
setSelectedRows(selected ? selectedRows.map(row => row.id) : []);
|
|
||||||
},
|
|
||||||
onSelect: (record, selected) => {
|
|
||||||
setSelectedRows(prev =>
|
|
||||||
selected
|
|
||||||
? [...prev, record.id]
|
|
||||||
: prev.filter(key => key !== record.id)
|
|
||||||
);
|
|
||||||
},
|
|
||||||
} : undefined}
|
|
||||||
pagination={{
|
|
||||||
current: currentPage,
|
|
||||||
pageSize,
|
|
||||||
total: filteredAndSortedData.length,
|
|
||||||
showSizeChanger: true,
|
|
||||||
showTotal: (total, range) =>
|
|
||||||
`${range[0]}-${range[1]} de ${total} predicciones`,
|
|
||||||
onChange: (page, size) => {
|
|
||||||
setCurrentPage(page);
|
|
||||||
},
|
|
||||||
}}
|
|
||||||
sort={{
|
|
||||||
field: sort.field,
|
|
||||||
order: sort.order,
|
|
||||||
}}
|
|
||||||
onSort={handleSort}
|
|
||||||
size={compact ? 'sm' : 'md'}
|
|
||||||
hover={true}
|
|
||||||
expandable={!compact ? {
|
|
||||||
expandedRowRender: (record) => (
|
|
||||||
<div className="p-4 bg-bg-tertiary">
|
|
||||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
|
|
||||||
<div>
|
|
||||||
<div className="font-medium text-text-primary mb-1">ID de Predicción</div>
|
|
||||||
<div className="text-text-secondary font-mono">{record.id}</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div className="font-medium text-text-primary mb-1">Fecha de Creación</div>
|
|
||||||
<div className="text-text-secondary">
|
|
||||||
{new Date(record.created_at).toLocaleString('es-ES')}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div className="font-medium text-text-primary mb-1">Factores Externos</div>
|
|
||||||
<div className="text-text-secondary">
|
|
||||||
{Object.entries(record.external_factors_impact).length > 0
|
|
||||||
? Object.keys(record.external_factors_impact).join(', ')
|
|
||||||
: 'Ninguno'
|
|
||||||
}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div className="font-medium text-text-primary mb-1">Componente Estacional</div>
|
|
||||||
<div className="text-text-secondary">
|
|
||||||
{record.seasonal_component
|
|
||||||
? (record.seasonal_component * 100).toFixed(1) + '%'
|
|
||||||
: 'N/A'
|
|
||||||
}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
),
|
|
||||||
} : undefined}
|
|
||||||
/>
|
|
||||||
</CardBody>
|
|
||||||
</Card>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default ForecastTable;
|
|
||||||
@@ -1,634 +0,0 @@
|
|||||||
import React, { useState, useMemo, useCallback } from 'react';
|
|
||||||
import { clsx } from 'clsx';
|
|
||||||
import {
|
|
||||||
RadialBarChart,
|
|
||||||
RadialBar,
|
|
||||||
ResponsiveContainer,
|
|
||||||
PieChart,
|
|
||||||
Pie,
|
|
||||||
Cell,
|
|
||||||
Tooltip,
|
|
||||||
BarChart,
|
|
||||||
Bar,
|
|
||||||
XAxis,
|
|
||||||
YAxis,
|
|
||||||
CartesianGrid,
|
|
||||||
ComposedChart,
|
|
||||||
Line,
|
|
||||||
LineChart,
|
|
||||||
ReferenceLine,
|
|
||||||
} from 'recharts';
|
|
||||||
import { Card, CardHeader, CardBody } from '../../ui';
|
|
||||||
import { Button } from '../../ui';
|
|
||||||
import { Badge } from '../../ui';
|
|
||||||
import { Select } from '../../ui';
|
|
||||||
import {
|
|
||||||
SeasonalPattern,
|
|
||||||
SeasonalComponent,
|
|
||||||
HolidayEffect,
|
|
||||||
WeeklyPattern,
|
|
||||||
YearlyTrend,
|
|
||||||
Season,
|
|
||||||
SeasonalPeriod,
|
|
||||||
DayOfWeek,
|
|
||||||
} from '../../../types/forecasting.types';
|
|
||||||
|
|
||||||
export interface SeasonalityIndicatorProps {
|
|
||||||
className?: string;
|
|
||||||
title?: string;
|
|
||||||
seasonalPatterns?: SeasonalPattern[];
|
|
||||||
selectedProduct?: string;
|
|
||||||
onProductChange?: (product: string) => void;
|
|
||||||
viewMode?: 'circular' | 'calendar' | 'heatmap' | 'trends';
|
|
||||||
onViewModeChange?: (mode: 'circular' | 'calendar' | 'heatmap' | 'trends') => void;
|
|
||||||
showComparison?: boolean;
|
|
||||||
comparisonYear?: number;
|
|
||||||
loading?: boolean;
|
|
||||||
error?: string | null;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface MonthlyData {
|
|
||||||
month: string;
|
|
||||||
value: number;
|
|
||||||
strength: number;
|
|
||||||
color: string;
|
|
||||||
season: Season;
|
|
||||||
holidays: string[];
|
|
||||||
}
|
|
||||||
|
|
||||||
interface WeeklyData {
|
|
||||||
day: string;
|
|
||||||
dayShort: string;
|
|
||||||
value: number;
|
|
||||||
variance: number;
|
|
||||||
peakHours?: number[];
|
|
||||||
}
|
|
||||||
|
|
||||||
interface HeatmapData {
|
|
||||||
month: number;
|
|
||||||
week: number;
|
|
||||||
intensity: number;
|
|
||||||
value: number;
|
|
||||||
holiday?: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
const SPANISH_MONTHS = [
|
|
||||||
'Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio',
|
|
||||||
'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'
|
|
||||||
];
|
|
||||||
|
|
||||||
const SPANISH_DAYS = [
|
|
||||||
'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado', 'Domingo'
|
|
||||||
];
|
|
||||||
|
|
||||||
const SPANISH_DAYS_SHORT = [
|
|
||||||
'L', 'M', 'X', 'J', 'V', 'S', 'D'
|
|
||||||
];
|
|
||||||
|
|
||||||
const SPANISH_SEASONS: Record<Season, string> = {
|
|
||||||
[Season.SPRING]: 'Primavera',
|
|
||||||
[Season.SUMMER]: 'Verano',
|
|
||||||
[Season.FALL]: 'Otoño',
|
|
||||||
[Season.WINTER]: 'Invierno',
|
|
||||||
};
|
|
||||||
|
|
||||||
const SEASON_COLORS: Record<Season, string> = {
|
|
||||||
[Season.SPRING]: '#22c55e', // Green
|
|
||||||
[Season.SUMMER]: '#f59e0b', // Amber
|
|
||||||
[Season.FALL]: '#ea580c', // Orange
|
|
||||||
[Season.WINTER]: '#3b82f6', // Blue
|
|
||||||
};
|
|
||||||
|
|
||||||
const SPANISH_HOLIDAYS = [
|
|
||||||
{ month: 0, name: 'Año Nuevo' },
|
|
||||||
{ month: 0, name: 'Día de Reyes' },
|
|
||||||
{ month: 2, name: 'Semana Santa' }, // March/April
|
|
||||||
{ month: 4, name: 'Día del Trabajador' },
|
|
||||||
{ month: 7, name: 'Asunción' },
|
|
||||||
{ month: 9, name: 'Día Nacional' },
|
|
||||||
{ month: 10, name: 'Todos los Santos' },
|
|
||||||
{ month: 11, name: 'Constitución' },
|
|
||||||
{ month: 11, name: 'Navidad' },
|
|
||||||
];
|
|
||||||
|
|
||||||
const INTENSITY_COLORS = [
|
|
||||||
'#f3f4f6', // Very low
|
|
||||||
'#dbeafe', // Low
|
|
||||||
'#bfdbfe', // Medium-low
|
|
||||||
'#93c5fd', // Medium
|
|
||||||
'#60a5fa', // Medium-high
|
|
||||||
'#3b82f6', // High
|
|
||||||
'#2563eb', // Very high
|
|
||||||
'#1d4ed8', // Extremely high
|
|
||||||
];
|
|
||||||
|
|
||||||
const SeasonalityIndicator: React.FC<SeasonalityIndicatorProps> = ({
|
|
||||||
className,
|
|
||||||
title = 'Patrones Estacionales',
|
|
||||||
seasonalPatterns = [],
|
|
||||||
selectedProduct = '',
|
|
||||||
onProductChange,
|
|
||||||
viewMode = 'circular',
|
|
||||||
onViewModeChange,
|
|
||||||
showComparison = false,
|
|
||||||
comparisonYear = new Date().getFullYear() - 1,
|
|
||||||
loading = false,
|
|
||||||
error = null,
|
|
||||||
}) => {
|
|
||||||
const [hoveredElement, setHoveredElement] = useState<any>(null);
|
|
||||||
|
|
||||||
// Get current pattern data
|
|
||||||
const currentPattern = useMemo(() => {
|
|
||||||
if (!selectedProduct || seasonalPatterns.length === 0) {
|
|
||||||
return seasonalPatterns[0] || null;
|
|
||||||
}
|
|
||||||
return seasonalPatterns.find(p => p.product_name === selectedProduct) || seasonalPatterns[0];
|
|
||||||
}, [seasonalPatterns, selectedProduct]);
|
|
||||||
|
|
||||||
// Process monthly seasonal data
|
|
||||||
const monthlyData = useMemo((): MonthlyData[] => {
|
|
||||||
if (!currentPattern) return [];
|
|
||||||
|
|
||||||
const monthlyComponent = currentPattern.seasonal_components.find(
|
|
||||||
c => c.period === SeasonalPeriod.MONTHLY
|
|
||||||
);
|
|
||||||
|
|
||||||
if (!monthlyComponent) return [];
|
|
||||||
|
|
||||||
return SPANISH_MONTHS.map((month, index) => {
|
|
||||||
const value = monthlyComponent.pattern[index] || 0;
|
|
||||||
const strength = Math.abs(value);
|
|
||||||
|
|
||||||
// Determine season
|
|
||||||
let season: Season;
|
|
||||||
if (index >= 2 && index <= 4) season = Season.SPRING;
|
|
||||||
else if (index >= 5 && index <= 7) season = Season.SUMMER;
|
|
||||||
else if (index >= 8 && index <= 10) season = Season.FALL;
|
|
||||||
else season = Season.WINTER;
|
|
||||||
|
|
||||||
// Get holidays for this month
|
|
||||||
const holidays = SPANISH_HOLIDAYS
|
|
||||||
.filter(h => h.month === index)
|
|
||||||
.map(h => h.name);
|
|
||||||
|
|
||||||
return {
|
|
||||||
month,
|
|
||||||
value: value * 100, // Convert to percentage
|
|
||||||
strength: strength * 100,
|
|
||||||
color: SEASON_COLORS[season],
|
|
||||||
season,
|
|
||||||
holidays,
|
|
||||||
};
|
|
||||||
});
|
|
||||||
}, [currentPattern]);
|
|
||||||
|
|
||||||
// Process weekly data
|
|
||||||
const weeklyData = useMemo((): WeeklyData[] => {
|
|
||||||
if (!currentPattern) return [];
|
|
||||||
|
|
||||||
return currentPattern.weekly_patterns.map((pattern, index) => ({
|
|
||||||
day: SPANISH_DAYS[index] || `Día ${index + 1}`,
|
|
||||||
dayShort: SPANISH_DAYS_SHORT[index] || `D${index + 1}`,
|
|
||||||
value: pattern.average_multiplier * 100,
|
|
||||||
variance: pattern.variance * 100,
|
|
||||||
peakHours: pattern.peak_hours,
|
|
||||||
}));
|
|
||||||
}, [currentPattern]);
|
|
||||||
|
|
||||||
// Process heatmap data
|
|
||||||
const heatmapData = useMemo((): HeatmapData[] => {
|
|
||||||
if (!currentPattern) return [];
|
|
||||||
|
|
||||||
const data: HeatmapData[] = [];
|
|
||||||
const monthlyComponent = currentPattern.seasonal_components.find(
|
|
||||||
c => c.period === SeasonalPeriod.MONTHLY
|
|
||||||
);
|
|
||||||
|
|
||||||
if (monthlyComponent) {
|
|
||||||
for (let month = 0; month < 12; month++) {
|
|
||||||
for (let week = 0; week < 4; week++) {
|
|
||||||
const value = monthlyComponent.pattern[month] || 0;
|
|
||||||
const intensity = Math.min(Math.max(Math.abs(value) * 8, 0), 7); // 0-7 scale
|
|
||||||
|
|
||||||
const holiday = SPANISH_HOLIDAYS.find(h => h.month === month);
|
|
||||||
|
|
||||||
data.push({
|
|
||||||
month,
|
|
||||||
week,
|
|
||||||
intensity: Math.floor(intensity),
|
|
||||||
value: value * 100,
|
|
||||||
holiday: holiday?.name,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return data;
|
|
||||||
}, [currentPattern]);
|
|
||||||
|
|
||||||
// Custom tooltip for radial chart
|
|
||||||
const RadialTooltip = ({ active, payload }: any) => {
|
|
||||||
if (!active || !payload || !payload.length) return null;
|
|
||||||
|
|
||||||
const data = payload[0].payload as MonthlyData;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="bg-card-bg border border-border-primary rounded-lg shadow-lg p-3 max-w-sm">
|
|
||||||
<h4 className="font-semibold text-text-primary mb-2">{data.month}</h4>
|
|
||||||
<div className="space-y-1">
|
|
||||||
<div className="flex justify-between items-center">
|
|
||||||
<span className="text-text-secondary text-sm">Estación:</span>
|
|
||||||
<Badge variant="ghost" size="sm" style={{ color: data.color }}>
|
|
||||||
{SPANISH_SEASONS[data.season]}
|
|
||||||
</Badge>
|
|
||||||
</div>
|
|
||||||
<div className="flex justify-between items-center">
|
|
||||||
<span className="text-text-secondary text-sm">Variación:</span>
|
|
||||||
<span className="font-medium">{data.value.toFixed(1)}%</span>
|
|
||||||
</div>
|
|
||||||
<div className="flex justify-between items-center">
|
|
||||||
<span className="text-text-secondary text-sm">Intensidad:</span>
|
|
||||||
<span className="font-medium">{data.strength.toFixed(1)}%</span>
|
|
||||||
</div>
|
|
||||||
{data.holidays.length > 0 && (
|
|
||||||
<div className="mt-2 pt-2 border-t border-border-secondary">
|
|
||||||
<div className="text-text-secondary text-sm mb-1">Festividades:</div>
|
|
||||||
<div className="flex flex-wrap gap-1">
|
|
||||||
{data.holidays.map(holiday => (
|
|
||||||
<Badge key={holiday} variant="outlined" size="sm">
|
|
||||||
{holiday}
|
|
||||||
</Badge>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
// Circular view (Radial chart)
|
|
||||||
const renderCircularView = () => (
|
|
||||||
<div style={{ width: '100%', height: 400 }}>
|
|
||||||
<ResponsiveContainer>
|
|
||||||
<RadialBarChart
|
|
||||||
cx="50%"
|
|
||||||
cy="50%"
|
|
||||||
innerRadius="60%"
|
|
||||||
outerRadius="90%"
|
|
||||||
data={monthlyData}
|
|
||||||
startAngle={90}
|
|
||||||
endAngle={450}
|
|
||||||
>
|
|
||||||
<RadialBar
|
|
||||||
dataKey="strength"
|
|
||||||
cornerRadius={4}
|
|
||||||
fill={(entry) => entry.color}
|
|
||||||
/>
|
|
||||||
<Tooltip content={<RadialTooltip />} />
|
|
||||||
</RadialBarChart>
|
|
||||||
</ResponsiveContainer>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
|
|
||||||
// Calendar view (Bar chart by month)
|
|
||||||
const renderCalendarView = () => (
|
|
||||||
<div style={{ width: '100%', height: 400 }}>
|
|
||||||
<ResponsiveContainer>
|
|
||||||
<ComposedChart data={monthlyData} margin={{ top: 20, right: 30, left: 20, bottom: 5 }}>
|
|
||||||
<CartesianGrid strokeDasharray="3 3" />
|
|
||||||
<XAxis
|
|
||||||
dataKey="month"
|
|
||||||
tick={{ fontSize: 12 }}
|
|
||||||
angle={-45}
|
|
||||||
textAnchor="end"
|
|
||||||
height={80}
|
|
||||||
/>
|
|
||||||
<YAxis tick={{ fontSize: 12 }} />
|
|
||||||
<Tooltip
|
|
||||||
content={({ active, payload, label }) => {
|
|
||||||
if (!active || !payload || !payload.length) return null;
|
|
||||||
const data = payload[0].payload as MonthlyData;
|
|
||||||
return <RadialTooltip active={true} payload={[{ payload: data }]} />;
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<Bar
|
|
||||||
dataKey="value"
|
|
||||||
fill={(entry, index) => monthlyData[index]?.color || '#8884d8'}
|
|
||||||
/>
|
|
||||||
<Line
|
|
||||||
type="monotone"
|
|
||||||
dataKey="strength"
|
|
||||||
stroke="#ff7300"
|
|
||||||
strokeWidth={2}
|
|
||||||
dot={false}
|
|
||||||
/>
|
|
||||||
<ReferenceLine y={0} stroke="#666" strokeDasharray="2 2" />
|
|
||||||
</ComposedChart>
|
|
||||||
</ResponsiveContainer>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
|
|
||||||
// Heatmap view
|
|
||||||
const renderHeatmapView = () => (
|
|
||||||
<div className="grid grid-cols-12 gap-1 p-4">
|
|
||||||
{/* Month labels */}
|
|
||||||
<div className="col-span-12 grid grid-cols-12 gap-1 mb-2">
|
|
||||||
{SPANISH_MONTHS.map(month => (
|
|
||||||
<div key={month} className="text-xs text-center text-text-tertiary font-medium">
|
|
||||||
{month.slice(0, 3)}
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Heatmap grid */}
|
|
||||||
{[0, 1, 2, 3].map(week => (
|
|
||||||
<div key={week} className="col-span-12 grid grid-cols-12 gap-1">
|
|
||||||
{heatmapData
|
|
||||||
.filter(d => d.week === week)
|
|
||||||
.map((cell, monthIndex) => (
|
|
||||||
<div
|
|
||||||
key={`${cell.month}-${cell.week}`}
|
|
||||||
className="aspect-square rounded cursor-pointer transition-all duration-200 hover:scale-110 flex items-center justify-center"
|
|
||||||
style={{
|
|
||||||
backgroundColor: INTENSITY_COLORS[cell.intensity],
|
|
||||||
border: hoveredElement?.month === cell.month && hoveredElement?.week === cell.week
|
|
||||||
? '2px solid #3b82f6' : '1px solid #e5e7eb'
|
|
||||||
}}
|
|
||||||
onMouseEnter={() => setHoveredElement(cell)}
|
|
||||||
onMouseLeave={() => setHoveredElement(null)}
|
|
||||||
title={`${SPANISH_MONTHS[cell.month]} S${cell.week + 1}: ${cell.value.toFixed(1)}%`}
|
|
||||||
>
|
|
||||||
{cell.holiday && (
|
|
||||||
<div className="text-xs">🎉</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
|
|
||||||
{/* Legend */}
|
|
||||||
<div className="col-span-12 flex items-center justify-center gap-4 mt-4">
|
|
||||||
<span className="text-sm text-text-secondary">Baja</span>
|
|
||||||
<div className="flex gap-1">
|
|
||||||
{INTENSITY_COLORS.map((color, index) => (
|
|
||||||
<div
|
|
||||||
key={index}
|
|
||||||
className="w-4 h-4 rounded"
|
|
||||||
style={{ backgroundColor: color }}
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
<span className="text-sm text-text-secondary">Alta</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
|
|
||||||
// Trends view (Weekly patterns)
|
|
||||||
const renderTrendsView = () => (
|
|
||||||
<div style={{ width: '100%', height: 400 }}>
|
|
||||||
<ResponsiveContainer>
|
|
||||||
<BarChart data={weeklyData} margin={{ top: 20, right: 30, left: 20, bottom: 5 }}>
|
|
||||||
<CartesianGrid strokeDasharray="3 3" />
|
|
||||||
<XAxis dataKey="dayShort" tick={{ fontSize: 12 }} />
|
|
||||||
<YAxis tick={{ fontSize: 12 }} />
|
|
||||||
<Tooltip
|
|
||||||
content={({ active, payload, label }) => {
|
|
||||||
if (!active || !payload || !payload.length) return null;
|
|
||||||
const data = payload[0].payload as WeeklyData;
|
|
||||||
return (
|
|
||||||
<div className="bg-card-bg border border-border-primary rounded-lg shadow-lg p-3">
|
|
||||||
<h4 className="font-semibold text-text-primary mb-2">{data.day}</h4>
|
|
||||||
<div className="space-y-1 text-sm">
|
|
||||||
<div className="flex justify-between">
|
|
||||||
<span>Multiplicador Promedio:</span>
|
|
||||||
<span className="font-medium">{data.value.toFixed(1)}%</span>
|
|
||||||
</div>
|
|
||||||
<div className="flex justify-between">
|
|
||||||
<span>Varianza:</span>
|
|
||||||
<span className="font-medium">{data.variance.toFixed(1)}%</span>
|
|
||||||
</div>
|
|
||||||
{data.peakHours && data.peakHours.length > 0 && (
|
|
||||||
<div className="flex justify-between">
|
|
||||||
<span>Horas Pico:</span>
|
|
||||||
<span className="font-medium">
|
|
||||||
{data.peakHours.map(h => `${h}:00`).join(', ')}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<Bar dataKey="value" fill="#8884d8" />
|
|
||||||
</BarChart>
|
|
||||||
</ResponsiveContainer>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
|
|
||||||
// Loading state
|
|
||||||
if (loading) {
|
|
||||||
return (
|
|
||||||
<Card className={className}>
|
|
||||||
<CardHeader>
|
|
||||||
<h3 className="text-lg font-semibold text-text-primary">{title}</h3>
|
|
||||||
</CardHeader>
|
|
||||||
<CardBody>
|
|
||||||
<div className="flex items-center justify-center h-64">
|
|
||||||
<div className="flex items-center space-x-2">
|
|
||||||
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-color-primary"></div>
|
|
||||||
<span className="text-text-secondary">Cargando patrones estacionales...</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</CardBody>
|
|
||||||
</Card>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Error state
|
|
||||||
if (error) {
|
|
||||||
return (
|
|
||||||
<Card className={className} variant="outlined">
|
|
||||||
<CardHeader>
|
|
||||||
<h3 className="text-lg font-semibold text-text-primary">{title}</h3>
|
|
||||||
</CardHeader>
|
|
||||||
<CardBody>
|
|
||||||
<div className="flex items-center justify-center h-64">
|
|
||||||
<div className="text-center">
|
|
||||||
<div className="text-red-500 mb-2">
|
|
||||||
<svg className="w-12 h-12 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
<p className="text-text-secondary">{error}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</CardBody>
|
|
||||||
</Card>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Empty state
|
|
||||||
if (!currentPattern) {
|
|
||||||
return (
|
|
||||||
<Card className={className}>
|
|
||||||
<CardHeader>
|
|
||||||
<h3 className="text-lg font-semibold text-text-primary">{title}</h3>
|
|
||||||
</CardHeader>
|
|
||||||
<CardBody>
|
|
||||||
<div className="flex items-center justify-center h-64">
|
|
||||||
<div className="text-center">
|
|
||||||
<div className="text-text-tertiary mb-2">
|
|
||||||
<svg className="w-12 h-12 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1} d="M8 7V3a2 2 0 012-2h4a2 2 0 012 2v4m-6 4v10a2 2 0 002 2h4a2 2 0 002-2V11m-6 0a2 2 0 012-2h4a2 2 0 012 2m-6 0h8" />
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
<p className="text-text-secondary">No hay datos de estacionalidad disponibles</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</CardBody>
|
|
||||||
</Card>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Card className={className}>
|
|
||||||
<CardHeader>
|
|
||||||
<div className="flex items-center justify-between flex-wrap gap-4">
|
|
||||||
<div className="flex items-center gap-3">
|
|
||||||
<h3 className="text-lg font-semibold text-text-primary">{title}</h3>
|
|
||||||
{currentPattern && (
|
|
||||||
<Badge variant="ghost">
|
|
||||||
{currentPattern.product_name}
|
|
||||||
</Badge>
|
|
||||||
)}
|
|
||||||
<Badge
|
|
||||||
variant="success"
|
|
||||||
size="sm"
|
|
||||||
title="Nivel de confianza del patrón estacional"
|
|
||||||
>
|
|
||||||
{(currentPattern.confidence_score * 100).toFixed(0)}% confianza
|
|
||||||
</Badge>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex items-center gap-3">
|
|
||||||
{/* Product selector */}
|
|
||||||
{onProductChange && seasonalPatterns.length > 1 && (
|
|
||||||
<Select
|
|
||||||
value={selectedProduct || seasonalPatterns[0]?.product_name || ''}
|
|
||||||
onChange={(value) => onProductChange(value)}
|
|
||||||
className="w-40"
|
|
||||||
>
|
|
||||||
{seasonalPatterns.map(pattern => (
|
|
||||||
<option key={pattern.product_name} value={pattern.product_name}>
|
|
||||||
{pattern.product_name}
|
|
||||||
</option>
|
|
||||||
))}
|
|
||||||
</Select>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* View mode selector */}
|
|
||||||
<div className="flex bg-bg-secondary rounded-lg p-1 gap-1">
|
|
||||||
{(['circular', 'calendar', 'heatmap', 'trends'] as const).map((mode) => (
|
|
||||||
<Button
|
|
||||||
key={mode}
|
|
||||||
variant={viewMode === mode ? 'filled' : 'ghost'}
|
|
||||||
size="sm"
|
|
||||||
onClick={() => onViewModeChange?.(mode)}
|
|
||||||
title={
|
|
||||||
mode === 'circular' ? 'Vista Circular' :
|
|
||||||
mode === 'calendar' ? 'Vista Calendario' :
|
|
||||||
mode === 'heatmap' ? 'Mapa de Calor' :
|
|
||||||
'Vista Tendencias'
|
|
||||||
}
|
|
||||||
>
|
|
||||||
{mode === 'circular' && '🔄'}
|
|
||||||
{mode === 'calendar' && '📅'}
|
|
||||||
{mode === 'heatmap' && '🔥'}
|
|
||||||
{mode === 'trends' && '📊'}
|
|
||||||
</Button>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</CardHeader>
|
|
||||||
|
|
||||||
<CardBody>
|
|
||||||
<div className="space-y-4">
|
|
||||||
{/* Main visualization */}
|
|
||||||
<div className="min-h-[400px]">
|
|
||||||
{viewMode === 'circular' && renderCircularView()}
|
|
||||||
{viewMode === 'calendar' && renderCalendarView()}
|
|
||||||
{viewMode === 'heatmap' && renderHeatmapView()}
|
|
||||||
{viewMode === 'trends' && renderTrendsView()}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Holiday effects summary */}
|
|
||||||
{currentPattern.holiday_effects && currentPattern.holiday_effects.length > 0 && (
|
|
||||||
<div className="border-t border-border-primary pt-4">
|
|
||||||
<h4 className="font-medium text-text-primary mb-3">Efectos de Festividades</h4>
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
|
|
||||||
{currentPattern.holiday_effects.map((holiday, index) => (
|
|
||||||
<div key={index} className="bg-bg-secondary rounded-lg p-3">
|
|
||||||
<div className="flex items-center justify-between mb-2">
|
|
||||||
<span className="font-medium text-text-primary text-sm">
|
|
||||||
{holiday.holiday_name}
|
|
||||||
</span>
|
|
||||||
<Badge
|
|
||||||
variant={holiday.impact_factor > 1.2 ? 'success' : holiday.impact_factor < 0.8 ? 'danger' : 'warning'}
|
|
||||||
size="sm"
|
|
||||||
>
|
|
||||||
{((holiday.impact_factor - 1) * 100).toFixed(0)}%
|
|
||||||
</Badge>
|
|
||||||
</div>
|
|
||||||
<div className="text-xs text-text-secondary space-y-1">
|
|
||||||
<div>Duración: {holiday.duration_days} días</div>
|
|
||||||
<div>Confianza: {(holiday.confidence * 100).toFixed(0)}%</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Pattern strength indicators */}
|
|
||||||
<div className="border-t border-border-primary pt-4">
|
|
||||||
<h4 className="font-medium text-text-primary mb-3">Intensidad de Patrones</h4>
|
|
||||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
|
||||||
{currentPattern.seasonal_components.map((component, index) => {
|
|
||||||
const periodLabel = {
|
|
||||||
[SeasonalPeriod.WEEKLY]: 'Semanal',
|
|
||||||
[SeasonalPeriod.MONTHLY]: 'Mensual',
|
|
||||||
[SeasonalPeriod.QUARTERLY]: 'Trimestral',
|
|
||||||
[SeasonalPeriod.YEARLY]: 'Anual',
|
|
||||||
}[component.period] || component.period;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div key={index} className="bg-bg-secondary rounded-lg p-3">
|
|
||||||
<div className="text-sm font-medium text-text-primary mb-1">
|
|
||||||
{periodLabel}
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<div className="flex-1 bg-bg-tertiary rounded-full h-2">
|
|
||||||
<div
|
|
||||||
className="bg-color-primary h-2 rounded-full transition-all duration-300"
|
|
||||||
style={{ width: `${Math.min(component.strength * 100, 100)}%` }}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<span className="text-xs text-text-secondary">
|
|
||||||
{(component.strength * 100).toFixed(0)}%
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</CardBody>
|
|
||||||
</Card>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default SeasonalityIndicator;
|
|
||||||
@@ -1,404 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
import { Input, Select, Badge } from '../../ui';
|
|
||||||
import type { OnboardingStepProps } from './OnboardingWizard';
|
|
||||||
|
|
||||||
interface CompanyInfo {
|
|
||||||
name: string;
|
|
||||||
type: 'artisan' | 'industrial' | 'chain' | 'mixed';
|
|
||||||
size: 'small' | 'medium' | 'large';
|
|
||||||
locations: number;
|
|
||||||
specialties: string[];
|
|
||||||
address: {
|
|
||||||
street: string;
|
|
||||||
city: string;
|
|
||||||
state: string;
|
|
||||||
postal_code: string;
|
|
||||||
country: string;
|
|
||||||
};
|
|
||||||
contact: {
|
|
||||||
phone: string;
|
|
||||||
email: string;
|
|
||||||
website?: string;
|
|
||||||
};
|
|
||||||
established_year?: number;
|
|
||||||
tax_id?: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
const BAKERY_TYPES = [
|
|
||||||
{ value: 'artisan', label: 'Artesanal', description: 'Producción tradicional y manual' },
|
|
||||||
{ value: 'industrial', label: 'Industrial', description: 'Producción automatizada a gran escala' },
|
|
||||||
{ value: 'chain', label: 'Cadena', description: 'Múltiples ubicaciones con procesos estandarizados' },
|
|
||||||
{ value: 'mixed', label: 'Mixta', description: 'Combinación de métodos artesanales e industriales' },
|
|
||||||
];
|
|
||||||
|
|
||||||
const BAKERY_SIZES = [
|
|
||||||
{ value: 'small', label: 'Pequeña', description: '1-10 empleados' },
|
|
||||||
{ value: 'medium', label: 'Mediana', description: '11-50 empleados' },
|
|
||||||
{ value: 'large', label: 'Grande', description: '50+ empleados' },
|
|
||||||
];
|
|
||||||
|
|
||||||
const COMMON_SPECIALTIES = [
|
|
||||||
'Pan tradicional',
|
|
||||||
'Bollería',
|
|
||||||
'Repostería',
|
|
||||||
'Pan integral',
|
|
||||||
'Pasteles',
|
|
||||||
'Productos sin gluten',
|
|
||||||
'Productos veganos',
|
|
||||||
'Pan artesanal',
|
|
||||||
'Productos de temporada',
|
|
||||||
'Catering',
|
|
||||||
];
|
|
||||||
|
|
||||||
export const CompanyInfoStep: React.FC<OnboardingStepProps> = ({
|
|
||||||
data,
|
|
||||||
onDataChange,
|
|
||||||
}) => {
|
|
||||||
const companyData: CompanyInfo = {
|
|
||||||
name: '',
|
|
||||||
type: 'artisan',
|
|
||||||
size: 'small',
|
|
||||||
locations: 1,
|
|
||||||
specialties: [],
|
|
||||||
address: {
|
|
||||||
street: '',
|
|
||||||
city: '',
|
|
||||||
state: '',
|
|
||||||
postal_code: '',
|
|
||||||
country: 'España',
|
|
||||||
},
|
|
||||||
contact: {
|
|
||||||
phone: '',
|
|
||||||
email: '',
|
|
||||||
website: '',
|
|
||||||
},
|
|
||||||
...data,
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleInputChange = (field: string, value: any) => {
|
|
||||||
onDataChange({
|
|
||||||
...companyData,
|
|
||||||
[field]: value,
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleAddressChange = (field: string, value: string) => {
|
|
||||||
onDataChange({
|
|
||||||
...companyData,
|
|
||||||
address: {
|
|
||||||
...companyData.address,
|
|
||||||
[field]: value,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleContactChange = (field: string, value: string) => {
|
|
||||||
onDataChange({
|
|
||||||
...companyData,
|
|
||||||
contact: {
|
|
||||||
...companyData.contact,
|
|
||||||
[field]: value,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleSpecialtyToggle = (specialty: string) => {
|
|
||||||
const currentSpecialties = companyData.specialties || [];
|
|
||||||
const updatedSpecialties = currentSpecialties.includes(specialty)
|
|
||||||
? currentSpecialties.filter(s => s !== specialty)
|
|
||||||
: [...currentSpecialties, specialty];
|
|
||||||
|
|
||||||
handleInputChange('specialties', updatedSpecialties);
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="space-y-8">
|
|
||||||
{/* Basic Information */}
|
|
||||||
<div className="space-y-4">
|
|
||||||
<h3 className="text-lg font-semibold text-gray-900 border-b pb-2">
|
|
||||||
Información básica
|
|
||||||
</h3>
|
|
||||||
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
||||||
<div className="md:col-span-2">
|
|
||||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|
||||||
Nombre de la panadería *
|
|
||||||
</label>
|
|
||||||
<Input
|
|
||||||
type="text"
|
|
||||||
value={companyData.name}
|
|
||||||
onChange={(e) => handleInputChange('name', e.target.value)}
|
|
||||||
placeholder="Ej: Panadería San Miguel"
|
|
||||||
className="w-full"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|
||||||
Tipo de panadería *
|
|
||||||
</label>
|
|
||||||
<Select
|
|
||||||
value={companyData.type}
|
|
||||||
onChange={(e) => handleInputChange('type', e.target.value)}
|
|
||||||
className="w-full"
|
|
||||||
>
|
|
||||||
{BAKERY_TYPES.map((type) => (
|
|
||||||
<option key={type.value} value={type.value}>
|
|
||||||
{type.label} - {type.description}
|
|
||||||
</option>
|
|
||||||
))}
|
|
||||||
</Select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|
||||||
Tamaño de la empresa *
|
|
||||||
</label>
|
|
||||||
<Select
|
|
||||||
value={companyData.size}
|
|
||||||
onChange={(e) => handleInputChange('size', e.target.value)}
|
|
||||||
className="w-full"
|
|
||||||
>
|
|
||||||
{BAKERY_SIZES.map((size) => (
|
|
||||||
<option key={size.value} value={size.value}>
|
|
||||||
{size.label} - {size.description}
|
|
||||||
</option>
|
|
||||||
))}
|
|
||||||
</Select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|
||||||
Número de ubicaciones
|
|
||||||
</label>
|
|
||||||
<Input
|
|
||||||
type="number"
|
|
||||||
min="1"
|
|
||||||
value={companyData.locations}
|
|
||||||
onChange={(e) => handleInputChange('locations', parseInt(e.target.value) || 1)}
|
|
||||||
className="w-full"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|
||||||
Año de fundación
|
|
||||||
</label>
|
|
||||||
<Input
|
|
||||||
type="number"
|
|
||||||
min="1900"
|
|
||||||
max={new Date().getFullYear()}
|
|
||||||
value={companyData.established_year || ''}
|
|
||||||
onChange={(e) => handleInputChange('established_year', parseInt(e.target.value) || undefined)}
|
|
||||||
placeholder="Ej: 1995"
|
|
||||||
className="w-full"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|
||||||
NIF/CIF
|
|
||||||
</label>
|
|
||||||
<Input
|
|
||||||
type="text"
|
|
||||||
value={companyData.tax_id || ''}
|
|
||||||
onChange={(e) => handleInputChange('tax_id', e.target.value)}
|
|
||||||
placeholder="Ej: B12345678"
|
|
||||||
className="w-full"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Specialties */}
|
|
||||||
<div className="space-y-4">
|
|
||||||
<h3 className="text-lg font-semibold text-gray-900 border-b pb-2">
|
|
||||||
Especialidades
|
|
||||||
</h3>
|
|
||||||
<p className="text-sm text-gray-600">
|
|
||||||
Selecciona los productos que produces habitualmente
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div className="grid grid-cols-2 md:grid-cols-3 gap-3">
|
|
||||||
{COMMON_SPECIALTIES.map((specialty) => (
|
|
||||||
<button
|
|
||||||
key={specialty}
|
|
||||||
onClick={() => handleSpecialtyToggle(specialty)}
|
|
||||||
className={`p-3 text-left border rounded-lg transition-colors ${
|
|
||||||
companyData.specialties?.includes(specialty)
|
|
||||||
? 'border-blue-500 bg-blue-50 text-blue-700'
|
|
||||||
: 'border-gray-200 hover:border-gray-300'
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
<span className="text-sm font-medium">{specialty}</span>
|
|
||||||
</button>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{companyData.specialties && companyData.specialties.length > 0 && (
|
|
||||||
<div>
|
|
||||||
<p className="text-sm font-medium text-gray-700 mb-2">
|
|
||||||
Especialidades seleccionadas:
|
|
||||||
</p>
|
|
||||||
<div className="flex flex-wrap gap-2">
|
|
||||||
{companyData.specialties.map((specialty) => (
|
|
||||||
<Badge key={specialty} className="bg-blue-100 text-blue-800">
|
|
||||||
{specialty}
|
|
||||||
<button
|
|
||||||
onClick={() => handleSpecialtyToggle(specialty)}
|
|
||||||
className="ml-1 text-blue-600 hover:text-blue-800"
|
|
||||||
>
|
|
||||||
×
|
|
||||||
</button>
|
|
||||||
</Badge>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Address */}
|
|
||||||
<div className="space-y-4">
|
|
||||||
<h3 className="text-lg font-semibold text-gray-900 border-b pb-2">
|
|
||||||
Dirección principal
|
|
||||||
</h3>
|
|
||||||
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
||||||
<div className="md:col-span-2">
|
|
||||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|
||||||
Dirección *
|
|
||||||
</label>
|
|
||||||
<Input
|
|
||||||
type="text"
|
|
||||||
value={companyData.address.street}
|
|
||||||
onChange={(e) => handleAddressChange('street', e.target.value)}
|
|
||||||
placeholder="Calle, número, piso, puerta"
|
|
||||||
className="w-full"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|
||||||
Ciudad *
|
|
||||||
</label>
|
|
||||||
<Input
|
|
||||||
type="text"
|
|
||||||
value={companyData.address.city}
|
|
||||||
onChange={(e) => handleAddressChange('city', e.target.value)}
|
|
||||||
placeholder="Ej: Madrid"
|
|
||||||
className="w-full"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|
||||||
Provincia/Estado *
|
|
||||||
</label>
|
|
||||||
<Input
|
|
||||||
type="text"
|
|
||||||
value={companyData.address.state}
|
|
||||||
onChange={(e) => handleAddressChange('state', e.target.value)}
|
|
||||||
placeholder="Ej: Madrid"
|
|
||||||
className="w-full"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|
||||||
Código postal *
|
|
||||||
</label>
|
|
||||||
<Input
|
|
||||||
type="text"
|
|
||||||
value={companyData.address.postal_code}
|
|
||||||
onChange={(e) => handleAddressChange('postal_code', e.target.value)}
|
|
||||||
placeholder="Ej: 28001"
|
|
||||||
className="w-full"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|
||||||
País *
|
|
||||||
</label>
|
|
||||||
<Select
|
|
||||||
value={companyData.address.country}
|
|
||||||
onChange={(e) => handleAddressChange('country', e.target.value)}
|
|
||||||
className="w-full"
|
|
||||||
>
|
|
||||||
<option value="España">España</option>
|
|
||||||
<option value="Francia">Francia</option>
|
|
||||||
<option value="Portugal">Portugal</option>
|
|
||||||
<option value="Italia">Italia</option>
|
|
||||||
<option value="México">México</option>
|
|
||||||
<option value="Argentina">Argentina</option>
|
|
||||||
<option value="Colombia">Colombia</option>
|
|
||||||
<option value="Otro">Otro</option>
|
|
||||||
</Select>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Contact Information */}
|
|
||||||
<div className="space-y-4">
|
|
||||||
<h3 className="text-lg font-semibold text-gray-900 border-b pb-2">
|
|
||||||
Información de contacto
|
|
||||||
</h3>
|
|
||||||
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
||||||
<div>
|
|
||||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|
||||||
Teléfono *
|
|
||||||
</label>
|
|
||||||
<Input
|
|
||||||
type="tel"
|
|
||||||
value={companyData.contact.phone}
|
|
||||||
onChange={(e) => handleContactChange('phone', e.target.value)}
|
|
||||||
placeholder="Ej: +34 911 234 567"
|
|
||||||
className="w-full"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|
||||||
Email de contacto *
|
|
||||||
</label>
|
|
||||||
<Input
|
|
||||||
type="email"
|
|
||||||
value={companyData.contact.email}
|
|
||||||
onChange={(e) => handleContactChange('email', e.target.value)}
|
|
||||||
placeholder="contacto@panaderia.com"
|
|
||||||
className="w-full"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="md:col-span-2">
|
|
||||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|
||||||
Sitio web (opcional)
|
|
||||||
</label>
|
|
||||||
<Input
|
|
||||||
type="url"
|
|
||||||
value={companyData.contact.website || ''}
|
|
||||||
onChange={(e) => handleContactChange('website', e.target.value)}
|
|
||||||
placeholder="https://www.panaderia.com"
|
|
||||||
className="w-full"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Summary */}
|
|
||||||
<div className="bg-gray-50 p-4 rounded-lg">
|
|
||||||
<h4 className="font-medium text-gray-900 mb-2">Resumen</h4>
|
|
||||||
<div className="text-sm text-gray-600 space-y-1">
|
|
||||||
<p><strong>Panadería:</strong> {companyData.name || 'Sin especificar'}</p>
|
|
||||||
<p><strong>Tipo:</strong> {BAKERY_TYPES.find(t => t.value === companyData.type)?.label}</p>
|
|
||||||
<p><strong>Tamaño:</strong> {BAKERY_SIZES.find(s => s.value === companyData.size)?.label}</p>
|
|
||||||
<p><strong>Especialidades:</strong> {companyData.specialties?.length || 0} seleccionadas</p>
|
|
||||||
<p><strong>Ubicaciones:</strong> {companyData.locations}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default CompanyInfoStep;
|
|
||||||
@@ -1,255 +0,0 @@
|
|||||||
import React, { useState, useCallback } from 'react';
|
|
||||||
import { Card, Button, Input, Select, Badge } from '../../ui';
|
|
||||||
|
|
||||||
export interface OnboardingStep {
|
|
||||||
id: string;
|
|
||||||
title: string;
|
|
||||||
description: string;
|
|
||||||
component: React.ComponentType<OnboardingStepProps>;
|
|
||||||
isCompleted?: boolean;
|
|
||||||
isRequired?: boolean;
|
|
||||||
validation?: (data: any) => string | null;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface OnboardingStepProps {
|
|
||||||
data: any;
|
|
||||||
onDataChange: (data: any) => void;
|
|
||||||
onNext: () => void;
|
|
||||||
onPrevious: () => void;
|
|
||||||
isFirstStep: boolean;
|
|
||||||
isLastStep: boolean;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface OnboardingWizardProps {
|
|
||||||
steps: OnboardingStep[];
|
|
||||||
onComplete: (data: any) => void;
|
|
||||||
onExit?: () => void;
|
|
||||||
className?: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export const OnboardingWizard: React.FC<OnboardingWizardProps> = ({
|
|
||||||
steps,
|
|
||||||
onComplete,
|
|
||||||
onExit,
|
|
||||||
className = '',
|
|
||||||
}) => {
|
|
||||||
const [currentStepIndex, setCurrentStepIndex] = useState(0);
|
|
||||||
const [stepData, setStepData] = useState<Record<string, any>>({});
|
|
||||||
const [completedSteps, setCompletedSteps] = useState<Set<string>>(new Set());
|
|
||||||
const [validationErrors, setValidationErrors] = useState<Record<string, string>>({});
|
|
||||||
|
|
||||||
const currentStep = steps[currentStepIndex];
|
|
||||||
|
|
||||||
const updateStepData = useCallback((stepId: string, data: any) => {
|
|
||||||
setStepData(prev => ({
|
|
||||||
...prev,
|
|
||||||
[stepId]: { ...prev[stepId], ...data }
|
|
||||||
}));
|
|
||||||
|
|
||||||
// Clear validation error for this step
|
|
||||||
setValidationErrors(prev => {
|
|
||||||
const newErrors = { ...prev };
|
|
||||||
delete newErrors[stepId];
|
|
||||||
return newErrors;
|
|
||||||
});
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const validateCurrentStep = useCallback(() => {
|
|
||||||
const step = currentStep;
|
|
||||||
const data = stepData[step.id] || {};
|
|
||||||
|
|
||||||
if (step.validation) {
|
|
||||||
const error = step.validation(data);
|
|
||||||
if (error) {
|
|
||||||
setValidationErrors(prev => ({
|
|
||||||
...prev,
|
|
||||||
[step.id]: error
|
|
||||||
}));
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Mark step as completed
|
|
||||||
setCompletedSteps(prev => new Set(prev).add(step.id));
|
|
||||||
return true;
|
|
||||||
}, [currentStep, stepData]);
|
|
||||||
|
|
||||||
const goToNextStep = useCallback(() => {
|
|
||||||
if (validateCurrentStep()) {
|
|
||||||
if (currentStepIndex < steps.length - 1) {
|
|
||||||
setCurrentStepIndex(currentStepIndex + 1);
|
|
||||||
} else {
|
|
||||||
// All steps completed, call onComplete with all data
|
|
||||||
onComplete(stepData);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}, [currentStepIndex, steps.length, validateCurrentStep, onComplete, stepData]);
|
|
||||||
|
|
||||||
const goToPreviousStep = useCallback(() => {
|
|
||||||
if (currentStepIndex > 0) {
|
|
||||||
setCurrentStepIndex(currentStepIndex - 1);
|
|
||||||
}
|
|
||||||
}, [currentStepIndex]);
|
|
||||||
|
|
||||||
const goToStep = useCallback((stepIndex: number) => {
|
|
||||||
setCurrentStepIndex(stepIndex);
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const calculateProgress = () => {
|
|
||||||
return (completedSteps.size / steps.length) * 100;
|
|
||||||
};
|
|
||||||
|
|
||||||
const renderStepIndicator = () => (
|
|
||||||
<div className="flex items-center justify-between mb-8">
|
|
||||||
{steps.map((step, index) => {
|
|
||||||
const isCompleted = completedSteps.has(step.id);
|
|
||||||
const isCurrent = index === currentStepIndex;
|
|
||||||
const hasError = validationErrors[step.id];
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
key={step.id}
|
|
||||||
className="flex items-center flex-1"
|
|
||||||
>
|
|
||||||
<button
|
|
||||||
onClick={() => goToStep(index)}
|
|
||||||
disabled={index > currentStepIndex + 1}
|
|
||||||
className={`flex items-center justify-center w-8 h-8 rounded-full text-sm font-medium transition-colors ${
|
|
||||||
isCompleted
|
|
||||||
? 'bg-green-500 text-white'
|
|
||||||
: isCurrent
|
|
||||||
? hasError
|
|
||||||
? 'bg-red-500 text-white'
|
|
||||||
: 'bg-blue-500 text-white'
|
|
||||||
: 'bg-gray-200 text-gray-600 hover:bg-gray-300'
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
{isCompleted ? '✓' : index + 1}
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<div className="ml-3 flex-1">
|
|
||||||
<p className={`text-sm font-medium ${isCurrent ? 'text-blue-600' : 'text-gray-600'}`}>
|
|
||||||
{step.title}
|
|
||||||
{step.isRequired && <span className="text-red-500 ml-1">*</span>}
|
|
||||||
</p>
|
|
||||||
{hasError && (
|
|
||||||
<p className="text-xs text-red-600 mt-1">{hasError}</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{index < steps.length - 1 && (
|
|
||||||
<div className={`flex-1 h-0.5 mx-4 ${
|
|
||||||
isCompleted ? 'bg-green-500' : 'bg-gray-200'
|
|
||||||
}`} />
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
|
|
||||||
const renderProgressBar = () => (
|
|
||||||
<div className="mb-6">
|
|
||||||
<div className="flex justify-between items-center mb-2">
|
|
||||||
<span className="text-sm font-medium text-gray-700">
|
|
||||||
Progreso del onboarding
|
|
||||||
</span>
|
|
||||||
<span className="text-sm text-gray-500">
|
|
||||||
{completedSteps.size} de {steps.length} completados
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div className="w-full bg-gray-200 rounded-full h-2">
|
|
||||||
<div
|
|
||||||
className="bg-blue-500 h-2 rounded-full transition-all duration-500"
|
|
||||||
style={{ width: `${calculateProgress()}%` }}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
|
|
||||||
if (!currentStep) {
|
|
||||||
return (
|
|
||||||
<Card className={`p-8 text-center ${className}`}>
|
|
||||||
<p className="text-gray-500">No hay pasos de onboarding configurados.</p>
|
|
||||||
</Card>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
const StepComponent = currentStep.component;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className={`max-w-4xl mx-auto ${className}`}>
|
|
||||||
{/* Header */}
|
|
||||||
<div className="flex justify-between items-center mb-6">
|
|
||||||
<div>
|
|
||||||
<h1 className="text-2xl font-bold text-gray-900">
|
|
||||||
Configuración inicial
|
|
||||||
</h1>
|
|
||||||
<p className="text-gray-600 mt-1">
|
|
||||||
Completa estos pasos para comenzar a usar la plataforma
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{onExit && (
|
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
onClick={onExit}
|
|
||||||
className="text-gray-500 hover:text-gray-700"
|
|
||||||
>
|
|
||||||
✕ Salir
|
|
||||||
</Button>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{renderProgressBar()}
|
|
||||||
{renderStepIndicator()}
|
|
||||||
|
|
||||||
{/* Current Step Content */}
|
|
||||||
<Card className="p-6">
|
|
||||||
<div className="mb-6">
|
|
||||||
<h2 className="text-xl font-semibold text-gray-900 mb-2">
|
|
||||||
{currentStep.title}
|
|
||||||
</h2>
|
|
||||||
<p className="text-gray-600">
|
|
||||||
{currentStep.description}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<StepComponent
|
|
||||||
data={stepData[currentStep.id] || {}}
|
|
||||||
onDataChange={(data) => updateStepData(currentStep.id, data)}
|
|
||||||
onNext={goToNextStep}
|
|
||||||
onPrevious={goToPreviousStep}
|
|
||||||
isFirstStep={currentStepIndex === 0}
|
|
||||||
isLastStep={currentStepIndex === steps.length - 1}
|
|
||||||
/>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
{/* Navigation */}
|
|
||||||
<div className="flex justify-between items-center mt-6">
|
|
||||||
<Button
|
|
||||||
variant="outline"
|
|
||||||
onClick={goToPreviousStep}
|
|
||||||
disabled={currentStepIndex === 0}
|
|
||||||
>
|
|
||||||
← Anterior
|
|
||||||
</Button>
|
|
||||||
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<span className="text-sm text-gray-500">
|
|
||||||
Paso {currentStepIndex + 1} de {steps.length}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<Button
|
|
||||||
variant="primary"
|
|
||||||
onClick={goToNextStep}
|
|
||||||
>
|
|
||||||
{currentStepIndex === steps.length - 1 ? 'Finalizar' : 'Siguiente →'}
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default OnboardingWizard;
|
|
||||||
@@ -1,556 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
import { Card, Button, Input, Select, Badge } from '../../ui';
|
|
||||||
import type { OnboardingStepProps } from './OnboardingWizard';
|
|
||||||
|
|
||||||
interface SystemConfig {
|
|
||||||
timezone: string;
|
|
||||||
currency: string;
|
|
||||||
language: string;
|
|
||||||
date_format: string;
|
|
||||||
number_format: string;
|
|
||||||
working_hours: {
|
|
||||||
start: string;
|
|
||||||
end: string;
|
|
||||||
days: number[];
|
|
||||||
};
|
|
||||||
notifications: {
|
|
||||||
email_enabled: boolean;
|
|
||||||
sms_enabled: boolean;
|
|
||||||
push_enabled: boolean;
|
|
||||||
alert_preferences: string[];
|
|
||||||
};
|
|
||||||
integrations: {
|
|
||||||
pos_system?: string;
|
|
||||||
accounting_software?: string;
|
|
||||||
payment_provider?: string;
|
|
||||||
};
|
|
||||||
features: {
|
|
||||||
inventory_management: boolean;
|
|
||||||
production_planning: boolean;
|
|
||||||
sales_analytics: boolean;
|
|
||||||
customer_management: boolean;
|
|
||||||
financial_reporting: boolean;
|
|
||||||
quality_control: boolean;
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
const TIMEZONES = [
|
|
||||||
{ value: 'Europe/Madrid', label: 'Madrid (GMT+1)' },
|
|
||||||
{ value: 'Europe/London', label: 'London (GMT+0)' },
|
|
||||||
{ value: 'Europe/Paris', label: 'Paris (GMT+1)' },
|
|
||||||
{ value: 'America/New_York', label: 'New York (GMT-5)' },
|
|
||||||
{ value: 'America/Los_Angeles', label: 'Los Angeles (GMT-8)' },
|
|
||||||
{ value: 'America/Mexico_City', label: 'Mexico City (GMT-6)' },
|
|
||||||
{ value: 'America/Buenos_Aires', label: 'Buenos Aires (GMT-3)' },
|
|
||||||
];
|
|
||||||
|
|
||||||
const CURRENCIES = [
|
|
||||||
{ value: 'EUR', label: 'Euro (€)', symbol: '€' },
|
|
||||||
{ value: 'USD', label: 'US Dollar ($)', symbol: '$' },
|
|
||||||
{ value: 'GBP', label: 'British Pound (£)', symbol: '£' },
|
|
||||||
{ value: 'MXN', label: 'Mexican Peso ($)', symbol: '$' },
|
|
||||||
{ value: 'ARS', label: 'Argentine Peso ($)', symbol: '$' },
|
|
||||||
{ value: 'COP', label: 'Colombian Peso ($)', symbol: '$' },
|
|
||||||
];
|
|
||||||
|
|
||||||
const LANGUAGES = [
|
|
||||||
{ value: 'es', label: 'Español' },
|
|
||||||
{ value: 'en', label: 'English' },
|
|
||||||
{ value: 'fr', label: 'Français' },
|
|
||||||
{ value: 'pt', label: 'Português' },
|
|
||||||
{ value: 'it', label: 'Italiano' },
|
|
||||||
];
|
|
||||||
|
|
||||||
const DAYS_OF_WEEK = [
|
|
||||||
{ value: 1, label: 'Lunes', short: 'L' },
|
|
||||||
{ value: 2, label: 'Martes', short: 'M' },
|
|
||||||
{ value: 3, label: 'Miércoles', short: 'X' },
|
|
||||||
{ value: 4, label: 'Jueves', short: 'J' },
|
|
||||||
{ value: 5, label: 'Viernes', short: 'V' },
|
|
||||||
{ value: 6, label: 'Sábado', short: 'S' },
|
|
||||||
{ value: 0, label: 'Domingo', short: 'D' },
|
|
||||||
];
|
|
||||||
|
|
||||||
const ALERT_TYPES = [
|
|
||||||
{ value: 'low_stock', label: 'Stock bajo', description: 'Cuando los ingredientes están por debajo del mínimo' },
|
|
||||||
{ value: 'production_delays', label: 'Retrasos de producción', description: 'Cuando los lotes se retrasan' },
|
|
||||||
{ value: 'quality_issues', label: 'Problemas de calidad', description: 'Cuando se detectan problemas de calidad' },
|
|
||||||
{ value: 'financial_targets', label: 'Objetivos financieros', description: 'Cuando se alcanzan o no se cumplen objetivos' },
|
|
||||||
{ value: 'equipment_maintenance', label: 'Mantenimiento de equipos', description: 'Recordatorios de mantenimiento' },
|
|
||||||
{ value: 'food_safety', label: 'Seguridad alimentaria', description: 'Alertas relacionadas con seguridad alimentaria' },
|
|
||||||
];
|
|
||||||
|
|
||||||
const FEATURES = [
|
|
||||||
{
|
|
||||||
key: 'inventory_management',
|
|
||||||
title: 'Gestión de inventario',
|
|
||||||
description: 'Control de stock, ingredientes y materias primas',
|
|
||||||
recommended: true,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'production_planning',
|
|
||||||
title: 'Planificación de producción',
|
|
||||||
description: 'Programación de lotes y gestión de recetas',
|
|
||||||
recommended: true,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'sales_analytics',
|
|
||||||
title: 'Analytics de ventas',
|
|
||||||
description: 'Reportes y análisis de ventas y tendencias',
|
|
||||||
recommended: true,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'customer_management',
|
|
||||||
title: 'Gestión de clientes',
|
|
||||||
description: 'Base de datos de clientes y programa de fidelización',
|
|
||||||
recommended: false,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'financial_reporting',
|
|
||||||
title: 'Reportes financieros',
|
|
||||||
description: 'Análisis de costos, márgenes y rentabilidad',
|
|
||||||
recommended: true,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'quality_control',
|
|
||||||
title: 'Control de calidad',
|
|
||||||
description: 'Seguimiento de calidad y estándares',
|
|
||||||
recommended: true,
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
export const SystemSetupStep: React.FC<OnboardingStepProps> = ({
|
|
||||||
data,
|
|
||||||
onDataChange,
|
|
||||||
}) => {
|
|
||||||
const systemData: SystemConfig = {
|
|
||||||
timezone: 'Europe/Madrid',
|
|
||||||
currency: 'EUR',
|
|
||||||
language: 'es',
|
|
||||||
date_format: 'DD/MM/YYYY',
|
|
||||||
number_format: 'European',
|
|
||||||
working_hours: {
|
|
||||||
start: '06:00',
|
|
||||||
end: '20:00',
|
|
||||||
days: [1, 2, 3, 4, 5, 6], // Monday to Saturday
|
|
||||||
},
|
|
||||||
notifications: {
|
|
||||||
email_enabled: true,
|
|
||||||
sms_enabled: false,
|
|
||||||
push_enabled: true,
|
|
||||||
alert_preferences: ['low_stock', 'production_delays', 'quality_issues'],
|
|
||||||
},
|
|
||||||
integrations: {},
|
|
||||||
features: {
|
|
||||||
inventory_management: true,
|
|
||||||
production_planning: true,
|
|
||||||
sales_analytics: true,
|
|
||||||
customer_management: false,
|
|
||||||
financial_reporting: true,
|
|
||||||
quality_control: true,
|
|
||||||
},
|
|
||||||
...data,
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleInputChange = (field: string, value: any) => {
|
|
||||||
onDataChange({
|
|
||||||
...systemData,
|
|
||||||
[field]: value,
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleWorkingHoursChange = (field: string, value: any) => {
|
|
||||||
onDataChange({
|
|
||||||
...systemData,
|
|
||||||
working_hours: {
|
|
||||||
...systemData.working_hours,
|
|
||||||
[field]: value,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleNotificationChange = (field: string, value: any) => {
|
|
||||||
onDataChange({
|
|
||||||
...systemData,
|
|
||||||
notifications: {
|
|
||||||
...systemData.notifications,
|
|
||||||
[field]: value,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleIntegrationChange = (field: string, value: string) => {
|
|
||||||
onDataChange({
|
|
||||||
...systemData,
|
|
||||||
integrations: {
|
|
||||||
...systemData.integrations,
|
|
||||||
[field]: value,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleFeatureToggle = (feature: string) => {
|
|
||||||
onDataChange({
|
|
||||||
...systemData,
|
|
||||||
features: {
|
|
||||||
...systemData.features,
|
|
||||||
[feature]: !systemData.features[feature as keyof typeof systemData.features],
|
|
||||||
},
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const toggleWorkingDay = (day: number) => {
|
|
||||||
const currentDays = systemData.working_hours.days;
|
|
||||||
const updatedDays = currentDays.includes(day)
|
|
||||||
? currentDays.filter(d => d !== day)
|
|
||||||
: [...currentDays, day].sort();
|
|
||||||
|
|
||||||
handleWorkingHoursChange('days', updatedDays);
|
|
||||||
};
|
|
||||||
|
|
||||||
const toggleAlertPreference = (alert: string) => {
|
|
||||||
const current = systemData.notifications.alert_preferences;
|
|
||||||
const updated = current.includes(alert)
|
|
||||||
? current.filter(a => a !== alert)
|
|
||||||
: [...current, alert];
|
|
||||||
|
|
||||||
handleNotificationChange('alert_preferences', updated);
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="space-y-8">
|
|
||||||
{/* Regional Settings */}
|
|
||||||
<div className="space-y-4">
|
|
||||||
<h3 className="text-lg font-semibold text-gray-900 border-b pb-2">
|
|
||||||
Configuración regional
|
|
||||||
</h3>
|
|
||||||
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
||||||
<div>
|
|
||||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|
||||||
Zona horaria *
|
|
||||||
</label>
|
|
||||||
<Select
|
|
||||||
value={systemData.timezone}
|
|
||||||
onChange={(e) => handleInputChange('timezone', e.target.value)}
|
|
||||||
className="w-full"
|
|
||||||
>
|
|
||||||
{TIMEZONES.map((tz) => (
|
|
||||||
<option key={tz.value} value={tz.value}>
|
|
||||||
{tz.label}
|
|
||||||
</option>
|
|
||||||
))}
|
|
||||||
</Select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|
||||||
Moneda *
|
|
||||||
</label>
|
|
||||||
<Select
|
|
||||||
value={systemData.currency}
|
|
||||||
onChange={(e) => handleInputChange('currency', e.target.value)}
|
|
||||||
className="w-full"
|
|
||||||
>
|
|
||||||
{CURRENCIES.map((currency) => (
|
|
||||||
<option key={currency.value} value={currency.value}>
|
|
||||||
{currency.label}
|
|
||||||
</option>
|
|
||||||
))}
|
|
||||||
</Select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|
||||||
Idioma *
|
|
||||||
</label>
|
|
||||||
<Select
|
|
||||||
value={systemData.language}
|
|
||||||
onChange={(e) => handleInputChange('language', e.target.value)}
|
|
||||||
className="w-full"
|
|
||||||
>
|
|
||||||
{LANGUAGES.map((lang) => (
|
|
||||||
<option key={lang.value} value={lang.value}>
|
|
||||||
{lang.label}
|
|
||||||
</option>
|
|
||||||
))}
|
|
||||||
</Select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|
||||||
Formato de fecha *
|
|
||||||
</label>
|
|
||||||
<Select
|
|
||||||
value={systemData.date_format}
|
|
||||||
onChange={(e) => handleInputChange('date_format', e.target.value)}
|
|
||||||
className="w-full"
|
|
||||||
>
|
|
||||||
<option value="DD/MM/YYYY">DD/MM/YYYY</option>
|
|
||||||
<option value="MM/DD/YYYY">MM/DD/YYYY</option>
|
|
||||||
<option value="YYYY-MM-DD">YYYY-MM-DD</option>
|
|
||||||
</Select>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Working Hours */}
|
|
||||||
<div className="space-y-4">
|
|
||||||
<h3 className="text-lg font-semibold text-gray-900 border-b pb-2">
|
|
||||||
Horario de trabajo
|
|
||||||
</h3>
|
|
||||||
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
||||||
<div>
|
|
||||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|
||||||
Hora de apertura *
|
|
||||||
</label>
|
|
||||||
<Input
|
|
||||||
type="time"
|
|
||||||
value={systemData.working_hours.start}
|
|
||||||
onChange={(e) => handleWorkingHoursChange('start', e.target.value)}
|
|
||||||
className="w-full"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|
||||||
Hora de cierre *
|
|
||||||
</label>
|
|
||||||
<Input
|
|
||||||
type="time"
|
|
||||||
value={systemData.working_hours.end}
|
|
||||||
onChange={(e) => handleWorkingHoursChange('end', e.target.value)}
|
|
||||||
className="w-full"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
|
||||||
Días de operación *
|
|
||||||
</label>
|
|
||||||
<div className="flex flex-wrap gap-2">
|
|
||||||
{DAYS_OF_WEEK.map((day) => (
|
|
||||||
<button
|
|
||||||
key={day.value}
|
|
||||||
onClick={() => toggleWorkingDay(day.value)}
|
|
||||||
className={`px-3 py-2 rounded-lg text-sm font-medium transition-colors ${
|
|
||||||
systemData.working_hours.days.includes(day.value)
|
|
||||||
? 'bg-blue-500 text-white'
|
|
||||||
: 'bg-gray-200 text-gray-700 hover:bg-gray-300'
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
{day.short} - {day.label}
|
|
||||||
</button>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Features */}
|
|
||||||
<div className="space-y-4">
|
|
||||||
<h3 className="text-lg font-semibold text-gray-900 border-b pb-2">
|
|
||||||
Módulos y características
|
|
||||||
</h3>
|
|
||||||
<p className="text-sm text-gray-600">
|
|
||||||
Selecciona las características que quieres activar. Podrás cambiar esto más tarde.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
||||||
{FEATURES.map((feature) => (
|
|
||||||
<Card
|
|
||||||
key={feature.key}
|
|
||||||
className={`p-4 cursor-pointer transition-colors ${
|
|
||||||
systemData.features[feature.key as keyof typeof systemData.features]
|
|
||||||
? 'border-blue-500 bg-blue-50'
|
|
||||||
: 'border-gray-200 hover:border-gray-300'
|
|
||||||
}`}
|
|
||||||
onClick={() => handleFeatureToggle(feature.key)}
|
|
||||||
>
|
|
||||||
<div className="flex items-start justify-between">
|
|
||||||
<div className="flex-1">
|
|
||||||
<div className="flex items-center gap-2 mb-1">
|
|
||||||
<h4 className="font-medium text-gray-900">{feature.title}</h4>
|
|
||||||
{feature.recommended && (
|
|
||||||
<Badge className="bg-green-100 text-green-800 text-xs">
|
|
||||||
Recomendado
|
|
||||||
</Badge>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<p className="text-sm text-gray-600">{feature.description}</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className={`w-5 h-5 rounded border-2 flex items-center justify-center ${
|
|
||||||
systemData.features[feature.key as keyof typeof systemData.features]
|
|
||||||
? 'border-blue-500 bg-blue-500'
|
|
||||||
: 'border-gray-300'
|
|
||||||
}`}>
|
|
||||||
{systemData.features[feature.key as keyof typeof systemData.features] && (
|
|
||||||
<span className="text-white text-xs">✓</span>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Card>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Notifications */}
|
|
||||||
<div className="space-y-4">
|
|
||||||
<h3 className="text-lg font-semibold text-gray-900 border-b pb-2">
|
|
||||||
Notificaciones
|
|
||||||
</h3>
|
|
||||||
|
|
||||||
<div className="space-y-4">
|
|
||||||
<div className="flex flex-wrap gap-4">
|
|
||||||
<label className="flex items-center">
|
|
||||||
<input
|
|
||||||
type="checkbox"
|
|
||||||
checked={systemData.notifications.email_enabled}
|
|
||||||
onChange={(e) => handleNotificationChange('email_enabled', e.target.checked)}
|
|
||||||
className="mr-2 rounded"
|
|
||||||
/>
|
|
||||||
Notificaciones por email
|
|
||||||
</label>
|
|
||||||
|
|
||||||
<label className="flex items-center">
|
|
||||||
<input
|
|
||||||
type="checkbox"
|
|
||||||
checked={systemData.notifications.push_enabled}
|
|
||||||
onChange={(e) => handleNotificationChange('push_enabled', e.target.checked)}
|
|
||||||
className="mr-2 rounded"
|
|
||||||
/>
|
|
||||||
Notificaciones push
|
|
||||||
</label>
|
|
||||||
|
|
||||||
<label className="flex items-center">
|
|
||||||
<input
|
|
||||||
type="checkbox"
|
|
||||||
checked={systemData.notifications.sms_enabled}
|
|
||||||
onChange={(e) => handleNotificationChange('sms_enabled', e.target.checked)}
|
|
||||||
className="mr-2 rounded"
|
|
||||||
/>
|
|
||||||
Notificaciones por SMS
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
|
||||||
Tipos de alertas que deseas recibir
|
|
||||||
</label>
|
|
||||||
<div className="space-y-2">
|
|
||||||
{ALERT_TYPES.map((alert) => (
|
|
||||||
<div
|
|
||||||
key={alert.value}
|
|
||||||
className={`p-3 border rounded-lg cursor-pointer transition-colors ${
|
|
||||||
systemData.notifications.alert_preferences.includes(alert.value)
|
|
||||||
? 'border-blue-500 bg-blue-50'
|
|
||||||
: 'border-gray-200 hover:border-gray-300'
|
|
||||||
}`}
|
|
||||||
onClick={() => toggleAlertPreference(alert.value)}
|
|
||||||
>
|
|
||||||
<div className="flex items-start justify-between">
|
|
||||||
<div>
|
|
||||||
<h5 className="font-medium text-gray-900">{alert.label}</h5>
|
|
||||||
<p className="text-sm text-gray-600">{alert.description}</p>
|
|
||||||
</div>
|
|
||||||
<div className={`w-5 h-5 rounded border-2 flex items-center justify-center ${
|
|
||||||
systemData.notifications.alert_preferences.includes(alert.value)
|
|
||||||
? 'border-blue-500 bg-blue-500'
|
|
||||||
: 'border-gray-300'
|
|
||||||
}`}>
|
|
||||||
{systemData.notifications.alert_preferences.includes(alert.value) && (
|
|
||||||
<span className="text-white text-xs">✓</span>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Integrations */}
|
|
||||||
<div className="space-y-4">
|
|
||||||
<h3 className="text-lg font-semibold text-gray-900 border-b pb-2">
|
|
||||||
Integraciones (opcional)
|
|
||||||
</h3>
|
|
||||||
<p className="text-sm text-gray-600">
|
|
||||||
Estas integraciones se pueden configurar más tarde desde el panel de administración.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
||||||
<div>
|
|
||||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|
||||||
Sistema POS
|
|
||||||
</label>
|
|
||||||
<Select
|
|
||||||
value={systemData.integrations.pos_system || ''}
|
|
||||||
onChange={(e) => handleIntegrationChange('pos_system', e.target.value)}
|
|
||||||
className="w-full"
|
|
||||||
>
|
|
||||||
<option value="">Seleccionar...</option>
|
|
||||||
<option value="square">Square</option>
|
|
||||||
<option value="shopify">Shopify POS</option>
|
|
||||||
<option value="toast">Toast</option>
|
|
||||||
<option value="lightspeed">Lightspeed</option>
|
|
||||||
<option value="other">Otro</option>
|
|
||||||
</Select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|
||||||
Software de contabilidad
|
|
||||||
</label>
|
|
||||||
<Select
|
|
||||||
value={systemData.integrations.accounting_software || ''}
|
|
||||||
onChange={(e) => handleIntegrationChange('accounting_software', e.target.value)}
|
|
||||||
className="w-full"
|
|
||||||
>
|
|
||||||
<option value="">Seleccionar...</option>
|
|
||||||
<option value="sage">Sage</option>
|
|
||||||
<option value="contaplus">ContaPlus</option>
|
|
||||||
<option value="a3">A3 Software</option>
|
|
||||||
<option value="quickbooks">QuickBooks</option>
|
|
||||||
<option value="other">Otro</option>
|
|
||||||
</Select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|
||||||
Proveedor de pagos
|
|
||||||
</label>
|
|
||||||
<Select
|
|
||||||
value={systemData.integrations.payment_provider || ''}
|
|
||||||
onChange={(e) => handleIntegrationChange('payment_provider', e.target.value)}
|
|
||||||
className="w-full"
|
|
||||||
>
|
|
||||||
<option value="">Seleccionar...</option>
|
|
||||||
<option value="stripe">Stripe</option>
|
|
||||||
<option value="paypal">PayPal</option>
|
|
||||||
<option value="redsys">Redsys</option>
|
|
||||||
<option value="bizum">Bizum</option>
|
|
||||||
<option value="other">Otro</option>
|
|
||||||
</Select>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Summary */}
|
|
||||||
<div className="bg-gray-50 p-4 rounded-lg">
|
|
||||||
<h4 className="font-medium text-gray-900 mb-2">Configuración seleccionada</h4>
|
|
||||||
<div className="text-sm text-gray-600 space-y-1">
|
|
||||||
<p><strong>Zona horaria:</strong> {TIMEZONES.find(tz => tz.value === systemData.timezone)?.label}</p>
|
|
||||||
<p><strong>Moneda:</strong> {CURRENCIES.find(c => c.value === systemData.currency)?.label}</p>
|
|
||||||
<p><strong>Horario:</strong> {systemData.working_hours.start} - {systemData.working_hours.end}</p>
|
|
||||||
<p><strong>Días operativos:</strong> {systemData.working_hours.days.length} días por semana</p>
|
|
||||||
<p><strong>Módulos activados:</strong> {Object.values(systemData.features).filter(Boolean).length} de {Object.keys(systemData.features).length}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default SystemSetupStep;
|
|
||||||
@@ -1,680 +0,0 @@
|
|||||||
import React, { useState, useCallback, useEffect } from 'react';
|
|
||||||
import { Card, Button, Badge, Input, Modal, Table, Select, DatePicker } from '../../ui';
|
|
||||||
import { productionService, type ProductionBatchResponse, ProductionBatchStatus, ProductionPriority } from '../../../services/api/production.service';
|
|
||||||
import type { ProductionBatch, QualityCheck } from '../../../types/production.types';
|
|
||||||
|
|
||||||
interface BatchTrackerProps {
|
|
||||||
className?: string;
|
|
||||||
batchId?: string;
|
|
||||||
onStageUpdate?: (batch: ProductionBatch, newStage: ProductionStage) => void;
|
|
||||||
onQualityCheckRequired?: (batch: ProductionBatch, stage: ProductionStage) => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface ProductionStage {
|
|
||||||
id: string;
|
|
||||||
name: string;
|
|
||||||
spanishName: string;
|
|
||||||
icon: string;
|
|
||||||
estimatedMinutes: number;
|
|
||||||
requiresQualityCheck: boolean;
|
|
||||||
criticalControlPoint: boolean;
|
|
||||||
completedAt?: string;
|
|
||||||
notes?: string;
|
|
||||||
nextStages: string[];
|
|
||||||
temperature?: {
|
|
||||||
min: number;
|
|
||||||
max: number;
|
|
||||||
unit: string;
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
const PRODUCTION_STAGES: Record<string, ProductionStage> = {
|
|
||||||
mixing: {
|
|
||||||
id: 'mixing',
|
|
||||||
name: 'Mixing',
|
|
||||||
spanishName: 'Amasado',
|
|
||||||
icon: '🥄',
|
|
||||||
estimatedMinutes: 15,
|
|
||||||
requiresQualityCheck: true,
|
|
||||||
criticalControlPoint: true,
|
|
||||||
nextStages: ['resting'],
|
|
||||||
temperature: { min: 22, max: 26, unit: '°C' },
|
|
||||||
},
|
|
||||||
resting: {
|
|
||||||
id: 'resting',
|
|
||||||
name: 'Resting',
|
|
||||||
spanishName: 'Reposo',
|
|
||||||
icon: '⏰',
|
|
||||||
estimatedMinutes: 60,
|
|
||||||
requiresQualityCheck: false,
|
|
||||||
criticalControlPoint: false,
|
|
||||||
nextStages: ['shaping', 'fermentation'],
|
|
||||||
},
|
|
||||||
shaping: {
|
|
||||||
id: 'shaping',
|
|
||||||
name: 'Shaping',
|
|
||||||
spanishName: 'Formado',
|
|
||||||
icon: '✋',
|
|
||||||
estimatedMinutes: 20,
|
|
||||||
requiresQualityCheck: true,
|
|
||||||
criticalControlPoint: false,
|
|
||||||
nextStages: ['fermentation'],
|
|
||||||
},
|
|
||||||
fermentation: {
|
|
||||||
id: 'fermentation',
|
|
||||||
name: 'Fermentation',
|
|
||||||
spanishName: 'Fermentado',
|
|
||||||
icon: '🫧',
|
|
||||||
estimatedMinutes: 120,
|
|
||||||
requiresQualityCheck: true,
|
|
||||||
criticalControlPoint: true,
|
|
||||||
nextStages: ['baking'],
|
|
||||||
temperature: { min: 28, max: 32, unit: '°C' },
|
|
||||||
},
|
|
||||||
baking: {
|
|
||||||
id: 'baking',
|
|
||||||
name: 'Baking',
|
|
||||||
spanishName: 'Horneado',
|
|
||||||
icon: '🔥',
|
|
||||||
estimatedMinutes: 45,
|
|
||||||
requiresQualityCheck: true,
|
|
||||||
criticalControlPoint: true,
|
|
||||||
nextStages: ['cooling'],
|
|
||||||
temperature: { min: 180, max: 220, unit: '°C' },
|
|
||||||
},
|
|
||||||
cooling: {
|
|
||||||
id: 'cooling',
|
|
||||||
name: 'Cooling',
|
|
||||||
spanishName: 'Enfriado',
|
|
||||||
icon: '❄️',
|
|
||||||
estimatedMinutes: 90,
|
|
||||||
requiresQualityCheck: false,
|
|
||||||
criticalControlPoint: false,
|
|
||||||
nextStages: ['packaging'],
|
|
||||||
temperature: { min: 18, max: 25, unit: '°C' },
|
|
||||||
},
|
|
||||||
packaging: {
|
|
||||||
id: 'packaging',
|
|
||||||
name: 'Packaging',
|
|
||||||
spanishName: 'Empaquetado',
|
|
||||||
icon: '📦',
|
|
||||||
estimatedMinutes: 15,
|
|
||||||
requiresQualityCheck: true,
|
|
||||||
criticalControlPoint: false,
|
|
||||||
nextStages: ['completed'],
|
|
||||||
},
|
|
||||||
completed: {
|
|
||||||
id: 'completed',
|
|
||||||
name: 'Completed',
|
|
||||||
spanishName: 'Completado',
|
|
||||||
icon: '✅',
|
|
||||||
estimatedMinutes: 0,
|
|
||||||
requiresQualityCheck: false,
|
|
||||||
criticalControlPoint: false,
|
|
||||||
nextStages: [],
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
const STATUS_COLORS = {
|
|
||||||
[ProductionBatchStatus.PLANNED]: 'bg-blue-100 text-blue-800 border-blue-200',
|
|
||||||
[ProductionBatchStatus.IN_PROGRESS]: 'bg-yellow-100 text-yellow-800 border-yellow-200',
|
|
||||||
[ProductionBatchStatus.COMPLETED]: 'bg-green-100 text-green-800 border-green-200',
|
|
||||||
[ProductionBatchStatus.CANCELLED]: 'bg-red-100 text-red-800 border-red-200',
|
|
||||||
[ProductionBatchStatus.ON_HOLD]: 'bg-gray-100 text-gray-800 border-gray-200',
|
|
||||||
};
|
|
||||||
|
|
||||||
const PRIORITY_COLORS = {
|
|
||||||
[ProductionPriority.LOW]: 'bg-gray-100 text-gray-800',
|
|
||||||
[ProductionPriority.NORMAL]: 'bg-blue-100 text-blue-800',
|
|
||||||
[ProductionPriority.HIGH]: 'bg-orange-100 text-orange-800',
|
|
||||||
[ProductionPriority.URGENT]: 'bg-red-100 text-red-800',
|
|
||||||
};
|
|
||||||
|
|
||||||
export const BatchTracker: React.FC<BatchTrackerProps> = ({
|
|
||||||
className = '',
|
|
||||||
batchId,
|
|
||||||
onStageUpdate,
|
|
||||||
onQualityCheckRequired,
|
|
||||||
}) => {
|
|
||||||
const [batches, setBatches] = useState<ProductionBatchResponse[]>([]);
|
|
||||||
const [selectedBatch, setSelectedBatch] = useState<ProductionBatchResponse | null>(null);
|
|
||||||
const [loading, setLoading] = useState(false);
|
|
||||||
const [currentStage, setCurrentStage] = useState<string>('mixing');
|
|
||||||
const [stageNotes, setStageNotes] = useState<Record<string, string>>({});
|
|
||||||
const [isStageModalOpen, setIsStageModalOpen] = useState(false);
|
|
||||||
const [selectedStageForUpdate, setSelectedStageForUpdate] = useState<ProductionStage | null>(null);
|
|
||||||
const [alerts, setAlerts] = useState<Array<{
|
|
||||||
id: string;
|
|
||||||
batchId: string;
|
|
||||||
stage: string;
|
|
||||||
type: 'overdue' | 'temperature' | 'quality' | 'equipment';
|
|
||||||
message: string;
|
|
||||||
severity: 'low' | 'medium' | 'high';
|
|
||||||
timestamp: string;
|
|
||||||
}>>([]);
|
|
||||||
|
|
||||||
const loadBatches = useCallback(async () => {
|
|
||||||
setLoading(true);
|
|
||||||
try {
|
|
||||||
const response = await productionService.getProductionBatches({
|
|
||||||
status: ProductionBatchStatus.IN_PROGRESS,
|
|
||||||
});
|
|
||||||
|
|
||||||
if (response.success && response.data) {
|
|
||||||
setBatches(response.data.items || []);
|
|
||||||
|
|
||||||
if (batchId) {
|
|
||||||
const specificBatch = response.data.items.find(b => b.id === batchId);
|
|
||||||
if (specificBatch) {
|
|
||||||
setSelectedBatch(specificBatch);
|
|
||||||
}
|
|
||||||
} else if (response.data.items.length > 0) {
|
|
||||||
setSelectedBatch(response.data.items[0]);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Error loading batches:', error);
|
|
||||||
} finally {
|
|
||||||
setLoading(false);
|
|
||||||
}
|
|
||||||
}, [batchId]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
loadBatches();
|
|
||||||
|
|
||||||
// Mock alerts for demonstration
|
|
||||||
setAlerts([
|
|
||||||
{
|
|
||||||
id: '1',
|
|
||||||
batchId: 'batch-1',
|
|
||||||
stage: 'fermentation',
|
|
||||||
type: 'overdue',
|
|
||||||
message: 'El fermentado ha superado el tiempo estimado en 30 minutos',
|
|
||||||
severity: 'medium',
|
|
||||||
timestamp: new Date().toISOString(),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: '2',
|
|
||||||
batchId: 'batch-2',
|
|
||||||
stage: 'baking',
|
|
||||||
type: 'temperature',
|
|
||||||
message: 'Temperatura del horno fuera del rango óptimo (185°C)',
|
|
||||||
severity: 'high',
|
|
||||||
timestamp: new Date().toISOString(),
|
|
||||||
},
|
|
||||||
]);
|
|
||||||
}, [loadBatches]);
|
|
||||||
|
|
||||||
const getCurrentStageInfo = (batch: ProductionBatchResponse): { stage: ProductionStage; progress: number } => {
|
|
||||||
// This would typically come from the batch data
|
|
||||||
// For demo purposes, we'll simulate based on batch status
|
|
||||||
let stageId = 'mixing';
|
|
||||||
let progress = 0;
|
|
||||||
|
|
||||||
if (batch.status === ProductionBatchStatus.IN_PROGRESS) {
|
|
||||||
// Simulate current stage based on time elapsed
|
|
||||||
const startTime = new Date(batch.actual_start_date || batch.planned_start_date);
|
|
||||||
const now = new Date();
|
|
||||||
const elapsedMinutes = (now.getTime() - startTime.getTime()) / (1000 * 60);
|
|
||||||
|
|
||||||
let cumulativeTime = 0;
|
|
||||||
const stageKeys = Object.keys(PRODUCTION_STAGES).slice(0, -1); // Exclude completed
|
|
||||||
|
|
||||||
for (const key of stageKeys) {
|
|
||||||
const stage = PRODUCTION_STAGES[key];
|
|
||||||
cumulativeTime += stage.estimatedMinutes;
|
|
||||||
if (elapsedMinutes <= cumulativeTime) {
|
|
||||||
stageId = key;
|
|
||||||
const stageStartTime = cumulativeTime - stage.estimatedMinutes;
|
|
||||||
progress = Math.min(100, ((elapsedMinutes - stageStartTime) / stage.estimatedMinutes) * 100);
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
stage: PRODUCTION_STAGES[stageId],
|
|
||||||
progress: Math.max(0, progress),
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
const getTimeRemaining = (batch: ProductionBatchResponse, stage: ProductionStage): string => {
|
|
||||||
const startTime = new Date(batch.actual_start_date || batch.planned_start_date);
|
|
||||||
const now = new Date();
|
|
||||||
const elapsedMinutes = (now.getTime() - startTime.getTime()) / (1000 * 60);
|
|
||||||
|
|
||||||
// Calculate when this stage should complete based on cumulative time
|
|
||||||
let cumulativeTime = 0;
|
|
||||||
const stageKeys = Object.keys(PRODUCTION_STAGES);
|
|
||||||
const currentStageIndex = stageKeys.indexOf(stage.id);
|
|
||||||
|
|
||||||
for (let i = 0; i <= currentStageIndex; i++) {
|
|
||||||
cumulativeTime += PRODUCTION_STAGES[stageKeys[i]].estimatedMinutes;
|
|
||||||
}
|
|
||||||
|
|
||||||
const remainingMinutes = Math.max(0, cumulativeTime - elapsedMinutes);
|
|
||||||
const hours = Math.floor(remainingMinutes / 60);
|
|
||||||
const minutes = Math.floor(remainingMinutes % 60);
|
|
||||||
|
|
||||||
if (hours > 0) {
|
|
||||||
return `${hours}h ${minutes}m restantes`;
|
|
||||||
} else {
|
|
||||||
return `${minutes}m restantes`;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const updateStage = async (batchId: string, newStage: string, notes?: string) => {
|
|
||||||
try {
|
|
||||||
// This would update the batch stage in the backend
|
|
||||||
const updatedBatch = batches.find(b => b.id === batchId);
|
|
||||||
if (updatedBatch && onStageUpdate) {
|
|
||||||
onStageUpdate(updatedBatch as unknown as ProductionBatch, PRODUCTION_STAGES[newStage]);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Update local state
|
|
||||||
if (notes) {
|
|
||||||
setStageNotes(prev => ({
|
|
||||||
...prev,
|
|
||||||
[`${batchId}-${newStage}`]: notes,
|
|
||||||
}));
|
|
||||||
}
|
|
||||||
|
|
||||||
await loadBatches();
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Error updating stage:', error);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleQualityCheck = (batch: ProductionBatchResponse, stage: ProductionStage) => {
|
|
||||||
if (onQualityCheckRequired) {
|
|
||||||
onQualityCheckRequired(batch as unknown as ProductionBatch, stage);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const renderStageProgress = (batch: ProductionBatchResponse) => {
|
|
||||||
const { stage: currentStage, progress } = getCurrentStageInfo(batch);
|
|
||||||
const stages = Object.values(PRODUCTION_STAGES).slice(0, -1); // Exclude completed
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="space-y-4">
|
|
||||||
<div className="flex items-center justify-between">
|
|
||||||
<h3 className="font-semibold text-lg">Progreso del lote</h3>
|
|
||||||
<Badge className={STATUS_COLORS[batch.status]}>
|
|
||||||
{batch.status === ProductionBatchStatus.IN_PROGRESS && 'En progreso'}
|
|
||||||
{batch.status === ProductionBatchStatus.PLANNED && 'Planificado'}
|
|
||||||
{batch.status === ProductionBatchStatus.COMPLETED && 'Completado'}
|
|
||||||
</Badge>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
|
||||||
{stages.map((stage, index) => {
|
|
||||||
const isActive = stage.id === currentStage.id;
|
|
||||||
const isCompleted = stages.findIndex(s => s.id === currentStage.id) > index;
|
|
||||||
const isOverdue = false; // Would be calculated based on actual timing
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Card
|
|
||||||
key={stage.id}
|
|
||||||
className={`p-4 border-2 transition-all cursor-pointer hover:shadow-md ${
|
|
||||||
isActive
|
|
||||||
? 'border-blue-500 bg-blue-50'
|
|
||||||
: isCompleted
|
|
||||||
? 'border-green-500 bg-green-50'
|
|
||||||
: 'border-gray-200 bg-white'
|
|
||||||
} ${isOverdue ? 'border-red-500 bg-red-50' : ''}`}
|
|
||||||
onClick={() => {
|
|
||||||
setSelectedStageForUpdate(stage);
|
|
||||||
setIsStageModalOpen(true);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div className="flex items-center justify-between mb-2">
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<span className="text-xl">{stage.icon}</span>
|
|
||||||
<span className="font-medium text-sm">{stage.spanishName}</span>
|
|
||||||
</div>
|
|
||||||
{stage.criticalControlPoint && (
|
|
||||||
<Badge className="bg-orange-100 text-orange-800 text-xs">
|
|
||||||
PCC
|
|
||||||
</Badge>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{isActive && (
|
|
||||||
<div className="space-y-2">
|
|
||||||
<div className="flex justify-between text-xs text-gray-600">
|
|
||||||
<span>Progreso</span>
|
|
||||||
<span>{Math.round(progress)}%</span>
|
|
||||||
</div>
|
|
||||||
<div className="w-full bg-gray-200 rounded-full h-2">
|
|
||||||
<div
|
|
||||||
className="bg-blue-500 h-2 rounded-full transition-all duration-500"
|
|
||||||
style={{ width: `${progress}%` }}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<p className="text-xs text-gray-600">
|
|
||||||
{getTimeRemaining(batch, stage)}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{isCompleted && (
|
|
||||||
<div className="flex items-center text-green-600 text-sm">
|
|
||||||
<span className="mr-1">✓</span>
|
|
||||||
Completado
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{!isActive && !isCompleted && (
|
|
||||||
<p className="text-xs text-gray-500">
|
|
||||||
~{stage.estimatedMinutes}min
|
|
||||||
</p>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{stage.temperature && isActive && (
|
|
||||||
<p className="text-xs text-gray-600 mt-1">
|
|
||||||
🌡️ {stage.temperature.min}-{stage.temperature.max}{stage.temperature.unit}
|
|
||||||
</p>
|
|
||||||
)}
|
|
||||||
</Card>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
const renderBatchDetails = (batch: ProductionBatchResponse) => (
|
|
||||||
<Card className="p-4">
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
|
||||||
<div>
|
|
||||||
<h4 className="font-semibold text-gray-900">{batch.recipe?.name || 'Producto'}</h4>
|
|
||||||
<p className="text-sm text-gray-600">Lote #{batch.batch_number}</p>
|
|
||||||
<Badge className={PRIORITY_COLORS[batch.priority]} size="sm">
|
|
||||||
{batch.priority === ProductionPriority.LOW && 'Baja'}
|
|
||||||
{batch.priority === ProductionPriority.NORMAL && 'Normal'}
|
|
||||||
{batch.priority === ProductionPriority.HIGH && 'Alta'}
|
|
||||||
{batch.priority === ProductionPriority.URGENT && 'Urgente'}
|
|
||||||
</Badge>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<p className="text-sm text-gray-600">Cantidad planificada</p>
|
|
||||||
<p className="font-semibold">{batch.planned_quantity} unidades</p>
|
|
||||||
{batch.actual_quantity && (
|
|
||||||
<>
|
|
||||||
<p className="text-sm text-gray-600 mt-1">Cantidad real</p>
|
|
||||||
<p className="font-semibold">{batch.actual_quantity} unidades</p>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<p className="text-sm text-gray-600">Inicio planificado</p>
|
|
||||||
<p className="font-semibold">
|
|
||||||
{new Date(batch.planned_start_date).toLocaleString('es-ES')}
|
|
||||||
</p>
|
|
||||||
{batch.actual_start_date && (
|
|
||||||
<>
|
|
||||||
<p className="text-sm text-gray-600 mt-1">Inicio real</p>
|
|
||||||
<p className="font-semibold">
|
|
||||||
{new Date(batch.actual_start_date).toLocaleString('es-ES')}
|
|
||||||
</p>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{batch.notes && (
|
|
||||||
<div className="mt-4 p-3 bg-gray-50 rounded-lg">
|
|
||||||
<p className="text-sm text-gray-700">{batch.notes}</p>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</Card>
|
|
||||||
);
|
|
||||||
|
|
||||||
const renderAlerts = () => (
|
|
||||||
<Card className="p-4">
|
|
||||||
<h3 className="font-semibold text-lg mb-4 flex items-center gap-2">
|
|
||||||
🚨 Alertas activas
|
|
||||||
</h3>
|
|
||||||
|
|
||||||
{alerts.length === 0 ? (
|
|
||||||
<p className="text-gray-500 text-center py-4">No hay alertas activas</p>
|
|
||||||
) : (
|
|
||||||
<div className="space-y-3">
|
|
||||||
{alerts.map((alert) => (
|
|
||||||
<div
|
|
||||||
key={alert.id}
|
|
||||||
className={`p-3 rounded-lg border-l-4 ${
|
|
||||||
alert.severity === 'high'
|
|
||||||
? 'bg-red-50 border-red-500'
|
|
||||||
: alert.severity === 'medium'
|
|
||||||
? 'bg-yellow-50 border-yellow-500'
|
|
||||||
: 'bg-blue-50 border-blue-500'
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
<div className="flex justify-between items-start">
|
|
||||||
<div>
|
|
||||||
<p className="font-medium text-sm">
|
|
||||||
Lote #{batches.find(b => b.id === alert.batchId)?.batch_number} - {PRODUCTION_STAGES[alert.stage]?.spanishName}
|
|
||||||
</p>
|
|
||||||
<p className="text-sm text-gray-700 mt-1">{alert.message}</p>
|
|
||||||
</div>
|
|
||||||
<Badge
|
|
||||||
className={
|
|
||||||
alert.severity === 'high'
|
|
||||||
? 'bg-red-100 text-red-800'
|
|
||||||
: alert.severity === 'medium'
|
|
||||||
? 'bg-yellow-100 text-yellow-800'
|
|
||||||
: 'bg-blue-100 text-blue-800'
|
|
||||||
}
|
|
||||||
>
|
|
||||||
{alert.severity === 'high' && 'Alta'}
|
|
||||||
{alert.severity === 'medium' && 'Media'}
|
|
||||||
{alert.severity === 'low' && 'Baja'}
|
|
||||||
</Badge>
|
|
||||||
</div>
|
|
||||||
<p className="text-xs text-gray-500 mt-2">
|
|
||||||
{new Date(alert.timestamp).toLocaleTimeString('es-ES')}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</Card>
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className={`space-y-6 ${className}`}>
|
|
||||||
<div className="flex justify-between items-center">
|
|
||||||
<div>
|
|
||||||
<h2 className="text-2xl font-bold text-gray-900">Seguimiento de Lotes</h2>
|
|
||||||
<p className="text-gray-600">Rastrea el progreso de los lotes a través de las etapas de producción</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{selectedBatch && (
|
|
||||||
<div className="flex gap-2">
|
|
||||||
<Select
|
|
||||||
value={selectedBatch.id}
|
|
||||||
onChange={(e) => {
|
|
||||||
const batch = batches.find(b => b.id === e.target.value);
|
|
||||||
if (batch) setSelectedBatch(batch);
|
|
||||||
}}
|
|
||||||
className="w-64"
|
|
||||||
>
|
|
||||||
{batches.map((batch) => (
|
|
||||||
<option key={batch.id} value={batch.id}>
|
|
||||||
Lote #{batch.batch_number} - {batch.recipe?.name}
|
|
||||||
</option>
|
|
||||||
))}
|
|
||||||
</Select>
|
|
||||||
|
|
||||||
<Button
|
|
||||||
variant="outline"
|
|
||||||
onClick={loadBatches}
|
|
||||||
disabled={loading}
|
|
||||||
>
|
|
||||||
{loading ? 'Actualizando...' : 'Actualizar'}
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{loading ? (
|
|
||||||
<div className="flex justify-center items-center h-64">
|
|
||||||
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<>
|
|
||||||
{selectedBatch ? (
|
|
||||||
<div className="space-y-6">
|
|
||||||
{renderBatchDetails(selectedBatch)}
|
|
||||||
{renderStageProgress(selectedBatch)}
|
|
||||||
{renderAlerts()}
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<Card className="p-8 text-center">
|
|
||||||
<p className="text-gray-500">No hay lotes en producción actualmente</p>
|
|
||||||
<Button variant="primary" className="mt-4">
|
|
||||||
Ver todos los lotes
|
|
||||||
</Button>
|
|
||||||
</Card>
|
|
||||||
)}
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Stage Update Modal */}
|
|
||||||
<Modal
|
|
||||||
isOpen={isStageModalOpen}
|
|
||||||
onClose={() => {
|
|
||||||
setIsStageModalOpen(false);
|
|
||||||
setSelectedStageForUpdate(null);
|
|
||||||
}}
|
|
||||||
title={`${selectedStageForUpdate?.spanishName} - Lote #${selectedBatch?.batch_number}`}
|
|
||||||
>
|
|
||||||
{selectedStageForUpdate && selectedBatch && (
|
|
||||||
<div className="space-y-4">
|
|
||||||
<div className="bg-gray-50 p-4 rounded-lg">
|
|
||||||
<h4 className="font-medium mb-2 flex items-center gap-2">
|
|
||||||
<span className="text-xl">{selectedStageForUpdate.icon}</span>
|
|
||||||
{selectedStageForUpdate.spanishName}
|
|
||||||
</h4>
|
|
||||||
<p className="text-sm text-gray-600 mb-2">
|
|
||||||
Duración estimada: {selectedStageForUpdate.estimatedMinutes} minutos
|
|
||||||
</p>
|
|
||||||
|
|
||||||
{selectedStageForUpdate.temperature && (
|
|
||||||
<p className="text-sm text-gray-600">
|
|
||||||
🌡️ Temperatura: {selectedStageForUpdate.temperature.min}-{selectedStageForUpdate.temperature.max}{selectedStageForUpdate.temperature.unit}
|
|
||||||
</p>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{selectedStageForUpdate.criticalControlPoint && (
|
|
||||||
<Badge className="bg-orange-100 text-orange-800 mt-2">
|
|
||||||
Punto Crítico de Control (PCC)
|
|
||||||
</Badge>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{selectedStageForUpdate.requiresQualityCheck && (
|
|
||||||
<div className="bg-yellow-50 border border-yellow-200 p-3 rounded-lg">
|
|
||||||
<p className="text-sm text-yellow-800">
|
|
||||||
⚠️ Esta etapa requiere control de calidad antes de continuar
|
|
||||||
</p>
|
|
||||||
<Button
|
|
||||||
variant="outline"
|
|
||||||
size="sm"
|
|
||||||
className="mt-2"
|
|
||||||
onClick={() => handleQualityCheck(selectedBatch, selectedStageForUpdate)}
|
|
||||||
>
|
|
||||||
Realizar control de calidad
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
|
||||||
Notas de la etapa
|
|
||||||
</label>
|
|
||||||
<Input
|
|
||||||
as="textarea"
|
|
||||||
rows={3}
|
|
||||||
placeholder="Añadir observaciones o notas sobre esta etapa..."
|
|
||||||
value={stageNotes[`${selectedBatch.id}-${selectedStageForUpdate.id}`] || ''}
|
|
||||||
onChange={(e) => setStageNotes(prev => ({
|
|
||||||
...prev,
|
|
||||||
[`${selectedBatch.id}-${selectedStageForUpdate.id}`]: e.target.value,
|
|
||||||
}))}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex justify-end gap-2 pt-4">
|
|
||||||
<Button
|
|
||||||
variant="outline"
|
|
||||||
onClick={() => setIsStageModalOpen(false)}
|
|
||||||
>
|
|
||||||
Cerrar
|
|
||||||
</Button>
|
|
||||||
|
|
||||||
<Button
|
|
||||||
variant="primary"
|
|
||||||
onClick={() => {
|
|
||||||
const notes = stageNotes[`${selectedBatch.id}-${selectedStageForUpdate.id}`];
|
|
||||||
updateStage(selectedBatch.id, selectedStageForUpdate.id, notes);
|
|
||||||
setIsStageModalOpen(false);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Marcar como completado
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</Modal>
|
|
||||||
|
|
||||||
{/* Quick Stats */}
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
|
|
||||||
<Card className="p-4">
|
|
||||||
<div className="flex items-center justify-between">
|
|
||||||
<div>
|
|
||||||
<p className="text-sm text-gray-600">Lotes activos</p>
|
|
||||||
<p className="text-2xl font-bold text-blue-600">{batches.length}</p>
|
|
||||||
</div>
|
|
||||||
<span className="text-2xl">📊</span>
|
|
||||||
</div>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
<Card className="p-4">
|
|
||||||
<div className="flex items-center justify-between">
|
|
||||||
<div>
|
|
||||||
<p className="text-sm text-gray-600">Alertas activas</p>
|
|
||||||
<p className="text-2xl font-bold text-red-600">{alerts.length}</p>
|
|
||||||
</div>
|
|
||||||
<span className="text-2xl">🚨</span>
|
|
||||||
</div>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
<Card className="p-4">
|
|
||||||
<div className="flex items-center justify-between">
|
|
||||||
<div>
|
|
||||||
<p className="text-sm text-gray-600">En horneado</p>
|
|
||||||
<p className="text-2xl font-bold text-orange-600">3</p>
|
|
||||||
</div>
|
|
||||||
<span className="text-2xl">🔥</span>
|
|
||||||
</div>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
<Card className="p-4">
|
|
||||||
<div className="flex items-center justify-between">
|
|
||||||
<div>
|
|
||||||
<p className="text-sm text-gray-600">Completados hoy</p>
|
|
||||||
<p className="text-2xl font-bold text-green-600">12</p>
|
|
||||||
</div>
|
|
||||||
<span className="text-2xl">✅</span>
|
|
||||||
</div>
|
|
||||||
</Card>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default BatchTracker;
|
|
||||||
@@ -1 +0,0 @@
|
|||||||
export { default } from '../BatchTracker';
|
|
||||||
@@ -1,579 +0,0 @@
|
|||||||
import React, { useState, useCallback, useMemo } from 'react';
|
|
||||||
import { Card, Button, Badge, Select, DatePicker, Input, Modal, Table } from '../../ui';
|
|
||||||
import { productionService, type ProductionScheduleEntry, ProductionBatchStatus } from '../../../services/api/production.service';
|
|
||||||
import type { ProductionSchedule as ProductionScheduleType, ProductionBatch, EquipmentReservation, StaffAssignment } from '../../../types/production.types';
|
|
||||||
|
|
||||||
interface ProductionScheduleProps {
|
|
||||||
className?: string;
|
|
||||||
onBatchSelected?: (batch: ProductionBatch) => void;
|
|
||||||
onScheduleUpdate?: (schedule: ProductionScheduleEntry) => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface TimeSlot {
|
|
||||||
time: string;
|
|
||||||
capacity: number;
|
|
||||||
utilized: number;
|
|
||||||
available: number;
|
|
||||||
batches: ProductionScheduleEntry[];
|
|
||||||
}
|
|
||||||
|
|
||||||
interface CapacityResource {
|
|
||||||
id: string;
|
|
||||||
name: string;
|
|
||||||
type: 'oven' | 'mixer' | 'staff';
|
|
||||||
capacity: number;
|
|
||||||
slots: TimeSlot[];
|
|
||||||
}
|
|
||||||
|
|
||||||
const PRODUCT_TYPE_COLORS = {
|
|
||||||
pan: 'bg-[var(--color-warning)]/10 border-[var(--color-warning)]/20 text-[var(--color-warning)]',
|
|
||||||
bolleria: 'bg-[var(--color-primary)]/10 border-[var(--color-primary)]/20 text-[var(--color-primary)]',
|
|
||||||
reposteria: 'bg-[var(--color-error)]/10 border-[var(--color-error)]/20 text-[var(--color-error)]',
|
|
||||||
especial: 'bg-[var(--color-info)]/10 border-[var(--color-info)]/20 text-[var(--color-info)]',
|
|
||||||
};
|
|
||||||
|
|
||||||
const STATUS_COLORS = {
|
|
||||||
[ProductionBatchStatus.PLANNED]: 'bg-[var(--color-info)]/10 text-[var(--color-info)]',
|
|
||||||
[ProductionBatchStatus.IN_PROGRESS]: 'bg-[var(--color-warning)]/10 text-[var(--color-warning)]',
|
|
||||||
[ProductionBatchStatus.COMPLETED]: 'bg-[var(--color-success)]/10 text-[var(--color-success)]',
|
|
||||||
[ProductionBatchStatus.CANCELLED]: 'bg-[var(--color-error)]/10 text-[var(--color-error)]',
|
|
||||||
[ProductionBatchStatus.ON_HOLD]: 'bg-[var(--bg-tertiary)] text-[var(--text-secondary)]',
|
|
||||||
};
|
|
||||||
|
|
||||||
export const ProductionSchedule: React.FC<ProductionScheduleProps> = ({
|
|
||||||
className = '',
|
|
||||||
onBatchSelected,
|
|
||||||
onScheduleUpdate,
|
|
||||||
}) => {
|
|
||||||
const [scheduleEntries, setScheduleEntries] = useState<ProductionScheduleEntry[]>([]);
|
|
||||||
const [loading, setLoading] = useState(false);
|
|
||||||
const [selectedDate, setSelectedDate] = useState<Date>(new Date());
|
|
||||||
const [viewMode, setViewMode] = useState<'calendar' | 'timeline' | 'capacity'>('timeline');
|
|
||||||
const [filterStatus, setFilterStatus] = useState<ProductionBatchStatus | 'all'>('all');
|
|
||||||
const [filterProduct, setFilterProduct] = useState<string>('all');
|
|
||||||
const [draggedBatch, setDraggedBatch] = useState<ProductionScheduleEntry | null>(null);
|
|
||||||
const [isScheduleModalOpen, setIsScheduleModalOpen] = useState(false);
|
|
||||||
const [selectedBatchForScheduling, setSelectedBatchForScheduling] = useState<ProductionBatch | null>(null);
|
|
||||||
|
|
||||||
// Mock data for demonstration
|
|
||||||
const mockCapacityResources: CapacityResource[] = [
|
|
||||||
{
|
|
||||||
id: 'horno-1',
|
|
||||||
name: 'Horno Principal',
|
|
||||||
type: 'oven',
|
|
||||||
capacity: 4,
|
|
||||||
slots: generateTimeSlots('06:00', '20:00', 2),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'horno-2',
|
|
||||||
name: 'Horno Secundario',
|
|
||||||
type: 'oven',
|
|
||||||
capacity: 2,
|
|
||||||
slots: generateTimeSlots('06:00', '18:00', 2),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'amasadora-1',
|
|
||||||
name: 'Amasadora Industrial',
|
|
||||||
type: 'mixer',
|
|
||||||
capacity: 6,
|
|
||||||
slots: generateTimeSlots('05:00', '21:00', 1),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'panadero-1',
|
|
||||||
name: 'Equipo Panadería',
|
|
||||||
type: 'staff',
|
|
||||||
capacity: 8,
|
|
||||||
slots: generateTimeSlots('06:00', '14:00', 1),
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
function generateTimeSlots(startTime: string, endTime: string, intervalHours: number): TimeSlot[] {
|
|
||||||
const slots: TimeSlot[] = [];
|
|
||||||
const start = new Date(`2024-01-01 ${startTime}`);
|
|
||||||
const end = new Date(`2024-01-01 ${endTime}`);
|
|
||||||
|
|
||||||
while (start < end) {
|
|
||||||
const timeStr = start.toLocaleTimeString('es-ES', { hour: '2-digit', minute: '2-digit' });
|
|
||||||
slots.push({
|
|
||||||
time: timeStr,
|
|
||||||
capacity: 100,
|
|
||||||
utilized: Math.floor(Math.random() * 80),
|
|
||||||
available: 100 - Math.floor(Math.random() * 80),
|
|
||||||
batches: [],
|
|
||||||
});
|
|
||||||
start.setHours(start.getHours() + intervalHours);
|
|
||||||
}
|
|
||||||
|
|
||||||
return slots;
|
|
||||||
}
|
|
||||||
|
|
||||||
const loadSchedule = useCallback(async () => {
|
|
||||||
setLoading(true);
|
|
||||||
try {
|
|
||||||
const response = await productionService.getProductionSchedule({
|
|
||||||
start_date: selectedDate.toISOString().split('T')[0],
|
|
||||||
end_date: selectedDate.toISOString().split('T')[0],
|
|
||||||
});
|
|
||||||
|
|
||||||
if (response.success) {
|
|
||||||
setScheduleEntries(response.data || []);
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Error loading schedule:', error);
|
|
||||||
} finally {
|
|
||||||
setLoading(false);
|
|
||||||
}
|
|
||||||
}, [selectedDate]);
|
|
||||||
|
|
||||||
const filteredEntries = useMemo(() => {
|
|
||||||
return scheduleEntries.filter(entry => {
|
|
||||||
if (filterStatus !== 'all' && entry.batch?.status !== filterStatus) {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
if (filterProduct !== 'all' && entry.batch?.recipe?.category !== filterProduct) {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
return true;
|
|
||||||
});
|
|
||||||
}, [scheduleEntries, filterStatus, filterProduct]);
|
|
||||||
|
|
||||||
const handleDragStart = (e: React.DragEvent, entry: ProductionScheduleEntry) => {
|
|
||||||
setDraggedBatch(entry);
|
|
||||||
e.dataTransfer.effectAllowed = 'move';
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleDragOver = (e: React.DragEvent) => {
|
|
||||||
e.preventDefault();
|
|
||||||
e.dataTransfer.dropEffect = 'move';
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleDrop = async (e: React.DragEvent, newTime: string) => {
|
|
||||||
e.preventDefault();
|
|
||||||
|
|
||||||
if (!draggedBatch) return;
|
|
||||||
|
|
||||||
try {
|
|
||||||
const response = await productionService.updateScheduleEntry(draggedBatch.id, {
|
|
||||||
scheduled_start_time: newTime,
|
|
||||||
scheduled_end_time: calculateEndTime(newTime, draggedBatch.estimated_duration_minutes),
|
|
||||||
});
|
|
||||||
|
|
||||||
if (response.success && onScheduleUpdate) {
|
|
||||||
onScheduleUpdate(response.data);
|
|
||||||
await loadSchedule();
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Error updating schedule:', error);
|
|
||||||
} finally {
|
|
||||||
setDraggedBatch(null);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const calculateEndTime = (startTime: string, durationMinutes: number): string => {
|
|
||||||
const start = new Date(`2024-01-01 ${startTime}`);
|
|
||||||
start.setMinutes(start.getMinutes() + durationMinutes);
|
|
||||||
return start.toLocaleTimeString('es-ES', { hour: '2-digit', minute: '2-digit' });
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleScheduleBatch = async (scheduleData: {
|
|
||||||
batch_id: string;
|
|
||||||
scheduled_date: string;
|
|
||||||
scheduled_start_time: string;
|
|
||||||
scheduled_end_time: string;
|
|
||||||
equipment_reservations?: string[];
|
|
||||||
staff_assignments?: string[];
|
|
||||||
}) => {
|
|
||||||
try {
|
|
||||||
const response = await productionService.scheduleProductionBatch(scheduleData);
|
|
||||||
|
|
||||||
if (response.success && onScheduleUpdate) {
|
|
||||||
onScheduleUpdate(response.data);
|
|
||||||
await loadSchedule();
|
|
||||||
setIsScheduleModalOpen(false);
|
|
||||||
setSelectedBatchForScheduling(null);
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Error scheduling batch:', error);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const getProductTypeColor = (category?: string) => {
|
|
||||||
return PRODUCT_TYPE_COLORS[category as keyof typeof PRODUCT_TYPE_COLORS] || 'bg-[var(--bg-tertiary)] border-[var(--border-secondary)] text-[var(--text-secondary)]';
|
|
||||||
};
|
|
||||||
|
|
||||||
const getStatusColor = (status?: ProductionBatchStatus) => {
|
|
||||||
return STATUS_COLORS[status as keyof typeof STATUS_COLORS] || 'bg-[var(--bg-tertiary)] text-[var(--text-secondary)]';
|
|
||||||
};
|
|
||||||
|
|
||||||
const renderTimelineView = () => (
|
|
||||||
<div className="space-y-4">
|
|
||||||
<div className="flex gap-4 items-center mb-6">
|
|
||||||
<DatePicker
|
|
||||||
selected={selectedDate}
|
|
||||||
onChange={(date) => setSelectedDate(date || new Date())}
|
|
||||||
dateFormat="dd/MM/yyyy"
|
|
||||||
className="w-40"
|
|
||||||
/>
|
|
||||||
<Select
|
|
||||||
value={filterStatus}
|
|
||||||
onChange={(e) => setFilterStatus(e.target.value as ProductionBatchStatus | 'all')}
|
|
||||||
className="w-40"
|
|
||||||
>
|
|
||||||
<option value="all">Todos los estados</option>
|
|
||||||
<option value={ProductionBatchStatus.PLANNED}>Planificado</option>
|
|
||||||
<option value={ProductionBatchStatus.IN_PROGRESS}>En progreso</option>
|
|
||||||
<option value={ProductionBatchStatus.COMPLETED}>Completado</option>
|
|
||||||
</Select>
|
|
||||||
<Select
|
|
||||||
value={filterProduct}
|
|
||||||
onChange={(e) => setFilterProduct(e.target.value)}
|
|
||||||
className="w-40"
|
|
||||||
>
|
|
||||||
<option value="all">Todos los productos</option>
|
|
||||||
<option value="pan">Pan</option>
|
|
||||||
<option value="bolleria">Bollería</option>
|
|
||||||
<option value="reposteria">Repostería</option>
|
|
||||||
</Select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="bg-white rounded-lg border">
|
|
||||||
<div className="grid grid-cols-25 gap-1 p-4 bg-[var(--bg-secondary)] text-xs font-medium text-[var(--text-tertiary)] border-b">
|
|
||||||
<div className="col-span-3">Producto</div>
|
|
||||||
{Array.from({ length: 22 }, (_, i) => (
|
|
||||||
<div key={i} className="text-center">
|
|
||||||
{String(i + 3).padStart(2, '0')}:00
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="divide-y">
|
|
||||||
{filteredEntries.map((entry) => (
|
|
||||||
<div
|
|
||||||
key={entry.id}
|
|
||||||
className="grid grid-cols-25 gap-1 p-2 hover:bg-[var(--bg-secondary)]"
|
|
||||||
>
|
|
||||||
<div className="col-span-3 flex items-center space-x-2">
|
|
||||||
<div className="flex flex-col">
|
|
||||||
<span className="font-medium text-sm">{entry.batch?.recipe?.name}</span>
|
|
||||||
<Badge className={`text-xs ${getStatusColor(entry.batch?.status)}`}>
|
|
||||||
{entry.batch?.status === ProductionBatchStatus.PLANNED && 'Planificado'}
|
|
||||||
{entry.batch?.status === ProductionBatchStatus.IN_PROGRESS && 'En progreso'}
|
|
||||||
{entry.batch?.status === ProductionBatchStatus.COMPLETED && 'Completado'}
|
|
||||||
</Badge>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{Array.from({ length: 22 }, (_, hourIndex) => {
|
|
||||||
const hour = hourIndex + 3;
|
|
||||||
const hourStr = `${String(hour).padStart(2, '0')}:00`;
|
|
||||||
const startHour = parseInt(entry.scheduled_start_time.split(':')[0]);
|
|
||||||
const endHour = parseInt(entry.scheduled_end_time.split(':')[0]);
|
|
||||||
|
|
||||||
const isInRange = hour >= startHour && hour < endHour;
|
|
||||||
const isStart = hour === startHour;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
key={hourIndex}
|
|
||||||
className={`h-12 border border-[var(--border-primary)] ${isInRange ? getProductTypeColor(entry.batch?.recipe?.category) : ''}`}
|
|
||||||
onDragOver={handleDragOver}
|
|
||||||
onDrop={(e) => handleDrop(e, hourStr)}
|
|
||||||
>
|
|
||||||
{isStart && (
|
|
||||||
<div
|
|
||||||
className={`h-full w-full rounded px-1 py-1 cursor-move ${getProductTypeColor(entry.batch?.recipe?.category)} border-l-4 border-blue-500`}
|
|
||||||
draggable
|
|
||||||
onDragStart={(e) => handleDragStart(e, entry)}
|
|
||||||
onClick={() => onBatchSelected?.(entry.batch!)}
|
|
||||||
>
|
|
||||||
<div className="text-xs font-medium truncate">
|
|
||||||
{entry.batch?.recipe?.name}
|
|
||||||
</div>
|
|
||||||
<div className="text-xs text-[var(--text-secondary)]">
|
|
||||||
{entry.batch?.planned_quantity} uds
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
|
|
||||||
const renderCapacityView = () => (
|
|
||||||
<div className="space-y-6">
|
|
||||||
<div className="flex gap-4 items-center mb-6">
|
|
||||||
<DatePicker
|
|
||||||
selected={selectedDate}
|
|
||||||
onChange={(date) => setSelectedDate(date || new Date())}
|
|
||||||
dateFormat="dd/MM/yyyy"
|
|
||||||
className="w-40"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
|
||||||
{mockCapacityResources.map((resource) => (
|
|
||||||
<Card key={resource.id} className="p-4">
|
|
||||||
<div className="flex items-center justify-between mb-4">
|
|
||||||
<div>
|
|
||||||
<h3 className="font-semibold text-lg">{resource.name}</h3>
|
|
||||||
<p className="text-sm text-[var(--text-secondary)]">
|
|
||||||
{resource.type === 'oven' && 'Horno'}
|
|
||||||
{resource.type === 'mixer' && 'Amasadora'}
|
|
||||||
{resource.type === 'staff' && 'Personal'}
|
|
||||||
- Capacidad: {resource.capacity}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<Badge className="bg-[var(--color-info)]/10 text-[var(--color-info)]">
|
|
||||||
{Math.round(resource.slots.reduce((acc, slot) => acc + slot.utilized, 0) / resource.slots.length)}% utilizado
|
|
||||||
</Badge>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="space-y-2">
|
|
||||||
{resource.slots.slice(0, 8).map((slot, index) => (
|
|
||||||
<div key={index} className="flex items-center gap-3">
|
|
||||||
<span className="text-sm font-mono w-16">{slot.time}</span>
|
|
||||||
<div className="flex-1 h-6 bg-[var(--bg-quaternary)] rounded-full overflow-hidden">
|
|
||||||
<div
|
|
||||||
className={`h-full ${
|
|
||||||
slot.utilized > 80
|
|
||||||
? 'bg-[var(--color-error)]'
|
|
||||||
: slot.utilized > 60
|
|
||||||
? 'bg-yellow-500'
|
|
||||||
: 'bg-[var(--color-success)]'
|
|
||||||
}`}
|
|
||||||
style={{ width: `${slot.utilized}%` }}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<span className="text-sm text-[var(--text-secondary)] w-12">
|
|
||||||
{slot.utilized}%
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<Button
|
|
||||||
variant="outline"
|
|
||||||
size="sm"
|
|
||||||
className="mt-4 w-full"
|
|
||||||
onClick={() => {
|
|
||||||
// Open detailed capacity view
|
|
||||||
console.log('Open detailed view for', resource.name);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Ver detalles completos
|
|
||||||
</Button>
|
|
||||||
</Card>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
|
|
||||||
const renderCalendarView = () => (
|
|
||||||
<div className="bg-white rounded-lg border p-4">
|
|
||||||
<div className="grid grid-cols-7 gap-4 mb-4">
|
|
||||||
{['Lun', 'Mar', 'Mié', 'Jue', 'Vie', 'Sáb', 'Dom'].map((day) => (
|
|
||||||
<div key={day} className="text-center font-semibold text-[var(--text-secondary)] py-2">
|
|
||||||
{day}
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="grid grid-cols-7 gap-4">
|
|
||||||
{Array.from({ length: 35 }, (_, i) => {
|
|
||||||
const date = new Date(selectedDate);
|
|
||||||
date.setDate(date.getDate() - date.getDay() + i);
|
|
||||||
const dayEntries = filteredEntries.filter(entry =>
|
|
||||||
new Date(entry.scheduled_date).toDateString() === date.toDateString()
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
key={i}
|
|
||||||
className={`min-h-24 p-2 border rounded-lg ${
|
|
||||||
date.toDateString() === selectedDate.toDateString()
|
|
||||||
? 'bg-[var(--color-info)]/5 border-[var(--color-info)]/20'
|
|
||||||
: 'bg-[var(--bg-secondary)] border-[var(--border-primary)]'
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
<div className="text-sm font-medium mb-1">{date.getDate()}</div>
|
|
||||||
<div className="space-y-1">
|
|
||||||
{dayEntries.slice(0, 3).map((entry) => (
|
|
||||||
<div
|
|
||||||
key={entry.id}
|
|
||||||
className={`text-xs p-1 rounded cursor-pointer ${getProductTypeColor(entry.batch?.recipe?.category)}`}
|
|
||||||
onClick={() => onBatchSelected?.(entry.batch!)}
|
|
||||||
>
|
|
||||||
{entry.batch?.recipe?.name}
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
{dayEntries.length > 3 && (
|
|
||||||
<div className="text-xs text-[var(--text-tertiary)]">
|
|
||||||
+{dayEntries.length - 3} más
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className={`space-y-6 ${className}`}>
|
|
||||||
<div className="flex justify-between items-center">
|
|
||||||
<div>
|
|
||||||
<h2 className="text-2xl font-bold text-[var(--text-primary)]">Programación de Producción</h2>
|
|
||||||
<p className="text-[var(--text-secondary)]">Gestiona y programa la producción diaria de la panadería</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex gap-2">
|
|
||||||
<div className="flex bg-gray-100 rounded-lg p-1">
|
|
||||||
<Button
|
|
||||||
variant={viewMode === 'calendar' ? 'primary' : 'ghost'}
|
|
||||||
size="sm"
|
|
||||||
onClick={() => setViewMode('calendar')}
|
|
||||||
className="px-3"
|
|
||||||
>
|
|
||||||
Calendario
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
variant={viewMode === 'timeline' ? 'primary' : 'ghost'}
|
|
||||||
size="sm"
|
|
||||||
onClick={() => setViewMode('timeline')}
|
|
||||||
className="px-3"
|
|
||||||
>
|
|
||||||
Línea de tiempo
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
variant={viewMode === 'capacity' ? 'primary' : 'ghost'}
|
|
||||||
size="sm"
|
|
||||||
onClick={() => setViewMode('capacity')}
|
|
||||||
className="px-3"
|
|
||||||
>
|
|
||||||
Capacidad
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<Button
|
|
||||||
variant="primary"
|
|
||||||
onClick={() => setIsScheduleModalOpen(true)}
|
|
||||||
>
|
|
||||||
Nueva programación
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{loading ? (
|
|
||||||
<div className="flex justify-center items-center h-64">
|
|
||||||
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<>
|
|
||||||
{viewMode === 'calendar' && renderCalendarView()}
|
|
||||||
{viewMode === 'timeline' && renderTimelineView()}
|
|
||||||
{viewMode === 'capacity' && renderCapacityView()}
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Schedule Creation Modal */}
|
|
||||||
<Modal
|
|
||||||
isOpen={isScheduleModalOpen}
|
|
||||||
onClose={() => {
|
|
||||||
setIsScheduleModalOpen(false);
|
|
||||||
setSelectedBatchForScheduling(null);
|
|
||||||
}}
|
|
||||||
title="Programar Lote de Producción"
|
|
||||||
>
|
|
||||||
<div className="space-y-4">
|
|
||||||
<Select className="w-full">
|
|
||||||
<option value="">Seleccionar lote...</option>
|
|
||||||
<option value="batch-1">Lote #001 - Pan de Molde (100 uds)</option>
|
|
||||||
<option value="batch-2">Lote #002 - Croissants (50 uds)</option>
|
|
||||||
<option value="batch-3">Lote #003 - Tarta de Chocolate (5 uds)</option>
|
|
||||||
</Select>
|
|
||||||
|
|
||||||
<div className="grid grid-cols-2 gap-4">
|
|
||||||
<DatePicker
|
|
||||||
selected={selectedDate}
|
|
||||||
onChange={(date) => setSelectedDate(date || new Date())}
|
|
||||||
dateFormat="dd/MM/yyyy"
|
|
||||||
/>
|
|
||||||
<Input
|
|
||||||
type="time"
|
|
||||||
placeholder="Hora de inicio"
|
|
||||||
defaultValue="06:00"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="grid grid-cols-2 gap-4">
|
|
||||||
<Input
|
|
||||||
type="number"
|
|
||||||
placeholder="Duración (horas)"
|
|
||||||
defaultValue="4"
|
|
||||||
/>
|
|
||||||
<Select>
|
|
||||||
<option value="">Asignar horno...</option>
|
|
||||||
<option value="horno-1">Horno Principal</option>
|
|
||||||
<option value="horno-2">Horno Secundario</option>
|
|
||||||
</Select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<Select>
|
|
||||||
<option value="">Asignar personal...</option>
|
|
||||||
<option value="panadero-1">Equipo Panadería - Turno Mañana</option>
|
|
||||||
<option value="panadero-2">Equipo Panadería - Turno Tarde</option>
|
|
||||||
</Select>
|
|
||||||
|
|
||||||
<div className="flex justify-end gap-2 pt-4">
|
|
||||||
<Button
|
|
||||||
variant="outline"
|
|
||||||
onClick={() => setIsScheduleModalOpen(false)}
|
|
||||||
>
|
|
||||||
Cancelar
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
variant="primary"
|
|
||||||
onClick={() => {
|
|
||||||
// Handle schedule creation
|
|
||||||
setIsScheduleModalOpen(false);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Programar lote
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Modal>
|
|
||||||
|
|
||||||
{/* Legend */}
|
|
||||||
<Card className="p-4">
|
|
||||||
<h3 className="font-semibold mb-3">Leyenda de productos</h3>
|
|
||||||
<div className="flex flex-wrap gap-4">
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<div className="w-4 h-4 bg-[var(--color-warning)]/10 border border-[var(--color-warning)]/20 rounded"></div>
|
|
||||||
<span className="text-sm">Pan</span>
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<div className="w-4 h-4 bg-[var(--color-primary)]/10 border border-[var(--color-primary)]/20 rounded"></div>
|
|
||||||
<span className="text-sm">Bollería</span>
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<div className="w-4 h-4 bg-pink-100 border border-pink-300 rounded"></div>
|
|
||||||
<span className="text-sm">Repostería</span>
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<div className="w-4 h-4 bg-purple-100 border border-purple-300 rounded"></div>
|
|
||||||
<span className="text-sm">Especial</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Card>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default ProductionSchedule;
|
|
||||||
@@ -1 +0,0 @@
|
|||||||
export { default } from '../ProductionSchedule';
|
|
||||||
@@ -1,882 +0,0 @@
|
|||||||
import React, { useState, useCallback, useRef } from 'react';
|
|
||||||
import { Card, Button, Badge, Input, Modal, Table, Select, DatePicker } from '../../ui';
|
|
||||||
import { productionService, type QualityCheckResponse, QualityCheckStatus } from '../../../services/api/production.service';
|
|
||||||
import type { QualityCheck, QualityCheckCriteria, ProductionBatch, QualityCheckType } from '../../../types/production.types';
|
|
||||||
|
|
||||||
interface QualityControlProps {
|
|
||||||
className?: string;
|
|
||||||
batchId?: string;
|
|
||||||
checkType?: QualityCheckType;
|
|
||||||
onQualityCheckCompleted?: (result: QualityCheck) => void;
|
|
||||||
onCorrectiveActionRequired?: (check: QualityCheck, actions: string[]) => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface QualityCheckTemplate {
|
|
||||||
id: string;
|
|
||||||
name: string;
|
|
||||||
spanishName: string;
|
|
||||||
productTypes: string[];
|
|
||||||
criteria: QualityChecklistItem[];
|
|
||||||
requiresPhotos: boolean;
|
|
||||||
passThreshold: number;
|
|
||||||
criticalPoints: string[];
|
|
||||||
}
|
|
||||||
|
|
||||||
interface QualityChecklistItem {
|
|
||||||
id: string;
|
|
||||||
category: string;
|
|
||||||
description: string;
|
|
||||||
spanishDescription: string;
|
|
||||||
type: 'boolean' | 'numeric' | 'scale' | 'text';
|
|
||||||
required: boolean;
|
|
||||||
minValue?: number;
|
|
||||||
maxValue?: number;
|
|
||||||
unit?: string;
|
|
||||||
acceptableCriteria?: string;
|
|
||||||
weight: number;
|
|
||||||
isCritical: boolean;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface QualityInspectionResult {
|
|
||||||
checklistId: string;
|
|
||||||
value: string | number | boolean;
|
|
||||||
notes?: string;
|
|
||||||
photo?: File;
|
|
||||||
timestamp: string;
|
|
||||||
inspector: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
const QUALITY_CHECK_TEMPLATES: Record<string, QualityCheckTemplate> = {
|
|
||||||
visual_inspection: {
|
|
||||||
id: 'visual_inspection',
|
|
||||||
name: 'Visual Inspection',
|
|
||||||
spanishName: 'Inspección Visual',
|
|
||||||
productTypes: ['pan', 'bolleria', 'reposteria'],
|
|
||||||
requiresPhotos: true,
|
|
||||||
passThreshold: 80,
|
|
||||||
criticalPoints: ['color_defects', 'structural_defects'],
|
|
||||||
criteria: [
|
|
||||||
{
|
|
||||||
id: 'color_uniformity',
|
|
||||||
category: 'appearance',
|
|
||||||
description: 'Color uniformity',
|
|
||||||
spanishDescription: 'Uniformidad del color',
|
|
||||||
type: 'scale',
|
|
||||||
required: true,
|
|
||||||
minValue: 1,
|
|
||||||
maxValue: 5,
|
|
||||||
acceptableCriteria: 'Score 3 or higher',
|
|
||||||
weight: 20,
|
|
||||||
isCritical: false,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'surface_texture',
|
|
||||||
category: 'appearance',
|
|
||||||
description: 'Surface texture quality',
|
|
||||||
spanishDescription: 'Calidad de la textura superficial',
|
|
||||||
type: 'scale',
|
|
||||||
required: true,
|
|
||||||
minValue: 1,
|
|
||||||
maxValue: 5,
|
|
||||||
acceptableCriteria: 'Score 3 or higher',
|
|
||||||
weight: 15,
|
|
||||||
isCritical: false,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'shape_integrity',
|
|
||||||
category: 'structure',
|
|
||||||
description: 'Shape and form integrity',
|
|
||||||
spanishDescription: 'Integridad de forma y estructura',
|
|
||||||
type: 'boolean',
|
|
||||||
required: true,
|
|
||||||
acceptableCriteria: 'Must be true',
|
|
||||||
weight: 25,
|
|
||||||
isCritical: true,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'size_consistency',
|
|
||||||
category: 'dimensions',
|
|
||||||
description: 'Size consistency within batch',
|
|
||||||
spanishDescription: 'Consistencia de tamaño en el lote',
|
|
||||||
type: 'scale',
|
|
||||||
required: true,
|
|
||||||
minValue: 1,
|
|
||||||
maxValue: 5,
|
|
||||||
acceptableCriteria: 'Score 3 or higher',
|
|
||||||
weight: 20,
|
|
||||||
isCritical: false,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'defects_presence',
|
|
||||||
category: 'defects',
|
|
||||||
description: 'Visible defects or imperfections',
|
|
||||||
spanishDescription: 'Defectos visibles o imperfecciones',
|
|
||||||
type: 'boolean',
|
|
||||||
required: true,
|
|
||||||
acceptableCriteria: 'Must be false',
|
|
||||||
weight: 20,
|
|
||||||
isCritical: true,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
weight_check: {
|
|
||||||
id: 'weight_check',
|
|
||||||
name: 'Weight Check',
|
|
||||||
spanishName: 'Control de Peso',
|
|
||||||
productTypes: ['pan', 'bolleria', 'reposteria'],
|
|
||||||
requiresPhotos: false,
|
|
||||||
passThreshold: 95,
|
|
||||||
criticalPoints: ['weight_variance'],
|
|
||||||
criteria: [
|
|
||||||
{
|
|
||||||
id: 'individual_weight',
|
|
||||||
category: 'weight',
|
|
||||||
description: 'Individual piece weight',
|
|
||||||
spanishDescription: 'Peso individual de la pieza',
|
|
||||||
type: 'numeric',
|
|
||||||
required: true,
|
|
||||||
minValue: 0,
|
|
||||||
unit: 'g',
|
|
||||||
acceptableCriteria: 'Within ±5% of target',
|
|
||||||
weight: 40,
|
|
||||||
isCritical: true,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'batch_average_weight',
|
|
||||||
category: 'weight',
|
|
||||||
description: 'Batch average weight',
|
|
||||||
spanishDescription: 'Peso promedio del lote',
|
|
||||||
type: 'numeric',
|
|
||||||
required: true,
|
|
||||||
minValue: 0,
|
|
||||||
unit: 'g',
|
|
||||||
acceptableCriteria: 'Within ±3% of target',
|
|
||||||
weight: 30,
|
|
||||||
isCritical: true,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'weight_variance',
|
|
||||||
category: 'consistency',
|
|
||||||
description: 'Weight variance within batch',
|
|
||||||
spanishDescription: 'Variación de peso dentro del lote',
|
|
||||||
type: 'numeric',
|
|
||||||
required: true,
|
|
||||||
minValue: 0,
|
|
||||||
unit: '%',
|
|
||||||
acceptableCriteria: 'Less than 5%',
|
|
||||||
weight: 30,
|
|
||||||
isCritical: true,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
temperature_check: {
|
|
||||||
id: 'temperature_check',
|
|
||||||
name: 'Temperature Check',
|
|
||||||
spanishName: 'Control de Temperatura',
|
|
||||||
productTypes: ['pan', 'bolleria'],
|
|
||||||
requiresPhotos: false,
|
|
||||||
passThreshold: 90,
|
|
||||||
criticalPoints: ['core_temperature'],
|
|
||||||
criteria: [
|
|
||||||
{
|
|
||||||
id: 'core_temperature',
|
|
||||||
category: 'temperature',
|
|
||||||
description: 'Core temperature',
|
|
||||||
spanishDescription: 'Temperatura del núcleo',
|
|
||||||
type: 'numeric',
|
|
||||||
required: true,
|
|
||||||
minValue: 85,
|
|
||||||
maxValue: 98,
|
|
||||||
unit: '°C',
|
|
||||||
acceptableCriteria: '88-95°C',
|
|
||||||
weight: 60,
|
|
||||||
isCritical: true,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'cooling_temperature',
|
|
||||||
category: 'temperature',
|
|
||||||
description: 'Cooling temperature',
|
|
||||||
spanishDescription: 'Temperatura de enfriado',
|
|
||||||
type: 'numeric',
|
|
||||||
required: false,
|
|
||||||
minValue: 18,
|
|
||||||
maxValue: 25,
|
|
||||||
unit: '°C',
|
|
||||||
acceptableCriteria: '20-23°C',
|
|
||||||
weight: 40,
|
|
||||||
isCritical: false,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
packaging_quality: {
|
|
||||||
id: 'packaging_quality',
|
|
||||||
name: 'Packaging Quality',
|
|
||||||
spanishName: 'Calidad del Empaquetado',
|
|
||||||
productTypes: ['pan', 'bolleria', 'reposteria'],
|
|
||||||
requiresPhotos: true,
|
|
||||||
passThreshold: 85,
|
|
||||||
criticalPoints: ['seal_integrity', 'labeling_accuracy'],
|
|
||||||
criteria: [
|
|
||||||
{
|
|
||||||
id: 'seal_integrity',
|
|
||||||
category: 'packaging',
|
|
||||||
description: 'Package seal integrity',
|
|
||||||
spanishDescription: 'Integridad del sellado del envase',
|
|
||||||
type: 'boolean',
|
|
||||||
required: true,
|
|
||||||
acceptableCriteria: 'Must be true',
|
|
||||||
weight: 30,
|
|
||||||
isCritical: true,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'labeling_accuracy',
|
|
||||||
category: 'labeling',
|
|
||||||
description: 'Label accuracy and placement',
|
|
||||||
spanishDescription: 'Precisión y colocación de etiquetas',
|
|
||||||
type: 'scale',
|
|
||||||
required: true,
|
|
||||||
minValue: 1,
|
|
||||||
maxValue: 5,
|
|
||||||
acceptableCriteria: 'Score 4 or higher',
|
|
||||||
weight: 25,
|
|
||||||
isCritical: true,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'package_appearance',
|
|
||||||
category: 'appearance',
|
|
||||||
description: 'Overall package appearance',
|
|
||||||
spanishDescription: 'Apariencia general del envase',
|
|
||||||
type: 'scale',
|
|
||||||
required: true,
|
|
||||||
minValue: 1,
|
|
||||||
maxValue: 5,
|
|
||||||
acceptableCriteria: 'Score 3 or higher',
|
|
||||||
weight: 20,
|
|
||||||
isCritical: false,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'barcode_readability',
|
|
||||||
category: 'labeling',
|
|
||||||
description: 'Barcode readability',
|
|
||||||
spanishDescription: 'Legibilidad del código de barras',
|
|
||||||
type: 'boolean',
|
|
||||||
required: true,
|
|
||||||
acceptableCriteria: 'Must be true',
|
|
||||||
weight: 25,
|
|
||||||
isCritical: false,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
const STATUS_COLORS = {
|
|
||||||
[QualityCheckStatus.SCHEDULED]: 'bg-blue-100 text-blue-800',
|
|
||||||
[QualityCheckStatus.IN_PROGRESS]: 'bg-yellow-100 text-yellow-800',
|
|
||||||
[QualityCheckStatus.PASSED]: 'bg-green-100 text-green-800',
|
|
||||||
[QualityCheckStatus.FAILED]: 'bg-red-100 text-red-800',
|
|
||||||
[QualityCheckStatus.REQUIRES_REVIEW]: 'bg-orange-100 text-orange-800',
|
|
||||||
[QualityCheckStatus.CANCELLED]: 'bg-gray-100 text-gray-800',
|
|
||||||
};
|
|
||||||
|
|
||||||
export const QualityControl: React.FC<QualityControlProps> = ({
|
|
||||||
className = '',
|
|
||||||
batchId,
|
|
||||||
checkType,
|
|
||||||
onQualityCheckCompleted,
|
|
||||||
onCorrectiveActionRequired,
|
|
||||||
}) => {
|
|
||||||
const [qualityChecks, setQualityChecks] = useState<QualityCheckResponse[]>([]);
|
|
||||||
const [selectedTemplate, setSelectedTemplate] = useState<QualityCheckTemplate | null>(null);
|
|
||||||
const [activeCheck, setActiveCheck] = useState<QualityCheck | null>(null);
|
|
||||||
const [inspectionResults, setInspectionResults] = useState<Record<string, QualityInspectionResult>>({});
|
|
||||||
const [loading, setLoading] = useState(false);
|
|
||||||
const [isInspectionModalOpen, setIsInspectionModalOpen] = useState(false);
|
|
||||||
const [uploadedPhotos, setUploadedPhotos] = useState<Record<string, File>>({});
|
|
||||||
const [currentInspector, setCurrentInspector] = useState<string>('inspector-1');
|
|
||||||
const fileInputRef = useRef<HTMLInputElement>(null);
|
|
||||||
|
|
||||||
const loadQualityChecks = useCallback(async () => {
|
|
||||||
setLoading(true);
|
|
||||||
try {
|
|
||||||
const params: any = {};
|
|
||||||
if (batchId) params.batch_id = batchId;
|
|
||||||
if (checkType) params.check_type = checkType;
|
|
||||||
|
|
||||||
const response = await productionService.getQualityChecks(params);
|
|
||||||
|
|
||||||
if (response.success && response.data) {
|
|
||||||
setQualityChecks(response.data.items || []);
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Error loading quality checks:', error);
|
|
||||||
} finally {
|
|
||||||
setLoading(false);
|
|
||||||
}
|
|
||||||
}, [batchId, checkType]);
|
|
||||||
|
|
||||||
const startQualityCheck = (template: QualityCheckTemplate, batch?: any) => {
|
|
||||||
setSelectedTemplate(template);
|
|
||||||
setInspectionResults({});
|
|
||||||
setUploadedPhotos({});
|
|
||||||
setIsInspectionModalOpen(true);
|
|
||||||
|
|
||||||
// Initialize empty results for all criteria
|
|
||||||
template.criteria.forEach(criterion => {
|
|
||||||
setInspectionResults(prev => ({
|
|
||||||
...prev,
|
|
||||||
[criterion.id]: {
|
|
||||||
checklistId: criterion.id,
|
|
||||||
value: criterion.type === 'boolean' ? false : criterion.type === 'numeric' ? 0 : '',
|
|
||||||
timestamp: new Date().toISOString(),
|
|
||||||
inspector: currentInspector,
|
|
||||||
}
|
|
||||||
}));
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const updateInspectionResult = (criterionId: string, value: string | number | boolean, notes?: string) => {
|
|
||||||
setInspectionResults(prev => ({
|
|
||||||
...prev,
|
|
||||||
[criterionId]: {
|
|
||||||
...prev[criterionId],
|
|
||||||
value,
|
|
||||||
notes,
|
|
||||||
timestamp: new Date().toISOString(),
|
|
||||||
}
|
|
||||||
}));
|
|
||||||
};
|
|
||||||
|
|
||||||
const handlePhotoUpload = (criterionId: string, file: File) => {
|
|
||||||
setUploadedPhotos(prev => ({
|
|
||||||
...prev,
|
|
||||||
[criterionId]: file,
|
|
||||||
}));
|
|
||||||
|
|
||||||
// Update inspection result with photo reference
|
|
||||||
setInspectionResults(prev => ({
|
|
||||||
...prev,
|
|
||||||
[criterionId]: {
|
|
||||||
...prev[criterionId],
|
|
||||||
photo: file,
|
|
||||||
}
|
|
||||||
}));
|
|
||||||
};
|
|
||||||
|
|
||||||
const calculateOverallScore = (): number => {
|
|
||||||
if (!selectedTemplate) return 0;
|
|
||||||
|
|
||||||
let totalScore = 0;
|
|
||||||
let totalWeight = 0;
|
|
||||||
|
|
||||||
selectedTemplate.criteria.forEach(criterion => {
|
|
||||||
const result = inspectionResults[criterion.id];
|
|
||||||
if (result) {
|
|
||||||
let score = 0;
|
|
||||||
|
|
||||||
if (criterion.type === 'boolean') {
|
|
||||||
score = result.value ? 100 : 0;
|
|
||||||
} else if (criterion.type === 'scale') {
|
|
||||||
const numValue = Number(result.value);
|
|
||||||
score = (numValue / (criterion.maxValue || 5)) * 100;
|
|
||||||
} else if (criterion.type === 'numeric') {
|
|
||||||
// For numeric values, assume pass/fail based on acceptable range
|
|
||||||
score = 100; // Simplified - would need more complex logic
|
|
||||||
}
|
|
||||||
|
|
||||||
totalScore += score * criterion.weight;
|
|
||||||
totalWeight += criterion.weight;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
return totalWeight > 0 ? totalScore / totalWeight : 0;
|
|
||||||
};
|
|
||||||
|
|
||||||
const checkCriticalFailures = (): string[] => {
|
|
||||||
if (!selectedTemplate) return [];
|
|
||||||
|
|
||||||
const failures: string[] = [];
|
|
||||||
|
|
||||||
selectedTemplate.criteria.forEach(criterion => {
|
|
||||||
if (criterion.isCritical) {
|
|
||||||
const result = inspectionResults[criterion.id];
|
|
||||||
if (result) {
|
|
||||||
if (criterion.type === 'boolean' && !result.value) {
|
|
||||||
failures.push(criterion.spanishDescription);
|
|
||||||
} else if (criterion.type === 'scale' && Number(result.value) < 3) {
|
|
||||||
failures.push(criterion.spanishDescription);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
return failures;
|
|
||||||
};
|
|
||||||
|
|
||||||
const completeQualityCheck = async () => {
|
|
||||||
if (!selectedTemplate) return;
|
|
||||||
|
|
||||||
const overallScore = calculateOverallScore();
|
|
||||||
const criticalFailures = checkCriticalFailures();
|
|
||||||
const passed = overallScore >= selectedTemplate.passThreshold && criticalFailures.length === 0;
|
|
||||||
|
|
||||||
const checkData = {
|
|
||||||
status: passed ? QualityCheckStatus.PASSED : QualityCheckStatus.FAILED,
|
|
||||||
results: {
|
|
||||||
overallScore,
|
|
||||||
criticalFailures,
|
|
||||||
individualResults: inspectionResults,
|
|
||||||
photos: Object.keys(uploadedPhotos),
|
|
||||||
},
|
|
||||||
notes: `Inspección completada. Puntuación: ${overallScore.toFixed(1)}%`,
|
|
||||||
corrective_actions: criticalFailures.length > 0 ? [
|
|
||||||
`Fallas críticas encontradas: ${criticalFailures.join(', ')}`,
|
|
||||||
'Revisar proceso de producción',
|
|
||||||
'Re-entrenar personal si es necesario'
|
|
||||||
] : undefined,
|
|
||||||
};
|
|
||||||
|
|
||||||
try {
|
|
||||||
// This would be the actual check ID from the created quality check
|
|
||||||
const mockCheckId = 'check-id';
|
|
||||||
const response = await productionService.completeQualityCheck(mockCheckId, checkData);
|
|
||||||
|
|
||||||
if (response.success) {
|
|
||||||
if (onQualityCheckCompleted) {
|
|
||||||
onQualityCheckCompleted(response.data as unknown as QualityCheck);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!passed && checkData.corrective_actions && onCorrectiveActionRequired) {
|
|
||||||
onCorrectiveActionRequired(response.data as unknown as QualityCheck, checkData.corrective_actions);
|
|
||||||
}
|
|
||||||
|
|
||||||
setIsInspectionModalOpen(false);
|
|
||||||
setSelectedTemplate(null);
|
|
||||||
await loadQualityChecks();
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Error completing quality check:', error);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const renderInspectionForm = () => {
|
|
||||||
if (!selectedTemplate) return null;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="space-y-6">
|
|
||||||
<div className="bg-blue-50 border border-blue-200 p-4 rounded-lg">
|
|
||||||
<h3 className="font-semibold text-blue-900 mb-2">{selectedTemplate.spanishName}</h3>
|
|
||||||
<p className="text-sm text-blue-700">
|
|
||||||
Umbral de aprobación: {selectedTemplate.passThreshold}%
|
|
||||||
</p>
|
|
||||||
{selectedTemplate.criticalPoints.length > 0 && (
|
|
||||||
<p className="text-sm text-blue-700 mt-1">
|
|
||||||
Puntos críticos: {selectedTemplate.criticalPoints.length}
|
|
||||||
</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="space-y-4">
|
|
||||||
{selectedTemplate.criteria.map((criterion) => (
|
|
||||||
<Card key={criterion.id} className={`p-4 ${criterion.isCritical ? 'border-orange-200 bg-orange-50' : ''}`}>
|
|
||||||
<div className="flex justify-between items-start mb-3">
|
|
||||||
<div className="flex-1">
|
|
||||||
<h4 className="font-medium text-gray-900">{criterion.spanishDescription}</h4>
|
|
||||||
<p className="text-sm text-gray-600 mt-1">{criterion.acceptableCriteria}</p>
|
|
||||||
{criterion.isCritical && (
|
|
||||||
<Badge className="bg-orange-100 text-orange-800 text-xs mt-1">
|
|
||||||
Punto Crítico
|
|
||||||
</Badge>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<span className="text-sm text-gray-500">Peso: {criterion.weight}%</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="space-y-3">
|
|
||||||
{criterion.type === 'boolean' && (
|
|
||||||
<div className="flex gap-4">
|
|
||||||
<label className="flex items-center">
|
|
||||||
<input
|
|
||||||
type="radio"
|
|
||||||
name={criterion.id}
|
|
||||||
value="true"
|
|
||||||
checked={inspectionResults[criterion.id]?.value === true}
|
|
||||||
onChange={() => updateInspectionResult(criterion.id, true)}
|
|
||||||
className="mr-2"
|
|
||||||
/>
|
|
||||||
Sí / Pasa
|
|
||||||
</label>
|
|
||||||
<label className="flex items-center">
|
|
||||||
<input
|
|
||||||
type="radio"
|
|
||||||
name={criterion.id}
|
|
||||||
value="false"
|
|
||||||
checked={inspectionResults[criterion.id]?.value === false}
|
|
||||||
onChange={() => updateInspectionResult(criterion.id, false)}
|
|
||||||
className="mr-2"
|
|
||||||
/>
|
|
||||||
No / Falla
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{criterion.type === 'scale' && (
|
|
||||||
<div className="flex items-center gap-4">
|
|
||||||
<span className="text-sm">1</span>
|
|
||||||
<input
|
|
||||||
type="range"
|
|
||||||
min={criterion.minValue || 1}
|
|
||||||
max={criterion.maxValue || 5}
|
|
||||||
step="1"
|
|
||||||
value={inspectionResults[criterion.id]?.value || criterion.minValue || 1}
|
|
||||||
onChange={(e) => updateInspectionResult(criterion.id, parseInt(e.target.value))}
|
|
||||||
className="flex-1"
|
|
||||||
/>
|
|
||||||
<span className="text-sm">{criterion.maxValue || 5}</span>
|
|
||||||
<span className="min-w-8 text-center font-medium">
|
|
||||||
{inspectionResults[criterion.id]?.value || criterion.minValue || 1}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{criterion.type === 'numeric' && (
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<Input
|
|
||||||
type="number"
|
|
||||||
min={criterion.minValue}
|
|
||||||
max={criterion.maxValue}
|
|
||||||
step="0.1"
|
|
||||||
value={inspectionResults[criterion.id]?.value || ''}
|
|
||||||
onChange={(e) => updateInspectionResult(criterion.id, parseFloat(e.target.value) || 0)}
|
|
||||||
className="w-24"
|
|
||||||
/>
|
|
||||||
{criterion.unit && <span className="text-sm text-gray-600">{criterion.unit}</span>}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<Input
|
|
||||||
placeholder="Notas adicionales (opcional)"
|
|
||||||
value={inspectionResults[criterion.id]?.notes || ''}
|
|
||||||
onChange={(e) => {
|
|
||||||
const currentResult = inspectionResults[criterion.id];
|
|
||||||
if (currentResult) {
|
|
||||||
updateInspectionResult(criterion.id, currentResult.value, e.target.value);
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
|
|
||||||
{selectedTemplate.requiresPhotos && (
|
|
||||||
<div>
|
|
||||||
<input
|
|
||||||
ref={fileInputRef}
|
|
||||||
type="file"
|
|
||||||
accept="image/*"
|
|
||||||
onChange={(e) => {
|
|
||||||
const file = e.target.files?.[0];
|
|
||||||
if (file) {
|
|
||||||
handlePhotoUpload(criterion.id, file);
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
className="hidden"
|
|
||||||
/>
|
|
||||||
<Button
|
|
||||||
variant="outline"
|
|
||||||
size="sm"
|
|
||||||
onClick={() => fileInputRef.current?.click()}
|
|
||||||
>
|
|
||||||
📸 {uploadedPhotos[criterion.id] ? 'Cambiar foto' : 'Tomar foto'}
|
|
||||||
</Button>
|
|
||||||
{uploadedPhotos[criterion.id] && (
|
|
||||||
<p className="text-sm text-green-600 mt-1">
|
|
||||||
✓ Foto capturada: {uploadedPhotos[criterion.id].name}
|
|
||||||
</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</Card>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<Card className="p-4 bg-gray-50">
|
|
||||||
<div className="flex justify-between items-center mb-2">
|
|
||||||
<span className="font-medium">Puntuación general</span>
|
|
||||||
<span className="text-2xl font-bold text-blue-600">
|
|
||||||
{calculateOverallScore().toFixed(1)}%
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="w-full bg-gray-200 rounded-full h-3 mb-2">
|
|
||||||
<div
|
|
||||||
className={`h-3 rounded-full transition-all duration-500 ${
|
|
||||||
calculateOverallScore() >= selectedTemplate.passThreshold
|
|
||||||
? 'bg-green-500'
|
|
||||||
: 'bg-red-500'
|
|
||||||
}`}
|
|
||||||
style={{ width: `${calculateOverallScore()}%` }}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex justify-between text-sm text-gray-600">
|
|
||||||
<span>Umbral: {selectedTemplate.passThreshold}%</span>
|
|
||||||
<span className={
|
|
||||||
calculateOverallScore() >= selectedTemplate.passThreshold
|
|
||||||
? 'text-green-600 font-medium'
|
|
||||||
: 'text-red-600 font-medium'
|
|
||||||
}>
|
|
||||||
{calculateOverallScore() >= selectedTemplate.passThreshold ? '✓ APROBADO' : '✗ REPROBADO'}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{checkCriticalFailures().length > 0 && (
|
|
||||||
<div className="mt-3 p-2 bg-red-100 border border-red-200 rounded">
|
|
||||||
<p className="text-sm font-medium text-red-800">Fallas críticas detectadas:</p>
|
|
||||||
<ul className="text-sm text-red-700 mt-1">
|
|
||||||
{checkCriticalFailures().map((failure, index) => (
|
|
||||||
<li key={index}>• {failure}</li>
|
|
||||||
))}
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</Card>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
const renderQualityChecksTable = () => {
|
|
||||||
const columns = [
|
|
||||||
{ key: 'batch', label: 'Lote', sortable: true },
|
|
||||||
{ key: 'type', label: 'Tipo de control', sortable: true },
|
|
||||||
{ key: 'status', label: 'Estado', sortable: true },
|
|
||||||
{ key: 'inspector', label: 'Inspector', sortable: false },
|
|
||||||
{ key: 'scheduled_date', label: 'Fecha programada', sortable: true },
|
|
||||||
{ key: 'completed_date', label: 'Fecha completada', sortable: true },
|
|
||||||
{ key: 'actions', label: 'Acciones', sortable: false },
|
|
||||||
];
|
|
||||||
|
|
||||||
const data = qualityChecks.map(check => ({
|
|
||||||
id: check.id,
|
|
||||||
batch: `#${check.batch?.batch_number || 'N/A'}`,
|
|
||||||
type: QUALITY_CHECK_TEMPLATES[check.check_type]?.spanishName || check.check_type,
|
|
||||||
status: (
|
|
||||||
<Badge className={STATUS_COLORS[check.status]}>
|
|
||||||
{check.status === QualityCheckStatus.SCHEDULED && 'Programado'}
|
|
||||||
{check.status === QualityCheckStatus.IN_PROGRESS && 'En progreso'}
|
|
||||||
{check.status === QualityCheckStatus.PASSED && 'Aprobado'}
|
|
||||||
{check.status === QualityCheckStatus.FAILED && 'Reprobado'}
|
|
||||||
{check.status === QualityCheckStatus.REQUIRES_REVIEW && 'Requiere revisión'}
|
|
||||||
</Badge>
|
|
||||||
),
|
|
||||||
inspector: check.inspector || 'No asignado',
|
|
||||||
scheduled_date: check.scheduled_date
|
|
||||||
? new Date(check.scheduled_date).toLocaleDateString('es-ES')
|
|
||||||
: '-',
|
|
||||||
completed_date: check.completed_date
|
|
||||||
? new Date(check.completed_date).toLocaleDateString('es-ES')
|
|
||||||
: '-',
|
|
||||||
actions: (
|
|
||||||
<div className="flex gap-2">
|
|
||||||
{check.status === QualityCheckStatus.SCHEDULED && (
|
|
||||||
<Button
|
|
||||||
variant="primary"
|
|
||||||
size="sm"
|
|
||||||
onClick={() => {
|
|
||||||
const template = QUALITY_CHECK_TEMPLATES[check.check_type];
|
|
||||||
if (template) {
|
|
||||||
startQualityCheck(template);
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Iniciar
|
|
||||||
</Button>
|
|
||||||
)}
|
|
||||||
<Button variant="outline" size="sm">
|
|
||||||
Ver detalles
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
),
|
|
||||||
}));
|
|
||||||
|
|
||||||
return <Table columns={columns} data={data} />;
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className={`space-y-6 ${className}`}>
|
|
||||||
<div className="flex justify-between items-center">
|
|
||||||
<div>
|
|
||||||
<h2 className="text-2xl font-bold text-gray-900">Control de Calidad</h2>
|
|
||||||
<p className="text-gray-600">Gestiona las inspecciones de calidad y cumplimiento</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex gap-2">
|
|
||||||
<Select
|
|
||||||
value={currentInspector}
|
|
||||||
onChange={(e) => setCurrentInspector(e.target.value)}
|
|
||||||
className="w-48"
|
|
||||||
>
|
|
||||||
<option value="inspector-1">María García (Inspector)</option>
|
|
||||||
<option value="inspector-2">Juan López (Supervisor)</option>
|
|
||||||
<option value="inspector-3">Ana Martín (Jefe Calidad)</option>
|
|
||||||
</Select>
|
|
||||||
|
|
||||||
<Button
|
|
||||||
variant="primary"
|
|
||||||
onClick={() => {
|
|
||||||
// Show modal to select quality check type
|
|
||||||
const template = QUALITY_CHECK_TEMPLATES.visual_inspection;
|
|
||||||
startQualityCheck(template);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Nueva inspección
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Quick Start Templates */}
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
|
||||||
{Object.values(QUALITY_CHECK_TEMPLATES).map((template) => (
|
|
||||||
<Card
|
|
||||||
key={template.id}
|
|
||||||
className="p-4 cursor-pointer hover:shadow-md transition-shadow border-2 border-transparent hover:border-blue-200"
|
|
||||||
onClick={() => startQualityCheck(template)}
|
|
||||||
>
|
|
||||||
<div className="flex items-center justify-between mb-3">
|
|
||||||
<h3 className="font-semibold text-gray-900">{template.spanishName}</h3>
|
|
||||||
{template.requiresPhotos && (
|
|
||||||
<span className="text-sm bg-blue-100 text-blue-800 px-2 py-1 rounded">
|
|
||||||
📸 Fotos
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<p className="text-sm text-gray-600 mb-3">
|
|
||||||
{template.criteria.length} criterios • Umbral: {template.passThreshold}%
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div className="flex flex-wrap gap-1">
|
|
||||||
{template.productTypes.map((type) => (
|
|
||||||
<Badge key={type} className="text-xs bg-gray-100 text-gray-700">
|
|
||||||
{type === 'pan' && 'Pan'}
|
|
||||||
{type === 'bolleria' && 'Bollería'}
|
|
||||||
{type === 'reposteria' && 'Repostería'}
|
|
||||||
</Badge>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{template.criticalPoints.length > 0 && (
|
|
||||||
<p className="text-xs text-orange-600 mt-2">
|
|
||||||
{template.criticalPoints.length} puntos críticos
|
|
||||||
</p>
|
|
||||||
)}
|
|
||||||
</Card>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Quality Checks Table */}
|
|
||||||
<Card className="p-6">
|
|
||||||
<div className="flex justify-between items-center mb-4">
|
|
||||||
<h3 className="text-lg font-semibold">Controles de calidad recientes</h3>
|
|
||||||
|
|
||||||
<div className="flex gap-2">
|
|
||||||
<Select className="w-40">
|
|
||||||
<option value="all">Todos los estados</option>
|
|
||||||
<option value={QualityCheckStatus.SCHEDULED}>Programados</option>
|
|
||||||
<option value={QualityCheckStatus.IN_PROGRESS}>En progreso</option>
|
|
||||||
<option value={QualityCheckStatus.PASSED}>Aprobados</option>
|
|
||||||
<option value={QualityCheckStatus.FAILED}>Reprobados</option>
|
|
||||||
</Select>
|
|
||||||
|
|
||||||
<Button variant="outline" onClick={loadQualityChecks}>
|
|
||||||
Actualizar
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{loading ? (
|
|
||||||
<div className="flex justify-center py-8">
|
|
||||||
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
renderQualityChecksTable()
|
|
||||||
)}
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
{/* Quality Check Modal */}
|
|
||||||
<Modal
|
|
||||||
isOpen={isInspectionModalOpen}
|
|
||||||
onClose={() => {
|
|
||||||
setIsInspectionModalOpen(false);
|
|
||||||
setSelectedTemplate(null);
|
|
||||||
}}
|
|
||||||
title={`Control de Calidad: ${selectedTemplate?.spanishName}`}
|
|
||||||
size="lg"
|
|
||||||
>
|
|
||||||
{renderInspectionForm()}
|
|
||||||
|
|
||||||
<div className="flex justify-end gap-2 pt-6 border-t">
|
|
||||||
<Button
|
|
||||||
variant="outline"
|
|
||||||
onClick={() => {
|
|
||||||
setIsInspectionModalOpen(false);
|
|
||||||
setSelectedTemplate(null);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Cancelar
|
|
||||||
</Button>
|
|
||||||
|
|
||||||
<Button
|
|
||||||
variant="primary"
|
|
||||||
onClick={completeQualityCheck}
|
|
||||||
disabled={!selectedTemplate || Object.keys(inspectionResults).length === 0}
|
|
||||||
>
|
|
||||||
Completar inspección
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</Modal>
|
|
||||||
|
|
||||||
{/* Stats Cards */}
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
|
|
||||||
<Card className="p-4">
|
|
||||||
<div className="flex items-center justify-between">
|
|
||||||
<div>
|
|
||||||
<p className="text-sm text-gray-600">Tasa de aprobación</p>
|
|
||||||
<p className="text-2xl font-bold text-green-600">94.2%</p>
|
|
||||||
</div>
|
|
||||||
<span className="text-2xl">✅</span>
|
|
||||||
</div>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
<Card className="p-4">
|
|
||||||
<div className="flex items-center justify-between">
|
|
||||||
<div>
|
|
||||||
<p className="text-sm text-gray-600">Controles pendientes</p>
|
|
||||||
<p className="text-2xl font-bold text-orange-600">7</p>
|
|
||||||
</div>
|
|
||||||
<span className="text-2xl">⏳</span>
|
|
||||||
</div>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
<Card className="p-4">
|
|
||||||
<div className="flex items-center justify-between">
|
|
||||||
<div>
|
|
||||||
<p className="text-sm text-gray-600">Fallas críticas</p>
|
|
||||||
<p className="text-2xl font-bold text-red-600">2</p>
|
|
||||||
</div>
|
|
||||||
<span className="text-2xl">🚨</span>
|
|
||||||
</div>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
<Card className="p-4">
|
|
||||||
<div className="flex items-center justify-between">
|
|
||||||
<div>
|
|
||||||
<p className="text-sm text-gray-600">Controles hoy</p>
|
|
||||||
<p className="text-2xl font-bold text-blue-600">23</p>
|
|
||||||
</div>
|
|
||||||
<span className="text-2xl">📋</span>
|
|
||||||
</div>
|
|
||||||
</Card>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default QualityControl;
|
|
||||||
@@ -1 +0,0 @@
|
|||||||
export { default } from '../QualityControl';
|
|
||||||
@@ -1,794 +0,0 @@
|
|||||||
import React, { useState, useCallback, useMemo } from 'react';
|
|
||||||
import { Card, Button, Badge, Input, Modal, Table, Select } from '../../ui';
|
|
||||||
import type { Recipe, RecipeIngredient, RecipeInstruction, NutritionalInfo, DifficultyLevel } from '../../../types/production.types';
|
|
||||||
|
|
||||||
interface RecipeDisplayProps {
|
|
||||||
className?: string;
|
|
||||||
recipe: Recipe;
|
|
||||||
editable?: boolean;
|
|
||||||
showNutrition?: boolean;
|
|
||||||
showCosting?: boolean;
|
|
||||||
onScaleChange?: (scaleFactor: number, scaledRecipe: Recipe) => void;
|
|
||||||
onVersionUpdate?: (newVersion: Recipe) => void;
|
|
||||||
onCostCalculation?: (totalCost: number, costPerUnit: number) => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface ScaledIngredient extends RecipeIngredient {
|
|
||||||
scaledQuantity: number;
|
|
||||||
scaledCost?: number;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface ScaledInstruction extends RecipeInstruction {
|
|
||||||
scaledDuration?: number;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface ScaledRecipe extends Omit<Recipe, 'ingredients' | 'instructions'> {
|
|
||||||
scaledYieldQuantity: number;
|
|
||||||
scaledTotalTime: number;
|
|
||||||
ingredients: ScaledIngredient[];
|
|
||||||
instructions: ScaledInstruction[];
|
|
||||||
scaleFactor: number;
|
|
||||||
estimatedTotalCost?: number;
|
|
||||||
costPerScaledUnit?: number;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface TimerState {
|
|
||||||
instructionId: string;
|
|
||||||
duration: number;
|
|
||||||
remaining: number;
|
|
||||||
isActive: boolean;
|
|
||||||
isComplete: boolean;
|
|
||||||
}
|
|
||||||
|
|
||||||
const DIFFICULTY_COLORS = {
|
|
||||||
[DifficultyLevel.BEGINNER]: 'bg-green-100 text-green-800',
|
|
||||||
[DifficultyLevel.INTERMEDIATE]: 'bg-yellow-100 text-yellow-800',
|
|
||||||
[DifficultyLevel.ADVANCED]: 'bg-orange-100 text-orange-800',
|
|
||||||
[DifficultyLevel.EXPERT]: 'bg-red-100 text-red-800',
|
|
||||||
};
|
|
||||||
|
|
||||||
const DIFFICULTY_LABELS = {
|
|
||||||
[DifficultyLevel.BEGINNER]: 'Principiante',
|
|
||||||
[DifficultyLevel.INTERMEDIATE]: 'Intermedio',
|
|
||||||
[DifficultyLevel.ADVANCED]: 'Avanzado',
|
|
||||||
[DifficultyLevel.EXPERT]: 'Experto',
|
|
||||||
};
|
|
||||||
|
|
||||||
const ALLERGEN_ICONS: Record<string, string> = {
|
|
||||||
gluten: '🌾',
|
|
||||||
milk: '🥛',
|
|
||||||
eggs: '🥚',
|
|
||||||
nuts: '🥜',
|
|
||||||
soy: '🫘',
|
|
||||||
sesame: '🌰',
|
|
||||||
fish: '🐟',
|
|
||||||
shellfish: '🦐',
|
|
||||||
};
|
|
||||||
|
|
||||||
const EQUIPMENT_ICONS: Record<string, string> = {
|
|
||||||
oven: '🔥',
|
|
||||||
mixer: '🥄',
|
|
||||||
scale: '⚖️',
|
|
||||||
bowl: '🥣',
|
|
||||||
whisk: '🔄',
|
|
||||||
spatula: '🍴',
|
|
||||||
thermometer: '🌡️',
|
|
||||||
timer: '⏰',
|
|
||||||
};
|
|
||||||
|
|
||||||
export const RecipeDisplay: React.FC<RecipeDisplayProps> = ({
|
|
||||||
className = '',
|
|
||||||
recipe,
|
|
||||||
editable = false,
|
|
||||||
showNutrition = true,
|
|
||||||
showCosting = false,
|
|
||||||
onScaleChange,
|
|
||||||
onVersionUpdate,
|
|
||||||
onCostCalculation,
|
|
||||||
}) => {
|
|
||||||
const [scaleFactor, setScaleFactor] = useState<number>(1);
|
|
||||||
const [activeTimers, setActiveTimers] = useState<Record<string, TimerState>>({});
|
|
||||||
const [isNutritionModalOpen, setIsNutritionModalOpen] = useState(false);
|
|
||||||
const [isCostingModalOpen, setIsCostingModalOpen] = useState(false);
|
|
||||||
const [isEquipmentModalOpen, setIsEquipmentModalOpen] = useState(false);
|
|
||||||
const [selectedInstruction, setSelectedInstruction] = useState<RecipeInstruction | null>(null);
|
|
||||||
const [showAllergensDetail, setShowAllergensDetail] = useState(false);
|
|
||||||
|
|
||||||
// Mock ingredient costs for demonstration
|
|
||||||
const ingredientCosts: Record<string, number> = {
|
|
||||||
flour: 1.2, // €/kg
|
|
||||||
water: 0.001, // €/l
|
|
||||||
salt: 0.8, // €/kg
|
|
||||||
yeast: 8.5, // €/kg
|
|
||||||
sugar: 1.5, // €/kg
|
|
||||||
butter: 6.2, // €/kg
|
|
||||||
milk: 1.3, // €/l
|
|
||||||
eggs: 0.25, // €/unit
|
|
||||||
};
|
|
||||||
|
|
||||||
const scaledRecipe = useMemo((): ScaledRecipe => {
|
|
||||||
const scaledIngredients: ScaledIngredient[] = recipe.ingredients.map(ingredient => ({
|
|
||||||
...ingredient,
|
|
||||||
scaledQuantity: ingredient.quantity * scaleFactor,
|
|
||||||
scaledCost: ingredientCosts[ingredient.ingredient_id]
|
|
||||||
? ingredientCosts[ingredient.ingredient_id] * ingredient.quantity * scaleFactor
|
|
||||||
: undefined,
|
|
||||||
}));
|
|
||||||
|
|
||||||
const scaledInstructions: ScaledInstruction[] = recipe.instructions.map(instruction => ({
|
|
||||||
...instruction,
|
|
||||||
scaledDuration: instruction.duration_minutes ? Math.ceil(instruction.duration_minutes * scaleFactor) : undefined,
|
|
||||||
}));
|
|
||||||
|
|
||||||
const estimatedTotalCost = scaledIngredients.reduce((total, ingredient) =>
|
|
||||||
total + (ingredient.scaledCost || 0), 0
|
|
||||||
);
|
|
||||||
|
|
||||||
const scaledYieldQuantity = recipe.yield_quantity * scaleFactor;
|
|
||||||
const costPerScaledUnit = scaledYieldQuantity > 0 ? estimatedTotalCost / scaledYieldQuantity : 0;
|
|
||||||
|
|
||||||
return {
|
|
||||||
...recipe,
|
|
||||||
scaledYieldQuantity,
|
|
||||||
scaledTotalTime: Math.ceil(recipe.total_time_minutes * scaleFactor),
|
|
||||||
ingredients: scaledIngredients,
|
|
||||||
instructions: scaledInstructions,
|
|
||||||
scaleFactor,
|
|
||||||
estimatedTotalCost,
|
|
||||||
costPerScaledUnit,
|
|
||||||
};
|
|
||||||
}, [recipe, scaleFactor, ingredientCosts]);
|
|
||||||
|
|
||||||
const handleScaleChange = useCallback((newScaleFactor: number) => {
|
|
||||||
setScaleFactor(newScaleFactor);
|
|
||||||
if (onScaleChange) {
|
|
||||||
onScaleChange(newScaleFactor, scaledRecipe as unknown as Recipe);
|
|
||||||
}
|
|
||||||
}, [scaledRecipe, onScaleChange]);
|
|
||||||
|
|
||||||
const startTimer = (instruction: RecipeInstruction) => {
|
|
||||||
if (!instruction.duration_minutes) return;
|
|
||||||
|
|
||||||
const timerState: TimerState = {
|
|
||||||
instructionId: instruction.step_number.toString(),
|
|
||||||
duration: instruction.duration_minutes * 60, // Convert to seconds
|
|
||||||
remaining: instruction.duration_minutes * 60,
|
|
||||||
isActive: true,
|
|
||||||
isComplete: false,
|
|
||||||
};
|
|
||||||
|
|
||||||
setActiveTimers(prev => ({
|
|
||||||
...prev,
|
|
||||||
[instruction.step_number.toString()]: timerState,
|
|
||||||
}));
|
|
||||||
|
|
||||||
// Start countdown
|
|
||||||
const interval = setInterval(() => {
|
|
||||||
setActiveTimers(prev => {
|
|
||||||
const current = prev[instruction.step_number.toString()];
|
|
||||||
if (!current || current.remaining <= 0) {
|
|
||||||
clearInterval(interval);
|
|
||||||
return {
|
|
||||||
...prev,
|
|
||||||
[instruction.step_number.toString()]: {
|
|
||||||
...current,
|
|
||||||
remaining: 0,
|
|
||||||
isActive: false,
|
|
||||||
isComplete: true,
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
...prev,
|
|
||||||
[instruction.step_number.toString()]: {
|
|
||||||
...current,
|
|
||||||
remaining: current.remaining - 1,
|
|
||||||
}
|
|
||||||
};
|
|
||||||
});
|
|
||||||
}, 1000);
|
|
||||||
};
|
|
||||||
|
|
||||||
const stopTimer = (instructionId: string) => {
|
|
||||||
setActiveTimers(prev => ({
|
|
||||||
...prev,
|
|
||||||
[instructionId]: {
|
|
||||||
...prev[instructionId],
|
|
||||||
isActive: false,
|
|
||||||
}
|
|
||||||
}));
|
|
||||||
};
|
|
||||||
|
|
||||||
const formatTime = (seconds: number): string => {
|
|
||||||
const hours = Math.floor(seconds / 3600);
|
|
||||||
const minutes = Math.floor((seconds % 3600) / 60);
|
|
||||||
const secs = seconds % 60;
|
|
||||||
|
|
||||||
if (hours > 0) {
|
|
||||||
return `${hours}:${String(minutes).padStart(2, '0')}:${String(secs).padStart(2, '0')}`;
|
|
||||||
}
|
|
||||||
return `${minutes}:${String(secs).padStart(2, '0')}`;
|
|
||||||
};
|
|
||||||
|
|
||||||
const renderScalingControls = () => (
|
|
||||||
<Card className="p-4">
|
|
||||||
<h3 className="font-semibold text-lg mb-4">Escalado de receta</h3>
|
|
||||||
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 items-end">
|
|
||||||
<div>
|
|
||||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
|
||||||
Factor de escala
|
|
||||||
</label>
|
|
||||||
<Input
|
|
||||||
type="number"
|
|
||||||
min="0.1"
|
|
||||||
max="10"
|
|
||||||
step="0.1"
|
|
||||||
value={scaleFactor}
|
|
||||||
onChange={(e) => handleScaleChange(parseFloat(e.target.value) || 1)}
|
|
||||||
className="w-full"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
|
||||||
Cantidad original
|
|
||||||
</label>
|
|
||||||
<p className="text-lg font-semibold text-gray-900">
|
|
||||||
{recipe.yield_quantity} {recipe.yield_unit}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
|
||||||
Cantidad escalada
|
|
||||||
</label>
|
|
||||||
<p className="text-lg font-semibold text-blue-600">
|
|
||||||
{scaledRecipe.scaledYieldQuantity} {recipe.yield_unit}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex gap-2 mt-4">
|
|
||||||
<Button
|
|
||||||
variant="outline"
|
|
||||||
size="sm"
|
|
||||||
onClick={() => handleScaleChange(0.5)}
|
|
||||||
className={scaleFactor === 0.5 ? 'bg-blue-50 border-blue-300' : ''}
|
|
||||||
>
|
|
||||||
1/2
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
variant="outline"
|
|
||||||
size="sm"
|
|
||||||
onClick={() => handleScaleChange(1)}
|
|
||||||
className={scaleFactor === 1 ? 'bg-blue-50 border-blue-300' : ''}
|
|
||||||
>
|
|
||||||
1x
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
variant="outline"
|
|
||||||
size="sm"
|
|
||||||
onClick={() => handleScaleChange(2)}
|
|
||||||
className={scaleFactor === 2 ? 'bg-blue-50 border-blue-300' : ''}
|
|
||||||
>
|
|
||||||
2x
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
variant="outline"
|
|
||||||
size="sm"
|
|
||||||
onClick={() => handleScaleChange(3)}
|
|
||||||
className={scaleFactor === 3 ? 'bg-blue-50 border-blue-300' : ''}
|
|
||||||
>
|
|
||||||
3x
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
variant="outline"
|
|
||||||
size="sm"
|
|
||||||
onClick={() => handleScaleChange(5)}
|
|
||||||
className={scaleFactor === 5 ? 'bg-blue-50 border-blue-300' : ''}
|
|
||||||
>
|
|
||||||
5x
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{scaleFactor !== 1 && (
|
|
||||||
<div className="mt-4 p-3 bg-blue-50 border border-blue-200 rounded-lg">
|
|
||||||
<p className="text-sm text-blue-800">
|
|
||||||
<span className="font-medium">Tiempo total escalado:</span> {Math.ceil(scaledRecipe.scaledTotalTime / 60)}h {scaledRecipe.scaledTotalTime % 60}m
|
|
||||||
</p>
|
|
||||||
{showCosting && scaledRecipe.estimatedTotalCost && (
|
|
||||||
<p className="text-sm text-blue-800 mt-1">
|
|
||||||
<span className="font-medium">Costo estimado:</span> €{scaledRecipe.estimatedTotalCost.toFixed(2)}
|
|
||||||
(€{scaledRecipe.costPerScaledUnit?.toFixed(3)}/{recipe.yield_unit})
|
|
||||||
</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</Card>
|
|
||||||
);
|
|
||||||
|
|
||||||
const renderRecipeHeader = () => (
|
|
||||||
<Card className="p-6">
|
|
||||||
<div className="flex flex-col lg:flex-row gap-6">
|
|
||||||
<div className="flex-1">
|
|
||||||
<div className="flex items-start justify-between mb-4">
|
|
||||||
<div>
|
|
||||||
<h1 className="text-3xl font-bold text-gray-900">{recipe.name}</h1>
|
|
||||||
<p className="text-gray-600 mt-1">{recipe.description}</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex gap-2">
|
|
||||||
<Badge className={DIFFICULTY_COLORS[recipe.difficulty_level]}>
|
|
||||||
{DIFFICULTY_LABELS[recipe.difficulty_level]}
|
|
||||||
</Badge>
|
|
||||||
<Badge className="bg-blue-100 text-blue-800">
|
|
||||||
v{recipe.version}
|
|
||||||
</Badge>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
|
||||||
<div>
|
|
||||||
<p className="text-sm text-gray-600">Preparación</p>
|
|
||||||
<p className="font-semibold">{recipe.prep_time_minutes} min</p>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p className="text-sm text-gray-600">Cocción</p>
|
|
||||||
<p className="font-semibold">{recipe.cook_time_minutes} min</p>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p className="text-sm text-gray-600">Total</p>
|
|
||||||
<p className="font-semibold">{Math.ceil(recipe.total_time_minutes / 60)}h {recipe.total_time_minutes % 60}m</p>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p className="text-sm text-gray-600">Rendimiento</p>
|
|
||||||
<p className="font-semibold">{scaledRecipe.scaledYieldQuantity} {recipe.yield_unit}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{recipe.allergen_warnings.length > 0 && (
|
|
||||||
<div className="mt-4">
|
|
||||||
<div className="flex items-center justify-between">
|
|
||||||
<p className="text-sm font-medium text-gray-700">Alérgenos:</p>
|
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
size="sm"
|
|
||||||
onClick={() => setShowAllergensDetail(!showAllergensDetail)}
|
|
||||||
>
|
|
||||||
{showAllergensDetail ? 'Ocultar' : 'Ver detalles'}
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
<div className="flex flex-wrap gap-2 mt-2">
|
|
||||||
{recipe.allergen_warnings.map((allergen) => (
|
|
||||||
<Badge
|
|
||||||
key={allergen}
|
|
||||||
className="bg-red-100 text-red-800 border border-red-200"
|
|
||||||
>
|
|
||||||
{ALLERGEN_ICONS[allergen]} {allergen}
|
|
||||||
</Badge>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{showAllergensDetail && (
|
|
||||||
<div className="mt-3 p-3 bg-red-50 border border-red-200 rounded-lg">
|
|
||||||
<p className="text-sm text-red-800">
|
|
||||||
⚠️ Este producto contiene los siguientes alérgenos. Revisar cuidadosamente
|
|
||||||
antes del consumo si existe alguna alergia o intolerancia alimentaria.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{recipe.storage_instructions && (
|
|
||||||
<div className="mt-4 p-3 bg-gray-50 border border-gray-200 rounded-lg">
|
|
||||||
<p className="text-sm text-gray-700">
|
|
||||||
<span className="font-medium">Conservación:</span> {recipe.storage_instructions}
|
|
||||||
{recipe.shelf_life_hours && (
|
|
||||||
<span className="ml-2">
|
|
||||||
• Vida útil: {Math.ceil(recipe.shelf_life_hours / 24)} días
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex flex-col gap-2 lg:w-48">
|
|
||||||
{showNutrition && (
|
|
||||||
<Button
|
|
||||||
variant="outline"
|
|
||||||
onClick={() => setIsNutritionModalOpen(true)}
|
|
||||||
className="w-full"
|
|
||||||
>
|
|
||||||
📊 Información nutricional
|
|
||||||
</Button>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{showCosting && (
|
|
||||||
<Button
|
|
||||||
variant="outline"
|
|
||||||
onClick={() => setIsCostingModalOpen(true)}
|
|
||||||
className="w-full"
|
|
||||||
>
|
|
||||||
💰 Análisis de costos
|
|
||||||
</Button>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<Button
|
|
||||||
variant="outline"
|
|
||||||
onClick={() => setIsEquipmentModalOpen(true)}
|
|
||||||
className="w-full"
|
|
||||||
>
|
|
||||||
🔧 Equipo necesario
|
|
||||||
</Button>
|
|
||||||
|
|
||||||
{editable && onVersionUpdate && (
|
|
||||||
<Button variant="primary" className="w-full">
|
|
||||||
✏️ Editar receta
|
|
||||||
</Button>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Card>
|
|
||||||
);
|
|
||||||
|
|
||||||
const renderIngredients = () => (
|
|
||||||
<Card className="p-6">
|
|
||||||
<h2 className="text-xl font-semibold mb-4">Ingredientes</h2>
|
|
||||||
|
|
||||||
<div className="space-y-3">
|
|
||||||
{scaledRecipe.ingredients.map((ingredient, index) => (
|
|
||||||
<div
|
|
||||||
key={`${ingredient.ingredient_id}-${index}`}
|
|
||||||
className="flex items-center justify-between py-2 border-b border-gray-100 last:border-b-0"
|
|
||||||
>
|
|
||||||
<div className="flex-1">
|
|
||||||
<p className="font-medium text-gray-900">{ingredient.ingredient_name}</p>
|
|
||||||
{ingredient.preparation_notes && (
|
|
||||||
<p className="text-sm text-gray-600 italic">{ingredient.preparation_notes}</p>
|
|
||||||
)}
|
|
||||||
{ingredient.is_optional && (
|
|
||||||
<Badge className="bg-gray-100 text-gray-600 text-xs mt-1">
|
|
||||||
Opcional
|
|
||||||
</Badge>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="text-right ml-4">
|
|
||||||
<p className="font-semibold text-lg">
|
|
||||||
{ingredient.scaledQuantity.toFixed(ingredient.scaledQuantity < 1 ? 2 : 0)} {ingredient.unit}
|
|
||||||
</p>
|
|
||||||
{scaleFactor !== 1 && (
|
|
||||||
<p className="text-sm text-gray-500">
|
|
||||||
(original: {ingredient.quantity} {ingredient.unit})
|
|
||||||
</p>
|
|
||||||
)}
|
|
||||||
{showCosting && ingredient.scaledCost && (
|
|
||||||
<p className="text-sm text-green-600">
|
|
||||||
€{ingredient.scaledCost.toFixed(2)}
|
|
||||||
</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{showCosting && scaledRecipe.estimatedTotalCost && (
|
|
||||||
<div className="mt-4 pt-4 border-t border-gray-200">
|
|
||||||
<div className="flex justify-between items-center">
|
|
||||||
<span className="font-semibold">Costo total estimado:</span>
|
|
||||||
<span className="text-xl font-bold text-green-600">
|
|
||||||
€{scaledRecipe.estimatedTotalCost.toFixed(2)}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<p className="text-sm text-gray-600 text-right">
|
|
||||||
€{scaledRecipe.costPerScaledUnit?.toFixed(3)} por {recipe.yield_unit}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</Card>
|
|
||||||
);
|
|
||||||
|
|
||||||
const renderInstructions = () => (
|
|
||||||
<Card className="p-6">
|
|
||||||
<h2 className="text-xl font-semibold mb-4">Instrucciones</h2>
|
|
||||||
|
|
||||||
<div className="space-y-4">
|
|
||||||
{scaledRecipe.instructions.map((instruction, index) => {
|
|
||||||
const timer = activeTimers[instruction.step_number.toString()];
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
key={instruction.step_number}
|
|
||||||
className={`p-4 border rounded-lg ${
|
|
||||||
instruction.critical_control_point
|
|
||||||
? 'border-orange-300 bg-orange-50'
|
|
||||||
: 'border-gray-200 bg-gray-50'
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
<div className="flex items-start gap-4">
|
|
||||||
<div className="flex-shrink-0">
|
|
||||||
<div className="w-8 h-8 bg-blue-600 text-white rounded-full flex items-center justify-center font-semibold">
|
|
||||||
{instruction.step_number}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex-1">
|
|
||||||
<div className="flex items-center justify-between mb-2">
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
{instruction.duration_minutes && (
|
|
||||||
<Badge className="bg-blue-100 text-blue-800">
|
|
||||||
⏱️ {instruction.scaledDuration || instruction.duration_minutes} min
|
|
||||||
</Badge>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{instruction.temperature && (
|
|
||||||
<Badge className="bg-red-100 text-red-800">
|
|
||||||
🌡️ {instruction.temperature}°C
|
|
||||||
</Badge>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{instruction.critical_control_point && (
|
|
||||||
<Badge className="bg-orange-100 text-orange-800">
|
|
||||||
🚨 PCC
|
|
||||||
</Badge>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{instruction.duration_minutes && (
|
|
||||||
<div className="flex gap-2">
|
|
||||||
{!timer?.isActive && !timer?.isComplete && (
|
|
||||||
<Button
|
|
||||||
variant="outline"
|
|
||||||
size="sm"
|
|
||||||
onClick={() => startTimer(instruction)}
|
|
||||||
>
|
|
||||||
▶️ Iniciar timer
|
|
||||||
</Button>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{timer?.isActive && (
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<span className="text-lg font-mono font-bold text-blue-600">
|
|
||||||
{formatTime(timer.remaining)}
|
|
||||||
</span>
|
|
||||||
<Button
|
|
||||||
variant="outline"
|
|
||||||
size="sm"
|
|
||||||
onClick={() => stopTimer(instruction.step_number.toString())}
|
|
||||||
>
|
|
||||||
⏸️
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{timer?.isComplete && (
|
|
||||||
<Badge className="bg-green-100 text-green-800 animate-pulse">
|
|
||||||
✅ Completado
|
|
||||||
</Badge>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<p className="text-gray-800 leading-relaxed mb-2">
|
|
||||||
{instruction.instruction}
|
|
||||||
</p>
|
|
||||||
|
|
||||||
{instruction.equipment && instruction.equipment.length > 0 && (
|
|
||||||
<div className="mb-2">
|
|
||||||
<p className="text-sm text-gray-600 mb-1">Equipo necesario:</p>
|
|
||||||
<div className="flex flex-wrap gap-1">
|
|
||||||
{instruction.equipment.map((equipment, idx) => (
|
|
||||||
<Badge key={idx} className="bg-gray-100 text-gray-700 text-xs">
|
|
||||||
{EQUIPMENT_ICONS[equipment.toLowerCase()] || '🔧'} {equipment}
|
|
||||||
</Badge>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{instruction.tips && (
|
|
||||||
<div className="mt-3 p-2 bg-yellow-50 border border-yellow-200 rounded">
|
|
||||||
<p className="text-sm text-yellow-800">
|
|
||||||
💡 <span className="font-medium">Tip:</span> {instruction.tips}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
</Card>
|
|
||||||
);
|
|
||||||
|
|
||||||
const renderNutritionModal = () => (
|
|
||||||
<Modal
|
|
||||||
isOpen={isNutritionModalOpen}
|
|
||||||
onClose={() => setIsNutritionModalOpen(false)}
|
|
||||||
title="Información Nutricional"
|
|
||||||
>
|
|
||||||
{recipe.nutritional_info ? (
|
|
||||||
<div className="space-y-4">
|
|
||||||
<div className="grid grid-cols-2 gap-4">
|
|
||||||
<div className="bg-gray-50 p-4 rounded-lg">
|
|
||||||
<p className="text-sm text-gray-600">Calorías por porción</p>
|
|
||||||
<p className="text-2xl font-bold text-gray-900">
|
|
||||||
{recipe.nutritional_info.calories_per_serving || 'N/A'}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="bg-gray-50 p-4 rounded-lg">
|
|
||||||
<p className="text-sm text-gray-600">Tamaño de porción</p>
|
|
||||||
<p className="text-lg font-semibold text-gray-900">
|
|
||||||
{recipe.nutritional_info.serving_size || 'N/A'}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="grid grid-cols-2 md:grid-cols-3 gap-4">
|
|
||||||
<div>
|
|
||||||
<p className="text-sm text-gray-600">Proteínas</p>
|
|
||||||
<p className="text-lg font-semibold">{recipe.nutritional_info.protein_g || 0}g</p>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p className="text-sm text-gray-600">Carbohidratos</p>
|
|
||||||
<p className="text-lg font-semibold">{recipe.nutritional_info.carbohydrates_g || 0}g</p>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p className="text-sm text-gray-600">Grasas</p>
|
|
||||||
<p className="text-lg font-semibold">{recipe.nutritional_info.fat_g || 0}g</p>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p className="text-sm text-gray-600">Fibra</p>
|
|
||||||
<p className="text-lg font-semibold">{recipe.nutritional_info.fiber_g || 0}g</p>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p className="text-sm text-gray-600">Azúcares</p>
|
|
||||||
<p className="text-lg font-semibold">{recipe.nutritional_info.sugar_g || 0}g</p>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p className="text-sm text-gray-600">Sodio</p>
|
|
||||||
<p className="text-lg font-semibold">{recipe.nutritional_info.sodium_mg || 0}mg</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="bg-blue-50 p-4 rounded-lg">
|
|
||||||
<p className="text-sm text-blue-800">
|
|
||||||
<span className="font-medium">Porciones por lote escalado:</span> {
|
|
||||||
recipe.nutritional_info.servings_per_batch
|
|
||||||
? Math.ceil(recipe.nutritional_info.servings_per_batch * scaleFactor)
|
|
||||||
: 'N/A'
|
|
||||||
}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<p className="text-gray-500 text-center py-8">
|
|
||||||
No hay información nutricional disponible para esta receta.
|
|
||||||
</p>
|
|
||||||
)}
|
|
||||||
</Modal>
|
|
||||||
);
|
|
||||||
|
|
||||||
const renderCostingModal = () => (
|
|
||||||
<Modal
|
|
||||||
isOpen={isCostingModalOpen}
|
|
||||||
onClose={() => setIsCostingModalOpen(false)}
|
|
||||||
title="Análisis de Costos"
|
|
||||||
>
|
|
||||||
<div className="space-y-4">
|
|
||||||
<div className="bg-green-50 border border-green-200 p-4 rounded-lg">
|
|
||||||
<div className="flex justify-between items-center mb-2">
|
|
||||||
<span className="font-semibold text-green-900">Costo total</span>
|
|
||||||
<span className="text-2xl font-bold text-green-600">
|
|
||||||
€{scaledRecipe.estimatedTotalCost?.toFixed(2)}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<p className="text-sm text-green-700">
|
|
||||||
€{scaledRecipe.costPerScaledUnit?.toFixed(3)} por {recipe.yield_unit}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<h4 className="font-semibold mb-3">Desglose por ingrediente</h4>
|
|
||||||
<div className="space-y-2">
|
|
||||||
{scaledRecipe.ingredients.map((ingredient, index) => (
|
|
||||||
<div key={index} className="flex justify-between items-center py-2 border-b border-gray-100">
|
|
||||||
<div>
|
|
||||||
<p className="font-medium">{ingredient.ingredient_name}</p>
|
|
||||||
<p className="text-sm text-gray-600">
|
|
||||||
{ingredient.scaledQuantity.toFixed(2)} {ingredient.unit}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<p className="font-semibold text-green-600">
|
|
||||||
€{ingredient.scaledCost?.toFixed(2) || '0.00'}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="bg-blue-50 p-4 rounded-lg">
|
|
||||||
<h4 className="font-semibold text-blue-900 mb-2">Análisis de rentabilidad</h4>
|
|
||||||
<div className="space-y-1 text-sm text-blue-800">
|
|
||||||
<p>• Costo de ingredientes: €{scaledRecipe.estimatedTotalCost?.toFixed(2)}</p>
|
|
||||||
<p>• Margen sugerido (300%): €{((scaledRecipe.estimatedTotalCost || 0) * 3).toFixed(2)}</p>
|
|
||||||
<p>• Precio de venta sugerido por {recipe.yield_unit}: €{((scaledRecipe.costPerScaledUnit || 0) * 4).toFixed(2)}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Modal>
|
|
||||||
);
|
|
||||||
|
|
||||||
const renderEquipmentModal = () => (
|
|
||||||
<Modal
|
|
||||||
isOpen={isEquipmentModalOpen}
|
|
||||||
onClose={() => setIsEquipmentModalOpen(false)}
|
|
||||||
title="Equipo Necesario"
|
|
||||||
>
|
|
||||||
<div className="space-y-4">
|
|
||||||
<div>
|
|
||||||
<h4 className="font-semibold mb-3">Equipo general de la receta</h4>
|
|
||||||
<div className="grid grid-cols-2 gap-2">
|
|
||||||
{recipe.equipment_needed.map((equipment, index) => (
|
|
||||||
<div key={index} className="flex items-center gap-2 p-2 bg-gray-50 rounded">
|
|
||||||
<span className="text-xl">
|
|
||||||
{EQUIPMENT_ICONS[equipment.toLowerCase()] || '🔧'}
|
|
||||||
</span>
|
|
||||||
<span className="text-sm">{equipment}</span>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<h4 className="font-semibold mb-3">Equipo por instrucción</h4>
|
|
||||||
<div className="space-y-2">
|
|
||||||
{recipe.instructions
|
|
||||||
.filter(instruction => instruction.equipment && instruction.equipment.length > 0)
|
|
||||||
.map((instruction) => (
|
|
||||||
<div key={instruction.step_number} className="border border-gray-200 p-3 rounded">
|
|
||||||
<p className="font-medium text-sm mb-2">
|
|
||||||
Paso {instruction.step_number}
|
|
||||||
</p>
|
|
||||||
<div className="flex flex-wrap gap-1">
|
|
||||||
{instruction.equipment?.map((equipment, idx) => (
|
|
||||||
<Badge key={idx} className="bg-blue-100 text-blue-800 text-xs">
|
|
||||||
{EQUIPMENT_ICONS[equipment.toLowerCase()] || '🔧'} {equipment}
|
|
||||||
</Badge>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Modal>
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className={`space-y-6 ${className}`}>
|
|
||||||
{renderRecipeHeader()}
|
|
||||||
{renderScalingControls()}
|
|
||||||
|
|
||||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
|
||||||
{renderIngredients()}
|
|
||||||
<div className="space-y-6">
|
|
||||||
{renderInstructions()}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{renderNutritionModal()}
|
|
||||||
{renderCostingModal()}
|
|
||||||
{renderEquipmentModal()}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default RecipeDisplay;
|
|
||||||
@@ -1 +0,0 @@
|
|||||||
export { default } from '../RecipeDisplay';
|
|
||||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -1,879 +0,0 @@
|
|||||||
import React, { useState, useEffect, useMemo, useCallback } from 'react';
|
|
||||||
import {
|
|
||||||
Table,
|
|
||||||
Button,
|
|
||||||
Badge,
|
|
||||||
Input,
|
|
||||||
Select,
|
|
||||||
Card,
|
|
||||||
Modal,
|
|
||||||
Tooltip
|
|
||||||
} from '../../ui';
|
|
||||||
import {
|
|
||||||
SalesRecord,
|
|
||||||
SalesChannel,
|
|
||||||
PaymentMethod,
|
|
||||||
SalesSortField,
|
|
||||||
SortOrder
|
|
||||||
} from '../../../types/sales.types';
|
|
||||||
import { salesService } from '../../../services/api/sales.service';
|
|
||||||
import { useSales } from '../../../hooks/api/useSales';
|
|
||||||
|
|
||||||
// Extended interface for orders
|
|
||||||
interface Order extends SalesRecord {
|
|
||||||
customer_name: string;
|
|
||||||
customer_phone?: string;
|
|
||||||
delivery_address?: string;
|
|
||||||
order_notes?: string;
|
|
||||||
items_count: number;
|
|
||||||
status: OrderStatus;
|
|
||||||
}
|
|
||||||
|
|
||||||
enum OrderStatus {
|
|
||||||
PENDIENTE = 'pendiente',
|
|
||||||
CONFIRMADO = 'confirmado',
|
|
||||||
EN_PREPARACION = 'en_preparacion',
|
|
||||||
LISTO = 'listo',
|
|
||||||
ENTREGADO = 'entregado',
|
|
||||||
CANCELADO = 'cancelado'
|
|
||||||
}
|
|
||||||
|
|
||||||
interface OrdersTableProps {
|
|
||||||
tenantId?: string;
|
|
||||||
showActions?: boolean;
|
|
||||||
onOrderSelect?: (order: Order) => void;
|
|
||||||
onOrderUpdate?: (orderId: string, updates: Partial<Order>) => void;
|
|
||||||
initialFilters?: OrderFilters;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface OrderFilters {
|
|
||||||
status?: OrderStatus;
|
|
||||||
customer_name?: string;
|
|
||||||
date_from?: string;
|
|
||||||
date_to?: string;
|
|
||||||
min_total?: number;
|
|
||||||
max_total?: number;
|
|
||||||
sales_channel?: SalesChannel;
|
|
||||||
payment_method?: PaymentMethod;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface BulkActions {
|
|
||||||
selectedOrders: string[];
|
|
||||||
action: 'change_status' | 'print_receipts' | 'export' | 'delete';
|
|
||||||
newStatus?: OrderStatus;
|
|
||||||
}
|
|
||||||
|
|
||||||
const StatusColors = {
|
|
||||||
[OrderStatus.PENDIENTE]: 'yellow',
|
|
||||||
[OrderStatus.CONFIRMADO]: 'blue',
|
|
||||||
[OrderStatus.EN_PREPARACION]: 'orange',
|
|
||||||
[OrderStatus.LISTO]: 'green',
|
|
||||||
[OrderStatus.ENTREGADO]: 'emerald',
|
|
||||||
[OrderStatus.CANCELADO]: 'red'
|
|
||||||
} as const;
|
|
||||||
|
|
||||||
const StatusLabels = {
|
|
||||||
[OrderStatus.PENDIENTE]: 'Pendiente',
|
|
||||||
[OrderStatus.CONFIRMADO]: 'Confirmado',
|
|
||||||
[OrderStatus.EN_PREPARACION]: 'En Preparación',
|
|
||||||
[OrderStatus.LISTO]: 'Listo para Entrega',
|
|
||||||
[OrderStatus.ENTREGADO]: 'Entregado',
|
|
||||||
[OrderStatus.CANCELADO]: 'Cancelado'
|
|
||||||
} as const;
|
|
||||||
|
|
||||||
const ChannelLabels = {
|
|
||||||
[SalesChannel.STORE_FRONT]: 'Tienda',
|
|
||||||
[SalesChannel.ONLINE]: 'Online',
|
|
||||||
[SalesChannel.PHONE_ORDER]: 'Teléfono',
|
|
||||||
[SalesChannel.DELIVERY]: 'Delivery',
|
|
||||||
[SalesChannel.CATERING]: 'Catering',
|
|
||||||
[SalesChannel.WHOLESALE]: 'Mayorista',
|
|
||||||
[SalesChannel.FARMERS_MARKET]: 'Mercado',
|
|
||||||
[SalesChannel.THIRD_PARTY]: 'Terceros'
|
|
||||||
} as const;
|
|
||||||
|
|
||||||
const PaymentLabels = {
|
|
||||||
[PaymentMethod.CASH]: 'Efectivo',
|
|
||||||
[PaymentMethod.CREDIT_CARD]: 'Tarjeta Crédito',
|
|
||||||
[PaymentMethod.DEBIT_CARD]: 'Tarjeta Débito',
|
|
||||||
[PaymentMethod.DIGITAL_WALLET]: 'Wallet Digital',
|
|
||||||
[PaymentMethod.BANK_TRANSFER]: 'Transferencia',
|
|
||||||
[PaymentMethod.CHECK]: 'Cheque',
|
|
||||||
[PaymentMethod.STORE_CREDIT]: 'Crédito Tienda'
|
|
||||||
} as const;
|
|
||||||
|
|
||||||
export const OrdersTable: React.FC<OrdersTableProps> = ({
|
|
||||||
tenantId,
|
|
||||||
showActions = true,
|
|
||||||
onOrderSelect,
|
|
||||||
onOrderUpdate,
|
|
||||||
initialFilters = {}
|
|
||||||
}) => {
|
|
||||||
// State
|
|
||||||
const [orders, setOrders] = useState<Order[]>([]);
|
|
||||||
const [loading, setLoading] = useState(false);
|
|
||||||
const [error, setError] = useState<string | null>(null);
|
|
||||||
|
|
||||||
// Filters and sorting
|
|
||||||
const [filters, setFilters] = useState<OrderFilters>(initialFilters);
|
|
||||||
const [sortBy, setSortBy] = useState<SalesSortField>(SalesSortField.DATE);
|
|
||||||
const [sortOrder, setSortOrder] = useState<SortOrder>(SortOrder.DESC);
|
|
||||||
const [searchTerm, setSearchTerm] = useState('');
|
|
||||||
|
|
||||||
// Selection and bulk actions
|
|
||||||
const [selectedOrders, setSelectedOrders] = useState<string[]>([]);
|
|
||||||
const [showBulkActions, setShowBulkActions] = useState(false);
|
|
||||||
const [bulkActionModal, setBulkActionModal] = useState(false);
|
|
||||||
const [bulkAction, setBulkAction] = useState<BulkActions['action'] | null>(null);
|
|
||||||
const [newBulkStatus, setNewBulkStatus] = useState<OrderStatus | null>(null);
|
|
||||||
|
|
||||||
// Pagination
|
|
||||||
const [currentPage, setCurrentPage] = useState(1);
|
|
||||||
const [pageSize, setPageSize] = useState(20);
|
|
||||||
const [totalPages, setTotalPages] = useState(1);
|
|
||||||
const [totalOrders, setTotalOrders] = useState(0);
|
|
||||||
|
|
||||||
// Order details modal
|
|
||||||
const [selectedOrder, setSelectedOrder] = useState<Order | null>(null);
|
|
||||||
const [showOrderDetails, setShowOrderDetails] = useState(false);
|
|
||||||
|
|
||||||
// Sales hook
|
|
||||||
const { fetchSalesData } = useSales();
|
|
||||||
|
|
||||||
// Load orders
|
|
||||||
const loadOrders = useCallback(async () => {
|
|
||||||
setLoading(true);
|
|
||||||
setError(null);
|
|
||||||
|
|
||||||
try {
|
|
||||||
const queryParams = {
|
|
||||||
page: currentPage,
|
|
||||||
size: pageSize,
|
|
||||||
sort_by: sortBy,
|
|
||||||
sort_order: sortOrder,
|
|
||||||
...filters,
|
|
||||||
search: searchTerm || undefined,
|
|
||||||
};
|
|
||||||
|
|
||||||
// Simulate API call with mock data transformation
|
|
||||||
const response = await salesService.getSales(queryParams);
|
|
||||||
|
|
||||||
if (response.success && response.data) {
|
|
||||||
// Transform sales records to orders (in real app this would come from orders API)
|
|
||||||
const transformedOrders: Order[] = response.data.items.map((sale: any, index: number) => ({
|
|
||||||
...sale,
|
|
||||||
customer_name: `Cliente ${index + 1}`,
|
|
||||||
customer_phone: `+34 ${Math.floor(Math.random() * 900000000 + 100000000)}`,
|
|
||||||
delivery_address: sale.sales_channel === SalesChannel.DELIVERY
|
|
||||||
? `Calle Ejemplo ${Math.floor(Math.random() * 100)}, Madrid`
|
|
||||||
: undefined,
|
|
||||||
order_notes: Math.random() > 0.7 ? 'Sin gluten' : undefined,
|
|
||||||
items_count: Math.floor(Math.random() * 5) + 1,
|
|
||||||
status: Object.values(OrderStatus)[Math.floor(Math.random() * Object.values(OrderStatus).length)],
|
|
||||||
}));
|
|
||||||
|
|
||||||
setOrders(transformedOrders);
|
|
||||||
setTotalOrders(response.data.total);
|
|
||||||
setTotalPages(response.data.pages);
|
|
||||||
} else {
|
|
||||||
setError(response.error || 'Error al cargar pedidos');
|
|
||||||
}
|
|
||||||
} catch (err) {
|
|
||||||
setError('Error de conexión al servidor');
|
|
||||||
console.error('Error loading orders:', err);
|
|
||||||
} finally {
|
|
||||||
setLoading(false);
|
|
||||||
}
|
|
||||||
}, [currentPage, pageSize, sortBy, sortOrder, filters, searchTerm]);
|
|
||||||
|
|
||||||
// Effects
|
|
||||||
useEffect(() => {
|
|
||||||
loadOrders();
|
|
||||||
}, [loadOrders]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
setCurrentPage(1);
|
|
||||||
}, [filters, searchTerm]);
|
|
||||||
|
|
||||||
// Filtered and sorted orders
|
|
||||||
const filteredOrders = useMemo(() => {
|
|
||||||
let filtered = [...orders];
|
|
||||||
|
|
||||||
// Apply search filter
|
|
||||||
if (searchTerm) {
|
|
||||||
const searchLower = searchTerm.toLowerCase();
|
|
||||||
filtered = filtered.filter(order =>
|
|
||||||
order.customer_name.toLowerCase().includes(searchLower) ||
|
|
||||||
order.id.toLowerCase().includes(searchLower) ||
|
|
||||||
order.product_name.toLowerCase().includes(searchLower)
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return filtered;
|
|
||||||
}, [orders, searchTerm]);
|
|
||||||
|
|
||||||
// Table columns
|
|
||||||
const columns = [
|
|
||||||
{
|
|
||||||
key: 'select',
|
|
||||||
title: (
|
|
||||||
<input
|
|
||||||
type="checkbox"
|
|
||||||
checked={selectedOrders.length === filteredOrders.length && filteredOrders.length > 0}
|
|
||||||
onChange={(e) => {
|
|
||||||
if (e.target.checked) {
|
|
||||||
setSelectedOrders(filteredOrders.map(order => order.id));
|
|
||||||
} else {
|
|
||||||
setSelectedOrders([]);
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
className="rounded border-gray-300"
|
|
||||||
/>
|
|
||||||
),
|
|
||||||
render: (order: Order) => (
|
|
||||||
<input
|
|
||||||
type="checkbox"
|
|
||||||
checked={selectedOrders.includes(order.id)}
|
|
||||||
onChange={(e) => {
|
|
||||||
if (e.target.checked) {
|
|
||||||
setSelectedOrders(prev => [...prev, order.id]);
|
|
||||||
} else {
|
|
||||||
setSelectedOrders(prev => prev.filter(id => id !== order.id));
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
className="rounded border-gray-300"
|
|
||||||
/>
|
|
||||||
),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'id',
|
|
||||||
title: 'Nº Pedido',
|
|
||||||
sortable: true,
|
|
||||||
render: (order: Order) => (
|
|
||||||
<button
|
|
||||||
onClick={() => {
|
|
||||||
setSelectedOrder(order);
|
|
||||||
setShowOrderDetails(true);
|
|
||||||
}}
|
|
||||||
className="text-blue-600 hover:text-blue-800 font-medium"
|
|
||||||
>
|
|
||||||
#{order.id.slice(-8)}
|
|
||||||
</button>
|
|
||||||
),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'customer_name',
|
|
||||||
title: 'Cliente',
|
|
||||||
sortable: true,
|
|
||||||
render: (order: Order) => (
|
|
||||||
<div>
|
|
||||||
<div className="font-medium">{order.customer_name}</div>
|
|
||||||
{order.customer_phone && (
|
|
||||||
<div className="text-sm text-gray-500">{order.customer_phone}</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'products',
|
|
||||||
title: 'Productos',
|
|
||||||
render: (order: Order) => (
|
|
||||||
<div>
|
|
||||||
<div className="font-medium">{order.product_name}</div>
|
|
||||||
<div className="text-sm text-gray-500">
|
|
||||||
{order.items_count} {order.items_count === 1 ? 'artículo' : 'artículos'}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'total_revenue',
|
|
||||||
title: 'Total',
|
|
||||||
sortable: true,
|
|
||||||
render: (order: Order) => (
|
|
||||||
<div className="text-right">
|
|
||||||
<div className="font-semibold">€{order.total_revenue.toFixed(2)}</div>
|
|
||||||
{order.discount_applied > 0 && (
|
|
||||||
<div className="text-sm text-green-600">
|
|
||||||
-€{order.discount_applied.toFixed(2)}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'status',
|
|
||||||
title: 'Estado',
|
|
||||||
sortable: true,
|
|
||||||
render: (order: Order) => (
|
|
||||||
<Badge color={StatusColors[order.status]} variant="soft">
|
|
||||||
{StatusLabels[order.status]}
|
|
||||||
</Badge>
|
|
||||||
),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'sales_channel',
|
|
||||||
title: 'Canal',
|
|
||||||
render: (order: Order) => (
|
|
||||||
<span className="text-sm text-gray-600">
|
|
||||||
{ChannelLabels[order.sales_channel]}
|
|
||||||
</span>
|
|
||||||
),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'date',
|
|
||||||
title: 'Fecha',
|
|
||||||
sortable: true,
|
|
||||||
render: (order: Order) => (
|
|
||||||
<div>
|
|
||||||
<div>{new Date(order.date).toLocaleDateString('es-ES')}</div>
|
|
||||||
<div className="text-sm text-gray-500">
|
|
||||||
{new Date(order.created_at).toLocaleTimeString('es-ES', {
|
|
||||||
hour: '2-digit',
|
|
||||||
minute: '2-digit'
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
),
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
if (showActions) {
|
|
||||||
columns.push({
|
|
||||||
key: 'actions',
|
|
||||||
title: 'Acciones',
|
|
||||||
render: (order: Order) => (
|
|
||||||
<div className="flex space-x-2">
|
|
||||||
<Tooltip content="Ver detalles">
|
|
||||||
<Button
|
|
||||||
size="sm"
|
|
||||||
variant="outline"
|
|
||||||
onClick={() => {
|
|
||||||
setSelectedOrder(order);
|
|
||||||
setShowOrderDetails(true);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
|
|
||||||
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
|
|
||||||
d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
|
|
||||||
</svg>
|
|
||||||
</Button>
|
|
||||||
</Tooltip>
|
|
||||||
|
|
||||||
<Tooltip content="Cambiar estado">
|
|
||||||
<Select
|
|
||||||
size="sm"
|
|
||||||
value={order.status}
|
|
||||||
onChange={(value) => handleStatusChange(order.id, value as OrderStatus)}
|
|
||||||
options={Object.values(OrderStatus).map(status => ({
|
|
||||||
value: status,
|
|
||||||
label: StatusLabels[status]
|
|
||||||
}))}
|
|
||||||
/>
|
|
||||||
</Tooltip>
|
|
||||||
|
|
||||||
{order.status !== OrderStatus.CANCELADO && (
|
|
||||||
<Tooltip content="Imprimir recibo">
|
|
||||||
<Button
|
|
||||||
size="sm"
|
|
||||||
variant="outline"
|
|
||||||
onClick={() => handlePrintReceipt(order.id)}
|
|
||||||
>
|
|
||||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
|
|
||||||
d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z" />
|
|
||||||
</svg>
|
|
||||||
</Button>
|
|
||||||
</Tooltip>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
),
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Handlers
|
|
||||||
const handleStatusChange = async (orderId: string, newStatus: OrderStatus) => {
|
|
||||||
try {
|
|
||||||
// Update locally first
|
|
||||||
setOrders(prev => prev.map(order =>
|
|
||||||
order.id === orderId ? { ...order, status: newStatus } : order
|
|
||||||
));
|
|
||||||
|
|
||||||
// Call API
|
|
||||||
onOrderUpdate?.(orderId, { status: newStatus });
|
|
||||||
|
|
||||||
// In real app, make API call here
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Error updating order status:', error);
|
|
||||||
// Revert on error
|
|
||||||
loadOrders();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handlePrintReceipt = (orderId: string) => {
|
|
||||||
// In real app, generate and print receipt
|
|
||||||
console.log('Printing receipt for order:', orderId);
|
|
||||||
window.print();
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleBulkAction = async () => {
|
|
||||||
if (!bulkAction || selectedOrders.length === 0) return;
|
|
||||||
|
|
||||||
try {
|
|
||||||
switch (bulkAction) {
|
|
||||||
case 'change_status':
|
|
||||||
if (newBulkStatus) {
|
|
||||||
setOrders(prev => prev.map(order =>
|
|
||||||
selectedOrders.includes(order.id)
|
|
||||||
? { ...order, status: newBulkStatus }
|
|
||||||
: order
|
|
||||||
));
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
case 'print_receipts':
|
|
||||||
selectedOrders.forEach(handlePrintReceipt);
|
|
||||||
break;
|
|
||||||
case 'export':
|
|
||||||
handleExportOrders(selectedOrders);
|
|
||||||
break;
|
|
||||||
case 'delete':
|
|
||||||
setOrders(prev => prev.filter(order => !selectedOrders.includes(order.id)));
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
|
|
||||||
setSelectedOrders([]);
|
|
||||||
setBulkActionModal(false);
|
|
||||||
setBulkAction(null);
|
|
||||||
setNewBulkStatus(null);
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Error performing bulk action:', error);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleExportOrders = async (orderIds?: string[]) => {
|
|
||||||
try {
|
|
||||||
const exportData = orders
|
|
||||||
.filter(order => !orderIds || orderIds.includes(order.id))
|
|
||||||
.map(order => ({
|
|
||||||
'Nº Pedido': order.id,
|
|
||||||
'Cliente': order.customer_name,
|
|
||||||
'Teléfono': order.customer_phone,
|
|
||||||
'Productos': order.product_name,
|
|
||||||
'Cantidad': order.quantity_sold,
|
|
||||||
'Total': order.total_revenue,
|
|
||||||
'Estado': StatusLabels[order.status],
|
|
||||||
'Canal': ChannelLabels[order.sales_channel],
|
|
||||||
'Fecha': new Date(order.date).toLocaleDateString('es-ES'),
|
|
||||||
}));
|
|
||||||
|
|
||||||
const csv = [
|
|
||||||
Object.keys(exportData[0]).join(','),
|
|
||||||
...exportData.map(row => Object.values(row).join(','))
|
|
||||||
].join('\n');
|
|
||||||
|
|
||||||
const blob = new Blob([csv], { type: 'text/csv' });
|
|
||||||
const url = URL.createObjectURL(blob);
|
|
||||||
const a = document.createElement('a');
|
|
||||||
a.href = url;
|
|
||||||
a.download = `pedidos_${new Date().toISOString().split('T')[0]}.csv`;
|
|
||||||
a.click();
|
|
||||||
URL.revokeObjectURL(url);
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Error exporting orders:', error);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="space-y-6">
|
|
||||||
{/* Header */}
|
|
||||||
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
|
|
||||||
<div>
|
|
||||||
<h2 className="text-2xl font-bold text-gray-900">Gestión de Pedidos</h2>
|
|
||||||
<p className="text-gray-600">
|
|
||||||
{totalOrders} pedidos encontrados
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex items-center space-x-3">
|
|
||||||
<Button onClick={() => handleExportOrders()} variant="outline" size="sm">
|
|
||||||
<svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
|
|
||||||
d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 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>
|
|
||||||
Exportar
|
|
||||||
</Button>
|
|
||||||
<Button onClick={() => loadOrders()} size="sm">
|
|
||||||
<svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
|
|
||||||
d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
|
|
||||||
</svg>
|
|
||||||
Actualizar
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Filters */}
|
|
||||||
<Card className="p-6">
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
|
||||||
<Input
|
|
||||||
label="Buscar pedidos"
|
|
||||||
placeholder="Cliente, nº pedido o producto..."
|
|
||||||
value={searchTerm}
|
|
||||||
onChange={(e) => setSearchTerm(e.target.value)}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<Select
|
|
||||||
label="Estado"
|
|
||||||
value={filters.status || ''}
|
|
||||||
onChange={(value) => setFilters(prev => ({
|
|
||||||
...prev,
|
|
||||||
status: value ? value as OrderStatus : undefined
|
|
||||||
}))}
|
|
||||||
options={[
|
|
||||||
{ value: '', label: 'Todos los estados' },
|
|
||||||
...Object.values(OrderStatus).map(status => ({
|
|
||||||
value: status,
|
|
||||||
label: StatusLabels[status]
|
|
||||||
}))
|
|
||||||
]}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<Select
|
|
||||||
label="Canal de venta"
|
|
||||||
value={filters.sales_channel || ''}
|
|
||||||
onChange={(value) => setFilters(prev => ({
|
|
||||||
...prev,
|
|
||||||
sales_channel: value ? value as SalesChannel : undefined
|
|
||||||
}))}
|
|
||||||
options={[
|
|
||||||
{ value: '', label: 'Todos los canales' },
|
|
||||||
...Object.values(SalesChannel).map(channel => ({
|
|
||||||
value: channel,
|
|
||||||
label: ChannelLabels[channel]
|
|
||||||
}))
|
|
||||||
]}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<div className="flex space-x-2">
|
|
||||||
<Input
|
|
||||||
label="Total mínimo"
|
|
||||||
type="number"
|
|
||||||
step="0.01"
|
|
||||||
value={filters.min_total || ''}
|
|
||||||
onChange={(e) => setFilters(prev => ({
|
|
||||||
...prev,
|
|
||||||
min_total: e.target.value ? parseFloat(e.target.value) : undefined
|
|
||||||
}))}
|
|
||||||
placeholder="€0.00"
|
|
||||||
/>
|
|
||||||
<Input
|
|
||||||
label="Total máximo"
|
|
||||||
type="number"
|
|
||||||
step="0.01"
|
|
||||||
value={filters.max_total || ''}
|
|
||||||
onChange={(e) => setFilters(prev => ({
|
|
||||||
...prev,
|
|
||||||
max_total: e.target.value ? parseFloat(e.target.value) : undefined
|
|
||||||
}))}
|
|
||||||
placeholder="€999.99"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex justify-between items-center mt-4 pt-4 border-t border-gray-200">
|
|
||||||
<div className="text-sm text-gray-600">
|
|
||||||
Mostrando {(currentPage - 1) * pageSize + 1} - {Math.min(currentPage * pageSize, totalOrders)} de {totalOrders}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<Select
|
|
||||||
value={pageSize.toString()}
|
|
||||||
onChange={(value) => setPageSize(parseInt(value))}
|
|
||||||
options={[
|
|
||||||
{ value: '10', label: '10 por página' },
|
|
||||||
{ value: '20', label: '20 por página' },
|
|
||||||
{ value: '50', label: '50 por página' },
|
|
||||||
{ value: '100', label: '100 por página' }
|
|
||||||
]}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
{/* Bulk Actions */}
|
|
||||||
{selectedOrders.length > 0 && (
|
|
||||||
<Card className="p-4">
|
|
||||||
<div className="flex items-center justify-between">
|
|
||||||
<span className="text-sm text-gray-600">
|
|
||||||
{selectedOrders.length} pedidos seleccionados
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<div className="flex space-x-2">
|
|
||||||
<Button
|
|
||||||
size="sm"
|
|
||||||
variant="outline"
|
|
||||||
onClick={() => {
|
|
||||||
setBulkAction('change_status');
|
|
||||||
setBulkActionModal(true);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Cambiar Estado
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
size="sm"
|
|
||||||
variant="outline"
|
|
||||||
onClick={() => {
|
|
||||||
setBulkAction('print_receipts');
|
|
||||||
handleBulkAction();
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Imprimir Recibos
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
size="sm"
|
|
||||||
variant="outline"
|
|
||||||
onClick={() => handleExportOrders(selectedOrders)}
|
|
||||||
>
|
|
||||||
Exportar
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
size="sm"
|
|
||||||
variant="outline"
|
|
||||||
onClick={() => setSelectedOrders([])}
|
|
||||||
>
|
|
||||||
Limpiar Selección
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Card>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Table */}
|
|
||||||
<Card>
|
|
||||||
<div className="overflow-x-auto">
|
|
||||||
<Table
|
|
||||||
columns={columns}
|
|
||||||
data={filteredOrders}
|
|
||||||
loading={loading}
|
|
||||||
emptyMessage="No se encontraron pedidos"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Pagination */}
|
|
||||||
{totalPages > 1 && (
|
|
||||||
<div className="flex items-center justify-between px-6 py-4 border-t border-gray-200">
|
|
||||||
<Button
|
|
||||||
variant="outline"
|
|
||||||
size="sm"
|
|
||||||
disabled={currentPage === 1}
|
|
||||||
onClick={() => setCurrentPage(prev => prev - 1)}
|
|
||||||
>
|
|
||||||
Anterior
|
|
||||||
</Button>
|
|
||||||
|
|
||||||
<div className="flex space-x-2">
|
|
||||||
{Array.from({ length: totalPages }, (_, i) => i + 1)
|
|
||||||
.filter(page =>
|
|
||||||
page === 1 ||
|
|
||||||
page === totalPages ||
|
|
||||||
Math.abs(page - currentPage) <= 2
|
|
||||||
)
|
|
||||||
.map((page, index, array) => (
|
|
||||||
<React.Fragment key={page}>
|
|
||||||
{index > 0 && array[index - 1] !== page - 1 && (
|
|
||||||
<span className="px-3 py-1 text-gray-400">...</span>
|
|
||||||
)}
|
|
||||||
<Button
|
|
||||||
size="sm"
|
|
||||||
variant={currentPage === page ? 'primary' : 'outline'}
|
|
||||||
onClick={() => setCurrentPage(page)}
|
|
||||||
>
|
|
||||||
{page}
|
|
||||||
</Button>
|
|
||||||
</React.Fragment>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<Button
|
|
||||||
variant="outline"
|
|
||||||
size="sm"
|
|
||||||
disabled={currentPage === totalPages}
|
|
||||||
onClick={() => setCurrentPage(prev => prev + 1)}
|
|
||||||
>
|
|
||||||
Siguiente
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
{/* Order Details Modal */}
|
|
||||||
<Modal
|
|
||||||
isOpen={showOrderDetails}
|
|
||||||
onClose={() => setShowOrderDetails(false)}
|
|
||||||
title={`Pedido #${selectedOrder?.id.slice(-8)}`}
|
|
||||||
size="lg"
|
|
||||||
>
|
|
||||||
{selectedOrder && (
|
|
||||||
<div className="space-y-6">
|
|
||||||
<div className="grid grid-cols-2 gap-6">
|
|
||||||
<div>
|
|
||||||
<h4 className="font-medium text-gray-900 mb-3">Información del Cliente</h4>
|
|
||||||
<div className="space-y-2">
|
|
||||||
<div><span className="text-gray-600">Nombre:</span> {selectedOrder.customer_name}</div>
|
|
||||||
{selectedOrder.customer_phone && (
|
|
||||||
<div><span className="text-gray-600">Teléfono:</span> {selectedOrder.customer_phone}</div>
|
|
||||||
)}
|
|
||||||
{selectedOrder.delivery_address && (
|
|
||||||
<div><span className="text-gray-600">Dirección:</span> {selectedOrder.delivery_address}</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<h4 className="font-medium text-gray-900 mb-3">Detalles del Pedido</h4>
|
|
||||||
<div className="space-y-2">
|
|
||||||
<div><span className="text-gray-600">Estado:</span>
|
|
||||||
<Badge color={StatusColors[selectedOrder.status]} variant="soft" className="ml-2">
|
|
||||||
{StatusLabels[selectedOrder.status]}
|
|
||||||
</Badge>
|
|
||||||
</div>
|
|
||||||
<div><span className="text-gray-600">Canal:</span> {ChannelLabels[selectedOrder.sales_channel]}</div>
|
|
||||||
<div><span className="text-gray-600">Fecha:</span> {new Date(selectedOrder.date).toLocaleDateString('es-ES')}</div>
|
|
||||||
{selectedOrder.payment_method && (
|
|
||||||
<div><span className="text-gray-600">Pago:</span> {PaymentLabels[selectedOrder.payment_method]}</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<h4 className="font-medium text-gray-900 mb-3">Productos</h4>
|
|
||||||
<div className="border rounded-lg p-4">
|
|
||||||
<div className="flex justify-between items-center">
|
|
||||||
<div>
|
|
||||||
<div className="font-medium">{selectedOrder.product_name}</div>
|
|
||||||
{selectedOrder.category && (
|
|
||||||
<div className="text-sm text-gray-600">{selectedOrder.category}</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<div className="text-right">
|
|
||||||
<div className="font-medium">€{selectedOrder.unit_price.toFixed(2)} × {selectedOrder.quantity_sold}</div>
|
|
||||||
<div className="text-sm text-gray-600">€{selectedOrder.total_revenue.toFixed(2)}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{selectedOrder.order_notes && (
|
|
||||||
<div>
|
|
||||||
<h4 className="font-medium text-gray-900 mb-3">Notas del Pedido</h4>
|
|
||||||
<div className="bg-yellow-50 border border-yellow-200 rounded-lg p-3 text-sm">
|
|
||||||
{selectedOrder.order_notes}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<div className="border-t pt-4">
|
|
||||||
<div className="flex justify-between items-center text-lg font-semibold">
|
|
||||||
<span>Total del Pedido:</span>
|
|
||||||
<span>€{selectedOrder.total_revenue.toFixed(2)}</span>
|
|
||||||
</div>
|
|
||||||
{selectedOrder.discount_applied > 0 && (
|
|
||||||
<div className="flex justify-between items-center text-sm text-green-600">
|
|
||||||
<span>Descuento aplicado:</span>
|
|
||||||
<span>-€{selectedOrder.discount_applied.toFixed(2)}</span>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{selectedOrder.tax_amount > 0 && (
|
|
||||||
<div className="flex justify-between items-center text-sm text-gray-600">
|
|
||||||
<span>IVA incluido:</span>
|
|
||||||
<span>€{selectedOrder.tax_amount.toFixed(2)}</span>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex justify-end space-x-3">
|
|
||||||
<Button
|
|
||||||
variant="outline"
|
|
||||||
onClick={() => handlePrintReceipt(selectedOrder.id)}
|
|
||||||
>
|
|
||||||
Imprimir Recibo
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
onClick={() => {
|
|
||||||
onOrderSelect?.(selectedOrder);
|
|
||||||
setShowOrderDetails(false);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Editar Pedido
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</Modal>
|
|
||||||
|
|
||||||
{/* Bulk Action Modal */}
|
|
||||||
<Modal
|
|
||||||
isOpen={bulkActionModal}
|
|
||||||
onClose={() => setBulkActionModal(false)}
|
|
||||||
title="Acción masiva"
|
|
||||||
>
|
|
||||||
<div className="space-y-4">
|
|
||||||
<p>
|
|
||||||
Vas a realizar una acción sobre {selectedOrders.length} pedidos seleccionados.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
{bulkAction === 'change_status' && (
|
|
||||||
<Select
|
|
||||||
label="Nuevo estado"
|
|
||||||
value={newBulkStatus || ''}
|
|
||||||
onChange={(value) => setNewBulkStatus(value as OrderStatus)}
|
|
||||||
options={Object.values(OrderStatus).map(status => ({
|
|
||||||
value: status,
|
|
||||||
label: StatusLabels[status]
|
|
||||||
}))}
|
|
||||||
required
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<div className="flex justify-end space-x-3">
|
|
||||||
<Button variant="outline" onClick={() => setBulkActionModal(false)}>
|
|
||||||
Cancelar
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
onClick={handleBulkAction}
|
|
||||||
disabled={bulkAction === 'change_status' && !newBulkStatus}
|
|
||||||
>
|
|
||||||
Confirmar
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Modal>
|
|
||||||
|
|
||||||
{/* Error Display */}
|
|
||||||
{error && (
|
|
||||||
<div className="bg-red-50 border border-red-200 rounded-lg p-4">
|
|
||||||
<div className="flex">
|
|
||||||
<svg className="w-5 h-5 text-red-400 mr-2 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
|
|
||||||
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clipRule="evenodd" />
|
|
||||||
</svg>
|
|
||||||
<div>
|
|
||||||
<h3 className="text-sm font-medium text-red-800">Error</h3>
|
|
||||||
<p className="text-sm text-red-700 mt-1">{error}</p>
|
|
||||||
<Button
|
|
||||||
size="sm"
|
|
||||||
variant="outline"
|
|
||||||
onClick={() => setError(null)}
|
|
||||||
className="mt-2"
|
|
||||||
>
|
|
||||||
Cerrar
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default OrdersTable;
|
|
||||||
Reference in New Issue
Block a user