Improve the demo feature of the project

2025-10-12 18:47:33 +02:00
parent dbc7f2fa0d
commit 7556a00db7
168 changed files with 10102 additions and 18869 deletions
--- a/frontend/src/components/demo/DemoProgressIndicator.tsx
+++ b/frontend/src/components/demo/DemoProgressIndicator.tsx
@@ -0,0 +1,132 @@
+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';
+  }
+}