@spaceinvoices/react-ui 0.4.8 → 0.4.10

package/src/components/request-logs/locales.ts

@@ -0,0 +1,412 @@
+const en = {
+  "Search...": "Search...",
+  Search: "Search",
+  "Clear search": "Clear search",
+  Filters: "Filters",
+  "Clear filters": "Clear filters",
+  "Date Range": "Date Range",
+  From: "From",
+  To: "To",
+  Status: "Status",
+  Method: "Method",
+  Date: "Date",
+  Entity: "Entity",
+  Resource: "Resource",
+  Path: "Path",
+  Time: "Time",
+  Copy: "Copy",
+  Request: "Request",
+  Response: "Response",
+  Headers: "Headers",
+  Action: "Opération",
+  ID: "ID",
+  "Request ID": "Request ID",
+  "Copy to clipboard": "Copy to clipboard",
+  "No request body data": "No request body data",
+  "No response body data": "No response body data",
+  "No headers data": "No headers data",
+  "2xx Success": "2xx Success",
+  "4xx Client Error": "4xx Client Error",
+  "5xx Server Error": "5xx Server Error",
+  "No results found": "No results found",
+  "Try adjusting your search criteria": "Try adjusting your search criteria",
+  "Your list is empty": "Your list is empty",
+  "Get started by creating your first entry": "Get started by creating your first entry",
+  "Create new": "Create new",
+  "Clear all": "Clear all",
+  "Previous page": "Previous page",
+  "Next page": "Next page",
+} as const;
+
+const sl = {
+  "Search...": "Išči...",
+  Search: "Išči",
+  "Clear search": "Počisti iskanje",
+  Filters: "Filtri",
+  "Clear filters": "Počisti filtre",
+  "Date Range": "Datumski razpon",
+  From: "Od",
+  To: "Do",
+  Status: "Status",
+  Method: "Metoda",
+  Date: "Datum",
+  Entity: "Entiteta",
+  Resource: "Vir",
+  Path: "Pot",
+  Time: "Čas",
+  Copy: "Kopiraj",
+  Request: "Zahteva",
+  Response: "Odgovor",
+  Headers: "Glave",
+  Action: "Dejanje",
+  ID: "ID",
+  "Request ID": "ID zahteve",
+  "Copy to clipboard": "Kopirano v odložišče",
+  "No request body data": "Ni podatkov telesa zahteve",
+  "No response body data": "Ni podatkov telesa odgovora",
+  "No headers data": "Ni podatkov glav",
+  "2xx Success": "2xx Uspešno",
+  "4xx Client Error": "4xx Napaka odjemalca",
+  "5xx Server Error": "5xx Napaka strežnika",
+  "No results found": "Ni rezultatov",
+  "Try adjusting your search criteria": "Poskusite prilagoditi iskalne pogoje",
+  "Your list is empty": "Seznam je prazen",
+  "Get started by creating your first entry": "Začnite z ustvarjanjem prvega vnosa",
+  "Create new": "Ustvari novo",
+  "Clear all": "Počisti vse",
+  "Previous page": "Prejšnja stran",
+  "Next page": "Naslednja stran",
+} as const;
+
+const de = {
+  "Search...": "Suchen...",
+  Search: "Suchen",
+  "Clear search": "Suche löschen",
+  Filters: "Filter",
+  "Clear filters": "Filter löschen",
+  "Date Range": "Datumsbereich",
+  From: "Von",
+  To: "Bis",
+  Status: "Status",
+  Method: "Methode",
+  Date: "Datum",
+  Entity: "Entität",
+  Resource: "Ressource",
+  Path: "Pfad",
+  Time: "Zeit",
+  Copy: "Kopieren",
+  Request: "Anfrage",
+  Response: "Antwort",
+  Headers: "Header",
+  Action: "Aktion",
+  ID: "ID",
+  "Request ID": "Request-ID",
+  "Copy to clipboard": "In die Zwischenablage kopieren",
+  "No request body data": "Keine Request-Body-Daten",
+  "No response body data": "Keine Response-Body-Daten",
+  "No headers data": "Keine Header-Daten",
+  "2xx Success": "2xx Erfolg",
+  "4xx Client Error": "4xx Client-Fehler",
+  "5xx Server Error": "5xx Server-Fehler",
+  "No results found": "Keine Ergebnisse gefunden",
+  "Try adjusting your search criteria": "Versuchen Sie, Ihre Suchkriterien anzupassen",
+  "Your list is empty": "Ihre Liste ist leer",
+  "Get started by creating your first entry": "Erstellen Sie Ihren ersten Eintrag",
+  "Create new": "Neu erstellen",
+  "Clear all": "Alles löschen",
+  "Previous page": "Vorherige Seite",
+  "Next page": "Nächste Seite",
+} as const;
+
+const it = {
+  "Search...": "Cerca...",
+  Search: "Cerca",
+  "Clear search": "Cancella ricerca",
+  Filters: "Filtri",
+  "Clear filters": "Cancella filtri",
+  "Date Range": "Intervallo di date",
+  From: "Da",
+  To: "A",
+  Status: "Stato",
+  Method: "Metodo",
+  Date: "Data",
+  Entity: "Entità",
+  Resource: "Risorsa",
+  Path: "Percorso",
+  Time: "Ora",
+  Copy: "Copia",
+  Request: "Richiesta",
+  Response: "Risposta",
+  Headers: "Intestazioni",
+  Action: "Azione",
+  ID: "ID",
+  "Request ID": "ID richiesta",
+  "Copy to clipboard": "Copia negli appunti",
+  "No request body data": "Nessun dato del corpo della richiesta",
+  "No response body data": "Nessun dato del corpo della risposta",
+  "No headers data": "Nessun dato delle intestazioni",
+  "2xx Success": "2xx Successo",
+  "4xx Client Error": "4xx Errore client",
+  "5xx Server Error": "5xx Errore server",
+  "No results found": "Nessun risultato trovato",
+  "Try adjusting your search criteria": "Prova a modificare i criteri di ricerca",
+  "Your list is empty": "La tua lista è vuota",
+  "Get started by creating your first entry": "Inizia creando il tuo primo elemento",
+  "Create new": "Crea nuovo",
+  "Clear all": "Cancella tutto",
+  "Previous page": "Pagina precedente",
+  "Next page": "Pagina successiva",
+} as const;
+
+const fr = {
+  "Search...": "Rechercher...",
+  Search: "Rechercher",
+  "Clear search": "Effacer la recherche",
+  Filters: "Filtres",
+  "Clear filters": "Effacer les filtres",
+  "Date Range": "Plage de dates",
+  From: "De",
+  To: "À",
+  Status: "Statut",
+  Method: "Méthode",
+  Date: "Date",
+  Entity: "Entité",
+  Resource: "Ressource",
+  Path: "Chemin",
+  Time: "Heure",
+  Copy: "Copier",
+  Request: "Requête",
+  Response: "Réponse",
+  Headers: "En-têtes",
+  Action: "Action",
+  ID: "ID",
+  "Request ID": "ID de requête",
+  "Copy to clipboard": "Copier dans le presse-papiers",
+  "No request body data": "Aucune donnée de corps de requête",
+  "No response body data": "Aucune donnée de corps de réponse",
+  "No headers data": "Aucune donnée d'en-têtes",
+  "2xx Success": "2xx Succès",
+  "4xx Client Error": "4xx Erreur client",
+  "5xx Server Error": "5xx Erreur serveur",
+  "No results found": "Aucun résultat trouvé",
+  "Try adjusting your search criteria": "Essayez d'ajuster vos critères de recherche",
+  "Your list is empty": "Votre liste est vide",
+  "Get started by creating your first entry": "Commencez par créer votre première entrée",
+  "Create new": "Créer",
+  "Clear all": "Tout effacer",
+  "Previous page": "Page précédente",
+  "Next page": "Page suivante",
+} as const;
+
+const es = {
+  "Search...": "Buscar...",
+  Search: "Buscar",
+  "Clear search": "Borrar búsqueda",
+  Filters: "Filtros",
+  "Clear filters": "Limpiar filtros",
+  "Date Range": "Rango de fechas",
+  From: "Desde",
+  To: "Hasta",
+  Status: "Estado",
+  Method: "Método",
+  Date: "Fecha",
+  Entity: "Entidad",
+  Resource: "Recurso",
+  Path: "Ruta",
+  Time: "Hora",
+  Copy: "Copiar",
+  Request: "Solicitud",
+  Response: "Respuesta",
+  Headers: "Encabezados",
+  Action: "Acción",
+  ID: "ID",
+  "Request ID": "ID de solicitud",
+  "Copy to clipboard": "Copiar al portapapeles",
+  "No request body data": "Sin datos del cuerpo de la solicitud",
+  "No response body data": "Sin datos del cuerpo de la respuesta",
+  "No headers data": "Sin datos de encabezados",
+  "2xx Success": "2xx Correcto",
+  "4xx Client Error": "4xx Error del cliente",
+  "5xx Server Error": "5xx Error del servidor",
+  "No results found": "No se encontraron resultados",
+  "Try adjusting your search criteria": "Prueba a ajustar tus criterios de búsqueda",
+  "Your list is empty": "Tu lista está vacía",
+  "Get started by creating your first entry": "Empieza creando tu primera entrada",
+  "Create new": "Crear nuevo",
+  "Clear all": "Limpiar todo",
+  "Previous page": "Página anterior",
+  "Next page": "Página siguiente",
+} as const;
+
+const pt = {
+  "Search...": "Pesquisar...",
+  Search: "Pesquisar",
+  "Clear search": "Limpar pesquisa",
+  Filters: "Filtros",
+  "Clear filters": "Limpar filtros",
+  "Date Range": "Intervalo de datas",
+  From: "De",
+  To: "Até",
+  Status: "Estado",
+  Method: "Método",
+  Date: "Data",
+  Entity: "Entidade",
+  Resource: "Recurso",
+  Path: "Caminho",
+  Time: "Hora",
+  Copy: "Copiar",
+  Request: "Pedido",
+  Response: "Resposta",
+  Headers: "Cabeçalhos",
+  Action: "Ação",
+  ID: "ID",
+  "Request ID": "ID do pedido",
+  "Copy to clipboard": "Copiar para a área de transferência",
+  "No request body data": "Sem dados do corpo do pedido",
+  "No response body data": "Sem dados do corpo da resposta",
+  "No headers data": "Sem dados de cabeçalhos",
+  "2xx Success": "2xx Sucesso",
+  "4xx Client Error": "4xx Erro do cliente",
+  "5xx Server Error": "5xx Erro do servidor",
+  "No results found": "Nenhum resultado encontrado",
+  "Try adjusting your search criteria": "Tente ajustar os seus critérios de pesquisa",
+  "Your list is empty": "A sua lista está vazia",
+  "Get started by creating your first entry": "Comece por criar a sua primeira entrada",
+  "Create new": "Criar novo",
+  "Clear all": "Limpar tudo",
+  "Previous page": "Página anterior",
+  "Next page": "Página seguinte",
+} as const;
+
+const nl = {
+  "Search...": "Zoeken...",
+  Search: "Zoeken",
+  "Clear search": "Zoekopdracht wissen",
+  Filters: "Filters",
+  "Clear filters": "Filters wissen",
+  "Date Range": "Datumbereik",
+  From: "Van",
+  To: "Tot",
+  Status: "Status",
+  Method: "Methode",
+  Date: "Datum",
+  Entity: "Entiteit",
+  Resource: "Resource",
+  Path: "Pad",
+  Time: "Tijd",
+  Copy: "Kopiëren",
+  Request: "Verzoek",
+  Response: "Respons",
+  Headers: "Kopteksten",
+  Action: "Actie",
+  ID: "ID",
+  "Request ID": "Request-ID",
+  "Copy to clipboard": "Kopiëren naar klembord",
+  "No request body data": "Geen gegevens in request-body",
+  "No response body data": "Geen gegevens in response-body",
+  "No headers data": "Geen headergegevens",
+  "2xx Success": "2xx Succes",
+  "4xx Client Error": "4xx Clientfout",
+  "5xx Server Error": "5xx Serverfout",
+  "No results found": "Geen resultaten gevonden",
+  "Try adjusting your search criteria": "Probeer je zoekcriteria aan te passen",
+  "Your list is empty": "Je lijst is leeg",
+  "Get started by creating your first entry": "Begin met het maken van je eerste item",
+  "Create new": "Nieuw maken",
+  "Clear all": "Alles wissen",
+  "Previous page": "Vorige pagina",
+  "Next page": "Volgende pagina",
+} as const;
+
+const pl = {
+  "Search...": "Szukaj...",
+  Search: "Szukaj",
+  "Clear search": "Wyczyść wyszukiwanie",
+  Filters: "Filtry",
+  "Clear filters": "Wyczyść filtry",
+  "Date Range": "Zakres dat",
+  From: "Od",
+  To: "Do",
+  Status: "Status",
+  Method: "Metoda",
+  Date: "Data",
+  Entity: "Encja",
+  Resource: "Zasób",
+  Path: "Ścieżka",
+  Time: "Czas",
+  Copy: "Kopiuj",
+  Request: "Żądanie",
+  Response: "Odpowiedź",
+  Headers: "Nagłówki",
+  Action: "Akcja",
+  ID: "ID",
+  "Request ID": "ID żądania",
+  "Copy to clipboard": "Kopiuj do schowka",
+  "No request body data": "Brak danych treści żądania",
+  "No response body data": "Brak danych treści odpowiedzi",
+  "No headers data": "Brak danych nagłówków",
+  "2xx Success": "2xx Sukces",
+  "4xx Client Error": "4xx Błąd klienta",
+  "5xx Server Error": "5xx Błąd serwera",
+  "No results found": "Nie znaleziono wyników",
+  "Try adjusting your search criteria": "Spróbuj dostosować kryteria wyszukiwania",
+  "Your list is empty": "Twoja lista jest pusta",
+  "Get started by creating your first entry": "Zacznij od utworzenia pierwszego wpisu",
+  "Create new": "Utwórz nowy",
+  "Clear all": "Wyczyść wszystko",
+  "Previous page": "Poprzednia strona",
+  "Next page": "Następna strona",
+} as const;
+
+const hr = {
+  "Search...": "Pretraži...",
+  Search: "Pretraži",
+  "Clear search": "Očisti pretragu",
+  Filters: "Filtri",
+  "Clear filters": "Očisti filtre",
+  "Date Range": "Datumski raspon",
+  From: "Od",
+  To: "Do",
+  Status: "Status",
+  Method: "Metoda",
+  Date: "Datum",
+  Entity: "Entitet",
+  Resource: "Resurs",
+  Path: "Putanja",
+  Time: "Vrijeme",
+  Copy: "Kopiraj",
+  Request: "Zahtjev",
+  Response: "Odgovor",
+  Headers: "Zaglavlja",
+  Action: "Radnja",
+  ID: "ID",
+  "Request ID": "ID zahtjeva",
+  "Copy to clipboard": "Kopiraj u međuspremnik",
+  "No request body data": "Nema podataka tijela zahtjeva",
+  "No response body data": "Nema podataka tijela odgovora",
+  "No headers data": "Nema podataka zaglavlja",
+  "2xx Success": "2xx Uspjeh",
+  "4xx Client Error": "4xx Greška klijenta",
+  "5xx Server Error": "5xx Greška poslužitelja",
+  "No results found": "Nema rezultata",
+  "Try adjusting your search criteria": "Pokušajte prilagoditi kriterije pretrage",
+  "Your list is empty": "Vaš popis je prazan",
+  "Get started by creating your first entry": "Započnite stvaranjem prve stavke",
+  "Create new": "Stvori novo",
+  "Clear all": "Očisti sve",
+  "Previous page": "Prethodna stranica",
+  "Next page": "Sljedeća stranica",
+} as const;
+
+export default {
+  en,
+  sl,
+  de,
+  it,
+  fr,
+  es,
+  pt,
+  nl,
+  pl,
+  hr,
+} as const;

