From dd2e32007de02d1665972b05edec02fabddb899e Mon Sep 17 00:00:00 2001
From: Archben <devops@tben.me>
Date: Wed, 11 Mar 2026 05:46:53 +0000
Subject: [PATCH] Updates

---
 src/components/general/admin/hero.tsx         |  2 +-
 src/components/general/avatar.tsx             | 32 ++++++++++++++++
 .../admin/users/(sections)/users-list.tsx     | 38 +++++++++++++++++++
 src/components/pages/admin/users/index.tsx    | 10 +++++
 src/layouts/admin/(partials)/header-user.tsx  | 24 +++---------
 src/styles/globals.css                        |  2 +-
 6 files changed, 87 insertions(+), 21 deletions(-)
 create mode 100644 src/components/general/avatar.tsx
 create mode 100644 src/components/pages/admin/users/(sections)/users-list.tsx

diff --git a/src/components/general/admin/hero.tsx b/src/components/general/admin/hero.tsx
index 3ae2699..8ce4781 100644
--- a/src/components/general/admin/hero.tsx
+++ b/src/components/general/admin/hero.tsx
@@ -16,7 +16,7 @@ export default function AdminHero({ title, ctas, description }: Props) {
     const { pageProps } = useContext(AppContext);
 
     return (
-        <Row className="w-full grid-cell-content justify-between">
+        <Row className="w-full grid-cell-content justify-between flex-nowrap items-start">
             <Stack className="gap-2">
                 <H1 className="admin-h1">{title}</H1>
                 {description ? (
diff --git a/src/components/general/avatar.tsx b/src/components/general/avatar.tsx
new file mode 100644
index 0000000..22c3401
--- /dev/null
+++ b/src/components/general/avatar.tsx
@@ -0,0 +1,32 @@
+import useStatus from "@/twui/components/hooks/useStatus";
+import Img from "@/twui/components/layout/Img";
+import { twMerge } from "tailwind-merge";
+
+type Props = {
+    image_url?: string | null;
+    image_size?: number;
+    title?: string;
+};
+
+export default function Avatar({ image_url, image_size = 35, title }: Props) {
+    const { loading, setLoading } = useStatus();
+
+    if (!image_url) {
+        return (
+            <div
+                className={twMerge(
+                    `bg-slate-100 dark:bg-white/10 rounded-full`,
+                    ``,
+                )}
+                style={{
+                    width: `${image_size}px`,
+                    height: `${image_size}px`,
+                }}
+            />
+        );
+    }
+
+    return (
+        <Img circle size={image_size} src={image_url} alt={title || `Avatar`} />
+    );
+}
diff --git a/src/components/pages/admin/users/(sections)/users-list.tsx b/src/components/pages/admin/users/(sections)/users-list.tsx
new file mode 100644
index 0000000..75ee132
--- /dev/null
+++ b/src/components/pages/admin/users/(sections)/users-list.tsx
@@ -0,0 +1,38 @@
+import Avatar from "@/src/components/general/avatar";
+import { AppContext } from "@/src/pages/_app";
+import Tag from "@/twui/components/elements/Tag";
+import Row from "@/twui/components/layout/Row";
+import Span from "@/twui/components/layout/Span";
+import Stack from "@/twui/components/layout/Stack";
+import { useContext } from "react";
+
+export default function UsersList() {
+    const { pageProps } = useContext(AppContext);
+    const { deployment_users } = pageProps;
+
+    return (
+        <Stack className="grid-cell-content">
+            {deployment_users?.map((dep_usr, index) => {
+                const is_super_admin = Boolean(dep_usr.is_super_admin);
+
+                return (
+                    <Row key={index} className="w-full justify-between">
+                        <Row>
+                            <Avatar
+                                image_url={dep_usr.image}
+                                title={`${dep_usr.first_name} Image`}
+                                image_size={40}
+                            />
+                            <Span>
+                                {dep_usr.first_name} {dep_usr.last_name}
+                            </Span>
+                        </Row>
+                        <Row>
+                            {is_super_admin ? <Tag>Super Admin</Tag> : null}
+                        </Row>
+                    </Row>
+                );
+            })}
+        </Stack>
+    );
+}
diff --git a/src/components/pages/admin/users/index.tsx b/src/components/pages/admin/users/index.tsx
index 71653a3..c787c44 100644
--- a/src/components/pages/admin/users/index.tsx
+++ b/src/components/pages/admin/users/index.tsx
@@ -2,6 +2,8 @@ import { Fragment, useContext } from "react";
 import { AppContext } from "@/src/pages/_app";
 import Divider from "@/twui/components/layout/Divider";
 import AdminHero from "@/src/components/general/admin/hero";
+import Button from "@/twui/components/layout/Button";
+import UsersList from "./(sections)/users-list";
 
 export default function Main() {
     const { pageProps } = useContext(AppContext);
@@ -11,8 +13,16 @@ export default function Main() {
             <AdminHero
                 title={`Users`}
                 description={<>All Users in this deployment</>}
+                ctas={
+                    <>
+                        <Button title="Add User" href={`/admin/users/add-user`}>
+                            Add User
+                        </Button>
+                    </>
+                }
             />
             <Divider />
+            <UsersList />
         </Fragment>
     );
 }
diff --git a/src/layouts/admin/(partials)/header-user.tsx b/src/layouts/admin/(partials)/header-user.tsx
index 201ca27..aa471df 100644
--- a/src/layouts/admin/(partials)/header-user.tsx
+++ b/src/layouts/admin/(partials)/header-user.tsx
@@ -1,40 +1,26 @@
+import Avatar from "@/src/components/general/avatar";
 import { AppContext } from "@/src/pages/_app";
 import Dropdown from "@/twui/components/elements/Dropdown";
 import LinkList from "@/twui/components/elements/LinkList";
 import LucideIcon from "@/twui/components/elements/lucide-icon";
 import Paper from "@/twui/components/elements/Paper";
 import Divider from "@/twui/components/layout/Divider";
-import Img from "@/twui/components/layout/Img";
 import Row from "@/twui/components/layout/Row";
 import Span from "@/twui/components/layout/Span";
 import { useContext } from "react";
-import { twMerge } from "tailwind-merge";
 
 export default function HeaderUser() {
     const { pageProps } = useContext(AppContext);
     const { user } = pageProps;
 
-    const ICON_SIZE = 35;
-
     return (
         <Dropdown
             target={
                 <Row className="-my-2">
-                    {user.image_thumbnail ? (
-                        <Img
-                            circle
-                            size={ICON_SIZE}
-                            src={user.image_thumbnail}
-                            alt={`${user.first_name} Image`}
-                        />
-                    ) : (
-                        <div
-                            className={twMerge(
-                                `bg-slate-100 dark:bg-white/10 rounded-full w-[35px] h-[35px]`,
-                                ``,
-                            )}
-                        />
-                    )}
+                    <Avatar
+                        image_url={user.image_thumbnail}
+                        title={`${user.first_name} Image`}
+                    />
                     <Span>{user.first_name}</Span>
                     <LucideIcon name="ChevronDown" size={17} />
                 </Row>
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 6cf646c..e7d72ee 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -77,7 +77,7 @@
 }
 
 .twui-button-primary * {
-    @apply text-primary-text;
+    @apply text-primary-text font-semibold;
 }
 
 .twui-h1,