complete wallet page

src/components/common/combo-box.tsx

@@ -12,9 +12,10 @@ const value = [
 
 type Props = {
     field?: any
+    placeholder?: string
 }
 
-export const ComboBox: FC<Props> = ({ field }) => {
+export const ComboBox: FC<Props> = ({ field, placeholder }) => {
     const [query, setQuery] = useState('')
 
     const filteredValue =
@@ -25,15 +26,16 @@ export const ComboBox: FC<Props> = ({ field }) => {
             })
 
     return (
-        <Combobox value={field.value} onChange={field.onChange} onClose={() => setQuery('')}>
+        <Combobox value={field && field.value} onChange={field && field.onChange} onClose={() => setQuery('')}>
             <div className="relative w-full">
                 <ComboboxInput
+                    placeholder={placeholder}
                     className="input-style min-w-full"
                     displayValue={(person: any) => person?.name}
                     onChange={(event) => setQuery(event.target.value)}
-                    ref={field.ref}
-                    name={field.name}
-                    onBlur={field.onBlur}
+                    ref={field && field.ref}
+                    name={field && field.name}
+                    onBlur={field && field.onBlur}
                 />
                 <ComboboxButton className="absolute top-0 min-w-full h-full bg-transparent">
                     <ArrowDown2 className="size-5 absolute left-5 top-5 p-0 text-secondary-text-color/70" />

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

@@ -3,14 +3,26 @@ import { StatusBoxItemInterface } from "../../types"
 import { filterNumber } from "../../utility/status"
 
 type Props = {
-    item: StatusBoxItemInterface
+    item: StatusBoxItemInterface,
+    detail?: boolean
 }
-export const StatusBoxItem: FC<Props> = ({ item }) => {
+export const StatusBoxItem: FC<Props> = ({ item, detail = false }) => {
     return (
         <div className="w-full bg-auth-form p-[18px] h-full rounded-[40px] flex flex-col gap-[42px]">
-            <div className="size-16 bg-secondary-color flex justify-center rounded-full items-center">
+            {detail ? <div className="flex flex-row justify-between">
+                <div className="size-16 bg-secondary-color flex justify-center rounded-full items-center">
+                    {item?.icon}
+                </div>
+                <div className="flex flex-col gap-2">
+                    <p className="font-normal text-xs text-secondary-text-color">قیمت لحظه ای</p>
+                    <div className="flex flex-row gap-2 items-end">
+                        <p className="font-medium text-xl text-secondary-text-color">{filterNumber(55803)}</p>
+                        <p className="font-normal text-xs text-secondary-text-color">تومان</p>
+                    </div>
+                </div>
+            </div> : <div className="size-16 bg-secondary-color flex justify-center rounded-full items-center">
                 {item?.icon}
-            </div>
+            </div>}
             <div className="flex flex-col gap-3">
                 <p className="font-normal text-base text-secondary-text-color">{item?.title}</p>
                 <div className="font-medium text-[28px] text-primary-text-color">

src/components/home/imei.tsx

@@ -5,7 +5,7 @@ export const Imei = () => {
     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">
-                <img src="/svgs/home/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-[500px]" />
             </div>
             <div className="flex flex-col w-full gap-10 justify-center lg:justify-between">
                 <Input placeholder="کد IMEI" />

src/components/home/status-box.tsx

@@ -1,6 +1,6 @@
 import { StatusBoxItemInterface } from "../../types"
 import { statusBoxItems } from "../../utility/status"
-import { StatusBoxItem } from "./status-box-items"
+import { StatusBoxItem } from "../common/status-box-items"
 
 export const StatusBox = () => {
 

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

@@ -0,0 +1,13 @@
+import { StatusBoxItemInterface } from "../../types"
+import { statusBoxWalletItems } from "../../utility/status"
+import { StatusBoxItem } from "../common/status-box-items"
+
+export const StatusBoxWallet = () => {
+
+
+    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} />)}
+        </div>
+    )
+}

src/components/wallet/wallet-address.tsx

@@ -0,0 +1,30 @@
+import { Button } from "@headlessui/react"
+import { ComboBox } from "../common/combo-box"
+import { useState } from "react"
+
+export const WalletAddress = () => {
+    const [show, setSHow] = useState<boolean>(false)
+    const handleShow = () => setSHow(prev => !prev)
+    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">
+                <img src="/svgs/dashboard/wallet.svg" alt="wallet" className="size-full max-w-[500px] max-h-[500px]" />
+            </div>
+            <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="حساب بانکی مورد نظر خود را انتخاب کنید" />}
+                </div>
+                {!show && <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">
+                    {`همکار گرامی
+                    طبق درخواست قبلی، عملیات واریز مبلغ 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>
+                </div>
+            </div>
+        </div>
+    )
+}

src/components/wallet/wallet-page.tsx

@@ -0,0 +1,11 @@
+import { StatusBoxWallet } from "./status-box-wallet"
+import { WalletAddress } from "./wallet-address"
+
+export const WalletPage = () => {
+    return (
+        <div className="flex flex-col gap-y-[30px] w-full">
+            <StatusBoxWallet />
+            <WalletAddress />
+        </div>
+    )
+}

src/pages/dashboard/wallet.tsx

@@ -0,0 +1,7 @@
+import { WalletPage } from "../../components/wallet/wallet-page"
+
+export const Wallet = () => {
+    return (
+        <WalletPage />
+    )
+}

src/router/index.tsx

@@ -10,6 +10,7 @@ import { SendCode } from "../pages/auth/send-code";
 import { ResetPasswordCode } from "../pages/auth/reset-password-code";
 import { DashboardLayout } from "../components/ui/dashboard/layout";
 import { MyAcccount } from "../pages/dashboard/my-account";
+import { Wallet } from "../pages/dashboard/wallet";
 
 
 export const router = createBrowserRouter([
@@ -25,6 +26,10 @@ export const router = createBrowserRouter([
                 path: "my-account",
                 element: <MyAcccount />
             },
+            {
+                path: "wallet",
+                element: <Wallet />
+            },
         ]
     },
     {

src/types/index.ts

@@ -53,7 +53,8 @@ export interface StatusBoxItemInterface {
     name: string,
     title: string,
     icon: React.ReactNode,
-    value: number
+    value: number,
+    detail?: boolean
 }
 
 export interface MyAccountInterface {

src/utility/status.tsx

@@ -28,4 +28,20 @@ export const statusBoxItems: StatusBoxItemInterface[] | [] = [
     },
 ]
 
+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, ",")