← marzneshin
/
v0.6.3
/
dashboard/src/modules/users/components/dialogs/settings/user-info/table.tsx
https://dev.kronoz.win/r/marzneshin.git
1import {
2 Card,
3 Button,
4 CardContent,
5 CardHeader,
6 CardTitle,
7 Table,
8 TableBody,
9 TableRowWithCell,
10 DateTableRow,
11 Badge
12} from "@marzneshin/common/components";
13import type { FC } from "react";
14import { UserStatusEnableButton } from "./user-status-enable-button";
15import {
16 type UserProp,
17 UserEnabledPill,
18 UserUsedTraffic,
19 UserActivatedPill,
20 useUserUsageResetCmd,
21 UserDataLimitReachedPill,
22 UserExpiredPill,
23} from "@marzneshin/modules/users";
24import { useTranslation } from "react-i18next";
25import { formatDistanceToNow } from "date-fns";
26import { format } from '@chbphone55/pretty-bytes';
27import { TimerReset } from "lucide-react";
28
29export const UserInfoTable: FC<UserProp> = ({ user: entity }) => {
30 const { t } = useTranslation();
31 const expireDate = entity.expire_date ? new Date(entity.expire_date) : null;
32 const { mutate: resetUsage } = useUserUsageResetCmd();
33 const lifetimeUsedTrafficByte = format(entity.lifetime_used_traffic);
34
35 return (
36 <Card>
37 <CardHeader className="flex flex-row justify-between items-center w-full">
38 <CardTitle>{t("user_info")}</CardTitle>
39 <div className="hstack justify-center items-center gap-2">
40 <Button
41 className="rounded-2xl"
42 onClick={() => resetUsage(entity)}
43 >
44 <TimerReset className="mr-2" />
45 <span>{t("page.users.reset_usage")}</span>
46 </Button>
47 <UserStatusEnableButton user={entity} />
48 </div>
49 </CardHeader>
50 <CardContent>
51 <Table>
52 <TableBody>
53 <TableRowWithCell label={t("username")} value={entity.username} />
54 <TableRowWithCell
55 label={t("activated")}
56 value={<UserActivatedPill user={entity} />}
57 />
58 <TableRowWithCell
59 label={t("enabled")}
60 value={<UserEnabledPill user={entity} />}
61 />
62 <TableRowWithCell
63 label={t("page.users.data_limit_reached")}
64 value={<UserDataLimitReachedPill user={entity} />}
65 />
66 <TableRowWithCell
67 label={t("expired")}
68 value={<UserExpiredPill user={entity} />}
69 />
70 {
71 {
72 fixed_date: (
73 <DateTableRow
74 label={t("page.users.expire_date")}
75 date={expireDate}
76 />
77 ),
78 start_on_first_use: (
79 <>
80 <TableRowWithCell
81 label={t("page.users.usage_duration")}
82 value={
83 (entity.usage_duration ? entity.usage_duration : 0) /
84 86400
85 }
86 />
87 <DateTableRow
88 label={t("page.users.activation_deadline")}
89 date={entity.activation_deadline}
90 />
91 </>
92 ),
93 never: (
94 <TableRowWithCell
95 label={t("page.users.expire_method")}
96 value={t("never")}
97 />
98 ),
99 }[entity.expire_strategy]
100 }
101 <TableRowWithCell
102 label={t("page.users.used_traffic")}
103 value={<UserUsedTraffic user={entity} />}
104 />
105 <DateTableRow
106 label={t("page.users.traffic_reset_at")}
107 date={entity.traffic_reset_at}
108 withTime
109 />
110 <TableRowWithCell
111 label={t("page.users.lifetime_used_traffic")}
112 value={`${lifetimeUsedTrafficByte[0]} ${lifetimeUsedTrafficByte[1]}`}
113 />
114 {entity.online_at ? (
115 <TableRowWithCell
116 label={t("page.users.online_at")}
117 value={formatDistanceToNow(new Date(entity.online_at + "Z")) + " ago"}
118 />
119 ) : (
120 <TableRowWithCell
121 label={t("page.users.online_at")}
122 value={<Badge>{t("page.users.no_use")}</Badge>}
123 />
124 )}
125 <DateTableRow
126 label={t("page.users.sub_updated_at")}
127 date={entity.sub_updated_at}
128 withTime
129 />
130 <TableRowWithCell
131 label={t("page.users.sub_last_user_agent")}
132 value={entity.sub_last_user_agent}
133 />
134 <DateTableRow
135 label={t("page.users.created_at")}
136 date={entity.created_at}
137 withTime
138 />
139 <TableRowWithCell label={t("note")} value={entity.note} />
140 </TableBody>
141 </Table>
142 </CardContent>
143 </Card>
144 );
145};