rl-core-front 0.1.0

package/src/features/rbac/panels/permissions-panel.tsx

@@ -0,0 +1,204 @@
+"use client";
+
+import type { ColumnDef } from "@tanstack/react-table";
+import { Pencil, Plus, Trash2 } from "lucide-react";
+import type { JSX } from "react";
+import { useEffect, useMemo, useState } from "react";
+
+import {
+  Button,
+  DataTable,
+  DataTableFeatures,
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogForm,
+  DialogHeader,
+  DialogTitle,
+  Field,
+  Input,
+  RowActions,
+} from "#core/components/ui";
+import { useAuth, useI18n } from "#core/contexts";
+import { Permission, rbacService } from "#core/features/rbac/services/rbac.service";
+import { useConfirm } from "#core/hooks/use-confirm";
+import { RequestOperation, useRequest } from "#core/hooks/use-request";
+
+export function PermissionsPanel(): JSX.Element {
+  const { run, loading } = useRequest();
+  const { t } = useI18n();
+  const { confirm, confirmDialog } = useConfirm();
+  const { hasPermission } = useAuth();
+  const [rows, setRows] = useState<Permission[]>([]);
+  const [open, setOpen] = useState(false);
+  const [editing, setEditing] = useState<Permission | null>(null);
+  const [form, setForm] = useState({ code: "", description: "" });
+
+  const load = async (): Promise<void> => {
+    const r = await run(() => rbacService.listPermissions());
+    if (r) {setRows(r);}
+  };
+  useEffect(() => {
+    void load();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const openNew = (): void => {
+    setEditing(null);
+    setForm({ code: "", description: "" });
+    setOpen(true);
+  };
+  const openEdit = (p: Permission): void => {
+    setEditing(p);
+    setForm({ code: p.code, description: p.description ?? "" });
+    setOpen(true);
+  };
+
+  const save = async (): Promise<void> => {
+    const res = editing
+      ? await run(() => rbacService.updatePermission(editing.id, form), {
+          success: RequestOperation.Update,
+        })
+      : await run(() => rbacService.createPermission(form), {
+          success: RequestOperation.Create,
+        });
+    if (res) {
+      setOpen(false);
+      await load();
+    }
+  };
+
+  const remove = async (p: Permission): Promise<void> => {
+    const ok = await confirm({
+      title: t("common.delete"),
+      description: p.code,
+      confirmLabel: t("common.delete"),
+      destructive: true,
+    });
+    if (!ok) {
+      return;
+    }
+    const res = await run(() => rbacService.deletePermission(p.id), {
+      success: RequestOperation.Delete,
+    });
+    if (res !== null) {
+      await load();
+    }
+  };
+
+  const canManage =
+    hasPermission("permissions:update:any") ||
+    hasPermission("permissions:delete:any");
+
+  const columns = useMemo<
+    ColumnDef<DataTableFeatures, Permission, unknown>[]
+  >(() => {
+    const cols: ColumnDef<DataTableFeatures, Permission, unknown>[] = [
+      {
+        accessorKey: "code",
+        header: "Code",
+        meta: { label: "Code" },
+        cell: ({ getValue }) => (
+          <span className="font-mono text-xs">{String(getValue())}</span>
+        ),
+      },
+      {
+        accessorKey: "description",
+        header: "Descrição",
+        meta: { label: "Descrição" },
+      },
+    ];
+    if (canManage) {
+      cols.push({
+        id: "actions",
+        header: () => <div className="text-center">{t("common.actions")}</div>,
+        meta: { shrink: true },
+        enableHiding: false,
+        enableSorting: false,
+        cell: ({ row }) => (
+          <RowActions>
+            {hasPermission("permissions:update:any") && (
+              <Button
+                variant="ghost"
+                size="iconSm"
+                onClick={() => openEdit(row.original)}
+              >
+                <Pencil className="h-4 w-4" />
+              </Button>
+            )}
+            {hasPermission("permissions:delete:any") && (
+              <Button
+                variant="ghost"
+                size="iconSm"
+                className="text-destructive"
+                onClick={() => remove(row.original)}
+              >
+                <Trash2 className="h-4 w-4" />
+              </Button>
+            )}
+          </RowActions>
+        ),
+      });
+    }
+    return cols;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [canManage]);
+
+  return (
+    <div>
+      <DataTable
+        columns={columns}
+        data={rows}
+        getRowId={(r) => r.id}
+        storageKey="rbac-permissions"
+        loading={loading}
+        pageSizeOptions={[20, 50]}
+        toolbar={
+          hasPermission("permissions:create:any") && (
+            <Button onClick={openNew}>
+              <Plus className="h-4 w-4" />
+              {t("common.create")}
+            </Button>
+          )
+        }
+      />
+
+      <Dialog open={open} onOpenChange={(o) => !o && setOpen(false)}>
+        <DialogContent className="max-w-md">
+          <DialogHeader>
+            <DialogTitle>
+              {editing ? t("common.edit") : t("common.create")}
+            </DialogTitle>
+          </DialogHeader>
+          <DialogForm onSubmit={() => void save()}>
+            <Field label="Code (resource:action:scope)">
+              <Input
+                placeholder="users:read:any"
+                value={form.code}
+                onChange={(e) => setForm({ ...form, code: e.target.value })}
+              />
+            </Field>
+            <Field label="Descrição">
+              <Input
+                value={form.description}
+                onChange={(e) =>
+                  setForm({ ...form, description: e.target.value })
+                }
+              />
+            </Field>
+            <DialogFooter className="gap-2">
+              <Button type="button" variant="outline" onClick={() => setOpen(false)}>
+                {t("common.cancel")}
+              </Button>
+              <Button type="submit" disabled={loading}>
+                {t("common.save")}
+              </Button>
+            </DialogFooter>
+          </DialogForm>
+        </DialogContent>
+      </Dialog>
+
+      {confirmDialog}
+    </div>
+  );
+}

package/src/features/rbac/panels/resources-panel.tsx

@@ -0,0 +1,20 @@
+"use client";
+
+import type { JSX } from "react";
+
+import { CatalogPanel } from "#core/features/rbac/panels/catalog-panel";
+import { rbacService } from "#core/features/rbac/services/rbac.service";
+
+export function ResourcesPanel(): JSX.Element {
+  return (
+    <CatalogPanel
+      resource="resources"
+      storageKey="rbac-resources"
+      namePlaceholder="users"
+      list={rbacService.listResources}
+      create={rbacService.createResource}
+      update={rbacService.updateResource}
+      remove={rbacService.deleteResource}
+    />
+  );
+}

package/src/features/rbac/panels/roles-panel.tsx

@@ -0,0 +1,224 @@
+"use client";
+
+import { Pencil, Plus, Trash2 } from "lucide-react";
+import type { JSX } from "react";
+import { useEffect, useState } from "react";
+
+import {
+  Badge,
+  Button,
+  Card,
+  CardContent,
+  Checkbox,
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogForm,
+  DialogHeader,
+  DialogTitle,
+  Field,
+  Input,
+  Label,
+} from "#core/components/ui";
+import { useAuth, useI18n } from "#core/contexts";
+import {
+  Permission,
+  rbacService,
+  Role,
+} from "#core/features/rbac/services/rbac.service";
+import { useConfirm } from "#core/hooks/use-confirm";
+import { RequestOperation, useRequest } from "#core/hooks/use-request";
+
+export function RolesPanel(): JSX.Element {
+  const { run, loading } = useRequest();
+  const { t } = useI18n();
+  const { confirm, confirmDialog } = useConfirm();
+  const { hasPermission } = useAuth();
+  const [roles, setRoles] = useState<Role[]>([]);
+  const [perms, setPerms] = useState<Permission[]>([]);
+  const [open, setOpen] = useState(false);
+  const [editing, setEditing] = useState<Role | null>(null);
+  const [form, setForm] = useState({
+    name: "",
+    description: "",
+    permissionIds: [] as string[],
+  });
+
+  const load = async (): Promise<void> => {
+    const [r, p] = await Promise.all([
+      run(() => rbacService.listRoles()),
+      run(() => rbacService.listPermissions()),
+    ]);
+    if (r) {setRoles(r);}
+    if (p) {setPerms(p);}
+  };
+  useEffect(() => {
+    void load();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const openNew = (): void => {
+    setEditing(null);
+    setForm({ name: "", description: "", permissionIds: [] });
+    setOpen(true);
+  };
+  const openEdit = (role: Role): void => {
+    setEditing(role);
+    setForm({
+      name: role.name,
+      description: role.description ?? "",
+      permissionIds: role.permissions.map((p) => p.id),
+    });
+    setOpen(true);
+  };
+
+  const save = async (): Promise<void> => {
+    const res = editing
+      ? await run(() => rbacService.updateRole(editing.id, form), {
+          success: RequestOperation.Update,
+        })
+      : await run(() => rbacService.createRole(form), {
+          success: RequestOperation.Create,
+        });
+    if (res) {
+      setOpen(false);
+      await load();
+    }
+  };
+
+  const remove = async (role: Role): Promise<void> => {
+    const ok = await confirm({
+      title: t("common.delete"),
+      description: role.name,
+      confirmLabel: t("common.delete"),
+      destructive: true,
+    });
+    if (!ok) {
+      return;
+    }
+    const res = await run(() => rbacService.deleteRole(role.id), {
+      success: RequestOperation.Delete,
+    });
+    if (res !== null) {
+      await load();
+    }
+  };
+
+  const canManage =
+    hasPermission("roles:update:any") || hasPermission("roles:delete:any");
+  const togglePerm = (id: string): void =>
+    setForm((f) => ({
+      ...f,
+      permissionIds: f.permissionIds.includes(id)
+        ? f.permissionIds.filter((x) => x !== id)
+        : [...f.permissionIds, id],
+    }));
+
+  return (
+    <div>
+      {hasPermission("roles:create:any") && (
+        <Button className="mb-4" onClick={openNew}>
+          <Plus className="h-4 w-4" />
+          {t("common.create")}
+        </Button>
+      )}
+      <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+        {roles.map((role) => (
+          <Card key={role.id}>
+            <CardContent className="pt-6">
+              <div className="flex items-start justify-between">
+                <h3 className="text-lg font-semibold">{role.name}</h3>
+                {canManage && (
+                  <div className="flex">
+                    {hasPermission("roles:update:any") && (
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                        onClick={() => openEdit(role)}
+                      >
+                        <Pencil className="h-4 w-4" />
+                      </Button>
+                    )}
+                    {hasPermission("roles:delete:any") && (
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                        className="text-destructive"
+                        onClick={() => remove(role)}
+                      >
+                        <Trash2 className="h-4 w-4" />
+                      </Button>
+                    )}
+                  </div>
+                )}
+              </div>
+              <p className="mb-2 text-sm text-muted-foreground">
+                {role.description}
+              </p>
+              <div className="flex flex-wrap gap-1">
+                {role.permissions.map((p) => (
+                  <Badge key={p.id} variant="outline">
+                    {p.code}
+                  </Badge>
+                ))}
+              </div>
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+
+      <Dialog open={open} onOpenChange={(o) => !o && setOpen(false)}>
+        <DialogContent className="max-w-lg">
+          <DialogHeader>
+            <DialogTitle>
+              {editing ? t("common.edit") : t("common.create")}
+            </DialogTitle>
+          </DialogHeader>
+          <DialogForm onSubmit={() => void save()}>
+            <Field label={t("users.name")}>
+              <Input
+                value={form.name}
+                onChange={(e) => setForm({ ...form, name: e.target.value })}
+              />
+            </Field>
+            <Field label="Descrição">
+              <Input
+                value={form.description}
+                onChange={(e) =>
+                  setForm({ ...form, description: e.target.value })
+                }
+              />
+            </Field>
+            <div className="space-y-2">
+              <Label>{t("dashboard.permissions")}</Label>
+              <div className="flex max-h-60 flex-col gap-2 overflow-y-auto rounded-md border border-border p-3">
+                {perms.map((p) => (
+                  <label
+                    key={p.id}
+                    className="flex cursor-pointer items-center gap-2 text-sm"
+                  >
+                    <Checkbox
+                      checked={form.permissionIds.includes(p.id)}
+                      onCheckedChange={() => togglePerm(p.id)}
+                    />
+                    {p.code}
+                  </label>
+                ))}
+              </div>
+            </div>
+            <DialogFooter className="gap-2">
+              <Button type="button" variant="outline" onClick={() => setOpen(false)}>
+                {t("common.cancel")}
+              </Button>
+              <Button type="submit" disabled={loading}>
+                {t("common.save")}
+              </Button>
+            </DialogFooter>
+          </DialogForm>
+        </DialogContent>
+      </Dialog>
+
+      {confirmDialog}
+    </div>
+  );
+}

package/src/features/rbac/panels/scopes-panel.tsx

@@ -0,0 +1,20 @@
+"use client";
+
+import type { JSX } from "react";
+
+import { CatalogPanel } from "#core/features/rbac/panels/catalog-panel";
+import { rbacService } from "#core/features/rbac/services/rbac.service";
+
+export function ScopesPanel(): JSX.Element {
+  return (
+    <CatalogPanel
+      resource="scopes"
+      storageKey="rbac-scopes"
+      namePlaceholder="own"
+      list={rbacService.listScopes}
+      create={rbacService.createScope}
+      update={rbacService.updateScope}
+      remove={rbacService.deleteScope}
+    />
+  );
+}

package/src/features/rbac/rbac-screen.tsx

@@ -0,0 +1,80 @@
+"use client";
+
+import type { JSX } from "react";
+
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "#core/components/ui";
+import { useAuth, useI18n } from "#core/contexts";
+import {
+  ActionsPanel,
+  GroupsPanel,
+  PermissionsPanel,
+  ResourcesPanel,
+  RolesPanel,
+  ScopesPanel,
+} from "#core/features/rbac/panels";
+
+export function RbacScreen(): JSX.Element {
+  const { t } = useI18n();
+  const { hasPermission } = useAuth();
+
+  const tabs = [
+    {
+      value: "roles",
+      label: "Papéis",
+      perm: "roles:read:any",
+      panel: <RolesPanel />,
+    },
+    {
+      value: "permissions",
+      label: t("dashboard.permissions"),
+      perm: "permissions:read:any",
+      panel: <PermissionsPanel />,
+    },
+    {
+      value: "groups",
+      label: "Grupos",
+      perm: "groups:read:any",
+      panel: <GroupsPanel />,
+    },
+    {
+      value: "resources",
+      label: "Resources",
+      perm: "resources:read:any",
+      panel: <ResourcesPanel />,
+    },
+    {
+      value: "actions",
+      label: "Actions",
+      perm: "actions:read:any",
+      panel: <ActionsPanel />,
+    },
+    {
+      value: "scopes",
+      label: "Scopes",
+      perm: "scopes:read:any",
+      panel: <ScopesPanel />,
+    },
+  ].filter((x) => hasPermission(x.perm));
+
+  return (
+    <div>
+      <h1 className="mb-4 text-3xl font-bold">{t("rbac.title")}</h1>
+      {tabs.length > 0 && (
+        <Tabs defaultValue={tabs[0].value}>
+          <TabsList>
+            {tabs.map((x) => (
+              <TabsTrigger key={x.value} value={x.value}>
+                {x.label}
+              </TabsTrigger>
+            ))}
+          </TabsList>
+          {tabs.map((x) => (
+            <TabsContent key={x.value} value={x.value}>
+              {x.panel}
+            </TabsContent>
+          ))}
+        </Tabs>
+      )}
+    </div>
+  );
+}

package/src/features/rbac/services/rbac.service.ts

@@ -0,0 +1,110 @@
+import { api } from "#core/_services/api/axios.factory";
+
+export interface Permission {
+  id: string;
+  code: string;
+  description?: string | null;
+  isActive: boolean;
+}
+export interface Role {
+  id: string;
+  name: string;
+  description?: string | null;
+  isActive: boolean;
+  permissions: Permission[];
+}
+export interface Group {
+  id: string;
+  name: string;
+  description?: string | null;
+  type: string;
+  isActive: boolean;
+  roles?: Role[];
+}
+export interface RbacCatalogItem {
+  id: string;
+  name: string;
+  description?: string | null;
+  isActive: boolean;
+}
+
+export const rbacService = {
+  // Roles
+  listRoles: () => api.get<Role[]>("/rbac/roles").then((r) => r.data),
+  createRole: (data: {
+    name: string;
+    description?: string;
+    permissionIds?: string[];
+  }) => api.post<Role>("/rbac/roles", data).then((r) => r.data),
+  updateRole: (
+    id: string,
+    data: { name?: string; description?: string; permissionIds?: string[] },
+  ) => api.patch<Role>(`/rbac/roles/${id}`, data).then((r) => r.data),
+  deleteRole: (id: string) =>
+    api.delete(`/rbac/roles/${id}`).then((r) => r.data),
+
+  // Permissions
+  listPermissions: () =>
+    api.get<Permission[]>("/rbac/permissions").then((r) => r.data),
+  createPermission: (data: { code: string; description?: string }) =>
+    api.post<Permission>("/rbac/permissions", data).then((r) => r.data),
+  updatePermission: (
+    id: string,
+    data: { code?: string; description?: string },
+  ) =>
+    api.patch<Permission>(`/rbac/permissions/${id}`, data).then((r) => r.data),
+  deletePermission: (id: string) =>
+    api.delete(`/rbac/permissions/${id}`).then((r) => r.data),
+
+  // Groups
+  listGroups: () => api.get<Group[]>("/rbac/groups").then((r) => r.data),
+  createGroup: (data: {
+    name: string;
+    description?: string;
+    type?: string;
+    roleIds?: string[];
+  }) => api.post<Group>("/rbac/groups", data).then((r) => r.data),
+  updateGroup: (
+    id: string,
+    data: {
+      name?: string;
+      description?: string;
+      type?: string;
+      roleIds?: string[];
+    },
+  ) => api.patch<Group>(`/rbac/groups/${id}`, data).then((r) => r.data),
+  deleteGroup: (id: string) =>
+    api.delete(`/rbac/groups/${id}`).then((r) => r.data),
+
+  // Resources
+  listResources: () =>
+    api.get<RbacCatalogItem[]>("/rbac/resources").then((r) => r.data),
+  createResource: (data: { name: string; description?: string }) =>
+    api.post<RbacCatalogItem>("/rbac/resources", data).then((r) => r.data),
+  updateResource: (id: string, data: { name?: string; description?: string }) =>
+    api
+      .patch<RbacCatalogItem>(`/rbac/resources/${id}`, data)
+      .then((r) => r.data),
+  deleteResource: (id: string) =>
+    api.delete(`/rbac/resources/${id}`).then((r) => r.data),
+
+  // Actions
+  listActions: () =>
+    api.get<RbacCatalogItem[]>("/rbac/actions").then((r) => r.data),
+  createAction: (data: { name: string; description?: string }) =>
+    api.post<RbacCatalogItem>("/rbac/actions", data).then((r) => r.data),
+  updateAction: (id: string, data: { name?: string; description?: string }) =>
+    api.patch<RbacCatalogItem>(`/rbac/actions/${id}`, data).then((r) => r.data),
+  deleteAction: (id: string) =>
+    api.delete(`/rbac/actions/${id}`).then((r) => r.data),
+
+  // Scopes
+  listScopes: () =>
+    api.get<RbacCatalogItem[]>("/rbac/scopes").then((r) => r.data),
+  createScope: (data: { name: string; description?: string }) =>
+    api.post<RbacCatalogItem>("/rbac/scopes", data).then((r) => r.data),
+  updateScope: (id: string, data: { name?: string; description?: string }) =>
+    api.patch<RbacCatalogItem>(`/rbac/scopes/${id}`, data).then((r) => r.data),
+  deleteScope: (id: string) =>
+    api.delete(`/rbac/scopes/${id}`).then((r) => r.data),
+};