gitea_admin/krishnasales_mobile
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

made call details kpi less gap

Browse Source
This commit is contained in:
suryacp23 2026-07-30 16:36:00 +05:30
parent cee2f5d94f
commit eb4b25f327
1 changed files with 18 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
src/components/dv/CallDetail.tsx
View File

@ -405,22 +405,18 @@ export function CallDetail({
</div> </div>
{/* Top Right KPI Grid */} {/* 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="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-3 text-center min-w-[100px] flex-1"> <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">TOTAL BAGS</div> <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-[20px] font-extrabold text-primary">{totalBags.toLocaleString()}</div> <div className="text-lg font-extrabold text-primary leading-tight">{totalBags.toLocaleString()}</div>
</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="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">TOTAL KGS</div> <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-[20px] font-extrabold text-primary">{totalKgs.toLocaleString()}</div> <div className="text-lg font-extrabold text-primary leading-tight">{totalKgs.toLocaleString()}</div>
</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="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">LINE ITEMS</div> <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-[20px] font-extrabold text-primary">{lineItemsCount}</div> <div className="text-lg font-extrabold text-primary leading-tight">{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> </div>
</div> </div>
</div> </div>
@ -593,7 +589,7 @@ export function CallDetail({
{/* Call Potential Card (Below Orders) */} {/* Call Potential Card (Below Orders) */}
{callPotentialList.length > 0 && ( {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 justify-between border-b border-slate-100 pb-3">
<div className="flex items-center gap-2"> <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"> <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 extraOrdered = callPotentialList.filter(item => item.actualPotential === 0);
const renderTable = (items: any[]) => ( const renderTable = (items: any[]) => (
<div className="flex flex-col gap-3"> <div className="flex flex-col gap-2.5">
{items.map((item, idx) => ( {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 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-start gap-4"> <div className="flex justify-between items-center">
<div className="flex flex-col gap-1.5"> <span className="text-primary font-bold text-[13px] uppercase tracking-wide">{item.name}</span>
<span className="text-primary font-semibold text-[15px]">{item.name}</span>
</div>
</div> </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"> <div className="flex flex-col gap-0.5">
<span className="text-[10px] font-bold text-primary uppercase tracking-wider">Potential</span> <span className="text-[10px] font-bold text-primary uppercase tracking-wider">Potential</span>
<span className="text-sm font-semibold text-primary">{item.actualPotential}</span> <span className="text-sm font-semibold text-primary">{item.actualPotential}</span>
@ -647,11 +641,11 @@ export function CallDetail({
); );
return ( return (
<div className="space-y-6"> <div className="flex flex-col gap-4">
{regularPotential.length > 0 && renderTable(regularPotential)} {regularPotential.length > 0 && renderTable(regularPotential)}
{extraOrdered.length > 0 && ( {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"> <div className="flex items-center gap-2">
<ShoppingCart className="text-slate-800" size={14} /> <ShoppingCart className="text-slate-800" size={14} />
<h3 className="text-[11px] font-bold text-slate-800 uppercase tracking-wider">Ordered Outside Potential</h3> <h3 className="text-[11px] font-bold text-slate-800 uppercase tracking-wider">Ordered Outside Potential</h3>