Vendor View Files Column Filters, Portal Sidebar Get Help & Account Menu
Executive summary
This QA release adds column-level filtering (Mail Status, Upload Status, Sync Status) to the Vendor portal's View Files modal, and reworks the Admin and Vendor sidebar footers to add a "Get Help" link and move logout into an account menu. It reached the QA environment for testing.
Why this was needed
When reviewing the files inside an upload center, vendors previously had no way to narrow a page of results to a specific delivery, upload, or sync state, making it hard to spot errors or pending items in a busy list. Separately, the portal sidebars showed only a bare "Sign out" action and offered no in-product path to documentation, so users had nowhere to go for help.
Client / user impact
- Vendor users can filter the View Files list by Mail Status, Upload Status, and Sync Status, see active filters as removable badges, and clear them individually or all at once.
- The list shows a "Showing X of Y files on this page" count and a clearer empty-state message when no rows match the chosen filters.
- The file-details button is no longer blocked while a file is syncing, so users can open details at any time.
- Admin and Vendor sidebars now offer a one-click "Get Help" link (opens the Mail app help page in a new tab) and a consolidated account menu containing Log out.
Technical scope
Grounded in the diff (DSM_Frontend PR #777, dev to qa):
- Vendor View Files modal: new
ColumnFilterPopover.tsx(checkbox multi-select popover per column) andAppliedFiltersDisplay.tsx(removable filter badges); newtypes.tsdefiningColumnFilter/FilterOptionand predefined Mail/Upload/Sync status options.ViewFilesModal.tsxaddscolumnFiltersstate and a memoizedfilteredFilesthat filters the current page client-side (backend WebSocket does not yet accept column filter params). Filters reset on modal open. - Removed the
sync_status === "syncing"disabled guard and conditional tooltip on the file-details button; tooltip is now always "View file details". - Sidebars (
AdminSidebar.tsx,VendorSidebar.tsx): replaced the standalone Sign out button with a "Get Help" anchor to${NEXT_PUBLIC_MAIL_APP_URL}/help(new tab); moved Log out into aDropdownMenutriggered from the user profile row. - Settings (
Settings.tsxadmin + vendor): increased menu hover paddingpy-0.5topy-1.5and switched hover classes toaccent/foreground. - Chore: added
tw-animate-css ^1.2.8to admin and vendorpackage.json, imported in eachglobals.css, withpnpm-lock.yamlupdated.
Risk & mitigation
Low-to-moderate, UI-scoped. The column filters are applied only to the current page of data, not the full result set, so a multi-page list can show fewer matches than truly exist; the on-screen "X of Y on this page" wording mitigates confusion. The "Get Help" link depends on NEXT_PUBLIC_MAIL_APP_URL being set per environment; if unset the href would be malformed. Removing the syncing-state guard means details can now be opened mid-sync, which may show transient data. Mitigation: verify env config and exercise the filters across multiple pages during QA.
QA validation focus
- In Vendor View Files, apply each filter (Mail Status, Upload Status, Sync Status), confirm rows narrow correctly, badges appear, and individual + Clear all removal work.
- Confirm the "Showing X of Y files on this page" count and the "No files match the selected filters" empty state.
- Confirm filters reset when the modal is reopened, and that filtering is per current page (test with a multi-page upload center).
- Open file details while a file is syncing and confirm the button is enabled.
- In Admin and Vendor sidebars (collapsed and expanded), click "Get Help" and confirm it opens the Mail app /help in a new tab; open the account menu and confirm Log out works.
- Sanity-check sidebar/Settings hover styling and that sheet/modal animations render with tw-animate-css.