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

Improve the traffic fetching system

Browse Source
This commit is contained in:
Urtzi Alfaro
2025-08-08 23:29:48 +02:00
parent 8af17f1433
commit 312fdc8ef3
8 changed files with 680 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
frontend/src/components/EnhancedTrainingProgress.tsx
View File

@@ -149,8 +149,8 @@ export default function EnhancedTrainingProgress({ progress, onTimeout }: Traini
</p>
</div>
<div className="bg-white rounded-md shadow-md p-8 mb-8">
<div className="bg-red-50 border border-red-200 rounded-md p-6">
<div className="bg-white rounded-2xl shadow-soft p-8 mb-8">
<div className="bg-red-50 border border-red-200 rounded-xl p-6">
<div className="flex items-start space-x-4">
<AlertCircle className="w-6 h-6 text-red-600 flex-shrink-0 mt-1" />
<div>
@@ -172,7 +172,7 @@ export default function EnhancedTrainingProgress({ progress, onTimeout }: Traini
<div className="mt-6 text-center">
<button
onClick={() => window.location.reload()}
className="bg-blue-600 text-white px-6 py-3 rounded-lg font-medium hover:bg-blue-700 transition-colors"
className="bg-primary-500 text-white px-6 py-3 rounded-xl font-medium hover:bg-primary-600 transition-colors"
>
Intentar Nuevamente
</button>
@@ -186,7 +186,7 @@ export default function EnhancedTrainingProgress({ progress, onTimeout }: Traini
<div className="max-w-4xl mx-auto">
{/* Header */}
<div className="text-center mb-8">
<div className="inline-flex items-center justify-center w-20 h-20 bg-blue-600 rounded-full mb-4">
<div className="inline-flex items-center justify-center w-20 h-20 bg-primary-500 rounded-full mb-4">
<Brain className="w-10 h-10 text-white animate-pulse" />
</div>
<h2 className="text-3xl font-bold text-gray-900 mb-2">
@@ -198,7 +198,7 @@ export default function EnhancedTrainingProgress({ progress, onTimeout }: Traini
</div>
{/* Main Progress Section */}
<div className="bg-white rounded-md shadow-md p-8 mb-8">
<div className="bg-white rounded-2xl shadow-soft p-8 mb-8">
{/* Overall Progress Bar */}
<div className="mb-8">
<div className="flex justify-between items-center mb-3">
@@ -207,7 +207,7 @@ export default function EnhancedTrainingProgress({ progress, onTimeout }: Traini
</div>
<div className="w-full bg-gray-200 rounded-full h-4 overflow-hidden">
<div
className="bg-gradient-to-r from-blue-500 to-indigo-600 h-4 rounded-full transition-all duration-1000 ease-out relative"
className="bg-primary-500 h-4 rounded-full transition-all duration-1000 ease-out relative"
style={{ width: `${progress.progress}%` }}
>
<div className="absolute inset-0 opacity-20 animate-pulse">
@@ -218,10 +218,10 @@ export default function EnhancedTrainingProgress({ progress, onTimeout }: Traini
</div>
{/* Current Step Info */}
<div className={`bg-${currentStepInfo.color}-50 border border-${currentStepInfo.color}-200 rounded-md p-6 mb-6`}>
<div className={`bg-${currentStepInfo.color}-50 border border-${currentStepInfo.color}-200 rounded-xl p-6 mb-6`}>
<div className="flex items-start space-x-4">
<div className="flex-shrink-0">
<div className={`w-12 h-12 bg-${currentStepInfo.color}-600 rounded-full flex items-center justify-center`}>
<div className={`w-12 h-12 bg-primary-500 rounded-full flex items-center justify-center`}>
<currentStepInfo.icon className="w-6 h-6 text-white" />
</div>
</div>
@@ -232,8 +232,8 @@ export default function EnhancedTrainingProgress({ progress, onTimeout }: Traini
<p className="text-gray-700 mb-3">
{currentStepInfo.description}
</p>
<div className={`bg-${currentStepInfo.color}-100 border-l-4 border-${currentStepInfo.color}-500 p-3 rounded-r-lg`}>
<p className={`text-sm font-medium text-${currentStepInfo.color}-800`}>
<div className={`bg-primary-50 border-l-4 border-primary-500 p-3 rounded-r-xl`}>
<p className={`text-sm font-medium text-primary-700`}>
{currentStepInfo.tip}
</p>
</div>
@@ -246,11 +246,11 @@ export default function EnhancedTrainingProgress({ progress, onTimeout }: Traini
{progressSteps.map((step, index) => (
<div
key={step.id}
className={`p-4 rounded-md border-2 transition-all duration-300 ${
className={`p-4 rounded-xl border-2 transition-all duration-300 ${
step.completed
? 'bg-green-50 border-green-200'
: step.current
? 'bg-blue-50 border-blue-300 shadow-md'
? 'bg-primary-50 border-primary-300 shadow-soft'
: 'bg-gray-50 border-gray-200'
}`}
>
@@ -258,12 +258,12 @@ export default function EnhancedTrainingProgress({ progress, onTimeout }: Traini
{step.completed ? (
<CheckCircle className="w-5 h-5 text-green-600 mr-2" />
) : step.current ? (
<div className="w-5 h-5 border-2 border-blue-600 border-t-transparent rounded-full animate-spin mr-2"></div>
<div className="w-5 h-5 border-2 border-primary-500 border-t-transparent rounded-full animate-spin mr-2"></div>
) : (
<div className="w-5 h-5 border-2 border-gray-300 rounded-full mr-2"></div>
)}
<span className={`text-sm font-medium ${
step.completed ? 'text-green-800' : step.current ? 'text-blue-800' : 'text-gray-600'
step.completed ? 'text-green-800' : step.current ? 'text-primary-700' : 'text-gray-600'
}`}>
{step.name}
</span>
@@ -274,7 +274,7 @@ export default function EnhancedTrainingProgress({ progress, onTimeout }: Traini
{/* Enhanced Stats Grid */}
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
<div className="text-center p-4 bg-gray-50 rounded-md">
<div className="text-center p-4 bg-gray-50 rounded-xl">
<div className="flex items-center justify-center mb-2">
<Cpu className="w-5 h-5 text-gray-600 mr-2" />
<span className="text-sm font-medium text-gray-700">Productos Procesados</span>
@@ -285,14 +285,14 @@ export default function EnhancedTrainingProgress({ progress, onTimeout }: Traini
{progress.productsTotal > 0 && (
<div className="w-full bg-gray-200 rounded-full h-2 mt-2">
<div
className="bg-blue-500 h-2 rounded-full transition-all duration-500"
className="bg-primary-500 h-2 rounded-full transition-all duration-500"
style={{ width: `${(progress.productsCompleted / progress.productsTotal) * 100}%` }}
></div>
</div>
)}
</div>
<div className="text-center p-4 bg-gray-50 rounded-md">
<div className="text-center p-4 bg-gray-50 rounded-xl">
<div className="flex items-center justify-center mb-2">
<Clock className="w-5 h-5 text-gray-600 mr-2" />
<span className="text-sm font-medium text-gray-700">Tiempo Restante</span>
@@ -305,7 +305,7 @@ export default function EnhancedTrainingProgress({ progress, onTimeout }: Traini
</div>
</div>
<div className="text-center p-4 bg-gray-50 rounded-md">
<div className="text-center p-4 bg-gray-50 rounded-xl">
<div className="flex items-center justify-center mb-2">
<Target className="w-5 h-5 text-gray-600 mr-2" />
<span className="text-sm font-medium text-gray-700">Precisión Esperada</span>
@@ -329,14 +329,14 @@ export default function EnhancedTrainingProgress({ progress, onTimeout }: Traini
{/* Expected Benefits - Only show if progress < 80% to keep user engaged */}
{progress.progress < 80 && (
<div className="bg-white rounded-md shadow-md p-8">
<div className="bg-white rounded-2xl shadow-soft p-8">
<h3 className="text-2xl font-bold text-gray-900 mb-6 text-center">
Lo que podrás hacer una vez completado
</h3>
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
{EXPECTED_BENEFITS.map((benefit, index) => (
<div key={index} className="text-center p-6 bg-gradient-to-br from-indigo-50 to-purple-50 rounded-md">
<div className="inline-flex items-center justify-center w-12 h-12 bg-indigo-600 rounded-full mb-4">
<div key={index} className="text-center p-6 bg-gradient-to-br from-primary-50 to-blue-50 rounded-xl">
<div className="inline-flex items-center justify-center w-12 h-12 bg-primary-500 rounded-full mb-4">
<benefit.icon className="w-6 h-6 text-white" />
</div>
<h4 className="text-lg font-semibold text-gray-900 mb-2">
@@ -354,7 +354,7 @@ export default function EnhancedTrainingProgress({ progress, onTimeout }: Traini
{/* Timeout Warning Modal */}
{showTimeoutWarning && (
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
<div className="bg-white rounded-md shadow-md p-8 max-w-md mx-4">
<div className="bg-white rounded-2xl shadow-soft p-8 max-w-md mx-4">
<div className="text-center">
<AlertCircle className="w-16 h-16 text-orange-500 mx-auto mb-4" />
<h3 className="text-xl font-bold text-gray-900 mb-4">
@@ -367,13 +367,13 @@ export default function EnhancedTrainingProgress({ progress, onTimeout }: Traini
<div className="flex flex-col sm:flex-row gap-3">
<button
onClick={handleContinueToDashboard}
className="flex-1 bg-blue-600 text-white px-6 py-3 rounded-lg font-medium hover:bg-blue-700 transition-colors"
className="flex-1 bg-primary-500 text-white px-6 py-3 rounded-xl font-medium hover:bg-primary-600 transition-colors"
>
Continuar al Dashboard
</button>
<button
onClick={handleKeepWaiting}
className="flex-1 bg-gray-200 text-gray-800 px-6 py-3 rounded-lg font-medium hover:bg-gray-300 transition-colors"
className="flex-1 bg-gray-200 text-gray-800 px-6 py-3 rounded-xl font-medium hover:bg-gray-300 transition-colors"
>
Seguir Esperando
</button>