Mike test page1

package.json

@@ -12,7 +12,6 @@
   },
   "dependencies": {
     "@ant-design/cssinjs": "^1.20.0",
-    "@svgr/webpack": "^8.1.0",
     "@t3-oss/env-nextjs": "^0.10.1",
     "antd": "^5.18.0",
     "geist": "^1.3.0",
@@ -24,6 +23,7 @@
     "zod": "^3.23.3"
   },
   "devDependencies": {
+    "@svgr/webpack": "^8.1.0",
     "@types/eslint": "^8.56.2",
     "@types/node": "^20.11.20",
     "@types/react": "^18.2.57",

src/app/mike/dashboard/container/DashboardContainer.tsx

@@ -0,0 +1,42 @@
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { PageWithModalTemplate } from "~/components/Templates/PageWithModal/PageWithModalTemplate";
+import ModalStore from "~/store/ModalStore";
+
+export const DashboardContainer = () => {
+  const router = useRouter();
+
+  const [isCustomModalOpen, setIsCustomModalOpen] = useState(false);
+
+  const pagewithmodalTemplateProps: React.ComponentProps<
+    typeof PageWithModalTemplate
+  > = {
+    pageWithModalHeaderModuleProps: {
+      title: "Proxima OS",
+      onClickLeftIcon: () => router.back(),
+      onClickRightIcon: () => setIsCustomModalOpen(true),
+    },
+    pageWithModalContentModuleProps: {
+      onOpenSnapshotModal: () =>
+        ModalStore.open("TitleAndContent", {
+          TitleAndContent: {
+            title: "Modal Title",
+            description: "Modal Content",
+          },
+        }),
+      modalProps: {
+        modalProps: {
+          isModalOpen: isCustomModalOpen,
+          setModalOpen: setIsCustomModalOpen,
+        },
+        title: "Custom Modal Title",
+        description: "Custom Modal Description",
+      },
+    },
+    emptyFooterModuleProps: {
+      footerProps: {},
+    },
+  };
+
+  return <PageWithModalTemplate {...pagewithmodalTemplateProps} />;
+};

src/app/mike/dashboard/page.tsx

@@ -0,0 +1,8 @@
+"use client";
+import { DashboardContainer } from "./container/DashboardContainer";
+
+const Dashboard = () => {
+  return <DashboardContainer />;
+};
+
+export default Dashboard;

src/components/Atoms/FooterAtom/FooterAtom.tsx

@@ -1,11 +1,52 @@
+import HomeSVG from "@svgs/home.svg";
+import MessageSVG from "@svgs/message.svg";
+import WalletSVG from "@svgs/wallet.svg";
+import HistorySVG from "@svgs/history.svg";
+
 type Props = {
-  title: string;
+  onHomeClick?: () => void;
+  onMessageClick?: () => void;
+  onWalletClick?: () => void;
+  onHistoryClick?: () => void;
 };
 
 export const FooterAtom = (props: Props) => {
   return (
-    <div className="flex h-full items-center justify-center bg-[#FFC96F]">
-      <div>{props.title}</div>
+    <div className='relative flex h-full items-center justify-between bg-[#262626] p-4'>
+      {/* Home Tab */}
+      <div
+        className='flex flex-1 cursor-pointer justify-center'
+        onClick={props.onHomeClick}
+      >
+        <HomeSVG width={24} height={24} fill='#8C8C8C' />
+      </div>
+
+      {/* Message Tab */}
+      <div
+        className='flex flex-1 cursor-pointer justify-center'
+        onClick={props.onMessageClick}
+      >
+        <MessageSVG width={24} height={24} fill='#8C8C8C' />
+      </div>
+
+      {/* Wallet Tab with Full Width Tab Indicator */}
+      <div
+        className='relative flex flex-1 cursor-pointer justify-center'
+        onClick={props.onWalletClick}
+      >
+        {/* Slim Top Indicator for the Wallet Tab */}
+        <div className='absolute -top-4 left-0 h-[2px] w-full bg-[#00EC97]' />
+        {/* Wallet Icon */}
+        <WalletSVG width={24} height={24} fill='#FFFFFF' />
+      </div>
+
+      {/* History Tab */}
+      <div
+        className='flex flex-1 cursor-pointer justify-center'
+        onClick={props.onHistoryClick}
+      >
+        <HistorySVG width={24} height={24} fill='#8C8C8C' />
+      </div>
     </div>
   );
 };

src/components/Atoms/HeaderAtom/HeaderAtom.tsx

@@ -1,5 +1,7 @@
 import { SettingOutlined } from "@ant-design/icons";
 import SVGAtom from "../SVGAtom/SVGAtom";
+import IconSVG from "@svgs/icon.svg";
+import SettingSVG from "@svgs/setting.svg";
 
 type Props = {
   title: string;
@@ -9,26 +11,29 @@ type Props = {
 
 export const HeaderAtom = (props: Props) => {
   return (
-    <div className="relative flex h-full w-full items-center justify-center bg-[#FFC96F]">
+    <div className="relative flex h-full w-full items-center justify-center bg-[#000000]">
       {/* Sample using custom svg */}
       {props.onClickLeftIcon && (
         <div
           className="absolute left-0 z-[1] flex w-[50px] cursor-pointer items-center justify-center"
-          onClick={props.onClickLeftIcon}
+          //onClick={props.onClickLeftIcon}
+          onClick={() => console.log("Left icon clicked")}
         >
-          <SVGAtom iconName="arrowLeft" width={20} height={20} color="black" />
+          <IconSVG width={20} height={20} fill="#BFBFBF" />
         </div>
       )}
 
-      <div>{props.title}</div>
+      <div className="text-white">{props.title}</div>
 
       {/* Sample using Antd icon */}
       {props.onClickRightIcon && (
         <div
           className="absolute right-0 z-[1] flex w-[50px] cursor-pointer items-center justify-center"
-          onClick={() => console.log("Antd icon clicked")}
+         //
+         onClick={props.onClickRightIcon}
         >
-          <SettingOutlined className="!text-gray-header cursor-pointer text-[20px]" />
+
+        <SettingSVG width={20} height={20} fill="#BFBFBF" />
         </div>
       )}
     </div>

src/components/Components/PageWithModalContentCustomModal/PageWithModalContentCustomModal.tsx

@@ -1,21 +1,39 @@
 import { Button } from "antd";
 import Modal from "~/components/Atoms/Modal/Modal";
+import Image from "next/image";
+import modalIMG from "@assets/modal.png";
 
 type Props = {
   modalProps: React.ComponentProps<typeof Modal>;
-  title: string;
-  description: string;
 };
 
 export const PageWithModalContentCustomModal = (props: Props) => {
   return (
-    <Modal {...props.modalProps}>
-      <div className="flex h-fit w-80 flex-col gap-4 p-8">
-        <h1 className="text-2xl">{props.title}</h1>
-        <p>{props.description}</p>
-        <Button onClick={() => props.modalProps.setModalOpen(false)}>
-          close
-        </Button>
+    <Modal
+      {...props.modalProps}
+      containerClassName='shadow-none bg-transparent'
+    >
+      <div className='flex h-fit w-80 flex-col gap-4 rounded-[14px] bg-[#2C2D30] p-8'>
+        {/* Title */}
+        <h1 className='text-center text-2xl text-white'>
+          Transaction processing
+        </h1>
+
+        {/* Image Section */}
+        <div className='h-[154px] w-full shadow-none'>
+          {/* Image  */}
+          <Image
+            src={modalIMG}
+            alt='Processing Alt'
+            className='h-full w-full object-cover'
+          />
+        </div>
+
+        {/* Description Text */}
+        <p className='text-center text-base text-white'>
+          Uploading your transaction to the node. please wait for a moment...
+          This may take up to 2 minutes.
+        </p>
       </div>
     </Modal>
   );

src/components/Modules/Dashboard/DashboardContentModule.tsx

@@ -0,0 +1,11 @@
+import React from "react";
+
+const DashboardContentModule = () => {
+  return (
+    <main>
+        <h1>Dashboard Home</h1>
+    </main>
+  );
+};
+
+export default DashboardContentModule;

src/components/Modules/PageWithModal/PageWithModalContentModule.tsx

@@ -2,31 +2,13 @@ import { Button } from "antd";
 import { PageWithModalContentCustomModal } from "~/components/Components/PageWithModalContentCustomModal/PageWithModalContentCustomModal";
 
 type Props = {
-  onOpenSnapshotModal: () => void;
   modalProps: React.ComponentProps<typeof PageWithModalContentCustomModal>;
 };
 
 export const PageWithModalContentModule = (props: Props) => {
   return (
-    <div className="flex h-full w-full justify-around">
+    <div className='flex h-full w-full justify-around'>
       <div>
-        <Button
-          className="my-3"
-          type="primary"
-          onClick={props.onOpenSnapshotModal}
-        >
-          Open Snapshot Modal
-        </Button>
-      </div>
-
-      <div>
-        <Button
-          className="my-3"
-          type="primary"
-          onClick={() => props.modalProps.modalProps.setModalOpen(true)}
-        >
-          Open Modal
-        </Button>
         <PageWithModalContentCustomModal {...props.modalProps} />
       </div>
     </div>

src/components/Modules/PageWithModal/PageWithModalHeaderModule.tsx

@@ -2,11 +2,12 @@ import { HeaderAtom } from "~/components/Atoms/HeaderAtom/HeaderAtom";
 
 type Props = {
   title: string;
-  onClickLeftIcon: () => void;
+  onClickLeftIcon: () =>void;
+  onClickRightIcon: () => void;
 };
 
 export const PageWithModalHeaderModule = (props: Props) => {
   return (
-    <HeaderAtom title={props.title} onClickLeftIcon={props.onClickLeftIcon} />
+    <HeaderAtom title={props.title} onClickLeftIcon={props.onClickLeftIcon} onClickRightIcon={props.onClickRightIcon}  />
   );
 };