@alepha/ui 0.14.1 → 0.14.3

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

@@ -1,15 +1,23 @@
+import { useClient } from "@alepha/react";
+import { NestedView, useRouter, useRouterState } from "@alepha/react/router";
+import { Box, Center, Loader, Stack, Text } from "@mantine/core";
 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";
+  IconBan,
+  IconDevices,
+  IconHistory,
+  IconLock,
+  IconMail,
+  IconPencil,
+  IconSettings,
+  IconShieldCheck,
+  IconTrash,
+  IconUser,
+} from "@tabler/icons-react";
+import type { AdminUserController, UserEntity } from "alepha/api/users";
 import { useEffect, useState } from "react";
 import type { AdminRouter } from "../../AdminRouter.ts";
+import AdminResourceHeader from "../shared/AdminResourceHeader.tsx";
+import AdminResourceTabs from "../shared/AdminResourceTabs.tsx";
 
 export interface AdminUserLayoutProps {
   userRealmName?: string;
@@ -18,11 +26,12 @@ export interface AdminUserLayoutProps {
 const AdminUserLayout = (props: AdminUserLayoutProps) => {
   const router = useRouter<AdminRouter>();
   const state = useRouterState();
-  const client = useClient<UserController>();
+  const client = useClient<AdminUserController>();
   const userId = state.params.userId as string;
 
   const [user, setUser] = useState<UserEntity | null>(null);
   const [loading, setLoading] = useState(true);
+  const [actionLoading, setActionLoading] = useState<string | null>(null);
 
   useEffect(() => {
     const loadUser = async () => {
@@ -42,127 +51,170 @@ const AdminUserLayout = (props: AdminUserLayoutProps) => {
 
   if (loading) {
     return (
-      <Flex flex={1} justify="center" align="center">
+      <Center flex={1}>
         <Loader />
-      </Flex>
+      </Center>
     );
   }
 
   if (!user) {
     return (
-      <Flex flex={1} justify="center" align="center">
-        <Text c="dimmed">User not found</Text>
-      </Flex>
+      <Center flex={1}>
+        <Stack align="center" gap="xs">
+          <IconUser size={48} opacity={0.3} />
+          <Text c="dimmed">User not found</Text>
+        </Stack>
+      </Center>
     );
   }
 
-  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 displayName =
+    user.firstName || user.lastName
+      ? `${user.firstName ?? ""} ${user.lastName ?? ""}`.trim()
+      : user.username || user.email || "User";
 
+  const currentPath = state.url.pathname;
   const getActiveTab = () => {
     if (currentPath.endsWith("/sessions")) return "sessions";
     if (currentPath.endsWith("/settings")) return "settings";
-    return "details";
+    if (currentPath.endsWith("/audits")) return "audits";
+    return "profile";
   };
-  const activeTab = getActiveTab();
 
-  const displayName =
-    user.firstName || user.lastName
-      ? `${user.firstName ?? ""} ${user.lastName ?? ""}`.trim()
-      : user.username || user.email || "User";
+  const handleBlockUser = async () => {
+    setActionLoading("block");
+    try {
+      const updated = await client.updateUser({
+        params: { id: userId },
+        query: { userRealmName: props.userRealmName },
+        body: { enabled: !user.enabled },
+      });
+      setUser(updated);
+    } finally {
+      setActionLoading(null);
+    }
+  };
+
+  const handleSendVerification = async () => {
+    setActionLoading("verify");
+    // TODO: Implement send verification
+    await new Promise((resolve) => setTimeout(resolve, 1000));
+    setActionLoading(null);
+  };
+
+  const handleResetPassword = async () => {
+    setActionLoading("reset");
+    // TODO: Implement reset password
+    await new Promise((resolve) => setTimeout(resolve, 1000));
+    setActionLoading(null);
+  };
+
+  const handleDeleteUser = async () => {
+    if (
+      !confirm(
+        "Are you sure you want to delete this user? This action cannot be undone.",
+      )
+    ) {
+      return;
+    }
+    setActionLoading("delete");
+    try {
+      await client.deleteUser({
+        params: { id: userId },
+        query: { userRealmName: props.userRealmName },
+      });
+      await router.go("adminUsers");
+    } finally {
+      setActionLoading(null);
+    }
+  };
 
   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
-            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
-            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
-            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}>
+    <Box py="xl" px="xl" flex={1}>
+      <Stack gap="lg">
+        <AdminResourceHeader
+          backHref={router.path("adminUsers")}
+          backLabel="Users"
+          avatar={user.picture || displayName.charAt(0).toUpperCase()}
+          avatarColor={user.enabled ? "blue" : "gray"}
+          title={displayName}
+          subtitle={user.email || user.username || undefined}
+          status={{
+            label: user.enabled ? "Active" : "Disabled",
+            color: user.enabled ? "green" : "red",
+          }}
+          menuActions={[
+            {
+              label: "Edit Profile",
+              icon: IconPencil,
+              href: router.path("adminUserDetails", { params: { userId } }),
+            },
+            {
+              label: user.enabled ? "Disable User" : "Enable User",
+              icon: user.enabled ? IconBan : IconShieldCheck,
+              color: user.enabled ? "orange" : "green",
+              onClick: handleBlockUser,
+              loading: actionLoading === "block",
+            },
+            ...(user.email && !user.emailVerified
+              ? [
+                  {
+                    label: "Send Verification Email",
+                    icon: IconMail,
+                    onClick: handleSendVerification,
+                    loading: actionLoading === "verify",
+                  },
+                ]
+              : []),
+            {
+              label: "Reset Password",
+              icon: IconLock,
+              onClick: handleResetPassword,
+              loading: actionLoading === "reset",
+            },
+            {
+              label: "Delete User",
+              icon: IconTrash,
+              color: "red",
+              onClick: handleDeleteUser,
+              loading: actionLoading === "delete",
+            },
+          ]}
+        />
+
+        <AdminResourceTabs
+          activeTab={getActiveTab()}
+          tabs={[
+            {
+              value: "profile",
+              label: "Profile",
+              icon: IconUser,
+              href: router.path("adminUserDetails", { params: { userId } }),
+            },
+            {
+              value: "sessions",
+              label: "Sessions",
+              icon: IconDevices,
+              href: router.path("adminUserSessions", { params: { userId } }),
+            },
+            {
+              value: "audits",
+              label: "Activity",
+              icon: IconHistory,
+              href: router.path("adminUserAudits", { params: { userId } }),
+            },
+            {
+              value: "settings",
+              label: "Settings",
+              icon: IconSettings,
+              href: router.path("adminUserSettings", { params: { userId } }),
+            },
+          ]}
+        />
+
         <NestedView />
-      </Flex>
-    </Flex>
+      </Stack>
+    </Box>
   );
 };
 

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

@@ -1,5 +1,6 @@
-import { useClient, useRouterState } from "@alepha/react";
+import { useClient } from "@alepha/react";
 import { useI18n } from "@alepha/react/i18n";
+import { useRouterState } from "@alepha/react/router";
 import { ActionButton, DataTable, Flex, Text } from "@alepha/ui";
 import { Badge, Group } from "@mantine/core";
 import {
@@ -9,7 +10,7 @@ import {
   IconTrash,
 } from "@tabler/icons-react";
 import { type Page, t } from "alepha";
-import type { SessionController, SessionEntity } from "alepha/api/users";
+import type { AdminSessionController, SessionEntity } from "alepha/api/users";
 import { useState } from "react";
 
 export interface AdminUserSessionsProps {
@@ -18,7 +19,7 @@ export interface AdminUserSessionsProps {
 
 const AdminUserSessions = (props: AdminUserSessionsProps) => {
   const state = useRouterState();
-  const client = useClient<SessionController>();
+  const client = useClient<AdminSessionController>();
   const { l } = useI18n();
   const userId = state.params.userId as string;
   const [refreshKey, setRefreshKey] = useState(0);

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

@@ -1,4 +1,5 @@
-import { useClient, useRouter, useRouterState } from "@alepha/react";
+import { useClient } from "@alepha/react";
+import { useRouter, useRouterState } from "@alepha/react/router";
 import { ActionButton, Flex, Text } from "@alepha/ui";
 import { Alert, Card, Group, Loader, Stack } from "@mantine/core";
 import {
@@ -7,7 +8,11 @@ import {
   IconMail,
   IconTrash,
 } from "@tabler/icons-react";
-import type { UserController, UserEntity } from "alepha/api/users";
+import type {
+  AdminUserController,
+  UserController,
+  UserEntity,
+} from "alepha/api/users";
 import { useEffect, useState } from "react";
 import type { AdminRouter } from "../../AdminRouter.ts";
 
@@ -18,7 +23,8 @@ export interface AdminUserSettingsProps {
 const AdminUserSettings = (props: AdminUserSettingsProps) => {
   const router = useRouter<AdminRouter>();
   const state = useRouterState();
-  const client = useClient<UserController>();
+  const adminClient = useClient<AdminUserController>();
+  const userClient = useClient<UserController>();
   const userId = state.params.userId as string;
 
   const [user, setUser] = useState<UserEntity | null>(null);
@@ -30,7 +36,7 @@ const AdminUserSettings = (props: AdminUserSettingsProps) => {
   useEffect(() => {
     const loadUser = async () => {
       try {
-        const data = await client.getUser({
+        const data = await adminClient.getUser({
           params: { id: userId },
           query: { userRealmName: props.userRealmName },
         });
@@ -50,7 +56,7 @@ const AdminUserSettings = (props: AdminUserSettingsProps) => {
 
     setDeleteLoading(true);
     try {
-      await client.deleteUser({
+      await adminClient.deleteUser({
         params: { id: userId },
         query: { userRealmName: props.userRealmName },
       });
@@ -66,7 +72,7 @@ const AdminUserSettings = (props: AdminUserSettingsProps) => {
     setVerifyLoading(true);
     setVerifySuccess(false);
     try {
-      await client.requestEmailVerification({
+      await userClient.requestEmailVerification({
         query: {
           userRealmName: props.userRealmName,
           method: "link",

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

@@ -1,10 +1,15 @@
-import { useClient, useRouter } from "@alepha/react";
+import { useClient } from "@alepha/react";
 import { useI18n } from "@alepha/react/i18n";
+import { useRouter } from "@alepha/react/router";
 import { DataTable, Text } from "@alepha/ui";
 import { Badge, Flex, Group } from "@mantine/core";
 import { IconCheck, IconUsersPlus, IconX } from "@tabler/icons-react";
 import { type Page, t } from "alepha";
-import { type UserController, type UserEntity, users } from "alepha/api/users";
+import {
+  type AdminUserController,
+  type UserEntity,
+  users,
+} from "alepha/api/users";
 import type { AdminRouter } from "../../AdminRouter.ts";
 
 export interface AdminUsersProps {
@@ -12,7 +17,7 @@ export interface AdminUsersProps {
 }
 
 const AdminUsers = (props: AdminUsersProps) => {
-  const client = useClient<UserController>();
+  const client = useClient<AdminUserController>();
   const router = useRouter<AdminRouter>();
   const { l } = useI18n();
 

package/src/auth/AuthRouter.ts

@@ -1,5 +1,5 @@
-import { $page } from "@alepha/react";
 import { ReactAuth } from "@alepha/react/auth";
+import { $page } from "@alepha/react/router";
 import {
   IconLogin2,
   IconLogout2,

package/src/auth/components/AuthLayout.tsx

@@ -1,4 +1,4 @@
-import { NestedView } from "@alepha/react";
+import { NestedView } from "@alepha/react/router";
 import { AlephaMantineProvider } from "@alepha/ui";
 import { Flex } from "@mantine/core";
 

package/src/auth/components/Login.tsx

@@ -1,7 +1,7 @@
-import { useRouter } from "@alepha/react";
 import { useAuth } from "@alepha/react/auth";
 import { FormValidationError, useForm } from "@alepha/react/form";
 import { useI18n } from "@alepha/react/i18n";
+import { useRouter } from "@alepha/react/router";
 import { ActionButton, Control, capitalize } from "@alepha/ui";
 import { Card, Flex, Group, Image, Stack, Text, Title } from "@mantine/core";
 import { IconLock, IconUser } from "@tabler/icons-react";

package/src/auth/components/Register.tsx

@@ -1,7 +1,8 @@
-import { useClient, useRouter } from "@alepha/react";
+import { useClient } from "@alepha/react";
 import { useAuth } from "@alepha/react/auth";
 import { useForm } from "@alepha/react/form";
 import { useI18n } from "@alepha/react/i18n";
+import { useRouter } from "@alepha/react/router";
 import { ActionButton, Control, capitalize } from "@alepha/ui";
 import {
   Alert,

package/src/auth/components/ResetPassword.tsx

@@ -1,6 +1,7 @@
-import { useClient, useRouter } from "@alepha/react";
+import { useClient } from "@alepha/react";
 import { useForm } from "@alepha/react/form";
 import { useI18n } from "@alepha/react/i18n";
+import { useRouter } from "@alepha/react/router";
 import { ActionButton, Control } from "@alepha/ui";
 import {
   Alert,

package/src/auth/components/VerifyEmail.tsx

@@ -1,5 +1,6 @@
-import { useClient, useRouter, useRouterState } from "@alepha/react";
+import { useClient } from "@alepha/react";
 import { useI18n } from "@alepha/react/i18n";
+import { useRouter, useRouterState } from "@alepha/react/router";
 import { ActionButton } from "@alepha/ui";
 import { Alert, Card, Flex, Loader, Stack, Text } from "@mantine/core";
 import { IconAlertCircle, IconCheck, IconMailCheck } from "@tabler/icons-react";

package/src/auth/components/buttons/UserButton.tsx

@@ -1,5 +1,5 @@
-import { useRouter } from "@alepha/react";
 import { useAuth } from "@alepha/react/auth";
+import { useRouter } from "@alepha/react/router";
 import {
   ActionButton,
   type ActionMenuConfig,

package/src/core/RootRouter.ts

@@ -1,4 +1,4 @@
-import { $page } from "@alepha/react";
+import { $page } from "@alepha/react/router";
 import AlephaMantineProvider from "./components/layout/AlephaMantineProvider.tsx";
 
 export class RootRouter {

package/src/core/components/buttons/ActionButton.tsx

@@ -1,12 +1,11 @@
+import { type UseActionReturn, useAction } from "@alepha/react";
+import { type FormModel, useFormState } from "@alepha/react/form";
 import {
   type RouterGoOptions,
-  type UseActionReturn,
   type UseActiveOptions,
-  useAction,
   useActive,
   useRouter,
-} from "@alepha/react";
-import { type FormModel, useFormState } from "@alepha/react/form";
+} from "@alepha/react/router";
 import {
   Anchor,
   type AnchorProps,

package/src/core/components/form/Control.tsx

@@ -48,6 +48,9 @@ export interface ControlProps extends GenericControlProps {
   object?: boolean | Partial<Omit<ControlObjectProps, "input">>; // Nested object editing
   array?: boolean | Partial<Omit<ControlArrayProps, "input">>; // Array of items editing
   custom?: ComponentType<CustomControlProps>;
+
+  slider?: boolean;
+  segmented?: boolean;
 }
 
 /**
@@ -183,6 +186,9 @@ const Control = (_props: ControlProps) => {
   ) {
     const controlNumberProps =
       typeof props.number === "object" ? props.number : {};
+    if (props.slider) {
+      controlNumberProps.sliderProps ??= {};
+    }
     return (
       <ControlNumber
         input={props.input}
@@ -237,6 +243,9 @@ const Control = (_props: ControlProps) => {
 
   if (isEnum || (isArray && !isArrayOfObjects) || props.select) {
     const opts = typeof props.select === "object" ? props.select : {};
+    if (props.segmented) {
+      opts.segmented ??= {};
+    }
     return (
       <ControlSelect
         input={props.input}
@@ -264,7 +273,9 @@ const Control = (_props: ControlProps) => {
           id={id}
           color={"blue"}
           defaultChecked={props.input.props.defaultValue}
-          {...props.input.props}
+          onChange={(event) => {
+            props.input.set(event.currentTarget.checked);
+          }}
           {...switchProps}
         />
       );

package/src/core/components/form/ControlNumber.tsx

@@ -50,6 +50,8 @@ const ControlNumber = (props: ControlNumberProps) => {
   const { type, ...inputPropsWithoutType } = props.input.props;
 
   if (props.sliderProps) {
+    const min = props.sliderProps.min ?? inputProps.minimum ?? 0;
+    const max = props.sliderProps.max ?? inputProps.maximum ?? 100;
     return (
       <Input.Wrapper {...inputProps}>
         <div
@@ -65,6 +67,9 @@ const ControlNumber = (props: ControlNumberProps) => {
             {...inputPropsWithoutType}
             {...props.sliderProps}
             value={value}
+            min={min}
+            max={max}
+            label={() => value}
             onChange={(val) => {
               setValue(val);
               props.input.set(val);

package/src/core/components/form/TypeForm.tsx

@@ -92,6 +92,7 @@ const TypeForm = <T extends TObject>(props: TypeFormProps<T>) => {
     skipFormElement = false,
     skipSubmitButton = false,
     submitButtonProps,
+    fill = true,
   } = props;
 
   const schema = props.schema || form.options.schema;
@@ -176,7 +177,7 @@ const TypeForm = <T extends TObject>(props: TypeFormProps<T>) => {
     <Flex
       direction={"column"}
       gap={"sm"}
-      flex={props.fill ? 1 : undefined}
+      flex={fill ? 1 : undefined}
       {...props.flexProps}
     >
       <Flex direction={"column"} gap={"sm"} flex={1}>
@@ -212,7 +213,7 @@ const TypeForm = <T extends TObject>(props: TypeFormProps<T>) => {
   return (
     <Flex
       component={"form"}
-      flex={props.fill ? 1 : undefined}
+      flex={fill ? 1 : undefined}
       {...form.props}
       {...props.flexProps}
     >

package/src/core/components/layout/AdminShell.tsx

@@ -1,4 +1,5 @@
-import { NestedView, useEvents, useRouter, useStore } from "@alepha/react";
+import { useEvents, useStore } from "@alepha/react";
+import { NestedView, useRouter } from "@alepha/react/router";
 import {
   AppShell,
   type AppShellFooterProps,

package/src/core/components/layout/AlephaMantineProvider.tsx

@@ -1,5 +1,6 @@
-import { NestedView, useEvents } from "@alepha/react";
+import { useEvents } from "@alepha/react";
 import { FormValidationError } from "@alepha/react/form";
+import { NestedView } from "@alepha/react/router";
 import {
   ColorSchemeScript,
   type ColorSchemeScriptProps,
@@ -10,6 +11,7 @@ import { ModalsProvider, type ModalsProviderProps } from "@mantine/modals";
 import { Notifications, type NotificationsProps } from "@mantine/notifications";
 import type { NavigationProgressProps } from "@mantine/nprogress";
 import { NavigationProgress, nprogress } from "@mantine/nprogress";
+import { TypeBoxError } from "alepha";
 import type { ReactNode } from "react";
 import { useTheme } from "../../hooks/useTheme.ts";
 import { useToast } from "../../hooks/useToast.ts";
@@ -38,7 +40,10 @@ const AlephaMantineProvider = (props: AlephaMantineProviderProps) => {
         nprogress.complete();
       },
       "react:action:error": ({ error }) => {
-        if (error instanceof FormValidationError) {
+        if (
+          error instanceof FormValidationError ||
+          error instanceof TypeBoxError
+        ) {
           // Validation errors are handled by the form component
           return;
         }

package/src/core/components/layout/Omnibar.tsx

@@ -1,4 +1,5 @@
-import { useRouter, useStore } from "@alepha/react";
+import { useStore } from "@alepha/react";
+import { useRouter } from "@alepha/react/router";
 import { Spotlight, type SpotlightActionData } from "@mantine/spotlight";
 import { IconSearch } from "@tabler/icons-react";
 import { type ReactNode, useMemo } from "react";