@alepha/ui 0.14.1 → 0.14.3

package/src/admin/components/audits/AdminAudits.tsx

@@ -1,5 +1,6 @@
-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, Flex, Text } from "@alepha/ui";
 import { Badge, Group, Stack, Tooltip } from "@mantine/core";
 import {
@@ -10,7 +11,7 @@ import {
   IconX,
 } from "@tabler/icons-react";
 import { type Page, t } from "alepha";
-import type { AuditController, AuditEntity } from "alepha/api/audits";
+import type { AdminAuditController, AuditEntity } from "alepha/api/audits";
 import type { AdminRouter } from "../../AdminRouter.ts";
 
 export interface AdminAuditsProps {
@@ -61,7 +62,7 @@ const getTypeColor = (type: string) => {
 };
 
 const AdminAudits = (props: AdminAuditsProps) => {
-  const client = useClient<AuditController>();
+  const client = useClient<AdminAuditController>();
   const router = useRouter<AdminRouter>();
   const { l } = useI18n();
 

package/src/admin/components/jobs/AdminJobs.tsx

@@ -10,13 +10,13 @@ import {
 } from "@tabler/icons-react";
 import { type Page, t } from "alepha";
 import {
-  type JobController,
+  type AdminJobController,
   type JobExecutionEntity,
   jobExecutions,
 } from "alepha/api/jobs";
 
 const AdminJobs = () => {
-  const client = useClient<JobController>();
+  const client = useClient<AdminJobController>();
   const { l } = useI18n();
 
   const filters = t.object({

package/src/admin/components/notifications/AdminNotifications.tsx

@@ -11,12 +11,12 @@ import {
 } from "@tabler/icons-react";
 import { type Page, t } from "alepha";
 import type {
-  NotificationController,
+  AdminNotificationController,
   NotificationEntity,
 } from "alepha/api/notifications";
 
 const AdminNotifications = () => {
-  const client = useClient<NotificationController>();
+  const client = useClient<AdminNotificationController>();
   const { l } = useI18n();
 
   const filters = t.object({

package/src/admin/components/parameters/AdminParameters.tsx

@@ -3,7 +3,7 @@ import { Flex, Text } from "@alepha/ui";
 import { Loader, Stack } from "@mantine/core";
 import { IconSettings } from "@tabler/icons-react";
 import type {
-  ConfigController,
+  AdminConfigController,
   ConfigTreeNode,
   Parameter,
 } from "alepha/api/parameters";
@@ -14,7 +14,7 @@ import ParameterTree from "./ParameterTree.tsx";
 import type { ConfigValue } from "./types.ts";
 
 const AdminParameters = () => {
-  const client = useClient<ConfigController>();
+  const client = useClient<AdminConfigController>();
 
   // State
   const [treeData, setTreeData] = useState<ConfigTreeNode[]>([]);

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

@@ -1,5 +1,6 @@
-import { useClient, useRouter } from "@alepha/react";
+import { useClient } from "@alepha/react";
 import { useI18n } from "@alepha/react/i18n";
+import { useRouter } from "@alepha/react/router";
 import { ActionButton, DataTable, Flex, Text } from "@alepha/ui";
 import { Badge, Group } from "@mantine/core";
 import {
@@ -10,7 +11,7 @@ import {
 } from "@tabler/icons-react";
 import { type Page, t } from "alepha";
 import {
-  type SessionController,
+  type AdminSessionController,
   type SessionEntity,
   sessions,
 } from "alepha/api/users";
@@ -22,7 +23,7 @@ export interface AdminSessionsProps {
 }
 
 const AdminSessions = (props: AdminSessionsProps) => {
-  const client = useClient<SessionController>();
+  const client = useClient<AdminSessionController>();
   const router = useRouter<AdminRouter>();
   const { l } = useI18n();
   const [refreshKey, setRefreshKey] = useState(0);

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

@@ -0,0 +1,281 @@
+import { useRouter } from "@alepha/react/router";
+import { ActionButton } from "@alepha/ui";
+import {
+  ActionIcon,
+  Avatar,
+  Badge,
+  Button,
+  Group,
+  Menu,
+  Stack,
+  Text,
+  Tooltip,
+} from "@mantine/core";
+import {
+  IconChevronDown,
+  IconChevronLeft,
+  IconExternalLink,
+} from "@tabler/icons-react";
+import type { ComponentType, ReactNode } from "react";
+
+export interface AdminResourceAction {
+  label: string;
+  icon?: ComponentType<{ size?: number }>;
+  onClick?: () => void;
+  href?: string;
+  color?: string;
+  disabled?: boolean;
+  loading?: boolean;
+  variant?: "filled" | "light" | "outline" | "subtle";
+}
+
+export interface AdminResourceHeaderProps {
+  /**
+   * Back navigation URL
+   */
+  backHref?: string;
+
+  /**
+   * Back navigation label
+   */
+  backLabel?: string;
+
+  /**
+   * Avatar content (letter, image URL, or custom node)
+   */
+  avatar?: string | ReactNode;
+
+  /**
+   * Avatar color
+   */
+  avatarColor?: string;
+
+  /**
+   * Resource title (e.g., user name)
+   */
+  title: string;
+
+  /**
+   * Secondary text (e.g., email)
+   */
+  subtitle?: string;
+
+  /**
+   * Tertiary identifier to copy (e.g., user ID)
+   */
+  identifier?: string;
+
+  /**
+   * Label for the identifier tooltip
+   */
+  identifierLabel?: string;
+
+  /**
+   * Status badge
+   */
+  status?: {
+    label: string;
+    color: "green" | "red" | "yellow" | "blue" | "gray";
+  };
+
+  /**
+   * Additional badges (e.g., roles)
+   */
+  badges?: Array<{
+    label: string;
+    color?: string;
+    variant?: "filled" | "light" | "outline" | "dot";
+  }>;
+
+  /**
+   * Primary action button
+   */
+  primaryAction?: AdminResourceAction;
+
+  /**
+   * Menu actions (shown in dropdown)
+   */
+  menuActions?: AdminResourceAction[];
+
+  /**
+   * External link URL
+   */
+  externalUrl?: string;
+
+  /**
+   * Loading state
+   */
+  loading?: boolean;
+}
+
+const ActionMenuItem = (props: { action: AdminResourceAction }) => {
+  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>
+  );
+};
+
+const AdminResourceHeader = (props: AdminResourceHeaderProps) => {
+  const {
+    backHref,
+    backLabel = "Back",
+    avatar,
+    avatarColor = "blue",
+    title,
+    subtitle,
+    identifier,
+    identifierLabel = "ID",
+    status,
+    badges = [],
+    primaryAction,
+    menuActions = [],
+    externalUrl,
+  } = props;
+
+  const renderAvatar = () => {
+    if (typeof avatar === "string") {
+      if (avatar.startsWith("http") || avatar.startsWith("/")) {
+        return (
+          <Avatar src={avatar} size={56} radius="md" color={avatarColor} />
+        );
+      }
+      return (
+        <Avatar size={56} radius="md" color={avatarColor}>
+          {avatar}
+        </Avatar>
+      );
+    }
+    if (avatar) {
+      return avatar;
+    }
+    return (
+      <Avatar size={56} radius="md" color={avatarColor}>
+        {title.charAt(0).toUpperCase()}
+      </Avatar>
+    );
+  };
+
+  return (
+    <Stack gap="xs">
+      {/* Breadcrumb / Back navigation */}
+      {backHref && (
+        <Group>
+          <ActionButton
+            variant="subtle"
+            size="xs"
+            href={backHref}
+            leftSection={<IconChevronLeft size={14} />}
+            c="dimmed"
+          >
+            {backLabel}
+          </ActionButton>
+        </Group>
+      )}
+
+      {/* Main header */}
+      <Group justify="space-between" align="flex-start" wrap="nowrap">
+        {/* Left: Avatar + Info */}
+        <Group gap="md" wrap="nowrap">
+          {renderAvatar()}
+
+          <Stack gap={2} justify="center" style={{ minHeight: 56 }}>
+            {/* Title row */}
+            <Group gap="xs" align="center">
+              <Text size="md" fw={600} lh={1.2}>
+                {title}
+              </Text>
+              {status && (
+                <Badge
+                  size="xs"
+                  variant="light"
+                  color={status.color}
+                  tt="lowercase"
+                >
+                  {status.label}
+                </Badge>
+              )}
+            </Group>
+
+            {/* Subtitle */}
+            {subtitle && (
+              <Text size="xs" c="dimmed">
+                {subtitle}
+              </Text>
+            )}
+          </Stack>
+        </Group>
+
+        {/* Right: Actions */}
+        <Group gap="xs">
+          {externalUrl && (
+            <Tooltip label="Open in new tab" openDelay={500}>
+              <ActionIcon
+                variant="subtle"
+                color="gray"
+                component="a"
+                href={externalUrl}
+                target="_blank"
+              >
+                <IconExternalLink size={18} />
+              </ActionIcon>
+            </Tooltip>
+          )}
+
+          {primaryAction && (
+            <ActionButton
+              variant={primaryAction.variant ?? "light"}
+              color={primaryAction.color}
+              onClick={primaryAction.onClick}
+              href={primaryAction.href}
+              loading={primaryAction.loading}
+              disabled={primaryAction.disabled}
+              leftSection={
+                primaryAction.icon ? (
+                  <primaryAction.icon size={16} />
+                ) : undefined
+              }
+            >
+              {primaryAction.label}
+            </ActionButton>
+          )}
+
+          {menuActions.length > 0 && (
+            <Menu position="bottom-end" shadow="md" width={220}>
+              <Menu.Target>
+                <Button
+                  variant="default"
+                  rightSection={<IconChevronDown size={16} />}
+                >
+                  Actions
+                </Button>
+              </Menu.Target>
+              <Menu.Dropdown>
+                {menuActions.map((action, index) => (
+                  <ActionMenuItem key={index} action={action} />
+                ))}
+              </Menu.Dropdown>
+            </Menu>
+          )}
+        </Group>
+      </Group>
+    </Stack>
+  );
+};
+
+export default AdminResourceHeader;

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

@@ -0,0 +1,94 @@
+import { useActive, useRouter } from "@alepha/react/router";
+import { Tabs } from "@mantine/core";
+import type { ComponentType, ReactNode } from "react";
+
+export interface AdminResourceTab {
+  /**
+   * Tab key/value
+   */
+  value: string;
+
+  /**
+   * Tab label
+   */
+  label: string;
+
+  /**
+   * Tab icon
+   */
+  icon?: ComponentType<{ size?: number }>;
+
+  /**
+   * Navigation href
+   */
+  href: string;
+
+  /**
+   * Whether tab is disabled
+   */
+  disabled?: boolean;
+
+  /**
+   * Badge count to show
+   */
+  count?: number;
+}
+
+export interface AdminResourceTabsProps {
+  /**
+   * Array of tab configurations
+   */
+  tabs: AdminResourceTab[];
+
+  /**
+   * Currently active tab value
+   */
+  activeTab?: string;
+
+  /**
+   * Content to render below tabs
+   */
+  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;
+
+  return (
+    <Tabs value={activeTab} variant="default">
+      <Tabs.List>
+        {tabs.map((tab) => (
+          <TabItem key={tab.value} tab={tab} />
+        ))}
+      </Tabs.List>
+
+      {children}
+    </Tabs>
+  );
+};
+
+export default AdminResourceTabs;

package/src/admin/components/shared/index.ts

@@ -0,0 +1,10 @@
+export {
+  type AdminResourceAction,
+  type AdminResourceHeaderProps,
+  default as AdminResourceHeader,
+} from "./AdminResourceHeader.tsx";
+export {
+  type AdminResourceTab,
+  type AdminResourceTabsProps,
+  default as AdminResourceTabs,
+} from "./AdminResourceTabs.tsx";

package/src/admin/components/users/AdminUserAudits.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 { DataTable, Flex, Text } from "@alepha/ui";
 import { Badge, Group, Tooltip } from "@mantine/core";
 import {
@@ -9,7 +10,7 @@ import {
   IconX,
 } from "@tabler/icons-react";
 import { type Page, t } from "alepha";
-import type { AuditController, AuditEntity } from "alepha/api/audits";
+import type { AdminAuditController, AuditEntity } from "alepha/api/audits";
 
 export interface AdminUserAuditsProps {
   userRealmName?: string;
@@ -39,7 +40,7 @@ const getSeverityIcon = (severity: string) => {
 
 const AdminUserAudits = (_props: AdminUserAuditsProps) => {
   const state = useRouterState();
-  const client = useClient<AuditController>();
+  const client = useClient<AdminAuditController>();
   const { l } = useI18n();
   const userId = state.params.userId as string;
 

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

@@ -1,9 +1,10 @@
-import { useClient, useRouter } from "@alepha/react";
+import { useClient } from "@alepha/react";
 import { useForm } from "@alepha/react/form";
+import { useRouter } from "@alepha/react/router";
 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 { AdminUserController } from "alepha/api/users";
 import type { AdminRouter } from "../../AdminRouter.ts";
 
 export interface AdminUserCreateProps {
@@ -11,7 +12,7 @@ export interface AdminUserCreateProps {
 }
 
 const AdminUserCreate = (props: AdminUserCreateProps) => {
-  const client = useClient<UserController>();
+  const client = useClient<AdminUserController>();
   const router = useRouter<AdminRouter>();
 
   const form = useForm({