@alepha/ui 0.12.0 → 0.13.0

package/src/admin/components/AdminFiles.tsx

@@ -0,0 +1,117 @@
+import { useClient } from "@alepha/react";
+import { useI18n } from "@alepha/react/i18n";
+import { DataTable, Flex, Text } from "@alepha/ui";
+import { Badge } from "@mantine/core";
+import { type Page, t } from "alepha";
+import { type FileController, type FileEntity, files } from "alepha/api/files";
+
+const AdminFiles = () => {
+  const client = useClient<FileController>();
+  const { l } = useI18n();
+
+  const filters = t.object({
+    bucket: t.optional(t.string()),
+    name: t.optional(
+      t.string({
+        $control: {
+          query: t.pick(files.schema, ["name", "bucket", "mimeType"]),
+        },
+      }),
+    ),
+  });
+
+  const formatFileSize = (bytes: number) => {
+    if (bytes === 0) return "0 B";
+    const k = 1024;
+    const sizes = ["B", "KB", "MB", "GB"];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return `${Number.parseFloat((bytes / k ** i).toFixed(1))} ${sizes[i]}`;
+  };
+
+  return (
+    <Flex flex={1}>
+      <DataTable<FileEntity, typeof filters>
+        submitOnInit
+        defaultSize={10}
+        typeFormProps={{
+          skipSubmitButton: true,
+          columns: 3,
+        }}
+        tableProps={{
+          horizontalSpacing: "xs",
+          verticalSpacing: "xs",
+        }}
+        onFilterChange={(key, _value, form) => {
+          if (key === "name" || key === "bucket") {
+            return form.submit();
+          }
+        }}
+        filters={filters}
+        items={async (filters) => {
+          const response = await client.findFiles({
+            query: filters,
+          });
+
+          return response as Page<FileEntity>;
+        }}
+        columns={{
+          name: {
+            label: "Name",
+            value: (item) => (
+              <Text size="sm" fw={500} lineClamp={1}>
+                {item.name}
+              </Text>
+            ),
+          },
+          bucket: {
+            label: "Bucket",
+            fit: true,
+            value: (item) => (
+              <Badge size="sm" variant="light" color="blue">
+                {item.bucket}
+              </Badge>
+            ),
+          },
+          mimeType: {
+            label: "Type",
+            fit: true,
+            value: (item) => (
+              <Text size="xs" c="dimmed">
+                {item.mimeType}
+              </Text>
+            ),
+          },
+          size: {
+            label: "Size",
+            fit: true,
+            value: (item) => (
+              <Text size="xs" c="dimmed">
+                {formatFileSize(item.size)}
+              </Text>
+            ),
+          },
+          creatorName: {
+            label: "Creator",
+            fit: true,
+            value: (item) => (
+              <Text size="xs" c="dimmed">
+                {item.creatorName || "-"}
+              </Text>
+            ),
+          },
+          createdAt: {
+            label: "Created",
+            fit: true,
+            value: (item) => (
+              <Text size="xs" c="dimmed">
+                {l(item.createdAt, { date: "fromNow" })}
+              </Text>
+            ),
+          },
+        }}
+      />
+    </Flex>
+  );
+};
+
+export default AdminFiles;

package/src/admin/components/AdminJobs.tsx

