rl-core-front 0.1.0

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

@@ -0,0 +1,183 @@
+"use client";
+
+import type {
+  ColumnDef,
+  OnChangeFn,
+  PaginationState,
+  SortingState,
+} from "@tanstack/react-table";
+import { Eye } from "lucide-react";
+import type { JSX } from "react";
+import { useMemo, useState } from "react";
+
+import {
+  Badge,
+  Button,
+  DataTable,
+  DataTableFeatures,
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  RowActions,
+} from "#core/components/ui";
+import { useI18n } from "#core/contexts";
+import { useErrorLogs } from "#core/features/logs/hooks/use-error-logs";
+import { ErrorLog, ErrorType } from "#core/features/logs/services/logs.service";
+
+function typeVariant(type: ErrorType): "warning" | "destructive" | "secondary" {
+  if (type === "DATABASE" || type === "INTEGRATION" || type === "INTERNAL")
+    {return "destructive";}
+  if (type === "VALIDATION") {return "secondary";}
+  return "warning";
+}
+
+export function ErrorLogsPanel(): JSX.Element {
+  const { t } = useI18n();
+  const logs = useErrorLogs();
+  const [detail, setDetail] = useState<ErrorLog | null>(null);
+
+  const columns = useMemo<ColumnDef<DataTableFeatures, ErrorLog, unknown>[]>(
+    () => [
+      {
+        accessorKey: "createdAt",
+        header: t("logs.date"),
+        meta: { label: t("logs.date") },
+        cell: ({ getValue }) => new Date(String(getValue())).toLocaleString(),
+      },
+      {
+        accessorKey: "type",
+        header: t("logs.type"),
+        meta: { label: t("logs.type") },
+        cell: ({ getValue }) => {
+          const type = getValue() as ErrorType;
+          return <Badge variant={typeVariant(type)}>{type}</Badge>;
+        },
+      },
+      {
+        accessorKey: "statusCode",
+        header: t("logs.status"),
+        meta: { label: t("logs.status") },
+      },
+      {
+        accessorKey: "message",
+        header: t("logs.message"),
+        meta: { label: t("logs.message") },
+        enableSorting: false,
+        cell: ({ getValue }) => (
+          <span className="line-clamp-1 max-w-md">{String(getValue())}</span>
+        ),
+      },
+      {
+        id: "user",
+        header: t("logs.user"),
+        meta: { label: t("logs.user") },
+        enableSorting: false,
+        cell: ({ row }) => row.original.user?.name ?? t("logs.systemUser"),
+      },
+      {
+        id: "actions",
+        header: () => <div className="text-center">{t("common.actions")}</div>,
+        meta: { shrink: true },
+        enableHiding: false,
+        enableSorting: false,
+        cell: ({ row }) => (
+          <RowActions>
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => setDetail(row.original)}
+            >
+              <Eye className="h-4 w-4" />
+              {t("logs.viewDetails")}
+            </Button>
+          </RowActions>
+        ),
+      },
+    ],
+     
+    [t],
+  );
+
+  const pagination: PaginationState = {
+    pageIndex: logs.page,
+    pageSize: logs.pageSize,
+  };
+  const onPaginationChange: OnChangeFn<PaginationState> = (updater) => {
+    const next = typeof updater === "function" ? updater(pagination) : updater;
+    if (next.pageSize !== logs.pageSize) {
+      logs.setPageSize(next.pageSize);
+      logs.setPage(0);
+    } else if (next.pageIndex !== logs.page) {
+      logs.setPage(next.pageIndex);
+    }
+  };
+  const onSortingChange: OnChangeFn<SortingState> = (updater) => {
+    const next =
+      typeof updater === "function" ? updater(logs.sorting) : updater;
+    logs.setSorting(next);
+    logs.setPage(0);
+  };
+
+  return (
+    <div>
+      <DataTable
+        columns={columns}
+        data={logs.rows}
+        getRowId={(r) => r.id}
+        storageKey="logs-errors"
+        loading={logs.loading}
+        manualPagination
+        rowCount={logs.total}
+        pagination={pagination}
+        onPaginationChange={onPaginationChange}
+        manualSorting
+        sorting={logs.sorting}
+        onSortingChange={onSortingChange}
+        filters={logs.filters}
+      />
+
+      <Dialog open={!!detail} onOpenChange={(o) => !o && setDetail(null)}>
+        <DialogContent className="max-w-2xl">
+          <DialogHeader>
+            <DialogTitle>
+              {t("logs.detailsTitle")} — {detail?.type} ({detail?.statusCode})
+            </DialogTitle>
+          </DialogHeader>
+          {detail && (
+            <div className="flex min-w-0 flex-col gap-3 text-sm">
+              <div>
+                <span className="font-medium">{t("logs.route")}: </span>
+                <span className="font-mono text-xs">
+                  {detail.method} {detail.path}
+                </span>
+              </div>
+              <div>
+                <span className="font-medium">{t("logs.message")}: </span>
+                {detail.message}
+              </div>
+              <div>
+                <span className="font-medium">{t("logs.user")}: </span>
+                {detail.user?.name ?? t("logs.systemUser")}
+              </div>
+              <div>
+                <span className="font-medium">{t("logs.requestId")}: </span>
+                <span className="font-mono text-xs">
+                  {detail.requestId ?? "—"}
+                </span>
+              </div>
+              {detail.stack && (
+                <div className="min-w-0">
+                  <p className="mb-1 font-medium">{t("logs.stackTrace")}</p>
+                  <pre className="max-h-64 min-w-0 max-w-full overflow-auto rounded-md bg-muted p-3 text-xs">
+                    {detail.stack}
+                  </pre>
+                </div>
+              )}
+            </div>
+          )}
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}

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

