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>
     )
 }

src/components/home/status-skeleton.tsx

@@ -0,0 +1,32 @@
+export const HomeStatusSkeleton = () => {
+    return <div className="grid grid-cols-1 sm:grid-cols-2 2xl:grid-cols-4 gap-6 animate-pulse">
+        <div className="w-full bg-auth-form p-[18px] h-full rounded-[40px] flex flex-col gap-[42px] min-h-[220px]">
+            <div className="size-16 bg-secondary-color flex justify-center rounded-full items-center"></div>
+            <div className="flex flex-col gap-8">
+                <div className="flex flex-col gap-3 w-32 h-2 bg-secondary-color rounded-full"></div>
+                <div className="flex flex-col gap-3 w-20 h-2 bg-secondary-color rounded-full"></div>
+            </div>
+        </div>
+        <div className="w-full bg-auth-form p-[18px] h-full rounded-[40px] flex flex-col gap-[42px] min-h-[220px]">
+            <div className="size-16 bg-secondary-color flex justify-center rounded-full items-center"></div>
+            <div className="flex flex-col gap-8">
+                <div className="flex flex-col gap-3 w-32 h-2 bg-secondary-color rounded-full"></div>
+                <div className="flex flex-col gap-3 w-20 h-2 bg-secondary-color rounded-full"></div>
+            </div>
+        </div>
+        <div className="w-full bg-auth-form p-[18px] h-full rounded-[40px] flex flex-col gap-[42px] min-h-[220px]">
+            <div className="size-16 bg-secondary-color flex justify-center rounded-full items-center"></div>
+            <div className="flex flex-col gap-8">
+                <div className="flex flex-col gap-3 w-32 h-2 bg-secondary-color rounded-full"></div>
+                <div className="flex flex-col gap-3 w-20 h-2 bg-secondary-color rounded-full"></div>
+            </div>
+        </div>
+        <div className="w-full bg-auth-form p-[18px] h-full rounded-[40px] flex flex-col gap-[42px] min-h-[220px]">
+            <div className="size-16 bg-secondary-color flex justify-center rounded-full items-center"></div>
+            <div className="flex flex-col gap-8">
+                <div className="flex flex-col gap-3 w-32 h-2 bg-secondary-color rounded-full"></div>
+                <div className="flex flex-col gap-3 w-20 h-2 bg-secondary-color rounded-full"></div>
+            </div>
+        </div>
+    </div>
+}

src/components/wallet/status-box-wallet.tsx

@@ -1,13 +1,19 @@
+import { FC } from "react"
 import { StatusBoxItemInterface } from "../../types"
-import { statusBoxWalletItems } from "../../utility/status"
 import { StatusBoxItem } from "../common/status-box-items"
+import { WalletStatusSkeleton } from "./wallet-skeleton"
 
