@arch-cadre/panel 1.0.6 → 1.0.9

package/src/ui/router.tsx

@@ -0,0 +1,69 @@
+import { checkSecurity, getCurrentSession } from "@arch-cadre/core/server";
+import { getKryoModuleRoutes } from "@arch-cadre/modules/server";
+import { redirect } from "next/navigation";
+import * as React from "react";
+import KryoLayout from "./layout.js";
+
+function matchRoute(pattern: string, path: string) {
+  const paramNames: string[] = [];
+  const regexPattern = pattern
+    .replace(/:([^/]+)/g, (_, name) => {
+      paramNames.push(name);
+      return "([^/]+)";
+    })
+    .replace(/\//g, "\\/");
+
+  const regex = new RegExp(`^${regexPattern}$`);
+  const match = path.match(regex);
+
+  if (!match) return null;
+
+  const params: Record<string, string> = {};
+  paramNames.forEach((name, index) => {
+    params[name] = match[index + 1];
+  });
+
+  return params;
+}
+
+export async function KryoRouter({
+  path,
+  searchParams,
+}: {
+  path: string;
+  searchParams: any;
+}) {
+  const routes = await getKryoModuleRoutes();
+
+  for (const route of routes) {
+    const params = matchRoute(route.path, path);
+
+    if (params) {
+      if (route.auth) {
+        const { user, session } = await getCurrentSession();
+        if (!user || !session) {
+          return redirect("/signin");
+        }
+
+        const security = await checkSecurity(
+          session,
+          user,
+          route.roles,
+          route.permissions,
+        );
+
+        if (!security.satisfied) {
+          return redirect(security.redirect || "/signin");
+        }
+      }
+
+      const Component = route.component;
+      const Layout = route.layout || KryoLayout;
+      const content = <Component params={params} searchParams={searchParams} />;
+
+      return <Layout>{content}</Layout>;
+    }
+  }
+
+  return null; // Delegate back to 404
+}

package/src/ui/session-manager/components/sessions-list.tsx

@@ -0,0 +1,303 @@
+"use client";
+
+import { useTranslation } from "@arch-cadre/intl";
+import { cn, Icon, toast } from "@arch-cadre/ui";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "@arch-cadre/ui/components/alert-dialog";
+import { Badge } from "@arch-cadre/ui/components/badge";
+import { Button } from "@arch-cadre/ui/components/button";
+import { useRouter } from "next/navigation";
+import * as React from "react";
+import { useState, useTransition } from "react";
+import {
+  revokeAllOtherSessionsAction,
+  revokeSessionAction,
+} from "../../../actions/session-manager/index.js";
+
+type Session = {
+  id: string;
+  createdAt: Date;
+  expiresAt: Date;
+  isCurrent: boolean;
+  [key: string]: any;
+};
+
+interface SessionsListProps {
+  sessions: Session[];
+}
+
+const CORE_SESSION_KEYS = [
+  "id",
+  "createdAt",
+  "expiresAt",
+  "isCurrent",
+  "userId",
+];
+
+export function SessionsList({ sessions }: SessionsListProps) {
+  const router = useRouter();
+  const [isPending, startTransition] = useTransition();
+  const [revokingSessionId, setRevokingSessionId] = useState<string | null>(
+    null,
+  );
+  const { t } = useTranslation();
+
+  // Helper to get augmentation badges
+  const renderAugmentations = (session: Session) => {
+    return Object.entries(session)
+      .filter(([key]) => !CORE_SESSION_KEYS.includes(key))
+      .map(([key, value]) => {
+        // Special formatting for known augmentations like 2FA
+        if (key === "twoFactorVerified" || key === "two_factor_verified") {
+          return (
+            <Badge
+              key={key}
+              variant="outline"
+              className={cn(
+                value
+                  ? "text-[10px] px-1.5 text-green-600 border-green-200"
+                  : "text-[10px] px-1.5 text-red-600 border-red-200",
+              )}
+            >
+              <Icon
+                icon="solar:shield-check-broken"
+                className="h-2.5 w-2.5 mr-0.5"
+              />
+              {t("2FA")}
+            </Badge>
+          );
+        }
+
+        // Generic badge for other augmentations
+        if (typeof value === "boolean" && value === false) return null;
+
+        return (
+          <Badge
+            key={key}
+            variant="outline"
+            className="text-[10px] px-1.5 text-muted-foreground uppercase font-black tracking-widest"
+          >
+            {t(key)}
+            {typeof value !== "boolean" && `: ${value}`}
+          </Badge>
+        );
+      });
+  };
+
+  const handleRevokeSession = (sessionId: string) => {
+    setRevokingSessionId(sessionId);
+    startTransition(async () => {
+      const result = await revokeSessionAction(sessionId);
+      if (result.error) {
+        toast.error(result.error);
+      } else {
+        toast.success(t("Session revoked successfully"));
+        router.refresh();
+      }
+      setRevokingSessionId(null);
+    });
+  };
+
+  const handleRevokeAllOther = () => {
+    startTransition(async () => {
+      const result = await revokeAllOtherSessionsAction();
+      if (result.error) {
+        toast.error(result.error);
+      } else {
+        toast.success(t("All other sessions revoked successfully"));
+        router.refresh();
+      }
+    });
+  };
+
+  const isExpiringSoon = (expiresAt: Date) => {
+    const now = new Date();
+    const diffDays =
+      (expiresAt.getTime() - now.getTime()) / (1000 * 60 * 60 * 24);
+    return diffDays < 7;
+  };
+
+  const otherSessions = sessions.filter((s) => !s.isCurrent);
+
+  return (
+    <div className="space-y-4">
+      {/* Revoke All Button */}
+      {otherSessions.length > 0 && (
+        <div className="flex justify-end">
+          <AlertDialog>
+            <AlertDialogTrigger asChild>
+              <Button variant="outline" size="sm" disabled={isPending}>
+                <Icon icon="solar:logout-2-broken" className="h-4 w-4 mr-2" />
+                {t("Revoke All Other Sessions")}
+              </Button>
+            </AlertDialogTrigger>
+            <AlertDialogContent>
+              <AlertDialogHeader>
+                <AlertDialogTitle>
+                  {t("Revoke All Other Sessions?")}
+                </AlertDialogTitle>
+                <AlertDialogDescription>
+                  {t(
+                    "This will sign out all other devices. You will remain signed in on this device. This action cannot be undone.",
+                  )}
+                </AlertDialogDescription>
+              </AlertDialogHeader>
+              <AlertDialogFooter>
+                <AlertDialogCancel>{t("Cancel")}</AlertDialogCancel>
+                <AlertDialogAction
+                  onClick={handleRevokeAllOther}
+                  disabled={isPending}
+                  className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+                >
+                  {isPending ? t("Revoking...") : t("Revoke All")}
+                </AlertDialogAction>
+              </AlertDialogFooter>
+            </AlertDialogContent>
+          </AlertDialog>
+        </div>
+      )}
+
+      {/* Sessions List */}
+      <div className="space-y-3">
+        {sessions.map((session) => (
+          <div
+            key={session.id}
+            className={cn(
+              "flex items-center justify-between p-4 rounded-lg border bg-card",
+              session.isCurrent && "ring-2 ring-primary",
+            )}
+          >
+            <div className="flex items-center gap-4">
+              <div
+                className={cn(
+                  "flex h-10 w-10 items-center justify-center rounded-full",
+                  session.isCurrent
+                    ? "bg-primary/10 text-primary"
+                    : "bg-muted text-muted-foreground",
+                )}
+              >
+                <Icon icon="solar:monitor-broken" className="h-5 w-5" />
+              </div>
+              <div className="space-y-1">
+                <div className="flex items-center gap-2">
+                  <span className="font-medium text-sm">
+                    {session.isCurrent ? t("Current Session") : t("Session")}
+                  </span>
+                  {session.isCurrent && (
+                    <Badge variant="secondary" className="text-[10px] px-1.5">
+                      {t("This device")}
+                    </Badge>
+                  )}
+
+                  {renderAugmentations(session)}
+                </div>
+                <div className="flex items-center gap-3 text-xs text-muted-foreground">
+                  <span className="flex items-center gap-1">
+                    <Icon
+                      icon="solar:clock-circle-broken"
+                      className="h-3 w-3"
+                    />
+                    {t("Started {{ time }}", {
+                      time: session.createdAt,
+                    })}
+                  </span>
+                  <span className="flex items-center gap-1">
+                    <Icon
+                      icon="solar:hourglass-line-broken"
+                      className={cn(
+                        "h-3 w-3",
+                        isExpiringSoon(session.expiresAt) && "text-orange-500",
+                      )}
+                    />
+                    {t("Expires {{ time }}", {
+                      time: session.expiresAt,
+                    })}
+                  </span>
+                </div>
+              </div>
+            </div>
+
+            {/* Actions */}
+            {!session.isCurrent && (
+              <AlertDialog>
+                <AlertDialogTrigger asChild>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className="text-muted-foreground hover:text-destructive"
+                    disabled={isPending && revokingSessionId === session.id}
+                  >
+                    {isPending && revokingSessionId === session.id ? (
+                      <Icon
+                        icon="solar:refresh-broken"
+                        className="h-4 w-4 animate-spin"
+                      />
+                    ) : (
+                      <>
+                        <Icon
+                          icon="solar:logout-2-broken"
+                          className="h-4 w-4 mr-1"
+                        />
+                        {t("Revoke")}
+                      </>
+                    )}
+                  </Button>
+                </AlertDialogTrigger>
+                <AlertDialogContent>
+                  <AlertDialogHeader>
+                    <AlertDialogTitle>{t("Revoke Session?")}</AlertDialogTitle>
+                    <AlertDialogDescription>
+                      {t(
+                        "This will sign out this device immediately. The session was started {{ time }}.",
+                        {
+                          time: session.createdAt,
+                        },
+                      )}
+                    </AlertDialogDescription>
+                  </AlertDialogHeader>
+                  <AlertDialogFooter>
+                    <AlertDialogCancel>{t("Cancel")}</AlertDialogCancel>
+                    <AlertDialogAction
+                      onClick={() => handleRevokeSession(session.id)}
+                      disabled={isPending}
+                      className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+                    >
+                      {isPending ? t("Revoking...") : t("Revoke")}
+                    </AlertDialogAction>
+                  </AlertDialogFooter>
+                </AlertDialogContent>
+              </AlertDialog>
+            )}
+          </div>
+        ))}
+      </div>
+
+      {/* Empty State */}
+      {sessions.length === 0 && (
+        <div className="text-center py-8 text-muted-foreground">
+          <Icon
+            icon="solar:devices-broken"
+            className="h-12 w-12 mx-auto mb-3 opacity-50"
+          />
+          <p>{t("No active sessions found")}</p>
+        </div>
+      )}
+
+      {/* Only Current Session */}
+      {sessions.length === 1 && sessions[0].isCurrent && (
+        <p className="text-sm text-muted-foreground text-center py-4">
+          {t("You only have one active session (this device).")}
+        </p>
+      )}
+    </div>
+  );
+}

package/src/ui/session-manager/pages/sessions-page.tsx

@@ -0,0 +1,22 @@
+import { getTranslation } from "@arch-cadre/intl/server";
+import * as React from "react";
+import { getSessionsAction } from "../../../actions/session-manager/index.js";
+import { SessionsList } from "../components/sessions-list.js";
+
+export default async function SessionsSettingsPage() {
+  const { t } = await getTranslation();
+  const { sessions } = await getSessionsAction();
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h2 className="text-2xl font-bold">{t("Active Sessions")}</h2>
+        <p className="text-muted-foreground">
+          {t("Manage your active sessions and sign out from other devices.")}
+        </p>
+      </div>
+
+      <SessionsList sessions={sessions} />
+    </div>
+  );
+}

