Skip to content

Commit b861f6f

Browse files
Rituparna158Rituparna158
committed
fix(toggle-theme): fixed dark mode UI issues, including table/theme contrast problems
1 parent 9ca96da commit b861f6f

File tree

6 files changed

+414
-414
lines changed

6 files changed

+414
-414
lines changed

‎apps/web-app/src/features/dashboard/AdminDashboard.tsx‎

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import AppointmentTrendChart from "./components/AppointmentTrendChart"
99
import AppointmentStatusChart from "./components/AppointmentStatusChart"
1010
import DashboardTable from "./components/DashboardTable"
1111
import ExportButton from "./components/ExportButton"
12+
import type { RangeType } from "@/types/dashboard.types"
1213

1314
export default function AdminDashboard() {
1415

@@ -17,11 +18,6 @@ export default function AdminDashboard() {
1718
status,
1819
trend,
1920
range,
20-
page,
21-
sortBy,
22-
sortOrder,
23-
from,
24-
to,
2521
setRange,
2622
fetchAdminDashboard
2723
} = useDashboardStore()
@@ -30,7 +26,7 @@ export default function AdminDashboard() {
3026

3127
fetchAdminDashboard()
3228

33-
}, [ range, page , sortBy , sortOrder , from , to])
29+
}, [ fetchAdminDashboard,range])
3430

