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-alpha5
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 cba9caa Dawsh 2y ago TableRow
11 cba9caa Dawsh 2y ago } from "@marzneshin/components";
12 857e289 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 6955aba 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 857e289 Mrdn 2y ago const TableRowWithCell: FC<{ label: string; value: string | number | JSX.Element }> = ({ label, value }) => (
29 857e289 Mrdn 2y ago <TableRow>
30 857e289 Mrdn 2y ago <TableCell>{label}</TableCell>
31 857e289 Mrdn 2y ago <TableCell>{value}</TableCell>
32 857e289 Mrdn 2y ago </TableRow>
33 857e289 Mrdn 2y ago );
34 857e289 Mrdn 2y ago
35 857e289 Mrdn 2y ago const DateTableRow: FC<{ label: string; date: Date | string }> = ({ label, date }) => {
36 857e289 Mrdn 2y ago let formattedDate = '';
37 857e289 Mrdn 2y ago if (date && isValid(date)) {
38 857e289 Mrdn 2y ago formattedDate = format(date, "PPP");
39 857e289 Mrdn 2y ago }
40 857e289 Mrdn 2y ago return (
41 857e289 Mrdn 2y ago <TableRowWithCell label={label} value={formattedDate} />
42 857e289 Mrdn 2y ago );
43 857e289 Mrdn 2y ago };
44 857e289 Mrdn 2y ago
45 857e289 Mrdn 2y ago const CircularProgressBarRow: FC<{ label: string; value: number; limit: number }> = ({ label, value, limit }) => (
46 857e289 Mrdn 2y ago <TableRow>
47 857e289 Mrdn 2y ago <TableCell>{label}</TableCell>
48 857e289 Mrdn 2y ago <TableCell><CircularProgress size="sm" value={value / limit * 100} /></TableCell>
49 857e289 Mrdn 2y ago </TableRow>
50 857e289 Mrdn 2y ago );
51 857e289 Mrdn 2y ago
52 857e289 Mrdn 2y ago export const UserInfoTable: FC<UserInfoTableProps> = ({ entity }) => {
53 857e289 Mrdn 2y ago const { t } = useTranslation();
54 6955aba Mrdn 2y ago const { mutate: resetUsage } = useUserUsageResetCmd()
55 857e289 Mrdn 2y ago const expireDate = entity.expire ? (isDate(entity.expire) ? entity.expire : new Date(entity.expire)) : null;
56 cba9caa Dawsh 2y ago
57 857e289 Mrdn 2y ago return (
58 857e289 Mrdn 2y ago <Card>
59 6955aba Mrdn 2y ago <CardHeader className="flex flex-row justify-between items-center w-full">
60 857e289 Mrdn 2y ago <CardTitle>{t('user_info')}</CardTitle>
61 cba9caa Dawsh 2y ago <div className="flex flex-row justify-center items-center gap-3">
62 cba9caa Dawsh 2y ago <Button onClick={() => resetUsage(entity)}>
63 cba9caa Dawsh 2y ago {t('page.users.reset_usage')}
64 cba9caa Dawsh 2y ago </Button>
65 cba9caa Dawsh 2y ago <UserStatusEnableButton user={entity} />
66 cba9caa Dawsh 2y ago </div>
67 857e289 Mrdn 2y ago </CardHeader>
68 857e289 Mrdn 2y ago <CardContent>
69 857e289 Mrdn 2y ago <Table>
70 857e289 Mrdn 2y ago <TableBody>
71 857e289 Mrdn 2y ago <TableRowWithCell label={t('username')} value={entity.username} />
72 857e289 Mrdn 2y ago <TableRowWithCell label={t('status')} value={<UsersStatusBadge status={UsersStatus[entity.status]} />} />
73 857e289 Mrdn 2y ago {(expireDate && entity.on_hold_expire_duration === 0) ? (
74 857e289 Mrdn 2y ago <DateTableRow label={t('page.users.expire_date')} date={expireDate} />
75 857e289 Mrdn 2y ago ) : (
76 857e289 Mrdn 2y ago <>
77 857e289 Mrdn 2y ago <TableRowWithCell label={t('page.users.on_hold_expire_duration')} value={entity.on_hold_expire_duration} />
78 857e289 Mrdn 2y ago {entity.on_hold_timeout &&
79 857e289 Mrdn 2y ago <DateTableRow label={t('page.users.expire_date')} date={entity.on_hold_timeout} />
80 857e289 Mrdn 2y ago }
81 857e289 Mrdn 2y ago </>
82 857e289 Mrdn 2y ago )}
83 857e289 Mrdn 2y ago {entity.data_limit &&
84 857e289 Mrdn 2y ago <CircularProgressBarRow label={t('page.users.used_traffic')} value={entity.used_traffic} limit={entity.data_limit} />
85 857e289 Mrdn 2y ago }
86 857e289 Mrdn 2y ago <DateTableRow label={t('page.users.online_at')} date={entity.online_at} />
87 857e289 Mrdn 2y ago <TableRowWithCell label={t('note')} value={entity.note} />
88 857e289 Mrdn 2y ago </TableBody>
89 857e289 Mrdn 2y ago </Table>
90 857e289 Mrdn 2y ago </CardContent>
91 857e289 Mrdn 2y ago </Card>
92 857e289 Mrdn 2y ago );
93 857e289 Mrdn 2y ago };