feat: Improve onboarding wizard UI, UX and dark mode support

This commit implements multiple improvements to the onboarding wizard: **1. Unified UI Components:** - Created InfoCard component for consistent "why is important" blocks across all steps - Created TemplateCard component for consistent template displays - Both components use global CSS variables for proper dark mode support **2. Initial Stock Entry Step Improvements:** - Fixed title/subtitle positioning using unified InfoCard component - Fixed missing count bug in warning message (now uses {{count}} interpolation) - Fixed dark mode colors using CSS variables (--color-success, --color-info, etc.) - Changed next button title from "completar configuración" to "Continuar →" - Implemented stock creation API call using useAddStock hook - Products with stock now properly save to backend on step completion **3. Dark Mode Fixes:** - Fixed QualitySetupStep: Enhanced button selection visibility with rings and shadows - Fixed TeamSetupStep: Enhanced role selection visibility with rings and shadows - Fixed AddressAutocomplete: Replaced all hardcoded colors with CSS variables - All dropdown results, icons, and hover states now properly adapt to dark mode **4. Streamlined Wizard Flow:** - Removed POI Detection step from wizard (step previously added complexity) - POI detection now runs automatically in background after tenant registration - Non-blocking approach ensures users aren't delayed by POI detection - Removed Revision step (setup-review) as it adds no user value - Completion step is now the final step before dashboard **5. Backend Updates:** - Updated onboarding_progress.py to remove poi-detection from ONBOARDING_STEPS - Updated onboarding_progress.py to remove setup-review from ONBOARDING_STEPS - Updated step dependencies to reflect streamlined flow - POI detection documented as automatic background process All changes maintain backward compatibility and use proper TypeScript types.
2025-11-12 14:48:46 +00:00
parent 5783c7ed05
commit 2c9d43e887
10 changed files with 290 additions and 137 deletions
--- a/frontend/src/components/domain/onboarding/UnifiedOnboardingWizard.tsx
+++ b/frontend/src/components/domain/onboarding/UnifiedOnboardingWizard.tsx
@@ -11,7 +11,6 @@ import { WizardProvider, useWizardContext, BakeryType, DataSource } from './cont
 import {
  BakeryTypeSelectionStep,
  RegisterTenantStep,
-  POIDetectionStep,
  FileUploadStep,
  InventoryReviewStep,
  ProductCategorizationStep,
@@ -75,15 +74,7 @@ const OnboardingWizardContent: React.FC = () => {
      isConditional: true,
      condition: (ctx) => ctx.state.bakeryType !== null,
    },
-    // Phase 2b: POI Detection
-    {
-      id: 'poi-detection',
-      title: t('onboarding:steps.poi_detection.title', 'Detección de Ubicación'),
-      description: t('onboarding:steps.poi_detection.description', 'Analizar puntos de interés cercanos'),
-      component: POIDetectionStep,
-      isConditional: true,
-      condition: (ctx) => ctx.state.bakeryType !== null && ctx.state.bakeryLocation !== undefined,
-    },
+    // POI Detection removed - now happens automatically in background after tenant registration
    // Phase 2a: AI-Assisted Inventory Setup (REFACTORED - split into 3 focused steps)
    {
      id: 'upload-sales-data',
@@ -159,14 +150,7 @@ const OnboardingWizardContent: React.FC = () => {
      component: MLTrainingStep,
      // Always show - no conditional
    },
-    {
-      id: 'setup-review',
-      title: t('onboarding:steps.review.title', 'Revisión'),
-      description: t('onboarding:steps.review.description', 'Confirma tu configuración'),
-      component: ReviewSetupStep,
-      isConditional: true,
-      condition: (ctx) => ctx.state.bakeryType !== null, // Tenant created after bakeryType is set
-    },
+    // Revision step removed - not useful for user, completion step is final step
    {
      id: 'completion',
      title: t('onboarding:steps.completion.title', 'Completado'),
@@ -562,12 +546,6 @@ const OnboardingWizardContent: React.FC = () => {
                      initialStock: undefined,
                    }))
                  }
-                : // Pass tenant info to POI detection step
-                currentStep.id === 'poi-detection'
-                ? {
-                    tenantId: wizardContext.state.tenantId,
-                    bakeryLocation: wizardContext.state.bakeryLocation,
-                  }
                : undefined
            }
          />
