rl-core-front 0.8.0 → 0.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rl-core-front",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "description": "Telas e componentes Next.js do core: login com 2FA, usu\u00e1rios, RBAC, auditoria, logs e listagens com filtro din\u00e2mico",
   "author": "Rodrigo Liberti",
   "license": "MIT",

package/src/components/ui/data-table.tsx

@@ -22,9 +22,9 @@ import {
 import {
   ArrowDown,
   ArrowUp,
+  ArrowUpDown,
   ChevronLeft,
   ChevronRight,
-  ChevronsUpDown,
   Filter,
   SlidersHorizontal,
 } from "lucide-react";
@@ -307,11 +307,14 @@ export function DataTable<T extends RowData>({
                             header.getContext(),
                           )}
                           {sorted === "asc" ? (
-                            <ArrowUp className="h-3.5 w-3.5" />
+                            <ArrowUp className="h-3.5 w-3.5 text-primary" />
                           ) : sorted === "desc" ? (
-                            <ArrowDown className="h-3.5 w-3.5" />
+                            <ArrowDown className="h-3.5 w-3.5 text-primary" />
                           ) : (
-                            <ChevronsUpDown className="h-3.5 w-3.5 opacity-50" />
+                            // Seta dupla apagada na coluna livre e seta única
+                            // em destaque na que ordena: sem a cor, achar a
+                            // coluna ativa exige comparar o desenho de todas.
+                            <ArrowUpDown className="h-3.5 w-3.5 opacity-40" />
                           )}
                         </button>
                       ) : (

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

@@ -76,7 +76,6 @@ export function AuditScreen(): JSX.Element {
         id: "user",
         header: t("auditTrail.user"),
         meta: { label: t("auditTrail.user") },
-        enableSorting: false,
         cell: ({ row }) =>
           row.original.user?.name ?? t("auditTrail.systemUser"),
       },
@@ -84,7 +83,6 @@ export function AuditScreen(): JSX.Element {
         accessorKey: "ipAddress",
         header: t("auditTrail.ip"),
         meta: { label: t("auditTrail.ip") },
-        enableSorting: false,
         cell: ({ getValue }) => (
           <span className="font-mono text-xs">{String(getValue() ?? "—")}</span>
         ),

package/src/features/logs/panels/request-logs-panel.tsx

@@ -95,7 +95,6 @@ export function RequestLogsPanel(): JSX.Element {
         id: "route",
         header: t("logs.route"),
         meta: { label: t("logs.route") },
-        enableSorting: false,
         // A ação nomeada (`@Auditable("Login")`) diz mais que o caminho; sem
         // ela, o caminho é o que identifica a requisição.
         cell: ({ row }) => (
@@ -118,7 +117,6 @@ export function RequestLogsPanel(): JSX.Element {
         accessorKey: "errorType",
         header: t("logs.type"),
         meta: { label: t("logs.type") },
-        enableSorting: false,
         cell: ({ getValue }) => {
           const type = getValue() as ErrorType | null;
           return type == null ? "—" : t(ErrorTypeLabelKey[type]);
@@ -137,7 +135,6 @@ export function RequestLogsPanel(): JSX.Element {
         id: "user",
         header: t("logs.user"),
         meta: { label: t("logs.user") },
-        enableSorting: false,
         cell: ({ row }) => row.original.user?.name ?? t("logs.systemUser"),
       },
       {

package/src/features/queues/hooks/use-queue-jobs.ts

@@ -1,5 +1,6 @@
 "use client";
 
+import type { SortingState } from "@tanstack/react-table";
 import { useCallback, useEffect, useState } from "react";
 
 import {
@@ -25,9 +26,11 @@ export interface UseQueueJobsResult {
   page: number;
   pageSize: number;
   state: QueueJobState;
+  sorting: SortingState;
   loading: boolean;
   setPage: (page: number) => void;
   setPageSize: (size: number) => void;
+  setSorting: (sorting: SortingState) => void;
   setState: (state: QueueJobState) => void;
   refresh: () => Promise<void>;
   retry: (id: string) => Promise<void>;
@@ -49,11 +52,22 @@ export function useQueueJobs(): UseQueueJobsResult {
   const [page, setPage] = useState(0);
   const [pageSize, setPageSize] = useState(20);
   const [state, setStateValue] = useState<QueueJobState>(QueueJobState.FAILED);
+  // Sem ordem escolhida, a lista sai na ordem do Redis — que é a mais recente
+  // primeiro e não custa varredura nenhuma no backend.
+  const [sorting, setSorting] = useState<SortingState>([]);
 
   const fetch = useCallback(async (): Promise<void> => {
     const [list, summary] = await Promise.all([
       // O `page` da tabela é base zero; o da API, base um.
-      run(() => queuesService.list({ state, page: page + 1, limit: pageSize })),
+      run(() =>
+        queuesService.list({
+          state,
+          page: page + 1,
+          limit: pageSize,
+          sortBy: sorting[0]?.id,
+          sortDir: sorting[0] ? (sorting[0].desc ? "DESC" : "ASC") : undefined,
+        }),
+      ),
       run(() => queuesService.counts()),
     ]);
     if (list) {
@@ -63,7 +77,7 @@ export function useQueueJobs(): UseQueueJobsResult {
     if (summary) {
       setCounts(summary);
     }
-  }, [run, state, page, pageSize]);
+  }, [run, state, page, pageSize, sorting]);
 
   useEffect(() => {
     void fetch();
@@ -92,9 +106,11 @@ export function useQueueJobs(): UseQueueJobsResult {
     page,
     pageSize,
     state,
+    sorting,
     loading,
     setPage,
     setPageSize,
+    setSorting,
     setState,
     refresh: fetch,
     retry: (id) => act(queuesService.retry(id)),

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

@@ -4,6 +4,7 @@ import type {
   ColumnDef,
   OnChangeFn,
   PaginationState,
+  SortingState,
 } from "@tanstack/react-table";
 import { RotateCcw, Trash2 } from "lucide-react";
 import type { JSX } from "react";
@@ -90,7 +91,6 @@ export function QueuesScreen(): JSX.Element {
         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>
@@ -104,7 +104,6 @@ export function QueuesScreen(): JSX.Element {
         accessorKey: "state",
         header: t("queues.state"),
         meta: { label: t("queues.state") },
-        enableSorting: false,
         cell: ({ row }) => {
           const state = row.original.state as QueueJobState;
           return (
@@ -118,7 +117,6 @@ export function QueuesScreen(): JSX.Element {
         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}%`;
@@ -128,20 +126,17 @@ export function QueuesScreen(): JSX.Element {
         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 }) => {
@@ -161,9 +156,9 @@ export function QueuesScreen(): JSX.Element {
       {
         id: "actions",
         header: () => <div className="text-center">{t("common.actions")}</div>,
+        enableSorting: false,
         meta: { shrink: true },
         enableHiding: false,
-        enableSorting: false,
         cell: ({ row }) =>
           canManage ? (
             <RowActions>
@@ -196,6 +191,13 @@ export function QueuesScreen(): JSX.Element {
     pageIndex: queue.page,
     pageSize: queue.pageSize,
   };
+  /** Ordem nova recomeça na primeira página: a página 3 era da ordem antiga. */
+  const onSortingChange: OnChangeFn<SortingState> = (updater) => {
+    const next = typeof updater === "function" ? updater(queue.sorting) : updater;
+    queue.setSorting(next);
+    queue.setPage(0);
+  };
+
   const onPaginationChange: OnChangeFn<PaginationState> = (updater) => {
     const next = typeof updater === "function" ? updater(pagination) : updater;
     if (next.pageSize !== queue.pageSize) {
@@ -246,7 +248,9 @@ export function QueuesScreen(): JSX.Element {
         rowCount={queue.total}
         pagination={pagination}
         onPaginationChange={onPaginationChange}
-        enableSorting={false}
+        manualSorting
+        sorting={queue.sorting}
+        onSortingChange={onSortingChange}
         emptyMessage={t("queues.empty")}
         toolbar={
           <SegmentedControl

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

@@ -28,6 +28,9 @@ export interface QueueJobsQuery {
   state: QueueJobState;
   page: number;
   limit: number;
+  /** Campo da whitelist do backend (`SORTABLE_JOB_FIELDS`). */
+  sortBy?: string;
+  sortDir?: "ASC" | "DESC";
 }
 
 export const queuesService = {

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

@@ -159,9 +159,12 @@ export function GroupsPanel(): JSX.Element {
       { accessorKey: "type", header: "Tipo", meta: { label: "Tipo" } },
       {
         id: "manager",
+        accessorFn: (row) => {
+          const manager = candidates.find((c) => c.id === row.managerId);
+          return manager ? fullName(manager) : "";
+        },
         header: t("rbac.manager"),
         meta: { label: t("rbac.manager") },
-        enableSorting: false,
         // Sem gerente, o escopo `team` não alcança ninguém aqui dentro — e é
         // exatamente isso que o traço precisa deixar visível na listagem.
         cell: ({ row }) => {

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

@@ -90,7 +90,6 @@ export function UsersScreen(): JSX.Element {
         id: "roles",
         header: t("users.roles"),
         meta: { label: t("users.roles") },
-        enableSorting: false,
         cell: ({ row }) => (
           <div className="flex flex-wrap gap-1">
             {row.original.roles?.map((r) => (
@@ -125,7 +124,6 @@ export function UsersScreen(): JSX.Element {
         accessorKey: "twoFactorEnabled",
         header: "2FA",
         meta: { label: "2FA" },
-        enableSorting: false,
         cell: ({ row }) => (
           <Badge
             variant={row.original.twoFactorEnabled ? "success" : "warning"}