DSM Web App UI Revamp: Modern shadcn/ui Design System and Consistent Page Layouts

A large front-end revamp that modernizes the DSM web application's look and feel by adopting a shadcn/ui-based design system across the dashboard. It introduces a refreshed theme (updated fonts and color variables), a reworked sidebar/header navigation shell, and reusable page layout components, while folding in several usability fixes (mail status errors, user assignment, faster PDF preview). This reached the QA environment for testing.

The application's UI had grown inconsistent across screens, with each page implementing its own headers, sidebars, and styling. This revamp establishes a single, reusable design system so that Inbox, Batches, Documents, Admin Hub, and Resolution Center pages share consistent navigation, spacing, typography, and action patterns. It also addresses specific pain points found along the way, including PDF preview speed and error feedback on mail status updates.

Users get a cleaner, more consistent interface: a unified collapsible sidebar with tooltips, standardized page headers with titles/subtitles and primary action buttons (e.g. Add/Upload), and document-type filter sidebars on the Documents and Batch Documents pages. Admin Hub tabs (Document Types, Folders, Organization, Rules) now share a common layout with permission-gated action buttons. Mail/document file previews favor a Filestack-hosted viewer URL for faster rendering, and error messages on mail status updates are clearer. This is primarily a visual and structural overhaul rather than a change to core business logic.

• Adopted shadcn/ui primitives: added ui/sidebar.tsx, ui/tooltip.tsx, ui/separator.tsx, reworked ui/button.tsx and ui/input.tsx, and added a use-mobile.ts hook.
• Refreshed theme in globals.css (updated font families and color variables) and layout.tsx.
• Reworked dashboard chrome: dashboard-layout.tsx now integrates SidebarProvider; app-sidebar.tsx derives the active route via usePathname/useSearchParams instead of a currentPath prop; app-header.tsx updated.
• Added reusable layout components: shared/page-header.tsx, common/page-sidebar.tsx (with tooltips and search), adminhub/AdminPageLayout.tsx, inbox/InboxPageLayout.tsx, and inbox/InboxSummaryCard.tsx.
• Rebuilt the Inbox page (large rewrite) and adopted the new headers/sidebars across Batches, Documents, Admin Hub tabs, and Resolution Center pages, with action buttons gated by PERMISSIONS.
• PDF/preview optimization: introduced a viewer_url (preferring the Filestack URL) plumbed through Mail.queries.ts, mail.type.ts, usePDFViewer.ts, and the PDF viewer components.
• Folded-in fixes: UpdateMailStatusModal bulk/single error handling, user normalization in AssignUserModal/BulkAssignUserModal, and quick-upload requirement logic in MailOverviewDetails. Incorporates prior feature branches (PRs #442 shadcn theme, #443 assign-user fix, #440 quick upload, #439 Filestack PDF rendering).
• Minor housekeeping: login image asset swap (jpg to png), next.config.ts webpack arg cleanup, and CI workflow whitespace tweaks.

This is a broad, cross-cutting UI change touching 70+ files and most major screens, so the main risk is visual regressions or broken layouts/navigation on specific pages or at certain viewport sizes (the new sidebar is responsive). Route-derivation in the sidebar moved to usePathname/useSearchParams, so active-state highlighting and deep links should be re-verified. The PDF viewer now prefers a Filestack viewer_url with a fallback to the original file URL, so preview behavior should be checked when Filestack URLs are absent. Mitigations: it is gated in QA for full regression testing before promotion, and file/preview changes retain fallbacks to the original URL.

• Verify navigation across all dashboard areas: sidebar collapse/expand, tooltips, active-route highlighting, and deep links (including query-param routes).
• Confirm consistent page headers (title/subtitle) and that primary action buttons (Add/Upload) appear and respect role permissions on Batches, Documents, Admin Hub tabs, and Resolution Center.
• Test the Documents and Batch Documents filter sidebars (document-type search/selection) and the rebuilt Inbox page (folder list, summary cards, status handling).
• Open mail/document file previews and confirm PDFs render quickly via the Filestack viewer URL, with correct fallback when only the original file URL exists.
• Re-test mail status updates (bulk and single) for correct success and error messages, and user assignment (single and bulk) modals.
• Visually regression-check key screens at desktop and mobile widths; confirm theme fonts/colors and the login screen render correctly.