Add tilt support

Tiltfile

@@ -0,0 +1,217 @@
+# Tiltfile for Bakery IA - Local Development
+# This replaces Skaffold for faster, smarter local Kubernetes development
+
+# Load Kubernetes manifests using Kustomize
+k8s_yaml(kustomize('infrastructure/kubernetes/overlays/dev'))
+
+# No registry needed for local development - images are built locally
+
+# Common live update configuration for Python FastAPI services
+def python_live_update(service_name, service_path):
+    return sync(service_path, '/app')
+
+# =============================================================================
+# FRONTEND (React + Vite + Nginx)
+# =============================================================================
+docker_build(
+    'bakery/dashboard',
+    context='./frontend',
+    dockerfile='./frontend/Dockerfile.kubernetes',
+    # Note: Frontend is a multi-stage build with nginx, live updates are limited
+    # For true hot-reload during frontend development, consider running Vite locally
+    # and using Telepresence to connect to the cluster
+    live_update=[
+        # Sync source changes (limited usefulness due to nginx serving static files)
+        sync('./frontend/src', '/app/src'),
+        sync('./frontend/public', '/app/public'),
+    ]
+)
+
+# =============================================================================
+# GATEWAY
+# =============================================================================
+docker_build(
+    'bakery/gateway',
+    context='.',
+    dockerfile='./gateway/Dockerfile',
+    live_update=[
+        # Sync Python code changes
+        sync('./gateway', '/app'),
+        sync('./shared', '/app/shared'),
+
+        # Restart on Python file changes
+        run('kill -HUP 1', trigger=['./gateway/**/*.py', './shared/**/*.py']),
+    ]
+)
+
+# =============================================================================
+# MICROSERVICES - Python FastAPI Services
+# =============================================================================
+
+# Helper function to create docker build with live updates for Python services
+def build_python_service(service_name, service_path):
+    docker_build(
+        'bakery/' + service_name,
+        context='.',
+        dockerfile='./services/' + service_path + '/Dockerfile',
+        live_update=[
+            # Sync service code
+            sync('./services/' + service_path, '/app'),
+
+            # Sync shared libraries
+            sync('./shared', '/app/shared'),
+
+            # Sync scripts
+            sync('./scripts', '/app/scripts'),
+
+            # Install new dependencies if requirements.txt changes
+            run('pip install --no-cache-dir -r requirements.txt',
+                trigger=['./services/' + service_path + '/requirements.txt']),
+
+            # Restart uvicorn on Python file changes (HUP signal triggers graceful reload)
+            run('kill -HUP 1',
+                trigger=[
+                    './services/' + service_path + '/**/*.py',
+                    './shared/**/*.py'
+                ]),
+        ]
+    )
+
+# Build all microservices
+build_python_service('auth-service', 'auth')
+build_python_service('tenant-service', 'tenant')
+build_python_service('training-service', 'training')
+build_python_service('forecasting-service', 'forecasting')
+build_python_service('sales-service', 'sales')
+build_python_service('external-service', 'external')
+build_python_service('notification-service', 'notification')
+build_python_service('inventory-service', 'inventory')
+build_python_service('recipes-service', 'recipes')
+build_python_service('suppliers-service', 'suppliers')
+build_python_service('pos-service', 'pos')
+build_python_service('orders-service', 'orders')
+build_python_service('production-service', 'production')
+build_python_service('alert-processor', 'alert_processor')
+
+# =============================================================================
+# RESOURCE DEPENDENCIES & ORDERING
+# =============================================================================
+
+# Databases and infrastructure should start first
+k8s_resource('auth-db', labels=['databases'])
+k8s_resource('tenant-db', labels=['databases'])
+k8s_resource('training-db', labels=['databases'])
+k8s_resource('forecasting-db', labels=['databases'])
+k8s_resource('sales-db', labels=['databases'])
+k8s_resource('external-db', labels=['databases'])
+k8s_resource('notification-db', labels=['databases'])
+k8s_resource('inventory-db', labels=['databases'])
+k8s_resource('recipes-db', labels=['databases'])
+k8s_resource('suppliers-db', labels=['databases'])
+k8s_resource('pos-db', labels=['databases'])
+k8s_resource('orders-db', labels=['databases'])
+k8s_resource('production-db', labels=['databases'])
+
+k8s_resource('redis', labels=['infrastructure'])
+k8s_resource('rabbitmq', labels=['infrastructure'])
+
+# Migration jobs depend on databases
+k8s_resource('auth-migration', resource_deps=['auth-db'], labels=['migrations'])
+k8s_resource('tenant-migration', resource_deps=['tenant-db'], labels=['migrations'])
+k8s_resource('training-migration', resource_deps=['training-db'], labels=['migrations'])
+k8s_resource('forecasting-migration', resource_deps=['forecasting-db'], labels=['migrations'])
+k8s_resource('sales-migration', resource_deps=['sales-db'], labels=['migrations'])
+k8s_resource('external-migration', resource_deps=['external-db'], labels=['migrations'])
+k8s_resource('notification-migration', resource_deps=['notification-db'], labels=['migrations'])
+k8s_resource('inventory-migration', resource_deps=['inventory-db'], labels=['migrations'])
+k8s_resource('recipes-migration', resource_deps=['recipes-db'], labels=['migrations'])
+k8s_resource('suppliers-migration', resource_deps=['suppliers-db'], labels=['migrations'])
+k8s_resource('pos-migration', resource_deps=['pos-db'], labels=['migrations'])
+k8s_resource('orders-migration', resource_deps=['orders-db'], labels=['migrations'])
+k8s_resource('production-migration', resource_deps=['production-db'], labels=['migrations'])
+k8s_resource('alert-processor-migration', resource_deps=['alert-processor-db'], labels=['migrations'])
+
+# Alert processor DB
+k8s_resource('alert-processor-db', labels=['databases'])
+
+# Services depend on their databases AND migrations
+k8s_resource('auth-service',
+    resource_deps=['auth-migration', 'redis'],
+    labels=['services'])
+
+k8s_resource('tenant-service',
+    resource_deps=['tenant-migration', 'redis'],
+    labels=['services'])
+
+k8s_resource('training-service',
+    resource_deps=['training-migration', 'redis'],
+    labels=['services'])
+
+k8s_resource('forecasting-service',
+    resource_deps=['forecasting-migration', 'redis'],
+    labels=['services'])
+
+k8s_resource('sales-service',
+    resource_deps=['sales-migration', 'redis'],
+    labels=['services'])
+
+k8s_resource('external-service',
+    resource_deps=['external-migration', 'redis'],
+    labels=['services'])
+
+k8s_resource('notification-service',
+    resource_deps=['notification-migration', 'redis', 'rabbitmq'],
+    labels=['services'])
+
+k8s_resource('inventory-service',
+    resource_deps=['inventory-migration', 'redis'],
+    labels=['services'])
+
+k8s_resource('recipes-service',
+    resource_deps=['recipes-migration', 'redis'],
+    labels=['services'])
+
+k8s_resource('suppliers-service',
+    resource_deps=['suppliers-migration', 'redis'],
+    labels=['services'])
+
+k8s_resource('pos-service',
+    resource_deps=['pos-migration', 'redis'],
+    labels=['services'])
+
+k8s_resource('orders-service',
+    resource_deps=['orders-migration', 'redis'],
+    labels=['services'])
+
+k8s_resource('production-service',
+    resource_deps=['production-migration', 'redis'],
+    labels=['services'])
+
+k8s_resource('alert-processor-service',
+    resource_deps=['alert-processor-migration', 'redis', 'rabbitmq'],
+    labels=['services'])
+
+# Gateway and Frontend depend on services being ready
+# Access via ingress: http://localhost (frontend) and http://localhost/api (gateway)
+k8s_resource('gateway',
+    resource_deps=['auth-service'],
+    labels=['frontend'])
+
+k8s_resource('frontend',
+    resource_deps=['gateway'],
+    labels=['frontend'])
+
+# =============================================================================
+# CONFIGURATION
+# =============================================================================
+
+# Update check interval - how often Tilt checks for file changes
+update_settings(max_parallel_updates=3, k8s_upsert_timeout_secs=60)
+
+# Optimize for local development
+# - Automatically stream logs from services with errors
+# - Group resources by labels for better organization
+#
+# Note: You may see "too many open files" warnings on macOS with many services.
+# This is a Kind/Kubernetes limitation and doesn't affect service functionality.
+# To work on specific services only, use: tilt up <service-name> <service-name>

