178 lines
9.7 KiB
TypeScript
178 lines
9.7 KiB
TypeScript
import React from 'react';
|
||
import {
|
||
BarChart3,
|
||
TrendingUp,
|
||
ArrowUpRight,
|
||
ArrowDownRight,
|
||
Globe,
|
||
Monitor,
|
||
Smartphone,
|
||
Calendar
|
||
} from 'lucide-react';
|
||
import { supabaseAdmin } from '@/lib/supabase';
|
||
import { format, subDays } from 'date-fns';
|
||
import { tr } from 'date-fns/locale';
|
||
|
||
async function getAnalyticsData() {
|
||
const { data: transactions, error } = await supabaseAdmin
|
||
.from('transactions')
|
||
.select('*')
|
||
.order('created_at', { ascending: true });
|
||
|
||
if (error || !transactions) return null;
|
||
|
||
const successfulTransactions = transactions.filter(t => t.status === 'succeeded');
|
||
const totalRevenue = successfulTransactions.reduce((acc, t) => acc + Number(t.amount), 0);
|
||
const avgOrderValue = successfulTransactions.length > 0 ? totalRevenue / successfulTransactions.length : 0;
|
||
|
||
// Monthly data for chart (grouped by month or last 12 periods)
|
||
// To keep it simple and meaningful, let's show last 12 days for "Gelir Trendi"
|
||
const last12Periods = Array.from({ length: 12 }, (_, i) => {
|
||
const d = subDays(new Date(), 11 - i);
|
||
return {
|
||
date: d.toISOString().split('T')[0],
|
||
label: format(d, 'd MMM', { locale: tr }),
|
||
amount: 0
|
||
};
|
||
});
|
||
|
||
successfulTransactions.forEach(t => {
|
||
const dateStr = new Date(t.created_at).toISOString().split('T')[0];
|
||
const periodMatch = last12Periods.find(p => p.date === dateStr);
|
||
if (periodMatch) {
|
||
periodMatch.amount += Number(t.amount);
|
||
}
|
||
});
|
||
|
||
return {
|
||
totalRevenue,
|
||
avgOrderValue,
|
||
chartData: last12Periods,
|
||
totalCount: transactions.length,
|
||
successCount: successfulTransactions.length,
|
||
};
|
||
}
|
||
|
||
export default async function AnalyticsPage() {
|
||
const data = await getAnalyticsData();
|
||
|
||
if (!data) return <div className="p-10 font-black text-gray-400 uppercase tracking-[0.2em] animate-pulse">Veriler hazırlanıyor...</div>;
|
||
|
||
const metrics = [
|
||
{ label: 'Dönüşüm Oranı', value: '3.24%', trend: '+0.8%', positive: true }, // Mocked for now
|
||
{ label: 'Ort. Sipariş Tutarı', value: `${data.avgOrderValue.toLocaleString('tr-TR', { maximumFractionDigits: 2 })} ₺`, trend: '+12%', positive: true },
|
||
{ label: 'Başarılı İşlem', value: data.successCount.toString(), trend: '+24%', positive: true },
|
||
{ label: 'İşlem Başarısı', value: `${((data.successCount / (data.totalCount || 1)) * 100).toFixed(1)}%`, trend: '-0.2%', positive: false },
|
||
];
|
||
|
||
const maxChartAmount = Math.max(...data.chartData.map(d => d.amount), 100);
|
||
|
||
return (
|
||
<div className="space-y-10 animate-in fade-in slide-in-from-bottom-4 duration-700">
|
||
{/* Header */}
|
||
<div className="flex flex-col md:flex-row md:items-center justify-between gap-6">
|
||
<div>
|
||
<h1 className="text-3xl font-black text-gray-900 tracking-tight">Analizler</h1>
|
||
<p className="text-sm text-gray-400 font-bold uppercase tracking-widest mt-2">Sistem performans verileri</p>
|
||
</div>
|
||
<div className="flex items-center gap-4">
|
||
<button className="flex items-center gap-3 px-6 py-4 bg-white border border-gray-100 rounded-2xl text-xs font-black text-gray-600 hover:bg-gray-50 transition uppercase tracking-widest">
|
||
<Calendar size={18} className="text-gray-300" />
|
||
Son 30 Gün
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Main Metrics */}
|
||
<div className="grid grid-cols-1 lg:grid-cols-4 gap-8">
|
||
{metrics.map((item, i) => (
|
||
<div key={i} className="bg-white p-8 rounded-[32px] border border-gray-100 shadow-sm space-y-4">
|
||
<p className="text-[10px] text-gray-400 font-black uppercase tracking-[0.2em]">{item.label}</p>
|
||
<div className="flex items-end justify-between">
|
||
<h3 className="text-2xl font-black text-gray-900 leading-none">{item.value}</h3>
|
||
<div className={`flex items-center gap-1 text-[10px] font-black uppercase tracking-tighter ${item.positive ? 'text-emerald-500' : 'text-red-500'}`}>
|
||
{item.positive ? <ArrowUpRight size={14} /> : <ArrowDownRight size={14} />}
|
||
{item.trend}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
{/* Charts Grid */}
|
||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
||
{/* Performance Chart */}
|
||
<div className="bg-white p-10 rounded-[40px] border border-gray-100 shadow-sm space-y-10 text-sans tracking-tight">
|
||
<div className="flex justify-between items-center">
|
||
<h3 className="text-xl font-black text-gray-900 uppercase tracking-tight">Ciro Trendi (12 Gün)</h3>
|
||
<div className="flex items-center gap-4">
|
||
<div className="flex items-center gap-2">
|
||
<div className="w-2 h-2 rounded-full bg-blue-500"></div>
|
||
<span className="text-[10px] font-bold text-gray-400 uppercase tracking-widest">Gerçekleşen</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="h-72 flex items-end justify-between gap-4">
|
||
{data.chartData.map((d, i) => {
|
||
const h = (d.amount / maxChartAmount) * 90 + 5; // 5% to 95%
|
||
return (
|
||
<div key={i} className="flex-1 group relative h-full flex flex-col justify-end">
|
||
<div
|
||
className="w-full bg-blue-500 rounded-t-xl transition-all duration-500 group-hover:bg-blue-600 cursor-pointer relative"
|
||
style={{ height: `${h}%` }}
|
||
>
|
||
<div className="absolute -top-12 left-1/2 -translate-x-1/2 bg-gray-900 text-white text-[10px] font-black py-2 px-3 rounded-lg opacity-0 group-hover:opacity-100 transition shadow-xl pointer-events-none whitespace-nowrap z-20">
|
||
{d.amount.toLocaleString('tr-TR')} ₺
|
||
</div>
|
||
</div>
|
||
<div className="absolute -bottom-8 left-1/2 -translate-x-1/2 text-[9px] font-black text-gray-300 uppercase tracking-tighter text-center">
|
||
{d.label}
|
||
</div>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Breakdown Grid */}
|
||
<div className="grid grid-cols-1 gap-8 text-sans tracking-tight">
|
||
<div className="bg-white p-10 rounded-[40px] border border-gray-100 shadow-sm">
|
||
<h3 className="text-xl font-black text-gray-900 uppercase tracking-tight mb-8">Cihaz Dağılımı</h3>
|
||
<div className="space-y-8">
|
||
{[
|
||
{ label: 'Mobil', value: '64%', icon: Smartphone, color: 'bg-blue-600', width: '64%' },
|
||
{ label: 'Masaüstü', value: '28%', icon: Monitor, color: 'bg-indigo-400', width: '28%' },
|
||
{ label: 'Tablet', value: '8%', icon: Globe, color: 'bg-indigo-100', width: '8%' },
|
||
].map((item, i) => (
|
||
<div key={i} className="space-y-3">
|
||
<div className="flex items-center justify-between text-xs font-black text-gray-900 uppercase tracking-widest">
|
||
<div className="flex items-center gap-3">
|
||
<item.icon size={18} className="text-gray-300" />
|
||
<span>{item.label}</span>
|
||
</div>
|
||
<span>{item.value}</span>
|
||
</div>
|
||
<div className="h-3 w-full bg-gray-50 rounded-full overflow-hidden border border-gray-100">
|
||
<div className={`h-full ${item.color} rounded-full`} style={{ width: item.width }}></div>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="bg-[#2563EB] p-10 rounded-[40px] shadow-2xl shadow-blue-200 text-white relative overflow-hidden group">
|
||
<div className="relative z-10 space-y-6">
|
||
<h3 className="text-2xl font-black leading-tight">Analizleriniz hazır! <br /> Bu ay başarılı bir grafik çiziyorsunuz.</h3>
|
||
<button className="px-8 py-4 bg-white text-blue-600 rounded-2xl font-black text-sm hover:scale-105 transition active:scale-95 shadow-xl uppercase tracking-widest">
|
||
Akıllı İpuçlarını Aç
|
||
</button>
|
||
</div>
|
||
<BarChart3 className="absolute -bottom-10 -right-10 w-64 h-64 text-white/10 rotate-12 group-hover:rotate-0 transition-transform duration-700" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|