https://dev.kronoz.win/r/marzneshin.git
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};