complete sync api

src/components/home/status-box.tsx

@@ -1,13 +1,49 @@
+import { useQuery } from "@tanstack/react-query"
 import { StatusBoxItemInterface } from "../../types"
-import { statusBoxItems } from "../../utility/status"
 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"
 
 export const StatusBox = () => {
+    const { data, isLoading } = 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?.dollarBalance
+        },
+        {
+            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])
 
+    if (isLoading) return <HomeStatusSkeleton />
     return (
         <div className="grid grid-cols-1 sm:grid-cols-2 2xl:grid-cols-4 gap-6">
-            {statusBoxItems?.map((item: StatusBoxItemInterface) => <StatusBoxItem key={item?.name} item={item} />)}
+            {statusData?.map((item: StatusBoxItemInterface) => <StatusBoxItem key={item?.name} item={item} />)}
         </div>
     )
 }