rl-core-front 0.1.0

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

@@ -0,0 +1,243 @@
+"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 {
+  Badge,
+  Button,
+  DataTable,
+  DataTableFeatures,
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogForm,
+  DialogHeader,
+  DialogTitle,
+  Field,
+  Input,
+  RowActions,
+} from "#core/components/ui";
+import { useAuth, useI18n } from "#core/contexts";
+import { RbacCatalogItem } from "#core/features/rbac/services/rbac.service";
+import { useConfirm } from "#core/hooks/use-confirm";
+import { RequestOperation, useRequest } from "#core/hooks/use-request";
+
+interface CatalogPanelProps {
+  /** Nome do resource RBAC (ex.: 'resources', 'actions', 'scopes') — usado nos codes de permissão. */
+  resource: string;
+  storageKey: string;
+  namePlaceholder: string;
+  list: () => Promise<RbacCatalogItem[]>;
+  create: (data: {
+    name: string;
+    description?: string;
+  }) => Promise<RbacCatalogItem>;
+  update: (
+    id: string,
+    data: { name?: string; description?: string },
+  ) => Promise<RbacCatalogItem>;
+  remove: (id: string) => Promise<unknown>;
+}
+
+/**
+ * Painel genérico de CRUD simples (name + description) — reaproveitado por
+ * Resources, Actions e Scopes do catálogo RBAC, que têm a mesma forma.
+ */
+export function CatalogPanel({
+  resource,
+  storageKey,
+  namePlaceholder,
+  list,
+  create,
+  update,
+  remove,
+}: CatalogPanelProps): JSX.Element {
+  const { run, loading } = useRequest();
+  const { t } = useI18n();
+  const { confirm, confirmDialog } = useConfirm();
+  const { hasPermission } = useAuth();
+  const [rows, setRows] = useState<RbacCatalogItem[]>([]);
+  const [open, setOpen] = useState(false);
+  const [editing, setEditing] = useState<RbacCatalogItem | null>(null);
+  const [form, setForm] = useState({ name: "", description: "" });
+
+  const load = async (): Promise<void> => {
+    const r = await run(() => list());
+    if (r) {setRows(r);}
+  };
+  useEffect(() => {
+    void load();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const openNew = (): void => {
+    setEditing(null);
+    setForm({ name: "", description: "" });
+    setOpen(true);
+  };
+  const openEdit = (item: RbacCatalogItem): void => {
+    setEditing(item);
+    setForm({ name: item.name, description: item.description ?? "" });
+    setOpen(true);
+  };
+
+  const save = async (): Promise<void> => {
+    const res = editing
+      ? await run(() => update(editing.id, form), {
+          success: RequestOperation.Update,
+        })
+      : await run(() => create(form), { success: RequestOperation.Create });
+    if (res) {
+      setOpen(false);
+      await load();
+    }
+  };
+
+  const removeItem = async (item: RbacCatalogItem): Promise<void> => {
+    const ok = await confirm({
+      title: t("common.delete"),
+      description: item.name,
+      confirmLabel: t("common.delete"),
+      destructive: true,
+    });
+    if (!ok) {
+      return;
+    }
+    const res = await run(() => remove(item.id), {
+      success: RequestOperation.Delete,
+    });
+    if (res !== null) {
+      await load();
+    }
+  };
+
+  const canUpdate = hasPermission(`${resource}:update:any`);
+  const canDelete = hasPermission(`${resource}:delete:any`);
+  const canCreate = hasPermission(`${resource}:create:any`);
+  const canManage = canUpdate || canDelete;
+
+  const columns = useMemo<
+    ColumnDef<DataTableFeatures, RbacCatalogItem, unknown>[]
+  >(() => {
+    const cols: ColumnDef<DataTableFeatures, RbacCatalogItem, unknown>[] = [
+      {
+        accessorKey: "name",
+        header: "Name",
+        meta: { label: "Name" },
+        cell: ({ getValue }) => (
+          <span className="font-mono text-xs">{String(getValue())}</span>
+        ),
+      },
+      {
+        accessorKey: "description",
+        header: "Descrição",
+        meta: { label: "Descrição" },
+      },
+      {
+        accessorKey: "isActive",
+        header: t("users.active"),
+        meta: { label: t("users.active") },
+        cell: ({ row }) => (
+          <Badge variant={row.original.isActive ? "success" : "secondary"}>
+            {row.original.isActive ? t("users.active") : t("users.inactive")}
+          </Badge>
+        ),
+      },
+    ];
+    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>
+            {canUpdate && (
+              <Button
+                variant="ghost"
+                size="iconSm"
+                onClick={() => openEdit(row.original)}
+              >
+                <Pencil className="h-4 w-4" />
+              </Button>
+            )}
+            {canDelete && (
+              <Button
+                variant="ghost"
+                size="iconSm"
+                className="text-destructive"
+                onClick={() => removeItem(row.original)}
+              >
+                <Trash2 className="h-4 w-4" />
+              </Button>
+            )}
+          </RowActions>
+        ),
+      });
+    }
+    return cols;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [canManage, canUpdate, canDelete, t]);
+
+  return (
+    <div>
+      <DataTable
+        columns={columns}
+        data={rows}
+        getRowId={(r) => r.id}
+        storageKey={storageKey}
+        loading={loading}
+        pageSizeOptions={[20, 50]}
+        toolbar={
+          canCreate && (
+            <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="Name">
+              <Input
+                placeholder={namePlaceholder}
+                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>
+            <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/groups-panel.tsx

@@ -0,0 +1,269 @@
+"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,
+  Checkbox,
+  DataTable,
+  DataTableFeatures,
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogForm,
+  DialogHeader,
+  DialogTitle,
+  Field,
+  Input,
+  Label,
+  RowActions,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "#core/components/ui";
+import { useAuth, useI18n } from "#core/contexts";
+import {
+  Group,
+  rbacService,
+  Role,
+} from "#core/features/rbac/services/rbac.service";
+import { useConfirm } from "#core/hooks/use-confirm";
+import { RequestOperation, useRequest } from "#core/hooks/use-request";
+
+const TYPES = ["company", "department", "team"];
+
+export function GroupsPanel(): JSX.Element {
+  const { run, loading } = useRequest();
+  const { t } = useI18n();
+  const { confirm, confirmDialog } = useConfirm();
+  const { hasPermission } = useAuth();
+  const [rows, setRows] = useState<Group[]>([]);
+  const [roles, setRoles] = useState<Role[]>([]);
+  const [open, setOpen] = useState(false);
+  const [editing, setEditing] = useState<Group | null>(null);
+  const [form, setForm] = useState({
+    name: "",
+    description: "",
+    type: "team",
+    roleIds: [] as string[],
+  });
+
+  const load = async (): Promise<void> => {
+    const [g, r] = await Promise.all([
+      run(() => rbacService.listGroups()),
+      run(() => rbacService.listRoles()),
+    ]);
+    if (g) {setRows(g);}
+    if (r) {setRoles(r);}
+  };
+  useEffect(() => {
+    void load();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const openNew = (): void => {
+    setEditing(null);
+    setForm({ name: "", description: "", type: "team", roleIds: [] });
+    setOpen(true);
+  };
+  const openEdit = (g: Group): void => {
+    setEditing(g);
+    setForm({
+      name: g.name,
+      description: g.description ?? "",
+      type: g.type,
+      roleIds: g.roles?.map((r) => r.id) ?? [],
+    });
+    setOpen(true);
+  };
+
+  const save = async (): Promise<void> => {
+    const res = editing
+      ? await run(() => rbacService.updateGroup(editing.id, form), {
+          success: RequestOperation.Update,
+        })
+      : await run(() => rbacService.createGroup(form), {
+          success: RequestOperation.Create,
+        });
+    if (res) {
+      setOpen(false);
+      await load();
+    }
+  };
+
+  const remove = async (g: Group): Promise<void> => {
+    const ok = await confirm({
+      title: t("common.delete"),
+      description: g.name,
+      confirmLabel: t("common.delete"),
+      destructive: true,
+    });
+    if (!ok) {
+      return;
+    }
+    const res = await run(() => rbacService.deleteGroup(g.id), {
+      success: RequestOperation.Delete,
+    });
+    if (res !== null) {
+      await load();
+    }
+  };
+
+  const canManage =
+    hasPermission("groups:update:any") || hasPermission("groups:delete:any");
+  const toggleRole = (id: string): void =>
+    setForm((f) => ({
+      ...f,
+      roleIds: f.roleIds.includes(id)
+        ? f.roleIds.filter((x) => x !== id)
+        : [...f.roleIds, id],
+    }));
+
+  const columns = useMemo<
+    ColumnDef<DataTableFeatures, Group, unknown>[]
+  >(() => {
+    const cols: ColumnDef<DataTableFeatures, Group, unknown>[] = [
+      {
+        accessorKey: "name",
+        header: t("users.name"),
+        meta: { label: t("users.name") },
+      },
+      { accessorKey: "type", header: "Tipo", meta: { label: "Tipo" } },
+      {
+        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("groups:update:any") && (
+              <Button
+                variant="ghost"
+                size="iconSm"
+                onClick={() => openEdit(row.original)}
+              >
+                <Pencil className="h-4 w-4" />
+              </Button>
+            )}
+            {hasPermission("groups: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
+  }, [t, canManage]);
+
+  return (
+    <div>
+      <DataTable
+        columns={columns}
+        data={rows}
+        getRowId={(r) => r.id}
+        storageKey="rbac-groups"
+        loading={loading}
+        pageSizeOptions={[20, 50]}
+        toolbar={
+          hasPermission("groups: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-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>
+            <Field label="Tipo">
+              <Select
+                value={form.type}
+                onValueChange={(v) => setForm({ ...form, type: v })}
+              >
+                <SelectTrigger>
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {TYPES.map((ty) => (
+                    <SelectItem key={ty} value={ty}>
+                      {ty}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </Field>
+            <div className="space-y-2">
+              <Label>Papéis</Label>
+              <div className="flex max-h-48 flex-col gap-2 overflow-y-auto rounded-md border border-border p-3">
+                {roles.map((r) => (
+                  <label
+                    key={r.id}
+                    className="flex cursor-pointer items-center gap-2 text-sm"
+                  >
+                    <Checkbox
+                      checked={form.roleIds.includes(r.id)}
+                      onCheckedChange={() => toggleRole(r.id)}
+                    />
+                    {r.name}
+                  </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/index.ts

@@ -0,0 +1,8 @@
+// Barrel da pasta — importe daqui de fora; dentro da pasta use o caminho direto.
+export * from "./actions-panel";
+export * from "./catalog-panel";
+export * from "./groups-panel";
+export * from "./permissions-panel";
+export * from "./resources-panel";
+export * from "./roles-panel";
+export * from "./scopes-panel";