From 5ee59cbf20febf5b89a1433788e2fb2b9bfd7e98 Mon Sep 17 00:00:00 2001
From: vergiLgood1 <xdamazon17@gmail.com>
Date: Sun, 9 Mar 2025 23:48:59 +0700
Subject: [PATCH] Menggunakan rreact query untuk menangani CRUD

---
 .../_components/admin/app-sidebar.tsx         |    8 +-
 .../_components/admin/map/mapbox-view.tsx     |    0
 .../admin/navigations/nav-main.tsx            |    0
 .../admin/navigations/nav-pre-main.tsx        |    0
 .../admin/navigations/nav-report.tsx          |    0
 .../admin/navigations/nav-user.tsx            |    0
 .../admin/settings/import-data.tsx            |    4 +-
 .../admin/settings/notification-settings.tsx  |    0
 .../admin/settings/preference-settings.tsx    |    4 +-
 .../admin/settings/profile-settings.tsx       |    0
 .../admin/settings/security-setting.tsx       |    0
 .../admin/settings/setting-dialog.tsx         |    0
 .../_components}/add-user-dialog.tsx          |   41 +-
 .../user-management/_components}/column.tsx   |    2 -
 .../_components}/data-table.tsx               |   31 +-
 .../_components}/invite-user.tsx              |   49 +-
 .../_components}/profile-form.tsx             |    0
 .../user-management/_components}/sheet.tsx    |  112 +-
 .../_components/update-user.tsx               |  449 +++++++
 .../_components}/user-form.tsx                |    0
 .../_components}/user-management.tsx          |  156 ++-
 .../_components}/user-stats.tsx               |   21 +-
 .../dashboard/user-management/action.ts       |    2 +
 .../dashboard/user-management/page.tsx        |    4 +-
 .../app/(protected)/(admin)/layout.tsx        |    2 +-
 .../_components/admin/users/users-table.tsx   |   36 -
 sigap-website/app/layout.tsx                  |   36 +-
 sigap-website/package-lock.json               | 1168 ++++++++++++++++-
 sigap-website/package.json                    |    2 +
 .../providers/react-query-provider.tsx        |   25 +-
 30 files changed, 1905 insertions(+), 247 deletions(-)
 rename sigap-website/app/{ => (protected)/(admin)}/_components/admin/app-sidebar.tsx (80%)
 rename sigap-website/app/{ => (protected)/(admin)}/_components/admin/map/mapbox-view.tsx (100%)
 rename sigap-website/app/{ => (protected)/(admin)}/_components/admin/navigations/nav-main.tsx (100%)
 rename sigap-website/app/{ => (protected)/(admin)}/_components/admin/navigations/nav-pre-main.tsx (100%)
 rename sigap-website/app/{ => (protected)/(admin)}/_components/admin/navigations/nav-report.tsx (100%)
 rename sigap-website/app/{ => (protected)/(admin)}/_components/admin/navigations/nav-user.tsx (100%)
 rename sigap-website/app/{ => (protected)/(admin)}/_components/admin/settings/import-data.tsx (98%)
 rename sigap-website/app/{ => (protected)/(admin)}/_components/admin/settings/notification-settings.tsx (100%)
 rename sigap-website/app/{ => (protected)/(admin)}/_components/admin/settings/preference-settings.tsx (98%)
 rename sigap-website/app/{ => (protected)/(admin)}/_components/admin/settings/profile-settings.tsx (100%)
 rename sigap-website/app/{ => (protected)/(admin)}/_components/admin/settings/security-setting.tsx (100%)
 rename sigap-website/app/{ => (protected)/(admin)}/_components/admin/settings/setting-dialog.tsx (100%)
 rename sigap-website/app/{_components/admin/users => (protected)/(admin)/dashboard/user-management/_components}/add-user-dialog.tsx (91%)
 rename sigap-website/app/{_components/admin/users => (protected)/(admin)/dashboard/user-management/_components}/column.tsx (99%)
 rename sigap-website/app/{_components/admin/users => (protected)/(admin)/dashboard/user-management/_components}/data-table.tsx (90%)
 rename sigap-website/app/{_components/admin/users => (protected)/(admin)/dashboard/user-management/_components}/invite-user.tsx (87%)
 rename sigap-website/app/{_components/admin/users => (protected)/(admin)/dashboard/user-management/_components}/profile-form.tsx (100%)
 rename sigap-website/app/{_components/admin/users => (protected)/(admin)/dashboard/user-management/_components}/sheet.tsx (89%)
 create mode 100644 sigap-website/app/(protected)/(admin)/dashboard/user-management/_components/update-user.tsx
 rename sigap-website/app/{_components/admin/users => (protected)/(admin)/dashboard/user-management/_components}/user-form.tsx (100%)
 rename sigap-website/app/{_components/admin/users => (protected)/(admin)/dashboard/user-management/_components}/user-management.tsx (87%)
 rename sigap-website/app/{_components/admin/users => (protected)/(admin)/dashboard/user-management/_components}/user-stats.tsx (85%)
 delete mode 100644 sigap-website/app/_components/admin/users/users-table.tsx

diff --git a/sigap-website/app/_components/admin/app-sidebar.tsx b/sigap-website/app/(protected)/(admin)/_components/admin/app-sidebar.tsx
similarity index 80%
rename from sigap-website/app/_components/admin/app-sidebar.tsx
rename to sigap-website/app/(protected)/(admin)/_components/admin/app-sidebar.tsx
index 9fc5ff2..cce0201 100644
--- a/sigap-website/app/_components/admin/app-sidebar.tsx
+++ b/sigap-website/app/(protected)/(admin)/_components/admin/app-sidebar.tsx
@@ -2,9 +2,9 @@
 
 import * as React from "react";
 
