You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
66 lines
2.0 KiB
66 lines
2.0 KiB
'use client'
|
|
|
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
|
|
import { BarChart3, Smartphone, Key, MessageSquare } from 'lucide-react'
|
|
import GetStartedCard from './get-started'
|
|
import { ApiEndpoints } from '@/config/api'
|
|
import httpBrowserClient from '@/lib/httpBrowserClient'
|
|
import { useQuery } from '@tanstack/react-query'
|
|
// import GetStartedCard from "@/components/get-started-card";
|
|
|
|
export const StatCard = ({ title, value, icon: Icon, description }) => {
|
|
return (
|
|
<Card>
|
|
<CardHeader className='flex flex-row items-center justify-between space-y-0 pb-2'>
|
|
<CardTitle className='text-sm font-medium'>{title}</CardTitle>
|
|
<Icon className='h-4 w-4 text-muted-foreground' />
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className='text-2xl font-bold'>{value}</div>
|
|
<p className='text-xs text-muted-foreground'>{description}</p>
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
}
|
|
|
|
export default function Overview() {
|
|
const { data: stats } = useQuery({
|
|
queryKey: ['stats'],
|
|
queryFn: () =>
|
|
httpBrowserClient
|
|
.get(ApiEndpoints.gateway.getStats())
|
|
.then((res) => res.data?.data),
|
|
})
|
|
|
|
return (
|
|
<div className='space-y-4'>
|
|
<GetStartedCard />
|
|
<div className='grid gap-4 grid-cols-2 lg:grid-cols-4'>
|
|
<StatCard
|
|
title='Total SMS Sent'
|
|
value={stats?.totalSentSMSCount?.toLocaleString()}
|
|
icon={MessageSquare}
|
|
description='Since last year'
|
|
/>
|
|
<StatCard
|
|
title='Active Devices'
|
|
value={stats?.totalDeviceCount}
|
|
icon={Smartphone}
|
|
description='Connected now'
|
|
/>
|
|
<StatCard
|
|
title='API Keys'
|
|
value={stats?.totalApiKeyCount}
|
|
icon={Key}
|
|
description='Active keys'
|
|
/>
|
|
<StatCard
|
|
title='SMS Received'
|
|
value={stats?.totalReceivedSMSCount?.toLocaleString()}
|
|
icon={BarChart3}
|
|
description='Since last year'
|
|
/>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|