hamid zarghami
55 lines
2.1 KiB
TypeScript
55 lines
2.1 KiB
TypeScript
import { useQuery } from "@tanstack/react-query"
|
|
import { StatusBoxItemInterface } from "../../types"
|
|
import { StatusBoxItem } from "../common/status-box-items"
|
|
import { getOverviewDetails } from "../../services/api/overview"
|
|
import { useEffect, useState } from "react"
|
|
import { Coin1, DollarCircle, Radar, Star } from "iconsax-react"
|
|
import { HomeStatusSkeleton } from "./status-skeleton"
|
|
import { handleError } from "../../utility/error-handle"
|
|
|
|
export const StatusBox = () => {
|
|
const { data, isLoading, error } = useQuery({
|
|
queryKey: ['overview'],
|
|
queryFn: getOverviewDetails
|
|
})
|
|
const [statusData, setStatusData] = useState<StatusBoxItemInterface[] | []>([])
|
|
|
|
useEffect(() => {
|
|
setStatusData([
|
|
{
|
|
name: "dollar",
|
|
title: "دارایی تومانی",
|
|
icon: <DollarCircle color="#292D32" variant="Bold" className="size-[40px]" />,
|
|
value: data?.data?.user?.walletBalance
|
|
},
|
|
// {
|
|
// name: "coin",
|
|
// title: "دارایی از تمدید اشتراک",
|
|
// icon: <Coin1 color="#292D32" variant="Bold" className="size-[40px]" />,
|
|
// value: data?.data?.user?.walletBalance
|
|
// },
|
|
{
|
|
name: "star",
|
|
title: "امتیاز شرکت در قرعه کشی",
|
|
icon: <Star color="#292D32" variant="Bold" className="size-[40px]" />,
|
|
value: data?.data?.user?.score
|
|
},
|
|
{
|
|
name: "radar",
|
|
title: "تعداد کل دستگاه ثبت شده موفق",
|
|
icon: <Radar color="#292D32" variant="Bold" className="size-[40px]" />,
|
|
value: data?.data?.installedDevice
|
|
}])
|
|
}, [data])
|
|
|
|
useEffect(() => {
|
|
handleError(error)
|
|
}, [error])
|
|
|
|
if (isLoading) return <HomeStatusSkeleton />
|
|
return (
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 2xl:grid-cols-4 gap-6">
|
|
{statusData?.map((item: StatusBoxItemInterface) => <StatusBoxItem key={item?.name} item={item} />)}
|
|
</div>
|
|
)
|
|
} |