+ {timelineSteps.map((step, index) => {
+ const isCompleted = index <= currentStepIndex;
+ const isActive = index === currentStepIndex;
+ const Icon = step.icon;
+
+ return (
+
+
+
+
+
+
+
+ {step.label}
+
+
+ {isActive && (
+
+ {debt.status === 'received' && 'Processing email and generating response...'}
+ {debt.status === 'negotiating' && 'Response generated, waiting for creditor reply'}
+ {debt.status === 'settled' && 'Payment plan agreed upon'}
+
+ )}
+
+
+ {isActive && (
+
+ {new Date(debt.updated_at).toLocaleDateString()}
+
+ )}
+
+ );
+ })}
+
+ {/* Special cases for failed and opted_out */}
+ {(debt.status === 'failed' || debt.status === 'opted_out') && (
+
+
+ {React.createElement(statusIcons[debt.status], { className: 'h-4 w-4' })}
+
+
+
+
+ {debt.status === 'failed' ? 'Negotiation Failed' : 'Opted Out'}
+
+
+ {debt.status === 'failed'
+ ? 'Creditor declined the negotiation proposal'
+ : 'User requested to stop communication'
+ }
+
+
+
+
+ {new Date(debt.updated_at).toLocaleDateString()}
+
+
+ )}
+