From f90df6b3297deb0c74245ee8aecbc4fd459b42e4 Mon Sep 17 00:00:00 2001
From: Muhammad Bilal Mohib-ul-Nabi <bilalmohib7896@gmail.com>
Date: Sat, 8 Apr 2023 20:04:57 +0500
Subject: [PATCH] Development (#3)

* Readme updated

* Readme updated

* Readme updated

* Updated for SEO

* Updated for SEO
---
 components/Main/Home/MainContent/index.tsx    |  72 ++++
 .../Pages/Profile/ProfileComp/index.tsx       | 284 ++++++++++++++++
 .../Profile/ProfileComp/style.module.css      | 314 +++++++++++++++++
 jsconfig.json                                 |   9 +
 pages/_app.tsx                                | 141 ++------
 pages/dashboard/[uid].tsx                     | 116 +++++++
 pages/index.tsx                               | 139 ++------
 pages/login.tsx                               |  15 +-
 pages/profile/[uuid].tsx                      | 319 +++---------------
 pages/profile/style.module.css                | 300 +---------------
 tsconfig.json                                 |   6 +-
 11 files changed, 913 insertions(+), 802 deletions(-)
 create mode 100644 components/Main/Home/MainContent/index.tsx
 create mode 100644 components/Pages/Profile/ProfileComp/index.tsx
 create mode 100644 components/Pages/Profile/ProfileComp/style.module.css
 create mode 100644 jsconfig.json
 create mode 100644 pages/dashboard/[uid].tsx

diff --git a/components/Main/Home/MainContent/index.tsx b/components/Main/Home/MainContent/index.tsx
new file mode 100644
index 0000000..be2ead4
--- /dev/null
+++ b/components/Main/Home/MainContent/index.tsx
@@ -0,0 +1,72 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { useRouter } from 'next/router';
+import type { NextPage } from 'next';
+import Head from 'next/head';
+// Importing Components
+import Home from '@app/components/Main/Home';
+import Navbar from '@app/components/Navbar';
+import Sidebar from '@app/components/Sidebar';
+import Inbox from '@app/components/Main/Inbox';
+
+// Importing Material UI Components
+import {
+    Box
+} from '@mui/material';
+
+import styles from "../../../../styles/Home.module.css";
+
+interface MainContentProps {
+    isOpen: boolean;
+    setIsOpen: (value: boolean) => void;
+    currentMenuItem: number;
+    setCurrentMenuItem: (value: number) => void;
+    signedInUserData: { email: string };
+}
+
+const MainContent: React.FC<MainContentProps> = ({ isOpen, setIsOpen, currentMenuItem, setCurrentMenuItem, signedInUserData }) => {
+    return (
+        <main className={styles.main}>
+            <Navbar isOpen={isOpen} setIsOpen={setIsOpen} />
+            <div className="d-flex">
+                <Sidebar currentMenuItem={currentMenuItem} setCurrentMenuItem={setCurrentMenuItem} isOpen={isOpen} setIsOpen={setIsOpen} />
+
+                <div style={{ marginTop: 70 }} className={`${styles.rightSideContainer} ${isOpen ? styles.shrinkContainer : styles.expandContainer}`}>
+                    {/* Home Page */}
+                    <section className={currentMenuItem === 1 ? '' : 'd-none'}>
+                        <Home />
+                    </section>
+
+                    {/* My Tasks Page */}
+                    <section className={currentMenuItem === 2 ? '' : 'd-none'}>
+                        <br />
+                        <h3 style={{ marginLeft: 30, marginTop: 5, color: 'black', fontWeight: 'lighter' }}>My Tasks</h3>
+                    </section>
+
+                    {/* Inbox Page */}
+                    <section className={currentMenuItem === 3 ? '' : 'd-none'}>
+                        <Inbox email={signedInUserData.email} />
+                    </section>
+
+                    {/* Reporting Page */}
+                    <section className={currentMenuItem === 4 ? '' : 'd-none'}>
+                        <br />
+                        <h3 style={{ marginLeft: 30, marginTop: 5, color: 'black', fontWeight: 'lighter' }}>Reporting</h3>
+                    </section>
+
+                    {/* Portfolios Page */}
+                    <section className={currentMenuItem === 5 ? '' : 'd-none'}>
+                        <br />
+                        <h3 style={{ marginLeft: 30, marginTop: 5, color: 'black', fontWeight: 'lighter' }}>Portfolios</h3>
+                    </section>
+
+                    {/* Goals Page */}
+                    <section className={currentMenuItem === 6 ? '' : 'd-none'}>
+                        <br />
+                        <h3 style={{ marginLeft: 30, marginTop: 5, color: 'black', fontWeight: 'lighter' }}>Goals</h3>
+                    </section>
+                </div>
+            </div>
+        </main>
+    );
+};
+export default MainContent;
\ No newline at end of file
diff --git a/components/Pages/Profile/ProfileComp/index.tsx b/components/Pages/Profile/ProfileComp/index.tsx
new file mode 100644
index 0000000..8ac6c98
--- /dev/null
+++ b/components/Pages/Profile/ProfileComp/index.tsx
@@ -0,0 +1,284 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { useRouter } from 'next/router';
+import type { NextPage } from 'next';
+import Image from 'next/image';
+import Head from 'next/head';
+
+// Importing Material UI Components
+import {
+    Box
+} from '@mui/material';
+
+// Importing Icons
+import { CiTimer } from "react-icons/ci";
+import { AiOutlineMail } from "react-icons/ai";
+import { BsCheckCircle } from "react-icons/bs";
+
+import DatePicker from 'react-date-picker/dist/entry.nostyle';
+
+import {
+    doc,
+    collection,
+    onSnapshot,
+    addDoc,
+    query,
+    orderBy,
+    deleteDoc,
+    setDoc,
+    where
+} from "firebase/firestore";
+import { useCollection } from 'react-firebase-hooks/firestore';
+
+import {
+    onAuthStateChanged,
+} from "firebase/auth";
+
+import { db, auth } from "../../../../firebase";
+
+// Importing Components
+import CustomLoader from '@app/components/CustomLoader';
+import Navbar from '@app/components/Navbar';
+import Sidebar from '@app/components/Sidebar';
+
+import styles from './style.module.css';
+
+interface ProfileCompProps {
+    isSignedIn: boolean;
+    signedInUserData: any;
+}
+
+const ProfileComp: React.FC<ProfileCompProps> = ({ isSignedIn, signedInUserData }) => {
+    const router = useRouter();
+    const { uuid } = router.query;
+
+    const [taskDue, setTaskDue] = useState<Date>(new Date());
+
+    const frequentCollaboratorsList = [
+        {
+            name: "Bilal Mohib",
+            email: "bilalmohib7896@gmail.com",
+            photoURL: null
+        },
+        {
+            name: "Arif Alvi",
+            email: "arifalvi@gmail.com",
+            photoURL: null
+        },
+        {
+            name: "Imran Khan",
+            email: "imrankhan@gmail.com",
+            photoURL: null
+        },
+        {
+            name: "Nawaz Sharif",
+            email: "nawazsharif@gmail.com",
+            photoURL: null
+        },
+        {
+            name: "Asif Ali Zardari",
+            email: "asifalizardari@gmail.com",
+            photoURL: null
+        }
+    ]
+
+    /////////////////////////////////////// Database Part ////////////////////////////////////////////////
+    let q = query(collection(db, "Data", "Projects", `${uuid}`));
+
+    const [snapshot, loading, error] = useCollection(
+        q,
+        {
+            snapshotListenOptions: { includeMetadataChanges: true },
+        }
+    );
+
+    // GETTINGS Active Jobs
+    const [projects, setProjects] = useState<any>([])
+    // const [loading, setLoading] = useState(true); 
+
+    // FOR GETTING PROJECTS
+    useEffect(() => {
+
+        if (!loading) {
+            // if (snapshot.docs.length !== projects.length) {
+            setProjects(snapshot?.docs.map(doc => ({ ...doc.data(), id: doc.id })));
+            // setLoading(false);
+            // console.clear();
+            console.log("Projects ==> ", projects);
+            // }
+        }
+
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [loading, snapshot]);
+    // FOR GETTING PROJECTS
+
+    /////////////////////////////////////// Database Part ////////////////////////////////////////////////
+
+    return (
+        <div className={styles.container}>
+            {(isSignedIn && !loading) ? (
+                <div>
+                    <div className={styles.profileContainerTop}>
+                        <div className='d-flex'>
+                            <div className={styles.profileImageContainer}>
+                                <Image
+                                    className={styles.profileImage}
+                                    width={120}
+                                    height={120}
+                                    src={signedInUserData.photoURL}
+                                    alt={signedInUserData.displayName}
+                                    title={signedInUserData.displayName}
+                                    loading='eager'
+                                />
+                            </div>
+                            <div className={styles.profileRightContainer}>
+                                <h4 className={styles.profileName}>{signedInUserData.displayName}</h4>
+                                <p className={styles.profileInfoContainer}>
+                                    <p>
+                                        <CiTimer />
+                                        {/* 10:19am  */}
+                                        &nbsp;
+                                        {new Date().toLocaleTimeString()}
+                                        &nbsp;
+                                        local time
+                                    </p>
+                                    <p style={{ marginLeft: 10 }}><AiOutlineMail />  <span className={styles.email}>bilalmohib20001@gmail.com</span></p>
+                                </p>
+                            </div>
+                        </div>
+                        <div>
+                            <button
+                                className={`btn btn-primary ${styles.signOutBtn}`}
+                                onClick={() => {
+                                    auth.signOut();
+                                    router.push("/login");
+                                }}>
+                                Sign Out
+                            </button>
+                        </div>
+                    </div>
+
+                    {/* Main Profile Container */}
+                    <div className={styles.profileContainerMain}>
+                        <div className={styles.myTasksMainContainer}>
+                            <div>
+                                <header className={styles.headerMyTasks}>
+                                    <div>
+                                        My tasks
+                                    </div>
+                                    <div className={styles.myTasksHeaderRight}>
+                                        <button className={`btn ${styles.viewAllTasksBtn}`} onClick={() => {
+                                            alert("View all tasks");
+                                        }}>View all tasks</button>
+                                    </div>
+                                </header>
+                                <section className={styles.bodymyTasksContainer}>
+                                    {
+                                        projects.map((item: any, index: any) => {
+                                            return (
+                                                <div key={index} className={styles.myTasksList}>
+                                                    <div className={styles.myTasksListLeft}>
+                                                        <p className={styles.taskCompleteIcon} onClick={() => alert("Mark As Completed")}><BsCheckCircle /></p>
+                                                        <p className={styles.pnmyTask}>{item.ProjectName}</p>
+                                                    </div>
+                                                    <div className={styles.myTasksListRight}>
+                                                        <DatePicker
+                                                            onChange={setTaskDue}
+                                                            value={new Date(item.ProjectEndingDate)}
+                                                        />
+                                                    </div>
+                                                </div>
+                                            )
+                                        })
+                                    }
+                                </section>
+                            </div>
+                        </div>
+
+                        <div className={styles.rightSideMainContainer}>
+                            <div className={styles.aboutMeContainer}>
+                                <h1>About me</h1>
+                                <p>Use this space to tell people about yourself.</p>
+                            </div>
+                            <div className={styles.frequentCollaborators}>
+                                <h1 className={styles.fcHeading}>Frequent collaborators</h1>
+                                <div className={styles.outsideContainerFCL}>
+                                    {
+                                        frequentCollaboratorsList.map((item, index) => {
+                                            return (
+                                                <div key={index} className={styles.frequentCollaboratorsList}>
+                                                    <div className={`${styles.lifcl} d-flex`}>
+                                                        <div className={styles.frequentCollaboratorsImageContainer}>
+                                                            <Image
+                                                                className={styles.frequentCollaboratorsImage}
+                                                                width={48}
+                                                                height={48}
+                                                                src={(item.photoURL !== null)
+                                                                    ? item.photoURL
+                                                                    : "http://localhost:3000/_next/image?url=https%3A%2F%2Flh3.googleusercontent.com%2Fa%2FAEdFTp7zFuG2WiiEzzreDfzI4170bnvEDdD_l1Hlly7K%3Ds96-c&w=256&q=75"
+                                                                }
+                                                                alt={item.name}
+                                                                title={item.name}
+                                                            />
+                                                        </div>
+                                                        <div className={styles.frequentCollaboratorsNameContainer}>
+                                                            <p className={styles.emailfcnc}>{item.email}</p>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            )
+                                        })
+                                    }
+                                </div>
+                                {/* <br /> */}
+                            </div>
+                        </div>
+                    </div>
+
+
+                    {/* MAIN Profile Container */}
+                    <div className={styles.profileContainerMain}>
+                        <div className={styles.myTasksMainContainer}>
+                            <div>
+                                <header className={styles.headerMyTasks}>
+                                    <div>
+                                        My recent projects
+                                    </div>
+                                </header>
+                                <section className={styles.bodymyTasksContainer}>
+                                    {
+                                        projects.map((item: any, index: any) => {
+                                            return (
+                                                <div key={index} className={styles.myTasksList}>
+                                                    <div className={styles.myTasksListLeft}>
+                                                        <p className={styles.taskCompleteIcon} onClick={() => alert("Mark As Completed")}><BsCheckCircle /></p>
+                                                        <p className={styles.pnmyTask}>{item.ProjectName}</p>
+                                                    </div>
+                                                    <div className={styles.myTasksListRight}>
+                                                        <DatePicker
+                                                            onChange={setTaskDue}
+                                                            value={new Date(item.ProjectEndingDate)}
+                                                        />
+                                                    </div>
+                                                </div>
+                                            )
+                                        })
+                                    }
+                                </section>
+                            </div>
+                        </div>
+
+                        <div className={styles.rightSideMainContainer}>
+                            {/*  */}
+                        </div>
+                    </div>
+                    <br /><br />
+                    {/* MAIN Profile Container */}
+                </div>
+            ) : (
+                <CustomLoader />
+            )}
+        </div>
+    )
+}
+
+export default ProfileComp;
\ No newline at end of file
diff --git a/components/Pages/Profile/ProfileComp/style.module.css b/components/Pages/Profile/ProfileComp/style.module.css
new file mode 100644
index 0000000..68e0dba
--- /dev/null
+++ b/components/Pages/Profile/ProfileComp/style.module.css
@@ -0,0 +1,314 @@
+/* Main Container */
+.container {
+    /* border: 1px solid red; */
+    background-color: #f9f8f8;
+    padding-left: 10%;
+    padding-right: 10%;
+    padding-top: 33px;
+}
+
+.main {
+    width: auto;
+    height: auto;
+    background-color: white;
+}
+
+/* Top Profile Container */
+.profileContainerTop {
+    /* border: 3px solid green; */
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+}
+
+/* Left Side Profile Image Container */
+.profileImageContainer {
+    /* border: 1px solid red; */
+    width: fit-content;
+}
+
+/* Profile Image Style */
+.profileImage {
+    /* border: 2px solid red; */
+    border-radius: 50%;
+    /* Make Image quality best  */
+    image-rendering: optimizeQuality;
+    /* Make Image quality best  */
+}
+
+/* Right Side Profile Container */
+.profileRightContainer {
+    /* border: 2px solid grey; */
+    padding-left: 30px;
+}
+
+/* Profile Display Name */
+.profileName {
+    font-size: 32px;
+    line-height: 40px;
+    color: #1e1f21;
+    font-weight: 400;
+    margin-top: 30px;
+}
+
+/* Profile Info Container */
+.profileInfoContainer {
+    /* border: 2px solid grey; */
+    display: flex;
+    margin-top: 10px;
+}
+
+.profileInfoContainer p {
+    font-size: 14px;
+    line-height: 20px;
+    color: #6D6E6F;
+    font-weight: 400;
+    margin-right: 10px;
+}
+
+.email:hover {
+    text-decoration: underline;
+    cursor: pointer;
+}
+
+/* Sign Out Button */
+.signOutBtn {
+    border: 1px solid #0c56d0;
+    background-color: #f9f8f8;
+    padding: 10px 20px;
+    border-radius: 5px;
+    font-size: 14px;
+    line-height: 20px;
+    color: #0c56d0;
+    text-transform: none;
+    font-weight: 400;
+    margin-top: 10px;
+}
+
+/* Main Profile Container */
+.profileContainerMain {
+    /* border: 2px solid grey; */
+    display: flex;
+    flex-direction: row;
+    margin-top: 30px;
+}
+
+/* //////////////////////////// MAIN PROFILE CONTAINER //////////////////////////// */
+.profileContainerMain {
+    /* border: 2px solid rgb(255, 0, 0); */
+    display: flex;
+    flex-direction: row;
+    margin-top: 30px;
+}
+
+/* my Tasks Container */
+.myTasksMainContainer {
+    border: 1px solid #f1efee;
+    background-color: white;
+    width: 70%;
+    border-radius: 8px;
+    padding-top: 20px;
+}
+
+.viewAllTasksBtn {
+    border: 1px solid #cfcbcb;
+    background-color: white;
+    border-radius: 5px;
+    font-size: 12px;
+    box-shadow: none !important;
+    width: 110px !important;
+    line-height: 10px;
+    padding-left: 0px !important;
+    padding-right: 0px !important;
+    color: #454d5b;
+    text-transform: none;
+    font-weight: 400;
+}
+
+.viewAllTasksBtn:hover {
+    border: 1px solid #b4b4b4;
+    background-color: #f9f8f8 !important;
+    color: #454d5b !important;
+}
+
+/* Header My Tasks */
+.headerMyTasks {
+    border-bottom: 1px solid #f1efee;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    padding-left: 20px;
+    padding-right: 20px;
+    padding-bottom: 20px;
+}
+
+.headerMyTasks div {
+    font-size: 20px;
+    color: #1E1F21;
+}
+
+/* Right Header My Tasks */
+.myTasksHeaderRight {
+    padding-top: 0px !important;
+    margin-top: -2px !important;
+}
+
+/* Right Side Container */
+.rightSideMainContainer {
+    /* border: 2px solid rgb(200, 84, 17); */
+    width: 30%;
+    margin-left: 2.5%;
+    /* padding-left: 20px; */
+    padding-bottom: 3px;
+}
+
+/* Right Side Containers */
+.aboutMeContainer {
+    border: 1px solid #f1efee;
+    padding-top: 25px;
+    padding-left: 25px;
+    padding-right: 25px;
+    margin-bottom: 20px;
+    padding-bottom: 20px;
+    margin-bottom: 25px;
+    background-color: #ffffff;
+    border-radius: 8px;
+}
+
+/* Out Side Container FCL */
+.outsideContainerFCL {
+    /* border: 3px solid rgb(30, 0, 255); */
+    overflow-y: auto;
+    height: 300px;
+    margin-bottom: 10px;
+}
+
+.frequentCollaborators {
+    border: 1px solid #f1efee;
+    border-radius: 8px !important;
+    /* padding: 25px; */
+    padding-bottom: 10px;
+    background-color: #ffffff !important;
+}
+
+.fcHeading {
+    margin-left: 25px;
+    padding-top: 25px;
+    /* border: 2px solid red; */
+}
+
+/* Heading About me */
+.aboutMeContainer h1 {
+    /* border: 3px solid rgb(0, 0, 255); */
+    font-size: 20px;
+    margin-bottom: 10px;
+    background-color: #ffffff !important;
+}
+
+.aboutMeContainer p {
+    /* border: 3px solid rgb(0, 0, 255); */
+    font-size: 14px;
+    margin-top: 22px;
+    line-height: 20px;
+    color: #6D6E6F;
+    font-weight: 400;
+    background-color: #ffffff !important;
+}
+
+.frequentCollaborators h1 {
+    /* border: 3px solid rgb(255, 0, 0); */
+    font-size: 20px;
+    margin-bottom: 25px;
+    background-color: #ffffff;
+}
+
+/* List Of frequentCollaborators */
+.frequentCollaboratorsList {
+    /* border: 3px solid rgb(255, 0, 0); */
+    background-color: #ffffff;
+    padding-bottom: 10px;
+    padding-top: 5px;
+    height: 70px;
+}
+
+.frequentCollaboratorsList:hover {
+    /* border: 3px solid rgb(6, 49, 8); */
+    background-color: #f9f8f8;
+    border-radius: 5px;
+    cursor: pointer;
+    /* display: flex;
+    flex-direction: row; */
+}
+
+.frequentCollaboratorsImageContainer {
+    /* border: 2px solid red; */
+    padding-left: 30px;
+}
+
+.frequentCollaboratorsImage {
+    border-radius: 50%;
+}
+
+.emailfcnc {
+    font-size: 14px;
+    line-height: 20px;
+    color: #1E1F21;
+    font-weight: 400;
+    padding-top: 18px;
+    margin-left: 15px;
+    background-color: inherit;
+}
+
+.emailfcnc:hover {
+    background-color: initial;
+}
+
+.bodymyTasksContainer {
+    /* border: 2px solid red; */
+    margin-top: 30px;
+    height: 420px;
+    overflow-y: auto;
+}
+
+/* My Tasks List  */
+.myTasksList {
+    border-bottom: 1px solid #f1efee;
+    padding-left: 20px;
+    padding-right: 20px;
+    background-color: #ffffff;
+    justify-content: space-between;
+    display: flex;
+}
+
+.myTasksList:hover {
+    background-color: #f9f8f8;
+    border-radius: 5px;
+    cursor: pointer;
+}
+
+.myTasksListLeft {
+    /* border: 2px solid rgb(0, 17, 255); */
+    display: flex;
+    flex-direction: row;
+    margin-top: 5px;
+    height: 30px;
+    margin-bottom: 5px;
+}
+
+.myTasksListRight {
+    padding-top: 5px;
+}
+
+.pnmyTask {
+    margin-left: 10px;
+}
+
+.taskCompleteIcon:hover {
+    color: green;
+    cursor: pointer;
+}
+
+/* My Tasks List  */
+
+/* //////////////////////////// MAIN PROFILE CONTAINER //////////////////////////// */
\ No newline at end of file
diff --git a/jsconfig.json b/jsconfig.json
new file mode 100644
index 0000000..a3f037b
--- /dev/null
+++ b/jsconfig.json
@@ -0,0 +1,9 @@
+{
+    "compilerOptions": {
+      "baseUrl": ".",
+      "paths": {
+        "@app/*": ["./*"]
+      }
+    }
+  }
+  
\ No newline at end of file
diff --git a/pages/_app.tsx b/pages/_app.tsx
index b7fdbe6..8223ffc 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -4,21 +4,18 @@ import { useRouter } from 'next/router';
 import type { AppProps } from 'next/app';
 import Script from 'next/script';
 //////////////////////////////////////////////////
-import Head from 'next/head';
 // Importing Components
 import Landing from '../components/Landing';
 import Navbar from '../components/Navbar';
 import Sidebar from '../components/Sidebar';
 import Home from '../components/Main/Home';
 import Inbox from '../components/Main/Inbox';
-import { ProfileComp } from './profile/[uuid]';
 import { ProjectDetailsComp } from './projectDetails/[projectName]/[projectID]';
 
 // Importing firebase
 import { db, auth } from "../firebase";
 import {
-  onAuthStateChanged,
-  signOut
+  onAuthStateChanged
 } from "firebase/auth";
 // Importing firebase
 
@@ -31,7 +28,7 @@ import 'react-date-picker/dist/DatePicker.css';
 import 'react-calendar/dist/Calendar.css';
 import '../styles/globals.css';
 
-function MyApp({ Component, pageProps }: AppProps) {
+function MyApp({ Component, pageProps }: AppProps & { Component: React.ComponentType<any> }) {
   const router = useRouter();
   const { uuid } = router.query;
 
@@ -88,120 +85,40 @@ function MyApp({ Component, pageProps }: AppProps) {
     });
   }, [signedInUserData, Loading]);
 
-  useEffect(() => {
-    console.clear();
-    console.log('routeChangeStart', router.pathname);
-    if (router.pathname === "/login" ||
-      router.pathname === "/signup" ||
-      router.pathname === "/forgot-password" ||
-      router.pathname === "/reset-password" ||
-      router.pathname === "/verify-email" ||
-      router.pathname === "/createProject" ||
-      router.pathname === "/features" ||
-      router.pathname === "/pricing" ||
-      router.pathname === "/about" ||
-      router.pathname === "/contact" ||
-      router.pathname === "/terms" ||
-      router.pathname === "/privacy"
-    ) {
-      setHideExtra(0);
-    }
-    else if (
-      router.pathname == `/profile/[uuid]`
-      || router.pathname === '/profile'
-      || router.pathname === '/projectDetails/[projectName]/[projectID]'
-      || router.pathname === '/projectDetails'
-    ) {
-      setHideExtra(2);
-    }
-    else {
-      setHideExtra(1);
-    }
-    setLoading(false);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [router.pathname]);
-
   return (
     <>
-      {(!loading) && (
+      {/* {(!loading) && (
         <section>
-          {(!isSignedIn && !loading && hideExtra !== 0) ? (
+          {(!isSignedIn && !loading) ? (
             <Landing />
           ) : (
-            <Box>
-              {
-                ((hideExtra == 1) && !loading) ? (
-                  <div className={styles.container}>
-                    <main className={styles.main}>
-                      <Navbar isOpen={isOpen} setIsOpen={setIsOpen} />
-                      <div className='d-flex'>
-                        <Sidebar currentMenuItem={currentMenuItem} setCurrentMenuItem={setCurrentMenuItem} isOpen={isOpen} setIsOpen={setIsOpen} />
-
-                        <div style={{ marginTop: 70 }} className={`${styles.rightSideContainer} ${(isOpen) ? (styles.shrinkContainer) : (styles.expandContainer)}`}>
-                          {/* Home Page */}
-                          <section className={(currentMenuItem === 1) ? ("") : ("d-none")}>
-                            <Home />
-                          </section>
-
-                          {/* My Tasks Page */}
-                          <section className={(currentMenuItem === 2) ? ("") : ("d-none")}>
-                            <br />
-                            <h3 style={{ marginLeft: 30, marginTop: 5, color: "black", fontWeight: "lighter" }}>My Tasks</h3>
-                          </section>
-
-                          {/* Inbox Page */}
-                          <section className={(currentMenuItem === 3) ? ("") : ("d-none")}>
-                            <Inbox
-                              email={signedInUserData.email}
-                            />
-                          </section>
-
-                          {/* Reporting Page */}
-                          <section className={(currentMenuItem === 4) ? ("") : ("d-none")}>
-                            <br />
-                            <h3 style={{ marginLeft: 30, marginTop: 5, color: "black", fontWeight: "lighter" }}>Reporting</h3>
-                          </section>
-
-                          {/* Portfolios Page */}
-                          <section className={(currentMenuItem === 5) ? ("") : ("d-none")}>
-                            <br />
-                            <h3 style={{ marginLeft: 30, marginTop: 5, color: "black", fontWeight: "lighter" }}>Portfolios</h3>
-                          </section>
-
-                          {/* Goals Page */}
-                          <section className={(currentMenuItem === 6) ? ("") : ("d-none")}>
-                            <br />
-                            <h3 style={{ marginLeft: 30, marginTop: 5, color: "black", fontWeight: "lighter" }}>Goals</h3>
-                          </section>
-                        </div>
-                      </div>
-                    </main>
-                  </div>
-                ) : (hideExtra == 2 && !loading) && (
-                  <div className={styles.container}>
-                    <main className={styles.main}>
-                      <Navbar isOpen={isOpen} setIsOpen={setIsOpen} />
-                      <div className='d-flex'>
-                        <Sidebar currentMenuItem={0} setCurrentMenuItem={setCurrentMenuItem} isOpen={isOpen} setIsOpen={setIsOpen} />
-
-                        <main style={{ marginTop: 70 }} className={`${styles.rightSideContainer} ${(isOpen) ? (styles.shrinkContainer) : (styles.expandContainer)}`}>
-                          {(router.pathname == `/profile/[uuid]` || router.pathname == '/profile') ? (
-                            <ProfileComp />
-                          ) : (router.pathname == '/projectDetails/[projectName]/[projectID]') ? (
-                            <ProjectDetailsComp />
-                          ) : (
-                            <></>
-                          )}
-                        </main>
-                      </div>
-                    </main>
-                  </div>
-                )}
-            </Box>
+            <Component
+              {...pageProps}
+
+              // Is Side Bar Open
+              isOpen={isOpen}
+              setIsOpen={setIsOpen}
+
+              // Current Menu Item
+              currentMenuItem={currentMenuItem}
+              setCurrentMenuItem={setCurrentMenuItem}
+            />
           )}
         </section>
-      )}
-      <Component {...pageProps} />
+      )} */}
+
+      <Component
+        {...pageProps}
+
+        // Is Side Bar Open
+        isOpen={isOpen}
+        setIsOpen={setIsOpen}
+
+        // Current Menu Item
+        currentMenuItem={currentMenuItem}
+        setCurrentMenuItem={setCurrentMenuItem}
+      />
+
       <Script
         type="text/javascript"
         src="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/3.5.0/mdb.min.js"
