@spaceinvoices/react-ui 0.1.1

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

@@ -0,0 +1,266 @@
+"use client";
+
+import { formatDistanceToNow } from "date-fns";
+import { useCallback, useMemo } from "react";
+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 { cn } from "@/ui/lib/utils";
+import { DataTable } from "../table/data-table";
+import type { Column, FilterConfig, ListTableProps, TableQueryParams, TableQueryResponse } from "../table/types";
+import { RequestLogDetail } from "./request-log-detail";
+
+// Request log response type (internal endpoint, not in SDK)
+export interface RequestLogResponse {
+  id: string;
+  entity_id: string;
+  request_id: string;
+  method: string;
+  path: string;
+  res_status: string | null;
+  resource_type: string | null;
+  resource_id: string | null;
+  action: string | null;
+  req_body: Record<string, unknown> | null;
+  res_body: Record<string, unknown> | null;
+  headers: Record<string, unknown> | null;
+  created_at: string;
+  updated_at: string;
+}
+
+// Get API base URL from environment
+const getApiBaseUrl = () => {
+  if (typeof import.meta !== "undefined" && import.meta.env) {
+    return import.meta.env.VITE_API_URL || import.meta.env.BUN_PUBLIC_API_URL || "";
+  }
+  return "";
+};
+
+export const REQUEST_LOGS_CACHE_KEY = "request-logs";
+
+const METHOD_COLORS: Record<string, string> = {
+  GET: "bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-300",
+  POST: "bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-300",
+  PATCH: "bg-orange-100 text-orange-700 dark:bg-orange-900 dark:text-orange-300",
+  PUT: "bg-yellow-100 text-yellow-700 dark:bg-yellow-900 dark:text-yellow-300",
+  DELETE: "bg-red-100 text-red-700 dark:bg-red-900 dark:text-red-300",
+};
+
+function StatusDot({ status }: { status: string | null }) {
+  const statusCode = status ? Number.parseInt(status, 10) : 0;
+  let color = "bg-gray-400";
+  if (statusCode >= 200 && statusCode < 300) {
+    color = "bg-green-500";
+  } else if (statusCode >= 400 && statusCode < 500) {
+    color = "bg-yellow-500";
+  } else if (statusCode >= 500) {
+    color = "bg-red-500";
+  }
+  return <span className={cn("inline-block h-2.5 w-2.5 rounded-full", color)} />;
+}
+
+function MethodBadge({ method }: { method: string }) {
+  return (
+    <span
+      className={cn(
+        "inline-flex items-center rounded px-1.5 py-0.5 font-medium font-mono text-xs",
+        METHOD_COLORS[method] || "bg-gray-100 text-gray-700",
+      )}
+    >
+      {method}
+    </span>
+  );
+}
+
+type RequestLogListTableProps = ListTableProps<RequestLogResponse> & {
+  /** Environment filter for account-level queries */
+  environment?: "live" | "sandbox";
+  /** Show entity column (for account-level view) */
+  showEntityColumn?: boolean;
+  /** Selected log for detail panel */
+  selectedLog?: RequestLogResponse | null;
+  /** Callback when a log is selected */
+  onSelectLog?: (log: RequestLogResponse | null) => void;
+};
+
+export function RequestLogListTable({
+  queryParams,
+  onChangeParams,
+  entityId,
+  environment,
+  showEntityColumn = false,
+  selectedLog,
+  onSelectLog,
+}: RequestLogListTableProps) {
+  // 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(
+    async (params: TableQueryParams): Promise<TableQueryResponse<RequestLogResponse>> => {
+      const token = getCookie(AUTH_COOKIES.TOKEN);
+      if (!token) throw new Error("Not authenticated");
+
+      const queryParamsUrl = new URLSearchParams();
+
+      // Entity or environment filter
+      // For entity-scoped queries, use entity_id
+      // For account-scoped queries, use environment (defaults to "live")
+      if (entityId) {
+        queryParamsUrl.set("entity_id", entityId);
+      } else {
+        queryParamsUrl.set("environment", environment || "live");
+      }
+
+      // Pagination
+      if (params.limit) queryParamsUrl.set("limit", String(params.limit));
+      if (params.next_cursor) queryParamsUrl.set("next_cursor", params.next_cursor);
+      if (params.prev_cursor) queryParamsUrl.set("prev_cursor", params.prev_cursor);
+
+      // Search maps to path filter
+      if (params.search) queryParamsUrl.set("path", params.search);
+
+      // HTTP method filter
+      if (params.filter_method) queryParamsUrl.set("method", params.filter_method);
+
+      // HTTP status code filter
+      if (params.filter_http_status) queryParamsUrl.set("status", params.filter_http_status);
+
+      // Date filters
+      if (params.filter_date_from) queryParamsUrl.set("date_from", params.filter_date_from);
+      if (params.filter_date_to) queryParamsUrl.set("date_to", params.filter_date_to);
+
+      const apiBaseUrl = getApiBaseUrl();
+      const response = await fetch(`${apiBaseUrl}/request-logs?${queryParamsUrl.toString()}`, {
+        headers: {
+          Authorization: `Bearer ${token}`,
+          "Content-Type": "application/json",
+        },
+      });
+
+      if (!response.ok) {
+        throw new Error(`Failed to fetch request logs: ${response.status}`);
+      }
+
+      return (await response.json()) as TableQueryResponse<RequestLogResponse>;
+    },
+    [entityId, environment],
+  );
+
+  const columns: Column<RequestLogResponse>[] = useMemo(() => {
+    const cols: Column<RequestLogResponse>[] = [
+      {
+        id: "status_dot",
+        header: "",
+        className: "w-8",
+        cell: (log) => <StatusDot status={log.res_status} />,
+      },
+      {
+        id: "res_status",
+        header: "Status",
+        className: "w-16",
+        cell: (log) => <span className="font-mono text-muted-foreground text-sm">{log.res_status || "—"}</span>,
+      },
+      {
+        id: "method",
+        header: "Method",
+        className: "w-20",
+        cell: (log) => <MethodBadge method={log.method} />,
+      },
+      {
+        id: "path",
+        header: "Path",
+        cell: (log) => <span className="truncate font-mono text-sm">{log.path}</span>,
+      },
+    ];
+
+    if (showEntityColumn) {
+      cols.push({
+        id: "entity_id",
+        header: "Entity",
+        className: "hidden md:table-cell",
+        cell: (log) => (
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <button
+                type="button"
+                className="cursor-pointer rounded bg-muted px-1.5 py-0.5 font-mono text-muted-foreground text-xs hover:bg-muted/80"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  navigator.clipboard.writeText(log.entity_id);
+                }}
+              >
+                {log.entity_id}
+              </button>
+            </TooltipTrigger>
+            <TooltipContent>Copy</TooltipContent>
+          </Tooltip>
+        ),
+      });
+    } else {
+      cols.push({
+        id: "resource_id",
+        header: "Resource",
+        className: "hidden sm:table-cell",
+        cell: (log) => <span className="text-muted-foreground text-xs">{log.resource_id || "—"}</span>,
+      });
+    }
+
+    cols.push({
+      id: "created_at",
+      header: "Time",
+      align: "right",
+      sortable: true,
+      sortField: "created_at",
+      cell: (log) => (
+        <span className="text-muted-foreground text-xs">
+          {formatDistanceToNow(new Date(log.created_at), { addSuffix: true })}
+        </span>
+      ),
+    });
+
+    return cols;
+  }, [showEntityColumn]);
+
+  const filterConfig: FilterConfig = {
+    dateFields: [{ id: "created_at", label: "Date" }],
+    httpMethodFilter: true,
+    httpStatusCodeFilter: true,
+  };
+
+  const cacheKey = entityId
+    ? `${REQUEST_LOGS_CACHE_KEY}-${entityId}`
+    : `${REQUEST_LOGS_CACHE_KEY}-account-${environment || "live"}`;
+
+  return (
+    <>
+      <DataTable
+        columns={columns}
+        cacheKey={cacheKey}
+        resourceName="request log"
+        onFetch={handleFetch}
+        queryParams={queryParams}
+        onChangeParams={onChangeParams}
+        entityId={entityId}
+        filterConfig={filterConfig}
+        onRowClick={(log) => onSelectLog?.(log)}
+        defaultOrderBy="-created_at"
+      />
+
+      <Sheet open={!!selectedLog} onOpenChange={(open) => !open && onSelectLog?.(null)}>
+        <SheetContent className="w-full overflow-y-auto sm:max-w-2xl">
+          <SheetHeader>
+            <SheetTitle className="flex items-center gap-2">
+              {selectedLog && (
+                <>
+                  <MethodBadge method={selectedLog.method} />
+                  <span className="font-mono text-sm">{selectedLog.path}</span>
+                </>
+              )}
+            </SheetTitle>
+          </SheetHeader>
+          {selectedLog && <RequestLogDetail log={selectedLog} />}
+        </SheetContent>
+      </Sheet>
+    </>
+  );
+}