-import { NavMain } from "@/app/_components/admin/navigations/nav-main";
-import { NavReports } from "@/app/_components/admin/navigations/nav-report";
-import { NavUser } from "@/app/_components/admin/navigations/nav-user";
+import { NavMain } from "@/app/(protected)/(admin)/_components/admin/navigations/nav-main";
+import { NavReports } from "@/app/(protected)/(admin)/_components/admin/navigations/nav-report";
+import { NavUser } from "@/app/(protected)/(admin)/_components/admin/navigations/nav-user";
 
 import {
   Sidebar,
@@ -15,7 +15,7 @@ import {
 } from "@/app/_components/ui/sidebar";
 import { NavPreMain } from "./navigations/nav-pre-main";
 import { navData } from "@/prisma/data/nav";
-import { TeamSwitcher } from "../team-switcher";
+import { TeamSwitcher } from "../../../../_components/team-switcher";
 
 import { Profile, User } from "@/src/models/users/users.model";
 import { getCurrentUser } from "@/app/(protected)/(admin)/dashboard/user-management/action";
diff --git a/sigap-website/app/_components/admin/map/mapbox-view.tsx b/sigap-website/app/(protected)/(admin)/_components/admin/map/mapbox-view.tsx
similarity index 100%
rename from sigap-website/app/_components/admin/map/mapbox-view.tsx
rename to sigap-website/app/(protected)/(admin)/_components/admin/map/mapbox-view.tsx
diff --git a/sigap-website/app/_components/admin/navigations/nav-main.tsx b/sigap-website/app/(protected)/(admin)/_components/admin/navigations/nav-main.tsx
similarity index 100%
rename from sigap-website/app/_components/admin/navigations/nav-main.tsx
rename to sigap-website/app/(protected)/(admin)/_components/admin/navigations/nav-main.tsx
diff --git a/sigap-website/app/_components/admin/navigations/nav-pre-main.tsx b/sigap-website/app/(protected)/(admin)/_components/admin/navigations/nav-pre-main.tsx
similarity index 100%
rename from sigap-website/app/_components/admin/navigations/nav-pre-main.tsx
rename to sigap-website/app/(protected)/(admin)/_components/admin/navigations/nav-pre-main.tsx
diff --git a/sigap-website/app/_components/admin/navigations/nav-report.tsx b/sigap-website/app/(protected)/(admin)/_components/admin/navigations/nav-report.tsx
similarity index 100%
rename from sigap-website/app/_components/admin/navigations/nav-report.tsx
rename to sigap-website/app/(protected)/(admin)/_components/admin/navigations/nav-report.tsx
diff --git a/sigap-website/app/_components/admin/navigations/nav-user.tsx b/sigap-website/app/(protected)/(admin)/_components/admin/navigations/nav-user.tsx
similarity index 100%
rename from sigap-website/app/_components/admin/navigations/nav-user.tsx
rename to sigap-website/app/(protected)/(admin)/_components/admin/navigations/nav-user.tsx
diff --git a/sigap-website/app/_components/admin/settings/import-data.tsx b/sigap-website/app/(protected)/(admin)/_components/admin/settings/import-data.tsx
similarity index 98%
rename from sigap-website/app/_components/admin/settings/import-data.tsx
rename to sigap-website/app/(protected)/(admin)/_components/admin/settings/import-data.tsx
index 2b78351..11361ea 100644
--- a/sigap-website/app/_components/admin/settings/import-data.tsx
+++ b/sigap-website/app/(protected)/(admin)/_components/admin/settings/import-data.tsx
@@ -4,7 +4,7 @@ import { Card, CardContent } from "@/app/_components/ui/card";
 import { ScrollArea } from "@/app/_components/ui/scroll-area";
 import { Separator } from "@/app/_components/ui/separator";
 import { Upload } from "lucide-react";
-import { Badge } from "../../ui/badge";
+import { Badge } from "../../../../../_components/ui/badge";
 import {
   IconBrandGoogleAnalytics,
   IconCsv,
@@ -124,7 +124,7 @@ const ImportData = () => {
             <label
               htmlFor="file-upload"
               className="w-full flex flex-col items-center justify-center border-2 border-dashed border-gray-300 rounded-lg cursor-pointer p-6 hover:border-gray-400"
-            >
+            > 
               <Upload className="w-10 h-10 text-gray-500 mb-2" />
               <span className="text-sm text-gray-500">
                 Drag and drop your ZIP files here
diff --git a/sigap-website/app/_components/admin/settings/notification-settings.tsx b/sigap-website/app/(protected)/(admin)/_components/admin/settings/notification-settings.tsx
similarity index 100%
rename from sigap-website/app/_components/admin/settings/notification-settings.tsx
rename to sigap-website/app/(protected)/(admin)/_components/admin/settings/notification-settings.tsx
diff --git a/sigap-website/app/_components/admin/settings/preference-settings.tsx b/sigap-website/app/(protected)/(admin)/_components/admin/settings/preference-settings.tsx
similarity index 98%
rename from sigap-website/app/_components/admin/settings/preference-settings.tsx
rename to sigap-website/app/(protected)/(admin)/_components/admin/settings/preference-settings.tsx
index 250cd29..a55271c 100644
--- a/sigap-website/app/_components/admin/settings/preference-settings.tsx
+++ b/sigap-website/app/(protected)/(admin)/_components/admin/settings/preference-settings.tsx
@@ -5,8 +5,8 @@ import { ChevronDown } from "lucide-react";
 import { Switch } from "@/app/_components/ui/switch";
 import { Separator } from "@/app/_components/ui/separator";
 import { ScrollArea } from "@/app/_components/ui/scroll-area";
-import { ThemeSwitcher } from "../../theme-switcher";
-import DropdownSwitcher from "../../custom-dropdown-switcher";
+import { ThemeSwitcher } from "../../../../../_components/theme-switcher";
+import DropdownSwitcher from "../../../../../_components/custom-dropdown-switcher";
 import {
   type CookiePreferences,
   defaultCookiePreferences,
diff --git a/sigap-website/app/_components/admin/settings/profile-settings.tsx b/sigap-website/app/(protected)/(admin)/_components/admin/settings/profile-settings.tsx
similarity index 100%
rename from sigap-website/app/_components/admin/settings/profile-settings.tsx
rename to sigap-website/app/(protected)/(admin)/_components/admin/settings/profile-settings.tsx
diff --git a/sigap-website/app/_components/admin/settings/security-setting.tsx b/sigap-website/app/(protected)/(admin)/_components/admin/settings/security-setting.tsx
similarity index 100%
rename from sigap-website/app/_components/admin/settings/security-setting.tsx
rename to sigap-website/app/(protected)/(admin)/_components/admin/settings/security-setting.tsx
diff --git a/sigap-website/app/_components/admin/settings/setting-dialog.tsx b/sigap-website/app/(protected)/(admin)/_components/admin/settings/setting-dialog.tsx
similarity index 100%
rename from sigap-website/app/_components/admin/settings/setting-dialog.tsx
rename to sigap-website/app/(protected)/(admin)/_components/admin/settings/setting-dialog.tsx
diff --git a/sigap-website/app/_components/admin/users/add-user-dialog.tsx b/sigap-website/app/(protected)/(admin)/dashboard/user-management/_components/add-user-dialog.tsx
similarity index 91%
rename from sigap-website/app/_components/admin/users/add-user-dialog.tsx
rename to sigap-website/app/(protected)/(admin)/dashboard/user-management/_components/add-user-dialog.tsx
index 3a5865b..f4188a9 100644
--- a/sigap-website/app/_components/admin/users/add-user-dialog.tsx
+++ b/sigap-website/app/(protected)/(admin)/dashboard/user-management/_components/add-user-dialog.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import type React from "react";
 
 import { useState } from "react";
@@ -15,6 +13,7 @@ import { Checkbox } from "@/app/_components/ui/checkbox";
 import { createUser } from "@/app/(protected)/(admin)/dashboard/user-management/action";
 import { toast } from "sonner";
 import { Mail, Lock, Loader2, X } from "lucide-react";
+import { useMutation } from "@tanstack/react-query";
 
 interface AddUserDialogProps {
   open: boolean;
@@ -27,7 +26,6 @@ export function AddUserDialog({
   onOpenChange,
   onUserAdded,
 }: AddUserDialogProps) {
-  const [isLoading, setIsLoading] = useState(false);
   const [formData, setFormData] = useState({
     email: "",
     password: "",
@@ -39,17 +37,10 @@ export function AddUserDialog({
     setFormData((prev) => ({ ...prev, [name]: value }));
   };
 
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-    setIsLoading(true);
-
-    try {
-      await createUser({
-        email: formData.email,
-        password: formData.password,
-        email_confirm: formData.emailConfirm,
-      });
-
+  const { mutate: createUserMutation, isPending } = useMutation({
+    mutationKey: ["createUser"],
+    mutationFn: createUser,
+    onSuccess: () => {
       toast.success("User created successfully.");
       onUserAdded();
       onOpenChange(false);
@@ -58,10 +49,24 @@ export function AddUserDialog({
         password: "",
         emailConfirm: true,
       });
+    },
+    onError: () => {
+      toast.error("Failed to create user.");
+    },
+  });
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    try {
+      await createUserMutation({
+        email: formData.email,
+        password: formData.password,
+        email_confirm: formData.emailConfirm,
+      });
     } catch (error) {
       toast.error("Failed to create user.");
-    } finally {
-      setIsLoading(false);
+      return;
     }
   };
 
@@ -144,8 +149,8 @@ export function AddUserDialog({
             </p>
           </div>
 
-          <Button type="submit" disabled={isLoading} className="w-full ">
-            {isLoading ? (
+          <Button type="submit" disabled={isPending} className="w-full ">
+            {isPending ? (
               <>
                 <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                 Creating...
diff --git a/sigap-website/app/_components/admin/users/column.tsx b/sigap-website/app/(protected)/(admin)/dashboard/user-management/_components/column.tsx
similarity index 99%
rename from sigap-website/app/_components/admin/users/column.tsx
rename to sigap-website/app/(protected)/(admin)/dashboard/user-management/_components/column.tsx
index a1ddb50..56f414c 100644
--- a/sigap-website/app/_components/admin/users/column.tsx
+++ b/sigap-website/app/(protected)/(admin)/dashboard/user-management/_components/column.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import type { ColumnDef } from "@tanstack/react-table";
 import { Badge } from "@/app/_components/ui/badge";
 import { Checkbox } from "@/app/_components/ui/checkbox";
diff --git a/sigap-website/app/_components/admin/users/data-table.tsx b/sigap-website/app/(protected)/(admin)/dashboard/user-management/_components/data-table.tsx
similarity index 90%
rename from sigap-website/app/_components/admin/users/data-table.tsx
rename to sigap-website/app/(protected)/(admin)/dashboard/user-management/_components/data-table.tsx
index 871636f..29e65c2 100644
--- a/sigap-website/app/_components/admin/users/data-table.tsx
+++ b/sigap-website/app/(protected)/(admin)/dashboard/user-management/_components/data-table.tsx
@@ -48,6 +48,7 @@ interface DataTableProps<TData, TValue> {
   data: TData[];
   loading?: boolean;
   onRowClick?: (row: TData) => void;
+  onActionClick?: (row: TData, action: string) => void;
   pageSize?: number;
 }
 
@@ -56,6 +57,7 @@ export function DataTable<TData, TValue>({
   data,
   loading = false,
   onRowClick,
+  onActionClick,
   pageSize = 5,
 }: DataTableProps<TData, TValue>) {
   const [sorting, setSorting] = useState<SortingState>([]);
@@ -198,11 +200,38 @@ export function DataTable<TData, TValue>({
                     {flexRender(cell.column.columnDef.cell, cell.getContext())}
                   </TableCell>
                 ))}
+                {/* {onActionClick && (
+                  <TableCell>
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        onActionClick(row.original, "update");
+                      }}
+                    >
+                      Update
+                    </Button>
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        onActionClick(row.original, "delete");
+                      }}
+                    >
+                      Delete
+                    </Button>
+                  </TableCell>
+                )} */}
               </TableRow>
             ))
           ) : (
             <TableRow>
-              <TableCell colSpan={columns.length} className="h-24 text-center">
+              <TableCell
+                colSpan={columns.length + 1}
+                className="h-24 text-center"
+              >
                 No results.
               </TableCell>
             </TableRow>
diff --git a/sigap-website/app/_components/admin/users/invite-user.tsx b/sigap-website/app/(protected)/(admin)/dashboard/user-management/_components/invite-user.tsx
similarity index 87%
rename from sigap-website/app/_components/admin/users/invite-user.tsx
rename to sigap-website/app/(protected)/(admin)/dashboard/user-management/_components/invite-user.tsx
index df39963..3767b51 100644
--- a/sigap-website/app/_components/admin/users/invite-user.tsx
+++ b/sigap-website/app/(protected)/(admin)/dashboard/user-management/_components/invite-user.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import type React from "react";
 
 import { useState } from "react";
@@ -35,8 +33,6 @@ export function InviteUserDialog({
     metadata: "{}",
   });
 
-  const [isLoading, setIsLoading] = useState(false);
-
   const handleInputChange = (
     e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
   ) => {
@@ -44,23 +40,10 @@ export function InviteUserDialog({
     setFormData((prev) => ({ ...prev, [name]: value }));
   };
 
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-    setIsLoading(true);
-
-    let metadata = {};
-    try {
-      metadata = JSON.parse(formData.metadata);
-    } catch (error) {
-      toast.error("Invalid JSON. Please check your metadata format.");
-      setIsLoading(false);
-      return;
-    }
-
-    try {
-      await inviteUser({
-        email: formData.email,
-      });
+  const { mutate: inviteUserMutation, isPending } = useMutation({
+    mutationKey: ["inviteUser"],
+    mutationFn: inviteUser,
+    onSuccess: () => {
       toast.success("Invitation sent");
       onUserInvited();
       onOpenChange(false);
@@ -68,10 +51,24 @@ export function InviteUserDialog({
         email: "",
         metadata: "{}",
       });
-    } catch (error) {
+    },
+    onError: () => {
       toast.error("Failed to send invitation");
-    } finally {
-      setIsLoading(false);
+    },
+  });
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+
+    let metadata = {};
+    try {
+      metadata = JSON.parse(formData.metadata);
+      inviteUserMutation({
+        email: formData.email,
+      });
+    } catch (error) {
+      toast.error("Invalid JSON. Please check your metadata format.");
+      return;
     }
   };
 
@@ -106,8 +103,8 @@ export function InviteUserDialog({
             >
               Cancel
             </Button>
-            <Button type="submit" disabled={isLoading}>
-              {isLoading ? "Sending..." : "Send Invitation"}
+            <Button type="submit" disabled={isPending}>
+              {isPending ? "Sending..." : "Send Invitation"}
             </Button>
           </DialogFooter>
         </form>
diff --git a/sigap-website/app/_components/admin/users/profile-form.tsx b/sigap-website/app/(protected)/(admin)/dashboard/user-management/_components/profile-form.tsx
similarity index 100%
rename from sigap-website/app/_components/admin/users/profile-form.tsx
rename to sigap-website/app/(protected)/(admin)/dashboard/user-management/_components/profile-form.tsx
diff --git a/sigap-website/app/_components/admin/users/sheet.tsx b/sigap-website/app/(protected)/(admin)/dashboard/user-management/_components/sheet.tsx
similarity index 89%
rename from sigap-website/app/_components/admin/users/sheet.tsx
rename to sigap-website/app/(protected)/(admin)/dashboard/user-management/_components/sheet.tsx
index d34eb6b..d36afd1 100644
--- a/sigap-website/app/_components/admin/users/sheet.tsx
+++ b/sigap-website/app/(protected)/(admin)/dashboard/user-management/_components/sheet.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { useState } from "react";
 import { useMutation } from "@tanstack/react-query";
 import { toast } from "sonner";
@@ -43,19 +41,19 @@ import {
 } from "@/app/(protected)/(admin)/dashboard/user-management/action";
 import { format } from "date-fns";
 
-interface UserDetailsSheetProps {
+interface UserDetailSheetProps {
   open: boolean;
   onOpenChange: (open: boolean) => void;
   user: any;
   onUserUpdate: () => void;
 }
 
-export function UserDetailsSheet({
+export function UserDetailSheet({
   open,
   onOpenChange,
   user,
   onUserUpdate,
-}: UserDetailsSheetProps) {
+}: UserDetailSheetProps) {
   const [isDeleting, setIsDeleting] = useState(false);
   const [isLoading, setIsLoading] = useState({
     deleteUser: false,
@@ -64,67 +62,105 @@ export function UserDetailsSheet({
     toggleBan: false,
   });
 
-  const handleDeleteUser = async () => {
-    setIsLoading((prev) => ({ ...prev, deleteUser: true }));
-    setIsDeleting(true);
-    try {
-      await deleteUser(user.id);
+  const deleteUserMutation = useMutation({
+    mutationFn: () => deleteUser(user.id),
+    onMutate: () => {
+      setIsLoading((prev) => ({ ...prev, deleteUser: true }));
+      setIsDeleting(true);
+    },
+    onSuccess: () => {
       toast.success("User deleted successfully");
       onUserUpdate();
       onOpenChange(false);
-    } catch {
+    },
+    onError: () => {
       toast.error("Failed to delete user");
-    } finally {
+    },
+    onSettled: () => {
       setIsLoading((prev) => ({ ...prev, deleteUser: false }));
       setIsDeleting(false);
-    }
-  };
+    },
+  });
 
-  const handleSendPasswordRecovery = async () => {
-    setIsLoading((prev) => ({ ...prev, sendPasswordRecovery: true }));
-    try {
+  const sendPasswordRecoveryMutation = useMutation({
+    mutationFn: () => {
       if (!user.email) {
         throw new Error("User does not have an email address");
       }
-      await sendPasswordRecovery(user.email);
+      return sendPasswordRecovery(user.email);
+    },
+    onMutate: () => {
+      setIsLoading((prev) => ({ ...prev, sendPasswordRecovery: true }));
+    },
+    onSuccess: () => {
       toast.success("Password recovery email sent");
-    } catch {
+    },
+    onError: () => {
       toast.error("Failed to send password recovery email");
-    } finally {
+    },
+    onSettled: () => {
       setIsLoading((prev) => ({ ...prev, sendPasswordRecovery: false }));
-    }
-  };
+    },
+  });
 
-  const handleSendMagicLink = async () => {
-    setIsLoading((prev) => ({ ...prev, sendMagicLink: true }));
-    try {
+  const sendMagicLinkMutation = useMutation({
+    mutationFn: () => {
       if (!user.email) {
         throw new Error("User does not have an email address");
       }
-      await sendMagicLink(user.email);
+      return sendMagicLink(user.email);
+    },
+    onMutate: () => {
+      setIsLoading((prev) => ({ ...prev, sendMagicLink: true }));
+    },
+    onSuccess: () => {
       toast.success("Magic link sent successfully");
-    } catch {
+    },
+    onError: () => {
       toast.error("Failed to send magic link");
-    } finally {
+    },
+    onSettled: () => {
       setIsLoading((prev) => ({ ...prev, sendMagicLink: false }));
-    }
-  };
+    },
+  });
 
-  const handleToggleBan = async () => {
-    setIsLoading((prev) => ({ ...prev, toggleBan: true }));
-    try {
+  const toggleBanMutation = useMutation({
+    mutationFn: () => {
       if (user.banned_until) {
-        await unbanUser(user.id);
+        return unbanUser(user.id);
       } else {
-        await banUser(user.id);
+        return banUser(user.id);
       }
+    },
+    onMutate: () => {
+      setIsLoading((prev) => ({ ...prev, toggleBan: true }));
+    },
+    onSuccess: () => {
       toast.success("User ban status updated");
       onUserUpdate();
-    } catch {
+    },
+    onError: () => {
       toast.error("Failed to update user ban status");
-    } finally {
+    },
+    onSettled: () => {
       setIsLoading((prev) => ({ ...prev, toggleBan: false }));
-    }
+    },
+  });
+
+  const handleDeleteUser = () => {
+    deleteUserMutation.mutate();
+  };
+
+  const handleSendPasswordRecovery = () => {
+    sendPasswordRecoveryMutation.mutate();
+  };
+
+  const handleSendMagicLink = () => {
+    sendMagicLinkMutation.mutate();
+  };
+
+  const handleToggleBan = () => {
+    toggleBanMutation.mutate();
   };
 
   const handleCopyItem = (item: string) => {
diff --git a/sigap-website/app/(protected)/(admin)/dashboard/user-management/_components/update-user.tsx b/sigap-website/app/(protected)/(admin)/dashboard/user-management/_components/update-user.tsx
new file mode 100644
index 0000000..fb969ef
--- /dev/null
+++ b/sigap-website/app/(protected)/(admin)/dashboard/user-management/_components/update-user.tsx
@@ -0,0 +1,449 @@
+import { FormDescription } from "@/app/_components/ui/form";
+
+import { useState } from "react";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useForm } from "react-hook-form";
+import * as z from "zod";
+import { format } from "date-fns";
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from "@/app/_components/ui/sheet";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/app/_components/ui/form";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/app/_components/ui/select";
+import { Input } from "@/app/_components/ui/input";
+import { Button } from "@/app/_components/ui/button";
+import { Textarea } from "@/app/_components/ui/textarea";
+import { Calendar } from "@/app/_components/ui/calendar";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/app/_components/ui/popover";
+import { cn } from "@/lib/utils";
+import { CalendarIcon, Loader2 } from "lucide-react";
+import { Switch } from "@/app/_components/ui/switch";
+import { User, UserSchema } from "@/src/models/users/users.model";
+
+type UserProfileFormValues = z.infer<typeof UserSchema>;
+
+interface UserProfileSheetProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  userData?: User; // Replace with your user data type
+  onSave: (data: UserProfileFormValues) => Promise<void>;
+}
+
+export function UserProfileSheet({
+  open,
+  onOpenChange,
+  userData,
+  onSave,
+}: UserProfileSheetProps) {
+  const [isSaving, setIsSaving] = useState(false);
+
+  // Initialize form with user data
+  const form = useForm<UserProfileFormValues>({
+    resolver: zodResolver(UserSchema),
+    defaultValues: {
+      email: userData?.email || "",
+      phone: userData?.phone || "",
+      role: userData?.role || "user",
+      is_anonymous: userData?.is_anonymous || false,
+      profile: {
+        username: userData?.profile?.username || "",
+        first_name: userData?.profile?.first_name || "",
+        last_name: userData?.profile?.last_name || "",
+        bio: userData?.profile?.bio || "",
+        birth_date: userData?.profile?.birth_date
+          ? new Date(userData.profile.birth_date)
+          : null,
+        avatar: userData?.profile?.avatar || "",
+        address: userData?.profile?.address || {
+          street: "",
+          city: "",
+          state: "",
+          country: "",
+          postal_code: "",
+        },
+      },
+    },
+  });
+
+  async function onSubmit(data: UserProfileFormValues) {
+    try {
+      setIsSaving(true);
+      await onSave(data);
+      onOpenChange(false);
+    } catch (error) {
+      console.error("Error saving user profile:", error);
+    } finally {
+      setIsSaving(false);
+    }
+  }
+
+  return (
+    <Sheet open={open} onOpenChange={onOpenChange}>
+      <SheetContent className="w-full sm:max-w-xl overflow-y-auto">
+        <SheetHeader className="mb-6">
+          <SheetTitle>Update User Profile</SheetTitle>
+          <SheetDescription>
+            Make changes to the user profile here. Click save when you&apos;re
+            done.
+          </SheetDescription>
+        </SheetHeader>
+
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
+            {/* User Information Section */}
+            <div className="space-y-4">
+              <h3 className="text-lg font-medium">User Information</h3>
+
+              <FormField
+                control={form.control}
+                name="email"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Email</FormLabel>
+                    <FormControl>
+                      <Input
+                        {...field}
+                        type="email"
+                        placeholder="email@example.com"
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="phone"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Phone</FormLabel>
+                    <FormControl>
+                      <Input
+                        {...field}
+                        type="tel"
+                        placeholder="+1234567890"
+                        value={field.value ?? ""}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="role"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Role</FormLabel>
+                    <Select
+                      onValueChange={field.onChange}
+                      defaultValue={field.value}
+                    >
+                      <FormControl>
+                        <SelectTrigger>
+                          <SelectValue placeholder="Select a role" />
+                        </SelectTrigger>
+                      </FormControl>
+                      <SelectContent>
+                        <SelectItem value="user">User</SelectItem>
+                        <SelectItem value="admin">Admin</SelectItem>
+                      </SelectContent>
+                    </Select>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="is_anonymous"
+                render={({ field }) => (
+                  <FormItem className="flex items-center justify-between rounded-lg border p-4">
+                    <div className="space-y-0.5">
+                      <FormLabel className="text-base">
+                        Anonymous User
+                      </FormLabel>
+                      <FormDescription>
+                        Make this user anonymous in the system
+                      </FormDescription>
+                    </div>
+                    <FormControl>
+                      <Switch
+                        checked={field.value}
+                        onCheckedChange={field.onChange}
+                      />
+                    </FormControl>
+                  </FormItem>
+                )}
+              />
+            </div>
+
+            {/* Profile Information Section */}
+            <div className="space-y-4">
+              <h3 className="text-lg font-medium">Profile Information</h3>
+
+              <FormField
+                control={form.control}
+                name="profile.username"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Username</FormLabel>
+                    <FormControl>
+                      <Input
+                        {...field}
+                        placeholder="username"
+                        value={field.value ?? ""}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <div className="grid grid-cols-2 gap-4">
+                <FormField
+                  control={form.control}
+                  name="profile.first_name"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>First Name</FormLabel>
+                      <FormControl>
+                        <Input
+                          {...field}
+                          placeholder="John"
+                          value={field.value ?? ""}
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                <FormField
+                  control={form.control}
+                  name="profile.last_name"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>Last Name</FormLabel>
+                      <FormControl>
+                        <Input
+                          {...field}
+                          placeholder="Doe"
+                          value={field.value ?? ""}
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              </div>
+
+              <FormField
+                control={form.control}
+                name="profile.bio"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Bio</FormLabel>
+                    <FormControl>
+                      <Textarea
+                        {...field}
+                        placeholder="Tell us about yourself"
+                        className="resize-none"
+                        rows={4}
+                        value={field.value ?? ""}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="profile.birth_date"
+                render={({ field }) => (
+                  <FormItem className="flex flex-col">
+                    <FormLabel>Date of birth</FormLabel>
+                    <Popover>
+                      <PopoverTrigger asChild>
+                        <FormControl>
+                          <Button
+                            variant={"outline"}
+                            className={cn(
+                              "w-full pl-3 text-left font-normal",
+                              !field.value && "text-muted-foreground"
+                            )}
+                          >
+                            {field.value ? (
+                              format(field.value, "PPP")
+                            ) : (
+                              <span>Pick a date</span>
+                            )}
+                            <CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
+                          </Button>
+                        </FormControl>
+                      </PopoverTrigger>
+                      <PopoverContent className="w-auto p-0" align="start">
+                        <Calendar
+                          mode="single"
+                          selected={
+                            field.value instanceof Date
+                              ? field.value
+                              : undefined
+                          }
+                          onSelect={field.onChange}
+                          disabled={(date) =>
+                            date > new Date() || date < new Date("1900-01-01")
+                          }
+                          initialFocus
+                        />
+                      </PopoverContent>
+                    </Popover>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="profile.avatar"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Avatar URL</FormLabel>
+                    <FormControl>
+                      <Input
+                        {...field}
+                        type="url"
+                        placeholder="https://example.com/avatar.jpg"
+                        value={field.value ?? ""}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </div>
+
+            {/* Address Section */}
+            <div className="space-y-4">
+              <h3 className="text-lg font-medium">Address</h3>
+
+              <FormField
+                control={form.control}
+                name="profile.address.street"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Street Address</FormLabel>
+                    <FormControl>
+                      <Input {...field} placeholder="123 Main St" />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <div className="grid grid-cols-2 gap-4">
+                <FormField
+                  control={form.control}
+                  name="profile.address.city"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>City</FormLabel>
+                      <FormControl>
+                        <Input {...field} placeholder="City" />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                <FormField
+                  control={form.control}
+                  name="profile.address.state"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>State</FormLabel>
+                      <FormControl>
+                        <Input {...field} placeholder="State" />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              </div>
+
+              <div className="grid grid-cols-2 gap-4">
+                <FormField
+                  control={form.control}
+                  name="profile.address.country"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>Country</FormLabel>
+                      <FormControl>
+                        <Input {...field} placeholder="Country" />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                <FormField
+                  control={form.control}
+                  name="profile.address.postal_code"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>Postal Code</FormLabel>
+                      <FormControl>
+                        <Input {...field} placeholder="Postal Code" />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              </div>
+            </div>
+
+            {/* Action Buttons */}
+            <div className="flex justify-end space-x-4 sticky bottom-0 bg-background py-4 border-t">
+              <Button
+                type="button"
+                variant="outline"
+                onClick={() => onOpenChange(false)}
+                disabled={isSaving}
+              >
+                Cancel
+              </Button>
+              <Button type="submit" disabled={isSaving}>
+                {isSaving && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+                {isSaving ? "Saving..." : "Save changes"}
+              </Button>
+            </div>
+          </form>
+        </Form>
+      </SheetContent>
+    </Sheet>
+  );
+}
diff --git a/sigap-website/app/_components/admin/users/user-form.tsx b/sigap-website/app/(protected)/(admin)/dashboard/user-management/_components/user-form.tsx
similarity index 100%
rename from sigap-website/app/_components/admin/users/user-form.tsx
rename to sigap-website/app/(protected)/(admin)/dashboard/user-management/_components/user-form.tsx
diff --git a/sigap-website/app/_components/admin/users/user-management.tsx b/sigap-website/app/(protected)/(admin)/dashboard/user-management/_components/user-management.tsx
similarity index 87%
rename from sigap-website/app/_components/admin/users/user-management.tsx
rename to sigap-website/app/(protected)/(admin)/dashboard/user-management/_components/user-management.tsx
index 5d9a148..84a5f7e 100644
--- a/sigap-website/app/_components/admin/users/user-management.tsx
+++ b/sigap-website/app/(protected)/(admin)/dashboard/user-management/_components/user-management.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useMemo, useEffect } from "react";
+import { useState, useMemo, useEffect, JSX } from "react";
 import {
   PlusCircle,
   Search,
@@ -18,6 +18,9 @@ import {
   Calendar,
   ShieldAlert,
   ListFilter,
+  XCircle,
+  Trash2,
+  UserPen,
 } from "lucide-react";
 import { Button } from "@/app/_components/ui/button";
 import { Input } from "@/app/_components/ui/input";
@@ -30,33 +33,39 @@ import {
   DropdownMenuTrigger,
   DropdownMenuCheckboxItem,
 } from "@/app/_components/ui/dropdown-menu";
-import { useQuery } from "@tanstack/react-query";
+import { keepPreviousData, useQuery } from "@tanstack/react-query";
 import { fetchUsers } from "@/app/(protected)/(admin)/dashboard/user-management/action";
 import { User } from "@/src/models/users/users.model";
 import { toast } from "sonner";
 import { DataTable } from "./data-table";
 import { InviteUserDialog } from "./invite-user";
 import { AddUserDialog } from "./add-user-dialog";
-import { UserDetailsSheet } from "./sheet";
+import { UserDetailSheet } from "./sheet";
 import { Avatar } from "@radix-ui/react-avatar";
 import Image from "next/image";
-import { useNavigations } from "@/app/_hooks/use-navigations";
+import { ColumnDef, HeaderContext } from "@tanstack/react-table";
+import { UserProfileSheet } from "./update-user";
+
+type UserFilterOptions = {
+  email: string;
+  phone: string;
+  lastSignIn: string;
+  createdAt: string;
+  status: string[];
+};
+
+type UserTableColumn = ColumnDef<User, User>;
 
 export default function UserManagement() {
   const [searchQuery, setSearchQuery] = useState("");
   const [selectedUser, setSelectedUser] = useState<User | null>(null);
   const [isSheetOpen, setIsSheetOpen] = useState(false);
+  const [isUpdateOpen, setIsUpdateOpen] = useState(false);
   const [isAddUserOpen, setIsAddUserOpen] = useState(false);
   const [isInviteUserOpen, setIsInviteUserOpen] = useState(false);
 
   // Filter states
-  const [filters, setFilters] = useState<{
-    email: string;
-    phone: string;
-    lastSignIn: string;
-    createdAt: string;
-    status: string[];
-  }>({
+  const [filters, setFilters] = useState<UserFilterOptions>({
     email: "",
     phone: "",
     lastSignIn: "",
@@ -65,45 +74,27 @@ export default function UserManagement() {
   });
 
   // Use React Query to fetch users
-  const [users, setUsers] = useState<User[]>([]);
-  const { isLoading, setIsLoading } = useNavigations();
-
-  useEffect(() => {
-    const fetchData = async () => {
-      try {
-        setIsLoading(true);
-        const fetchedUsers = await fetchUsers();
-        setUsers(fetchedUsers);
-      } catch (error) {
-        toast.error("Failed to fetch users");
-      } finally {
-        setIsLoading(false);
-      }
-    };
-
-    fetchData();
-  }, []);
-
-  const refetch = async () => {
-    setIsLoading(true);
-    try {
-      const fetchedUsers = await fetchUsers();
-      setUsers(fetchedUsers);
-    } catch (error) {
-      toast.error("Failed to fetch users");
-    } finally {
-      setIsLoading(false);
-    }
-  };
+  const {
+    data: users = [],
+    isLoading,
+    refetch,
+    isPlaceholderData,
+  } = useQuery<User[]>({
+    queryKey: ["users"],
+    queryFn: fetchUsers,
+    placeholderData: keepPreviousData,
+    throwOnError: true,
+  });
 
   const handleUserClick = (user: User) => {
     setSelectedUser(user);
     setIsSheetOpen(true);
   };
 
-  const handleUserUpdate = () => {
-    refetch();
+  const handleUserUpdate = (user: User) => {
+    setSelectedUser(user);
     setIsSheetOpen(false);
+    setIsUpdateOpen(true);
   };
 
   const filteredUsers = useMemo(() => {
@@ -224,10 +215,10 @@ export default function UserManagement() {
       (Array.isArray(value) && value.length > 0)
   ).length;
 
-  const columns = [
+  const columns: UserTableColumn[] = [
     {
       id: "email",
-      header: ({ column }: any) => (
+      header: ({ column }: HeaderContext<User, User>) => (
         <div className="flex items-center gap-1">
           <span>Email</span>
           <DropdownMenu>
@@ -257,7 +248,7 @@ export default function UserManagement() {
           </DropdownMenu>
         </div>
       ),
-      cell: ({ row }: { row: { original: User } }) => (
+      cell: ({ row }) => (
         <div className="flex items-center gap-2">
           <Avatar className="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center text-primary font-medium">
             {row.original.profile?.avatar ? (
@@ -285,7 +276,7 @@ export default function UserManagement() {
     },
     {
       id: "phone",
-      header: ({ column }: any) => (
+      header: ({ column }: HeaderContext<User, User>) => (
         <div className="flex items-center gap-1">
           <span>Phone</span>
           <DropdownMenu>
@@ -315,11 +306,11 @@ export default function UserManagement() {
           </DropdownMenu>
         </div>
       ),
-      cell: ({ row }: { row: { original: User } }) => row.original.phone || "-",
+      cell: ({ row }) => row.original.phone || "-",
     },
     {
       id: "lastSignIn",
-      header: ({ column }: any) => (
+      header: ({ column }: HeaderContext<User, User>) => (
         <div className="flex items-center gap-1">
           <span>Last Sign In</span>
           <DropdownMenu>
@@ -383,7 +374,7 @@ export default function UserManagement() {
           </DropdownMenu>
         </div>
       ),
-      cell: ({ row }: { row: { original: User } }) => {
+      cell: ({ row }) => {
         return row.original.last_sign_in_at
           ? new Date(row.original.last_sign_in_at).toLocaleString()
           : "Never";
@@ -391,7 +382,7 @@ export default function UserManagement() {
     },
     {
       id: "createdAt",
-      header: ({ column }: any) => (
+      header: ({ column }: HeaderContext<User, User>) => (
         <div className="flex items-center gap-1">
           <span>Created At</span>
           <DropdownMenu>
@@ -444,7 +435,7 @@ export default function UserManagement() {
           </DropdownMenu>
         </div>
       ),
-      cell: ({ row }: { row: { original: User } }) => {
+      cell: ({ row }) => {
         return row.original.created_at
           ? new Date(row.original.created_at).toLocaleString()
           : "N/A";
@@ -452,7 +443,7 @@ export default function UserManagement() {
     },
     {
       id: "status",
-      header: ({ column }: any) => (
+      header: ({ column }: HeaderContext<User, User>) => (
         <div className="flex items-center gap-1">
           <span>Status</span>
           <DropdownMenu>
@@ -514,7 +505,7 @@ export default function UserManagement() {
           </DropdownMenu>
         </div>
       ),
-      cell: ({ row }: { row: { original: User } }) => {
+      cell: ({ row }) => {
         if (row.original.banned_until) {
           return <Badge variant="destructive">Banned</Badge>;
         }
@@ -527,17 +518,36 @@ export default function UserManagement() {
     {
       id: "actions",
       header: "",
-      cell: ({ row }: { row: { original: User } }) => (
-        <Button
-          variant="ghost"
-          size="icon"
-          onClick={(e) => {
-            e.stopPropagation();
-            handleUserClick(row.original);
-          }}
-        >
-          <MoreHorizontal className="h-4 w-4" />
-        </Button>
+      cell: ({ row }) => (
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="ghost" size="icon">
+              <MoreHorizontal className="h-4 w-4" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            <DropdownMenuItem onClick={() => handleUserUpdate(row.original)}>
+              <UserPen className="h-4 w-4 mr-2 text-blue-500" />
+              Update
+            </DropdownMenuItem>
+            <DropdownMenuItem
+              onClick={() => {
+                /* handle delete */
+              }}
+            >
+              <Trash2 className="h-4 w-4 mr-2 text-red-500" />
+              Delete
+            </DropdownMenuItem>
+            <DropdownMenuItem
+              onClick={() => {
+                /* handle ban */
+              }}
+            >
+              <ShieldAlert className="h-4 w-4 mr-2 text-yellow-500" />
+              {row.original.banned_until != null ? "Unban" : "Ban"}
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
       ),
     },
   ];
@@ -600,34 +610,38 @@ export default function UserManagement() {
           </Button>
         </div>
       </div>
-
       <DataTable
         columns={columns}
         data={filteredUsers}
         loading={isLoading}
         onRowClick={(user) => handleUserClick(user)}
       />
-
       {selectedUser && (
-        <UserDetailsSheet
+        <UserDetailSheet
           user={selectedUser}
           open={isSheetOpen}
           onOpenChange={setIsSheetOpen}
-          onUserUpdate={handleUserUpdate}
+          onUserUpdate={() => {}}
         />
       )}
-
       <AddUserDialog
         open={isAddUserOpen}
         onOpenChange={setIsAddUserOpen}
         onUserAdded={() => refetch()}
       />
-
       <InviteUserDialog
         open={isInviteUserOpen}
         onOpenChange={setIsInviteUserOpen}
         onUserInvited={() => refetch()}
       />
+      {selectedUser && (
+        <UserProfileSheet
+          open={isUpdateOpen}
+          onOpenChange={setIsUpdateOpen}
+          userData={selectedUser}
+          onSave={async () => {}}
+        />
+      )}
     </div>
   );
 }
diff --git a/sigap-website/app/_components/admin/users/user-stats.tsx b/sigap-website/app/(protected)/(admin)/dashboard/user-management/_components/user-stats.tsx
similarity index 85%
rename from sigap-website/app/_components/admin/users/user-stats.tsx
rename to sigap-website/app/(protected)/(admin)/dashboard/user-management/_components/user-stats.tsx
index a07241d..80b8881 100644
--- a/sigap-website/app/_components/admin/users/user-stats.tsx
+++ b/sigap-website/app/(protected)/(admin)/dashboard/user-management/_components/user-stats.tsx
@@ -28,23 +28,10 @@ function calculateUserStats(users: User[]) {
 }
 
 export function UserStats() {
-  const { isLoading, setIsLoading } = useNavigations();
-  const [users, setUsers] = useState<User[]>([]);
-
-  useEffect(() => {
-    const fetchUserData = async () => {
-      try {
-        setIsLoading(true);
-        const fetchedUsers = await fetchUsers();
-        setUsers(fetchedUsers);
-      } catch (error) {
-        toast.error("Failed to fetch users");
-      } finally {
-        setIsLoading(false);
-      }
-    };
-    fetchUserData();
-  }, [setIsLoading]);
+  const { data: users = [], isLoading } = useQuery({
+    queryKey: ["users"],
+    queryFn: fetchUsers,
+  });
 
   const stats = calculateUserStats(users);
 
diff --git a/sigap-website/app/(protected)/(admin)/dashboard/user-management/action.ts b/sigap-website/app/(protected)/(admin)/dashboard/user-management/action.ts
index 1f5a6d5..b7b90df 100644
--- a/sigap-website/app/(protected)/(admin)/dashboard/user-management/action.ts
+++ b/sigap-website/app/(protected)/(admin)/dashboard/user-management/action.ts
@@ -36,6 +36,8 @@ export async function fetchUsers(): Promise<User[]> {
     throw new Error("Users not found");
   }
 
+  console.log("fetchedUsers");
+
   return users;
 }
 
diff --git a/sigap-website/app/(protected)/(admin)/dashboard/user-management/page.tsx b/sigap-website/app/(protected)/(admin)/dashboard/user-management/page.tsx
index f8bbc7d..babdeb3 100644
--- a/sigap-website/app/(protected)/(admin)/dashboard/user-management/page.tsx
+++ b/sigap-website/app/(protected)/(admin)/dashboard/user-management/page.tsx
@@ -1,5 +1,5 @@
-import UserManagement from "@/app/_components/admin/users/user-management";
-import { UserStats } from "@/app/_components/admin/users/user-stats";
+import UserManagement from "@/app/(protected)/(admin)/dashboard/user-management/_components/user-management";
+import { UserStats } from "@/app/(protected)/(admin)/dashboard/user-management/_components/user-stats";
 
 export default function UsersPage() {
   return (
diff --git a/sigap-website/app/(protected)/(admin)/layout.tsx b/sigap-website/app/(protected)/(admin)/layout.tsx
index e6f1374..1a2809b 100644
--- a/sigap-website/app/(protected)/(admin)/layout.tsx
+++ b/sigap-website/app/(protected)/(admin)/layout.tsx
@@ -26,7 +26,7 @@ import { ThemeSwitcher } from "@/app/_components/theme-switcher";
 import { Separator } from "@/app/_components/ui/separator";
 import { InboxDrawer } from "@/app/_components/inbox-drawer";
 import FloatingActionSearchBar from "@/app/_components/floating-action-search-bar";
-import { AppSidebar } from "@/app/_components/admin/app-sidebar";
+import { AppSidebar } from "@/app/(protected)/(admin)/_components/admin/app-sidebar";
 import { createClient } from "@/utils/supabase/server";
 import { redirect } from "next/navigation";
 
diff --git a/sigap-website/app/_components/admin/users/users-table.tsx b/sigap-website/app/_components/admin/users/users-table.tsx
deleted file mode 100644
index 0a2f23a..0000000
--- a/sigap-website/app/_components/admin/users/users-table.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-// "use client"
-
-// import { useState } from "react"
-// import { DataTable } from "./data-table"
-// import { columns, User } from "./column"
-// import { useQuery } from "react-query"
-// import { getUsers } from "../../user-management/action"
-// import { UserDetailSheet } from "./sheet"
-
-
-// export function UsersTable() {
-//   const [selectedUser, setSelectedUser] = useState<User | null>(null)
-//   const [sheetOpen, setSheetOpen] = useState(false)
-
-//   const { data: users = [], isLoading } = useQuery({
-//     queryKey: ["users"],
-//     queryFn: getUsers,
-//   })
-
-//   const handleRowClick = (user: User) => {
-//     setSelectedUser(user)
-//     setSheetOpen(true)
-//   }
-
-//   if (isLoading) {
-//     return <div>Loading...</div>
-//   }
-
-//   return (
-//     <div className="w-full">
-//       <DataTable columns={columns} data={users} onRowClick={handleRowClick} />
-//       {selectedUser && <UserDetailSheet user={selectedUser} open={sheetOpen} onOpenChange={setSheetOpen} />}
-//     </div>
-//   )
-// }
-
diff --git a/sigap-website/app/layout.tsx b/sigap-website/app/layout.tsx
index 574c10e..21e4d5e 100644
--- a/sigap-website/app/layout.tsx
+++ b/sigap-website/app/layout.tsx
@@ -33,15 +33,16 @@ export default function RootLayout({
   return (
     <html lang="en" className={geistSans.className} suppressHydrationWarning>
       <body className="bg-background text-foreground">
-        <ThemeProvider
-          attribute="class"
-          defaultTheme="system"
-          enableSystem
-          disableTransitionOnChange
-        >
-          <main className="min-h-screen flex flex-col items-center">
-            <div className="flex-1 w-full gap-20 items-center">
-              {/* <nav className="w-full flex justify-center border-b border-b-foreground/10 h-16">
+        <ReactQueryProvider>
+          <ThemeProvider
+            attribute="class"
+            defaultTheme="system"
+            enableSystem
+            disableTransitionOnChange
+          >
+            <main className="min-h-screen flex flex-col items-center">
+              <div className="flex-1 w-full gap-20 items-center">
+                {/* <nav className="w-full flex justify-center border-b border-b-foreground/10 h-16">
                 <div className="w-full max-w-5xl flex justify-between items-center p-3 px-5 text-sm">
                   <div className="flex gap-5 items-center font-semibold">
                     <Link href={"/"}>
@@ -57,12 +58,12 @@ export default function RootLayout({
                   </div>
                 </div>
               </nav> */}
-              <div className="flex flex-col max-w-full p-0">
-                {children}
-                <Toaster theme="system" richColors position="top-right" />
-              </div>
+                <div className="flex flex-col max-w-full p-0">
+                  {children}
+                  <Toaster theme="system" richColors position="top-right" />
+                </div>
 
-              {/* <footer className="w-full flex items-center justify-center border-t mx-auto text-center text-xs gap-8 py-16 mt-auto">
+                {/* <footer className="w-full flex items-center justify-center border-t mx-auto text-center text-xs gap-8 py-16 mt-auto">
                 <p> 
                   Powered by{" "
                   <a
@@ -75,9 +76,10 @@ export default function RootLayout({
                   </a>
                 </p>
               </footer> */}
-            </div>
-          </main>
-        </ThemeProvider>
+              </div>
+            </main>
+          </ThemeProvider>
+        </ReactQueryProvider>
       </body>
     </html>
   );
diff --git a/sigap-website/package-lock.json b/sigap-website/package-lock.json
index 6442925..6ad84b5 100644
--- a/sigap-website/package-lock.json
+++ b/sigap-website/package-lock.json
@@ -47,6 +47,8 @@
         "zod": "^3.24.2"
       },
       "devDependencies": {
+        "@tanstack/eslint-plugin-query": "^5.67.2",
+        "@tanstack/react-query-devtools": "^5.67.2",
         "@types/node": "^22.10.2",
         "@types/react": "^19.0.2",
         "@types/react-dom": "19.0.2",
@@ -852,6 +854,205 @@
         "node": ">=18"
       }
     },
+    "node_modules/@eslint-community/eslint-utils": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.1.tgz",
+      "integrity": "sha512-s3O3waFUrMV8P/XaF/+ZTp1X9XBZW1a4B97ZnjQF2KYWaFD2A8KyFBsrsfSjEmjn3RGWAIuvlneuZm3CUK3jbA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "eslint-visitor-keys": "^3.4.3"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^6.0.0 || ^7.0.0 || >=8.0.0"
+      }
+    },
+    "node_modules/@eslint-community/regexpp": {
+      "version": "4.12.1",
+      "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.12.1.tgz",
+      "integrity": "sha512-CCZCDJuduB9OUkFkY2IgppNZMi2lBQgD2qzwXkEia16cge2pijY/aXi96CJMquDMn3nJdlPV1A5KrJEXwfLNzQ==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": "^12.0.0 || ^14.0.0 || >=16.0.0"
+      }
+    },
+    "node_modules/@eslint/config-array": {
+      "version": "0.19.2",
+      "resolved": "https://registry.npmjs.org/@eslint/config-array/-/config-array-0.19.2.tgz",
+      "integrity": "sha512-GNKqxfHG2ySmJOBSHg7LxeUx4xpuCoFjacmlCoYWEbaPXLwvfIjixRI12xCQZeULksQb23uiA8F40w5TojpV7w==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "peer": true,
+      "dependencies": {
+        "@eslint/object-schema": "^2.1.6",
+        "debug": "^4.3.1",
+        "minimatch": "^3.1.2"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
+    "node_modules/@eslint/config-array/node_modules/brace-expansion": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "node_modules/@eslint/config-array/node_modules/minimatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "dev": true,
+      "license": "ISC",
+      "peer": true,
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/@eslint/config-helpers": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/@eslint/config-helpers/-/config-helpers-0.1.0.tgz",
+      "integrity": "sha512-kLrdPDJE1ckPo94kmPPf9Hfd0DU0Jw6oKYrhe+pwSC0iTUInmTa+w6fw8sGgcfkFJGNdWOUeOaDM4quW4a7OkA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "peer": true,
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
+    "node_modules/@eslint/core": {
+      "version": "0.12.0",
+      "resolved": "https://registry.npmjs.org/@eslint/core/-/core-0.12.0.tgz",
+      "integrity": "sha512-cmrR6pytBuSMTaBweKoGMwu3EiHiEC+DoyupPmlZ0HxBJBtIxwe+j/E4XPIKNx+Q74c8lXKPwYawBf5glsTkHg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "peer": true,
+      "dependencies": {
+        "@types/json-schema": "^7.0.15"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
+    "node_modules/@eslint/eslintrc": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-3.3.0.tgz",
+      "integrity": "sha512-yaVPAiNAalnCZedKLdR21GOGILMLKPyqSLWaAjQFvYA2i/ciDi8ArYVr69Anohb6cH2Ukhqti4aFnYyPm8wdwQ==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "ajv": "^6.12.4",
+        "debug": "^4.3.2",
+        "espree": "^10.0.1",
+        "globals": "^14.0.0",
+        "ignore": "^5.2.0",
+        "import-fresh": "^3.2.1",
+        "js-yaml": "^4.1.0",
+        "minimatch": "^3.1.2",
+        "strip-json-comments": "^3.1.1"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/@eslint/eslintrc/node_modules/brace-expansion": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "node_modules/@eslint/eslintrc/node_modules/globals": {
+      "version": "14.0.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-14.0.0.tgz",
+      "integrity": "sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@eslint/eslintrc/node_modules/minimatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "dev": true,
+      "license": "ISC",
+      "peer": true,
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/@eslint/js": {
+      "version": "9.22.0",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.22.0.tgz",
+      "integrity": "sha512-vLFajx9o8d1/oL2ZkpMYbkLv8nDB6yaIwFNt7nI4+I80U/z03SxmfOMsLbvWr3p7C+Wnoh//aOu2pQW8cS0HCQ==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
+    "node_modules/@eslint/object-schema": {
+      "version": "2.1.6",
+      "resolved": "https://registry.npmjs.org/@eslint/object-schema/-/object-schema-2.1.6.tgz",
+      "integrity": "sha512-RBMg5FRL0I0gs51M/guSAj5/e14VQ4tpZnQNWwuDT66P14I43ItmPfIZRhO9fUVIPOAQXU47atlywZ/czoqFPA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "peer": true,
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
+    "node_modules/@eslint/plugin-kit": {
+      "version": "0.2.7",
+      "resolved": "https://registry.npmjs.org/@eslint/plugin-kit/-/plugin-kit-0.2.7.tgz",
+      "integrity": "sha512-JubJ5B2pJ4k4yGxaNLdbjrnk9d/iDz6/q8wOilpIowd6PJPgaxCuHBnBszq7Ce2TyMrywm5r4PnKm6V3iiZF+g==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "peer": true,
+      "dependencies": {
+        "@eslint/core": "^0.12.0",
+        "levn": "^0.4.1"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
     "node_modules/@floating-ui/core": {
       "version": "1.6.9",
       "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.9.tgz",
@@ -902,6 +1103,77 @@
         "react-hook-form": "^7.0.0"
       }
     },
+    "node_modules/@humanfs/core": {
+      "version": "0.19.1",
+      "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz",
+      "integrity": "sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "peer": true,
+      "engines": {
+        "node": ">=18.18.0"
+      }
+    },
+    "node_modules/@humanfs/node": {
+      "version": "0.16.6",
+      "resolved": "https://registry.npmjs.org/@humanfs/node/-/node-0.16.6.tgz",
+      "integrity": "sha512-YuI2ZHQL78Q5HbhDiBA1X4LmYdXCKCMQIfw0pw7piHJwyREFebJUvrQN4cMssyES6x+vfUbx1CIpaQUKYdQZOw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "peer": true,
+      "dependencies": {
+        "@humanfs/core": "^0.19.1",
+        "@humanwhocodes/retry": "^0.3.0"
+      },
+      "engines": {
+        "node": ">=18.18.0"
+      }
+    },
+    "node_modules/@humanfs/node/node_modules/@humanwhocodes/retry": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/retry/-/retry-0.3.1.tgz",
+      "integrity": "sha512-JBxkERygn7Bv/GbN5Rv8Ul6LVknS+5Bp6RgDC/O8gEBU/yeH5Ui5C/OlWrTb6qct7LjjfT6Re2NxB0ln0yYybA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "peer": true,
+      "engines": {
+        "node": ">=18.18"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/nzakas"
+      }
+    },
+    "node_modules/@humanwhocodes/module-importer": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz",
+      "integrity": "sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "peer": true,
+      "engines": {
+        "node": ">=12.22"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/nzakas"
+      }
+    },
+    "node_modules/@humanwhocodes/retry": {
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/retry/-/retry-0.4.2.tgz",
+      "integrity": "sha512-xeO57FpIu4p1Ri3Jq/EXq4ClRm86dVF2z/+kvFnyqVYRavTZmaFaUBbWCOuuTh0o/g7DSsk6kc2vrS4Vl5oPOQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "peer": true,
+      "engines": {
+        "node": ">=18.18"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/nzakas"
+      }
+    },
     "node_modules/@img/sharp-darwin-arm64": {
       "version": "0.33.5",
       "resolved": "https://registry.npmjs.org/@img/sharp-darwin-arm64/-/sharp-darwin-arm64-0.33.5.tgz",
@@ -2766,10 +3038,38 @@
         "react": ">= 16"
       }
     },
+    "node_modules/@tanstack/eslint-plugin-query": {
+      "version": "5.67.2",
+      "resolved": "https://registry.npmjs.org/@tanstack/eslint-plugin-query/-/eslint-plugin-query-5.67.2.tgz",
+      "integrity": "sha512-bWAA/0lYGBNv7lIV6tID2o5wC6yWUjkh9yx8ow9YMP3brxIhuUPdCAtJBhXL2nVzJTnc6FRrL401KFG5PPEkZg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/utils": "^8.18.1"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "eslint": "^8.57.0 || ^9.0.0"
+      }
+    },
     "node_modules/@tanstack/query-core": {
-      "version": "5.66.4",
-      "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.66.4.tgz",
-      "integrity": "sha512-skM/gzNX4shPkqmdTCSoHtJAPMTtmIJNS0hE+xwTTUVYwezArCT34NMermABmBVUg5Ls5aiUXEDXfqwR1oVkcA==",
+      "version": "5.67.2",
+      "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.67.2.tgz",
+      "integrity": "sha512-+iaFJ/pt8TaApCk6LuZ0WHS/ECVfTzrxDOEL9HH9Dayyb5OVuomLzDXeSaI2GlGT/8HN7bDGiRXDts3LV+u6ww==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
+    "node_modules/@tanstack/query-devtools": {
+      "version": "5.67.2",
+      "resolved": "https://registry.npmjs.org/@tanstack/query-devtools/-/query-devtools-5.67.2.tgz",
+      "integrity": "sha512-O4QXFFd7xqp6EX7sdvc9tsVO8nm4lpWBqwpgjpVLW5g7IeOY6VnS/xvs/YzbRhBVkKTMaJMOUGU7NhSX+YGoNg==",
+      "dev": true,
       "license": "MIT",
       "funding": {
         "type": "github",
@@ -2777,12 +3077,12 @@
       }
     },
     "node_modules/@tanstack/react-query": {
-      "version": "5.66.9",
-      "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.66.9.tgz",
-      "integrity": "sha512-NRI02PHJsP5y2gAuWKP+awamTIBFBSKMnO6UVzi03GTclmHHHInH5UzVgzi5tpu4+FmGfsdT7Umqegobtsp23A==",
+      "version": "5.67.2",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.67.2.tgz",
+      "integrity": "sha512-6Sa+BVNJWhAV4QHvIqM73norNeGRWGC3ftN0Ix87cmMvI215I1wyJ44KUTt/9a0V9YimfGcg25AITaYVel71Og==",
       "license": "MIT",
       "dependencies": {
-        "@tanstack/query-core": "5.66.4"
+        "@tanstack/query-core": "5.67.2"
       },
       "funding": {
         "type": "github",
@@ -2792,6 +3092,24 @@
         "react": "^18 || ^19"
       }
     },
+    "node_modules/@tanstack/react-query-devtools": {
+      "version": "5.67.2",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-query-devtools/-/react-query-devtools-5.67.2.tgz",
+      "integrity": "sha512-cmj2DxBc+/9btQ66n5xI8wTtAma2BLVa403K7zIYiguzJ/kV201jnGensYqJeu1Rd8uRMLLRM74jLVMLDWNRJA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@tanstack/query-devtools": "5.67.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "@tanstack/react-query": "^5.67.2",
+        "react": "^18 || ^19"
+      }
+    },
     "node_modules/@tanstack/react-table": {
       "version": "8.21.2",
       "resolved": "https://registry.npmjs.org/@tanstack/react-table/-/react-table-8.21.2.tgz",
@@ -2863,6 +3181,22 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/estree": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.6.tgz",
+      "integrity": "sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/@types/json-schema": {
+      "version": "7.0.15",
+      "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
+      "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true
+    },
     "node_modules/@types/node": {
       "version": "22.10.2",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-22.10.2.tgz",
@@ -2907,6 +3241,120 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@typescript-eslint/scope-manager": {
+      "version": "8.26.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.26.0.tgz",
+      "integrity": "sha512-E0ntLvsfPqnPwng8b8y4OGuzh/iIOm2z8U3S9zic2TeMLW61u5IH2Q1wu0oSTkfrSzwbDJIB/Lm8O3//8BWMPA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/types": "8.26.0",
+        "@typescript-eslint/visitor-keys": "8.26.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/types": {
+      "version": "8.26.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.26.0.tgz",
+      "integrity": "sha512-89B1eP3tnpr9A8L6PZlSjBvnJhWXtYfZhECqlBl1D9Lme9mHO6iWlsprBtVenQvY1HMhax1mWOjhtL3fh/u+pA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/typescript-estree": {
+      "version": "8.26.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.26.0.tgz",
+      "integrity": "sha512-tiJ1Hvy/V/oMVRTbEOIeemA2XoylimlDQ03CgPPNaHYZbpsc78Hmngnt+WXZfJX1pjQ711V7g0H7cSJThGYfPQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/types": "8.26.0",
+        "@typescript-eslint/visitor-keys": "8.26.0",
+        "debug": "^4.3.4",
+        "fast-glob": "^3.3.2",
+        "is-glob": "^4.0.3",
+        "minimatch": "^9.0.4",
+        "semver": "^7.6.0",
+        "ts-api-utils": "^2.0.1"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.8.4 <5.9.0"
+      }
+    },
+    "node_modules/@typescript-eslint/utils": {
+      "version": "8.26.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.26.0.tgz",
+      "integrity": "sha512-2L2tU3FVwhvU14LndnQCA2frYC8JnPDVKyQtWFPf8IYFMt/ykEN1bPolNhNbCVgOmdzTlWdusCTKA/9nKrf8Ig==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@eslint-community/eslint-utils": "^4.4.0",
+        "@typescript-eslint/scope-manager": "8.26.0",
+        "@typescript-eslint/types": "8.26.0",
+        "@typescript-eslint/typescript-estree": "8.26.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^8.57.0 || ^9.0.0",
+        "typescript": ">=4.8.4 <5.9.0"
+      }
+    },
+    "node_modules/@typescript-eslint/visitor-keys": {
+      "version": "8.26.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.26.0.tgz",
+      "integrity": "sha512-2z8JQJWAzPdDd51dRQ/oqIJxe99/hoLIqmf8RMCAJQtYDc535W/Jt2+RTP4bP0aKeBG1F65yjIZuczOXCmbWwg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/types": "8.26.0",
+        "eslint-visitor-keys": "^4.2.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/visitor-keys/node_modules/eslint-visitor-keys": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.0.tgz",
+      "integrity": "sha512-UyLnSehNt62FFhSwjZlHmeokpRK59rcz29j+F1/aDgbkbRTk7wIc9XzdoasMUbRNKDM0qQt/+BJ4BrpFeABemw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
     "node_modules/abbrev": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-2.0.0.tgz",
@@ -2943,6 +3391,17 @@
         "node": ">=0.4.0"
       }
     },
+    "node_modules/acorn-jsx": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
+      "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "peerDependencies": {
+        "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
+      }
+    },
     "node_modules/acorn-walk": {
       "version": "8.3.4",
       "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.3.4.tgz",
@@ -2956,6 +3415,32 @@
         "node": ">=0.4.0"
       }
     },
+    "node_modules/ajv": {
+      "version": "6.12.6",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/ajv/node_modules/fast-deep-equal": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true
+    },
     "node_modules/ansi-regex": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.1.0.tgz",
@@ -3008,6 +3493,14 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/argparse": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
+      "dev": true,
+      "license": "Python-2.0",
+      "peer": true
+    },
     "node_modules/aria-hidden": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/aria-hidden/-/aria-hidden-1.2.4.tgz",
@@ -3209,6 +3702,17 @@
         "node": ">=10.16.0"
       }
     },
+    "node_modules/callsites": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
+      "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/camelcase-css": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
@@ -3426,6 +3930,14 @@
         "node": ">= 6"
       }
     },
+    "node_modules/concat-map": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
+      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true
+    },
     "node_modules/config-chain": {
       "version": "1.1.13",
       "resolved": "https://registry.npmjs.org/config-chain/-/config-chain-1.1.13.tgz",
@@ -3549,6 +4061,14 @@
         }
       }
     },
+    "node_modules/deep-is": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
+      "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true
+    },
     "node_modules/deepmerge": {
       "version": "4.3.1",
       "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz",
@@ -3872,6 +4392,244 @@
         "node": ">=6"
       }
     },
+    "node_modules/escape-string-regexp": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/eslint": {
+      "version": "9.22.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.22.0.tgz",
+      "integrity": "sha512-9V/QURhsRN40xuHXWjV64yvrzMjcz7ZyNoF2jJFmy9j/SLk0u1OLSZgXi28MrXjymnjEGSR80WCdab3RGMDveQ==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@eslint-community/eslint-utils": "^4.2.0",
+        "@eslint-community/regexpp": "^4.12.1",
+        "@eslint/config-array": "^0.19.2",
+        "@eslint/config-helpers": "^0.1.0",
+        "@eslint/core": "^0.12.0",
+        "@eslint/eslintrc": "^3.3.0",
+        "@eslint/js": "9.22.0",
+        "@eslint/plugin-kit": "^0.2.7",
+        "@humanfs/node": "^0.16.6",
+        "@humanwhocodes/module-importer": "^1.0.1",
+        "@humanwhocodes/retry": "^0.4.2",
+        "@types/estree": "^1.0.6",
+        "@types/json-schema": "^7.0.15",
+        "ajv": "^6.12.4",
+        "chalk": "^4.0.0",
+        "cross-spawn": "^7.0.6",
+        "debug": "^4.3.2",
+        "escape-string-regexp": "^4.0.0",
+        "eslint-scope": "^8.3.0",
+        "eslint-visitor-keys": "^4.2.0",
+        "espree": "^10.3.0",
+        "esquery": "^1.5.0",
+        "esutils": "^2.0.2",
+        "fast-deep-equal": "^3.1.3",
+        "file-entry-cache": "^8.0.0",
+        "find-up": "^5.0.0",
+        "glob-parent": "^6.0.2",
+        "ignore": "^5.2.0",
+        "imurmurhash": "^0.1.4",
+        "is-glob": "^4.0.0",
+        "json-stable-stringify-without-jsonify": "^1.0.1",
+        "lodash.merge": "^4.6.2",
+        "minimatch": "^3.1.2",
+        "natural-compare": "^1.4.0",
+        "optionator": "^0.9.3"
+      },
+      "bin": {
+        "eslint": "bin/eslint.js"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://eslint.org/donate"
+      },
+      "peerDependencies": {
+        "jiti": "*"
+      },
+      "peerDependenciesMeta": {
+        "jiti": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/eslint-scope": {
+      "version": "8.3.0",
+      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-8.3.0.tgz",
+      "integrity": "sha512-pUNxi75F8MJ/GdeKtVLSbYg4ZI34J6C0C7sbL4YOp2exGwen7ZsuBqKzUhXd0qMQ362yET3z+uPwKeg/0C2XCQ==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "peer": true,
+      "dependencies": {
+        "esrecurse": "^4.3.0",
+        "estraverse": "^5.2.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/eslint-visitor-keys": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz",
+      "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/eslint/node_modules/brace-expansion": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "node_modules/eslint/node_modules/eslint-visitor-keys": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.0.tgz",
+      "integrity": "sha512-UyLnSehNt62FFhSwjZlHmeokpRK59rcz29j+F1/aDgbkbRTk7wIc9XzdoasMUbRNKDM0qQt/+BJ4BrpFeABemw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "peer": true,
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/eslint/node_modules/fast-deep-equal": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/eslint/node_modules/minimatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "dev": true,
+      "license": "ISC",
+      "peer": true,
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/espree": {
+      "version": "10.3.0",
+      "resolved": "https://registry.npmjs.org/espree/-/espree-10.3.0.tgz",
+      "integrity": "sha512-0QYC8b24HWY8zjRnDTL6RiHfDbAWn63qb4LMj1Z4b076A4une81+z03Kg7l7mn/48PUTqoLptSXez8oknU8Clg==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "peer": true,
+      "dependencies": {
+        "acorn": "^8.14.0",
+        "acorn-jsx": "^5.3.2",
+        "eslint-visitor-keys": "^4.2.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/espree/node_modules/eslint-visitor-keys": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.0.tgz",
+      "integrity": "sha512-UyLnSehNt62FFhSwjZlHmeokpRK59rcz29j+F1/aDgbkbRTk7wIc9XzdoasMUbRNKDM0qQt/+BJ4BrpFeABemw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "peer": true,
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/esquery": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.6.0.tgz",
+      "integrity": "sha512-ca9pw9fomFcKPvFLXhBKUK90ZvGibiGOvRJNbjljY7s7uq/5YO4BOzcYtJqExdx99rF6aAcnRxHmcUHcz6sQsg==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "peer": true,
+      "dependencies": {
+        "estraverse": "^5.1.0"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/esrecurse": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz",
+      "integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "peer": true,
+      "dependencies": {
+        "estraverse": "^5.2.0"
+      },
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/estraverse": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
+      "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "peer": true,
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/esutils": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
+      "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "peer": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/fast-deep-equal": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz",
@@ -3908,6 +4666,22 @@
         "node": ">= 6"
       }
     },
+    "node_modules/fast-json-stable-stringify": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
+      "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/fast-levenshtein": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz",
+      "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true
+    },
     "node_modules/fastq": {
       "version": "1.19.1",
       "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.19.1.tgz",
@@ -3918,6 +4692,20 @@
         "reusify": "^1.0.4"
       }
     },
+    "node_modules/file-entry-cache": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-8.0.0.tgz",
+      "integrity": "sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "flat-cache": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=16.0.0"
+      }
+    },
     "node_modules/fill-range": {
       "version": "7.1.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
@@ -3931,6 +4719,47 @@
         "node": ">=8"
       }
     },
+    "node_modules/find-up": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
+      "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "locate-path": "^6.0.0",
+        "path-exists": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/flat-cache": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-4.0.1.tgz",
+      "integrity": "sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "flatted": "^3.2.9",
+        "keyv": "^4.5.4"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
+    "node_modules/flatted": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.3.3.tgz",
+      "integrity": "sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg==",
+      "dev": true,
+      "license": "ISC",
+      "peer": true
+    },
     "node_modules/foreground-child": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.1.tgz",
@@ -4153,6 +4982,46 @@
       ],
       "license": "BSD-3-Clause"
     },
+    "node_modules/ignore": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
+      "integrity": "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/import-fresh": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz",
+      "integrity": "sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "parent-module": "^1.0.0",
+        "resolve-from": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/imurmurhash": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
+      "integrity": "sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=0.8.19"
+      }
+    },
     "node_modules/inherits": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
@@ -4344,6 +5213,20 @@
       "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
       "license": "MIT"
     },
+    "node_modules/js-yaml": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
+      "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "argparse": "^2.0.1"
+      },
+      "bin": {
+        "js-yaml": "bin/js-yaml.js"
+      }
+    },
     "node_modules/jsesc": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.1.0.tgz",
@@ -4357,6 +5240,30 @@
         "node": ">=6"
       }
     },
+    "node_modules/json-buffer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.1.tgz",
+      "integrity": "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/json-schema-traverse": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/json-stable-stringify-without-jsonify": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
+      "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true
+    },
     "node_modules/json5": {
       "version": "2.2.3",
       "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
@@ -4370,6 +5277,17 @@
         "node": ">=6"
       }
     },
+    "node_modules/keyv": {
+      "version": "4.5.4",
+      "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
+      "integrity": "sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "json-buffer": "3.0.1"
+      }
+    },
     "node_modules/leac": {
       "version": "0.6.0",
       "resolved": "https://registry.npmjs.org/leac/-/leac-0.6.0.tgz",
@@ -4379,6 +5297,21 @@
         "url": "https://ko-fi.com/killymxi"
       }
     },
+    "node_modules/levn": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
+      "integrity": "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "prelude-ls": "^1.2.1",
+        "type-check": "~0.4.0"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
     "node_modules/lilconfig": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz",
@@ -4399,6 +5332,31 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/locate-path": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
+      "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "p-locate": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/lodash.merge": {
+      "version": "4.6.2",
+      "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
+      "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true
+    },
     "node_modules/log-symbols": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-4.1.0.tgz",
@@ -4609,6 +5567,14 @@
         "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
       }
     },
+    "node_modules/natural-compare": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
+      "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true
+    },
     "node_modules/negotiator": {
       "version": "0.6.3",
       "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz",
@@ -4787,6 +5753,25 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/optionator": {
+      "version": "0.9.4",
+      "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz",
+      "integrity": "sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "deep-is": "^0.1.3",
+        "fast-levenshtein": "^2.0.6",
+        "levn": "^0.4.1",
+        "prelude-ls": "^1.2.1",
+        "type-check": "^0.4.0",
+        "word-wrap": "^1.2.5"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
     "node_modules/ora": {
       "version": "5.4.1",
       "resolved": "https://registry.npmjs.org/ora/-/ora-5.4.1.tgz",
@@ -4834,12 +5819,60 @@
         "node": ">=8"
       }
     },
+    "node_modules/p-limit": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
+      "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "yocto-queue": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/p-locate": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
+      "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "p-limit": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/package-json-from-dist": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/package-json-from-dist/-/package-json-from-dist-1.0.1.tgz",
       "integrity": "sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==",
       "license": "BlueOak-1.0.0"
     },
+    "node_modules/parent-module": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
+      "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "callsites": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/parseley": {
       "version": "0.12.1",
       "resolved": "https://registry.npmjs.org/parseley/-/parseley-0.12.1.tgz",
@@ -4853,6 +5886,17 @@
         "url": "https://ko-fi.com/killymxi"
       }
     },
+    "node_modules/path-exists": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
+      "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/path-key": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
@@ -5081,6 +6125,17 @@
       "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
       "license": "MIT"
     },
+    "node_modules/prelude-ls": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
+      "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
     "node_modules/prettier": {
       "version": "3.5.2",
       "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.5.2.tgz",
@@ -5132,6 +6187,17 @@
       "integrity": "sha512-vtK/94akxsTMhe0/cbfpR+syPuszcuwhqVjJq26CuNDgFGj682oRBXOP5MJpv2r7JtE8MsiepGIqvvOTBwn2vA==",
       "license": "ISC"
     },
+    "node_modules/punycode": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
+      "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -6143,6 +7209,17 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/resolve-from": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
+      "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/restore-cursor": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-3.1.0.tgz",
@@ -6589,6 +7666,20 @@
         "node": ">=8"
       }
     },
+    "node_modules/strip-json-comments": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
+      "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/styled-jsx": {
       "version": "5.1.6",
       "resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.1.6.tgz",
@@ -6762,6 +7853,19 @@
       "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==",
       "license": "MIT"
     },
+    "node_modules/ts-api-utils": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-2.0.1.tgz",
+      "integrity": "sha512-dnlgjFSVetynI8nzgJ+qF62efpglpWRk8isUEWZGWlJYySCTD6aKvbUDu+zbPeDakk3bg5H4XpitHukgfL1m9w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.12"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.8.4"
+      }
+    },
     "node_modules/ts-interface-checker": {
       "version": "0.1.13",
       "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
@@ -6826,6 +7930,20 @@
       "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
       "license": "0BSD"
     },
+    "node_modules/type-check": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
+      "integrity": "sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "prelude-ls": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
     "node_modules/typescript": {
       "version": "5.7.2",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.7.2.tgz",
@@ -6876,6 +7994,17 @@
         "browserslist": ">= 4.21.0"
       }
     },
+    "node_modules/uri-js": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
+      "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "peer": true,
+      "dependencies": {
+        "punycode": "^2.1.0"
+      }
+    },
     "node_modules/use-callback-ref": {
       "version": "1.3.3",
       "resolved": "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.3.3.tgz",
@@ -6997,6 +8126,17 @@
         "node": ">= 8"
       }
     },
+    "node_modules/word-wrap": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz",
+      "integrity": "sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/wrap-ansi": {
       "version": "8.1.0",
       "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz",
@@ -7139,6 +8279,20 @@
         "node": ">=6"
       }
     },
+    "node_modules/yocto-queue": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
+      "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/zod": {
       "version": "3.24.2",
       "resolved": "https://registry.npmjs.org/zod/-/zod-3.24.2.tgz",
diff --git a/sigap-website/package.json b/sigap-website/package.json
index 8400e27..d35234c 100644
--- a/sigap-website/package.json
+++ b/sigap-website/package.json
@@ -52,6 +52,8 @@
     "zod": "^3.24.2"
   },
   "devDependencies": {
+    "@tanstack/eslint-plugin-query": "^5.67.2",
+    "@tanstack/react-query-devtools": "^5.67.2",
     "@types/node": "^22.10.2",
     "@types/react": "^19.0.2",
     "@types/react-dom": "19.0.2",
diff --git a/sigap-website/providers/react-query-provider.tsx b/sigap-website/providers/react-query-provider.tsx
index f452338..770cae5 100644
--- a/sigap-website/providers/react-query-provider.tsx
+++ b/sigap-website/providers/react-query-provider.tsx
@@ -2,13 +2,32 @@
 
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { useState } from "react";
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 
 const ReactQueryProvider = ({ children }: { children: React.ReactNode }) => {
-  const [queryClient] = useState(() => new QueryClient());
+  const [queryClient] = useState(
+    () =>
+      new QueryClient({
+        defaultOptions: {
+          queries: {
+            // Pengaturan caching global
+            staleTime: 5 * 60 * 1000,
+            gcTime: 10 * 60 * 1000,
+            refetchOnWindowFocus: false,
+            retry: 1,
+            retryDelay: (attemptIndex) =>
+              Math.min(1000 * 2 ** attemptIndex, 30000), // Exponential backoff
+          },
+        },
+      })
+  );
 
   return (
-    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+    <QueryClientProvider client={queryClient}>
+      {children}
+      {process.env.NODE_ENV === "development" && <ReactQueryDevtools />}
+    </QueryClientProvider>
   );
 };
 
-export default ReactQueryProvider;
+export default ReactQueryProvider;
\ No newline at end of file