Data Table Sheet Detail Panel

1"use client";
2 
3import {
4  Sheet,
5  SheetClose,
6  SheetContent,
7  SheetDescription,
8  SheetHeader,
9  SheetTitle,
10} from "@/components/custom/sheet";
11import { useDataTable } from "@/components/data-table/data-table-provider";
12import { Button } from "@/components/ui/button";
13import { Kbd } from "@/components/ui/kbd";
14import { Separator } from "@/components/ui/separator";
15import { Skeleton } from "@/components/ui/skeleton";
16import {
17  Tooltip,
18  TooltipContent,
19  TooltipProvider,
20  TooltipTrigger,
21} from "@/components/ui/tooltip";
22import { useFilterActions } from "@/lib/store/hooks/useFilterActions";
23import { useFilterState } from "@/lib/store/hooks/useFilterState";
24import { cn } from "@/lib/utils";
25import { ChevronDown, ChevronUp, X } from "lucide-react";
26import * as React from "react";
27 
28export interface DataTableSheetDetailsProps {
29  title?: React.ReactNode;
30  titleClassName?: string;
31  children?: React.ReactNode;
32}
33 
34export function DataTableSheetDetails({
35  title,
36  titleClassName,
37  children,
38}: DataTableSheetDetailsProps) {
39  const { table, rowSelection, isLoading } = useDataTable();
40  const { setFilters } = useFilterActions();
41 
42  const isMultiSelect = !!table.options.enableMultiRowSelection;
43 
44  // Read the detail row ID from BYOS uuid when multi-select is enabled,
45  // otherwise fall back to rowSelection (existing single-select behavior)
46  const uuid = useFilterState((s) => s.uuid) as string | null | undefined;
47  const selectedRowKey = isMultiSelect
48    ? (uuid ?? undefined)
49    : Object.keys(rowSelection)?.[0];
50 
51  const selectedRow = React.useMemo(() => {
52    if (isLoading && !selectedRowKey) return;
53    return table
54      .getRowModel()
55      .flatRows.find((row) => row.id === selectedRowKey);
56  }, [selectedRowKey, isLoading, table]);
57 
58  const index = table
59    .getRowModel()
60    .flatRows.findIndex((row) => row.id === selectedRow?.id);
61 
62  const nextId = React.useMemo(
63    () => table.getRowModel().flatRows[index + 1]?.id,
64    [index, isLoading, table],
65  );
66 
67  const prevId = React.useMemo(
68    () => table.getRowModel().flatRows[index - 1]?.id,
69    [index, isLoading, table],
70  );
71 
72  const onPrev = React.useCallback(() => {
73    if (!prevId) return;
74    if (isMultiSelect) {
75      setFilters({ uuid: prevId });
76    } else {
77      table.setRowSelection({ [prevId]: true });
78    }
79  }, [prevId, isLoading, table, isMultiSelect, setFilters]);
80 
81  const onNext = React.useCallback(() => {
82    if (!nextId) return;
83    if (isMultiSelect) {
84// … truncated