package/src/components/request-logs/request-logs-page.tsx

@@ -0,0 +1,10 @@
+"use client";
+
+// Re-export from the new list table component
+// Legacy component alias - deprecated, use RequestLogListTable instead
+export {
+  REQUEST_LOGS_CACHE_KEY,
+  RequestLogListTable,
+  RequestLogListTable as RequestLogsPage,
+  type RequestLogResponse,
+} from "./request-log-list-table";

package/src/components/table/README.md

@@ -0,0 +1,410 @@
+# Table Component Library
+
+A comprehensive, type-safe table system with built-in sorting, search, pagination, and loading states.
+
+## Features
+
+- **Type-safe**: Full TypeScript support with generics
+- **Flexible**: Use default rendering or custom row/header components
+- **State Management**: Built-in state with optional external control
+- **TanStack Query**: Seamless integration with query caching
+- **Accessible**: ARIA labels and keyboard navigation
+- **Responsive**: Mobile-friendly with proper breakpoints
+- **Loading States**: Skeleton loaders and empty states
+- **Cursor Pagination**: Efficient server-side pagination
+
+## Quick Start
+
+### Basic Usage (Simplified API)
+
+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";
+
+function InvoiceTable() {
+  const { sdk } = useSDK();
+
+  return (
+    <DataTable<Invoice>
+      columns={[
+        {
+          id: "number",
+          header: "Invoice #",
+          sortable: true,
+          cell: (invoice) => (
+            <a href={`/invoices/${invoice.id}`} className="underline">
+              {invoice.number}
+            </a>
+          ),
+        },
+        {
+          id: "customer",
+          header: "Customer",
+          cell: (invoice) => invoice.customer?.name ?? "-",
+        },
+        {
+          id: "date",
+          header: "Date",
+          sortable: true,
+          cell: (invoice) => <FormattedDate date={invoice.date} />,
+        },
+        {
+          id: "total",
+          header: "Total",
+          align: "right",
+          sortable: true,
+          cell: (invoice) => `$${invoice.total}`,
+        },
+      ]}
+      cacheKey="invoices"
+      resourceName="invoice"
+      onFetch={(params) => sdk.invoices.getInvoices(params)}
+    />
+  );
+}
+```
+
+### Advanced Usage (Custom Rendering)
+
+For more control, use custom row and header renderers:
+
+```tsx
+import { DataTable } from "@space-invoices/ui";
+import InvoiceListHeader from "./invoice-list-header";
+import InvoiceListRow from "./invoice-list-row";
+
+function InvoiceTable() {
+  const { sdk } = useSDK();
+
+  return (
+    <DataTable<Invoice>
+      columns={[
+        { field: "number", header: "Number", sortable: true },
+        { field: "customer", header: "Customer" },
+        { field: "date", header: "Date", sortable: true },
+        { field: "total", header: "Total", sortable: true, align: "right" },
+      ]}
+      renderHeader={(props) => (
+        <InvoiceListHeader
+          orderBy={props.orderBy}
+          onSort={props.onSort}
+        />
+      )}
+      renderRow={(invoice) => (
+        <InvoiceListRow
+          key={invoice.id}
+          invoice={invoice}
+          onRowClick={(item) => navigate(`/invoices/${item.id}`)}
+        />
+      )}
+      cacheKey="invoices"
+      resourceName="invoice"
+      onFetch={(params) => sdk.invoices.getInvoices(params)}
+    />
+  );
+}
+```
+
+## API Reference
+
+### DataTable Props
+
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| `columns` | `Column<T>[]` | Yes | Column definitions |
+| `cacheKey` | `string` | Yes | Unique key for react-query cache |
+| `onFetch` | `(params) => Promise<Response>` | Yes | Data fetch function |
+| `resourceName` | `string` | Yes | Resource name for empty states |
+| `defaultOrderBy` | `string` | No | Default sort order (e.g., "-id") |
+| `queryParams` | `TableQueryParams` | No | External query parameters |
+| `onChangeParams` | `(params) => void` | No | Callback for param changes |
+| `entityId` | `string` | No | Entity ID for multi-tenant filtering |
+| `createNewLink` | `string` | No | Link for "Create New" button |
+| `createNewTrigger` | `ReactNode` | No | Custom create action |
+| `onRowClick` | `(item: T) => void` | No | Row click handler |
+| `renderRow` | `(item: T) => ReactNode` | No | Custom row renderer |
+| `renderHeader` | `(props) => ReactNode` | No | Custom header renderer |
+
+### Column Definition
+
+```typescript
+type Column<T> = {
+  id: string;                    // Unique column identifier
+  header: ReactNode;             // Header label or component
+  sortField?: string;            // Field name for sorting (if different from id)
+  sortable?: boolean;            // Enable sorting
+  align?: "left" | "center" | "right"; // Text alignment
+  cell?: (item: T) => ReactNode; // Cell renderer function
+  className?: string;            // Optional CSS classes
+};
+```
+
+## Hooks
+
+### useTableState
+
+Manages table state internally with optional URL sync:
+
+```tsx
+import { useTableState } from "@space-invoices/ui";
+
+const { params, handleSort, handleSearch, handlePageChange } = useTableState({
+  initialParams: { order_by: "-created_at" },
+  defaultOrderBy: "-id",
+  onChangeParams: (params) => {
+    // Optional: sync with router or external state
+    navigate({ search: params });
+  },
+});
+```
+
+### useTableQuery
+
+TanStack Query wrapper for table data:
+
+```tsx
+import { useTableQuery } from "@space-invoices/ui";
+
+const { data, isFetching } = useTableQuery({
+  cacheKey: "customers",
+  fetchFn: (params) => sdk.customers.getCustomers(params),
+  params: { order_by: "-id", search: "acme" },
+  entityId: "entity-123",
+});
+```
+
+### useTableFetch
+
+Wraps fetch function to include entity ID:
+
+```tsx
+import { useTableFetch } from "@space-invoices/ui";
+
+const handleFetch = useTableFetch(
+  (params) => sdk.customers.getCustomers(params),
+  entityId
+);
+```
+
+## Components
+
+### SearchInput
+
+Search input with optional debouncing:
+
+```tsx
+<SearchInput
+  initialValue=""
+  onSearch={(value) => console.log(value)}
+  placeholder="Search customers..."
+  debounceMs={300} // Optional debouncing
+/>
+```
+
+### SortableHeader
+
+Sortable column header with visual indicators:
+
+```tsx
+<SortableHeader
+  field="name"
+  currentOrder="-name"
+  onSort={(order) => console.log(order)}
+  align="left"
+>
+  Customer Name
+</SortableHeader>
+```
+
+### Pagination
+
+Cursor-based pagination controls:
+
+```tsx
+<Pagination
+  cursorBefore="prev-cursor"
+  cursorAfter="next-cursor"
+  onPageChange={({ before, after }) => console.log(before, after)}
+/>
+```
+
+### FormattedDate
+
+Date formatting with error handling:
+
+```tsx
+<FormattedDate
+  date="2024-01-15"
+  format={{
+    year: "numeric",
+    month: "short",
+    day: "numeric",
+  }}
+/>
+```
+
+## Usage Patterns
+
+The table component supports two main usage patterns:
+
+### Simple Tables (Column-driven)
+
+For straightforward tables, define columns with cell renderers:
+
+```tsx
+<DataTable
+  columns={[
+    {
+      id: "name",
+      header: "Name",
+      sortable: true,
+      cell: (item) => item.name,
+    },
+    {
+      id: "email",
+      header: "Email",
+      cell: (item) => item.email,
+    },
+  ]}
+  cacheKey="users"
+  resourceName="user"
+  onFetch={(params) => sdk.users.getUsers(params)}
+/>
+```
+
+### Complex Tables (Custom renderers)
+
+For advanced tables with complex row/header components:
+
+```tsx
+<DataTable
+  columns={[
+    { id: "name", header: "Name", sortable: true },
+    { id: "email", header: "Email" },
+  ]}
+  renderRow={(item) => (
+    <CustomRow key={item.id} item={item} />
+  )}
+  renderHeader={(props) => (
+    <CustomHeader {...props} />
+  )}
+  cacheKey="users"
+  resourceName="user"
+  onFetch={(params) => sdk.users.getUsers(params)}
+/>
+```
+
+## Key Improvements
+
+### 1. Simplified State Management
+
+**Before:**
+- Manual `useState` for params
+- Manual URL sync with `updateQueryParams`
+- Complex callback chains
+
+**After:**
+- `useTableState` hook handles everything
+- Automatic URL sync
+- Single source of truth
+
+### 2. Cleaner Hooks
+
+**Before:**
+```tsx
+const { data, isFetching } = useTableQuery({
+  cacheKey,
+  fetchFn,
+  params,
+  entityId,
+});
+
+// Unnecessary isMounted ref logic
+const isMounted = useRef(true);
+```
+
+**After:**
+```tsx
+// Simplified, no ref needed
+const { data, isFetching } = useTableQuery({
+  cacheKey,
+  fetchFn,
+  params,
+  entityId,
+});
+```
+
+### 3. Better Column API
+
+**Before:**
+- Column definitions not used for rendering
+- Must implement custom row/header components
+
+**After:**
+- Column definitions drive rendering
+- Optional custom renderers for flexibility
+- Built-in cell renderers via `cell` prop
+
+### 4. Improved Type Safety
+
+**Before:**
+```typescript
+// Loose typing on columns
+columns: { field: string; header: React.ReactNode }[]
+```
+
+**After:**
+```typescript
+// Strongly typed with generics
+columns: Column<T>[]
+// T is your data type (e.g., Invoice, Customer)
+```
+
+### 5. Better UX
+
+**Before:**
+- Basic search input
+- Minimal empty states
+
+**After:**
+- Search with clear button
+- Rich empty states with icons
+- Better error handling in date formatter
+- Improved accessibility
+
+## Best Practices
+
+1. **Use column definitions for simple tables**: Less code, easier to maintain
+2. **Use custom renderers for complex tables**: More control when needed
+3. **Define cache keys as constants**: Reuse across queries and mutations
+4. **Handle loading states**: The component handles this automatically
+5. **Provide meaningful resource names**: Used in empty states
+6. **Use FormattedDate**: Consistent date formatting with error handling
+7. **Enable sorting selectively**: Not all columns need sorting
+8. **Use proper TypeScript types**: Import from `@spaceinvoices/js-sdk`
+
+## Testing
+
+All table components are fully tested:
+
+```bash
+cd packages/ui
+bun test test/components/table/
+```
+
+## Accessibility
+
+- ARIA labels on interactive elements
+- Keyboard navigation support
+- Screen reader friendly
+- Semantic HTML structure
+- Proper focus management
+
+## Performance
+
+- Efficient re-renders with proper memoization
+- React Query caching (5-minute stale time)
+- Cursor-based pagination (no offset issues)
+- Skeleton loading (no layout shift)