--- a/frontend/src/components/domain/onboarding/context/WizardContext.tsx
+++ b/frontend/src/components/domain/onboarding/context/WizardContext.tsx
@@ -269,7 +269,7 @@ export const WizardProvider: React.FC<WizardProviderProps> = ({
      steps.push('ml-training');
    }

-    steps.push('setup-review');
+    // Revision step removed - not useful for user
    steps.push('completion');

    return steps;
--- a/frontend/src/components/domain/onboarding/steps/InitialStockEntryStep.tsx
+++ b/frontend/src/components/domain/onboarding/steps/InitialStockEntryStep.tsx
@@ -4,6 +4,9 @@ import { Package, Salad, AlertCircle, ArrowRight, ArrowLeft, CheckCircle } from
 import Button from '../../../ui/Button/Button';
 import Card from '../../../ui/Card/Card';
 import Input from '../../../ui/Input/Input';
+import { useCurrentTenant } from '../../../../stores/tenant.store';
+import { useAddStock } from '../../../../api/hooks/inventory';
+import InfoCard from '../../../ui/InfoCard';

 export interface ProductWithStock {
  id: string;
@@ -32,6 +35,11 @@ export const InitialStockEntryStep: React.FC<InitialStockEntryStepProps> = ({
  initialData,
 }) => {
  const { t } = useTranslation();
+  const currentTenant = useCurrentTenant();
+  const tenantId = currentTenant?.id || '';
+  const addStockMutation = useAddStock();
+  const [isSaving, setIsSaving] = useState(false);
+
  const [products, setProducts] = useState<ProductWithStock[]>(() => {
    if (initialData?.productsWithStock) {
      return initialData.productsWithStock;
@@ -76,8 +84,36 @@ export const InitialStockEntryStep: React.FC<InitialStockEntryStepProps> = ({
    onComplete?.();
  };

-  const handleContinue = () => {
-    onComplete?.();
+  const handleContinue = async () => {
+    setIsSaving(true);
+    try {
+      // Create stock entries for products with initial stock > 0
+      const stockEntries = products.filter(p => p.initialStock && p.initialStock > 0);
+
+      if (stockEntries.length > 0) {
+        // Create stock entries in parallel
+        const stockPromises = stockEntries.map(product =>
+          addStockMutation.mutateAsync({
+            tenantId,
+            stockData: {
+              ingredient_id: product.id,
+              unit_price: 0, // Default price, can be updated later
+              notes: `Initial stock entry from onboarding`
+            }
+          })
+        );
+
+        await Promise.all(stockPromises);
+        console.log(`✅ Created ${stockEntries.length} stock entries successfully`);
+      }
+
+      onComplete?.();
+    } catch (error) {
+      console.error('Error creating stock entries:', error);
+      alert(t('onboarding:stock.error_creating_stock', 'Error al crear los niveles de stock. Por favor, inténtalo de nuevo.'));
+    } finally {
+      setIsSaving(false);
+    }
  };

  const productsWithStock = products.filter(p => p.initialStock !== undefined && p.initialStock >= 0);
@@ -106,51 +142,30 @@ export const InitialStockEntryStep: React.FC<InitialStockEntryStepProps> = ({
  }

  return (
-    <div className="max-w-4xl mx-auto p-4 md:p-6 space-y-4 md:space-y-6">
-      {/* Header */}
-      <div className="text-center space-y-2 md:space-y-3">
-        <h1 className="text-xl md:text-2xl font-bold text-text-primary px-2">
-          {t('onboarding:stock.title', 'Niveles de Stock Inicial')}
-        </h1>
-        <p className="text-sm md:text-base text-text-secondary max-w-2xl mx-auto px-4">
-          {t(
-            'onboarding:stock.subtitle',
-            'Ingresa las cantidades actuales de cada producto. Esto permite que el sistema rastree el inventario desde hoy.'
-          )}
-        </p>
-      </div>
-
-      {/* Info Banner */}
-      <Card className="bg-blue-50 border-blue-200">
-        <div className="p-4 flex items-start gap-3">
-          <AlertCircle className="w-5 h-5 text-blue-600 flex-shrink-0 mt-0.5" />
-          <div className="text-sm text-blue-900">
-            <p className="font-medium mb-1">
-              {t('onboarding:stock.info_title', '¿Por qué es importante?')}
-            </p>
-            <p className="text-blue-700">
-              {t(
-                'onboarding:stock.info_text',
-                'Sin niveles de stock iniciales, el sistema no puede alertarte sobre stock bajo, planificar producción o calcular costos correctamente. Tómate un momento para ingresar tus cantidades actuales.'
-              )}
-            </p>
-          </div>
-        </div>
-      </Card>
+    <div className="space-y-4 md:space-y-6">
+      {/* Why This Matters */}
+      <InfoCard
+        variant="info"
+        title={t('setup_wizard:why_this_matters', '¿Por qué es importante?')}
+        description={t(
+          'onboarding:stock.info_text',
+          'Sin niveles de stock iniciales, el sistema no puede alertarte sobre stock bajo, planificar producción o calcular costos correctamente. Tómate un momento para ingresar tus cantidades actuales.'
+        )}
+      />

      {/* Progress */}
      <div className="space-y-2">
        <div className="flex items-center justify-between text-sm">
-          <span className="text-text-secondary">
+          <span className="text-[var(--text-secondary)]">
            {t('onboarding:stock.progress', 'Progreso de captura')}
          </span>
-          <span className="font-medium text-text-primary">
+          <span className="font-medium text-[var(--text-primary)]">
            {productsWithStock.length} / {products.length}
          </span>
        </div>
-        <div className="w-full bg-gray-200 rounded-full h-2">
+        <div className="w-full bg-[var(--bg-secondary)] rounded-full h-2">
          <div
-            className="bg-primary-500 h-2 rounded-full transition-all duration-300"
+            className="bg-[var(--color-primary)] h-2 rounded-full transition-all duration-300"
            style={{ width: `${completionPercentage}%` }}
          />
        </div>
@@ -170,10 +185,10 @@ export const InitialStockEntryStep: React.FC<InitialStockEntryStepProps> = ({
      {ingredients.length > 0 && (
        <div className="space-y-3">
          <div className="flex items-center gap-2">
-            <div className="w-8 h-8 bg-green-100 rounded-lg flex items-center justify-center">
-              <Salad className="w-4 h-4 text-green-600" />
+            <div className="w-8 h-8 bg-[var(--color-success)]/10 dark:bg-[var(--color-success)]/20 rounded-lg flex items-center justify-center">
+              <Salad className="w-4 h-4 text-[var(--color-success)]" />
            </div>
-            <h3 className="font-semibold text-text-primary">
+            <h3 className="font-semibold text-[var(--text-primary)]">
              {t('onboarding:stock.ingredients', 'Ingredientes')} ({ingredients.length})
            </h3>
          </div>
@@ -182,16 +197,16 @@ export const InitialStockEntryStep: React.FC<InitialStockEntryStepProps> = ({
            {ingredients.map(product => {
              const hasStock = product.initialStock !== undefined;
              return (
-                <Card key={product.id} className={hasStock ? 'bg-green-50 border-green-200' : ''}>
+                <Card key={product.id} className={hasStock ? 'bg-[var(--color-success)]/10 dark:bg-[var(--color-success)]/20 border-[var(--color-success)]/30' : ''}>
                  <div className="p-3">
                    <div className="flex items-start justify-between gap-2">
                      <div className="flex-1">
-                        <div className="font-medium text-text-primary flex items-center gap-2">
+                        <div className="font-medium text-[var(--text-primary)] flex items-center gap-2">
                          {product.name}
-                          {hasStock && <CheckCircle className="w-4 h-4 text-green-600" />}
+                          {hasStock && <CheckCircle className="w-4 h-4 text-[var(--color-success)]" />}
                        </div>
                        {product.category && (
-                          <div className="text-xs text-text-secondary">{product.category}</div>
+                          <div className="text-xs text-[var(--text-secondary)]">{product.category}</div>
                        )}
                      </div>
                      <div className="flex items-center gap-2">
@@ -204,7 +219,7 @@ export const InitialStockEntryStep: React.FC<InitialStockEntryStepProps> = ({
                          step="0.01"
                          className="w-20 sm:w-24 text-right min-h-[44px]"
                        />
-                        <span className="text-sm text-text-secondary whitespace-nowrap">
+                        <span className="text-sm text-[var(--text-secondary)] whitespace-nowrap">
                          {product.unit || 'kg'}
                        </span>
                      </div>
@@ -221,10 +236,10 @@ export const InitialStockEntryStep: React.FC<InitialStockEntryStepProps> = ({
      {finishedProducts.length > 0 && (
        <div className="space-y-3">
          <div className="flex items-center gap-2">
-            <div className="w-8 h-8 bg-blue-100 rounded-lg flex items-center justify-center">
-              <Package className="w-4 h-4 text-blue-600" />
+            <div className="w-8 h-8 bg-[var(--color-info)]/10 dark:bg-[var(--color-info)]/20 rounded-lg flex items-center justify-center">
+              <Package className="w-4 h-4 text-[var(--color-info)]" />
            </div>
-            <h3 className="font-semibold text-text-primary">
+            <h3 className="font-semibold text-[var(--text-primary)]">
              {t('onboarding:stock.finished_products', 'Productos Terminados')} ({finishedProducts.length})
            </h3>
          </div>
@@ -233,16 +248,16 @@ export const InitialStockEntryStep: React.FC<InitialStockEntryStepProps> = ({
            {finishedProducts.map(product => {
              const hasStock = product.initialStock !== undefined;
              return (
-                <Card key={product.id} className={hasStock ? 'bg-blue-50 border-blue-200' : ''}>
+                <Card key={product.id} className={hasStock ? 'bg-[var(--color-info)]/10 dark:bg-[var(--color-info)]/20 border-[var(--color-info)]/30' : ''}>
                  <div className="p-3">
                    <div className="flex items-start justify-between gap-2">
                      <div className="flex-1">
-                        <div className="font-medium text-text-primary flex items-center gap-2">
+                        <div className="font-medium text-[var(--text-primary)] flex items-center gap-2">
                          {product.name}
-                          {hasStock && <CheckCircle className="w-4 h-4 text-blue-600" />}
+                          {hasStock && <CheckCircle className="w-4 h-4 text-[var(--color-info)]" />}
                        </div>
                        {product.category && (
-                          <div className="text-xs text-text-secondary">{product.category}</div>
+                          <div className="text-xs text-[var(--text-secondary)]">{product.category}</div>
                        )}
                      </div>
                      <div className="flex items-center gap-2">
@@ -255,7 +270,7 @@ export const InitialStockEntryStep: React.FC<InitialStockEntryStepProps> = ({
                          step="1"
                          className="w-24 text-right"
                        />
-                        <span className="text-sm text-text-secondary whitespace-nowrap">
+                        <span className="text-sm text-[var(--text-secondary)] whitespace-nowrap">
                          {product.unit || t('common:units', 'unidades')}
                        </span>
                      </div>
@@ -270,36 +285,35 @@ export const InitialStockEntryStep: React.FC<InitialStockEntryStepProps> = ({

      {/* Warning for incomplete */}
      {!allCompleted && (
-        <Card className="bg-amber-50 border-amber-200">
-          <div className="p-4 flex items-start gap-3">
-            <AlertCircle className="w-5 h-5 text-amber-600 flex-shrink-0 mt-0.5" />
-            <div className="text-sm text-amber-900">
-              <p className="font-medium">
-                {t('onboarding:stock.incomplete_warning', 'Faltan {count} productos por completar', {
-                  count: productsWithoutStock.length,
-                })}
-              </p>
-              <p className="text-amber-700 mt-1">
-                {t(
-                  'onboarding:stock.incomplete_help',
-                  'Puedes continuar, pero recomendamos ingresar todas las cantidades para un mejor control de inventario.'
-                )}
-              </p>
-            </div>
-          </div>
-        </Card>
+        <InfoCard
+          variant="warning"
+          title={t('onboarding:stock.incomplete_warning', 'Faltan {{count}} productos por completar', {
+            count: productsWithoutStock.length,
+          })}
+          description={t(
+            'onboarding:stock.incomplete_help',
+            'Puedes continuar, pero recomendamos ingresar todas las cantidades para un mejor control de inventario.'
+          )}
+        />
      )}

      {/* Footer Actions */}
-      <div className="flex items-center justify-between pt-6 border-t border-border-primary">
+      <div className="flex items-center justify-between pt-6 border-t border-[var(--border-primary)]">
        <Button onClick={onPrevious} variant="ghost" leftIcon={<ArrowLeft />}>
          {t('common:previous', 'Anterior')}
        </Button>

-        <Button onClick={handleContinue} variant="primary" rightIcon={<ArrowRight />}>
-          {allCompleted
-            ? t('onboarding:stock.complete', 'Completar Configuración')
-            : t('onboarding:stock.continue_anyway', 'Continuar de todos modos')}
+        <Button
+          onClick={handleContinue}
+          variant="primary"
+          rightIcon={<ArrowRight />}
+          disabled={isSaving}
+        >
+          {isSaving
+            ? t('common:saving', 'Guardando...')
+            : allCompleted
+              ? t('onboarding:stock.continue_to_next', 'Continuar →')
+              : t('onboarding:stock.continue_anyway', 'Continuar de todos modos')}
        </Button>
      </div>
    </div>
--- a/frontend/src/components/domain/onboarding/steps/RegisterTenantStep.tsx
+++ b/frontend/src/components/domain/onboarding/steps/RegisterTenantStep.tsx
@@ -5,6 +5,7 @@ import { useRegisterBakery } from '../../../../api/hooks/tenant';
 import { BakeryRegistration } from '../../../../api/types/tenant';
 import { AddressResult } from '../../../../services/api/geocodingApi';
 import { useWizardContext } from '../context';
+import { poiContextApi } from '../../../../services/api/poiContextApi';

 interface RegisterTenantStepProps {
  onNext: () => void;
@@ -112,8 +113,25 @@ export const RegisterTenantStep: React.FC<RegisterTenantStepProps> = ({
    try {
      const tenant = await registerBakery.mutateAsync(formData);

-      // Update the wizard context with tenant info and pass the bakeryLocation coordinates
-      // that were captured during address selection to the next step (POI Detection)
+      // Trigger POI detection in the background (non-blocking)
+      // This replaces the removed POI Detection step
+      const bakeryLocation = wizardContext.state.bakeryLocation;
+      if (bakeryLocation?.latitude && bakeryLocation?.longitude && tenant.id) {
+        // Run POI detection asynchronously without blocking the wizard flow
+        poiContextApi.detectPOIs(
+          tenant.id,
+          bakeryLocation.latitude,
+          bakeryLocation.longitude,
+          false // use_cache = false for initial detection
+        ).then((result) => {
+          console.log(`✅ POI detection completed automatically for tenant ${tenant.id}:`, result.summary);
+        }).catch((error) => {
+          console.warn('⚠️  Background POI detection failed (non-blocking):', error);
+          // This is non-critical, so we don't block the user
+        });
+      }
+
+      // Update the wizard context with tenant info
      onComplete({
        tenant,
        tenantId: tenant.id,
--- a/frontend/src/components/domain/setup-wizard/steps/QualitySetupStep.tsx
+++ b/frontend/src/components/domain/setup-wizard/steps/QualitySetupStep.tsx
@@ -274,10 +274,10 @@ export const QualitySetupStep: React.FC<SetupStepProps> = ({ onUpdate, onComplet
                      console.log('Check type clicked:', option.value, 'current:', formData.check_type);
                      setFormData(prev => ({ ...prev, check_type: option.value }));
                    }}
-                    className={`p-3 text-left border rounded-lg transition-colors cursor-pointer ${
+                    className={`p-3 text-left border-2 rounded-lg transition-all cursor-pointer ${
                      formData.check_type === option.value
-                        ? 'border-[var(--color-primary)] bg-[var(--color-primary)]/10'
-                        : 'border-[var(--border-secondary)] hover:border-[var(--border-primary)]'
+                        ? 'border-[var(--color-primary)] bg-[var(--color-primary)]/20 shadow-lg ring-2 ring-[var(--color-primary)]/30'
+                        : 'border-[var(--border-secondary)] hover:border-[var(--color-primary)]/50 hover:bg-[var(--bg-secondary)]'
                    }`}
                  >
                    <div className="text-lg mb-1">{option.icon}</div>
@@ -325,10 +325,10 @@ export const QualitySetupStep: React.FC<SetupStepProps> = ({ onUpdate, onComplet
                          : [...prev.applicable_stages, option.value]
                      }));
                    }}
-                    className={`p-2 text-sm text-left border rounded-lg transition-colors cursor-pointer ${
+                    className={`p-2 text-sm text-left border-2 rounded-lg transition-all cursor-pointer ${
                      formData.applicable_stages.includes(option.value)
-                        ? 'border-[var(--color-primary)] bg-[var(--color-primary)]/10 text-[var(--color-primary)]'
-                        : 'border-[var(--border-secondary)] text-[var(--text-secondary)] hover:border-[var(--border-primary)]'
+                        ? 'border-[var(--color-primary)] bg-[var(--color-primary)]/20 text-[var(--color-primary)] font-semibold shadow-md ring-1 ring-[var(--color-primary)]/30'
+                        : 'border-[var(--border-secondary)] text-[var(--text-secondary)] hover:border-[var(--color-primary)]/50 hover:bg-[var(--bg-secondary)]'
                    }`}
                  >
                    {option.label}
--- a/frontend/src/components/domain/setup-wizard/steps/TeamSetupStep.tsx
+++ b/frontend/src/components/domain/setup-wizard/steps/TeamSetupStep.tsx
@@ -247,10 +247,10 @@ export const TeamSetupStep: React.FC<SetupStepProps> = ({ onUpdate, onComplete,
                    key={option.value}
                    type="button"
                    onClick={() => setFormData({ ...formData, role: option.value })}
-                    className={`p-3 text-left border rounded-lg transition-colors ${
+                    className={`p-3 text-left border-2 rounded-lg transition-all ${
                      formData.role === option.value
-                        ? 'border-[var(--color-primary)] bg-[var(--color-primary)]/10'
-                        : 'border-[var(--border-secondary)] hover:border-[var(--border-primary)]'
+                        ? 'border-[var(--color-primary)] bg-[var(--color-primary)]/20 shadow-lg ring-2 ring-[var(--color-primary)]/30'
+                        : 'border-[var(--border-secondary)] hover:border-[var(--color-primary)]/50 hover:bg-[var(--bg-secondary)]'
                    }`}
                  >
                    <div className="flex items-center gap-2 mb-1">
--- a/frontend/src/components/ui/AddressAutocomplete.tsx
+++ b/frontend/src/components/ui/AddressAutocomplete.tsx
@@ -99,7 +99,7 @@ export const AddressAutocomplete: React.FC<AddressAutocompleteProps> = ({
  return (
    <div ref={wrapperRef} className={`relative ${className}`}>
      <div className="relative">
-        <MapPin className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
+        <MapPin className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-[var(--text-secondary)]" />

        <Input
          type="text"
@@ -109,15 +109,15 @@ export const AddressAutocomplete: React.FC<AddressAutocompleteProps> = ({
          placeholder={placeholder}
          disabled={disabled}
          required={required}
-          className={`pl-10 pr-10 ${selectedAddress ? 'border-green-500' : ''}`}
+          className={`pl-10 pr-10 ${selectedAddress ? 'border-[var(--color-success)]' : ''}`}
        />

        <div className="absolute right-3 top-1/2 transform -translate-y-1/2 flex items-center gap-1">
          {isLoading && (
-            <Loader2 className="h-4 w-4 animate-spin text-gray-400" />
+            <Loader2 className="h-4 w-4 animate-spin text-[var(--text-secondary)]" />
          )}
          {selectedAddress && !isLoading && (
-            <Check className="h-4 w-4 text-green-600" />
+            <Check className="h-4 w-4 text-[var(--color-success)]" />
          )}
          {query && !disabled && (
            <Button
@@ -125,7 +125,7 @@ export const AddressAutocomplete: React.FC<AddressAutocompleteProps> = ({
              variant="ghost"
              size="sm"
              onClick={handleClear}
-              className="h-6 w-6 p-0 hover:bg-gray-100"
+              className="h-6 w-6 p-0 hover:bg-[var(--bg-secondary)]"
            >
              <X className="h-3 w-3" />
            </Button>
@@ -135,36 +135,36 @@ export const AddressAutocomplete: React.FC<AddressAutocompleteProps> = ({

      {/* Error message */}
      {error && (
-        <div className="mt-1 text-sm text-red-600">
+        <div className="mt-1 text-sm text-[var(--color-error)]">
          {error}
        </div>
      )}

      {/* Results dropdown */}
      {showResults && results.length > 0 && (
-        <Card className="absolute z-50 w-full mt-1 max-h-80 overflow-y-auto shadow-lg">
+        <Card className="absolute z-50 w-full mt-1 max-h-80 overflow-y-auto shadow-lg bg-[var(--bg-primary)]">
          <CardBody className="p-0">
-            <div className="divide-y divide-gray-100">
+            <div className="divide-y divide-[var(--border-secondary)]">
              {results.map((result) => (
                <button
                  key={result.place_id}
                  type="button"
                  onClick={() => handleSelectAddress(result)}
-                  className="w-full text-left px-4 py-3 hover:bg-gray-50 focus:bg-gray-50 focus:outline-none transition-colors"
+                  className="w-full text-left px-4 py-3 hover:bg-[var(--bg-secondary)] focus:bg-[var(--bg-secondary)] focus:outline-none transition-colors"
                >
                  <div className="flex items-start gap-3">
-                    <MapPin className="h-4 w-4 text-blue-600 mt-1 flex-shrink-0" />
+                    <MapPin className="h-4 w-4 text-[var(--color-primary)] mt-1 flex-shrink-0" />
                    <div className="flex-1 min-w-0">
-                      <div className="text-sm font-medium text-gray-900 truncate">
+                      <div className="text-sm font-medium text-[var(--text-primary)] truncate">
                        {result.address.road && result.address.house_number
                          ? `${result.address.road}, ${result.address.house_number}`
                          : result.address.road || result.display_name}
                      </div>
-                      <div className="text-xs text-gray-600 truncate mt-0.5">
+                      <div className="text-xs text-[var(--text-secondary)] truncate mt-0.5">
                        {result.address.city || result.address.municipality || result.address.suburb}
                        {result.address.postcode && `, ${result.address.postcode}`}
                      </div>
-                      <div className="text-xs text-gray-400 mt-1">
+                      <div className="text-xs text-[var(--text-tertiary)] mt-1">
                        {result.lat.toFixed(6)}, {result.lon.toFixed(6)}
                      </div>
                    </div>
@@ -178,9 +178,9 @@ export const AddressAutocomplete: React.FC<AddressAutocompleteProps> = ({

      {/* No results message */}
      {showResults && !isLoading && query.length >= 3 && results.length === 0 && !error && (
-        <Card className="absolute z-50 w-full mt-1 shadow-lg">
+        <Card className="absolute z-50 w-full mt-1 shadow-lg bg-[var(--bg-primary)]">
          <CardBody className="p-4">
-            <div className="text-sm text-gray-600 text-center">
+            <div className="text-sm text-[var(--text-secondary)] text-center">
              No addresses found for "{query}"
            </div>
          </CardBody>
--- a/frontend/src/components/ui/InfoCard.tsx
+++ b/frontend/src/components/ui/InfoCard.tsx
@@ -0,0 +1,92 @@
+import React from 'react';
+import { AlertCircle, Info, Lightbulb, Sparkles } from 'lucide-react';
+
+export type InfoCardVariant = 'info' | 'warning' | 'success' | 'tip' | 'template';
+
+interface InfoCardProps {
+  title: string;
+  description: string;
+  variant?: InfoCardVariant;
+  icon?: React.ReactNode;
+  children?: React.ReactNode;
+  className?: string;
+}
+
+/**
+ * Unified InfoCard component for displaying consistent info/warning/tip blocks
+ * across all onboarding wizard steps.
+ *
+ * Uses global styling and color palette for dark mode compatibility.
+ */
+export const InfoCard: React.FC<InfoCardProps> = ({
+  title,
+  description,
+  variant = 'info',
+  icon,
+  children,
+  className = '',
+}) => {
+  const getVariantStyles = () => {
+    switch (variant) {
+      case 'info':
+        return {
+          container: 'bg-[var(--color-info)]/10 border-[var(--color-info)]/20',
+          icon: 'text-[var(--color-info)]',
+          defaultIcon: <Info className="w-5 h-5" />,
+        };
+      case 'warning':
+        return {
+          container: 'bg-[var(--color-warning)]/10 border-[var(--color-warning)]/20',
+          icon: 'text-[var(--color-warning)]',
+          defaultIcon: <AlertCircle className="w-5 h-5" />,
+        };
+      case 'success':
+        return {
+          container: 'bg-[var(--color-success)]/10 border-[var(--color-success)]/20',
+          icon: 'text-[var(--color-success)]',
+          defaultIcon: <Sparkles className="w-5 h-5" />,
+        };
+      case 'tip':
+        return {
+          container: 'bg-[var(--color-primary)]/10 border-[var(--color-primary)]/20',
+          icon: 'text-[var(--color-primary)]',
+          defaultIcon: <Lightbulb className="w-5 h-5" />,
+        };
+      case 'template':
+        return {
+          container: 'bg-gradient-to-br from-purple-50 to-blue-50 dark:from-purple-900/10 dark:to-blue-900/10 border-purple-200 dark:border-purple-700',
+          icon: 'text-purple-600 dark:text-purple-400',
+          defaultIcon: <Sparkles className="w-5 h-5" />,
+        };
+      default:
+        return {
+          container: 'bg-[var(--color-info)]/10 border-[var(--color-info)]/20',
+          icon: 'text-[var(--color-info)]',
+          defaultIcon: <Info className="w-5 h-5" />,
+        };
+    }
+  };
+
+  const styles = getVariantStyles();
+
+  return (
+    <div className={`${styles.container} border rounded-lg p-4 ${className}`}>
+      <h3 className="font-semibold text-[var(--text-primary)] mb-2 flex items-center gap-2">
+        <span className={styles.icon}>
+          {icon || styles.defaultIcon}
+        </span>
+        {title}
+      </h3>
+      <p className="text-sm text-[var(--text-secondary)]">
+        {description}
+      </p>
+      {children && (
+        <div className="mt-3">
+          {children}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default InfoCard;
--- a/frontend/src/components/ui/TemplateCard.tsx
+++ b/frontend/src/components/ui/TemplateCard.tsx
@@ -0,0 +1,55 @@
+import React from 'react';
+
+interface TemplateCardProps {
+  icon: string | React.ReactNode;
+  title: string;
+  description: string;
+  itemsCount?: number;
+  onClick: () => void;
+  className?: string;
+}
+
+/**
+ * Unified TemplateCard component for displaying template options
+ * across all onboarding wizard steps.
+ *
+ * Uses global styling and color palette for dark mode compatibility.
+ */
+export const TemplateCard: React.FC<TemplateCardProps> = ({
+  icon,
+  title,
+  description,
+  itemsCount,
+  onClick,
+  className = '',
+}) => {
+  return (
+    <button
+      onClick={onClick}
+      className={`text-left p-4 bg-[var(--bg-primary)] dark:bg-[var(--surface-secondary)] border-2 border-purple-200 dark:border-purple-700 rounded-lg hover:border-purple-400 dark:hover:border-purple-500 hover:shadow-md transition-all group ${className}`}
+    >
+      <div className="flex items-start gap-3">
+        {typeof icon === 'string' ? (
+          <span className="text-3xl group-hover:scale-110 transition-transform">{icon}</span>
+        ) : (
+          <span className="group-hover:scale-110 transition-transform">{icon}</span>
+        )}
+        <div className="flex-1 min-w-0">
+          <h4 className="font-medium text-[var(--text-primary)] mb-1">
+            {title}
+          </h4>
+          <p className="text-xs text-[var(--text-secondary)] mb-2">
+            {description}
+          </p>
+          {itemsCount !== undefined && (
+            <p className="text-xs text-purple-600 dark:text-purple-400 font-medium">
+              {itemsCount} items
+            </p>
+          )}
+        </div>
+      </div>
+    </button>
+  );
+};
+
+export default TemplateCard;