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

dsr and styles did

Browse Source
This commit is contained in:
suryacp23 2026-07-24 19:11:39 +05:30
parent 2c26f174b0
commit c2c9ac39da
20 changed files with 126 additions and 110 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/api/config.ts
View File

@ -197,16 +197,17 @@ export const SALES_REPORT_ROUTES = [
'West-4' 'West-4'
]; ];
export const SALES_REPORT_DISTRIBUTORS = [ export const ROUTE_WISE_DISTRIBUTORS: Record<string, string[]> = {
'Banashree Multi Millet Flour', "Krishna": ["Banashree Multi Millet Flour"],
'Shiva nandi Enterprises', "East-1": ["Shiva nandi Enterprises"],
'BPK & Co', "East-2": ["BPK & Co"],
'Gaviranga', "East-3": ["BPK & Co"],
'Bhagwan Enterprises', "East-4": ["Gaviranga "],
'Shreshtaa Trading Co', "West-1": ["Bhagwan Enterprises"],
'Rajarajeshwari Enterprises', "West-2": ["Shreshtaa Trading Co "],
'Byraveshwara Trading Co' "West-3": ["Rajarajeshwari Enterprises "],
]; "West-4": ["Byraveshwara Trading Co"],
};
export const SALES_REPORT_SO_NAMES = [ export const SALES_REPORT_SO_NAMES = [
'Surya C' 'Surya C'

2
src/components/buttons/Button.tsx
View File

@ -29,7 +29,7 @@ const VARIANTS: Record<ButtonVariant, string> = {
secondary: 'bg-card text-strong border border-border-default shadow-xs', secondary: 'bg-card text-strong border border-border-default shadow-xs',
ghost: 'bg-transparent text-body border border-transparent', ghost: 'bg-transparent text-body border border-transparent',
danger: 'bg-ruby-600 text-white border border-transparent shadow-sm', danger: 'bg-ruby-600 text-white border border-transparent shadow-sm',
outline: 'z-btn-outline' outline: 'z-btn-outline border-rounded-full'
}; };
/** /**

2
src/components/buttons/style.css
View File

@ -4,7 +4,7 @@
justify-content: center; justify-content: center;
gap: 6px; gap: 6px;
padding: 8px 16px; padding: 8px 16px;
border-radius: var(--z-border-radius-md); border-radius: var(--z-border-radius-pill);
font-size: var(--z-font-sm); font-size: var(--z-font-sm);
font-weight: 500; font-weight: 500;
font-family: inherit; font-family: inherit;

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

@ -79,7 +79,7 @@ export function CallDetail({
if (error) { if (error) {
return ( return (
<div className="bg-white p-8 rounded-2xl border border-border-default shadow-sm text-center"> <div className="bg-[var(--tiles-card-bg)] p-8 rounded-2xl border border-border-default shadow-sm text-center">
<EmptyState title="Couldn’t load record" hint={error} /> <EmptyState title="Couldn’t load record" hint={error} />
</div> </div>
); );
@ -87,7 +87,7 @@ export function CallDetail({
if (loading) { if (loading) {
return ( return (
<div className="bg-white p-12 rounded-2xl border border-border-default shadow-sm flex justify-center items-center"> <div className="bg-[var(--tiles-card-bg)] p-12 rounded-2xl border border-border-default shadow-sm flex justify-center items-center">
<Spinner label="Loading call details…" /> <Spinner label="Loading call details…" />
</div> </div>
); );
@ -353,7 +353,7 @@ export function CallDetail({
<div className="text-slate-800 p-4 sm:p-6 lg:p-8 font-sans space-y-6"> <div className="text-slate-800 p-4 sm:p-6 lg:p-8 font-sans space-y-6">
{/* 1. Primary Summary & Status Banner */} {/* 1. Primary Summary & Status Banner */}
<div className="bg-white rounded-2xl border border-slate-200/80 p-6 shadow-sm space-y-6"> <div className="bg-[var(--tiles-card-bg)] rounded-2xl border border-slate-200/80 p-6 shadow-sm space-y-6">
<div className="flex flex-col lg:flex-row items-start lg:items-center justify-between gap-6"> <div className="flex flex-col lg:flex-row items-start lg:items-center justify-between gap-6">
{/* Title & Badges */} {/* Title & Badges */}
@ -436,7 +436,7 @@ export function CallDetail({
✓ ✓
</div> </div>
) : ( ) : (
<div className="w-6 h-6 rounded-full border-2 border-slate-300 bg-white 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-400 flex items-center justify-center text-xs shrink-0">
<Clock size={12} /> <Clock size={12} />
</div> </div>
)} )}
@ -455,7 +455,7 @@ export function CallDetail({
✓ ✓
</div> </div>
) : ( ) : (
<div className="w-6 h-6 rounded-full border-2 border-slate-300 bg-white 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-400 flex items-center justify-center text-xs shrink-0">
<Clock size={12} /> <Clock size={12} />
</div> </div>
)} )}
@ -474,7 +474,7 @@ export function CallDetail({
✓ ✓
</div> </div>
) : ( ) : (
<div className="w-6 h-6 rounded-full border-2 border-slate-300 bg-white 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-400 flex items-center justify-center text-xs shrink-0">
<Clock size={12} /> <Clock size={12} />
</div> </div>
)} )}
@ -493,7 +493,7 @@ export function CallDetail({
✓ ✓
</div> </div>
) : ( ) : (
<div className="w-6 h-6 rounded-full border-2 border-slate-300 bg-white 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-400 flex items-center justify-center text-xs shrink-0">
<Clock size={12} /> <Clock size={12} />
</div> </div>
)} )}
@ -517,7 +517,7 @@ export function CallDetail({
{/* Order Details Card */} {/* Order Details Card */}
{currentStateName.toLowerCase() !== 'no order' && ( {currentStateName.toLowerCase() !== 'no order' && (
<div className="bg-white rounded-2xl border border-slate-200/80 p-6 shadow-sm space-y-4"> <div className="bg-[var(--tiles-card-bg)] rounded-2xl border border-slate-200/80 p-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 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"> <div className="flex items-center gap-2">
<ShoppingCart className="text-slate-700" size={18} /> <ShoppingCart className="text-slate-700" size={18} />
@ -617,7 +617,7 @@ export function CallDetail({
{/* Call Potential Card (Below Orders) */} {/* Call Potential Card (Below Orders) */}
{callPotentialList.length > 0 && ( {callPotentialList.length > 0 && (
<div className="bg-white rounded-2xl border border-slate-200/80 p-6 shadow-sm space-y-4"> <div className="bg-[var(--tiles-card-bg)] rounded-2xl border border-slate-200/80 p-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 justify-between border-b border-slate-100 pb-3">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<TrendingUp className="text-slate-700" size={18} /> <TrendingUp className="text-slate-700" size={18} />
@ -697,7 +697,7 @@ export function CallDetail({
{/* Visit Log Card */} {/* Visit Log Card */}
<div className="bg-white rounded-2xl border border-slate-200/80 p-6 shadow-sm space-y-4"> <div className="bg-[var(--tiles-card-bg)] rounded-2xl border border-slate-200/80 p-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 justify-between border-b border-slate-100 pb-3">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<ClipboardList className="text-slate-700" size={18} /> <ClipboardList className="text-slate-700" size={18} />
@ -769,7 +769,7 @@ export function CallDetail({
<div className="lg:order-first space-y-6"> <div className="lg:order-first space-y-6">
{/* Store Banner Image Card */} {/* Store Banner Image Card */}
<div className="bg-white rounded-2xl border border-slate-200/80 overflow-hidden shadow-sm"> <div className="bg-[var(--tiles-card-bg)] rounded-2xl border border-slate-200/80 overflow-hidden shadow-sm">
{storeImages.length > 0 ? ( {storeImages.length > 0 ? (
<div className="relative w-full h-44 bg-slate-100 flex items-center justify-center overflow-hidden"> <div className="relative w-full h-44 bg-slate-100 flex items-center justify-center overflow-hidden">
<img <img
@ -783,7 +783,7 @@ export function CallDetail({
</div> </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="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-white shadow-sm flex items-center justify-center text-slate-500"> <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} /> <ImageIcon size={22} />
</div> </div>
<span className="text-xs font-bold text-slate-600 uppercase tracking-wider">{storeName}</span> <span className="text-xs font-bold text-slate-600 uppercase tracking-wider">{storeName}</span>
@ -792,7 +792,7 @@ export function CallDetail({
</div> </div>
{/* Store Info Card */} {/* Store Info Card */}
<div className="bg-white rounded-2xl border border-slate-200/80 p-6 shadow-sm space-y-4"> <div className="bg-[var(--tiles-card-bg)] rounded-2xl border border-slate-200/80 p-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 justify-between border-b border-slate-100 pb-3">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<Store className="text-slate-700" size={18} /> <Store className="text-slate-700" size={18} />
@ -857,7 +857,7 @@ export function CallDetail({
{/* Store Potential Card */} {/* Store Potential Card */}
{storePotentialList.length > 0 && ( {storePotentialList.length > 0 && (
<div className="bg-white rounded-2xl border border-slate-200/80 p-6 shadow-sm space-y-4"> <div className="bg-[var(--tiles-card-bg)] rounded-2xl border border-slate-200/80 p-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 justify-between border-b border-slate-100 pb-3">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<TrendingUp className="text-slate-700" size={18} /> <TrendingUp className="text-slate-700" size={18} />
@ -890,7 +890,7 @@ export function CallDetail({
)} )}
{/* Distributor Card */} {/* Distributor Card */}
<div className="bg-white rounded-2xl border border-slate-200/80 p-6 shadow-sm space-y-4"> <div className="bg-[var(--tiles-card-bg)] rounded-2xl border border-slate-200/80 p-6 shadow-sm space-y-4">
<div className="flex items-center gap-2 border-b border-slate-100 pb-3"> <div className="flex items-center gap-2 border-b border-slate-100 pb-3">
<Truck className="text-slate-700" size={18} /> <Truck className="text-slate-700" size={18} />
<h2 className="text-sm font-bold text-slate-900 uppercase tracking-wide">Distributor</h2> <h2 className="text-sm font-bold text-slate-900 uppercase tracking-wide">Distributor</h2>
@ -921,7 +921,7 @@ export function CallDetail({
</div> </div>
{/* Performed By Card */} {/* Performed By Card */}
<div className="bg-white rounded-2xl border border-slate-200/80 p-6 shadow-sm space-y-4"> <div className="bg-[var(--tiles-card-bg)] rounded-2xl border border-slate-200/80 p-6 shadow-sm space-y-4">
<div className="flex items-center gap-2 border-b border-slate-100 pb-3"> <div className="flex items-center gap-2 border-b border-slate-100 pb-3">
<User className="text-slate-700" size={18} /> <User className="text-slate-700" size={18} />
<h2 className="text-sm font-bold text-slate-900 uppercase tracking-wide">Performed by</h2> <h2 className="text-sm font-bold text-slate-900 uppercase tracking-wide">Performed by</h2>

24
src/components/dv/DailyLogDetail.tsx
View File

@ -128,7 +128,7 @@ export function DailyLogDetail({ instanceId, refreshKey, onPunchOut, onBack }: D
<div className="w-full max-w-[1000px] mx-auto flex flex-col gap-6 pb-12"> <div className="w-full max-w-[1000px] mx-auto flex flex-col gap-6 pb-12">
{/* Top Header Card */} {/* Top Header Card */}
<div className="border border-slate-200 rounded-xl p-6 shadow-sm bg-white"> <div className="border border-slate-200 rounded-xl p-6 shadow-sm bg-[var(--tiles-card-bg)]">
<div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 mb-8"> <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 mb-8">
<div className="flex items-start gap-4"> <div className="flex items-start gap-4">
{onBack && ( {onBack && (
@ -219,7 +219,7 @@ export function DailyLogDetail({ instanceId, refreshKey, onPunchOut, onBack }: D
{/* Left Column */} {/* Left Column */}
<div className="flex-[2] flex flex-col gap-6"> <div className="flex-[2] flex flex-col gap-6">
{/* Timeline */} {/* Timeline */}
<div className="border border-slate-200 rounded-xl bg-white shadow-sm overflow-hidden p-6"> <div className="border border-slate-200 rounded-xl bg-[var(--tiles-card-bg)] shadow-sm overflow-hidden p-6">
<div className="flex items-center gap-2 text-[10px] font-bold text-slate-400 uppercase tracking-wider mb-6"> <div className="flex items-center gap-2 text-[10px] font-bold text-slate-400 uppercase tracking-wider mb-6">
<Calendar size={14} className="text-slate-500" /> Day Timeline <Calendar size={14} className="text-slate-500" /> Day Timeline
</div> </div>
@ -227,7 +227,7 @@ export function DailyLogDetail({ instanceId, refreshKey, onPunchOut, onBack }: D
<div className="relative pl-6 flex flex-col gap-8 border-l border-slate-200 ml-3"> <div className="relative pl-6 flex flex-col gap-8 border-l border-slate-200 ml-3">
{/* Punched In */} {/* Punched In */}
<div className="relative"> <div className="relative">
<div className="absolute -left-[31px] bg-white rounded-full p-0.5"> <div className="absolute -left-[31px] bg-[var(--tiles-card-bg)] rounded-full p-0.5">
<div className="w-4 h-4 rounded-full bg-blue-500 flex items-center justify-center"> <div className="w-4 h-4 rounded-full bg-blue-500 flex items-center justify-center">
<Clock size={10} className="text-white" /> <Clock size={10} className="text-white" />
</div> </div>
@ -238,8 +238,8 @@ export function DailyLogDetail({ instanceId, refreshKey, onPunchOut, onBack }: D
{/* Day Plan */} {/* Day Plan */}
<div className="relative"> <div className="relative">
<div className="absolute -left-[31px] bg-white rounded-full p-0.5"> <div className="absolute -left-[31px] bg-[var(--tiles-card-bg)] rounded-full p-0.5">
<div className="w-4 h-4 rounded-full border-2 border-slate-300 bg-white flex items-center justify-center"></div> <div className="w-4 h-4 rounded-full border-2 border-slate-300 bg-[var(--tiles-card-bg)] flex items-center justify-center"></div>
</div> </div>
<div className="text-sm font-bold text-slate-900 -mt-0.5">Day Plan Recorded</div> <div className="text-sm font-bold text-slate-900 -mt-0.5">Day Plan Recorded</div>
<div className="text-[10px] text-slate-600 mt-1">{String(dayPlanNotes)}</div> <div className="text-[10px] text-slate-600 mt-1">{String(dayPlanNotes)}</div>
@ -247,7 +247,7 @@ export function DailyLogDetail({ instanceId, refreshKey, onPunchOut, onBack }: D
{/* EOD Submitted */} {/* EOD Submitted */}
<div className="relative"> <div className="relative">
<div className="absolute -left-[31px] bg-white rounded-full p-0.5"> <div className="absolute -left-[31px] bg-[var(--tiles-card-bg)] rounded-full p-0.5">
<div className={`w-4 h-4 rounded-full flex items-center justify-center ${isPunchedIn ? 'bg-slate-300' : 'bg-slate-900'}`}> <div className={`w-4 h-4 rounded-full flex items-center justify-center ${isPunchedIn ? 'bg-slate-300' : 'bg-slate-900'}`}>
<ClipboardList size={10} className="text-white" /> <ClipboardList size={10} className="text-white" />
</div> </div>
@ -262,14 +262,14 @@ export function DailyLogDetail({ instanceId, refreshKey, onPunchOut, onBack }: D
{/* Notes Row */} {/* Notes Row */}
<div className={`grid grid-cols-1 ${!isPunchedIn ? 'md:grid-cols-2' : ''} gap-6`}> <div className={`grid grid-cols-1 ${!isPunchedIn ? 'md:grid-cols-2' : ''} gap-6`}>
<div className="border border-slate-200 rounded-xl bg-white shadow-sm overflow-hidden p-6 flex flex-col"> <div className="border border-slate-200 rounded-xl bg-[var(--tiles-card-bg)] shadow-sm overflow-hidden p-6 flex flex-col">
<div className="flex items-center gap-2 text-[10px] font-bold text-slate-400 uppercase tracking-wider mb-4"> <div className="flex items-center gap-2 text-[10px] font-bold text-slate-400 uppercase tracking-wider mb-4">
<ClipboardList size={14} className="text-slate-500" /> Day Plan Notes <ClipboardList size={14} className="text-slate-500" /> Day Plan Notes
</div> </div>
<div className="text-xs text-slate-700 leading-relaxed whitespace-pre-wrap">{String(dayPlanNotes)}</div> <div className="text-xs text-slate-700 leading-relaxed whitespace-pre-wrap">{String(dayPlanNotes)}</div>
</div> </div>
{!isPunchedIn && ( {!isPunchedIn && (
<div className="border border-slate-200 rounded-xl bg-white shadow-sm overflow-hidden p-6 flex flex-col"> <div className="border border-slate-200 rounded-xl bg-[var(--tiles-card-bg)] shadow-sm overflow-hidden p-6 flex flex-col">
<div className="flex items-center gap-2 text-[10px] font-bold text-slate-400 uppercase tracking-wider mb-4"> <div className="flex items-center gap-2 text-[10px] font-bold text-slate-400 uppercase tracking-wider mb-4">
<ClipboardList size={14} className="text-slate-500" /> EOD Remarks <ClipboardList size={14} className="text-slate-500" /> EOD Remarks
</div> </div>
@ -279,7 +279,7 @@ export function DailyLogDetail({ instanceId, refreshKey, onPunchOut, onBack }: D
</div> </div>
{/* Route Assignment */} {/* Route Assignment */}
<div className="border border-slate-200 rounded-xl bg-white shadow-sm overflow-hidden p-6"> <div className="border border-slate-200 rounded-xl bg-[var(--tiles-card-bg)] shadow-sm overflow-hidden p-6">
<div className="flex items-center gap-2 text-[10px] font-bold text-slate-400 uppercase tracking-wider mb-6"> <div className="flex items-center gap-2 text-[10px] font-bold text-slate-400 uppercase tracking-wider mb-6">
<Map size={14} className="text-slate-500" /> Route Assignment <Map size={14} className="text-slate-500" /> Route Assignment
</div> </div>
@ -299,7 +299,7 @@ export function DailyLogDetail({ instanceId, refreshKey, onPunchOut, onBack }: D
{/* Right Column */} {/* Right Column */}
<div className="flex-1 flex flex-col gap-6 min-w-[280px]"> <div className="flex-1 flex flex-col gap-6 min-w-[280px]">
{/* Store Image */} {/* Store Image */}
<div className="border border-slate-200 rounded-xl bg-white shadow-sm overflow-hidden p-6"> <div className="border border-slate-200 rounded-xl bg-[var(--tiles-card-bg)] shadow-sm overflow-hidden p-6">
<div className="flex items-center gap-2 text-[10px] font-bold text-slate-400 uppercase tracking-wider mb-4"> <div className="flex items-center gap-2 text-[10px] font-bold text-slate-400 uppercase tracking-wider mb-4">
<Camera size={14} className="text-slate-500" /> Store Image <Camera size={14} className="text-slate-500" /> Store Image
</div> </div>
@ -322,7 +322,7 @@ export function DailyLogDetail({ instanceId, refreshKey, onPunchOut, onBack }: D
</div> </div>
{/* SO Card */} {/* SO Card */}
<div className="border border-slate-200 rounded-xl bg-white shadow-sm overflow-hidden p-6"> <div className="border border-slate-200 rounded-xl bg-[var(--tiles-card-bg)] shadow-sm overflow-hidden p-6">
<div className="flex items-center gap-2 text-[10px] font-bold text-slate-400 uppercase tracking-wider mb-5"> <div className="flex items-center gap-2 text-[10px] font-bold text-slate-400 uppercase tracking-wider mb-5">
<User size={14} className="text-slate-500" /> Sales Officer <User size={14} className="text-slate-500" /> Sales Officer
</div> </div>
@ -359,7 +359,7 @@ export function DailyLogDetail({ instanceId, refreshKey, onPunchOut, onBack }: D
</div> </div>
{/* Meta Card */} {/* Meta Card */}
<div className="border border-slate-200 rounded-xl bg-white shadow-sm overflow-hidden p-6"> <div className="border border-slate-200 rounded-xl bg-[var(--tiles-card-bg)] shadow-sm overflow-hidden p-6">
<div className="flex items-center gap-2 text-[10px] font-bold text-slate-400 uppercase tracking-wider mb-4"> <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" /> Meta <Hash size={14} className="text-slate-500" /> Meta
</div> </div>

2
src/components/dv/DetailView.tsx
View File

@ -115,7 +115,7 @@ export function DetailView({ client, dvUid, instanceId, title, fields, columns =
{key.replace(/_/g, ' ')} {key.replace(/_/g, ' ')}
</dt> </dt>
<dd className="m-0 text-sm text-strong font-medium overflow-x-auto rounded border border-border-subtle shadow-sm"> <dd className="m-0 text-sm text-strong font-medium overflow-x-auto rounded border border-border-subtle shadow-sm">
<table className="min-w-full divide-y divide-border-subtle text-left bg-white"> <table className="min-w-full divide-y divide-border-subtle text-left bg-[var(--tiles-card-bg)]">
<thead className="bg-slate-50"> <thead className="bg-slate-50">
<tr> <tr>
{headers.map(h => ( {headers.map(h => (

4
src/components/dv/GridTable.tsx
View File

@ -10,7 +10,7 @@ export interface GridTableProps {
export function GridTable({ data, columns, onEdit, onDelete }: GridTableProps) { export function GridTable({ data, columns, onEdit, onDelete }: GridTableProps) {
return ( return (
<div className="w-full bg-white rounded-lg shadow-sm border border-slate-200 overflow-x-auto"> <div className="w-full bg-[var(--tiles-card-bg)] rounded-lg shadow-sm border border-slate-200 overflow-x-auto">
<table className="w-full text-sm text-left whitespace-nowrap"> <table className="w-full text-sm text-left whitespace-nowrap">
<thead className="bg-slate-100 border-b border-slate-200 text-[11px] font-bold text-slate-700 uppercase tracking-wider"> <thead className="bg-slate-100 border-b border-slate-200 text-[11px] font-bold text-slate-700 uppercase tracking-wider">
<tr> <tr>
@ -24,7 +24,7 @@ export function GridTable({ data, columns, onEdit, onDelete }: GridTableProps) {
</thead> </thead>
<tbody className="divide-y divide-slate-100"> <tbody className="divide-y divide-slate-100">
{data.map((row, rowIdx) => ( {data.map((row, rowIdx) => (
<tr key={rowIdx} className="hover:bg-slate-50 transition-colors bg-white group"> <tr key={rowIdx} className="hover:bg-slate-50 transition-colors bg-[var(--tiles-card-bg)] group">
{columns.map((col, colIdx) => { {columns.map((col, colIdx) => {
const val = row[col.id]; const val = row[col.id];
let displayVal = String(val ?? '-'); let displayVal = String(val ?? '-');

16
src/components/dv/OrderDetail.tsx
View File

@ -116,9 +116,9 @@ export function OrderDetail({ instanceId }: WiredDetailViewProps) {
const totalKgs = extract('total_kgs_3', remainingData) || 0; const totalKgs = extract('total_kgs_3', remainingData) || 0;
return ( return (
<div className="flex flex-col gap-4 bg-white p-1"> <div className="flex flex-col gap-4 bg-[var(--tiles-card-bg)] p-1">
{/* Top Section */} {/* Top Section */}
<div className="border border-slate-200 rounded-xl p-6 bg-white shadow-sm flex flex-col md:flex-row md:items-start justify-between gap-4"> <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> <div>
<div className="text-[10px] font-bold text-slate-400 uppercase tracking-wider mb-1">Order ID</div> <div className="text-[10px] font-bold text-slate-400 uppercase tracking-wider mb-1">Order ID</div>
<div className="text-2xl font-black text-slate-900 mb-2">{String(orderId)}</div> <div className="text-2xl font-black text-slate-900 mb-2">{String(orderId)}</div>
@ -143,19 +143,19 @@ export function OrderDetail({ instanceId }: WiredDetailViewProps) {
{/* Middle Stats Section */} {/* Middle Stats Section */}
<div className="grid grid-cols-1 md:grid-cols-3 gap-4"> <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
<div className="border border-slate-200 rounded-xl p-5 bg-white shadow-sm flex flex-col justify-between"> <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"> <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 <Package size={14} className="text-emerald-500" /> Total Bags
</div> </div>
<div className="text-2xl font-bold text-slate-900">{String(totalBags)}</div> <div className="text-2xl font-bold text-slate-900">{String(totalBags)}</div>
</div> </div>
<div className="border border-slate-200 rounded-xl p-5 bg-white shadow-sm flex flex-col justify-between"> <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"> <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 <Weight size={14} className="text-blue-500" /> Total Kilograms
</div> </div>
<div className="text-2xl font-bold text-slate-900">{Number(totalKgs).toLocaleString()}</div> <div className="text-2xl font-bold text-slate-900">{Number(totalKgs).toLocaleString()}</div>
</div> </div>
<div className="border border-slate-200 rounded-xl p-5 bg-white shadow-sm flex flex-col justify-between"> <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"> <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 <List size={14} className="text-slate-500" /> Line Items
</div> </div>
@ -166,7 +166,7 @@ export function OrderDetail({ instanceId }: WiredDetailViewProps) {
{/* Bottom Section */} {/* Bottom Section */}
<div className="flex flex-col lg:flex-row gap-4"> <div className="flex flex-col lg:flex-row gap-4">
{/* Left Table */} {/* Left Table */}
<div className="flex-[2] border border-slate-200 rounded-xl bg-white shadow-sm overflow-hidden flex flex-col min-w-0"> <div className="flex-[2] border border-slate-200 rounded-xl bg-[var(--tiles-card-bg)] shadow-sm overflow-hidden flex flex-col min-w-0">
<div className="p-4 border-b border-slate-100 flex items-center gap-2 bg-slate-50"> <div className="p-4 border-b border-slate-100 flex items-center gap-2 bg-slate-50">
<Package size={14} className="text-slate-500" /> <Package size={14} className="text-slate-500" />
<span className="text-xs font-bold text-slate-500 uppercase tracking-wider">Order Items</span> <span className="text-xs font-bold text-slate-500 uppercase tracking-wider">Order Items</span>
@ -217,7 +217,7 @@ export function OrderDetail({ instanceId }: WiredDetailViewProps) {
{/* Right Sidebar */} {/* Right Sidebar */}
<div className="flex-1 flex flex-col gap-4 min-w-[280px]"> <div className="flex-1 flex flex-col gap-4 min-w-[280px]">
{/* SO Card */} {/* SO Card */}
<div className="border border-slate-200 rounded-xl bg-white shadow-sm overflow-hidden p-5"> <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"> <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 <User size={14} className="text-slate-500" /> Sales Officer
</div> </div>
@ -253,7 +253,7 @@ export function OrderDetail({ instanceId }: WiredDetailViewProps) {
</div> </div>
{/* Order Meta */} {/* Order Meta */}
<div className="border border-slate-200 rounded-xl bg-white shadow-sm overflow-hidden p-5"> <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"> <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 <Hash size={14} className="text-slate-500" /> Order Meta
</div> </div>

4
src/components/dv/PotentialMiningTable.tsx
View File

@ -22,7 +22,7 @@ export interface PotentialMiningTableProps {
export function PotentialMiningTable({ data, onEdit, onDelete, hideOrderDetails }: PotentialMiningTableProps) { export function PotentialMiningTable({ data, onEdit, onDelete, hideOrderDetails }: PotentialMiningTableProps) {
return ( return (
<div className="w-full bg-white rounded-lg shadow-sm border border-slate-200 overflow-x-auto"> <div className="w-full bg-[var(--tiles-card-bg)] rounded-lg shadow-sm border border-slate-200 overflow-x-auto">
<table className="w-full text-sm text-left whitespace-nowrap"> <table className="w-full text-sm text-left whitespace-nowrap">
<thead className="bg-slate-100 border-b border-slate-200 text-[11px] font-bold text-slate-700 uppercase tracking-wider"> <thead className="bg-slate-100 border-b border-slate-200 text-[11px] font-bold text-slate-700 uppercase tracking-wider">
<tr> <tr>
@ -46,7 +46,7 @@ export function PotentialMiningTable({ data, onEdit, onDelete, hideOrderDetails
const absDiff = Math.abs(difference); const absDiff = Math.abs(difference);
return ( return (
<tr key={item.id} className="hover:bg-slate-50 transition-colors bg-white group"> <tr key={item.id} className="hover:bg-slate-50 transition-colors bg-[var(--tiles-card-bg)] group">
<td className="px-6 py-4"> <td className="px-6 py-4">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<span className="font-normal text-slate-600 text-sm">{item.productName}</span> <span className="font-normal text-slate-600 text-sm">{item.productName}</span>

32
src/components/dv/StoreDetail.tsx
View File

@ -183,7 +183,7 @@ export function StoreDetail({ instanceId, onBack, onEdit }: StoreDetailProps) {
</div> </div>
{/* Hero Card */} {/* Hero Card */}
<div className="bg-white rounded-2xl border border-slate-200 shadow-sm overflow-hidden flex flex-col md:flex-row"> <div className="bg-[var(--tiles-card-bg)] rounded-2xl border border-slate-200 shadow-sm overflow-hidden flex flex-col md:flex-row">
{/* Image Section */} {/* Image Section */}
{imageUrl ? ( {imageUrl ? (
<div className="md:w-1/3 lg:w-1/4 h-48 md:h-auto relative bg-slate-100"> <div className="md:w-1/3 lg:w-1/4 h-48 md:h-auto relative bg-slate-100">
@ -248,11 +248,11 @@ export function StoreDetail({ instanceId, onBack, onEdit }: StoreDetailProps) {
{/* Contact Card */} {/* Contact Card */}
<Card pad={false} className="overflow-hidden border-slate-200 shadow-sm"> <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-white"> <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" /> <User size={16} className="text-slate-400" />
<h3 className="text-xs font-bold text-slate-500 uppercase tracking-wider m-0">Contact</h3> <h3 className="text-xs font-bold text-slate-500 uppercase tracking-wider m-0">Contact</h3>
</div> </div>
<div className="p-5 grid grid-cols-1 sm:grid-cols-2 gap-y-6 gap-x-8 bg-white"> <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="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"> <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-400" />
@ -296,11 +296,11 @@ export function StoreDetail({ instanceId, onBack, onEdit }: StoreDetailProps) {
{/* Route Assignment Card */} {/* Route Assignment Card */}
<Card pad={false} className="overflow-hidden border-slate-200 shadow-sm"> <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-white"> <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" /> <TrendingUp size={16} className="text-slate-400" />
<h3 className="text-xs font-bold text-slate-500 uppercase tracking-wider m-0">Route Assignment</h3> <h3 className="text-xs font-bold text-slate-500 uppercase tracking-wider m-0">Route Assignment</h3>
</div> </div>
<div className="p-5 grid grid-cols-1 sm:grid-cols-3 gap-4 bg-white"> <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="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-[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-base font-bold text-slate-900">{routeName ? String(routeName) : '-'}</div>
@ -321,11 +321,11 @@ export function StoreDetail({ instanceId, onBack, onEdit }: StoreDetailProps) {
{/* Order Potential Card */} {/* Order Potential Card */}
{Array.isArray(potential) && potential.length > 0 && ( {Array.isArray(potential) && potential.length > 0 && (
<Card pad={false} className="overflow-hidden border-slate-200 shadow-sm"> <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-white"> <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" /> <FileText size={16} className="text-slate-400" />
<h3 className="text-xs font-bold text-slate-500 uppercase tracking-wider m-0">Order Potential</h3> <h3 className="text-xs font-bold text-slate-500 uppercase tracking-wider m-0">Order Potential</h3>
</div> </div>
<div className="bg-white"> <div className="bg-[var(--tiles-card-bg)]">
<table className="w-full text-sm text-left"> <table className="w-full text-sm text-left">
<thead className="bg-slate-50 border-b border-slate-100"> <thead className="bg-slate-50 border-b border-slate-100">
<tr> <tr>
@ -355,18 +355,18 @@ export function StoreDetail({ instanceId, onBack, onEdit }: StoreDetailProps) {
{/* Distributor Card */} {/* Distributor Card */}
<Card pad={false} className="overflow-hidden border-slate-200 shadow-sm"> <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-white"> <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" /> <Truck size={16} className="text-slate-400" />
<h3 className="text-xs font-bold text-slate-500 uppercase tracking-wider m-0">Distributor</h3> <h3 className="text-xs font-bold text-slate-500 uppercase tracking-wider m-0">Distributor</h3>
</div> </div>
<div className="p-5 bg-white"> <div className="p-5 bg-[var(--tiles-card-bg)]">
<div className="p-4 rounded-xl border border-slate-100 bg-slate-50"> <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-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 className="text-xs text-slate-500 mb-4">Owner · {distributorOwnerName ? String(distributorOwnerName) : '-'}</div>
<div className="flex flex-col sm:flex-row sm:items-center gap-4 sm:gap-8"> <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="flex items-center gap-2">
<div className="w-7 h-7 rounded-full bg-white flex items-center justify-center border border-slate-200"> <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" /> <Phone size={12} className="text-slate-400" />
</div> </div>
<div> <div>
@ -375,7 +375,7 @@ export function StoreDetail({ instanceId, onBack, onEdit }: StoreDetailProps) {
</div> </div>
</div> </div>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<div className="w-7 h-7 rounded-full bg-white flex items-center justify-center border border-slate-200"> <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" /> <Mail size={12} className="text-slate-400" />
</div> </div>
<div> <div>
@ -395,7 +395,7 @@ export function StoreDetail({ instanceId, onBack, onEdit }: StoreDetailProps) {
{/* Location Map */} {/* Location Map */}
<Card pad={false} className="overflow-hidden border-slate-200 shadow-sm flex flex-col"> <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-white"> <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" /> <MapPin size={16} className="text-slate-400" />
<h3 className="text-xs font-bold text-slate-500 uppercase tracking-wider m-0">Location</h3> <h3 className="text-xs font-bold text-slate-500 uppercase tracking-wider m-0">Location</h3>
</div> </div>
@ -412,7 +412,7 @@ export function StoreDetail({ instanceId, onBack, onEdit }: StoreDetailProps) {
src={`https://maps.google.com/maps?q=${lat},${lng}&hl=en&z=15&output=embed`} src={`https://maps.google.com/maps?q=${lat},${lng}&hl=en&z=15&output=embed`}
></iframe> ></iframe>
<div <div
className="absolute bottom-3 right-3 w-8 h-8 bg-white/90 backdrop-blur-sm rounded shadow flex items-center justify-center cursor-pointer hover:bg-white transition-colors" className="absolute bottom-3 right-3 w-8 h-8 bg-[var(--tiles-card-bg)]/90 backdrop-blur-sm rounded shadow flex items-center justify-center cursor-pointer hover:bg-[var(--tiles-card-bg)] transition-colors"
onClick={() => window.open(`https://maps.google.com/maps?q=${lat},${lng}`, '_blank')} onClick={() => window.open(`https://maps.google.com/maps?q=${lat},${lng}`, '_blank')}
> >
<Navigation2 size={16} className="text-slate-700" /> <Navigation2 size={16} className="text-slate-700" />
@ -426,7 +426,7 @@ export function StoreDetail({ instanceId, onBack, onEdit }: StoreDetailProps) {
)} )}
</div> </div>
{lat && lng && ( {lat && lng && (
<div className="p-3 bg-white 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-500 text-center border-t border-slate-100">
Tap map icon to open in Google Maps. Tap map icon to open in Google Maps.
</div> </div>
)} )}
@ -434,11 +434,11 @@ export function StoreDetail({ instanceId, onBack, onEdit }: StoreDetailProps) {
{/* Meta */} {/* Meta */}
<Card pad={false} className="overflow-hidden border-slate-200 shadow-sm"> <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-white"> <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" /> <Hash size={16} className="text-slate-400" />
<h3 className="text-xs font-bold text-slate-500 uppercase tracking-wider m-0">Meta</h3> <h3 className="text-xs font-bold text-slate-500 uppercase tracking-wider m-0">Meta</h3>
</div> </div>
<div className="p-5 flex flex-col gap-3 bg-white"> <div className="p-5 flex flex-col gap-3 bg-[var(--tiles-card-bg)]">
<div className="flex justify-between items-center"> <div className="flex justify-between items-center">
<span className="text-xs text-slate-500">Store Code</span> <span className="text-xs text-slate-500">Store Code</span>
<span className="text-xs font-bold text-slate-900">{String(storeCode)}</span> <span className="text-xs font-bold text-slate-900">{String(storeCode)}</span>

2
src/components/forms/fields/OrderGrid.tsx
View File

@ -296,7 +296,7 @@ export function OrderGrid({
const displayTotalKgs = totalKgsValue !== undefined ? totalKgsValue : calculatedKgs; const displayTotalKgs = totalKgsValue !== undefined ? totalKgsValue : calculatedKgs;
return ( return (
<div className="max-w-full bg-white rounded-xl border border-border-default p-6 space-y-6 shadow-sm font-sans"> <div className="max-w-full bg-[var(--tiles-card-bg)] rounded-xl border border-border-default p-6 space-y-6 shadow-sm font-sans">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<p className="text-sm font-bold text-slate-700 uppercase tracking-wide"> <p className="text-sm font-bold text-slate-700 uppercase tracking-wide">
{label || 'Order details'} {label || 'Order details'}

3
src/components/forms/fields/PotentialMiningGrid.tsx
View File

@ -73,7 +73,7 @@ export function PotentialMiningGrid({
}, [rows, columns, onChange]); }, [rows, columns, onChange]);
return ( return (
<div className="max-w-full bg-white rounded-xl border border-border-default p-6 space-y-6 shadow-sm font-sans"> <div className="max-w-full bg-[var(--tiles-card-bg)] rounded-xl border border-border-default p-6 space-y-6 shadow-sm font-sans">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<p className="text-sm font-bold text-slate-700 uppercase tracking-wide"> <p className="text-sm font-bold text-slate-700 uppercase tracking-wide">
{label || 'Potential Mining'} {label || 'Potential Mining'}
@ -172,6 +172,7 @@ export function PotentialMiningGrid({
disabled={isReadOnly} disabled={isReadOnly}
value={String(row[fieldId] ?? '')} value={String(row[fieldId] ?? '')}
onChange={(e) => updateRowField(rowIdx, fieldId, e.target.value)} onChange={(e) => updateRowField(rowIdx, fieldId, e.target.value)}
placeholder={col.name ? `Enter ${col.name.toLowerCase()}...` : 'Enter details...'}
className="w-full" className="w-full"
/> />
); );

2
src/components/forms/fields/StorePotentialGrid.tsx
View File

@ -139,7 +139,7 @@ export function StorePotentialGrid({
}, [rows, columns, onChange]); }, [rows, columns, onChange]);
return ( return (
<div className="max-w-full bg-white rounded-xl border border-border-default p-6 space-y-6 shadow-sm font-sans"> <div className="max-w-full bg-[var(--tiles-card-bg)] rounded-xl border border-border-default p-6 space-y-6 shadow-sm font-sans">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<p className="text-sm font-bold text-slate-700 uppercase tracking-wide"> <p className="text-sm font-bold text-slate-700 uppercase tracking-wide">
{label || 'Store Potential'} {label || 'Store Potential'}

15
src/components/reusable/AnalyticsChart.tsx
View File

@ -93,6 +93,16 @@ export function AnalyticsChart({ data }: AnalyticsChartProps) {
const renderChartContent = () => { const renderChartContent = () => {
return ( return (
<> <>
<defs>
<linearGradient id={`barGradient-${idx}-0`} x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stopColor="#1F4D36" stopOpacity={1} />
<stop offset="100%" stopColor="#1F4D36" stopOpacity={0.6} />
</linearGradient>
<linearGradient id={`barGradient-${idx}-1`} x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stopColor="#3B82F6" stopOpacity={1} />
<stop offset="100%" stopColor="#3B82F6" stopOpacity={0.6} />
</linearGradient>
</defs>
<CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#E2E8F0" /> <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#E2E8F0" />
<XAxis <XAxis
dataKey="dimension" dataKey="dimension"
@ -142,12 +152,13 @@ export function AnalyticsChart({ data }: AnalyticsChartProps) {
/> />
); );
} else { } else {
const barFill = i === 0 ? `url(#barGradient-${idx}-0)` : (i === 1 ? `url(#barGradient-${idx}-1)` : color);
return ( return (
<Bar <Bar
key={key} key={key}
dataKey={key} dataKey={key}
name={hasSeries ? key : "Value"} name={hasSeries ? key : "Value"}
fill={color} fill={barFill}
radius={[4, 4, 0, 0]} radius={[4, 4, 0, 0]}
maxBarSize={40} maxBarSize={40}
/> />
@ -159,7 +170,7 @@ export function AnalyticsChart({ data }: AnalyticsChartProps) {
}; };
return ( return (
<Card key={chart.chart_uid || idx} title={title} className="shadow-sm border border-gray-100"> <Card key={chart.chart_uid || idx} title={title} className="shadow-sm border border-gray-100 !bg-[var(--tiles-card-bg)]">
<div className="h-[320px] w-full mt-4"> <div className="h-[320px] w-full mt-4">
{chartType === 5 ? ( {chartType === 5 ? (
<div className="w-full h-full overflow-y-auto pr-2 scrollbar-slim"> <div className="w-full h-full overflow-y-auto pr-2 scrollbar-slim">

4
src/components/reusable/Pagination.tsx
View File

@ -74,14 +74,14 @@ export function Pagination({ page, pageSize, total, onPage, onPageSizeChange }:
</div> </div>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<Button variant="secondary" size="sm" disabled={safePage <= 1} onClick={() => onPage(safePage - 1)}> <Button variant="outline" size="sm" className="!rounded-full" disabled={safePage <= 1} onClick={() => onPage(safePage - 1)}>
<ChevronLeft size={15} /> <ChevronLeft size={15} />
Prev Prev
</Button> </Button>
<span className="px-1 text-xs font-medium text-muted nums"> <span className="px-1 text-xs font-medium text-muted nums">
{safePage} / {totalPages} {safePage} / {totalPages}
</span> </span>
<Button variant="secondary" size="sm" disabled={safePage >= totalPages} onClick={() => onPage(safePage + 1)}> <Button variant="outline" size="sm" className="!rounded-full" disabled={safePage >= totalPages} onClick={() => onPage(safePage + 1)}>
Next Next
<ChevronRight size={15} /> <ChevronRight size={15} />
</Button> </Button>

14
src/components/reusable/StatsTiles.tsx
View File

@ -1,4 +1,4 @@
import { Phone, TrendingUp, Activity, BarChart2, ShoppingCart, ShoppingBag, Scale } from 'lucide-react'; import { Phone, TrendingUp, Activity, BarChart2, ShoppingCart, ShoppingBag, Scale } from 'lucide-react';
import type { TileItem } from "../../api/types"; import type { TileItem } from "../../api/types";
export interface StatsTilesProps { export interface StatsTilesProps {
@ -49,12 +49,11 @@ export function StatsTiles({ tiles }: StatsTilesProps) {
return ( return (
<div <div
key={tile.tile_uid || idx} key={tile.tile_uid || idx}
className={`flex flex-col justify-between w-full h-[100px] p-5 rounded-2xl bg-white border border-gray-100 shadow-sm transition-all duration-200 hover:shadow-md hover:-translate-y-1 cursor-pointer`} className={`flex flex-col justify-between w-full h-[100px] p-5 rounded-xl bg-[var(--tiles-card-bg)] border border-[var(--tiles-card-border)] shadow-sm transition-all duration-200 hover:shadow-md hover:-translate-y-1 cursor-pointer`}
> >
<div className="flex justify-between items-center w-full"> <div className="flex justify-between items-center w-full">
<span className={`text-sm font-bold truncate pr-2 ${ <span className={`text-sm font-bold truncate pr-2 ${isDanger ? 'text-red-600' : 'text-[var(--tiles-font-color)]'
isDanger ? 'text-red-600' : 'text-gray-600' }`}>
}`}>
{displayLabel} {displayLabel}
</span> </span>
<div className={`w-8 h-8 rounded-lg flex items-center justify-center shrink-0 ${iconBgColor} ${iconColor}`}> <div className={`w-8 h-8 rounded-lg flex items-center justify-center shrink-0 ${iconBgColor} ${iconColor}`}>
@ -62,9 +61,8 @@ export function StatsTiles({ tiles }: StatsTilesProps) {
</div> </div>
</div> </div>
<p className={`text-[26px] font-extrabold leading-none tabular-nums mt-auto ${ <p className={`text-[26px] font-extrabold leading-none tabular-nums mt-auto ${isDanger ? 'text-red-600' : 'text-[var(--tiles-font-color)]'
isDanger ? 'text-red-600' : 'text-[#0058be]' }`}>
}`}>
{(tile.value as React.ReactNode) ?? "-"} {(tile.value as React.ReactNode) ?? "-"}
</p> </p>
</div> </div>

5
src/components/rv/RecordView.tsx
View File

@ -161,6 +161,7 @@ export function RecordView({
title={title} title={title}
action={headerActions} action={headerActions}
pad={false} pad={false}
className="!bg-[var(--z-rv-table-header)]"
> >
<div className="flex flex-wrap items-center justify-between gap-4 p-4 border-b border-[var(--z-block-border)] bg-[var(--z-rv-table-header)]"> <div className="flex flex-wrap items-center justify-between gap-4 p-4 border-b border-[var(--z-block-border)] bg-[var(--z-rv-table-header)]">
<div className="flex flex-wrap items-center gap-3"> <div className="flex flex-wrap items-center gap-3">
@ -241,13 +242,13 @@ export function RecordView({
{fields.map((f) => ( {fields.map((f) => (
<th <th
key={f.field_key} key={f.field_key}
className="text-left px-[18px] py-4 text-sm font-bold uppercase tracking-wider text-black/70 whitespace-nowrap bg-slate-50/50" className="text-left px-[18px] py-4 text-sm font-bold uppercase tracking-wider text-black/70 whitespace-nowrap bg-[var(--z-rv-table-header)]"
> >
{f.output_label} {f.output_label}
</th> </th>
))} ))}
{rowActions && ( {rowActions && (
<th className="sticky right-0 bg-slate-50/50 px-4 py-4 text-left text-sm font-extrabold uppercase tracking-wider text-[#1b37a5] border-b border-border-subtle z-10 w-24"> <th className="sticky right-0 bg-[var(--z-rv-table-header)] px-4 py-4 text-left text-sm font-extrabold uppercase tracking-wider text-[#1b37a5] border-b border-border-subtle z-10 w-24">
Actions Actions
</th> </th>
)} )}

8
src/screens/ConsoleLayout.tsx
View File

@ -29,12 +29,12 @@ export function ConsoleLayout() {
if (!authed) return <Navigate to="/login" replace />; if (!authed) return <Navigate to="/login" replace />;
return ( return (
<div className="h-screen bg-app flex flex-col"> <div className="h-screen bg-[var(--secondary-color)] flex flex-col">
<header className="sticky top-0 z-10 shrink-0 flex items-center justify-between gap-6 px-6 h-[56px] shadow-sm" style={{ background: 'var(--nav-bg-color)' }}> <header className="sticky top-0 z-10 shrink-0 flex items-center justify-between gap-6 px-6 h-[56px] shadow-sm" style={{ background: 'var(--nav-bg-color)' }}>
<div className="flex items-center min-w-max w-48"> <div className="flex items-center min-w-max w-48">
<span className="text-lg font-bold text-white tracking-wide leading-none">Krishna Sales</span> <span className="text-lg font-bold text-white tracking-wide leading-none">Krishna Sales</span>
</div> </div>
<nav className="flex items-center justify-center gap-2 h-full flex-1"> <nav className="flex items-center justify-end gap-2 h-full flex-1 mr-4">
{SCREENS.map((t) => { {SCREENS.map((t) => {
return ( return (
<NavLink <NavLink
@ -61,7 +61,7 @@ export function ConsoleLayout() {
<ChevronDown size={14} className="ml-0.5 opacity-70" /> <ChevronDown size={14} className="ml-0.5 opacity-70" />
</button> </button>
<div className="absolute top-[80%] left-0 mt-1 w-56 bg-white rounded-md shadow-lg py-1 border border-gray-200 hidden group-hover:block z-50"> <div className="absolute top-[80%] right-0 mt-1 w-56 bg-white rounded-md shadow-lg py-1 border border-gray-200 hidden group-hover:block z-50">
{Object.entries(REPORT_MAP).map(([key, report]) => ( {Object.entries(REPORT_MAP).map(([key, report]) => (
<NavLink <NavLink
key={key} key={key}
@ -85,7 +85,7 @@ export function ConsoleLayout() {
> >
{user?.name ? user.name.charAt(0).toUpperCase() : 'S'} {user?.name ? user.name.charAt(0).toUpperCase() : 'S'}
</button> </button>
<div className="absolute top-[85%] right-0 mt-1 w-60 bg-white rounded-md shadow-xl py-2 border border-gray-200 hidden group-hover:block z-50 text-left"> <div className="absolute top-[85%] right-0 mt-1 w-60 bg-white rounded-md shadow-xl py-2 border border-gray-200 hidden group-hover:block z-50 text-left">
<div className="px-4 py-3 border-b border-gray-100 mb-1"> <div className="px-4 py-3 border-b border-gray-100 mb-1">
<p className="text-sm font-bold text-gray-900 truncate">{user?.name || 'User'}</p> <p className="text-sm font-bold text-gray-900 truncate">{user?.name || 'User'}</p>

9
src/screens/DailySalesReportPage.tsx
View File

@ -3,7 +3,7 @@ import { Card, Input, Select } from '../components/reusable';
import { Button } from '../components/buttons/Button'; import { Button } from '../components/buttons/Button';
import { import {
SALES_REPORT_ROUTES, SALES_REPORT_ROUTES,
SALES_REPORT_DISTRIBUTORS, ROUTE_WISE_DISTRIBUTORS,
SALES_REPORT_SO_NAMES SALES_REPORT_SO_NAMES
} from '../api/config'; } from '../api/config';
import { Download, Printer } from 'lucide-react'; import { Download, Printer } from 'lucide-react';
@ -161,14 +161,17 @@ export function DailySalesReportPage() {
<Select <Select
label="Route" label="Route"
value={route} value={route}
onChange={(e) => setRoute(e.target.value)} onChange={(e) => {
setRoute(e.target.value);
setDistributor('');
}}
options={[{ value: '', label: 'Select Route' }, ...SALES_REPORT_ROUTES.map(r => ({ value: r, label: r }))]} options={[{ value: '', label: 'Select Route' }, ...SALES_REPORT_ROUTES.map(r => ({ value: r, label: r }))]}
/> />
<Select <Select
label="Distributor" label="Distributor"
value={distributor} value={distributor}
onChange={(e) => setDistributor(e.target.value)} onChange={(e) => setDistributor(e.target.value)}
options={[{ value: '', label: 'Select Distributor' }, ...SALES_REPORT_DISTRIBUTORS.map(d => ({ value: d, label: d }))]} options={[{ value: '', label: 'Select Distributor' }, ...(route ? (ROUTE_WISE_DISTRIBUTORS[route] || []) : []).map(d => ({ value: d, label: d }))]}
/> />
<Select <Select
label="SO Name" label="SO Name"

35
src/styles/styles.css
View File

@ -191,8 +191,8 @@
/* root variable */ /* root variable */
:root { :root {
--primary-color: #1d4ed8; --primary-color: #1F4D36;
--secondary-color: #f9fafb; --secondary-color: #fdf4e4de;
--font-color: #10182b; --font-color: #10182b;
--font-family: "IBM Plex Sans", serif; --font-family: "IBM Plex Sans", serif;
--light-font-color: #667085; --light-font-color: #667085;
@ -209,7 +209,7 @@
/* Navbar background color */ /* Navbar background color */
--nav-bg-color: linear-gradient(91deg, #1b37a5 0.17%, #2e56e1 99.89%); --nav-bg-color: linear-gradient(91deg, #063b21 0.17%, #0d663a 99.89%);
--nav-item-color: #10182b; --nav-item-color: #10182b;
--nav-item-active: #1b84ff; --nav-item-active: #1b84ff;
--nav-item-active-bg: #c0d4ed45; --nav-item-active-bg: #c0d4ed45;
@ -229,22 +229,22 @@
--nav-left-separator-line: #484848; --nav-left-separator-line: #484848;
/* tiles card */ /* tiles card */
--tiles-card-bg: #fff; --tiles-card-bg: #FFFBF4;
--tiles-card-border: #e5e7eb; --tiles-card-border: #e5e7eb00;
--tiles-font-color: #10182b; --tiles-font-color: #1F4D36;
--tiles-font-size: 16px; --tiles-font-size: 16px;
--tiles-count-size: 20px; --tiles-count-size: 20px;
/* button */ /* button */
--z-btn-primary-bg: #0058be; --z-btn-primary-bg: #1F4D36;
--z-btn-primary-color: #fff; --z-btn-primary-color: #fff;
--primary-btn-active: #0059bed8; --primary-btn-active: #1d613f;
--primary-btn-activeClr: #fff; --primary-btn-activeClr: #fff;
--z-btn-secondary-bg: #f4f4f4; --z-btn-secondary-bg: #f4f4f4;
--z-btn-secondary-color: #10182b; --z-btn-secondary-color: #10182b;
--secondary-btn-active-bg: #eaeaea; --secondary-btn-active-bg: #eaeaea;
--z-btn-outline-color: #0058be; --z-btn-outline-color: #1F4D36;
--z-btn-outline-border: #0058be; --z-btn-outline-border: #1F4D36;
--button-height: 36px; --button-height: 36px;
--z-btn-sm-height: 32px; --z-btn-sm-height: 32px;
@ -252,7 +252,7 @@
--z-btn-lg-height: 48px; --z-btn-lg-height: 48px;
/* blocks */ /* blocks */
--block-bg: #fff; --block-bg: var(--tiles-card-bg);
--block-padding: 20px; --block-padding: 20px;
--block-radius: 20px; --block-radius: 20px;
--block-border: #e5e7eb; --block-border: #e5e7eb;
@ -275,8 +275,8 @@
--small-icon: 24px; --small-icon: 24px;
/* record view table color */ /* record view table color */
--rv-table-bg: #fff; --rv-table-bg: #FFFBF4;
--rv-table-header: #f9fafb; --rv-table-header: #FFFBF4;
--table-row-bg-select: #fafafa; --table-row-bg-select: #fafafa;
--table-tr-active: #f9fafb; --table-tr-active: #f9fafb;
--rv-table-height: 40px; --rv-table-height: 40px;
@ -285,7 +285,7 @@
/* form input tags */ /* form input tags */
--form-input-height: 40px; --form-input-height: 40px;
--form-bg: #fff; --form-bg: var(--tiles-card-bg);
--form-input-bg: #fff; --form-input-bg: #fff;
--inputBox-border: ##e5e7eb; --inputBox-border: ##e5e7eb;
--inputBox-border-active: #a2acbf; --inputBox-border-active: #a2acbf;
@ -353,14 +353,15 @@
--z-btn-height: 44px; --z-btn-height: 44px;
/* block and section styles */ /* block and section styles */
--z-block-bg: #fff; --z-block-bg: var(--tiles-card-bg);
--z-block-radius: 8px; --z-block-radius: 8px;
--z-block-border: #e5e7eb; --z-block-border: #e5e7eb;
--z-block-shadow: box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); --z-block-shadow: box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
/* record view table */ /* record view table */
--z-rv-table-header: #fff; --z-rv-table-bg: var(--rv-table-bg);
--z-rv-td-padding: 8px 20px; --z-rv-table-header: var(--rv-table-header);
--z-rv-td-padding: var(--table-td-padding);
--z-rv-table-border: #e5e7eb; --z-rv-table-border: #e5e7eb;
--z-rv-td-height: 40px; --z-rv-td-height: 40px;