gitscope
/
← marzneshin / dashboard/src/features/users/components/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/components/widgets/users-stats-widget/index.tsx · v0.3.1
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 a681493 Mardin 2y ago total: number;
17 e5dcd82 Dawsh 2y ago }
18 e5dcd82 Dawsh 2y ago
19 44d5623 Mardin 2y ago export const UsersStatsWidget: FC<UsersStatsWidgetProps> = ({
20 a681493 Mardin 2y ago active, online, expired, on_hold, limited, total,
21 44d5623 Mardin 2y ago }) => {
22 44d5623 Mardin 2y ago const { t } = useTranslation();
23 e5dcd82 Dawsh 2y ago
24 44d5623 Mardin 2y ago const data = [
25 44d5623 Mardin 2y ago { symbol: "Active", amount: active, color: "fill-blue-500" },
26 44d5623 Mardin 2y ago { symbol: "Online", amount: online, color: "fill-emerald-500" },
27 44d5623 Mardin 2y ago { symbol: "Expired", amount: expired, color: "fill-gray-600" },
28 44d5623 Mardin 2y ago { symbol: "On Hold", amount: on_hold, color: "fill-purple-500" },
29 44d5623 Mardin 2y ago { symbol: "Limited", amount: limited, color: "fill-red-500" },
30 e5dcd82 Dawsh 2y ago ];
31 e5dcd82 Dawsh 2y ago
32 e5dcd82 Dawsh 2y ago return (
33 e5dcd82 Dawsh 2y ago <MiniWidget
34 44d5623 Mardin 2y ago title={<> <UsersIcon /> {t('users')} </>}
35 44d5623 Mardin 2y ago >
36 44d5623 Mardin 2y ago <div className='flex md:flex-row flex-col items-center md:items-start gap-5 justify-between'>
37 44d5623 Mardin 2y ago <PieChart
38 44d5623 Mardin 2y ago data={data}
39 44d5623 Mardin 2y ago width={200}
40 44d5623 Mardin 2y ago height={200}
41 44d5623 Mardin 2y ago total={total}
42 44d5623 Mardin 2y ago label={t('users')}
43 44d5623 Mardin 2y ago />
44 44d5623 Mardin 2y ago <UsersStatsLegend />
45 44d5623 Mardin 2y ago </div>
46 44d5623 Mardin 2y ago </MiniWidget>
47 44d5623 Mardin 2y ago );
48 44d5623 Mardin 2y ago };
49 e5dcd82 Dawsh 2y ago