From ea0aa8ae58da395e5dd49c572794474036c970d2 Mon Sep 17 00:00:00 2001 From: suryacp23 Date: Mon, 27 Jul 2026 19:29:46 +0530 Subject: [PATCH] color changes happened --- src/components/cards/OrderCard.tsx | 12 +- src/components/cards/card.css | 11 +- src/components/dv/CallDetail.tsx | 280 +++++++++++---------- src/components/dv/OrderDetail.tsx | 105 ++++---- src/components/dv/PotentialMiningTable.tsx | 54 ++-- src/components/dv/StoreDetail.tsx | 141 ++++++----- src/components/reusable/reusable.css | 4 +- 7 files changed, 320 insertions(+), 287 deletions(-) diff --git a/src/components/cards/OrderCard.tsx b/src/components/cards/OrderCard.tsx index 1c33710..05402b5 100644 --- a/src/components/cards/OrderCard.tsx +++ b/src/components/cards/OrderCard.tsx @@ -108,11 +108,11 @@ export function OrderCard({ row, fields, isDetailView = false }: { row: Record
- {productName} + {productName}
- {bagsStr} Bags - ({kgsStr}) + {bagsStr} Bags + ({kgsStr})
); @@ -127,10 +127,10 @@ export function OrderCard({ row, fields, isDetailView = false }: { row: Record - TOTAL + TOTAL
- {totalBags} Bags - ({totalKgs} kg) + {totalBags} Bags + ({totalKgs} kg)
diff --git a/src/components/cards/card.css b/src/components/cards/card.css index 485437e..a098a4f 100644 --- a/src/components/cards/card.css +++ b/src/components/cards/card.css @@ -25,7 +25,7 @@ display: flex; align-items: center; gap: 6px; - color: var(--z-text-primary-300); + color: var(--primary-color); font-weight: 700; font-size: var(--z-font-sm); } @@ -137,22 +137,23 @@ .z-card-action-btn { width: 100%; - background-color: var(--z-bg-neutral-200); + background-color: #e8fbf0; + border: 1px solid #bcecd0; border-radius: var(--z-border-radius-lg); padding: 10px 0; display: flex; align-items: center; justify-content: center; gap: 6px; - color: var(--z-text-primary-400); - font-weight: 600; + color: var(--primary-color); + font-weight: 700; font-size: var(--z-font-sm); transition: background-color 0.2s ease; cursor: pointer; } .z-card-action-btn:hover { - background-color: var(--z-bg-neutral-300); + background-color: #d1f5de; } .z-card-details { diff --git a/src/components/dv/CallDetail.tsx b/src/components/dv/CallDetail.tsx index 2b8d582..4de4b7d 100644 --- a/src/components/dv/CallDetail.tsx +++ b/src/components/dv/CallDetail.tsx @@ -359,7 +359,7 @@ export function CallDetail({ {/* Title & Badges */}
{onBack && ( - )} @@ -381,7 +381,7 @@ export function CallDetail({ On call */} - {/* + {/* {isPlaceOrderDone ? `Order ${orderId}` : 'Order Not Placed'} */}
@@ -390,15 +390,15 @@ export function CallDetail({ {storeName} -
+
- {areaLoc} + {areaLoc} • {route} • - {fullDateTimeOrder} + {fullDateTimeOrder}
@@ -406,21 +406,21 @@ export function CallDetail({ {/* Top Right KPI Grid */}
-
-
TOTAL BAGS
-
{totalBags.toLocaleString()}
+
+
TOTAL BAGS
+
{totalBags.toLocaleString()}
-
-
TOTAL KGS
-
{totalKgs.toLocaleString()}
+
+
TOTAL KGS
+
{totalKgs.toLocaleString()}
-
-
LINE ITEMS
-
{lineItemsCount}
+
+
LINE ITEMS
+
{lineItemsCount}
-
-
SALES OFFICER
-
{salesOfficer}
+
+
SALES OFFICER
+
{salesOfficer}
@@ -436,13 +436,13 @@ export function CallDetail({ ✓
) : ( -
+
)}
-
Visit logged
-
+
Visit logged
+
{isLogVisitDone ? `${time1} • ${date1}` : 'Not performed'}
@@ -455,13 +455,13 @@ export function CallDetail({ ✓
) : ( -
+
)}
-
Productive call
-
+
Productive call
+
{isProductivityDone ? `${time2} • ${date2}` : 'Not performed'}
@@ -474,13 +474,13 @@ export function CallDetail({ ✓
) : ( -
+
)}
-
Potential Mining
-
+
Potential Mining
+
{isPotentialMiningDone ? `${timePm} • ${datePm}` : 'Not performed'}
@@ -493,13 +493,13 @@ export function CallDetail({ ✓
) : ( -
+
)}
-
Ordered
-
+
Ordered
+
{isPlaceOrderDone ? `${time3} • ${date3}` : 'Not performed'}
@@ -520,11 +520,13 @@ export function CallDetail({
- +
+ +

Order Details

- + {isPlaceOrderDone ? `${orderId} • ${dateOfOrder}` : 'Not Performed'}
@@ -536,54 +538,47 @@ export function CallDetail({ <>
{orderItems.map((item, idx) => { - let codeBadgeClass = "bg-blue-50 text-blue-700 border-blue-200"; - if (item.skuCode?.includes('50')) codeBadgeClass = "bg-indigo-50 text-indigo-700 border-indigo-200"; - if (item.skuCode?.includes('MAP')) codeBadgeClass = "bg-emerald-50 text-emerald-700 border-emerald-200"; - + const bagsStr = item.bags; + const kgsStr = item.totalKgs > 0 ? `${item.totalKgs.toLocaleString()} kg` : '0 kg'; return ( -
-
-
- {item.name} - {item.category} -
- - {item.skuCode} - +
+
+ {item.name}
- -
-
- Bags - {item.bags} -
-
- Total Kgs - {item.totalKgs.toLocaleString()} -
+
+ {bagsStr} Bags + ({kgsStr})
); })}
-
- Total Order +
+ Total Order
- Bags + Bags {totalBags}
- Total Kgs - {totalKgs.toLocaleString()} + Total Kgs + {totalKgs.toLocaleString()}
) : ( -
- - Order not placed +
+ + Order not placed
)}
@@ -592,7 +587,7 @@ export function CallDetail({ {/* Meta Footer */} {isPlaceOrderDone && ( -
+
CREATED BY {salesOfficer} • {officerJob || 'Sales Officer'}
@@ -609,10 +604,12 @@ export function CallDetail({
- +
+ +

Potential vs Ordered

- Ordered vs opportunity + Ordered vs opportunity
{(() => { @@ -622,32 +619,42 @@ export function CallDetail({ const renderTable = (items: any[]) => (
{items.map((item, idx) => ( -
-
- {item.name} +
+
+
+ {item.name} +
-
+ +
- Potential - {item.actualPotential} + Potential + {item.actualPotential}
-
- Ordered - {item.totalOrdered} +
+ Ordered + {item.totalOrdered}
-
- Difference - +
+ Diff + = 0 ? '#059669' : '#ef4444' }}> {item.difference > 0 ? '+' : ''}{item.difference}
+ {item.reason && ( -
- Reason - - {item.reason} - +
+ Reason + {item.reason}
)}
@@ -662,8 +669,8 @@ export function CallDetail({ {extraOrdered.length > 0 && (
- -

Ordered Outside Potential

+ +

Ordered Outside Potential

{renderTable(extraOrdered)}
@@ -689,33 +696,33 @@ export function CallDetail({

Visit Log

- Logged at {time1} + Logged at {time1}
{/* Left Key Value Details */}
- DATE OF VISIT + DATE OF VISIT {dateOfVisit}
- TIME OF VISIT + TIME OF VISIT {timeOfVisit}
- STORE STATUS + STORE STATUS {storeStatus}
- CHANNEL + CHANNEL {channel}
{/* Right Store Proof Photo */}
-
+
UPLOADED PROOF
@@ -731,7 +738,7 @@ export function CallDetail({ className="w-full h-auto max-h-[300px] object-cover transition-transform group-hover:scale-[1.01]" onError={(e) => { (e.target as HTMLImageElement).style.display = 'none'; - (e.target as HTMLImageElement).parentElement!.innerHTML = `
${file.original_name || 'Proof Image'}
`; + (e.target as HTMLImageElement).parentElement!.innerHTML = `
${file.original_name || 'Proof Image'}
`; }} /> @@ -740,9 +747,9 @@ export function CallDetail({ })}
) : ( -
- - No proof image uploaded +
+ + No proof image uploaded
)}
@@ -768,11 +775,11 @@ export function CallDetail({ />
) : ( -
-
- +
+
+
- {storeName} + {storeName}
)}
@@ -781,7 +788,9 @@ export function CallDetail({
- +
+ +

Store

@@ -791,27 +800,27 @@ export function CallDetail({
- BUSINESS + BUSINESS {storeName}
- OWNER + OWNER {ownerName}
- PHONE + PHONE - {phone} + {phone}
- EMAIL + EMAIL - {email} + {email}
{/* Notes Container */} -
-
- NOTES +
+
+ NOTES
-

+

{storeNotes}

@@ -846,19 +855,30 @@ export function CallDetail({
- +
+ +

Store Potential

- Total capacity + Total capacity
{storePotentialList.map((item, idx) => ( -
- {item.name} -
- Potential - {item.actualPotential} KG +
+
+ {item.name} +
+
+ {item.actualPotential} KG Potential
))} @@ -869,29 +889,31 @@ export function CallDetail({ {/* Distributor Card */}
- +
+ +

Distributor

- COMPANY + COMPANY {distCompany}
- CONTACT + CONTACT {distContact}
- PHONE + PHONE - {distPhone} + {distPhone}
- EMAIL + EMAIL - {distEmail} + {distEmail}
@@ -906,17 +928,17 @@ export function CallDetail({
- NAME + NAME {salesOfficer}
- ROLE + ROLE {officerJob || 'Sales Officer'}
- EMAIL + EMAIL - {officerEmail} + {officerEmail}
diff --git a/src/components/dv/OrderDetail.tsx b/src/components/dv/OrderDetail.tsx index 8c7f484..0f1b044 100644 --- a/src/components/dv/OrderDetail.tsx +++ b/src/components/dv/OrderDetail.tsx @@ -124,52 +124,49 @@ export function OrderDetail({ instanceId, onDataLoad, onBack }: WiredDetailViewP
{/* Top Section */}
-
- {onBack && ( - - )} -
Order ID
+
+
+ {onBack && ( + + )} +
Order ID
+
+
{String(orderId)}
+
+ {String(dateOfOrder)} + Instance #{instanceId} +
-
{String(orderId)}
-
- {String(dateOfOrder)} - Instance #{instanceId} -
-
-
- Store + +
+
+ Store
-
{String(storeName)}
-
- {String(routeCode)} - {String(routeName)} +
{String(storeName)}
+
+ {String(routeCode)} - {String(routeName)}
-
- {String(distributorName)} +
+ {String(distributorName)}
{/* Middle Stats Section */} -
-
-
- Total Bags -
-
{String(totalBags)}
+
+
+
TOTAL BAGS
+
{String(totalBags)}
-
-
- Total Kilograms -
-
{Number(totalKgs).toLocaleString()}
+
+
TOTAL KGS
+
{Number(totalKgs).toLocaleString()}
-
-
- Line Items -
-
{itemsArray.length}
+
+
LINE ITEMS
+
{itemsArray.length}
@@ -216,11 +213,11 @@ export function OrderDetail({ instanceId, onDataLoad, onBack }: WiredDetailViewP padding: '14px 20px', }}>
- {productName} + {productName}
- {bagsStr} Bags - ({kgsStr}) + {bagsStr} Bags + ({kgsStr})
); @@ -236,10 +233,10 @@ export function OrderDetail({ instanceId, onDataLoad, onBack }: WiredDetailViewP border: '1px dashed #cbd5e1', borderRadius: '24px' }}> - TOTAL + TOTAL
- {totalBags} Bags - ({Number(totalKgs).toLocaleString()} kg) + {totalBags} Bags + ({Number(totalKgs).toLocaleString()} kg)
)} @@ -250,8 +247,8 @@ export function OrderDetail({ instanceId, onDataLoad, onBack }: WiredDetailViewP
{/* SO Card */}
-
- Sales Officer +
+ Sales Officer
@@ -259,25 +256,25 @@ export function OrderDetail({ instanceId, onDataLoad, onBack }: WiredDetailViewP
{String(soName)}
-
Sales Officer - ID {String(soId)}
+
Sales Officer - ID {String(soId)}
- +
-
Email
+
Email
{String(soEmail)}
- +
-
User ID
+
User ID
{String(soId)}
@@ -286,20 +283,20 @@ export function OrderDetail({ instanceId, onDataLoad, onBack }: WiredDetailViewP {/* Order Meta */}
-
- Order Meta +
+ Order Meta
- Instance + Instance #{instanceId}
- State + State {String(stateName)}
- Date of Order + Date of Order {String(dateOfOrder)}
diff --git a/src/components/dv/PotentialMiningTable.tsx b/src/components/dv/PotentialMiningTable.tsx index 83fd189..0ad88d1 100644 --- a/src/components/dv/PotentialMiningTable.tsx +++ b/src/components/dv/PotentialMiningTable.tsx @@ -29,18 +29,26 @@ export function PotentialMiningTable({ data, onEdit, onDelete, hideOrderDetails const absDiff = Math.abs(difference); return ( -
+
- {item.productName} + {item.productName} {item.badge && ( {item.badge.label} @@ -48,38 +56,34 @@ export function PotentialMiningTable({ data, onEdit, onDelete, hideOrderDetails
-
+
- Potential - {item.potentialKgs} + Potential + {item.potentialKgs} kg
- {!hideOrderDetails ? ( + {!hideOrderDetails && ( <> -
- Ordered - {item.orderedKgs} +
+ Ordered + {item.orderedKgs} kg
-
- Diff - +
+ Diff + {isSurplus ? '+' : '-'}{absDiff}
- ) : ( -
)}
- - {(onEdit || onDelete) && ( -
+
{onEdit && ( @@ -88,7 +92,7 @@ export function PotentialMiningTable({ data, onEdit, onDelete, hideOrderDetails diff --git a/src/components/dv/StoreDetail.tsx b/src/components/dv/StoreDetail.tsx index 32e2fd7..a8d72c0 100644 --- a/src/components/dv/StoreDetail.tsx +++ b/src/components/dv/StoreDetail.tsx @@ -159,7 +159,7 @@ export function StoreDetail({ instanceId, onBack, onEdit }: StoreDetailProps) { {onBack && ( @@ -190,8 +190,8 @@ export function StoreDetail({ instanceId, onBack, onEdit }: StoreDetailProps) { {String(businessName)}
) : ( -
- +
+
)} @@ -211,7 +211,7 @@ export function StoreDetail({ instanceId, onBack, onEdit }: StoreDetailProps) {

{String(businessName)}

-
+
{[completeAddress, area].filter(Boolean).join(', ')} @@ -223,17 +223,17 @@ export function StoreDetail({ instanceId, onBack, onEdit }: StoreDetailProps) { {/* Bottom Stats Row */}
-
Owner
+
Owner
{String(ownerName)}
-
Route
+
Route
{String(routeName || '-')}{subRoute ? ` · ${subRoute}` : ''}
-
Potential
+
Potential
- {totalPotential} units + {totalPotential} units
@@ -249,43 +249,43 @@ export function StoreDetail({ instanceId, onBack, onEdit }: StoreDetailProps) { {/* Contact Card */}
- -

Contact

+ +

Contact

- +
-
Owner
+
Owner
{String(ownerName)}
- +
-
Phone
+
Phone
{String(phoneNumber)}
- +
-
Email
+
Email
{email ? String(email) : '-'}
- +
-
Address
+
Address
{[completeAddress, area, pinCode].filter(Boolean).join(', ')}
@@ -297,23 +297,23 @@ export function StoreDetail({ instanceId, onBack, onEdit }: StoreDetailProps) { {/* Route Assignment Card */}
- -

Route Assignment

+ +

Route Assignment

-
-
Route
-
{routeName ? String(routeName) : '-'}
-
Code {routeCode ? String(routeCode) : '-'}
+
+
Route
+
{routeName ? String(routeName) : '-'}
+
Code {routeCode ? String(routeCode) : '-'}
-
-
Sub Route
-
{subRoute ? String(subRoute) : '-'}
+
+
Sub Route
+
{subRoute ? String(subRoute) : '-'}
-
-
Area
-
{area ? String(area) : '-'}
-
PIN {pinCode ? String(pinCode) : '-'}
+
+
Area
+
{area ? String(area) : '-'}
+
PIN {pinCode ? String(pinCode) : '-'}
@@ -322,27 +322,36 @@ export function StoreDetail({ instanceId, onBack, onEdit }: StoreDetailProps) { {Array.isArray(potential) && potential.length > 0 && (
- -

Order Potential

+ +

Order Potential

{potential.map((p: any, idx: number) => { if (!p.product_category && !p.quantity) return null; return ( -
- {p.product_category ? String(p.product_category) : '-'} -
- Potential - {p.quantity ? String(p.quantity) : '0'} +
+
+ {p.product_category ? String(p.product_category) : '-'} +
+
+ {p.quantity ? String(p.quantity) : '0'} Potential
); })}
-
- Total Potential - {totalPotential} +
+ Total Potential + {totalPotential}
@@ -351,31 +360,31 @@ export function StoreDetail({ instanceId, onBack, onEdit }: StoreDetailProps) { {/* Distributor Card */}
- -

Distributor

+ +

Distributor

-
-
{distributorName ? String(distributorName) : '-'}
-
Owner · {distributorOwnerName ? String(distributorOwnerName) : '-'}
+
+
{distributorName ? String(distributorName) : '-'}
+
Owner · {distributorOwnerName ? String(distributorOwnerName) : '-'}
-
-
- +
+
+
-
Phone
-
{String(distributorPhone)}
+
Phone
+
{String(distributorPhone)}
-
-
- +
+
+
-
Email
-
{distributorEmail ? String(distributorEmail) : '-'}
+
Email
+
{distributorEmail ? String(distributorEmail) : '-'}
@@ -391,8 +400,8 @@ export function StoreDetail({ instanceId, onBack, onEdit }: StoreDetailProps) { {/* Location Map */}
- -

Location

+ +

Location

{lat && lng ? ( @@ -414,14 +423,14 @@ export function StoreDetail({ instanceId, onBack, onEdit }: StoreDetailProps) {
) : ( -
+
No location data
)}
{lat && lng && ( -
+
Tap map icon to open in Google Maps.
)} @@ -430,24 +439,24 @@ export function StoreDetail({ instanceId, onBack, onEdit }: StoreDetailProps) { {/* Meta */}
- -

Meta

+ +

Meta

- Store Code + Store Code {String(storeCode)}
- Instance + Instance #{instanceId}
- Created by + Created by {String(userName)}
- Created at + Created at {createdAt !== '-' ? new Date(createdAt as string).toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' }) : '-'}
diff --git a/src/components/reusable/reusable.css b/src/components/reusable/reusable.css index 9f1b7b9..7559f7b 100644 --- a/src/components/reusable/reusable.css +++ b/src/components/reusable/reusable.css @@ -90,7 +90,7 @@ .z-stats-label { font-size: 11px; font-weight: 700; - color: #8892a0; + color: var(--primary-color); /* subtle gray */ text-transform: uppercase; letter-spacing: 0.04em; @@ -101,7 +101,7 @@ font-size: 32px; font-weight: 800; line-height: 1.1; - color: var(--z-text-primary-400, #0055ff); + color: var(--primary-color); font-family: var(--font-numeric, inherit); letter-spacing: -0.02em; } \ No newline at end of file