Data Table CRUD Interface

Build a data table CRUD interface for a SaaS admin panel managing "Team Members". The page should include:

1. **Page header** — Title "Team Members" (text-2xl, font-bold) on the left. On the right: a global search input "Search members…" (240px, left-aligned icon), an "Export CSV" ghost button with a download icon, and a "+ Add member" solid blue-600 button.

2. **Filter toolbar** — Below the header, a row of filter controls:
   - "Role: All ▾" dropdown (options: All, Admin, Editor, Viewer, Billing)
   - "Status: All ▾" dropdown (options: All, Active, Inactive, Invited)
   - "Joined: All time ▾" date range dropdown
   - Active filter chips if filters are applied (with × to dismiss)
   - "Showing 1–10 of 38 members" text at right

3. **Data table:** Full-width, white background, 1px zinc-200 borders, alternating zinc-50 row backgrounds.
   - Columns: ☐ (checkbox), Avatar + Name, Email, Role, Status, Joined, Last Active, Actions
   - 8 data rows:
     1. ☑ Alex Rivera | alex@company.co | Admin | 🟢 Active | Jan 5, 2025 | Today | [Edit][⋯]
     2. ☐ Jordan Kim | jordan@company.co | Editor | 🟢 Active | Mar 12, 2025 | Feb 19, 2026 | [Edit][⋯]
     3. ☐ Priya Nair | priya@company.co | Viewer | 🟢 Active | Apr 2, 2025 | Feb 18, 2026 | [Edit][⋯]
     4. ☐ Sam Torres | sam@company.co | Editor | 🟡 Invited | Feb 20, 2026 | Never | [Resend][⋯]
     5. ☐ Chris Obi | chris@company.co | Viewer | 🔴 Inactive | Jun 14, 2025 | Dec 3, 2025 | [Edit][⋯]
     6. ☐ Maya Patel | maya@company.co | Billing | 🟢 Active | Jul 8, 2025 | Feb 20, 2026 | [Edit][⋯]
     7. ☐ Luca Rossi | luca@company.co | Editor | 🟢 Active | Sep 1, 2025 | Feb 21, 2026 | [Edit][⋯]
     8. ☐ Sofia Mendes | sofia@company.co | Viewer | 🟡 Invited | Feb 21, 2026 | Never | [Resend][⋯]

4. **Inline row editing** — Clicking "Edit" on a row turns that row into an inline editable form: name and email fields become text inputs, role becomes a select dropdown, status becomes a toggle. Row shows "Save" (blue-600) and "Cancel" (ghost) buttons at the right action cell. Other rows remain read-only.

5. **Bulk actions bar** — Appears at the top of the table when 1+ checkboxes are selected. Slides down, pushing the table down:
   - "1 member selected" (or "3 members selected")
   - Action buttons: "Change role ▾", "Deactivate", "Remove" (red ghost button), "Export selection"
   - An × to dismiss/deselect all

6. **"Add Member" slide-over panel** — Clicking "+ Add member" opens a 400px right-side drawer (not a modal):
   - "Add Team Member" heading and × close button
   - Fields: Full name, Work email, Role (select), Send invite email (toggle, on by default)
   - "Add member" button (blue-600, full-width) and "Cancel" link

7. **Confirm delete modal** — Clicking "Remove" in bulk actions shows a centered confirmation modal:
   - "Remove 1 member?" heading
   - "Alex Rivera will lose access to all workspaces immediately."
   - "Cancel" ghost button and "Remove member" red button

8. **Pagination controls** — Below the table: "← Previous" | Page 1 of 4 | "Next →". Page number buttons 1–4 with active page highlighted in blue-600.

**Design:** White background, zinc-50 alternating rows, blue-600 primary, red-600 for destructive actions, Inter font. Row hover state: zinc-50 → zinc-100. Column header: zinc-700 font-semibold text-sm uppercase tracking-wide. Status badges use colored pill chips (green/yellow/red). Responsive: on mobile, table scrolls horizontally with frozen first column.

[PAGE HEADER]
  Team Members                 [Search members…]  [↓ Export CSV]  [+ Add member]

[FILTER TOOLBAR]
  [Role: All ▾]  [Status: All ▾]  [Joined: All time ▾]       Showing 1–10 of 38 members

[BULK ACTION BAR — appears on checkbox select]
  ✕  1 member selected    [Change role ▾]  [Deactivate]  [Remove]  [Export selection]

[DATA TABLE]
  ☐   Name / Email                Role      Status      Joined        Last Active    Actions
  ─────────────────────────────────────────────────────────────────────────────────────────────
  ☑  [●] Alex Rivera              Admin     🟢 Active    Jan 5, 2025   Today          [Edit][⋯]
      alex@company.co
  ─────────────────────────────────────────────────────────────────────────────────────────────
  ☐  [●] Jordan Kim               Editor    🟢 Active    Mar 12, 2025  Feb 19, 2026   [Edit][⋯]
      jordan@company.co
  ─────────────────────────────────────────────────────────────────────────────────────────────
  ☐  [●] Priya Nair               Viewer    🟢 Active    Apr 2, 2025   Feb 18, 2026   [Edit][⋯]
      priya@company.co
  ─────────────────────────────────────────────────────────────────────────────────────────────
  ☐  [●] Sam Torres               Editor    🟡 Invited   Feb 20, 2026  Never          [Resend][⋯]
      sam@company.co
  ─────────────────────────────────────────────────────────────────────────────────────────────
  ☐  [●] Chris Obi                Viewer    🔴 Inactive  Jun 14, 2025  Dec 3, 2025    [Edit][⋯]
      chris@company.co (row: zinc-50 faded)
  ─────────────────────────────────────────────────────────────────────────────────────────────
  ☐  [●] Maya Patel               Billing   🟢 Active    Jul 8, 2025   Feb 20, 2026   [Edit][⋯]
      maya@company.co
  ─────────────────────────────────────────────────────────────────────────────────────────────
  ☐  [●] Luca Rossi               Editor    🟢 Active    Sep 1, 2025   Feb 21, 2026   [Edit][⋯]
      luca@company.co
  ─────────────────────────────────────────────────────────────────────────────────────────────
  ☐  [●] Sofia Mendes             Viewer    🟡 Invited   Feb 21, 2026  Never          [Resend][⋯]
      sofia@company.co
  ─────────────────────────────────────────────────────────────────────────────────────────────

  [INLINE EDIT STATE — row 2 while editing]
  ☐  [●] [Jordan Kim_____]  [jordan@company.co___]  [Editor ▾]  Active  Mar 12  Feb 19  [Save][Cancel]

[PAGINATION]
                      [← Previous]  [1]  [2]  [3]  [4]  [Next →]

[ADD MEMBER SLIDE-OVER — right drawer]
  ┌───────────────────────────────────────┐
  │ Add Team Member                  [×] │
  │ ─────────────────────────────────── │
  │ Full name                           │
  │ [________________________________]  │
  │                                     │
  │ Work email                          │
  │ [________________________________]  │
  │                                     │
  │ Role                                │
  │ [Viewer                         ▾]  │
  │                                     │
  │ Send invite email   [● ON]          │
  │                                     │
  │ [Add member                      ]  │
  │         Cancel                      │
  └───────────────────────────────────────┘

[CONFIRM DELETE MODAL]
  ┌───────────────────────────────────┐
  │       Remove 1 member?            │
  │                                   │
  │ Alex Rivera will lose access to   │
  │ all workspaces immediately.       │
  │                                   │
  │  [Cancel]    [Remove member 🔴]   │
  └───────────────────────────────────┘