rl-core-front 0.2.0 → 0.4.0

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

@@ -1,183 +0,0 @@
-"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>
-  );
-}