rl-core-front 0.1.0

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

@@ -0,0 +1,331 @@
+"use client";
+
+import type {
+  ColumnDef,
+  OnChangeFn,
+  PaginationState,
+  SortingState,
+} from "@tanstack/react-table";
+import {
+  Ban,
+  CheckCircle2,
+  KeyRound,
+  MailPlus,
+  Pencil,
+  Plus,
+  ShieldOff,
+  Trash2,
+} from "lucide-react";
+import type { JSX } from "react";
+import { useMemo, useState } from "react";
+
+import { Badge, Button, DataTable, DataTableFeatures, RowActions } from "#core/components/ui";
+import { useAuth, useI18n } from "#core/contexts";
+import { UserFormDialog } from "#core/features/users/components/user-form-dialog";
+import { useUsers } from "#core/features/users/hooks/use-users";
+import {
+  CreateUserPayload,
+  User,
+} from "#core/features/users/services/users.service";
+import { useConfirm } from "#core/hooks/use-confirm";
+
+export function UsersScreen(): JSX.Element {
+  const u = useUsers();
+  const { hasPermission } = useAuth();
+  const { t } = useI18n();
+  const { confirm, confirmDialog } = useConfirm();
+  const [formOpen, setFormOpen] = useState(false);
+  const [editing, setEditing] = useState<User | null>(null);
+
+  const canUpdate = hasPermission("users:update:any");
+  const canReset2fa = hasPermission("users:update:any");
+  const canReset = hasPermission("users:reset-password:any");
+  const canDeactivate = hasPermission("users:deactivate:any");
+  const canDelete = hasPermission("users:delete:any");
+  const canInvite = hasPermission("users:invite:any");
+  const showActions =
+    canUpdate ||
+    canInvite ||
+    canReset ||
+    canReset2fa ||
+    canDeactivate ||
+    canDelete;
+
+  const openCreate = (): void => {
+    setEditing(null);
+    setFormOpen(true);
+  };
+  const openEdit = (row: User): void => {
+    setEditing(row);
+    setFormOpen(true);
+  };
+  const submitForm = async (
+    data: CreateUserPayload,
+    id?: string,
+  ): Promise<boolean> => (id ? u.update(id, data) : u.create(data));
+
+  const columns = useMemo<ColumnDef<DataTableFeatures, User, unknown>[]>(() => {
+    const cols: ColumnDef<DataTableFeatures, User, unknown>[] = [
+      {
+        // `accessorKey` continua `name`: é por ele que a ordenação vai ao
+        // backend, que não sabe ordenar por um campo composto.
+        accessorKey: "name",
+        header: t("users.name"),
+        meta: { label: t("users.name") },
+        cell: ({ row }) =>
+          [row.original.name, row.original.lastName]
+            .filter(Boolean)
+            .join(" "),
+      },
+      {
+        accessorKey: "email",
+        header: t("users.email"),
+        meta: { label: t("users.email") },
+      },
+      {
+        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) => (
+              <Badge key={r.name} variant="secondary">
+                {r.name}
+              </Badge>
+            ))}
+          </div>
+        ),
+      },
+      {
+        accessorKey: "isActive",
+        header: t("users.status"),
+        meta: { label: t("users.status") },
+        /**
+         * Três estados, não dois. Bloqueado por tentativas é diferente de
+         * inativo: a conta segue ativa, mas não entra até um admin reenviar o
+         * link de senha. Mostrar só "Ativo" fazia o aviso de conta bloqueada
+         * parecer errado para quem abria esta tela.
+         */
+        cell: ({ row }) => {
+          if (!row.original.isActive) {
+            return <Badge variant="destructive">{t("users.inactive")}</Badge>;
+          }
+          if (row.original.locked) {
+            return <Badge variant="warning">{t("users.locked")}</Badge>;
+          }
+          return <Badge variant="success">{t("users.active")}</Badge>;
+        },
+      },
+      {
+        accessorKey: "twoFactorEnabled",
+        header: "2FA",
+        meta: { label: "2FA" },
+        enableSorting: false,
+        cell: ({ row }) => (
+          <Badge
+            variant={row.original.twoFactorEnabled ? "success" : "warning"}
+          >
+            {row.original.twoFactorEnabled ? "✓" : "—"}
+          </Badge>
+        ),
+      },
+    ];
+
+    if (showActions) {
+      cols.push({
+        id: "actions",
+        header: () => <div className="text-center">{t("common.actions")}</div>,
+        meta: { shrink: true },
+        enableHiding: false,
+        enableSorting: false,
+        cell: ({ row }) => {
+          const item = row.original;
+          return (
+            <RowActions>
+              {canUpdate && (
+                <Button
+                  variant="ghost"
+                  size="iconSm"
+                  title={t("common.edit")}
+                  onClick={() => openEdit(item)}
+                >
+                  <Pencil className="h-4 w-4" />
+                </Button>
+              )}
+              {canInvite && (
+                <Button
+                  variant="ghost"
+                  size="iconSm"
+                  title={t("users.sendFirstAccessLink")}
+                  onClick={() => {
+                    void confirm({
+                      title: t("users.sendFirstAccessLink"),
+                      description: item.email,
+                      confirmLabel: t("common.send"),
+                    }).then((ok) => {
+                      if (ok) {
+                        void u.sendFirstAccessLink(item.id);
+                      }
+                    });
+                  }}
+                >
+                  <MailPlus className="h-4 w-4" />
+                </Button>
+              )}
+              {canReset && (
+                <Button
+                  variant="ghost"
+                  size="iconSm"
+                  title={t("users.sendPasswordResetLink")}
+                  onClick={() => {
+                    void confirm({
+                      title: t("users.sendPasswordResetLink"),
+                      description: item.email,
+                      confirmLabel: t("common.send"),
+                    }).then((ok) => {
+                      if (ok) {
+                        void u.sendPasswordResetLink(item.id);
+                      }
+                    });
+                  }}
+                >
+                  <KeyRound className="h-4 w-4" />
+                </Button>
+              )}
+              {canReset2fa && item.twoFactorEnabled && (
+                <Button
+                  variant="ghost"
+                  size="iconSm"
+                  title={t("users.resetTwoFactor")}
+                  onClick={() => {
+                    void confirm({
+                      title: t("users.resetTwoFactor"),
+                      description: item.name,
+                      destructive: true,
+                    }).then((ok) => {
+                      if (ok) {
+                        void u.resetTwoFactor(item.id);
+                      }
+                    });
+                  }}
+                >
+                  <ShieldOff className="h-4 w-4" />
+                </Button>
+              )}
+              {canDeactivate && (
+                <Button
+                  variant="ghost"
+                  size="iconSm"
+                  title={
+                    item.isActive ? t("users.inactive") : t("users.active")
+                  }
+                  onClick={() => u.setActive(item.id, !item.isActive)}
+                >
+                  {item.isActive ? (
+                    <Ban className="h-4 w-4" />
+                  ) : (
+                    <CheckCircle2 className="h-4 w-4 text-success" />
+                  )}
+                </Button>
+              )}
+              {canDelete && (
+                <Button
+                  variant="ghost"
+                  size="iconSm"
+                  className="text-destructive"
+                  title={t("common.delete")}
+                  onClick={() => {
+                    void confirm({
+                      title: t("common.delete"),
+                      description: item.name,
+                      confirmLabel: t("common.delete"),
+                      destructive: true,
+                    }).then((ok) => {
+                      if (ok) {
+                        void u.remove(item.id);
+                      }
+                    });
+                  }}
+                >
+                  <Trash2 className="h-4 w-4" />
+                </Button>
+              )}
+            </RowActions>
+          );
+        },
+      });
+    }
+    return cols;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [
+    t,
+    showActions,
+    canUpdate,
+    canInvite,
+    canReset,
+    canReset2fa,
+    canDeactivate,
+    canDelete,
+  ]);
+
+  const pagination: PaginationState = {
+    pageIndex: u.page,
+    pageSize: u.pageSize,
+  };
+  const onPaginationChange: OnChangeFn<PaginationState> = (updater) => {
+    const next = typeof updater === "function" ? updater(pagination) : updater;
+    if (next.pageSize !== u.pageSize) {
+      u.setPageSize(next.pageSize);
+      u.setPage(0);
+    } else if (next.pageIndex !== u.page) {
+      u.setPage(next.pageIndex);
+    }
+  };
+  const onSortingChange: OnChangeFn<SortingState> = (updater) => {
+    const next = typeof updater === "function" ? updater(u.sorting) : updater;
+    u.setSorting(next);
+    u.setPage(0);
+  };
+
+  return (
+    <div>
+      <h1 className="mb-4 text-3xl font-bold">{t("users.title")}</h1>
+
+      <DataTable
+        columns={columns}
+        data={u.rows}
+        getRowId={(r) => r.id}
+        storageKey="users"
+        loading={u.loading}
+        manualPagination
+        rowCount={u.total}
+        pagination={pagination}
+        onPaginationChange={onPaginationChange}
+        manualSorting
+        sorting={u.sorting}
+        onSortingChange={onSortingChange}
+        filters={u.filters}
+        toolbar={
+          hasPermission("users:create:any") && (
+            <Button onClick={openCreate}>
+              <Plus className="h-4 w-4" />
+              {t("users.newUser")}
+            </Button>
+          )
+        }
+      />
+
+      <UserFormDialog
+        open={formOpen}
+        loading={u.acting}
+        roles={u.roles}
+        editing={editing}
+        onClose={() => setFormOpen(false)}
+        onSubmit={submitForm}
+      />
+
+      {confirmDialog}
+    </div>
+  );
+}