package/src/components/request-logs/request-log-detail.tsx

@@ -5,17 +5,20 @@ import { Check, Copy } from "lucide-react";
 import { useState } from "react";
 import { Button } from "@/ui/components/ui/button";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/ui/components/ui/tabs";
+import { getDateFnsLocale } from "@/ui/lib/date-fns-locale";
 import { cn } from "../../lib/utils";
 import type { RequestLogResponse } from "./request-log-list-table";
 
-type TranslationFn = (key: string, fallback: string) => string;
+type TranslationFn = (key: string) => string;
 
-const defaultT: TranslationFn = (_key, fallback) => fallback;
+const defaultT: TranslationFn = (key) => key;
 
 export interface RequestLogDetailProps {
   log: RequestLogResponse;
-  /** Translation function - defaults to returning fallback */
+  /** Translation function - defaults to identity */
   t?: TranslationFn;
+  /** Locale used for relative date formatting */
+  locale?: string;
 }
 
 /**
@@ -39,7 +42,7 @@ function unwrapResponseData(data: unknown): unknown {
   return data;
 }
 
-function JsonViewer({ data, label }: { data: unknown; label: string }) {
+function JsonViewer({ data, noDataLabel, t }: { data: unknown; noDataLabel: string; t: TranslationFn }) {
   const [copied, setCopied] = useState(false);
   // Unwrap { text: "json" } format if present
   const unwrappedData = unwrapResponseData(data);
@@ -59,7 +62,7 @@ function JsonViewer({ data, label }: { data: unknown; label: string }) {
   ) {
     return (
       <div className="rounded-lg border bg-muted/30 p-4 text-center text-muted-foreground text-sm">
-        No {label.toLowerCase()} data
+        {t(noDataLabel)}
       </div>
     );
   }
@@ -71,7 +74,7 @@ function JsonViewer({ data, label }: { data: unknown; label: string }) {
         size="sm"
         className="absolute top-2 right-2 h-8 w-8 p-0"
         onClick={handleCopy}
-        title="Copy to clipboard"
+        title={t("Copy to clipboard")}
       >
         {copied ? <Check className="h-4 w-4 text-green-500" /> : <Copy className="h-4 w-4" />}
       </Button>
@@ -140,8 +143,9 @@ function JsonHighlight({ json }: { json: string }) {
   );
 }
 
-export function RequestLogDetail({ log, t = defaultT }: RequestLogDetailProps) {
+export function RequestLogDetail({ log, t = defaultT, locale }: RequestLogDetailProps) {
   const createdAt = new Date(log.created_at);
+  const dateLocale = getDateFnsLocale(locale);
   const statusCode = log.res_status ? Number.parseInt(log.res_status, 10) : 0;
 
   let statusColor = "text-gray-500";
@@ -166,7 +170,7 @@ export function RequestLogDetail({ log, t = defaultT }: RequestLogDetailProps) {
         </span>
         <div className="text-muted-foreground text-sm">
           <time dateTime={log.created_at} title={format(createdAt, "PPpp")}>
-            {formatDistanceToNow(createdAt, { addSuffix: true })}
+            {formatDistanceToNow(createdAt, { addSuffix: true, locale: dateLocale })}
           </time>
           <span className="mx-2">•</span>
           <span>{format(createdAt, "PPpp")}</span>
@@ -174,23 +178,29 @@ export function RequestLogDetail({ log, t = defaultT }: RequestLogDetailProps) {
       </div>
 
       {/* Metadata */}
