import AppLayout from '@/layouts/app-layout'; import Heading from '@/components/heading'; import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; import { Head } from '@inertiajs/react'; import { TrendingUp, Users, CreditCard, Activity } from 'lucide-react'; interface UserStats { total_users: number; active_users: number; total_credits: number; avg_credits_per_user: number; } interface MonthlyData { month: string; credits_purchased: number; credits_spent: number; } interface Props { userStats: UserStats; monthlyData: MonthlyData[]; } export default function Reports({ userStats = { total_users: 0, active_users: 0, total_credits: 0, avg_credits_per_user: 0 }, monthlyData = [] }: Props) { const stats = userStats || { total_users: 0, active_users: 0, total_credits: 0, avg_credits_per_user: 0 }; const monthly = Array.isArray(monthlyData) ? monthlyData : []; return (
Total Users
{stats.total_users}
 Active Users
{stats.active_users}
Total Credits
${Number(stats.total_credits).toFixed(2)}
Avg Per User
${Number(stats.avg_credits_per_user).toFixed(2)}
Monthly Credit Activity {monthly.length === 0 ? (

No monthly data available.

) : (
{monthly.map((data, index) => (

{data.month}

Purchased

${Number(data.credits_purchased).toFixed(2)}

Spent

${Number(data.credits_spent).toFixed(2)}

))}
)}
); }