package/src/hooks/use-column-visibility.ts

@@ -0,0 +1,54 @@
+"use client";
+
+import { useCallback, useEffect, useState } from "react";
+
+const STORAGE_PREFIX = "cols:";
+
+export interface UseColumnVisibilityResult {
+  hiddenColumns: string[];
+  isColumnVisible: (columnId: string) => boolean;
+  saveHiddenColumns: (nextHidden: string[]) => void;
+}
+
+/**
+ * Persiste as colunas ocultas de uma tabela em localStorage (por storageKey).
+ * Retorna a lista de ocultas + helpers para ler/salvar.
+ */
+export function useColumnVisibility(
+  storageKey?: string,
+): UseColumnVisibilityResult {
+  const [hiddenColumns, setHiddenColumns] = useState<string[]>([]);
+
+  useEffect(() => {
+    if (!storageKey || typeof window === "undefined") {return;}
+    try {
+      const raw = window.localStorage.getItem(`${STORAGE_PREFIX}${storageKey}`);
+      if (raw) {setHiddenColumns(JSON.parse(raw));}
+    } catch {
+      setHiddenColumns([]);
+    }
+  }, [storageKey]);
+
+  const isColumnVisible = useCallback(
+    (columnId: string) => !hiddenColumns.includes(columnId),
+    [hiddenColumns],
+  );
+
+  const saveHiddenColumns = useCallback(
+    (nextHidden: string[]) => {
+      setHiddenColumns(nextHidden);
+      if (!storageKey || typeof window === "undefined") {return;}
+      try {
+        window.localStorage.setItem(
+          `${STORAGE_PREFIX}${storageKey}`,
+          JSON.stringify(nextHidden),
+        );
+      } catch {
+        /* ignore */
+      }
+    },
+    [storageKey],
+  );
+
+  return { hiddenColumns, isColumnVisible, saveHiddenColumns };
+}