@@ -0,0 +1,3 @@
+// Barrel da pasta — importe daqui de fora; dentro da pasta use o caminho direto.
+export * from "./error-logs-panel";
+export * from "./request-logs-panel";

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

@@ -0,0 +1,124 @@
+"use client";
+
+import type {
+  ColumnDef,
+  OnChangeFn,
+  PaginationState,
+  SortingState,
+} from "@tanstack/react-table";
+import type { JSX } from "react";
+import { useMemo } from "react";
+
+import { Badge, DataTable, DataTableFeatures } from "#core/components/ui";
+import { useI18n } from "#core/contexts";
+import { useRequestLogs } from "#core/features/logs/hooks/use-request-logs";
+import { RequestLog } from "#core/features/logs/services/logs.service";
+
+function statusVariant(
+  status?: number | null,
+): "success" | "warning" | "destructive" | "secondary" {
+  if (!status) {return "secondary";}
+  if (status >= 500) {return "destructive";}
+  if (status >= 400) {return "warning";}
+  if (status >= 200 && status < 300) {return "success";}
+  return "secondary";
+}
+
+export function RequestLogsPanel(): JSX.Element {
+  const { t } = useI18n();
+  const logs = useRequestLogs();
+
+  const columns = useMemo<ColumnDef<DataTableFeatures, RequestLog, unknown>[]>(
+    () => [
+      {
+        accessorKey: "createdAt",
+        header: t("logs.date"),
+        meta: { label: t("logs.date") },
+        cell: ({ getValue }) => new Date(String(getValue())).toLocaleString(),
+      },
+      {
+        accessorKey: "action",
+        header: t("logs.route"),
+        meta: { label: t("logs.route") },
+        enableSorting: false,
+        cell: ({ getValue }) => (
+          <span className="font-mono text-xs">{String(getValue())}</span>
+        ),
+      },
+      {
+        accessorKey: "statusCode",
+        header: t("logs.status"),
+        meta: { label: t("logs.status") },
+        cell: ({ getValue }) => {
+          const status = getValue() as number | null;
+          return <Badge variant={statusVariant(status)}>{status ?? "—"}</Badge>;
+        },
+      },
+      {
+        accessorKey: "durationMs",
+        header: t("logs.duration"),
+        meta: { label: t("logs.duration") },
+        cell: ({ getValue }) => {
+          const ms = getValue() as number | null;
+          return ms != null ? `${ms}ms` : "—";
+        },
+      },
+      {
+        id: "user",
+        header: t("logs.user"),
+        meta: { label: t("logs.user") },
+        enableSorting: false,
+        cell: ({ row }) => row.original.user?.name ?? t("logs.systemUser"),
+      },
+      {
+        accessorKey: "ipAddress",
+        header: t("logs.ip"),
+        meta: { label: t("logs.ip") },
+        enableSorting: false,
+        cell: ({ getValue }) => (
+          <span className="font-mono text-xs">{String(getValue() ?? "—")}</span>
+        ),
+      },
+    ],
+     
+    [t],
+  );
+
+  const pagination: PaginationState = {
+    pageIndex: logs.page,
+    pageSize: logs.pageSize,
+  };
+  const onPaginationChange: OnChangeFn<PaginationState> = (updater) => {
+    const next = typeof updater === "function" ? updater(pagination) : updater;
+    if (next.pageSize !== logs.pageSize) {
+      logs.setPageSize(next.pageSize);
+      logs.setPage(0);
+    } else if (next.pageIndex !== logs.page) {
+      logs.setPage(next.pageIndex);
+    }
+  };
+  const onSortingChange: OnChangeFn<SortingState> = (updater) => {
+    const next =
+      typeof updater === "function" ? updater(logs.sorting) : updater;
+    logs.setSorting(next);
+    logs.setPage(0);
+  };
+
+  return (
+    <DataTable
+      columns={columns}
+      data={logs.rows}
+      getRowId={(r) => r.id}
+      storageKey="logs-requests"
+      loading={logs.loading}
+      manualPagination
+      rowCount={logs.total}
+      pagination={pagination}
+      onPaginationChange={onPaginationChange}
+      manualSorting
+      sorting={logs.sorting}
+      onSortingChange={onSortingChange}
+        filters={logs.filters}
+    />
+  );
+}

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

