1import { Button, DataTableViewOptions, ResizableHandle, ResizablePanel, ResizablePanelGroup, HStack } from "@marzneshin/components";
 2import { Server } from "lucide-react";
 3import { EntityTableContext, SidebarEntityTableContext } from "./contexts";
 4import {
 5    SidebarEntityCardSectionsProps,
 6    TableFiltering,
 7    DataTablePagination,
 8    EntityDataTable,
 9    SidebarEntityTablePopover,
10    SidebarEntitySelection
11} from "./components";
12import {
13    useSidebarEntityTable,
14    EntitySidebarQueryKeyType,
15    FetchEntityReturn,
16    UseRowSelectionReturn,
17} from "./hooks";
18import { useTranslation } from "react-i18next";
19
20
21interface SidebarEntityTableProps<T, S> {
22    fetchEntity: ({ queryKey }: EntitySidebarQueryKeyType) => FetchEntityReturn<T>;
23    sidebarEntities: S[];
24    setSidebarEntityId: (entity: string | undefined) => void;
25    sidebarEntityId?: string;
26    sidebarCardProps: SidebarEntityCardSectionsProps<S>;
27    secondaryEntityKey: string;
28    columnsFn: any;
29    filteredColumn: string;
30    entityKey: string;
31    rowSelection?: UseRowSelectionReturn;
32    manualSorting?: boolean;
33    onCreate: () => void;
34    onEdit: (entity: T) => void;
35    onOpen: (entity: T) => void;
36    onDelete: (entity: T) => void;
37}
38
39export function SidebarEntityTable<T, S>(props: SidebarEntityTableProps<T, S>) {
40    const { t } = useTranslation();
41    const {
42        desktop,
43        table,
44        entityTableContextValue,
45        sidebarEntityTableContextValue,
46        columns,
47        onCreate
48    } = useSidebarEntityTable(props);
49
50    return (
51        <EntityTableContext.Provider value={entityTableContextValue}>
52            <SidebarEntityTableContext.Provider value={sidebarEntityTableContextValue}>
53                <div className="flex flex-col">
54                    <div className="flex flex-col md:flex-row-reverse items-center py-4 gap-2 w-full">
55                        <div className="flex flex-row justify-center items-center w-full">
56                            {!desktop && (
57                                <SidebarEntityTablePopover
58                                    buttonChild={
59                                        <HStack className="items-center p-1">
60                                            <Server className="size-4" /> {t("inbounds")}
61                                        </HStack>
62                                    }
63                                />
64                            )}
65                            <DataTableViewOptions table={table} />
66                            {onCreate && (
67                                <Button aria-label={`create-${props.entityKey}`} onClick={onCreate}>
68                                    {t("create")}
69                                </Button>
70                            )}
71                        </div>
72                        <TableFiltering />
73                    </div>
74                    <div className="w-full rounded-md border">
75                        <ResizablePanelGroup direction="horizontal">
76                            <ResizablePanel minSize={20} maxSize={desktop ? 40 : 0}>
77                                <SidebarEntitySelection />
78                            </ResizablePanel>
79                            <ResizableHandle withHandle={desktop} />
80                            <ResizablePanel >
81                                <div className="flex flex-col justify-between size-full">
82                                    <EntityDataTable columns={columns} onRowClick={props.onOpen} />
83                                    <DataTablePagination />
84                                </div>
85                            </ResizablePanel>
86                        </ResizablePanelGroup>
87                    </div>
88                </div>
89            </SidebarEntityTableContext.Provider>
90        </EntityTableContext.Provider>
91    );
92}