feat(lst): added update settings into the entire app

frontend/src/components/admin/settings/SettingsPage.tsx

@@ -1,21 +1,24 @@
 import {LstCard} from "@/components/extendedUI/LstCard";
+import {Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow} from "@/components/ui/table";
 import {useSessionStore} from "@/lib/store/sessionStore";
 import {useModuleStore} from "@/lib/store/useModuleStore";
 import {useQuery} from "@tanstack/react-query";
 import {useRouter} from "@tanstack/react-router";
-import axios from "axios";
+import {ChangeSetting} from "./SettingForm";
+import {getSettings} from "@/utils/querys/settings";
+
+export type Settings = {
+    settings_id?: string;
+    name?: string;
+    value?: string;
+    description?: string;
+};
 
 export default function SettingsPage() {
-    const token = localStorage.getItem("auth_token");
-    const {user} = useSessionStore();
+    const {user, token} = useSessionStore();
     const {modules} = useModuleStore();
     const router = useRouter();
 
-    const fetchSettings = async () => {
-        const {data} = await axios.get("/api/server/settings", {headers: {Authorization: `Bearer ${token}`}});
-        return data.data;
-    };
-
     const adminModule = modules.filter((n) => n.name === "admin");
     const userLevel = user?.roles.filter((r) => r.module_id === adminModule[0].module_id) || [];
 
@@ -23,12 +26,7 @@ export default function SettingsPage() {
         router.navigate({to: "/"});
     }
 
-    const {data, isError, error, isLoading} = useQuery({
-        queryKey: ["settings"],
-        queryFn: fetchSettings,
-        enabled: !!token,
-        refetchOnWindowFocus: true,
-    });
+    const {data, isError, error, isLoading} = useQuery(getSettings(token ?? ""));
 
     if (isLoading) {
         return <div>Loading.....</div>;
@@ -38,10 +36,29 @@ export default function SettingsPage() {
     }
 
     return (
-        <div>
-            {data.map((i: any) => {
-                return <LstCard key={i.settings_id}>{i.name}</LstCard>;
-            })}
-        </div>
+        <LstCard className="m-2 flex place-content-center w-dvh">
+            <Table>
+                <TableCaption>All Settings</TableCaption>
+                <TableHeader>
+                    <TableRow>
+                        <TableHead>Name</TableHead>
+                        <TableHead>Value</TableHead>
+                        <TableHead>Change</TableHead>
+                    </TableRow>
+                </TableHeader>
+                <TableBody>
+                    {data?.map((setting: Settings) => (
+                        <TableRow key={setting.settings_id}>
+                            <TableCell className="font-medium">{setting.name}</TableCell>
+                            <TableCell className="font-medium">{setting.value}</TableCell>
+                            <TableCell className="font-medium">{setting.description}</TableCell>
+                            <TableCell className="font-medium">
+                                <ChangeSetting setting={setting} />
+                            </TableCell>
+                        </TableRow>
+                    ))}
+                </TableBody>
+            </Table>
+        </LstCard>
     );
 }