complete management account page

src/components/management-bank-accounts/bank-cart.tsx

@@ -0,0 +1,30 @@
+import { Edit, Trash } from "iconsax-react"
+import { formatCartNumber } from "../../utility/cart"
+import { BankCartInterface } from "../../types"
+import { FC } from "react"
+
+type Props = {
+    item: BankCartInterface
+}
+
+export const BankCart: FC<Props> = ({ item }) => {
+    return (
+        <div className="w-full flex flex-col justify-between rounded-[40px] bg-auth-form p-[18px] cursor-pointer bank-bg bg-bank-mehr min-h-[226px]">
+            <div className="flex flex-row justify-between items-center">
+                <div className="flex flex-row gap-3 items-center">
+                    <img src={`/svgs/banks/icons/${item?.bankName}.svg`} alt={item?.bankName} />
+                    <p className="text-lg font-medium text-primary-text-color">بانک {item?.bankPersianName}</p>
+                </div>
+                <div className="flex flex-row gap-3 items-center">
+                    <Trash color="#777577" />
+                    <Edit color="#777577" />
+                </div>
+            </div>
+            <p className="font-medium text-2xl text-primary-text-color text-center" style={{ direction: "ltr" }}>{formatCartNumber(1234567891011121)}</p>
+            <div className="flex flex-row items-center justify-between">
+                <p className="text-sm text-secondary-text-color font-medium">{item?.cartOwner}</p>
+                <p className="font-medium text-lg text-primary-text-color">IR {item?.shabaNumber}</p>
+            </div>
+        </div>
+    )
+}

src/components/management-bank-accounts/create-new-cart.tsx

@@ -0,0 +1,14 @@
+import { Add } from "iconsax-react"
+
+export const CreateNewCart = () => {
+    return (
+        <div className="bg-auth-form w-full h-full flex items-center justify-center rounded-[40px] p-[18px] py-10 cursor-pointer min-h-[226px]">
+            <div className="flex flex-col gap-6 items-center">
+                <div className="size-16 rounded-full flex justify-center items-center bg-secondary-color">
+                    <Add color="#11212D" className="size-10" />
+                </div>
+                <p className="text-base font-medium text-primary-text-color">ایجاد حساب بانکی جدید</p>
+            </div>
+        </div>
+    )
+}

src/components/management-bank-accounts/index.tsx

@@ -0,0 +1,14 @@
+import { BankCartInterface } from "../../types"
+import { bankCarts } from "../../utility/cart"
+import { BankCart } from "./bank-cart"
+import { CreateNewCart } from "./create-new-cart"
+
+export const ManagementBankAccounts = () => {
+   
+    return (
+        <div className="w-full grid grid-cols-1 xl:grid-cols-2 2xl:grid-cols-3 gap-6">
+            <CreateNewCart />
+            {bankCarts?.map((item: BankCartInterface) => <BankCart key={item?.id} item={item} />)}
+        </div>
+    )
+}

src/index.css

@@ -12,6 +12,7 @@
     src: url("../public/fonts/VazirEn.woff") format('woff');
 }
 
+
 @layer base {
     html {
         font-family: 'vazirmatn', 'vaziren';
@@ -57,4 +58,8 @@
     .otp-container {
         @apply min-w-max
     }
+
+    .bank-bg {
+        @apply bg-contain bg-center bg-no-repeat
+    }
 }

src/pages/dashboard/management-bank-account.tsx

@@ -0,0 +1,7 @@
+import { ManagementBankAccounts } from "../../components/management-bank-accounts"
+
+export const ManagementBankAccountPage = () => {
+    return (
+        <ManagementBankAccounts />
+    )
+}

src/router/index.tsx

@@ -11,6 +11,7 @@ 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";
+import { ManagementBankAccountPage } from "../pages/dashboard/management-bank-account";
 
 
 export const router = createBrowserRouter([
@@ -30,6 +31,10 @@ export const router = createBrowserRouter([
                 path: "wallet",
                 element: <Wallet />
             },
+            {
+                path: "management-bank-accounts",
+                element: <ManagementBankAccountPage />
+            },
         ]
     },
     {

src/types/index.ts

@@ -71,4 +71,16 @@ export interface MyAccountInterface {
     currentPassword: string,
     newPassword: string,
     repeatPassword: string
+}
+
+type BankName = "saderat" | "mehr" | "pasargad"
+type PersianBankName = "مهر" | "صادرات" | "پاسارگاد"
+
+export interface BankCartInterface {
+    id: number,
+    bankName: BankName,
+    bankPersianName: PersianBankName,
+    cartNumber: number | string,
+    cartOwner: string,
+    shabaNumber: string,
 }

src/utility/cart.ts

@@ -0,0 +1,32 @@
+import { BankCartInterface } from "../types";
+
+export const formatCartNumber = (num: number | string) => {
+    return num.toString().replace(/\B(?=(\d{4})+(?!\d))/g, `          `);
+}
+
+export const bankCarts: BankCartInterface[] | [] = [
+    {
+        id: 0,
+        bankName: 'mehr',
+        bankPersianName: "مهر",
+        cartNumber: 4682563898563372,
+        cartOwner: "علی مصلحی",
+        shabaNumber: "270700001000116102861001"
+    },
+    {
+        id: 1,
+        bankName: 'saderat',
+        bankPersianName: "صادرات",
+        cartNumber: 4682563898563372,
+        cartOwner: "علی مصلحی",
+        shabaNumber: "270700001000116102861001"
+    },
+    {
+        id: 2,
+        bankName: 'pasargad',
+        bankPersianName: "پاسارگاد",
+        cartNumber: 4682563898563372,
+        cartOwner: "علی مصلحی",
+        shabaNumber: "270700001000116102861001"
+    },
+]