All updates
ProductionQAFrontend

Vendor View Files Column Filters, Portal Sidebar Get Help & Account Menu

PR #777heytulsiprasadFeb 1, 2026 · 08:34 UTC
QAJan 26, 2026
ProductionFeb 1, 2026

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) and AppliedFiltersDisplay.tsx (removable filter badges); new types.ts defining ColumnFilter/FilterOption and predefined Mail/Upload/Sync status options. ViewFilesModal.tsx adds columnFilters state and a memoized filteredFiles that 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 a DropdownMenu triggered from the user profile row.
  • Settings (Settings.tsx admin + vendor): increased menu hover padding py-0.5 to py-1.5 and switched hover classes to accent/foreground.
  • Chore: added tw-animate-css ^1.2.8 to admin and vendor package.json, imported in each globals.css, with pnpm-lock.yaml updated.

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.