@@ -0,0 +1,68 @@
+import { api } from "#core/_services/api/axios.factory";
+import type { ListQuery } from "#core/_services/api/list-query";
+import { toListParams } from "#core/_services/api/list-query";
+
+export type ErrorType =
+  | "VALIDATION"
+  | "AUTH"
+  | "NOT_FOUND"
+  | "RATE_LIMIT"
+  | "DATABASE"
+  | "INTEGRATION"
+  | "INTERNAL";
+
+export interface LogUserRef {
+  id: string;
+  name: string;
+  email: string;
+}
+
+export interface RequestLog {
+  id: string;
+  createdAt: string;
+  userId?: string | null;
+  action: string;
+  method?: string | null;
+  path?: string | null;
+  ipAddress?: string | null;
+  statusCode?: number | null;
+  durationMs?: number | null;
+  requestId?: string | null;
+  user?: LogUserRef | null;
+}
+
+export interface ErrorLog {
+  id: string;
+  createdAt: string;
+  statusCode?: number | null;
+  type: ErrorType;
+  message: string;
+  stack?: string | null;
+  method?: string | null;
+  path?: string | null;
+  userId?: string | null;
+  ipAddress?: string | null;
+  requestId?: string | null;
+  user?: LogUserRef | null;
+}
+
+export interface Paginated<T> {
+  items: T[];
+  meta: { total: number; page: number; limit: number; totalPages: number };
+}
+
+export const logsService = {
+  listRequests(query: ListQuery) {
+    return api
+      .get<Paginated<RequestLog>>("/audit/changes", {
+        params: toListParams(query),
+      })
+      .then((r) => r.data);
+  },
+
+  listErrors(query: ListQuery) {
+    return api
+      .get<Paginated<ErrorLog>>("/audit/errors", { params: toListParams(query) })
+      .then((r) => r.data);
+  },
+};

package/src/features/notifications/components/notification-item.tsx

@@ -0,0 +1,67 @@
+"use client";
+
+import { AlertTriangle, CheckCircle2, Info, XCircle } from "lucide-react";
+import type { JSX } from "react";
+
+import { formatDateTime } from "#core/_utils/format";
+import { useI18n } from "#core/contexts";
+import type {
+  NotificationType,
+  UserNotification,
+} from "#core/features/notifications/services/notifications.service";
+import { cn } from "#core/lib/utils";
+
+const ICONS: Record<NotificationType, JSX.Element> = {
+  INFO: <Info className="h-4 w-4 text-sky-500" />,
+  SUCCESS: <CheckCircle2 className="h-4 w-4 text-emerald-500" />,
+  WARNING: <AlertTriangle className="h-4 w-4 text-amber-500" />,
+  ERROR: <XCircle className="h-4 w-4 text-destructive" />,
+};
+
+export interface NotificationItemProps {
+  notification: UserNotification;
+  onSelect: (notification: UserNotification) => void;
+}
+
+export function NotificationItem({
+  notification,
+  onSelect,
+}: NotificationItemProps): JSX.Element {
+  const { locale } = useI18n();
+
+  return (
+    <button
+      type="button"
+      onClick={() => onSelect(notification)}
+      className={cn(
+        "flex w-full gap-3 border-b border-border px-4 py-3 text-left transition-colors hover:bg-accent",
+        !notification.read && "bg-accent/40",
+      )}
+    >
+      <span className="mt-0.5 shrink-0">{ICONS[notification.type]}</span>
+
+      <span className="min-w-0 flex-1">
+        <span className="flex items-center gap-2">
+          <span
+            className={cn(
+              "truncate text-sm",
+              notification.read ? "text-foreground" : "font-semibold",
+            )}
+          >
+            {notification.title}
+          </span>
+          {!notification.read && (
+            <span className="h-2 w-2 shrink-0 rounded-full bg-primary" />
+          )}
+        </span>
+
+        <span className="mt-0.5 block text-xs text-muted-foreground">
+          {notification.body}
+        </span>
+        <span className="mt-1 block text-[11px] text-muted-foreground">
+          {formatDateTime(notification.createdAt, locale)}
+        </span>
+      </span>
+    </button>
+  );
+}

