|
|
@@ -66,6 +66,17 @@ const getRelativeTime = (dateStr: string | null, t: (key: string, options?: any)
|
|
|
return t('common.daysAgo', { count: diffDays });
|
|
|
};
|
|
|
|
|
|
+const formatFullDateTime = (dateStr: string | null): string => {
|
|
|
+ if (!dateStr) return "-";
|
|
|
+ const date = new Date(dateStr);
|
|
|
+ const year = date.getFullYear();
|
|
|
+ const month = String(date.getMonth() + 1).padStart(2, '0');
|
|
|
+ const day = String(date.getDate()).padStart(2, '0');
|
|
|
+ const hours = String(date.getHours()).padStart(2, '0');
|
|
|
+ const minutes = String(date.getMinutes()).padStart(2, '0');
|
|
|
+ return `${year}-${month}-${day}. ${hours}:${minutes}`;
|
|
|
+};
|
|
|
+
|
|
|
const getOutcomeColor = (outcome: string | null): string => {
|
|
|
if (!outcome) return "bg-slate-600";
|
|
|
|
|
|
@@ -376,32 +387,19 @@ export function CallLogDetailContent() {
|
|
|
<h3 className="text-lg font-semibold text-white">{t('callLogDetail.contactInfo')}</h3>
|
|
|
</div>
|
|
|
|
|
|
- {/* Phone Number with Badge */}
|
|
|
- <div className="mb-4">
|
|
|
- <p className="text-slate-400 text-sm mb-1">{t('callLogDetail.caller')}</p>
|
|
|
+ {/* Phone and date on one line */}
|
|
|
+ <div className="flex items-center justify-between mb-6">
|
|
|
<div className="flex items-center gap-2">
|
|
|
+ <Phone className="w-4 h-4 text-slate-400" />
|
|
|
<span className="text-white font-medium">{callLog.caller || '-'}</span>
|
|
|
- {callLog.outcome && (
|
|
|
- <span className={`px-2 py-0.5 rounded text-xs font-medium text-white ${getOutcomeColor(callLog.outcome)}`}>
|
|
|
- {formatOutcome(callLog.outcome)}
|
|
|
- </span>
|
|
|
- )}
|
|
|
+ </div>
|
|
|
+ <div className="flex items-center gap-2">
|
|
|
+ <Calendar className="w-4 h-4 text-slate-400" />
|
|
|
+ <span className="text-slate-300">{formatFullDateTime(callLog.created_at)}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
- {/* Phone with icon */}
|
|
|
- <div className="flex items-center gap-2 mb-2">
|
|
|
- <Phone className="w-4 h-4 text-slate-400" />
|
|
|
- <span className="text-slate-300">{callLog.caller || '-'}</span>
|
|
|
- </div>
|
|
|
-
|
|
|
- {/* Added time */}
|
|
|
- <div className="flex items-center gap-2 mb-6">
|
|
|
- <Calendar className="w-4 h-4 text-slate-400" />
|
|
|
- <span className="text-slate-300">{getRelativeTime(callLog.created_at, t)}</span>
|
|
|
- </div>
|
|
|
-
|
|
|
- {/* Stats Grid - 2x3 */}
|
|
|
+ {/* Stats Grid - 2x2 */}
|
|
|
<div className="grid grid-cols-2 gap-4 mb-6">
|
|
|
{/* Total Calls */}
|
|
|
<div className="bg-slate-700/50 rounded-lg p-4 text-center">
|
|
|
@@ -415,20 +413,6 @@ export function CallLogDetailContent() {
|
|
|
<div className="text-sm text-slate-400">{t('callLogDetail.totalDuration')}</div>
|
|
|
</div>
|
|
|
|
|
|
- {/* Total Cost */}
|
|
|
- <div className="bg-slate-700/50 rounded-lg p-4 text-center">
|
|
|
- <div className="text-2xl font-bold text-white">
|
|
|
- {callLog.cost_total ? `$${callLog.cost_total.toFixed(2)}` : '-'}
|
|
|
- </div>
|
|
|
- <div className="text-sm text-slate-400">{t('callLogDetail.totalCost')}</div>
|
|
|
- </div>
|
|
|
-
|
|
|
- {/* Outcome in grid */}
|
|
|
- <div className="bg-slate-700/50 rounded-lg p-4 text-center">
|
|
|
- <div className="text-lg font-bold text-white">{formatOutcome(callLog.outcome)}</div>
|
|
|
- <div className="text-sm text-slate-400">{t('callLogDetail.callOutcome')}</div>
|
|
|
- </div>
|
|
|
-
|
|
|
{/* Customer Satisfaction */}
|
|
|
<div className="bg-slate-700/50 rounded-lg p-4 text-center col-span-2">
|
|
|
{(() => {
|