feat: Integrate ConversationTimeline into DebtCard for enhanced debt updates

src/components/Dashboard.tsx

@@ -313,14 +313,11 @@ export function Dashboard() {
 								<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
 									{debtList.map((debt) => (
 										<div key={debt.id} className="space-y-4">
-											<DebtCard debt={debt} onUpdate={fetchDebts} />
-											<ConversationTimeline
+											<DebtCard
 												debt={debt}
-												onDebtUpdate={(debt) => {
-													setDebts(
-														debts.map((d) => (d.id === debt.id ? debt : d))
-													);
-												}}
+												onUpdate={fetchDebts}
+												debts={debts}
+												setDebts={setDebts}
 											/>
 										</div>
 									))}

src/components/DebtCard.tsx

@@ -54,10 +54,13 @@ import {
 	updateVariablesForTextChange,
 } from "../lib/emailVariables";
 import { ManualResponseDialog } from "./ManualResponseDialog";
+import { ConversationTimeline } from "./ConversationTimeline";
 
 interface DebtCardProps {
 	debt: Debt;
 	onUpdate?: () => void; // Callback to refresh data after updates
+	debts: Debt[];
+	setDebts: (debts: Debt[]) => void;
 }
 
 const statusColors = {
@@ -101,7 +104,7 @@ const statusLabels = {
 	opted_out: "Opted Out",
 };
 
-export function DebtCard({ debt, onUpdate }: DebtCardProps) {
+export function DebtCard({ debt, onUpdate, debts, setDebts }: DebtCardProps) {
 	const [isApproving, setIsApproving] = useState(false);
 	const [isRejecting, setIsRejecting] = useState(false);
 	const [userProfile, setUserProfile] = useState<any>(null);
@@ -725,6 +728,13 @@ export function DebtCard({ debt, onUpdate }: DebtCardProps) {
 						</AlertDialog>
 					</div>
 				)}
+
+				<ConversationTimeline
+					debt={debt}
+					onDebtUpdate={(debt) => {
+						setDebts(debts.map((d) => (d.id === debt.id ? debt : d)));
+					}}
+				/>
 			</CardContent>
 		</Card>
 	);