Refactor admin settings page, add UserCard component, and update user management functionality

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "adventurelog",
-  "version": "0.1.0",
+  "version": "0.1.6",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "adventurelog",
-      "version": "0.1.0",
+      "version": "0.1.6",
       "dependencies": {
         "@lucia-auth/adapter-drizzle": "^1.0.7",
         "@vercel/analytics": "^1.2.2",

src/lib/components/UserCard.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  import type { DatabaseUser } from "$lib/server/auth";
+
+  export let user: DatabaseUser;
+</script>
+
+<div class="card w-96 bg-base-100 shadow-xl">
+  <div class="card-body">
+    <h2 class="card-title">{user.first_name} {user.last_name}</h2>
+    <p>{user.username}</p>
+    <p>Last Login: {user.last_login}</p>
+    <p>Created: {user.signup_date}</p>
+    <div class="card-actions justify-end">
+      <button class="btn btn-primary">Edit User</button>
+    </div>
+  </div>
+</div>

src/routes/settings/admin/+page.server.ts

@@ -1,16 +1,24 @@
 import { error, redirect, type Actions, type Handle } from "@sveltejs/kit";
 import type { PageServerLoad } from "./$types";
 import { db } from "$lib/db/db.server";
-import { sessionTable } from "$lib/db/schema";
+import { sessionTable, userTable } from "$lib/db/schema";
+import type { DatabaseUser } from "$lib/server/auth";
 
 export const load: PageServerLoad = async (event) => {
+  let users: DatabaseUser[] = [];
   if (!event.locals.user) {
     return redirect(302, "/login");
-  } else {
+  }
   if (event.locals.user.role !== "admin") {
     return redirect(302, "/settings");
   }
+  if (event.locals.user.role === "admin") {
+    users = (await db.select().from(userTable).execute()) as DatabaseUser[];
+    console.log(users);
   }
+  return {
+    users,
+  };
 };
 
 export const actions: Actions = {

src/routes/settings/admin/+page.svelte

@@ -1,13 +1,18 @@
 <script lang="ts">
+  import { page } from "$app/stores";
+
   import { enhance } from "$app/forms";
   import { goto } from "$app/navigation";
   import { type SubmitFunction } from "@sveltejs/kit";
+  import type { DatabaseUser } from "lucia";
+  import UserCard from "$lib/components/UserCard.svelte";
   let errors: { message?: string } = {};
   let message: { message?: string } = {};
   let username: string = "";
   let first_name: string = "";
   let last_name: string = "";
   let password: string = "";
+
   const addUser: SubmitFunction = async ({ formData, action, cancel }) => {
     const response = await fetch(action, {
       method: "POST",
@@ -100,3 +105,12 @@
     />
   </form>
 </div>
+
+<h2 class="text-center font-extrabold text-2xl">User Managment</h2>
+<div class="text-center">
+  {#each $page.data.users as user}
+    <div>
+      <UserCard {user} />
+    </div>
+  {/each}
+</div>