diff --git a/pages/dashboard/[uid].tsx b/pages/dashboard/[uid].tsx
new file mode 100644
index 0000000..50e416b
--- /dev/null
+++ b/pages/dashboard/[uid].tsx
@@ -0,0 +1,116 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { useRouter } from 'next/router';
+import type { NextPage } from 'next';
+import Head from 'next/head';
+
+// Importing Components
+import MainContent from '@app/components/Main/Home/MainContent';
+
+// Importing firebase
+import { auth } from "../../firebase";
+import {
+    onAuthStateChanged
+} from "firebase/auth";
+// Importing firebase
+
+import styles from '../../styles/Home.module.css';
+
+interface GlobalProps {
+    setIsOpen: (isOpen: boolean) => void;
+    isOpen: boolean;
+    currentMenuItem: number;
+    setCurrentMenuItem: (currentMenuItem: number) => void;
+}
+
+const Dashboard: NextPage<GlobalProps> = (
+    {
+        setIsOpen,
+        isOpen,
+        currentMenuItem,
+        setCurrentMenuItem
+    }
+) => {
+
+    const router = useRouter();
+    const { uid } = router.query;
+
+    // Hide splash screen when we are server side 
+    useEffect(() => {
+        if (typeof window !== 'undefined') {
+            const loader = document.getElementById('globalLoader');
+            if (loader)
+                loader.style.display = 'none';
+        }
+    }, []);
+
+    const [loading, setLoading] = useState<boolean>(true);
+
+    //_________________ For Getting SignedInUser Data _____________________
+    const [signedInUserData, setSignedInUserData] = useState<any>(null);
+    const [isSignedIn, setIsSignedIn] = useState<boolean>(false);
+    //_________________ For Getting SignedInUser Data _____________________
+
+    useEffect(() => {
+        onAuthStateChanged(auth, (user) => {
+            if (user) {
+                // User is signed in, see docs for a list of available properties
+                // https://firebase.google.com/docs/reference/js/firebase.User
+                if (signedInUserData === null) {
+                    setIsSignedIn(true);
+                    if (user.isAnonymous === true) {
+                        let tempUser = {
+                            displayName: "Anonymous",
+                            email: `anonymous${user.uid}@guest.com`,
+                            photoURL: user.photoURL
+                        }
+                        console.log(tempUser);
+                        setSignedInUserData(tempUser);
+                        setLoading(false);
+                    } else {
+                        console.log(user);
+                        setSignedInUserData(user);
+                        setLoading(false);
+                    }
+                    // ...
+                }
+            } else {
+                // User is signed out
+                console.log("User is signed out");
+                setLoading(false);
+                setSignedInUserData(null);
+                setIsSignedIn(false);
+                router.push("/");
+                // ...
+            }
+        });
+    }, [signedInUserData]);
+
+    // Store div in a variable
+
+    return (
+        <div className={styles.container}>
+            <Head>
+                <meta charSet="utf-8" />
+                <link rel="icon" href="/logocopy.ico" />
+                <meta name="description" content="A project management app built with Next JS, MUI,mdbootstrap and firebase" />
+                <meta name="author" content="Muhammad-Bilal-7896" />
+                <meta name="viewport" content="width=device-width, initial-scale=1" />
+                <meta name="theme-color" content="#000000" />
+                <title>
+                    {(loading) ? "TaskEncher: Supercharge Your Workflow and Amplify Task Management" : (isSignedIn) ? `${signedInUserData.displayName}'s Dashboard` : "TaskEncher: Supercharge Your Workflow and Amplify Task Management"}
+                </title>
+            </Head>
+
+            {(!loading && isSignedIn) && (
+                <MainContent
+                    setIsOpen={setIsOpen}
+                    isOpen={isOpen}
+                    currentMenuItem={currentMenuItem}
+                    setCurrentMenuItem={setCurrentMenuItem}
+                    signedInUserData={signedInUserData}
+                />
+            )}
+        </div>
+    )
+}
+export default Dashboard;
\ No newline at end of file
diff --git a/pages/index.tsx b/pages/index.tsx
index 0107e36..5babdf7 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,112 +1,31 @@
 import React, { useState, useEffect, useRef } from 'react';
