@alepha/ui 0.13.2 → 0.13.4

package/package.json

@@ -7,7 +7,7 @@
     "mantine"
   ],
   "author": "Nicolas Foures",
-  "version": "0.13.2",
+  "version": "0.13.4",
   "type": "module",
   "engines": {
     "node": ">=22.0.0"
@@ -18,10 +18,11 @@
   "style": "./styles.css",
   "files": [
     "dist",
-    "src"
+    "src",
+    "styles.css"
   ],
   "dependencies": {
-    "@alepha/react": "0.13.2",
+    "@alepha/react": "0.13.4",
     "@mantine/core": "^8.3.9",
     "@mantine/dates": "^8.3.9",
     "@mantine/hooks": "^8.3.9",
@@ -30,12 +31,12 @@
     "@mantine/nprogress": "^8.3.9",
     "@mantine/spotlight": "^8.3.9",
     "@tabler/icons-react": "^3.35.0",
-    "alepha": "0.13.2",
+    "alepha": "0.13.4",
     "dayjs": "^1.11.19"
   },
   "devDependencies": {
-    "react": "^19.2.0",
-    "react-dom": "^19.2.0"
+    "react": "^19.2.1",
+    "react-dom": "^19.2.1"
   },
   "peerDependencies": {
     "react": "*",

package/src/admin/AdminRouter.ts

@@ -1,58 +1,145 @@
-import { $page } from "@alepha/react";
+import { $page, ReactRouter, Redirection } from "@alepha/react";
+import { ReactAuth } from "@alepha/react/auth";
+import { AuthRouter } from "@alepha/ui/auth";
+import {
+  IconBell,
+  IconDevices,
+  IconFile,
+  IconPlus,
+  IconUser,
+  IconUsers,
+} from "@tabler/icons-react";
+import { $inject } from "alepha";
+import type { FileController } from "alepha/api/files";
+import type { NotificationController } from "alepha/api/notifications";
+import type { SessionController, UserController } from "alepha/api/users";
+import { $client } from "alepha/server/links";
 
 export class AdminRouter {
-  admin = $page({
+  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 fileCtrl = $client<FileController>();
+
+  // ─────────────────────────────────────────────────────────────────────────────
+  // Layout
+  // ─────────────────────────────────────────────────────────────────────────────
+
+  public readonly layout = $page({
+    name: "AdminLayout",
     path: "/admin",
     label: "Admin",
     lazy: () => import("./components/AdminLayout.tsx"),
+    resolve: ({ user, url }) => {
+      if (!user) {
+        throw new Redirection(
+          this.router.path(this.authRouter.login.name, {
+            query: {
+              r: url.pathname,
+            },
+          }),
+        );
+      }
+      return {};
+    },
   });
 
-  adminUsers = $page({
-    parent: this.admin,
+  // ─────────────────────────────────────────────────────────────────────────────
+  // Users
+  // ─────────────────────────────────────────────────────────────────────────────
+
+  public readonly adminUsers = $page({
+    icon: IconUsers,
+    parent: this.layout,
     path: "/users",
     label: "Users",
+    description: "Manage application users and their roles.",
     lazy: () => import("./components/AdminUsers.tsx"),
+    can: () => this.userCtrl.findUsers.can(),
   });
 
-  adminNotifications = $page({
-    parent: this.admin,
-    path: "/notifications",
-    label: "Notifications",
-    lazy: () => import("./components/AdminNotifications.tsx"),
+  public readonly adminUserCreate = $page({
+    icon: IconPlus,
+    parent: this.layout,
+    path: "/users/create",
+    label: "Create User",
+    description: "Create a new user account.",
+    lazy: () => import("./components/AdminUserCreate.tsx"),
+    can: () => this.userCtrl.createUser.can(),
+  });
+
+  public readonly adminUserLayout = $page({
+    icon: IconUser,
+    parent: this.layout,
+    path: "/users/:userId",
+    label: "User",
+    lazy: () => import("./components/AdminUserLayout.tsx"),
+    can: () => this.userCtrl.getUser.can(),
+  });
+
+  public readonly adminUserDetails = $page({
+    parent: this.adminUserLayout,
+    path: "/details",
+    label: "Details",
+    lazy: () => import("./components/AdminUserDetails.tsx"),
   });
 
-  adminSessions = $page({
-    parent: this.admin,
+  public readonly adminUserSessions = $page({
+    parent: this.adminUserLayout,
     path: "/sessions",
     label: "Sessions",
-    lazy: () => import("./components/AdminSessions.tsx"),
+    lazy: () => import("./components/AdminUserSessions.tsx"),
   });
 
-  adminVerifications = $page({
-    parent: this.admin,
-    path: "/verifications",
-    label: "Verifications",
-    lazy: () => import("./components/AdminVerifications.tsx"),
+  public readonly adminUserSettings = $page({
+    parent: this.adminUserLayout,
+    path: "/settings",
+    label: "Settings",
+    lazy: () => import("./components/AdminUserSettings.tsx"),
   });
 
-  adminJobs = $page({
-    parent: this.admin,
-    path: "/jobs",
-    label: "Jobs",
-    lazy: () => import("./components/AdminJobs.tsx"),
+  // ─────────────────────────────────────────────────────────────────────────────
+  // Sessions
+  // ─────────────────────────────────────────────────────────────────────────────
+
+  public readonly adminSessions = $page({
+    icon: IconDevices,
+    parent: this.layout,
+    path: "/sessions",
+    label: "Sessions",
+    description: "View and manage all active sessions.",
+    lazy: () => import("./components/AdminSessions.tsx"),
+    can: () => this.sessionCtrl.findSessions.can(),
   });
 
-  adminParameters = $page({
-    parent: this.admin,
-    path: "/parameters",
-    label: "Parameters",
-    lazy: () => import("./components/AdminParameters.tsx"),
+  // ─────────────────────────────────────────────────────────────────────────────
+  // Notifications
+  // ─────────────────────────────────────────────────────────────────────────────
+
+  public readonly adminNotifications = $page({
+    icon: IconBell,
+    parent: this.layout,
+    path: "/notifications",
+    label: "Notifications",
+    description: "View notification history and status.",
+    lazy: () => import("./components/AdminNotifications.tsx"),
+    can: () => this.notificationCtrl.findNotifications.can(),
   });
 
-  adminFiles = $page({
-    parent: this.admin,
+  // ─────────────────────────────────────────────────────────────────────────────
+  // Files
+  // ─────────────────────────────────────────────────────────────────────────────
+
+  public readonly adminFiles = $page({
+    icon: IconFile,
+    parent: this.layout,
     path: "/files",
     label: "Files",
+    description: "Manage uploaded files and storage.",
     lazy: () => import("./components/AdminFiles.tsx"),
+    can: () => this.fileCtrl.findFiles.can(),
   });
 }

package/src/admin/AdminSidebar.ts

@@ -0,0 +1,31 @@
+import type { ReactRouter } from "@alepha/react";
+import type { SidebarNode } from "@alepha/ui";
+import { createElement } from "react";
+import ToggleSidebarButton from "../core/components/buttons/ToggleSidebarButton.tsx";
+
+export class AdminSidebar {
+  public menu = (router: ReactRouter<any>): SidebarNode[] => [
+    {
+      element: createElement(ToggleSidebarButton),
+    },
+    {
+      type: "spacer",
+    },
+    {
+      ...router.node("adminUsers"),
+      description: undefined,
+    },
+    {
+      ...router.node("adminSessions"),
+      description: undefined,
+    },
+    {
+      ...router.node("adminNotifications"),
+      description: undefined,
+    },
+    {
+      ...router.node("adminFiles"),
+      description: undefined,
+    },
+  ];
+}

package/src/admin/MainRouter.ts

@@ -0,0 +1,23 @@
+import { $page } from "@alepha/react";
+import { AlephaMantineProvider } from "@alepha/ui";
+import { AuthRouter } from "@alepha/ui/auth";
+import { $inject } from "alepha";
+import { AdminRouter } from "./AdminRouter.ts";
+
+/**
+ * Main application router that combines Auth and Admin routers.
+ *
+ * We assume that the main application router will always have Admin and Auth routers.
+ *
+ * This is basically a convenience class to avoid having to inject these routers everywhere.
+ * Code is lightweight enough that we can just copy it if needed.
+ */
+export class MainRouter {
+  auth = $inject(AuthRouter);
+  admin = $inject(AdminRouter);
+
+  layout = $page({
+    component: AlephaMantineProvider,
+    children: () => [this.auth.layout, this.admin.layout],
+  });
+}

package/src/admin/components/AdminLayout.tsx

@@ -1,113 +1,75 @@
-import { NestedView, useRouter } from "@alepha/react";
-import { AdminShell, AlephaMantineProvider } from "@alepha/ui";
-import { Flex } from "@mantine/core";
+import { NestedView, useInject, useRouter } from "@alepha/react";
 import {
-  IconChecklist,
-  IconFileDatabase,
-  IconJumpRope,
-  IconMail,
-  IconSettings,
-  IconShield,
-  IconTruckDelivery,
-  IconUser,
-} from "@tabler/icons-react";
+  ActionButton,
+  AdminShell,
+  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);
+
   return (
-    <AlephaMantineProvider>
-      <AdminShell
-        appShellMainProps={{
-          bg: "var(--alepha-background)",
-        }}
-        appShellHeaderProps={{
-          bg: "var(--alepha-background)",
-        }}
-        appShellNavbarProps={{
-          bg: "var(--alepha-background)",
-        }}
-        appShellProps={{
-          withBorder: false,
-        }}
-        appBarProps={{
-          items: [
-            {
-              type: "search",
-              position: "center",
-            },
-            {
-              type: "dark",
-              position: "right",
-            },
-          ],
-        }}
-        sidebarProps={{
-          menu: [
-            {
-              type: "section",
-              label: "Management",
-            },
-            {
-              icon: IconUser,
-              label: "Users",
-              href: router.path("adminUsers"),
-            },
-            {
-              icon: IconMail,
-              label: "Notifications",
-              href: router.path("adminNotifications"),
-            },
-            {
-              icon: IconShield,
-              label: "Sessions",
-              href: router.path("adminSessions"),
-            },
-            {
-              icon: IconChecklist,
-              label: "Verifications",
-              href: router.path("adminVerifications"),
-            },
-            {
-              type: "section",
-              label: "System",
-            },
-            {
-              label: "Jobs",
-              href: router.path("adminJobs"),
-              icon: IconTruckDelivery,
-            },
-            {
-              label: "Workflows",
-              href: router.path("adminWorkflows"),
-              icon: IconJumpRope,
-            },
-            {
-              label: "Parameters",
-              href: router.path("adminParameters"),
-              icon: IconSettings,
-            },
-            {
-              label: "Files",
-              href: router.path("adminFiles"),
-              icon: IconFileDatabase,
-            },
-          ],
-        }}
-      >
-        <Flex
-          flex={1}
-          p={"lg"}
-          mt={-16}
-          ml={-16}
-          bg={"var(--alepha-surface)"}
-          bdrs={"lg"}
-          bd={"1px solid var(--alepha-border)"}
-        >
-          <NestedView />
-        </Flex>
-      </AdminShell>
-    </AlephaMantineProvider>
+    <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",
+          },
+          {
+            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>
   );
 };
 

package/src/admin/components/AdminNotifications.tsx

@@ -1,18 +1,202 @@
-import { Flex, Text } from "@alepha/ui";
-import { Stack } from "@mantine/core";
-import { IconBell } from "@tabler/icons-react";
+import { useClient } from "@alepha/react";
+import { useI18n } from "@alepha/react/i18n";
+import { DataTable, Flex, Text } from "@alepha/ui";
+import { Badge, Tooltip } from "@mantine/core";
+import {
+  IconAlertCircle,
+  IconCheck,
+  IconClock,
+  IconMail,
+  IconMessage,
+} from "@tabler/icons-react";
+import { type Page, t } from "alepha";
+import type {
+  NotificationController,
+  NotificationEntity,
+} from "alepha/api/notifications";
 
 const AdminNotifications = () => {
+  const client = useClient<NotificationController>();
+  const { l } = useI18n();
+
+  const filters = t.object({
+    type: t.optional(
+      t.enum(["email", "sms"], {
+        title: "Type",
+      }),
+    ),
+    status: t.optional(
+      t.enum(["pending", "sent", "failed"], {
+        title: "Status",
+      }),
+    ),
+    template: t.optional(
+      t.string({
+        title: "Template",
+      }),
+    ),
+    contact: t.optional(
+      t.string({
+        title: "Contact",
+      }),
+    ),
+  });
+
+  const getStatus = (item: NotificationEntity) => {
+    if (item.error) return "failed";
+    if (item.sentAt) return "sent";
+    return "pending";
+  };
+
+  const getStatusBadge = (item: NotificationEntity) => {
+    const status = getStatus(item);
+    switch (status) {
+      case "sent":
+        return (
+          <Badge
+            size="sm"
+            variant="light"
+            color="green"
+            leftSection={<IconCheck size={12} />}
+          >
+            Sent
+          </Badge>
+        );
+      case "failed":
+        return (
+          <Tooltip label={item.error?.message} multiline maw={300}>
+            <Badge
+              size="sm"
+              variant="light"
+              color="red"
+              leftSection={<IconAlertCircle size={12} />}
+            >
+              Failed
+            </Badge>
+          </Tooltip>
+        );
+      default:
+        return (
+          <Badge
+            size="sm"
+            variant="light"
+            color="yellow"
+            leftSection={<IconClock size={12} />}
+          >
+            Pending
+          </Badge>
+        );
+    }
+  };
+
   return (
-    <Flex flex={1} justify="center" align="center">
-      <Stack align="center" gap="xs">
-        <IconBell size={48} stroke={1.5} color="var(--mantine-color-dimmed)" />
-        <Text c="dimmed">Notification Center</Text>
-        <Text size="xs" c="dimmed" ta="center" maw={400}>
-          Notifications are processed through the queue system. Email and SMS
-          notifications are sent asynchronously using the configured providers.
-        </Text>
-      </Stack>
+    <Flex flex={1} direction="column">
+      <DataTable<NotificationEntity, typeof filters>
+        submitOnInit
+        defaultSize={10}
+        typeFormProps={{
+          skipSubmitButton: true,
+          columns: 4,
+        }}
+        tableProps={{
+          horizontalSpacing: "xs",
+          verticalSpacing: "xs",
+        }}
+        onFilterChange={(_key, _value, form) => {
+          return form.submit();
+        }}
+        filters={filters}
+        tableTrProps={(item) => {
+          const status = getStatus(item);
+          if (status === "failed") {
+            return {
+              bg: "var(--mantine-color-red-light)",
+            };
+          }
+          return {};
+        }}
+        items={async (filters) => {
+          const response = await client.findNotifications({
+            query: filters,
+          });
+
+          return response as Page<NotificationEntity>;
+        }}
+        columns={{
+          type: {
+            label: "Type",
+            fit: true,
+            value: (item) => (
+              <Badge
+                size="sm"
+                variant="outline"
+                leftSection={
+                  item.type === "email" ? (
+                    <IconMail size={12} />
+                  ) : (
+                    <IconMessage size={12} />
+                  )
+                }
+              >
+                {item.type.toUpperCase()}
+              </Badge>
+            ),
+          },
+          template: {
+            label: "Template",
+            value: (item) => (
+              <Text size="sm" fw={500}>
+                {item.template}
+              </Text>
+            ),
+          },
+          contact: {
+            label: "Contact",
+            value: (item) => (
+              <Text size="sm" ff="monospace">
+                {item.contact}
+              </Text>
+            ),
+          },
+          category: {
+            label: "Category",
+            fit: true,
+            value: (item) =>
+              item.category ? (
+                <Badge size="xs" variant="light">
+                  {item.category}
+                </Badge>
+              ) : (
+                <Text size="xs" c="dimmed">
+                  -
+                </Text>
+              ),
+          },
+          status: {
+            label: "Status",
+            fit: true,
+            value: (item) => getStatusBadge(item),
+          },
+          sentAt: {
+            label: "Sent",
+            fit: true,
+            value: (item) => (
+              <Text size="xs" c="dimmed">
+                {item.sentAt ? l(item.sentAt, { date: "fromNow" }) : "-"}
+              </Text>
+            ),
+          },
+          createdAt: {
+            label: "Created",
+            fit: true,
+            value: (item) => (
+              <Text size="xs" c="dimmed">
+                {l(item.createdAt, { date: "fromNow" })}
+              </Text>
+            ),
+          },
+        }}
+      />
     </Flex>
   );
 };