3531
return (
3632

@@ -50,8 +46,8 @@ export default function AdminDashboard() {
5046

5147
<select
5248
value={range}
53-
onChange={(e) => setRange(e.target.value as any)}
54-
className="border rounded px-3 py-1 text-sm"
49+
onChange={(e) => setRange(e.target.value as RangeType)}
50+
className="h-10 rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground shadow-sm outline-none focus-:ring-2 focus:ring-ring"
5551
>
5652
<option value="today">Today</option>
5753
<option value="week">Weekly</option>

‎apps/web-app/src/features/dashboard/DoctorDashboard.tsx‎

Lines changed: 88 additions & 103 deletions
Original file line numberDiff line numberDiff line change
@@ -14,142 +14,138 @@ import { TableFilters } from "@/features/shared/table/components/TableFilters"
1414
import StatusBadge from "@/features/shared/components/StatusBadge"
1515
import TableSkeleton from "@/features/shared/components/TableSkeleton"
1616

17-
import type { DoctorUpcomingAppointment } from "../../types/dashboard.types"
17+
import type {
18+
DoctorUpcomingAppointment,
19+
RangeType,
20+
} from "../../types/dashboard.types"
21+
1822
import DoctorCompletionChart from "./components/DoctorCompletionChart"
1923
import DoctorPatientTypeChart from "./components/DoctorPatientTypeChart"
2024
import DoctorWorkloadTrendChart from "./components/DoctorWorkloadTrendChart"
2125

2226
export default function DoctorDashboard() {
27+
const doctorDashboard = useDashboardStore((state) => state.doctorDashboard)
28+
const doctorTrend = useDashboardStore((state) => state.doctorTrend)
29+
const completionRate = useDashboardStore((state) => state.completionRate)
30+
const patientTypes = useDashboardStore((state) => state.patientTypes)
31+
32+
const range = useDashboardStore((state) => state.range)
33+
const page = useDashboardStore((state) => state.page)
34+
const limit = useDashboardStore((state) => state.limit)
35+
const sortBy = useDashboardStore((state) => state.sortBy)
36+
const sortOrder = useDashboardStore((state) => state.sortOrder)
37+
const from = useDashboardStore((state) => state.from)
38+
const to = useDashboardStore((state) => state.to)
39+
40+
const setRange = useDashboardStore((state) => state.setRange)
41+
const setPage = useDashboardStore((state) => state.setPage)
42+
const setSort = useDashboardStore((state) => state.setSort)
43+
const setFrom = useDashboardStore((state) => state.setFrom)
44+
const setTo = useDashboardStore((state) => state.setTo)
45+
46+
const fetchDoctorDashboard = useDashboardStore(
47+
(state) => state.fetchDoctorDashboard
48+
)
49+
const fetchDoctorCharts = useDashboardStore((state) => state.fetchDoctorCharts)
2350

24-
const {
25-
doctorDashboard,
26-
doctorTrend,
27-
completionRate,
28-
patientTypes,
51+
useEffect(() => {
52+
fetchDoctorDashboard()
53+
fetchDoctorCharts()
54+
}, [
55+
fetchDoctorDashboard,
56+
fetchDoctorCharts,
2957
range,
3058
page,
31-
limit,
3259
sortBy,
3360
sortOrder,
3461
from,
3562
to,
36-
37-
setRange,
38-
39-
setPage,
40-
setSort,
41-
setFrom,
42-
setTo,
43-
44-
fetchDoctorDashboard,
45-
fetchDoctorCharts
46-
} = useDashboardStore()
47-
48-
useEffect(() => {
49-
50-
fetchDoctorDashboard(),
51-
fetchDoctorCharts()
52-
53-
}, [ range, page , sortBy , sortOrder , from , to])
63+
])
5464

5565
const counters = doctorDashboard?.counters
56-
5766
const rows = doctorDashboard?.upcoming ?? []
5867

5968
const columns = [
60-
6169
{
6270
key: "patientName",
6371
header: "Patient",
6472
sortable: true,
65-
render: (row: DoctorUpcomingAppointment) =>
66-
row.patientName
73+
render: (row: DoctorUpcomingAppointment) => row.patientName,
6774
},
68-
6975
{
7076
key: "slotDate",
7177
header: "Date",
7278
sortable: true,
7379
render: (row: DoctorUpcomingAppointment) =>
74-
new Date(row.slotDate).toLocaleDateString()
80+
new Date(row.slotDate).toLocaleDateString(),
7581
},
76-
7782
{
7883
key: "startTime",
7984
header: "Time",
8085
sortable: true,
81-
render: (row: DoctorUpcomingAppointment) =>
82-
row.startTime
86+
render: (row: DoctorUpcomingAppointment) => row.startTime,
8387
},
84-
8588
{
8689
key: "status",
8790
header: "Status",
8891
sortable: true,
89-
render: (row: DoctorUpcomingAppointment) =>
90-
<StatusBadge status={row.status}/>
91-
}
92-
92+
render: (row: DoctorUpcomingAppointment) => (
93+
<StatusBadge status={row.status} />
94+
),
95+
},
9396
]
9497

9598
return (
96-
9799
<DashboardLayout>
98-
99100
<div className="space-y-8 max-w-7xl mx-auto">
100-
101-
<div className="flex items-center justify-between">
102-
<div>
103-
<h1 className="text-xl font-semibold">Doctor Dashboard</h1>
104-
<p className="text-sm text-muted-foreground">
105-
Overview of appointments and schedule
106-
</p>
101+
<div className="flex items-center justify-between">
102+
<div>
103+
<h1 className="text-xl font-semibold">Doctor Dashboard</h1>
104+
<p className="text-sm text-muted-foreground">
105+
Overview of appointments and schedule
106+
</p>
107+
</div>
108+
109+
<div className="flex items-center gap-3">
110+
<select
111+
value={range}
112+
onChange={(e) => setRange(e.target.value as RangeType)}
113+
className="h-10 rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground shadow-sm outline-none focus-:ring-2 focus:ring-ring"
114+
>
115+
<option value="today">Today</option>
116+
<option value="week">Weekly</option>
117+
<option value="month">Monthly</option>
118+
<option value="year">Yearly</option>
119+
</select>
120+
121+
<ExportButton />
122+
</div>
107123
</div>
108-
109-
<div className="flex items-center gap-3">
110-
<select
111-
value={range}
112-
onChange={(e) => setRange(e.target.value as any)}
113-
className="border rounded px-3 py-1 text-sm"
114-
>
115-
<option value="today">Today</option>
116-
<option value="week">Weekly</option>
117-
<option value="month">Monthly</option>
118-
<option value="year">Yearly</option>
119-
</select>
120-
121-
<ExportButton />
124+
125+
{counters && <DoctorDashboardCounters data={counters} />}
126+
127+
<div className="doctor-dashboard">
128+
<div className="h-[300px]">
129+
<DoctorWorkloadTrendChart data={doctorTrend} />
130+
</div>
131+
</div>
132+
133+
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
134+
{completionRate && (
135+
<div className="doctor-dashboard">
136+
<DoctorCompletionChart data={completionRate} />
137+
</div>
138+
)}
139+
140+
{patientTypes && (
141+
<div className="doctor-dashboard">
142+
<DoctorPatientTypeChart data={patientTypes} />
143+
</div>
144+
)}
122145
</div>
123-
</div>
124-
125-
{counters && <DoctorDashboardCounters data={counters} />}
126-
127-
<div className="doctor-dashboard">
128-
<div className="h-[300px]">
129-
<DoctorWorkloadTrendChart data={doctorTrend}/>
130-
</div>
131-
</div>
132-
133-
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
134-
135-
{completionRate && (
136-
<div className="doctor-dashboard">
137-
<DoctorCompletionChart data={completionRate}/>
138-
</div>
139-
)}
140-
141-
{patientTypes && (
142-
<div className="doctor-dashboard">
143-
<DoctorPatientTypeChart data={patientTypes}/>
144-
</div>
145-
)}
146-
147-
</div>
148-
<div className="space-y-4">
149146

150-
<h3 className="font-semibold">
151-
Upcoming Appointments
152-
</h3>
147+
<div className="space-y-4">
148+
<h3 className="font-semibold">Upcoming Appointments</h3>
153149

154150
<TableFilters
155151
fromDate={from}
@@ -159,11 +155,8 @@ export default function DoctorDashboard() {
159155
/>
160156

161157
{rows.length === 0 ? (
162-
163-
<TableSkeleton/>
164-
158+
<TableSkeleton />
165159
) : (
166-
167160
<DataTable
168161
data={rows}
169162
columns={columns}
@@ -173,7 +166,6 @@ export default function DoctorDashboard() {
173166
sortOrder={sortOrder}
174167
onSort={setSort}
175168
/>
176-
177169
)}
178170

179171
<TablePagination
@@ -182,15 +174,8 @@ export default function DoctorDashboard() {
182174
limit={limit}
183175
onPageChange={setPage}
184176
/>
185-
186177
</div>
187-
188178
</div>
189-
190179
</DashboardLayout>
191-
192180
)
193-
194181
}
195-
196-

‎apps/web-app/src/features/dashboard/PatientDashboard.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import { TableFilters } from "@/features/shared/table/components/TableFilters"
1313

1414
import PatientDashboardCounters from "./components/PatientDashboardCounter"
1515

16-
import type { PatientUpcomingAppointment } from "../../types/dashboard.types"
16+
import type { PatientUpcomingAppointment, RangeType } from "../../types/dashboard.types"
1717

1818

1919
export default function PatientDashboard() {
@@ -42,7 +42,7 @@ export default function PatientDashboard() {
4242

4343
fetchPatientDashboard()
4444

45-
}, [ range, page , sortBy , sortOrder , from , to])
45+
}, [fetchPatientDashboard, range, page , sortBy , sortOrder , from , to])
4646

4747

4848
const counters = patientDashboard?.counters
@@ -108,8 +108,8 @@ export default function PatientDashboard() {
108108
</div>
109109
<select
110110
value={range}
111-
onChange={(e) => setRange(e.target.value as any)}
112-
className="border rounded px-3 py-1 text-sm"
111+
onChange={(e) => setRange(e.target.value as RangeType)}
112+
className="h-10 rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground shadow-sm outline-none focus-:ring-2 focus:ring-ring"
113113
>
114114
<option value="today">Today</option>
115115
<option value="week">Weekly</option>

0 commit comments

Comments
 (0)