enhance supplier dashboard with drill-down KPIs, sortable tables#47
enhance supplier dashboard with drill-down KPIs, sortable tables#47dipenp495 wants to merge 2 commits into
Conversation
|
@dipenp495 Please stop bulk-opening PRs. Are you using an automated tool to do this? If so, please stop and focus your human efforts on a single PR and branch. |
|
@mrysav I’m not using any automated tools. The multiple PRs are coming from my attempt to reconcile changes that were already merged into main but are still appearing in my branch. To address this cleanly, I created a new branch and opened PRs targeting staging and main so the differences can be validated through the pipeline. Once the staging pipeline passes, I will remove the old branch to avoid further noise. |
dipenp495
force-pushed
the
feat-supplier-dashboard
branch
2 times, most recently
from
8c5ac48 to
2bc282a
Compare
|
@dipenp495 Thank you and thanks for the update. Please have one of your teammates do a review on the PR here first and then I'll take a look. |
| onClick={() => onSort(sortKey)} | ||
| className='cursor-pointer select-none px-4 py-2.5 text-xs font-semibold uppercase tracking-wide text-slate-500 transition-colors hover:text-slate-800 dark:text-foreground' |
There was a problem hiding this comment.
sorting wired to onClick on <th> with no tabIndex, no role, and no keyboard handler. Not too big of an issue, but it'll be helpful to have these accessibility options for the users.
| onClick={() => onSort(sortKey)} | ||
| className='cursor-pointer select-none px-4 py-2.5 text-xs font-semibold uppercase tracking-wide text-slate-500 transition-colors hover:text-slate-800 dark:text-muted-foreground dark:hover:text-foreground' |
| return ( | ||
| <div className='rounded-lg border border-slate-200 bg-white p-4 shadow-md transition-all hover:shadow-lg sm:p-6'> | ||
| <div | ||
| onClick={onClick} | ||
| className={`rounded-lg border p-4 shadow-md transition-all sm:p-6 ${ | ||
| onClick ? 'cursor-pointer' : '' | ||
| } ${ | ||
| active | ||
| ? 'border-blue-500 bg-blue-50 ring-2 ring-blue-200 dark:border-blue-400 dark:bg-blue-950 dark:ring-blue-800' | ||
| : 'border-slate-200 bg-white hover:shadow-lg dark:border-border dark:bg-card' | ||
| }`} |
There was a problem hiding this comment.
another accessibility option, again not too big of an issue. It might be nice if enter and space could activate it like a button.
|
(L717-723 and L52-58 in src/app/supplier/_components/OverviewTab.tsx) I'm really debating whether this is really an issue or not (could be a big nitpick). Probably isn't but if the API's |
dipenp495
requested review from
TrickkyRicky,
iamsrijan724,
kierstinhicks,
mrysav and
whao37
- Add tabIndex, onKeyDown (Enter/Space), and aria-sort to SortableHeader in OverviewTab and PickupRequestTable - Restore active/onClick props in KPICard that were dropped in merge, and add role=button + keyboard handler for Enter/Space activation
3 participants
Changed the supplier dashboard to be more interactive and visually consistent with the admin dashboard.
• KPI tiles are now clickable, each opens a detail view with a filtered product table (sortable, searchable) and a color-coded bar chart by food type, plus mini stat cards with sparkline trends
• Restyled the My Products page with new form styling, replaced AG Grid with a custom table, and cleaned up the Copy/Delete modals
• Added full dark mode support across all supplier components using the same CSS theme variables as the admin dashboard so palettes stay in sync
Screenshots below.