gitscope
/
← marzneshin / dashboard/src/features/users/widgets/users-stats-widget/index.tsx / blame
Files Commits 446 Branches 1 Tags 43 Markers 4 README License
https://dev.kronoz.win/r/marzneshin.git
dashboard/src/features/users/widgets/users-stats-widget/index.tsx · v0.3.0
Source
1 e5dcd82 Dawsh 2y ago import { FC } from 'react';
2 44d5623 Mardin 2y ago import { UsersIcon } from 'lucide-react';
3 e5dcd82 Dawsh 2y ago import { useTranslation } from 'react-i18next';
4 44d5623 Mardin 2y ago import {
5 44d5623 Mardin 2y ago MiniWidget,
6 44d5623 Mardin 2y ago PieChart,
7 44d5623 Mardin 2y ago } from "@marzneshin/components";
8 44d5623 Mardin 2y ago import { UsersStatsLegend } from './legend';
9 e5dcd82 Dawsh 2y ago
10 44d5623 Mardin 2y ago interface UsersStatsWidgetProps {
11 44d5623 Mardin 2y ago active: number;
12 44d5623 Mardin 2y ago online: number;
13 44d5623 Mardin 2y ago expired: number;
14 44d5623 Mardin 2y ago on_hold: number;
15 44d5623 Mardin 2y ago limited: number;
16 e5dcd82 Dawsh 2y ago }
17 e5dcd82 Dawsh 2y ago
18 44d5623 Mardin 2y ago export const UsersStatsWidget: FC<UsersStatsWidgetProps> = ({
19 44d5623 Mardin 2y ago active, online, expired, on_hold, limited
20 44d5623 Mardin 2y ago }) => {
21 44d5623 Mardin 2y ago const { t } = useTranslation();
22 e5dcd82 Dawsh 2y ago
23 44d5623 Mardin 2y ago const data = [
24 44d5623 Mardin 2y ago { symbol: "Active", amount: active, color: "fill-blue-500" },
25 44d5623 Mardin 2y ago { symbol: "Online", amount: online, color: "fill-emerald-500" },
26 44d5623 Mardin 2y ago { symbol: "Expired", amount: expired, color: "fill-gray-600" },
27 44d5623 Mardin 2y ago { symbol: "On Hold", amount: on_hold, color: "fill-purple-500" },
28 44d5623 Mardin 2y ago { symbol: "Limited", amount: limited, color: "fill-red-500" },
29 e5dcd82 Dawsh 2y ago ];
30 e5dcd82 Dawsh 2y ago
31 44d5623 Mardin 2y ago const total = active + online + expired + on_hold + limited
32 e5dcd82 Dawsh 2y ago
33 e5dcd82 Dawsh 2y ago return (
34 e5dcd82 Dawsh 2y ago <MiniWidget
35 44d5623 Mardin 2y ago title={<> <UsersIcon /> {t('users')} </>}
36 44d5623 Mardin 2y ago >
37 44d5623 Mardin 2y ago <div className='flex md:flex-row flex-col items-center md:items-start gap-5 justify-between'>
38 44d5623 Mardin 2y ago <PieChart
39 44d5623 Mardin 2y ago data={data}
40 44d5623 Mardin 2y ago width={200}
41 44d5623 Mardin 2y ago height={200}
42 44d5623 Mardin 2y ago total={total}
43 44d5623 Mardin 2y ago label={t('users')}
44 44d5623 Mardin 2y ago />
45 44d5623 Mardin 2y ago <UsersStatsLegend />
46 44d5623 Mardin 2y ago </div>
47 44d5623 Mardin 2y ago </MiniWidget>
48 44d5623 Mardin 2y ago );
49 44d5623 Mardin 2y ago };
50 e5dcd82 Dawsh 2y ago