133 lines
4.3 KiB
TypeScript
133 lines
4.3 KiB
TypeScript
import React from 'react';
|
|
import { Badge, ProgressBar } from '../ui';
|
|
import { CheckCircle, XCircle, Loader2, Clock } from 'lucide-react';
|
|
import { ServiceProgress } from '@/api/services/demo';
|
|
|
|
interface Props {
|
|
progress: Record<string, ServiceProgress>;
|
|
}
|
|
|
|
const SERVICE_LABELS: Record<string, string> = {
|
|
tenant: 'Tenant Virtual',
|
|
inventory: 'Inventario y Productos',
|
|
recipes: 'Recetas',
|
|
sales: 'Historial de Ventas',
|
|
orders: 'Pedidos de Clientes',
|
|
suppliers: 'Proveedores',
|
|
production: 'Producción',
|
|
forecasting: 'Pronósticos',
|
|
};
|
|
|
|
const SERVICE_DESCRIPTIONS: Record<string, string> = {
|
|
tenant: 'Creando tu entorno demo aislado',
|
|
inventory: 'Cargando ingredientes, recetas y datos de stock',
|
|
recipes: 'Configurando recetas y fórmulas',
|
|
sales: 'Importando registros de ventas históricas',
|
|
orders: 'Configurando pedidos de clientes',
|
|
suppliers: 'Importando datos de proveedores',
|
|
production: 'Configurando lotes de producción',
|
|
forecasting: 'Preparando datos de pronósticos',
|
|
};
|
|
|
|
export const DemoProgressIndicator: React.FC<Props> = ({ progress }) => {
|
|
return (
|
|
<div className="mt-4 space-y-3">
|
|
{Object.entries(progress).map(([serviceName, serviceProgress]) => (
|
|
<div
|
|
key={serviceName}
|
|
className={`
|
|
p-4 rounded-lg border-2 transition-all
|
|
${
|
|
serviceProgress.status === 'completed'
|
|
? 'bg-green-50 dark:bg-green-900/20 border-green-500'
|
|
: serviceProgress.status === 'failed'
|
|
? 'bg-red-50 dark:bg-red-900/20 border-red-500'
|
|
: serviceProgress.status === 'in_progress'
|
|
? 'bg-blue-50 dark:bg-blue-900/20 border-blue-500'
|
|
: 'bg-gray-50 dark:bg-gray-800/20 border-gray-300 dark:border-gray-700'
|
|
}
|
|
`}
|
|
>
|
|
<div className="flex items-center justify-between mb-2">
|
|
<div className="flex items-center gap-3 flex-1">
|
|
<div className="flex-shrink-0">
|
|
{getStatusIcon(serviceProgress.status)}
|
|
</div>
|
|
<div className="flex-1 min-w-0">
|
|
<h3 className="text-sm font-semibold text-[var(--text-primary)] truncate">
|
|
{SERVICE_LABELS[serviceName] || serviceName}
|
|
</h3>
|
|
<p className="text-xs text-[var(--text-secondary)] truncate">
|
|
{SERVICE_DESCRIPTIONS[serviceName] || 'Procesando...'}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<Badge variant={getStatusVariant(serviceProgress.status)}>
|
|
{getStatusLabel(serviceProgress.status)}
|
|
</Badge>
|
|
</div>
|
|
|
|
{serviceProgress.status === 'in_progress' && (
|
|
<div className="my-2">
|
|
<ProgressBar value={50} variant="primary" className="animate-pulse" />
|
|
</div>
|
|
)}
|
|
|
|
{serviceProgress.records_cloned > 0 && (
|
|
<p className="text-xs text-[var(--text-secondary)] mt-2">
|
|
✓ {serviceProgress.records_cloned} registros clonados
|
|
</p>
|
|
)}
|
|
|
|
{serviceProgress.error && (
|
|
<p className="text-xs text-[var(--color-error)] mt-2">
|
|
Error: {serviceProgress.error}
|
|
</p>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
function getStatusIcon(status: ServiceProgress['status']): React.ReactNode {
|
|
switch (status) {
|
|
case 'completed':
|
|
return <CheckCircle className="w-5 h-5 text-green-500" />;
|
|
case 'failed':
|
|
return <XCircle className="w-5 h-5 text-red-500" />;
|
|
case 'in_progress':
|
|
return <Loader2 className="w-5 h-5 text-blue-500 animate-spin" />;
|
|
default:
|
|
return <Clock className="w-5 h-5 text-gray-400" />;
|
|
}
|
|
}
|
|
|
|
function getStatusLabel(status: ServiceProgress['status']): string {
|
|
switch (status) {
|
|
case 'completed':
|
|
return 'Completado';
|
|
case 'failed':
|
|
return 'Fallido';
|
|
case 'in_progress':
|
|
return 'En Progreso';
|
|
default:
|
|
return 'Pendiente';
|
|
}
|
|
}
|
|
|
|
function getStatusVariant(
|
|
status: ServiceProgress['status']
|
|
): 'success' | 'error' | 'info' | 'default' {
|
|
switch (status) {
|
|
case 'completed':
|
|
return 'success';
|
|
case 'failed':
|
|
return 'error';
|
|
case 'in_progress':
|
|
return 'info';
|
|
default:
|
|
return 'default';
|
|
}
|
|
}
|