color changes happened
This commit is contained in:
suryacp23
parent
761653da47
commit
ea0aa8ae58
@ -108,11 +108,11 @@ export function OrderCard({ row, fields, isDetailView = false }: { row: Record<s
|
||||
padding: '12px 20px',
|
||||
}}>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
|
||||
<span style={{ color: '#086e73', fontWeight: 600, fontSize: '14px' }}>{productName}</span>
|
||||
<span style={{ color: 'var(--primary-color)', fontWeight: 600, fontSize: '14px' }}>{productName}</span>
|
||||
</div>
|
||||
<div style={{ textAlign: 'right', whiteSpace: 'nowrap' }}>
|
||||
<span style={{ color: '#563bd4', fontWeight: 700, fontSize: '14px' }}>{bagsStr} Bags</span>
|
||||
<span style={{ color: '#64748b', fontSize: '13px', marginLeft: '6px' }}>({kgsStr})</span>
|
||||
<span style={{ color: 'var(--primary-color)', fontWeight: 700, fontSize: '14px' }}>{bagsStr} Bags</span>
|
||||
<span style={{ color: 'var(--primary-color)', fontSize: '13px', marginLeft: '6px' }}>({kgsStr})</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
@ -127,10 +127,10 @@ export function OrderCard({ row, fields, isDetailView = false }: { row: Record<s
|
||||
border: '1px dashed #cbd5e1',
|
||||
borderRadius: '24px'
|
||||
}}>
|
||||
<span style={{ color: '#64748b', fontWeight: 600, fontSize: '13px' }}>TOTAL</span>
|
||||
<span style={{ color: 'var(--primary-color)', fontWeight: 600, fontSize: '13px' }}>TOTAL</span>
|
||||
<div>
|
||||
<span style={{ color: '#563bd4', fontWeight: 700, fontSize: '15px' }}>{totalBags} Bags</span>
|
||||
<span style={{ color: '#64748b', fontSize: '14px', marginLeft: '6px' }}>({totalKgs} kg)</span>
|
||||
<span style={{ color: 'var(--primary-color)', fontWeight: 700, fontSize: '15px' }}>{totalBags} Bags</span>
|
||||
<span style={{ color: 'var(--primary-color)', fontSize: '14px', marginLeft: '6px' }}>({totalKgs} kg)</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -359,7 +359,7 @@ export function CallDetail({
|
||||
{/* Title & Badges */}
|
||||
<div className="flex items-start gap-3 sm:gap-4">
|
||||
{onBack && (
|
||||
<button onClick={onBack} className="mt-1 p-1.5 sm:p-2 text-slate-400 hover:text-slate-800 hover:bg-slate-100/80 rounded-full transition-colors shrink-0 -ml-2">
|
||||
<button onClick={onBack} className="mt-1 p-1.5 sm:p-2 text-slate-800 hover:text-slate-800 hover:bg-slate-100/80 rounded-full transition-colors shrink-0 -ml-2">
|
||||
<ArrowLeft size={20} strokeWidth={2.5} />
|
||||
</button>
|
||||
)}
|
||||
@ -381,7 +381,7 @@ export function CallDetail({
|
||||
<span className="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-xs font-semibold bg-slate-100 text-slate-700 border border-slate-200">
|
||||
<Phone size={11} /> On call
|
||||
</span> */}
|
||||
{/* <span className="text-xs font-medium text-slate-400">
|
||||
{/* <span className="text-xs font-medium text-slate-800">
|
||||
{isPlaceOrderDone ? `Order ${orderId}` : 'Order Not Placed'}
|
||||
</span> */}
|
||||
</div>
|
||||
@ -390,15 +390,15 @@ export function CallDetail({
|
||||
{storeName}
|
||||
</h1>
|
||||
|
||||
<div className="flex flex-wrap items-center gap-3 text-xs text-slate-500 font-medium">
|
||||
<div className="flex flex-wrap items-center gap-3 text-xs text-slate-800 font-medium">
|
||||
<span className="flex items-center gap-1">
|
||||
<MapPin size={13} className="text-slate-400" /> {areaLoc}
|
||||
<MapPin size={13} className="text-slate-800" /> {areaLoc}
|
||||
</span>
|
||||
<span>•</span>
|
||||
<span>{route}</span>
|
||||
<span>•</span>
|
||||
<span className="flex items-center gap-1">
|
||||
<Clock size={13} className="text-slate-400" /> {fullDateTimeOrder}
|
||||
<Clock size={13} className="text-slate-800" /> {fullDateTimeOrder}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
@ -406,21 +406,21 @@ export function CallDetail({
|
||||
|
||||
{/* 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-slate-50 border border-slate-200/60 rounded-xl p-3 text-center min-w-[100px] flex-1">
|
||||
<div className="text-[10px] font-bold text-slate-400 uppercase tracking-wider mb-0.5">TOTAL BAGS</div>
|
||||
<div className="text-xl font-bold text-slate-900">{totalBags.toLocaleString()}</div>
|
||||
<div style={{ backgroundColor: '#e8fbf0', border: '1px solid #bcecd0', borderRadius: '16px', padding: '12px', textAlign: 'center', minWidth: '100px', flex: 1 }}>
|
||||
<div style={{ fontSize: '10px', fontWeight: 700, color: 'var(--primary-color)', textTransform: 'uppercase', letterSpacing: '0.05em', marginBottom: '2px' }}>TOTAL BAGS</div>
|
||||
<div style={{ fontSize: '20px', fontWeight: 800, color: 'var(--primary-color)' }}>{totalBags.toLocaleString()}</div>
|
||||
</div>
|
||||
<div className="bg-slate-50 border border-slate-200/60 rounded-xl p-3 text-center min-w-[100px] flex-1">
|
||||
<div className="text-[10px] font-bold text-slate-400 uppercase tracking-wider mb-0.5">TOTAL KGS</div>
|
||||
<div className="text-xl font-bold text-slate-900">{totalKgs.toLocaleString()}</div>
|
||||
<div style={{ backgroundColor: '#e8fbf0', border: '1px solid #bcecd0', borderRadius: '16px', padding: '12px', textAlign: 'center', minWidth: '100px', flex: 1 }}>
|
||||
<div style={{ fontSize: '10px', fontWeight: 700, color: 'var(--primary-color)', textTransform: 'uppercase', letterSpacing: '0.05em', marginBottom: '2px' }}>TOTAL KGS</div>
|
||||
<div style={{ fontSize: '20px', fontWeight: 800, color: 'var(--primary-color)' }}>{totalKgs.toLocaleString()}</div>
|
||||
</div>
|
||||
<div className="bg-slate-50 border border-slate-200/60 rounded-xl p-3 text-center min-w-[100px] flex-1">
|
||||
<div className="text-[10px] font-bold text-slate-400 uppercase tracking-wider mb-0.5">LINE ITEMS</div>
|
||||
<div className="text-xl font-bold text-slate-900">{lineItemsCount}</div>
|
||||
<div style={{ backgroundColor: '#e8fbf0', border: '1px solid #bcecd0', borderRadius: '16px', padding: '12px', textAlign: 'center', minWidth: '100px', flex: 1 }}>
|
||||
<div style={{ fontSize: '10px', fontWeight: 700, color: 'var(--primary-color)', textTransform: 'uppercase', letterSpacing: '0.05em', marginBottom: '2px' }}>LINE ITEMS</div>
|
||||
<div style={{ fontSize: '20px', fontWeight: 800, color: 'var(--primary-color)' }}>{lineItemsCount}</div>
|
||||
</div>
|
||||
<div className="bg-slate-50 border border-slate-200/60 rounded-xl p-3 text-center min-w-[110px] flex-1">
|
||||
<div className="text-[10px] font-bold text-slate-400 uppercase tracking-wider mb-0.5">SALES OFFICER</div>
|
||||
<div className="text-sm font-bold text-slate-900 truncate mt-1">{salesOfficer}</div>
|
||||
<div style={{ backgroundColor: '#e8fbf0', border: '1px solid #bcecd0', borderRadius: '16px', padding: '12px', textAlign: 'center', minWidth: '110px', flex: 1 }}>
|
||||
<div style={{ fontSize: '10px', fontWeight: 700, color: 'var(--primary-color)', textTransform: 'uppercase', letterSpacing: '0.05em', marginBottom: '2px' }}>SALES OFFICER</div>
|
||||
<div style={{ fontSize: '14px', fontWeight: 700, color: 'var(--primary-color)', marginTop: '4px', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{salesOfficer}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -436,13 +436,13 @@ export function CallDetail({
|
||||
✓
|
||||
</div>
|
||||
) : (
|
||||
<div className="w-6 h-6 rounded-full border-2 border-slate-300 bg-[var(--tiles-card-bg)] text-slate-400 flex items-center justify-center text-xs shrink-0">
|
||||
<div className="w-6 h-6 rounded-full border-2 border-slate-300 bg-[var(--tiles-card-bg)] text-slate-800 flex items-center justify-center text-xs shrink-0">
|
||||
<Clock size={12} />
|
||||
</div>
|
||||
)}
|
||||
<div className="text-xs">
|
||||
<div className={`font-bold ${isLogVisitDone ? 'text-slate-800' : 'text-slate-400'}`}>Visit logged</div>
|
||||
<div className="text-slate-400 font-medium text-[11px] leading-tight mt-0.5">
|
||||
<div className={`font-bold ${isLogVisitDone ? 'text-slate-800' : 'text-slate-800'}`}>Visit logged</div>
|
||||
<div className="text-slate-800 font-medium text-[11px] leading-tight mt-0.5">
|
||||
{isLogVisitDone ? `${time1} • ${date1}` : 'Not performed'}
|
||||
</div>
|
||||
</div>
|
||||
@ -455,13 +455,13 @@ export function CallDetail({
|
||||
✓
|
||||
</div>
|
||||
) : (
|
||||
<div className="w-6 h-6 rounded-full border-2 border-slate-300 bg-[var(--tiles-card-bg)] text-slate-400 flex items-center justify-center text-xs shrink-0">
|
||||
<div className="w-6 h-6 rounded-full border-2 border-slate-300 bg-[var(--tiles-card-bg)] text-slate-800 flex items-center justify-center text-xs shrink-0">
|
||||
<Clock size={12} />
|
||||
</div>
|
||||
)}
|
||||
<div className="text-xs">
|
||||
<div className={`font-bold ${isProductivityDone ? 'text-slate-800' : 'text-slate-400'}`}>Productive call</div>
|
||||
<div className="text-slate-400 font-medium text-[11px] leading-tight mt-0.5">
|
||||
<div className={`font-bold ${isProductivityDone ? 'text-slate-800' : 'text-slate-800'}`}>Productive call</div>
|
||||
<div className="text-slate-800 font-medium text-[11px] leading-tight mt-0.5">
|
||||
{isProductivityDone ? `${time2} • ${date2}` : 'Not performed'}
|
||||
</div>
|
||||
</div>
|
||||
@ -474,13 +474,13 @@ export function CallDetail({
|
||||
✓
|
||||
</div>
|
||||
) : (
|
||||
<div className="w-6 h-6 rounded-full border-2 border-slate-300 bg-[var(--tiles-card-bg)] text-slate-400 flex items-center justify-center text-xs shrink-0">
|
||||
<div className="w-6 h-6 rounded-full border-2 border-slate-300 bg-[var(--tiles-card-bg)] text-slate-800 flex items-center justify-center text-xs shrink-0">
|
||||
<Clock size={12} />
|
||||
</div>
|
||||
)}
|
||||
<div className="text-xs pb-2">
|
||||
<div className={`font-bold ${isPotentialMiningDone ? 'text-slate-800' : 'text-slate-400'}`}>Potential Mining</div>
|
||||
<div className="text-slate-400 font-medium text-[11px] leading-tight mt-0.5">
|
||||
<div className={`font-bold ${isPotentialMiningDone ? 'text-slate-800' : 'text-slate-800'}`}>Potential Mining</div>
|
||||
<div className="text-slate-800 font-medium text-[11px] leading-tight mt-0.5">
|
||||
{isPotentialMiningDone ? `${timePm} • ${datePm}` : 'Not performed'}
|
||||
</div>
|
||||
</div>
|
||||
@ -493,13 +493,13 @@ export function CallDetail({
|
||||
✓
|
||||
</div>
|
||||
) : (
|
||||
<div className="w-6 h-6 rounded-full border-2 border-slate-300 bg-[var(--tiles-card-bg)] text-slate-400 flex items-center justify-center text-xs shrink-0">
|
||||
<div className="w-6 h-6 rounded-full border-2 border-slate-300 bg-[var(--tiles-card-bg)] text-slate-800 flex items-center justify-center text-xs shrink-0">
|
||||
<Clock size={12} />
|
||||
</div>
|
||||
)}
|
||||
<div className="text-xs">
|
||||
<div className={`font-bold ${isPlaceOrderDone ? 'text-slate-800' : 'text-slate-400'}`}>Ordered</div>
|
||||
<div className="text-slate-400 font-medium text-[11px] leading-tight mt-0.5">
|
||||
<div className={`font-bold ${isPlaceOrderDone ? 'text-slate-800' : 'text-slate-800'}`}>Ordered</div>
|
||||
<div className="text-slate-800 font-medium text-[11px] leading-tight mt-0.5">
|
||||
{isPlaceOrderDone ? `${time3} • ${date3}` : 'Not performed'}
|
||||
</div>
|
||||
</div>
|
||||
@ -520,11 +520,13 @@ export function CallDetail({
|
||||
<div className="bg-[var(--tiles-card-bg)] rounded-2xl border border-slate-200/80 p-6 shadow-sm space-y-4">
|
||||
<div className="flex flex-col sm:flex-row items-start sm:items-center justify-between border-b border-slate-100 pb-3 gap-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<ShoppingCart className="text-slate-700" size={18} />
|
||||
<div style={{ backgroundColor: '#e8fbf0', padding: '6px', borderRadius: '50%', border: '1px solid #bcecd0', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
|
||||
<ShoppingCart size={14} color="var(--primary-color)" />
|
||||
</div>
|
||||
<h2 className="text-sm font-bold text-slate-900 uppercase tracking-wide">Order Details</h2>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="text-xs font-semibold text-slate-500">
|
||||
<span className="text-xs font-semibold text-slate-800">
|
||||
{isPlaceOrderDone ? `${orderId} • ${dateOfOrder}` : 'Not Performed'}
|
||||
</span>
|
||||
</div>
|
||||
@ -536,54 +538,47 @@ export function CallDetail({
|
||||
<>
|
||||
<div className="flex flex-col gap-3">
|
||||
{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 (
|
||||
<div key={idx} className="bg-white rounded-xl border border-slate-200 p-4 shadow-sm flex flex-col gap-3 transition-shadow hover:shadow-md">
|
||||
<div className="flex justify-between items-start gap-4 border-b border-slate-50 pb-3">
|
||||
<div className="flex flex-col gap-1">
|
||||
<span className="font-bold text-slate-900 text-sm">{item.name}</span>
|
||||
<span className="text-[11px] text-slate-400 font-medium uppercase tracking-wide">{item.category}</span>
|
||||
</div>
|
||||
<span className={`inline-flex items-center px-2 py-0.5 rounded text-[10px] font-bold border uppercase tracking-wider whitespace-nowrap ${codeBadgeClass}`}>
|
||||
{item.skuCode}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between p-3 rounded-lg border border-slate-100 bg-white">
|
||||
<div className="flex flex-col gap-0.5">
|
||||
<span className="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Bags</span>
|
||||
<span className="text-lg font-black text-slate-900">{item.bags}</span>
|
||||
</div>
|
||||
<div className="flex flex-col gap-0.5 text-right">
|
||||
<span className="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Total Kgs</span>
|
||||
<span className="text-lg font-black text-emerald-600">{item.totalKgs.toLocaleString()}</span>
|
||||
<div key={idx} style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
backgroundColor: '#e8fbf0',
|
||||
border: '1px solid #bcecd0',
|
||||
borderRadius: '24px',
|
||||
padding: '14px 20px',
|
||||
}}>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
|
||||
<span style={{ color: 'var(--primary-color)', fontWeight: 600, fontSize: '14px' }}>{item.name}</span>
|
||||
</div>
|
||||
<div style={{ textAlign: 'right', whiteSpace: 'nowrap' }}>
|
||||
<span style={{ color: 'var(--primary-color)', fontWeight: 700, fontSize: '14px' }}>{bagsStr} Bags</span>
|
||||
<span style={{ color: 'var(--primary-color)', fontSize: '13px', marginLeft: '6px' }}>({kgsStr})</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<div className="mt-2 bg-slate-900 text-white rounded-xl p-4 flex items-center justify-between shadow-sm">
|
||||
<span className="text-xs font-bold uppercase tracking-wider text-slate-400">Total Order</span>
|
||||
<div className="mt-2 rounded-xl p-4 flex items-center justify-between shadow-sm" style={{ backgroundColor: 'var(--primary-color)', color: '#ffffff' }}>
|
||||
<span className="text-xs font-bold uppercase tracking-wider" style={{ opacity: 0.9 }}>Total Order</span>
|
||||
<div className="flex items-center gap-6">
|
||||
<div className="flex flex-col items-end">
|
||||
<span className="text-[10px] font-medium text-slate-400 uppercase">Bags</span>
|
||||
<span className="text-[10px] font-medium uppercase" style={{ opacity: 0.8 }}>Bags</span>
|
||||
<span className="text-lg font-black">{totalBags}</span>
|
||||
</div>
|
||||
<div className="flex flex-col items-end">
|
||||
<span className="text-[10px] font-medium text-slate-400 uppercase">Total Kgs</span>
|
||||
<span className="text-lg font-black text-emerald-400">{totalKgs.toLocaleString()}</span>
|
||||
<span className="text-[10px] font-medium uppercase" style={{ opacity: 0.8 }}>Total Kgs</span>
|
||||
<span className="text-lg font-black text-emerald-300">{totalKgs.toLocaleString()}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<div className="py-8 text-center bg-slate-50/50 rounded-xl border border-slate-100">
|
||||
<ShoppingCart className="mx-auto text-slate-300 mb-2" size={24} />
|
||||
<span className="text-sm font-semibold text-slate-500">Order not placed</span>
|
||||
<div style={{ backgroundColor: '#e8fbf0', border: '1px solid #bcecd0', borderRadius: '12px', padding: '32px 24px', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', textAlign: 'center', gap: '8px' }}>
|
||||
<ShoppingCart size={24} color="var(--primary-color)" style={{ opacity: 0.5 }} />
|
||||
<span style={{ fontSize: '13px', fontWeight: 600, color: 'var(--primary-color)' }}>Order not placed</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
@ -592,7 +587,7 @@ export function CallDetail({
|
||||
|
||||
{/* Meta Footer */}
|
||||
{isPlaceOrderDone && (
|
||||
<div className="flex flex-wrap items-center justify-between gap-2 border-t border-slate-100 pt-4 text-xs text-slate-400 font-medium">
|
||||
<div className="flex flex-wrap items-center justify-between gap-2 border-t border-slate-100 pt-4 text-xs text-slate-800 font-medium">
|
||||
<div>
|
||||
CREATED BY <span className="text-slate-800 font-bold ml-1">{salesOfficer} • {officerJob || 'Sales Officer'}</span>
|
||||
</div>
|
||||
@ -609,10 +604,12 @@ export function CallDetail({
|
||||
<div className="bg-[var(--tiles-card-bg)] rounded-2xl border border-slate-200/80 p-6 shadow-sm space-y-4">
|
||||
<div className="flex items-center justify-between border-b border-slate-100 pb-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<TrendingUp className="text-slate-700" size={18} />
|
||||
<div style={{ backgroundColor: '#e8fbf0', padding: '6px', borderRadius: '50%', border: '1px solid #bcecd0', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
|
||||
<TrendingUp size={14} color="var(--primary-color)" />
|
||||
</div>
|
||||
<h2 className="text-sm font-bold text-slate-900 uppercase tracking-wide">Potential vs Ordered</h2>
|
||||
</div>
|
||||
<span className="text-xs font-medium text-slate-400">Ordered vs opportunity</span>
|
||||
<span className="text-xs font-medium text-slate-800">Ordered vs opportunity</span>
|
||||
</div>
|
||||
|
||||
{(() => {
|
||||
@ -622,32 +619,42 @@ export function CallDetail({
|
||||
const renderTable = (items: any[]) => (
|
||||
<div className="flex flex-col gap-3">
|
||||
{items.map((item, idx) => (
|
||||
<div key={idx} className="bg-white rounded-xl border border-slate-200 p-4 shadow-sm flex flex-col gap-3 transition-shadow hover:shadow-md">
|
||||
<div className="flex justify-between items-start gap-4 border-b border-slate-50 pb-3">
|
||||
<span className="font-bold text-slate-900 text-sm">{item.name}</span>
|
||||
<div key={idx} style={{
|
||||
backgroundColor: '#e8fbf0',
|
||||
border: '1px solid #bcecd0',
|
||||
borderRadius: '24px',
|
||||
padding: '16px 20px',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: '12px'
|
||||
}}>
|
||||
<div className="flex justify-between items-start gap-4">
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<span style={{ color: 'var(--primary-color)', fontWeight: 600, fontSize: '15px' }}>{item.name}</span>
|
||||
</div>
|
||||
<div className="grid grid-cols-3 gap-2 bg-slate-50 p-3 rounded-lg border border-slate-100">
|
||||
</div>
|
||||
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', backgroundColor: '#ffffff', borderRadius: '16px', padding: '12px 16px', border: '1px solid #bcecd0' }}>
|
||||
<div className="flex flex-col gap-0.5">
|
||||
<span className="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Potential</span>
|
||||
<span className="text-sm font-semibold text-slate-700">{item.actualPotential}</span>
|
||||
<span style={{ fontSize: '10px', fontWeight: 700, color: 'var(--primary-color)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>Potential</span>
|
||||
<span style={{ fontSize: '14px', fontWeight: 600, color: 'var(--primary-color)' }}>{item.actualPotential}</span>
|
||||
</div>
|
||||
<div className="flex flex-col gap-0.5 border-l border-slate-200 pl-3">
|
||||
<span className="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Ordered</span>
|
||||
<span className="text-sm font-semibold text-slate-700">{item.totalOrdered}</span>
|
||||
<div className="flex flex-col gap-0.5 border-l border-slate-200 pl-4">
|
||||
<span style={{ fontSize: '10px', fontWeight: 700, color: 'var(--primary-color)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>Ordered</span>
|
||||
<span style={{ fontSize: '14px', fontWeight: 600, color: 'var(--primary-color)' }}>{item.totalOrdered}</span>
|
||||
</div>
|
||||
<div className="flex flex-col gap-0.5 border-l border-slate-200 pl-3">
|
||||
<span className="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Difference</span>
|
||||
<span className={`text-base font-black ${item.difference < 0 ? 'text-rose-600' : 'text-emerald-600'}`}>
|
||||
<div className="flex flex-col gap-0.5 border-l border-slate-200 pl-4">
|
||||
<span style={{ fontSize: '10px', fontWeight: 700, color: 'var(--primary-color)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>Diff</span>
|
||||
<span style={{ fontSize: '15px', fontWeight: 900, color: item.difference >= 0 ? '#059669' : '#ef4444' }}>
|
||||
{item.difference > 0 ? '+' : ''}{item.difference}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{item.reason && (
|
||||
<div className="flex items-center justify-between p-3 rounded-lg border border-slate-100 bg-white">
|
||||
<span className="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Reason</span>
|
||||
<span className="inline-flex items-center px-2 py-0.5 rounded text-[10px] font-bold border uppercase tracking-wider bg-amber-50 text-amber-700 border-amber-200">
|
||||
{item.reason}
|
||||
</span>
|
||||
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '8px 12px', borderRadius: '12px', border: '1px solid #fecaca', backgroundColor: '#fef2f2', marginTop: '4px' }}>
|
||||
<span style={{ fontSize: '10px', fontWeight: 700, color: '#ef4444', textTransform: 'uppercase', letterSpacing: '0.05em' }}>Reason</span>
|
||||
<span style={{ fontSize: '11px', fontWeight: 700, color: '#dc2626' }}>{item.reason}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
@ -662,8 +669,8 @@ export function CallDetail({
|
||||
{extraOrdered.length > 0 && (
|
||||
<div className="space-y-4 pt-2 border-t border-slate-100 mt-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<ShoppingCart className="text-slate-400" size={14} />
|
||||
<h3 className="text-[11px] font-bold text-slate-500 uppercase tracking-wider">Ordered Outside Potential</h3>
|
||||
<ShoppingCart className="text-slate-800" size={14} />
|
||||
<h3 className="text-[11px] font-bold text-slate-800 uppercase tracking-wider">Ordered Outside Potential</h3>
|
||||
</div>
|
||||
{renderTable(extraOrdered)}
|
||||
</div>
|
||||
@ -689,33 +696,33 @@ export function CallDetail({
|
||||
<ClipboardList className="text-slate-700" size={18} />
|
||||
<h2 className="text-sm font-bold text-slate-900 uppercase tracking-wide">Visit Log</h2>
|
||||
</div>
|
||||
<span className="text-xs font-medium text-slate-400">Logged at {time1}</span>
|
||||
<span className="text-xs font-medium text-slate-800">Logged at {time1}</span>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 items-start">
|
||||
{/* Left Key Value Details */}
|
||||
<div className="space-y-3 text-xs">
|
||||
<div className="flex justify-between py-1.5 border-b border-slate-100">
|
||||
<span className="font-bold text-slate-400 uppercase">DATE OF VISIT</span>
|
||||
<span className="font-bold text-slate-800 uppercase">DATE OF VISIT</span>
|
||||
<span className="font-bold text-slate-800">{dateOfVisit}</span>
|
||||
</div>
|
||||
<div className="flex justify-between py-1.5 border-b border-slate-100">
|
||||
<span className="font-bold text-slate-400 uppercase">TIME OF VISIT</span>
|
||||
<span className="font-bold text-slate-800 uppercase">TIME OF VISIT</span>
|
||||
<span className="font-bold text-slate-800">{timeOfVisit}</span>
|
||||
</div>
|
||||
<div className="flex justify-between py-1.5 border-b border-slate-100">
|
||||
<span className="font-bold text-slate-400 uppercase">STORE STATUS</span>
|
||||
<span className="font-bold text-slate-800 uppercase">STORE STATUS</span>
|
||||
<span className="font-bold text-slate-800">{storeStatus}</span>
|
||||
</div>
|
||||
<div className="flex justify-between py-1.5 border-b border-slate-100">
|
||||
<span className="font-bold text-slate-400 uppercase">CHANNEL</span>
|
||||
<span className="font-bold text-slate-800 uppercase">CHANNEL</span>
|
||||
<span className="font-bold text-slate-800">{channel}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right Store Proof Photo */}
|
||||
<div className="space-y-2">
|
||||
<div className="text-[11px] font-bold text-slate-400 uppercase tracking-wider flex items-center gap-1">
|
||||
<div className="text-[11px] font-bold text-slate-800 uppercase tracking-wider flex items-center gap-1">
|
||||
<FileText size={12} /> UPLOADED PROOF
|
||||
</div>
|
||||
|
||||
@ -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 = `<div class="p-6 text-center text-xs text-slate-400 font-mono">${file.original_name || 'Proof Image'}</div>`;
|
||||
(e.target as HTMLImageElement).parentElement!.innerHTML = `<div class="p-6 text-center text-xs text-slate-800 font-mono">${file.original_name || 'Proof Image'}</div>`;
|
||||
}}
|
||||
/>
|
||||
<a href={previewUrl} target="_blank" rel="noopener noreferrer" className="absolute inset-0 z-10" aria-label="View Full Image" />
|
||||
@ -740,9 +747,9 @@ export function CallDetail({
|
||||
})}
|
||||
</div>
|
||||
) : (
|
||||
<div className="rounded-xl border border-slate-200/80 bg-slate-50 p-6 flex flex-col items-center justify-center text-center gap-2">
|
||||
<Camera className="text-slate-400" size={24} />
|
||||
<span className="text-xs font-semibold text-slate-500">No proof image uploaded</span>
|
||||
<div style={{ backgroundColor: '#e8fbf0', border: '1px solid #bcecd0', borderRadius: '12px', padding: '24px', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', textAlign: 'center', gap: '8px' }}>
|
||||
<Camera size={24} color="var(--primary-color)" />
|
||||
<span style={{ fontSize: '12px', fontWeight: 600, color: 'var(--primary-color)' }}>No proof image uploaded</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
@ -768,11 +775,11 @@ export function CallDetail({
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<div className="h-40 bg-gradient-to-br from-slate-100 to-slate-200/70 p-6 flex flex-col items-center justify-center text-center gap-2 border-b border-slate-200/50">
|
||||
<div className="w-12 h-12 rounded-full bg-[var(--tiles-card-bg)] shadow-sm flex items-center justify-center text-slate-500">
|
||||
<ImageIcon size={22} />
|
||||
<div style={{ backgroundColor: '#e8fbf0', borderBottom: '1px solid #bcecd0', padding: '24px', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: '8px', height: '160px', textAlign: 'center' }}>
|
||||
<div style={{ width: '48px', height: '48px', borderRadius: '50%', backgroundColor: '#ffffff', border: '1px solid #bcecd0', display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: '0 1px 2px 0 rgba(0, 0, 0, 0.05)' }}>
|
||||
<ImageIcon size={22} color="var(--primary-color)" />
|
||||
</div>
|
||||
<span className="text-xs font-bold text-slate-600 uppercase tracking-wider">{storeName}</span>
|
||||
<span style={{ fontSize: '12px', fontWeight: 700, color: 'var(--primary-color)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>{storeName}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
@ -781,7 +788,9 @@ export function CallDetail({
|
||||
<div className="bg-[var(--tiles-card-bg)] rounded-2xl border border-slate-200/80 p-6 shadow-sm space-y-4">
|
||||
<div className="flex items-center justify-between border-b border-slate-100 pb-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<Store className="text-slate-700" size={18} />
|
||||
<div style={{ backgroundColor: '#e8fbf0', padding: '6px', borderRadius: '50%', border: '1px solid #bcecd0', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
|
||||
<Store size={14} color="var(--primary-color)" />
|
||||
</div>
|
||||
<h2 className="text-sm font-bold text-slate-900 uppercase tracking-wide">Store</h2>
|
||||
</div>
|
||||
<span className="px-2 py-0.5 text-[10px] font-bold text-slate-600 bg-slate-100 rounded border border-slate-200">
|
||||
@ -791,27 +800,27 @@ export function CallDetail({
|
||||
|
||||
<div className="space-y-3 text-xs">
|
||||
<div className="flex items-start justify-between py-1 border-b border-slate-100">
|
||||
<span className="text-slate-400 font-bold uppercase">BUSINESS</span>
|
||||
<span className="text-slate-800 font-bold uppercase">BUSINESS</span>
|
||||
<span className="font-bold text-slate-900 text-right">{storeName}</span>
|
||||
</div>
|
||||
<div className="flex items-start justify-between py-1 border-b border-slate-100">
|
||||
<span className="text-slate-400 font-bold uppercase">OWNER</span>
|
||||
<span className="text-slate-800 font-bold uppercase">OWNER</span>
|
||||
<span className="font-bold text-slate-900 text-right">{ownerName}</span>
|
||||
</div>
|
||||
<div className="flex items-start justify-between py-1 border-b border-slate-100">
|
||||
<span className="text-slate-400 font-bold uppercase">PHONE</span>
|
||||
<span className="text-slate-800 font-bold uppercase">PHONE</span>
|
||||
<span className="font-bold text-slate-900 text-right flex items-center gap-1">
|
||||
<Phone size={11} className="text-slate-400" /> {phone}
|
||||
<Phone size={11} className="text-slate-800" /> {phone}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-start justify-between py-1 border-b border-slate-100">
|
||||
<span className="text-slate-400 font-bold uppercase">EMAIL</span>
|
||||
<span className="text-slate-800 font-bold uppercase">EMAIL</span>
|
||||
<span className="font-bold text-slate-900 text-right flex items-center gap-1 break-all">
|
||||
<Mail size={11} className="text-slate-400" /> {email}
|
||||
<Mail size={11} className="text-slate-800" /> {email}
|
||||
</span>
|
||||
</div>
|
||||
<div className="py-1 border-b border-slate-100 space-y-1">
|
||||
<span className="text-slate-400 font-bold uppercase block">ADDRESS</span>
|
||||
<span className="text-slate-800 font-bold uppercase block">ADDRESS</span>
|
||||
<span className="font-medium text-slate-800 block leading-relaxed">{address}</span>
|
||||
{lat && lng && (
|
||||
<a
|
||||
@ -825,17 +834,17 @@ export function CallDetail({
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-start justify-between py-1">
|
||||
<span className="text-slate-400 font-bold uppercase">ROUTE</span>
|
||||
<span className="text-slate-800 font-bold uppercase">ROUTE</span>
|
||||
<span className="font-bold text-slate-900 text-right">{route}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Notes Container */}
|
||||
<div className="bg-slate-50/80 border border-slate-200/80 rounded-xl p-3.5 space-y-1.5 text-xs">
|
||||
<div className="font-bold text-slate-600 flex items-center gap-1.5 text-[11px] uppercase tracking-wider">
|
||||
<FileText size={12} /> NOTES
|
||||
<div style={{ backgroundColor: '#e8fbf0', border: '1px solid #bcecd0', borderRadius: '12px', padding: '14px', gap: '6px', display: 'flex', flexDirection: 'column' }}>
|
||||
<div style={{ fontSize: '11px', fontWeight: 700, color: 'var(--primary-color)', textTransform: 'uppercase', letterSpacing: '0.05em', display: 'flex', alignItems: 'center', gap: '6px' }}>
|
||||
<FileText size={12} color="var(--primary-color)" /> NOTES
|
||||
</div>
|
||||
<p className="text-slate-700 leading-relaxed font-medium">
|
||||
<p style={{ color: 'var(--primary-color)', lineHeight: 1.5, fontWeight: 500, margin: 0, fontSize: '12px' }}>
|
||||
{storeNotes}
|
||||
</p>
|
||||
</div>
|
||||
@ -846,19 +855,30 @@ export function CallDetail({
|
||||
<div className="bg-[var(--tiles-card-bg)] rounded-2xl border border-slate-200/80 p-6 shadow-sm space-y-4">
|
||||
<div className="flex items-center justify-between border-b border-slate-100 pb-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<TrendingUp className="text-slate-700" size={18} />
|
||||
<div style={{ backgroundColor: '#e8fbf0', padding: '6px', borderRadius: '50%', border: '1px solid #bcecd0', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
|
||||
<TrendingUp size={14} color="var(--primary-color)" />
|
||||
</div>
|
||||
<h2 className="text-sm font-bold text-slate-900 uppercase tracking-wide">Store Potential</h2>
|
||||
</div>
|
||||
<span className="text-xs font-medium text-slate-400">Total capacity</span>
|
||||
<span className="text-xs font-medium text-slate-800">Total capacity</span>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-3">
|
||||
{storePotentialList.map((item, idx) => (
|
||||
<div key={idx} className="bg-slate-50 rounded-xl border border-slate-100 p-4 flex items-center justify-between transition-colors hover:bg-white">
|
||||
<span className="font-bold text-slate-900 text-sm">{item.name}</span>
|
||||
<div className="flex flex-col items-end">
|
||||
<span className="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Potential</span>
|
||||
<span className="text-sm font-semibold text-emerald-600">{item.actualPotential} KG</span>
|
||||
<div key={idx} style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
backgroundColor: '#e8fbf0',
|
||||
border: '1px solid #bcecd0',
|
||||
borderRadius: '24px',
|
||||
padding: '14px 20px',
|
||||
}}>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
|
||||
<span style={{ color: 'var(--primary-color)', fontWeight: 600, fontSize: '14px' }}>{item.name}</span>
|
||||
</div>
|
||||
<div style={{ textAlign: 'right', whiteSpace: 'nowrap' }}>
|
||||
<span style={{ color: 'var(--primary-color)', fontWeight: 700, fontSize: '14px' }}>{item.actualPotential} KG Potential</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
@ -869,29 +889,31 @@ export function CallDetail({
|
||||
{/* Distributor Card */}
|
||||
<div className="bg-[var(--tiles-card-bg)] rounded-2xl border border-slate-200/80 p-6 shadow-sm space-y-4">
|
||||
<div className="flex items-center gap-2 border-b border-slate-100 pb-3">
|
||||
<Truck className="text-slate-700" size={18} />
|
||||
<div style={{ backgroundColor: '#e8fbf0', padding: '6px', borderRadius: '50%', border: '1px solid #bcecd0', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
|
||||
<Truck size={14} color="var(--primary-color)" />
|
||||
</div>
|
||||
<h2 className="text-sm font-bold text-slate-900 uppercase tracking-wide">Distributor</h2>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3 text-xs">
|
||||
<div className="flex justify-between py-1 border-b border-slate-100">
|
||||
<span className="text-slate-400 font-bold uppercase">COMPANY</span>
|
||||
<span className="text-slate-800 font-bold uppercase">COMPANY</span>
|
||||
<span className="font-bold text-slate-900">{distCompany}</span>
|
||||
</div>
|
||||
<div className="flex justify-between py-1 border-b border-slate-100">
|
||||
<span className="text-slate-400 font-bold uppercase">CONTACT</span>
|
||||
<span className="text-slate-800 font-bold uppercase">CONTACT</span>
|
||||
<span className="font-bold text-slate-900">{distContact}</span>
|
||||
</div>
|
||||
<div className="flex justify-between py-1 border-b border-slate-100">
|
||||
<span className="text-slate-400 font-bold uppercase">PHONE</span>
|
||||
<span className="text-slate-800 font-bold uppercase">PHONE</span>
|
||||
<span className="font-bold text-slate-900 flex items-center gap-1">
|
||||
<Phone size={11} className="text-slate-400" /> {distPhone}
|
||||
<Phone size={11} className="text-slate-800" /> {distPhone}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex justify-between py-1">
|
||||
<span className="text-slate-400 font-bold uppercase">EMAIL</span>
|
||||
<span className="text-slate-800 font-bold uppercase">EMAIL</span>
|
||||
<span className="font-bold text-slate-900 flex items-center gap-1">
|
||||
<Mail size={11} className="text-slate-400" /> {distEmail}
|
||||
<Mail size={11} className="text-slate-800" /> {distEmail}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
@ -906,17 +928,17 @@ export function CallDetail({
|
||||
|
||||
<div className="space-y-3 text-xs">
|
||||
<div className="flex justify-between py-1 border-b border-slate-100">
|
||||
<span className="text-slate-400 font-bold uppercase">NAME</span>
|
||||
<span className="text-slate-800 font-bold uppercase">NAME</span>
|
||||
<span className="font-bold text-slate-900">{salesOfficer}</span>
|
||||
</div>
|
||||
<div className="flex justify-between py-1 border-b border-slate-100">
|
||||
<span className="text-slate-400 font-bold uppercase">ROLE</span>
|
||||
<span className="text-slate-800 font-bold uppercase">ROLE</span>
|
||||
<span className="font-bold text-slate-900">{officerJob || 'Sales Officer'}</span>
|
||||
</div>
|
||||
<div className="flex justify-between py-1">
|
||||
<span className="text-slate-400 font-bold uppercase">EMAIL</span>
|
||||
<span className="text-slate-800 font-bold uppercase">EMAIL</span>
|
||||
<span className="font-bold text-slate-900 flex items-center gap-1">
|
||||
<Mail size={11} className="text-slate-400" /> {officerEmail}
|
||||
<Mail size={11} className="text-slate-800" /> {officerEmail}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -124,52 +124,49 @@ export function OrderDetail({ instanceId, onDataLoad, onBack }: WiredDetailViewP
|
||||
<div className="flex flex-col gap-4 bg-transparent p-1">
|
||||
{/* Top Section */}
|
||||
<div className="border border-slate-200 rounded-xl p-6 bg-[var(--tiles-card-bg)] shadow-sm flex flex-col md:flex-row md:items-start justify-between gap-4">
|
||||
<div className="flex flex-col">
|
||||
<div className="flex items-center gap-3 mb-1">
|
||||
{onBack && (
|
||||
<button onClick={onBack} className="p-1.5 text-slate-400 hover:text-slate-800 hover:bg-slate-100 rounded-full transition-colors">
|
||||
<button onClick={onBack} className="p-1.5 text-slate-800 hover:text-slate-800 hover:bg-slate-100 rounded-full transition-colors focus:outline-none -ml-2">
|
||||
<ArrowLeft size={18} strokeWidth={2.5} />
|
||||
</button>
|
||||
)}
|
||||
<div className="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Order ID</div>
|
||||
<div className="text-[10px] font-bold text-slate-800 uppercase tracking-wider">Order ID</div>
|
||||
</div>
|
||||
<div className="text-2xl font-black text-slate-900 mb-2">{String(orderId)}</div>
|
||||
<div className="flex items-center gap-3 text-xs text-slate-500 font-medium pl-1">
|
||||
<div className={`text-2xl font-black text-slate-900 mb-2 ${onBack ? 'ml-8' : ''}`}>{String(orderId)}</div>
|
||||
<div className={`flex items-center gap-3 text-xs text-slate-800 font-medium ${onBack ? 'ml-8' : ''}`}>
|
||||
<span className="flex items-center gap-1.5"><Calendar size={14} /> {String(dateOfOrder)}</span>
|
||||
<span className="flex items-center gap-1.5"><Hash size={14} /> Instance #{instanceId}</span>
|
||||
</div>
|
||||
<div className="border border-slate-100 bg-slate-50 rounded-xl p-4 flex flex-col gap-1 min-w-[200px]">
|
||||
<div className="flex items-center gap-1.5 text-[10px] font-bold text-slate-400 uppercase tracking-wider mb-1">
|
||||
<Store size={12} /> Store
|
||||
</div>
|
||||
<div className="text-sm font-bold text-slate-900">{String(storeName)}</div>
|
||||
<div className="flex items-center gap-2 text-[10px] text-slate-500 mt-1">
|
||||
<span className="flex items-center gap-1"><MapPin size={12} /> {String(routeCode)} - {String(routeName)}</span>
|
||||
|
||||
<div style={{ backgroundColor: '#e8fbf0', border: '1px solid #bcecd0', borderRadius: '16px', padding: '16px', display: 'flex', flexDirection: 'column', gap: '4px', minWidth: '240px' }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '6px', fontSize: '10px', fontWeight: 700, color: 'var(--primary-color)', textTransform: 'uppercase', letterSpacing: '0.05em', marginBottom: '4px' }}>
|
||||
<Store size={14} /> Store
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-[10px] text-slate-500 mt-0.5">
|
||||
<span className="flex items-center gap-1"><User size={12} /> {String(distributorName)}</span>
|
||||
<div style={{ fontSize: '14px', fontWeight: 800, color: 'var(--primary-color)' }}>{String(storeName)}</div>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '8px', fontSize: '12px', color: 'var(--primary-color)', marginTop: '4px', fontWeight: 500 }}>
|
||||
<span className="flex items-center gap-1.5"><MapPin size={13} /> {String(routeCode)} - {String(routeName)}</span>
|
||||
</div>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '8px', fontSize: '12px', color: 'var(--primary-color)', marginTop: '2px', fontWeight: 500 }}>
|
||||
<span className="flex items-center gap-1.5"><User size={13} /> {String(distributorName)}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Middle Stats Section */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<div className="border border-slate-200 rounded-xl p-5 bg-[var(--tiles-card-bg)] shadow-sm flex flex-col justify-between">
|
||||
<div className="flex items-center gap-2 text-[10px] font-bold text-slate-400 uppercase tracking-wider mb-3">
|
||||
<Package size={14} className="text-emerald-500" /> Total Bags
|
||||
<div className="grid grid-cols-3 gap-3">
|
||||
<div style={{ backgroundColor: '#e8fbf0', border: '1px solid #bcecd0', borderRadius: '16px', padding: '12px', textAlign: 'center' }}>
|
||||
<div style={{ fontSize: '10px', fontWeight: 700, color: 'var(--primary-color)', textTransform: 'uppercase', letterSpacing: '0.05em', marginBottom: '2px' }}>TOTAL BAGS</div>
|
||||
<div style={{ fontSize: '20px', fontWeight: 800, color: 'var(--primary-color)' }}>{String(totalBags)}</div>
|
||||
</div>
|
||||
<div className="text-2xl font-bold text-slate-900">{String(totalBags)}</div>
|
||||
<div style={{ backgroundColor: '#e8fbf0', border: '1px solid #bcecd0', borderRadius: '16px', padding: '12px', textAlign: 'center' }}>
|
||||
<div style={{ fontSize: '10px', fontWeight: 700, color: 'var(--primary-color)', textTransform: 'uppercase', letterSpacing: '0.05em', marginBottom: '2px' }}>TOTAL KGS</div>
|
||||
<div style={{ fontSize: '20px', fontWeight: 800, color: 'var(--primary-color)' }}>{Number(totalKgs).toLocaleString()}</div>
|
||||
</div>
|
||||
<div className="border border-slate-200 rounded-xl p-5 bg-[var(--tiles-card-bg)] shadow-sm flex flex-col justify-between">
|
||||
<div className="flex items-center gap-2 text-[10px] font-bold text-slate-400 uppercase tracking-wider mb-3">
|
||||
<Weight size={14} className="text-blue-500" /> Total Kilograms
|
||||
</div>
|
||||
<div className="text-2xl font-bold text-slate-900">{Number(totalKgs).toLocaleString()}</div>
|
||||
</div>
|
||||
<div className="border border-slate-200 rounded-xl p-5 bg-[var(--tiles-card-bg)] shadow-sm flex flex-col justify-between">
|
||||
<div className="flex items-center gap-2 text-[10px] font-bold text-slate-400 uppercase tracking-wider mb-3">
|
||||
<List size={14} className="text-slate-500" /> Line Items
|
||||
</div>
|
||||
<div className="text-2xl font-bold text-slate-900">{itemsArray.length}</div>
|
||||
<div style={{ backgroundColor: '#e8fbf0', border: '1px solid #bcecd0', borderRadius: '16px', padding: '12px', textAlign: 'center' }}>
|
||||
<div style={{ fontSize: '10px', fontWeight: 700, color: 'var(--primary-color)', textTransform: 'uppercase', letterSpacing: '0.05em', marginBottom: '2px' }}>LINE ITEMS</div>
|
||||
<div style={{ fontSize: '20px', fontWeight: 800, color: 'var(--primary-color)' }}>{itemsArray.length}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -216,11 +213,11 @@ export function OrderDetail({ instanceId, onDataLoad, onBack }: WiredDetailViewP
|
||||
padding: '14px 20px',
|
||||
}}>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
|
||||
<span style={{ color: '#086e73', fontWeight: 600, fontSize: '14px' }}>{productName}</span>
|
||||
<span style={{ color: 'var(--primary-color)', fontWeight: 600, fontSize: '14px' }}>{productName}</span>
|
||||
</div>
|
||||
<div style={{ textAlign: 'right', whiteSpace: 'nowrap' }}>
|
||||
<span style={{ color: '#563bd4', fontWeight: 700, fontSize: '14px' }}>{bagsStr} Bags</span>
|
||||
<span style={{ color: '#64748b', fontSize: '13px', marginLeft: '6px' }}>({kgsStr})</span>
|
||||
<span style={{ color: 'var(--primary-color)', fontWeight: 700, fontSize: '14px' }}>{bagsStr} Bags</span>
|
||||
<span style={{ color: 'var(--primary-color)', fontSize: '13px', marginLeft: '6px' }}>({kgsStr})</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
@ -236,10 +233,10 @@ export function OrderDetail({ instanceId, onDataLoad, onBack }: WiredDetailViewP
|
||||
border: '1px dashed #cbd5e1',
|
||||
borderRadius: '24px'
|
||||
}}>
|
||||
<span style={{ color: '#64748b', fontWeight: 600, fontSize: '13px' }}>TOTAL</span>
|
||||
<span style={{ color: 'var(--primary-color)', fontWeight: 600, fontSize: '13px' }}>TOTAL</span>
|
||||
<div>
|
||||
<span style={{ color: '#563bd4', fontWeight: 700, fontSize: '15px' }}>{totalBags} Bags</span>
|
||||
<span style={{ color: '#64748b', fontSize: '14px', marginLeft: '6px' }}>({Number(totalKgs).toLocaleString()} kg)</span>
|
||||
<span style={{ color: 'var(--primary-color)', fontWeight: 700, fontSize: '15px' }}>{totalBags} Bags</span>
|
||||
<span style={{ color: 'var(--primary-color)', fontSize: '14px', marginLeft: '6px' }}>({Number(totalKgs).toLocaleString()} kg)</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
@ -250,8 +247,8 @@ export function OrderDetail({ instanceId, onDataLoad, onBack }: WiredDetailViewP
|
||||
<div className="flex-1 flex flex-col gap-4 min-w-[280px]">
|
||||
{/* SO Card */}
|
||||
<div className="border border-slate-200 rounded-xl bg-[var(--tiles-card-bg)] shadow-sm overflow-hidden p-5">
|
||||
<div className="flex items-center gap-2 text-[10px] font-bold text-slate-400 uppercase tracking-wider mb-4">
|
||||
<User size={14} className="text-slate-500" /> Sales Officer
|
||||
<div className="flex items-center gap-2 text-[10px] font-bold text-slate-800 uppercase tracking-wider mb-4">
|
||||
<User size={14} className="text-slate-800" /> Sales Officer
|
||||
</div>
|
||||
<div className="flex items-center gap-3 mb-5">
|
||||
<div className="w-10 h-10 rounded-full bg-slate-900 text-white flex items-center justify-center font-bold text-sm shrink-0">
|
||||
@ -259,25 +256,25 @@ export function OrderDetail({ instanceId, onDataLoad, onBack }: WiredDetailViewP
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-sm font-bold text-slate-900">{String(soName)}</div>
|
||||
<div className="text-[10px] text-slate-500">Sales Officer - ID {String(soId)}</div>
|
||||
<div className="text-[10px] text-slate-800">Sales Officer - ID {String(soId)}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-8 h-8 rounded-full bg-slate-50 border border-slate-100 flex items-center justify-center shrink-0">
|
||||
<Mail size={12} className="text-slate-500" />
|
||||
<Mail size={12} className="text-slate-800" />
|
||||
</div>
|
||||
<div className="overflow-hidden">
|
||||
<div className="text-[10px] font-bold text-slate-400 uppercase tracking-wider mb-0.5">Email</div>
|
||||
<div className="text-[10px] font-bold text-slate-800 uppercase tracking-wider mb-0.5">Email</div>
|
||||
<div className="text-xs font-semibold text-slate-900 truncate">{String(soEmail)}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-8 h-8 rounded-full bg-slate-50 border border-slate-100 flex items-center justify-center shrink-0">
|
||||
<Hash size={12} className="text-slate-500" />
|
||||
<Hash size={12} className="text-slate-800" />
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-[10px] font-bold text-slate-400 uppercase tracking-wider mb-0.5">User ID</div>
|
||||
<div className="text-[10px] font-bold text-slate-800 uppercase tracking-wider mb-0.5">User ID</div>
|
||||
<div className="text-xs font-semibold text-slate-900">{String(soId)}</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -286,20 +283,20 @@ export function OrderDetail({ instanceId, onDataLoad, onBack }: WiredDetailViewP
|
||||
|
||||
{/* Order Meta */}
|
||||
<div className="border border-slate-200 rounded-xl bg-[var(--tiles-card-bg)] shadow-sm overflow-hidden p-5">
|
||||
<div className="flex items-center gap-2 text-[10px] font-bold text-slate-400 uppercase tracking-wider mb-4">
|
||||
<Hash size={14} className="text-slate-500" /> Order Meta
|
||||
<div className="flex items-center gap-2 text-[10px] font-bold text-slate-800 uppercase tracking-wider mb-4">
|
||||
<Hash size={14} className="text-slate-800" /> Order Meta
|
||||
</div>
|
||||
<div className="flex flex-col gap-3">
|
||||
<div className="flex justify-between items-center text-xs">
|
||||
<span className="text-slate-500">Instance</span>
|
||||
<span className="text-slate-800">Instance</span>
|
||||
<span className="font-bold text-slate-900">#{instanceId}</span>
|
||||
</div>
|
||||
<div className="flex justify-between items-center text-xs">
|
||||
<span className="text-slate-500">State</span>
|
||||
<span className="text-slate-800">State</span>
|
||||
<span className="font-bold text-slate-900">{String(stateName)}</span>
|
||||
</div>
|
||||
<div className="flex justify-between items-center text-xs">
|
||||
<span className="text-slate-500">Date of Order</span>
|
||||
<span className="text-slate-800">Date of Order</span>
|
||||
<span className="font-bold text-slate-900">{String(dateOfOrder)}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -29,18 +29,26 @@ export function PotentialMiningTable({ data, onEdit, onDelete, hideOrderDetails
|
||||
const absDiff = Math.abs(difference);
|
||||
|
||||
return (
|
||||
<div key={item.id} className="bg-white rounded-xl border border-slate-200 p-4 shadow-sm flex flex-col gap-4 transition-shadow hover:shadow-md">
|
||||
<div key={item.id} style={{
|
||||
backgroundColor: '#e8fbf0',
|
||||
border: '1px solid #bcecd0',
|
||||
borderRadius: '24px',
|
||||
padding: '16px 20px',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: '12px'
|
||||
}}>
|
||||
<div className="flex justify-between items-start gap-4">
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<span className="font-bold text-slate-900 text-[15px]">{item.productName}</span>
|
||||
<span style={{ color: 'var(--primary-color)', fontWeight: 600, fontSize: '15px' }}>{item.productName}</span>
|
||||
{item.badge && (
|
||||
<span className={cn(
|
||||
"px-2 py-0.5 rounded text-[10px] font-semibold self-start",
|
||||
item.badge.type === 'error' && "bg-red-50 text-red-500",
|
||||
item.badge.type === 'success' && "bg-emerald-50 text-emerald-600",
|
||||
item.badge.type === 'info' && "bg-blue-50 text-blue-500",
|
||||
item.badge.type === 'warning' && "bg-amber-50 text-amber-600",
|
||||
item.badge.type === 'default' && "bg-slate-100 text-slate-600"
|
||||
"px-2 py-0.5 rounded-full text-[10px] font-semibold self-start",
|
||||
item.badge.type === 'error' && "bg-red-100 text-red-600",
|
||||
item.badge.type === 'success' && "bg-emerald-100 text-emerald-700",
|
||||
item.badge.type === 'info' && "bg-blue-100 text-blue-600",
|
||||
item.badge.type === 'warning' && "bg-amber-100 text-amber-700",
|
||||
item.badge.type === 'default' && "bg-white text-slate-600"
|
||||
)}>
|
||||
{item.badge.label}
|
||||
</span>
|
||||
@ -48,38 +56,34 @@ export function PotentialMiningTable({ data, onEdit, onDelete, hideOrderDetails
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-3 gap-2 bg-slate-50 p-3 rounded-lg border border-slate-100">
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', backgroundColor: '#ffffff', borderRadius: '16px', padding: '12px 16px', border: '1px solid #bcecd0' }}>
|
||||
<div className="flex flex-col gap-0.5">
|
||||
<span className="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Potential</span>
|
||||
<span className="text-sm font-semibold text-slate-800">{item.potentialKgs}</span>
|
||||
<span style={{ fontSize: '10px', fontWeight: 700, color: 'var(--primary-color)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>Potential</span>
|
||||
<span style={{ fontSize: '14px', fontWeight: 600, color: 'var(--primary-color)' }}>{item.potentialKgs} kg</span>
|
||||
</div>
|
||||
{!hideOrderDetails ? (
|
||||
{!hideOrderDetails && (
|
||||
<>
|
||||
<div className="flex flex-col gap-0.5 border-l border-slate-200 pl-3">
|
||||
<span className="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Ordered</span>
|
||||
<span className="text-sm font-semibold text-slate-800">{item.orderedKgs}</span>
|
||||
<div className="flex flex-col gap-0.5 border-l border-slate-200 pl-4">
|
||||
<span style={{ fontSize: '10px', fontWeight: 700, color: 'var(--primary-color)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>Ordered</span>
|
||||
<span style={{ fontSize: '14px', fontWeight: 600, color: 'var(--primary-color)' }}>{item.orderedKgs} kg</span>
|
||||
</div>
|
||||
<div className="flex flex-col gap-0.5 border-l border-slate-200 pl-3">
|
||||
<span className="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Diff</span>
|
||||
<span className={`text-base font-black ${isSurplus ? 'text-emerald-600' : 'text-red-500'}`}>
|
||||
<div className="flex flex-col gap-0.5 border-l border-slate-200 pl-4">
|
||||
<span style={{ fontSize: '10px', fontWeight: 700, color: 'var(--primary-color)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>Diff</span>
|
||||
<span style={{ fontSize: '15px', fontWeight: 900, color: isSurplus ? '#059669' : '#ef4444' }}>
|
||||
{isSurplus ? '+' : '-'}{absDiff}
|
||||
</span>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<div className="col-span-2"></div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
{(onEdit || onDelete) && (
|
||||
<div className="border-t border-slate-100 pt-3 mt-1 flex items-center justify-end gap-3">
|
||||
<div style={{ display: 'flex', justifyContent: 'flex-end', gap: '8px', marginTop: '4px' }}>
|
||||
{onEdit && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onEdit(item)}
|
||||
className="flex items-center gap-1.5 px-3 py-1.5 text-blue-600 bg-blue-50 hover:bg-blue-100 rounded-lg font-medium text-xs border border-blue-100 transition-colors shadow-sm"
|
||||
style={{ display: 'flex', alignItems: 'center', gap: '6px', padding: '6px 12px', backgroundColor: '#e0f2fe', color: '#0284c7', borderRadius: '8px', fontSize: '12px', fontWeight: 600, border: '1px solid #bae6fd' }}
|
||||
>
|
||||
<Pencil size={14} /> Edit
|
||||
</button>
|
||||
@ -88,7 +92,7 @@ export function PotentialMiningTable({ data, onEdit, onDelete, hideOrderDetails
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onDelete(item)}
|
||||
className="flex items-center gap-1.5 px-3 py-1.5 text-red-600 bg-red-50 hover:bg-red-100 rounded-lg font-medium text-xs border border-red-100 transition-colors shadow-sm"
|
||||
style={{ display: 'flex', alignItems: 'center', gap: '6px', padding: '6px 12px', backgroundColor: '#fee2e2', color: '#dc2626', borderRadius: '8px', fontSize: '12px', fontWeight: 600, border: '1px solid #fecaca' }}
|
||||
>
|
||||
<Trash2 size={14} /> Delete
|
||||
</button>
|
||||
|
||||
@ -159,7 +159,7 @@ export function StoreDetail({ instanceId, onBack, onEdit }: StoreDetailProps) {
|
||||
{onBack && (
|
||||
<button
|
||||
onClick={onBack}
|
||||
className="w-8 h-8 flex items-center justify-center rounded-lg hover:bg-slate-100 text-slate-500 hover:text-slate-900 transition-colors mr-1"
|
||||
className="w-8 h-8 flex items-center justify-center rounded-lg hover:bg-slate-100 text-slate-800 hover:text-slate-900 transition-colors mr-1"
|
||||
>
|
||||
<ArrowLeft size={18} />
|
||||
</button>
|
||||
@ -190,8 +190,8 @@ export function StoreDetail({ instanceId, onBack, onEdit }: StoreDetailProps) {
|
||||
<img src={imageUrl} alt={String(businessName)} className="w-full h-full object-cover" />
|
||||
</div>
|
||||
) : (
|
||||
<div className="md:w-1/3 lg:w-1/4 h-48 md:h-auto flex items-center justify-center bg-slate-100 border-r border-slate-200">
|
||||
<Store size={48} className="text-slate-300" />
|
||||
<div style={{ backgroundColor: '#e8fbf0', borderRight: '1px solid #bcecd0' }} className="md:w-1/3 lg:w-1/4 h-48 md:h-auto flex items-center justify-center">
|
||||
<Store size={48} color="var(--primary-color)" style={{ opacity: 0.5 }} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
@ -211,7 +211,7 @@ export function StoreDetail({ instanceId, onBack, onEdit }: StoreDetailProps) {
|
||||
|
||||
<h1 className="text-2xl md:text-3xl font-black text-slate-900 tracking-tight mb-2">{String(businessName)}</h1>
|
||||
|
||||
<div className="flex items-start gap-2 text-slate-500 text-sm">
|
||||
<div className="flex items-start gap-2 text-slate-800 text-sm">
|
||||
<MapPin size={16} className="mt-0.5 shrink-0" />
|
||||
<span>
|
||||
{[completeAddress, area].filter(Boolean).join(', ')}
|
||||
@ -223,17 +223,17 @@ export function StoreDetail({ instanceId, onBack, onEdit }: StoreDetailProps) {
|
||||
{/* Bottom Stats Row */}
|
||||
<div className="grid grid-cols-3 border-t border-slate-100 bg-slate-50/50">
|
||||
<div className="p-4 border-r border-slate-100">
|
||||
<div className="text-[10px] font-bold text-slate-400 uppercase tracking-wider mb-1">Owner</div>
|
||||
<div className="text-[10px] font-bold text-slate-800 uppercase tracking-wider mb-1">Owner</div>
|
||||
<div className="text-sm font-semibold text-slate-900 truncate">{String(ownerName)}</div>
|
||||
</div>
|
||||
<div className="p-4 border-r border-slate-100">
|
||||
<div className="text-[10px] font-bold text-slate-400 uppercase tracking-wider mb-1">Route</div>
|
||||
<div className="text-[10px] font-bold text-slate-800 uppercase tracking-wider mb-1">Route</div>
|
||||
<div className="text-sm font-semibold text-slate-900 truncate">{String(routeName || '-')}{subRoute ? ` · ${subRoute}` : ''}</div>
|
||||
</div>
|
||||
<div className="p-4">
|
||||
<div className="text-[10px] font-bold text-slate-400 uppercase tracking-wider mb-1">Potential</div>
|
||||
<div className="text-[10px] font-bold text-slate-800 uppercase tracking-wider mb-1">Potential</div>
|
||||
<div className="text-sm font-semibold text-slate-900 truncate">
|
||||
{totalPotential} <span className="text-slate-500 font-normal">units</span>
|
||||
{totalPotential} <span className="text-slate-800 font-normal">units</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -249,43 +249,43 @@ export function StoreDetail({ instanceId, onBack, onEdit }: StoreDetailProps) {
|
||||
{/* Contact Card */}
|
||||
<Card pad={false} className="overflow-hidden border-slate-200 shadow-sm">
|
||||
<div className="flex items-center gap-2 p-4 border-b border-slate-100 bg-[var(--tiles-card-bg)]">
|
||||
<User size={16} className="text-slate-400" />
|
||||
<h3 className="text-xs font-bold text-slate-500 uppercase tracking-wider m-0">Contact</h3>
|
||||
<User size={16} className="text-slate-800" />
|
||||
<h3 className="text-xs font-bold text-slate-800 uppercase tracking-wider m-0">Contact</h3>
|
||||
</div>
|
||||
<div className="p-5 grid grid-cols-1 sm:grid-cols-2 gap-y-6 gap-x-8 bg-[var(--tiles-card-bg)]">
|
||||
<div className="flex gap-3">
|
||||
<div className="w-8 h-8 rounded-full bg-slate-50 flex items-center justify-center shrink-0 border border-slate-100">
|
||||
<User size={14} className="text-slate-400" />
|
||||
<User size={14} className="text-slate-800" />
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-[10px] font-bold text-slate-400 uppercase tracking-wider mb-0.5">Owner</div>
|
||||
<div className="text-[10px] font-bold text-slate-800 uppercase tracking-wider mb-0.5">Owner</div>
|
||||
<div className="text-sm font-semibold text-slate-900">{String(ownerName)}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-3">
|
||||
<div className="w-8 h-8 rounded-full bg-slate-50 flex items-center justify-center shrink-0 border border-slate-100">
|
||||
<Phone size={14} className="text-slate-400" />
|
||||
<Phone size={14} className="text-slate-800" />
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-[10px] font-bold text-slate-400 uppercase tracking-wider mb-0.5">Phone</div>
|
||||
<div className="text-[10px] font-bold text-slate-800 uppercase tracking-wider mb-0.5">Phone</div>
|
||||
<div className="text-sm font-semibold text-slate-900">{String(phoneNumber)}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-3">
|
||||
<div className="w-8 h-8 rounded-full bg-slate-50 flex items-center justify-center shrink-0 border border-slate-100">
|
||||
<Mail size={14} className="text-slate-400" />
|
||||
<Mail size={14} className="text-slate-800" />
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-[10px] font-bold text-slate-400 uppercase tracking-wider mb-0.5">Email</div>
|
||||
<div className="text-[10px] font-bold text-slate-800 uppercase tracking-wider mb-0.5">Email</div>
|
||||
<div className="text-sm font-semibold text-slate-900 break-all">{email ? String(email) : '-'}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-3">
|
||||
<div className="w-8 h-8 rounded-full bg-slate-50 flex items-center justify-center shrink-0 border border-slate-100">
|
||||
<MapPin size={14} className="text-slate-400" />
|
||||
<MapPin size={14} className="text-slate-800" />
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-[10px] font-bold text-slate-400 uppercase tracking-wider mb-0.5">Address</div>
|
||||
<div className="text-[10px] font-bold text-slate-800 uppercase tracking-wider mb-0.5">Address</div>
|
||||
<div className="text-sm font-semibold text-slate-900">
|
||||
{[completeAddress, area, pinCode].filter(Boolean).join(', ')}
|
||||
</div>
|
||||
@ -297,23 +297,23 @@ export function StoreDetail({ instanceId, onBack, onEdit }: StoreDetailProps) {
|
||||
{/* Route Assignment Card */}
|
||||
<Card pad={false} className="overflow-hidden border-slate-200 shadow-sm">
|
||||
<div className="flex items-center gap-2 p-4 border-b border-slate-100 bg-[var(--tiles-card-bg)]">
|
||||
<TrendingUp size={16} className="text-slate-400" />
|
||||
<h3 className="text-xs font-bold text-slate-500 uppercase tracking-wider m-0">Route Assignment</h3>
|
||||
<TrendingUp size={16} className="text-slate-800" />
|
||||
<h3 className="text-xs font-bold text-slate-800 uppercase tracking-wider m-0">Route Assignment</h3>
|
||||
</div>
|
||||
<div className="p-5 grid grid-cols-1 sm:grid-cols-3 gap-4 bg-[var(--tiles-card-bg)]">
|
||||
<div className="p-4 rounded-xl border border-slate-100 bg-slate-50">
|
||||
<div className="text-[10px] font-bold text-slate-400 uppercase tracking-wider mb-1">Route</div>
|
||||
<div className="text-base font-bold text-slate-900">{routeName ? String(routeName) : '-'}</div>
|
||||
<div className="text-xs text-slate-500 mt-1">Code {routeCode ? String(routeCode) : '-'}</div>
|
||||
<div style={{ backgroundColor: '#e8fbf0', border: '1px solid #bcecd0', borderRadius: '16px', padding: '16px', textAlign: 'center' }}>
|
||||
<div style={{ fontSize: '10px', fontWeight: 700, color: 'var(--primary-color)', textTransform: 'uppercase', letterSpacing: '0.05em', marginBottom: '2px' }}>Route</div>
|
||||
<div style={{ fontSize: '16px', fontWeight: 800, color: 'var(--primary-color)' }}>{routeName ? String(routeName) : '-'}</div>
|
||||
<div style={{ fontSize: '12px', color: 'var(--primary-color)', marginTop: '4px' }}>Code {routeCode ? String(routeCode) : '-'}</div>
|
||||
</div>
|
||||
<div className="p-4 rounded-xl border border-slate-100 bg-slate-50">
|
||||
<div className="text-[10px] font-bold text-slate-400 uppercase tracking-wider mb-1">Sub Route</div>
|
||||
<div className="text-base font-bold text-slate-900">{subRoute ? String(subRoute) : '-'}</div>
|
||||
<div style={{ backgroundColor: '#e8fbf0', border: '1px solid #bcecd0', borderRadius: '16px', padding: '16px', textAlign: 'center' }}>
|
||||
<div style={{ fontSize: '10px', fontWeight: 700, color: 'var(--primary-color)', textTransform: 'uppercase', letterSpacing: '0.05em', marginBottom: '2px' }}>Sub Route</div>
|
||||
<div style={{ fontSize: '16px', fontWeight: 800, color: 'var(--primary-color)' }}>{subRoute ? String(subRoute) : '-'}</div>
|
||||
</div>
|
||||
<div className="p-4 rounded-xl border border-slate-100 bg-slate-50">
|
||||
<div className="text-[10px] font-bold text-slate-400 uppercase tracking-wider mb-1">Area</div>
|
||||
<div className="text-base font-bold text-slate-900">{area ? String(area) : '-'}</div>
|
||||
<div className="text-xs text-slate-500 mt-1">PIN {pinCode ? String(pinCode) : '-'}</div>
|
||||
<div style={{ backgroundColor: '#e8fbf0', border: '1px solid #bcecd0', borderRadius: '16px', padding: '16px', textAlign: 'center' }}>
|
||||
<div style={{ fontSize: '10px', fontWeight: 700, color: 'var(--primary-color)', textTransform: 'uppercase', letterSpacing: '0.05em', marginBottom: '2px' }}>Area</div>
|
||||
<div style={{ fontSize: '16px', fontWeight: 800, color: 'var(--primary-color)' }}>{area ? String(area) : '-'}</div>
|
||||
<div style={{ fontSize: '12px', color: 'var(--primary-color)', marginTop: '4px' }}>PIN {pinCode ? String(pinCode) : '-'}</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
@ -322,27 +322,36 @@ export function StoreDetail({ instanceId, onBack, onEdit }: StoreDetailProps) {
|
||||
{Array.isArray(potential) && potential.length > 0 && (
|
||||
<Card pad={false} className="overflow-hidden border-slate-200 shadow-sm">
|
||||
<div className="flex items-center gap-2 p-4 border-b border-slate-100 bg-[var(--tiles-card-bg)]">
|
||||
<FileText size={16} className="text-slate-400" />
|
||||
<h3 className="text-xs font-bold text-slate-500 uppercase tracking-wider m-0">Order Potential</h3>
|
||||
<FileText size={16} className="text-slate-800" />
|
||||
<h3 className="text-xs font-bold text-slate-800 uppercase tracking-wider m-0">Order Potential</h3>
|
||||
</div>
|
||||
<div className="bg-[var(--tiles-card-bg)] p-4">
|
||||
<div className="flex flex-col gap-3">
|
||||
{potential.map((p: any, idx: number) => {
|
||||
if (!p.product_category && !p.quantity) return null;
|
||||
return (
|
||||
<div key={idx} className="bg-slate-50 rounded-xl border border-slate-100 p-4 flex items-center justify-between transition-colors hover:bg-white">
|
||||
<span className="font-bold text-slate-900 text-sm">{p.product_category ? String(p.product_category) : '-'}</span>
|
||||
<div className="flex flex-col items-end">
|
||||
<span className="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Potential</span>
|
||||
<span className="text-sm font-semibold text-emerald-600">{p.quantity ? String(p.quantity) : '0'}</span>
|
||||
<div key={idx} style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
backgroundColor: '#e8fbf0',
|
||||
border: '1px solid #bcecd0',
|
||||
borderRadius: '24px',
|
||||
padding: '14px 20px',
|
||||
}}>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
|
||||
<span style={{ color: 'var(--primary-color)', fontWeight: 600, fontSize: '14px' }}>{p.product_category ? String(p.product_category) : '-'}</span>
|
||||
</div>
|
||||
<div style={{ textAlign: 'right', whiteSpace: 'nowrap' }}>
|
||||
<span style={{ color: 'var(--primary-color)', fontWeight: 700, fontSize: '14px' }}>{p.quantity ? String(p.quantity) : '0'} Potential</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<div className="mt-4 bg-slate-900 text-white rounded-xl p-4 flex items-center justify-between shadow-sm">
|
||||
<span className="text-xs font-bold uppercase tracking-wider text-slate-400">Total Potential</span>
|
||||
<span className="text-lg font-black text-emerald-400">{totalPotential}</span>
|
||||
<div className="mt-4 rounded-xl p-4 flex items-center justify-between shadow-sm" style={{ backgroundColor: 'var(--primary-color)', color: '#ffffff' }}>
|
||||
<span className="text-xs font-bold uppercase tracking-wider" style={{ opacity: 0.9 }}>Total Potential</span>
|
||||
<span className="text-lg font-black text-emerald-300">{totalPotential}</span>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
@ -351,31 +360,31 @@ export function StoreDetail({ instanceId, onBack, onEdit }: StoreDetailProps) {
|
||||
{/* Distributor Card */}
|
||||
<Card pad={false} className="overflow-hidden border-slate-200 shadow-sm">
|
||||
<div className="flex items-center gap-2 p-4 border-b border-slate-100 bg-[var(--tiles-card-bg)]">
|
||||
<Truck size={16} className="text-slate-400" />
|
||||
<h3 className="text-xs font-bold text-slate-500 uppercase tracking-wider m-0">Distributor</h3>
|
||||
<Truck size={16} className="text-slate-800" />
|
||||
<h3 className="text-xs font-bold text-slate-800 uppercase tracking-wider m-0">Distributor</h3>
|
||||
</div>
|
||||
<div className="p-5 bg-[var(--tiles-card-bg)]">
|
||||
<div className="p-4 rounded-xl border border-slate-100 bg-slate-50">
|
||||
<div className="text-sm font-bold text-slate-900 mb-1">{distributorName ? String(distributorName) : '-'}</div>
|
||||
<div className="text-xs text-slate-500 mb-4">Owner · {distributorOwnerName ? String(distributorOwnerName) : '-'}</div>
|
||||
<div style={{ backgroundColor: '#e8fbf0', border: '1px solid #bcecd0', borderRadius: '16px', padding: '16px' }}>
|
||||
<div style={{ fontSize: '14px', fontWeight: 800, color: 'var(--primary-color)', marginBottom: '4px' }}>{distributorName ? String(distributorName) : '-'}</div>
|
||||
<div style={{ fontSize: '12px', color: 'var(--primary-color)', marginBottom: '16px' }}>Owner · {distributorOwnerName ? String(distributorOwnerName) : '-'}</div>
|
||||
|
||||
<div className="flex flex-col sm:flex-row sm:items-center gap-4 sm:gap-8">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-7 h-7 rounded-full bg-[var(--tiles-card-bg)] flex items-center justify-center border border-slate-200">
|
||||
<Phone size={12} className="text-slate-400" />
|
||||
<div className="flex items-center gap-3">
|
||||
<div style={{ width: '32px', height: '32px', borderRadius: '50%', backgroundColor: '#ffffff', display: 'flex', alignItems: 'center', justifyContent: 'center', border: '1px solid #bcecd0' }}>
|
||||
<Phone size={14} color="var(--primary-color)" />
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Phone</div>
|
||||
<div className="text-xs font-semibold text-slate-900">{String(distributorPhone)}</div>
|
||||
<div style={{ fontSize: '10px', fontWeight: 700, color: 'var(--primary-color)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>Phone</div>
|
||||
<div style={{ fontSize: '12px', fontWeight: 600, color: 'var(--primary-color)' }}>{String(distributorPhone)}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-7 h-7 rounded-full bg-[var(--tiles-card-bg)] flex items-center justify-center border border-slate-200">
|
||||
<Mail size={12} className="text-slate-400" />
|
||||
<div className="flex items-center gap-3">
|
||||
<div style={{ width: '32px', height: '32px', borderRadius: '50%', backgroundColor: '#ffffff', display: 'flex', alignItems: 'center', justifyContent: 'center', border: '1px solid #bcecd0' }}>
|
||||
<Mail size={14} color="var(--primary-color)" />
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Email</div>
|
||||
<div className="text-xs font-semibold text-slate-900">{distributorEmail ? String(distributorEmail) : '-'}</div>
|
||||
<div style={{ fontSize: '10px', fontWeight: 700, color: 'var(--primary-color)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>Email</div>
|
||||
<div style={{ fontSize: '12px', fontWeight: 600, color: 'var(--primary-color)' }}>{distributorEmail ? String(distributorEmail) : '-'}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -391,8 +400,8 @@ export function StoreDetail({ instanceId, onBack, onEdit }: StoreDetailProps) {
|
||||
{/* Location Map */}
|
||||
<Card pad={false} className="overflow-hidden border-slate-200 shadow-sm flex flex-col">
|
||||
<div className="flex items-center gap-2 p-4 border-b border-slate-100 bg-[var(--tiles-card-bg)]">
|
||||
<MapPin size={16} className="text-slate-400" />
|
||||
<h3 className="text-xs font-bold text-slate-500 uppercase tracking-wider m-0">Location</h3>
|
||||
<MapPin size={16} className="text-slate-800" />
|
||||
<h3 className="text-xs font-bold text-slate-800 uppercase tracking-wider m-0">Location</h3>
|
||||
</div>
|
||||
<div className="bg-slate-100 flex-1 relative min-h-[250px]">
|
||||
{lat && lng ? (
|
||||
@ -414,14 +423,14 @@ export function StoreDetail({ instanceId, onBack, onEdit }: StoreDetailProps) {
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<div className="absolute inset-0 flex flex-col items-center justify-center text-slate-400">
|
||||
<div className="absolute inset-0 flex flex-col items-center justify-center text-slate-800">
|
||||
<MapPin size={32} className="mb-2 opacity-50" />
|
||||
<span className="text-sm font-medium">No location data</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{lat && lng && (
|
||||
<div className="p-3 bg-[var(--tiles-card-bg)] text-[10px] text-slate-500 text-center border-t border-slate-100">
|
||||
<div className="p-3 bg-[var(--tiles-card-bg)] text-[10px] text-slate-800 text-center border-t border-slate-100">
|
||||
Tap map icon to open in Google Maps.
|
||||
</div>
|
||||
)}
|
||||
@ -430,24 +439,24 @@ export function StoreDetail({ instanceId, onBack, onEdit }: StoreDetailProps) {
|
||||
{/* Meta */}
|
||||
<Card pad={false} className="overflow-hidden border-slate-200 shadow-sm">
|
||||
<div className="flex items-center gap-2 p-4 border-b border-slate-100 bg-[var(--tiles-card-bg)]">
|
||||
<Hash size={16} className="text-slate-400" />
|
||||
<h3 className="text-xs font-bold text-slate-500 uppercase tracking-wider m-0">Meta</h3>
|
||||
<Hash size={16} className="text-slate-800" />
|
||||
<h3 className="text-xs font-bold text-slate-800 uppercase tracking-wider m-0">Meta</h3>
|
||||
</div>
|
||||
<div className="p-5 flex flex-col gap-3 bg-[var(--tiles-card-bg)]">
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-xs text-slate-500">Store Code</span>
|
||||
<span className="text-xs text-slate-800">Store Code</span>
|
||||
<span className="text-xs font-bold text-slate-900">{String(storeCode)}</span>
|
||||
</div>
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-xs text-slate-500">Instance</span>
|
||||
<span className="text-xs text-slate-800">Instance</span>
|
||||
<span className="text-xs font-bold text-slate-900">#{instanceId}</span>
|
||||
</div>
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-xs text-slate-500">Created by</span>
|
||||
<span className="text-xs text-slate-800">Created by</span>
|
||||
<span className="text-xs font-bold text-slate-900">{String(userName)}</span>
|
||||
</div>
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-xs text-slate-500">Created at</span>
|
||||
<span className="text-xs text-slate-800">Created at</span>
|
||||
<span className="text-xs font-bold text-slate-900">{createdAt !== '-' ? new Date(createdAt as string).toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' }) : '-'}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -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;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user