From 75a5149a8d2f755eaab79337ea913234e43e887b Mon Sep 17 00:00:00 2001
From: hamid zarghami <hamid.zarghami1@gmail.com>
Date: Sun, 22 Dec 2024 16:59:53 +0330
Subject: [PATCH] fix bug

---
 src/App.tsx                                   |   2 +-
 src/components/common/button.tsx              |   2 +-
 src/components/common/input.tsx               |   5 +-
 src/components/home/imei.tsx                  |   8 +-
 .../management-bank-accounts/bank-cart.tsx    |  20 +-
 .../edit-cart-dialog.tsx                      |  98 ++++
 src/components/my-account/index.tsx           |  29 +-
 src/components/ui/dashboard/sidebar-item.tsx  |   2 +-
 src/components/ui/dashboard/sidebar.tsx       |   4 +-
 src/components/wallet/wallet-address.tsx      |   4 +-
 src/index.css                                 |  98 ++--
 src/schema/index.ts                           | 295 ++++++++----
 src/services/api/bank-card.ts                 |  24 +-
 src/services/axios/index.ts                   |  17 +-
 src/store/user.ts                             |  98 ++--
 src/types/index.ts                            | 455 +++++++++---------
 src/utility/sidebar.tsx                       |  36 +-
 17 files changed, 705 insertions(+), 492 deletions(-)
 create mode 100644 src/components/management-bank-accounts/edit-cart-dialog.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 4663553..558e42b 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -16,7 +16,7 @@ function App() {
   const handleGetUsersInformation = async () => {
     await userMutate({}, {
       onSuccess: (res: any) => {
-        updateUser(res?.data)
+        updateUser(res?.data?.user)
       },
       onError: (err: any) => handleError(err)
     })
diff --git a/src/components/common/button.tsx b/src/components/common/button.tsx
index ed1e186..e373ad0 100644
--- a/src/components/common/button.tsx
+++ b/src/components/common/button.tsx
@@ -14,7 +14,7 @@ type Props = {
 
 export const ButtonComponent: FC<Props> = ({ title, type = "button", pending = false, theme = "primary", onClick, disable = false, className }) => {
     return (
-        <Button type={type} disabled={disable} onClick={onClick} className={clsx(`flex flex-row gap-3 items-center justify-center ${className}`, {
+        <Button type={type} disabled={disable} onClick={onClick} className={clsx(`flex h-12 flex-row gap-3 items-center justify-center ${className}`, {
             "bg-primary-color text-white": theme === "primary",
             "bg-transparent text-primary-color": theme === "glass",
             "bg-dark-blue text-white": theme === "secondary",
diff --git a/src/components/common/input.tsx b/src/components/common/input.tsx
index a49097b..45110ae 100644
--- a/src/components/common/input.tsx
+++ b/src/components/common/input.tsx
@@ -28,7 +28,10 @@ export const Input: FC<Props> = ({ placeholder, type = "text", icon, field, clas
                     : icon}
                 {placeholder === "شماره کارت" && field.value && findBankByPAN(field.value).icon}
             </div>
-            <InputComponent ref={field?.ref} {...field} value={value} onChange={onChange || field?.onChange} type={type === "password" && hidden ? "text" : type} placeholder={placeholder} className={`input-style min-w-full ${className}`} disabled={disabled} />
+
+            <div className="maxh-10">
+                <InputComponent ref={field?.ref} {...field} value={value} onChange={onChange || field?.onChange} type={type === "password" && hidden ? "text" : type} placeholder={placeholder} className={`input-style min-w-full ${className}`} disabled={disabled} />
+            </div>
         </div>
     )
 }
\ No newline at end of file
diff --git a/src/components/home/imei.tsx b/src/components/home/imei.tsx
index 900d8fc..9c3b76e 100644
--- a/src/components/home/imei.tsx
+++ b/src/components/home/imei.tsx
@@ -32,9 +32,9 @@ export const Imei = () => {
         })
     }
     return (
-        <form onSubmit={handleSubmit(handleCheckIMEI)} className="w-full flex flex-col lg:flex-row bg-auth-form p-[30px] rounded-[40px] gap-8">
+        <form onSubmit={handleSubmit(handleCheckIMEI)} className="w-full flex flex-col lg:flex-row bg-auth-form px-10 py-10 rounded-[40px] gap-8">
             <div className="w-full h-full flex items-center justify-center">
-                <img src="/svgs/dashboard/binary.svg" alt="binary" className="size-full max-w-[500px] max-h-[500px]" />
+                <img src="/svgs/dashboard/binary.svg" alt="binary" className="size-full max-w-[500px] max-h-[200px]" />
             </div>
             <div className="flex flex-col w-full gap-10 justify-center lg:justify-between">
                 <Controller control={control} name="IMEI" render={({ field }) => (
@@ -44,9 +44,9 @@ export const Imei = () => {
                     </div>
                 )} />
                 <p className="font-normal text-base text-primary-text-color text-justify lg:text-wrap">
-                    لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز
+                    لطفا کد imei را وارد کنید
                 </p>
-                <div className="w-full flex justify-end">
+                <div className="w-full flex ">
                     <ButtonComponent title="ثبت کد" className="w-full min-w-full xl:min-w-min xl:max-w-60" pending={isPending} type="submit" />
                 </div>
             </div>
diff --git a/src/components/management-bank-accounts/bank-cart.tsx b/src/components/management-bank-accounts/bank-cart.tsx
index e45def1..40ec550 100644
--- a/src/components/management-bank-accounts/bank-cart.tsx
+++ b/src/components/management-bank-accounts/bank-cart.tsx
@@ -1,7 +1,8 @@
 import { Edit, Trash } from "iconsax-react"
 import { CardBank } from "../../types"
-import { FC } from "react"
+import { FC, useState } from "react"
 import { findBankByPAN, formatCartNumber } from "../../utility/cart"
+import { EditCardDialog } from "./edit-cart-dialog"
 
 type Props = {
     item: CardBank,
@@ -10,10 +11,19 @@ type Props = {
 }
 
 export const BankCart: FC<Props> = ({ item, handleOpenDeleteDialog, setSelectedCard }) => {
+
+    const [showEdit, setShowEdit] = useState<boolean>(false)
+
     const handleDeleteCard = () => {
         handleOpenDeleteDialog()
         setSelectedCard(item?.id)
     }
+
+    const handleEdit = () => {
+        setShowEdit(true)
+
+    }
+
     return (
         <div className={`w-full flex flex-col justify-between rounded-[40px] bg-auth-form p-[18px] cursor-pointer bank-bg min-h-[226px]`} style={{ backgroundImage: `url('/svgs/banks/${findBankByPAN(item.PAN)?.name}.svg')` }}>
             <div className="flex flex-row justify-between items-center">
@@ -23,7 +33,7 @@ export const BankCart: FC<Props> = ({ item, handleOpenDeleteDialog, setSelectedC
                 </div>
                 <div className="flex flex-row gap-3 items-center">
                     <Trash color="#777577" onClick={handleDeleteCard} />
-                    <Edit color="#777577" />
+                    <Edit onClick={handleEdit} color="#777577" />
                 </div>
             </div>
             <p className="font-medium text-2xl text-primary-text-color text-center" style={{ direction: "ltr" }}>{formatCartNumber(item?.PAN)}</p>
@@ -31,6 +41,12 @@ export const BankCart: FC<Props> = ({ item, handleOpenDeleteDialog, setSelectedC
                 <p className="text-sm text-secondary-text-color font-medium">{item?.holderName}</p>
                 <p className="font-medium text-lg text-primary-text-color">{item?.IBAN}</p>
             </div>
+
+            <EditCardDialog
+                isOpen={showEdit}
+                close={() => setShowEdit(false)}
+                id={item?.id}
+            />
         </div>
     )
 }
\ No newline at end of file
diff --git a/src/components/management-bank-accounts/edit-cart-dialog.tsx b/src/components/management-bank-accounts/edit-cart-dialog.tsx
new file mode 100644
index 0000000..4f4de3d
--- /dev/null
+++ b/src/components/management-bank-accounts/edit-cart-dialog.tsx
@@ -0,0 +1,98 @@
+import { CardAdd } from "iconsax-react"
+import { DialogComponent } from "../common/dialog"
+import { FC, useEffect } from "react"
+import { Input } from "../common/input"
+import { Controller, SubmitHandler, useForm } from "react-hook-form"
+import { AddNewCartInterface } from "../../types"
+import { yupResolver } from "@hookform/resolvers/yup"
+import { AddNewCardSchema } from "../../schema"
+import { ErrorComponent } from "../common/error"
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"
+import { createNewCardMutation, getCardDetail, updateCard } from "../../services/api/bank-card"
+import toast from "react-hot-toast"
+import { ButtonComponent } from "../common/button"
+import { handleError } from "../../utility/error-handle"
+
+type Props = {
+    isOpen: boolean,
+    close: () => void,
+    id: string,
+}
+export const EditCardDialog: FC<Props> = ({ isOpen, close, id }) => {
+    const queryClient = useQueryClient()
+    const { mutate, isPending } = useMutation({
+        mutationFn: updateCard
+    })
+
+    const { data }: any = useQuery({
+        queryKey: ["awards"],
+        queryFn: () => getCardDetail({ id }),
+        enabled: !!isOpen
+    });
+
+    const { handleSubmit, formState: { errors }, control, reset, getValues } = useForm<any>({
+        // resolver: yupResolver(AddNewCardSchema)
+    })
+    const createNewCard: SubmitHandler<AddNewCartInterface> = async (data) => {
+        mutate({
+            holderName: data?.holderName,
+            PAN: data?.PAN,
+            IBAN: data?.IBAN,
+            id: id,
+        }, {
+            onSuccess: () => {
+                toast.success("کارت با موفقیت اضافه شد")
+                queryClient.invalidateQueries({ queryKey: ["bank-card"] })
+                close()
+            },
+            onError: (err: any) => handleError(err)
+        })
+    }
+    useEffect(() => {
+
+        if (data?.data?.userCart) {
+            reset({
+                holderName: data?.data?.userCart?.holderName,
+                IBAN: data?.data?.userCart?.IBAN,
+                PAN: data?.data?.userCart?.PAN,
+            })
+        }
+    }, [isOpen, reset, data])
+
+    return (
+        <DialogComponent isOpen={isOpen} close={close} title="ویرایش حساب بانکی" subTitle="لطفا اطلاعات را با دقت وارد نمایید" icon={<CardAdd color="#11212D" className="size-[50px]" />}>
+            <form onSubmit={handleSubmit(createNewCard)} className="flex flex-col gap-[42px] mt-9">
+                <div className="w-full flex flex-col gap-6">
+                    <Controller control={control} name="holderName" render={({ field }) => (
+                        <div>
+                            <Input value={getValues('holderName')} placeholder="نام صاحب کارت" field={field} className="bg-auth-form" />
+                            <ErrorComponent show={errors.name} message={errors.name?.message} />
+                        </div>
+                    )} />
+                    {/* <Controller control={control} name="family" render={({ field }) => (
+                        <div>
+                            <Input field={field} placeholder="نام خانوادگی صاحب کارت" className="bg-auth-form" />
+                            <ErrorComponent show={errors.family} message={errors.family?.message} />
+                        </div>
+                    )} /> */}
+                    <Controller control={control} name="PAN" render={({ field }) => (
+                        <div>
+                            <Input value={getValues('PAN')} field={field} placeholder="شماره کارت" className="bg-auth-form" />
+                            <ErrorComponent show={errors.PAN} message={errors.PAN?.message} />
+                        </div>
+                    )} />
+                    <Controller control={control} name="IBAN" render={({ field }) => (
+                        <div>
+                            <Input value={getValues('IBAN')} field={field} placeholder="شماره شبا" className="bg-auth-form" />
+                            <ErrorComponent show={errors.IBAN} message={errors.IBAN?.message} />
+                        </div>
+                    )} />
+                </div>
+                <div className="flex flex-col gap-[6px]">
+                    <ButtonComponent title="ویرایش کارت" pending={isPending} type="submit" />
+                    <ButtonComponent title="لغو" type="button" theme="glass" onClick={close} />
+                </div>
+            </form>
+        </DialogComponent>
+    )
+}
\ No newline at end of file
diff --git a/src/components/my-account/index.tsx b/src/components/my-account/index.tsx
index 32cd9c6..d0ea274 100644
--- a/src/components/my-account/index.tsx
+++ b/src/components/my-account/index.tsx
@@ -20,7 +20,7 @@ import { ImageUpload } from "../common/upload"
 
 export const MyAccountPage = () => {
     const [selectedImage, setSelectedImage] = useState<any>(null);
-    const { user, updateUser } = useUserStore()
+    const { user, updateUser }: any = useUserStore()
     const { mutate, isPending } = useMutation({
         mutationFn: updateUSerInformations,
         mutationKey: ["update-user"]
@@ -55,6 +55,8 @@ export const MyAccountPage = () => {
             onSuccess: (res: any) => {
                 toast?.success("اطلاعات کاربر با موفقیت بروز رسانی شد")
                 updateUser(res?.data?.user)
+                console.log('user', res?.data?.user);
+
             },
             onError: (err: any) => handleError(err)
         })
@@ -69,6 +71,9 @@ export const MyAccountPage = () => {
         setProvinceData(tempArray)
     }, [provinces])
 
+    console.log('user 1 ', user);
+
+
     useEffect(() => {
         const tempCities: any = []
         const newCities = cities?.data?.data?.filter((city: CitiesType) => city?.ProvinceName?.toLocaleLowerCase()?.includes(provinceName?.name?.toLowerCase()))
@@ -84,8 +89,8 @@ export const MyAccountPage = () => {
         reset({
             address: user?.address,
             birthDate: user?.birthDate,
-            city_name: { id: 1, name: user?.city_name },
-            province_name: { id: 1, name: user?.province_name },
+            city_name: { id: user?.city_name?.id, name: user?.city_name?.cityName },
+            province_name: { id: user?.province_name?.id, name: user?.province_name?.provinceName },
             mobile_number: user?.mobile_number,
             first_name: user?.first_name,
             last_name: user?.last_name,
@@ -93,7 +98,7 @@ export const MyAccountPage = () => {
             shopName: user?.shopName,
             cell_number: user?.cell_number,
         })
-    }, [reset])
+    }, [reset, user])
     return (
         <div className="w-full h-full flex flex-col gap-10 bg-auth-form rounded-[40px] p-[30px]">
             <form onSubmit={handleSubmit(handleUpdateUser)} className="w-full h-full flex flex-col gap-10 bg-auth-form rounded-[40px]">
@@ -101,14 +106,14 @@ export const MyAccountPage = () => {
                     <div className="flex flex-col gap-y-5 w-full xl:max-w-fit">
                         <p className="font-medium text-xl text-primary-text-color">اطلاعات اولیه</p>
                         <p className="font-normal text-base text-secondary-text-color text-wrap xl:max-w-xs">
-                            لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون
+                            اطلاعات اولیه خود را وارد کنید
                         </p>
                     </div>
                     <div className="flex flex-col gap-10 w-full">
                         <div className="grid grid-cols-1 md:grid-cols-2 gap-[18px]">
                             <Controller name="mobile_number" control={control} render={({ field }) => (
                                 <div>
-                                    <Input placeholder={user?.mobile_number ? user?.mobile_number : "شماره تماس"} type="number" disabled field={field} />
+                                    <Input placeholder={user?.mobile_number ? user?.mobile_number : "شماره تماس"} type="number" field={field} />
                                     <ErrorComponent show={errors.mobile_number} message={errors.mobile_number?.message} />
                                 </div>
                             )} />
@@ -132,13 +137,13 @@ export const MyAccountPage = () => {
                             )} />
                             <Controller name="province_name" control={control} render={({ field }) => (
                                 <div>
-                                    <ComboBox field={field} data={provinceData} placeholder={user?.province_name} />
+                                    <ComboBox field={field} data={provinceData} placeholder={user?.province_name.provinceName} />
                                     <ErrorComponent show={errors.province_name} message={errors.province_name?.message} />
                                 </div>
                             )} />
                             <Controller name="city_name" control={control} render={({ field }) => (
                                 <div>
-                                    <ComboBox field={field} data={citiesData} placeholder={user?.city_name} />
+                                    <ComboBox field={field} data={citiesData} placeholder={user?.city_name?.cityName} />
                                     <ErrorComponent show={errors.city_name} message={errors.city_name?.message} />
                                 </div>
                             )} />
@@ -151,7 +156,7 @@ export const MyAccountPage = () => {
                     <div className="flex flex-col gap-y-5 w-full xl:max-w-fit">
                         <p className="font-medium text-xl text-primary-text-color">اطلاعات تکمیلی</p>
                         <p className="font-normal text-base text-secondary-text-color text-wrap xl:max-w-xs">
-                            لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون
+                            لطفا اطلاعات خود را کامل پر کنید
                         </p>
                     </div>
                     <div className="flex flex-col gap-10 w-full">
@@ -164,13 +169,13 @@ export const MyAccountPage = () => {
                             )} />
                             <Controller name="national_code" control={control} render={({ field }) => (
                                 <div>
-                                    <Input placeholder={user?.national_code} type="number" field={field} disabled />
-                                    <ErrorComponent show={errors.national_code} message={errors.national_code?.message} />
+                                    <Input placeholder={user?.national_code} type="number" field={field} />
+                                    <ErrorComponent show={errors.national_code || 'شماره ملی'} message={errors.national_code?.message} />
                                 </div>
                             )} />
                             <Controller name="cell_number" control={control} render={({ field }) => (
                                 <div>
-                                    <Input placeholder={user?.cell_number} type="number" field={field} />
+                                    <Input placeholder={user?.cell_number || 'شماره تلفن ثابت'} type="number" field={field} />
                                     <ErrorComponent show={errors.cell_number} message={errors.cell_number?.message} />
                                 </div>
                             )} />
diff --git a/src/components/ui/dashboard/sidebar-item.tsx b/src/components/ui/dashboard/sidebar-item.tsx
index b7d1597..8629803 100644
--- a/src/components/ui/dashboard/sidebar-item.tsx
+++ b/src/components/ui/dashboard/sidebar-item.tsx
@@ -13,7 +13,7 @@ export const SidebarItem: FC<Props> = ({ item }) => {
             "bg-secondary-color": item?.route === pathname
         })}>
             {item?.route === pathname ? item?.activeIcon : item?.icon}
-            <p className={clsx("font-normal text-base text-secondary-text-color", {
+            <p className={clsx("font-normal text-sm text-secondary-text-color", {
                 "!text-primary-text-color": item?.route === pathname
             })}>{item?.title}</p>
         </Link>
diff --git a/src/components/ui/dashboard/sidebar.tsx b/src/components/ui/dashboard/sidebar.tsx
index 4aaf004..66669cf 100644
--- a/src/components/ui/dashboard/sidebar.tsx
+++ b/src/components/ui/dashboard/sidebar.tsx
@@ -11,10 +11,10 @@ export const Sidebar = () => {
         navigate("/auth/login")
     }
     return (
-        <div className="hidden lg:flex bg-auth-form  min-w-[318px] max-w-[318px] flex-col items-center py-[42px] gap-y-20">
+        <div className="hidden lg:flex bg-auth-form  min-w-[250px] max-w-[318px] flex-col items-center py-[42px] gap-y-20">
             <img src="/svgs/logo/logo.svg" alt="logo" className="auth-logo-size" />
             <div className="flex flex-col justify-between h-full bg-auth-form ">
-                <div className="flex flex-col gap-y-3">
+                <div className="flex text-xs flex-col gap-y-3">
                     {sidebarItems?.map((item: SidebarInterface) => <SidebarItem key={item?.name} item={item} />)}
                 </div>
                 <div className="w-full flex flex-row gap-x-3 items-center rounded-[20px] p-3 min-w-52 cursor-pointer" onClick={handleExit}>
diff --git a/src/components/wallet/wallet-address.tsx b/src/components/wallet/wallet-address.tsx
index 26a474c..bc11530 100644
--- a/src/components/wallet/wallet-address.tsx
+++ b/src/components/wallet/wallet-address.tsx
@@ -9,6 +9,7 @@ import { useMutation } from "@tanstack/react-query"
 import { sendwithdraw } from "../../services/api/wallet"
 import toast from "react-hot-toast"
 import { handleError } from "../../utility/error-handle"
+import { Input } from "../common/input"
 
 type Props = {
     pending: boolean
@@ -65,11 +66,12 @@ export const WalletAddress: FC<Props> = ({ pending }) => {
                         <>
                             <ComboBox placeholder="حساب بانکی مورد نظر خود را انتخاب کنید" data={userBanks} field={field} />
                             <ErrorComponent show={errors?.card} message={errors?.card?.message} />
+                            {/* <Input placeholder="مبلغ را وارد کنید" /> */}
                         </>
                     )} />}
                 </div>
                 {!pending && <p className="font-normal text-base text-primary-text-color text-justify lg:text-wrap">
-                    لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز
+                    برای درخواست برداشت از حساب، حساب بانکی مورد نظر خود را انتخاب کنید. پس از انتخاب حساب بانکی، مبلغ مورد نظر خود را وارد کرده و درخواست خود را ثبت کنید.
                 </p>}
                 {pending && <p className="text-lg font-normal text-justify lg:text-wrap">
                     {`همکار گرامی
diff --git a/src/index.css b/src/index.css
index a0019a6..8d5d00c 100644
--- a/src/index.css
+++ b/src/index.css
@@ -3,73 +3,71 @@
 @tailwind utilities;
 
 @font-face {
-    font-family: "vazirmatn";
-    src: url("../public/fonts/Vazir.woff") format('woff');
+  font-family: "vazirmatn";
+  src: url("../public/fonts/Vazir.woff") format("woff");
 }
 
 @font-face {
-    font-family: "vaziren";
-    src: url("../public/fonts/VazirEn.woff") format('woff');
+  font-family: "vaziren";
+  src: url("../public/fonts/VazirEn.woff") format("woff");
 }
 
-
-
-
 @layer base {
-    * {
-        font-family: 'vazirmatn', 'vaziren';
-    }
+  * {
+    font-family: "vazirmatn", "vaziren";
+  }
 
-    body {
-        direction: rtl;
-        scrollbar-width: none;
-    }
+  body {
+    direction: rtl;
+    scrollbar-width: none;
+    font-size: 14px;
+  }
 
-    input[type=number]::-webkit-outer-spin-button,
-    input[type=number]::-webkit-inner-spin-button {
-        -webkit-appearance: none;
-        margin: 0;
-    }
+  input[type="number"]::-webkit-outer-spin-button,
+  input[type="number"]::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
 
-    input[type=number] {
-        -moz-appearance: textfield;
-    }
+  input[type="number"] {
+    -moz-appearance: textfield;
+  }
 
-    button {
-        @apply text-base font-medium flex w-full justify-center bg-primary-color max-h-[55px] rounded-[20px] p-[18px] text-white
-    }
+  button {
+    @apply text-base font-medium flex w-full justify-center bg-primary-color max-h-[55px] rounded-[20px] p-[18px] text-white;
+  }
 
-    table {
-        @apply w-full border-collapse
-    }
+  table {
+    @apply w-full border-collapse;
+  }
 
-    #otp {
-        direction: ltr !important;
-    }
+  #otp {
+    direction: ltr !important;
+  }
 }
 
 @layer components {
-    .auth-image-desktop {
-        @apply size-[550px] max-w-[550px]
-    }
+  .auth-image-desktop {
+    @apply size-[550px] max-w-[550px];
+  }
 
-    .input-style {
-        @apply w-full bg-white rounded-[60px] p-[18px] max-w-[442px] shadow-sm focus:outline-none
-    }
+  .input-style {
+    @apply w-full bg-white rounded-[60px] h-12 px-4 max-w-[442px] shadow-sm focus:outline-none;
+  }
 
-    .auth-logo-size {
-        @apply w-full max-w-[198px] h-auto
-    }
+  .auth-logo-size {
+    @apply w-full max-w-[198px] h-auto;
+  }
 
-    .otp-inputs {
-        @apply !w-full max-w-[40px] min-h-[40px] sm:max-w-[50px] sm:min-h-[50px] lg:max-w-[72px] lg:min-h-[72px] rounded-full ml-2
-    }
+  .otp-inputs {
+    @apply !w-full max-w-[40px] min-h-[40px] sm:max-w-[50px] sm:min-h-[50px] lg:max-w-[72px] lg:min-h-[72px] rounded-full ml-2;
+  }
 
-    .otp-container {
-        @apply min-w-max
-    }
+  .otp-container {
+    @apply min-w-max;
+  }
 
-    .bank-bg {
-        @apply bg-contain bg-center bg-no-repeat
-    }
-}
\ No newline at end of file
+  .bank-bg {
+    @apply bg-contain bg-center bg-no-repeat;
+  }
+}
diff --git a/src/schema/index.ts b/src/schema/index.ts
index 4744522..4c79661 100644
--- a/src/schema/index.ts
+++ b/src/schema/index.ts
@@ -1,130 +1,215 @@
-import * as yup from 'yup'
+import * as yup from "yup";
 
 export const loginSchema = yup.object({
-    username: yup.string()
-        .required("وارد کردن نام کاربری الزامی میباشد")
-        .min(10, "نام کاربری نمیتوند کمتر از 10 رقم باشد")
-        .max(10, "نام کاربری نمیتواند بیشتر از 10 رقم باشد")
-        .matches(/^[0-9]{10}$/, "شماره تماس نامعتبر"),
-    password: yup.string()
-        .required("وارد کردن رمزعبور الزامی میباشد")
-        .min(8, "رمزعبور نمیتواند کمتر از 8 کاراکتر باشد")
-})
+  username: yup
+    .string()
+    .required("وارد کردن نام کاربری الزامی میباشد")
+    .min(10, "نام کاربری نمیتوند کمتر از 10 رقم باشد")
+    .max(10, "نام کاربری نمیتواند بیشتر از 10 رقم باشد")
+    .matches(/^[0-9]{10}$/, "شماره تماس نامعتبر"),
+  password: yup
+    .string()
+    .required("وارد کردن رمزعبور الزامی میباشد")
+    .min(8, "رمزعبور نمیتواند کمتر از 8 کاراکتر باشد"),
+});
 
 export const resetPasswordSchema = yup.object({
-    password: yup.string().min(8, "رمز عبور نمیتواند کمتر از 8 کاراکتر باشد").required("رمز عبور الزامی میباشد"),
-    password_confirmation: yup.string()
-        .oneOf([yup.ref('password')], "رمز عبور و تکرار آن باید یکسان باشند")
-        .required("تکرار رمز عبور الزامی میباشد"),
-})
+  password: yup
+    .string()
+    .min(8, "رمز عبور نمیتواند کمتر از 8 کاراکتر باشد")
+    .required("رمز عبور الزامی میباشد"),
+  password_confirmation: yup
+    .string()
+    .oneOf([yup.ref("password")], "رمز عبور و تکرار آن باید یکسان باشند")
+    .required("تکرار رمز عبور الزامی میباشد"),
+});
 
 export const forgotPasswordSchema = yup.object({
-    mobile_number: yup.string()
-        .required("وارد کردن شماره تماس الزامی میباشد")
-        .min(11, "شماره تماس نمیتوند کمتر از 11 رقم باشد")
-        .max(11, "شماره تماس نمیتواند بیشتر از 11 رقم باشد")
-        .matches(/^[0-9]{11}$/, "شماره تماس نامعتبر"),
-})
+  mobile_number: yup
+    .string()
+    .required("وارد کردن شماره تماس الزامی میباشد")
+    .min(11, "شماره تماس نمیتوند کمتر از 11 رقم باشد")
+    .max(11, "شماره تماس نمیتواند بیشتر از 11 رقم باشد")
+    .matches(/^[0-9]{11}$/, "شماره تماس نامعتبر"),
+});
 
 export const LoginWithCodeSchema = yup.object({
-    mobile_number: yup.string()
-        .required("وارد کردن شماره تماس الزامی میباشد")
-        .min(11, "شماره تماس نمیتوند کمتر از 11 رقم باشد")
-        .max(11, "شماره تماس نمیتواند بیشتر از 11 رقم باشد")
-        .matches(/^[0-9]{11}$/, "شماره تماس نامعتبر"),
-})
+  mobile_number: yup
+    .string()
+    .required("وارد کردن شماره تماس الزامی میباشد")
+    .min(11, "شماره تماس نمیتوند کمتر از 11 رقم باشد")
+    .max(11, "شماره تماس نمیتواند بیشتر از 11 رقم باشد")
+    .matches(/^[0-9]{11}$/, "شماره تماس نامعتبر"),
+});
 
 export const ResetPasswordCodeSchema = yup.object({
-    mobile_number: yup.string()
-        .min(11, "شماره تماس نمیتوند کمتر از 11 رقم باشد")
-        .max(11, "شماره تماس نمیتواند بیشتر از 11 رقم باشد")
-        .matches(/^[0-9]{11}$/, "شماره تماس نامعتبر"),
-    otp: yup.string()
-        .required("وارد کردن کد الزامی میباشد")
-        .min(6, "کد نمیتوند کمتر از 6 رقم باشد")
-        .max(6, "کد نمیتواند بیشتر از 6 رقم باشد")
-        .matches(/^[0-9]{6}$/, "کد نامعتبر"),
-})
+  mobile_number: yup
+    .string()
+    .min(11, "شماره تماس نمیتوند کمتر از 11 رقم باشد")
+    .max(11, "شماره تماس نمیتواند بیشتر از 11 رقم باشد")
+    .matches(/^[0-9]{11}$/, "شماره تماس نامعتبر"),
+  otp: yup
+    .string()
+    .required("وارد کردن کد الزامی میباشد")
+    .min(6, "کد نمیتوند کمتر از 6 رقم باشد")
+    .max(6, "کد نمیتواند بیشتر از 6 رقم باشد")
+    .matches(/^[0-9]{6}$/, "کد نامعتبر"),
+});
 
 export const LoginCodeSchema = yup.object({
-    mobile_number: yup.string()
-        .min(11, "شماره تماس نمیتوند کمتر از 11 رقم باشد")
-        .max(11, "شماره تماس نمیتواند بیشتر از 11 رقم باشد")
-        .matches(/^[0-9]{11}$/, "شماره تماس نامعتبر"),
-    otp: yup.string()
-        .required("وارد کردن کد الزامی میباشد")
-        .min(6, "کد نمیتوند کمتر از 6 رقم باشد")
-        .max(6, " کد نمیتواند بیشتر از 6 رقم باشد")
-        .matches(/^[0-9]{6}$/, "کد نامعتبر"),
-})
+  mobile_number: yup
+    .string()
+    .min(11, "شماره تماس نمیتوند کمتر از 11 رقم باشد")
+    .max(11, "شماره تماس نمیتواند بیشتر از 11 رقم باشد")
+    .matches(/^[0-9]{11}$/, "شماره تماس نامعتبر"),
+  otp: yup
+    .string()
+    .required("وارد کردن کد الزامی میباشد")
+    .min(6, "کد نمیتوند کمتر از 6 رقم باشد")
+    .max(6, " کد نمیتواند بیشتر از 6 رقم باشد")
+    .matches(/^[0-9]{6}$/, "کد نامعتبر"),
+});
 
 export const RegisterSchema = yup.object({
-    first_name: yup.string().required("وارد کردن نام الزامی میباشد").min(3, "نام نمیتواند کمتر از 3 کاراکتر باشد").max(20, "نام نمیتواند بیشتر از 20 کاراکتر باشد"),
-    last_name: yup.string().required("وارد کردن نام خانوادگی الزامی میباشد").min(3, "نام خانوادگی نمیتواند کمتر از 3 کاراکتر باشد").max(25, "نام خانوادگی نمیتواند بیشتر از 25 کاراکتر باشد"),
-    national_code: yup.string().required("وارد کردن کد ملی الزامی میباشد").min(10, "کد ملی نمیتواند کمتر از 10 کاراکتر باشد").max(10, "کد ملی نمیتونه بیشتر از 10 کاراکتر باشه").matches(/^[0-9]{10}$/, "کد نامعتبر"),
-    city_name: yup.object().required("وارد کردن شهر الزامی مباشد"),
-    province_name: yup.object().required("وارد کردن استان الزامی مباشد"),
-    shopName: yup.string().required("وارد کردن نام فروشگاه الزامی میباشد").min(2, "نام فروشگاه نمیتواند کمتر از 3 کاراکتر باشد").max(30, "نام فروشگاه نمیتواند بیشتر از 30 کاراکتر باشد"),
-    mobile_number: yup.string()
-        .required("وارد کردن شماره تماس الزامی میباشد")
-        .min(11, "شماره تماس نمیتوند کمتر از 11 رقم باشد")
-        .max(11, "شماره تماس نمیتواند بیشتر از 11 رقم باشد")
-        .matches(/^[0-9]{11}$/, "شماره تماس نامعتبر"),
-    password: yup.string().min(8, "رمز عبور نمیتواند کمتر از 8 کاراکتر باشد").required("رمز عبور الزامی میباشد"),
-    password_confirmation: yup.string()
-        .oneOf([yup.ref('password')], "رمز عبور و تکرار آن باید یکسان باشند")
-        .required("تکرار رمز عبور الزامی میباشد"),
-})
+  first_name: yup
+    .string()
+    .required("وارد کردن نام الزامی میباشد")
+    .min(3, "نام نمیتواند کمتر از 3 کاراکتر باشد")
+    .max(20, "نام نمیتواند بیشتر از 20 کاراکتر باشد"),
+  last_name: yup
+    .string()
+    .required("وارد کردن نام خانوادگی الزامی میباشد")
+    .min(3, "نام خانوادگی نمیتواند کمتر از 3 کاراکتر باشد")
+    .max(25, "نام خانوادگی نمیتواند بیشتر از 25 کاراکتر باشد"),
+  national_code: yup
+    .string()
+    .required("وارد کردن کد ملی الزامی میباشد")
+    .min(10, "کد ملی نمیتواند کمتر از 10 کاراکتر باشد")
+    .max(10, "کد ملی نمیتونه بیشتر از 10 کاراکتر باشه")
+    .matches(/^[0-9]{10}$/, "کد نامعتبر"),
+  city_name: yup.object().required("وارد کردن شهر الزامی مباشد"),
+  province_name: yup.object().required("وارد کردن استان الزامی مباشد"),
+  shopName: yup
+    .string()
+    .required("وارد کردن نام فروشگاه الزامی میباشد")
+    .min(2, "نام فروشگاه نمیتواند کمتر از 3 کاراکتر باشد")
+    .max(30, "نام فروشگاه نمیتواند بیشتر از 30 کاراکتر باشد"),
+  mobile_number: yup
+    .string()
+    .required("وارد کردن شماره تماس الزامی میباشد")
+    .min(11, "شماره تماس نمیتوند کمتر از 11 رقم باشد")
+    .max(11, "شماره تماس نمیتواند بیشتر از 11 رقم باشد")
+    .matches(/^[0-9]{11}$/, "شماره تماس نامعتبر"),
+  password: yup
+    .string()
+    .min(8, "رمز عبور نمیتواند کمتر از 8 کاراکتر باشد")
+    .required("رمز عبور الزامی میباشد"),
+  password_confirmation: yup
+    .string()
+    .oneOf([yup.ref("password")], "رمز عبور و تکرار آن باید یکسان باشند")
+    .required("تکرار رمز عبور الزامی میباشد"),
+});
 
 export const UpdateUserSchema = yup.object({
-    first_name: yup.string().required("وارد کردن نام الزامی میباشد").min(3, "نام نمیتواند کمتر از 3 کاراکتر باشد").max(20, "نام نمیتواند بیشتر از 20 کاراکتر باشد"),
-    last_name: yup.string().required("وارد کردن نام خانوادگی الزامی میباشد").min(3, "نام خانوادگی نمیتواند کمتر از 3 کاراکتر باشد").max(25, "نام خانوادگی نمیتواند بیشتر از 25 کاراکتر باشد"),
-    city_name: yup.object().required("وارد کردن شهر الزامی مباشد"),
-    province_name: yup.object().required("وارد کردن استان الزامی مباشد"),
-    shopName: yup.string().required("وارد کردن نام فروشگاه الزامی میباشد").min(2, "نام فروشگاه نمیتواند کمتر از 3 کاراکتر باشد").max(30, "نام فروشگاه نمیتواند بیشتر از 30 کاراکتر باشد"),
-    birthDate: yup.string().required("وارد کردن تاریخ تولد الزامی میباشد"),
-    address: yup.string().required("وارد کردن آدرس الزامی میباشد").min(5, "آدرس نمیتواند کمتر از 5 کاراکتر باشد").max(50, "آدرس نمیتواند بیشتر از از 50 کاراکتر باشد"),
-    cell_number: yup.string()
-        .min(11, "شماره تلفن ثابت نمیتوند کمتر از 11 رقم باشد")
-        .max(11, "شماره ثابت نمیتواند بیشتر از 11 رقم باشد")
-        .matches(/^[0-9]{11}$/, "شماره تماس نامعتبر").required("وارد کردن شماره تلفن ثابت الزامی میباشد"),
-    national_code: yup.string().min(10, "کد ملی نمیتواند کمتر از 10 کاراکتر باشد").max(10, "کد ملی نمیتونه بیشتر از 10 کاراکتر باشه").matches(/^[0-9]{10}$/, "کد نامعتبر"),
-    mobile_number: yup.string()
-        .min(11, "شماره تماس نمیتوند کمتر از 11 رقم باشد")
-        .max(11, "شماره تماس نمیتواند بیشتر از 11 رقم باشد")
-        .matches(/^[0-9]{11}$/, "شماره تماس نامعتبر"),
-})
+  first_name: yup
+    .string()
+    .required("وارد کردن نام الزامی میباشد")
+    .min(3, "نام نمیتواند کمتر از 3 کاراکتر باشد")
+    .max(20, "نام نمیتواند بیشتر از 20 کاراکتر باشد"),
+  last_name: yup
+    .string()
+    .required("وارد کردن نام خانوادگی الزامی میباشد")
+    .min(3, "نام خانوادگی نمیتواند کمتر از 3 کاراکتر باشد")
+    .max(25, "نام خانوادگی نمیتواند بیشتر از 25 کاراکتر باشد"),
+  city_name: yup.object().required("وارد کردن شهر الزامی مباشد"),
+  province_name: yup.object().required("وارد کردن استان الزامی مباشد"),
+  shopName: yup
+    .string()
+    .required("وارد کردن نام فروشگاه الزامی میباشد")
+    .min(2, "نام فروشگاه نمیتواند کمتر از 3 کاراکتر باشد")
+    .max(30, "نام فروشگاه نمیتواند بیشتر از 30 کاراکتر باشد"),
+  birthDate: yup.string().required("وارد کردن تاریخ تولد الزامی میباشد"),
+  address: yup
+    .string()
+    .required("وارد کردن آدرس الزامی میباشد")
+    .min(5, "آدرس نمیتواند کمتر از 5 کاراکتر باشد")
+    .max(50, "آدرس نمیتواند بیشتر از از 50 کاراکتر باشد"),
+  cell_number: yup
+    .string()
+    .min(11, "شماره تلفن ثابت نمیتوند کمتر از 11 رقم باشد")
+    .max(11, "شماره ثابت نمیتواند بیشتر از 11 رقم باشد")
+    .matches(/^[0-9]{11}$/, "شماره تماس نامعتبر")
+    .required("وارد کردن شماره تلفن ثابت الزامی میباشد"),
+  national_code: yup
+    .string()
+    .min(10, "کد ملی نمیتواند کمتر از 10 کاراکتر باشد")
+    .max(10, "کد ملی نمیتونه بیشتر از 10 کاراکتر باشه")
+    .matches(/^[0-9]{10}$/, "کد نامعتبر"),
+  mobile_number: yup
+    .string()
+    .min(11, "شماره تماس نمیتوند کمتر از 11 رقم باشد")
+    .max(11, "شماره تماس نمیتواند بیشتر از 11 رقم باشد")
+    .matches(/^[0-9]{11}$/, "شماره تماس نامعتبر"),
+});
 
 export const AddNewCardSchema = yup.object({
-    name: yup.string().required("وارد کردن نام الزامی میباشد").min(3, "نام نمیتواند کمتر از 3 کاراکتر باشد").max(20, "نام نمیتواند بیشتر از 20 کاراکتر باشد"),
-    family: yup.string().required("وارد کردن نام خانوادگی الزامی میباشد").min(3, "نام خانوادگی نمیتواند کمتر از 3 کاراکتر باشد").max(25, "نام خانوادگی نمیتواند بیشتر از 25 کاراکتر باشد"),
-    PAN: yup.string()
-        .required("وارد کردن شماره کارت الزامی میباشد")
-        .min(16, "شماره کارت نمیتوند کمتر از 16 رقم باشد")
-        .max(16, " شماره کارت نمیتواند بیشتر از 16 رقم باشد")
-        .matches(/^[0-9]{16}$/, "شماره کارت نامعتبر"),
-    IBAN: yup.string()
-        .required("وارد کردن شماره شبا الزامی میباشد")
-        .min(26, "شماره شبا نمیتوند کمتر از 26 رقم باشد")
-        .max(26, " شماره شبا نمیتواند بیشتر از 26 رقم باشد")
-        .matches(/^IR[0-9]{24}$/, "شماره شبا نامعتبر"),
-})
+  name: yup
+    .string()
+    .required("وارد کردن نام الزامی میباشد")
+    .min(3, "نام نمیتواند کمتر از 3 کاراکتر باشد")
+    .max(20, "نام نمیتواند بیشتر از 20 کاراکتر باشد"),
+  family: yup
+    .string()
+    .required("وارد کردن نام خانوادگی الزامی میباشد")
+    .min(3, "نام خانوادگی نمیتواند کمتر از 3 کاراکتر باشد")
+    .max(25, "نام خانوادگی نمیتواند بیشتر از 25 کاراکتر باشد"),
+  PAN: yup
+    .string()
+    .required("وارد کردن شماره کارت الزامی میباشد")
+    .min(16, "شماره کارت نمیتوند کمتر از 16 رقم باشد")
+    .max(16, " شماره کارت نمیتواند بیشتر از 16 رقم باشد")
+    .matches(/^[0-9]{16}$/, "شماره کارت نامعتبر"),
+  IBAN: yup
+    .string()
+    .required("وارد کردن شماره شبا الزامی میباشد")
+    .min(24, "شماره شبا نمیتوند کمتر از 24 رقم باشد")
+    .max(24, " شماره شبا نمیتواند بیشتر از 24 رقم باشد"),
+  // .matches(/^IR[0-9]{24}$/, "شماره شبا نامعتبر"),
+});
 
 export const ResetPasswordUserSchema = yup.object({
-    password: yup.string().min(8, "رمز عبور نمی‌تواند کمتر از 8 کاراکتر باشد").required("رمز عبور الزامی می‌باشد"),
-    newPassword: yup.string().min(8, "رمز عبور جدید نمی‌تواند کمتر از 8 کاراکتر باشد")
-        .notOneOf([yup.ref('password')], "رمز عبور جدید نباید با رمز عبور فعلی یکسان باشد")
-        .required("رمز عبور جدید الزامی می‌باشد"),
-    password_confirmation: yup.string()
-        .oneOf([yup.ref('newPassword')], "رمز عبور جدید و تکرار آن باید یکسان باشند")
-        .required("تکرار رمز عبور الزامی می‌باشد"),
+  password: yup
+    .string()
+    .min(8, "رمز عبور نمی‌تواند کمتر از 8 کاراکتر باشد")
+    .required("رمز عبور الزامی می‌باشد"),
+  newPassword: yup
+    .string()
+    .min(8, "رمز عبور جدید نمی‌تواند کمتر از 8 کاراکتر باشد")
+    .notOneOf(
+      [yup.ref("password")],
+      "رمز عبور جدید نباید با رمز عبور فعلی یکسان باشد"
+    )
+    .required("رمز عبور جدید الزامی می‌باشد"),
+  password_confirmation: yup
+    .string()
+    .oneOf(
+      [yup.ref("newPassword")],
+      "رمز عبور جدید و تکرار آن باید یکسان باشند"
+    )
+    .required("تکرار رمز عبور الزامی می‌باشد"),
 });
 
 export const SendWithdrawSchema = yup.object({
-    holderName: yup.string().required("وارد کردن اطلاعات صاحب کارت الزامی میباشد"),
-    card: yup.object(),
-})
+  holderName: yup
+    .string()
+    .required("وارد کردن اطلاعات صاحب کارت الزامی میباشد"),
+  card: yup.object(),
+});
 
 export const checkIMEISchema = yup.object({
-    IMEI: yup.string().required("وارد کردن اطلاعات IMEI الزامی میباشد").min(15,"شناسه IMEI نمیتواند کمتر از 15 کاراکتر باشد").max(15,"شناسه IMEI نمیتواند بیشتر از 15 کاراکتر باشد"),
-})
\ No newline at end of file
+  IMEI: yup
+    .string()
+    .required("وارد کردن اطلاعات IMEI الزامی میباشد")
+    .min(15, "شناسه IMEI نمیتواند کمتر از 15 کاراکتر باشد")
+    .max(15, "شناسه IMEI نمیتواند بیشتر از 15 کاراکتر باشد"),
+});
diff --git a/src/services/api/bank-card.ts b/src/services/api/bank-card.ts
index 590694e..c835646 100644
--- a/src/services/api/bank-card.ts
+++ b/src/services/api/bank-card.ts
@@ -1,15 +1,21 @@
 import axiosInstance from "../axios";
 
 type CreateNewCard = {
-    holderName: string,
-    PAN: string,
-    IBAN: string
-}
+  holderName: string;
+  PAN: string;
+  IBAN: string;
+};
 
 type DeleteCard = {
-    id: string | number | null
-}
+  id: string | number | null;
+};
 
-export const createNewCardMutation = (payload: CreateNewCard) => axiosInstance.post<any>("gps/bank-card", payload)
-export const deleteCardMutation = (payload: DeleteCard) => axiosInstance.delete<any>(`gps/bank-card/${payload?.id}`)
-export const getUserCardsList = () => axiosInstance.get<any>("gps/bank-card")
\ No newline at end of file
+export const createNewCardMutation = (payload: CreateNewCard) =>
+  axiosInstance.post<any>("gps/bank-card", payload);
+export const updateCard = (payload: any) =>
+  axiosInstance.put<any>(`gps/bank-card/${payload.id}`, payload);
+export const deleteCardMutation = (payload: DeleteCard) =>
+  axiosInstance.delete<any>(`gps/bank-card/${payload?.id}`);
+export const getCardDetail = (payload: DeleteCard) =>
+  axiosInstance.get<any>(`gps/bank-card/${payload?.id}`);
+export const getUserCardsList = () => axiosInstance.get<any>("gps/bank-card");
diff --git a/src/services/axios/index.ts b/src/services/axios/index.ts
index c3b07e9..9c7c3e2 100644
--- a/src/services/axios/index.ts
+++ b/src/services/axios/index.ts
@@ -1,16 +1,17 @@
 import axios from "axios";
 
 const axiosInstance = axios.create({
-    baseURL: 'https://asan-service.com/api',
+  // baseURL: "http://192.168.0.217:7420/api",
+  baseURL: "https://asan-service.com/api",
 });
 
 axiosInstance.interceptors.request.use(async function (config) {
-    // const search = window.location.search;
-    // const params = new URLSearchParams(search)
-    const token = localStorage.getItem("token") && localStorage.getItem("token")
-    config.headers.Authorization = 'Bearer ' + token
-    // config.params = params && params
-    return await config;
+  // const search = window.location.search;
+  // const params = new URLSearchParams(search)
+  const token = localStorage.getItem("token") && localStorage.getItem("token");
+  config.headers.Authorization = "Bearer " + token;
+  // config.params = params && params
+  return await config;
 });
 
-export default axiosInstance;
\ No newline at end of file
+export default axiosInstance;
diff --git a/src/store/user.ts b/src/store/user.ts
index 1100fb3..cdad9d2 100644
--- a/src/store/user.ts
+++ b/src/store/user.ts
@@ -1,56 +1,56 @@
-import { create } from 'zustand';
-import { UserInterface } from '../types';
+import { create } from "zustand";
+import { UserInterface } from "../types";
 import { persist } from "zustand/middleware";
 
 type ZustandState = {
-    user: UserInterface;
-    updateUser: (userData: Partial<UserInterface>) => void;
-    clearUser: () => void;
+  user: UserInterface;
+  updateUser: (userData: Partial<UserInterface>) => void;
+  clearUser: () => void;
 };
 
 const defaultParams: UserInterface = {
-    cardBank: [],
-    city_name: "",
-    created_at: "",
-    dollarBalance: "",
-    first_name: "",
-    id: "",
-    last_name: "",
-    mobile_number: "",
-    national_code: "",
-    profilePic: "",
-    province_name: "",
-    score: 0,
-    shopName: "",
-    updated_at: "",
-    walletBalance: 0,
-    active: true,
-    _id: "",
-    address: "",
-    birthDate: "",
-    cell_number: "",
-}
+  cardBank: [],
+  city_name: "",
+  created_at: "",
+  dollarBalance: "",
+  first_name: "",
+  id: "",
+  last_name: "",
+  mobile_number: "",
+  national_code: "",
+  profilePic: "",
+  province_name: "",
+  score: 0,
+  shopName: "",
+  updated_at: "",
+  walletBalance: 0,
+  active: true,
+  _id: "",
+  address: "",
+  birthDate: "",
+  cell_number: "",
+};
 export const useUserStore = create<ZustandState>()(
-    persist(
-        (set) => ({
-            user: defaultParams,
-            updateUser: (userData: Partial<UserInterface>) =>
-                set((state) => ({
-                    ...state,
-                    user: {
-                        ...state.user,
-                        ...userData,
-                    },
-                })),
-            clearUser: () =>
-                set((state) => ({
-                    ...state,
-                    user: defaultParams,
-                })),
-        }),
-        {
-            name: 'user-store',
-            getStorage: () => localStorage
-        }
-    )
-);
\ No newline at end of file
+  persist(
+    (set) => ({
+      user: defaultParams,
+      updateUser: (userData: Partial<UserInterface>) =>
+        set((state) => ({
+          ...state,
+          user: {
+            ...state.user,
+            ...userData,
+          },
+        })),
+      clearUser: () =>
+        set((state) => ({
+          ...state,
+          user: defaultParams,
+        })),
+    }),
+    {
+      name: "user-store",
+      getStorage: () => localStorage,
+    }
+  )
+);
diff --git a/src/types/index.ts b/src/types/index.ts
index 9359bc4..93ec05b 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -1,356 +1,355 @@
-import React from "react"
+import React from "react";
 
 export interface LoginFormInterface {
-    username: string,
-    password: string,
-    remember_me?: boolean
+  username: string;
+  password: string;
+  remember_me?: boolean;
 }
 
 export interface LoginResponseInterface {
-    token: string
+  token: string;
 }
 
 export interface ResetPasswordInterface {
-    mobile_number?: string | any,
-    otp?: string | any,
-    password: string,
-    password_confirmation: string
+  mobile_number?: string | any;
+  otp?: string | any;
+  password: string;
+  password_confirmation: string;
 }
 
 export interface ForgotPasswordInterface {
-    mobile_number: string
+  mobile_number: string;
 }
 
 export interface LoginWithCodeInterface {
-    mobile_number: string | any
+  mobile_number: string | any;
 }
 export interface ResetPasswordCodeInterface {
-    mobile_number?: string | any
-    otp: string
+  mobile_number?: string | any;
+  otp: string;
 }
 
 export interface LoginCodeInterface {
-    mobile_number: any
-    otp: string
+  mobile_number: any;
+  otp: string;
 }
 
 export interface RegisterInterface {
-    first_name: string
-    last_name: string
-    national_code: string
-    city_name: object | any
-    province_name: object | any
-    shopName: string
-    mobile_number: string
-    password: string
-    password_confirmation: string
+  first_name: string;
+  last_name: string;
+  national_code: string;
+  city_name: object | any;
+  province_name: object | any;
+  shopName: string;
+  mobile_number: string;
+  password: string;
+  password_confirmation: string;
 }
 
 export interface SidebarInterface {
-    name: string,
-    title: string,
-    route: string,
-    icon: React.ReactNode,
-    activeIcon: React.ReactNode
+  name: string;
+  title: string;
+  route: string;
+  icon: React.ReactNode;
+  activeIcon: React.ReactNode;
 }
 
 export interface SocialsInterface {
-    name: string,
-    path: string
+  name: string;
+  path: string;
 }
 
 export interface StatusBoxItemInterface {
-    name: string,
-    title: string,
-    icon: React.ReactNode,
-    value: number,
-    detail?: boolean
+  name: string;
+  title: string;
+  icon: React.ReactNode;
+  value: number;
+  detail?: boolean;
 }
 
 export interface UpdateUserInterface {
-    id?: any,
-    first_name: string
-    last_name: string
-    city_name: object | any
-    province_name: object | any
-    shopName: string
-    birthDate: string
-    address: string
-    cell_number: string,
-    national_code?: string,
-    mobile_number?: string,
-    image?: any
+  id?: any;
+  first_name: string;
+  last_name: string;
+  city_name: object | any;
+  province_name: object | any;
+  shopName: string;
+  birthDate: string;
+  address: string;
+  cell_number: string;
+  national_code?: string;
+  mobile_number?: string;
+  image?: any;
 }
 
 export interface CardBank {
-    _id: string,
-    holderName: string,
-    PAN: number,
-    IBAN: string,
-    created_at: string,
-    updated_at: string,
-    id: string
+  _id: string;
+  holderName: string;
+  PAN: number;
+  IBAN: string;
+  created_at: string;
+  updated_at: string;
+  id: string;
 }
 
 export interface BankCartInterface {
-    _id: string,
-    cardBank: CardBank[] | [] | CardBank
-    id: string
+  _id: string;
+  cardBank: CardBank[] | [] | CardBank;
+  id: string;
 }
 
-
 export interface BanksInterface {
-    name: string,
-    name_farsi: string,
-    icon: React.ReactNode,
-    iban_nbc: string,
-    pan_iin: string[] | []
+  name: string;
+  name_farsi: string;
+  icon: React.ReactNode;
+  iban_nbc: string;
+  pan_iin: string[] | [];
 }
 
 export interface AddNewCartInterface {
-    name: string
-    family: string
-    PAN: string
-    IBAN: string
+  name: string;
+  family: string;
+  PAN: string;
+  IBAN: string;
+  holderName?: string;
 }
 
 export interface installationReportsInterface {
-    status: boolean
-    dollar: string
-    score: string
-    device_model: string
-    imei_number: string
-    install_date: string
-    install_iemi: string
+  status: boolean;
+  dollar: string;
+  score: string;
+  device_model: string;
+  imei_number: string;
+  install_date: string;
+  install_iemi: string;
 }
 
 export interface colConfig {
-    accessor: string
-    header: string
-    cellRenderer?: (info: any) => JSX.Element;
+  accessor: string;
+  header: string;
+  cellRenderer?: (info: any) => JSX.Element;
 }
 
 export interface TransactionsInterface {
-    status: boolean
-    amount: string
-    request_date: string
-    traking_number: string
-    deposit_date: string
+  status: boolean;
+  amount: string;
+  request_date: string;
+  traking_number: string;
+  deposit_date: string;
 }
 
 export interface ScoreInterface {
-    title: string
-    score: number
-    date: string
+  title: string;
+  score: number;
+  date: string;
 }
 
 export interface SubscriptionReportInterface {
-    imei_number: string
-    renewal_date: string
-    renewal_type: string
-    amount: string
-    contribution: string,
-    percentage: string
+  imei_number: string;
+  renewal_date: string;
+  renewal_type: string;
+  amount: string;
+  contribution: string;
+  percentage: string;
 }
 
 export interface DeviceId {
-    tomanPrice: number,
-    dollarProfit: number,
-    profit: number,
-    status: number,
-    _id: string,
-    IMEI: string,
-    model: string,
-    score: number,
-    renewalProfit: number,
-    created_at: string,
-    updated_at: string,
-    __v: number,
-    id: string
+  tomanPrice: number;
+  dollarProfit: number;
+  profit: number;
+  status: number;
+  _id: string;
+  IMEI: string;
+  model: string;
+  score: number;
+  renewalProfit: number;
+  created_at: string;
+  updated_at: string;
+  __v: number;
+  id: string;
 }
 export interface RegisterDeviceResponse {
-    data: RegisterDeviceData[] | [],
-    total: number
+  data: RegisterDeviceData[] | [];
+  total: number;
 }
 
 export interface RegisterDeviceData {
-    status: number,
-    _id: string,
-    deviceId: DeviceId[] | [],
-    registerDate: string,
-    userId: string,
-    created_at: string,
-    updated_at: string,
-    __v: number,
-    id: string
+  status: number;
+  _id: string;
+  deviceId: DeviceId[] | [];
+  registerDate: string;
+  userId: string;
+  created_at: string;
+  updated_at: string;
+  __v: number;
+  id: string;
 }
 
-
 export interface RegisterDeviceId {
-    tomanPrice: number,
-    dollarProfit: number,
-    profit: number,
-    status: number,
-    _id: string,
-    IMEI: string,
-    model: string,
-    score: number,
-    renewalProfit: number,
-    created_at: string,
-    updated_at: string,
-    __v: number,
-    id: string
+  tomanPrice: number;
+  dollarProfit: number;
+  profit: number;
+  status: number;
+  _id: string;
+  IMEI: string;
+  model: string;
+  score: number;
+  renewalProfit: number;
+  created_at: string;
+  updated_at: string;
+  __v: number;
+  id: string;
 }
 
 export interface AwardsResponse {
-    score: number,
-    title: string,
-    desc: string
-    req: {
-        userId: string,
-        desc: string,
-        metaData: null | any,
-        status: number
-    },
-    status: number,
-    expireDate: string
+  score: number;
+  title: string;
+  desc: string;
+  req: {
+    userId: string;
+    desc: string;
+    metaData: null | any;
+    status: number;
+  };
+  status: number;
+  expireDate: string;
 }
 
 interface TransactionsData {
-    _id: string,
-    card: TransactionsCard
-    userId: string,
-    amount: number,
-    dollarAmount: number,
-    status: number,
-    created_at: string,
-    updated_at: string,
-    __v: number,
-    id: string
+  _id: string;
+  card: TransactionsCard;
+  userId: string;
+  amount: number;
+  dollarAmount: number;
+  status: number;
+  created_at: string;
+  updated_at: string;
+  __v: number;
+  id: string;
 }
 
 interface TransactionsCard {
-    _id: string,
-    holderName: string,
-    PAN: number,
-    IBAN: string,
-    created_at: string,
-    updated_at: string,
-    id: string
+  _id: string;
+  holderName: string;
+  PAN: number;
+  IBAN: string;
+  created_at: string;
+  updated_at: string;
+  id: string;
 }
 
 export interface TransactionsResponse {
-    data: TransactionsData[] | [],
-    total: number
+  data: TransactionsData[] | [];
+  total: number;
 }
 
 type OverviewUser = {
-    walletBalance: number,
-    dollarBalance: number,
-    score: number,
-    _id: string,
-    id: string
-}
+  walletBalance: number;
+  dollarBalance: number;
+  score: number;
+  _id: string;
+  id: string;
+};
 
 export interface OverviewResponse {
-    pending: boolean,
-    user: OverviewUser
+  pending: boolean;
+  user: OverviewUser;
 }
 
 type ScoreData = {
-    _id: string,
-    deviceId: string,
-    score: number,
-    created_at: string,
-    updated_at: string,
-    __v: number,
-    userId: string,
-    id: string
-}
+  _id: string;
+  deviceId: string;
+  score: number;
+  created_at: string;
+  updated_at: string;
+  __v: number;
+  userId: string;
+  id: string;
+};
 
 export interface ScoreResponse {
-    data: ScoreData[] | []
-    score: number,
-    total: number
+  data: ScoreData[] | [];
+  score: number;
+  total: number;
 }
 
 export interface ComboBoxItems {
-    name: string,
-    id: number
+  name: string;
+  id: number;
 }
 
 export interface TableParams {
-    page: number,
-    rows: number,
-    search: string
+  page: number;
+  rows: number;
+  search: string;
 }
 
 export type ProvinceType = {
-    ProvinceID: number,
-    ProvinceName: string
-}
+  ProvinceID: number;
+  ProvinceName: string;
+};
 
 export interface ProvinceResponse {
-    data: { data: ProvinceType[] | [], }
-    error: string | null
+  data: { data: ProvinceType[] | [] };
+  error: string | null;
 }
 
 export interface LoginWithOTP {
-    mobile_number?: string | any
-    otp: string
+  mobile_number?: string | any;
+  otp: string;
 }
 
 export type CitiesType = {
-    CityID: number,
-    CityName: string,
-    ProvinceID: string,
-    ProvinceName: string
-}
+  CityID: number;
+  CityName: string;
+  ProvinceID: string;
+  ProvinceName: string;
+};
 
 export interface CitiesResponse {
-    data: CitiesType[] | [],
-    error: string | null | any
+  data: CitiesType[] | [];
+  error: string | null | any;
 }
 
 export interface UserInterface {
-    cardBank: CardBank[] | [],
-    city_name: string,
-    created_at: string,
-    dollarBalance: string,
-    first_name: string,
-    id: string,
-    last_name: string,
-    mobile_number: string,
-    national_code: string,
-    profilePic: string,
-    province_name: string
-    score: number
-    shopName: string
-    updated_at: string
-    walletBalance: number
-    active: boolean,
-    _id: string,
-    address: string,
-    birthDate: string,
-    cell_number: string
+  cardBank: CardBank[] | [];
+  city_name: string;
+  created_at: string;
+  dollarBalance: string;
+  first_name: string;
+  id: string;
+  last_name: string;
+  mobile_number: string;
+  national_code: string;
+  profilePic: string;
+  province_name: string;
+  score: number;
+  shopName: string;
+  updated_at: string;
+  walletBalance: number;
+  active: boolean;
+  _id: string;
+  address: string;
+  birthDate: string;
+  cell_number: string;
 }
 
 export interface ResetPasswordUser {
-    password: string,
-    newPassword: string,
-    password_confirmation: string
+  password: string;
+  newPassword: string;
+  password_confirmation: string;
 }
 
 export interface AwardStatus {
-    awards: number,
-    my_score: number
+  awards: number;
+  my_score: number;
 }
 
 export interface SendWithdraw {
-    holderName: string,
-    card: any
+  holderName: string;
+  card: any;
 }
 
 export interface CheckIMEI {
-    IMEI: string
-}
\ No newline at end of file
+  IMEI: string;
+}
diff --git a/src/utility/sidebar.tsx b/src/utility/sidebar.tsx
index 42bc79b..0651b9b 100644
--- a/src/utility/sidebar.tsx
+++ b/src/utility/sidebar.tsx
@@ -7,63 +7,63 @@ export const sidebarItems: SidebarInterface[] | [] = [
         name: "home",
         title: "صفحه اصلی",
         route: "/",
-        icon: <Home2 color="#777577" className="size-[27px]" variant="Bold" />,
-        activeIcon: <Home2 color="#11212D" className="size-[27px]" variant="Bold" />
+        icon: <Home2 color="#777577" className="size-5" variant="Bold" />,
+        activeIcon: <Home2 color="#11212D" className="size-5" variant="Bold" />
     },
     {
         name: "my-account",
         title: "حساب من",
         route: "/my-account",
-        icon: <UserSquare color="#777577" className="size-[27px]" variant="Bold" />,
-        activeIcon: <UserSquare color="#11212D" className="size-[27px]" variant="Bold" />
+        icon: <UserSquare color="#777577" className="size-5" variant="Bold" />,
+        activeIcon: <UserSquare color="#11212D" className="size-5" variant="Bold" />
     },
     {
         name: "wallet",
         title: "کیف پول",
         route: "/wallet",
-        icon: <Wallet color="#777577" className="size-[27px]" variant="Bold" />,
-        activeIcon: <Wallet color="#11212D" className="size-[27px]" variant="Bold" />
+        icon: <Wallet color="#777577" className="size-5" variant="Bold" />,
+        activeIcon: <Wallet color="#11212D" className="size-5" variant="Bold" />
     },
     {
         name: "management-bank-accounts",
         title: "مدیریت حساب های بانکی",
         route: "/management-bank-accounts",
-        icon: <CardPos color="#777577" className="size-[27px]" variant="Bold" />,
-        activeIcon: <CardPos color="#11212D" className="size-[27px]" variant="Bold" />
+        icon: <CardPos color="#777577" className="size-5" variant="Bold" />,
+        activeIcon: <CardPos color="#11212D" className="size-5" variant="Bold" />
     },
     {
         name: "installation-reports",
         title: "گزارش نصب ها",
         route: "/installation-reports",
-        icon: <SmartCar color="#777577" className="size-[27px]" variant="Bold" />,
-        activeIcon: <SmartCar color="#11212D" className="size-[27px]" variant="Bold" />
+        icon: <SmartCar color="#777577" className="size-5" variant="Bold" />,
+        activeIcon: <SmartCar color="#11212D" className="size-5" variant="Bold" />
     },
     {
         name: "transactions",
         title: "تراکنش ها",
         route: "/transactions",
-        icon: <ReceiptItem color="#777577" className="size-[27px]" variant="Bold" />,
-        activeIcon: <ReceiptItem color="#11212D" className="size-[27px]" variant="Bold" />
+        icon: <ReceiptItem color="#777577" className="size-5" variant="Bold" />,
+        activeIcon: <ReceiptItem color="#11212D" className="size-5" variant="Bold" />
     },
     {
         name: "my-score",
         title: "امتیاز من",
         route: "/my-score",
-        icon: <StarSlash color="#777577" className="size-[27px]" variant="Bold" />,
-        activeIcon: <StarSlash color="#11212D" className="size-[27px]" variant="Bold" />
+        icon: <StarSlash color="#777577" className="size-5" variant="Bold" />,
+        activeIcon: <StarSlash color="#11212D" className="size-5" variant="Bold" />
     },
     {
         name: "awards",
         title: "جوایز",
         route: "/awards",
-        icon: <Cup color="#777577" className="size-[27px]" variant="Bold" />,
-        activeIcon: <Cup color="#11212D" className="size-[27px]" variant="Bold" />
+        icon: <Cup color="#777577" className="size-5" variant="Bold" />,
+        activeIcon: <Cup color="#11212D" className="size-5" variant="Bold" />
     },
     {
         name: "subscription-report",
         title: "گزارش تمدید اشتراک اینترنتی",
         route: "/subscription-report",
-        icon: <DocumentText color="#777577" className="size-[27px]" variant="Bold" />,
-        activeIcon: <DocumentText color="#11212D" className="size-[27px]" variant="Bold" />
+        icon: <DocumentText color="#777577" className="size-5" variant="Bold" />,
+        activeIcon: <DocumentText color="#11212D" className="size-5" variant="Bold" />
     },
 ]
\ No newline at end of file