mirror of
https://github.com/SamyRai/turash.git
synced 2025-12-26 23:01:33 +00:00
28f06d5787
Some checks failed
CI/CD Pipeline / backend-lint (push) Failing after 31s
CI/CD Pipeline / backend-build (push) Has been skipped
CI/CD Pipeline / frontend-lint (push) Failing after 1m22s
CI/CD Pipeline / frontend-build (push) Has been skipped
CI/CD Pipeline / e2e-test (push) Has been skipped
- Fix React Compiler memoization issues in useOrganizationPage.ts - Replace useCallback with useRef pattern in useKeyboard.ts - Remove unnecessary dependencies from useMemo hooks - Fix prettier formatting in api-client.ts and api-config.ts - Replace any types with proper types in error-handling, http-client, security - Remove unused imports and variables - Move ImpactBreakdownChart component outside render in ImpactMetrics.tsx - Fix setState in effect by using useMemo in HeritageBuildingPage.tsx - Memoize getHistoryTitle with useCallback in MatchDetailPage and MatchNegotiationPage - Add i18n for literal strings in community pages and LoginPage - Fix missing dependencies in DashboardPage and DiscoveryPage
77 lines
2.5 KiB
TypeScript
77 lines
2.5 KiB
TypeScript
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/Card.tsx';
|
|
import { Grid } from '@/components/ui/layout';
|
|
import { Heading, Price, Text } from '@/components/ui/Typography.tsx';
|
|
import { DollarSign, Leaf, TrendingUp } from 'lucide-react';
|
|
|
|
type Props = {
|
|
totalCo2Saved: number;
|
|
totalEconomicValue: number;
|
|
activeMatches: number;
|
|
t: (key: string) => string;
|
|
};
|
|
|
|
const ImpactMetricsSection = ({ totalCo2Saved, totalEconomicValue, activeMatches, t }: Props) => {
|
|
if (totalCo2Saved <= 0 && totalEconomicValue <= 0) return null;
|
|
|
|
return (
|
|
<Grid cols={{ md: 3 }} gap="md">
|
|
<Card>
|
|
<CardHeader className="pb-3">
|
|
<div className="flex items-center gap-2">
|
|
<Leaf className="h-4 w-4 text-green-600" />
|
|
<CardTitle className="text-sm font-medium text-muted-foreground">
|
|
{t('dashboard.co2Saved')}
|
|
</CardTitle>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<Heading level="h3" className="text-green-600 mb-1">
|
|
{totalCo2Saved} {t('dashboard.co2Unit')}
|
|
</Heading>
|
|
<Text variant="muted" className="text-xs">
|
|
{t('dashboard.perYear')}
|
|
</Text>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card>
|
|
<CardHeader className="pb-3">
|
|
<div className="flex items-center gap-2">
|
|
<DollarSign className="h-4 text-success w-4" />
|
|
<CardTitle className="text-sm font-medium text-muted-foreground">
|
|
{t('dashboard.economicValue')}
|
|
</CardTitle>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<Price value={totalEconomicValue} variant="large" className="text-success" />
|
|
<Text variant="muted" className="text-xs mt-1">
|
|
{t('dashboard.created')}
|
|
</Text>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card>
|
|
<CardHeader className="pb-3">
|
|
<div className="flex items-center gap-2">
|
|
<TrendingUp className="h-4 text-blue-600 w-4" />
|
|
<CardTitle className="text-sm font-medium text-muted-foreground">
|
|
{t('dashboard.activeMatches')}
|
|
</CardTitle>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<Heading level="h3" className="text-blue-600 mb-1">
|
|
{activeMatches}
|
|
</Heading>
|
|
<Text variant="muted" className="text-xs">
|
|
{t('dashboard.operational')}
|
|
</Text>
|
|
</CardContent>
|
|
</Card>
|
|
</Grid>
|
|
);
|
|
};
|
|
|
|
export default ImpactMetricsSection;
|