add score and total score + update score after submit imai

src/components/common/status-box-items.tsx

@@ -39,7 +39,19 @@ export const StatusBoxItem: FC<Props> = ({ item, detail = false }) => {
                             تومان
                         </span>
                     )}
-                    {item?.name !== "coin" && item?.name !== "dollar" && item?.value}
+                    {item?.name === "score-total" && (
+                        <div className="flex flex-col gap-2">
+                            <div className="flex items-center gap-x-2">
+                                <span className="text-sm font-normal text-secondary-text-color">امتیاز فعلی:</span>
+                                <span className="font-medium text-[28px] text-primary-text-color">{item?.value ?? 0}</span>
+                            </div>
+                            <div className="flex items-center gap-x-2">
+                                <span className="text-sm font-normal text-secondary-text-color">کل امتیاز:</span>
+                                <span className="font-medium text-[28px] text-primary-text-color">{item?.secondaryValue ?? 0}</span>
+                            </div>
+                        </div>
+                    )}
+                    {item?.name !== "coin" && item?.name !== "dollar" && item?.name !== "score-total" && item?.value}
                 </div>
             </div>
         </div>

src/components/home/imei.tsx

@@ -1,6 +1,5 @@
-import { Button } from "@headlessui/react"
 import { Input } from "../common/input"
-import { useMutation } from "@tanstack/react-query"
+import { useMutation, useQueryClient } from "@tanstack/react-query"
 import { checkIMEI } from "../../services/api/imei"
 import { ButtonComponent } from "../common/button"
 import { Controller, SubmitHandler, useForm } from "react-hook-form"
@@ -10,8 +9,12 @@ import { checkIMEISchema } from "../../schema"
 import { ErrorComponent } from "../common/error"
 import toast from "react-hot-toast"
 import { handleError } from "../../utility/error-handle"
+import { getUsersInformation } from "../../services/api/user"
+import { useUserStore } from "../../store/user"
 
 export const Imei = () => {
+    const queryClient = useQueryClient()
+    const { updateUser } = useUserStore()
     const {
         handleSubmit,
         formState: { errors },
@@ -23,10 +26,21 @@ export const Imei = () => {
         mutationFn: checkIMEI,
         mutationKey: ["IMEI"]
     })
+    const { mutate: userMutate } = useMutation({
+        mutationFn: getUsersInformation,
+        mutationKey: ["user"]
+    })
     const handleCheckIMEI: SubmitHandler<CheckIMEI> = async (data) => {
         await mutate(data, {
             onSuccess: (res: any) => {
                 toast.success("کد IMEI معتبر است")
+                queryClient.invalidateQueries({ queryKey: ['overview'] })
+                userMutate({}, {
+                    onSuccess: (userRes: any) => {
+                        updateUser(userRes?.data?.user)
+                    },
+                    onError: (err: any) => handleError(err)
+                })
             },
             onError: (err: any) => handleError(err)
         })

src/components/home/status-box.tsx

@@ -3,11 +3,13 @@ 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 { DollarCircle, Radar, Star } from "iconsax-react"
 import { HomeStatusSkeleton } from "./status-skeleton"
 import { handleError } from "../../utility/error-handle"
+import { useUserStore } from "../../store/user"
 
 export const StatusBox = () => {
+    const { user } = useUserStore()
     const { data, isLoading, error } = useQuery({
         queryKey: ['overview'],
         queryFn: getOverviewDetails
@@ -34,13 +36,22 @@ export const StatusBox = () => {
                 icon: <Star color="#292D32" variant="Bold" className="size-[40px]" />,
                 value: data?.data?.user?.score
             },
+            {
+                name: "score-total",
+                title: "امتیاز",
+                icon: <Star color="#292D32" variant="Bold" className="size-[40px]" />,
+                value: user?.score,
+                secondaryValue: user?.totalScore
+            },
             {
                 name: "radar",
                 title: "تعداد کل دستگاه ثبت شده موفق",
                 icon: <Radar color="#292D32" variant="Bold" className="size-[40px]" />,
                 value: data?.data?.installedDevice
-            }])
+            },
-    }, [data])
+
+        ])
+    }, [data, user])
 
     useEffect(() => {
         handleError(error)

src/services/api/overview.ts

@@ -4,6 +4,7 @@ export type OverviewUser = {
     walletBalance: number,
     dollarBalance: number,
     score: number,
+    totalScore: number,
     _id: string,
     id: string
 }

src/store/user.ts

@@ -21,6 +21,7 @@ const defaultParams: UserInterface = {
   profilePic: "",
   province_name: "",
   score: 0,
+  totalScore: 0,
   shopName: "",
   updated_at: "",
   walletBalance: 0,

src/types/index.ts

@@ -65,6 +65,7 @@ export interface StatusBoxItemInterface {
   icon: React.ReactNode;
   value: number;
   detail?: boolean;
+  secondaryValue?: number;
 }
 
 export interface UpdateUserInterface {
@@ -247,6 +248,7 @@ type OverviewUser = {
   walletBalance: number;
   dollarBalance: number;
   score: number;
+  totalScore: number;
   _id: string;
   id: string;
 };
@@ -324,6 +326,7 @@ export interface UserInterface {
   profilePic: string;
   province_name: string;
   score: number;
+  totalScore: number;
   shopName: string;
   updated_at: string;
   walletBalance: number;