@alepha/ui 0.14.2 → 0.14.3

package/package.json

@@ -7,7 +7,7 @@
     "mantine"
   ],
   "author": "Nicolas Foures",
-  "version": "0.14.2",
+  "version": "0.14.3",
   "type": "module",
   "engines": {
     "node": ">=22.0.0"
@@ -22,16 +22,16 @@
     "styles.css"
   ],
   "dependencies": {
-    "@alepha/react": "0.14.2",
-    "@mantine/core": "^8.3.10",
-    "@mantine/dates": "^8.3.10",
-    "@mantine/hooks": "^8.3.10",
-    "@mantine/modals": "^8.3.10",
-    "@mantine/notifications": "^8.3.10",
-    "@mantine/nprogress": "^8.3.10",
-    "@mantine/spotlight": "^8.3.10",
+    "@alepha/react": "0.14.3",
+    "@mantine/core": "^8.3.11",
+    "@mantine/dates": "^8.3.11",
+    "@mantine/hooks": "^8.3.11",
+    "@mantine/modals": "^8.3.11",
+    "@mantine/notifications": "^8.3.11",
+    "@mantine/nprogress": "^8.3.11",
+    "@mantine/spotlight": "^8.3.11",
     "@tabler/icons-react": "^3.36.1",
-    "alepha": "0.14.2",
+    "alepha": "0.14.3",
     "dayjs": "^1.11.19"
   },
   "devDependencies": {
@@ -39,7 +39,7 @@
     "react": "^19.2.3",
     "react-dom": "^19.2.3",
     "typescript": "^5.9.3",
-    "vite": "^7.3.0",
+    "vite": "^7.3.1",
     "vitest": "^4.0.16"
   },
   "peerDependencies": {

package/src/admin/AdminRouter.ts

@@ -13,23 +13,26 @@ import {
   IconUsers,
 } from "@tabler/icons-react";
 import { $inject } from "alepha";
-import type { AuditController } from "alepha/api/audits";
+import type { AdminAuditController } from "alepha/api/audits";
 import type { FileController } from "alepha/api/files";
-import type { NotificationController } from "alepha/api/notifications";
-import type { ConfigController } from "alepha/api/parameters";
-import type { SessionController, UserController } from "alepha/api/users";
+import type { AdminNotificationController } from "alepha/api/notifications";
+import type { AdminConfigController } from "alepha/api/parameters";
+import type {
+  AdminSessionController,
+  AdminUserController,
+} from "alepha/api/users";
 import { $client } from "alepha/server/links";
 
 export class AdminRouter {
   protected readonly router = $inject(ReactRouter);
   protected readonly authRouter = $inject(AuthRouter);
   protected readonly auth = $inject(ReactAuth);
-  protected readonly userCtrl = $client<UserController>();
-  protected readonly sessionCtrl = $client<SessionController>();
-  protected readonly notificationCtrl = $client<NotificationController>();
+  protected readonly userCtrl = $client<AdminUserController>();
+  protected readonly sessionCtrl = $client<AdminSessionController>();
+  protected readonly notificationCtrl = $client<AdminNotificationController>();
   protected readonly fileCtrl = $client<FileController>();
-  protected readonly configCtrl = $client<ConfigController>();
-  protected readonly auditCtrl = $client<AuditController>();
+  protected readonly configCtrl = $client<AdminConfigController>();
+  protected readonly auditCtrl = $client<AdminAuditController>();
 
   protected adminShellProps(): AdminShellProps {
     return {};
@@ -49,10 +52,10 @@ export class AdminRouter {
   // Layout
   // ─────────────────────────────────────────────────────────────────────────────
 
-  public readonly layout = $page({
-    name: "AdminLayout",
+  public readonly adminLayout = $page({
     path: "/admin",
     label: "Admin",
+    can: () => this.userCtrl.findUsers.can(),
     lazy: () => import("./components/AdminLayout.tsx"),
     props: () => ({
       adminShellProps: this.adminShellProps(),
@@ -71,7 +74,7 @@ export class AdminRouter {
 
   public readonly adminUsers = $page({
     icon: IconUsers,
-    parent: this.layout,
+    parent: this.adminLayout,
     path: "/users",
     label: "Users",
     description: "Manage application users and their roles.",
@@ -81,7 +84,7 @@ export class AdminRouter {
 
   public readonly adminUserCreate = $page({
     icon: IconPlus,
-    parent: this.layout,
+    parent: this.adminLayout,
     path: "/users/create",
     label: "Create User",
     description: "Create a new user account.",
@@ -91,7 +94,7 @@ export class AdminRouter {
 
   public readonly adminUserLayout = $page({
     icon: IconUser,
-    parent: this.layout,
+    parent: this.adminLayout,
     path: "/users/:userId",
     label: "User",
     lazy: () => import("./components/users/AdminUserLayout.tsx"),
@@ -133,7 +136,7 @@ export class AdminRouter {
 
   public readonly adminAudits = $page({
     icon: IconHistory,
-    parent: this.layout,
+    parent: this.adminLayout,
     path: "/audits",
     label: "Audit Log",
     description: "View system-wide audit trail and activity logs.",
@@ -147,7 +150,7 @@ export class AdminRouter {
 
   public readonly adminSessions = $page({
     icon: IconDevices,
-    parent: this.layout,
+    parent: this.adminLayout,
     path: "/sessions",
     label: "Sessions",
     description: "View and manage all active sessions.",
@@ -161,7 +164,7 @@ export class AdminRouter {
 
   public readonly adminNotifications = $page({
     icon: IconBell,
-    parent: this.layout,
+    parent: this.adminLayout,
     path: "/notifications",
     label: "Notifications",
     description: "View notification history and status.",
@@ -175,7 +178,7 @@ export class AdminRouter {
 
   public readonly adminFiles = $page({
     icon: IconFile,
-    parent: this.layout,
+    parent: this.adminLayout,
     path: "/files",
     label: "Files",
     description: "Manage uploaded files and storage.",
@@ -189,7 +192,7 @@ export class AdminRouter {
 
   public readonly adminParameters = $page({
     icon: IconSettings,
-    parent: this.layout,
+    parent: this.adminLayout,
     path: "/parameters",
     label: "Parameters",
     description: "View and manage application configuration parameters.",

package/src/admin/MainRouter.ts

@@ -18,6 +18,6 @@ export class MainRouter {
 
   layout = $page({
     component: AlephaMantineProvider,
-    children: () => [this.auth.layout, this.admin.layout],
+    children: () => [this.auth.layout, this.admin.adminLayout],
   });
 }

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

@@ -11,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 {
@@ -62,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

@@ -11,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";
@@ -23,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

@@ -10,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;
@@ -40,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

@@ -4,7 +4,7 @@ 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 {
@@ -12,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({