turash/bugulma/frontend/components/admin/DashboardStats.tsx

47 lines
1.4 KiB
TypeScript

import { StatCard } from '@/components/admin';
import { Grid } from '@/components/ui/layout';
import { useTranslation } from '@/hooks/useI18n.tsx';
import { BadgeCheck, Briefcase, Network, TrendingUp } from 'lucide-react';
import React from 'react';
interface DashboardStatsProps {
stats: {
total: number;
verified: number;
connections: number;
newLast30Days: number;
};
isLoading?: boolean;
}
const DashboardStats = ({ stats, isLoading }: DashboardStatsProps) => {
const { t } = useTranslation();
return (
<Grid cols={{ md: 2, lg: 4 }} gap="md">
<StatCard
title={t('adminPage.totalOrgs')}
value={String(stats.total)}
icon={<Briefcase className="h-4 text-current text-muted-foreground w-4" />}
/>
<StatCard
title={t('adminPage.verifiedOrgs')}
value={String(stats.verified)}
icon={<BadgeCheck className="h-4 text-current text-muted-foreground w-4" />}
/>
<StatCard
title={t('adminPage.connections')}
value={String(stats.connections)}
icon={<Network className="h-4 text-current text-muted-foreground w-4" />}
/>
<StatCard
title={t('adminPage.newLast30Days')}
value={`+${stats.newLast30Days}`}
icon={<TrendingUp className="h-4 text-current text-muted-foreground w-4" />}
/>
</Grid>
);
};
export default React.memo(DashboardStats);