@alepha/ui 0.13.6 → 0.13.7

package/package.json

@@ -7,7 +7,7 @@
     "mantine"
   ],
   "author": "Nicolas Foures",
-  "version": "0.13.6",
+  "version": "0.13.7",
   "type": "module",
   "engines": {
     "node": ">=22.0.0"
@@ -22,21 +22,25 @@
     "styles.css"
   ],
   "dependencies": {
-    "@alepha/react": "0.13.6",
-    "@mantine/core": "^8.3.9",
-    "@mantine/dates": "^8.3.9",
-    "@mantine/hooks": "^8.3.9",
-    "@mantine/modals": "^8.3.9",
-    "@mantine/notifications": "^8.3.9",
-    "@mantine/nprogress": "^8.3.9",
-    "@mantine/spotlight": "^8.3.9",
+    "@alepha/react": "0.13.7",
+    "@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",
     "@tabler/icons-react": "^3.35.0",
-    "alepha": "0.13.6",
+    "alepha": "0.13.7",
     "dayjs": "^1.11.19"
   },
   "devDependencies": {
+    "@biomejs/biome": "^2.3.8",
     "react": "^19.2.1",
-    "react-dom": "^19.2.1"
+    "react-dom": "^19.2.1",
+    "typescript": "^5.9.3",
+    "vite": "^7.2.7",
+    "vitest": "^4.0.15"
   },
   "peerDependencies": {
     "react": "*",

package/src/admin/AdminRouter.ts

@@ -1,17 +1,22 @@
 import { $page, ReactRouter, Redirection } from "@alepha/react";
 import { ReactAuth } from "@alepha/react/auth";
+import type { AdminShellProps } from "@alepha/ui";
 import { AuthRouter } from "@alepha/ui/auth";
 import {
   IconBell,
   IconDevices,
   IconFile,
+  IconHistory,
   IconPlus,
+  IconSettings,
   IconUser,
   IconUsers,
 } from "@tabler/icons-react";
 import { $inject } from "alepha";
+import type { AuditController } 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 { $client } from "alepha/server/links";
 
@@ -23,6 +28,22 @@ export class AdminRouter {
   protected readonly sessionCtrl = $client<SessionController>();
   protected readonly notificationCtrl = $client<NotificationController>();
   protected readonly fileCtrl = $client<FileController>();
+  protected readonly configCtrl = $client<ConfigController>();
+  protected readonly auditCtrl = $client<AuditController>();
+
+  protected adminShellProps(): AdminShellProps {
+    return {};
+  }
+
+  protected onNotAuthorized(url: URL) {
+    return new Redirection(
+      this.router.path(this.authRouter.login.name, {
+        query: {
+          r: url.pathname,
+        },
+      }),
+    );
+  }
 
   // ─────────────────────────────────────────────────────────────────────────────
   // Layout
@@ -33,15 +54,12 @@ export class AdminRouter {
     path: "/admin",
     label: "Admin",
     lazy: () => import("./components/AdminLayout.tsx"),
+    props: () => ({
+      adminShellProps: this.adminShellProps(),
+    }),
     resolve: ({ user, url }) => {
       if (!user) {
-        throw new Redirection(
-          this.router.path(this.authRouter.login.name, {
-            query: {
-              r: url.pathname,
-            },
-          }),
-        );
+        throw this.onNotAuthorized(url);
       }
       return {};
     },
@@ -57,7 +75,7 @@ export class AdminRouter {
     path: "/users",
     label: "Users",
     description: "Manage application users and their roles.",
-    lazy: () => import("./components/AdminUsers.tsx"),
+    lazy: () => import("./components/users/AdminUsers.tsx"),
     can: () => this.userCtrl.findUsers.can(),
   });
 
@@ -67,7 +85,7 @@ export class AdminRouter {
     path: "/users/create",
     label: "Create User",
     description: "Create a new user account.",
-    lazy: () => import("./components/AdminUserCreate.tsx"),
+    lazy: () => import("./components/users/AdminUserCreate.tsx"),
     can: () => this.userCtrl.createUser.can(),
   });
 
@@ -76,7 +94,7 @@ export class AdminRouter {
     parent: this.layout,
     path: "/users/:userId",
     label: "User",
-    lazy: () => import("./components/AdminUserLayout.tsx"),
+    lazy: () => import("./components/users/AdminUserLayout.tsx"),
     can: () => this.userCtrl.getUser.can(),
   });
 