@@ -0,0 +1,158 @@
+import { useClient } from "@alepha/react";
+import { useI18n } from "@alepha/react/i18n";
+import { DataTable, Flex, Text } from "@alepha/ui";
+import { Badge } from "@mantine/core";
+import {
+  IconCheck,
+  IconClock,
+  IconPlayerPlay,
+  IconX,
+} from "@tabler/icons-react";
+import { type Page, t } from "alepha";
+import {
+  type JobController,
+  type JobExecutionEntity,
+  jobExecutions,
+} from "alepha/api/jobs";
+
+const AdminJobs = () => {
+  const client = useClient<JobController>();
+  const { l } = useI18n();
+
+  const filters = t.object({
+    job: t.optional(
+      t.string({
+        $control: {
+          query: t.pick(jobExecutions.schema, ["job"]),
+        },
+      }),
+    ),
+    status: t.optional(t.enum(["STARTED", "FAILED", "COMPLETED"])),
+  });
+
+  const getStatusColor = (status: string) => {
+    switch (status) {
+      case "COMPLETED":
+        return "green";
+      case "FAILED":
+        return "red";
+      case "STARTED":
+        return "blue";
+      default:
+        return "gray";
+    }
+  };
+
+  const getStatusIcon = (status: string) => {
+    switch (status) {
+      case "COMPLETED":
+        return <IconCheck size={12} />;
+      case "FAILED":
+        return <IconX size={12} />;
+      case "STARTED":
+        return <IconPlayerPlay size={12} />;
+      default:
+        return <IconClock size={12} />;
+    }
+  };
+
+  const formatDuration = (
+    start: Date | string,
+    end?: Date | string | null,
+  ): string => {
+    const startTime = new Date(start).getTime();
+    const endTime = end ? new Date(end).getTime() : Date.now();
+    const duration = endTime - startTime;
+
+    if (duration < 1000) return `${duration}ms`;
+    if (duration < 60000) return `${(duration / 1000).toFixed(1)}s`;
+    return `${Math.floor(duration / 60000)}m ${Math.floor((duration % 60000) / 1000)}s`;
+  };
+
+  return (
+    <Flex flex={1}>
+      <DataTable<JobExecutionEntity, typeof filters>
+        submitOnInit
+        defaultSize={10}
+        typeFormProps={{
+          skipSubmitButton: true,
+          columns: 3,
+        }}
+        tableProps={{
+          horizontalSpacing: "xs",
+          verticalSpacing: "xs",
+        }}
+        onFilterChange={(key, _value, form) => {
+          if (key === "job" || key === "status") {
+            return form.submit();
+          }
+        }}
+        filters={filters}
+        items={async (filters) => {
+          const response = await client.getJobExecutions({
+            query: filters,
+          });
+
+          return response as Page<JobExecutionEntity>;
+        }}
+        columns={{
+          job: {
+            label: "Job",
+            value: (item) => (
+              <Text size="sm" fw={500}>
+                {item.job}
+              </Text>
+            ),
+          },
+          status: {
+            label: "Status",
+            fit: true,
+            value: (item) => (
+              <Badge
+                size="sm"
+                variant="light"
+                color={getStatusColor(item.status)}
+                leftSection={getStatusIcon(item.status)}
+              >
+                {item.status}
+              </Badge>
+            ),
+          },
+          duration: {
+            label: "Duration",
+            fit: true,
+            value: (item) => (
+              <Text size="xs" c="dimmed" ff="monospace">
+                {formatDuration(item.createdAt, item.finishedAt)}
+              </Text>
+            ),
+          },
+          error: {
+            label: "Error",
+            value: (item) =>
+              item.error ? (
+                <Text size="xs" c="red" lineClamp={1}>
+                  {item.error}
+                </Text>
+              ) : (
+                <Text size="xs" c="dimmed">
+                  -
+                </Text>
+              ),
+          },
+          createdAt: {
+            label: "Started",
+            fit: true,
+            value: (item) => (
+              <Text size="xs" c="dimmed">
+                {l(item.createdAt, { date: "fromNow" })}
+              </Text>
+            ),
+          },
+        }}
+      />
+    </Flex>
+  );
+};
+
+export default AdminJobs;

package/src/admin/components/AdminLayout.tsx

@@ -0,0 +1,114 @@
+import { NestedView, useRouter } from "@alepha/react";
+import { AdminShell, AlephaMantineProvider } from "@alepha/ui";
+import { Flex } from "@mantine/core";
+import {
+  IconChecklist,
+  IconFileDatabase,
+  IconJumpRope,
+  IconMail,
+  IconSettings,
+  IconShield,
+  IconTruckDelivery,
+  IconUser,
+} from "@tabler/icons-react";
+import type { AdminRouter } from "../AdminRouter.ts";
+
+const AdminLayout = () => {
+  const router = useRouter<AdminRouter>();
+  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>
+  );
+};
+
+export default AdminLayout;

package/src/admin/components/AdminNotifications.tsx

@@ -0,0 +1,20 @@
+import { Flex, Text } from "@alepha/ui";
+import { Stack } from "@mantine/core";
+import { IconBell } from "@tabler/icons-react";
+
+const AdminNotifications = () => {
+  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>
+  );
+};
+
+export default AdminNotifications;

package/src/admin/components/AdminParameters.tsx

@@ -0,0 +1,24 @@
+import { Flex, Text } from "@alepha/ui";
+import { Stack } from "@mantine/core";
+import { IconSettings } from "@tabler/icons-react";
+
+const AdminParameters = () => {
+  return (
+    <Flex flex={1} justify="center" align="center">
+      <Stack align="center" gap="xs">
+        <IconSettings
+          size={48}
+          stroke={1.5}
+          color="var(--mantine-color-dimmed)"
+        />
+        <Text c="dimmed">Parameter Management</Text>
+        <Text size="xs" c="dimmed" ta="center" maw={400}>
+          Application parameters and configuration settings. Define parameters
+          using the $config descriptor to manage dynamic application settings.
+        </Text>
+      </Stack>
+    </Flex>
+  );
+};
+
+export default AdminParameters;