package/src/hooks/use-confirm.tsx

@@ -0,0 +1,70 @@
+"use client";
+
+import type { JSX } from "react";
+import { useCallback, useState } from "react";
+
+import { ConfirmDialog } from "#core/components/ui";
+import { useI18n } from "#core/contexts";
+
+export interface ConfirmOptions {
+  title: string;
+  description?: string;
+  confirmLabel?: string;
+  cancelLabel?: string;
+  /** Ação sem volta (excluir, resetar 2FA) — pinta o botão de vermelho. */
+  destructive?: boolean;
+}
+
+interface Pending {
+  options: ConfirmOptions;
+  resolve: (confirmed: boolean) => void;
+}
+
+export interface UseConfirmResult {
+  /** Aguarda a decisão do usuário: `true` confirmou, `false` cancelou. */
+  confirm: (options: ConfirmOptions) => Promise<boolean>;
+  /** Renderize no final da tela — é o modal em si. */
+  confirmDialog: JSX.Element;
+}
+
+/**
+ * Substitui o `confirm()` do browser mantendo o mesmo jeito de chamar:
+ *
+ *   if (!(await confirm({ title: "Excluir?" }))) { return; }
+ *
+ * A promise resolve quando o usuário decide — cancelar (ou fechar no `Esc`)
+ * resolve `false`, então o fluxo de quem chamou não muda.
+ */
+export function useConfirm(): UseConfirmResult {
+  const { t } = useI18n();
+  const [pending, setPending] = useState<Pending | null>(null);
+
+  const confirm = useCallback(
+    (options: ConfirmOptions) =>
+      new Promise<boolean>((resolve) => setPending({ options, resolve })),
+    [],
+  );
+
+  const settle = useCallback(
+    (confirmed: boolean) => {
+      pending?.resolve(confirmed);
+      setPending(null);
+    },
+    [pending],
+  );
+
+  const confirmDialog = (
+    <ConfirmDialog
+      open={!!pending}
+      title={pending?.options.title ?? ""}
+      description={pending?.options.description}
+      confirmLabel={pending?.options.confirmLabel ?? t("common.confirm")}
+      cancelLabel={pending?.options.cancelLabel ?? t("common.cancel")}
+      destructive={pending?.options.destructive}
+      onConfirm={() => settle(true)}
+      onCancel={() => settle(false)}
+    />
+  );
+
+  return { confirm, confirmDialog };
+}

