@alepha/ui 0.18.1 → 0.18.3

package/src/admin/components/AdminLayout.tsx

@@ -1,15 +1,13 @@
 import {
   ActionButton,
   AlephaMantineProvider,
-  Breadcrumbs,
   DashboardShell,
   type DashboardShellProps,
-  LanguageButton,
   SidebarCollapseButton,
-  ThemeButton,
+  Text,
+  ui,
 } from "@alepha/ui";
-import { UserButton } from "@alepha/ui/auth";
-import { Flex } from "@mantine/core";
+import { Flex, Image } from "@mantine/core";
 import { IconArrowLeft } from "@tabler/icons-react";
 
 export interface AdminLayoutProps {
@@ -33,45 +31,39 @@ const AdminLayout = (props: AdminLayoutProps) => {
     >
       <DashboardShell
         layout={"alt"}
-        navbarHeader={
-          <Flex px={"lg"} align={"center"} justify={"center"}>
-            <ActionButton variant={"subtle"} icon={IconArrowLeft} href={"/"} />
+        navbarHeader={(props) => (
+          <Flex gap={"md"} flex={1} px={"lg"} align={"center"}>
+            <ActionButton
+              href={"/"}
+              variant={"default"}
+              bd={0}
+              icon={IconArrowLeft}
+            />
+            {!props.collapsed && (
+              <>
+                <Image pt={4} src={"/favicon.svg"} h={36} w={36} />
+                <Flex direction={"column"}>
+                  <Text bold>Blog</Text>
+                  <Text small muted mt={-4}>
+                    Admin Panel
+                  </Text>
+                </Flex>
+              </>
+            )}
           </Flex>
-        }
-        footerHeight={50}
+        )}
+        footerHeight={48}
         navbarFooter={
-          <Flex flex={1} px={"lg"} gap={"md"} align={"center"}>
-            <SidebarCollapseButton />
+          <Flex flex={1} px={"lg"} align={"center"}>
+            <SidebarCollapseButton
+              c={"gray"}
+              size={"xs"}
+              iconSize={ui.sizes.icon.sm}
+              p={8}
+              bd={0}
+            />
           </Flex>
         }
-        appBarProps={{
-          items: [
-            {
-              type: "burger",
-              position: "left",
-            },
-            {
-              element: <Breadcrumbs />,
-              position: "left",
-            },
-            {
-              element: <UserButton />,
-              position: "right",
-            },
-            {
-              element: <ThemeButton />,
-              position: "right",
-            },
-            {
-              element: <LanguageButton />,
-              position: "right",
-            },
-            {
-              type: "dark",
-              position: "right",
-            },
-          ],
-        }}
         sidebarProps={{
           autoPopulateMenu: {
             startsWith: "/admin",

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

@@ -1,6 +1,6 @@
 import { DataTable, Flex, Text } from "@alepha/ui";
 import { Badge, Tooltip } from "@mantine/core";
-import { IconCheck, IconUser, IconX } from "@tabler/icons-react";
+import { IconUser } from "@tabler/icons-react";
 import { type Page, t } from "alepha";
 import type { AdminAuditController, AuditEntity } from "alepha/api/audits";
 import { useClient } from "alepha/react";
@@ -29,10 +29,11 @@ const AdminAudits = (props: AdminAuditsProps) => {
   });
 
   return (
-    <Flex flex={1} direction="column">
+    <Flex p="md" flex={1} direction="column">
       <DataTable<AuditEntity, typeof filters>
         submitOnInit
         defaultSize={20}
+        defaultFilters={["search", "severity"]}
         typeFormProps={{
           skipSubmitButton: true,
           columns: 4,
@@ -40,9 +41,8 @@ const AdminAudits = (props: AdminAuditsProps) => {
         tableProps={{
           horizontalSpacing: "xs",
           verticalSpacing: "xs",
-          striped: false,
-          highlightOnHover: true,
         }}
+        onFilterChange={(_key, _value, form) => form.submit()}
         filters={filters}
         tableTrProps={(item) => ({
           style: {
@@ -69,7 +69,6 @@ const AdminAudits = (props: AdminAuditsProps) => {
         columns={{
           type: {
             label: "Type",
-            fit: true,
             value: (item) => (
               <Badge size="sm" variant="default">
                 {item.type}
@@ -78,7 +77,6 @@ const AdminAudits = (props: AdminAuditsProps) => {
           },
           action: {
             label: "Action",
-            fit: true,
             value: (item) => (
               <Badge size="sm" variant="default">
                 {item.action}
@@ -87,16 +85,24 @@ const AdminAudits = (props: AdminAuditsProps) => {
           },
           severity: {
             label: "Severity",
-            fit: true,
             value: (item) => (
-              <Text size="xs" tt="capitalize">
+              <Badge
+                size="sm"
+                variant="light"
+                color={
+                  item.severity === "critical"
+                    ? "red"
+                    : item.severity === "warning"
+                      ? "yellow"
+                      : "gray"
+                }
+              >
                 {item.severity}
-              </Text>
+              </Badge>
             ),
           },
           user: {
             label: "User",
-            fit: true,
             value: (item) =>
               item.userId ? (
                 <Tooltip
@@ -132,7 +138,6 @@ const AdminAudits = (props: AdminAuditsProps) => {
           },
           resource: {
             label: "Resource",
-            fit: true,
             value: (item) =>
               item.resourceType ? (
                 <Tooltip label={`${item.resourceType}: ${item.resourceId}`}>
@@ -148,19 +153,21 @@ const AdminAudits = (props: AdminAuditsProps) => {
           },
           success: {
             label: "Status",
-            fit: true,
             value: (item) =>
               item.success ? (
-                <IconCheck size={14} />
+                <Badge size="sm" variant="light" color="green">
+                  OK
+                </Badge>
               ) : (
                 <Tooltip label={item.errorMessage || "Failed"}>
-                  <IconX size={14} />
+                  <Badge size="sm" variant="light" color="red">
+                    Failed
+                  </Badge>
                 </Tooltip>
               ),
           },
           ipAddress: {
             label: "IP",
-            fit: true,
             value: (item) => (
               <Text size="xs" c="dimmed" ff="monospace">
                 {item.ipAddress || "-"}
@@ -169,7 +176,6 @@ const AdminAudits = (props: AdminAuditsProps) => {
           },
           createdAt: {
             label: "Time",
-            fit: true,
             value: (item) => (
               <Tooltip label={l(item.createdAt, { date: "medium" })}>
                 <Text size="xs" c="dimmed">

package/src/admin/components/files/AdminFiles.tsx

@@ -28,7 +28,7 @@ const AdminFiles = () => {
   };
 
   return (
-    <Flex flex={1} direction={"column"}>
+    <Flex p="md" flex={1} direction={"column"}>
       <DataTable<FileEntity, typeof filters>
         submitOnInit
         defaultSize={10}
@@ -64,7 +64,6 @@ const AdminFiles = () => {
           },
           bucket: {
             label: "Bucket",
-            fit: true,
             value: (item) => (
               <Text size="xs" ff="monospace">
                 {item.bucket}
@@ -73,7 +72,6 @@ const AdminFiles = () => {
           },
           mimeType: {
             label: "Type",
-            fit: true,
             value: (item) => (
               <Text size="xs" c="dimmed">
                 {item.mimeType}
@@ -82,7 +80,6 @@ const AdminFiles = () => {
           },
           size: {
             label: "Size",
-            fit: true,
             value: (item) => (
               <Text size="xs" c="dimmed">
                 {formatFileSize(item.size)}
@@ -91,7 +88,6 @@ const AdminFiles = () => {
           },
           creatorName: {
             label: "Creator",
-            fit: true,
             value: (item) => (
               <Text size="xs" c="dimmed">
                 {item.creatorName || "-"}
@@ -100,7 +96,6 @@ const AdminFiles = () => {
           },
           createdAt: {
             label: "Created",
-            fit: true,
             value: (item) => (
               <Text size="xs" c="dimmed">
                 {l(item.createdAt, { date: "fromNow" })}

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

@@ -109,7 +109,7 @@ const AdminJobExecutions = () => {
   );
 
   return (
-    <Flex flex={1} direction="column" gap="md">
+    <Flex p="md" flex={1} direction="column" gap="md">
       <DataTable<JobExecutionResource, typeof executionFilters>
         key={`executions-${refreshKey}`}
         submitOnInit
@@ -121,13 +121,8 @@ const AdminJobExecutions = () => {
         tableProps={{
           horizontalSpacing: "sm",
           verticalSpacing: "sm",
-          highlightOnHover: true,
-        }}
-        onFilterChange={(key, _value, form) => {
-          if (key === "job" || key === "status" || key === "priority") {
-            return form.submit();
-          }
         }}
+        onFilterChange={(_key, _value, form) => form.submit()}
         filters={executionFilters}
         defaultFilters={["job", "status"]}
         items={async (filters) => {
@@ -141,12 +136,23 @@ const AdminJobExecutions = () => {
         columns={{
           status: {
             label: "Status",
-            fit: true,
-            value: (item) => (
-              <Badge size="sm" variant="default">
-                {item.status}
-              </Badge>
-            ),
+            value: (item) => {
+              const color =
+                item.status === "completed"
+                  ? "green"
+                  : item.status === "running"
+                    ? "blue"
+                    : item.status === "failed" || item.status === "dead"
+                      ? "red"
+                      : item.status === "cancelled"
+                        ? "yellow"
+                        : "gray";
+              return (
+                <Badge size="sm" variant="light" color={color}>
+                  {item.status}
+                </Badge>
+              );
+            },
           },
           jobName: {
             label: "Job",
@@ -158,7 +164,6 @@ const AdminJobExecutions = () => {
           },
           priority: {
             label: "Priority",
-            fit: true,
             value: (item) => (
               <Text size="xs" c="dimmed">
                 {PRIORITY_LABELS[item.priority] ?? item.priority}
@@ -167,7 +172,6 @@ const AdminJobExecutions = () => {
           },
           attempt: {
             label: "Attempt",
-            fit: true,
             value: (item) => (
               <Text size="sm" ff="monospace">
                 {item.attempt}/{item.maxAttempts}
@@ -176,7 +180,6 @@ const AdminJobExecutions = () => {
           },
           triggeredByName: {
             label: "Trigger",
-            fit: true,
             defaultHidden: true,
             value: (item) => (
               <Text size="xs" c="dimmed">
@@ -186,7 +189,6 @@ const AdminJobExecutions = () => {
           },
           createdAt: {
             label: "Created",
-            fit: true,
             defaultHidden: true,
             value: (item) => (
               <Text size="xs" c="dimmed">
@@ -196,7 +198,6 @@ const AdminJobExecutions = () => {
           },
           startedAt: {
             label: "Started",
-            fit: true,
             value: (item) => (
               <Text size="xs" c="dimmed">
                 {item.startedAt
@@ -207,7 +208,6 @@ const AdminJobExecutions = () => {
           },
           duration: {
             label: "Duration",
-            fit: true,
             value: (item) => (
               <Text size="xs" c="dimmed" ff="monospace">
                 {item.startedAt &&
@@ -228,7 +228,6 @@ const AdminJobExecutions = () => {
           },
           key: {
             label: "Key",
-            fit: true,
             defaultHidden: true,
             value: (item) => (
               <Text size="xs" c="dimmed" ff="monospace">
@@ -238,7 +237,6 @@ const AdminJobExecutions = () => {
           },
           workerId: {
             label: "Worker",
-            fit: true,
             defaultHidden: true,
             value: (item) => (
               <Text size="xs" c="dimmed" ff="monospace">
@@ -246,25 +244,21 @@ const AdminJobExecutions = () => {
               </Text>
             ),
           },
-          actions: {
-            label: "",
-            fit: true,
-            actions: (item) => [
-              {
-                tooltip: "Retry",
-                icon: IconRefresh,
-                onClick: () => handleRetry(item.id),
-                visible: item.can?.retry,
-              },
-              {
-                tooltip: "Cancel",
-                icon: IconCircleX,
-                onClick: () => handleCancel(item.id),
-                visible: item.can?.cancel,
-              },
-            ],
-          },
         }}
+        rowActions={(item) => [
+          {
+            label: "Retry",
+            icon: IconRefresh,
+            onClick: () => handleRetry(item.id),
+            visible: item.can?.retry,
+          },
+          {
+            label: "Cancel",
+            icon: IconCircleX,
+            onClick: () => handleCancel(item.id),
+            visible: item.can?.cancel,
+          },
+        ]}
         panel={{
           can: (item) => Boolean(item.error || item.key || item.workerId),
           render: (item) => (

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

@@ -88,7 +88,7 @@ const AdminJobRegistry = () => {
   );
 
   return (
-    <Flex flex={1} direction="column" gap="md">
+    <Flex p="md" flex={1} direction="column" gap="md">
       <DataTable<JobRegistration, typeof registryFilters>
         key={`registry-${refreshKey}`}
         submitOnInit
@@ -99,7 +99,6 @@ const AdminJobRegistry = () => {
         tableProps={{
           horizontalSpacing: "sm",
           verticalSpacing: "sm",
-          highlightOnHover: true,
         }}
         onFilterChange={(_key, _value, form) => form.submit()}
         filters={registryFilters}
@@ -121,7 +120,6 @@ const AdminJobRegistry = () => {
           },
           type: {
             label: "Type",
-            fit: true,
             value: (item) => (
               <Badge size="sm" variant="default">
                 {item.type}
@@ -130,7 +128,6 @@ const AdminJobRegistry = () => {
           },
           priority: {
             label: "Priority",
-            fit: true,
             value: (item) => (
               <Text size="sm" tt="capitalize">
                 {item.priority}
@@ -139,7 +136,6 @@ const AdminJobRegistry = () => {
           },
           concurrency: {
             label: "Concurrency",
-            fit: true,
             value: (item) => (
               <Text size="sm" ff="monospace">
                 {item.concurrency}
@@ -148,7 +144,6 @@ const AdminJobRegistry = () => {
           },
           queue: {
             label: "Queue",
-            fit: true,
             value: (item) => {
               const q = queueMap.get(item.name);
               if (
@@ -187,19 +182,15 @@ const AdminJobRegistry = () => {
               );
             },
           },
-          actions: {
-            label: "",
-            fit: true,
-            actions: (item) => [
-              {
-                tooltip: "Trigger",
-                color: "blue",
-                icon: IconPlayerPlay,
-                onClick: () => handleTriggerJob(item.name),
-              },
-            ],
-          },
         }}
+        rowActions={(item) => [
+          {
+            label: "Trigger",
+            color: "blue",
+            icon: IconPlayerPlay,
+            onClick: () => handleTriggerJob(item.name),
+          },
+        ]}
         panel={(item) => {
           const cron = cronMap.get(item.name);
           const failure = failureMap.get(item.name);

package/src/admin/components/keys/AdminApiKeys.tsx

@@ -146,7 +146,7 @@ const AdminApiKeys = () => {
   }, []);
 
   return (
-    <Flex flex={1} direction="column" gap="md">
+    <Flex p="md" flex={1} direction="column" gap="md">
       <StatCards
         items={[
           { label: "Total Keys", value: stats.total, icon: IconKey },
@@ -167,13 +167,8 @@ const AdminApiKeys = () => {
         tableProps={{
           horizontalSpacing: "sm",
           verticalSpacing: "sm",
-          highlightOnHover: true,
-        }}
-        onFilterChange={(key, _value, form) => {
-          if (key === "userId" || key === "includeRevoked") {
-            return form.submit();
-          }
         }}
+        onFilterChange={(_key, _value, form) => form.submit()}
         filters={filters}
         tableTrProps={(item) => {
           const status = getKeyStatus(item);
@@ -218,7 +213,6 @@ const AdminApiKeys = () => {
           },
           token: {
             label: "Key",
-            fit: true,
             value: (item) => (
               <Flex gap={4}>
                 <Code
@@ -240,12 +234,21 @@ const AdminApiKeys = () => {
           },
           status: {
             label: "Status",
-            fit: true,
             value: (item) => {
               const status = getKeyStatus(item);
               return (
-                <Badge size="sm" variant="default">
-                  {status.toUpperCase()}
+                <Badge
+                  size="sm"
+                  variant="light"
+                  color={
+                    status === "active"
+                      ? "green"
+                      : status === "expired"
+                        ? "yellow"
+                        : "red"
+                  }
+                >
+                  {status}
                 </Badge>
               );
             },
@@ -277,7 +280,6 @@ const AdminApiKeys = () => {
           },
           usage: {
             label: "Usage",
-            fit: true,
             value: (item) => (
               <Flex direction="column" gap={2}>
                 <Text size="xs" ff="monospace" fw={500}>
@@ -307,7 +309,6 @@ const AdminApiKeys = () => {
           },
           userId: {
             label: "Owner",
-            fit: true,
             value: (item) => (
               <ActionButton
                 variant="subtle"
@@ -325,7 +326,6 @@ const AdminApiKeys = () => {
           },
           createdAt: {
             label: "Created",
-            fit: true,
             value: (item) => (
               <Text size="xs" c="dimmed">
                 {l(item.createdAt, { date: "fromNow" })}
@@ -334,7 +334,6 @@ const AdminApiKeys = () => {
           },
           expiresAt: {
             label: "Expires",
-            fit: true,
             value: (item) => {
               if (!item.expiresAt) {
                 return (
@@ -351,33 +350,16 @@ const AdminApiKeys = () => {
               );
             },
           },
-          actions: {
-            label: "",
-            fit: true,
-            value: (item) => {
-              const status = getKeyStatus(item);
-              if (status === "revoked") {
-                return (
-                  <Tooltip label="Already revoked">
-                    <IconCheck size={14} color="var(--mantine-color-dimmed)" />
-                  </Tooltip>
-                );
-              }
-
-              return (
-                <Tooltip label="Revoke key">
-                  <ActionButton
-                    size="xs"
-                    variant="subtle"
-                    onClick={() => handleRevoke(item)}
-                  >
-                    <IconTrash size={14} />
-                  </ActionButton>
-                </Tooltip>
-              );
-            },
-          },
         }}
+        rowActions={(item) => [
+          {
+            label: "Revoke key",
+            icon: IconTrash,
+            color: "red",
+            onClick: () => handleRevoke(item),
+            visible: getKeyStatus(item) === "active",
+          },
+        ]}
       />
     </Flex>
   );