@@ -84,21 +102,43 @@ export class AdminRouter {
     parent: this.adminUserLayout,
     path: "/details",
     label: "Details",
-    lazy: () => import("./components/AdminUserDetails.tsx"),
+    lazy: () => import("./components/users/AdminUserDetails.tsx"),
   });
 
   public readonly adminUserSessions = $page({
     parent: this.adminUserLayout,
     path: "/sessions",
     label: "Sessions",
-    lazy: () => import("./components/AdminUserSessions.tsx"),
+    lazy: () => import("./components/users/AdminUserSessions.tsx"),
   });
 
   public readonly adminUserSettings = $page({
     parent: this.adminUserLayout,
     path: "/settings",
     label: "Settings",
-    lazy: () => import("./components/AdminUserSettings.tsx"),
+    lazy: () => import("./components/users/AdminUserSettings.tsx"),
+  });
+
+  public readonly adminUserAudits = $page({
+    parent: this.adminUserLayout,
+    path: "/audits",
+    label: "Audit Log",
+    lazy: () => import("./components/users/AdminUserAudits.tsx"),
+    can: () => this.auditCtrl.findByUser.can(),
+  });
+
+  // ─────────────────────────────────────────────────────────────────────────────
+  // Audits (Global)
+  // ─────────────────────────────────────────────────────────────────────────────
+
+  public readonly adminAudits = $page({
+    icon: IconHistory,
+    parent: this.layout,
+    path: "/audits",
+    label: "Audit Log",
+    description: "View system-wide audit trail and activity logs.",
+    lazy: () => import("./components/audits/AdminAudits.tsx"),
+    can: () => this.auditCtrl.findAudits.can(),
   });
 
   // ─────────────────────────────────────────────────────────────────────────────
@@ -111,7 +151,7 @@ export class AdminRouter {
     path: "/sessions",
     label: "Sessions",
     description: "View and manage all active sessions.",
-    lazy: () => import("./components/AdminSessions.tsx"),
+    lazy: () => import("./components/sessions/AdminSessions.tsx"),
     can: () => this.sessionCtrl.findSessions.can(),
   });
 
@@ -125,7 +165,7 @@ export class AdminRouter {
     path: "/notifications",
     label: "Notifications",
     description: "View notification history and status.",
-    lazy: () => import("./components/AdminNotifications.tsx"),
+    lazy: () => import("./components/notifications/AdminNotifications.tsx"),
     can: () => this.notificationCtrl.findNotifications.can(),
   });
 
@@ -139,7 +179,21 @@ export class AdminRouter {
     path: "/files",
     label: "Files",
     description: "Manage uploaded files and storage.",
-    lazy: () => import("./components/AdminFiles.tsx"),
+    lazy: () => import("./components/files/AdminFiles.tsx"),
     can: () => this.fileCtrl.findFiles.can(),
   });
+
+  // ─────────────────────────────────────────────────────────────────────────────
+  // Parameters
+  // ─────────────────────────────────────────────────────────────────────────────
+
+  public readonly adminParameters = $page({
+    icon: IconSettings,
+    parent: this.layout,
+    path: "/parameters",
+    label: "Parameters",
+    description: "View and manage application configuration parameters.",
+    lazy: () => import("./components/parameters/AdminParameters.tsx"),
+    can: () => this.configCtrl.getConfigTree.can(),
+  });
 }

package/src/admin/components/AdminLayout.tsx

@@ -1,75 +1,55 @@
-import { NestedView, useInject, useRouter } from "@alepha/react";
 import {
   ActionButton,
   AdminShell,
+  type AdminShellProps,
+  AlephaMantineProvider,
   OmnibarButton,
-  ThemeButton,
 } from "@alepha/ui";
 import { UserButton } from "@alepha/ui/auth";
-import { Flex } from "@mantine/core";
 import { IconArrowLeft } from "@tabler/icons-react";
-import type { AdminRouter } from "../AdminRouter.ts";
-import { AdminSidebar } from "../AdminSidebar.ts";
 
