1import {
 2    ScrollArea,
 3    Tabs,
 4    TabsContent,
 5    TabsList,
 6    TabsTrigger,
 7    Awaiting,
 8    SettingsInfoSkeleton,
 9    SettingsDialogProps,
10    SettingsDialog,
11} from "@marzneshin/common/components";
12import {
13    UserServicesTable,
14    UserNodesUsageWidget,
15    type UserType,
16} from "@marzneshin/modules/users";
17import { type FC } from "react";
18import { useTranslation } from "react-i18next";
19import {
20    SubscriptionActions,
21    QRCodeSection,
22    UserInfoTable,
23} from "./user-info";
24
25interface UsersSettingsDialogProps extends SettingsDialogProps {
26    entity: UserType | null;
27    onClose: () => void;
28    isPending: boolean;
29}
30
31export const UsersSettingsDialog: FC<UsersSettingsDialogProps> = ({
32    onOpenChange,
33    open,
34    entity,
35    onClose,
36    isPending,
37}) => {
38    const { t } = useTranslation();
39
40    return (
41        <SettingsDialog open={open} onClose={onClose} onOpenChange={onOpenChange}>
42            <Awaiting
43                Component={
44                    entity ? (
45                        <ScrollArea className="flex flex-col gap-4 h-full">
46                            <Tabs defaultValue="info" className="w-full h-fit">
47                                <TabsList className="w-full bg-accent">
48                                    <TabsTrigger className="w-full" value="info">
49                                        {t("user_info")}
50                                    </TabsTrigger>
51                                    <TabsTrigger className="w-full" value="services">
52                                        {t("services")}
53                                    </TabsTrigger>
54                                    <TabsTrigger className="w-full" value="subscription">
55                                        {t("subscription")}
56                                    </TabsTrigger>
57                                    <TabsTrigger className="w-full" value="nodes-usage">
58                                        {t("page.users.nodes-usage")}
59                                    </TabsTrigger>
60                                </TabsList>
61                                <TabsContent
62                                    value="info"
63                                    className="flex flex-col gap-2 w-full h-full"
64                                >
65                                    <UserInfoTable user={entity} />
66                                </TabsContent>
67                                <TabsContent value="services">
68                                    <UserServicesTable user={entity} />
69                                </TabsContent>
70                                <TabsContent value="subscription">
71                                    <QRCodeSection entity={entity} />
72                                    <SubscriptionActions entity={entity} />
73                                </TabsContent>
74                                <TabsContent value="nodes-usage">
75                                    <UserNodesUsageWidget user={entity} />
76                                </TabsContent>
77                            </Tabs>
78                        </ScrollArea>
79                    ) : (
80                        <div>Not Found</div>
81                    )
82                }
83                Skeleton={<SettingsInfoSkeleton />}
84                isFetching={isPending}
85            />
86        </SettingsDialog>
87    );
88};