@alepha/ui 0.13.2 → 0.13.4

package/src/admin/components/AdminSessions.tsx

@@ -1,11 +1,12 @@
-import { useClient } from "@alepha/react";
+import { useClient, useRouter } from "@alepha/react";
 import { useI18n } from "@alepha/react/i18n";
-import { DataTable, Flex, Text } from "@alepha/ui";
+import { ActionButton, DataTable, Flex, Text } from "@alepha/ui";
 import { Badge, Group } from "@mantine/core";
 import {
   IconDeviceDesktop,
   IconDeviceMobile,
   IconDeviceTablet,
+  IconTrash,
 } from "@tabler/icons-react";
 import { type Page, t } from "alepha";
 import {
@@ -13,6 +14,8 @@ import {
   type SessionEntity,
   sessions,
 } from "alepha/api/users";
+import { useState } from "react";
+import type { AdminRouter } from "../AdminRouter.ts";
 
 export interface AdminSessionsProps {
   userRealmName?: string;
@@ -20,7 +23,9 @@ export interface AdminSessionsProps {
 
 const AdminSessions = (props: AdminSessionsProps) => {
   const client = useClient<SessionController>();
+  const router = useRouter<AdminRouter>();
   const { l } = useI18n();
+  const [refreshKey, setRefreshKey] = useState(0);
 
   const filters = t.object({
     userId: t.optional(
@@ -47,9 +52,18 @@ const AdminSessions = (props: AdminSessionsProps) => {
     return new Date(expiresAt) < new Date();
   };
 
+  const handleDelete = async (sessionId: string) => {
+    await client.deleteSession({
+      params: { id: sessionId },
+      query: { userRealmName: props.userRealmName },
+    });
+    setRefreshKey((k) => k + 1);
+  };
+
   return (
-    <Flex flex={1}>
+    <Flex flex={1} direction="column">
       <DataTable<SessionEntity, typeof filters>
+        key={refreshKey}
         submitOnInit
         defaultSize={10}
         typeFormProps={{
@@ -86,11 +100,19 @@ const AdminSessions = (props: AdminSessionsProps) => {
         }}
         columns={{
           userId: {
-            label: "User ID",
+            label: "User",
             value: (item) => (
-              <Text size="xs" ff="monospace">
-                {item.userId.slice(0, 8)}...
-              </Text>
+              <ActionButton
+                variant="subtle"
+                size="xs"
+                href={router.path("adminUserDetails", {
+                  params: { userId: item.userId },
+                })}
+              >
+                <Text size="xs" ff="monospace">
+                  {item.userId.slice(0, 8)}...
+                </Text>
+              </ActionButton>
             ),
           },
           userAgent: {
@@ -150,6 +172,20 @@ const AdminSessions = (props: AdminSessionsProps) => {
               </Text>
             ),
           },
+          actions: {
+            label: "",
+            fit: true,
+            value: (item) => (
+              <ActionButton
+                size="xs"
+                variant="subtle"
+                color="red"
+                onClick={() => handleDelete(item.id)}
+              >
+                <IconTrash size={14} />
+              </ActionButton>
+            ),
+          },
         }}
       />
     </Flex>

package/src/admin/components/AdminUserCreate.tsx

@@ -0,0 +1,84 @@
+import { useClient, useRouter } from "@alepha/react";
+import { useForm } from "@alepha/react/form";
+import { ActionButton, Control, Flex } from "@alepha/ui";
+import { Card, Stack, Text } from "@mantine/core";
+import { t } from "alepha";
+import type { UserController } from "alepha/api/users";
+import type { AdminRouter } from "../AdminRouter.ts";
+
+export interface AdminUserCreateProps {
+  userRealmName?: string;
+}
+
+const AdminUserCreate = (props: AdminUserCreateProps) => {
+  const client = useClient<UserController>();
+  const router = useRouter<AdminRouter>();
+
+  const form = useForm({
+    schema: 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())),
+      enabled: t.optional(t.boolean()),
+      password: t.optional(t.string({ minLength: 8 })),
+    }),
+    handler: async (data) => {
+      const user = await client.createUser({
+        query: {
+          userRealmName: props.userRealmName,
+        },
+        body: {
+          ...data,
+          enabled: data.enabled ?? true,
+        },
+      });
+
+      await router.go("adminUserDetails", {
+        params: { userId: user.id },
+      });
+    },
+  });
+
+  return (
+    <Flex flex={1} p="md">
+      <Card withBorder p="lg" maw={600} w="100%">
+        <form {...form.props}>
+          <Stack gap="md">
+            <Text size="lg" fw={500}>
+              Create New User
+            </Text>
+
+            <Control title="Username" input={form.input.username} />
+
+            <Control title="Email" input={form.input.email} />
+
+            <Control title="Phone Number" input={form.input.phoneNumber} />
+
+            <Control title="First Name" input={form.input.firstName} />
+
+            <Control title="Last Name" input={form.input.lastName} />
+
+            <Control title="Password" input={form.input.password} password />
+
+            <Control title="Roles" input={form.input.roles} />
+
+            <Control title="Enabled" input={form.input.enabled} />
+
+            <ActionButton form={form}>Create User</ActionButton>
+          </Stack>
+        </form>
+      </Card>
+    </Flex>
+  );
+};
+
+export default AdminUserCreate;

package/src/admin/components/AdminUserDetails.tsx

@@ -0,0 +1,180 @@
+import { useClient, useRouterState } from "@alepha/react";
+import { useForm } from "@alepha/react/form";
+import { useI18n } from "@alepha/react/i18n";
+import { ActionButton, Control, Flex, Text } from "@alepha/ui";
+import { Card, Group, Loader, Stack } from "@mantine/core";
+import { IconCheck, IconX } from "@tabler/icons-react";
+import { t } from "alepha";
+import type { UserController, UserEntity } from "alepha/api/users";
+import { useEffect, useState } from "react";
+
+export interface AdminUserDetailsProps {
+  userRealmName?: string;
+}
+
+const AdminUserDetails = (props: AdminUserDetailsProps) => {
+  const state = useRouterState();
+  const client = useClient<UserController>();
+  const { l } = useI18n();
+  const userId = state.params.userId as string;
+
+  const [user, setUser] = useState<UserEntity | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const loadUser = async () => {
+      try {
+        const data = await client.getUser({
+          params: { id: userId },
+          query: { userRealmName: props.userRealmName },
+        });
+        setUser(data);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    loadUser();
+  }, [userId]);
+
+  const form = useForm({
+    schema: t.object({
+      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())),
+      enabled: t.optional(t.boolean()),
+    }),
+    handler: async (data) => {
+      const updated = await client.updateUser({
+        params: { id: userId },
+        query: { userRealmName: props.userRealmName },
+        body: data,
+      });
+      setUser(updated);
+    },
+  });
+
+  useEffect(() => {
+    if (user) {
+      form.input.email?.set(user.email ?? "");
+      form.input.phoneNumber?.set(user.phoneNumber ?? "");
+      form.input.firstName?.set(user.firstName ?? "");
+      form.input.lastName?.set(user.lastName ?? "");
+      form.input.roles?.set(user.roles ?? []);
+      form.input.enabled?.set(user.enabled);
+    }
+  }, [user]);
+
+  if (loading) {
+    return (
+      <Flex flex={1} justify="center" align="center">
+        <Loader />
+      </Flex>
+    );
+  }
+
+  if (!user) {
+    return (
+      <Flex flex={1} justify="center" align="center">
+        <Text c="dimmed">User not found</Text>
+      </Flex>
+    );
+  }
+
+  return (
+    <Flex flex={1} direction="column" gap="md">
+      <Card withBorder p="lg">
+        <Stack gap="md">
+          <Text size="lg" fw={500}>
+            User Details
+          </Text>
+
+          <Group gap="xl">
+            <Stack gap={4}>
+              <Text size="xs" c="dimmed">
+                User ID
+              </Text>
+              <Text size="sm" ff="monospace">
+                {user.id}
+              </Text>
+            </Stack>
+
+            <Stack gap={4}>
+              <Text size="xs" c="dimmed">
+                Username
+              </Text>
+              <Text size="sm">{user.username || "-"}</Text>
+            </Stack>
+
+            <Stack gap={4}>
+              <Text size="xs" c="dimmed">
+                Email Verified
+              </Text>
+              {user.emailVerified ? (
+                <Group gap={4}>
+                  <IconCheck size={14} color="var(--mantine-color-green-6)" />
+                  <Text size="sm" c="green">
+                    Verified
+                  </Text>
+                </Group>
+              ) : (
+                <Group gap={4}>
+                  <IconX size={14} color="var(--mantine-color-red-6)" />
+                  <Text size="sm" c="red">
+                    Not Verified
+                  </Text>
+                </Group>
+              )}
+            </Stack>
+
+            <Stack gap={4}>
+              <Text size="xs" c="dimmed">
+                Created
+              </Text>
+              <Text size="sm">{l(user.createdAt, { date: "medium" })}</Text>
+            </Stack>
+
+            <Stack gap={4}>
+              <Text size="xs" c="dimmed">
+                Updated
+              </Text>
+              <Text size="sm">{l(user.updatedAt, { date: "medium" })}</Text>
+            </Stack>
+          </Group>
+        </Stack>
+      </Card>
+
+      <Card withBorder p="lg">
+        <form {...form.props}>
+          <Stack gap="md">
+            <Text size="lg" fw={500}>
+              Edit User
+            </Text>
+
+            <Group grow>
+              <Control title="Email" input={form.input.email} />
+              <Control title="Phone Number" input={form.input.phoneNumber} />
+            </Group>
+
+            <Group grow>
+              <Control title="First Name" input={form.input.firstName} />
+              <Control title="Last Name" input={form.input.lastName} />
+            </Group>
+
+            <Control title="Roles" input={form.input.roles} />
+
+            <Control title="Enabled" input={form.input.enabled} />
+
+            <Group>
+              <ActionButton form={form}>Save Changes</ActionButton>
+            </Group>
+          </Stack>
+        </form>
+      </Card>
+    </Flex>
+  );
+};
+
+export default AdminUserDetails;

package/src/admin/components/AdminUserLayout.tsx

@@ -0,0 +1,172 @@
+import {
+  NestedView,
+  useClient,
+  useRouter,
+  useRouterState,
+} from "@alepha/react";
+import { ActionButton, Flex, Text } from "@alepha/ui";
+import { Avatar, Badge, Card, Group, Loader, Stack, Tabs } from "@mantine/core";
+import { IconDevices, IconSettings, IconUser } from "@tabler/icons-react";
+import type { UserController, UserEntity } from "alepha/api/users";
+import { useEffect, useState } from "react";
+import type { AdminRouter } from "../AdminRouter.ts";
+
+export interface AdminUserLayoutProps {
+  userRealmName?: string;
+}
+
+const AdminUserLayout = (props: AdminUserLayoutProps) => {
+  const router = useRouter<AdminRouter>();
+  const state = useRouterState();
+  const client = useClient<UserController>();
+  const userId = state.params.userId as string;
+
+  const [user, setUser] = useState<UserEntity | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const loadUser = async () => {
+      try {
+        const data = await client.getUser({
+          params: { id: userId },
+          query: { userRealmName: props.userRealmName },
+        });
+        setUser(data);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    loadUser();
+  }, [userId]);
+
+  if (loading) {
+    return (
+      <Flex flex={1} justify="center" align="center">
+        <Loader />
+      </Flex>
+    );
+  }
+
+  if (!user) {
+    return (
+      <Flex flex={1} justify="center" align="center">
+        <Text c="dimmed">User not found</Text>
+      </Flex>
+    );
+  }
+
+  const currentPath = state.url.pathname;
+  const detailsPath = router.path("adminUserDetails", { params: { userId } });
+  const sessionsPath = router.path("adminUserSessions", { params: { userId } });
+  const settingsPath = router.path("adminUserSettings", { params: { userId } });
+
+  const getActiveTab = () => {
+    if (currentPath.endsWith("/sessions")) return "sessions";
+    if (currentPath.endsWith("/settings")) return "settings";
+    return "details";
+  };
+  const activeTab = getActiveTab();
+
+  const displayName =
+    user.firstName || user.lastName
+      ? `${user.firstName ?? ""} ${user.lastName ?? ""}`.trim()
+      : user.username || user.email || "User";
+
+  return (
+    <Flex flex={1} direction="column" gap="md" p="md">
+      <Card withBorder p="md">
+        <Group>
+          <Avatar size="lg" radius="xl" color="blue">
+            {displayName.charAt(0).toUpperCase()}
+          </Avatar>
+          <Stack gap={4}>
+            <Group gap="xs">
+              <Text size="lg" fw={500}>
+                {displayName}
+              </Text>
+              <Badge
+                size="sm"
+                variant="light"
+                color={user.enabled ? "green" : "red"}
+              >
+                {user.enabled ? "Active" : "Disabled"}
+              </Badge>
+            </Group>
+            <Text size="sm" c="dimmed">
+              {user.email || user.username || user.id}
+            </Text>
+            {user.roles.length > 0 && (
+              <Group gap={4}>
+                {user.roles.map((role: string) => (
+                  <Badge key={role} size="xs" variant="outline">
+                    {role}
+                  </Badge>
+                ))}
+              </Group>
+            )}
+          </Stack>
+        </Group>
+      </Card>
+
+      <Tabs value={activeTab}>
+        <Tabs.List>
+          <ActionButton
+            variant="subtle"
+            href={detailsPath}
+            leftSection={<IconUser size={16} />}
+            c={activeTab === "details" ? undefined : "dimmed"}
+            fw={activeTab === "details" ? 500 : 400}
+            style={{
+              borderBottom:
+                activeTab === "details"
+                  ? "2px solid var(--mantine-primary-color-filled)"
+                  : "2px solid transparent",
+              borderRadius: 0,
+            }}
+          >
+            Details
+          </ActionButton>
+          <ActionButton
+            variant="subtle"
+            href={sessionsPath}
+            leftSection={<IconDevices size={16} />}
+            c={activeTab === "sessions" ? undefined : "dimmed"}
+            fw={activeTab === "sessions" ? 500 : 400}
+            style={{
+              borderBottom:
+                activeTab === "sessions"
+                  ? "2px solid var(--mantine-primary-color-filled)"
+                  : "2px solid transparent",
+              borderRadius: 0,
+            }}
+          >
+            Sessions
+          </ActionButton>
+          <ActionButton
+            variant="subtle"
+            href={settingsPath}
+            leftSection={<IconSettings size={16} />}
+            c={activeTab === "settings" ? undefined : "dimmed"}
+            fw={activeTab === "settings" ? 500 : 400}
+            style={{
+              borderBottom:
+                activeTab === "settings"
+                  ? "2px solid var(--mantine-primary-color-filled)"
+                  : "2px solid transparent",
+              borderRadius: 0,
+            }}
+          >
+            Settings
+          </ActionButton>
+        </Tabs.List>
+      </Tabs>
+
+      <Flex flex={1}>
+        <NestedView />
+      </Flex>
+    </Flex>
+  );
+};
+
+export default AdminUserLayout;

package/src/admin/components/AdminUserSessions.tsx

@@ -0,0 +1,158 @@
+import { useClient, useRouterState } from "@alepha/react";
+import { useI18n } from "@alepha/react/i18n";
+import { ActionButton, DataTable, Flex, Text } from "@alepha/ui";
+import { Badge, Group } from "@mantine/core";
+import {
+  IconDeviceDesktop,
+  IconDeviceMobile,
+  IconDeviceTablet,
+  IconTrash,
+} from "@tabler/icons-react";
+import { type Page, t } from "alepha";
+import type { SessionController, SessionEntity } from "alepha/api/users";
+import { useState } from "react";
+
+export interface AdminUserSessionsProps {
+  userRealmName?: string;
+}
+
+const AdminUserSessions = (props: AdminUserSessionsProps) => {
+  const state = useRouterState();
+  const client = useClient<SessionController>();
+  const { l } = useI18n();
+  const userId = state.params.userId as string;
+  const [refreshKey, setRefreshKey] = useState(0);
+
+  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) => {
+    await client.deleteSession({
+      params: { id: sessionId },
+      query: { userRealmName: props.userRealmName },
+    });
+    setRefreshKey((k) => k + 1);
+  };
+
+  const filters = t.object({});
+
+  return (
+    <Flex flex={1} direction="column">
+      <DataTable<SessionEntity, typeof filters>
+        key={refreshKey}
+        submitOnInit
+        defaultSize={10}
+        filters={filters}
+        tableProps={{
+          horizontalSpacing: "xs",
+          verticalSpacing: "xs",
+        }}
+        tableTrProps={(item) => {
+          if (isExpired(item.expiresAt)) {
+            return {
+              opacity: 0.5,
+            };
+          }
+          return {};
+        }}
+        items={async (filters) => {
+          const response = await client.findSessions({
+            query: {
+              ...filters,
+              userId,
+              userRealmName: props.userRealmName,
+            },
+          });
+
+          return response as Page<SessionEntity>;
+        }}
+        columns={{
+          userAgent: {
+            label: "Device",
+            value: (item) => (
+              <Group gap={4}>
+                {item.userAgent ? (
+                  <>
+                    <Badge
+                      size="xs"
+                      variant="light"
+                      leftSection={getDeviceIcon(item.userAgent.device)}
+                    >
+                      {item.userAgent.device}
+                    </Badge>
+                    <Text size="xs" c="dimmed">
+                      {item.userAgent.browser} / {item.userAgent.os}
+                    </Text>
+                  </>
+                ) : (
+                  <Text size="xs" c="dimmed">
+                    -
+                  </Text>
+                )}
+              </Group>
+            ),
+          },
+          ip: {
+            label: "IP Address",
+            fit: true,
+            value: (item) => (
+              <Text size="xs" ff="monospace" c="dimmed">
+                {item.ip || "-"}
+              </Text>
+            ),
+          },
+          expiresAt: {
+            label: "Status",
+            fit: true,
+            value: (item) => (
+              <Badge
+                size="sm"
+                variant="light"
+                color={isExpired(item.expiresAt) ? "red" : "green"}
+              >
+                {isExpired(item.expiresAt) ? "Expired" : "Active"}
+              </Badge>
+            ),
+          },
+          createdAt: {
+            label: "Created",
+            fit: true,
+            value: (item) => (
+              <Text size="xs" c="dimmed">
+                {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>
+            ),
+          },
+        }}
+      />
+    </Flex>
+  );
+};
+
+export default AdminUserSessions;