107 lines
4.1 KiB
TypeScript
107 lines
4.1 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import { Card, CardContent } from '@/components/ui/Card';
|
|
import { formatNumber } from '@/lib/utils';
|
|
import { useTranslation } from '@/hooks/useTranslation';
|
|
import { TrendData } from '@/types/analytics';
|
|
|
|
interface StatsGridProps {
|
|
stats: {
|
|
totalScans: number;
|
|
activeQRCodes: number;
|
|
conversionRate: number;
|
|
};
|
|
trends?: {
|
|
totalScans?: TrendData;
|
|
comparisonPeriod?: 'week' | 'month';
|
|
};
|
|
}
|
|
|
|
export const StatsGrid: React.FC<StatsGridProps> = ({ stats, trends }) => {
|
|
const { t } = useTranslation();
|
|
|
|
// Build trend display text
|
|
const getTrendText = () => {
|
|
if (!trends?.totalScans) {
|
|
return 'No data yet';
|
|
}
|
|
|
|
const trend = trends.totalScans;
|
|
const sign = trend.isNegative ? '-' : '+';
|
|
const period = trends.comparisonPeriod || 'period';
|
|
const newLabel = trend.isNew ? ' (new)' : '';
|
|
|
|
return `${sign}${trend.percentage}%${newLabel} from last ${period}`;
|
|
};
|
|
|
|
const getTrendType = (): 'positive' | 'negative' | 'neutral' => {
|
|
if (!trends?.totalScans) return 'neutral';
|
|
if (trends.totalScans.trend === 'up') return 'positive';
|
|
if (trends.totalScans.trend === 'down') return 'negative';
|
|
return 'neutral';
|
|
};
|
|
|
|
const cards = [
|
|
{
|
|
title: t('dashboard.stats.total_scans'),
|
|
value: formatNumber(stats.totalScans),
|
|
change: getTrendText(),
|
|
changeType: getTrendType(),
|
|
icon: (
|
|
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
|
|
</svg>
|
|
),
|
|
},
|
|
{
|
|
title: t('dashboard.stats.active_codes'),
|
|
value: stats.activeQRCodes.toString(),
|
|
change: stats.activeQRCodes > 0 ? `${stats.activeQRCodes} active` : 'Create your first',
|
|
changeType: stats.activeQRCodes > 0 ? 'positive' : 'neutral' as 'positive' | 'negative' | 'neutral',
|
|
icon: (
|
|
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v1m6 11h2m-6 0h-2v4m0-11v3m0 0h.01M12 12h4.01M16 20h4M4 12h4m12 0h.01M5 8h2a1 1 0 001-1V5a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1zm12 0h2a1 1 0 001-1V5a1 1 0 00-1-1h-2a1 1 0 00-1 1v2a1 1 0 001 1zM5 20h2a1 1 0 001-1v-2a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1z" />
|
|
</svg>
|
|
),
|
|
},
|
|
{
|
|
title: 'Unique Scan Rate',
|
|
value: `${stats.conversionRate}%`,
|
|
change: stats.totalScans > 0 ? `${stats.conversionRate}% new users` : 'No scans yet',
|
|
changeType: stats.conversionRate > 0 ? 'positive' : 'neutral' as 'positive' | 'negative' | 'neutral',
|
|
icon: (
|
|
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
|
|
</svg>
|
|
),
|
|
},
|
|
];
|
|
|
|
return (
|
|
<div className="grid md:grid-cols-3 gap-6">
|
|
{cards.map((card, index) => (
|
|
<Card key={index}>
|
|
<CardContent className="p-6">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<p className="text-sm text-gray-600 mb-1">{card.title}</p>
|
|
<p className="text-2xl font-bold text-gray-900">{card.value}</p>
|
|
<p className={`text-sm mt-2 ${card.changeType === 'positive' ? 'text-success-600' :
|
|
card.changeType === 'negative' ? 'text-red-600' :
|
|
'text-gray-500'
|
|
}`}>
|
|
{card.change}
|
|
</p>
|
|
</div>
|
|
<div className="w-12 h-12 bg-primary-100 rounded-lg flex items-center justify-center text-primary-600">
|
|
{card.icon}
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
);
|
|
}; |