@alepha/ui 0.18.1 → 0.18.3

package/src/admin/components/shared/AdminResourceHeaderMenuItem.tsx

@@ -0,0 +1,37 @@
+import { Menu } from "@mantine/core";
+import { useRouter } from "alepha/react/router";
+import type { AdminResourceAction } from "./AdminResourceHeader.tsx";
+
+export interface AdminResourceHeaderMenuItemProps {
+  /**
+   * Action configuration
+   */
+  action: AdminResourceAction;
+}
+
+const AdminResourceHeaderMenuItem = (
+  props: AdminResourceHeaderMenuItemProps,
+) => {
+  const { action } = props;
+  const router = useRouter();
+
+  const menuItemProps: Record<string, unknown> = {};
+  if (action.href) {
+    Object.assign(menuItemProps, router.anchor(action.href));
+  } else if (action.onClick) {
+    menuItemProps.onClick = action.onClick;
+  }
+
+  return (
+    <Menu.Item
+      leftSection={action.icon ? <action.icon size={16} /> : undefined}
+      color={action.color}
+      disabled={action.disabled}
+      {...menuItemProps}
+    >
+      {action.label}
+    </Menu.Item>
+  );
+};
+
+export default AdminResourceHeaderMenuItem;

package/src/admin/components/shared/AdminResourceTabs.tsx

@@ -1,6 +1,6 @@
 import { Tabs } from "@mantine/core";
-import { useActive, useRouter } from "alepha/react/router";
 import type { ComponentType, ReactNode } from "react";
+import AdminResourceTabsItem from "./AdminResourceTabsItem.tsx";
 
 export interface AdminResourceTab {
   /**
@@ -51,30 +51,6 @@ export interface AdminResourceTabsProps {
   children?: ReactNode;
 }
 
-const TabItem = (props: { tab: AdminResourceTab }) => {
-  const { tab } = props;
-  const router = useRouter();
-  const { isActive, isPending } = useActive({ href: tab.href });
-  const anchorProps = router.anchor(tab.href);
-
-  return (
-    <Tabs.Tab
-      value={tab.value}
-      component="a"
-      leftSection={tab.icon ? <tab.icon size={16} /> : undefined}
-      disabled={tab.disabled}
-      data-active={isActive || undefined}
-      style={{
-        opacity: isPending ? 0.6 : 1,
-      }}
-      {...anchorProps}
-    >
-      {tab.label}
-      {tab.count !== undefined && tab.count > 0 && ` (${tab.count})`}
-    </Tabs.Tab>
-  );
-};
-
 const AdminResourceTabs = (props: AdminResourceTabsProps) => {
   const { tabs, activeTab, children } = props;
 
@@ -82,7 +58,7 @@ const AdminResourceTabs = (props: AdminResourceTabsProps) => {
     <Tabs value={activeTab} variant="default">
       <Tabs.List>
         {tabs.map((tab) => (
-          <TabItem key={tab.value} tab={tab} />
+          <AdminResourceTabsItem key={tab.value} tab={tab} />
         ))}
       </Tabs.List>
 

package/src/admin/components/shared/AdminResourceTabsItem.tsx

@@ -0,0 +1,36 @@
+import { Tabs } from "@mantine/core";
+import { useActive, useRouter } from "alepha/react/router";
+import type { AdminResourceTab } from "./AdminResourceTabs.tsx";
+
+export interface AdminResourceTabsItemProps {
+  /**
+   * Tab configuration
+   */
+  tab: AdminResourceTab;
+}
+
+const AdminResourceTabsItem = (props: AdminResourceTabsItemProps) => {
+  const { tab } = props;
+  const router = useRouter();
+  const { isActive, isPending } = useActive({ href: tab.href });
+  const anchorProps = router.anchor(tab.href);
+
+  return (
+    <Tabs.Tab
+      value={tab.value}
+      component="a"
+      leftSection={tab.icon ? <tab.icon size={16} /> : undefined}
+      disabled={tab.disabled}
+      data-active={isActive || undefined}
+      style={{
+        opacity: isPending ? 0.6 : 1,
+      }}
+      {...anchorProps}
+    >
+      {tab.label}
+      {tab.count !== undefined && tab.count > 0 && ` (${tab.count})`}
+    </Tabs.Tab>
+  );
+};
+
+export default AdminResourceTabsItem;

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.