@alepha/ui 0.18.0 → 0.18.2

package/src/admin/components/sessions/AdminSessions.tsx

@@ -1,4 +1,12 @@
-import { ActionButton, DataTable, Flex, Text } from "@alepha/ui";
+import {
+  ActionButton,
+  DataTable,
+  Flex,
+  Text,
+  useDialog,
+  useToast,
+} from "@alepha/ui";
+import { Badge } from "@mantine/core";
 import {
   IconDeviceDesktop,
   IconDeviceMobile,
@@ -15,53 +23,61 @@ import { useClient } from "alepha/react";
 import { useI18n } from "alepha/react/i18n";
 import { useRouter } from "alepha/react/router";
 import { useState } from "react";
-import type { AdminRouter } from "../../AdminRouter.ts";
+import type { AdminRouter } from "../../AdminRouter.tsx";
 
 export interface AdminSessionsProps {
   userRealmName?: string;
 }
 
+const filters = t.object({
+  userId: t.optional(
+    t.uuid({
+      $control: {
+        query: t.pick(sessions.schema, ["userId"]),
+      },
+    }),
+  ),
+});
+
+const getDeviceIcon = (device?: string) => {
+  switch (device) {
+    case "MOBILE":
+      return <IconDeviceMobile size={14} />;
+    case "TABLET":
+      return <IconDeviceTablet size={14} />;
+    default:
+      return <IconDeviceDesktop size={14} />;
+  }
+};
+
+const isExpired = (expiresAt: Date | string) =>
+  new Date(expiresAt) < new Date();
+
 const AdminSessions = (props: AdminSessionsProps) => {
   const client = useClient<AdminSessionController>();
   const router = useRouter<AdminRouter>();
   const { l } = useI18n();
+  const dialog = useDialog();
+  const toast = useToast();
   const [refreshKey, setRefreshKey] = useState(0);
 
-  const filters = t.object({
-    userId: t.optional(
-      t.uuid({
-        $control: {
-          query: t.pick(sessions.schema, ["userId"]),
-        },
-      }),
-    ),
-  });
-
-  const getDeviceIcon = (device?: string) => {
-    switch (device) {
-      case "MOBILE":
-        return <IconDeviceMobile size={14} />;
-      case "TABLET":
-        return <IconDeviceTablet size={14} />;
-      default:
-        return <IconDeviceDesktop size={14} />;
-    }
-  };
-
-  const isExpired = (expiresAt: Date | string) => {
-    return new Date(expiresAt) < new Date();
-  };
-
-  const handleDelete = async (sessionId: string) => {
+  const handleDelete = async (session: SessionEntity) => {
+    const confirmed = await dialog.confirm({
+      title: "Revoke session",
+      message:
+        "Are you sure you want to revoke this session? The user will be signed out.",
+    });
+    if (!confirmed) return;
     await client.deleteSession({
-      params: { id: sessionId },
+      params: { id: session.id },
       query: { userRealmName: props.userRealmName },
     });
+    toast.success("Session revoked");
     setRefreshKey((k) => k + 1);
   };
 
   return (
-    <Flex flex={1} direction="column">
+    <Flex p="md" flex={1} direction="column">
       <DataTable<SessionEntity, typeof filters>
         key={refreshKey}
         submitOnInit
@@ -74,20 +90,13 @@ const AdminSessions = (props: AdminSessionsProps) => {
           horizontalSpacing: "xs",
           verticalSpacing: "xs",
         }}
-        onFilterChange={(key, _value, form) => {
-          if (key === "userId") {
-            return form.submit();
-          }
-        }}
+        onFilterChange={(_key, _value, form) => form.submit()}
         filters={filters}
-        tableTrProps={(item) => {
-          if (isExpired(item.expiresAt)) {
-            return {
-              opacity: 0.5,
-            };
-          }
-          return {};
-        }}
+        tableTrProps={(item) => ({
+          style: {
+            opacity: isExpired(item.expiresAt) ? 0.5 : 1,
+          },
+        })}
         items={async (filters) => {
           const response = await client.findSessions({
             query: {
@@ -95,7 +104,6 @@ const AdminSessions = (props: AdminSessionsProps) => {
               userRealmName: props.userRealmName,
             },
           });
-
           return response as Page<SessionEntity>;
         }}
         columns={{
@@ -117,7 +125,6 @@ const AdminSessions = (props: AdminSessionsProps) => {
           },
           userAgent: {
             label: "Device",
-            fit: true,
             value: (item) => (
               <Flex gap={4} align="center">
                 {item.userAgent ? (
@@ -128,8 +135,8 @@ const AdminSessions = (props: AdminSessionsProps) => {
                     </Text>
                   </>
                 ) : (
-                  <Text size="xs" c="dimmed">
-                    -
+                  <Text size="xs" muted>
+                    —
                   </Text>
                 )}
               </Flex>
@@ -137,49 +144,42 @@ const AdminSessions = (props: AdminSessionsProps) => {
           },
           ip: {
             label: "IP",
-            fit: true,
             value: (item) => (
-              <Text size="xs" ff="monospace" c="dimmed">
-                {item.ip || "-"}
+              <Text size="xs" ff="monospace" muted>
+                {item.ip || "—"}
               </Text>
             ),
           },
           expiresAt: {
             label: "Status",
-            fit: true,
             value: (item) => (
-              <Text
-                size="xs"
-                c={isExpired(item.expiresAt) ? "dimmed" : undefined}
+              <Badge
+                size="sm"
+                variant="light"
+                color={isExpired(item.expiresAt) ? "gray" : "green"}
               >
                 {isExpired(item.expiresAt) ? "Expired" : "Active"}
-              </Text>
+              </Badge>
             ),
           },
           createdAt: {
             label: "Created",
-            fit: true,
             value: (item) => (
-              <Text size="xs" c="dimmed">
+              <Text size="xs" muted>
                 {l(item.createdAt, { date: "fromNow" })}
               </Text>
             ),
           },
-          actions: {
-            label: "",
-            fit: true,
-            value: (item) => (
-              <ActionButton
-                size="xs"
-                variant="subtle"
-                color="red"
-                onClick={() => handleDelete(item.id)}
-              >
-                <IconTrash size={14} />
-              </ActionButton>
-            ),
-          },
         }}
+        rowActions={(item) => [
+          {
+            label: "Revoke session",
+            icon: IconTrash,
+            color: "red",
+            onClick: () => handleDelete(item),
+            visible: !isExpired(item.expiresAt),
+          },
+        ]}
       />
     </Flex>
   );

package/src/admin/components/users/AdminUserSessions.tsx

@@ -1,4 +1,5 @@
-import { DataTable, Flex, Text, useDialog } from "@alepha/ui";
+import { DataTable, Flex, Text, useDialog, useToast } from "@alepha/ui";
+import { Badge } from "@mantine/core";
 import {
   IconDeviceDesktop,
   IconDeviceMobile,
@@ -38,20 +39,22 @@ const AdminUserSessions = (props: AdminUserSessionsProps) => {
   const client = useClient<AdminSessionController>();
   const { l } = useI18n();
   const dialog = useDialog();
+  const toast = useToast();
   const [refreshKey, setRefreshKey] = useState(0);
 
-  const handleDeleteSession = async (sessionId: string) => {
+  const handleDeleteSession = async (session: SessionEntity) => {
     const confirmed = await dialog.confirm({
-      title: "Revoke Session",
-      message: "Are you sure you want to revoke this session?",
+      title: "Revoke session",
+      message:
+        "Are you sure you want to revoke this session? The user will be signed out on this device.",
     });
-    if (confirmed) {
-      await client.deleteSession({
-        params: { id: sessionId },
-        query: { userRealmName: props.userRealmName },
-      });
-      setRefreshKey((k) => k + 1);
-    }
+    if (!confirmed) return;
+    await client.deleteSession({
+      params: { id: session.id },
+      query: { userRealmName: props.userRealmName },
+    });
+    toast.success("Session revoked");
+    setRefreshKey((k) => k + 1);
   };
 
   return (
@@ -88,50 +91,49 @@ const AdminUserSessions = (props: AdminUserSessionsProps) => {
               <Text size="xs">
                 {item.userAgent
                   ? `${item.userAgent.browser} / ${item.userAgent.os}`
-                  : "\u2014"}
+                  : "—"}
               </Text>
             </Flex>
           ),
         },
         ip: {
           label: "IP",
-          fit: true,
           value: (item) => (
-            <Text size="xs" ff="monospace" c="dimmed">
-              {item.ip || "\u2014"}
+            <Text size="xs" ff="monospace" muted>
+              {item.ip || "—"}
             </Text>
           ),
         },
         status: {
           label: "Status",
-          fit: true,
           value: (item) => (
-            <Text size="xs" c="dimmed">
+            <Badge
+              size="sm"
+              variant="light"
+              color={isExpired(item.expiresAt) ? "gray" : "green"}
+            >
               {isExpired(item.expiresAt) ? "Expired" : "Active"}
-            </Text>
+            </Badge>
           ),
         },
         createdAt: {
           label: "Created",
-          fit: true,
           value: (item) => (
-            <Text size="xs" c="dimmed">
+            <Text size="xs" muted>
               {l(item.createdAt, { date: "fromNow" })}
             </Text>
           ),
         },
-        actions: {
-          label: "",
-          fit: true,
-          actions: (item) => [
-            {
-              icon: <IconTrash size={14} />,
-              onClick: () => handleDeleteSession(item.id),
-              tooltip: "Revoke session",
-            },
-          ],
-        },
       }}
+      rowActions={(item) => [
+        {
+          label: "Revoke session",
+          icon: IconTrash,
+          color: "red",
+          onClick: () => handleDeleteSession(item),
+          visible: !isExpired(item.expiresAt),
+        },
+      ]}
     />
   );
 };

package/src/admin/components/users/AdminUsers.tsx

@@ -1,32 +1,34 @@
-import { DataTable, Flex, Text, useDialog, useToast } from "@alepha/ui";
-import { Badge } from "@mantine/core";
+import {
+  ActionButton,
+  DataTable,
+  Flex,
+  Text,
+  useDialog,
+  useToast,
+} from "@alepha/ui";
+import { Avatar, Badge } from "@mantine/core";
+import {
+  IconEye,
+  IconTrash,
+  IconUserOff,
+  IconUserPlus,
+} from "@tabler/icons-react";
 import { type Page, t } from "alepha";
 import type { AdminUserController, UserEntity } from "alepha/api/users";
 import { useClient } from "alepha/react";
 import { useI18n } from "alepha/react/i18n";
 import { useRouter } from "alepha/react/router";
 import { useState } from "react";
-import type { AdminRouter } from "../../AdminRouter.ts";
+import type { AdminRouter } from "../../AdminRouter.tsx";
 
 export interface AdminUsersProps {
   userRealmName?: string;
 }
 
-const createUserSchema = t.object({
-  username: t.optional(
-    t.shortText({
-      minLength: 3,
-      maxLength: 50,
-      pattern: "^[a-zA-Z0-9._-]+$",
-    }),
-  ),
-  email: t.optional(t.email()),
-  phoneNumber: t.optional(t.e164()),
-  firstName: t.optional(t.string()),
-  lastName: t.optional(t.string()),
-  roles: t.optional(t.array(t.string())),
+const filters = t.object({
+  query: t.optional(t.text()),
   enabled: t.optional(t.boolean()),
-  password: t.optional(t.string({ minLength: 8 })),
+  emailVerified: t.optional(t.boolean()),
 });
 
 const AdminUsers = (props: AdminUsersProps) => {
@@ -37,52 +39,94 @@ const AdminUsers = (props: AdminUsersProps) => {
   const toast = useToast();
   const [refreshKey, setRefreshKey] = useState(0);
 
-  const filters = t.object({
-    query: t.optional(
-      t.string({
-        $control: {
-          query: t.object({
-            email: t.optional(t.email()),
-            enabled: t.optional(t.boolean()),
-            emailVerified: t.optional(t.boolean()),
-          }),
-        },
-      }),
-    ),
-  });
+  const refresh = () => setRefreshKey((k) => k + 1);
+
+  const handleToggleEnabled = async (user: UserEntity) => {
+    const enabled = !user.enabled;
+    const confirmed = await dialog.confirm({
+      title: enabled ? "Enable user" : "Disable user",
+      message: enabled
+        ? `Enable ${user.email || user.username || "this user"}?`
+        : `Disable ${user.email || user.username || "this user"}? They will no longer be able to sign in.`,
+    });
+    if (!confirmed) return;
+    await client.updateUser({
+      params: { id: user.id },
+      query: { userRealmName: props.userRealmName },
+      body: { enabled },
+    });
+    toast.success({
+      message: enabled ? "User enabled" : "User disabled",
+    });
+    refresh();
+  };
+
+  const handleDelete = async (user: UserEntity) => {
+    const confirmed = await dialog.confirm({
+      title: "Delete user",
+      message: `Permanently delete ${user.email || user.username || "this user"}? This action cannot be undone.`,
+    });
+    if (!confirmed) return;
+    await client.deleteUser({
+      params: { id: user.id },
+      query: { userRealmName: props.userRealmName },
+    });
+    toast.success({ message: "User deleted" });
+    refresh();
+  };
+
+  const handleBulkDisable = async (
+    items: UserEntity[],
+    clearSelection: () => void,
+  ) => {
+    const enabledUsers = items.filter((u) => u.enabled);
+    if (enabledUsers.length === 0) {
+      toast.danger({ message: "No active users in selection" });
+      return;
+    }
+    const confirmed = await dialog.confirm({
+      title: "Disable users",
+      message: `Disable ${enabledUsers.length} user(s)? They will no longer be able to sign in.`,
+    });
+    if (!confirmed) return;
+    for (const user of enabledUsers) {
+      await client.updateUser({
+        params: { id: user.id },
+        query: { userRealmName: props.userRealmName },
+        body: { enabled: false },
+      });
+    }
+    toast.success({
+      message: `${enabledUsers.length} user(s) disabled`,
+    });
+    clearSelection();
+    refresh();
+  };
 
   return (
-    <Flex flex={1} direction="column">
+    <Flex p={"md"} flex={1} direction="column">
       <DataTable<UserEntity, typeof filters>
+        withCheckbox
+        withExport
+        checkboxActions={[
+          {
+            intent: "danger",
+            label: "Disable selected",
+            icon: <IconUserOff />,
+            onClick: (ctx) =>
+              handleBulkDisable(ctx.selectedItems, ctx.clearSelection),
+          },
+        ]}
         key={refreshKey}
         submitOnInit
         defaultSize={10}
-        typeFormProps={{
-          skipSubmitButton: true,
-          columns: 3,
-        }}
+        defaultFilters={["query"]}
         tableProps={{
           horizontalSpacing: "xs",
           verticalSpacing: "xs",
-          striped: false,
-          highlightOnHover: true,
-        }}
-        onFilterChange={(key, _value, form) => {
-          if (key === "query") {
-            return form.submit();
-          }
         }}
+        onFilterChange={(_key, _value, form) => form.submit()}
         filters={filters}
-        tableTrProps={(item) => ({
-          style: {
-            cursor: "pointer",
-            opacity: item.enabled ? 1 : 0.5,
-          },
-          onClick: () =>
-            router.push("adminUserProfile", {
-              params: { userId: item.id },
-            }),
-        })}
         items={async (filters) => {
           const response = await client.findUsers({
             query: {
@@ -93,49 +137,117 @@ const AdminUsers = (props: AdminUsersProps) => {
           return response as Page<UserEntity>;
         }}
         columns={{
+          user: {
+            label: "User",
+            value: (item) => {
+              const name =
+                `${item.firstName || ""} ${item.lastName || ""}`.trim() ||
+                item.username ||
+                "Anonymous";
+
+              return (
+                <ActionButton
+                  variant={"transparent"}
+                  href={`/admin/users/${item.id}`}
+                >
+                  <Flex gap={"xs"} centerY>
+                    <Avatar size={"sm"} name={name} />
+                    <Flex col>
+                      <Text size={"sm"} bold>
+                        {name}
+                      </Text>
+                      <Text size="xs" muted>
+                        {item.email || "\u2014"}
+                      </Text>
+                    </Flex>
+                  </Flex>
+                </ActionButton>
+              );
+            },
+          },
           username: {
             label: "Username",
+            defaultHidden: true,
             value: (item) => (
-              <Text size="sm" fw={500}>
+              <Text size="sm" ff="monospace">
                 {item.username || "\u2014"}
               </Text>
             ),
           },
-          email: {
-            label: "Email",
-            value: (item) => <Text size="sm">{item.email || "\u2014"}</Text>,
-          },
           roles: {
             label: "Roles",
-            value: (item) => (
-              <Flex gap={4}>
-                {item.roles.map((role: string) => (
-                  <Badge key={role} size="xs" variant="default">
-                    {role}
-                  </Badge>
-                ))}
-              </Flex>
-            ),
+            value: (item) =>
+              item.roles.length > 0 ? (
+                <Flex gap={4}>
+                  {item.roles.map((role: string) => (
+                    <Badge key={role} size="xs" variant="default">
+                      {role}
+                    </Badge>
+                  ))}
+                </Flex>
+              ) : (
+                <Text size="xs" muted>
+                  No roles
+                </Text>
+              ),
           },
           enabled: {
             label: "Status",
-            fit: true,
             value: (item) => (
-              <Text size="sm" c="dimmed">
+              <Badge
+                size="sm"
+                variant="light"
+                color={item.enabled ? "green" : "red"}
+              >
                 {item.enabled ? "Active" : "Disabled"}
-              </Text>
+              </Badge>
+            ),
+          },
+          emailVerified: {
+            label: "Email",
+            value: (item) => (
+              <Badge
+                size="sm"
+                variant="light"
+                color={item.emailVerified ? "green" : "gray"}
+              >
+                {item.emailVerified ? "Verified" : "Unverified"}
+              </Badge>
             ),
           },
           createdAt: {
-            label: "Created",
-            fit: true,
+            label: "Joined",
+            sortable: true,
+            sortKey: "createdAt",
             value: (item) => (
-              <Text size="xs" c="dimmed">
+              <Text size="xs" muted>
                 {l(item.createdAt, { date: "fromNow" })}
               </Text>
             ),
           },
         }}
+        rowActions={(item) => [
+          {
+            label: "View profile",
+            icon: IconEye,
+            onClick: () =>
+              router.push("adminUserProfile", {
+                params: { userId: item.id },
+              }),
+          },
+          {
+            label: item.enabled ? "Disable user" : "Enable user",
+            icon: item.enabled ? IconUserOff : IconUserPlus,
+            color: item.enabled ? "red" : "green",
+            onClick: () => handleToggleEnabled(item),
+          },
+          {
+            label: "Delete user",
+            icon: IconTrash,
+            color: "red",
+            onClick: () => handleDelete(item),
+          },
+        ]}
       />
     </Flex>
   );

package/src/admin/index.ts

@@ -1,11 +1,11 @@
 import { AlephaUI } from "@alepha/ui";
 import { AlephaUIAuth } from "@alepha/ui/auth";
 import { $module } from "alepha";
-import { AdminRouter } from "./AdminRouter.ts";
+import { AdminRouter } from "./AdminRouter.tsx";
 
 // ---------------------------------------------------------------------------------------------------------------------
 
-export { AdminRouter } from "./AdminRouter.ts";
+export { AdminRouter } from "./AdminRouter.tsx";
 export * from "./primitives/$uiAdmin.ts";
 
 // ---------------------------------------------------------------------------------------------------------------------

package/src/admin/primitives/$uiAdmin.ts

@@ -1,6 +1,6 @@
 import type { DashboardShellProps } from "@alepha/ui";
 import { $context } from "alepha";
-import { AdminRouter } from "../AdminRouter.ts";
+import { AdminRouter } from "../AdminRouter.tsx";
 
 /**
  * Register Admin UI components and get the AdminRouter instance.