rl-core-front 0.6.0 → 0.8.0

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

@@ -1,15 +1,17 @@
 "use client";
 
+import { yupResolver } from "@hookform/resolvers/yup";
 import { Pencil, Plus, Trash2 } from "lucide-react";
 import type { JSX } from "react";
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
+import { useForm } from "react-hook-form";
+import * as yup from "yup";
 
 import {
   Badge,
   Button,
   Card,
   CardContent,
-  Checkbox,
   Dialog,
   DialogContent,
   DialogFooter,
@@ -21,6 +23,7 @@ import {
   Label,
 } from "#core/components/ui";
 import { useAuth, useI18n } from "#core/contexts";
+import { PermissionMatrix } from "#core/features/rbac/components/permission-matrix";
 import {
   Permission,
   rbacService,
@@ -29,6 +32,12 @@ import {
 import { useConfirm } from "#core/hooks/use-confirm";
 import { RequestOperation, useRequest } from "#core/hooks/use-request";
 
+interface RoleFormValues {
+  name: string;
+  description?: string;
+  permissionIds: string[];
+}
+
 export function RolesPanel(): JSX.Element {
   const { run, loading } = useRequest();
   const { t } = useI18n();
@@ -38,12 +47,29 @@ export function RolesPanel(): JSX.Element {
   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[],
+
+  // Mesmo padrão das outras telas do core (react-hook-form + Yup): o erro sai
+  // sob o campo, e não como toast da API depois da viagem até o servidor.
+  const schema = yup.object({
+    name: yup.string().trim().required(t("validation.required")),
+    description: yup.string().optional(),
+    permissionIds: yup.array().of(yup.string().required()).required(),
   });
 
+  const {
+    register,
+    handleSubmit,
+    reset,
+    setValue,
+    watch,
+    formState: { errors },
+  } = useForm<RoleFormValues>({
+    resolver: yupResolver(schema),
+    defaultValues: { name: "", description: "", permissionIds: [] },
+  });
+
+  const permissionIds = watch("permissionIds");
+
   const load = async (): Promise<void> => {
     const [r, p] = await Promise.all([
       run(() => rbacService.listRoles()),
@@ -59,12 +85,12 @@ export function RolesPanel(): JSX.Element {
 
   const openNew = (): void => {
     setEditing(null);
-    setForm({ name: "", description: "", permissionIds: [] });
+    reset({ name: "", description: "", permissionIds: [] });
     setOpen(true);
   };
   const openEdit = (role: Role): void => {
     setEditing(role);
-    setForm({
+    reset({
       name: role.name,
       description: role.description ?? "",
       permissionIds: (role.permissions ?? []).map((p) => p.id),
@@ -72,12 +98,12 @@ export function RolesPanel(): JSX.Element {
     setOpen(true);
   };
 
-  const save = async (): Promise<void> => {
+  const save = async (values: RoleFormValues): Promise<void> => {
     const res = editing
-      ? await run(() => rbacService.updateRole(editing.id, form), {
+      ? await run(() => rbacService.updateRole(editing.id, values), {
           success: RequestOperation.Update,
         })
-      : await run(() => rbacService.createRole(form), {
+      : await run(() => rbacService.createRole(values), {
           success: RequestOperation.Create,
         });
     if (res) {
@@ -106,13 +132,6 @@ export function RolesPanel(): JSX.Element {
 
   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>
@@ -122,6 +141,7 @@ export function RolesPanel(): JSX.Element {
           {t("common.create")}
         </Button>
       )}
+
       <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
         {roles.map((role) => (
           <Card key={role.id}>
@@ -152,62 +172,52 @@ export function RolesPanel(): JSX.Element {
                   </div>
                 )}
               </div>
-              <p className="mb-2 text-sm text-muted-foreground">
+              <p className="mb-3 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>
+              <RoleSummary role={role} />
             </CardContent>
           </Card>
         ))}
       </div>
 
       <Dialog open={open} onOpenChange={(o) => !o && setOpen(false)}>
-        <DialogContent className="max-w-lg">
+        <DialogContent className="max-w-3xl">
           <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 })
+          <DialogForm onSubmit={handleSubmit((values) => void save(values))}>
+            <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
+              <Field label={t("rbac.roleName")} error={errors.name?.message}>
+                <Input {...register("name")} />
+              </Field>
+              <Field
+                label={t("common.description")}
+                error={errors.description?.message}
+              >
+                <Input {...register("description")} />
+              </Field>
+            </div>
+
+            <div className="space-y-2">
+              <Label>{t("rbac.screensAndPermissions")}</Label>
+              <PermissionMatrix
+                permissions={perms}
+                value={permissionIds}
+                onChange={(ids) =>
+                  setValue("permissionIds", ids, { shouldDirty: true })
                 }
               />
-            </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)}>
+              <Button
+                type="button"
+                variant="outline"
+                onClick={() => setOpen(false)}
+              >
                 {t("common.cancel")}
               </Button>
               <Button type="submit" disabled={loading}>
@@ -222,3 +232,49 @@ export function RolesPanel(): JSX.Element {
     </div>
   );
 }
+
+/**
+ * Resumo do papel: as **áreas** que ele alcança, não os códigos.
+ *
+ * O cartão listava uma badge por permissão — no Super Admin, que tem todas,
+ * isso é uma parede de 48 códigos que não se lê e empurra os outros papéis
+ * para fora da tela.
+ */
+function RoleSummary({ role }: { role: Role }): JSX.Element {
+  const { t } = useI18n();
+  const permissions = useMemo(() => role.permissions ?? [], [role.permissions]);
+
+  const resources = useMemo(() => {
+    const names = new Set(
+      permissions.map((p) => p.resource?.description?.trim() || p.code.split(":")[0]),
+    );
+    return [...names].sort((a, b) => a.localeCompare(b));
+  }, [permissions]);
+
+  if (permissions.length === 0) {
+    return (
+      <p className="text-sm text-muted-foreground">{t("rbac.noPermissions")}</p>
+    );
+  }
+
+  const shown = resources.slice(0, 6);
+  const rest = resources.length - shown.length;
+
+  return (
+    <div className="space-y-2">
+      <p className="text-xs text-muted-foreground">
+        {t("rbac.permissionCount")
+          .replace("{count}", String(permissions.length))
+          .replace("{screens}", String(resources.length))}
+      </p>
+      <div className="flex flex-wrap gap-1">
+        {shown.map((name) => (
+          <Badge key={name} variant="outline">
+            {name}
+          </Badge>
+        ))}
+        {rest > 0 && <Badge variant="outline">+{rest}</Badge>}
+      </div>
+    </div>
+  );
+}

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

@@ -5,14 +5,23 @@ import type { JSX } from "react";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "#core/components/ui";
 import { useAuth, useI18n } from "#core/contexts";
 import {
-  ActionsPanel,
+  DefinitionsPanel,
   GroupsPanel,
-  PermissionsPanel,
-  ResourcesPanel,
   RolesPanel,
-  ScopesPanel,
 } from "#core/features/rbac/panels";
 
+/**
+ * Controle de acesso, organizado pelo que se vem fazer aqui.
+ *
+ * **Papéis** é o trabalho de todo dia — é onde se decide que telas cada tipo de
+ * pessoa alcança. **Grupos** é o organograma, para quem usa escopo de equipe.
+ * **Definições** é a mecânica (recursos, ações, escopos e o catálogo de
+ * permissões), que o seed já preenche e quase nunca se toca.
+ *
+ * Eram seis abas no mesmo nível, três delas CRUD do modelo relacional com
+ * rótulo em inglês: a tarefa comum ficava do lado da manutenção rara, e a tela
+ * pedia que se soubesse o desenho do RBAC antes de conceder um acesso.
+ */
 export function RbacScreen(): JSX.Element {
   const { t } = useI18n();
   const { hasPermission } = useAuth();
@@ -20,41 +29,30 @@ export function RbacScreen(): JSX.Element {
   const tabs = [
     {
       value: "roles",
-      label: "Papéis",
-      perm: "roles:read:any",
+      label: t("rbac.tabs.roles"),
+      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",
+      label: t("rbac.tabs.groups"),
+      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 />,
+      value: "definitions",
+      label: t("rbac.tabs.definitions"),
+      // Aparece para quem alcança qualquer uma das quatro de dentro: exigir as
+      // quatro esconderia a aba de quem administra só o catálogo.
+      perm: [
+        "permissions:read:any",
+        "resources:read:any",
+        "actions:read:any",
+        "scopes:read:any",
+      ],
+      panel: <DefinitionsPanel />,
     },
-  ].filter((x) => hasPermission(x.perm));
+  ].filter((tab) => tab.perm.some((code) => hasPermission(code)));
 
   return (
     <div>
@@ -62,15 +60,15 @@ export function RbacScreen(): JSX.Element {
       {tabs.length > 0 && (
         <Tabs defaultValue={tabs[0].value}>
           <TabsList>
-            {tabs.map((x) => (
-              <TabsTrigger key={x.value} value={x.value}>
-                {x.label}
+            {tabs.map((tab) => (
+              <TabsTrigger key={tab.value} value={tab.value}>
+                {tab.label}
               </TabsTrigger>
             ))}
           </TabsList>
-          {tabs.map((x) => (
-            <TabsContent key={x.value} value={x.value}>
-              {x.panel}
+          {tabs.map((tab) => (
+            <TabsContent key={tab.value} value={tab.value}>
+              {tab.panel}
             </TabsContent>
           ))}
         </Tabs>

package/src/hooks/use-job-progress.ts

@@ -0,0 +1,192 @@
+"use client";
+
+import { useCallback, useEffect, useState } from "react";
+
+import { api } from "#core/_services/api/axios.factory";
+import { useSocket } from "#core/contexts/socket-context";
+
+/**
+ * Eventos que a fila do backend empurra (ver `job.constants.ts` do
+ * `rl-core-api`). Saem pela mesma conexão das notificações — o hook não abre
+ * socket nenhum.
+ */
+export const JOB_PROGRESS_EVENT = "job:progress";
+export const JOB_COMPLETED_EVENT = "job:completed";
+export const JOB_FAILED_EVENT = "job:failed";
+
+export type JobState = "idle" | "running" | "completed" | "failed";
+
+interface JobProgressEvent {
+  jobId: string;
+  name: string;
+  processed: number;
+  total: number;
+  percent: number;
+  message?: string;
+}
+
+interface JobCompletedEvent<TSummary> {
+  jobId: string;
+  name: string;
+  summary: TSummary;
+}
+
+interface JobFailedEvent {
+  jobId: string;
+  name: string;
+  errorCode: string | null;
+  message: string;
+}
+
+/** `GET /jobs/:id` — a mesma informação, para quem perdeu os eventos. */
+interface JobStatusResponse<TSummary> {
+  id: string;
+  name: string;
+  state: "waiting" | "active" | "completed" | "failed" | "delayed" | "unknown";
+  progress: {
+    processed: number;
+    total: number;
+    percent: number;
+    message?: string;
+  } | null;
+  summary: TSummary | null;
+  error: { code: string | null; message: string } | null;
+}
+
+export interface UseJobProgressResult<TSummary> {
+  state: JobState;
+  percent: number;
+  processed: number;
+  total: number;
+  message: string | null;
+  /** Relatório que o processador devolveu — só depois de `completed`. */
+  summary: TSummary | null;
+  error: { code: string | null; message: string } | null;
+}
+
+const IDLE = {
+  state: "idle" as JobState,
+  percent: 0,
+  processed: 0,
+  total: 0,
+  message: null,
+  summary: null,
+  error: null,
+};
+
+/**
+ * Acompanha um job em segundo plano.
+ *
+ * ```tsx
+ * const [jobId, setJobId] = useState<string | null>(null);
+ * const job = useJobProgress<ImportSummary>(jobId);
+ * ```
+ *
+ * Três coisas que o evento sozinho não resolve, e por isso o hook também
+ * consulta `GET /jobs/:id`:
+ *
+ * - o job pode ter terminado **antes** de a tela assinar (arquivo pequeno);
+ * - a aba pode ter sido recarregada no meio, com o `jobId` guardado;
+ * - o socket pode cair, e o que passou na janela offline não volta sozinho —
+ *   por isso a releitura também acontece a cada reconexão.
+ */
+export function useJobProgress<TSummary = unknown>(
+  jobId: string | null,
+): UseJobProgressResult<TSummary> {
+  const { on, reconnectCount } = useSocket();
+  const [result, setResult] = useState<UseJobProgressResult<TSummary>>(
+    IDLE as UseJobProgressResult<TSummary>,
+  );
+
+  // Job novo começa do zero: sem isto a barra do anterior ficaria em 100%.
+  useEffect(() => {
+    setResult(IDLE as UseJobProgressResult<TSummary>);
+  }, [jobId]);
+
+  const sync = useCallback(async (): Promise<void> => {
+    if (!jobId) {
+      return;
+    }
+    try {
+      const { data } = await api.get<JobStatusResponse<TSummary>>(
+        `/jobs/${jobId}`,
+      );
+      setResult({
+        state:
+          data.state === "completed"
+            ? "completed"
+            : data.state === "failed"
+              ? "failed"
+              : "running",
+        percent: data.progress?.percent ?? 0,
+        processed: data.progress?.processed ?? 0,
+        total: data.progress?.total ?? 0,
+        message: data.progress?.message ?? null,
+        summary: data.summary,
+        error: data.error,
+      });
+    } catch {
+      // Job expirado ou fora de alcance: o socket ainda pode trazer o fim, e
+      // derrubar a tela por causa da consulta de apoio seria pior.
+    }
+  }, [jobId]);
+
+  useEffect(() => {
+    void sync();
+  }, [sync, reconnectCount]);
+
+  useEffect(() => {
+    if (!jobId) {
+      return;
+    }
+
+    const offProgress = on<JobProgressEvent>(JOB_PROGRESS_EVENT, (data) => {
+      if (data.jobId !== jobId) {
+        return;
+      }
+      setResult((current) => ({
+        ...current,
+        state: "running",
+        percent: data.percent,
+        processed: data.processed,
+        total: data.total,
+        message: data.message ?? null,
+      }));
+    });
+
+    const offCompleted = on<JobCompletedEvent<TSummary>>(
+      JOB_COMPLETED_EVENT,
+      (data) => {
+        if (data.jobId !== jobId) {
+          return;
+        }
+        setResult((current) => ({
+          ...current,
+          state: "completed",
+          percent: 100,
+          summary: data.summary,
+          error: null,
+        }));
+      },
+    );
+
+    const offFailed = on<JobFailedEvent>(JOB_FAILED_EVENT, (data) => {
+      if (data.jobId !== jobId) {
+        return;
+      }
+      setResult((current) => ({
+        ...current,
+        state: "failed",
+        error: { code: data.errorCode, message: data.message },
+      }));
+    });
+
+    return () => {
+      offProgress();
+      offCompleted();
+      offFailed();
+    };
+  }, [jobId, on]);
+
+  return result;
+}

package/src/i18n/messages/en.ts

@@ -11,6 +11,7 @@ export const en: Messages = {
     profile: "My profile",
     logs: "Logs",
     audit: "Audit",
+    queues: "Queues",
   },
   logs: {
     outcomeSuccess: "Success",
@@ -84,6 +85,31 @@ export const en: Messages = {
     permissions: "Permissions",
     roles: "Roles",
   },
+  job: {
+    running: "Processing…",
+    completed: "Processing finished",
+    failed: "The processing could not be completed",
+  },
+  queues: {
+    title: "Queues",
+    subtitle: "Background processing — what is running and what failed",
+    job: "Job",
+    state: "State",
+    progress: "Progress",
+    attempts: "Attempts",
+    createdAt: "Created at",
+    reason: "Failure reason",
+    retry: "Retry",
+    removeTitle: "Remove this job?",
+    removeDescription:
+      "It leaves the queue and can no longer be retried from here.",
+    empty: "No jobs in this state",
+    stateWaiting: "Waiting",
+    stateActive: "Active",
+    stateCompleted: "Completed",
+    stateFailed: "Failed",
+    stateDelayed: "Delayed",
+  },
   table: {
     columns: "Columns",
     columnsButton: "Columns",
@@ -93,6 +119,7 @@ export const en: Messages = {
     results: "results",
     perPage: "per page",
     empty: "No records",
+    emptyFiltered: "No records match this filter",
   },
   filters: {
     button: "Filters",
@@ -170,6 +197,7 @@ export const en: Messages = {
     no: "No",
     actions: "Actions",
     loading: "Loading...",
+    description: "Description",
     language: "Language",
     theme: "Theme",
     light: "Light",
@@ -295,6 +323,23 @@ export const en: Messages = {
     title: "Roles & Permissions",
     manager: "Manager",
     noManager: "No manager",
+    tabs: {
+      roles: "Roles",
+      groups: "Groups",
+      definitions: "Definitions",
+      permissions: "Permissions",
+      resources: "Areas",
+      actions: "Actions",
+      scopes: "Scopes",
+    },
+    roleName: "Role name",
+    screensAndPermissions: "Areas and permissions",
+    searchPermissions: "Search area or permission…",
+    noPermissionsFound: "No permissions found",
+    noPermissions: "No permissions granted",
+    permissionCount: "{count} permissions across {screens} areas",
+    definitionsHint:
+      "The building blocks of a permission code. The seed creates them — only touch this when adding a new resource.",
   },
   validation: {
     required: "Required field",
@@ -312,6 +357,13 @@ export const en: Messages = {
     },
   },
   errors: {
+    notFoundTitle: "Page not found",
+    notFoundDescription:
+      "The address you opened does not exist or has moved. Check the link and try again.",
+    forbiddenTitle: "You don't have access to this area",
+    forbiddenDescription:
+      "Your account lacks permission to open this screen. Ask a system administrator for access.",
+    backToDashboard: "Back to home",
     unexpected: "Unexpected error",
     codes: {
       ACCOUNT_INACTIVE: