DataBrowser

1"use client"
2 
3import { cva } from "class-variance-authority"
4 
5import { Badge } from "@/components/ui/badge"
6import {
7  Card,
8  CardContent,
9  CardDescription,
10  CardHeader,
11  CardTitle,
12} from "@/components/ui/card"
13import { cn } from "@/lib/utils"
14import type { DataRow } from "@/lib/fable-ui/core"
15import type { DataBrowserProps } from "./data-browser.types"
16import { useDataBrowserActions } from "./hooks/use-data-browser-actions"
17import { useDataBrowserQuery } from "./hooks/use-data-browser-query"
18import { useRowDetailSurface } from "./hooks/use-row-detail-surface"
19import {
20  getFallbackFilters,
21  getFallbackSortOptions,
22} from "./lib/fallback-filters"
23import { InlineError } from "./internal/inline-error"
24import { PaginationFooter } from "./internal/pagination-footer"
25import { ResponsiveDetailSurface } from "./internal/responsive-detail-surface"
26import { TableView } from "./internal/table-view"
27import { DataBrowserToolbar } from "./internal/toolbar"
28 
29const dataBrowserVariants = cva("w-full overflow-hidden", {
30  variants: {
31    variant: {
32      default: "bg-card shadow-sm",
33      elevated: "bg-card shadow-lg shadow-foreground/5",
34      subtle: "bg-muted/40 shadow-none",
35    },
36    size: {
37      sm: "",
38      md: "",
39      lg: "",
40    },
41  },
42  defaultVariants: {
43    variant: "default",
44    size: "md",
45  },
46})
47 
48const contentGap = {
49  sm: "gap-3 p-4",
50  md: "gap-4 p-5",
51  lg: "gap-5 p-6",
52} as const
53 
54export function DataBrowser<Row extends DataRow = DataRow>({
55  title,
56  entityLabel,
57  description,
58  resourceId,
59  searchPlaceholder,
60  columns,
61  rows = [],
62  filters,
63  sortOptions,
64  initialFilters,
65  initialSearch,
66  initialSort,
67  pageSize = 8,
68  detail: detailConfig,
69  rowActions,
70  onViewRow,
71  onRowAction,
72  onRowActionSuccess,
73  renderDetail,
74  isLoading,
75  isDisabled,
76  error,
77  variant,
78  size = "md",
79}: DataBrowserProps<Row>) {
80  const effectiveFilters = filters ?? getFallbackFilters(rows, columns)
81  const effectiveSortOptions = sortOptions ?? getFallbackSortOptions(columns)
82  const detail = useRowDetailSurface<Row>()
83  const query = useDataBrowserQuery<Row>({
84    resourceId,
85    rows,
86    columns,
87    filters: effectiveFilters,
88    sortOptions: effectiveSortOptions,
89    initialFilters,
90    initialSearch,
91    initialSort,
92    pageSize,
93  })
94  const actions = rowActions ?? query.resource?.actions ?? []
95  const browserActions = useDataBrowserActions<Row>({
96    resourceId,
97    onRowAction,
98    onRowActionSuccess,
99    refetch: query.refetch,
100  })
101// … truncated