frontend/src/components/domain/auth/SubscriptionSelection.tsx

@@ -93,41 +93,71 @@ export const SubscriptionSelection: React.FC<SubscriptionSelectionProps> = ({
           return (
             <Card
               key={planKey}
-              className={`relative p-5 cursor-pointer transition-all duration-200 border-2 ${
+              className={`relative p-6 cursor-pointer transition-all duration-200 border-2 ${
                 isSelected
                   ? 'border-color-primary bg-color-primary/5 shadow-lg'
                   : 'border-border-primary bg-bg-primary hover:border-color-primary/40 hover:shadow-md'
-              }`}
+              } ${plan.popular ? 'pt-8' : ''}`}
               onClick={() => onPlanSelect(planKey)}
             >
               {/* Popular Badge */}
               {plan.popular && (
-                <div className="absolute -top-2.5 right-4 z-10">
+                <div className="absolute top-0 left-0 right-0 flex justify-center -translate-y-1/2 z-20">
-                  <Badge variant="primary" className="px-3 py-1 text-xs font-semibold flex items-center gap-1.5 shadow-md">
+                  <Badge variant="primary" className="px-4 py-1.5 text-xs font-bold flex items-center gap-1.5 shadow-lg rounded-full">
                     <Star className="w-3.5 h-3.5 fill-current" />
                     {t('auth:subscription.popular', 'Más Popular')}
                   </Badge>
                 </div>
               )}
 
-              {/* Horizontal Layout */}
+              {/* Card Content */}
-              <div className="flex flex-col md:flex-row gap-6 items-start">
+              <div className="space-y-6">
-                {/* Left Section: Plan Info & Pricing */}
+                {/* Header Section: Plan Info & Pricing */}
-                <div className="flex-shrink-0 md:w-52">
+                <div className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-4">
-                  <h4 className="text-2xl font-bold text-text-primary mb-2">{plan.name}</h4>
+                  <div className="flex-1">
-                  <div className="flex items-baseline gap-1 mb-3">
+                    <h4 className="text-2xl font-bold text-text-primary mb-2">{plan.name}</h4>
-                    <span className="text-4xl font-bold text-color-primary">
+                    <div className="flex items-baseline gap-1 mb-3">
-                      {subscriptionService.formatPrice(plan.monthly_price)}
+                      <span className="text-4xl font-bold text-color-primary">
-                    </span>
+                        {subscriptionService.formatPrice(plan.monthly_price)}
-                    <span className="text-base text-text-secondary font-medium">/mes</span>
+                      </span>
+                      <span className="text-base text-text-secondary font-medium">/mes</span>
+                    </div>
+                    <p className="text-sm text-text-secondary leading-relaxed max-w-prose">{plan.description}</p>
                   </div>
-                  <p className="text-sm text-text-secondary leading-relaxed mb-4">{plan.description}</p>
 
+                  {/* Action Button - Desktop position */}
+                  <div className="hidden sm:flex flex-shrink-0">
+                    <Button
+                      variant={isSelected ? "primary" : "outline"}
+                      className="min-w-[140px]"
+                      size="lg"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        onPlanSelect(planKey);
+                      }}
+                    >
+                      {isSelected ? (
+                        <div className="flex items-center justify-center gap-2">
+                          <CheckCircle className="w-5 h-5" />
+                          <span className="font-semibold">Seleccionado</span>
+                        </div>
+                      ) : (
+                        <div className="flex items-center justify-center gap-2">
+                          <span className="font-semibold">Elegir Plan</span>
+                          <ArrowRight className="w-4 h-4" />
+                        </div>
+                      )}
+                    </Button>
+                  </div>
+                </div>
+
+                {/* Body Section: Limits & Features */}
+                <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 pt-4 border-t border-border-primary/50">
                   {/* Plan Limits */}
-                  <div className="space-y-2.5 pt-2 border-t border-border-primary/50">
+                  <div className="space-y-3">
                     <div className="flex items-center gap-2.5 text-sm text-text-primary">
                       <Users className="w-4 h-4 text-color-primary flex-shrink-0" />
-                      <span className="font-medium">{plan.max_users === -1 ? 'Usuarios ilimitados' : `${plan.max_users} usuarios`}</span>
+                      <span className="font-medium">{plan.max_users === -1 ? 'Usuarios ilimitados' : `${plan.max_users} usuario${plan.max_users > 1 ? 's' : ''}`}</span>
                     </div>
                     <div className="flex items-center gap-2.5 text-sm text-text-primary">
                       <MapPin className="w-4 h-4 text-color-primary flex-shrink-0" />
@@ -135,72 +165,69 @@ export const SubscriptionSelection: React.FC<SubscriptionSelectionProps> = ({
                     </div>
                     <div className="flex items-center gap-2.5 text-sm text-text-primary">
                       <Package className="w-4 h-4 text-color-primary flex-shrink-0" />
-                      <span className="font-medium">{plan.max_products === -1 ? 'Productos ilimitados' : `${plan.max_products} productos`}</span>
+                      <span className="font-medium">{plan.max_products === -1 ? 'Productos ilimitados' : `${plan.max_products} producto${plan.max_products > 1 ? 's' : ''}`}</span>
+                    </div>
+                  </div>
+
+                  {/* Features */}
+                  <div className="space-y-3 lg:pl-6 lg:border-l border-border-primary/50">
+                    <div className="flex items-center gap-2 mb-3">
+                      <TrendingUp className="w-5 h-5 text-color-primary flex-shrink-0" />
+                      <h5 className="text-base font-bold text-text-primary">
+                        {t('auth:subscription.features', 'Funcionalidades Incluidas')}
+                      </h5>
+                    </div>
+
+                    <div className="space-y-2.5">
+                      {(() => {
+                        const getPlanFeatures = (planKey: string) => {
+                          switch (planKey) {
+                            case 'starter':
+                              return [
+                                'Panel de Control Básico',
+                                'Gestión de Inventario',
+                                'Gestión de Pedidos',
+                                'Gestión de Proveedores',
+                                'Punto de Venta Básico'
+                              ];
+                            case 'professional':
+                              return [
+                                'Todo lo de Starter',
+                                'Panel Avanzado',
+                                'Analytics de Ventas',
+                                'Pronósticos con IA',
+                                'Optimización de Producción'
+                              ];
+                            case 'enterprise':
+                              return [
+                                'Todo lo de Professional',
+                                'Insights Predictivos IA',
+                                'Analytics Multi-ubicación',
+                                'Integración ERP',
+                                'Soporte 24/7 Prioritario',
+                                'API Personalizada'
+                              ];
+                            default:
+                              return [];
+                          }
+                        };
+
+                        return getPlanFeatures(planKey).map((feature, index) => (
+                          <div key={index} className="flex items-start gap-2.5 text-sm">
+                            <CheckCircle className="w-4 h-4 text-color-success flex-shrink-0 mt-0.5" />
+                            <span className="text-text-primary leading-snug">{feature}</span>
+                          </div>
+                        ));
+                      })()}
                     </div>
                   </div>
                 </div>
 
-                {/* Divider */}
+                {/* Action Button - Mobile position */}
-                <div className="hidden md:block w-px self-stretch bg-border-primary/50"></div>
+                <div className="sm:hidden pt-4 border-t border-border-primary/50">
-
-                {/* Right Section: Features */}
-                <div className="flex-1 min-w-0">
-                  <div className="flex items-center gap-2 mb-4">
-                    <TrendingUp className="w-5 h-5 text-color-primary flex-shrink-0" />
-                    <h5 className="text-base font-bold text-text-primary">
-                      {t('auth:subscription.features', 'Funcionalidades Incluidas')}
-                    </h5>
-                  </div>
-
-                  <div className="grid grid-cols-1 lg:grid-cols-2 gap-x-6 gap-y-2.5">
-                    {(() => {
-                      const getPlanFeatures = (planKey: string) => {
-                        switch (planKey) {
-                          case 'starter':
-                            return [
-                              'Panel de Control Básico',
-                              'Gestión de Inventario',
-                              'Gestión de Pedidos',
-                              'Gestión de Proveedores',
-                              'Punto de Venta Básico'
-                            ];
-                          case 'professional':
-                            return [
-                              'Todo lo de Starter',
-                              'Panel Avanzado',
-                              'Analytics de Ventas',
-                              'Pronósticos con IA',
-                              'Optimización de Producción'
-                            ];
-                          case 'enterprise':
-                            return [
-                              'Todo lo de Professional',
-                              'Insights Predictivos IA',
-                              'Analytics Multi-ubicación',
-                              'Integración ERP',
-                              'Soporte 24/7 Prioritario',
-                              'API Personalizada'
-                            ];
-                          default:
-                            return [];
-                        }
-                      };
-
-                      return getPlanFeatures(planKey).map((feature, index) => (
-                        <div key={index} className="flex items-start gap-2.5 text-sm">
-                          <CheckCircle className="w-4 h-4 text-color-success flex-shrink-0 mt-0.5" />
-                          <span className="text-text-primary leading-snug">{feature}</span>
-                        </div>
-                      ));
-                    })()}
-                  </div>
-                </div>
-
-                {/* Action Button */}
-                <div className="flex-shrink-0 md:w-28 flex items-center justify-stretch md:justify-end pt-4 md:pt-0 w-full md:w-auto border-t md:border-t-0 md:border-l border-border-primary/50 md:pl-6">
                   <Button
                     variant={isSelected ? "primary" : "outline"}
-                    className="w-full md:w-auto md:min-w-[100px]"
+                    className="w-full"
                     size="lg"
                     onClick={(e) => {
                       e.stopPropagation();
@@ -208,16 +235,15 @@ export const SubscriptionSelection: React.FC<SubscriptionSelectionProps> = ({
                     }}
                   >
                     {isSelected ? (
-                      <>
+                      <div className="flex items-center justify-center gap-2">
-                        <CheckCircle className="w-5 h-5 md:mr-2" />
+                        <CheckCircle className="w-5 h-5" />
-                        <span className="hidden md:inline">Seleccionado</span>
+                        <span className="font-semibold">Seleccionado</span>
-                      </>
+                      </div>
                     ) : (
-                      <>
+                      <div className="flex items-center justify-center gap-2">
-                        <span className="md:hidden">Seleccionar</span>
+                        <span className="font-semibold">Elegir Plan</span>
-                        <span className="hidden md:inline">Elegir Plan</span>
+                        <ArrowRight className="w-4 h-4" />
-                        <ArrowRight className="w-5 h-5 ml-2" />
+                      </div>
-                      </>
                     )}
                   </Button>
                 </div>