package/src/hooks/use-filter-schema.ts

@@ -0,0 +1,85 @@
+"use client";
+
+import { useCallback, useEffect, useState } from "react";
+
+import { api } from "#core/_services/api/axios.factory";
+import type { FilterField, FilterOption } from "#core/_utils/filter";
+
+export interface UseFilterSchemaResult {
+  schema: FilterField[];
+  loading: boolean;
+}
+
+/**
+ * Catálogo por URL. Ele muda com deploy, não durante a sessão — recarregar a
+ * cada abertura do painel só gastaria requisição.
+ */
+const cache = new Map<string, FilterField[]>();
+
+/** Item de um endpoint de opções: ou já vem `{value,label}`, ou tem `name`. */
+interface RemoteOption {
+  value?: string;
+  label?: string;
+  name?: string;
+  id?: string;
+}
+
+const toOption = (item: RemoteOption): FilterOption | null => {
+  const value = item.value ?? item.name ?? item.id;
+  if (!value) {
+    return null;
+  }
+  return { value, label: item.label ?? item.name ?? value };
+};
+
+/**
+ * Busca o catálogo de campos filtráveis e resolve as opções dos campos
+ * `SELECT` — assim o painel só precisa olhar para `field.options`.
+ */
+export function useFilterSchema(url: string): UseFilterSchemaResult {
+  const [schema, setSchema] = useState<FilterField[]>(cache.get(url) ?? []);
+  const [loading, setLoading] = useState(!cache.has(url));
+
+  const load = useCallback(async (): Promise<void> => {
+    const cached = cache.get(url);
+    if (cached) {
+      setSchema(cached);
+      setLoading(false);
+      return;
+    }
+
+    try {
+      const { data } = await api.get<FilterField[]>(url);
+      const resolved = await Promise.all(data.map(withRemoteOptions));
+      cache.set(url, resolved);
+      setSchema(resolved);
+    } catch {
+      // Sem catálogo o botão de filtros some, e a listagem continua de pé —
+      // filtro é acessório, não pode derrubar a tela.
+      setSchema([]);
+    } finally {
+      setLoading(false);
+    }
+  }, [url]);
+
+  useEffect(() => {
+    void load();
+  }, [load]);
+
+  return { schema, loading };
+}
+
+const withRemoteOptions = async (field: FilterField): Promise<FilterField> => {
+  if (!field.optionsUrl) {
+    return field;
+  }
+  try {
+    const { data } = await api.get<RemoteOption[]>(field.optionsUrl);
+    const options = data
+      .map(toOption)
+      .filter((option): option is FilterOption => option !== null);
+    return { ...field, options };
+  } catch {
+    return { ...field, options: [] };
+  }
+};

package/src/hooks/use-filters.ts

