🚧 WIP

src/app/[orgId]/page.tsx

@@ -1,17 +1,15 @@
-import { verifySession } from "@app/lib/auth/verifySession";
-import UserProvider from "@app/providers/UserProvider";
-import { cache } from "react";
-import MemberResourcesPortal from "../../components/MemberResourcesPortal";
-import { GetOrgOverviewResponse } from "@server/routers/org/getOrgOverview";
-import { internal } from "@app/lib/api";
-import { AxiosResponse } from "axios";
-import { authCookieHeader } from "@app/lib/api/cookies";
-import { redirect } from "next/navigation";
 import { Layout } from "@app/components/Layout";
-import { ListUserOrgsResponse } from "@server/routers/org";
+import MemberResourcesPortal from "@app/components/MemberResourcesPortal";
+import { internal } from "@app/lib/api";
+import { authCookieHeader } from "@app/lib/api/cookies";
+import { verifySession } from "@app/lib/auth/verifySession";
 import { pullEnv } from "@app/lib/pullEnv";
-import EnvProvider from "@app/providers/EnvProvider";
+import UserProvider from "@app/providers/UserProvider";
-import { orgLangingNavItems } from "@app/app/navigation";
+import { ListUserOrgsResponse } from "@server/routers/org";
+import { GetOrgOverviewResponse } from "@server/routers/org/getOrgOverview";
+import { AxiosResponse } from "axios";
+import { redirect } from "next/navigation";
+import { cache } from "react";
 
 type OrgPageProps = {
     params: Promise<{ orgId: string }>;

src/app/layout.tsx

@@ -95,16 +95,16 @@ export default async function RootLayout({
                         strategy="afterInteractive"
                     />
                 )}
-                <TanstackQueryProvider>
+                <NextIntlClientProvider>
-                    <NextIntlClientProvider>
+                    <ThemeProvider
-                        <ThemeProvider
+                        attribute="class"
-                            attribute="class"
+                        defaultTheme="system"
-                            defaultTheme="system"
+                        enableSystem
-                            enableSystem
+                        disableTransitionOnChange
-                            disableTransitionOnChange
+                    >
-                        >
+                        <ThemeDataProvider colors={loadBrandingColors()}>
-                            <ThemeDataProvider colors={loadBrandingColors()}>
+                            <EnvProvider env={env}>
-                                <EnvProvider env={pullEnv()}>
+                                <TanstackQueryProvider>
                                     <LicenseStatusProvider
                                         licenseStatus={licenseStatus}
                                     >
@@ -124,11 +124,11 @@ export default async function RootLayout({
                                         </SupportStatusProvider>
                                     </LicenseStatusProvider>
                                     <Toaster />
-                                </EnvProvider>
+                                </TanstackQueryProvider>
-                            </ThemeDataProvider>
+                            </EnvProvider>
-                        </ThemeProvider>
+                        </ThemeDataProvider>
-                    </NextIntlClientProvider>
+                    </ThemeProvider>
-                </TanstackQueryProvider>
+                </NextIntlClientProvider>
             </body>
         </html>
     );

src/components/ClientResourcesTable.tsx

@@ -55,7 +55,7 @@ import CreateInternalResourceDialog from "@app/components/CreateInternalResource
 import EditInternalResourceDialog from "@app/components/EditInternalResourceDialog";
 import { useStoredColumnVisibility } from "@app/hooks/useStoredColumnVisibility";
 import { useStoredPageSize } from "@app/hooks/useStoredPageSize";
-import { siteQueries } from "@app/lib/queries";
+import { orgQueries, siteQueries } from "@app/lib/queries";
 import { useQuery } from "@tanstack/react-query";
 
 export type TargetHealth = {
@@ -135,9 +135,7 @@ export default function ClientResourcesTable({
         useState<InternalResourceRow | null>();
     const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false);
 
-    const { data: sites = [] } = useQuery(
+    const { data: sites = [] } = useQuery(orgQueries.sites({ orgId, api }));
-        siteQueries.listPerOrg({ orgId, api })
-    );
 
     const [internalSorting, setInternalSorting] = useState<SortingState>(
         defaultSort ? [defaultSort] : []

src/components/CreateInternalResourceDialog.tsx

@@ -1,15 +1,16 @@
 "use client";
 
-import { useEffect, useState } from "react";
-import { Button } from "@app/components/ui/button";
-import { Input } from "@app/components/ui/input";
 import {
-    Select,
+    Credenza,
-    SelectContent,
+    CredenzaBody,
-    SelectItem,
+    CredenzaContent,
-    SelectTrigger,
+    CredenzaDescription,
-    SelectValue
+    CredenzaFooter,
-} from "@app/components/ui/select";
+    CredenzaHeader,
+    CredenzaTitle
+} from "@app/components/Credenza";
+import { Tag, TagInput } from "@app/components/tags/tag-input";
+import { Button } from "@app/components/ui/button";
 import {
     Command,
     CommandEmpty,
@@ -18,15 +19,6 @@ import {
     CommandItem,
     CommandList
 } from "@app/components/ui/command";
-import {
-    Popover,
-    PopoverContent,
-    PopoverTrigger
-} from "@app/components/ui/popover";
-import { Check, ChevronsUpDown } from "lucide-react";
-import { useForm } from "react-hook-form";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { z } from "zod";
 import {
     Form,
     FormControl,
@@ -36,29 +28,36 @@ import {
     FormLabel,
     FormMessage
 } from "@app/components/ui/form";
+import { Input } from "@app/components/ui/input";
 import {
-    Credenza,
+    Popover,
-    CredenzaBody,
+    PopoverContent,
-    CredenzaClose,
+    PopoverTrigger
-    CredenzaContent,
+} from "@app/components/ui/popover";
-    CredenzaDescription,
+import {
-    CredenzaFooter,
+    Select,
-    CredenzaHeader,
+    SelectContent,
-    CredenzaTitle
+    SelectItem,
-} from "@app/components/Credenza";
+    SelectTrigger,
-import { toast } from "@app/hooks/useToast";
+    SelectValue
-import { useTranslations } from "next-intl";
+} from "@app/components/ui/select";
-import { createApiClient, formatAxiosError } from "@app/lib/api";
 import { useEnvContext } from "@app/hooks/useEnvContext";
-import { ListSitesResponse } from "@server/routers/site";
+import { toast } from "@app/hooks/useToast";
-import { ListRolesResponse } from "@server/routers/role";
+import { createApiClient, formatAxiosError } from "@app/lib/api";
-import { ListUsersResponse } from "@server/routers/user";
-import { ListClientsResponse } from "@server/routers/client/listClients";
 import { cn } from "@app/lib/cn";
-import { Tag, TagInput } from "@app/components/tags/tag-input";
+import { orgQueries } from "@app/lib/queries";
-import { Separator } from "@app/components/ui/separator";
+import { zodResolver } from "@hookform/resolvers/zod";
-import { AxiosResponse } from "axios";
+import { ListClientsResponse } from "@server/routers/client/listClients";
+import { ListSitesResponse } from "@server/routers/site";
+import { ListUsersResponse } from "@server/routers/user";
 import { UserType } from "@server/types/UserTypes";
+import { useQuery } from "@tanstack/react-query";
+import { AxiosResponse } from "axios";
+import { Check, ChevronsUpDown } from "lucide-react";
+import { useTranslations } from "next-intl";
+import { useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
 
 type Site = ListSitesResponse["sites"][0];
 
@@ -167,15 +166,38 @@ export default function CreateInternalResourceDialog({
 
     type FormData = z.infer<typeof formSchema>;
 
-    const [allRoles, setAllRoles] = useState<{ id: string; text: string }[]>(
+    const { data: rolesResponse = [] } = useQuery(orgQueries.roles({ orgId }));
-        []
+    const { data: usersResponse = [] } = useQuery(orgQueries.users({ orgId }));
+    const { data: clientsResponse = [] } = useQuery(
+        orgQueries.clients({
+            orgId,
+            filters: {
+                filter: "machine"
+            }
+        })
     );
-    const [allUsers, setAllUsers] = useState<{ id: string; text: string }[]>(
+
-        []
+    const allRoles = rolesResponse
-    );
+        .map((role) => ({
-    const [allClients, setAllClients] = useState<
+            id: role.roleId.toString(),
-        { id: string; text: string }[]
+            text: role.name
-    >([]);
+        }))
+        .filter((role) => role.text !== "Admin");
+
+    const allUsers = usersResponse.map((user) => ({
+        id: user.id.toString(),
+        text: `${user.email || user.username}${user.type !== UserType.Internal ? ` (${user.idpName})` : ""}`
+    }));
+
+    const allClients = clientsResponse
+        .filter((client) => !client.userId)
+        .map((client) => ({
+            id: client.clientId.toString(),
+            text: client.name
+        }));
+
+    const hasMachineClients = allClients.length > 0;
+
     const [activeRolesTagIndex, setActiveRolesTagIndex] = useState<
         number | null
     >(null);
@@ -185,7 +207,6 @@ export default function CreateInternalResourceDialog({
     const [activeClientsTagIndex, setActiveClientsTagIndex] = useState<
         number | null
     >(null);
-    const [hasMachineClients, setHasMachineClients] = useState(false);
 
     const availableSites = sites.filter(
         (site) => site.type === "newt" && site.subnet
@@ -228,60 +249,6 @@ export default function CreateInternalResourceDialog({
         }
     }, [open]);
 
-    useEffect(() => {
-        const fetchRolesUsersAndClients = async () => {
-            try {
-                const [rolesResponse, usersResponse, clientsResponse] =
-                    await Promise.all([
-                        api.get<AxiosResponse<ListRolesResponse>>(
-                            `/org/${orgId}/roles`
-                        ),
-                        api.get<AxiosResponse<ListUsersResponse>>(
-                            `/org/${orgId}/users`
-                        ),
-                        api.get<AxiosResponse<ListClientsResponse>>(
-                            `/org/${orgId}/clients?filter=machine&limit=1000`
-                        )
-                    ]);
-
-                setAllRoles(
-                    rolesResponse.data.data.roles
-                        .map((role) => ({
-                            id: role.roleId.toString(),
-                            text: role.name
-                        }))
-                        .filter((role) => role.text !== "Admin")
-                );
-
-                setAllUsers(
-                    usersResponse.data.data.users.map((user) => ({
-                        id: user.id.toString(),
-                        text: `${user.email || user.username}${user.type !== UserType.Internal ? ` (${user.idpName})` : ""}`
-                    }))
-                );
-
-                const machineClients = clientsResponse.data.data.clients
-                    .filter((client) => !client.userId)
-                    .map((client) => ({
-                        id: client.clientId.toString(),
-                        text: client.name
-                    }));
-
-                setAllClients(machineClients);
-                setHasMachineClients(machineClients.length > 0);
-            } catch (error) {
-                console.error(
-                    "Error fetching roles, users, and clients:",
-                    error
-                );
-            }
-        };
-
-        if (open) {
-            fetchRolesUsersAndClients();
-        }
-    }, [open, orgId]);
-
     const handleSubmit = async (data: FormData) => {
         setIsSubmitting(true);
         try {

src/components/EditInternalResourceDialog.tsx

@@ -45,6 +45,8 @@ import { ListClientsResponse } from "@server/routers/client/listClients";
 import { Tag, TagInput } from "@app/components/tags/tag-input";
 import { AxiosResponse } from "axios";
 import { UserType } from "@server/types/UserTypes";
+import { useQuery } from "@tanstack/react-query";
+import { orgQueries, resourceQueries } from "@app/lib/queries";
 
 type InternalResourceData = {
     id: number;
@@ -155,15 +157,43 @@ export default function EditInternalResourceDialog({
 
     type FormData = z.infer<typeof formSchema>;
 
-    const [allRoles, setAllRoles] = useState<{ id: string; text: string }[]>(
+    const { data: rolesResponse = [] } = useQuery(orgQueries.roles({ orgId }));
-        []
+
+    const allRoles = rolesResponse
+        .map((role) => ({
+            id: role.roleId.toString(),
+            text: role.name
+        }))
+        .filter((role) => role.text !== "Admin");
+
+    const { data: usersResponse = [] } = useQuery(orgQueries.users({ orgId }));
+    const { data: existingClients = [] } = useQuery(
+        resourceQueries.resourceUsers({ resourceId: resource.id })
     );
-    const [allUsers, setAllUsers] = useState<{ id: string; text: string }[]>(
+    const { data: clientsResponse = [] } = useQuery(
-        []
+        orgQueries.clients({
+            orgId,
+            filters: {
+                filter: "machine"
+            }
+        })
     );
-    const [allClients, setAllClients] = useState<
+
-        { id: string; text: string }[]
+    const allUsers = usersResponse.map((user) => ({
-    >([]);
+        id: user.id.toString(),
+        text: `${user.email || user.username}${user.type !== UserType.Internal ? ` (${user.idpName})` : ""}`
+    }));
+
+    const allClients = clientsResponse
+        .filter((client) => !client.userId)
+        .map((client) => ({
+            id: client.clientId.toString(),
+            text: client.name
+        }));
+
+    const hasMachineClients =
+        allClients.length > 0 || existingClients.length > 0;
+
     const [activeRolesTagIndex, setActiveRolesTagIndex] = useState<
         number | null
     >(null);
@@ -174,7 +204,6 @@ export default function EditInternalResourceDialog({
         number | null
     >(null);
     const [loadingRolesUsers, setLoadingRolesUsers] = useState(false);
-    const [hasMachineClients, setHasMachineClients] = useState(false);
 
     const form = useForm<FormData>({
         resolver: zodResolver(formSchema),
@@ -194,136 +223,116 @@ export default function EditInternalResourceDialog({
 
     const mode = form.watch("mode");
 
-    const fetchRolesAndUsers = async () => {
+    // const fetchRolesAndUsers = async () => {
-        setLoadingRolesUsers(true);
+    //     setLoadingRolesUsers(true);
-        try {
+    //     try {
-            const [
+    //         const [
-                rolesResponse,
+    //             // rolesResponse,
-                resourceRolesResponse,
+    //             resourceRolesResponse,
-                usersResponse,
+    //             usersResponse,
-                resourceUsersResponse,
+    //             resourceUsersResponse,
-                clientsResponse
+    //             clientsResponse
-            ] = await Promise.all([
+    //         ] = await Promise.all([
-                api.get<AxiosResponse<ListRolesResponse>>(
+    //             // api.get<AxiosResponse<ListRolesResponse>>(
-                    `/org/${orgId}/roles`
+    //             //     `/org/${orgId}/roles`
-                ),
+    //             // ),
-                api.get<AxiosResponse<ListSiteResourceRolesResponse>>(
+    //             api.get<AxiosResponse<ListSiteResourceRolesResponse>>(
-                    `/site-resource/${resource.id}/roles`
+    //                 `/site-resource/${resource.id}/roles`
-                ),
+    //             ),
-                api.get<AxiosResponse<ListUsersResponse>>(
+    //             api.get<AxiosResponse<ListUsersResponse>>(
-                    `/org/${orgId}/users`
+    //                 `/org/${orgId}/users`
-                ),
+    //             ),
-                api.get<AxiosResponse<ListSiteResourceUsersResponse>>(
+    //             api.get<AxiosResponse<ListSiteResourceUsersResponse>>(
-                    `/site-resource/${resource.id}/users`
+    //                 `/site-resource/${resource.id}/users`
-                ),
+    //             ),
-                api.get<AxiosResponse<ListClientsResponse>>(
+    //             api.get<AxiosResponse<ListClientsResponse>>(
-                    `/org/${orgId}/clients?filter=machine&limit=1000`
+    //                 `/org/${orgId}/clients?filter=machine&limit=1000`
-                )
+    //             )
-            ]);
+    //         ]);
 
-            let resourceClientsResponse: AxiosResponse<
+    //         let resourceClientsResponse: AxiosResponse<
-                AxiosResponse<ListSiteResourceClientsResponse>
+    //             AxiosResponse<ListSiteResourceClientsResponse>
-            >;
+    //         >;
-            try {
+    //         try {
-                resourceClientsResponse = await api.get<
+    //             resourceClientsResponse = await api.get<
-                    AxiosResponse<ListSiteResourceClientsResponse>
+    //                 AxiosResponse<ListSiteResourceClientsResponse>
-                >(`/site-resource/${resource.id}/clients`);
+    //             >(`/site-resource/${resource.id}/clients`);
-            } catch {
+    //         } catch {
-                resourceClientsResponse = {
+    //             resourceClientsResponse = {
-                    data: {
+    //                 data: {
-                        data: {
+    //                     data: {
-                            clients: []
+    //                         clients: []
-                        }
+    //                     }
-                    },
+    //                 },
-                    status: 200,
+    //                 status: 200,
-                    statusText: "OK",
+    //                 statusText: "OK",
-                    headers: {} as any,
+    //                 headers: {} as any,
-                    config: {} as any
+    //                 config: {} as any
-                } as any;
+    //             } as any;
-            }
+    //         }
 
-            setAllRoles(
+    //         // setAllRoles(
-                rolesResponse.data.data.roles
+    //         //     rolesResponse.data.data.roles
-                    .map((role) => ({
+    //         //         .map((role) => ({
-                        id: role.roleId.toString(),
+    //         //             id: role.roleId.toString(),
-                        text: role.name
+    //         //             text: role.name
-                    }))
+    //         //         }))
-                    .filter((role) => role.text !== "Admin")
+    //         //         .filter((role) => role.text !== "Admin")
-            );
+    //         // );
 
-            form.setValue(
+    //         form.setValue(
-                "roles",
+    //             "roles",
-                resourceRolesResponse.data.data.roles
+    //             resourceRolesResponse.data.data.roles
-                    .map((i) => ({
+    //                 .map((i) => ({
-                        id: i.roleId.toString(),
+    //                     id: i.roleId.toString(),
-                        text: i.name
+    //                     text: i.name
-                    }))
+    //                 }))
-                    .filter((role) => role.text !== "Admin")
+    //                 .filter((role) => role.text !== "Admin")
-            );
+    //         );
 
-            setAllUsers(
+    //         form.setValue(
-                usersResponse.data.data.users.map((user) => ({
+    //             "users",
-                    id: user.id.toString(),
+    //             resourceUsersResponse.data.data.users.map((i) => ({
-                    text: `${user.email || user.username}${user.type !== UserType.Internal ? ` (${user.idpName})` : ""}`
+    //                 id: i.userId.toString(),
-                }))
+    //                 text: `${i.email || i.username}${i.type !== UserType.Internal ? ` (${i.idpName})` : ""}`
-            );
+    //             }))
+    //         );
 
-            form.setValue(
+    //         const machineClients = clientsResponse.data.data.clients
-                "users",
+    //             .filter((client) => !client.userId)
-                resourceUsersResponse.data.data.users.map((i) => ({
+    //             .map((client) => ({
-                    id: i.userId.toString(),
+    //                 id: client.clientId.toString(),
-                    text: `${i.email || i.username}${i.type !== UserType.Internal ? ` (${i.idpName})` : ""}`
+    //                 text: client.name
-                }))
+    //             }));
-            );
 
-            const machineClients = clientsResponse.data.data.clients
+    //         setAllClients(machineClients);
-                .filter((client) => !client.userId)
-                .map((client) => ({
-                    id: client.clientId.toString(),
-                    text: client.name
-                }));
 
-            setAllClients(machineClients);
+    //         const existingClients =
+    //             resourceClientsResponse.data.data.clients.map(
+    //                 (c: { clientId: number; name: string }) => ({
+    //                     id: c.clientId.toString(),
+    //                     text: c.name
+    //                 })
+    //             );
 
-            const existingClients =
+    //         form.setValue("clients", existingClients);
-                resourceClientsResponse.data.data.clients.map(
-                    (c: { clientId: number; name: string }) => ({
-                        id: c.clientId.toString(),
-                        text: c.name
-                    })
-                );
 
-            form.setValue("clients", existingClients);
+    //         // Show clients tag input if there are machine clients OR existing client access
+    //         setHasMachineClients(
+    //             machineClients.length > 0 || existingClients.length > 0
+    //         );
+    //     } catch (error) {
+    //         console.error("Error fetching roles, users, and clients:", error);
+    //     } finally {
+    //         setLoadingRolesUsers(false);
+    //     }
+    // };
 
-            // Show clients tag input if there are machine clients OR existing client access
+    // useEffect(() => {
-            setHasMachineClients(
+    //     if (open) {
-                machineClients.length > 0 || existingClients.length > 0
+    //         fetchRolesAndUsers();
-            );
+    //     }
-        } catch (error) {
+    // }, [open, resource]);
-            console.error("Error fetching roles, users, and clients:", error);
-        } finally {
-            setLoadingRolesUsers(false);
-        }
-    };
-
-    useEffect(() => {
-        if (open) {
-            form.reset({
-                name: resource.name,
-                mode: resource.mode || "host",
-                // protocol: (resource.protocol as "tcp" | "udp" | null | undefined) ?? undefined,
-                // proxyPort: resource.proxyPort ?? undefined,
-                destination: resource.destination || "",
-                // destinationPort: resource.destinationPort ?? undefined,
-                alias: resource.alias ?? null,
-                roles: [],
-                users: [],
-                clients: []
-            });
-            fetchRolesAndUsers();
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [open, resource]);
 
     const handleSubmit = async (data: FormData) => {
         setIsSubmitting(true);
@@ -391,7 +400,27 @@ export default function EditInternalResourceDialog({
     };
 
     return (
-        <Credenza open={open} onOpenChange={setOpen}>
+        <Credenza
+            open={open}
+            onOpenChange={(open) => {
+                if (!open) {
+                    // reset only on close
+                    form.reset({
+                        name: resource.name,
+                        mode: resource.mode || "host",
+                        // protocol: (resource.protocol as "tcp" | "udp" | null | undefined) ?? undefined,
+                        // proxyPort: resource.proxyPort ?? undefined,
+                        destination: resource.destination || "",
+                        // destinationPort: resource.destinationPort ?? undefined,
+                        alias: resource.alias ?? null,
+                        roles: [],
+                        users: [],
+                        clients: []
+                    });
+                }
+                setOpen(open);
+            }}
+        >
             <CredenzaContent className="max-w-2xl">
                 <CredenzaHeader>
                     <CredenzaTitle>

src/components/TanstackQueryProvider.tsx

@@ -3,19 +3,29 @@ import * as React from "react";
 import { QueryClientProvider } from "@tanstack/react-query";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import { QueryClient } from "@tanstack/react-query";
+import { useEnvContext } from "@app/hooks/useEnvContext";
+import { createApiClient } from "@app/lib/api";
+import { durationToMs } from "@app/lib/durationToMs";
 
 export type ReactQueryProviderProps = {
     children: React.ReactNode;
 };
 
 export function TanstackQueryProvider({ children }: ReactQueryProviderProps) {
+    const api = createApiClient(useEnvContext());
     const [queryClient] = React.useState(
         () =>
             new QueryClient({
                 defaultOptions: {
                     queries: {
                         retry: 2, // retry twice by default
-                        staleTime: 5 * 60 * 1_000 // 5 minutes
+                        staleTime: durationToMs(5, "minutes"),
+                        meta: {
+                            api
+                        }
+                    },
+                    mutations: {
+                        meta: { api }
                     }
                 }
             })

src/lib/queries.ts

@@ -1,10 +1,18 @@
-import { keepPreviousData, queryOptions } from "@tanstack/react-query";
-import { durationToMs } from "./durationToMs";
 import { build } from "@server/build";
-import { remote } from "./api";
+import type { ListClientsResponse } from "@server/routers/client";
-import type ResponseT from "@server/types/Response";
+import type { ListRolesResponse } from "@server/routers/role";
 import type { ListSitesResponse } from "@server/routers/site";
-import type { AxiosInstance, AxiosResponse } from "axios";
+import type {
+    ListSiteResourceRolesResponse,
+    ListSiteResourceUsersResponse
+} from "@server/routers/siteResource";
+import type { ListUsersResponse } from "@server/routers/user";
+import type ResponseT from "@server/types/Response";
+import { keepPreviousData, queryOptions } from "@tanstack/react-query";
+import type { AxiosResponse } from "axios";
+import z from "zod";
+import { remote } from "./api";
+import { durationToMs } from "./durationToMs";
 
 export type ProductUpdate = {
     link: string | null;
@@ -68,15 +76,89 @@ export const productUpdatesQueries = {
         })
 };
 
-export const siteQueries = {
+export const clientFilterSchema = z.object({
-    listPerOrg: ({ orgId, api }: { orgId: string; api: AxiosInstance }) =>
+    filter: z.enum(["machine", "user"]),
+    limit: z.int().prefault(1000).optional()
+});
+
+export const orgQueries = {
+    clients: ({
+        orgId,
+        filters
+    }: {
+        orgId: string;
+        filters: z.infer<typeof clientFilterSchema>;
+    }) =>
         queryOptions({
-            queryKey: ["SITE_PER_ORG", orgId] as const,
+            queryKey: ["ORG", orgId, "CLIENTS", filters] as const,
-            queryFn: async ({ signal }) => {
+            queryFn: async ({ signal, meta }) => {
-                const res = await api.get<AxiosResponse<ListSitesResponse>>(
+                const sp = new URLSearchParams({
-                    `/org/${orgId}/sites`
+                    ...filters,
-                );
+                    limit: (filters.limit ?? 1000).toString()
+                });
+
+                const res = await meta!.api.get<
+                    AxiosResponse<ListClientsResponse>
+                >(`/org/${orgId}/clients?${sp.toString()}`, { signal });
+
+                return res.data.data.clients;
+            }
+        }),
+    users: ({ orgId }: { orgId: string }) =>
+        queryOptions({
+            queryKey: ["ORG", orgId, "USERS"] as const,
+            queryFn: async ({ signal, meta }) => {
+                const res = await meta!.api.get<
+                    AxiosResponse<ListUsersResponse>
+                >(`/org/${orgId}/users`, { signal });
+
+                return res.data.data.users;
+            }
+        }),
+    roles: ({ orgId }: { orgId: string }) =>
+        queryOptions({
+            queryKey: ["ORG", orgId, "ROLES"] as const,
+            queryFn: async ({ signal, meta }) => {
+                const res = await meta!.api.get<
+                    AxiosResponse<ListRolesResponse>
+                >(`/org/${orgId}/roles`, { signal });
+
+                return res.data.data.roles;
+            }
+        }),
+
+    sites: ({ orgId }: { orgId: string }) =>
+        queryOptions({
+            queryKey: ["ORG", orgId, "SITES"] as const,
+            queryFn: async ({ signal, meta }) => {
+                const res = await meta!.api.get<
+                    AxiosResponse<ListSitesResponse>
+                >(`/org/${orgId}/sites`, { signal });
                 return res.data.data.sites;
             }
         })
 };
+
+export const resourceQueries = {
+    resourceUsers: ({ resourceId }: { resourceId: number }) =>
+        queryOptions({
+            queryKey: ["RESOURCES", resourceId, "USERS"] as const,
+            queryFn: async ({ signal, meta }) => {
+                const res = await meta!.api.get<
+                    AxiosResponse<ListSiteResourceUsersResponse>
+                >(`/site-resource/${resourceId}/users`, { signal });
+                return res.data.data.users;
+            }
+        }),
+    resourceRoles: ({ resourceId }: { resourceId: number }) =>
+        queryOptions({
+            queryKey: ["RESOURCES", resourceId, "ROLES"] as const,
+            queryFn: async ({ signal, meta }) => {
+                const res = await meta!.api.get<
+                    AxiosResponse<ListSiteResourceRolesResponse>
+                >(`/site-resource/${resourceId}/roles`, { signal });
+
+                return res.data.data.roles;
+            }
+        })
+};

src/types/tanstack-query.d.ts

@@ -0,0 +1,13 @@
+import "@tanstack/react-query";
+import type { AxiosInstance } from "axios";
+
+interface Meta extends Record<string, unknown> {
+    api: AxiosInstance;
+}
+
+declare module "@tanstack/react-query" {
+    interface Register {
+        queryMeta: Meta;
+        mutationMeta: Meta;
+    }
+}