rl-core-front 0.6.0 → 0.8.0

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

@@ -0,0 +1,264 @@
+"use client";
+
+import type {
+  ColumnDef,
+  OnChangeFn,
+  PaginationState,
+} from "@tanstack/react-table";
+import { RotateCcw, Trash2 } from "lucide-react";
+import type { JSX } from "react";
+import { useMemo } from "react";
+
+import {
+  Badge,
+  Button,
+  Card,
+  DataTable,
+  DataTableFeatures,
+  RowActions,
+  SegmentedControl,
+  SegmentedOption,
+} from "#core/components/ui";
+import { useAuth, useI18n } from "#core/contexts";
+import { useQueueJobs } from "#core/features/queues/hooks/use-queue-jobs";
+import {
+  QueueJob,
+  QueueJobState,
+} from "#core/features/queues/services/queues.service";
+import { useConfirm } from "#core/hooks/use-confirm";
+
+/** Rótulo de cada estado — a mesma chave serve à barra e aos cartões. */
+const STATE_LABEL: Record<QueueJobState, string> = {
+  [QueueJobState.WAITING]: "queues.stateWaiting",
+  [QueueJobState.ACTIVE]: "queues.stateActive",
+  [QueueJobState.COMPLETED]: "queues.stateCompleted",
+  [QueueJobState.FAILED]: "queues.stateFailed",
+  [QueueJobState.DELAYED]: "queues.stateDelayed",
+};
+
+const STATE_VARIANT: Record<
+  QueueJobState,
+  "secondary" | "warning" | "success" | "destructive"
+> = {
+  [QueueJobState.WAITING]: "secondary",
+  [QueueJobState.ACTIVE]: "warning",
+  [QueueJobState.COMPLETED]: "success",
+  [QueueJobState.FAILED]: "destructive",
+  [QueueJobState.DELAYED]: "secondary",
+};
+
+/**
+ * Fila de processamento — o que está rodando, o que falhou e o que fazer com
+ * isso.
+ *
+ * Substitui o painel do bull-board: aqui a tela mora no mesmo shell, com a
+ * mesma permissão e a mesma tradução do resto do sistema, em vez de um segundo
+ * frontend embutido no backend com autenticação própria.
+ */
+export function QueuesScreen(): JSX.Element {
+  const { t } = useI18n();
+  const { hasPermission } = useAuth();
+  const { confirm, confirmDialog } = useConfirm();
+  const queue = useQueueJobs();
+
+  const canManage = hasPermission("queues:manage:any");
+
+  const stateOptions = useMemo<SegmentedOption[]>(
+    () =>
+      Object.values(QueueJobState).map((value) => ({
+        value,
+        label: t(STATE_LABEL[value]),
+      })),
+    [t],
+  );
+
+  /** Remover é sem volta: some da fila e não há de onde reprocessar depois. */
+  const removeJob = async (id: string): Promise<void> => {
+    const confirmed = await confirm({
+      title: t("queues.removeTitle"),
+      description: t("queues.removeDescription"),
+      destructive: true,
+    });
+    if (confirmed) {
+      await queue.remove(id);
+    }
+  };
+
+  const columns = useMemo<ColumnDef<DataTableFeatures, QueueJob, unknown>[]>(
+    () => [
+      {
+        accessorKey: "name",
+        header: t("queues.job"),
+        meta: { label: t("queues.job") },
+        enableSorting: false,
+        cell: ({ row }) => (
+          <div className="flex flex-col">
+            <span className="font-medium">{row.original.name}</span>
+            <span className="font-mono text-xs text-muted-foreground">
+              #{row.original.id}
+            </span>
+          </div>
+        ),
+      },
+      {
+        accessorKey: "state",
+        header: t("queues.state"),
+        meta: { label: t("queues.state") },
+        enableSorting: false,
+        cell: ({ row }) => {
+          const state = row.original.state as QueueJobState;
+          return (
+            <Badge variant={STATE_VARIANT[state] ?? "secondary"}>
+              {t(STATE_LABEL[state] ?? "queues.stateWaiting")}
+            </Badge>
+          );
+        },
+      },
+      {
+        accessorKey: "percent",
+        header: t("queues.progress"),
+        meta: { label: t("queues.progress") },
+        enableSorting: false,
+        cell: ({ getValue }) => {
+          const percent = getValue() as number | null;
+          return percent == null ? "—" : `${percent}%`;
+        },
+      },
+      {
+        accessorKey: "attemptsMade",
+        header: t("queues.attempts"),
+        meta: { label: t("queues.attempts") },
+        enableSorting: false,
+      },
+      {
+        accessorKey: "createdAt",
+        header: t("queues.createdAt"),
+        meta: { label: t("queues.createdAt") },
+        enableSorting: false,
+        cell: ({ getValue }) => new Date(String(getValue())).toLocaleString(),
+      },
+      {
+        accessorKey: "failedReason",
+        header: t("queues.reason"),
+        meta: { label: t("queues.reason") },
+        enableSorting: false,
+        // Cru e por inteiro no `title`: quem lê esta tela é quem vai consertar
+        // a causa, e a mensagem truncada some justamente na parte útil.
+        cell: ({ getValue }) => {
+          const reason = getValue() as string | null;
+          return reason ? (
+            <span
+              className="line-clamp-2 max-w-md font-mono text-xs"
+              title={reason}
+            >
+              {reason}
+            </span>
+          ) : (
+            "—"
+          );
+        },
+      },
+      {
+        id: "actions",
+        header: () => <div className="text-center">{t("common.actions")}</div>,
+        meta: { shrink: true },
+        enableHiding: false,
+        enableSorting: false,
+        cell: ({ row }) =>
+          canManage ? (
+            <RowActions>
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={() => void queue.retry(row.original.id)}
+              >
+                <RotateCcw className="h-4 w-4" />
+                {t("queues.retry")}
+              </Button>
+              <Button
+                variant="ghost"
+                size="sm"
+                className="text-destructive"
+                onClick={() => void removeJob(row.original.id)}
+              >
+                <Trash2 className="h-4 w-4" />
+                {t("common.delete")}
+              </Button>
+            </RowActions>
+          ) : null,
+      },
+    ],
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [t, canManage, queue],
+  );
+
+  const pagination: PaginationState = {
+    pageIndex: queue.page,
+    pageSize: queue.pageSize,
+  };
+  const onPaginationChange: OnChangeFn<PaginationState> = (updater) => {
+    const next = typeof updater === "function" ? updater(pagination) : updater;
+    if (next.pageSize !== queue.pageSize) {
+      queue.setPageSize(next.pageSize);
+      queue.setPage(0);
+    } else if (next.pageIndex !== queue.page) {
+      queue.setPage(next.pageIndex);
+    }
+  };
+
+  return (
+    <div>
+      <h1 className="mb-1 text-3xl font-bold">{t("queues.title")}</h1>
+      <p className="mb-4 text-sm text-muted-foreground">
+        {t("queues.subtitle")}
+      </p>
+
+      {/* Os cartões são o resumo E o atalho: clicar troca o estado listado —
+          ver "3 falhos" e não poder abri-los seria uma informação morta. */}
+      <div className="mb-4 grid grid-cols-2 gap-3 sm:grid-cols-5">
+        {Object.values(QueueJobState).map((state) => (
+          <Card
+            key={state}
+            role="button"
+            tabIndex={0}
+            onClick={() => queue.setState(state)}
+            className={`cursor-pointer p-3 transition-colors hover:bg-accent ${
+              queue.state === state ? "border-primary" : ""
+            }`}
+          >
+            <p className="text-xs text-muted-foreground">
+              {t(STATE_LABEL[state])}
+            </p>
+            <p className="text-2xl font-bold tabular-nums">
+              {queue.counts[state]}
+            </p>
+          </Card>
+        ))}
+      </div>
+
+      <DataTable
+        columns={columns}
+        data={queue.rows}
+        getRowId={(r) => r.id}
+        storageKey="queues-jobs"
+        loading={queue.loading}
+        manualPagination
+        rowCount={queue.total}
+        pagination={pagination}
+        onPaginationChange={onPaginationChange}
+        enableSorting={false}
+        emptyMessage={t("queues.empty")}
+        toolbar={
+          <SegmentedControl
+            value={queue.state}
+            onValueChange={(value) => queue.setState(value as QueueJobState)}
+            options={stateOptions}
+            label={t("queues.state")}
+          />
+        }
+      />
+
+      {confirmDialog}
+    </div>
+  );
+}

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

