bakery-admin/bakery-ia
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix and UI imporvements

Browse Source
This commit is contained in:
Urtzi Alfaro
2025-12-09 10:21:41 +01:00
parent 667e6e0404
commit 508f4569b9
22 changed files with 833 additions and 953 deletions
Download Patch File Download Diff File Expand all files Collapse all files

343
frontend/src/pages/app/operations/distribution/DistributionPage.tsx
View File

@@ -6,13 +6,12 @@ import {
Package,
MapPin,
Calendar,
ArrowRight,
Search,
Filter,
MoreVertical,
Clock,
CheckCircle,
AlertTriangle
AlertTriangle,
X
} from 'lucide-react';
import {
Button,
@@ -22,8 +21,10 @@ import {
CardHeader,
CardTitle,
Badge,
Input
Input,
Tabs,
} from '../../../../components/ui';
import { TabsList, TabsTrigger, TabsContent } from '../../../../components/ui/Tabs';
import { PageHeader } from '../../../../components/layout';
import { useTenant } from '../../../../stores/tenant.store';
import { useDistributionOverview } from '../../../../api/hooks/useEnterpriseDashboard';
@@ -118,69 +119,60 @@ const DistributionPage: React.FC = () => {
/>
{/* Main Content Areas */}
<div className="flex flex-col gap-6">
<div className="space-y-6">
{/* Tabs Navigation */}
<div className="flex border-b border-gray-200">
<button
className={`px-4 py-2 font-medium text-sm transition-colors border-b-2 ${activeTab === 'overview'
? 'border-blue-500 text-blue-600'
: 'border-transparent text-gray-500 hover:text-gray-700'
}`}
onClick={() => setActiveTab('overview')}
>
Vista General
</button>
<button
className={`px-4 py-2 font-medium text-sm transition-colors border-b-2 ${activeTab === 'routes'
? 'border-blue-500 text-blue-600'
: 'border-transparent text-gray-500 hover:text-gray-700'
}`}
onClick={() => setActiveTab('routes')}
>
Listado de Rutas
</button>
<button
className={`px-4 py-2 font-medium text-sm transition-colors border-b-2 ${activeTab === 'shipments'
? 'border-blue-500 text-blue-600'
: 'border-transparent text-gray-500 hover:text-gray-700'
}`}
onClick={() => setActiveTab('shipments')}
>
Listado de Envíos
</button>
</div>
<Tabs
value={activeTab}
onValueChange={(value: 'overview' | 'routes' | 'shipments') => setActiveTab(value)}
className="w-full"
>
<TabsList className="flex w-full">
<TabsTrigger value="overview" className="flex-1">
{t('operations:distribution.tabs.overview', 'Vista General')}
</TabsTrigger>
<TabsTrigger value="routes" className="flex-1">
{t('operations:distribution.tabs.routes', 'Listado de Rutas')}
</TabsTrigger>
<TabsTrigger value="shipments" className="flex-1">
{t('operations:distribution.tabs.shipments', 'Listado de Envíos')}
</TabsTrigger>
</TabsList>
{/* Content based on Active Tab */}
{activeTab === 'overview' && (
<div className="space-y-6">
{/* Content based on Active Tab */}
<TabsContent value="overview" className="space-y-6 mt-6">
{/* Map Section */}
<Card className="overflow-hidden border-none shadow-lg">
<CardHeader className="bg-white border-b sticky top-0 z-10">
<Card className="overflow-hidden">
<CardHeader className="sticky top-0 z-10">
<div className="flex items-center justify-between">
<div className="flex items-center gap-2">
<div className="p-2 bg-blue-100 rounded-lg">
<MapPin className="w-5 h-5 text-blue-600" />
<div className="flex items-center gap-3">
<div className="p-2 rounded-lg bg-[var(--color-info-50)] dark:bg-[var(--color-info-900)]">
<MapPin className="w-5 h-5 text-[var(--color-info)] dark:text-[var(--color-info-300)]" />
</div>
<div>
<CardTitle>{t('operations:map.title', 'Mapa de Distribución')}</CardTitle>
<p className="text-sm text-gray-500">Visualización en tiempo real de la flota</p>
<CardTitle className="text-lg">
{t('operations:map.title', 'Mapa de Distribución')}
</CardTitle>
<p className="text-sm text-[var(--text-secondary)]">
{t('operations:map.description', 'Visualización en tiempo real de la flota')}
</p>
</div>
</div>
<div className="flex items-center gap-2">
<Badge variant="outline" className="flex items-center gap-1">
<Badge variant="outline" className="flex items-center gap-1 border-[var(--border-primary)]">
<div className="w-2 h-2 rounded-full bg-green-500 animate-pulse" />
En Vivo
{t('operations:map.live', 'En Vivo')}
</Badge>
</div>
</div>
</CardHeader>
<CardContent className="p-0">
<div className="p-4 bg-slate-50">
<DistributionMap
routes={distributionData?.route_sequences || []}
shipments={shipmentStatus}
/>
<div className="p-4 bg-[var(--bg-secondary)]">
<div className="aspect-video rounded-lg overflow-hidden bg-[var(--bg-tertiary)] flex items-center justify-center">
<DistributionMap
routes={distributionData?.route_sequences || []}
shipments={shipmentStatus}
/>
</div>
</div>
</CardContent>
</Card>
@@ -189,7 +181,9 @@ const DistributionPage: React.FC = () => {
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
<Card>
<CardHeader>
<CardTitle>Rutas en Progreso</CardTitle>
<CardTitle className="text-lg">
{t('operations:distribution.active_routes', 'Rutas en Progreso')}
</CardTitle>
</CardHeader>
<CardContent>
{distributionData?.route_sequences?.filter((r: any) => r.status === 'in_progress').length > 0 ? (
@@ -197,101 +191,190 @@ const DistributionPage: React.FC = () => {
{distributionData.route_sequences
.filter((r: any) => r.status === 'in_progress')
.map((route: any) => (
<div key={route.id} className="flex items-center justify-between p-3 bg-white border rounded-lg shadow-sm">
<div
key={route.id}
className="flex items-center justify-between p-4 bg-[var(--bg-secondary)] border rounded-lg hover:bg-[var(--bg-tertiary)] transition-colors"
>
<div className="flex items-center gap-3">
<div className="p-2 bg-blue-50 rounded-full">
<Truck className="w-4 h-4 text-blue-600" />
<div className="p-2 rounded-full bg-[var(--color-info-50)] dark:bg-[var(--color-info-900)]">
<Truck
className="w-4 h-4 text-[var(--color-info)] dark:text-[var(--color-info-300)]"
/>
</div>
<div>
<p className="font-medium text-sm text-gray-900">Ruta {route.route_number}</p>
<p className="text-xs text-gray-500">{route.formatted_driver_name || 'Sin conductor asignado'}</p>
<p className="font-medium text-[var(--text-primary)]">
{t('operations:distribution.route_prefix', 'Ruta')} {route.route_number}
</p>
<p className="text-sm text-[var(--text-secondary)]">
{route.formatted_driver_name || t('operations:distribution.no_driver', 'Sin conductor asignado')}
</p>
</div>
</div>
<Badge variant="info">En Ruta</Badge>
<Badge variant="info">
{t('operations:distribution.status.in_progress', 'En Ruta')}
</Badge>
</div>
))}
</div>
) : (
<div className="text-center py-8 text-gray-500">
No hay rutas en progreso actualmente.
<div className="text-center py-8 text-[var(--text-secondary)]">
{t('operations:distribution.no_active_routes', 'No hay rutas en progreso actualmente.')}
</div>
)}
</CardContent>
</Card>
<Card>
<CardHeader>
<CardTitle className="text-lg">
{t('operations:distribution.pending_deliveries', 'Entregas Pendientes')}
</CardTitle>
</CardHeader>
<CardContent>
{distributionData?.status_counts?.pending > 0 ? (
<div className="space-y-4">
<div className="flex items-center justify-between p-4 bg-[var(--bg-secondary)] border rounded-lg">
<div className="flex items-center gap-3">
<div className="p-2 rounded-full bg-[var(--color-warning-50)] dark:bg-[var(--color-warning-900)]">
<Package
className="w-4 h-4 text-[var(--color-warning)] dark:text-[var(--color-warning-300)]"
/>
</div>
<div>
<p className="font-medium text-[var(--text-primary)]">
{t('operations:distribution.pending_count', 'Entregas Pendientes')}
</p>
<p className="text-sm text-[var(--text-secondary)]">
{t('operations:distribution.pending_desc', 'Aún por distribuir')}
</p>
</div>
</div>
<Badge variant="warning">
{distributionData.status_counts.pending}
</Badge>
</div>
</div>
) : (
<div className="text-center py-8 text-[var(--text-secondary)]">
{t('operations:distribution.no_pending', 'No hay entregas pendientes.')}
</div>
)}
</CardContent>
</Card>
</div>
</div>
)}
</TabsContent>
{activeTab === 'routes' && (
<Card>
<CardHeader>
<div className="flex items-center justify-between">
<CardTitle>Listado de Rutas</CardTitle>
<div className="flex gap-2">
<Input
placeholder="Buscar rutas..."
leftIcon={<Search className="w-4 h-4 text-gray-400" />}
className="w-64"
/>
<Button variant="outline" size="sm" leftIcon={<Filter className="w-4 h-4" />}>Filtros</Button>
<TabsContent value="routes" className="space-y-6 mt-6">
<Card>
<CardHeader>
<div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
<div>
<CardTitle className="text-lg">
{t('operations:distribution.routes_list', 'Listado de Rutas')}
</CardTitle>
<p className="text-sm text-[var(--text-secondary)] mt-1">
{t('operations:distribution.routes_desc', 'Gestión y seguimiento de rutas de distribución')}
</p>
</div>
<div className="flex flex-col sm:flex-row gap-2">
<Input
placeholder={t('operations:distribution.search_routes', 'Buscar rutas...')}
leftIcon={<Search className="w-4 h-4 text-[var(--text-tertiary)]" />}
className="w-full sm:w-64"
/>
<Button variant="outline" size="sm" leftIcon={<Filter className="w-4 h-4" />}>
{t('operations:actions.filters', 'Filtros')}
</Button>
</div>
</div>
</div>
</CardHeader>
<CardContent>
{(distributionData?.route_sequences?.length || 0) > 0 ? (
<div className="overflow-x-auto">
<table className="w-full text-sm text-left">
<thead className="text-xs text-gray-700 uppercase bg-gray-50">
<tr>
<th className="px-4 py-3">Ruta</th>
<th className="px-4 py-3">Estado</th>
<th className="px-4 py-3">Distancia</th>
<th className="px-4 py-3">Duración Est.</th>
<th className="px-4 py-3">Paradas</th>
<th className="px-4 py-3 text-right">Acciones</th>
</tr>
</thead>
<tbody>
{distributionData.route_sequences.map((route: any) => (
<tr key={route.id} className="border-b hover:bg-gray-50">
<td className="px-4 py-3 font-medium">{route.route_number}</td>
<td className="px-4 py-3">
<Badge variant={
route.status === 'completed' ? 'success' :
route.status === 'in_progress' ? 'info' :
route.status === 'pending' ? 'warning' : 'default'
}>
{route.status}
</Badge>
</td>
<td className="px-4 py-3">{route.total_distance_km?.toFixed(1) || '-'} km</td>
<td className="px-4 py-3">{route.estimated_duration_minutes || '-'} min</td>
<td className="px-4 py-3">{route.route_points?.length || 0}</td>
<td className="px-4 py-3 text-right">
<Button variant="ghost" size="sm" leftIcon={<MoreVertical className="w-4 h-4" />} />
</td>
</CardHeader>
<CardContent>
{(distributionData?.route_sequences?.length || 0) > 0 ? (
<div className="overflow-x-auto">
<table className="w-full text-sm text-left">
<thead className="text-xs text-[var(--text-secondary)] uppercase bg-[var(--bg-secondary)] border-b">
<tr>
<th className="px-4 py-3">{t('operations:distribution.table.route', 'Ruta')}</th>
<th className="px-4 py-3">{t('operations:distribution.table.status', 'Estado')}</th>
<th className="px-4 py-3">{t('operations:distribution.table.distance', 'Distancia')}</th>
<th className="px-4 py-3">{t('operations:distribution.table.duration', 'Duración Est.')}</th>
<th className="px-4 py-3">{t('operations:distribution.table.stops', 'Paradas')}</th>
<th className="px-4 py-3 text-right">{t('operations:distribution.table.actions', 'Acciones')}</th>
</tr>
))}
</tbody>
</table>
</div>
) : (
<div className="text-center py-12 bg-gray-50 rounded-lg border border-dashed">
<p className="text-gray-500">No se encontraron rutas para esta fecha.</p>
</div>
)}
</CardContent>
</Card>
)}
</thead>
<tbody className="divide-y divide-[var(--border-primary)]">
{distributionData.route_sequences.map((route: any) => (
<tr key={route.id} className="hover:bg-[var(--bg-secondary)] transition-colors">
<td className="px-4 py-3 font-medium text-[var(--text-primary)]">
{t('operations:distribution.route_prefix', 'Ruta')} {route.route_number}
</td>
<td className="px-4 py-3">
<Badge variant={
route.status === 'completed' ? 'success' :
route.status === 'in_progress' ? 'info' :
route.status === 'pending' ? 'warning' : 'default'
}>
{route.status}
</Badge>
</td>
<td className="px-4 py-3">
{route.total_distance_km?.toFixed(1) || '-'} km
</td>
<td className="px-4 py-3">
{route.estimated_duration_minutes || '-'} min
</td>
<td className="px-4 py-3">
{route.route_points?.length || 0}
</td>
<td className="px-4 py-3 text-right">
<Button
variant="ghost"
size="sm"
icon={MoreVertical}
aria-label={t('operations:actions.more_options', 'Más opciones')}
/>
</td>
</tr>
))}
</tbody>
</table>
</div>
) : (
<div className="text-center py-12 border-2 border-dashed border-[var(--border-primary)] rounded-lg">
<p className="text-[var(--text-secondary)]">
{t('operations:distribution.no_routes_found', 'No se encontraron rutas para esta fecha.')}
</p>
</div>
)}
</CardContent>
</Card>
</TabsContent>
{/* Similar structure for Shipments tab, simplified for now */}
{activeTab === 'shipments' && (
<div className="text-center py-12 bg-gray-50 rounded-lg border border-dashed">
<Package className="w-12 h-12 text-gray-300 mx-auto mb-3" />
<h3 className="text-lg font-medium text-gray-900">Gestión de Envíos</h3>
<p className="text-gray-500">Funcionalidad de listado detallado de envíos próximamente.</p>
</div>
)}
{/* Similar structure for Shipments tab, simplified for now */}
<TabsContent value="shipments" className="space-y-6 mt-6">
<Card>
<CardHeader>
<CardTitle className="text-lg">
{t('operations:distribution.shipments_list', 'Gestión de Envíos')}
</CardTitle>
<p className="text-sm text-[var(--text-secondary)]">
{t('operations:distribution.shipments_desc', 'Funcionalidad de listado detallado de envíos próximamente.')}
</p>
</CardHeader>
<CardContent>
<div className="text-center py-12 border-2 border-dashed border-[var(--border-primary)] rounded-lg">
<Package className="w-12 h-12 text-[var(--text-tertiary)] mx-auto mb-4" />
<h3 className="text-lg font-medium text-[var(--text-primary)] mb-2">
{t('operations:distribution.shipments_title', 'Gestión de Envíos')}
</h3>
<p className="text-[var(--text-secondary)]">
{t('operations:distribution.shipments_desc', 'Funcionalidad de listado detallado de envíos próximamente.')}
</p>
</div>
</CardContent>
</Card>
</TabsContent>
</Tabs>
</div>
</div>
);

215
frontend/src/pages/public/DemoPage.tsx
View File

@@ -58,6 +58,7 @@ const DemoPage = () => {
const [creationError, setCreationError] = useState('');
const [estimatedProgress, setEstimatedProgress] = useState(0);
const [progressStartTime, setProgressStartTime] = useState<number | null>(null);
const [estimatedRemainingSeconds, setEstimatedRemainingSeconds] = useState<number | null>(null);
// BUG-010 FIX: State for partial status warning
const [partialWarning, setPartialWarning] = useState<{
@@ -227,19 +228,19 @@ const DemoPage = () => {
} catch (error) {
console.error('Error creating demo:', error);
setCreationError('Error al iniciar la demo. Por favor, inténtalo de nuevo.');
} finally {
setCreatingTier(null);
setProgressStartTime(null);
setEstimatedProgress(0);
// Reset progress
setCloneProgress({
parent: 0,
children: [0, 0, 0],
distribution: 0,
overall: 0
});
setCreationError('Error al iniciar la demo. Por favor, inténtalo de nuevo.');
}
// NOTE: State reset moved to navigation callback and error handlers
// to prevent modal from disappearing before redirect
};
const pollForSessionStatus = async (sessionId, tier, sessionData) => {
@@ -287,17 +288,33 @@ const DemoPage = () => {
const statusData = await statusResponse.json();
// Capture estimated remaining time from backend
if (statusData.estimated_remaining_seconds !== undefined) {
setEstimatedRemainingSeconds(statusData.estimated_remaining_seconds);
}
// Update progress based on actual backend status
updateProgressFromBackendStatus(statusData, tier);
// BUG-010 FIX: Handle ready status separately from partial
if (statusData.status === 'ready') {
// Full success - navigate immediately
// Full success - set to 100% and navigate after delay
clearInterval(progressInterval);
setCloneProgress(prev => ({ ...prev, overall: 100 }));
setTimeout(() => {
// Reset state before navigation
setCreatingTier(null);
setProgressStartTime(null);
setEstimatedProgress(0);
setCloneProgress({
parent: 0,
children: [0, 0, 0],
distribution: 0,
overall: 0
});
// Navigate to the main dashboard which will automatically route to enterprise or bakery dashboard based on subscription tier
navigate('/app/dashboard');
}, 1000);
}, 1500); // Increased from 1000ms to show 100% completion
return;
} else if (statusData.status === 'PARTIAL' || statusData.status === 'partial') {
// BUG-010 FIX: Show warning modal for partial status
@@ -313,6 +330,15 @@ const DemoPage = () => {
return;
} else if (statusData.status === 'FAILED' || statusData.status === 'failed') {
clearInterval(progressInterval);
setCreatingTier(null);
setProgressStartTime(null);
setEstimatedProgress(0);
setCloneProgress({
parent: 0,
children: [0, 0, 0],
distribution: 0,
overall: 0
});
setCreationError('Error al clonar los datos de demo. Por favor, inténtalo de nuevo.');
return;
}
@@ -343,6 +369,15 @@ const DemoPage = () => {
} catch (error) {
clearInterval(progressInterval);
console.error('Error polling for status:', error);
setCreatingTier(null);
setProgressStartTime(null);
setEstimatedProgress(0);
setCloneProgress({
parent: 0,
children: [0, 0, 0],
distribution: 0,
overall: 0
});
setCreationError('Error verificando el estado de la demo. Por favor, inténtalo de nuevo.');
} finally {
// Clean up abort controller reference
@@ -466,7 +501,9 @@ const DemoPage = () => {
if (progress.parent && progress.children && progress.distribution !== undefined) {
// This looks like an enterprise results structure from the end of cloning
// Calculate progress based on parent, children, and distribution status
if (progress.parent.overall_status === 'ready' || progress.parent.overall_status === 'partial') {
// FIX 1: Handle both "completed" and "ready" for parent status
const parentStatus = progress.parent.overall_status;
if (parentStatus === 'ready' || parentStatus === 'completed' || parentStatus === 'partial') {
parentProgress = 100;
} else if (progress.parent.overall_status === 'pending') {
parentProgress = 50; // Increased from 25 for better perceived progress
@@ -482,9 +519,11 @@ const DemoPage = () => {
if (progress.children && progress.children.length > 0) {
childrenProgressArray = progress.children.map((child: any) => {
if (child.status === 'ready' || child.status === 'completed') return 100;
if (child.status === 'partial') return 75;
if (child.status === 'pending') return 30;
// FIX 2: Handle both status types for children
const childStatus = child.status || child.overall_status;
if (childStatus === 'ready' || childStatus === 'completed') return 100;
if (childStatus === 'partial') return 75;
if (childStatus === 'pending') return 30;
return 0;
});
const avgChildrenProgress = childrenProgressArray.reduce((a, b) => a + b, 0) / childrenProgressArray.length;
@@ -499,15 +538,22 @@ const DemoPage = () => {
}
if (progress.distribution) {
if (progress.distribution.status === 'ready' || progress.distribution.status === 'completed') {
// FIX 3: Handle both status types for distribution
const distStatus = progress.distribution.status || progress.distribution.overall_status;
if (distStatus === 'ready' || distStatus === 'completed') {
distributionProgress = 100;
} else if (progress.distribution.status === 'pending') {
} else if (distStatus === 'pending') {
distributionProgress = 50;
} else {
distributionProgress = progress.distribution.status === 'failed' ? 100 : 75;
distributionProgress = distStatus === 'failed' ? 100 : 75;
}
backendProgress = Math.round(backendProgress * 0.8 + distributionProgress * 0.2);
}
// FIX 4: Allow 100% progress when all components complete
if (parentProgress === 100 && childrenProgressArray.every(p => p === 100) && distributionProgress === 100) {
backendProgress = 100;
}
} else {
// If it's not the enterprise result structure, fall back to service-based calculation
const services = progress || {};
@@ -525,8 +571,9 @@ const DemoPage = () => {
distributionProgress = backendProgress * 0.8;
}
// Use the maximum of backend progress and estimated progress to prevent backtracking
const overallProgress = Math.max(Math.min(95, backendProgress), estimatedProgress);
// FIX 5: Don't cap at 95% when backend reports 100%
const cappedBackendProgress = backendProgress === 100 ? 100 : Math.min(95, backendProgress);
const overallProgress = Math.max(cappedBackendProgress, estimatedProgress);
setCloneProgress({
parent: Math.max(parentProgress, estimatedProgress * 0.9),
@@ -681,61 +728,127 @@ const DemoPage = () => {
<Modal
isOpen={creatingTier !== null}
onClose={() => { }}
size="md"
size="lg"
>
<ModalHeader
title="Configurando Tu Demo"
title={
<div className="flex items-center gap-3">
<div className="animate-spin rounded-full h-5 w-5 border-b-2 border-primary"></div>
<span>Configurando Tu Demo</span>
</div>
}
showCloseButton={false}
/>
<ModalBody padding="lg">
<div className="space-y-4">
<div className="flex justify-between text-sm">
<span>Progreso total</span>
<span>{cloneProgress.overall}%</span>
</div>
<div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
<div
className="bg-primary h-2 rounded-full transition-all duration-300"
style={{ width: `${cloneProgress.overall}%` }}
></div>
</div>
<div className="text-center text-sm text-[var(--text-secondary)] mt-4">
{getLoadingMessage(creatingTier, cloneProgress.overall)}
</div>
{creatingTier === 'enterprise' && (
<div className="space-y-3 mt-4">
<div className="flex justify-between text-sm">
<span className="font-medium">Obrador Central</span>
<span>{cloneProgress.parent}%</span>
<div className="space-y-6">
{/* Overall Progress Section */}
<div className="text-center">
<div className="flex justify-between text-sm mb-2">
<span className="font-medium">Progreso Total</span>
<span className="font-semibold text-lg">{cloneProgress.overall}%</span>
</div>
<div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-3 overflow-hidden">
<div
className="bg-gradient-to-r from-blue-500 to-purple-600 h-3 rounded-full transition-all duration-500 relative overflow-hidden"
style={{ width: `${cloneProgress.overall}%` }}
>
<div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/40 to-transparent animate-shimmer"></div>
</div>
</div>
{estimatedRemainingSeconds !== null && estimatedRemainingSeconds > 0 && (
<div className="mt-3 text-sm text-[var(--text-secondary)]">
~{estimatedRemainingSeconds}s restantes
</div>
)}
<div className="mt-4 text-[var(--text-secondary)]">
{getLoadingMessage(creatingTier, cloneProgress.overall)}
</div>
</div>
{/* Enterprise Detailed Progress */}
{creatingTier === 'enterprise' && (
<div className="space-y-5 mt-6">
{/* Parent Tenant */}
<div className="bg-blue-50 dark:bg-blue-900/20 rounded-xl p-4 border border-blue-200 dark:border-blue-800">
<div className="flex justify-between items-center mb-2">
<div className="flex items-center gap-2">
<div className="w-3 h-3 rounded-full bg-blue-500"></div>
<span className="font-semibold text-blue-900 dark:text-blue-100">Obrador Central</span>
</div>
<span className="font-medium text-blue-700 dark:text-blue-300">{cloneProgress.parent}%</span>
</div>
<div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5">
<div
className="bg-gradient-to-r from-blue-400 to-blue-600 h-2.5 rounded-full transition-all duration-500"
style={{ width: `${cloneProgress.parent}%` }}
></div>
</div>
</div>
{/* Child Outlets */}
<div className="grid grid-cols-3 gap-3">
{cloneProgress.children.map((progress, index) => (
<div key={index} className="text-center">
<div className="text-xs text-[var(--text-tertiary)] mb-1">Outlet {index + 1}</div>
<div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-1.5">
<div
key={index}
className="bg-green-50 dark:bg-green-900/20 rounded-lg p-3 border border-green-200 dark:border-green-800"
>
<div className="flex justify-between items-center mb-1">
<span className="text-xs font-medium text-green-700 dark:text-green-300">Outlet {index + 1}</span>
<span className="text-xs font-semibold text-green-700 dark:text-green-300">{progress}%</span>
</div>
<div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
<div
className="bg-blue-500 h-1.5 rounded-full transition-all duration-300"
className="bg-gradient-to-r from-green-400 to-green-600 h-2 rounded-full transition-all duration-500"
style={{ width: `${progress}%` }}
></div>
</div>
<div className="text-xs mt-1">{progress}%</div>
</div>
))}
</div>
<div className="flex justify-between text-sm mt-2">
<span className="font-medium">Distribución</span>
<span>{cloneProgress.distribution}%</span>
</div>
<div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-1.5">
<div
className="bg-purple-500 h-1.5 rounded-full transition-all duration-300"
style={{ width: `${cloneProgress.distribution}%` }}
></div>
{/* Distribution System */}
<div className="bg-purple-50 dark:bg-purple-900/20 rounded-xl p-4 border border-purple-200 dark:border-purple-800">
<div className="flex justify-between items-center mb-2">
<div className="flex items-center gap-2">
<div className="w-3 h-3 rounded-full bg-purple-500"></div>
<span className="font-semibold text-purple-900 dark:text-purple-100">Distribución</span>
</div>
<span className="font-medium text-purple-700 dark:text-purple-300">{cloneProgress.distribution}%</span>
</div>
<div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5">
<div
className="bg-gradient-to-r from-purple-400 to-purple-600 h-2.5 rounded-full transition-all duration-500"
style={{ width: `${cloneProgress.distribution}%` }}
></div>
</div>
</div>
</div>
)}
{/* Professional Progress Indicator */}
{creatingTier === 'professional' && cloneProgress.overall < 100 && (
<div className="text-center py-3">
<div className="flex justify-center items-center gap-1">
<div className="w-2 h-2 bg-primary rounded-full animate-bounce" style={{ animationDelay: '0ms' }}></div>
<div className="w-2 h-2 bg-primary rounded-full animate-bounce" style={{ animationDelay: '150ms' }}></div>
<div className="w-2 h-2 bg-primary rounded-full animate-bounce" style={{ animationDelay: '300ms' }}></div>
</div>
<p className="text-sm text-[var(--text-tertiary)] mt-2">
Procesando servicios en paralelo...
</p>
</div>
)}
{/* Information Box */}
<div className="bg-gray-50 dark:bg-gray-800/50 rounded-lg p-3 border border-gray-200 dark:border-gray-700">
<p className="text-xs text-[var(--text-tertiary)] text-center">
{creatingTier === 'enterprise'
? 'Creando obrador central, outlets y sistema de distribución...'
: 'Personalizando tu panadería con datos reales...'}
</p>
</div>
</div>
</ModalBody>
</Modal>