alla-tms/docs/announcement-list-table-redesign.md

Announcement List Table Redesign

Existing Structure Review

• Reused the existing announcements feature and kept the same route-handler, React Query, permission, and workflow stack.
• Reused the shared table stack:
  • DataTable
  • useDataTable
  • DataTableColumnHeader
  • DataTableFacetedFilter
  • DataTableViewOptions
• Reused the current announcement state transitions, pin/unpin endpoints, audit logging, and pagination flow.
• Replaced only the presentation layer of the list page from cards to an enterprise-style data table.

Files Changed

• src/features/announcements/api/types.ts
• src/features/announcements/api/service.ts
• src/features/announcements/components/announcements-listing.tsx
• src/features/announcements/components/announcements-page.tsx
• src/features/announcements/components/announcement-columns.tsx
• src/features/announcements/components/announcement-toolbar.tsx
• src/features/announcements/components/announcement-action-menu.tsx
• src/features/announcements/server/announcement-data.ts
• src/app/api/announcements/route.ts

UI Before / After

• Before: announcement rows were rendered as stacked cards with inline action buttons.
• After: the page uses a structured data table with fixed columns, sortable headers, row selection, and a per-row dropdown action menu.
• Search and filter controls were kept but moved into a table-friendly toolbar layout.
• Pinned status is now visible in a dedicated pin column instead of only inside the card header.

Table Columns

• Selection checkbox
• Pin indicator
• Announcement title with content preview
• Status badge
• Published date
• End date
• Creator
• Attachment
• Action menu

Action Menu

• Replaced inline buttons with a dropdown menu per row.
• Menu entries still depend on the same permission and workflow checks:
  • View
  • Edit
  • Submit
  • Approve
  • Return
  • Reject
  • Publish
  • Pin / Unpin
  • Archive
  • Delete
• Review and delete actions still reuse the existing dialogs.

Responsive Result

• The toolbar stacks vertically on smaller widths and expands horizontally on larger screens.
• The table stays inside the shared horizontal scroll container instead of overflowing the page.
• The actions column remains pinned to the right for easier management on wide datasets.

Performance Impact

• Kept the existing server pagination and React Query cache path.
• Added sorting as an additive query parameter without changing the response shape.
• Preserved the existing pinned-first ordering behavior, then applied requested table sorting.
• No duplicate fetch path or alternate data source was introduced.

Regression Check

• Search still uses the existing announcement query path.
• Status and pin filters still work through the same list endpoint.
• Pagination behavior is unchanged.
• Workflow actions still call the same mutation and pin/unpin endpoints.
• Permission checks remain enforced both in UI behavior and server routes.

Future Improvements

• Add real bulk actions once the backend supports batch publish/archive/delete/pin operations.
• Add optional mobile card mode if the product team wants a more touch-optimized small-screen presentation.
• Add richer filter dimensions such as creator or year if the backend exposes options for them.