@@ -0,0 +1,57 @@
+import { api } from "#core/_services/api/axios.factory";
+import type { components } from "#core/_services/api/schema";
+
+/** Tipos derivados do `openapi.json` (§5) — não redigitar a forma da resposta. */
+export type QueueJob = components["schemas"]["QueueJobResponse"];
+export type QueueCounts = components["schemas"]["QueueCountsResponse"];
+
+export interface Paginated<T> {
+  items: T[];
+  meta: components["schemas"]["PaginationMetaResponse"];
+}
+
+/**
+ * Estados que a tela lista.
+ *
+ * Espelha o `LISTABLE_STATES` do backend. `paused` não está aqui porque é
+ * estado da fila inteira, não de um job.
+ */
+export enum QueueJobState {
+  WAITING = "waiting",
+  ACTIVE = "active",
+  COMPLETED = "completed",
+  FAILED = "failed",
+  DELAYED = "delayed",
+}
+
+export interface QueueJobsQuery {
+  state: QueueJobState;
+  page: number;
+  limit: number;
+}
+
+export const queuesService = {
+  counts(): Promise<QueueCounts> {
+    return api.get<QueueCounts>("/queues/counts").then((r) => r.data);
+  },
+
+  /**
+   * Uma página de jobs de **um** estado.
+   *
+   * O estado é obrigatório: no Redis cada estado é uma estrutura própria, e
+   * "todos" não é uma consulta que exista.
+   */
+  list(query: QueueJobsQuery): Promise<Paginated<QueueJob>> {
+    return api
+      .get<Paginated<QueueJob>>("/queues/jobs", { params: query })
+      .then((r) => r.data);
+  },
+
+  retry(id: string): Promise<void> {
+    return api.post(`/queues/jobs/${id}/retry`).then(() => undefined);
+  },
+
+  remove(id: string): Promise<void> {
+    return api.delete(`/queues/jobs/${id}`).then(() => undefined);
+  },
+};

