Use table for case list

Author: MananTank

apps/dashboard/src/@/components/chat/CustomChatContent.tsx

@@ -91,7 +91,7 @@ function CustomChatContentLoggedIn(props: {
           headers: {
             Authorization: `Bearer ${props.authToken}`,
             "Content-Type": "application/json",
-            ...(props.team.id ? { "x-team-id": props.team.id } : {}),
+            "x-team-id": props.team.id,
             ...(props.clientId ? { "x-client-id": props.clientId } : {}),
           },
           method: "POST",
@@ -160,7 +160,7 @@ function CustomChatContentLoggedIn(props: {
           headers: {
             Authorization: `Bearer ${props.authToken}`,
             "Content-Type": "application/json",
-            ...(props.team.id ? { "x-team-id": props.team.id } : {}),
+            "x-team-id": props.team.id,
           },
           method: "POST",
         });

apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/support/_components/case-filters.tsx

@@ -27,7 +27,7 @@ export function SupportCaseFilters(props: {
       <div className="relative flex-1">
         <SearchIcon className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground w-4 h-4" />
         <Input
-          className="pl-9 bg-card"
+          className="pl-9 bg-card rounded-lg"
           onChange={(e) => onSearchChange(e.target.value)}
           placeholder="Search"
           value={searchQuery}

apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/support/_components/case-list.tsx

@@ -6,14 +6,34 @@ import Link from "next/link";
 import { useState } from "react";
 import type { Team } from "@/api/team";
 import { Badge } from "@/components/ui/badge";
-import { useDashboardRouter } from "@/lib/DashboardRouter";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
 import type { SupportTicketListItem } from "../types/tickets";
 import {
   getTicketStatusBadgeVariant,
   getTicketStatusLabel,
 } from "../utils/ticket-status";
 import { SupportCaseFilters } from "./case-filters";
 
+function isTicketOpen(ticket: SupportTicketListItem) {
+  return (
+    ticket.status === "in_progress" ||
+    ticket.status === "needs_response" ||
+    ticket.status === "on_hold"
+  );
+}
+
+function isTicketClosed(ticket: SupportTicketListItem) {
+  return ticket.status === "resolved" || ticket.status === "closed";
+}
+
 export function SupportsCaseList({
   tickets,
   team,
@@ -23,21 +43,17 @@ export function SupportsCaseList({
 }) {
   const [activeTab, setActiveTab] = useState("all");
   const [searchQuery, setSearchQuery] = useState("");
-  const router = useDashboardRouter();
 
   // Filter tickets based on active tab and search query
   const filteredTickets = tickets.filter((ticket) => {
     // Filter by tab
     let matchesTab = true;
     switch (activeTab) {
       case "open":
-        matchesTab =
-          (ticket.status as string) === "in_progress" ||
-          (ticket.status as string) === "needs_response" ||
-          (ticket.status as string) === "on_hold";
+        matchesTab = isTicketOpen(ticket);
         break;
       case "closed":
-        matchesTab = ticket.status === "resolved" || ticket.status === "closed";
+        matchesTab = isTicketClosed(ticket);
         break;
       default:
         matchesTab = true;
@@ -46,7 +62,7 @@ export function SupportsCaseList({
     // Filter by search query
     const matchesSearch =
       searchQuery === "" ||
-      ticket.id.toLowerCase().includes(searchQuery.toLowerCase());
+      ticket.title.toLowerCase().includes(searchQuery.toLowerCase());
 
     return matchesTab && matchesSearch;
   });
@@ -56,28 +72,22 @@ export function SupportsCaseList({
     all: tickets.filter(
       (ticket) =>
         searchQuery === "" ||
-        ticket.id.toLowerCase().includes(searchQuery.toLowerCase()),
+        ticket.title.toLowerCase().includes(searchQuery.toLowerCase()),
     ).length,
     closed: tickets.filter(
       (ticket) =>
-        (ticket.status === "resolved" || ticket.status === "closed") &&
+        isTicketClosed(ticket) &&
         (searchQuery === "" ||
-          ticket.id.toLowerCase().includes(searchQuery.toLowerCase())),
+          ticket.title.toLowerCase().includes(searchQuery.toLowerCase())),
     ).length,
     open: tickets.filter(
       (ticket) =>
-        ((ticket.status as string) === "in_progress" ||
-          (ticket.status as string) === "needs_response" ||
-          (ticket.status as string) === "on_hold") &&
+        isTicketOpen(ticket) &&
         (searchQuery === "" ||
-          ticket.id.toLowerCase().includes(searchQuery.toLowerCase())),
+          ticket.title.toLowerCase().includes(searchQuery.toLowerCase())),
     ).length,
   };
 
-  const _handleSelectCase = (ticketId: string) => {
-    router.push(`/team/${team.slug}/~/support/cases/${ticketId}`);
-  };
-
   return (
     <div className="flex flex-col">
       <SupportCaseFilters
@@ -107,33 +117,46 @@ export function SupportsCaseList({
           </div>
         </div>
       ) : (
-        <div className="border bg-card rounded-lg">
-          {filteredTickets.map((ticket) => (
-            <div
-              className="relative px-4 py-5 border-b last:border-b-0 hover:bg-accent/50"
-              key={ticket.id}
-            >
-              <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
-                <Link
-                  className="text-foreground font-medium break-all flex-1 text-sm before:absolute before:inset-0"
-                  href={`/team/${team.slug}/~/support/cases/${ticket.id}`}
+        <TableContainer>
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>Title</TableHead>
+                <TableHead className="w-[150px]">Status</TableHead>
+                <TableHead className="w-[200px]">Last Updated</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {filteredTickets.map((ticket) => (
+                <TableRow
+                  key={ticket.title}
+                  linkBox
+                  className="hover:bg-accent/50 cursor-pointer"
                 >
-                  {ticket.title}
-                </Link>
-
-                <div className="flex items-center gap-3 justify-between">
-                  <Badge variant={getTicketStatusBadgeVariant(ticket.status)}>
-                    {getTicketStatusLabel(ticket.status)}
-                  </Badge>
-
-                  <div className="text-muted-foreground text-xs">
+                  <TableCell className="py-6">
+                    <Link
+                      className="text-foreground font-medium text-sm before:absolute before:inset-0"
+                      href={`/team/${team.slug}/~/support/cases/${ticket.id}`}
+                    >
+                      {ticket.title}
+                    </Link>
+                  </TableCell>
+                  <TableCell>
+                    <Badge
+                      variant={getTicketStatusBadgeVariant(ticket.status)}
+                      className="text-sm"
+                    >
+                      {getTicketStatusLabel(ticket.status)}
+                    </Badge>
+                  </TableCell>
+                  <TableCell className="text-muted-foreground text-sm">
                     {format(new Date(ticket.updatedAt), "MMM d, yyyy")}
-                  </div>
-                </div>
-              </div>
-            </div>
-          ))}
-        </div>
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </TableContainer>
       )}
     </div>
   );