@spaceinvoices/react-ui 0.4.8 → 0.4.10

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

@@ -0,0 +1,392 @@
+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",
+  Date: "Date",
+  Event: "Event",
+  URL: "URL",
+  Entity: "Entity",
+  Duration: "Duration",
+  Time: "Time",
+  Attempt: "Attempt",
+  Request: "Request",
+  Response: "Response",
+  "Request body": "Request body",
+  "Delivery ID": "Delivery ID",
+  Copy: "Copy",
+  "Copy to clipboard": "Copy to clipboard",
+  success: "Success",
+  failed: "Failed",
+  pending: "Pending",
+  "No request body data": "No request body data",
+  "No response data": "No response data",
+  "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",
+  Date: "Datum",
+  Event: "Dogodek",
+  URL: "URL",
+  Entity: "Entiteta",
+  Duration: "Trajanje",
+  Time: "Čas",
+  Attempt: "Poskus",
+  Request: "Zahteva",
+  Response: "Odgovor",
+  "Request body": "Telo zahteve",
+  "Delivery ID": "ID dostave",
+  Copy: "Kopiraj",
+  "Copy to clipboard": "Kopirano v odložišče",
+  success: "Uspešno",
+  failed: "Neuspešno",
+  pending: "V teku",
+  "No request body data": "Ni podatkov telesa zahteve",
+  "No response data": "Ni podatkov odgovora",
+  "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",
+  Date: "Datum",
+  Event: "Ereignis",
+  URL: "URL",
+  Entity: "Entität",
+  Duration: "Dauer",
+  Time: "Zeit",
+  Attempt: "Versuch",
+  Request: "Anfrage",
+  Response: "Antwort",
+  "Request body": "Request-Body",
+  "Delivery ID": "Delivery-ID",
+  Copy: "Kopieren",
+  "Copy to clipboard": "In die Zwischenablage kopieren",
+  success: "Erfolgreich",
+  failed: "Fehlgeschlagen",
+  pending: "Ausstehend",
+  "No request body data": "Keine Request-Body-Daten",
+  "No response data": "Keine Response-Daten",
+  "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",
+  Date: "Data",
+  Event: "Evento",
+  URL: "URL",
+  Entity: "Entità",
+  Duration: "Durata",
+  Time: "Ora",
+  Attempt: "Tentativo",
+  Request: "Richiesta",
+  Response: "Risposta",
+  "Request body": "Corpo della richiesta",
+  "Delivery ID": "ID consegna",
+  Copy: "Copia",
+  "Copy to clipboard": "Copia negli appunti",
+  success: "Riuscito",
+  failed: "Non riuscito",
+  pending: "In attesa",
+  "No request body data": "Nessun dato del corpo della richiesta",
+  "No response data": "Nessun dato della risposta",
+  "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",
+  Date: "Date",
+  Event: "Événement",
+  URL: "URL",
+  Entity: "Entité",
+  Duration: "Durée",
+  Time: "Heure",
+  Attempt: "Tentative",
+  Request: "Requête",
+  Response: "Réponse",
+  "Request body": "Corps de requête",
+  "Delivery ID": "ID de livraison",
+  Copy: "Copier",
+  "Copy to clipboard": "Copier dans le presse-papiers",
+  success: "Réussi",
+  failed: "Échoué",
+  pending: "En attente",
+  "No request body data": "Aucune donnée de corps de requête",
+  "No response data": "Aucune donnée de réponse",
+  "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",
+  Date: "Fecha",
+  Event: "Evento",
+  URL: "URL",
+  Entity: "Entidad",
+  Duration: "Duración",
+  Time: "Hora",
+  Attempt: "Intento",
+  Request: "Solicitud",
+  Response: "Respuesta",
+  "Request body": "Cuerpo de la solicitud",
+  "Delivery ID": "ID de entrega",
+  Copy: "Copiar",
+  "Copy to clipboard": "Copiar al portapapeles",
+  success: "Exitosa",
+  failed: "Fallida",
+  pending: "Pendiente",
+  "No request body data": "Sin datos del cuerpo de la solicitud",
+  "No response data": "Sin datos de respuesta",
+  "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",
+  Date: "Data",
+  Event: "Evento",
+  URL: "URL",
+  Entity: "Entidade",
+  Duration: "Duração",
+  Time: "Hora",
+  Attempt: "Tentativa",
+  Request: "Pedido",
+  Response: "Resposta",
+  "Request body": "Corpo do pedido",
+  "Delivery ID": "ID da entrega",
+  Copy: "Copiar",
+  "Copy to clipboard": "Copiar para a área de transferência",
+  success: "Bem-sucedido",
+  failed: "Falhou",
+  pending: "Pendente",
+  "No request body data": "Sem dados do corpo do pedido",
+  "No response data": "Sem dados de resposta",
+  "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",
+  Date: "Datum",
+  Event: "Gebeurtenis",
+  URL: "URL",
+  Entity: "Entiteit",
+  Duration: "Duur",
+  Time: "Tijd",
+  Attempt: "Poging",
+  Request: "Verzoek",
+  Response: "Respons",
+  "Request body": "Request-body",
+  "Delivery ID": "Delivery-ID",
+  Copy: "Kopiëren",
+  "Copy to clipboard": "Kopiëren naar klembord",
+  success: "Geslaagd",
+  failed: "Mislukt",
+  pending: "In behandeling",
+  "No request body data": "Geen gegevens in request-body",
+  "No response data": "Geen responsgegevens",
+  "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",
+  Date: "Data",
+  Event: "Zdarzenie",
+  URL: "URL",
+  Entity: "Encja",
+  Duration: "Czas trwania",
+  Time: "Czas",
+  Attempt: "Próba",
+  Request: "Żądanie",
+  Response: "Odpowiedź",
+  "Request body": "Treść żądania",
+  "Delivery ID": "ID dostawy",
+  Copy: "Kopiuj",
+  "Copy to clipboard": "Kopiuj do schowka",
+  success: "Sukces",
+  failed: "Niepowodzenie",
+  pending: "Oczekujące",
+  "No request body data": "Brak danych treści żądania",
+  "No response data": "Brak danych odpowiedzi",
+  "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",
+  Date: "Datum",
+  Event: "Događaj",
+  URL: "URL",
+  Entity: "Entitet",
+  Duration: "Trajanje",
+  Time: "Vrijeme",
+  Attempt: "Pokušaj",
+  Request: "Zahtjev",
+  Response: "Odgovor",
+  "Request body": "Tijelo zahtjeva",
+  "Delivery ID": "ID isporuke",
+  Copy: "Kopiraj",
+  "Copy to clipboard": "Kopiraj u međuspremnik",
+  success: "Uspješno",
+  failed: "Neuspješno",
+  pending: "Na čekanju",
+  "No request body data": "Nema podataka tijela zahtjeva",
+  "No response data": "Nema podataka odgovora",
+  "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/webhook-logs/webhook-delivery-detail.tsx