package/src/features/rbac/components/permission-matrix.tsx

@@ -0,0 +1,210 @@
+"use client";
+
+import { ChevronDown } from "lucide-react";
+import type { JSX } from "react";
+import { useMemo, useState } from "react";
+
+import { Badge, Checkbox, Input } from "#core/components/ui";
+import { useI18n } from "#core/contexts";
+import { Permission } from "#core/features/rbac/services/rbac.service";
+
+/** Uma área do sistema com tudo que se pode fazer nela. */
+interface ResourceGroup {
+  name: string;
+  label: string;
+  permissions: Permission[];
+}
+
+export interface PermissionMatrixProps {
+  /** Catálogo inteiro, como `/rbac/permissions` devolve. */
+  permissions: Permission[];
+  /** Ids marcados. */
+  value: string[];
+  onChange: (permissionIds: string[]) => void;
+  /** Somente leitura: usado no cartão de resumo do papel. */
+  readOnly?: boolean;
+}
+
+/**
+ * As permissões de um papel na forma como se pensa nelas: **uma área por
+ * bloco, e dentro dela o que se pode fazer ali**.
+ *
+ * Substitui a lista chapada de checkboxes com o código cru (`users:read:any`),
+ * que obrigava a ler 48 strings técnicas numa caixa de 240px para montar um
+ * papel — e que só piora, porque cada feature nova do projeto acrescenta a sua
+ * leva. Agrupar por recurso é o que mantém a tela legível quando o catálogo
+ * dobra de tamanho.
+ *
+ * Os rótulos saem da descrição que o backend já manda, com o nome cru de
+ * reserva: catálogo estendido pelo projeto (`finance`, `funkos`) aparece aqui
+ * sem precisar de tradução no core.
+ */
+export function PermissionMatrix({
+  permissions,
+  value,
+  onChange,
+  readOnly,
+}: PermissionMatrixProps): JSX.Element {
+  const { t } = useI18n();
+  const [search, setSearch] = useState("");
+  const [collapsed, setCollapsed] = useState<string[]>([]);
+
+  const groups = useMemo<ResourceGroup[]>(
+    () => groupByResource(permissions),
+    [permissions],
+  );
+
+  const visible = useMemo<ResourceGroup[]>(() => {
+    const term = search.trim().toLowerCase();
+    if (!term) {
+      return groups;
+    }
+    // Busca pelo nome da área e pelo código: quem já sabe o que procura
+    // digita `finance`, quem não sabe procura "Financeiro".
+    return groups
+      .map((group) => ({
+        ...group,
+        permissions: group.label.toLowerCase().includes(term)
+          ? group.permissions
+          : group.permissions.filter((p) =>
+              `${p.code} ${p.description ?? ""}`.toLowerCase().includes(term),
+            ),
+      }))
+      .filter((group) => group.permissions.length > 0);
+  }, [groups, search]);
+
+  const toggle = (id: string): void =>
+    onChange(
+      value.includes(id) ? value.filter((x) => x !== id) : [...value, id],
+    );
+
+  const toggleGroup = (group: ResourceGroup): void => {
+    const ids = group.permissions.map((p) => p.id);
+    const allOn = ids.every((id) => value.includes(id));
+    onChange(
+      allOn
+        ? value.filter((id) => !ids.includes(id))
+        : [...value, ...ids.filter((id) => !value.includes(id))],
+    );
+  };
+
+  const toggleCollapse = (name: string): void =>
+    setCollapsed((c) =>
+      c.includes(name) ? c.filter((x) => x !== name) : [...c, name],
+    );
+
+  return (
+    <div className="space-y-3">
+      {!readOnly && (
+        <Input
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+          placeholder={t("rbac.searchPermissions")}
+        />
+      )}
+
+      {/* Sem scroll próprio: quem rola é o corpo do modal. Dois scrolls
+          aninhados prendem a roda do mouse no de dentro. */}
+      <div className="space-y-2">
+        {visible.map((group) => {
+          const ids = group.permissions.map((p) => p.id);
+          const selected = ids.filter((id) => value.includes(id)).length;
+          const isCollapsed = collapsed.includes(group.name);
+
+          return (
+            <div
+              key={group.name}
+              className="rounded-md border border-border bg-card"
+            >
+              <div className="flex items-center gap-2 px-3 py-2">
+                {!readOnly && (
+                  <Checkbox
+                    checked={selected === ids.length}
+                    onCheckedChange={() => toggleGroup(group)}
+                    aria-label={group.label}
+                  />
+                )}
+                <button
+                  type="button"
+                  onClick={() => toggleCollapse(group.name)}
+                  className="flex flex-1 items-center gap-2 text-left"
+                >
+                  <span className="text-sm font-medium">{group.label}</span>
+                  <Badge variant="outline" className="font-mono text-xs">
+                    {selected}/{ids.length}
+                  </Badge>
+                  <ChevronDown
+                    className={`ml-auto h-4 w-4 text-muted-foreground transition-transform ${
+                      isCollapsed ? "-rotate-90" : ""
+                    }`}
+                  />
+                </button>
+              </div>
+
+              {!isCollapsed && (
+                <div className="grid grid-cols-1 gap-1 border-t border-border px-3 py-2 sm:grid-cols-2">
+                  {group.permissions.map((p) => (
+                    <label
+                      key={p.id}
+                      className="flex cursor-pointer items-start gap-2 rounded px-1 py-1 text-sm hover:bg-muted/50"
+                    >
+                      <Checkbox
+                        checked={value.includes(p.id)}
+                        onCheckedChange={() => toggle(p.id)}
+                        disabled={readOnly}
+                        className="mt-0.5"
+                      />
+                      <span className="flex flex-col">
+                        <span>{actionLabel(p)}</span>
+                        <span className="font-mono text-xs text-muted-foreground">
+                          {p.code}
+                        </span>
+                      </span>
+                    </label>
+                  ))}
+                </div>
+              )}
+            </div>
+          );
+        })}
+
+        {visible.length === 0 && (
+          <p className="py-6 text-center text-sm text-muted-foreground">
+            {t("rbac.noPermissionsFound")}
+          </p>
+        )}
+      </div>
+    </div>
+  );
+}
+
+/**
+ * Agrupa por recurso, caindo no prefixo do código quando a relação não veio.
+ *
+ * O fallback existe porque `code` é a única parte que **sempre** chega: uma
+ * permissão órfã (resource apagado) sumiria da tela em vez de aparecer para
+ * ser corrigida, e uma permissão invisível continua valendo no backend.
+ */
+const groupByResource = (permissions: Permission[]): ResourceGroup[] => {
+  const map = new Map<string, ResourceGroup>();
+
+  for (const permission of permissions) {
+    const name = permission.resource?.name ?? permission.code.split(":")[0];
+    const label =
+      permission.resource?.description?.trim() || name;
+
+    const group = map.get(name) ?? { name, label, permissions: [] };
+    group.permissions.push(permission);
+    map.set(name, group);
+  }
+
+  return [...map.values()].sort((a, b) => a.label.localeCompare(b.label));
+};
+
+/** "Ler/visualizar · Apenas recursos próprios" — ação e alcance, nesta ordem. */
+const actionLabel = (permission: Permission): string => {
+  const [, action, scope] = permission.code.split(":");
+  const actionText = permission.action?.description?.trim() || action;
+  const scopeText = permission.scope?.description?.trim() || scope;
+  return `${actionText} · ${scopeText}`;
+};

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

