@spaceinvoices/react-ui 0.4.8 → 0.4.11

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>

package/src/components/request-logs/request-log-list-table.tsx

@@ -1,14 +1,21 @@
 "use client";
 
+import { getClientHeaders } from "@spaceinvoices/js-sdk";
 import { formatDistanceToNow } from "date-fns";
 import { useCallback, useMemo } from "react";
+import { Label } from "@/ui/components/ui/label";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/ui/components/ui/select";
 import { Sheet, SheetContent, SheetHeader, SheetTitle } from "@/ui/components/ui/sheet";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/ui/components/ui/tooltip";
 import { AUTH_COOKIES } from "@/ui/lib/auth";
 import { getCookie } from "@/ui/lib/browser-cookies";
+import { getDateFnsLocale } from "@/ui/lib/date-fns-locale";
+import { createTranslation } from "@/ui/lib/translation";
 import { cn } from "@/ui/lib/utils";
 import { DataTable } from "../table/data-table";
+import { withTableTranslations } from "../table/locales";
 import type { Column, FilterConfig, ListTableProps, TableQueryParams, TableQueryResponse } from "../table/types";
+import translations from "./locales";
 import { RequestLogDetail } from "./request-log-detail";
 
 // Request log response type (internal endpoint, not in SDK)
@@ -22,6 +29,7 @@ export interface RequestLogResponse {
   resource_type: string | null;
   resource_id: string | null;
   action: string | null;
+  client_name: string | null;
   req_body: Record<string, unknown> | null;
   res_body: Record<string, unknown> | null;
   headers: Record<string, unknown> | null;
@@ -38,6 +46,7 @@ const getApiBaseUrl = () => {
 };
 
 export const REQUEST_LOGS_CACHE_KEY = "request-logs";
+const mergedTranslations = withTableTranslations(translations);
 
 const METHOD_COLORS: Record<string, string> = {
   GET: "bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-300",
@@ -82,6 +91,10 @@ type RequestLogListTableProps = ListTableProps<RequestLogResponse> & {
   selectedLog?: RequestLogResponse | null;
   /** Callback when a log is selected */
   onSelectLog?: (log: RequestLogResponse | null) => void;
+  /** Translation function */
+  t?: (key: string) => string;
+  /** Locale used for relative date formatting */
+  locale?: string;
 };
 
 export function RequestLogListTable({
@@ -92,7 +105,11 @@ export function RequestLogListTable({
   showEntityColumn = false,
   selectedLog,
   onSelectLog,
+  t = (key) => key,
+  locale,
 }: RequestLogListTableProps) {
+  const translate = createTranslation({ t, locale, translations: mergedTranslations });
+
   // Custom fetch function that handles both entity-scoped and account-scoped queries
   // Don't use useTableFetch since we need special handling for environment
   const handleFetch = useCallback(
@@ -124,6 +141,7 @@ export function RequestLogListTable({
 
       // HTTP status code filter
       if (params.filter_http_status) queryParamsUrl.set("status", params.filter_http_status);
+      if (params.filter_client_name) queryParamsUrl.set("client_name", params.filter_client_name);
 
       // Date filters
       if (params.filter_date_from) queryParamsUrl.set("date_from", params.filter_date_from);
@@ -133,6 +151,7 @@ export function RequestLogListTable({
       const response = await fetch(`${apiBaseUrl}/request-logs?${queryParamsUrl.toString()}`, {
         headers: {
           Authorization: `Bearer ${token}`,
+          ...getClientHeaders("ui"),
           "Content-Type": "application/json",
         },
       });
@@ -147,6 +166,7 @@ export function RequestLogListTable({
   );
 
   const columns: Column<RequestLogResponse>[] = useMemo(() => {
+    const dateLocale = getDateFnsLocale(locale);
     const cols: Column<RequestLogResponse>[] = [
       {
         id: "status_dot",
@@ -156,19 +176,19 @@ export function RequestLogListTable({
       },
       {
         id: "res_status",
-        header: "Status",
+        header: translate("Status"),
         className: "w-16",
         cell: (log) => <span className="font-mono text-muted-foreground text-sm">{log.res_status || "—"}</span>,
       },
       {
         id: "method",
-        header: "Method",
+        header: translate("Method"),
         className: "w-20",
         cell: (log) => <MethodBadge method={log.method} />,
       },
       {
         id: "path",
-        header: "Path",
+        header: translate("Path"),
         cell: (log) => <span className="truncate font-mono text-sm">{log.path}</span>,
       },
     ];
@@ -176,7 +196,7 @@ export function RequestLogListTable({
     if (showEntityColumn) {
       cols.push({
         id: "entity_id",
-        header: "Entity",
+        header: translate("Entity"),
         className: "hidden md:table-cell",
         cell: (log) => (
           <Tooltip>
@@ -192,14 +212,14 @@ export function RequestLogListTable({
                 {log.entity_id}
               </button>
             </TooltipTrigger>
-            <TooltipContent>Copy</TooltipContent>
+            <TooltipContent>{translate("Copy")}</TooltipContent>
           </Tooltip>
         ),
       });
     } else {
       cols.push({
         id: "resource_id",
-        header: "Resource",
+        header: translate("Resource"),
         className: "hidden sm:table-cell",
         cell: (log) => <span className="text-muted-foreground text-xs">{log.resource_id || "—"}</span>,
       });
@@ -207,20 +227,20 @@ export function RequestLogListTable({
 
     cols.push({
       id: "created_at",
-      header: "Time",
+      header: translate("Time"),
       align: "right",
       cell: (log) => (
         <span className="text-muted-foreground text-xs">
-          {formatDistanceToNow(new Date(log.created_at), { addSuffix: true })}
+          {formatDistanceToNow(new Date(log.created_at), { addSuffix: true, locale: dateLocale })}
         </span>
       ),
     });
 
     return cols;
-  }, [showEntityColumn]);
+  }, [locale, showEntityColumn, translate]);
 
   const filterConfig: FilterConfig = {
-    dateFields: [{ id: "created_at", label: "Date" }],
+    dateFields: [{ id: "created_at", label: translate("Date") }],
     httpMethodFilter: true,
     httpStatusCodeFilter: true,
   };
@@ -231,6 +251,31 @@ export function RequestLogListTable({
 
   return (
     <>
+      <div className="space-y-2">
+        <Label htmlFor="request-log-client-filter">{translate("Client")}</Label>
+        <Select
+          value={queryParams?.filter_client_name ?? "all"}
+          onValueChange={(value) =>
+            onChangeParams?.({
+              ...queryParams,
+              filter_client_name: !value || value === "all" ? undefined : value,
+              prev_cursor: undefined,
+              next_cursor: undefined,
+            })
+          }
+        >
+          <SelectTrigger id="request-log-client-filter" className="w-full sm:w-56">
+            <SelectValue placeholder={translate("All clients")} />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="all">{translate("All clients")}</SelectItem>
+            <SelectItem value="web">web</SelectItem>
+            <SelectItem value="ui">ui</SelectItem>
+            <SelectItem value="mobile">mobile</SelectItem>
+            <SelectItem value="js-sdk">js-sdk</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
       <DataTable
         columns={columns}
         cacheKey={cacheKey}
@@ -241,6 +286,7 @@ export function RequestLogListTable({
         entityId={entityId}
         filterConfig={filterConfig}
         onRowClick={(log) => onSelectLog?.(log)}
+        t={translate}
       />
 
       <Sheet open={!!selectedLog} onOpenChange={(open) => !open && onSelectLog?.(null)}>
@@ -255,7 +301,7 @@ export function RequestLogListTable({
               )}
             </SheetTitle>
           </SheetHeader>
-          {selectedLog && <RequestLogDetail log={selectedLog} />}
+          {selectedLog && <RequestLogDetail log={selectedLog} t={translate} locale={locale} />}
         </SheetContent>
       </Sheet>
     </>

package/src/components/table/data-table.tsx

@@ -89,7 +89,8 @@ export function DataTable<T extends { id: string }>({
       queryParams?.filter_date_to ||
       queryParams?.filter_status ||
       queryParams?.filter_method ||
-      queryParams?.filter_http_status,
+      queryParams?.filter_http_status ||
+      queryParams?.filter_client_name,
   );
   const [filterPanelOpen, setFilterPanelOpen] = useState(hasInitialFilters);
 
@@ -115,7 +116,8 @@ export function DataTable<T extends { id: string }>({
       params.filter_date_to ||
       params.filter_status ||
       params.filter_method ||
-      params.filter_http_status,
+      params.filter_http_status ||
+      params.filter_client_name,
   );
 
   // Combined clear handler for both search and filters
@@ -261,6 +263,7 @@ export function DataTable<T extends { id: string }>({
             prevCursor={queryResult?.pagination.prev_cursor}
             nextCursor={queryResult?.pagination.next_cursor}
             onPageChange={handlePageChange}
+            t={t}
           />
         </div>
       </div>

package/src/components/table/date-cell.tsx

@@ -1,6 +1,7 @@
 type FormattedDateProps = {
   date: string | number | Date | null | undefined;
   format?: Intl.DateTimeFormatOptions;
+  locale?: string;
 };
 
 /**
@@ -13,6 +14,7 @@ export function FormattedDate({
     month: "short",
     day: "numeric",
   },
+  locale,
 }: FormattedDateProps) {
   if (!date) {
     return <span className="text-muted-foreground">—</span>;
@@ -27,7 +29,7 @@ export function FormattedDate({
       return <span className="text-destructive">{String(date)}</span>;
     }
 
-    return <>{dateObj.toLocaleDateString(undefined, format)}</>;
+    return <>{dateObj.toLocaleDateString(locale, format)}</>;
   } catch (error) {
     console.error("Error formatting date:", error);
     return <span className="text-destructive">{String(date)}</span>;

package/src/components/table/filter-bar.tsx

@@ -54,7 +54,13 @@ export function FilterBar({
     // No filters configured, just show search
     return (
       <div className="px-4 pt-4">
-        <SearchInput initialValue={searchValue} onSearch={onSearch} placeholder={t("Search...")} />
+        <SearchInput
+          initialValue={searchValue}
+          onSearch={onSearch}
+          placeholder={t("Search...")}
+          ariaLabel={t("Search")}
+          clearAriaLabel={t("Clear search")}
+        />
       </div>
     );
   }
@@ -62,7 +68,13 @@ export function FilterBar({
   return (
     <Collapsible open={isOpen} onOpenChange={onToggle} className="px-4 pt-4">
       <div className="flex items-center gap-2">
-        <SearchInput initialValue={searchValue} onSearch={onSearch} placeholder={t("Search...")} />
+        <SearchInput
+          initialValue={searchValue}
+          onSearch={onSearch}
+          placeholder={t("Search...")}
+          ariaLabel={t("Search")}
+          clearAriaLabel={t("Clear search")}
+        />
         <CollapsibleTrigger asChild>
           <Button variant="outline" size="sm" className="h-8 gap-1.5">
             <FilterIcon className="h-3.5 w-3.5" />

package/src/components/table/hooks/use-table-query.ts

@@ -28,7 +28,7 @@ export function useTableQuery<T>({ cacheKey, fetchFn, params, entityId, enabled
     queryKey,
     queryFn: () => fetchFn({ ...params, entity_id: entityId }),
     staleTime: 1000 * 60 * 2, // Data is fresh for 2 minutes (unless invalidated)
-    gcTime: 1000 * 60 * 30, // Keep in cache for 30 minutes
+    gcTime: 1000 * 60 * 10, // Keep table variants around for a short session without retaining them all day
     refetchOnMount: true, // Refetch when mounting if data is stale (including when invalidated)
     refetchOnWindowFocus: false, // Don't refetch on window focus
     refetchOnReconnect: true, // Refetch on reconnect