rl-core-front 0.15.5 → 0.16.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rl-core-front",
-  "version": "0.15.5",
+  "version": "0.16.0",
   "description": "Telas e componentes Next.js do core: login com 2FA, usuários, RBAC, auditoria, logs e listagens com filtro dinâmico",
   "author": "Rodrigo Liberti",
   "license": "MIT",

package/src/_services/api/schema.d.ts

@@ -886,6 +886,86 @@ export interface paths {
         patch?: never;
         trace?: never;
     };
+    "/images/profiles": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get: operations["ImagesController_listProfiles"];
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/images/profiles/{name}": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get: operations["ImagesController_getProfile"];
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/images/{profile}": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        post: operations["ImagesController_upload"];
+        delete: operations["ImagesController_remove"];
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/images/{profile}/from-url": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        post: operations["ImagesController_uploadFromUrl"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/images/{jobId}/status": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get: operations["ImagesController_status"];
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
     "/jobs/{id}": {
         parameters: {
             query?: never;
@@ -1527,6 +1607,60 @@ export interface components {
             errorMessage: string | null;
         };
         StreamableFile: Record<string, never>;
+        ImageProfileResponse: {
+            /** @example funkos */
+            name: string;
+            /**
+             * @description Lado máximo em pixels — é teto, não obrigação
+             * @example 400
+             */
+            width: number;
+            /**
+             * @description Lado da caixa em que a imagem cabe. Com `inside`, a altura final segue a proporção da foto — este número é o teto, e é o que a tela usa para desenhar a área de envio
+             * @example 400
+             */
+            height?: number | null;
+            /**
+             * @example contain
+             * @enum {string}
+             */
+            fit: "contain" | "cover" | "inside";
+            /**
+             * @example webp
+             * @enum {string}
+             */
+            format: "webp" | "jpeg" | "png";
+            /** @example 8388608 */
+            maxBytes: number;
+            /**
+             * @description Vira o `accept` do seletor de arquivo
+             * @example [
+             *       "image/jpeg",
+             *       "image/png",
+             *       "image/webp"
+             *     ]
+             */
+            accept: string[];
+        };
+        ImageAcceptedResponse: {
+            /** @example 312 */
+            jobId: string | null;
+            /** @example /uploads/funkos/pending/6f1b2c34-9d55-4a1e-8f0a-2b7c1d9e4f10.webp */
+            path: string | null;
+        };
+        UploadImageFromUrlCommand: {
+            /** @example https://exemplo.com/ron.png */
+            url: string;
+        };
+        ImageStatusResponse: {
+            /** @example completed */
+            state: string;
+            /** @example 100 */
+            percent: number;
+            /** @example /uploads/funkos/pending/6f1b2c34-9d55-4a1e-8f0a-2b7c1d9e4f10.webp */
+            path: string | null;
+            errorMessage: string | null;
+        };
         JobProgressResponse: {
             /** @example 120 */
             processed: number;
@@ -3286,6 +3420,135 @@ export interface operations {
             };
         };
     };
+    ImagesController_listProfiles: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ImageProfileResponse"][];
+                };
+            };
+        };
+    };
+    ImagesController_getProfile: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path: {
+                name: string;
+            };
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ImageProfileResponse"];
+                };
+            };
+        };
+    };
+    ImagesController_upload: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path: {
+                profile: string;
+            };
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            202: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ImageAcceptedResponse"];
+                };
+            };
+        };
+    };
+    ImagesController_remove: {
+        parameters: {
+            query: {
+                path: string;
+            };
+            header?: never;
+            path: {
+                profile: string;
+            };
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            /** @description Apagada, ou já não existia */
+            204: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+        };
+    };
+    ImagesController_uploadFromUrl: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path: {
+                profile: string;
+            };
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["UploadImageFromUrlCommand"];
+            };
+        };
+        responses: {
+            202: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ImageAcceptedResponse"];
+                };
+            };
+        };
+    };
+    ImagesController_status: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path: {
+                jobId: string;
+            };
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ImageStatusResponse"];
+                };
+            };
+        };
+    };
     JobStatusController_status: {
         parameters: {
             query?: never;
@@ -3310,7 +3573,7 @@ export interface operations {
     QueueAdminController_counts: {
         parameters: {
             query?: {
-                queue?: "jobs" | "exports";
+                queue?: "jobs" | "exports" | "images";
             };
             header?: never;
             path?: never;
@@ -3336,7 +3599,7 @@ export interface operations {
                 limit: string;
                 sortBy?: "name" | "attemptsMade" | "percent" | "createdAt" | "failedReason";
                 sortDir?: "ASC" | "DESC";
-                queue?: "jobs" | "exports";
+                queue?: "jobs" | "exports" | "images";
             };
             header?: never;
             path?: never;
@@ -3357,7 +3620,7 @@ export interface operations {
     QueueAdminController_retry: {
         parameters: {
             query?: {
-                queue?: "jobs" | "exports";
+                queue?: "jobs" | "exports" | "images";
             };
             header?: never;
             path: {
@@ -3378,7 +3641,7 @@ export interface operations {
     QueueAdminController_remove: {
         parameters: {
             query?: {
-                queue?: "jobs" | "exports";
+                queue?: "jobs" | "exports" | "images";
             };
             header?: never;
             path: {

package/src/_services/images/index.ts

@@ -0,0 +1,81 @@
+import { api } from "#core/_services/api/axios.factory";
+
+/** Como a imagem é encaixada no tamanho do perfil (espelha o backend). */
+export enum ImageFit {
+  CONTAIN = "contain",
+  COVER = "cover",
+  INSIDE = "inside",
+}
+
+export enum ImageFormat {
+  WEBP = "webp",
+  JPEG = "jpeg",
+  PNG = "png",
+}
+
+/**
+ * O formato de saída, como o servidor o declara.
+ *
+ * É a fonte única do tamanho: a tela pergunta e obedece, e é isso que permite
+ * trocar 400×400 por 600×600 sem publicar interface nenhuma.
+ */
+export interface ImageProfileInfo {
+  name: string;
+  width: number;
+  height: number | null;
+  fit: ImageFit;
+  format: ImageFormat;
+  maxBytes: number;
+  accept: string[];
+}
+
+/**
+ * O que a rota de upload devolve.
+ *
+ * Com `jobId`, a conversão está na fila e o desfecho chega pelo socket; com
+ * `path`, ela já terminou — ambiente sem fila, ou imagem que ficou pronta antes
+ * de a resposta HTTP voltar.
+ */
+export interface ImageAccepted {
+  jobId: string | null;
+  path: string | null;
+}
+
+/** O resultado da conversão, como o evento de conclusão o traz. */
+export interface ImageJobSummary {
+  path: string;
+  width: number;
+  height: number;
+  bytes: number;
+}
+
+export const imagesService = {
+  profile: (name: string): Promise<ImageProfileInfo> =>
+    api.get<ImageProfileInfo>(`/images/profiles/${name}`).then((r) => r.data),
+
+  profiles: (): Promise<ImageProfileInfo[]> =>
+    api.get<ImageProfileInfo[]>("/images/profiles").then((r) => r.data),
+
+  /** Arquivo escolhido, arrastado ou colado — os três chegam por aqui. */
+  upload: (profile: string, file: File): Promise<ImageAccepted> => {
+    const form = new FormData();
+    form.append("file", file);
+
+    return api
+      .post<ImageAccepted>(`/images/${profile}`, form, {
+        headers: { "Content-Type": "multipart/form-data" },
+      })
+      .then((r) => r.data);
+  },
+
+  /** Endereço colado: quem baixa, converte e guarda é o servidor. */
+  fromUrl: (profile: string, url: string): Promise<ImageAccepted> =>
+    api
+      .post<ImageAccepted>(`/images/${profile}/from-url`, { url })
+      .then((r) => r.data),
+
+  remove: (profile: string, path: string): Promise<void> =>
+    api
+      .delete(`/images/${profile}`, { params: { path } })
+      .then(() => undefined),
+};

package/src/_utils/upload-url.ts

@@ -0,0 +1,27 @@
+/**
+ * Origem da API, sem o prefixo de versão.
+ *
+ * A API guarda a imagem como caminho (`/uploads/funkos/<id>.webp`) e a serve na
+ * própria origem — que não é a da interface. Compor a URL absoluta é
+ * necessário, e fica em um lugar só.
+ */
+const API_ORIGIN = (process.env.NEXT_PUBLIC_API_BASE_URL ?? "").replace(
+  /\/api\/v1\/?$/,
+  "",
+);
+
+/**
+ * Monta a URL absoluta de um arquivo enviado.
+ *
+ * Caminho vazio devolve `undefined` — é o que `<img src>` espera para não
+ * tentar carregar nada. Valor que já é absoluto passa direto: é o caso do
+ * avatar gravado por versões anteriores e de qualquer endereço externo que
+ * ainda esteja em base.
+ */
+export function uploadUrlOf(path?: string | null): string | undefined {
+  if (!path) {
+    return undefined;
+  }
+
+  return path.startsWith("http") ? path : `${API_ORIGIN}${path}`;
+}

package/src/components/index.ts

@@ -3,6 +3,7 @@ export * from "./app-shell";
 export * from "./brand-header";
 export * from "./brand-panel";
 export * from "./breadcrumbs";
+export * from "./job-dock";
 export * from "./language-selector";
 export * from "./password-field";
 export * from "./theme-toggle";

package/src/components/job-dock.tsx

@@ -0,0 +1,118 @@
+"use client";
+
+import { ChevronDown, ChevronUp, X } from "lucide-react";
+import type { JSX } from "react";
+import { useState } from "react";
+
+import { useI18n } from "#core/contexts/i18n-context";
+import { useJobs } from "#core/contexts/jobs-context";
+import { cn } from "#core/lib/utils";
+
+/**
+ * O painel dos trabalhos em segundo plano, no canto de baixo.
+ *
+ * Portado do `lw-tagvirtual`, onde este desenho já roda em produção. Três
+ * decisões vêm de lá e são o que o torna confiável:
+ *
+ * - **mora no provider**, não na tela: sair da página não interrompe o
+ *   acompanhamento, e é justamente aí que um upload demorado costuma estar;
+ * - **desmonta quando a lista esvazia** — sem lista, sem componente. Esconder
+ *   por classe é como nasce o painel que fica encalhado na tela;
+ * - **colapsa deslizando**, mantendo a faixa do título clicável: quem quer só
+ *   tirar isso da frente não precisa cancelar nada.
+ *
+ * Ele não conhece imagem, planilha nem relatório: recebe `{ label, percent,
+ * state }` e serve para qualquer job da fila.
+ */
+export function JobDock(): JSX.Element | null {
+  const { jobs, dismiss } = useJobs();
+  const { t } = useI18n();
+  const [open, setOpen] = useState(true);
+
+  if (jobs.length === 0) {
+    return null;
+  }
+
+  const failed = jobs.some((job) => job.state === "failed");
+
+  return (
+    <div
+      className={cn(
+        "fixed bottom-0 right-2 z-50 h-fit w-72 overflow-hidden rounded-t-lg border border-border shadow-lg transition-transform duration-150",
+        !open && "translate-y-[calc(100%-2rem)]",
+      )}
+    >
+      <button
+        type="button"
+        onClick={() => setOpen(!open)}
+        className={cn(
+          "flex h-8 w-full items-center justify-between px-3 text-xs font-medium",
+          failed
+            ? "bg-destructive text-destructive-foreground"
+            : "bg-primary text-primary-foreground",
+        )}
+      >
+        <span className="truncate">
+          {failed ? t("job.dockFailed") : t("job.dockRunning", { count: jobs.length })}
+        </span>
+        {open ? (
+          <ChevronDown className="h-3.5 w-3.5 shrink-0" />
+        ) : (
+          <ChevronUp className="h-3.5 w-3.5 shrink-0" />
+        )}
+      </button>
+
+      <div className="flex flex-col gap-2 bg-card px-3 py-2">
+        {jobs.map((job) => (
+          <div key={job.localId} className="space-y-1">
+            <div className="flex items-center gap-2">
+              <span className="min-w-0 flex-1 truncate text-xs text-foreground">
+                {job.label}
+              </span>
+              {job.state === "failed" ? (
+                <button
+                  type="button"
+                  aria-label={t("common.close")}
+                  onClick={() => dismiss(job.localId)}
+                  className="shrink-0 text-muted-foreground hover:text-foreground"
+                >
+                  <X className="h-3.5 w-3.5" />
+                </button>
+              ) : (
+                <span className="shrink-0 text-xs tabular-nums text-muted-foreground">
+                  {job.percent}%
+                </span>
+              )}
+            </div>
+
+            <div className="h-2 w-full overflow-hidden rounded-full bg-muted">
+              <div
+                className={cn(
+                  "h-full rounded-full transition-[width] duration-300",
+                  job.state === "failed" ? "bg-destructive" : "bg-primary",
+                  // Sem etapa contável, a barra fica cheia e listrada: dizer
+                  // "ainda estou aqui" é honesto, inventar 47% não é.
+                  job.state === "running" && job.percent === 0 && "rl-job-stripes",
+                )}
+                style={{
+                  width: job.state === "running" && job.percent === 0 ? "100%" : `${job.percent}%`,
+                }}
+              />
+            </div>
+
+            {(job.error ?? job.message) && (
+              <span
+                className={cn(
+                  "block truncate text-[11px]",
+                  job.error ? "text-destructive" : "text-muted-foreground",
+                )}
+              >
+                {job.error ?? job.message}
+              </span>
+            )}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}