https://dev.kronoz.win/r/marzneshin.git
1import {
2 Badge,
3 Button,
4 Card,
5 CardContent,
6 CardHeader,
7 CardTitle,
8 DateTableRow,
9 Table,
10 TableBody,
11 TableRowWithCell,
12} from "@marzneshin/common/components";
13import type { FC } from "react";
14import { UserStatusEnableButton } from "./user-status-enable-button";
15import {
16 UserActivatedPill,
17 UserDataLimitReachedPill,
18 UserEnabledPill,
19 UserExpiredPill,
20 type UserProp,
21 UserUsedTraffic,
22 useUserUsageResetCmd,
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 { mutate: resetUsage } = useUserUsageResetCmd();
32 const lifetimeUsedTrafficByte = format(entity.lifetime_used_traffic);
33
34 return (
35 <Card>
36 <CardHeader className="flex flex-row justify-between items-center w-full">
37 <CardTitle>{t("user_info")}</CardTitle>
38 <div className="hstack justify-center items-center gap-2">
39 <Button
40 className="rounded-2xl"
41 onClick={() => resetUsage(entity)}
42 >
43 <TimerReset className="mr-2" />
44 <span>{t("page.users.reset_usage")}</span>
45 </Button>
46 <UserStatusEnableButton user={entity} />
47 </div>
48 </CardHeader>
49 <CardContent>
50 <Table>
51 <TableBody>
52 <TableRowWithCell
53 label={t("username")}
54 value={entity.username}
55 />
56 <TableRowWithCell
57 label={t("activated")}
58 value={<UserActivatedPill user={entity} />}
59 />
60 <TableRowWithCell
61 label={t("enabled")}
62 value={<UserEnabledPill user={entity} />}
63 />
64 <TableRowWithCell
65 label={t("page.users.data_limit_reached")}
66 value={<UserDataLimitReachedPill user={entity} />}
67 />
68 <TableRowWithCell
69 label={t("expired")}
70 value={<UserExpiredPill user={entity} />}
71 />
72 {
73 {
74 fixed_date: (
75 <DateTableRow
76 label={t("page.users.expire_date")}
77 date={entity.expire_date}
78 />
79 ),
80 start_on_first_use: (
81 <>
82 <TableRowWithCell
83 label={t(
84 "page.users.usage_duration",
85 )}
86 value={
87 (entity.usage_duration
88 ? entity.usage_duration
89 : 0) / 86400
90 }
91 />
92 <DateTableRow
93 label={t(
94 "page.users.activation_deadline",
95 )}
96 date={entity.activation_deadline}
97 />
98 </>
99 ),
100 never: (
101 <TableRowWithCell
102 label={t("page.users.expire_method")}
103 value={
104 <Badge>
105 {t("page.users.never")}
106 </Badge>
107 }
108 />
109 ),
110 }[entity.expire_strategy]
111 }
112 <TableRowWithCell
113 label={t("page.users.used_traffic")}
114 value={<UserUsedTraffic user={entity} />}
115 />
116 {entity.traffic_reset_at ? (
117 <DateTableRow
118 label={t("page.users.traffic_reset_at")}
119 date={entity.traffic_reset_at}
120 withTime
121 />
122 ) : (
123 <TableRowWithCell
124 label={t("page.users.traffic_reset_at")}
125 value={<Badge>{t("page.users.never")}</Badge>}
126 />
127 )}
128 <TableRowWithCell
129 label={t("page.users.lifetime_used_traffic")}
130 value={`${lifetimeUsedTrafficByte[0]} ${lifetimeUsedTrafficByte[1]}`}
131 />
132 {entity.online_at ? (
133 <TableRowWithCell
134 label={t("page.users.online_at")}
135 value={
136 formatDistanceToNow(
137 new Date(entity.online_at + "Z"),
138 ) + " ago"
139 }
140 />
141 ) : (
142 <TableRowWithCell
143 label={t("page.users.online_at")}
144 value={<Badge>{t("page.users.no_use")}</Badge>}
145 />
146 )}
147 {entity.sub_updated_at ? (
148 <DateTableRow
149 label={t("page.users.sub_updated_at")}
150 date={entity.sub_updated_at}
151 withTime
152 />
153 ) : (
154 <TableRowWithCell
155 label={t("page.users.sub_updated_at")}
156 value={<Badge>{t("page.users.never")}</Badge>}
157 />
158 )}
159 <TableRowWithCell
160 label={t("page.users.sub_last_user_agent")}
161 value={
162 entity.sub_last_user_agent ? (
163 entity.sub_last_user_agent
164 ) : (
165 <Badge>{t("page.users.no_use")}</Badge>
166 )
167 }
168 />
169 <DateTableRow
170 label={t("page.users.created_at")}
171 date={entity.created_at}
172 withTime
173 />
174 <TableRowWithCell
175 label={t("note")}
176 value={entity.note}
177 />
178 </TableBody>
179 </Table>
180 </CardContent>
181 </Card>
182 );
183};