refactor: improve incident management page structure and enhance data fetching logic

src/routes/(manage)/manage/app/incidents/+page.svelte

@@ -2,16 +2,18 @@
   import { Button } from "$lib/components/ui/button/index.js";
   import { Spinner } from "$lib/components/ui/spinner/index.js";
   import { Badge } from "$lib/components/ui/badge/index.js";
+  import * as Card from "$lib/components/ui/card/index.js";
   import * as Select from "$lib/components/ui/select/index.js";
+  import * as Breadcrumb from "$lib/components/ui/breadcrumb/index.js";
   import * as Table from "$lib/components/ui/table/index.js";
   import * as Tooltip from "$lib/components/ui/tooltip/index.js";
   import PlusIcon from "@lucide/svelte/icons/plus";
   import ChevronLeftIcon from "@lucide/svelte/icons/chevron-left";
   import ChevronRightIcon from "@lucide/svelte/icons/chevron-right";
+  import ExternalLinkIcon from "@lucide/svelte/icons/external-link";
   import PencilIcon from "@lucide/svelte/icons/pencil";
   import SirenIcon from "@lucide/svelte/icons/siren";
   import { goto } from "$app/navigation";
-  import { onMount } from "svelte";
   import { format, formatDistanceToNow } from "date-fns";
   import GC from "$lib/global-constants";
   import { resolve } from "$app/paths";
@@ -102,12 +104,12 @@
 
   // Navigate to incident
   function openIncident(id: number) {
-    goto(resolve(`/manage/app/incidents/${id}`));
+    goto(clientResolver(resolve, `/manage/app/incidents/${id}`));
   }
 
   // Create new incident
   function createNewIncident() {
-    goto(resolve("/manage/app/incidents/new"));
+    goto(clientResolver(resolve, "/manage/app/incidents/new"));
   }
 
   // Handle state filter change
@@ -125,7 +127,7 @@
     fetchData();
   }
 
-  onMount(() => {
+  $effect(() => {
     fetchData();
   });
 </script>
@@ -140,7 +142,7 @@
           {stateOptions.find((o) => o.value === stateFilter)?.label || "All States"}
         </Select.Trigger>
         <Select.Content>
-          {#each stateOptions as option (option.value)}
+          {#each stateOptions as option}
             <Select.Item value={option.value}>{option.label}</Select.Item>
           {/each}
         </Select.Content>
@@ -164,7 +166,6 @@
         <Table.Row>
           <Table.Head class="w-16">ID</Table.Head>
           <Table.Head>Title</Table.Head>
-          <Table.Head class="w-40">Started</Table.Head>
           <Table.Head class="w-32">Duration</Table.Head>
           <Table.Head class="w-36">State</Table.Head>
           <Table.Head class="w-40">Affects</Table.Head>
@@ -174,10 +175,10 @@
       <Table.Body>
         {#if incidents.length === 0 && !loading}
           <Table.Row>
-            <Table.Cell colspan={7} class="text-muted-foreground py-8 text-center">No incidents found</Table.Cell>
+            <Table.Cell colspan={6} class="text-muted-foreground py-8 text-center">No incidents found</Table.Cell>
           </Table.Row>
         {:else}
-          {#each incidents as incident (incident.id)}
+          {#each incidents as incident}
             <Table.Row class="hover:bg-muted/50 cursor-pointer" onclick={() => openIncident(incident.id)}>
               <Table.Cell class="font-medium">{incident.id}</Table.Cell>
               <Table.Cell>
@@ -190,11 +191,6 @@
                   </Tooltip.Content>
                 </Tooltip.Root>
               </Table.Cell>
-              <Table.Cell>
-                <span class="text-muted-foreground text-sm whitespace-nowrap">
-                  {format(new Date(incident.start_date_time * 1000), "yyyy-MM-dd HH:mm")}
-                </span>
-              </Table.Cell>
               <Table.Cell>
                 <Tooltip.Root>
                   <Tooltip.Trigger>
@@ -231,7 +227,7 @@
                     </Tooltip.Trigger>
                     <Tooltip.Content>
                       <div class="space-y-1">
-                        {#each incident.monitors as monitor (monitor.tag || monitor.monitor_tag)}
+                        {#each incident.monitors as monitor}
                           <div class="text-sm">
                             <span class="font-medium">{monitor.tag || monitor.monitor_tag}</span>
                             <span class="text-muted-foreground ml-1"
@@ -278,7 +274,7 @@
           </Button>
           <div class="flex items-center gap-1">
             {#if totalPages <= 7}
-              {#each Array.from({ length: totalPages }, (_, i) => i + 1) as page (page)}
+              {#each Array.from({ length: totalPages }, (_, i) => i + 1) as page}
                 <Button variant={page === pageNo ? "default" : "ghost"} size="sm" onclick={() => goToPage(page)}>
                   {page}
                 </Button>
@@ -292,7 +288,7 @@
               {/if}
 
               <!-- Middle pages -->
-              {#each Array.from({ length: 3 }, (_, i) => pageNo - 1 + i).filter((p) => p > 1 && p < totalPages) as page (page)}
+              {#each Array.from({ length: 3 }, (_, i) => pageNo - 1 + i).filter((p) => p > 1 && p < totalPages) as page}
                 <Button variant={page === pageNo ? "default" : "ghost"} size="sm" onclick={() => goToPage(page)}>
                   {page}
                 </Button>