From c6a32de2bacc78d3e89e87e1eeb38bccdd1924b4 Mon Sep 17 00:00:00 2001
From: Bhanu Prakash Sai Potteri <bhanu.potteri@getzino.com>
Date: Sat, 23 May 2026 10:42:59 +0530
Subject: [PATCH] Format phone object in detail view (phone_with_dial_code)

---
 src/components/DetailViewPanel.tsx | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/components/DetailViewPanel.tsx b/src/components/DetailViewPanel.tsx
index fc8794e..9ceb2ff 100644
--- a/src/components/DetailViewPanel.tsx
+++ b/src/components/DetailViewPanel.tsx
@@ -129,7 +129,7 @@ export default function DetailViewPanel({ viewId, instanceId }: Props) {
   const stateName = String(data.current_state_name ?? "");
   const sc        = STATUS[stateName] ?? DS;
 
-  const phone = String(data.customer_phone ?? "");
+  const phone = fmtPhone(data.customer_phone);
   const model = String(data.model_interest ?? "");
 
   const leftGroups = [
@@ -353,6 +353,10 @@ function fmtLabel(label: string): string {
 
 function fmtVal(val: unknown, type: string, key: string): string {
   if (val == null || val === "") return "—";
+  if (type === "phone" && typeof val === "object") {
+    const p = val as { phone_with_dial_code?: string; phone?: string; dial_code?: string };
+    return p.phone_with_dial_code || (p.dial_code && p.phone ? `${p.dial_code}${p.phone}` : p.phone || "—");
+  }
   if (type === "number") {
     const n = Number(val);
     if (["amount","tax","price","cost"].some(x => key.toLowerCase().includes(x))) return fmtCurrency(n);
@@ -370,3 +374,12 @@ function fmtDate(val: string): string {
   try { return new Date(val).toLocaleDateString("en-IN", { day: "2-digit", month: "short", year: "numeric" }); }
   catch { return val; }
 }
+
+function fmtPhone(val: unknown): string {
+  if (val == null || val === "") return "";
+  if (typeof val === "object") {
+    const p = val as { phone_with_dial_code?: string; phone?: string; dial_code?: string };
+    return p.phone_with_dial_code || (p.dial_code && p.phone ? `${p.dial_code}${p.phone}` : p.phone || "");
+  }
+  return String(val);
+}