Moar

src/pages/admin/index.astro

@@ -1,6 +1,7 @@
 ---
 import DashboardLayout from '../../layouts/DashboardLayout.astro';
 import Avatar from '../../components/Avatar.astro';
+import StatCard from '../../components/StatCard.astro';
 import { db } from '../../db';
 import { siteSettings, users } from '../../db/schema';
 import { eq } from 'drizzle-orm';
@@ -21,52 +22,52 @@ const allUsers = await db.select().from(users).all();
 ---
 
 <DashboardLayout title="Site Admin - Chronus">
-  <h1 class="text-3xl font-bold mb-6">Site Administration</h1>
+  <div class="mb-6">
+    <h1 class="text-2xl font-extrabold tracking-tight">Site Administration</h1>
+    <p class="text-base-content/60 text-sm mt-1">Manage users and site settings</p>
+  </div>
 
-  <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
-    <!-- Statistics -->
-    <div class="stats shadow border border-base-200">
-      <div class="stat">
-        <div class="stat-title">Total Users</div>
-        <div class="stat-value">{allUsers.length}</div>
-      </div>
-    </div>
+  <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 mb-6">
+    <StatCard
+      title="Total Users"
+      value={String(allUsers.length)}
+      description="Registered accounts"
+      icon="heroicons:users"
+      color="text-primary"
+    />
   </div>
 
   <!-- Settings -->
-  <div class="card bg-base-100 shadow-xl border border-base-200 mb-6">
-    <div class="card-body">
-      <h2 class="card-title mb-4">Site Settings</h2>
+  <div class="card card-border bg-base-100 mb-6">
+    <div class="card-body p-4">
+      <h2 class="text-sm font-semibold flex items-center gap-2 mb-4">Site Settings</h2>
 
       <form method="POST" action="/api/admin/settings">
-        <div class="form-control">
-          <label for="registration_enabled" class="label pb-2 font-medium text-sm sm:text-base">
-              Allow New Registrations
-          </label>
-
-          <br>
-
+        <fieldset class="fieldset">
+          <legend class="fieldset-legend text-xs">Allow New Registrations</legend>
           <input
             type="checkbox"
             name="registration_enabled"
-            class="toggle toggle-primary shrink-0 mt-1"
+            class="toggle toggle-primary shrink-0"
             checked={registrationEnabled}
           />
-        </div>
+        </fieldset>
 
-        <div class="card-actions justify-end mt-6">
-          <button type="submit" class="btn btn-primary">Save Settings</button>
+        <div class="flex justify-end mt-4">
+          <button type="submit" class="btn btn-primary btn-sm">Save Settings</button>
         </div>
       </form>
     </div>
   </div>
 
   <!-- Users List -->
-  <div class="card bg-base-100 shadow-xl border border-base-200">
-    <div class="card-body">
-      <h2 class="card-title mb-4">All Users</h2>
+  <div class="card card-border bg-base-100">
+    <div class="card-body p-0">
+      <div class="px-4 py-3 border-b border-base-200">
+        <h2 class="text-sm font-semibold">All Users</h2>
+      </div>
       <div class="overflow-x-auto">
-        <table class="table">
+        <table class="table table-sm">
           <thead>
             <tr>
               <th>Name</th>
@@ -77,22 +78,22 @@ const allUsers = await db.select().from(users).all();
           </thead>
           <tbody>
             {allUsers.map(u => (
-              <tr>
+              <tr class="hover">
                 <td>
                   <div class="flex items-center gap-3">
                     <Avatar name={u.name} />
-                    <div class="font-bold">{u.name}</div>
+                    <div class="font-medium">{u.name}</div>
                   </div>
                 </td>
-                <td>{u.email}</td>
+                <td class="text-base-content/60">{u.email}</td>
                 <td>
                   {u.isSiteAdmin ? (
-                    <span class="badge badge-primary">Yes</span>
+                    <span class="badge badge-xs badge-primary">Yes</span>
                   ) : (
-                    <span class="badge badge-ghost">No</span>
+                    <span class="badge badge-xs badge-ghost">No</span>
                   )}
                 </td>
-                <td>{u.createdAt?.toLocaleDateString() ?? 'N/A'}</td>
+                <td class="text-base-content/40">{u.createdAt?.toLocaleDateString() ?? 'N/A'}</td>
               </tr>
             ))}
           </tbody>