feat(frontend): generic sortable data table component

[armorbreak001]

Fixes #273

Summary

Built a generic, reusable DataTable component powered by @tanstack/react-table v8 with column sorting, empty state handling, and dark glassmorphism styling.

Changes

• frontend/src/components/ui/DataTable.tsx — New component:
  • Generic type: DataTable<T> works with any Record<string, unknown> data
  • Sorting: Click any column header to toggle asc/desc (uses getSortedRowModel)
  • Empty state: Shows customizable "No data available" message when data is empty
  • Dark theme: Glassmorphism styling matching the app's design system
    • Rounded borders, subtle backgrounds, hover effects
    • Row striping for readability
  • Responsive: Horizontal scroll on overflow (overflow-x-auto)
  • Simple API:

    <DataTable
      data={users}
      columns={[
        { accessorKey: 'name', header: 'Name' },
        { accessorKey: 'role', header: 'Role' },
        { accessorKey: 'email', header: 'Email', cell: (v) => <a>{v}</a> },
      ]}
    />

• frontend/src/components/ui/index.ts — Exports DataTable

Prerequisites

cd frontend && npm install @tanstack/react-table

Verification

1. Render <DataTable data={[]} columns={...} /> → shows empty state message
2. Render with data → table displays with sortable headers
3. Click column header → sorts asc, click again → sorts desc
4. Resize browser → horizontal scroll on small screens
5. Alternating row colors visible when striped={true} (default)