@@ -0,0 +1,75 @@
+"use client";
+
+import type { JSX } from "react";
+
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "#core/components/ui";
+import { useAuth, useI18n } from "#core/contexts";
+import { ActionsPanel } from "#core/features/rbac/panels/actions-panel";
+import { PermissionsPanel } from "#core/features/rbac/panels/permissions-panel";
+import { ResourcesPanel } from "#core/features/rbac/panels/resources-panel";
+import { ScopesPanel } from "#core/features/rbac/panels/scopes-panel";
+
+/**
+ * A mecânica do RBAC — as peças de que um código `resource:action:scope` é
+ * feito, mais o catálogo de permissões montado com elas.
+ *
+ * As quatro viviam como abas irmãs de "Papéis", o que punha a manutenção do
+ * modelo no mesmo nível do trabalho de todo dia: quem entra para dar acesso a
+ * alguém não deveria esbarrar em "Resources" e "Scopes" no caminho. Aqui elas
+ * continuam inteiras, mas atrás de uma porta só.
+ */
+export function DefinitionsPanel(): JSX.Element {
+  const { t } = useI18n();
+  const { hasPermission } = useAuth();
+
+  const tabs = [
+    {
+      value: "permissions",
+      label: t("rbac.tabs.permissions"),
+      perm: "permissions:read:any",
+      panel: <PermissionsPanel />,
+    },
+    {
+      value: "resources",
+      label: t("rbac.tabs.resources"),
+      perm: "resources:read:any",
+      panel: <ResourcesPanel />,
+    },
+    {
+      value: "actions",
+      label: t("rbac.tabs.actions"),
+      perm: "actions:read:any",
+      panel: <ActionsPanel />,
+    },
+    {
+      value: "scopes",
+      label: t("rbac.tabs.scopes"),
+      perm: "scopes:read:any",
+      panel: <ScopesPanel />,
+    },
+  ].filter((tab) => hasPermission(tab.perm));
+
+  if (tabs.length === 0) {
+    return <></>;
+  }
+
+  return (
+    <div className="space-y-4">
+      <p className="text-sm text-muted-foreground">{t("rbac.definitionsHint")}</p>
+      <Tabs defaultValue={tabs[0].value}>
+        <TabsList>
+          {tabs.map((tab) => (
+            <TabsTrigger key={tab.value} value={tab.value}>
+              {tab.label}
+            </TabsTrigger>
+          ))}
+        </TabsList>
+        {tabs.map((tab) => (
+          <TabsContent key={tab.value} value={tab.value}>
+            {tab.panel}
+          </TabsContent>
+        ))}
+      </Tabs>
+    </div>
+  );
+}

package/src/features/rbac/panels/index.ts

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