package/src/admin/components/AdminSessions.tsx

@@ -0,0 +1,159 @@
+import { useClient } from "@alepha/react";
+import { useI18n } from "@alepha/react/i18n";
+import { DataTable, Flex, Text } from "@alepha/ui";
+import { Badge, Group } from "@mantine/core";
+import {
+  IconDeviceDesktop,
+  IconDeviceMobile,
+  IconDeviceTablet,
+} from "@tabler/icons-react";
+import { type Page, t } from "alepha";
+import {
+  type SessionController,
+  type SessionEntity,
+  sessions,
+} from "alepha/api/users";
+
+export interface AdminSessionsProps {
+  userRealmName?: string;
+}
+
+const AdminSessions = (props: AdminSessionsProps) => {
+  const client = useClient<SessionController>();
+  const { l } = useI18n();
+
+  const filters = t.object({
+    userId: t.optional(
+      t.uuid({
+        $control: {
+          query: t.pick(sessions.schema, ["userId"]),
+        },
+      }),
+    ),
+  });
+
+  const getDeviceIcon = (device?: string) => {
+    switch (device) {
+      case "MOBILE":
+        return <IconDeviceMobile size={14} />;
+      case "TABLET":
+        return <IconDeviceTablet size={14} />;
+      default:
+        return <IconDeviceDesktop size={14} />;
+    }
+  };
+
+  const isExpired = (expiresAt: Date | string) => {
+    return new Date(expiresAt) < new Date();
+  };
+
+  return (
+    <Flex flex={1}>
+      <DataTable<SessionEntity, typeof filters>
+        submitOnInit
+        defaultSize={10}
+        typeFormProps={{
+          skipSubmitButton: true,
+          columns: 3,
+        }}
+        tableProps={{
+          horizontalSpacing: "xs",
+          verticalSpacing: "xs",
+        }}
+        onFilterChange={(key, _value, form) => {
+          if (key === "userId") {
+            return form.submit();
+          }
+        }}
+        filters={filters}
+        tableTrProps={(item) => {
+          if (isExpired(item.expiresAt)) {
+            return {
+              opacity: 0.5,
+            };
+          }
+          return {};
+        }}
+        items={async (filters) => {
+          const response = await client.findSessions({
+            query: {
+              ...filters,
+              userRealmName: props.userRealmName,
+            },
+          });
+
+          return response as Page<SessionEntity>;
+        }}
+        columns={{
+          userId: {
+            label: "User ID",
+            value: (item) => (
+              <Text size="xs" ff="monospace">
+                {item.userId.slice(0, 8)}...
+              </Text>
+            ),
+          },
+          userAgent: {
+            label: "Device",
+            fit: true,
+            value: (item) => (
+              <Group gap={4}>
+                {item.userAgent ? (
+                  <>
+                    <Badge
+                      size="xs"
+                      variant="light"
+                      leftSection={getDeviceIcon(item.userAgent.device)}
+                    >
+                      {item.userAgent.device}
+                    </Badge>
+                    <Text size="xs" c="dimmed">
+                      {item.userAgent.browser} / {item.userAgent.os}
+                    </Text>
+                  </>
+                ) : (
+                  <Text size="xs" c="dimmed">
+                    -
+                  </Text>
+                )}
+              </Group>
+            ),
+          },
+          ip: {
+            label: "IP",
+            fit: true,
+            value: (item) => (
+              <Text size="xs" ff="monospace" c="dimmed">
+                {item.ip || "-"}
+              </Text>
+            ),
+          },
+          expiresAt: {
+            label: "Status",
+            fit: true,
+            value: (item) => (
+              <Badge
+                size="sm"
+                variant="light"
+                color={isExpired(item.expiresAt) ? "red" : "green"}
+              >
+                {isExpired(item.expiresAt) ? "Expired" : "Active"}
+              </Badge>
+            ),
+          },
+          createdAt: {
+            label: "Created",
+            fit: true,
+            value: (item) => (
+              <Text size="xs" c="dimmed">
+                {l(item.createdAt, { date: "fromNow" })}
+              </Text>
+            ),
+          },
+        }}
+      />
+    </Flex>
+  );
+};
+
+export default AdminSessions;