@spaceinvoices/react-ui 0.4.11 → 0.4.31

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
 );
 ```