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