@spaceinvoices/react-ui 0.4.11 → 0.4.12

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

@@ -87,8 +87,14 @@ function JsonViewer({ data, noDataLabel, t }: { data: unknown; noDataLabel: stri
 
 function JsonHighlight({ json }: { json: string }) {
   // Parse JSON into tokens for safe rendering
-  const tokens: { type: string; value: string }[] = [];
+  const tokens: { key: string; type: string; value: string }[] = [];
   const lines = json.split("\n");
+  let tokenKey = 0;
+
+  const pushToken = (type: string, value: string) => {
+    tokens.push({ key: `${type}:${tokenKey}`, type, value });
+    tokenKey += 1;
+  };
 
   for (const line of lines) {
     // Match key-value patterns
@@ -96,32 +102,32 @@ function JsonHighlight({ json }: { json: string }) {
     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: ":" });
+      pushToken("indent", indent);
+      pushToken("key", `"${key}"`);
+      pushToken("punctuation", ":");
 
       // Parse value
       const valueMatch = rest.match(/^\s*(.+?)(,?)$/);
       if (valueMatch) {
         const [, value, comma] = valueMatch;
-        tokens.push({ type: "space", value: " " });
+        pushToken("space", " ");
         if (value.startsWith('"')) {
-          tokens.push({ type: "string", value: value.replace(/,$/, "") });
+          pushToken("string", value.replace(/,$/, ""));
         } else if (value === "true" || value === "false") {
-          tokens.push({ type: "boolean", value });
+          pushToken("boolean", value);
         } else if (value === "null") {
-          tokens.push({ type: "null", value });
+          pushToken("null", value);
         } else if (!Number.isNaN(Number(value.replace(/,$/, "")))) {
-          tokens.push({ type: "number", value: value.replace(/,$/, "") });
+          pushToken("number", value.replace(/,$/, ""));
         } else {
-          tokens.push({ type: "other", value: value.replace(/,$/, "") });
+          pushToken("other", value.replace(/,$/, ""));
         }
-        if (comma) tokens.push({ type: "punctuation", value: comma });
+        if (comma) pushToken("punctuation", comma);
       }
     } else {
-      tokens.push({ type: "other", value: line });
+      pushToken("other", line);
     }
-    tokens.push({ type: "newline", value: "\n" });
+    pushToken("newline", "\n");
   }
 
   const colorMap: Record<string, string> = {
@@ -134,8 +140,8 @@ function JsonHighlight({ json }: { json: string }) {
 
   return (
     <code>
-      {tokens.map((token, i) => (
-        <span key={`${i}-${token.type}`} className={colorMap[token.type] || ""}>
+      {tokens.map((token) => (
+        <span key={token.key} className={colorMap[token.type] || ""}>
           {token.value}
         </span>
       ))}
@@ -163,6 +169,8 @@ export function RequestLogDetail({ log, t = defaultT, locale }: RequestLogDetail
 
   return (
     <div className="space-y-6 p-4 pt-6">
+      <RequestIdDisplay requestId={log.request_id} t={t} />
+
       {/* Summary */}
       <div className="flex flex-wrap items-center gap-4">
         <span className={cn("rounded-md px-2.5 py-1 font-medium font-mono text-sm", statusBg, statusColor)}>
@@ -224,9 +232,6 @@ export function RequestLogDetail({ log, t = defaultT, locale }: RequestLogDetail
           <JsonViewer data={log.headers} noDataLabel="No headers data" t={t} />
         </TabsContent>
       </Tabs>
-
-      {/* Request ID */}
-      <RequestIdDisplay requestId={log.request_id} t={t} />
     </div>
   );
 }
@@ -241,17 +246,19 @@ function RequestIdDisplay({ requestId, t }: { requestId: string; t: TranslationF
   };
 
   return (
-    <div className="flex items-center gap-2 border-t pt-4 text-muted-foreground text-xs">
-      <span>{t("Request ID")}:</span>
-      <code className="font-mono">{requestId}</code>
+    <div className="flex flex-col gap-3 rounded-lg border bg-muted/20 p-4 sm:flex-row sm:items-center sm:justify-between">
+      <div className="space-y-1">
+        <div className="text-muted-foreground text-xs uppercase tracking-wide">{t("Request ID")}</div>
+        <code className="block break-all font-mono text-sm">{requestId}</code>
+      </div>
       <Button
         variant="ghost"
         size="sm"
-        className="h-6 w-6 p-0"
+        className="h-8 w-8 self-start p-0 sm:self-center"
         onClick={handleCopy}
         title={t("Copy to clipboard")}
       >
-        {copied ? <Check className="h-3 w-3 text-green-500" /> : <Copy className="h-3 w-3" />}
+        {copied ? <Check className="h-4 w-4 text-green-500" /> : <Copy className="h-4 w-4" />}
       </Button>
     </div>
   );

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

@@ -2,11 +2,10 @@
 
 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 { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Sheet, SheetContent, SheetHeader, SheetTitle } from "@/ui/components/ui/sheet";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/ui/components/ui/tooltip";
+import { useMediaQuery } from "@/ui/hooks/use-media-query";
 import { AUTH_COOKIES } from "@/ui/lib/auth";
 import { getCookie } from "@/ui/lib/browser-cookies";
 import { getDateFnsLocale } from "@/ui/lib/date-fns-locale";
@@ -95,6 +94,8 @@ type RequestLogListTableProps = ListTableProps<RequestLogResponse> & {
   t?: (key: string) => string;
   /** Locale used for relative date formatting */
   locale?: string;
+  /** Locale used for UI string lookup */
+  translationLocale?: string;
 };
 
 export function RequestLogListTable({
@@ -107,8 +108,32 @@ export function RequestLogListTable({
   onSelectLog,
   t = (key) => key,
   locale,
+  translationLocale,
 }: RequestLogListTableProps) {
-  const translate = createTranslation({ t, locale, translations: mergedTranslations });
+  const translate = createTranslation({ t, locale, translationLocale, translations: mergedTranslations });
+  const isLargeScreen = useMediaQuery("(min-width: 1280px)");
+  const tableContainerRef = useRef<HTMLDivElement>(null);
+  const [detailPanelHeight, setDetailPanelHeight] = useState<number>();
+
+  useEffect(() => {
+    if (!isLargeScreen) {
+      setDetailPanelHeight(undefined);
+      return;
+    }
+
+    const node = tableContainerRef.current;
+    if (!node) return;
+
+    const updateHeight = () => setDetailPanelHeight(node.offsetHeight);
+    updateHeight();
+
+    if (typeof ResizeObserver === "undefined") return;
+
+    const observer = new ResizeObserver(updateHeight);
+    observer.observe(node);
+
+    return () => observer.disconnect();
+  }, [isLargeScreen]);
 
   // Custom fetch function that handles both entity-scoped and account-scoped queries
   // Don't use useTableFetch since we need special handling for environment
@@ -141,7 +166,6 @@ 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);
@@ -249,48 +273,67 @@ export function RequestLogListTable({
     ? `${REQUEST_LOGS_CACHE_KEY}-${entityId}`
     : `${REQUEST_LOGS_CACHE_KEY}-account-${environment || "live"}`;
 
+  const detailContent = selectedLog ? <RequestLogDetail log={selectedLog} t={translate} locale={locale} /> : null;
+
+  const desktopDetailPanel = selectedLog ? (
+    <>
+      <div className="flex items-start justify-between gap-3 border-b px-5 py-4">
+        <div className="min-w-0">
+          <div className="mb-2 text-muted-foreground text-xs uppercase tracking-wide">
+            {translate("Request log details")}
+          </div>
+          <div className="flex items-center gap-2">
+            <MethodBadge method={selectedLog.method} />
+            <span className="truncate font-mono text-sm">{selectedLog.path}</span>
+          </div>
+        </div>
+        {onSelectLog && (
+          <button
+            type="button"
+            className="text-muted-foreground text-sm transition-colors hover:text-foreground"
+            onClick={() => onSelectLog(null)}
+          >
+            {translate("Close")}
+          </button>
+        )}
+      </div>
+      <div className="min-h-0 flex-1 overflow-y-auto">{detailContent}</div>
+    </>
+  ) : null;
+
   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
+        className={cn(isLargeScreen && selectedLog && "grid gap-6 xl:grid-cols-[minmax(0,0.9fr)_minmax(28rem,1.1fr)]")}
+      >
+        <div ref={tableContainerRef} className="min-w-0">
+          <DataTable
+            columns={columns}
+            cacheKey={cacheKey}
+            resourceName="request log"
+            onFetch={handleFetch}
+            queryParams={queryParams}
+            onChangeParams={onChangeParams}
+            entityId={entityId}
+            filterConfig={filterConfig}
+            onRowClick={(log) => onSelectLog?.(log)}
+            t={translate}
+          />
+        </div>
+
+        {isLargeScreen && selectedLog && (
+          <aside
+            className="flex min-w-0 flex-col overflow-hidden rounded-lg border bg-background xl:sticky xl:top-6"
+            aria-label={translate("Request log details")}
+            style={detailPanelHeight ? { height: `${detailPanelHeight}px` } : undefined}
+          >
+            {desktopDetailPanel}
+          </aside>
+        )}
       </div>
-      <DataTable
-        columns={columns}
-        cacheKey={cacheKey}
-        resourceName="request log"
-        onFetch={handleFetch}
-        queryParams={queryParams}
-        onChangeParams={onChangeParams}
-        entityId={entityId}
-        filterConfig={filterConfig}
-        onRowClick={(log) => onSelectLog?.(log)}
-        t={translate}
-      />
-
-      <Sheet open={!!selectedLog} onOpenChange={(open) => !open && onSelectLog?.(null)}>
-        <SheetContent className="w-full overflow-y-auto sm:max-w-2xl">
+
+      <Sheet open={!isLargeScreen && !!selectedLog} onOpenChange={(open) => !open && onSelectLog?.(null)}>
+        <SheetContent className="w-full overflow-y-auto data-[side=right]:w-full data-[side=right]:sm:w-[72rem] data-[side=right]:sm:max-w-[92vw] data-[side=right]:lg:w-[80rem] data-[side=right]:lg:max-w-[94vw]">
           <SheetHeader>
             <SheetTitle className="flex items-center gap-2">
               {selectedLog && (
@@ -301,7 +344,7 @@ export function RequestLogListTable({
               )}
             </SheetTitle>
           </SheetHeader>
-          {selectedLog && <RequestLogDetail log={selectedLog} t={translate} locale={locale} />}
+          {detailContent}
         </SheetContent>
       </Sheet>
     </>

package/src/components/table/README.md

@@ -1,6 +1,6 @@
 # Table Component Library
 
-A comprehensive, type-safe table system with built-in search, pagination, and loading states.
+A comprehensive, type-safe table system with built-in search, ordering, pagination, and loading states.
 
 ## Features
 
@@ -12,6 +12,7 @@ A comprehensive, type-safe table system with built-in search, pagination, and lo
 - **Responsive**: Mobile-friendly with proper breakpoints
 - **Loading States**: Skeleton loaders and empty states
 - **Cursor Pagination**: Efficient server-side pagination
+- **Sortable Headers**: Optional clickable column headers for asc/desc/clear sorting
 
 ## Quick Start
 
@@ -22,10 +23,9 @@ The new API allows you to define columns with built-in cell renderers:
 ```tsx
 import { DataTable, FormattedDate } from "@space-invoices/ui";
 import type { Invoice } from "@spaceinvoices/js-sdk";
+import { invoices } from "@spaceinvoices/js-sdk";
 
 function InvoiceTable() {
-  const { sdk } = useSDK();
-
   return (
     <DataTable<Invoice>
       columns={[
@@ -57,7 +57,7 @@ function InvoiceTable() {
       ]}
       cacheKey="invoices"
       resourceName="invoice"
-      onFetch={(params) => sdk.invoices.getInvoices(params)}
+      onFetch={(params) => invoices.list(params)}
     />
   );
 }
@@ -69,12 +69,11 @@ For more control, use custom row and header renderers:
 
 ```tsx
 import { DataTable } from "@space-invoices/ui";
+import { invoices } from "@spaceinvoices/js-sdk";
 import InvoiceListHeader from "./invoice-list-header";
 import InvoiceListRow from "./invoice-list-row";
 
 function InvoiceTable() {
-  const { sdk } = useSDK();
-
   return (
     <DataTable<Invoice>
       columns={[
@@ -93,7 +92,7 @@ function InvoiceTable() {
       )}
       cacheKey="invoices"
       resourceName="invoice"
-      onFetch={(params) => sdk.invoices.getInvoices(params)}
+      onFetch={(params) => invoices.list(params)}
     />
   );
 }
@@ -127,9 +126,46 @@ type Column<T> = {
   align?: "left" | "center" | "right"; // Text alignment
   cell?: (item: T) => ReactNode; // Cell renderer function
   className?: string;            // Optional CSS classes
+  sort?: boolean | TableColumnSort; // Optional header click sorting
+};
+
+type TableColumnSort = {
+  asc?: string | string[];       // Explicit ascending order_by payload
+  desc?: string | string[];      // Explicit descending order_by payload
+  defaultDirection?: "asc" | "desc"; // First click direction
+  clearOnThirdClick?: boolean;   // Defaults to true
 };
 ```
 
+### Sortable Headers
+
+Use `sort: true` when the API sort field matches the column id:
+
+```tsx
+const columns = [
+  { id: "name", header: "Name", sort: true, cell: (item) => item.name },
+  { id: "created_at", header: "Created", sort: { defaultDirection: "desc" } },
+];
+```
+
+Use explicit sort mappings when the column header should drive a custom `order_by` payload:
+
+```tsx
+const columns = [
+  {
+    id: "number",
+    header: "Invoice #",
+    sort: {
+      asc: "number",
+      desc: "-number",
+      defaultDirection: "desc",
+    },
+  },
+];
+```
+
+Clickable sortable headers cycle `unsorted -> asc -> desc -> unsorted` and reset both cursor params through the shared table state.
+
 ## Hooks
 
 ### useTableState
@@ -154,10 +190,11 @@ TanStack Query wrapper for table data:
 
 ```tsx
 import { useTableQuery } from "@space-invoices/ui";
+import { customers } from "@spaceinvoices/js-sdk";
 
 const { data, isFetching } = useTableQuery({
   cacheKey: "customers",
-  fetchFn: (params) => sdk.customers.getCustomers(params),
+  fetchFn: (params) => customers.list(params),
   params: { search: "acme" },
   entityId: "entity-123",
 });
@@ -169,9 +206,10 @@ Wraps fetch function to include entity ID:
 
 ```tsx
 import { useTableFetch } from "@space-invoices/ui";
+import { customers } from "@spaceinvoices/js-sdk";
 
 const handleFetch = useTableFetch(
-  (params) => sdk.customers.getCustomers(params),
+  (params) => customers.list(params),
   entityId
 );
 ```