Selaa lähdekoodia

refactor(call-log-detail): simplify contact info layout

- Remove price/cost summary from stats grid
- Remove duplicate caller display and outcome badge at top
- Combine phone number + full date-time on single line (YYYY-MM-DD. HH:MM)
- Keep only bottom call outcome box

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Fszontagh 4 kuukautta sitten
vanhempi
sitoutus
3a71f5ced3
1 muutettua tiedostoa jossa 19 lisäystä ja 35 poistoa
  1. 19 35
      shopcall.ai-main/src/components/CallLogDetailContent.tsx

+ 19 - 35
shopcall.ai-main/src/components/CallLogDetailContent.tsx

@@ -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">
                 {(() => {