From eb4b25f3270b2673b26c28c99fd0e8690c95e0f2 Mon Sep 17 00:00:00 2001
From: suryacp23 <suryacp.com@gmail.com>
Date: Thu, 30 Jul 2026 16:36:00 +0530
Subject: [PATCH] made call details kpi less gap

---
 src/components/dv/CallDetail.tsx | 42 ++++++++++++++------------------
 1 file changed, 18 insertions(+), 24 deletions(-)

diff --git a/src/components/dv/CallDetail.tsx b/src/components/dv/CallDetail.tsx
index d6434bd..68c2620 100644
--- a/src/components/dv/CallDetail.tsx
+++ b/src/components/dv/CallDetail.tsx
@@ -405,22 +405,18 @@ export function CallDetail({
           </div>
 
           {/* Top Right KPI Grid */}
-          <div className="flex flex-nowrap items-center gap-3 w-full lg:w-auto overflow-x-auto pb-2 min-w-0">
-            <div className="bg-primary-light-bg border border-primary-light-border rounded-2xl p-3 text-center min-w-[100px] flex-1">
-              <div className="text-[10px] font-bold text-primary uppercase tracking-wider mb-0.5">TOTAL BAGS</div>
-              <div className="text-[20px] font-extrabold text-primary">{totalBags.toLocaleString()}</div>
+          <div className="flex flex-nowrap items-center gap-2 w-full min-w-0 mt-2">
+            <div className="bg-primary-light-bg border border-primary-light-border rounded-2xl p-2.5 text-center flex-1 min-w-0">
+              <div className="text-[10px] font-bold text-primary uppercase tracking-wider mb-0.5 whitespace-nowrap overflow-hidden text-ellipsis">TOTAL BAGS</div>
+              <div className="text-lg font-extrabold text-primary leading-tight">{totalBags.toLocaleString()}</div>
             </div>
-            <div className="bg-primary-light-bg border border-primary-light-border rounded-2xl p-3 text-center min-w-[100px] flex-1">
-              <div className="text-[10px] font-bold text-primary uppercase tracking-wider mb-0.5">TOTAL KGS</div>
-              <div className="text-[20px] font-extrabold text-primary">{totalKgs.toLocaleString()}</div>
+            <div className="bg-primary-light-bg border border-primary-light-border rounded-2xl p-2.5 text-center flex-1 min-w-0">
+              <div className="text-[10px] font-bold text-primary uppercase tracking-wider mb-0.5 whitespace-nowrap overflow-hidden text-ellipsis">TOTAL KGS</div>
+              <div className="text-lg font-extrabold text-primary leading-tight">{totalKgs.toLocaleString()}</div>
             </div>
-            <div className="bg-primary-light-bg border border-primary-light-border rounded-2xl p-3 text-center min-w-[100px] flex-1">
-              <div className="text-[10px] font-bold text-primary uppercase tracking-wider mb-0.5">LINE ITEMS</div>
-              <div className="text-[20px] font-extrabold text-primary">{lineItemsCount}</div>
-            </div>
-            <div className="bg-primary-light-bg border border-primary-light-border rounded-2xl p-3 text-center min-w-[110px] flex-1">
-              <div className="text-[10px] font-bold text-primary uppercase tracking-wider mb-0.5">SALES OFFICER</div>
-              <div className="text-sm font-bold text-primary mt-1 whitespace-nowrap overflow-hidden text-ellipsis">{salesOfficer}</div>
+            <div className="bg-primary-light-bg border border-primary-light-border rounded-2xl p-2.5 text-center flex-1 min-w-0">
+              <div className="text-[10px] font-bold text-primary uppercase tracking-wider mb-0.5 whitespace-nowrap overflow-hidden text-ellipsis">ORDER ITEMS</div>
+              <div className="text-lg font-extrabold text-primary leading-tight">{lineItemsCount}</div>
             </div>
           </div>
         </div>
@@ -593,7 +589,7 @@ export function CallDetail({
 
           {/* Call Potential Card (Below Orders) */}
           {callPotentialList.length > 0 && (
-            <div className="bg-[var(--tiles-card-bg)] rounded-2xl border border-slate-200/80 p-6 shadow-sm space-y-4">
+            <div className="bg-[var(--tiles-card-bg)] rounded-2xl border border-slate-200/80 p-5 shadow-sm flex flex-col gap-3">
               <div className="flex items-center justify-between border-b border-slate-100 pb-3">
                 <div className="flex items-center gap-2">
                   <div className="bg-primary-light-bg p-1.5 rounded-full border border-primary-light-border flex items-center justify-center">
@@ -609,16 +605,14 @@ export function CallDetail({
                 const extraOrdered = callPotentialList.filter(item => item.actualPotential === 0);
 
                 const renderTable = (items: any[]) => (
-                  <div className="flex flex-col gap-3">
+                  <div className="flex flex-col gap-2.5">
                     {items.map((item, idx) => (
-                      <div key={idx} className="bg-primary-light-bg border border-primary-light-border rounded-3xl px-5 py-4 flex flex-col gap-3">
-                        <div className="flex justify-between items-start gap-4">
-                          <div className="flex flex-col gap-1.5">
-                            <span className="text-primary font-semibold text-[15px]">{item.name}</span>
-                          </div>
+                      <div key={idx} className="bg-primary-light-bg border border-primary-light-border rounded-xl px-3 py-2.5 flex flex-col gap-1">
+                        <div className="flex justify-between items-center">
+                          <span className="text-primary font-bold text-[13px] uppercase tracking-wide">{item.name}</span>
                         </div>
                         
-                        <div className="flex justify-between items-center bg-white rounded-2xl py-3 px-4 border border-primary-light-border">
+                        <div className="flex justify-between items-center bg-white rounded-lg py-1.5 px-3 border border-primary-light-border mt-0.5">
                           <div className="flex flex-col gap-0.5">
                             <span className="text-[10px] font-bold text-primary uppercase tracking-wider">Potential</span>
                             <span className="text-sm font-semibold text-primary">{item.actualPotential}</span>
@@ -647,11 +641,11 @@ export function CallDetail({
                 );
 
                 return (
-                  <div className="space-y-6">
+                  <div className="flex flex-col gap-4">
                     {regularPotential.length > 0 && renderTable(regularPotential)}
 
                     {extraOrdered.length > 0 && (
-                      <div className="space-y-4 pt-2 border-t border-slate-100 mt-4">
+                      <div className="flex flex-col gap-3 pt-2 border-t border-slate-100 mt-2">
                         <div className="flex items-center gap-2">
                           <ShoppingCart className="text-slate-800" size={14} />
                           <h3 className="text-[11px] font-bold text-slate-800 uppercase tracking-wider">Ordered Outside Potential</h3>