← marzneshin
/
v0.5.0
/
dashboard/src/features/users/components/dialogs/settings/user-info/table.tsx
https://dev.kronoz.win/r/marzneshin.git
1import {
2 Card,
3 CardContent,
4 CardHeader,
5 CardTitle,
6 Table,
7 TableBody,
8 TableRowWithCell,
9 DateTableRow,
10 Badge
11} from "@marzneshin/components";
12import type { FC } from "react";
13import {
14 type UserProp,
15 UserEnabledPill,
16 UserUsedTraffic,
17 UserActivatedPill,
18 UserDataLimitReachedPill,
19 UserExpiredPill,
20} from "@marzneshin/features/users";
21import { useTranslation } from "react-i18next";
22
23export const UserInfoTable: FC<UserProp> = ({ user: entity }) => {
24 const { t } = useTranslation();
25 const expireDate = entity.expire_date ? new Date(entity.expire_date) : null;
26
27 return (
28 <Card>
29 <CardHeader className="flex flex-row justify-between items-center w-full">
30 <CardTitle>{t("user_info")}</CardTitle>
31 </CardHeader>
32 <CardContent>
33 <Table>
34 <TableBody>
35 <TableRowWithCell label={t("username")} value={entity.username} />
36 <TableRowWithCell
37 label={t("activated")}
38 value={<UserActivatedPill user={entity} />}
39 />
40 <TableRowWithCell
41 label={t("enabled")}
42 value={<UserEnabledPill user={entity} />}
43 />
44 <TableRowWithCell
45 label={t("page.users.data_limit_reached")}
46 value={<UserDataLimitReachedPill user={entity} />}
47 />
48 <TableRowWithCell
49 label={t("expired")}
50 value={<UserExpiredPill user={entity} />}
51 />
52 {
53 {
54 fixed_date: (
55 <DateTableRow
56 label={t("page.users.expire_date")}
57 date={expireDate}
58 />
59 ),
60 start_on_first_use: (
61 <>
62 <TableRowWithCell
63 label={t("page.users.usage_duration")}
64 value={
65 (entity.usage_duration ? entity.usage_duration : 0) /
66 86400
67 }
68 />
69 <DateTableRow
70 label={t("page.users.activation_deadline")}
71 date={entity.activation_deadline}
72 />
73 </>
74 ),
75 never: (
76 <TableRowWithCell
77 label={t("page.users.expire_method")}
78 value={t("never")}
79 />
80 ),
81 }[entity.expire_strategy]
82 }
83
84 <TableRowWithCell
85 label={t("page.users.used_traffic")}
86 value={<UserUsedTraffic user={entity} />}
87 />
88 {entity.online_at ? (
89 <DateTableRow
90 label={t("page.users.online_at")}
91 date={entity.online_at}
92 withTime
93 />
94 ) : (
95 <TableRowWithCell
96 label={t("page.users.online_at")}
97 value={<Badge>{t("page.users.no_use")}</Badge>}
98 />
99 )}
100 <DateTableRow
101 label={t("page.users.created_at")}
102 date={entity.created_at}
103 />
104 <TableRowWithCell label={t("note")} value={entity.note} />
105 </TableBody>
106 </Table>
107 </CardContent>
108 </Card>
109 );
110};