-const AdminLayout = () => {
-  const router = useRouter<AdminRouter>();
-  const sidebar = useInject(AdminSidebar);
+export interface AdminLayoutProps {
+  adminShellProps?: AdminShellProps;
+}
 
+const AdminLayout = (props: AdminLayoutProps) => {
   return (
-    <AdminShell
-      appShellMainProps={{
-        bg: "var(--alepha-surface)",
-      }}
-      appShellHeaderProps={{
-        bg: "var(--alepha-background)",
-      }}
-      appShellNavbarProps={
-        {
-          //  bg: "var(--alepha-background)",
-        }
-      }
-      appShellProps={
-        {
-          // withBorder: false,
-        }
-      }
-      appShellFooterProps={{
-        bg: "var(--alepha-background)",
-      }}
-      footer={<Flex h={12} />}
-      appBarProps={{
-        items: [
-          {
-            element: <ActionButton icon={IconArrowLeft} href={"/"} />,
-            position: "left",
+    <AlephaMantineProvider>
+      <AdminShell
+        appBarProps={{
+          items: [
+            {
+              element: (
+                <ActionButton
+                  variant={"subtle"}
+                  icon={IconArrowLeft}
+                  href={"/"}
+                />
+              ),
+              position: "left",
+            },
+            {
+              element: <OmnibarButton />,
+              position: "center",
+            },
+            {
+              element: <UserButton />,
+              position: "right",
+            },
+            {
+              type: "dark",
+              position: "right",
+            },
+          ],
+        }}
+        sidebarProps={{
+          autoPopulateMenu: {
+            startsWith: "/admin",
           },
-          {
-            element: <OmnibarButton actionProps={{ variant: "outline" }} />,
-            position: "right",
-          },
-          {
-            element: <UserButton />,
-            position: "right",
-          },
-          {
-            element: <ThemeButton />,
-            position: "right",
-          },
-          {
-            type: "dark",
-            position: "right",
-          },
-        ],
-      }}
-      sidebarProps={{
-        gap: "xs",
-        menu: sidebar.menu(router),
-      }}
-    >
-      <Flex flex={1} bg={"var(--alepha-surface)"}>
-        <NestedView />
-      </Flex>
-    </AdminShell>
+        }}
+        {...props.adminShellProps}
+      />
+    </AlephaMantineProvider>
   );
 };
 

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

@@ -0,0 +1,240 @@
+import { useClient, useRouter } from "@alepha/react";
+import { useI18n } from "@alepha/react/i18n";
+import { DataTable, Flex, Text } from "@alepha/ui";
+import { Badge, Group, Stack, Tooltip } from "@mantine/core";
+import {
+  IconAlertTriangle,
+  IconCheck,
+  IconInfoCircle,
+  IconUser,
+  IconX,
+} from "@tabler/icons-react";
+import { type Page, t } from "alepha";
+import type { AuditController, AuditEntity } from "alepha/api/audits";
+import type { AdminRouter } from "../../AdminRouter.ts";
+
+export interface AdminAuditsProps {
+  userRealmName?: string;
+}
+
+const getSeverityColor = (severity: string) => {
+  switch (severity) {
+    case "critical":
+      return "red";
+    case "warning":
+      return "yellow";
+    default:
+      return "blue";
+  }
+};
+
+const getSeverityIcon = (severity: string) => {
+  switch (severity) {
+    case "critical":
+      return <IconAlertTriangle size={12} />;
+    case "warning":
+      return <IconAlertTriangle size={12} />;
+    default:
+      return <IconInfoCircle size={12} />;
+  }
+};
+
+const getTypeColor = (type: string) => {
+  switch (type) {
+    case "auth":
+      return "blue";
+    case "user":
+      return "grape";
+    case "security":
+      return "red";
+    case "system":
+      return "orange";
+    case "access":
+      return "cyan";
+    case "payment":
+      return "green";
+    case "order":
+      return "teal";
+    default:
+      return "gray";
+  }
+};
+
+const AdminAudits = (props: AdminAuditsProps) => {
+  const client = useClient<AuditController>();
+  const router = useRouter<AdminRouter>();
+  const { l } = useI18n();
+
+  const filters = t.object({
+    type: t.optional(t.text()),
+    action: t.optional(t.text()),
+    severity: t.optional(t.enum(["info", "warning", "critical"])),
+    success: t.optional(t.boolean()),
+    resourceType: t.optional(t.text()),
+    search: t.optional(t.text()),
+    from: t.optional(t.datetime()),
+    to: t.optional(t.datetime()),
+  });
+
+  return (
+    <Flex flex={1} direction="column">
+      <DataTable<AuditEntity, typeof filters>
+        submitOnInit
+        defaultSize={20}
+        typeFormProps={{
+          skipSubmitButton: true,
+          columns: 4,
+        }}
+        tableProps={{
+          horizontalSpacing: "xs",
+          verticalSpacing: "xs",
+          striped: false,
+          highlightOnHover: true,
+        }}
+        filters={filters}
+        tableTrProps={(item) => ({
+          style: {
+            cursor: item.userId ? "pointer" : "default",
+            opacity: item.success ? 1 : 0.85,
+          },
+          onClick: () => {
+            if (item.userId) {
+              router.go("adminUserDetails", {
+                params: { userId: item.userId },
+              });
+            }
+          },
+        })}
+        items={async (query) => {
+          const response = await client.findAudits({
+            query: {
+              ...query,
+              userRealm: props.userRealmName,
+            },
+          });
+          return response as Page<AuditEntity>;
+        }}
+        columns={{
+          type: {
+            label: "Type",
+            fit: true,
+            value: (item) => (
+              <Badge size="sm" variant="light" color={getTypeColor(item.type)}>
+                {item.type}
+              </Badge>
+            ),
+          },
+          action: {
+            label: "Action",
+            fit: true,
+            value: (item) => (
+              <Badge size="sm" variant="outline">
+                {item.action}
+              </Badge>
+            ),
+          },
+          severity: {
+            label: "Severity",
+            fit: true,
+            value: (item) => (
+              <Badge
+                size="xs"
+                variant="light"
+                color={getSeverityColor(item.severity)}
+                leftSection={getSeverityIcon(item.severity)}
+              >
+                {item.severity}
+              </Badge>
+            ),
+          },
+          user: {
+            label: "User",
+            fit: true,
+            value: (item) =>
+              item.userId ? (
+                <Tooltip
+                  label={
+                    <Stack gap={2}>
+                      <Text size="xs">{item.userEmail || "No email"}</Text>
+                      <Text size="xs" c="dimmed">
+                        {item.userRealm || "default"}
+                      </Text>
+                    </Stack>
+                  }
+                >
+                  <Group gap={4}>
+                    <IconUser size={12} />
+                    <Text size="xs" lineClamp={1} maw={100}>
+                      {item.userEmail?.split("@")[0] || item.userId.slice(0, 8)}
+                    </Text>
+                  </Group>
+                </Tooltip>
+              ) : (
+                <Text size="xs" c="dimmed">
+                  System
+                </Text>
+              ),
+          },
+          description: {
+            label: "Description",
+            value: (item) => (
+              <Text size="sm" lineClamp={1}>
+                {item.description || "-"}
+              </Text>
+            ),
+          },
+          resource: {
+            label: "Resource",
+            fit: true,
+            value: (item) =>
+              item.resourceType ? (
+                <Tooltip label={`${item.resourceType}: ${item.resourceId}`}>
+                  <Badge size="xs" variant="dot" color="gray">
+                    {item.resourceType}
+                  </Badge>
+                </Tooltip>
+              ) : (
+                <Text size="xs" c="dimmed">
+                  -
+                </Text>
+              ),
+          },
+          success: {
+            label: "Status",
+            fit: true,
+            value: (item) =>
+              item.success ? (
+                <IconCheck size={14} color="var(--mantine-color-green-6)" />
+              ) : (
+                <Tooltip label={item.errorMessage || "Failed"}>
+                  <IconX size={14} color="var(--mantine-color-red-6)" />
+                </Tooltip>
+              ),
+          },
+          ipAddress: {
+            label: "IP",
+            fit: true,
+            value: (item) => (
+              <Text size="xs" c="dimmed" ff="monospace">
+                {item.ipAddress || "-"}
+              </Text>
+            ),
+          },
+          createdAt: {
+            label: "Time",
+            fit: true,
+            value: (item) => (
+              <Tooltip label={l(item.createdAt, { date: "medium" })}>
+                <Text size="xs" c="dimmed">
+                  {l(item.createdAt, { date: "fromNow" })}
+                </Text>
+              </Tooltip>
+            ),
+          },
+        }}
+      />
+    </Flex>
+  );
+};
+
+export default AdminAudits;

package/src/admin/components/{AdminFiles.tsx → files/AdminFiles.tsx}

@@ -29,7 +29,7 @@ const AdminFiles = () => {
   };
 
   return (
-    <Flex flex={1}>
+    <Flex flex={1} direction={"column"}>
       <DataTable<FileEntity, typeof filters>
         submitOnInit
         defaultSize={10}

package/src/admin/components/{AdminJobs.tsx → jobs/AdminJobs.tsx}

@@ -70,7 +70,7 @@ const AdminJobs = () => {
   };
 
   return (
-    <Flex flex={1}>
+    <Flex flex={1} direction={"column"}>
       <DataTable<JobExecutionEntity, typeof filters>
         submitOnInit
         defaultSize={10}