feat: implement user management settings page with user editing functionality

web/src/routes/dashboard/settings/+page.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+    import UserTable from '$lib/components/user-data-table.svelte';
+    import {page} from '$app/state';
+    import * as Card from "$lib/components/ui/card/index.js";
+
+
+    let users = page.data.users;
+</script>
+<div class="flex w-full flex-1 flex-col gap-4 p-4 pt-0">
+    <h1 class="scroll-m-20 my-6 text-center text-4xl font-extrabold tracking-tight lg:text-5xl">
+        Settings
+    </h1>
+    <Card.Root>
+        <Card.Header>
+            <Card.Title>Users</Card.Title>
+            <Card.Description>Edit or delete users</Card.Description>
+        </Card.Header>
+        <Card.Content>
+            <UserTable bind:users={users}/>
+        </Card.Content>
+    </Card.Root>
+</div>
+

web/src/routes/dashboard/settings/+page.ts

@@ -0,0 +1,33 @@
+import {env} from '$env/dynamic/public';
+import type {PageLoad} from './$types';
+
+export const load: PageLoad = async ({params, fetch}) => {
+    try {
+        const users = await fetch(env.PUBLIC_API_URL + "/users/all", {
+            method: 'GET',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            credentials: 'include'
+        });
+
+        if (!users.ok) {
+            console.error(`Failed to fetch users: ${users.statusText}`);
+            return {
+                users: null,
+            };
+        }
+
+        const usersData = await users.json();
+        console.log('Fetched users:', usersData);
+
+        return {
+            users: usersData,
+        };
+    } catch (error) {
+        console.error('Error fetching users:', error);
+        return {
+            users: null,
+        };
+    }
+};

web/src/routes/login/+page.svelte

@@ -26,7 +26,7 @@
     <div class="relative hidden lg:block">
         <img
                 alt="background"
-                class="absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale rounded-l-3xl "
+                class="absolute inset-0 h-full w-full object-cover dark:brightness-[0.8]  rounded-l-3xl "
                 src="{toOptimizedURL(background)}"
         />
     </div>