dsr and styles did
This commit is contained in:
suryacp23
parent
2c26f174b0
commit
c2c9ac39da
@ -197,16 +197,17 @@ export const SALES_REPORT_ROUTES = [
|
||||
'West-4'
|
||||
];
|
||||
|
||||
export const SALES_REPORT_DISTRIBUTORS = [
|
||||
'Banashree Multi Millet Flour',
|
||||
'Shiva nandi Enterprises',
|
||||
'BPK & Co',
|
||||
'Gaviranga',
|
||||
'Bhagwan Enterprises',
|
||||
'Shreshtaa Trading Co',
|
||||
'Rajarajeshwari Enterprises',
|
||||
'Byraveshwara Trading Co'
|
||||
];
|
||||
export const ROUTE_WISE_DISTRIBUTORS: Record<string, string[]> = {
|
||||
"Krishna": ["Banashree Multi Millet Flour"],
|
||||
"East-1": ["Shiva nandi Enterprises"],
|
||||
"East-2": ["BPK & Co"],
|
||||
"East-3": ["BPK & Co"],
|
||||
"East-4": ["Gaviranga "],
|
||||
"West-1": ["Bhagwan Enterprises"],
|
||||
"West-2": ["Shreshtaa Trading Co "],
|
||||
"West-3": ["Rajarajeshwari Enterprises "],
|
||||
"West-4": ["Byraveshwara Trading Co"],
|
||||
};
|
||||
|
||||
export const SALES_REPORT_SO_NAMES = [
|
||||
'Surya C'
|
||||
|
||||
@ -29,7 +29,7 @@ const VARIANTS: Record<ButtonVariant, string> = {
|
||||
secondary: 'bg-card text-strong border border-border-default shadow-xs',
|
||||
ghost: 'bg-transparent text-body border border-transparent',
|
||||
danger: 'bg-ruby-600 text-white border border-transparent shadow-sm',
|
||||
outline: 'z-btn-outline'
|
||||
outline: 'z-btn-outline border-rounded-full'
|
||||
};
|
||||
|
||||
/**
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
padding: 8px 16px;
|
||||
border-radius: var(--z-border-radius-md);
|
||||
border-radius: var(--z-border-radius-pill);
|
||||
font-size: var(--z-font-sm);
|
||||
font-weight: 500;
|
||||
font-family: inherit;
|
||||
|
||||
@ -79,7 +79,7 @@ export function CallDetail({
|
||||
|
||||
if (error) {
|
||||
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} />
|
||||
</div>
|
||||
);
|
||||
@ -87,7 +87,7 @@ export function CallDetail({
|
||||
|
||||
if (loading) {
|
||||
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…" />
|
||||
</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">
|
||||
|
||||
{/* 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">
|
||||
|
||||
{/* Title & Badges */}
|
||||
@ -436,7 +436,7 @@ export function CallDetail({
|
||||
✓
|
||||
</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} />
|
||||
</div>
|
||||
)}
|
||||
@ -455,7 +455,7 @@ export function CallDetail({
|
||||
✓
|
||||
</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} />
|
||||
</div>
|
||||
)}
|
||||
@ -474,7 +474,7 @@ export function CallDetail({
|
||||
✓
|
||||
</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} />
|
||||
</div>
|
||||
)}
|
||||
@ -493,7 +493,7 @@ export function CallDetail({
|
||||
✓
|
||||
</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} />
|
||||
</div>
|
||||
)}
|
||||
@ -517,7 +517,7 @@ export function CallDetail({
|
||||
|
||||
{/* Order Details Card */}
|
||||
{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 items-center gap-2">
|
||||
<ShoppingCart className="text-slate-700" size={18} />
|
||||
@ -617,7 +617,7 @@ export function CallDetail({
|
||||
|
||||
{/* Call Potential Card (Below Orders) */}
|
||||
{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 gap-2">
|
||||
<TrendingUp className="text-slate-700" size={18} />
|
||||
@ -697,7 +697,7 @@ export function CallDetail({
|
||||
|
||||
|
||||
{/* 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 gap-2">
|
||||
<ClipboardList className="text-slate-700" size={18} />
|
||||
@ -769,7 +769,7 @@ export function CallDetail({
|
||||
<div className="lg:order-first space-y-6">
|
||||
|
||||
{/* 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 ? (
|
||||
<div className="relative w-full h-44 bg-slate-100 flex items-center justify-center overflow-hidden">
|
||||
<img
|
||||
@ -783,7 +783,7 @@ 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-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} />
|
||||
</div>
|
||||
<span className="text-xs font-bold text-slate-600 uppercase tracking-wider">{storeName}</span>
|
||||
@ -792,7 +792,7 @@ export function CallDetail({
|
||||
</div>
|
||||
|
||||
{/* 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 gap-2">
|
||||
<Store className="text-slate-700" size={18} />
|
||||
@ -857,7 +857,7 @@ export function CallDetail({
|
||||
|
||||
{/* Store Potential Card */}
|
||||
{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 gap-2">
|
||||
<TrendingUp className="text-slate-700" size={18} />
|
||||
@ -890,7 +890,7 @@ export function CallDetail({
|
||||
)}
|
||||
|
||||
{/* 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">
|
||||
<Truck className="text-slate-700" size={18} />
|
||||
<h2 className="text-sm font-bold text-slate-900 uppercase tracking-wide">Distributor</h2>
|
||||
@ -921,7 +921,7 @@ export function CallDetail({
|
||||
</div>
|
||||
|
||||
{/* 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">
|
||||
<User className="text-slate-700" size={18} />
|
||||
<h2 className="text-sm font-bold text-slate-900 uppercase tracking-wide">Performed by</h2>
|
||||
|
||||
@ -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">
|
||||
|
||||
{/* 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 items-start gap-4">
|
||||
{onBack && (
|
||||
@ -219,7 +219,7 @@ export function DailyLogDetail({ instanceId, refreshKey, onPunchOut, onBack }: D
|
||||
{/* Left Column */}
|
||||
<div className="flex-[2] flex flex-col gap-6">
|
||||
{/* 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">
|
||||
<Calendar size={14} className="text-slate-500" /> Day Timeline
|
||||
</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">
|
||||
{/* Punched In */}
|
||||
<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">
|
||||
<Clock size={10} className="text-white" />
|
||||
</div>
|
||||
@ -238,8 +238,8 @@ export function DailyLogDetail({ instanceId, refreshKey, onPunchOut, onBack }: D
|
||||
|
||||
{/* Day Plan */}
|
||||
<div className="relative">
|
||||
<div className="absolute -left-[31px] bg-white 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="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-[var(--tiles-card-bg)] flex items-center justify-center"></div>
|
||||
</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>
|
||||
@ -247,7 +247,7 @@ export function DailyLogDetail({ instanceId, refreshKey, onPunchOut, onBack }: D
|
||||
|
||||
{/* EOD Submitted */}
|
||||
<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'}`}>
|
||||
<ClipboardList size={10} className="text-white" />
|
||||
</div>
|
||||
@ -262,14 +262,14 @@ export function DailyLogDetail({ instanceId, refreshKey, onPunchOut, onBack }: D
|
||||
|
||||
{/* Notes Row */}
|
||||
<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">
|
||||
<ClipboardList size={14} className="text-slate-500" /> Day Plan Notes
|
||||
</div>
|
||||
<div className="text-xs text-slate-700 leading-relaxed whitespace-pre-wrap">{String(dayPlanNotes)}</div>
|
||||
</div>
|
||||
{!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">
|
||||
<ClipboardList size={14} className="text-slate-500" /> EOD Remarks
|
||||
</div>
|
||||
@ -279,7 +279,7 @@ export function DailyLogDetail({ instanceId, refreshKey, onPunchOut, onBack }: D
|
||||
</div>
|
||||
|
||||
{/* 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">
|
||||
<Map size={14} className="text-slate-500" /> Route Assignment
|
||||
</div>
|
||||
@ -299,7 +299,7 @@ export function DailyLogDetail({ instanceId, refreshKey, onPunchOut, onBack }: D
|
||||
{/* Right Column */}
|
||||
<div className="flex-1 flex flex-col gap-6 min-w-[280px]">
|
||||
{/* 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">
|
||||
<Camera size={14} className="text-slate-500" /> Store Image
|
||||
</div>
|
||||
@ -322,7 +322,7 @@ export function DailyLogDetail({ instanceId, refreshKey, onPunchOut, onBack }: D
|
||||
</div>
|
||||
|
||||
{/* 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">
|
||||
<User size={14} className="text-slate-500" /> Sales Officer
|
||||
</div>
|
||||
@ -359,7 +359,7 @@ export function DailyLogDetail({ instanceId, refreshKey, onPunchOut, onBack }: D
|
||||
</div>
|
||||
|
||||
{/* 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">
|
||||
<Hash size={14} className="text-slate-500" /> Meta
|
||||
</div>
|
||||
|
||||
@ -115,7 +115,7 @@ export function DetailView({ client, dvUid, instanceId, title, fields, columns =
|
||||
{key.replace(/_/g, ' ')}
|
||||
</dt>
|
||||
<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">
|
||||
<tr>
|
||||
{headers.map(h => (
|
||||
|
||||
@ -10,7 +10,7 @@ export interface GridTableProps {
|
||||
|
||||
export function GridTable({ data, columns, onEdit, onDelete }: GridTableProps) {
|
||||
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">
|
||||
<thead className="bg-slate-100 border-b border-slate-200 text-[11px] font-bold text-slate-700 uppercase tracking-wider">
|
||||
<tr>
|
||||
@ -24,7 +24,7 @@ export function GridTable({ data, columns, onEdit, onDelete }: GridTableProps) {
|
||||
</thead>
|
||||
<tbody className="divide-y divide-slate-100">
|
||||
{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) => {
|
||||
const val = row[col.id];
|
||||
let displayVal = String(val ?? '-');
|
||||
|
||||
@ -116,9 +116,9 @@ export function OrderDetail({ instanceId }: WiredDetailViewProps) {
|
||||
const totalKgs = extract('total_kgs_3', remainingData) || 0;
|
||||
|
||||
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 */}
|
||||
<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 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>
|
||||
@ -143,19 +143,19 @@ export function OrderDetail({ instanceId }: WiredDetailViewProps) {
|
||||
|
||||
{/* 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-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">
|
||||
<Package size={14} className="text-emerald-500" /> Total Bags
|
||||
</div>
|
||||
<div className="text-2xl font-bold text-slate-900">{String(totalBags)}</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">
|
||||
<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-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">
|
||||
<List size={14} className="text-slate-500" /> Line Items
|
||||
</div>
|
||||
@ -166,7 +166,7 @@ export function OrderDetail({ instanceId }: WiredDetailViewProps) {
|
||||
{/* Bottom Section */}
|
||||
<div className="flex flex-col lg:flex-row gap-4">
|
||||
{/* 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">
|
||||
<Package size={14} className="text-slate-500" />
|
||||
<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 */}
|
||||
<div className="flex-1 flex flex-col gap-4 min-w-[280px]">
|
||||
{/* 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">
|
||||
<User size={14} className="text-slate-500" /> Sales Officer
|
||||
</div>
|
||||
@ -253,7 +253,7 @@ export function OrderDetail({ instanceId }: WiredDetailViewProps) {
|
||||
</div>
|
||||
|
||||
{/* 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">
|
||||
<Hash size={14} className="text-slate-500" /> Order Meta
|
||||
</div>
|
||||
|
||||
@ -22,7 +22,7 @@ export interface PotentialMiningTableProps {
|
||||
|
||||
export function PotentialMiningTable({ data, onEdit, onDelete, hideOrderDetails }: PotentialMiningTableProps) {
|
||||
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">
|
||||
<thead className="bg-slate-100 border-b border-slate-200 text-[11px] font-bold text-slate-700 uppercase tracking-wider">
|
||||
<tr>
|
||||
@ -46,7 +46,7 @@ export function PotentialMiningTable({ data, onEdit, onDelete, hideOrderDetails
|
||||
const absDiff = Math.abs(difference);
|
||||
|
||||
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">
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="font-normal text-slate-600 text-sm">{item.productName}</span>
|
||||
|
||||
@ -183,7 +183,7 @@ export function StoreDetail({ instanceId, onBack, onEdit }: StoreDetailProps) {
|
||||
</div>
|
||||
|
||||
{/* 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 */}
|
||||
{imageUrl ? (
|
||||
<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 */}
|
||||
<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" />
|
||||
<h3 className="text-xs font-bold text-slate-500 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-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="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" />
|
||||
@ -296,11 +296,11 @@ 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-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" />
|
||||
<h3 className="text-xs font-bold text-slate-500 uppercase tracking-wider m-0">Route Assignment</h3>
|
||||
</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="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>
|
||||
@ -321,11 +321,11 @@ export function StoreDetail({ instanceId, onBack, onEdit }: StoreDetailProps) {
|
||||
{/* Order Potential Card */}
|
||||
{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-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" />
|
||||
<h3 className="text-xs font-bold text-slate-500 uppercase tracking-wider m-0">Order Potential</h3>
|
||||
</div>
|
||||
<div className="bg-white">
|
||||
<div className="bg-[var(--tiles-card-bg)]">
|
||||
<table className="w-full text-sm text-left">
|
||||
<thead className="bg-slate-50 border-b border-slate-100">
|
||||
<tr>
|
||||
@ -355,18 +355,18 @@ 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-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" />
|
||||
<h3 className="text-xs font-bold text-slate-500 uppercase tracking-wider m-0">Distributor</h3>
|
||||
</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="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="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-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" />
|
||||
</div>
|
||||
<div>
|
||||
@ -375,7 +375,7 @@ export function StoreDetail({ instanceId, onBack, onEdit }: StoreDetailProps) {
|
||||
</div>
|
||||
</div>
|
||||
<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" />
|
||||
</div>
|
||||
<div>
|
||||
@ -395,7 +395,7 @@ 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-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" />
|
||||
<h3 className="text-xs font-bold text-slate-500 uppercase tracking-wider m-0">Location</h3>
|
||||
</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`}
|
||||
></iframe>
|
||||
<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')}
|
||||
>
|
||||
<Navigation2 size={16} className="text-slate-700" />
|
||||
@ -426,7 +426,7 @@ export function StoreDetail({ instanceId, onBack, onEdit }: StoreDetailProps) {
|
||||
)}
|
||||
</div>
|
||||
{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.
|
||||
</div>
|
||||
)}
|
||||
@ -434,11 +434,11 @@ 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-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" />
|
||||
<h3 className="text-xs font-bold text-slate-500 uppercase tracking-wider m-0">Meta</h3>
|
||||
</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">
|
||||
<span className="text-xs text-slate-500">Store Code</span>
|
||||
<span className="text-xs font-bold text-slate-900">{String(storeCode)}</span>
|
||||
|
||||
@ -296,7 +296,7 @@ export function OrderGrid({
|
||||
const displayTotalKgs = totalKgsValue !== undefined ? totalKgsValue : calculatedKgs;
|
||||
|
||||
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">
|
||||
<p className="text-sm font-bold text-slate-700 uppercase tracking-wide">
|
||||
{label || 'Order details'}
|
||||
|
||||
@ -73,7 +73,7 @@ export function PotentialMiningGrid({
|
||||
}, [rows, columns, onChange]);
|
||||
|
||||
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">
|
||||
<p className="text-sm font-bold text-slate-700 uppercase tracking-wide">
|
||||
{label || 'Potential Mining'}
|
||||
@ -172,6 +172,7 @@ export function PotentialMiningGrid({
|
||||
disabled={isReadOnly}
|
||||
value={String(row[fieldId] ?? '')}
|
||||
onChange={(e) => updateRowField(rowIdx, fieldId, e.target.value)}
|
||||
placeholder={col.name ? `Enter ${col.name.toLowerCase()}...` : 'Enter details...'}
|
||||
className="w-full"
|
||||
/>
|
||||
);
|
||||
|
||||
@ -139,7 +139,7 @@ export function StorePotentialGrid({
|
||||
}, [rows, columns, onChange]);
|
||||
|
||||
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">
|
||||
<p className="text-sm font-bold text-slate-700 uppercase tracking-wide">
|
||||
{label || 'Store Potential'}
|
||||
|
||||
@ -93,6 +93,16 @@ export function AnalyticsChart({ data }: AnalyticsChartProps) {
|
||||
const renderChartContent = () => {
|
||||
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" />
|
||||
<XAxis
|
||||
dataKey="dimension"
|
||||
@ -142,12 +152,13 @@ export function AnalyticsChart({ data }: AnalyticsChartProps) {
|
||||
/>
|
||||
);
|
||||
} else {
|
||||
const barFill = i === 0 ? `url(#barGradient-${idx}-0)` : (i === 1 ? `url(#barGradient-${idx}-1)` : color);
|
||||
return (
|
||||
<Bar
|
||||
key={key}
|
||||
dataKey={key}
|
||||
name={hasSeries ? key : "Value"}
|
||||
fill={color}
|
||||
fill={barFill}
|
||||
radius={[4, 4, 0, 0]}
|
||||
maxBarSize={40}
|
||||
/>
|
||||
@ -159,7 +170,7 @@ export function AnalyticsChart({ data }: AnalyticsChartProps) {
|
||||
};
|
||||
|
||||
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">
|
||||
{chartType === 5 ? (
|
||||
<div className="w-full h-full overflow-y-auto pr-2 scrollbar-slim">
|
||||
|
||||
@ -74,14 +74,14 @@ export function Pagination({ page, pageSize, total, onPage, onPageSizeChange }:
|
||||
</div>
|
||||
|
||||
<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} />
|
||||
Prev
|
||||
</Button>
|
||||
<span className="px-1 text-xs font-medium text-muted nums">
|
||||
{safePage} / {totalPages}
|
||||
</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
|
||||
<ChevronRight size={15} />
|
||||
</Button>
|
||||
|
||||
@ -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";
|
||||
|
||||
export interface StatsTilesProps {
|
||||
@ -49,12 +49,11 @@ export function StatsTiles({ tiles }: StatsTilesProps) {
|
||||
return (
|
||||
<div
|
||||
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">
|
||||
<span className={`text-sm font-bold truncate pr-2 ${
|
||||
isDanger ? 'text-red-600' : 'text-gray-600'
|
||||
}`}>
|
||||
<span className={`text-sm font-bold truncate pr-2 ${isDanger ? 'text-red-600' : 'text-[var(--tiles-font-color)]'
|
||||
}`}>
|
||||
{displayLabel}
|
||||
</span>
|
||||
<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>
|
||||
|
||||
<p className={`text-[26px] font-extrabold leading-none tabular-nums mt-auto ${
|
||||
isDanger ? 'text-red-600' : 'text-[#0058be]'
|
||||
}`}>
|
||||
<p className={`text-[26px] font-extrabold leading-none tabular-nums mt-auto ${isDanger ? 'text-red-600' : 'text-[var(--tiles-font-color)]'
|
||||
}`}>
|
||||
{(tile.value as React.ReactNode) ?? "-"}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@ -161,6 +161,7 @@ export function RecordView({
|
||||
title={title}
|
||||
action={headerActions}
|
||||
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 gap-3">
|
||||
@ -241,13 +242,13 @@ export function RecordView({
|
||||
{fields.map((f) => (
|
||||
<th
|
||||
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}
|
||||
</th>
|
||||
))}
|
||||
{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
|
||||
</th>
|
||||
)}
|
||||
|
||||
@ -29,12 +29,12 @@ export function ConsoleLayout() {
|
||||
if (!authed) return <Navigate to="/login" replace />;
|
||||
|
||||
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)' }}>
|
||||
<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>
|
||||
</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) => {
|
||||
return (
|
||||
<NavLink
|
||||
@ -61,7 +61,7 @@ export function ConsoleLayout() {
|
||||
<ChevronDown size={14} className="ml-0.5 opacity-70" />
|
||||
</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]) => (
|
||||
<NavLink
|
||||
key={key}
|
||||
@ -85,7 +85,7 @@ export function ConsoleLayout() {
|
||||
>
|
||||
{user?.name ? user.name.charAt(0).toUpperCase() : 'S'}
|
||||
</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="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>
|
||||
|
||||
@ -3,7 +3,7 @@ import { Card, Input, Select } from '../components/reusable';
|
||||
import { Button } from '../components/buttons/Button';
|
||||
import {
|
||||
SALES_REPORT_ROUTES,
|
||||
SALES_REPORT_DISTRIBUTORS,
|
||||
ROUTE_WISE_DISTRIBUTORS,
|
||||
SALES_REPORT_SO_NAMES
|
||||
} from '../api/config';
|
||||
import { Download, Printer } from 'lucide-react';
|
||||
@ -161,14 +161,17 @@ export function DailySalesReportPage() {
|
||||
<Select
|
||||
label="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 }))]}
|
||||
/>
|
||||
<Select
|
||||
label="Distributor"
|
||||
value={distributor}
|
||||
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
|
||||
label="SO Name"
|
||||
|
||||
@ -191,8 +191,8 @@
|
||||
/* root variable */
|
||||
|
||||
:root {
|
||||
--primary-color: #1d4ed8;
|
||||
--secondary-color: #f9fafb;
|
||||
--primary-color: #1F4D36;
|
||||
--secondary-color: #fdf4e4de;
|
||||
--font-color: #10182b;
|
||||
--font-family: "IBM Plex Sans", serif;
|
||||
--light-font-color: #667085;
|
||||
@ -209,7 +209,7 @@
|
||||
|
||||
|
||||
/* 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-active: #1b84ff;
|
||||
--nav-item-active-bg: #c0d4ed45;
|
||||
@ -229,22 +229,22 @@
|
||||
--nav-left-separator-line: #484848;
|
||||
|
||||
/* tiles card */
|
||||
--tiles-card-bg: #fff;
|
||||
--tiles-card-border: #e5e7eb;
|
||||
--tiles-font-color: #10182b;
|
||||
--tiles-card-bg: #FFFBF4;
|
||||
--tiles-card-border: #e5e7eb00;
|
||||
--tiles-font-color: #1F4D36;
|
||||
--tiles-font-size: 16px;
|
||||
--tiles-count-size: 20px;
|
||||
|
||||
/* button */
|
||||
--z-btn-primary-bg: #0058be;
|
||||
--z-btn-primary-bg: #1F4D36;
|
||||
--z-btn-primary-color: #fff;
|
||||
--primary-btn-active: #0059bed8;
|
||||
--primary-btn-active: #1d613f;
|
||||
--primary-btn-activeClr: #fff;
|
||||
--z-btn-secondary-bg: #f4f4f4;
|
||||
--z-btn-secondary-color: #10182b;
|
||||
--secondary-btn-active-bg: #eaeaea;
|
||||
--z-btn-outline-color: #0058be;
|
||||
--z-btn-outline-border: #0058be;
|
||||
--z-btn-outline-color: #1F4D36;
|
||||
--z-btn-outline-border: #1F4D36;
|
||||
|
||||
--button-height: 36px;
|
||||
--z-btn-sm-height: 32px;
|
||||
@ -252,7 +252,7 @@
|
||||
--z-btn-lg-height: 48px;
|
||||
|
||||
/* blocks */
|
||||
--block-bg: #fff;
|
||||
--block-bg: var(--tiles-card-bg);
|
||||
--block-padding: 20px;
|
||||
--block-radius: 20px;
|
||||
--block-border: #e5e7eb;
|
||||
@ -275,8 +275,8 @@
|
||||
--small-icon: 24px;
|
||||
|
||||
/* record view table color */
|
||||
--rv-table-bg: #fff;
|
||||
--rv-table-header: #f9fafb;
|
||||
--rv-table-bg: #FFFBF4;
|
||||
--rv-table-header: #FFFBF4;
|
||||
--table-row-bg-select: #fafafa;
|
||||
--table-tr-active: #f9fafb;
|
||||
--rv-table-height: 40px;
|
||||
@ -285,7 +285,7 @@
|
||||
|
||||
/* form input tags */
|
||||
--form-input-height: 40px;
|
||||
--form-bg: #fff;
|
||||
--form-bg: var(--tiles-card-bg);
|
||||
--form-input-bg: #fff;
|
||||
--inputBox-border: ##e5e7eb;
|
||||
--inputBox-border-active: #a2acbf;
|
||||
@ -353,14 +353,15 @@
|
||||
--z-btn-height: 44px;
|
||||
|
||||
/* block and section styles */
|
||||
--z-block-bg: #fff;
|
||||
--z-block-bg: var(--tiles-card-bg);
|
||||
--z-block-radius: 8px;
|
||||
--z-block-border: #e5e7eb;
|
||||
--z-block-shadow: box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
||||
|
||||
/* record view table */
|
||||
--z-rv-table-header: #fff;
|
||||
--z-rv-td-padding: 8px 20px;
|
||||
--z-rv-table-bg: var(--rv-table-bg);
|
||||
--z-rv-table-header: var(--rv-table-header);
|
||||
--z-rv-td-padding: var(--table-td-padding);
|
||||
--z-rv-table-border: #e5e7eb;
|
||||
--z-rv-td-height: 40px;
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user