-export const StatusBoxWallet = () => {
+type Props = {
-
+    statusData: StatusBoxItemInterface[] | []
+    isLoading: boolean
+}
 
+export const StatusBoxWallet: FC<Props> = ({ statusData,
+    isLoading }) => {
+    if (isLoading) return <WalletStatusSkeleton />
     return (
         <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
-            {statusBoxWalletItems?.map((item: StatusBoxItemInterface) => <StatusBoxItem key={item?.name} item={item} detail={item?.detail} />)}
+            {statusData?.map((item: StatusBoxItemInterface) => <StatusBoxItem key={item?.name} item={item} detail={item?.detail} />)}
         </div>
     )
 }

src/components/wallet/wallet-address.tsx

@@ -1,10 +1,12 @@
 import { Button } from "@headlessui/react"
 import { ComboBox } from "../common/combo-box"
-import { useState } from "react"
+import { FC } from "react"
 
-export const WalletAddress = () => {
+type Props = {
-    const [show, setSHow] = useState<boolean>(false)
+    pending: boolean
-    const handleShow = () => setSHow(prev => !prev)
+}
+
+export const WalletAddress: FC<Props> = ({ pending }) => {
     return (
         <div className="w-full flex flex-col lg:flex-row bg-auth-form p-[30px] rounded-[40px] gap-8">
             <div className="w-full h-full flex items-center justify-center">
@@ -13,16 +15,16 @@ export const WalletAddress = () => {
             <div className="flex flex-col w-full gap-10 justify-center lg:justify-between">
                 <div className="flex flex-col gap-10">
                     <p className="text-2xl font-medium text-primary-text-color">ثبت درخواست برداشت از حساب</p>
-                    {!show && <ComboBox placeholder="حساب بانکی مورد نظر خود را انتخاب کنید" />}
+                    {!pending && <ComboBox placeholder="حساب بانکی مورد نظر خود را انتخاب کنید" />}
                 </div>
-                {!show && <p className="font-normal text-base text-primary-text-color text-justify lg:text-wrap">
+                {!pending && <p className="font-normal text-base text-primary-text-color text-justify lg:text-wrap">
                     لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز
                 </p>}
-                {show && <p className="text-lg font-normal text-justify lg:text-wrap">
+                {pending && <p className="text-lg font-normal text-justify lg:text-wrap">
                     {`همکار گرامی
                     طبق درخواست قبلی، عملیات واریز مبلغ 765,975 تومان به حساب شما در حال اجراست. متاسفانه پیش از تکمیل درخواست، امکان شروع عملیات جدید برای شما وجود ندارد.`}</p>}
                 <div className="w-full flex justify-end">
-                    <Button className="w-full min-w-full xl:min-w-min xl:max-w-60" onClick={handleShow}>{show ? "لغو درخواست" : "ثبت درخواست"}</Button>
+                    <Button className="w-full min-w-full xl:min-w-min xl:max-w-60">{pending ? "لغو درخواست" : "ثبت درخواست"}</Button>
                 </div>
             </div>
         </div>

src/components/wallet/wallet-page.tsx

@@ -1,11 +1,38 @@
+import { useQuery } from "@tanstack/react-query"
 import { StatusBoxWallet } from "./status-box-wallet"
 import { WalletAddress } from "./wallet-address"
+import { getWalletDetails } from "../../services/api/wallet"
+import { useEffect, useState } from "react"
+import { StatusBoxItemInterface } from "../../types"
+import { Coin1, DollarCircle } from "iconsax-react"
 
 export const WalletPage = () => {
+    const [statusData, setStatusData] = useState<StatusBoxItemInterface[] | []>([])
+    const { data, isLoading } = useQuery({
+        queryKey: ["wallet"],
+        queryFn: getWalletDetails
+    })
+
+    useEffect(() => {
+        setStatusData([{
+            name: "dollar",
+            title: "دارایی دلاری",
+            icon: <DollarCircle color="#292D32" variant="Bold" className="size-[40px]" />,
+            value: data?.data?.user?.dollarBalance,
+            detail: true
+        },
+        {
+            name: "coin",
+            title: "دارایی از تمدید اشتراک",
+            icon: <Coin1 color="#292D32" variant="Bold" className="size-[40px]" />,
+            value: data?.data?.user?.walletBalance,
+        }])
+    }, [data])
+
     return (
         <div className="flex flex-col gap-y-[30px] w-full">
-            <StatusBoxWallet />
+            <StatusBoxWallet statusData={statusData} isLoading={isLoading} />
-            <WalletAddress />
+            <WalletAddress pending={data?.data?.pending} />
         </div>
     )
 }

src/components/wallet/wallet-skeleton.tsx

@@ -0,0 +1,18 @@
+export const WalletStatusSkeleton = () => {
+    return <div className="grid grid-cols-1 sm:grid-cols-2 2xl:grid-cols-4 gap-6 animate-pulse">
+        <div className="w-full bg-auth-form p-[18px] h-full rounded-[40px] flex flex-col gap-[42px] min-h-[220px]">
+            <div className="size-16 bg-secondary-color flex justify-center rounded-full items-center"></div>
+            <div className="flex flex-col gap-8">
+                <div className="flex flex-col gap-3 w-32 h-2 bg-secondary-color rounded-full"></div>
+                <div className="flex flex-col gap-3 w-20 h-2 bg-secondary-color rounded-full"></div>
+            </div>
+        </div>
+        <div className="w-full bg-auth-form p-[18px] h-full rounded-[40px] flex flex-col gap-[42px] min-h-[220px]">
+            <div className="size-16 bg-secondary-color flex justify-center rounded-full items-center"></div>
+            <div className="flex flex-col gap-8">
+                <div className="flex flex-col gap-3 w-32 h-2 bg-secondary-color rounded-full"></div>
+                <div className="flex flex-col gap-3 w-20 h-2 bg-secondary-color rounded-full"></div>
+            </div>
+        </div>
+    </div>
+}

src/services/api/overview.ts

@@ -13,5 +13,5 @@ export interface OverviewResponse {
     user: OverviewUser
 }
 
-export const getOverviewDetails = () => axiosInstance.get<OverviewResponse[] | OverviewResponse | []>("/gps/overview/main")
+export const getOverviewDetails = () => axiosInstance.get<OverviewResponse[] | OverviewResponse | [], any>("/gps/overview/main")
 

src/services/api/wallet.ts

@@ -0,0 +1,17 @@
+import axiosInstance from "../axios";
+
+export type OverviewUser = {
+    walletBalance: number,
+    dollarBalance: number,
+    score: number,
+    _id: string,
+    id: string
+}
+
+export interface OverviewResponse {
+    pending: boolean,
+    user: OverviewUser
+}
+
+export const getWalletDetails = () => axiosInstance.get<OverviewResponse[] | OverviewResponse | [], any>("/gps/overview/wallet")
+

src/utility/status.tsx

@@ -1,47 +1 @@
-import { Coin1, DollarCircle, Radar, Star } from "iconsax-react";
-import { StatusBoxItemInterface } from "../types";
-
-export const statusBoxItems: StatusBoxItemInterface[] | [] = [
-    {
-        name: "dollar",
-        title: "دارایی دلاری",
-        icon: <DollarCircle color="#292D32" variant="Bold" className="size-[40px]" />,
-        value: 8
-    },
-    {
-        name: "coin",
-        title: "دارایی از تمدید اشتراک",
-        icon: <Coin1 color="#292D32" variant="Bold" className="size-[40px]" />,
-        value: 300589
-    },
-    {
-        name: "star",
-        title: "امتیاز شرکت در قرعه کشی",
-        icon: <Star color="#292D32" variant="Bold" className="size-[40px]" />,
-        value: 65
-    },
-    {
-        name: "radar",
-        title: "تعداد کل دستگاه ثبت شده موفق",
-        icon: <Radar color="#292D32" variant="Bold" className="size-[40px]" />,
-        value: 171
-    },
-]
-
-export const statusBoxWalletItems: StatusBoxItemInterface[] | [] = [
-    {
-        name: "dollar",
-        title: "دارایی دلاری",
-        icon: <DollarCircle color="#292D32" variant="Bold" className="size-[40px]" />,
-        value: 8,
-        detail: true
-    },
-    {
-        name: "coin",
-        title: "دارایی از تمدید اشتراک",
-        icon: <Coin1 color="#292D32" variant="Bold" className="size-[40px]" />,
-        value: 300589
-    },
-]
-
 export const filterNumber = (value: number) => value?.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")