@@ -0,0 +1,148 @@
+"use client";
+
+import { useCallback, useEffect, useMemo, useState } from "react";
+
+import type { AdvancedGroup, AdvancedValidation } from "#core/_utils/advanced-filter";
+import {
+  buildAdvancedFilter,
+  initialTree,
+  isAdvancedFilter,
+  parseAdvancedFilter,
+  validateTree,
+} from "#core/_utils/advanced-filter";
+import type { FilterField, FilterValues } from "#core/_utils/filter";
+import { buildFilter, parseFilterValues } from "#core/_utils/filter";
+import { useFilterSchema } from "#core/hooks/use-filter-schema";
+
+export type FilterMode = "simple" | "advanced";
+
+/** Estado completo dos filtros de uma listagem — repassado inteiro ao `DataTable`. */
+export interface FiltersState {
+  schema: FilterField[];
+  loading: boolean;
+  mode: FilterMode;
+  setMode: (mode: FilterMode) => void;
+  /** Modo simples: um campo, uma condição, tudo unido por `E`. */
+  values: FilterValues;
+  setValues: (values: FilterValues) => void;
+  /** Modo avançado: árvore de regras e grupos. */
+  tree: AdvancedGroup | null;
+  setTree: (tree: AdvancedGroup) => void;
+  /** Tetos do backend conferidos antes de enviar. */
+  validation: AdvancedValidation;
+  /** JSON pronto para a query — `undefined` quando não há filtro. */
+  filter: string | undefined;
+}
+
+const QUERY_PARAM = "filter";
+
+const writeToUrl = (encoded: string | undefined): void => {
+  const params = new URLSearchParams(window.location.search);
+  if (encoded) {
+    params.set(QUERY_PARAM, encoded);
+  } else {
+    params.delete(QUERY_PARAM);
+  }
+  const query = params.toString();
+  window.history.replaceState(
+    null,
+    "",
+    query ? `${window.location.pathname}?${query}` : window.location.pathname,
+  );
+};
+
+/**
+ * Estado dos filtros de uma listagem, espelhado na querystring.
+ *
+ * Espelhar na URL faz o filtro sobreviver ao F5 e virar link compartilhável.
+ * O espelho é `replaceState` e não `router.replace`: o filtro não é navegação,
+ * e trocá-lo não deve empilhar histórico nem refazer o render da rota.
+ */
+export function useFilters(schemaUrl: string): FiltersState {
+  const { schema, loading } = useFilterSchema(schemaUrl);
+
+  const [mode, setModeState] = useState<FilterMode>("simple");
+  const [values, setValuesState] = useState<FilterValues>({});
+  const [tree, setTreeState] = useState<AdvancedGroup | null>(null);
+  const [hydrated, setHydrated] = useState(false);
+
+  // Hidrata da URL uma vez, quando o catálogo chega: sem ele não dá para saber
+  // o tipo de cada campo, e portanto nem como ler o JSON. O combinador no topo
+  // do JSON é o que revela que o filtro veio do modo avançado.
+  useEffect(() => {
+    if (hydrated || loading) {
+      return;
+    }
+    const raw = new URLSearchParams(window.location.search).get(QUERY_PARAM);
+    if (raw && isAdvancedFilter(raw)) {
+      const parsed = parseAdvancedFilter(raw, schema);
+      if (parsed) {
+        setTreeState(parsed);
+        setModeState("advanced");
+      }
+    } else if (raw) {
+      setValuesState(parseFilterValues(raw, schema));
+    }
+    setHydrated(true);
+  }, [hydrated, loading, schema]);
+
+  const setValues = useCallback(
+    (next: FilterValues): void => {
+      setValuesState(next);
+      writeToUrl(buildFilter(next, schema));
+    },
+    [schema],
+  );
+
+  const setTree = useCallback(
+    (next: AdvancedGroup): void => {
+      setTreeState(next);
+      // Árvore acima dos tetos não vai para a URL nem para a API: o painel
+      // mostra o aviso e o filtro anterior continua valendo.
+      writeToUrl(
+        validateTree(next).valid ? buildAdvancedFilter(next, schema) : undefined,
+      );
+    },
+    [schema],
+  );
+
+  const setMode = useCallback(
+    (next: FilterMode): void => {
+      setModeState(next);
+      if (next === "advanced") {
+        // Entrar no avançado sem árvore começa com uma regra em branco.
+        setTreeState((current) => current ?? initialTree(schema));
+        return;
+      }
+      writeToUrl(buildFilter(values, schema));
+    },
+    [schema, values],
+  );
+
+  const validation = useMemo<AdvancedValidation>(
+    () => (tree ? validateTree(tree) : { valid: true }),
+    [tree],
+  );
+
+  const filter = useMemo(() => {
+    if (mode === "advanced") {
+      return tree && validation.valid
+        ? buildAdvancedFilter(tree, schema)
+        : undefined;
+    }
+    return buildFilter(values, schema);
+  }, [mode, tree, validation.valid, values, schema]);
+
+  return {
+    schema,
+    loading,
+    mode,
+    setMode,
+    values,
+    setValues,
+    tree,
+    setTree,
+    validation,
+    filter,
+  };
+}