Skip to content

Commit fc09165

Browse files
MVVYSHNAVMVVYSHNAV
committed
fix: Dashboard layout to group the Global Filter Bar and KPI Cards into a single
1 parent 589f39d commit fc09165

3 files changed

Lines changed: 65 additions & 86 deletions

File tree

‎pos/src/components/dashboard/FilterBar.tsx‎

Lines changed: 57 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -10,95 +10,76 @@ interface Props {
1010
branches: string[];
1111
}
1212

13-
const FilterBar: React.FC<Props> = ({ filters, onFilterChange, branches }) => {
13+
const FilterBar: React.FC<Props & { variant?: 'default' | 'clean' }> = ({
14+
filters,
15+
onFilterChange,
16+
branches,
17+
variant = 'default'
18+
}) => {
1419
const handleDateRangeChange = (value: string) => {
1520
onFilterChange({ ...filters, dateRange: value as any });
1621
};
1722

18-
// const handleGroupByChange = (value: string) => {
19-
// onFilterChange({ ...filters, groupBy: value as any });
20-
// };
23+
const content = (
24+
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
25+
<div className="space-y-1">
26+
<label className="text-xs font-medium text-gray-500 uppercase">Date Range</label>
27+
<Select
28+
value={filters.dateRange}
29+
onValueChange={handleDateRangeChange}
30+
>
31+
<SelectItem value="today">Today</SelectItem>
32+
<SelectItem value="this_week">This Week</SelectItem>
33+
<SelectItem value="this_month">This Month</SelectItem>
34+
<SelectItem value="custom">Custom Range</SelectItem>
35+
</Select>
36+
</div>
2137

22-
// const handlePaymentModeChange = (value: string) => {
23-
// onFilterChange({ ...filters, modeOfPayment: value as any });
24-
// };
38+
{filters.dateRange === 'custom' && (
39+
<div className="grid grid-cols-2 gap-4 col-span-1 md:col-span-2 lg:col-span-2">
40+
<div className="space-y-1">
41+
<label className="text-xs font-medium text-gray-500 uppercase">From</label>
42+
<Input
43+
type="date"
44+
value={filters.customStartDate || ''}
45+
onChange={(e) => onFilterChange({ ...filters, customStartDate: e.target.value })}
46+
/>
47+
</div>
48+
<div className="space-y-1">
49+
<label className="text-xs font-medium text-gray-500 uppercase">To</label>
50+
<Input
51+
type="date"
52+
value={filters.customEndDate || ''}
53+
onChange={(e) => onFilterChange({ ...filters, customEndDate: e.target.value })}
54+
/>
55+
</div>
56+
</div>
57+
)}
2558

26-
return (
27-
<Card className="p-4 bg-white border-gray-200">
28-
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
59+
{branches.length > 0 && (
2960
<div className="space-y-1">
30-
<label className="text-xs font-medium text-gray-500 uppercase">Date Range</label>
61+
<label className="text-xs font-medium text-gray-500 uppercase">Branch</label>
3162
<Select
32-
value={filters.dateRange}
33-
onValueChange={handleDateRangeChange}
63+
value={filters.branch || 'all'}
64+
onValueChange={(val) => onFilterChange({ ...filters, branch: val === 'all' ? undefined : val })}
3465
>
35-
<SelectItem value="today">Today</SelectItem>
36-
<SelectItem value="this_week">This Week</SelectItem>
37-
<SelectItem value="this_month">This Month</SelectItem>
38-
<SelectItem value="custom">Custom Range</SelectItem>
66+
<SelectItem value="all">All Branches</SelectItem>
67+
{branches.map(branch => (
68+
<SelectItem key={branch} value={branch}>{branch}</SelectItem>
69+
))}
3970
</Select>
4071
</div>
72+
)}
73+
</div>
74+
);
4175

42-
{filters.dateRange === 'custom' && (
43-
<div className="grid grid-cols-2 gap-4 col-span-1 md:col-span-2 lg:col-span-2">
44-
<div className="space-y-1">
45-
<label className="text-xs font-medium text-gray-500 uppercase">From</label>
46-
<Input
47-
type="date"
48-
value={filters.customStartDate || ''}
49-
onChange={(e) => onFilterChange({ ...filters, customStartDate: e.target.value })}
50-
/>
51-
</div>
52-
<div className="space-y-1">
53-
<label className="text-xs font-medium text-gray-500 uppercase">To</label>
54-
<Input
55-
type="date"
56-
value={filters.customEndDate || ''}
57-
onChange={(e) => onFilterChange({ ...filters, customEndDate: e.target.value })}
58-
/>
59-
</div>
60-
</div>
61-
)}
62-
{/*
63-
<div className="space-y-1">
64-
<label className="text-xs font-medium text-gray-500 uppercase">Group By</label>
65-
<Select
66-
value={filters.groupBy}
67-
onValueChange={handleGroupByChange}
68-
>
69-
<SelectItem value="daily">Daily</SelectItem>
70-
<SelectItem value="weekly">Weekly</SelectItem>
71-
<SelectItem value="monthly">Monthly</SelectItem>
72-
</Select>
73-
</div> */}
74-
{/*
75-
<div className="space-y-1">
76-
<label className="text-xs font-medium text-gray-500 uppercase">Payment Mode</label>
77-
<Select
78-
value={filters.modeOfPayment}
79-
onValueChange={handlePaymentModeChange}
80-
>
81-
<SelectItem value="All">All Payments</SelectItem>
82-
<SelectItem value="Cash">Cash Only</SelectItem>
83-
<SelectItem value="Others">Others</SelectItem>
84-
</Select>
85-
</div> */}
76+
if (variant === 'clean') {
77+
return content;
78+
}
8679

87-
{branches.length > 0 && (
88-
<div className="space-y-1">
89-
<label className="text-xs font-medium text-gray-500 uppercase">Branch</label>
90-
<Select
91-
value={filters.branch || 'all'}
92-
onValueChange={(val) => onFilterChange({ ...filters, branch: val === 'all' ? undefined : val })}
93-
>
94-
<SelectItem value="all">All Branches</SelectItem>
95-
{branches.map(branch => (
96-
<SelectItem key={branch} value={branch}>{branch}</SelectItem>
97-
))}
98-
</Select>
99-
</div>
100-
)}
101-
</div>
80+
return (
81+
<Card className="p-4 bg-white border-gray-200">
82+
{content}
10283
</Card>
10384
);
10485
};

‎pos/src/components/dashboard/charts/ChartCardHeader.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -25,17 +25,17 @@ const ChartCardHeader: React.FC<Props> = ({
2525
<CardHeader className="p-0 mb-6 flex flex-col space-y-4">
2626
<div className="flex flex-row items-center justify-between w-full">
2727
<CardTitle className="text-base font-semibold text-gray-900">{title}</CardTitle>
28-
{/* <div className="w-36">
28+
<div className="w-36">
2929
<Select value={currentFilter} onValueChange={onFilterChange}>
3030
<SelectItem value="today">Today</SelectItem>
3131
<SelectItem value="this_week">This Week</SelectItem>
3232
<SelectItem value="this_month">This Month</SelectItem>
3333
<SelectItem value="custom">Custom Range</SelectItem>
3434
</Select>
35-
</div> */}
35+
</div>
3636
</div>
3737

38-
{/* {currentFilter === 'custom' && onCustomDateChange && (
38+
{currentFilter === 'custom' && onCustomDateChange && (
3939
<div className="flex flex-row items-center gap-2 w-full animate-in fade-in slide-in-from-top-2 duration-200">
4040
<div className="flex-1">
4141
<Input
@@ -55,7 +55,7 @@ const ChartCardHeader: React.FC<Props> = ({
5555
/>
5656
</div>
5757
</div>
58-
)} */}
58+
)}
5959
</CardHeader>
6060
);
6161
};

‎pos/src/pages/Dashboard.tsx‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -75,17 +75,15 @@ const Dashboard = () => {
7575
<h1 className="text-2xl font-bold text-gray-900">Cashier Dashboard</h1>
7676
</div>
7777

78-
{/* Filter Section */}
79-
<div className="mb-8">
78+
{/* KPI & Filter Section Container */}
79+
<div className="mb-8 bg-white p-6 rounded-xl border border-gray-200 shadow-sm space-y-6">
8080
<FilterBar
8181
filters={filters}
8282
onFilterChange={setFilters}
8383
branches={[]}
84+
variant="clean"
8485
/>
85-
</div>
86-
87-
{/* KPI Section */}
88-
<div className="mb-8">
86+
<div className="border-t border-gray-100 pt-6"></div>
8987
<KpiCards data={reportData} loading={loading} />
9088
</div>
9189

0 commit comments

Comments
 (0)