Improved routing and rendering of components

app/(pages)/dashboard/page.tsx

@@ -61,37 +61,37 @@ const Page = () => {
     return (
       <>
         <div className='grid grid-cols-2 md:grid-cols-3 gap-4'>
-          <Item title="Total Collectibles" className='my-6' icon={CollectMoneyIcon as HTMLImageElement}>
+          <Item title="Total Collectibles" className='my-3' icon={CollectMoneyIcon as HTMLImageElement}>
             <span className='text-green-700 dark:text-green-500 font-bold'>
               {formatNumber(data.overall_lot.collectibles)}
             </span>
           </Item>
-          <Item title="Total Receivables" className='my-6' icon={ReceiveMoneyIcon as HTMLImageElement}>
+          <Item title="Total Receivables" className='my-3' icon={ReceiveMoneyIcon as HTMLImageElement}>
             <span className='text-red-700 dark:text-red-500 font-bold '>
               {formatNumber(data.overall_lot.receivables)}
             </span>
           </Item>
-          <Item title="Units" className='my-6' icon={AvailableUnitIcon as HTMLImageElement}>
+          <Item title="Units" className='my-3' icon={AvailableUnitIcon as HTMLImageElement}>
             <span className='text-slate-500 font-bold dark:text-white'>
               {formatNumber(data.available_units, 0, '')}
             </span>
           </Item>
-          <Item title="Total Client" className='my-6' icon={TotalClientIcon as HTMLImageElement}>
+          <Item title="Total Client" className='my-3' icon={TotalClientIcon as HTMLImageElement}>
             <span className='text-slate-500 font-bold dark:text-white'>
               {formatNumber(data.client_count, 0, '')}
             </span>
           </Item>
-          <Item title="Total Agent" className='my-6' icon={TotalAgentIcon as HTMLImageElement}>
+          <Item title="Total Agent" className='my-3' icon={TotalAgentIcon as HTMLImageElement}>
             <span className='text-slate-500 font-bold dark:text-white'>
               {formatNumber(data.agent_count, 0, '')}
             </span>
           </Item>
-          <Item title="Top Agent" className='my-6' icon={TopAgentIcon as HTMLImageElement}>
+          <Item title="Top Agent" className='my-3' icon={TopAgentIcon as HTMLImageElement}>
             <span className='text-slate-500 font-bold dark:text-white'>
               {data.top_agent[0].agent_name}
             </span>
           </Item>
-          <Item title="Top Agent Collectibles" className='my-6'  icon={TopAgentCollectible as HTMLImageElement}>
+          <Item title="Top Agent Collectibles" className='my-3'  icon={TopAgentCollectible as HTMLImageElement}>
           <span className='text-orange-700 dark:text-orange-500 font-bold'>
               {formatNumber(data.top_agent[0].collectibles)}
             </span>

app/components/PageWrapper/MainWrapper.tsx

@@ -7,7 +7,7 @@ import Image from "next/image"
 import { HomeModernIcon, CreditCardIcon, UserGroupIcon, UsersIcon, BuildingOffice2Icon } from '@heroicons/react/24/solid'
 
 import NRLogo from "@/public/nr.png"
-import { useRouter } from 'next/navigation'
+import { useRouter, usePathname } from 'next/navigation'
 
 type MainWrapperProps = {
   children: React.ReactNode
@@ -17,20 +17,26 @@ type SideLinkProps = { title: string, Icon: React.ReactNode, url: string }
 
 const MainWrapper = ({ children }: MainWrapperProps) => {
   const router = useRouter()
+  const pathname = usePathname()
   const [links, setLinks] = useState<SideLinkProps[]>([]);
 
+
   const SideLink = ({ title, Icon, url }: SideLinkProps) => {
-    const isCurrentPath = String(window.location.pathname).includes(url)
     return (<div
+      key={url}
       className={`flex flex-row gap-2 mb-4 hover:text-slate-400 
-        ${isCurrentPath ? ' text-green-600 dark:text-green-500' : 'text-slate-700 dark:text-slate-200'}`}
+        ${isCurrentPath(url) ? ' text-green-600 dark:text-green-500' : 'text-slate-700 dark:text-slate-200'}`}
       role="button"
       onClick={() => { router.replace(url) }}>
       {Icon}
       <div className="font-bold hidden md:block">{title}</div>
     </div>)
   }
 
+  const isCurrentPath = (url: string) => {
+    return String(window.location.pathname).includes(url)
+  }
+
   useEffect(() => {
     const links = [
       {
@@ -59,41 +65,64 @@ const MainWrapper = ({ children }: MainWrapperProps) => {
         Icon: <BuildingOffice2Icon className="h-6 w-6" />
       },
     ]
-
     setLinks(links)
+  }, [pathname])
+
+  const getPageTitle = (path: string) => {
+    switch (path) {
+      case '/dashboard':
+        return 'Dashboard'
+      case '/payments':
+        return 'Payments'
+      case '/clients':
+        return 'Clients'
+      case '/agents':
+        return 'Agents'
+      case '/branches':
+        return 'Branches'
+      default:
+        return 'Menu'
+    }
+  }
 
-  }, [])
-
-
-  return (
-    <>
-      <div className=" flex lg:items-center pt-12 lg:pt-0 justify-center h-[100%] lg:h-[100vh]">
-        <div className="flex flex-row flex-wrap justify-center w-full gap-4 mx-4">
-          <div className="basis-full lg:basis-1/5 py-5">
-            <Card>
-              <div className='flex items-center gap-2' >
-                <Image className="object-cover w-[50px] h-[50px] opacity-90" src={NRLogo} alt="" />
-                <div className="font-bold text-xl dark:text-white"> NR Realty</div>
-              </div>
-              <div className="border-b border-slate-400 mb-5 mt-3 opacity-30"></div>
-              <div className="flex flex-row lg:flex-col justify-between">
-                {links?.length > 0 && links.map((data: SideLinkProps) =>
-                  <SideLink title={data.title} url={data.url} Icon={data.Icon} />
-                )}
-              </div>
-              <div className="border-b border-slate-400 mb-5 mt-3 opacity-30"></div>
-              <Logout />
-            </Card>
-          </div>
-          <div className="basis-full lg:basis-3/4 xl:basis-2/4 overflow-hidden py-5">
-            <Card>
-              {children}
-            </Card>
-          </div>
+  const isOutsideLink = () => {
+    const listOfPathnames = ["/login", "/"];
+    return listOfPathnames.indexOf(pathname) != -1
+  }
+
+
+  return isOutsideLink() ? children :
+    <div className=" flex lg:items-center pt-12 lg:pt-0 justify-center h-[100%] lg:h-[100vh]">
+      <div className="flex flex-row flex-wrap justify-center w-full gap-4 mx-4">
+        <div className="basis-full lg:basis-1/5 py-5">
+          <Card>
+            <div className='flex items-center gap-2' >
+              <Image className="object-cover w-[50px] h-[50px] opacity-90" src={NRLogo} alt="" />
+              <div className="font-bold text-xl dark:text-white"> NR Realty</div>
+            </div>
+            <div className="border-b border-slate-400 mb-5 mt-3 opacity-30"></div>
+            <div className="flex flex-row lg:flex-col justify-between">
+              {links?.length > 0 && links.map((data: SideLinkProps) =>
+                <SideLink key={data.url} title={data.title} url={data.url} Icon={data.Icon} />
+              )}
+            </div>
+            <div className="border-b border-slate-400 mb-5 mt-3 opacity-30"></div>
+            <Logout />
+          </Card>
+        </div>
+        <div className="basis-full lg:basis-3/4 xl:basis-2/4 overflow-hidden py-5">
+          <Card>
+            <div className='flex items-center gap-2' >
+              <div className="font-bold text-xl dark:text-white mt-3 pb-3">{getPageTitle(pathname)}</div>
+            </div>
+            <div className="border-b border-slate-400 mb-5 mt-3 opacity-30"></div>
+            {children}
+          </Card>
         </div>
       </div>
-    </>
-  )
+    </div>
 }
 
+
+
 export default MainWrapper

app/components/PageWrapper/PageWrapper.tsx

@@ -1,15 +1,18 @@
-'use client'
+
 import React from 'react'
 import ToggleTheme from "@/app/components/ToggleTheme/ToggleTheme";
 import Auth from "@/app/components/Auth/Auth";
+import MainWrapper from './MainWrapper';
 
 const page = ({ children }: { children: React.ReactNode }) => {
   return (
     <div className='relative h-[100vh] overflow-y-scroll'>
       <div className="bg-land dark:bg-dark-land bg-cover bg-fixed text-slate-800 min-h-[100%]">
-        <Auth>
-          {children}
-        </Auth>
+        <MainWrapper>
+          <Auth>
+            {children}
+          </Auth>
+        </MainWrapper>
         <div className="mt-[10px] lg:mt-[-26px] w-full">
           <div className="flex items-center text-center text-[12px] justify-center text-white font-bold pb-2">
             Powered By NextJS, TypeScript, Tailwind and Redux.