All Chats View

Added by Justin Sheehan Justin S.
Column
Done
Notes
Build an Admin “All Chats” Table View with Sorting & User Lookup in Daryle AI

Context
You need an admin-only page at /admin/chats that lets superadmins see every saved chat, sort and search by user (and other columns), and click into any chat to open a full review panel.

Task
Create a Chats Table component and page that:
  1. Data Fetch
     
    • Uses Supabase to select from chats joined to profiles:
       ts
       CopyEdit
       
       
       supabase
  2.  
    •   .from('chats')
  3.  
    •   .select(`
  4.  
    •     id,
  5.  
    •     title,
  6.  
    •     updated_at,
  7.  
    •     jsonb_array_length(messages) AS message_count,
  8.  
    •     mode,
  9.  
    •     profiles(name, email)
  10.  
    •   `)
  11.  
    •   .order('updated_at', { ascending: false });
  12.  

    •  


  14. Table View
     
    • Columns:
       
      • Chat Title (truncate ~40 chars)
    •  
      • User (profiles.name || profiles.email)
    •  
      • Last Updated (formatted)
    •  
      • # Messages
    •  
      • Mode
    •  

    • Sortable by each column (click header to toggle asc/desc)
  16.  
    • Searchable by user name/email and by chat title
  17.  
    • Paginated (e.g. 20 rows per page with “Next”/“Prev”)
  18.  
  19. Row Interaction
     
    • Hover highlight + cursor-pointer
  20.  
    • Click a row to open a ChatViewer drawer/modal showing the full conversation (just like your existing component).
  21.  
  22. UI/UX
     
    • Tailwind-styled table with sticky header
  23.  
    • Clear sort indicators (↑↓) in the header
  24.  
    • A search input above the table to filter rows client-side or via a Supabase ilike query
  25.  
    • Pagination controls at bottom
  26.  
    • ChatViewer occupies right side or slides over
  27.  

Functional Requirements
  • Use React state (or React Query) to manage sort, search, and pagination
  • Only fetch the page of data you need (use .range() for Supabase pagination)
  • Ensure only currentUser.role === "superadmin" can access this page
  • Use your existing ChatViewer to display messages on row click

Constraints
  • Next.js page under pages/admin/chats.tsx
  • Components in components/admin/ChatsTable.tsx + components/admin/ChatViewer.tsx
  • Tailwind CSS only—no additional UI libraries
  • Supabase JS client for data access
  • TypeScript types for ChatWithProfile and paging

Output Files
  1. pages/admin/chats.tsx – page shell, role guard, search/sort state
  2. components/admin/ChatsTable.tsx – table rendering, sorting, pagination, row click
  3. components/admin/ChatViewer.tsx – full chat panel on the right or modal
  4. utils/adminChatsService.ts (optional) – encapsulate Supabase calls