gitscope
← marzneshin / v0.6.4 / dashboard/src/modules/users/components/dialogs/settings/user-info/table.tsx
https://dev.kronoz.win/r/marzneshin.git
dashboard/src/modules/users/components/dialogs/settings/user-info/table.tsx · TypeScript
Blame Raw
  1import {
  2    Card,
  3    Button,
  4    CardContent,
  5    CardHeader,
  6    CardTitle,
  7    Table,
  8    TableBody,
  9    TableRowWithCell,
 10    DateTableRow,
 11    Badge
 12} from "@marzneshin/common/components";
 13import type { FC } from "react";
 14import { UserStatusEnableButton } from "./user-status-enable-button";
 15import {
 16    type UserProp,
 17    UserEnabledPill,
 18    UserUsedTraffic,
 19    UserActivatedPill,
 20    useUserUsageResetCmd,
 21    UserDataLimitReachedPill,
 22    UserExpiredPill,
 23} from "@marzneshin/modules/users";
 24import { useTranslation } from "react-i18next";
 25import { formatDistanceToNow } from "date-fns";
 26import { format } from '@chbphone55/pretty-bytes';
 27import { TimerReset } from "lucide-react";
 28
 29export const UserInfoTable: FC<UserProp> = ({ user: entity }) => {
 30    const { t } = useTranslation();
 31    const expireDate = entity.expire_date ? new Date(entity.expire_date) : null;
 32    const { mutate: resetUsage } = useUserUsageResetCmd();
 33    const lifetimeUsedTrafficByte = format(entity.lifetime_used_traffic);
 34
 35    return (
 36        <Card>
 37            <CardHeader className="flex flex-row justify-between items-center w-full">
 38                <CardTitle>{t("user_info")}</CardTitle>
 39                <div className="hstack justify-center items-center gap-2">
 40                    <Button
 41                        className="rounded-2xl"
 42                        onClick={() => resetUsage(entity)}
 43                    >
 44                        <TimerReset className="mr-2" />
 45                        <span>{t("page.users.reset_usage")}</span>
 46                    </Button>
 47                    <UserStatusEnableButton user={entity} />
 48                </div>
 49            </CardHeader>
 50            <CardContent>
 51                <Table>
 52                    <TableBody>
 53                        <TableRowWithCell label={t("username")} value={entity.username} />
 54                        <TableRowWithCell
 55                            label={t("activated")}
 56                            value={<UserActivatedPill user={entity} />}
 57                        />
 58                        <TableRowWithCell
 59                            label={t("enabled")}
 60                            value={<UserEnabledPill user={entity} />}
 61                        />
 62                        <TableRowWithCell
 63                            label={t("page.users.data_limit_reached")}
 64                            value={<UserDataLimitReachedPill user={entity} />}
 65                        />
 66                        <TableRowWithCell
 67                            label={t("expired")}
 68                            value={<UserExpiredPill user={entity} />}
 69                        />
 70                        {
 71                            {
 72                                fixed_date: (
 73                                    <DateTableRow
 74                                        label={t("page.users.expire_date")}
 75                                        date={expireDate}
 76                                    />
 77                                ),
 78                                start_on_first_use: (
 79                                    <>
 80                                        <TableRowWithCell
 81                                            label={t("page.users.usage_duration")}
 82                                            value={
 83                                                (entity.usage_duration ? entity.usage_duration : 0) /
 84                                                86400
 85                                            }
 86                                        />
 87                                        <DateTableRow
 88                                            label={t("page.users.activation_deadline")}
 89                                            date={entity.activation_deadline}
 90                                        />
 91                                    </>
 92                                ),
 93                                never: (
 94                                    <TableRowWithCell
 95                                        label={t("page.users.expire_method")}
 96                                        value={t("never")}
 97                                    />
 98                                ),
 99                            }[entity.expire_strategy]
100                        }
101                        <TableRowWithCell
102                            label={t("page.users.used_traffic")}
103                            value={<UserUsedTraffic user={entity} />}
104                        />
105                        <DateTableRow
106                            label={t("page.users.traffic_reset_at")}
107                            date={entity.traffic_reset_at}
108                            withTime
109                        />
110                        <TableRowWithCell
111                            label={t("page.users.lifetime_used_traffic")}
112                            value={`${lifetimeUsedTrafficByte[0]} ${lifetimeUsedTrafficByte[1]}`}
113                        />
114                        {entity.online_at ? (
115                            <TableRowWithCell
116                                label={t("page.users.online_at")}
117                                value={formatDistanceToNow(new Date(entity.online_at + "Z")) + " ago"}
118                            />
119                        ) : (
120                            <TableRowWithCell
121                                label={t("page.users.online_at")}
122                                value={<Badge>{t("page.users.no_use")}</Badge>}
123                            />
124                        )}
125                        <DateTableRow
126                            label={t("page.users.sub_updated_at")}
127                            date={entity.sub_updated_at}
128                            withTime
129                        />
130                        <TableRowWithCell
131                            label={t("page.users.sub_last_user_agent")}
132                            value={entity.sub_last_user_agent}
133                        />
134                        <DateTableRow
135                            label={t("page.users.created_at")}
136                            date={entity.created_at}
137                            withTime
138                        />
139                        <TableRowWithCell label={t("note")} value={entity.note} />
140                    </TableBody>
141                </Table>
142            </CardContent>
143        </Card>
144    );
145};