-      {(log.resource_type || log.resource_id || log.action) && (
+      {(log.client_name || log.resource_type || log.resource_id || log.action) && (
         <div className="flex flex-wrap gap-4 text-sm">
+          {log.client_name && (
+            <div>
+              <span className="text-muted-foreground">{t("Client")}:</span>{" "}
+              <code className="rounded bg-muted px-1.5 py-0.5 font-mono text-xs">{log.client_name}</code>
+            </div>
+          )}
           {log.resource_type && (
             <div>
-              <span className="text-muted-foreground">{t("request-logs.detail.resource-type", "Resource")}:</span>{" "}
+              <span className="text-muted-foreground">{t("Resource")}:</span>{" "}
               <span className="font-medium">{log.resource_type}</span>
             </div>
           )}
           {log.resource_id && (
             <div>
-              <span className="text-muted-foreground">{t("request-logs.detail.resource-id", "ID")}:</span>{" "}
+              <span className="text-muted-foreground">{t("ID")}:</span>{" "}
               <code className="rounded bg-muted px-1.5 py-0.5 font-mono text-xs">{log.resource_id}</code>
             </div>
           )}
           {log.action && (
             <div>
-              <span className="text-muted-foreground">{t("request-logs.detail.action", "Action")}:</span>{" "}
+              <span className="text-muted-foreground">{t("Action")}:</span>{" "}
               <span className="font-medium">{log.action}</span>
             </div>
           )}
@@ -200,18 +210,18 @@ export function RequestLogDetail({ log, t = defaultT }: RequestLogDetailProps) {
       {/* Tabs for Request/Response/Headers */}
       <Tabs defaultValue="request" className="w-full">
         <TabsList className="grid w-full grid-cols-3">
-          <TabsTrigger value="request">{t("request-logs.detail.request", "Request")}</TabsTrigger>
-          <TabsTrigger value="response">{t("request-logs.detail.response", "Response")}</TabsTrigger>
-          <TabsTrigger value="headers">{t("request-logs.detail.headers", "Headers")}</TabsTrigger>
+          <TabsTrigger value="request">{t("Request")}</TabsTrigger>
+          <TabsTrigger value="response">{t("Response")}</TabsTrigger>
+          <TabsTrigger value="headers">{t("Headers")}</TabsTrigger>
         </TabsList>
         <TabsContent value="request" className="mt-4">
-          <JsonViewer data={log.req_body} label="Request body" />
+          <JsonViewer data={log.req_body} noDataLabel="No request body data" t={t} />
         </TabsContent>
         <TabsContent value="response" className="mt-4">
-          <JsonViewer data={log.res_body} label="Response body" />
+          <JsonViewer data={log.res_body} noDataLabel="No response body data" t={t} />
         </TabsContent>
         <TabsContent value="headers" className="mt-4">
-          <JsonViewer data={log.headers} label="Headers" />
+          <JsonViewer data={log.headers} noDataLabel="No headers data" t={t} />
         </TabsContent>
       </Tabs>
 
@@ -221,7 +231,7 @@ export function RequestLogDetail({ log, t = defaultT }: RequestLogDetailProps) {
   );
 }
 
-function RequestIdDisplay({ requestId, t }: { requestId: string; t: (key: string, fallback: string) => string }) {
+function RequestIdDisplay({ requestId, t }: { requestId: string; t: TranslationFn }) {
   const [copied, setCopied] = useState(false);
 
   const handleCopy = async () => {
@@ -232,9 +242,15 @@ function RequestIdDisplay({ requestId, t }: { requestId: string; t: (key: string
 
   return (
     <div className="flex items-center gap-2 border-t pt-4 text-muted-foreground text-xs">
-      <span>{t("request-logs.detail.request-id", "Request ID")}:</span>
+      <span>{t("Request ID")}:</span>
       <code className="font-mono">{requestId}</code>
-      <Button variant="ghost" size="sm" className="h-6 w-6 p-0" onClick={handleCopy} title="Copy to clipboard">
+      <Button
+        variant="ghost"
+        size="sm"
+        className="h-6 w-6 p-0"
+        onClick={handleCopy}
+        title={t("Copy to clipboard")}
+      >
         {copied ? <Check className="h-3 w-3 text-green-500" /> : <Copy className="h-3 w-3" />}
       </Button>
     </div>