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