package/src/features/notifications/hooks/use-notifications.ts

@@ -0,0 +1,78 @@
+"use client";
+
+import { useCallback, useEffect, useState } from "react";
+
+import { useSocket } from "#core/contexts/socket-context";
+import {
+  NOTIFICATION_CREATED_EVENT,
+  notificationsService,
+  UserNotification,
+} from "#core/features/notifications/services/notifications.service";
+import { useRequest } from "#core/hooks/use-request";
+
+/** Quantas o sino carrega de uma vez. O histórico completo não cabe no popover. */
+const PAGE_SIZE = 20;
+
+export interface UseNotificationsResult {
+  items: UserNotification[];
+  unread: number;
+  loading: boolean;
+  fetch: () => Promise<void>;
+  markAsRead: (id: string) => Promise<void>;
+  markAllAsRead: () => Promise<void>;
+}
+
+export function useNotifications(): UseNotificationsResult {
+  const { run, loading } = useRequest();
+  const { on, reconnectCount } = useSocket();
+
+  const [items, setItems] = useState<UserNotification[]>([]);
+
+  const unread = items.filter((item) => !item.read).length;
+
+  const fetch = useCallback(async () => {
+    const page = await run(() => notificationsService.list(1, PAGE_SIZE));
+    if (page) {
+      setItems(page.items);
+    }
+  }, [run]);
+
+  // Carga inicial e, de novo, a cada reconexão: enquanto o socket esteve fora
+  // chegaram notificações que ninguém empurrou para esta aba.
+  useEffect(() => {
+    void fetch();
+  }, [fetch, reconnectCount]);
+
+  // Sem toast aqui: o badge do sino já é o aviso, e disparar os dois pelo mesmo
+  // evento faz o usuário descartar a mesma informação duas vezes.
+  useEffect(() => {
+    return on<UserNotification>(NOTIFICATION_CREATED_EVENT, (notification) => {
+      // O evento já traz a notificação inteira: inserir no topo evita refazer
+      // a listagem a cada chegada.
+      setItems((current) => {
+        if (current.some((item) => item.id === notification.id)) {
+          return current;
+        }
+        return [notification, ...current];
+      });
+    });
+  }, [on]);
+
+  const markAsRead = useCallback(
+    async (id: string) => {
+      // Otimista: o badge responde ao clique, e o servidor confirma depois.
+      setItems((current) =>
+        current.map((item) => (item.id === id ? { ...item, read: true } : item)),
+      );
+      await run(() => notificationsService.markAsRead(id));
+    },
+    [run],
+  );
+
+  const markAllAsRead = useCallback(async () => {
+    setItems((current) => current.map((item) => ({ ...item, read: true })));
+    await run(() => notificationsService.markAllAsRead());
+  }, [run]);
+
+  return { items, unread, loading, fetch, markAsRead, markAllAsRead };
+}

package/src/features/notifications/notifications-center.tsx

