From 09cb438e0ce113a70aee09a3529fd145bd5f3456 Mon Sep 17 00:00:00 2001
From: nameless <nameless@noreply@foxo.me>
Date: Fri, 10 Nov 2023 02:38:10 +0000
Subject: [PATCH] feat: new admin page

---
 ui/AdminsPage.tsx | 80 ++++++++++++++++++++++++++++++++---------------
 1 file changed, 55 insertions(+), 25 deletions(-)

diff --git a/ui/AdminsPage.tsx b/ui/AdminsPage.tsx
index aa98707..37fcf23 100644
--- a/ui/AdminsPage.tsx
+++ b/ui/AdminsPage.tsx
@@ -160,42 +160,72 @@ function AdminListItem(props: { admin: AdminData; sessionId: string | null }) {
       : null,
     (args) => fetchApi(...args).then(handleResponse),
   );
+  const getAdminPhoto = useSWR(
+    ["users/{userId}/photo", "GET", { params: { userId: String(admin.tgUserId) } }] as const,
+    (args) => fetchApi(...args).then(handleResponse).then((blob) => URL.createObjectURL(blob)),
+  );
 
   return (
-    <li className="flex flex-col gap-2 rounded-md bg-zinc-100 dark:bg-zinc-800 p-2">
-      <p className="font-bold">
-        {getAdminUser.data?.first_name ?? admin.id} {getAdminUser.data?.last_name}{" "}
-        {getAdminUser.data?.username
+    <div className="max-h-sm rounded-md bg-zinc-100 dark:bg-zinc-800">
+      <div className="float-left flex flex-col p-10">
+        {/* user avatar */}
+        {getAdminUser.data
           ? (
-            <a href={`https://t.me/${getAdminUser.data.username}`} className="link">
-              @{getAdminUser.data.username}
-            </a>
+            getAdminPhoto.data
+              ? (
+                <img
+                  src={getAdminPhoto.data}
+                  alt="avatar"
+                  className="w-24 h-24 rounded-full shadow-lg"
+                />
+              )
+              : (
+                <div className="w-9 h-9 rounded-full bg-zinc-400 dark:bg-zinc-500 flex items-center justify-center text-white text-2xl font-bold select-none">
+                  {getAdminUser.data.first_name.at(0)?.toUpperCase()}
+                </div>
+              )
           )
           : null}
-      </p>
-      {getAdminUser.data?.bio
-        ? (
-          <p>
-            {getAdminUser.data?.bio}
-          </p>
-        )
-        : null}
-      {getUser.data?.admin && (
-        <p className="flex gap-2">
-          <button
-            className="button-outlined"
-            onClick={() => deleteDialogRef.current?.showModal()}
-          >
-            Delete
-          </button>
+      </div>
+      <div className="flex flex-col p-10">
+        <h5 className="mb-1 text-xl font-medium text-gray-900 dark:text-white">
+          {getAdminUser.data?.first_name ?? admin.id} {getAdminUser.data?.last_name}
+        </h5>
+        <p className="mb-1 text-xl font-medium text-gray-900 dark:text-white">
+          {getAdminUser.data?.username
+            ? (
+              <a href={`https://t.me/${getAdminUser.data.username}`} className="link">
+                @{getAdminUser.data.username}
+              </a>
+            )
+            : null}
         </p>
-      )}
+        <span className="text-sm text-gray-500 dark:text-gray-400">
+          {getAdminUser.data?.bio
+            ? (
+              <p>
+                {getAdminUser.data?.bio}
+              </p>
+            )
+            : null}
+        </span>
+        {getUser.data?.admin && (
+          <p className="flex gap-2">
+            <button
+              className="button-outlined"
+              onClick={() => deleteDialogRef.current?.showModal()}
+            >
+              Delete
+            </button>
+          </p>
+        )}
+      </div>
       <DeleteAdminDialog
         dialogRef={deleteDialogRef}
         adminId={admin.id}
         sessionId={sessionId}
       />
-    </li>
+    </div>
   );
 }