+import { useRouter } from 'next/router';
 import type { NextPage } from 'next';
 import Head from 'next/head';
-import Image from 'next/image';
-import styles from '../styles/Home.module.css';
-// Importing Components
-import Navbar from '../components/Navbar';
-import Sidebar from '../components/Sidebar';
-// Importing Icons
-import { IoIosArrowDropdown } from 'react-icons/io';
-import { AiOutlineCheck } from "react-icons/ai";
-import { BsPeople } from "react-icons/bs";
-// Importing Widgets
-import Widget1 from '../components/Widgets/Widget1';
-import Widget2 from '../components/Widgets/Widget2';
-import Widget3 from '../components/Widgets/Widget3';
-import Widget4 from '../components/Widgets/Widget4';
-import Widget5 from '../components/Widgets/Widget5';
-import Widget6 from '../components/Widgets/Widget6';
-
-const Home: NextPage = () => {
-  const [isOpen, setIsOpen] = useState<Boolean>(true);
 
-  const [currentMenuItem, setCurrentMenuItem] = useState<Number>(1);
+// Importing Components
+import Landing from '@app/components/Landing';
 
-  const [currentFullLengthItem, setCurrentFullLengthItem] = useState<Number>(1);
+// Importing Material UI Components
+import {
+  Box
+} from '@mui/material';
 
-  // eslint-disable-next-line react-hooks/rules-of-hooks
-  const dragItem = useRef<any>();
+import styles from '../styles/Home.module.css';
 
-  // eslint-disable-next-line react-hooks/rules-of-hooks
-  const dragOverItem = useRef<any>();
+const HomePage: NextPage = () => {
+  const router = useRouter();
 
-  // eslint-disable-next-line react-hooks/rules-of-hooks
-  const [list, setList] = useState([
-    {
-      id: 1,
-      src: <audio id='hoverSoundClip'>
-        <source src="audio/1.mp3" />
-        Your browser is not invited for super fun audio time.
-      </audio>,
-      name: "Projects",
-    },
-    {
-      id: 2,
-      src: <audio id='hoverSoundClip'>
-        <source src="audio/2.mp3" />
-        Your browser is not invited for super fun audio time.
-      </audio>,
-      name: "My Priorities",
-    },
-    {
-      id: 3,
-      src: <audio id='hoverSoundClip'>
-        <source src="audio/3.mp3" />
-        Your browser is not invited for super fun audio time.
-      </audio>,
-      name: "People",
-    },
-    {
-      id: 4,
-      src: <audio id='hoverSoundClip'>
-        <source src="audio/4.mp3" />
-        Your browser is not invited for super fun audio time.
-      </audio>,
-      name: "Tasks I've Assigned",
-    },
-    {
-      id: 5,
-      src: <audio id='hoverSoundClip'>
-        <source src="audio/5.mp3" />
-        Your browser is not invited for super fun audio time.
-      </audio>,
-      name: "My goals",
-    },
-    {
-      id: 6,
-      src: <audio id='hoverSoundClip'>
-        <source src="audio/6.mp3" />
-        Your browser is not invited for super fun audio time.
-      </audio>,
-      name: "Manager Tasks",
+  // Hide splash screen when we are server side 
+  useEffect(() => {
+    if (typeof window !== 'undefined') {
+      const loader = document.getElementById('globalLoader');
+      if (loader)
+        loader.style.display = 'none';
     }
-  ]);
-
-  const [currentAudio, setCurrentAudio] = useState<any>(list[5].src);
+  }, []);
 
-  // on Pointer Down
-  const [pointerDown, setPointerDown] = useState<Boolean>(false);
-
-  const dragStart = (e: any, position: any) => {
-    dragItem.current = position;
-    console.log(e.target.innerHTML);
-  };
-
-  const dragEnter = (e: any, position: any) => {
-    dragOverItem.current = position;
-    console.log(e.target.innerHTML);
-  };
-
-  const drop = (e: any) => {
-    const copyListItems = [...list];
-    const dragItemContent = copyListItems[dragItem.current];
-    copyListItems.splice(dragItem.current, 1);
-    copyListItems.splice(dragOverItem.current, 0, dragItemContent);
-    dragItem.current = null;
-    dragOverItem.current = null;
-    setList(copyListItems);
-  };
+  // Store div in a variable
 
   return (
     <div className={styles.container}>
@@ -120,26 +39,8 @@ const Home: NextPage = () => {
         <title> TaskEncher: Supercharge Your Workflow and Amplify Task Management</title>
       </Head>
 
-      <main className={styles.main}>
-
-        <div className='d-flex'>
-
-        </div>
-      </main>
-
-      <footer className={styles.footer}>
-        {/* <a
-          href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Powered by{' '}
-          <span className={styles.logo}>
-            <Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
-          </span>
-        </a> */}
-      </footer>
+      <Landing />
     </div>
   )
 }
-export default Home;
+export default HomePage;
diff --git a/pages/login.tsx b/pages/login.tsx
index 2132b42..7b62413 100644
--- a/pages/login.tsx
+++ b/pages/login.tsx
@@ -76,8 +76,19 @@ const Login: NextPage = () => {
                 // When the user state is known, we set the state isSignedIn to true
                 if (signedInUserData === null) {
                     // window.location.href = "/";
-                    router.push("/");
-                    setSignedInUserData(user);
+                    if (user.isAnonymous === true) {
+                        let tempUser = {
+                            displayName: "Anonymous Guest",
+                            email: "anonymous@guest.com",
+                            photoURL: user.photoURL,
+                        }
+                        console.log(tempUser);
+                        setSignedInUserData(tempUser);
+                    } else {
+                        console.log(user);
+                        setSignedInUserData(user);
+                    }
+                    router.push(`/dashboard/${user.uid}`);
                     console.log("Signed In User Data ==> ", user);
                     setIsSignedIn(true);
                 }
diff --git a/pages/profile/[uuid].tsx b/pages/profile/[uuid].tsx
index ce7df4f..0f3e565 100644
--- a/pages/profile/[uuid].tsx
+++ b/pages/profile/[uuid].tsx
@@ -3,90 +3,42 @@ import { useRouter } from 'next/router';
 import type { NextPage } from 'next';
 import Image from 'next/image';
 import Head from 'next/head';
-import styles from './style.module.css';
-
-// Importing Icons
-import { CiTimer } from "react-icons/ci";
-import { AiOutlineMail } from "react-icons/ai";
-import { BsCheckCircle } from "react-icons/bs";
-
-import DatePicker from 'react-date-picker/dist/entry.nostyle';
 
+// Importing Material UI Components
 import {
-    doc,
-    collection,
-    onSnapshot,
-    addDoc,
-    query,
-    orderBy,
-    deleteDoc,
-    setDoc,
-    where
-} from "firebase/firestore";
-import { useCollection } from 'react-firebase-hooks/firestore';
+    Box
+} from '@mui/material';
 
 import {
     onAuthStateChanged,
 } from "firebase/auth";
 
-import { useAuthState } from 'react-firebase-hooks/auth';
 import { db, auth } from "../../firebase";
-import CustomLoader from '../../components/CustomLoader';
 
-const currentDate = new Date();
-
-const Profile: NextPage = () => {
-    return (
-        <div>
-            <Head>
-                <title>Profile - TaskEncher</title>
-                <meta name="description" content="Project Management Software" />
-                <link rel="icon" href="/logocopy.ico" />
-            </Head>
-        </div>
-    )
-}
+// Importing Components
+import ProfileComp from '@app/components/Pages/Profile/ProfileComp';
+import Navbar from '@app/components/Navbar';
+import Sidebar from '@app/components/Sidebar';
 
-const ProfileComp = () => {
-
-    const [taskDue, setTaskDue] = useState<any>(currentDate);
-
-    const frequentCollaboratorsList = [
-        {
-            name: "Bilal Mohib",
-            email: "bilalmohib7896@gmail.com",
-            photoURL: null
-        },
-        {
-            name: "Arif Alvi",
-            email: "arifalvi@gmail.com",
-            photoURL: null
-        },
-        {
-            name: "Imran Khan",
-            email: "imrankhan@gmail.com",
-            photoURL: null
-        },
-        {
-            name: "Nawaz Sharif",
-            email: "nawazsharif@gmail.com",
-            photoURL: null
-        },
-        {
-            name: "Asif Ali Zardari",
-            email: "asifalizardari@gmail.com",
-            photoURL: null
-        }
-    ]
-
-    const router = useRouter();
+import styles from './style.module.css';
 
-    const { uuid } = router.query;
+interface GlobalProps {
+    setIsOpen: (isOpen: boolean) => void;
+    isOpen: boolean;
+    currentMenuItem: number;
+    setCurrentMenuItem: (currentMenuItem: number) => void;
+}
 
-    const [firestoreData, setFirestoreData] = useState<any>([]);
-    const [status, setStatus] = useState<Boolean>(false);
+const Profile: NextPage<GlobalProps> = (
+    {
+        setIsOpen,
+        isOpen,
+        currentMenuItem,
+        setCurrentMenuItem
+    }
+) => {
     const [signedInUserData, setSignedInUserData] = useState<any>(null);
-    const [isSignedIn, setIsSignedIn] = useState<Boolean>(false);
+    const [isSignedIn, setIsSignedIn] = useState<boolean>(false);
 
     useEffect(() => {
 
@@ -103,7 +55,7 @@ const ProfileComp = () => {
                             displayName: "Anonymous",
                             email: `anonymous${user.uid}@guest.com`,
                             photoURL: user.photoURL,
-                          }
+                        }
                         console.log(tempUser);
                         setSignedInUserData(tempUser);
                         setIsSignedIn(true);
@@ -124,211 +76,36 @@ const ProfileComp = () => {
         });
     }, [signedInUserData, isSignedIn]);
 
-    /////////////////////////////////////// Database Part ////////////////////////////////////////////////
-    let q = query(collection(db, "Data", "Projects", `${uuid}`));
-
-    const [snapshot, loading, error] = useCollection(
-        q,
-        {
-            snapshotListenOptions: { includeMetadataChanges: true },
-        }
-    );
-
-    // GETTINGS Active Jobs
-    const [projects, setProjects] = useState<any>([])
-    // const [loading, setLoading] = useState(true); 
-
-    // FOR GETTING PROJECTS
-    useEffect(() => {
-
-        if (!loading) {
-            // if (snapshot.docs.length !== projects.length) {
-            setProjects(snapshot?.docs.map(doc => ({ ...doc.data(), id: doc.id })));
-            // setLoading(false);
-            // console.clear();
-            console.log("Projects ==> ", projects);
-            // }
-        }
-
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [loading, snapshot]);
-    // FOR GETTING PROJECTS
-
-    // useEffect(() => {
-    //     if (projects.length !== 0) {
-    //         setTaskDue(projects.map((project: any) => project.taskDue));
-
-    /////////////////////////////////////// Database Part ////////////////////////////////////////////////
-
     return (
         <div className={styles.container}>
-            {(isSignedIn && !loading) ? (
-                <div>
-                    <div className={styles.profileContainerTop}>
-                        <div className='d-flex'>
-                            <div className={styles.profileImageContainer}>
-                                <Image
-                                    className={styles.profileImage}
-                                    width={120}
-                                    height={120}
-                                    src={signedInUserData.photoURL}
-                                    alt={signedInUserData.displayName}
-                                    title={signedInUserData.displayName}
-                                    loading='eager'
-                                />
-                            </div>
-                            <div className={styles.profileRightContainer}>
-                                <h4 className={styles.profileName}>{signedInUserData.displayName}</h4>
-                                <p className={styles.profileInfoContainer}>
-                                    <p>
-                                        <CiTimer />
-                                        {/* 10:19am  */}
-                                        &nbsp;
-                                        {new Date().toLocaleTimeString()}
-                                        &nbsp;
-                                        local time
-                                    </p>
-                                    <p style={{ marginLeft: 10 }}><AiOutlineMail />  <span className={styles.email}>bilalmohib20001@gmail.com</span></p>
-                                </p>
-                            </div>
-                        </div>
-                        <div>
-                            <button
-                                className={`btn btn-primary ${styles.signOutBtn}`}
-                                onClick={() => {
-                                    auth.signOut();
-                                    router.push("/login");
-                                }}>
-                                Sign Out
-                            </button>
-                        </div>
-                    </div>
-
-                    {/* Main Profile Container */}
-                    <div className={styles.profileContainerMain}>
-                        <div className={styles.myTasksMainContainer}>
-                            <div>
-                                <header className={styles.headerMyTasks}>
-                                    <div>
-                                        My tasks
-                                    </div>
-                                    <div className={styles.myTasksHeaderRight}>
-                                        <button className={`btn ${styles.viewAllTasksBtn}`} onClick={() => {
-                                            alert("View all tasks");
-                                        }}>View all tasks</button>
-                                    </div>
-                                </header>
-                                <section className={styles.bodymyTasksContainer}>
-                                    {
-                                        projects.map((item: any, index: any) => {
-                                            return (
-                                                <div key={index} className={styles.myTasksList}>
-                                                    <div className={styles.myTasksListLeft}>
-                                                        <p className={styles.taskCompleteIcon} onClick={() => alert("Mark As Completed")}><BsCheckCircle /></p>
-                                                        <p className={styles.pnmyTask}>{item.ProjectName}</p>
-                                                    </div>
-                                                    <div className={styles.myTasksListRight}>
-                                                        <DatePicker
-                                                            onChange={setTaskDue}
-                                                            value={new Date(item.ProjectEndingDate)}
-                                                        />
-                                                    </div>
-                                                </div>
-                                            )
-                                        })
-                                    }
-                                </section>
-                            </div>
-                        </div>
-
-                        <div className={styles.rightSideMainContainer}>
-                            <div className={styles.aboutMeContainer}>
-                                <h1>About me</h1>
-                                <p>Use this space to tell people about yourself.</p>
-                            </div>
-                            <div className={styles.frequentCollaborators}>
-                                <h1 className={styles.fcHeading}>Frequent collaborators</h1>
-                                <div className={styles.outsideContainerFCL}>
-                                    {
-                                        frequentCollaboratorsList.map((item, index) => {
-                                            return (
-                                                <div key={index} className={styles.frequentCollaboratorsList}>
-                                                    <div className={`${styles.lifcl} d-flex`}>
-                                                        <div className={styles.frequentCollaboratorsImageContainer}>
-                                                            <Image
-                                                                className={styles.frequentCollaboratorsImage}
-                                                                width={48}
-                                                                height={48}
-                                                                src={(item.photoURL !== null)
-                                                                    ? item.photoURL
-                                                                    : "http://localhost:3000/_next/image?url=https%3A%2F%2Flh3.googleusercontent.com%2Fa%2FAEdFTp7zFuG2WiiEzzreDfzI4170bnvEDdD_l1Hlly7K%3Ds96-c&w=256&q=75"
-                                                                }
-                                                                alt={item.name}
-                                                                title={item.name}
-                                                            />
-                                                        </div>
-                                                        <div className={styles.frequentCollaboratorsNameContainer}>
-                                                            <p className={styles.emailfcnc}>{item.email}</p>
-                                                        </div>
-                                                    </div>
-                                                </div>
-                                            )
-                                        })
-                                    }
-                                </div>
-                                {/* <br /> */}
-                            </div>
-                        </div>
-                    </div>
-
+            <Head>
+                <meta charSet="utf-8" />
+                <link rel="icon" href="/logocopy.ico" />
+                <meta name="description" content="A project management app built with Next JS, MUI,mdbootstrap and firebase" />
+                <meta name="author" content="Muhammad-Bilal-7896" />
+                <meta name="viewport" content="width=device-width, initial-scale=1" />
+                <meta name="theme-color" content="#000000" />
+                <title> Profile - TaskEncher</title>
+            </Head>
 
-                    {/* MAIN Profile Container */}
-                    <div className={styles.profileContainerMain}>
-                        <div className={styles.myTasksMainContainer}>
-                            <div>
-                                <header className={styles.headerMyTasks}>
-                                    <div>
-                                        My recent projects
-                                    </div>
-                                </header>
-                                <section className={styles.bodymyTasksContainer}>
-                                    {
-                                        projects.map((item: any, index: any) => {
-                                            return (
-                                                <div key={index} className={styles.myTasksList}>
-                                                    <div className={styles.myTasksListLeft}>
-                                                        <p className={styles.taskCompleteIcon} onClick={() => alert("Mark As Completed")}><BsCheckCircle /></p>
-                                                        <p className={styles.pnmyTask}>{item.ProjectName}</p>
-                                                    </div>
-                                                    <div className={styles.myTasksListRight}>
-                                                        <DatePicker
-                                                            onChange={setTaskDue}
-                                                            value={new Date(item.ProjectEndingDate)}
-                                                        />
-                                                    </div>
-                                                </div>
-                                            )
-                                        })
-                                    }
-                                </section>
-                            </div>
-                        </div>
+            {(signedInUserData !== null) && (
+                <>
+                    <main className={styles.main}>
+                        <Navbar isOpen={isOpen} setIsOpen={setIsOpen} />
+                        <div className='d-flex'>
+                            <Sidebar currentMenuItem={0} setCurrentMenuItem={setCurrentMenuItem} isOpen={isOpen} setIsOpen={setIsOpen} />
 
-                        <div className={styles.rightSideMainContainer}>
-                            {/*  */}
+                            <main style={{ marginTop: 70 }} className={`${styles.rightSideContainer} ${(isOpen) ? (styles.shrinkContainer) : (styles.expandContainer)}`}>
+                                <ProfileComp
+                                    isSignedIn={isSignedIn}
+                                    signedInUserData={signedInUserData}
+                                />
+                            </main>
                         </div>
-                    </div>
-                    <br /><br />
-                    {/* MAIN Profile Container */}
-                </div>
-            ) : (
-                <CustomLoader />
+                    </main>
+                </>
             )}
         </div>
     )
 }
-
-export {
-    Profile as default,
-    ProfileComp
-}
+export default Profile;
diff --git a/pages/profile/style.module.css b/pages/profile/style.module.css
index a29b2e5..fa581b9 100644
--- a/pages/profile/style.module.css
+++ b/pages/profile/style.module.css
@@ -7,302 +7,8 @@
     padding-top: 33px;
 }
 
-/* Top Profile Container */
-.profileContainerTop {
-    /* border: 3px solid green; */
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-between;
-}
-
-/* Left Side Profile Image Container */
-.profileImageContainer {
-    /* border: 1px solid red; */
-    width: fit-content;
-}
-
-/* Profile Image Style */
-.profileImage {
-    /* border: 2px solid red; */
-    border-radius: 50%;
-    /* Make Image quality best  */
-    image-rendering: optimizeQuality;
-    /* Make Image quality best  */
-}
-
-/* Right Side Profile Container */
-.profileRightContainer {
-    /* border: 2px solid grey; */
-    padding-left: 30px;
-}
-
-/* Profile Display Name */
-.profileName {
-    font-size: 32px;
-    line-height: 40px;
-    color: #1e1f21;
-    font-weight: 400;
-    margin-top: 30px;
-}
-
-/* Profile Info Container */
-.profileInfoContainer {
-    /* border: 2px solid grey; */
-    display: flex;
-    margin-top: 10px;
-}
-
-.profileInfoContainer p {
-    font-size: 14px;
-    line-height: 20px;
-    color: #6D6E6F;
-    font-weight: 400;
-    margin-right: 10px;
-}
-
-.email:hover {
-    text-decoration: underline;
-    cursor: pointer;
-}
-
-/* Sign Out Button */
-.signOutBtn {
-    border: 1px solid #0c56d0;
-    background-color: #f9f8f8;
-    padding: 10px 20px;
-    border-radius: 5px;
-    font-size: 14px;
-    line-height: 20px;
-    color: #0c56d0;
-    text-transform: none;
-    font-weight: 400;
-    margin-top: 10px;
-}
-
-/* Main Profile Container */
-.profileContainerMain {
-    /* border: 2px solid grey; */
-    display: flex;
-    flex-direction: row;
-    margin-top: 30px;
-}
-
-/* //////////////////////////// MAIN PROFILE CONTAINER //////////////////////////// */
-.profileContainerMain {
-    /* border: 2px solid rgb(255, 0, 0); */
-    display: flex;
-    flex-direction: row;
-    margin-top: 30px;
-}
-
-/* my Tasks Container */
-.myTasksMainContainer {
-    border: 1px solid #f1efee;
-    background-color: white;
-    width: 70%;
-    border-radius: 8px;
-    padding-top: 20px;
-}
-
-.viewAllTasksBtn {
-    border: 1px solid #cfcbcb;
+.main {
+    width: auto;
+    height: auto;
     background-color: white;
-    border-radius: 5px;
-    font-size: 12px;
-    box-shadow: none !important;
-    width: 110px !important;
-    line-height: 10px;
-    padding-left: 0px !important;
-    padding-right: 0px !important;
-    color: #454d5b;
-    text-transform: none;
-    font-weight: 400;
-}
-
-.viewAllTasksBtn:hover {
-    border: 1px solid #b4b4b4;
-    background-color: #f9f8f8 !important;
-    color: #454d5b !important;
-}
-
-/* Header My Tasks */
-.headerMyTasks {
-    border-bottom: 1px solid #f1efee;
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    padding-left: 20px;
-    padding-right: 20px;
-    padding-bottom: 20px;
-}
-
-.headerMyTasks div {
-    font-size: 20px;
-    color: #1E1F21;
-}
-
-/* Right Header My Tasks */
-.myTasksHeaderRight {
-    padding-top: 0px !important;
-    margin-top: -2px !important;
-}
-
-/* Right Side Container */
-.rightSideMainContainer {
-    /* border: 2px solid rgb(200, 84, 17); */
-    width: 30%;
-    margin-left: 2.5%;
-    /* padding-left: 20px; */
-    padding-bottom: 3px;
-}
-
-/* Right Side Containers */
-.aboutMeContainer {
-    border: 1px solid #f1efee;
-    padding-top: 25px;
-    padding-left: 25px;
-    padding-right: 25px;
-    margin-bottom: 20px;
-    padding-bottom: 20px;
-    margin-bottom: 25px;
-    background-color: #ffffff;
-    border-radius: 8px;
-}
-
-/* Out Side Container FCL */
-.outsideContainerFCL {
-    /* border: 3px solid rgb(30, 0, 255); */
-    overflow-y: auto;
-    height: 300px;
-    margin-bottom: 10px;
 }
-
-.frequentCollaborators {
-    border: 1px solid #f1efee;
-    border-radius: 8px !important;
-    /* padding: 25px; */
-    padding-bottom: 10px;
-    background-color: #ffffff !important;
-}
-
-.fcHeading {
-    margin-left: 25px;
-    padding-top: 25px;
-    /* border: 2px solid red; */
-}
-
-/* Heading About me */
-.aboutMeContainer h1 {
-    /* border: 3px solid rgb(0, 0, 255); */
-    font-size: 20px;
-    margin-bottom: 10px;
-    background-color: #ffffff !important;
-}
-
-.aboutMeContainer p {
-    /* border: 3px solid rgb(0, 0, 255); */
-    font-size: 14px;
-    margin-top: 22px;
-    line-height: 20px;
-    color: #6D6E6F;
-    font-weight: 400;
-    background-color: #ffffff !important;
-}
-
-.frequentCollaborators h1 {
-    /* border: 3px solid rgb(255, 0, 0); */
-    font-size: 20px;
-    margin-bottom: 25px;
-    background-color: #ffffff;
-}
-
-/* List Of frequentCollaborators */
-.frequentCollaboratorsList {
-    /* border: 3px solid rgb(255, 0, 0); */
-    background-color: #ffffff;
-    padding-bottom: 10px;
-    padding-top: 5px;
-    height: 70px;
-}
-
-.frequentCollaboratorsList:hover {
-    /* border: 3px solid rgb(6, 49, 8); */
-    background-color: #f9f8f8;
-    border-radius: 5px;
-    cursor: pointer;
-    /* display: flex;
-    flex-direction: row; */
-}
-
-.frequentCollaboratorsImageContainer {
-    /* border: 2px solid red; */
-    padding-left: 30px;
-}
-
-.frequentCollaboratorsImage {
-    border-radius: 50%;
-}
-
-.emailfcnc {
-    font-size: 14px;
-    line-height: 20px;
-    color: #1E1F21;
-    font-weight: 400;
-    padding-top: 18px;
-    margin-left: 15px;
-    background-color: inherit;
-}
-
-.emailfcnc:hover {
-    background-color: initial;
-}
-
-.bodymyTasksContainer {
-    /* border: 2px solid red; */
-    margin-top: 30px;
-    height: 420px;
-    overflow-y: auto;
-}
-
-/* My Tasks List  */
-.myTasksList {
-    border-bottom: 1px solid #f1efee;
-    padding-left: 20px;
-    padding-right: 20px;
-    background-color: #ffffff;
-    justify-content: space-between;
-    display: flex;
-}
-
-.myTasksList:hover {
-    background-color: #f9f8f8;
-    border-radius: 5px;
-    cursor: pointer;
-}
-
-.myTasksListLeft {
-    /* border: 2px solid rgb(0, 17, 255); */
-    display: flex;
-    flex-direction: row;
-    margin-top: 5px;
-    height: 30px;
-    margin-bottom: 5px;
-}
-
-.myTasksListRight {
-    padding-top: 5px;
-}
-
-.pnmyTask {
-    margin-left: 10px;
-}
-
-.taskCompleteIcon:hover {
-    color: green;
-    cursor: pointer;
-}
-
-/* My Tasks List  */
-
-/* //////////////////////////// MAIN PROFILE CONTAINER //////////////////////////// */
\ No newline at end of file
diff --git a/tsconfig.json b/tsconfig.json
index 99710e8..74981c8 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -13,7 +13,11 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "jsx": "preserve",
-    "incremental": true
+    "incremental": true,
+    "baseUrl": ".",
+    "paths": {
+      "@app/*": ["./*"]
+    }
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
   "exclude": ["node_modules"]