complete management account page

public/svgs/banks/icons/mehr.svg

@@ -0,0 +1,3 @@
+<svg width="30" height="26" viewBox="0 0 30 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.601 0.516402C14.461 -0.184043 18.6084 1.1202 21.424 3.84164C19.462 6.11748 17.8377 8.68328 16.6112 11.4248C16.3665 11.9671 16.1882 12.5382 15.8895 13.0542C15.0221 11.4034 13.8823 9.84943 12.322 8.79248C11.1081 7.94768 9.66077 7.4393 8.18206 7.37654C7.96867 7.36896 7.76407 7.42924 7.55819 7.47318C7.84943 8.0757 8.23102 8.63179 8.46576 9.26196C9.14738 11.0131 9.44738 12.8784 9.97838 14.676C10.4679 16.3944 11.1684 18.079 12.2467 19.5163C13.153 20.7377 14.3053 21.7658 15.5832 22.5855C15.7677 22.7047 16.1041 22.8956 16.2159 22.5855C16.364 21.8788 16.3853 21.1482 16.541 20.4402C17.3318 16.3718 19.0691 12.5056 21.4629 9.13141C23.4325 6.40114 25.9104 3.93708 28.9808 2.48221C29.3059 2.34411 29.6285 2.13574 29.9963 2.15581C30.0001 2.56753 29.6825 2.88639 29.5394 3.25417C28.6042 5.28395 28.1272 7.47944 27.5761 9.63476C26.8681 12.4315 26.2204 15.2773 24.9639 17.892C23.6496 20.6448 21.4089 22.957 18.6536 24.2814C15.9322 25.6007 12.7588 26.0099 9.80766 25.3195C6.95314 24.668 4.36474 22.9696 2.5986 20.6398C0.99684 18.5422 0.0829694 15.9313 0.0302688 13.2927C-0.0463041 10.4482 0.881374 7.5874 2.61617 5.33042C4.538 2.78971 7.454 1.02356 10.601 0.516402Z" fill="#289925"/>
+</svg>

public/svgs/banks/mehr.svg

@@ -0,0 +1,3 @@
+<svg width="300" height="226" viewBox="0 0 300 226" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M106.01 -11.8359C144.61 -18.8404 186.084 -5.79789 214.24 21.4165C194.62 44.1749 178.377 69.8328 166.112 97.2479C163.665 102.671 161.882 108.382 158.895 113.542C150.221 97.0344 138.823 81.4944 123.22 70.9249C111.081 62.4768 96.6077 57.3931 81.8206 56.7654C79.6867 56.6896 77.6407 57.2924 75.5819 57.7319C78.4943 63.7571 82.3102 69.318 84.6576 75.6197C91.4738 93.1306 94.4738 111.784 99.7838 129.76C104.679 146.945 111.684 163.79 122.467 178.163C131.53 190.377 143.053 200.658 155.832 208.855C157.677 210.047 161.041 211.956 162.159 208.855C163.64 201.788 163.853 194.482 165.41 187.402C173.318 146.719 190.691 108.056 214.629 74.3142C234.325 47.0115 259.104 22.3708 289.808 7.82212C293.059 6.44114 296.285 4.35743 299.963 4.55812C300.001 8.67539 296.825 11.864 295.394 15.5418C286.042 35.8396 281.272 57.7945 275.761 79.3477C268.681 107.315 262.204 135.773 249.639 161.92C236.496 189.448 214.089 212.57 186.536 225.814C159.322 239.007 127.588 243.099 98.0766 236.195C69.5314 229.68 43.6474 212.696 25.986 189.398C9.9684 168.422 0.829694 142.313 0.302688 115.927C-0.463041 87.4819 8.81374 58.8741 26.1617 36.3043C45.38 10.8972 74.54 -6.7643 106.01 -11.8359Z" fill="#E6E8EA"/>
+</svg>

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"
+    },
+]

tailwind.config.js

@@ -11,7 +11,12 @@ module.exports = {
         "secondary-text-color": "#777577",
         "primary-color": "#015699",
         "secondary-color": "#E6E8EA"
-      }
+      },
+      backgroundImage: {
+        'bank-mehr': "url('/public/svgs/banks/mehr.svg')",
+        'bank-pasargad': "url('/public/svgs/banks/pasargad.svg')",
+        'bank-saderat': "url('/public/svgs/banks/saderat.svg')",
+      },
     },
   },
   plugins: [],