salman/igny8
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update ProgressModal.tsx

Browse Source
This commit is contained in:
Desktop
2025-11-11 00:43:39 +05:00
parent 760736b50e
commit 4beddaf25d
1 changed files with 43 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

89
frontend/src/components/common/ProgressModal.tsx
View File

@@ -283,7 +283,8 @@ export default function ProgressModal({
const checklistItems = steps.map((step) => { const checklistItems = steps.map((step) => {
const actuallyCompleted = isStepCompleted(step.phase, currentPhase, stepLogs); const actuallyCompleted = isStepCompleted(step.phase, currentPhase, stepLogs);
const visuallyCompleted = visuallyCompletedSteps.has(step.phase); const visuallyCompleted = visuallyCompletedSteps.has(step.phase);
const inProgress = isStepInProgress(step.phase, currentPhase) && !visuallyCompleted; // Only show as in progress if it's the current phase AND not visually completed yet
const inProgress = step.phase === currentPhase && !visuallyCompleted && !actuallyCompleted;
// Get step log and format message // Get step log and format message
const stepLog = stepLogs.find(log => log.stepName === step.phase); const stepLog = stepLogs.find(log => log.stepName === step.phase);
@@ -358,20 +359,7 @@ export default function ProgressModal({
}; };
}, [isOpen, currentPhase, stepLogs, steps, visuallyCompletedSteps]); }, [isOpen, currentPhase, stepLogs, steps, visuallyCompletedSteps]);
// Auto-close on completion after all steps are visually completed + 3 seconds // Don't auto-close - user must click close button
useEffect(() => {
if (status === 'completed' && allStepsVisuallyCompleted && onClose && !hasAutoClosedRef.current) {
hasAutoClosedRef.current = true;
// Wait 3 seconds after success alert appears
const timer = setTimeout(() => {
onClose();
}, 3000);
return () => clearTimeout(timer);
}
if (status !== 'completed' || !allStepsVisuallyCompleted) {
hasAutoClosedRef.current = false;
}
}, [status, allStepsVisuallyCompleted, onClose]);
// Show success alert only when all steps are visually completed AND status is completed // Show success alert only when all steps are visually completed AND status is completed
const showSuccess = status === 'completed' && allStepsVisuallyCompleted; const showSuccess = status === 'completed' && allStepsVisuallyCompleted;
@@ -386,34 +374,26 @@ export default function ProgressModal({
> >
<div className="p-6 min-h-[200px]"> <div className="p-6 min-h-[200px]">
{/* Header */} {/* Header */}
<div className="flex items-start gap-4 mb-6"> <div className="mb-6">
<div className="flex-shrink-0 mt-1"> <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-1 text-center">
{status === 'error' ? (
<svg className="w-6 h-6 text-error-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
</svg>
) : showSuccess ? (
<svg className="w-6 h-6 text-success-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
</svg>
) : (
<svg className="w-6 h-6 text-brand-500 animate-spin" fill="none" viewBox="0 0 24 24">
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
</svg>
)}
</div>
<div className="flex-1">
<h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-1">
{title} {title}
</h3> </h3>
{!showSuccess && status !== 'completed' && ( {!showSuccess && status !== 'completed' && (
<p className="text-sm text-gray-600 dark:text-gray-400">{message}</p> <p className="text-sm text-gray-600 dark:text-gray-400 text-center">{message}</p>
)} )}
{status === 'completed' && !allStepsVisuallyCompleted && ( {status === 'completed' && !allStepsVisuallyCompleted && (
<p className="text-sm text-gray-600 dark:text-gray-400">Processing...</p> <p className="text-sm text-gray-600 dark:text-gray-400 text-center">Processing...</p>
)} )}
{/* Spinner below heading - only show when processing and not completed */}
{!showSuccess && status !== 'completed' && status !== 'error' && (
<div className="flex justify-center mt-4">
<svg className="w-8 h-8 text-brand-500 animate-spin" fill="none" viewBox="0 0 24 24">
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
</svg>
</div> </div>
)}
</div> </div>
{/* Success Alert (shown when all steps are visually completed) */} {/* Success Alert (shown when all steps are visually completed) */}
@@ -450,17 +430,14 @@ export default function ProgressModal({
: 'bg-gray-50 dark:bg-gray-800 border-gray-200 dark:border-gray-700 opacity-60' : 'bg-gray-50 dark:bg-gray-800 border-gray-200 dark:border-gray-700 opacity-60'
}`} }`}
> >
{/* Icon */} {/* Icon - no spinner in steps, only checkmark or circle */}
<div className="flex-shrink-0"> <div className="flex-shrink-0">
{item.completed ? ( {item.completed ? (
<svg className="w-5 h-5 text-green-600 dark:text-green-400" fill="currentColor" viewBox="0 0 20 20"> <svg className="w-5 h-5 text-green-600 dark:text-green-400" fill="currentColor" viewBox="0 0 20 20">
<path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" /> <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
</svg> </svg>
) : item.inProgress ? ( ) : item.inProgress ? (
<svg className="w-5 h-5 text-blue-600 dark:text-blue-400 animate-spin" fill="none" viewBox="0 0 24 24"> <div className="w-5 h-5 rounded-full border-2 border-blue-500 dark:border-blue-400 bg-blue-50 dark:bg-blue-900/20" />
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
</svg>
) : ( ) : (
<div className="w-5 h-5 rounded-full border-2 border-gray-300 dark:border-gray-600" /> <div className="w-5 h-5 rounded-full border-2 border-gray-300 dark:border-gray-600" />
)} )}
@@ -483,8 +460,20 @@ export default function ProgressModal({
</div> </div>
{/* Footer */} {/* Footer */}
<div className="flex justify-end gap-3"> {showSuccess && onClose && (
{onCancel && status !== 'completed' && status !== 'error' && ( <div className="flex justify-center mt-6">
<Button
variant="primary"
size="lg"
onClick={onClose}
className="bg-green-600 hover:bg-green-700 dark:bg-green-700 dark:hover:bg-green-800 text-white px-8 py-3 text-base font-semibold"
>
Close
</Button>
</div>
)}
{onCancel && !showSuccess && status !== 'error' && (
<div className="flex justify-end gap-3 mt-6">
<Button <Button
variant="secondary" variant="secondary"
size="sm" size="sm"
@@ -493,13 +482,15 @@ export default function ProgressModal({
> >
Cancel Cancel
</Button> </Button>
)}
{(status === 'completed' || status === 'error') && onClose && (
<Button variant="primary" size="sm" onClick={onClose}>
{status === 'completed' ? 'Close' : 'Dismiss'}
</Button>
)}
</div> </div>
)}
{status === 'error' && onClose && (
<div className="flex justify-end gap-3 mt-6">
<Button variant="primary" size="sm" onClick={onClose}>
Dismiss
</Button>
</div>
)}
</div> </div>
</Modal> </Modal>
); );