697 lines
28 KiB
TypeScript
697 lines
28 KiB
TypeScript
// frontend/src/pages/onboarding.tsx - ORIGINAL DESIGN WITH AUTH FIXES ONLY
|
|
import React, { useState, useRef, useEffect, useCallback } from 'react';
|
|
import { useRouter } from 'next/router';
|
|
import Head from 'next/head';
|
|
import {
|
|
CheckIcon,
|
|
ArrowRightIcon,
|
|
ArrowLeftIcon,
|
|
CloudArrowUpIcon,
|
|
BuildingStorefrontIcon,
|
|
UserCircleIcon,
|
|
CpuChipIcon
|
|
} from '@heroicons/react/24/outline';
|
|
import { SalesUploader } from '../components/data/SalesUploader';
|
|
import { TrainingProgressCard } from '../components/training/TrainingProgressCard';
|
|
import { useAuth, RegisterData } from '../contexts/AuthContext';
|
|
import { dataApi, TrainingRequest, TrainingTask } from '../api/services/api';
|
|
import { NotificationToast } from '../components/common/NotificationToast';
|
|
import { Product, defaultProducts } from '../components/common/ProductSelector';
|
|
|
|
import {
|
|
TenantCreate
|
|
} from '@/api/services';
|
|
|
|
|
|
import api from '@/api/services';
|
|
|
|
// Define the shape of the form data
|
|
interface OnboardingFormData {
|
|
// Step 1: User Registration
|
|
full_name: string;
|
|
email: string;
|
|
password: string;
|
|
confirm_password: string;
|
|
|
|
// Step 2: Bakery Information
|
|
bakery_name: string;
|
|
address: string;
|
|
city: string;
|
|
postal_code: string;
|
|
has_nearby_schools: boolean;
|
|
has_nearby_offices: boolean;
|
|
selected_products: Product[];
|
|
|
|
// Step 3: Sales History File
|
|
salesFile: File | null;
|
|
|
|
// Step 4: Model Training status
|
|
trainingStatus: 'pending' | 'running' | 'completed' | 'failed';
|
|
trainingTaskId: string | null;
|
|
}
|
|
|
|
const OnboardingPage: React.FC = () => {
|
|
const router = useRouter();
|
|
const { user, register } = useAuth(); // FIXED: Removed login - not needed anymore
|
|
const [currentStep, setCurrentStep] = useState(1);
|
|
const [completedSteps, setCompletedSteps] = useState<number[]>([]);
|
|
const [loading, setLoading] = useState(false);
|
|
const [notification, setNotification] = useState<{
|
|
id: string;
|
|
type: 'success' | 'error' | 'warning' | 'info';
|
|
title: string;
|
|
message: string;
|
|
} | null>(null);
|
|
|
|
const [formData, setFormData] = useState<OnboardingFormData>({
|
|
full_name: '',
|
|
email: '',
|
|
password: '',
|
|
confirm_password: '',
|
|
bakery_name: '',
|
|
address: '',
|
|
city: 'Madrid', // Default to Madrid
|
|
postal_code: '',
|
|
has_nearby_schools: false,
|
|
has_nearby_offices: false,
|
|
selected_products: defaultProducts.slice(0, 3), // Default selected products
|
|
salesFile: null,
|
|
trainingStatus: 'pending',
|
|
trainingTaskId: null,
|
|
});
|
|
|
|
const [errors, setErrors] = useState<Partial<OnboardingFormData>>({});
|
|
|
|
const addressInputRef = useRef<HTMLInputElement>(null); // Ref for the address input
|
|
let autocompleteTimeout: NodeJS.Timeout | null = null; // For debouncing API calls
|
|
|
|
const handleAddressInputChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
|
|
const query = e.target.value;
|
|
setFormData(prevData => ({ ...prevData, address: query })); // Update address immediately
|
|
|
|
if (autocompleteTimeout) {
|
|
clearTimeout(autocompleteTimeout);
|
|
}
|
|
|
|
if (query.length < 3) { // Only search if at least 3 characters are typed
|
|
return;
|
|
}
|
|
|
|
autocompleteTimeout = setTimeout(async () => {
|
|
try {
|
|
// Construct the Nominatim API URL
|
|
// Make sure NOMINATIM_PORT matches your .env file, default is 8080
|
|
const gatewayNominatimApiUrl = `/api/v1/nominatim/search`; // Relative path if frontend serves from gateway's domain/port
|
|
|
|
const params = new URLSearchParams({
|
|
q: query,
|
|
format: 'json',
|
|
addressdetails: '1', // Request detailed address components
|
|
limit: '5', // Number of results to return
|
|
'accept-language': 'es', // Request results in Spanish
|
|
countrycodes: 'es' // Restrict search to Spain
|
|
});
|
|
|
|
const response = await fetch(`${gatewayNominatimApiUrl}?${params.toString()}`);
|
|
const data = await response.json();
|
|
|
|
// Process Nominatim results and update form data
|
|
if (data && data.length > 0) {
|
|
// Take the first result or let the user choose from suggestions if you implement a dropdown
|
|
const place = data[0]; // For simplicity, take the first result
|
|
|
|
let address = '';
|
|
let city = '';
|
|
let postal_code = '';
|
|
|
|
// Nominatim's 'address' object contains components
|
|
if (place.address) {
|
|
const addr = place.address;
|
|
|
|
// Reconstruct the address in a common format
|
|
const street = addr.road || '';
|
|
const houseNumber = addr.house_number || '';
|
|
address = `${street} ${houseNumber}`.trim();
|
|
|
|
city = addr.city || addr.town || addr.village || '';
|
|
postal_code = addr.postcode || '';
|
|
}
|
|
|
|
setFormData(prevData => ({
|
|
...prevData,
|
|
address: address || query, // Use parsed address or fall back to user input
|
|
city: city || prevData.city,
|
|
postal_code: postal_code || prevData.postal_code,
|
|
}));
|
|
}
|
|
} catch (error) {
|
|
console.error('Error fetching Nominatim suggestions:', error);
|
|
// Optionally show an error notification
|
|
// showNotification('error', 'Error de Autocompletado', 'No se pudieron cargar las sugerencias de dirección.');
|
|
}
|
|
}, 500); // Debounce time: 500ms
|
|
}, []); // Re-create if dependencies change, none for now
|
|
|
|
useEffect(() => {
|
|
// If user is already authenticated and on onboarding, redirect to dashboard
|
|
if (user && currentStep === 1) {
|
|
router.push('/dashboard');
|
|
}
|
|
}, [user, router, currentStep]);
|
|
|
|
const showNotification = useCallback((type: 'success' | 'error' | 'warning' | 'info', title: string, message: string) => {
|
|
setNotification({ id: Date.now().toString(), type, title, message });
|
|
setTimeout(() => setNotification(null), 5000);
|
|
}, []);
|
|
|
|
const handleNext = async () => {
|
|
setErrors({}); // Clear previous errors
|
|
let newErrors: Partial<OnboardingFormData> = {};
|
|
|
|
// Validate current step before proceeding
|
|
// In your handleNext function, for step 1 registration:
|
|
if (currentStep === 1) {
|
|
if (!formData.full_name) newErrors.full_name = 'Nombre completo es requerido.';
|
|
if (!formData.email || !/\S+@\S+\.\S+/.test(formData.email)) newErrors.email = 'Email inválido.';
|
|
if (!formData.password || formData.password.length < 6) newErrors.password = 'La contraseña debe tener al menos 6 caracteres.';
|
|
if (formData.password !== formData.confirm_password) newErrors.confirm_password = 'Las contraseñas no coinciden.';
|
|
|
|
if (Object.keys(newErrors).length > 0) {
|
|
setErrors(newErrors);
|
|
return;
|
|
}
|
|
|
|
setLoading(true);
|
|
try {
|
|
const registerData: RegisterData = {
|
|
full_name: formData.full_name,
|
|
email: formData.email,
|
|
password: formData.password,
|
|
};
|
|
|
|
console.log('📤 Sending registration request:', registerData);
|
|
|
|
// ✅ FIX: Better error handling for registration
|
|
try {
|
|
await register(registerData);
|
|
showNotification('success', 'Registro exitoso', 'Tu cuenta ha sido creada.');
|
|
setCompletedSteps([...completedSteps, 1]);
|
|
} catch (registrationError: any) {
|
|
console.error('❌ Registration failed:', registrationError);
|
|
|
|
// ✅ FIX: Handle specific error cases
|
|
if (registrationError.message?.includes('already exists')) {
|
|
// If user already exists, show a more helpful message
|
|
showNotification('info', 'Usuario existente', 'Ya tienes una cuenta. Has sido conectado automáticamente.');
|
|
setCompletedSteps([...completedSteps, 1]);
|
|
} else if (registrationError.message?.includes('Network error')) {
|
|
newErrors.email = 'Error de conexión. Verifica tu internet.';
|
|
showNotification('error', 'Error de conexión', newErrors.email);
|
|
setErrors(newErrors);
|
|
return;
|
|
} else {
|
|
// Other registration errors
|
|
newErrors.email = registrationError.message || 'Error al registrar usuario.';
|
|
showNotification('error', 'Error de registro', newErrors.email);
|
|
setErrors(newErrors);
|
|
return;
|
|
}
|
|
}
|
|
} catch (err: any) {
|
|
// This catch block should rarely be reached now
|
|
console.error('❌ Unexpected error:', err);
|
|
newErrors.email = 'Error inesperado. Inténtalo de nuevo.';
|
|
showNotification('error', 'Error inesperado', newErrors.email);
|
|
setErrors(newErrors);
|
|
return;
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
} else if (currentStep === 2) {
|
|
if (!formData.bakery_name) newErrors.bakery_name = 'Nombre de la panadería es requerido.';
|
|
if (!formData.address) newErrors.address = 'Dirección es requerida.';
|
|
if (!formData.city) newErrors.city = 'Ciudad es requerida.';
|
|
if (!formData.postal_code) newErrors.postal_code = 'Código postal es requerido.';
|
|
if (formData.selected_products.length === 0) newErrors.selected_products = 'Debes seleccionar al menos un producto.' as any;
|
|
|
|
if (Object.keys(newErrors).length > 0) {
|
|
setErrors(newErrors);
|
|
return;
|
|
}
|
|
|
|
setLoading(true);
|
|
try {
|
|
// Prepare data for tenant (bakery) registration
|
|
const tenantData: TenantCreate = {
|
|
name: formData.bakery_name,
|
|
email: formData.email, // Assuming tenant email is same as user email
|
|
phone: '', // Placeholder, add a field in UI if needed
|
|
address: `${formData.address}, ${formData.city}, ${formData.postal_code}`,
|
|
latitude: 0, // Placeholder, integrate with Nominatim if needed
|
|
longitude: 0, // Placeholder, integrate with Nominatim if needed
|
|
business_type: 'individual_bakery', // Default to individual_bakery
|
|
settings: {
|
|
has_nearby_schools: formData.has_nearby_schools,
|
|
has_nearby_offices: formData.has_nearby_offices,
|
|
city: formData.city,
|
|
selected_products: formData.selected_products.map(p => p.name),
|
|
}
|
|
};
|
|
|
|
console.log('📤 Sending tenant registration request:', tenantData);
|
|
// Call the tenant registration API
|
|
await api.tenant.registerBakery(tenantData);
|
|
showNotification('success', 'Panadería registrada', 'La información de tu panadería ha sido guardada.');
|
|
setCompletedSteps([...completedSteps, 2]);
|
|
} catch (err: any) {
|
|
console.error('❌ Tenant registration failed:', err);
|
|
showNotification('error', 'Error al registrar panadería', err.message || 'No se pudo registrar la información de la panadería.');
|
|
setLoading(false); // Stop loading on error
|
|
return; // Prevent moving to next step if registration fails
|
|
} finally {
|
|
setLoading(false); // Stop loading after attempt
|
|
}
|
|
|
|
} else if (currentStep === 3) {
|
|
if (!formData.salesFile) {
|
|
showNotification('warning', 'Archivo requerido', 'Debes subir un archivo de historial de ventas.');
|
|
return;
|
|
}
|
|
|
|
setCompletedSteps([...completedSteps, 3]);
|
|
} else if (currentStep === 4) {
|
|
setLoading(true);
|
|
try {
|
|
// Start model training logic here
|
|
const trainingRequest: TrainingRequest = {
|
|
products: formData.selected_products.map(p => p.name),
|
|
location_factors: {
|
|
has_nearby_schools: formData.has_nearby_schools,
|
|
has_nearby_offices: formData.has_nearby_offices,
|
|
city: formData.city
|
|
}
|
|
};
|
|
|
|
showNotification('success', 'Entrenamiento iniciado', 'El modelo de predicción está siendo entrenado.');
|
|
setCompletedSteps([...completedSteps, 4]);
|
|
} catch (err: any) {
|
|
showNotification('error', 'Error de entrenamiento', 'No se pudo iniciar el entrenamiento del modelo.');
|
|
return;
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}
|
|
|
|
// Move to next step
|
|
if (currentStep < 5) {
|
|
setCurrentStep(currentStep + 1);
|
|
}
|
|
};
|
|
|
|
const handleBack = () => {
|
|
if (currentStep > 1) {
|
|
setCurrentStep(currentStep - 1);
|
|
}
|
|
};
|
|
|
|
const handleSubmitFinal = async () => {
|
|
setLoading(true);
|
|
try {
|
|
showNotification('success', '¡Configuración completa!', 'Tu sistema está listo para usar.');
|
|
setTimeout(() => {
|
|
router.push('/dashboard');
|
|
}, 2000);
|
|
} catch (err: any) {
|
|
showNotification('error', 'Error final', 'Hubo un problema al completar la configuración.');
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
// ORIGINAL DESIGN: Step configuration with icons and content
|
|
const steps = [
|
|
{
|
|
id: 1,
|
|
name: 'Cuenta de Usuario',
|
|
icon: UserCircleIcon,
|
|
content: (
|
|
<div className="space-y-4">
|
|
<div>
|
|
<label htmlFor="full_name" className="block text-sm font-medium text-gray-700">
|
|
Nombre Completo
|
|
</label>
|
|
<input
|
|
type="text"
|
|
id="full_name"
|
|
className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:ring-pania-blue focus:border-pania-blue sm:text-sm"
|
|
value={formData.full_name}
|
|
onChange={(e) => setFormData({ ...formData, full_name: e.target.value })}
|
|
required
|
|
/>
|
|
{errors.full_name && <p className="mt-1 text-sm text-red-600">{errors.full_name}</p>}
|
|
</div>
|
|
<div>
|
|
<label htmlFor="email" className="block text-sm font-medium text-gray-700">
|
|
Email
|
|
</label>
|
|
<input
|
|
type="email"
|
|
id="email"
|
|
className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:ring-pania-blue focus:border-pania-blue sm:text-sm"
|
|
value={formData.email}
|
|
onChange={(e) => setFormData({ ...formData, email: e.target.value })}
|
|
required
|
|
/>
|
|
{errors.email && <p className="mt-1 text-sm text-red-600">{errors.email}</p>}
|
|
</div>
|
|
<div>
|
|
<label htmlFor="password" className="block text-sm font-medium text-gray-700">
|
|
Contraseña
|
|
</label>
|
|
<input
|
|
type="password"
|
|
id="password"
|
|
className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:ring-pania-blue focus:border-pania-blue sm:text-sm"
|
|
value={formData.password}
|
|
onChange={(e) => setFormData({ ...formData, password: e.target.value })}
|
|
required
|
|
/>
|
|
{errors.password && <p className="mt-1 text-sm text-red-600">{errors.password}</p>}
|
|
</div>
|
|
<div>
|
|
<label htmlFor="confirm_password" className="block text-sm font-medium text-gray-700">
|
|
Confirmar Contraseña
|
|
</label>
|
|
<input
|
|
type="password"
|
|
id="confirm_password"
|
|
className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:ring-pania-blue focus:border-pania-blue sm:text-sm"
|
|
value={formData.confirm_password}
|
|
onChange={(e) => setFormData({ ...formData, confirm_password: e.target.value })}
|
|
required
|
|
/>
|
|
{errors.confirm_password && <p className="mt-1 text-sm text-red-600">{errors.confirm_password}</p>}
|
|
</div>
|
|
</div>
|
|
),
|
|
},
|
|
{
|
|
id: 2,
|
|
name: 'Detalles de la Panadería',
|
|
icon: BuildingStorefrontIcon,
|
|
content: (
|
|
<div className="space-y-4">
|
|
<div>
|
|
<label htmlFor="bakery_name" className="block text-sm font-medium text-gray-700">
|
|
Nombre de la Panadería
|
|
</label>
|
|
<input
|
|
type="text"
|
|
id="bakery_name"
|
|
className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:ring-pania-blue focus:border-pania-blue sm:text-sm"
|
|
value={formData.bakery_name}
|
|
onChange={(e) => setFormData({ ...formData, bakery_name: e.target.value })}
|
|
required
|
|
/>
|
|
{errors.bakery_name && <p className="mt-1 text-sm text-red-600">{errors.bakery_name}</p>}
|
|
</div>
|
|
<div>
|
|
<label htmlFor="address" className="block text-sm font-medium text-gray-700">
|
|
Dirección
|
|
</label>
|
|
<input
|
|
type="text"
|
|
id="address"
|
|
ref={addressInputRef}
|
|
className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:ring-pania-blue focus:border-pania-blue sm:text-sm"
|
|
value={formData.address}
|
|
// Use the new handler for changes to trigger autocomplete
|
|
onChange={handleAddressInputChange}
|
|
required
|
|
/>
|
|
{errors.address && <p className="mt-1 text-sm text-red-600">{errors.address}</p>}
|
|
</div>
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<label htmlFor="city" className="block text-sm font-medium text-gray-700">
|
|
Ciudad
|
|
</label>
|
|
<input
|
|
type="text"
|
|
id="city"
|
|
className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:ring-pania-blue focus:border-pania-blue sm:text-sm"
|
|
value={formData.city}
|
|
onChange={(e) => setFormData({ ...formData, city: e.target.value })}
|
|
required
|
|
/>
|
|
{errors.city && <p className="mt-1 text-sm text-red-600">{errors.city}</p>}
|
|
</div>
|
|
<div>
|
|
<label htmlFor="postal_code" className="block text-sm font-medium text-gray-700">
|
|
Código Postal
|
|
</label>
|
|
<input
|
|
type="text"
|
|
id="postal_code"
|
|
className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:ring-pania-blue focus:border-pania-blue sm:text-sm"
|
|
value={formData.postal_code}
|
|
onChange={(e) => setFormData({ ...formData, postal_code: e.target.value })}
|
|
required
|
|
/>
|
|
{errors.postal_code && <p className="mt-1 text-sm text-red-600">{errors.postal_code}</p>}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-3">
|
|
<p className="text-sm font-medium text-gray-700">Factores de Ubicación</p>
|
|
<div className="space-y-2">
|
|
<label className="flex items-center">
|
|
<input
|
|
type="checkbox"
|
|
checked={formData.has_nearby_schools}
|
|
onChange={(e) => setFormData({ ...formData, has_nearby_schools: e.target.checked })}
|
|
className="rounded border-gray-300 text-pania-blue focus:ring-pania-blue"
|
|
/>
|
|
<span className="ml-2 text-sm text-gray-700">Hay colegios cerca</span>
|
|
</label>
|
|
<label className="flex items-center">
|
|
<input
|
|
type="checkbox"
|
|
checked={formData.has_nearby_offices}
|
|
onChange={(e) => setFormData({ ...formData, has_nearby_offices: e.target.checked })}
|
|
className="rounded border-gray-300 text-pania-blue focus:ring-pania-blue"
|
|
/>
|
|
<span className="ml-2 text-sm text-gray-700">Hay oficinas cerca</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
),
|
|
},
|
|
{
|
|
id: 3,
|
|
name: 'Historial de Ventas',
|
|
icon: CloudArrowUpIcon,
|
|
content: (
|
|
<div className="space-y-4">
|
|
<div className="text-center">
|
|
<CloudArrowUpIcon className="mx-auto h-12 w-12 text-pania-blue" />
|
|
<h3 className="mt-4 text-lg font-medium text-gray-900">
|
|
Sube tu historial de ventas
|
|
</h3>
|
|
<p className="mt-2 text-sm text-gray-600">
|
|
Para crear predicciones precisas, necesitamos tus datos históricos de ventas
|
|
</p>
|
|
</div>
|
|
<SalesUploader
|
|
onUpload={async (file) => {
|
|
// Store the file in form data
|
|
setFormData({ ...formData, salesFile: file });
|
|
// Show success notification
|
|
showNotification('success', 'Archivo seleccionado', `Archivo "${file.name}" listo para procesar.`);
|
|
}}
|
|
/>
|
|
</div>
|
|
),
|
|
},
|
|
{
|
|
id: 4,
|
|
name: 'Entrenar Modelo',
|
|
icon: CpuChipIcon,
|
|
content: (
|
|
<div className="space-y-4">
|
|
<div className="text-center">
|
|
<CpuChipIcon className="mx-auto h-12 w-12 text-pania-blue" />
|
|
<h3 className="mt-4 text-lg font-medium text-gray-900">
|
|
Entrenar tu modelo de predicción
|
|
</h3>
|
|
<p className="mt-2 text-sm text-gray-600">
|
|
Crearemos un modelo personalizado basado en tus datos de ventas
|
|
</p>
|
|
</div>
|
|
<TrainingProgressCard
|
|
status={formData.trainingStatus}
|
|
progress={formData.trainingStatus === 'completed' ? 100 : 45}
|
|
currentStep="Entrenando modelos de predicción..."
|
|
onStart={() => setFormData({ ...formData, trainingStatus: 'running' })}
|
|
/>
|
|
</div>
|
|
),
|
|
},
|
|
{
|
|
id: 5,
|
|
name: 'Completado',
|
|
icon: CheckIcon,
|
|
content: (
|
|
<div className="text-center space-y-4">
|
|
<div className="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-green-100">
|
|
<CheckIcon className="h-6 w-6 text-green-600" />
|
|
</div>
|
|
<h3 className="text-lg font-medium text-gray-900">
|
|
¡Configuración Completada!
|
|
</h3>
|
|
<p className="text-sm text-gray-600">
|
|
Tu sistema de predicción de demanda está listo para usar.
|
|
</p>
|
|
<div className="bg-green-50 border border-green-200 rounded-md p-4">
|
|
<div className="text-sm text-green-700">
|
|
<ul className="list-disc list-inside space-y-1">
|
|
<li>Cuenta de usuario creada</li>
|
|
<li>Información de panadería guardada</li>
|
|
<li>Historial de ventas procesado</li>
|
|
<li>Modelo de predicción entrenado</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
),
|
|
},
|
|
];
|
|
|
|
const currentStepData = steps.find(step => step.id === currentStep) || steps[0];
|
|
|
|
return (
|
|
<div className="min-h-screen bg-gradient-to-br from-pania-cream to-white">
|
|
<Head>
|
|
<title>Configuración - Bakery Forecast</title>
|
|
</Head>
|
|
|
|
{notification && (
|
|
<NotificationToast
|
|
id={notification.id}
|
|
type={notification.type}
|
|
title={notification.title}
|
|
message={notification.message}
|
|
onClose={() => setNotification(null)}
|
|
/>
|
|
)}
|
|
|
|
<div className="container mx-auto px-4 py-8">
|
|
<div className="max-w-2xl mx-auto">
|
|
<div className="text-center mb-8">
|
|
<h1 className="text-3xl font-bold text-pania-charcoal">Configuración Inicial</h1>
|
|
<p className="mt-2 text-gray-600">Configura tu cuenta y comienza a predecir la demanda</p>
|
|
</div>
|
|
|
|
{/* ORIGINAL DESIGN: Step Progress Indicator */}
|
|
<nav aria-label="Progress" className="mb-8">
|
|
<ol role="list" className="flex items-center justify-between">
|
|
{steps.map((step, stepIdx) => (
|
|
<li key={step.name} className="relative">
|
|
{completedSteps.includes(step.id) ? (
|
|
<div className="group flex flex-col items-center">
|
|
<span className="flex h-10 w-10 items-center justify-center rounded-full bg-pania-blue group-hover:bg-pania-blue-dark">
|
|
<CheckIcon className="h-6 w-6 text-white" aria-hidden="true" />
|
|
</span>
|
|
<span className="mt-2 text-sm font-medium text-pania-blue">{step.name}</span>
|
|
</div>
|
|
) : currentStep === step.id ? (
|
|
<div className="flex flex-col items-center" aria-current="step">
|
|
<span className="relative flex h-10 w-10 items-center justify-center rounded-full border-2 border-pania-blue">
|
|
<span className="h-2.5 w-2.5 rounded-full bg-pania-blue" />
|
|
</span>
|
|
<span className="mt-2 text-sm font-medium text-pania-blue">{step.name}</span>
|
|
</div>
|
|
) : (
|
|
<div className="group flex flex-col items-center">
|
|
<span className="flex h-10 w-10 items-center justify-center rounded-full border-2 border-gray-300 group-hover:border-gray-400">
|
|
<step.icon className="h-6 w-6 text-gray-500 group-hover:text-gray-900" aria-hidden="true" />
|
|
</span>
|
|
<span className="mt-2 text-sm font-medium text-gray-500 group-hover:text-gray-900">
|
|
{step.name}
|
|
</span>
|
|
</div>
|
|
)}
|
|
</li>
|
|
))}
|
|
</ol>
|
|
</nav>
|
|
|
|
{/* ORIGINAL DESIGN: Step Content */}
|
|
<div className="mt-8 bg-gray-50 p-6 rounded-lg shadow-inner">
|
|
<h2 className="text-2xl font-bold text-pania-charcoal mb-6 text-center">
|
|
Paso {currentStep}: {currentStepData.name}
|
|
</h2>
|
|
{currentStepData.content}
|
|
</div>
|
|
|
|
{/* ORIGINAL DESIGN: Navigation Buttons */}
|
|
<div className="mt-8 flex justify-between">
|
|
{currentStep > 1 && currentStep < 5 && (
|
|
<button
|
|
onClick={handleBack}
|
|
disabled={loading}
|
|
className={`inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pania-blue ${
|
|
loading ? 'opacity-50 cursor-not-allowed' : ''
|
|
}`}
|
|
>
|
|
<ArrowLeftIcon className="-ml-1 mr-2 h-5 w-5" aria-hidden="true" />
|
|
Atrás
|
|
</button>
|
|
)}
|
|
|
|
{currentStep < 5 && (
|
|
<button
|
|
onClick={handleNext}
|
|
disabled={loading || (currentStep === 3 && !formData.salesFile)}
|
|
className={`inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-pania-blue hover:bg-pania-blue-dark focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pania-blue ${
|
|
loading || (currentStep === 3 && !formData.salesFile) ? 'opacity-50 cursor-not-allowed' : ''
|
|
} ${currentStep === 1 && !user ? '' : 'ml-auto'}`} // Align right if no back button
|
|
>
|
|
{loading ? (
|
|
<div className="animate-spin rounded-full h-5 w-5 border-b-2 border-white mr-2"></div>
|
|
) : (
|
|
<>
|
|
Siguiente
|
|
<ArrowRightIcon className="-mr-1 ml-2 h-5 w-5" aria-hidden="true" />
|
|
</>
|
|
)}
|
|
</button>
|
|
)}
|
|
|
|
{currentStep === 5 && (
|
|
<button
|
|
onClick={handleSubmitFinal}
|
|
disabled={loading}
|
|
className={`flex items-center px-6 py-3 rounded-lg font-medium transition-colors ${
|
|
loading
|
|
? 'bg-gray-400 cursor-not-allowed'
|
|
: 'bg-green-600 hover:bg-green-700'
|
|
} text-white ml-auto`}
|
|
>
|
|
{loading ? (
|
|
<div className="animate-spin rounded-full h-5 w-5 border-b-2 border-white mr-2"></div>
|
|
) : (
|
|
'Ir al Dashboard'
|
|
)}
|
|
{!loading && <ArrowRightIcon className="w-5 h-5 ml-2" />}
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default OnboardingPage; |