@@ -0,0 +1,119 @@
+"use client";
+
+import { Bell } from "lucide-react";
+import { useRouter } from "next/navigation";
+import type { JSX } from "react";
+import { useState } from "react";
+
+import {
+  Button,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+  Spinner,
+} from "#core/components/ui";
+import { useI18n } from "#core/contexts";
+import { NotificationItem } from "#core/features/notifications/components/notification-item";
+import { useNotifications } from "#core/features/notifications/hooks/use-notifications";
+import type { UserNotification } from "#core/features/notifications/services/notifications.service";
+import { cn } from "#core/lib/utils";
+
+type Tab = "all" | "unread";
+
+/** Acima disso o número não cabe no badge sem empurrar o layout. */
+const BADGE_LIMIT = 99;
+
+export function NotificationsCenter(): JSX.Element {
+  const { t } = useI18n();
+  const router = useRouter();
+  const { items, unread, loading, markAsRead, markAllAsRead } =
+    useNotifications();
+  const [tab, setTab] = useState<Tab>("all");
+
+  const visible = tab === "unread" ? items.filter((i) => !i.read) : items;
+
+  const onSelect = (notification: UserNotification): void => {
+    if (!notification.read) {
+      void markAsRead(notification.id);
+    }
+    if (notification.route) {
+      // router.push preserva o estado do app; window.location recarregaria tudo.
+      router.push(notification.route);
+    }
+  };
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          variant="ghost"
+          size="icon"
+          className="relative"
+          aria-label={t("notifications.title")}
+        >
+          <Bell className="h-5 w-5" />
+          {unread > 0 && (
+            <span className="absolute right-0.5 top-0.5 flex h-4 min-w-4 items-center justify-center rounded-full bg-destructive px-1 text-[10px] font-semibold leading-none text-destructive-foreground">
+              {unread > BADGE_LIMIT ? `${BADGE_LIMIT}+` : unread}
+            </span>
+          )}
+        </Button>
+      </DropdownMenuTrigger>
+
+      <DropdownMenuContent align="end" className="w-96 p-0">
+        <div className="flex items-center justify-between border-b border-border px-4 py-2">
+          <div className="flex gap-3">
+            {(["all", "unread"] as const).map((value) => (
+              <button
+                key={value}
+                type="button"
+                onClick={() => setTab(value)}
+                className={cn(
+                  "border-b-2 pb-1 text-sm transition-colors",
+                  tab === value
+                    ? "border-primary font-medium text-foreground"
+                    : "border-transparent text-muted-foreground hover:text-foreground",
+                )}
+              >
+                {value === "all"
+                  ? t("notifications.all")
+                  : t("notifications.unread")}
+              </button>
+            ))}
+          </div>
+
+          <button
+            type="button"
+            onClick={() => void markAllAsRead()}
+            disabled={unread === 0}
+            className="text-xs font-medium text-primary hover:underline disabled:cursor-not-allowed disabled:text-muted-foreground disabled:no-underline"
+          >
+            {t("notifications.markAllRead")}
+          </button>
+        </div>
+
+        <div className="max-h-96 overflow-y-auto">
+          {loading && items.length === 0 && (
+            <div className="flex justify-center py-8">
+              <Spinner />
+            </div>
+          )}
+
+          {!loading && visible.length === 0 && (
+            <p className="px-4 py-8 text-center text-sm text-muted-foreground">
+              {t("notifications.empty")}
+            </p>
+          )}
+
+          {visible.map((notification) => (
+            <NotificationItem
+              key={notification.id}
+              notification={notification}
+              onSelect={onSelect}
+            />
+          ))}
+        </div>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

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

@@ -0,0 +1,38 @@
+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 UserNotification = components["schemas"]["UserNotificationResponse"];
+export type NotificationType = UserNotification["type"];
+
+export interface PaginatedNotifications {
+  items: UserNotification[];
+  meta: components["schemas"]["PaginationMetaResponse"];
+}
+
+/** Evento de push do socket — mesma forma da notificação da listagem. */
+export const NOTIFICATION_CREATED_EVENT = "notification:created";
+
+export const notificationsService = {
+  list(page: number, limit: number) {
+    return api
+      .get<PaginatedNotifications>("/notifications", {
+        params: { page, limit },
+      })
+      .then((r) => r.data);
+  },
+
+  unreadCount() {
+    return api
+      .get<{ unread: number }>("/notifications/unread-count")
+      .then((r) => r.data.unread);
+  },
+
+  markAsRead(id: string) {
+    return api.patch(`/notifications/${id}/read`, {}).then((r) => r.data);
+  },
+
+  markAllAsRead() {
+    return api.patch("/notifications/read-all", {}).then((r) => r.data);
+  },
+};