gitscope
/
← marzneshin / dashboard/src/features/users/dialogs/settings/user-info/table.tsx / blame
Files Commits 446 Branches 1 Tags 43 Markers 4 README License
https://dev.kronoz.win/r/marzneshin.git
dashboard/src/features/users/dialogs/settings/user-info/table.tsx · v0.3.0
Source
1 cba9caa Dawsh 2y ago import {
2 cba9caa Dawsh 2y ago Button,
3 cba9caa Dawsh 2y ago Card,
4 cba9caa Dawsh 2y ago CardContent,
5 cba9caa Dawsh 2y ago CardHeader,
6 cba9caa Dawsh 2y ago CardTitle,
7 cba9caa Dawsh 2y ago Table,
8 cba9caa Dawsh 2y ago TableBody,
9 cba9caa Dawsh 2y ago TableCell,
10 45e0190 Mrdn 2y ago TableRow,
11 cba9caa Dawsh 2y ago } from "@marzneshin/components";
12 45e0190 Mrdn 2y ago import { FC } from "react";
13 6955aba Mrdn 2y ago import {
14 6955aba Mrdn 2y ago useUserUsageResetCmd,
15 6955aba Mrdn 2y ago UserType,
16 6955aba Mrdn 2y ago UsersStatus,
17 cba9caa Dawsh 2y ago UsersStatusBadge,
18 45e0190 Mrdn 2y ago } from "@marzneshin/features/users";
19 857e289 Mrdn 2y ago import { CircularProgress } from "@nextui-org/progress";
20 857e289 Mrdn 2y ago import { useTranslation } from "react-i18next";
21 857e289 Mrdn 2y ago import { format, isDate, isValid } from "date-fns";
22 cba9caa Dawsh 2y ago import { UserStatusEnableButton } from "./user-status-enable-button";
23 857e289 Mrdn 2y ago
24 857e289 Mrdn 2y ago interface UserInfoTableProps {
25 857e289 Mrdn 2y ago entity: UserType;
26 857e289 Mrdn 2y ago }
27 857e289 Mrdn 2y ago
28 45e0190 Mrdn 2y ago const TableRowWithCell: FC<{
29 45e0190 Mrdn 2y ago label: string;
30 45e0190 Mrdn 2y ago value: string | number | JSX.Element;
31 45e0190 Mrdn 2y ago }> = ({ label, value }) => (
32 857e289 Mrdn 2y ago <TableRow>
33 857e289 Mrdn 2y ago <TableCell>{label}</TableCell>
34 857e289 Mrdn 2y ago <TableCell>{value}</TableCell>
35 857e289 Mrdn 2y ago </TableRow>
36 857e289 Mrdn 2y ago );
37 857e289 Mrdn 2y ago
38 45e0190 Mrdn 2y ago const DateTableRow: FC<{ label: string; date: Date | string }> = ({
39 45e0190 Mrdn 2y ago label,
40 45e0190 Mrdn 2y ago date,
41 45e0190 Mrdn 2y ago }) => {
42 45e0190 Mrdn 2y ago let formattedDate = "";
43 857e289 Mrdn 2y ago if (date && isValid(date)) {
44 857e289 Mrdn 2y ago formattedDate = format(date, "PPP");
45 857e289 Mrdn 2y ago }
46 45e0190 Mrdn 2y ago return <TableRowWithCell label={label} value={formattedDate} />;
47 857e289 Mrdn 2y ago };
48 857e289 Mrdn 2y ago
49 45e0190 Mrdn 2y ago const CircularProgressBarRow: FC<{
50 45e0190 Mrdn 2y ago label: string;
51 45e0190 Mrdn 2y ago value: number;
52 45e0190 Mrdn 2y ago limit: number;
53 45e0190 Mrdn 2y ago }> = ({ label, value, limit }) => (
54 857e289 Mrdn 2y ago <TableRow>
55 857e289 Mrdn 2y ago <TableCell>{label}</TableCell>
56 45e0190 Mrdn 2y ago <TableCell>
57 45e0190 Mrdn 2y ago <CircularProgress size="sm" value={(value / limit) * 100} />
58 45e0190 Mrdn 2y ago </TableCell>
59 857e289 Mrdn 2y ago </TableRow>
60 857e289 Mrdn 2y ago );
61 857e289 Mrdn 2y ago
62 857e289 Mrdn 2y ago export const UserInfoTable: FC<UserInfoTableProps> = ({ entity }) => {
63 857e289 Mrdn 2y ago const { t } = useTranslation();
64 45e0190 Mrdn 2y ago const { mutate: resetUsage } = useUserUsageResetCmd();
65 45e0190 Mrdn 2y ago const expireDate = entity.expire
66 45e0190 Mrdn 2y ago ? isDate(entity.expire)
67 45e0190 Mrdn 2y ago ? entity.expire
68 45e0190 Mrdn 2y ago : new Date(entity.expire)
69 45e0190 Mrdn 2y ago : null;
70 cba9caa Dawsh 2y ago
71 857e289 Mrdn 2y ago return (
72 857e289 Mrdn 2y ago <Card>
73 6955aba Mrdn 2y ago <CardHeader className="flex flex-row justify-between items-center w-full">
74 45e0190 Mrdn 2y ago <CardTitle>{t("user_info")}</CardTitle>
75 857e289 Mrdn 2y ago </CardHeader>
76 857e289 Mrdn 2y ago <CardContent>
77 857e289 Mrdn 2y ago <Table>
78 857e289 Mrdn 2y ago <TableBody>
79 45e0190 Mrdn 2y ago <TableRowWithCell label={t("username")} value={entity.username} />
80 45e0190 Mrdn 2y ago <TableRowWithCell
81 45e0190 Mrdn 2y ago label={t("status")}
82 45e0190 Mrdn 2y ago value={<UsersStatusBadge status={UsersStatus[entity.status]} />}
83 45e0190 Mrdn 2y ago />
84 45e0190 Mrdn 2y ago {expireDate && entity.on_hold_expire_duration === 0 ? (
85 45e0190 Mrdn 2y ago <DateTableRow
86 45e0190 Mrdn 2y ago label={t("page.users.expire_date")}
87 45e0190 Mrdn 2y ago date={expireDate}
88 45e0190 Mrdn 2y ago />
89 857e289 Mrdn 2y ago ) : (
90 857e289 Mrdn 2y ago <>
91 45e0190 Mrdn 2y ago <TableRowWithCell
92 45e0190 Mrdn 2y ago label={t("page.users.on_hold_expire_duration")}
93 45e0190 Mrdn 2y ago value={entity.on_hold_expire_duration}
94 45e0190 Mrdn 2y ago />
95 45e0190 Mrdn 2y ago {entity.on_hold_timeout && (
96 45e0190 Mrdn 2y ago <DateTableRow
97 45e0190 Mrdn 2y ago label={t("page.users.expire_date")}
98 45e0190 Mrdn 2y ago date={entity.on_hold_timeout}
99 45e0190 Mrdn 2y ago />
100 45e0190 Mrdn 2y ago )}
101 857e289 Mrdn 2y ago </>
102 857e289 Mrdn 2y ago )}
103 45e0190 Mrdn 2y ago {entity.data_limit && (
104 45e0190 Mrdn 2y ago <CircularProgressBarRow
105 45e0190 Mrdn 2y ago label={t("page.users.used_traffic")}
106 45e0190 Mrdn 2y ago value={entity.used_traffic}
107 45e0190 Mrdn 2y ago limit={entity.data_limit}
108 45e0190 Mrdn 2y ago />
109 45e0190 Mrdn 2y ago )}
110 45e0190 Mrdn 2y ago <DateTableRow
111 45e0190 Mrdn 2y ago label={t("page.users.online_at")}
112 45e0190 Mrdn 2y ago date={entity.online_at}
113 45e0190 Mrdn 2y ago />
114 45e0190 Mrdn 2y ago <TableRowWithCell label={t("note")} value={entity.note} />
115 857e289 Mrdn 2y ago </TableBody>
116 857e289 Mrdn 2y ago </Table>
117 45e0190 Mrdn 2y ago <div className="flex flex-row justify-center items-center gap-2">
118 45e0190 Mrdn 2y ago <Button className="w-full" onClick={() => resetUsage(entity)}>
119 45e0190 Mrdn 2y ago {t("page.users.reset_usage")}
120 45e0190 Mrdn 2y ago </Button>
121 45e0190 Mrdn 2y ago <UserStatusEnableButton user={entity} />
122 45e0190 Mrdn 2y ago </div>
123 857e289 Mrdn 2y ago </CardContent>
124 857e289 Mrdn 2y ago </Card>
125 857e289 Mrdn 2y ago );
126 857e289 Mrdn 2y ago };