refac: admin panel styling

src/routes/(app)/admin/+page.svelte

@@ -4,6 +4,8 @@
 	import { goto } from '$app/navigation';
 	import { onMount, getContext } from 'svelte';
 
+	import dayjs from 'dayjs';
+
 	import { toast } from 'svelte-sonner';
 
 	import { updateUserRole, getUsers, deleteUserById } from '$lib/apis/users';
@@ -16,6 +18,7 @@
 	let loaded = false;
 	let users = [];
 
+	let search = '';
 	let selectedUser = null;
 
 	let showSettingsModal = false;
@@ -80,20 +83,15 @@
 
 <SettingsModal bind:show={showSettingsModal} />
 
-<div class="min-h-screen max-h-[100dvh] w-full flex justify-center dark:text-white font-mona">
+<div class="min-h-screen max-h-[100dvh] w-full flex justify-center dark:text-white">
 	{#if loaded}
 		<div class=" flex flex-col justify-between w-full overflow-y-auto">
-			<div class="max-w-2xl mx-auto w-full px-3 md:px-0 my-10">
+			<div class=" mx-auto w-full">
 				<div class="w-full">
 					<div class=" flex flex-col justify-center">
+						<div class=" px-5 pt-3">
 							<div class=" flex justify-between items-center">
-							<div class="flex items-center text-2xl font-semibold">
+								<div class="flex items-center text-2xl font-semibold font-mona">Dashboard</div>
-								{$i18n.t('All Users')}
-								<div class="flex self-center w-[1px] h-6 mx-2.5 bg-gray-200 dark:bg-gray-700" />
-								<span class="text-lg font-medium text-gray-500 dark:text-gray-300"
-									>{users.length}</span
-								>
-							</div>
 								<div>
 									<button
 										class="flex items-center space-x-1 px-3 py-1.5 rounded-xl bg-gray-50 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 transition"
@@ -119,32 +117,64 @@
 									</button>
 								</div>
 							</div>
-						<div class=" text-gray-500 text-xs mt-1">
-							ⓘ {$i18n.t("Click on the user role button to change a user's role.")}
 						</div>
 
-						<hr class=" my-3 dark:border-gray-600" />
+						<div class="px-5 flex text-sm gap-2.5">
+							<div class="py-3 border-b font-medium text-gray-100 cursor-pointer">Overview</div>
+							<!-- <div class="py-3 text-gray-300 cursor-pointer">Users</div> -->
+						</div>
+
+						<hr class=" mb-3 dark:border-gray-800" />
+
+						<div class="px-5">
+							<div class="mt-0.5 mb-3 flex justify-between">
+								<div class="flex text-lg font-medium px-0.5">
+									{$i18n.t('All Users')}
+									<div class="flex self-center w-[1px] h-6 mx-2.5 bg-gray-200 dark:bg-gray-700" />
+									<span class="text-lg font-medium text-gray-500 dark:text-gray-300"
+										>{users.length}</span
+									>
+								</div>
+
+								<div class="">
+									<input
+										class=" w-60 rounded-lg py-1.5 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none"
+										placeholder={$i18n.t('Search')}
+										bind:value={search}
+									/>
+								</div>
+							</div>
 
 							<div class="scrollbar-hidden relative overflow-x-auto whitespace-nowrap">
 								<table class="w-full text-sm text-left text-gray-500 dark:text-gray-400 table-auto">
 									<thead
-									class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400"
+										class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-850 dark:text-gray-400"
 									>
 										<tr>
 											<th scope="col" class="px-3 py-2"> {$i18n.t('Role')} </th>
 											<th scope="col" class="px-3 py-2"> {$i18n.t('Name')} </th>
 											<th scope="col" class="px-3 py-2"> {$i18n.t('Email')} </th>
-										<th scope="col" class="px-3 py-2"> {$i18n.t('Action')} </th>
+											<th scope="col" class="px-3 py-2"> {$i18n.t('Created at')} </th>
+											<th scope="col" class="px-3 py-2 text-right" />
 										</tr>
 									</thead>
 									<tbody>
-									{#each users as user}
+										{#each users.filter((user) => {
+											if (search === '') {
+												return true;
+											} else {
+												let name = user.name.toLowerCase();
+												const query = search.toLowerCase();
+												return name.includes(query);
+											}
+										}) as user}
 											<tr class="bg-white border-b dark:bg-gray-900 dark:border-gray-700 text-xs">
 												<td class="px-3 py-2 min-w-[7rem] w-28">
 													<button
 														class=" flex items-center gap-2 text-xs px-3 py-0.5 rounded-lg {user.role ===
 															'admin' &&
-														'text-sky-600 dark:text-sky-200 bg-sky-200/30'} {user.role === 'user' &&
+															'text-sky-600 dark:text-sky-200 bg-sky-200/30'} {user.role ===
+															'user' &&
 															'text-green-600 dark:text-green-200 bg-green-200/30'} {user.role ===
 															'pending' && 'text-gray-600 dark:text-gray-200 bg-gray-200/30'}"
 														on:click={() => {
@@ -180,7 +210,11 @@
 												<td class=" px-3 py-2"> {user.email} </td>
 
 												<td class=" px-3 py-2">
-												<div class="flex justify-start w-full">
+													{dayjs(user.timestamp * 1000).format($i18n.t('MMMM DD, YYYY'))}
+												</td>
+
+												<td class="px-3 py-2 text-right">
+													<div class="flex justify-end w-full">
 														<button
 															class="self-center w-fit text-sm px-2 py-2 hover:bg-black/5 dark:hover:bg-white/5 rounded-xl"
 															on:click={async () => {
@@ -232,6 +266,11 @@
 									</tbody>
 								</table>
 							</div>
+
+							<div class=" text-gray-500 text-xs mt-2 text-right">
+								ⓘ {$i18n.t("Click on the user role button to change a user's role.")}
+							</div>
+						</div>
 					</div>
 				</div>
 			</div>