@@ -0,0 +1,255 @@
+"use client";
+
+import { format, formatDistanceToNow } from "date-fns";
+import { AlertCircle, Check, Copy } from "lucide-react";
+import { useState } from "react";
+import { Alert, AlertDescription } from "@/ui/components/ui/alert";
+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 { WebhookDeliveryResponse } from "./webhook-delivery-list-table";
+
+type TranslationFn = (key: string) => string;
+
+const defaultT: TranslationFn = (key) => key;
+
+export interface WebhookDeliveryDetailProps {
+  delivery: WebhookDeliveryResponse;
+  t?: TranslationFn;
+  /** Locale used for relative date formatting */
+  locale?: string;
+}
+
+function JsonViewer({ data, noDataLabel, t }: { data: unknown; noDataLabel: string; t: TranslationFn }) {
+  const [copied, setCopied] = useState(false);
+  const jsonString = data ? JSON.stringify(data, null, 2) : null;
+
+  const handleCopy = async () => {
+    if (jsonString) {
+      await navigator.clipboard.writeText(jsonString);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    }
+  };
+
+  if (!data || (typeof data === "object" && Object.keys(data as Record<string, unknown>).length === 0)) {
+    return (
+      <div className="rounded-lg border bg-muted/30 p-4 text-center text-muted-foreground text-sm">
+        {t(noDataLabel)}
+      </div>
+    );
+  }
+
+  return (
+    <div className="relative">
+      <Button
+        variant="ghost"
+        size="sm"
+        className="absolute top-2 right-2 h-8 w-8 p-0"
+        onClick={handleCopy}
+        title={t("Copy to clipboard")}
+      >
+        {copied ? <Check className="h-4 w-4 text-green-500" /> : <Copy className="h-4 w-4" />}
+      </Button>
+      <pre className="overflow-x-auto rounded-lg border bg-muted/30 p-4 font-mono text-sm">
+        <JsonHighlight json={jsonString ?? ""} />
+      </pre>
+    </div>
+  );
+}
+
+function JsonHighlight({ json }: { json: string }) {
+  const tokens: { type: string; value: string }[] = [];
+  const lines = json.split("\n");
+
+  for (const line of lines) {
+    const keyMatch = line.match(/^(\s*)"([^"]+)":/);
+    if (keyMatch) {
+      const [, indent, key] = keyMatch;
+      const rest = line.slice(keyMatch[0].length);
+      tokens.push({ type: "indent", value: indent });
+      tokens.push({ type: "key", value: `"${key}"` });
+      tokens.push({ type: "punctuation", value: ":" });
+
+      const valueMatch = rest.match(/^\s*(.+?)(,?)$/);
+      if (valueMatch) {
+        const [, value, comma] = valueMatch;
+        tokens.push({ type: "space", value: " " });
+        if (value.startsWith('"')) {
+          tokens.push({ type: "string", value: value.replace(/,$/, "") });
+        } else if (value === "true" || value === "false") {
+          tokens.push({ type: "boolean", value });
+        } else if (value === "null") {
+          tokens.push({ type: "null", value });
+        } else if (!Number.isNaN(Number(value.replace(/,$/, "")))) {
+          tokens.push({ type: "number", value: value.replace(/,$/, "") });
+        } else {
+          tokens.push({ type: "other", value: value.replace(/,$/, "") });
+        }
+        if (comma) tokens.push({ type: "punctuation", value: comma });
+      }
+    } else {
+      tokens.push({ type: "other", value: line });
+    }
+    tokens.push({ type: "newline", value: "\n" });
+  }
+
+  const colorMap: Record<string, string> = {
+    key: "text-blue-600 dark:text-blue-400",
+    string: "text-green-600 dark:text-green-400",
+    number: "text-orange-600 dark:text-orange-400",
+    boolean: "text-purple-600 dark:text-purple-400",
+    null: "text-gray-500",
+  };
+
+  return (
+    <code>
+      {tokens.map((token, i) => (
+        <span key={`${i}-${token.type}`} className={colorMap[token.type] || ""}>
+          {token.value}
+        </span>
+      ))}
+    </code>
+  );
+}
+
+const STATUS_STYLES: Record<string, { color: string; bg: string }> = {
+  success: {
+    color: "text-green-700 dark:text-green-400",
+    bg: "bg-green-100 dark:bg-green-900",
+  },
+  failed: {
+    color: "text-red-700 dark:text-red-400",
+    bg: "bg-red-100 dark:bg-red-900",
+  },
+  pending: {
+    color: "text-yellow-700 dark:text-yellow-400",
+    bg: "bg-yellow-100 dark:bg-yellow-900",
+  },
+};
+
+export function WebhookDeliveryDetail({ delivery, t = defaultT, locale }: WebhookDeliveryDetailProps) {
+  const createdAt = new Date(delivery.created_at);
+  const dateLocale = getDateFnsLocale(locale);
+  const styles = STATUS_STYLES[delivery.status] ?? {
+    color: "text-gray-500",
+    bg: "bg-gray-100 dark:bg-gray-800",
+  };
+
+  return (
+    <div className="space-y-6 p-4 pt-6">
+      {/* Summary */}
+      <div className="flex flex-wrap items-center gap-4">
+        <span className={cn("rounded-md px-2.5 py-1 font-medium text-sm capitalize", styles.bg, styles.color)}>
+          {t(delivery.status)}
+        </span>
+        <div className="text-muted-foreground text-sm">
+          <time dateTime={delivery.created_at} title={format(createdAt, "PPpp")}>
+            {formatDistanceToNow(createdAt, { addSuffix: true, locale: dateLocale })}
+          </time>
+          <span className="mx-2">•</span>
+          <span>{format(createdAt, "PPpp")}</span>
+        </div>
+      </div>
+
+      {/* Metadata */}
+      <div className="flex flex-wrap gap-4 text-sm">
+        <div>
+          <span className="text-muted-foreground">{t("Event")}:</span>{" "}
+          <span className="font-medium">{delivery.event_type}</span>
+        </div>
+        {delivery.webhook_url && (
+          <div>
+            <span className="text-muted-foreground">{t("URL")}:</span>{" "}
+            <code className="rounded bg-muted px-1.5 py-0.5 font-mono text-xs">{delivery.webhook_url}</code>
+          </div>
+        )}
+        <div>
+          <span className="text-muted-foreground">{t("Attempt")}:</span>{" "}
+          <span className="font-medium">
+            {delivery.attempt}/{delivery.max_attempts}
+          </span>
+        </div>
+        {delivery.duration_ms != null && (
+          <div>
+            <span className="text-muted-foreground">{t("Duration")}:</span>{" "}
+            <span className="font-medium">{delivery.duration_ms}ms</span>
+          </div>
+        )}
+        {delivery.response_status != null && (
+          <div>
+            <span className="text-muted-foreground">{t("Response")}:</span>{" "}
+            <span className="font-medium">{delivery.response_status}</span>
+          </div>
+        )}
+      </div>
+
+      {/* Error message */}
+      {delivery.error_message && (
+        <Alert variant="destructive">
+          <AlertCircle className="h-4 w-4" />
+          <AlertDescription>{delivery.error_message}</AlertDescription>
+        </Alert>
+      )}
+
+      {/* Tabs for Request Body / Response */}
+      <Tabs defaultValue="request" className="w-full">
+        <TabsList className="grid w-full grid-cols-2">
+          <TabsTrigger value="request">{t("Request body")}</TabsTrigger>
+          <TabsTrigger value="response">{t("Response")}</TabsTrigger>
+        </TabsList>
+        <TabsContent value="request" className="mt-4">
+          <JsonViewer data={delivery.request_body} noDataLabel="No request body data" t={t} />
+        </TabsContent>
+        <TabsContent value="response" className="mt-4">
+          {delivery.response_body ? (
+            <div className="space-y-2">
+              {delivery.response_status != null && (
+                <div className="text-muted-foreground text-sm">
+                  {t("Status")}: <span className="font-medium font-mono">{delivery.response_status}</span>
+                </div>
+              )}
+              <pre className="overflow-x-auto rounded-lg border bg-muted/30 p-4 font-mono text-sm">
+                {delivery.response_body}
+              </pre>
+            </div>
+          ) : (
+            <div className="rounded-lg border bg-muted/30 p-4 text-center text-muted-foreground text-sm">
+              {t("No response data")}
+            </div>
+          )}
+        </TabsContent>
+      </Tabs>
+
+      {/* Delivery ID */}
+      <DeliveryIdDisplay deliveryId={delivery.id} t={t} />
+    </div>
+  );
+}
+
+function DeliveryIdDisplay({ deliveryId, t }: { deliveryId: string; t: TranslationFn }) {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = async () => {
+    await navigator.clipboard.writeText(deliveryId);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+  return (
+    <div className="flex items-center gap-2 border-t pt-4 text-muted-foreground text-xs">
+      <span>{t("Delivery ID")}:</span>
+      <code className="font-mono">{deliveryId}</code>
+      <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>
+  );
+}