fixed query

apps/Frontend/src/pages/settings-page.tsx

@@ -10,8 +10,8 @@ import { z } from "zod";
 import { apiRequest, queryClient } from "@/lib/queryClient";
 import { StaffForm } from "@/components/staffs/staff-form";
 import { DeleteConfirmationDialog } from "@/components/ui/deleteDialog";
-import { CredentialForm } from "@/components/settings/InsuranceCredForm";
 import { CredentialTable } from "@/components/settings/insuranceCredTable";
+import { useAuth } from "@/hooks/use-auth";
 
 // Correctly infer Staff type from zod schema
 type Staff = z.infer<typeof StaffUncheckedCreateInputObjectSchema>;
@@ -221,42 +221,23 @@ export default function SettingsPage() {
     );
 
   // MANAGE USER
-
   const [usernameUser, setUsernameUser] = useState("");
 
   //fetch user
-  const {
+  const { user } = useAuth();
-    data: currentUser,
-    isLoading: isUserLoading,
-    isError: isUserError,
-    error: userError,
-  } = useQuery({
-    queryKey: ["/api/users/"],
-    queryFn: async () => {
-      const res = await apiRequest("GET", "/api/users/");
-      if (!res.ok) throw new Error("Failed to fetch user");
-      return res.json();
-    },
-  });
-
-  // Populate fields after fetch
   useEffect(() => {
-    if (currentUser) {
+    if (user?.username) {
-      setUsernameUser(currentUser.username);
+      setUsernameUser(user.username);
     }
-  }, [currentUser]);
+  }, [user]);
 
   //update user mutation
   const updateUserMutate = useMutation({
     mutationFn: async (
       updates: Partial<{ username: string; password: string }>
     ) => {
-      if (!currentUser?.id) throw new Error("User not loaded");
+      if (!user?.id) throw new Error("User not loaded");
-      const res = await apiRequest(
+      const res = await apiRequest("PUT", `/api/users/${user.id}`, updates);
-        "PUT",
-        `/api/users/${currentUser.id}`,
-        updates
-      );
       if (!res.ok) {
         const errorData = await res.json().catch(() => null);
         throw new Error(errorData?.error || "Failed to update user");
@@ -280,7 +261,6 @@ export default function SettingsPage() {
     },
   });
 
-
   return (
     <div className="flex h-screen overflow-hidden bg-gray-100">
       <Sidebar
@@ -339,63 +319,54 @@ export default function SettingsPage() {
           <Card className="mt-6">
             <CardContent className="space-y-4 py-6">
               <h3 className="text-lg font-semibold">User Settings</h3>
+              <form
+                className="space-y-4"
+                onSubmit={(e) => {
+                  e.preventDefault();
+                  const formData = new FormData(e.currentTarget);
+                  const password =
+                    formData.get("password")?.toString().trim() || undefined;
 
-              {isUserLoading ? (
+                  updateUserMutate.mutate({
-                <p>Loading user...</p>
+                    username: usernameUser?.trim() || undefined,
-              ) : isUserError ? (
+                    password: password || undefined,
-                <p className="text-red-500">{(userError as Error)?.message}</p>
+                  });
-              ) : (
+                }}
-                <form
+              >
-                  className="space-y-4"
+                <div>
-                  onSubmit={(e) => {
+                  <label className="block text-sm font-medium">Username</label>
-                    e.preventDefault();
+                  <input
-                    const formData = new FormData(e.currentTarget);
+                    type="text"
-                    const password =
+                    name="username"
-                      formData.get("password")?.toString().trim() || undefined;
+                    value={usernameUser}
+                    onChange={(e) => setUsernameUser(e.target.value)}
+                    className="mt-1 p-2 border rounded w-full"
+                  />
+                </div>
 
-                    updateUserMutate.mutate({
+                <div>
-                      username: usernameUser?.trim() || undefined,
+                  <label className="block text-sm font-medium">
-                      password: password || undefined,
+                    New Password
-                    });
+                  </label>
-                  }}
+                  <input
+                    type="password"
+                    name="password"
+                    className="mt-1 p-2 border rounded w-full"
+                    placeholder="••••••••"
+                  />
+                  <p className="text-xs text-gray-500 mt-1">
+                    Leave blank to keep current password.
+                  </p>
+                </div>
+
+                <button
+                  type="submit"
+                  className="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700"
+                  disabled={updateUserMutate.isPending}
                 >
-                  <div>
+                  {updateUserMutate.isPending ? "Saving..." : "Save Changes"}
-                    <label className="block text-sm font-medium">
+                </button>
-                      Username
+              </form>
-                    </label>
-                    <input
-                      type="text"
-                      name="username"
-                      value={usernameUser}
-                      onChange={(e) => setUsernameUser(e.target.value)}
-                      className="mt-1 p-2 border rounded w-full"
-                    />
-                  </div>
-
-                  <div>
-                    <label className="block text-sm font-medium">
-                      New Password
-                    </label>
-                    <input
-                      type="password"
-                      name="password"
-                      className="mt-1 p-2 border rounded w-full"
-                      placeholder="••••••••"
-                    />
-                    <p className="text-xs text-gray-500 mt-1">
-                      Leave blank to keep current password.
-                    </p>
-                  </div>
-
-                  <button
-                    type="submit"
-                    className="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700"
-                    disabled={updateUserMutate.isPending}
-                  >
-                    {updateUserMutate.isPending ? "Saving..." : "Save Changes"}
-                  </button>
-                </form>
-              )}
             </CardContent>
           </Card>