Improve the frontend 5

frontend/src/components/analytics/events/ServiceBadge.tsx

@@ -0,0 +1,95 @@
+import React from 'react';
+import { Badge } from '../../ui';
+import {
+  ShoppingCart,
+  Package,
+  ClipboardList,
+  Factory,
+  ChefHat,
+  Truck,
+  CreditCard,
+  Brain,
+  Bell,
+  Cloud,
+  TrendingUp,
+} from 'lucide-react';
+
+interface ServiceBadgeProps {
+  service: string;
+  showIcon?: boolean;
+}
+
+export const ServiceBadge: React.FC<ServiceBadgeProps> = ({ service, showIcon = true }) => {
+  const serviceConfig: Record<string, { label: string; color: 'blue' | 'green' | 'purple' | 'orange' | 'pink' | 'indigo' | 'teal' | 'cyan' | 'amber'; icon: any }> = {
+    sales: {
+      label: 'Ventas',
+      color: 'blue',
+      icon: ShoppingCart,
+    },
+    inventory: {
+      label: 'Inventario',
+      color: 'green',
+      icon: Package,
+    },
+    orders: {
+      label: 'Pedidos',
+      color: 'purple',
+      icon: ClipboardList,
+    },
+    production: {
+      label: 'Producción',
+      color: 'orange',
+      icon: Factory,
+    },
+    recipes: {
+      label: 'Recetas',
+      color: 'pink',
+      icon: ChefHat,
+    },
+    suppliers: {
+      label: 'Proveedores',
+      color: 'indigo',
+      icon: Truck,
+    },
+    pos: {
+      label: 'POS',
+      color: 'teal',
+      icon: CreditCard,
+    },
+    training: {
+      label: 'Entrenamiento',
+      color: 'cyan',
+      icon: Brain,
+    },
+    notification: {
+      label: 'Notificaciones',
+      color: 'amber',
+      icon: Bell,
+    },
+    external: {
+      label: 'Externo',
+      color: 'blue',
+      icon: Cloud,
+    },
+    forecasting: {
+      label: 'Pronósticos',
+      color: 'purple',
+      icon: TrendingUp,
+    },
+  };
+
+  const config = serviceConfig[service] || {
+    label: service,
+    color: 'gray' as const,
+    icon: Package,
+  };
+
+  const { label, color, icon: Icon } = config;
+
+  return (
+    <Badge color={color}>
+      {showIcon && <Icon className="mr-1 h-3 w-3" />}
+      {label}
+    </Badge>
+  );
+};