package/src/ui/settings/page.tsx

@@ -0,0 +1,73 @@
+import { getTranslation } from "@arch-cadre/intl/server";
+import { getKryoModuleNavigationGrouped } from "@arch-cadre/modules/server";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@arch-cadre/ui/components/card";
+import { Icon } from "@iconify/react";
+import Link from "next/link";
+import * as React from "react";
+
+export default async function GlobalSettingsPage() {
+  const groups = await getKryoModuleNavigationGrouped("settings");
+  const { t } = await getTranslation();
+
+  return (
+    <div className="container mx-auto py-10 px-4 space-y-8">
+      <div>
+        <h1 className="text-3xl font-bold tracking-tight">
+          {t("Settings Overview")}
+        </h1>
+        <p className="text-muted-foreground">
+          {t("Manage your global settings")}
+        </p>
+      </div>
+
+      <div className="grid gap-6">
+        {Object.entries(groups).map(([groupName, items]) => (
+          <div key={groupName} className="space-y-4">
+            <h2 className="text-xl font-semibold tracking-tight px-1">
+              {groupName}
+            </h2>
+            <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+              {items.map((item) => (
+                <Link key={item.url} href={item.url} className="block group">
+                  <Card className="h-full transition-colors hover:border-primary/50 hover:bg-accent/5">
+                    <CardHeader className="flex flex-row items-center space-y-0 gap-4">
+                      <div className="size-10 flex items-center justify-center rounded-lg bg-primary/10 text-primary group-hover:bg-primary group-hover:text-primary-foreground transition-colors">
+                        {item.icon ? (
+                          <Icon icon={item.icon} className="size-5" />
+                        ) : (
+                          <Icon
+                            icon="solar:settings-linear"
+                            className="size-5"
+                          />
+                        )}
+                      </div>
+                      <div className="space-y-1">
+                        <CardTitle className="text-base">
+                          {t(item.title as any)}
+                        </CardTitle>
+                      </div>
+                    </CardHeader>
+                  </Card>
+                </Link>
+              ))}
+            </div>
+          </div>
+        ))}
+
+        {Object.keys(groups).length === 0 && (
+          <Card className="border-dashed">
+            <CardContent className="py-10 text-center text-muted-foreground">
+              {t("No settings available")}
+            </CardContent>
+          </Card>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/ui/settings-page.tsx

@@ -0,0 +1,97 @@
+"use client";
+
+import { useTranslation } from "@arch-cadre/intl";
+
+import { Button } from "@arch-cadre/ui/components/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@arch-cadre/ui/components/card";
+import { Input } from "@arch-cadre/ui/components/input";
+import { Label } from "@arch-cadre/ui/components/label";
+import * as React from "react";
+import { useEffect, useState } from "react";
+import { toast } from "sonner";
+import {
+  getKryoConfig,
+  type KryoPanelConfig,
+  updateKryoConfig,
+} from "../actions/settings.js";
+
+export default function KryoPanelSettingsPage() {
+  const [config, setConfig] = useState<KryoPanelConfig>({
+    pathPrefix: "/kryo",
+  });
+
+  const { t } = useTranslation();
+
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    getKryoConfig().then((data) => {
+      setConfig(data);
+      setLoading(false);
+    });
+  }, []);
+
+  const handleSave = async (e: React.FormEvent) => {
+    e.preventDefault();
+    try {
+      await updateKryoConfig(config);
+      toast.success(t("Panel settings saved. Your admin path has changed!"));
+
+      // Redirect to the settings page under the new prefix
+      if (typeof window !== "undefined") {
+        const newPath = config.pathPrefix.endsWith("/")
+          ? `${config.pathPrefix}config`
+          : `${config.pathPrefix}/config`;
+        window.location.href = newPath;
+      }
+    } catch (error: any) {
+      toast.error(error.message || t("Failed to save settings"));
+    }
+  };
+
+  if (loading) return <div className="p-10 text-center">{t("Loading...")}</div>;
+
+  return (
+    <div className="container mx-auto py-10 max-w-2xl px-4">
+      <Card className="border-primary/10">
+        <CardHeader>
+          <CardTitle>{t("Kryo Panel Settings")}</CardTitle>
+          <CardDescription>{t("Manage kryo-panel settings")}</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <form onSubmit={handleSave} className="space-y-6">
+            <div className="space-y-2">
+              <Label htmlFor="pathPrefix">{t("Path Prefix")}</Label>
+              <div className="flex gap-2">
+                <Input
+                  id="pathPrefix"
+                  value={config.pathPrefix}
+                  onChange={(e) =>
+                    setConfig({ ...config, pathPrefix: e.target.value })
+                  }
+                  placeholder="/kryo"
+                />
+              </div>
+              <p className="text-[11px] italic bg-amber-50 p-2 rounded squircle border border-amber-100 text-amber-800">
+                <strong>{t("Warning")}</strong>{" "}
+                {t(
+                  "Warning changing the path prefix may affect existing links and bookmarks. Make sure to update any references to the admin panel URL accordingly.",
+                )}
+              </p>
+            </div>
+
+            <Button type="submit" className="w-full">
+              {t("Save Configuration")}
+            </Button>
+          </form>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}