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-alpha3
Source
1 857e289 Mrdn 2y ago import { Card, CardContent, CardHeader, CardTitle, Table, TableBody, TableCell, TableRow } from "@marzneshin/components";
2 857e289 Mrdn 2y ago import { FC } from 'react';
3 857e289 Mrdn 2y ago import { UserType, UsersStatus, UsersStatusBadge } from '@marzneshin/features/users';
4 857e289 Mrdn 2y ago import { CircularProgress } from "@nextui-org/progress";
5 857e289 Mrdn 2y ago import { useTranslation } from "react-i18next";
6 857e289 Mrdn 2y ago import { format, isDate, isValid } from "date-fns";
7 857e289 Mrdn 2y ago
8 857e289 Mrdn 2y ago interface UserInfoTableProps {
9 857e289 Mrdn 2y ago entity: UserType;
10 857e289 Mrdn 2y ago }
11 857e289 Mrdn 2y ago
12 857e289 Mrdn 2y ago const TableRowWithCell: FC<{ label: string; value: string | number | JSX.Element }> = ({ label, value }) => (
13 857e289 Mrdn 2y ago <TableRow>
14 857e289 Mrdn 2y ago <TableCell>{label}</TableCell>
15 857e289 Mrdn 2y ago <TableCell>{value}</TableCell>
16 857e289 Mrdn 2y ago </TableRow>
17 857e289 Mrdn 2y ago );
18 857e289 Mrdn 2y ago
19 857e289 Mrdn 2y ago const DateTableRow: FC<{ label: string; date: Date | string }> = ({ label, date }) => {
20 857e289 Mrdn 2y ago let formattedDate = '';
21 857e289 Mrdn 2y ago if (date && isValid(date)) {
22 857e289 Mrdn 2y ago formattedDate = format(date, "PPP");
23 857e289 Mrdn 2y ago }
24 857e289 Mrdn 2y ago return (
25 857e289 Mrdn 2y ago <TableRowWithCell label={label} value={formattedDate} />
26 857e289 Mrdn 2y ago );
27 857e289 Mrdn 2y ago };
28 857e289 Mrdn 2y ago
29 857e289 Mrdn 2y ago const CircularProgressBarRow: FC<{ label: string; value: number; limit: number }> = ({ label, value, limit }) => (
30 857e289 Mrdn 2y ago <TableRow>
31 857e289 Mrdn 2y ago <TableCell>{label}</TableCell>
32 857e289 Mrdn 2y ago <TableCell><CircularProgress size="sm" value={value / limit * 100} /></TableCell>
33 857e289 Mrdn 2y ago </TableRow>
34 857e289 Mrdn 2y ago );
35 857e289 Mrdn 2y ago
36 857e289 Mrdn 2y ago export const UserInfoTable: FC<UserInfoTableProps> = ({ entity }) => {
37 857e289 Mrdn 2y ago const { t } = useTranslation();
38 857e289 Mrdn 2y ago
39 857e289 Mrdn 2y ago const expireDate = entity.expire ? (isDate(entity.expire) ? entity.expire : new Date(entity.expire)) : null;
40 857e289 Mrdn 2y ago return (
41 857e289 Mrdn 2y ago <Card>
42 857e289 Mrdn 2y ago <CardHeader>
43 857e289 Mrdn 2y ago <CardTitle>{t('user_info')}</CardTitle>
44 857e289 Mrdn 2y ago </CardHeader>
45 857e289 Mrdn 2y ago <CardContent>
46 857e289 Mrdn 2y ago <Table>
47 857e289 Mrdn 2y ago <TableBody>
48 857e289 Mrdn 2y ago <TableRowWithCell label={t('username')} value={entity.username} />
49 857e289 Mrdn 2y ago <TableRowWithCell label={t('status')} value={<UsersStatusBadge status={UsersStatus[entity.status]} />} />
50 857e289 Mrdn 2y ago {(expireDate && entity.on_hold_expire_duration === 0) ? (
51 857e289 Mrdn 2y ago <DateTableRow label={t('page.users.expire_date')} date={expireDate} />
52 857e289 Mrdn 2y ago ) : (
53 857e289 Mrdn 2y ago <>
54 857e289 Mrdn 2y ago <TableRowWithCell label={t('page.users.on_hold_expire_duration')} value={entity.on_hold_expire_duration} />
55 857e289 Mrdn 2y ago {entity.on_hold_timeout &&
56 857e289 Mrdn 2y ago <DateTableRow label={t('page.users.expire_date')} date={entity.on_hold_timeout} />
57 857e289 Mrdn 2y ago }
58 857e289 Mrdn 2y ago </>
59 857e289 Mrdn 2y ago )}
60 857e289 Mrdn 2y ago {entity.data_limit &&
61 857e289 Mrdn 2y ago <CircularProgressBarRow label={t('page.users.used_traffic')} value={entity.used_traffic} limit={entity.data_limit} />
62 857e289 Mrdn 2y ago }
63 857e289 Mrdn 2y ago <DateTableRow label={t('page.users.online_at')} date={entity.online_at} />
64 857e289 Mrdn 2y ago <TableRowWithCell label={t('note')} value={entity.note} />
65 857e289 Mrdn 2y ago </TableBody>
66 857e289 Mrdn 2y ago </Table>
67 857e289 Mrdn 2y ago </CardContent>
68 857e289 Mrdn 2y ago </Card>
69 857e289 Mrdn 2y ago );
70 857e289 Mrdn 2y ago };