@arch-cadre/panel 1.0.7 → 1.0.10

package/src/ui/modules/docs/page.tsx

@@ -0,0 +1,105 @@
+import { getTranslation } from "@arch-cadre/intl/server";
+import { Button } from "@arch-cadre/ui/components/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@arch-cadre/ui/components/card";
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from "@arch-cadre/ui/components/tabs";
+import { Icon } from "@iconify/react";
+import Link from "next/link";
+import { notFound } from "next/navigation";
+import * as React from "react";
+import { getModuleDocumentation } from "../../../actions/manager";
+
+export default async function ModuleDocsPage({
+  params,
+}: {
+  params: { slug: string };
+}) {
+  const { slug: moduleId } = await params;
+  if (!moduleId) return notFound();
+
+  const { t } = await getTranslation();
+
+  const docs = await getModuleDocumentation(moduleId);
+  if (!docs) {
+    return (
+      <div className="flex flex-col items-center justify-center py-20 space-y-4">
+        <Icon
+          icon="solar:document-text-broken"
+          className="size-16 text-muted-foreground"
+        />
+        <h2 className="text-xl font-bold">{t("Not Found")}</h2>
+        <p className="text-muted-foreground text-center max-w-md">
+          {t("Not found documentation for path", { path: "docs/" })}
+        </p>
+        <Button asChild variant="outline">
+          <Link href="/module/module-manager">{t("back")}</Link>
+        </Button>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <div className="space-y-1">
+          <h2 className="text-3xl font-black tracking-tight">
+            {t("docs.title")}
+          </h2>
+          <p className="text-muted-foreground text-sm">
+            {t("docs.browsing")}{" "}
+            <span className="font-bold text-primary">{moduleId}</span>
+          </p>
+        </div>
+        <Button asChild variant="outline" size="sm">
+          <Link
+            href="/module/module-manager"
+            className="flex items-center gap-2"
+          >
+            <Icon icon="solar:arrow-left-broken" className="size-4" />
+            {t("docs.back")}
+          </Link>
+        </Button>
+      </div>
+
+      <Tabs defaultValue={docs[0].filename} className="w-full">
+        <TabsList className="bg-muted/50 mb-8">
+          {docs.map((doc) => (
+            <TabsTrigger key={doc.filename} value={doc.filename}>
+              {doc.title}
+            </TabsTrigger>
+          ))}
+        </TabsList>
+
+        {docs.map((doc) => (
+          <TabsContent key={doc.filename} value={doc.filename} className="mt-0">
+            <Card className="bg-card shadow-xl border-primary/5">
+              <CardHeader className="border-b bg-muted/10">
+                <CardTitle className="text-xl font-bold">{doc.title}</CardTitle>
+                <CardDescription className="font-mono text-[10px]">
+                  {t("docs.file")} {doc.filename}
+                </CardDescription>
+              </CardHeader>
+              <CardContent className="pt-8">
+                <div className="prose prose-slate dark:prose-invert max-w-none">
+                  <pre className="whitespace-pre-wrap font-sans text-base leading-relaxed bg-transparent border-none p-0 text-foreground">
+                    {doc.content}
+                  </pre>
+                </div>
+              </CardContent>
+            </Card>
+          </TabsContent>
+        ))}
+      </Tabs>
+    </div>
+  );
+}

package/src/ui/modules/page.tsx

@@ -0,0 +1,30 @@
+import { getTranslation } from "@arch-cadre/intl/server";
+
+import { Icon } from "@iconify/react";
+import * as React from "react";
+import { getModulesAction } from "../../actions/manager";
+import { ModuleMarketplaceList } from "../components/manager/module-list";
+import { ModuleUpload } from "../components/manager/module-upload";
+
+export default async function ModuleAdminPage() {
+  const modules = await getModulesAction();
+  const { t } = await getTranslation();
+
+  return (
+    <div className="space-y-6">
+      <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
+        <div>
+          <h1 className="text-3xl font-black tracking-tight flex items-center gap-2">
+            {t("Modules Marketplace")}
+          </h1>
+          <p className="text-muted-foreground">
+            {t("Manage your installed modules")}
+          </p>
+        </div>
+        <ModuleUpload />
+      </div>
+
+      <ModuleMarketplaceList initialModules={modules} />
+    </div>
+  );
+}

package/src/ui/page.tsx

@@ -0,0 +1,15 @@
+import { getCurrentSession } from "@arch-cadre/core/server";
+import { redirect } from "next/navigation";
+import * as React from "react";
+
+export default async function Page() {
+  const { session, user } = await getCurrentSession();
+
+  // Redirect unauthenticated users to signin
+  if (!session || !user) {
+    redirect("/signin");
+  }
+
+  // Redirect authenticated users to dashboard
+  redirect("/kryo/dashboard");
+}

package/src/ui/rbac/pages/rbac-admin.tsx

@@ -0,0 +1,551 @@
+/** biome-ignore-all lint/correctness/useExhaustiveDependencies: <explanation> */
+"use client";
+import { useTranslation } from "@arch-cadre/intl";
+import { Icon, toast } from "@arch-cadre/ui";
+import { Button } from "@arch-cadre/ui/components/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@arch-cadre/ui/components/card";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@arch-cadre/ui/components/dialog";
+import { Input } from "@arch-cadre/ui/components/input";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableRow,
+} from "@arch-cadre/ui/components/table";
+import * as React from "react";
+import { useCallback, useEffect, useState } from "react";
+import {
+  assignPermissionToRole,
+  assignPermissionToUser,
+  assignRoleToUser,
+  createPermission,
+  createRole,
+  deletePermission,
+  deleteRole,
+  getPermissions,
+  getRolePermissions,
+  getRoles,
+  getUserRbacData,
+  getUsers,
+  revokePermissionFromRole,
+  revokePermissionFromUser,
+  revokeRoleFromUser,
+} from "../../../actions/rbac/index";
+
+export default function RbacAdminPage() {
+  const [roles, setRoles] = useState<any[]>([]);
+  const [permissions, setPermissions] = useState<any[]>([]);
+  const [users, setUsers] = useState<any[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  const { t } = useTranslation();
+  // Form states
+  const [newRoleName, setNewRoleName] = useState("");
+  const [newPermissionName, setNewPermissionName] = useState("");
+
+  // Role-Permission mapping state
+  const [selectedRole, setSelectedRole] = useState<any | null>(null);
+  const [rolePermissions, setRolePermissions] = useState<any[]>([]);
+
+  // User-Role/Permission mapping state
+  const [selectedUser, setSelectedUser] = useState<any | null>(null);
+  const [userRbacData, setUserRbacData] = useState<{
+    roles: any[];
+    directPermissions: any[];
+    effectivePermissions: any[];
+  }>({
+    roles: [],
+    directPermissions: [],
+    effectivePermissions: [],
+  });
+
+  const loadData = useCallback(async () => {
+    setLoading(true);
+    try {
+      const [r, p, u] = await Promise.all([
+        getRoles(),
+        getPermissions(),
+        getUsers(),
+      ]);
+      setRoles(r);
+      setPermissions(p);
+      setUsers(u);
+    } catch (e) {
+      console.error("[RBAC] Failed to load initial data:", e);
+      toast.error(t("Failed to load RBAC data."));
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  const loadRolePermissions = useCallback(async (roleId: string) => {
+    try {
+      const p = await getRolePermissions(roleId);
+      setRolePermissions(p);
+    } catch (e) {
+      console.error(`[RBAC] Failed to load permissions for role ${roleId}:`, e);
+      toast.error(t("Failed to load permissions for role."));
+    }
+  }, []);
+
+  const loadUserRbacData = useCallback(async (userId: string) => {
+    try {
+      const data = await getUserRbacData(userId);
+      setUserRbacData(data);
+    } catch (e) {
+      console.error(`[RBAC] Failed to load RBAC data for user ${userId}:`, e);
+      toast.error(t("Failed to load user RBAC data."));
+    }
+  }, []);
+
+  useEffect(() => {
+    loadData();
+  }, [loadData]);
+
+  useEffect(() => {
+    if (selectedRole?.id) {
+      loadRolePermissions(selectedRole.id);
+    }
+  }, [selectedRole?.id, loadRolePermissions]);
+
+  useEffect(() => {
+    if (selectedUser?.id) {
+      loadUserRbacData(selectedUser.id);
+    }
+  }, [selectedUser?.id, loadUserRbacData]);
+
+  const handleCreateRole = useCallback(async () => {
+    if (!newRoleName) return;
+    try {
+      await createRole(newRoleName);
+      setNewRoleName("");
+      toast.success(t("Role created."));
+      loadData();
+    } catch (_e) {
+      toast.error(t("Failed to create role."));
+    }
+  }, [newRoleName, loadData]);
+
+  const handleCreatePermission = useCallback(async () => {
+    if (!newPermissionName) return;
+    try {
+      await createPermission(newPermissionName);
+      setNewPermissionName("");
+      toast.success(t("Permission created."));
+      loadData();
+    } catch (_e) {
+      toast.error(t("Failed to create permission."));
+    }
+  }, [newPermissionName, loadData]);
+
+  const handleDeleteRole = useCallback(
+    async (id: string) => {
+      try {
+        await deleteRole(id);
+        toast.success(t("Role deleted."));
+        if (selectedRole?.id === id) setSelectedRole(null);
+        loadData();
+      } catch (_e) {
+        toast.error(t("Failed to delete role."));
+      }
+    },
+    [selectedRole, loadData],
+  );
+
+  const handleDeletePermission = useCallback(
+    async (id: string) => {
+      try {
+        await deletePermission(id);
+        toast.success(t("Permission deleted."));
+        loadData();
+      } catch (_e) {
+        toast.error(t("Failed to delete permission."));
+      }
+    },
+    [loadData],
+  );
+
+  const togglePermissionForRole = useCallback(
+    async (permId: string, hasIt: boolean) => {
+      if (!selectedRole) return;
+      try {
+        if (hasIt) {
+          await revokePermissionFromRole(selectedRole.id, permId);
+        } else {
+          await assignPermissionToRole(selectedRole.id, permId);
+        }
+        loadRolePermissions(selectedRole.id);
+      } catch (_e) {
+        toast.error(t("Action failed."));
+      }
+    },
+    [selectedRole, loadRolePermissions],
+  );
+
+  const toggleRoleForUser = useCallback(
+    async (roleId: string, hasIt: boolean) => {
+      if (!selectedUser) return;
+      try {
+        if (hasIt) {
+          await revokeRoleFromUser(selectedUser.id, roleId);
+        } else {
+          await assignRoleToUser(selectedUser.id, roleId);
+        }
+        loadUserRbacData(selectedUser.id);
+      } catch (_e) {
+        toast.error(t("Action failed."));
+      }
+    },
+    [selectedUser, loadUserRbacData],
+  );
+
+  const togglePermissionForUser = useCallback(
+    async (permId: string, hasIt: boolean) => {
+      if (!selectedUser) return;
+      try {
+        if (hasIt) {
+          await revokePermissionFromUser(selectedUser.id, permId);
+        } else {
+          await assignPermissionToUser(selectedUser.id, permId);
+        }
+        loadUserRbacData(selectedUser.id);
+      } catch (_e) {
+        toast.error(t("Action failed."));
+      }
+    },
+    [selectedUser, loadUserRbacData],
+  );
+
+  return (
+    <div className="space-y-6">
+      <div className="space-y-1">
+        <h1 className="text-3xl font-black tracking-tight flex items-center gap-2">
+          {/* <Icon
+            icon="solar:shield-keyhole-bold-duotone"
+            className="size-10 text-primary"
+          /> */}
+          {t("Role-Based Access Control Manager")}
+        </h1>
+        <p className="text-muted-foreground">
+          {t("Manage roles, permissions, and their relationships.")}
+        </p>
+      </div>
+
+      <div className="grid gap-6 lg:grid-cols-3">
+        {/* Roles Section */}
+        <Card className="border-primary/5 shadow-sm">
+          <CardHeader>
+            <CardTitle>{t("Roles")}</CardTitle>
+            <CardDescription>{t("System roles.")}</CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <div className="flex gap-2">
+              <Input
+                placeholder={t("New role...")}
+                value={newRoleName}
+                onChange={(e) => setNewRoleName(e.target.value)}
+              />
+              <Button onClick={handleCreateRole}>{t("Add")}</Button>
+            </div>
+            <div className="border rounded-md max-h-[300px] overflow-auto">
+              <Table>
+                <TableBody>
+                  {roles.map((role) => (
+                    <TableRow
+                      key={role.id}
+                      className={
+                        selectedRole?.id === role.id ? "bg-primary/5" : ""
+                      }
+                    >
+                      <TableCell
+                        className="font-medium cursor-pointer"
+                        onClick={() => setSelectedRole(role)}
+                      >
+                        {role.name}
+                      </TableCell>
+                      <TableCell className="text-right">
+                        <Button
+                          variant="ghost"
+                          size="icon"
+                          onClick={() => handleDeleteRole(role.id)}
+                        >
+                          <Icon
+                            icon="solar:trash-bin-trash-bold"
+                            className="size-4 text-destructive"
+                          />
+                        </Button>
+                      </TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </div>
+          </CardContent>
+        </Card>
+
+        {/* Permissions Section */}
+        <Card className="border-primary/5 shadow-sm">
+          <CardHeader>
+            <CardTitle>{t("Permissions")}</CardTitle>
+            <CardDescription>{t("System permissions.")}</CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <div className="flex gap-2">
+              <Input
+                placeholder={t("New permission...")}
+                value={newPermissionName}
+                onChange={(e) => setNewPermissionName(e.target.value)}
+              />
+              <Button onClick={handleCreatePermission}>{t("Add")}</Button>
+            </div>
+            <div className="border rounded-md max-h-[300px] overflow-auto">
+              <Table>
+                <TableBody>
+                  {permissions.map((perm) => (
+                    <TableRow key={perm.id}>
+                      <TableCell className="font-medium">{perm.name}</TableCell>
+                      <TableCell className="text-right">
+                        <Button
+                          variant="ghost"
+                          size="icon"
+                          onClick={() => handleDeletePermission(perm.id)}
+                        >
+                          <Icon
+                            icon="solar:trash-bin-trash-bold"
+                            className="size-4 text-destructive"
+                          />
+                        </Button>
+                      </TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </div>
+          </CardContent>
+        </Card>
+
+        {/* Users Section */}
+        <Card className="border-primary/5 shadow-sm">
+          <CardHeader>
+            <CardTitle>{t("Users")}</CardTitle>
+            <CardDescription>{t("Manage user roles.")}</CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <div className="border rounded-md max-h-[358px] overflow-auto">
+              <Table>
+                <TableBody>
+                  {users.map((user) => (
+                    <TableRow
+                      key={user.id}
+                      className={
+                        selectedUser?.id === user.id ? "bg-primary/5" : ""
+                      }
+                    >
+                      <TableCell
+                        className="font-medium cursor-pointer"
+                        onClick={() => setSelectedUser(user)}
+                      >
+                        <div>{user.name}</div>
+                        <div className="text-[10px] text-muted-foreground">
+                          {user.email}
+                        </div>
+                      </TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* Role-Permission Assignment */}
+      <Dialog
+        open={!!selectedRole}
+        onOpenChange={(open) => !open && setSelectedRole(null)}
+      >
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>
+              {t("Edit Role: {roleName}", { roleName: selectedRole?.name })}
+            </DialogTitle>
+            <DialogDescription>
+              {t("Manage permissions for role {roleName}", {
+                roleName: selectedRole?.name,
+              })}
+            </DialogDescription>
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
+              {permissions.map((perm) => {
+                const hasIt = rolePermissions.some((rp) => rp.id === perm.id);
+                return (
+                  <Button
+                    key={perm.id}
+                    variant={hasIt ? "default" : "outline"}
+                    size="sm"
+                    className="justify-start gap-2 h-auto py-2 px-3 overflow-hidden"
+                    onClick={() => togglePermissionForRole(perm.id, hasIt)}
+                  >
+                    <Icon
+                      icon={
+                        hasIt
+                          ? "solar:check-circle-bold"
+                          : "solar:circle-linear"
+                      }
+                      className={
+                        hasIt
+                          ? "text-primary-foreground"
+                          : "text-muted-foreground"
+                      }
+                    />
+                    <span className="truncate text-xs">{perm.name}</span>
+                  </Button>
+                );
+              })}
+            </div>
+          </DialogHeader>
+        </DialogContent>
+      </Dialog>
+
+      {/* User-Role Assignment */}
+      <Dialog
+        open={!!selectedUser}
+        onOpenChange={(open) => !open && setSelectedUser(null)}
+      >
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>
+              {t("Management for {selectedUser}", {
+                selectedUser: selectedUser?.name,
+              })}
+            </DialogTitle>
+            <DialogDescription>
+              {t("Manage roles and permissions for {selectedUser}", {
+                selectedUser: selectedUser?.name,
+              })}
+            </DialogDescription>
+            <div className="space-y-6">
+              <div>
+                <p className="text-[10px] font-black uppercase text-muted-foreground tracking-widest mb-3">
+                  {t("User Roles")}
+                </p>
+                <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
+                  {roles.map((role) => {
+                    const hasIt = userRbacData.roles.some(
+                      (ur) => ur.id === role.id,
+                    );
+                    return (
+                      <Button
+                        key={role.id}
+                        variant={hasIt ? "default" : "outline"}
+                        size="sm"
+                        className="justify-start gap-2 h-auto py-2 px-3 overflow-hidden"
+                        onClick={() => toggleRoleForUser(role.id, hasIt)}
+                      >
+                        <Icon
+                          icon={
+                            hasIt
+                              ? "solar:check-circle-bold"
+                              : "solar:circle-linear"
+                          }
+                          className={
+                            hasIt
+                              ? "text-primary-foreground"
+                              : "text-muted-foreground"
+                          }
+                        />
+                        <span className="truncate text-xs">{role.name}</span>
+                      </Button>
+                    );
+                  })}
+                </div>
+              </div>
+
+              <div>
+                <p className="text-[10px] font-black uppercase text-muted-foreground tracking-widest mb-3">
+                  {t("Direct Permissions (User-specific)")}
+                </p>
+                <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
+                  {permissions.map((perm) => {
+                    // Check if permission is directly assigned to user
+                    // We need directPermissions from the action
+                    const isDirect = userRbacData.directPermissions.some(
+                      (up) => up.id === perm.id,
+                    );
+                    return (
+                      <Button
+                        key={perm.id}
+                        variant={isDirect ? "default" : "outline"}
+                        size="sm"
+                        className="justify-start gap-2 h-auto py-2 px-3 overflow-hidden"
+                        onClick={() =>
+                          togglePermissionForUser(perm.id, isDirect)
+                        }
+                      >
+                        <Icon
+                          icon={
+                            isDirect
+                              ? "solar:check-circle-bold"
+                              : "solar:circle-linear"
+                          }
+                          className={
+                            isDirect
+                              ? "text-primary-foreground"
+                              : "text-muted-foreground"
+                          }
+                        />
+                        <span className="truncate text-xs">{perm.name}</span>
+                      </Button>
+                    );
+                  })}
+                </div>
+              </div>
+
+              <div className="pt-4 border-t">
+                <p className="text-[10px] font-black uppercase text-muted-foreground tracking-widest mb-2">
+                  {t("Effective Permissions (inherited + direct)")}
+                </p>
+                <div className="flex flex-wrap gap-1">
+                  {userRbacData.effectivePermissions.map((p) => (
+                    <div
+                      key={p.id}
+                      className="bg-muted px-2 py-0.5 rounded text-[9px] font-mono"
+                    >
+                      {p.name}
+                    </div>
+                  ))}
+                  {userRbacData.effectivePermissions.length === 0 && (
+                    <span className="text-[10px] italic">
+                      {t("No permissions")}
+                    </span>
+                  )}
+                </div>
+              </div>
+            </div>
+          </DialogHeader>
+        </DialogContent>
+      </Dialog>
+
+      {loading && (
+        <div className="fixed inset-0 bg-background/50 backdrop-blur-sm flex items-center justify-center z-50">
+          <Icon
+            icon="svg-spinners:18-dots-indicator"
+            className="size-12 text-primary"
+          />
+        </div>
+      )}
+    </div>
+  );
+}