feat(tickets): add summary cards above ticket list

src/app/(modules)/ticket/page.tsx

@@ -8,10 +8,14 @@ import type { TicketListItem } from '@/types';
 import { ROUTES } from '@/utils/routes';
 
 import { TicketFilters } from './components/TicketFilters';
+import { TicketSummaryCards } from './components/TicketSummaryCards';
 import { TicketTable } from './components/TicketTable';
 import { useTicketColumns } from './components/TicketColumns';
 import { useTenantTicketTableEvents } from './hooks/useTenantTicketTableEvents';
-import { useTicketsQuery } from './hooks/useTicketQueries';
+import {
+  useTicketsQuery,
+  useTicketSummaryQuery,
+} from './hooks/useTicketQueries';
 
 export default function TicketPage() {
   const router = useRouter();
@@ -26,6 +30,7 @@ export default function TicketPage() {
     limit,
     chainageId: segmentId,
   });
+  const summaryQuery = useTicketSummaryQuery(segmentId);
 
   const columns = useTicketColumns();
   const tickets = ticketsQuery.data?.items ?? [];
@@ -62,6 +67,12 @@ export default function TicketPage() {
         icon={Ticket}
       />
 
+      <TicketSummaryCards
+        summary={summaryQuery.data}
+        isLoading={summaryQuery.isLoading}
+        isError={summaryQuery.isError}
+      />
+
       <TicketTable
         columns={columns}
         tickets={tickets}