From 858c2064e192742cd6d5ef6b596bc899810b55aa Mon Sep 17 00:00:00 2001
From: Mary <101870828+Chioma227@users.noreply.github.com>
Date: Fri, 23 Aug 2024 19:14:02 +0100
Subject: [PATCH 01/29] fix: fix privacy policy and terms of use footer links

---
 src/components/layouts/footer/index.tsx | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/components/layouts/footer/index.tsx b/src/components/layouts/footer/index.tsx
index 0e4eadca9..ac586c8ee 100644
--- a/src/components/layouts/footer/index.tsx
+++ b/src/components/layouts/footer/index.tsx
@@ -151,12 +151,10 @@ const Footer = () => {
   ];
 
   const footerBottom = [
-    { route: "privacyPolicy", link: "/" },
-    { route: "termsOfUse", link: "/" },
+    { route: "privacyPolicy", link: "/privacy-policy" },
+    { route: "termsOfUse", link: "/terms-and-conditions" },
   ];
 
-  //
-
   return (
     <footer className="bg-background dark:bg-default">
       <div className="px-4">

From 72b61d22472aa3e4643356eb956899c7cf242208 Mon Sep 17 00:00:00 2001
From: Mary <101870828+Chioma227@users.noreply.github.com>
Date: Fri, 23 Aug 2024 21:14:00 +0100
Subject: [PATCH 02/29] chore: remove 'compare all features' text from payment
 info page

---
 .../admin/(settings)/settings/payment-information/page.tsx    | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/app/dashboard/(admin)/admin/(settings)/settings/payment-information/page.tsx b/src/app/dashboard/(admin)/admin/(settings)/settings/payment-information/page.tsx
index bf10a7cec..fa909b5d2 100644
--- a/src/app/dashboard/(admin)/admin/(settings)/settings/payment-information/page.tsx
+++ b/src/app/dashboard/(admin)/admin/(settings)/settings/payment-information/page.tsx
@@ -213,10 +213,6 @@ const PaymentInformation = () => {
           </div>
         </div>
       </div>
-
-      <div className="max-w-[1000px]">
-        <p>Compare all features</p>
-      </div>
     </div>
   );
 };

From e71ab8a4c6bf4afba4bc67e436b24070f09db90a Mon Sep 17 00:00:00 2001
From: Mary <101870828+Chioma227@users.noreply.github.com>
Date: Fri, 23 Aug 2024 22:35:07 +0100
Subject: [PATCH 03/29] fix: fix toggle button to hide/show invite link

---
 .../settings/organization/members/page.tsx    | 34 ++++++++++++-------
 1 file changed, 21 insertions(+), 13 deletions(-)

diff --git a/src/app/dashboard/(admin)/admin/(settings)/settings/organization/members/page.tsx b/src/app/dashboard/(admin)/admin/(settings)/settings/organization/members/page.tsx
index be3a54d02..1a9bf1707 100644
--- a/src/app/dashboard/(admin)/admin/(settings)/settings/organization/members/page.tsx
+++ b/src/app/dashboard/(admin)/admin/(settings)/settings/organization/members/page.tsx
@@ -72,6 +72,11 @@ const Members = () => {
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [exporting, setExporting] = useState(false);
   const [text, setText] = useState("Export CSV");
+  const [isVisible, setIsVisible] = useState<boolean>(false);
+
+  const toggleVisibility = () => {
+    setIsVisible(!isVisible);
+  };
 
   const { toast } = useToast();
   const handleCopy = () => {
@@ -159,25 +164,28 @@ const Members = () => {
               <input
                 type="checkbox"
                 className="peer sr-only"
-                onChange={() => {}}
+                onChange={toggleVisibility}
+                checked={isVisible}
               />
               <div className="peer h-6 w-11 rounded-full bg-gray-200 after:absolute after:left-[2px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:bg-orange-600 peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:ring-4 peer-focus:ring-orange-300 dark:border-gray-600 dark:bg-gray-700 dark:peer-focus:ring-orange-800"></div>
             </label>
           </div>
         </div>
 
-        <div className="flex w-full justify-between">
-          <CustomButton variant="outline" className="w-full overflow-hidden">
-            https://www.figma.com/design/7hCSTNzQOJLl9aww6wEEd1/Managing-Users----Team-Learn-AI?node-i
-          </CustomButton>
-          <CustomButton
-            variant="primary"
-            className="ml-8 space-x-4"
-            onClick={handleCopy}
-          >
-            Copy link
-          </CustomButton>
-        </div>
+        {isVisible && (
+          <div className="flex w-full justify-between">
+            <CustomButton variant="outline" className="w-full overflow-hidden">
+              https://www.figma.com/design/7hCSTNzQOJLl9aww6wEEd1/Managing-Users----Team-Learn-AI?node-i
+            </CustomButton>
+            <CustomButton
+              variant="primary"
+              className="ml-8 space-x-4"
+              onClick={handleCopy}
+            >
+              Copy link
+            </CustomButton>
+          </div>
+        )}
       </div>
       <div className="w-full space-y-2">
         <h4 className="text-lg font-medium">Manage members</h4>

From 55ec21adbe4337348b81b2e10569402e446313d9 Mon Sep 17 00:00:00 2001
From: Jibola Paul <harjibbolar26@gmail.com>
Date: Fri, 23 Aug 2024 23:45:08 +0100
Subject: [PATCH 04/29] fix: add toggle icon for password visibility and fix
 text

---
 .../account/_component.tsx/password.tsx       | 98 ++++++++++++++-----
 1 file changed, 71 insertions(+), 27 deletions(-)

diff --git a/src/app/dashboard/(admin)/admin/(settings)/settings/account/_component.tsx/password.tsx b/src/app/dashboard/(admin)/admin/(settings)/settings/account/_component.tsx/password.tsx
index c818f5fa5..03577b31e 100644
--- a/src/app/dashboard/(admin)/admin/(settings)/settings/account/_component.tsx/password.tsx
+++ b/src/app/dashboard/(admin)/admin/(settings)/settings/account/_component.tsx/password.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import axios from "axios";
+import { Eye, EyeOff } from "lucide-react";
 import { useSession } from "next-auth/react";
 import { ChangeEvent, useState } from "react";
 
@@ -10,6 +11,8 @@ import CustomInput from "~/components/common/input/input";
 import PasswordSuccessfulModal from "~/components/common/modals/password-successful";
 import { toast } from "~/components/ui/use-toast";
 
+type PasswordField = "current" | "new" | "confirmNew";
+
 const Password = () => {
   const { data } = useSession();
 
@@ -17,6 +20,12 @@ const Password = () => {
 
   const [isPending, setIsPending] = useState(false);
 
+  const [showPassword, setShowPassword] = useState({
+    current: false,
+    new: false,
+    confirmNew: false,
+  });
+
   const [formData, setFormData] = useState({
     oldPassword: "",
     password: "",
@@ -71,6 +80,13 @@ const Password = () => {
     }
   };
 
+  const togglePasswordVisibility = (field: PasswordField) => {
+    setShowPassword((previousState) => ({
+      ...previousState,
+      [field]: !previousState[field],
+    }));
+  };
+
   const disabled =
     !formData.confirmPassword || !formData.oldPassword || !formData.password;
 
@@ -86,33 +102,61 @@ const Password = () => {
       </div>
       <div>
         <div className="mb-6 grid gap-4">
-          <CustomInput
-            placeholder="Enter current password"
-            label="Current Password"
-            className="border-border"
-            type="password"
-            name="oldPassword"
-            value={formData.oldPassword}
-            onChange={formDataHandler}
-          />
-          <CustomInput
-            placeholder="Enter new password"
-            label="New Password"
-            className="border-border"
-            type="password"
-            name="password"
-            value={formData.password}
-            onChange={formDataHandler}
-          />
-          <CustomInput
-            placeholder="Confirm new password"
-            label="Confrim new Password"
-            className="border-border"
-            type="password"
-            name="confirmPassword"
-            value={formData.confirmPassword}
-            onChange={formDataHandler}
-          />
+          <div className="relative">
+            <CustomInput
+              placeholder="Enter current password"
+              label="Current Password"
+              className="border-border"
+              type={`${showPassword.current ? "text" : "password"}`}
+              name="oldPassword"
+              value={formData.oldPassword}
+              onChange={formDataHandler}
+            />
+            <span
+              className="absolute right-2 top-9 cursor-pointer"
+              onClick={() => togglePasswordVisibility("current")}
+            >
+              {showPassword.current ? <EyeOff size={20} /> : <Eye size={20} />}
+            </span>
+          </div>
+          <div className="relative">
+            <CustomInput
+              placeholder="Enter new password"
+              label="New Password"
+              className="border-border"
+              type={`${showPassword.new ? "text" : "password"}`}
+              name="password"
+              value={formData.password}
+              onChange={formDataHandler}
+            />
+            <span
+              className="absolute right-2 top-9 cursor-pointer"
+              onClick={() => togglePasswordVisibility("new")}
+            >
+              {showPassword.new ? <EyeOff size={20} /> : <Eye size={20} />}
+            </span>
+          </div>
+          <div className="relative">
+            <CustomInput
+              placeholder="Confirm new password"
+              label="Confirm new Password"
+              className="border-border"
+              type={`${showPassword.confirmNew ? "text" : "password"}`}
+              name="confirmPassword"
+              value={formData.confirmPassword}
+              onChange={formDataHandler}
+            />
+            <span
+              className="absolute right-2 top-9 cursor-pointer"
+              onClick={() => togglePasswordVisibility("confirmNew")}
+            >
+              {showPassword.confirmNew ? (
+                <EyeOff size={20} />
+              ) : (
+                <Eye size={20} />
+              )}
+            </span>
+          </div>
         </div>
         <div className="flex items-center justify-start gap-6">
           <CustomButton variant="outline" onClick={() => setOpen(false)}>

From 7ef2299e8fa309692eea5f720c2f88382bdbfcce Mon Sep 17 00:00:00 2001
From: Jibola Paul <harjibbolar26@gmail.com>
Date: Sat, 24 Aug 2024 00:36:09 +0100
Subject: [PATCH 05/29] fix: boilerplate logo, name and address  in footer to
 match design

---
 src/components/layouts/footer/index.tsx | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/components/layouts/footer/index.tsx b/src/components/layouts/footer/index.tsx
index 0e4eadca9..c72fb5cfd 100644
--- a/src/components/layouts/footer/index.tsx
+++ b/src/components/layouts/footer/index.tsx
@@ -10,6 +10,7 @@ import {
   Youtube,
 } from "lucide-react";
 import { useTranslations } from "next-intl";
+import Image from "next/image";
 import Link from "next/link";
 import { useState } from "react";
 
@@ -163,11 +164,16 @@ const Footer = () => {
         <div className="mx-auto w-full max-w-[1200px] items-start justify-between gap-[60px] pb-[130px] pt-[28px] sm:grid-cols-2 md:gap-4 md:pb-[46px] md:pt-[72px] lg:flex">
           <div className="mb-[100px] lg:mb-0">
             <div className="mb-[47px] flex w-full flex-col items-center justify-center sm:mb-[60px] md:block md:max-w-[254px] lg:mb-0">
-              <h5 className="text-nuetral-dark-2 text-md mb-[34px] text-center font-bold sm:text-left">
-                Boiler plate
+              <h5 className="text-nuetral-dark-2 text-md mb-[18px] text-center font-bold sm:text-left">
+                <Image
+                  src={"/home/HNG Boilerplate-Logo.png"}
+                  alt="hng_logo"
+                  width={180}
+                  height={52}
+                />
               </h5>
               <p className="text-nuetral-dark-2 text-center text-[12px] font-medium sm:text-left">
-                Logo subject details and address
+                10111, Hornchurch, London, United Kingdom
               </p>
             </div>
             <div className="flex flex-col items-center justify-center md:block lg:hidden">

From a02cbfbeb654203e5f1e04f448c1fcefd2274263 Mon Sep 17 00:00:00 2001
From: Jibola Paul <harjibbolar26@gmail.com>
Date: Sat, 24 Aug 2024 02:02:54 +0100
Subject: [PATCH 06/29] fix: implement api integration to fetch and display
 blog posts

---
 src/app/(landing-routes)/blog/page.tsx | 48 ++++++++++++++++++++++++++
 1 file changed, 48 insertions(+)

diff --git a/src/app/(landing-routes)/blog/page.tsx b/src/app/(landing-routes)/blog/page.tsx
index 3ec42db7f..646d72f53 100644
--- a/src/app/(landing-routes)/blog/page.tsx
+++ b/src/app/(landing-routes)/blog/page.tsx
@@ -1,14 +1,62 @@
 "use client";
 
+import axios from "axios";
+import { useSession } from "next-auth/react";
 import { useRouter } from "next/navigation";
+import { useEffect, useState } from "react";
 
+import { getApiUrl } from "~/actions/getApiUrl";
 import CustomButton from "~/components/common/common-button/common-button";
 import HeroSection from "~/components/extDynamicPages/blogCollection/BlogPageHero";
 import BlogCard from "~/components/layouts/BlogCards";
+import { useToast } from "~/components/ui/use-toast";
 import { blogPosts } from "./data/mock";
 
 const BlogHome = () => {
   const router = useRouter();
+  const { toast } = useToast();
+  const { data: session } = useSession();
+  const [, setBlogPost] = useState("");
+
+  useEffect(() => {
+    async function fetchBlog() {
+      try {
+        const apiUrl = await getApiUrl();
+        const token = session?.access_token;
+        const response = await axios.get(`${apiUrl}/api/v1/blogs`, {
+          headers: {
+            Authorization: `Bearer: ${token}`,
+          },
+        });
+        const data = response.data;
+        setBlogPost(data);
+        toast({
+          title:
+            Array.isArray(data.data) && data.data.length === 0
+              ? "No Blog Post Available"
+              : "Blog Posts Retrieved",
+          description:
+            Array.isArray(data.data) && data.data.length === 0
+              ? "Blog posts are empty"
+              : "Blog posts retrieved successfully",
+          variant:
+            Array.isArray(data.data) && data.data.length === 0
+              ? "destructive"
+              : "default",
+        });
+      } catch (error) {
+        toast({
+          title: "Error occured",
+          description:
+            error instanceof Error
+              ? error.message
+              : "An unknown error occurred",
+          variant: "destructive",
+        });
+      }
+    }
+    fetchBlog();
+  }, [session?.access_token, toast]);
 
   return (
     <div>

From 96a4fb8a989e59e6966137c491c50c50a09454cf Mon Sep 17 00:00:00 2001
From: Jibola Paul <harjibbolar26@gmail.com>
Date: Sat, 24 Aug 2024 11:48:22 +0100
Subject: [PATCH 07/29] fix: merge conflict

---
 src/components/layouts/footer/index.tsx | 32 ++++++++++++++-----------
 1 file changed, 18 insertions(+), 14 deletions(-)

diff --git a/src/components/layouts/footer/index.tsx b/src/components/layouts/footer/index.tsx
index c72fb5cfd..f9cef3e04 100644
--- a/src/components/layouts/footer/index.tsx
+++ b/src/components/layouts/footer/index.tsx
@@ -131,23 +131,23 @@ const Footer = () => {
   const socialLinks = [
     {
       icon: XIcon,
-      link: "/",
+      link: "https://twitter.com/hnginternship",
     },
     {
       icon: Youtube,
-      link: "/",
+      link: "https://youtube.com",
     },
     {
       icon: Instagram,
-      link: "/",
+      link: "https://instagram.com/hngtech",
     },
     {
       icon: Linkedin,
-      link: "/",
+      link: "https://linkedin.com/company/hng-internship/",
     },
     {
       icon: Facebook,
-      link: "/",
+      link: " https://m.facebook.com/hngtech/",
     },
   ];
 
@@ -162,17 +162,18 @@ const Footer = () => {
     <footer className="bg-background dark:bg-default">
       <div className="px-4">
         <div className="mx-auto w-full max-w-[1200px] items-start justify-between gap-[60px] pb-[130px] pt-[28px] sm:grid-cols-2 md:gap-4 md:pb-[46px] md:pt-[72px] lg:flex">
-          <div className="mb-[100px] lg:mb-0">
+          <div className="mb-[100px] max-w-[272px] shrink-0 px-2.5 lg:mb-0">
             <div className="mb-[47px] flex w-full flex-col items-center justify-center sm:mb-[60px] md:block md:max-w-[254px] lg:mb-0">
-              <h5 className="text-nuetral-dark-2 text-md mb-[18px] text-center font-bold sm:text-left">
+              <h5 className="text-md mb-[18px] flex items-center gap-2.5 text-center font-bold text-neutral-dark-2 sm:text-left">
                 <Image
-                  src={"/home/HNG Boilerplate-Logo.png"}
-                  alt="hng_logo"
-                  width={180}
-                  height={52}
+                  src="/images/logo(large).svg"
+                  width={32}
+                  height={32}
+                  alt=""
                 />
+                <span className="text-2xl font-semibold">HNG Boilerplate</span>
               </h5>
-              <p className="text-nuetral-dark-2 text-center text-[12px] font-medium sm:text-left">
+              <p className="text-nuetral-dark-2 text-center text-sm font-medium sm:text-left">
                 10111, Hornchurch, London, United Kingdom
               </p>
             </div>
@@ -301,12 +302,15 @@ const Footer = () => {
             <div className="flex w-full max-w-[116px] items-center justify-between gap-1 md:max-w-[212px]">
               {socialLinks.map((item, index) => {
                 return (
-                  <div
+                  <Link
                     key={index}
+                    href={item.link}
+                    target="_blank"
+                    rel="noopener noreferrer"
                     className="flex h-5 w-5 cursor-pointer items-center justify-center rounded-full bg-primary p-1 hover:bg-destructive md:h-10 md:w-10"
                   >
                     <item.icon className="h-[10px] w-[10px] text-white md:h-4 md:w-4" />
-                  </div>
+                  </Link>
                 );
               })}
             </div>

From 725a7f1c9565830fefde7d4213421669c0a841f5 Mon Sep 17 00:00:00 2001
From: Robinson-Taiwo <omoyenisamuell66@gmail.com>
Date: Sat, 24 Aug 2024 15:49:52 +0100
Subject: [PATCH 08/29] Feat: implement delete members  modal

---
 .../settings/organization/members/page.tsx    | 32 +++++++++-
 .../invite-member/DeleteMembers/index.tsx     | 62 +++++++++++++++++++
 2 files changed, 93 insertions(+), 1 deletion(-)
 create mode 100644 src/components/common/modals/invite-member/DeleteMembers/index.tsx

diff --git a/src/app/dashboard/(admin)/admin/(settings)/settings/organization/members/page.tsx b/src/app/dashboard/(admin)/admin/(settings)/settings/organization/members/page.tsx
index be3a54d02..65c41b98b 100644
--- a/src/app/dashboard/(admin)/admin/(settings)/settings/organization/members/page.tsx
+++ b/src/app/dashboard/(admin)/admin/(settings)/settings/organization/members/page.tsx
@@ -7,7 +7,14 @@ import { useState } from "react";
 import CustomButton from "~/components/common/common-button/common-button";
 import { Input } from "~/components/common/input";
 import InviteMemberModal from "~/components/common/modals/invite-member";
+import DeleteMember from "~/components/common/modals/invite-member/DeleteMembers";
 import LoadingSpinner from "~/components/miscellaneous/loading-spinner";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "~/components/ui/dropdown-menu";
 import {
   Select,
   SelectContent,
@@ -70,6 +77,8 @@ const activeMembers: number = memberData.length;
 
 const Members = () => {
   const [isModalOpen, setIsModalOpen] = useState(false);
+  const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
+
   const [exporting, setExporting] = useState(false);
   const [text, setText] = useState("Export CSV");
 
@@ -86,10 +95,18 @@ const Members = () => {
     setIsModalOpen(true);
   };
 
+  const handleDeleteOpen = () => {
+    setIsDeleteModalOpen(true);
+  };
+
   const handleModalClose = () => {
     setIsModalOpen(false);
   };
 
+  const handleDeleteClose = () => {
+    setIsDeleteModalOpen(false);
+  };
+
   const exportMembers = async () => {
     setExporting(true);
     setText("Exporting...");
@@ -241,7 +258,19 @@ const Members = () => {
                   </Select>
                 </div>
 
-                <EllipsisIcon onClick={() => {}} className="flex-shrink-0" />
+                <DropdownMenu>
+                  <DropdownMenuTrigger>
+                    <EllipsisIcon
+                      onClick={() => {}}
+                      className="flex-shrink-0"
+                    />
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent className="w-[7.875rem] text-[0.875rem]">
+                    <DropdownMenuItem onClick={handleDeleteOpen}>
+                      <span>Delete Member</span>
+                    </DropdownMenuItem>
+                  </DropdownMenuContent>
+                </DropdownMenu>
               </li>
             );
           })}
@@ -271,6 +300,7 @@ const Members = () => {
         </div>
       </div>
       <InviteMemberModal show={isModalOpen} onClose={handleModalClose} />
+      <DeleteMember show={isDeleteModalOpen} onClose={handleDeleteClose} />
     </div>
   );
 };
diff --git a/src/components/common/modals/invite-member/DeleteMembers/index.tsx b/src/components/common/modals/invite-member/DeleteMembers/index.tsx
new file mode 100644
index 000000000..2d46dd5b7
--- /dev/null
+++ b/src/components/common/modals/invite-member/DeleteMembers/index.tsx
@@ -0,0 +1,62 @@
+"use client";
+
+import { Button } from "~/components/ui/button";
+// import { Link2Icon } from "lucide-react";
+
+// import CustomButton from "~/components/common/common-button/common-button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+} from "~/components/ui/dialog";
+
+// import { useToast } from "~/components/ui/use-toast";
+
+interface ModalProperties {
+  show: boolean;
+  onClose: () => void;
+}
+
+const DeleteMember: React.FC<ModalProperties> = ({ show, onClose }) => {
+  return (
+    <Dialog open={show} onOpenChange={onClose}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogDescription className="outline-none">
+            <div className="delete-container">
+              <h1 className="mb-[0.5rem] text-[1.125rem] font-semibold leading-[1.75rem] text-[#0F172A]">
+                Delete Member
+              </h1>
+
+              <p className="text=[#64748B] mb-[1rem] text-[0.875rem]">
+                Are you sure you want to delete Chad Bosewick ? All data will be
+                permanently removed. This action cannot be undone.
+              </p>
+
+              <div className="flex w-[100%] justify-end">
+                <div className="flex flex-row gap-[.5rem]">
+                  <Button
+                    className="text-[#0F172A] outline-none focus:outline-none"
+                    variant="outline"
+                  >
+                    Cancel
+                  </Button>
+
+                  <Button
+                    className="outline-none focus:outline-none"
+                    variant="destructive"
+                  >
+                    Delete
+                  </Button>
+                </div>
+              </div>
+            </div>
+          </DialogDescription>
+        </DialogHeader>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default DeleteMember;

From 4638abd71772ee070f96274f9f84fe5d45127be6 Mon Sep 17 00:00:00 2001
From: Prudent Bird <prudentbird@gmail.com>
Date: Fri, 23 Aug 2024 19:42:46 +0100
Subject: [PATCH 09/29] chore: bug fixes

---
 src/components/authproviders/AuthProvider.tsx | 11 -----------
 1 file changed, 11 deletions(-)
 delete mode 100644 src/components/authproviders/AuthProvider.tsx

diff --git a/src/components/authproviders/AuthProvider.tsx b/src/components/authproviders/AuthProvider.tsx
deleted file mode 100644
index dcaa74598..000000000
--- a/src/components/authproviders/AuthProvider.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-function AuthProvider({ title }: { title: string }) {
-  return (
-    <>
-      <button className="flex items-center gap-2 rounded-md border border-gray-200 p-4">
-        {title}
-      </button>
-    </>
-  );
-}
-
-export default AuthProvider;

From 9c8d5369e5a6f184f6daa8b062526c6ac7cab0eb Mon Sep 17 00:00:00 2001
From: Prudent Bird <prudentbird@gmail.com>
Date: Sat, 24 Aug 2024 18:58:10 +0100
Subject: [PATCH 10/29] chore: resolve unhandled runtime errors and types

---
 hng_boilerplate_nextjs_project                |   1 -
 package.json                                  |   3 +-
 .../notifications/getAllNotifications.ts      |   4 +-
 src/actions/organization.ts                   |   7 +-
 src/actions/product.ts                        |   1 -
 src/actions/socialAuth.ts                     |   6 +-
 src/app/(auth-routes)/login/page.tsx          |  71 ++-
 .../blog/[id]/_components/BlogDetailsPage.tsx |   1 -
 .../(landing-routes)/blog/comments/page.tsx   |   1 -
 .../_components/layout/sidebar/index.tsx      |   6 +-
 .../create-role/page.tsx                      |   6 +-
 .../roles-and-permissions/page.tsx            |  23 +-
 .../(user-metrics)/layout.tsx                 |   2 +-
 .../_components/layout/navbar/index.tsx       |  65 +--
 .../layout/navbar/organisation-switcher.tsx   |  63 +--
 .../_components/overview-revenue/index.tsx    |  89 ++--
 src/app/dashboard/(user-dashboard)/layout.tsx |   2 +-
 .../_components/new-product-modal.tsx         |   7 +-
 .../_components/product-delete-modal.tsx      |  37 +-
 .../_components/product-detail-modal.tsx      |  42 +-
 .../_components/product-detail-view.tsx       |  37 +-
 src/app/dashboard/layout.tsx                  |  42 +-
 src/app/invite/page.tsx                       |  12 +-
 src/components/card/user-card.tsx             |  61 +--
 .../common/contact-us-form/index.tsx          |  28 +-
 .../layouts/navbar/mobile-navbar.tsx          |   9 +-
 src/config/auth.config.ts                     |  24 +-
 src/contexts/orgContext.tsx                   | 449 ++++--------------
 src/lib/auth.ts                               |   5 +-
 src/test/blog/comment/comment-body.test.tsx   |   6 +-
 src/test/blog/comment/comment-reply.test.tsx  |   1 -
 src/test/blog/comment/index.test.tsx          |   1 -
 src/types/index.d.ts                          |   6 +-
 33 files changed, 363 insertions(+), 755 deletions(-)
 delete mode 160000 hng_boilerplate_nextjs_project

diff --git a/hng_boilerplate_nextjs_project b/hng_boilerplate_nextjs_project
deleted file mode 160000
index 8fc1b95c0..000000000
--- a/hng_boilerplate_nextjs_project
+++ /dev/null
@@ -1 +0,0 @@
-Subproject commit 8fc1b95c0e495b78b6b2d20e43b85695edcafec9
diff --git a/package.json b/package.json
index 00d899270..de17b7cb7 100644
--- a/package.json
+++ b/package.json
@@ -16,7 +16,8 @@
     "test:ci": "vitest --coverage",
     "email:dev": "email dev --dir \"./src/email/templates\"",
     "email:build": "email build --dir \"./src/email/templates\"",
-    "email:start": "email start"
+    "email:start": "email start",
+    "typecheck": "tsc --project tsconfig.json --noEmit"
   },
   "dependencies": {
     "@hookform/resolvers": "^3.9.0",
diff --git a/src/actions/notifications/getAllNotifications.ts b/src/actions/notifications/getAllNotifications.ts
index c7389fb9f..456b27580 100644
--- a/src/actions/notifications/getAllNotifications.ts
+++ b/src/actions/notifications/getAllNotifications.ts
@@ -3,10 +3,10 @@
 import axios from "axios";
 
 import { auth } from "~/lib/auth";
-import { getApiUrl } from "../getApiUrl";
+
+const apiUrl = process.env.API_URL;
 
 export const getAllNotifications = async () => {
-  const apiUrl = await getApiUrl();
   const session = await auth();
   try {
     const response = await axios.get(`${apiUrl}/api/v1/notifications`, {
diff --git a/src/actions/organization.ts b/src/actions/organization.ts
index 36f321737..ac83db272 100644
--- a/src/actions/organization.ts
+++ b/src/actions/organization.ts
@@ -102,8 +102,13 @@ export const getAnalytics = async () => {
       },
     });
 
+    const formattedData = Object.keys(response.data.data).map((key) => ({
+      month: key,
+      revenue: response.data.data[key],
+    }));
+
     return {
-      data: response.data.data,
+      data: formattedData,
     };
   } catch (error) {
     return axios.isAxiosError(error) && error.response
diff --git a/src/actions/product.ts b/src/actions/product.ts
index b527d36c9..e9fe607f6 100644
--- a/src/actions/product.ts
+++ b/src/actions/product.ts
@@ -70,7 +70,6 @@ export const getAllProduct = async (org_id: string) => {
     );
     return {
       products: response.data.data,
-      response: response,
     };
   } catch (error) {
     return axios.isAxiosError(error) && error.response
diff --git a/src/actions/socialAuth.ts b/src/actions/socialAuth.ts
index 0673e95b5..1324573ac 100644
--- a/src/actions/socialAuth.ts
+++ b/src/actions/socialAuth.ts
@@ -2,14 +2,14 @@
 
 import axios from "axios";
 
-import { AuthResponse, ErrorResponse, Profile } from "~/types";
+import { AuthResponse, ErrorResponse } from "~/types";
 
 const apiUrl = process.env.API_URL;
 
-const googleAuth = async (profile: Profile): Promise<AuthResponse> => {
+const googleAuth = async (idToken: string): Promise<AuthResponse> => {
   try {
     const response = await axios.post(`${apiUrl}/api/v1/auth/google`, {
-      id_token: profile.id_token,
+      id_token: idToken,
     });
 
     return {
diff --git a/src/app/(auth-routes)/login/page.tsx b/src/app/(auth-routes)/login/page.tsx
index 269782fdb..5251e9fee 100644
--- a/src/app/(auth-routes)/login/page.tsx
+++ b/src/app/(auth-routes)/login/page.tsx
@@ -10,7 +10,6 @@ import { useEffect, useState, useTransition } from "react";
 import { useForm } from "react-hook-form";
 import * as z from "zod";
 
-import { loginUser } from "~/actions/login";
 import CustomButton from "~/components/common/common-button/common-button";
 import { Input } from "~/components/common/input";
 import LoadingSpinner from "~/components/miscellaneous/loading-spinner";
@@ -24,28 +23,22 @@ import {
   FormMessage,
 } from "~/components/ui/form";
 import { useToast } from "~/components/ui/use-toast";
-import { useLocalStorage } from "~/hooks/use-local-storage";
 import { cn } from "~/lib/utils";
 import { LoginSchema } from "~/schemas";
-import { Organisation } from "~/types";
 
 const Login = () => {
   const t = useTranslations("login");
   const router = useRouter();
   const { toast } = useToast();
-  const { status } = useSession();
   const [isLoading, startTransition] = useTransition();
   const [showPassword, setShowPassword] = useState(false);
-  const [, setUserOrg] = useLocalStorage<Organisation[]>("user_org", []);
-
-  const [currentOrgId, setCurrentOrgId] = useLocalStorage<string | undefined>(
-    "current_orgid",
-    "",
-  );
+  const { status } = useSession();
 
-  if (status === "authenticated") {
-    router.push("/dashboard");
-  }
+  useEffect(() => {
+    if (status === "authenticated") {
+      router.push("/dashboard");
+    }
+  }, [status, router]);
 
   const form = useForm<z.infer<typeof LoginSchema>>({
     resolver: zodResolver(LoginSchema),
@@ -55,34 +48,37 @@ const Login = () => {
       rememberMe: false,
     },
   });
-
   const onSubmit = async (values: z.infer<typeof LoginSchema>) => {
-    startTransition(async () => {
-      await loginUser(values).then(async (data) => {
-        const { email, password } = values;
+    const { email, password } = values;
 
-        if (data.status === 200) {
-          setUserOrg(data.organisations);
-          if (!currentOrgId && data.organisations.length > 0) {
-            setCurrentOrgId(data.organisations[0].organisation_id);
-          }
-          await signIn(
-            "credentials",
-            {
-              email,
-              password,
-              redirect: false,
-            },
-            { callbackUrl: "/dashboard" },
-          );
+    try {
+      startTransition(async () => {
+        const result = await signIn("credentials", {
+          email,
+          password,
+          redirect: false,
+        });
+
+        if (result?.ok) {
           router.push("/dashboard");
+          toast({
+            title: "Login success",
+            description: "Redirecting",
+          });
+        } else {
+          toast({
+            title: "An error occurred",
+            description: result?.error || "Unknown error",
+          });
         }
-        toast({
-          title: data.status === 200 ? "Login success" : "An error occurred",
-          description: data.status === 200 ? "Redirecting" : data.error,
-        });
       });
-    });
+    } catch (error) {
+      toast({
+        title: "Login failed",
+        description:
+          (error as Error).message || "An error occurred during login",
+      });
+    }
   };
 
   const togglePasswordVisibility = () => {
@@ -91,6 +87,7 @@ const Login = () => {
   useEffect(() => {
     document.title = "Login";
   }, []);
+
   return (
     <div className="flex min-h-full items-center justify-center px-4 py-10 sm:px-6 lg:px-8">
       <div className="w-full max-w-md space-y-6">
@@ -106,7 +103,7 @@ const Login = () => {
           <CustomButton
             variant="outline"
             isLeftIconVisible={true}
-            onClick={() => signIn("google", { callbackUrl: "/dashboard" })}
+            onClick={() => signIn("google", { callbackUrl: "/" })}
             icon={
               <svg
                 width="25"
diff --git a/src/app/(landing-routes)/blog/[id]/_components/BlogDetailsPage.tsx b/src/app/(landing-routes)/blog/[id]/_components/BlogDetailsPage.tsx
index 4eceb676f..71819d4ae 100644
--- a/src/app/(landing-routes)/blog/[id]/_components/BlogDetailsPage.tsx
+++ b/src/app/(landing-routes)/blog/[id]/_components/BlogDetailsPage.tsx
@@ -22,7 +22,6 @@ const mockSession: Session = {
     last_name: "User",
     email: "user@example.com",
     image: "path/to/image",
-    role: "user",
   },
   access_token: "some-token",
   expires: "2100-01-01T00:00:00.000Z",
diff --git a/src/app/(landing-routes)/blog/comments/page.tsx b/src/app/(landing-routes)/blog/comments/page.tsx
index 1f205e1ed..669d30c3d 100644
--- a/src/app/(landing-routes)/blog/comments/page.tsx
+++ b/src/app/(landing-routes)/blog/comments/page.tsx
@@ -12,7 +12,6 @@ const CommentPage = () => {
       last_name: "User",
       email: "user@example.com",
       image: "path/to/image",
-      role: "user",
     },
     access_token: "some-token",
     expires: "1",
diff --git a/src/app/dashboard/(admin)/admin/(settings)/settings/_components/layout/sidebar/index.tsx b/src/app/dashboard/(admin)/admin/(settings)/settings/_components/layout/sidebar/index.tsx
index 48d8aabe8..f65b5e87f 100644
--- a/src/app/dashboard/(admin)/admin/(settings)/settings/_components/layout/sidebar/index.tsx
+++ b/src/app/dashboard/(admin)/admin/(settings)/settings/_components/layout/sidebar/index.tsx
@@ -12,12 +12,12 @@ import {
   UserRoundCog,
   UsersIcon,
 } from "lucide-react";
+import { useSession } from "next-auth/react";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { FC, ForwardRefExoticComponent, RefAttributes } from "react";
 
 import { useOrgContext } from "~/contexts/orgContext";
-import { useLocalStorage } from "~/hooks/use-local-storage";
 
 const sideItems = [
   {
@@ -96,10 +96,10 @@ const SettingsSidebar: FC<Iproperties> = ({ sideNavitems = sideItems }) => {
     pathname?.split("/").length == 2 ? "general" : pathname?.split("/")[3];
   const organizationPath = pathname?.split("/")[4];
   const { organizations } = useOrgContext();
-  const [org_id] = useLocalStorage<string>("current_orgid", "");
+  const { data: session } = useSession();
 
   const organization = organizations.find(
-    (org) => org.organisation_id === org_id,
+    (org) => org.organisation_id === session?.currentOrgId,
   );
 
   return (
diff --git a/src/app/dashboard/(admin)/admin/(settings)/settings/organization/roles-and-permissions/create-role/page.tsx b/src/app/dashboard/(admin)/admin/(settings)/settings/organization/roles-and-permissions/create-role/page.tsx
index 35330829d..a55dfa546 100644
--- a/src/app/dashboard/(admin)/admin/(settings)/settings/organization/roles-and-permissions/create-role/page.tsx
+++ b/src/app/dashboard/(admin)/admin/(settings)/settings/organization/roles-and-permissions/create-role/page.tsx
@@ -2,6 +2,7 @@
 
 import { zodResolver } from "@hookform/resolvers/zod";
 import { ChevronLeftIcon } from "lucide-react";
+import { useSession } from "next-auth/react";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { useEffect, useState } from "react";
@@ -19,7 +20,6 @@ import {
   SelectValue,
 } from "~/components/ui/select";
 import { toast } from "~/components/ui/use-toast";
-import { useLocalStorage } from "~/hooks/use-local-storage";
 import { roleSchema } from "~/schemas";
 
 type UseFormInputs = z.infer<typeof roleSchema>;
@@ -123,7 +123,7 @@ const transformPermissions = (apiResponse: APIPermissions[]) => {
 
 function CreateNewRolePage() {
   const router = useRouter();
-  const [currentOrgId] = useLocalStorage<string>("current_orgid", "");
+  const { data: session } = useSession();
   const [isSaving, setIsSaving] = useState(false);
   const [permissions, setPermissions] = useState<
     PermissionOption["permissions"] | []
@@ -175,7 +175,7 @@ function CreateNewRolePage() {
   const onValid = async (values: UseFormInputs) => {
     setIsSaving(true);
     try {
-      await createRole(values, currentOrgId)
+      await createRole(values, session?.currentOrgId ?? "")
         .then((data) => {
           if (!data.error) {
             toast({
diff --git a/src/app/dashboard/(admin)/admin/(settings)/settings/organization/roles-and-permissions/page.tsx b/src/app/dashboard/(admin)/admin/(settings)/settings/organization/roles-and-permissions/page.tsx
index 11d6b6349..0ec979fa5 100644
--- a/src/app/dashboard/(admin)/admin/(settings)/settings/organization/roles-and-permissions/page.tsx
+++ b/src/app/dashboard/(admin)/admin/(settings)/settings/organization/roles-and-permissions/page.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { useSession } from "next-auth/react";
 import Link from "next/link";
 import { useEffect, useState } from "react";
 
@@ -13,7 +14,6 @@ import {
 import CustomButton from "~/components/common/common-button/common-button";
 import LoadingSpinner from "~/components/miscellaneous/loading-spinner";
 import { useToast } from "~/components/ui/use-toast";
-import { useLocalStorage } from "~/hooks/use-local-storage";
 
 type Role = {
   id: string;
@@ -39,18 +39,15 @@ const RolesAndPermission = () => {
   const [loadingRoles, setLoadingRoles] = useState<boolean>(true);
   const [loadingPermissions, setLoadingPermissions] = useState<boolean>(false);
   const [loadingRequest, setLoadingRequest] = useState<boolean>(false);
-  const [currentOrgId] = useLocalStorage<string | undefined>(
-    "current_orgid",
-    "",
-  );
+  const { data: session } = useSession();
 
   useEffect(() => {
-    if (!currentOrgId) return;
+    if (!session?.currentOrgId) return;
     const fetchData = async () => {
       try {
         const url = await getApiUrl();
         setApiUrl(url);
-        const { data, error } = await getRoles(currentOrgId);
+        const { data, error } = await getRoles(session?.currentOrgId ?? "");
 
         if (error) throw new Error("An error occurred!");
 
@@ -68,14 +65,14 @@ const RolesAndPermission = () => {
     };
     setLoadingRoles(true);
     fetchData();
-  }, [currentOrgId, toast]);
+  }, [session?.currentOrgId, toast]);
 
   useEffect(() => {
     const fetchPermissions = async () => {
-      if (selectedRoleId && currentOrgId) {
+      if (selectedRoleId && session?.currentOrgId) {
         setLoadingPermissions(true);
         try {
-          await getRolePermissions(currentOrgId, selectedRoleId).then(
+          await getRolePermissions(session?.currentOrgId, selectedRoleId).then(
             (data) => {
               const rolesData = data.data;
               if (rolesData.permissions.length > 0) {
@@ -99,7 +96,7 @@ const RolesAndPermission = () => {
       }
     };
     fetchPermissions();
-  }, [selectedRoleId, apiUrl, currentOrgId, toast]);
+  }, [selectedRoleId, apiUrl, session?.currentOrgId, toast]);
 
   useEffect(() => {
     const fetchPermissions = async () => {
@@ -132,7 +129,7 @@ const RolesAndPermission = () => {
   };
 
   const handleSave = async () => {
-    if (!selectedRoleId || !currentOrgId) return;
+    if (!selectedRoleId || !session?.currentOrgId) return;
     const selectedRole =
       roles.some((role) => role.id === selectedRoleId) &&
       roles.find((role) => role.id === selectedRoleId);
@@ -141,7 +138,7 @@ const RolesAndPermission = () => {
     try {
       await updateRole(
         { ...selectedRole, permissions },
-        currentOrgId,
+        session?.currentOrgId,
         selectedRoleId,
       ).then(() => {
         toast({
diff --git a/src/app/dashboard/(user-dashboard)/(user-metrics)/layout.tsx b/src/app/dashboard/(user-dashboard)/(user-metrics)/layout.tsx
index dbe5f72ec..41a7552da 100644
--- a/src/app/dashboard/(user-dashboard)/(user-metrics)/layout.tsx
+++ b/src/app/dashboard/(user-dashboard)/(user-metrics)/layout.tsx
@@ -22,7 +22,7 @@ const links = [
 export default function UserMetricsLayout({ children }: PropsWithChildren) {
   return (
     <div className="flex h-full flex-col gap-[37px] bg-background p-4">
-      <div className="flex flex-wrap items-center justify-between gap-x-6 gap-y-2 pt-6">
+      <div className="flex flex-wrap items-end justify-between gap-x-6 gap-y-2 pt-6">
         <div className="space-y-6">
           <h1 className="text-2xl font-semibold lg:text-[30px]">Dashboard</h1>
           <Tablinks links={links} />
diff --git a/src/app/dashboard/(user-dashboard)/_components/layout/navbar/index.tsx b/src/app/dashboard/(user-dashboard)/_components/layout/navbar/index.tsx
index d537b16e7..bf87dedb9 100644
--- a/src/app/dashboard/(user-dashboard)/_components/layout/navbar/index.tsx
+++ b/src/app/dashboard/(user-dashboard)/_components/layout/navbar/index.tsx
@@ -1,11 +1,7 @@
 "use client";
 
 import { BellIcon, HelpCircle } from "lucide-react";
-import { useSession } from "next-auth/react";
-import { useRouter } from "next/navigation";
-import { useEffect, useState } from "react";
 
-import { getAllNotifications } from "~/actions/notifications/getAllNotifications";
 import UnreadNotificationCard from "~/app/dashboard/(admin)/_components/unread-notification-card/UnreadNotificationCard";
 import { MobileNavlinks } from "~/app/dashboard/(user-dashboard)/_components/layout/navbar/mobile-navlinks";
 import { Navlinks } from "~/app/dashboard/(user-dashboard)/_components/layout/navbar/navlinks";
@@ -16,62 +12,23 @@ import {
   PopoverContent,
   PopoverTrigger,
 } from "~/components/ui/popover";
+import { useOrgContext } from "~/contexts/orgContext";
 import { OrganisationSwitcher } from "./organisation-switcher";
 
-interface NotificationPreview {
-  message: string;
-  created_at: string;
-  is_read: boolean;
-  id: string;
-}
-
-interface NotificationsData {
-  data: {
-    total_unread_notification_count: number;
-    total_notification_count: number;
-    notifications: NotificationPreview[];
-  };
-  message: string;
-}
-
 const UserNavbar = () => {
-  const [notifications, setNotifications] =
-    useState<NotificationsData | null>();
-  const { status } = useSession();
-  const router = useRouter();
-
-  useEffect(() => {
-    if (status === "unauthenticated") {
-      router.push("/login");
-    }
-  }, [status, router]);
-
-  useEffect(() => {
-    async function fetchNotifications() {
-      const result = await getAllNotifications();
-
-      if (result.error) {
-        return result.error;
-      } else {
-        setNotifications(result.data as NotificationsData);
-      }
-    }
-
-    fetchNotifications();
-  }, []);
+  const { notifications } = useOrgContext();
 
   const totalUnreadNotificationCount =
-    notifications?.data.total_unread_notification_count || 0;
+    notifications?.data?.total_unread_notification_count || 0;
 
   const totalNotificationCount =
-    notifications?.data.total_notification_count || 0;
-  const notificationContent: NotificationPreview[] =
-    notifications?.data.notifications || [];
+    notifications?.data?.total_notification_count || 0;
+  const notificationContent = notifications?.data?.notifications || [];
 
   return (
     <nav
       className="bg-white px-5 py-2.5 md:left-[220px] lg:left-[252px]"
-      role="navbar"
+      role="navigation"
     >
       <div className="flex items-center justify-between gap-2">
         <div className="flex gap-[50px]">
@@ -89,6 +46,7 @@ const UserNavbar = () => {
               <PopoverTrigger>
                 <BellIcon
                   data-testid="bell"
+                  aria-label="Notifications"
                   className="h-6 w-6 text-neutral-dark-2 transition-colors duration-300 hover:cursor-pointer hover:text-neutral-dark-1"
                 />
               </PopoverTrigger>
@@ -104,17 +62,14 @@ const UserNavbar = () => {
                 />
               </PopoverContent>
             </Popover>
-            {notifications && (
-              <>
-                {totalNotificationCount > 0 && (
-                  <span className="absolute right-1 top-0 h-[6px] w-[6px] rounded-full bg-error"></span>
-                )}
-              </>
+            {totalUnreadNotificationCount > 0 && (
+              <span className="absolute right-1 top-0 h-[6px] w-[6px] rounded-full bg-error"></span>
             )}
           </div>
           <div className="max-sm:hidden">
             <HelpCircle
               data-testid="help"
+              aria-label="Help"
               className="h-6 w-6 text-neutral-dark-2 transition-colors duration-300 hover:cursor-pointer hover:text-neutral-dark-1"
             />
           </div>
diff --git a/src/app/dashboard/(user-dashboard)/_components/layout/navbar/organisation-switcher.tsx b/src/app/dashboard/(user-dashboard)/_components/layout/navbar/organisation-switcher.tsx
index 36b1f6e0a..6f5b447e6 100644
--- a/src/app/dashboard/(user-dashboard)/_components/layout/navbar/organisation-switcher.tsx
+++ b/src/app/dashboard/(user-dashboard)/_components/layout/navbar/organisation-switcher.tsx
@@ -1,8 +1,8 @@
-"use client ";
+"use client";
 
-import { useEffect, useState } from "react";
+import { useSession } from "next-auth/react";
+import { useState } from "react";
 
-import { getCurrentOrgApi } from "~/actions/switchOrganization";
 import { Avatar, AvatarFallback, AvatarImage } from "~/components/ui/avatar";
 import { Button } from "~/components/ui/button";
 import {
@@ -14,43 +14,30 @@ import {
 } from "~/components/ui/select";
 import { Skeleton } from "~/components/ui/skeleton";
 import { useOrgContext } from "~/contexts/orgContext";
-import { useLocalStorage } from "~/hooks/use-local-storage";
 import { CreateOrganization } from "../../create-organization";
 
 export const OrganisationSwitcher = () => {
-  const [currentOrgId, setCurrentOrgId] = useLocalStorage<string | undefined>(
-    "current_orgid",
-    "",
-  );
-
-  const { organizations, isLoading, switchOrganization } = useOrgContext();
+  const { data: session } = useSession();
+  const { isLoading, switchOrganization } = useOrgContext();
 
-  useEffect(() => {
-    if (!currentOrgId && organizations.length > 0) {
-      setCurrentOrgId(organizations[0].organisation_id);
-      switchOrganization(organizations[0].organisation_id);
-    }
-    // console.log(organizations);
-  }, [currentOrgId, organizations, setCurrentOrgId, switchOrganization]);
-
-  const handleOrgChange = (currentOrg: string) => {
-    setCurrentOrgId(currentOrg);
-    switchOrganization(currentOrg);
-    getCurrentOrgApi({ orgId: currentOrg });
+  // Ensure that switchOrganization is properly defined and used
+  const handleOrgChange = (currentOrgId: string) => {
+    switchOrganization(currentOrgId);
   };
 
-  const currentOrg =
-    organizations.length > 0
-      ? organizations.find((org) => org.organisation_id === currentOrgId)
-      : undefined;
+  // Ensure currentOrg is correctly derived
+  const currentOrg = session?.userOrg?.find(
+    (org) => org.organisation_id === session.currentOrgId,
+  );
 
+  // State to manage the modal visibility
   const [isOpen, setIsOpen] = useState(false);
 
   return (
     <>
       <CreateOrganization isOpen={isOpen} setIsOpen={setIsOpen} />
       <Select
-        defaultValue={currentOrgId}
+        defaultValue={currentOrg?.name}
         onValueChange={(value) => handleOrgChange(value)}
       >
         <SelectTrigger
@@ -60,31 +47,33 @@ export const OrganisationSwitcher = () => {
           {isLoading ? (
             <Skeleton className="h-4 w-full" />
           ) : (
-            <SelectValue placeholder={currentOrg?.name}>
-              <span className="ml-2">{currentOrg && currentOrg.name}</span>
+            <SelectValue placeholder="Select an organization">
+              <span className="ml-2">
+                {currentOrg?.name || "No Organization Selected"}
+              </span>
             </SelectValue>
           )}
         </SelectTrigger>
         <SelectContent>
-          {organizations.map((org) => (
-            <SelectItem key={org.id} value={org.organisation_id}>
-              <div className="flex items-center gap-3 [&_svg]:h-4 [&_svg]:w-4 [&_svg]:shrink-0 [&_svg]:text-foreground">
-                <Avatar className="size-4 sm:size-3">
+          {session?.userOrg?.map((org) => (
+            <SelectItem key={org.organisation_id} value={org.organisation_id}>
+              <div className="flex items-center gap-3">
+                <Avatar className="h-4 w-4 sm:h-3 sm:w-3">
                   <AvatarImage src={""} />
                   <AvatarFallback className="bg-primary/30 uppercase">
-                    {org?.name?.charAt(0)}
+                    {org.name?.charAt(0)}
                   </AvatarFallback>
-                </Avatar>{" "}
+                </Avatar>
                 {org.name}
               </div>
             </SelectItem>
           ))}
           <Button
             variant="outline"
-            className="w-full"
+            className="mt-2 w-full"
             onClick={() => setIsOpen(!isOpen)}
           >
-            Create Organisation
+            Create Organization
           </Button>
         </SelectContent>
       </Select>
diff --git a/src/app/dashboard/(user-dashboard)/_components/overview-revenue/index.tsx b/src/app/dashboard/(user-dashboard)/_components/overview-revenue/index.tsx
index 10642e0eb..1e3335ebf 100644
--- a/src/app/dashboard/(user-dashboard)/_components/overview-revenue/index.tsx
+++ b/src/app/dashboard/(user-dashboard)/_components/overview-revenue/index.tsx
@@ -1,93 +1,60 @@
 "use client";
 
-import { useEffect, useState } from "react";
-
-import { dashboard } from "~/actions/dashboard";
 import { revenueData } from "~/app/dashboard/(user-dashboard)/_components/overview-revenue/revenueData";
 import CardComponent from "~/components/common/DashboardCard/CardComponent";
 import { useOrgContext } from "~/contexts/orgContext";
 
-interface dashboard {
-  revenue: number;
-  subscriptions: number;
-  sales: number;
-  activeSubscription: number;
-  monthSales: [
-    {
-      id: string;
-      user_id: string;
-      product_id: string;
-      subscription_id: string;
-      type: string;
-      status: string;
-      partners: string;
-      amount: number;
-      reference: string;
-      created_at: string;
-      paid_at: string;
-      modified_at: string;
-    },
-  ];
-}
 export function OverviewRevenue() {
-  const [dashboardObjectData, setDashboardObjectData] = useState<dashboard>();
-  useEffect(() => {
-    getDashboardData();
-  }, []);
-  const getDashboardData = async () => {
-    const data = await dashboard();
-    setDashboardObjectData(data);
-  };
   const { isLoading, dashboardData } = useOrgContext();
+
+  // If dashboardData is undefined or still loading, render a loading state
+  if (isLoading || !dashboardData) {
+    return (
+      <div className="mb-6 mt-4 grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-4">
+        {/* Placeholder card components or a loading spinner */}
+        {revenueData.map((data, index) => (
+          <CardComponent
+            key={index}
+            title={data.title}
+            value={0} // Default value during loading
+            percentage={0} // Default percentage during loading
+            icon={data.icon}
+            loading={true} // Indicate that the card is in a loading state
+          />
+        ))}
+      </div>
+    );
+  }
+
   return (
     <div className="mb-6 mt-4 grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-4">
       <CardComponent
         title={revenueData[0].title}
-        // title={revenueData[0].title}
-        value={dashboardObjectData?.revenue || 0}
-        // value={dashboardData?.revenue.current_month || 0}
-        percentage={dashboardData?.revenue.percentage_difference || 0}
-        // percentage={dashboardData?.revenue.percentage_difference || 0}
+        value={dashboardData.revenue.current_month || 0}
+        percentage={dashboardData.revenue.percentage_difference || 0}
         icon={revenueData[0].icon}
-        // icon={revenueData[0].icon}
         loading={isLoading}
-        // loading={isLoading}
       />
       <CardComponent
         title={revenueData[1].title}
-        // title={revenueData[1].title}
-        value={dashboardObjectData?.subscriptions || 0}
-        // value={dashboardData?.Subscriptions.current_month || 0}
-        percentage={dashboardData?.Subscriptions.percentage_difference || 0}
-        // percentage={dashboardData?.Subscriptions.percentage_difference || 0}
+        value={dashboardData.Subscriptions.current_month || 0}
+        percentage={dashboardData.Subscriptions.percentage_difference || 0}
         icon={revenueData[1].icon}
-        // icon={revenueData[1].icon}
         loading={isLoading}
-        // loading={isLoading}
       />
       <CardComponent
         title={revenueData[2].title}
-        // title={revenueData[2].title}
-        value={dashboardObjectData?.sales || 0}
-        // value={dashboardData?.orders.current_month || 0}
-        percentage={dashboardData?.orders.percentage_difference || 0}
-        // percentage={dashboardData?.orders.percentage_difference || 0}
+        value={dashboardData.orders.current_month || 0}
+        percentage={dashboardData.orders.percentage_difference || 0}
         icon={revenueData[2].icon}
-        // icon={revenueData[2].icon}
         loading={isLoading}
-        // loading={isLoading}
       />
       <CardComponent
         title={revenueData[3].title}
-        // title={revenueData[3].title}
-        value={dashboardObjectData?.activeSubscription || 0}
-        // value={dashboardData?.active_users.current || 0}
-        percentage={dashboardData?.active_users.difference_an_hour_ago || 0}
-        // percentage={dashboardData?.active_users.difference_an_hour_ago || 0}
+        value={dashboardData.active_users.current || 0}
+        percentage={dashboardData.active_users.difference_an_hour_ago || 0}
         icon={revenueData[3].icon}
-        // icon={revenueData[3].icon}
         loading={isLoading}
-        // loading={isLoading}
         isUser
       />
     </div>
diff --git a/src/app/dashboard/(user-dashboard)/layout.tsx b/src/app/dashboard/(user-dashboard)/layout.tsx
index 9448e15dc..b03d8ab91 100644
--- a/src/app/dashboard/(user-dashboard)/layout.tsx
+++ b/src/app/dashboard/(user-dashboard)/layout.tsx
@@ -21,7 +21,7 @@ export default function AdminLayout({
           <div className="w-[calc(100%_-_50px)] flex-1">
             <Suspense>{children}</Suspense>
           </div>
-        </div>{" "}
+        </div>
       </div>
     </div>
   );
diff --git a/src/app/dashboard/(user-dashboard)/products/_components/new-product-modal.tsx b/src/app/dashboard/(user-dashboard)/products/_components/new-product-modal.tsx
index f12531b9f..69f7b2c77 100644
--- a/src/app/dashboard/(user-dashboard)/products/_components/new-product-modal.tsx
+++ b/src/app/dashboard/(user-dashboard)/products/_components/new-product-modal.tsx
@@ -2,6 +2,7 @@
 import { zodResolver } from "@hookform/resolvers/zod";
 import { AnimatePresence, motion } from "framer-motion";
 import { Loader, X } from "lucide-react";
+import { useSession } from "next-auth/react";
 import Image from "next/image";
 import { useState, useTransition } from "react";
 import { useForm } from "react-hook-form";
@@ -32,7 +33,6 @@ import {
 import { Textarea } from "~/components/ui/textarea";
 import { useToast } from "~/components/ui/use-toast";
 import { useOrgContext } from "~/contexts/orgContext";
-import { useLocalStorage } from "~/hooks/use-local-storage";
 import { cn } from "~/lib/utils";
 import { productSchema } from "~/schemas";
 import { CloudinaryAsset } from "~/types";
@@ -43,7 +43,7 @@ const NewProductModal = () => {
   const { setIsNewModal, isNewModal } = useOrgContext();
   const [image, setImage] = useState<File | Blob>();
   const [isLoading, startTransition] = useTransition();
-  const [org_id] = useLocalStorage<string>("current_orgid", "");
+  const { data: session } = useSession();
 
   const variantProperties = {
     left: "50%",
@@ -82,7 +82,8 @@ const NewProductModal = () => {
         values.image_url = data.url;
       });
 
-      await createProduct(values, org_id).then((data) => {
+      if (session?.currentOrgId === undefined) return;
+      await createProduct(values, session?.currentOrgId).then((data) => {
         if (data.status === 201) {
           newProductForm.reset();
           setIsNewModal(false);
diff --git a/src/app/dashboard/(user-dashboard)/products/_components/product-delete-modal.tsx b/src/app/dashboard/(user-dashboard)/products/_components/product-delete-modal.tsx
index 99f2612a0..eb3904f82 100644
--- a/src/app/dashboard/(user-dashboard)/products/_components/product-delete-modal.tsx
+++ b/src/app/dashboard/(user-dashboard)/products/_components/product-delete-modal.tsx
@@ -1,13 +1,13 @@
 "use client";
 
 import { AnimatePresence, motion } from "framer-motion";
+import { useSession } from "next-auth/react";
 import { useTransition } from "react";
 
 import { deleteProduct } from "~/actions/product";
 import { Button } from "~/components/ui/button";
 import { toast } from "~/components/ui/use-toast";
 import { useOrgContext } from "~/contexts/orgContext";
-import { useLocalStorage } from "~/hooks/use-local-storage";
 import { cn } from "~/lib/utils";
 
 const variantProperties = {
@@ -18,7 +18,7 @@ const variantProperties = {
 };
 
 const ProductDeleteModal = () => {
-  const [org_id] = useLocalStorage<string>("current_orgid", "");
+  const { data: session } = useSession();
   const [isPending, startTransition] = useTransition();
   const { selectedProduct, products, isDelete, setIsDelete } = useOrgContext();
 
@@ -32,21 +32,24 @@ const ProductDeleteModal = () => {
     });
 
     startTransition(async () => {
-      await deleteProduct(org_id, selectedProduct).then((data) => {
-        if (data.status === 200) {
-          toast({
-            title: "Product deleted",
-            description: "Product deleted successfully.",
-          });
-        } else {
-          toast({
-            title: "Error",
-            description: data.error || "An unexpected error occurred.",
-            variant: "destructive",
-          });
-        }
-        setIsDelete(false);
-      });
+      if (session?.currentOrgId === undefined) return;
+      await deleteProduct(session?.currentOrgId, selectedProduct).then(
+        (data) => {
+          if (data.status === 200) {
+            toast({
+              title: "Product deleted",
+              description: "Product deleted successfully.",
+            });
+          } else {
+            toast({
+              title: "Error",
+              description: data.error || "An unexpected error occurred.",
+              variant: "destructive",
+            });
+          }
+          setIsDelete(false);
+        },
+      );
     });
   };
 
diff --git a/src/app/dashboard/(user-dashboard)/products/_components/product-detail-modal.tsx b/src/app/dashboard/(user-dashboard)/products/_components/product-detail-modal.tsx
index 0a6edfceb..271c00fce 100644
--- a/src/app/dashboard/(user-dashboard)/products/_components/product-detail-modal.tsx
+++ b/src/app/dashboard/(user-dashboard)/products/_components/product-detail-modal.tsx
@@ -1,5 +1,6 @@
 import { AnimatePresence, motion } from "framer-motion";
 import { Loader2, X } from "lucide-react";
+import { useSession } from "next-auth/react";
 import { useRouter } from "next-nprogress-bar";
 import { startTransition, useEffect, useState, useTransition } from "react";
 
@@ -8,7 +9,6 @@ import BlurImage from "~/components/miscellaneous/blur-image";
 import { Button } from "~/components/ui/button";
 import { toast } from "~/components/ui/use-toast";
 import { useOrgContext } from "~/contexts/orgContext";
-import { useLocalStorage } from "~/hooks/use-local-storage";
 import useWindowWidth from "~/hooks/use-window-width";
 import { cn, formatPrice } from "~/lib/utils";
 import { Product } from "~/types";
@@ -29,7 +29,7 @@ const ProductDetailModal = () => {
     useOrgContext();
 
   const [isLoading, startLoading] = useTransition();
-  const [org_id] = useLocalStorage<string>("current_orgid", "");
+  const { data: session } = useSession();
   const { winWidth } = useWindowWidth();
 
   useEffect(() => {
@@ -51,23 +51,27 @@ const ProductDetailModal = () => {
     });
 
     startLoading(() => {
-      deleteProduct(org_id, selectedProduct).then(async (data) => {
-        toast({
-          title: data.status === 200 ? `Product deleted` : "an error occurred",
-          description: (
-            <span>
-              <b>{product?.name}</b>{" "}
-              {data.status === 200 ? " has been deleted." : data.error}
-            </span>
-          ),
-          variant: "default",
-          className: "z-[99999]",
-        });
-        if (data.status === 200) {
-          updateOpen(false);
-          setIsDelete(false);
-        }
-      });
+      if (session?.currentOrgId === undefined) return;
+      deleteProduct(session?.currentOrgId, selectedProduct).then(
+        async (data) => {
+          toast({
+            title:
+              data.status === 200 ? `Product deleted` : "an error occurred",
+            description: (
+              <span>
+                <b>{product?.name}</b>{" "}
+                {data.status === 200 ? " has been deleted." : data.error}
+              </span>
+            ),
+            variant: "default",
+            className: "z-[99999]",
+          });
+          if (data.status === 200) {
+            updateOpen(false);
+            setIsDelete(false);
+          }
+        },
+      );
     });
   };
   const handleEditAction = (id: string) => {
diff --git a/src/app/dashboard/(user-dashboard)/products/_components/product-detail-view.tsx b/src/app/dashboard/(user-dashboard)/products/_components/product-detail-view.tsx
index 3c7b03b68..cfbf51e0f 100644
--- a/src/app/dashboard/(user-dashboard)/products/_components/product-detail-view.tsx
+++ b/src/app/dashboard/(user-dashboard)/products/_components/product-detail-view.tsx
@@ -2,6 +2,7 @@
 
 import { AnimatePresence, motion } from "framer-motion";
 import { X } from "lucide-react";
+import { useSession } from "next-auth/react";
 import { useRouter } from "next-nprogress-bar";
 import { useEffect, useTransition } from "react";
 
@@ -11,7 +12,6 @@ import LoadingSpinner from "~/components/miscellaneous/loading-spinner";
 import { Button } from "~/components/ui/button";
 import { toast } from "~/components/ui/use-toast";
 import { useOrgContext } from "~/contexts/orgContext";
-import { useLocalStorage } from "~/hooks/use-local-storage";
 import { cn, formatPrice } from "~/lib/utils";
 
 const ProductDetailView = () => {
@@ -28,7 +28,7 @@ const ProductDetailView = () => {
   const [isLoading, startTransition] = useTransition();
 
   const product = products.find((p) => p.id === selectedProduct);
-  const [org_id] = useLocalStorage<string>("current_orgid", "");
+  const { data: session } = useSession();
 
   const handleDelete = async () => {
     toast({
@@ -38,21 +38,24 @@ const ProductDetailView = () => {
     });
 
     startTransition(async () => {
-      await deleteProduct(org_id, selectedProduct).then((data) => {
-        if (data.status === 200) {
-          toast({
-            title: "Product deleted",
-            description: "Product deleted successfully.",
-          });
-        } else {
-          toast({
-            title: "Error",
-            description: data.error || "An unexpected error occurred.",
-            variant: "destructive",
-          });
-        }
-        setIsDelete(false);
-      });
+      if (session?.currentOrgId === undefined) return;
+      await deleteProduct(session?.currentOrgId, selectedProduct).then(
+        (data) => {
+          if (data.status === 200) {
+            toast({
+              title: "Product deleted",
+              description: "Product deleted successfully.",
+            });
+          } else {
+            toast({
+              title: "Error",
+              description: data.error || "An unexpected error occurred.",
+              variant: "destructive",
+            });
+          }
+          setIsDelete(false);
+        },
+      );
     });
   };
   const handleEditAction = (id: string) => {
diff --git a/src/app/dashboard/layout.tsx b/src/app/dashboard/layout.tsx
index 5c5cff5e4..84430821d 100644
--- a/src/app/dashboard/layout.tsx
+++ b/src/app/dashboard/layout.tsx
@@ -1,9 +1,41 @@
+import { getAllNotifications } from "~/actions/notifications/getAllNotifications";
+import { getAnalytics, getStatistics } from "~/actions/organization";
+import { getAllProduct } from "~/actions/product";
 import OrgContextProvider from "~/contexts/orgContext";
+import { auth } from "~/lib/auth";
 
-export default function GeneralLayout({
-  children,
-}: {
+interface GeneralLayoutProperties {
   children: React.ReactNode;
-}) {
-  return <OrgContextProvider>{children}</OrgContextProvider>;
+}
+
+export default async function GeneralLayout(
+  properties: GeneralLayoutProperties,
+) {
+  const session = await auth();
+
+  if (!session || !session.currentOrgId) {
+    return;
+  }
+
+  const { children } = properties;
+
+  const [notifications, statistics, analytics, products] = await Promise.all([
+    getAllNotifications(),
+    getStatistics(),
+    getAnalytics(),
+    getAllProduct(session?.currentOrgId),
+  ]);
+
+  return (
+    <OrgContextProvider
+      initialData={{
+        notifications: notifications?.data,
+        dashboardData: statistics?.data,
+        monthlyData: analytics?.data,
+        products: products.products,
+      }}
+    >
+      {children}
+    </OrgContextProvider>
+  );
 }
diff --git a/src/app/invite/page.tsx b/src/app/invite/page.tsx
index 61e1c1984..e03c03903 100644
--- a/src/app/invite/page.tsx
+++ b/src/app/invite/page.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { useRouter } from "next/navigation"; // Import from next/navigation
-import { useEffect } from "react";
+import { useCallback, useEffect } from "react";
 
 import { acceptInviteRequest } from "~/actions/inviteMembers";
 
@@ -12,12 +12,12 @@ const extractToken = () => {
     ? queryString
     : queryString.slice(0, Math.max(0, ampersandIndex));
 };
+
 const AcceptInvitePage = () => {
   const router = useRouter();
 
-  // Function to extract token from the query string
-
-  const handleAcceptInvite = async () => {
+  // Memoized function to handle invite acceptance
+  const handleAcceptInvite = useCallback(async () => {
     // Extract token using the function
     const token = extractToken();
 
@@ -56,12 +56,12 @@ const AcceptInvitePage = () => {
       // Handle unexpected errors
       router.push("/error?message=An unexpected error occurred");
     }
-  };
+  }, [router]);
 
   // Process the invite on page load
   useEffect(() => {
     handleAcceptInvite();
-  }, []);
+  }, [handleAcceptInvite]);
 
   return (
     <div className="flex h-[100vh] w-[100vw] items-center justify-center">
diff --git a/src/components/card/user-card.tsx b/src/components/card/user-card.tsx
index 8f37be0ac..ed6fac9af 100644
--- a/src/components/card/user-card.tsx
+++ b/src/components/card/user-card.tsx
@@ -1,10 +1,7 @@
-import axios from "axios";
 import { ChevronDown } from "lucide-react";
 import { signOut, useSession } from "next-auth/react";
 import Link from "next/link";
-import { useCallback, useEffect, useState } from "react";
 
-import { getApiUrl } from "~/actions/getApiUrl";
 import { Avatar, AvatarFallback, AvatarImage } from "~/components/ui/avatar";
 import {
   DropdownMenu,
@@ -16,7 +13,6 @@ import {
   DropdownMenuShortcut,
   DropdownMenuTrigger,
 } from "~/components/ui/dropdown-menu";
-import { toast } from "~/components/ui/use-toast";
 import { cn } from "~/lib/utils";
 
 const handleLogout = async () => {
@@ -27,55 +23,6 @@ const handleLogout = async () => {
 
 const UserCard = () => {
   const { data: session, status } = useSession();
-  const { user } = session ?? {};
-  const [profilePicUrl, setProfilePicUrl] = useState<string | undefined>("");
-
-  const fetchProfileData = useCallback(async () => {
-    if (status === "authenticated" && user?.id) {
-      try {
-        const baseUrl = await getApiUrl();
-        const API_URL = `${baseUrl}/api/v1/profile/${user.id}`;
-        const response = await axios.get(API_URL, {
-          headers: {
-            Authorization: `Bearer ${session?.access_token}`,
-          },
-        });
-        if (response.data?.data) {
-          const { avatar_url, profile_pic_url } = response.data.data;
-          setProfilePicUrl(avatar_url || profile_pic_url);
-        }
-      } catch {
-        toast({
-          title: "Error",
-          description: "Failed to fetch profile data.",
-          variant: "destructive",
-        });
-      }
-    }
-  }, [status, user?.id, session?.access_token]);
-
-  useEffect(() => {
-    fetchProfileData();
-    const handleProfileUpdate = (event: CustomEvent) => {
-      if (event.detail && event.detail.profilePicUrl) {
-        setProfilePicUrl(event.detail.profilePicUrl);
-      } else {
-        fetchProfileData();
-      }
-    };
-
-    window.addEventListener(
-      "userProfileUpdate",
-      handleProfileUpdate as EventListener,
-    );
-
-    return () => {
-      window.removeEventListener(
-        "userProfileUpdate",
-        handleProfileUpdate as EventListener,
-      );
-    };
-  }, [fetchProfileData]);
 
   return (
     <DropdownMenu>
@@ -91,11 +38,11 @@ const UserCard = () => {
           {status === "authenticated" && (
             <Avatar className="size-8 sm:size-10">
               <AvatarImage
-                src={`${profilePicUrl}?t=${Date.now()}`}
+                src={`${session.user.image}?t=${Date.now()}`}
                 alt="User Avatar"
               />
               <AvatarFallback className="bg-primary/30 uppercase">
-                {user?.first_name?.charAt(0)}
+                {session.user?.first_name?.charAt(0)}
               </AvatarFallback>
             </Avatar>
           )}
@@ -110,10 +57,10 @@ const UserCard = () => {
       </DropdownMenuTrigger>
       <DropdownMenuContent className="mr-1 w-56" align="end">
         <DropdownMenuLabel className="pb-0 pt-3">
-          {user?.first_name} {user?.last_name}
+          {session?.user?.first_name} {session?.user?.last_name}
         </DropdownMenuLabel>
         <span className="block px-2 pb-1 text-xs text-neutral-dark-1">
-          {user?.email ?? "Signed In"}
+          {session?.user?.email ?? "Signed In"}
         </span>
         <DropdownMenuSeparator />
         <DropdownMenuGroup>
diff --git a/src/components/common/contact-us-form/index.tsx b/src/components/common/contact-us-form/index.tsx
index 7609b15a6..1d8f692bc 100644
--- a/src/components/common/contact-us-form/index.tsx
+++ b/src/components/common/contact-us-form/index.tsx
@@ -1,13 +1,13 @@
 "use client";
 
 import { Mail } from "lucide-react";
+import { useSession } from "next-auth/react";
 import { useEffect, useState } from "react";
 import { z, ZodError } from "zod";
 
 import { getApiUrl } from "~/actions/getApiUrl";
 import { Toaster } from "~/components/ui/toaster";
 import { useToast } from "~/components/ui/use-toast";
-import { useLocalStorage } from "~/hooks/use-local-storage";
 import CustomButton from "../common-button/common-button";
 import InputField from "./inputfield";
 
@@ -44,7 +44,7 @@ const ContactForm: React.FC = () => {
   const [status, setStatus] = useState<boolean | undefined>();
   const [message, setMessage] = useState<string | undefined>();
   const [loading, setLoading] = useState<boolean>(false);
-  const [org_id] = useLocalStorage<string>("current_orgid", "");
+  const { data: session } = useSession();
   const { toast } = useToast();
 
   useEffect(() => {
@@ -72,22 +72,6 @@ const ContactForm: React.FC = () => {
     }
   };
 
-  function transformFormData(
-    formData: FormData,
-    orgId: string,
-  ): TransformedData {
-    // Create a new object with the required structure
-    const transformedData = {
-      full_name: formData.name,
-      email: formData.email,
-      phone_number: formData.phone,
-      message: formData.message,
-      org_id: orgId, // Pass orgId as a parameter or obtain it from your application context
-    };
-
-    return transformedData;
-  }
-
   const handleChange = (
     event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
   ) => {
@@ -104,7 +88,13 @@ const ContactForm: React.FC = () => {
     }
     try {
       const baseUrl = await getApiUrl();
-      const apiData = transformFormData(formData, org_id);
+      const apiData: TransformedData = {
+        full_name: formData.name,
+        email: formData.email,
+        phone_number: formData.phone,
+        message: formData.message,
+        org_id: session?.currentOrgId ?? "",
+      };
       setLoading(true);
       const response = await fetch(`${baseUrl}/api/v1/contact`, {
         method: "POST",
diff --git a/src/components/layouts/navbar/mobile-navbar.tsx b/src/components/layouts/navbar/mobile-navbar.tsx
index e2b563661..c81c18627 100644
--- a/src/components/layouts/navbar/mobile-navbar.tsx
+++ b/src/components/layouts/navbar/mobile-navbar.tsx
@@ -1,19 +1,20 @@
 import "./menu.css";
 
 import { motion, stagger, useAnimate } from "framer-motion";
+import { useSession } from "next-auth/react";
 import { useTranslations } from "next-intl";
 import Link from "next/link";
 import { useEffect, useState } from "react";
 
-import { useUser } from "~/hooks/user/use-user";
 import { cn } from "~/lib/utils";
 import { NAV_LINKS } from "./links";
 
 export default function MobileNav() {
   const [open, setOpen] = useState(false);
   const [scope, animate] = useAnimate();
-  const { user } = useUser();
   const t = useTranslations();
+  const { data: session } = useSession();
+  const user = session?.user;
 
   // the stagger effect
   const staggerList = stagger(0.1, { startDelay: 0.25 });
@@ -26,7 +27,7 @@ export default function MobileNav() {
       "ul",
       {
         width: open ? 180 : 0,
-        height: open && user.email ? 140 : open ? 250 : 0,
+        height: open && user?.email ? 140 : open ? 250 : 0,
         opacity: open ? 1 : 0,
       },
       {
@@ -45,7 +46,7 @@ export default function MobileNav() {
         delay: open ? staggerList : 0,
       },
     );
-  }, [animate, open, staggerList, user.email]);
+  }, [animate, open, staggerList, user?.email]);
 
   return (
     <>
diff --git a/src/config/auth.config.ts b/src/config/auth.config.ts
index 44768ac63..3206ae8d7 100644
--- a/src/config/auth.config.ts
+++ b/src/config/auth.config.ts
@@ -43,6 +43,7 @@ export default {
         }
 
         const user = {
+          ...response.data,
           ...response.data.user,
           access_token: response.access_token,
         };
@@ -73,7 +74,7 @@ export default {
           return token;
         }
 
-        const response = await googleAuth({ id_token: account?.id_token });
+        const response = await googleAuth(account?.id_token);
 
         if (!response.data) {
           token = {
@@ -127,21 +128,16 @@ export default {
       const customToken = token as CustomJWT;
       session.user = {
         id: customToken.id as string,
-        first_name:
-          customToken.first_name ||
-          customToken.name?.split(" ")[0] ||
-          customToken.fullname?.split(" ")[0] ||
-          "",
-        last_name:
-          customToken.last_name ||
-          customToken.name?.split(" ").slice(1).join(" ") ||
-          customToken.fullname?.split(" ").slice(1).join(" ") ||
-          "",
-        image: token.picture || customToken.avatar_url || "",
-        role: customToken.role as string,
-        email: token.email as string,
+        first_name: customToken.first_name,
+        last_name: customToken.last_name,
+        image: customToken.avatar_url || "",
+        email: customToken.email as string,
       };
       session.access_token = customToken.access_token;
+      session.userOrg = customToken.organisations;
+      session.currentOrgId =
+        customToken.organisations &&
+        customToken.organisations[0]?.organisation_id;
 
       return session;
     },
diff --git a/src/contexts/orgContext.tsx b/src/contexts/orgContext.tsx
index 7a90aeecc..9712adfaa 100644
--- a/src/contexts/orgContext.tsx
+++ b/src/contexts/orgContext.tsx
@@ -1,27 +1,34 @@
 "use client";
 
+import { useSession } from "next-auth/react";
 import React, {
   createContext,
   useCallback,
   useContext,
   useEffect,
-  useLayoutEffect,
-  useMemo,
   useState,
-  useTransition,
 } from "react";
 
-import { getAllProduct } from "~/actions/product";
-import { useLocalStorage } from "~/hooks/use-local-storage";
 import { DashboardData, MonthlyData, Organisation, Product } from "~/types";
-import {
-  getAllOrg,
-  getAnalytics,
-  getStatistics,
-} from "../actions/organization";
 
 type ActiveFilter = "in stock" | "out of stock" | "preorder" | "all";
 
+interface NotificationPreview {
+  message: string;
+  created_at: string;
+  is_read: boolean;
+  id: string;
+}
+
+interface NotificationsData {
+  data: {
+    total_unread_notification_count: number;
+    total_notification_count: number;
+    notifications: NotificationPreview[];
+  };
+  message: string;
+}
+
 interface OrgContextProperties {
   organizations: Organisation[];
   isLoading: boolean;
@@ -41,96 +48,55 @@ interface OrgContextProperties {
   isActionModal: boolean;
   setIsActionModal: React.Dispatch<React.SetStateAction<boolean>>;
   switchOrganization: (orgId: string) => void;
+  notifications: NotificationsData | undefined;
+}
+
+interface SessionCheckerProperties {
+  children: React.ReactNode;
 }
 
 export const OrgContext = createContext({} as OrgContextProperties);
 
-const OrgContextProvider = ({ children }: { children: React.ReactNode }) => {
-  const [organizations, setOrganizations] = useState<Organisation[]>([]);
-  const [isLoading, startTransition] = useTransition();
-  const [monthlyData, setMonthlydata] = useState<MonthlyData | undefined>();
-  const [dashboardData, setDashboardData] = useState<
-    DashboardData | undefined
-  >();
-  const [products, setProducts] = useState<Product[]>([]);
-  const [org_id, setOrgId] = useLocalStorage<string>("current_orgid", "");
-  const [selectedProduct, setSelectedProduct] = useState<string>("");
+interface ProviderProperties {
+  children: React.ReactNode;
+  initialData: {
+    monthlyData?: MonthlyData;
+    dashboardData?: DashboardData;
+    products?: Product[];
+    notifications?: NotificationsData;
+  };
+}
+const OrgContextProvider = (properties: ProviderProperties) => {
+  const { children, initialData } = properties;
+
+  const monthlyData = initialData.monthlyData;
+  const dashboardData = initialData.dashboardData;
+  const products = initialData.products || [];
+  const notifications = initialData.notifications;
+
+  const { data: session, update, status } = useSession();
+
+  const [selectedProduct, setSelectedProduct] = useState("");
   const [isNewModal, setIsNewModal] = useState(false);
   const [isDelete, setIsDelete] = useState(false);
   const [isOpen, updateOpen] = useState(false);
   const [isActionModal, setIsActionModal] = useState(false);
   const [active_filter, setActive_filter] = useState<ActiveFilter>("all");
-  const [userOrg] = useLocalStorage<Organisation[]>("user_org", []);
-
   const isAnyModalOpen = isNewModal || isDelete || isOpen || isActionModal;
+  const isLoading = status === "loading";
 
   const switchOrganization = useCallback(
     (orgId: string) => {
-      setOrgId(orgId);
+      if (session) {
+        const updatedSession = { ...session, currentOrgId: orgId };
+        update(() => updatedSession);
+      }
     },
-    [setOrgId],
+    [session, update],
   );
-
-  useLayoutEffect(() => {
-    if (organizations.length === 0) {
-      startTransition(() => {
-        getAllOrg().then((data) => {
-          const fetchedOrganizations = (data && data.organization) || [];
-          const newOrganizations = fetchedOrganizations.filter(
-            (fetchedOrg: { organisation_id: string }) =>
-              !organizations.some(
-                (org) => org.organisation_id === fetchedOrg.organisation_id,
-              ),
-          );
-
-          if (newOrganizations.length > 0) {
-            setOrganizations((previousOrganizations) => [
-              ...previousOrganizations,
-              ...newOrganizations,
-            ]);
-          }
-        });
-
-        getStatistics().then((subResponse) => {
-          setDashboardData(subResponse.data);
-        });
-
-        getAnalytics().then((data) => {
-          if (data && data.data) {
-            const formattedData: MonthlyData = Object.keys(data.data).map(
-              (key) => ({
-                month: key,
-                revenue: data.data[key],
-              }),
-            );
-            setMonthlydata(formattedData);
-          }
-        });
-      });
-    }
-  }, [organizations]);
-
-  useEffect(() => {
-    if (userOrg.length > 0) {
-      const uniqueOrgs = userOrg.filter(
-        (org) =>
-          !organizations.some(
-            (existingOrg) =>
-              existingOrg.organisation_id === org.organisation_id,
-          ),
-      );
-      setOrganizations((previousOrganizations) => [
-        ...previousOrganizations,
-        ...uniqueOrgs,
-      ]);
-    }
-  }, [userOrg, organizations]);
-
   useEffect(() => {
-    document.body.style.overflow = isAnyModalOpen ? "hidden" : "auto";
-
-    const handleKeyDown = (entries: KeyboardEvent) => {
-      if (entries.key === "Escape") {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") {
         setIsNewModal(false);
         setIsDelete(false);
         updateOpen(false);
@@ -138,60 +104,46 @@ const OrgContextProvider = ({ children }: { children: React.ReactNode }) => {
       }
     };
 
+    document.body.style.overflow = isAnyModalOpen ? "hidden" : "auto";
     document.addEventListener("keydown", handleKeyDown);
-
-    return () => {
-      document.removeEventListener("keydown", handleKeyDown);
-    };
+    return () => document.removeEventListener("keydown", handleKeyDown);
   }, [isAnyModalOpen]);
 
-  useLayoutEffect(() => {
-    if (!org_id || org_id === undefined) return;
-    startTransition(() => {
-      getAllProduct(org_id).then((data) => {
-        setProducts(data.products || []);
-      });
-    });
-  }, [org_id]);
+  function SessionChecker({ children }: SessionCheckerProperties) {
+    if (status === "loading") {
+      return <div>Loading...</div>;
+    }
 
-  const value = useMemo(
-    () => ({
-      isLoading,
-      organizations,
-      monthlyData,
-      dashboardData,
-      products,
-      selectedProduct,
-      setSelectedProduct,
-      isNewModal,
-      setIsNewModal,
-      isDelete,
-      setIsDelete,
-      isOpen,
-      updateOpen,
-      isActionModal,
-      setIsActionModal,
-      active_filter,
-      setActive_filter,
-      switchOrganization,
-    }),
-    [
-      isLoading,
-      organizations,
-      monthlyData,
-      dashboardData,
-      products,
-      selectedProduct,
-      isNewModal,
-      isDelete,
-      isOpen,
-      isActionModal,
-      active_filter,
-      switchOrganization,
-    ],
-  );
+    return <>{children}</>;
+  }
 
-  return <OrgContext.Provider value={value}>{children}</OrgContext.Provider>;
+  return (
+    <OrgContext.Provider
+      value={{
+        isLoading,
+        organizations: session?.userOrg || [],
+        monthlyData,
+        dashboardData,
+        products,
+        selectedProduct,
+        setSelectedProduct,
+        isNewModal,
+        setIsNewModal,
+        isDelete,
+        setIsDelete,
+        isOpen,
+        updateOpen,
+        isActionModal,
+        setIsActionModal,
+        active_filter,
+        setActive_filter,
+        switchOrganization,
+        notifications,
+      }}
+    >
+      <SessionChecker>{children}</SessionChecker>
+    </OrgContext.Provider>
+  );
 };
 
 export const useOrgContext = () => {
@@ -204,234 +156,3 @@ export const useOrgContext = () => {
 };
 
 export default OrgContextProvider;
-
-// "use client";
-
-// import React, {
-//   createContext,
-//   useContext,
-//   useEffect,
-//   useLayoutEffect,
-//   useMemo,
-//   useReducer,
-//   useTransition,
-// } from "react";
-
-// import { getAllProduct } from "~/actions/product";
-// import { useLocalStorage } from "~/hooks/use-local-storage";
-// import { DashboardData, MonthlyData, Organisation, Product } from "~/types";
-// import {
-//   getAllOrg,
-//   getAnalytics,
-//   getStatistics,
-// } from "../actions/organization";
-
-// type ActiveFilter = "in stock" | "out of stock" | "preorder" | "all";
-
-// interface OrgState {
-//   organizations: Organisation[];
-//   isLoading: boolean;
-//   monthlyData: MonthlyData | undefined;
-//   dashboardData: DashboardData | undefined;
-//   products: Product[];
-//   selectedProduct: string;
-//   isNewModal: boolean;
-//   isDelete: boolean;
-//   isOpen: boolean;
-//   isActionModal: boolean;
-//   active_filter: ActiveFilter;
-// }
-
-// type OrgAction =
-//   | { type: "SET_ORGANIZATIONS"; payload: Organisation[] }
-//   | { type: "SET_LOADING"; payload: boolean }
-//   | { type: "SET_MONTHLY_DATA"; payload: MonthlyData | undefined }
-//   | { type: "SET_DASHBOARD_DATA"; payload: DashboardData | undefined }
-//   | { type: "SET_PRODUCTS"; payload: Product[] }
-//   | { type: "SET_SELECTED_PRODUCT"; payload: string }
-//   | { type: "TOGGLE_NEW_MODAL"; payload: boolean }
-//   | { type: "TOGGLE_DELETE"; payload: boolean }
-//   | { type: "TOGGLE_OPEN"; payload: boolean }
-//   | { type: "TOGGLE_ACTION_MODAL"; payload: boolean }
-//   | { type: "SET_ACTIVE_FILTER"; payload: ActiveFilter };
-
-// const initialState: OrgState = {
-//   organizations: [],
-//   isLoading: false,
-//   monthlyData: undefined,
-//   dashboardData: undefined,
-//   products: [],
-//   selectedProduct: "",
-//   isNewModal: false,
-//   isDelete: false,
-//   isOpen: false,
-//   isActionModal: false,
-//   active_filter: "all",
-// };
-
-// function orgReducer(state: OrgState, action: OrgAction): OrgState {
-//   switch (action.type) {
-//     case "SET_ORGANIZATIONS": {
-//       return { ...state, organizations: action.payload };
-//     }
-//     case "SET_LOADING": {
-//       return { ...state, isLoading: action.payload };
-//     }
-//     case "SET_MONTHLY_DATA": {
-//       return { ...state, monthlyData: action.payload };
-//     }
-//     case "SET_DASHBOARD_DATA": {
-//       return { ...state, dashboardData: action.payload };
-//     }
-//     case "SET_PRODUCTS": {
-//       return { ...state, products: action.payload };
-//     }
-//     case "SET_SELECTED_PRODUCT": {
-//       return { ...state, selectedProduct: action.payload };
-//     }
-//     case "TOGGLE_NEW_MODAL": {
-//       return { ...state, isNewModal: action.payload };
-//     }
-//     case "TOGGLE_DELETE": {
-//       return { ...state, isDelete: action.payload };
-//     }
-//     case "TOGGLE_OPEN": {
-//       return { ...state, isOpen: action.payload };
-//     }
-//     case "TOGGLE_ACTION_MODAL": {
-//       return { ...state, isActionModal: action.payload };
-//     }
-//     case "SET_ACTIVE_FILTER": {
-//       return { ...state, active_filter: action.payload };
-//     }
-//     default: {
-//       return state;
-//     }
-//   }
-// }
-
-// export const OrgContext = createContext<{
-//   state: OrgState;
-//   dispatch: React.Dispatch<OrgAction>;
-// }>({ state: initialState, dispatch: () => {} });
-
-// const OrgContextProvider = ({ children }: { children: React.ReactNode }) => {
-//   const [state, dispatch] = useReducer(orgReducer, initialState);
-//   const [, startTransition] = useTransition();
-//   const [org_id] = useLocalStorage<string>("current_orgid", "");
-//   const [userOrg] = useLocalStorage<Organisation[]>("user_org", []);
-
-//   const isAnyModalOpen =
-//     state.isNewModal || state.isDelete || state.isOpen || state.isActionModal;
-
-//   useLayoutEffect(() => {
-//     if (state.organizations.length === 0) {
-//       startTransition(() => {
-//         getAllOrg().then((data) => {
-//           const fetchedOrganizations = data.organization || [];
-//           const newOrganizations = fetchedOrganizations.filter(
-//             (fetchedOrg: { organisation_id: string }) =>
-//               !state.organizations.some(
-//                 (org) => org.organisation_id === fetchedOrg.organisation_id,
-//               ),
-//           );
-
-//           if (newOrganizations.length > 0) {
-//             dispatch({
-//               type: "SET_ORGANIZATIONS",
-//               payload: [...state.organizations, ...newOrganizations],
-//             });
-//           }
-//         });
-
-//         getStatistics().then((subResponse) => {
-//           dispatch({
-//             type: "SET_DASHBOARD_DATA",
-//             payload: subResponse.data,
-//           });
-//         });
-
-//         getAnalytics().then((data) => {
-//           const formattedData: MonthlyData = Object.keys(data.data).map(
-//             (key) => ({
-//               month: key,
-//               revenue: data.data[key],
-//             }),
-//           );
-//           dispatch({
-//             type: "SET_MONTHLY_DATA",
-//             payload: formattedData,
-//           });
-//         });
-//       });
-//     }
-//   }, [state.organizations]);
-
-//   useEffect(() => {
-//     if (userOrg.length > 0) {
-//       const uniqueOrgs = userOrg.filter(
-//         (org) =>
-//           !state.organizations.some(
-//             (existingOrg) =>
-//               existingOrg.organisation_id === org.organisation_id,
-//           ),
-//       );
-//       dispatch({
-//         type: "SET_ORGANIZATIONS",
-//         payload: [...state.organizations, ...uniqueOrgs],
-//       });
-//     }
-//   }, [userOrg]);
-
-//   useEffect(() => {
-//     document.body.style.overflow = isAnyModalOpen ? "hidden" : "auto";
-
-//     const handleKeyDown = (entries: KeyboardEvent) => {
-//       if (entries.key === "Escape") {
-//         dispatch({ type: "TOGGLE_NEW_MODAL", payload: false });
-//         dispatch({ type: "TOGGLE_DELETE", payload: false });
-//         dispatch({ type: "TOGGLE_OPEN", payload: false });
-//         dispatch({ type: "TOGGLE_ACTION_MODAL", payload: false });
-//       }
-//     };
-
-//     document.addEventListener("keydown", handleKeyDown);
-
-//     return () => {
-//       document.removeEventListener("keydown", handleKeyDown);
-//     };
-//   }, [isAnyModalOpen]);
-
-//   useLayoutEffect(() => {
-//     if (!org_id || org_id === undefined) return;
-//     startTransition(() => {
-//       getAllProduct(org_id).then((data) => {
-//         dispatch({
-//           type: "SET_PRODUCTS",
-//           payload: data.products || [],
-//         });
-//       });
-//     });
-//   }, [org_id]);
-
-//   const value = useMemo(
-//     () => ({
-//       state,
-//       dispatch,
-//     }),
-//     [state],
-//   );
-
-//   return <OrgContext.Provider value={value}>{children}</OrgContext.Provider>;
-// };
-
-// export const useOrgContext = () => {
-//   const context = useContext(OrgContext);
-
-//   if (!context) {
-//     throw new Error("useOrgContext must be used within a OrgContextProvider");
-//   }
-//   return context;
-// };
-
-// export default OrgContextProvider;
diff --git a/src/lib/auth.ts b/src/lib/auth.ts
index 18de73deb..347e07c7c 100644
--- a/src/lib/auth.ts
+++ b/src/lib/auth.ts
@@ -1,7 +1,7 @@
 import NextAuth, { type DefaultSession } from "next-auth";
 
 import authConfig from "~/config/auth.config";
-import { User } from "~/types";
+import { Organisation, User } from "~/types";
 
 export const {
   handlers: { GET, POST },
@@ -19,11 +19,12 @@ declare module "next-auth" {
       last_name: User["last_name"];
       email: User["email"];
       image: User["avatar_url"];
-      role: User["role"];
       bio?: string;
       username?: string;
       is_superadmin?: boolean;
     } & DefaultSession["user"];
     access_token?: string;
+    currentOrgId?: string;
+    userOrg?: Organisation[];
   }
 }
diff --git a/src/test/blog/comment/comment-body.test.tsx b/src/test/blog/comment/comment-body.test.tsx
index 4fac54610..a486ccbf1 100644
--- a/src/test/blog/comment/comment-body.test.tsx
+++ b/src/test/blog/comment/comment-body.test.tsx
@@ -13,7 +13,6 @@ describe("comment body component", () => {
       last_name: "User",
       email: "user@example.com",
       image: "path/to/image",
-      role: "user",
     },
     access_token: "some-token",
     expires: "1",
@@ -35,6 +34,7 @@ describe("comment body component", () => {
         onLike={vi.fn()}
         onDislike={vi.fn()}
         onReply={vi.fn()}
+        isReplyActive={false}
       />,
     );
     expect(screen.getByTestId("comment-text")).toHaveTextContent(
@@ -64,6 +64,7 @@ describe("comment body component", () => {
         dislikes={0}
         onLike={mockOnLike}
         onDislike={mockOnDislike}
+        isReplyActive={false}
       />,
     );
 
@@ -93,6 +94,7 @@ describe("comment body component", () => {
         dislikes={3}
         onLike={vi.fn()}
         onDislike={vi.fn()}
+        isReplyActive={false}
       />,
     );
 
@@ -118,6 +120,7 @@ describe("comment body component", () => {
         onLike={vi.fn()}
         onDislike={vi.fn()}
         onReply={vi.fn()}
+        isReplyActive={false}
       />,
     );
 
@@ -142,6 +145,7 @@ describe("comment body component", () => {
         onLike={vi.fn()}
         onDislike={vi.fn()}
         onReply={vi.fn()}
+        isReplyActive={false}
       />,
     );
     expect(
diff --git a/src/test/blog/comment/comment-reply.test.tsx b/src/test/blog/comment/comment-reply.test.tsx
index ce980678e..9af91c8be 100644
--- a/src/test/blog/comment/comment-reply.test.tsx
+++ b/src/test/blog/comment/comment-reply.test.tsx
@@ -12,7 +12,6 @@ describe("comment reply component", () => {
       last_name: "User",
       email: "user@example.com",
       image: "path/to/image",
-      role: "user",
     },
     access_token: "some-token",
     expires: "1",
diff --git a/src/test/blog/comment/index.test.tsx b/src/test/blog/comment/index.test.tsx
index 47dc199bd..afc19231d 100644
--- a/src/test/blog/comment/index.test.tsx
+++ b/src/test/blog/comment/index.test.tsx
@@ -15,7 +15,6 @@ describe("comment box component", () => {
       last_name: "User",
       email: "user@example.com",
       image: "path/to/image",
-      role: "user",
     },
     access_token: "some-token",
     expires: "2100-01-01T00:00:00.000Z",
diff --git a/src/types/index.d.ts b/src/types/index.d.ts
index 6d117589b..a847ac733 100644
--- a/src/types/index.d.ts
+++ b/src/types/index.d.ts
@@ -6,24 +6,24 @@ export interface CustomJWT extends JWT {
   email?: string;
   picture?: string;
   avatar_url?: string;
-  role?: string;
   first_name?: string;
   last_name?: string;
   fullname?: string;
   access_token?: string;
+  organisations?: Organisation[];
 }
 export interface CustomSession extends Session {
   user: {
     id: string;
-    name: string;
     first_name: string;
     last_name: string;
     email: string;
     image: string;
-    role: string;
   };
   expires: DefaultSession["expires"];
   access_token?: string;
+  currentOrgId?: string;
+  userOrg?: Organisation[];
 }
 
 export interface User {

From 6e3c8ce0ccf55961b87bea11bd0179fa700d7c5f Mon Sep 17 00:00:00 2001
From: Prudent Bird <prudentbird@gmail.com>
Date: Sat, 24 Aug 2024 19:39:50 +0100
Subject: [PATCH 11/29] chore: fixed test errors

---
 .../forgot-password/page.test.tsx             | 45 +++++++++----------
 .../(landing-routes)/contact-us/page.test.tsx | 12 ++++-
 src/test/contact.test.tsx                     | 17 +++++--
 3 files changed, 45 insertions(+), 29 deletions(-)

diff --git a/src/app/(auth-routes)/forgot-password/page.test.tsx b/src/app/(auth-routes)/forgot-password/page.test.tsx
index 2381a2d7f..e3aebf1db 100644
--- a/src/app/(auth-routes)/forgot-password/page.test.tsx
+++ b/src/app/(auth-routes)/forgot-password/page.test.tsx
@@ -1,5 +1,4 @@
-import { fireEvent, render, screen, waitFor } from "@testing-library/react";
-
+import { fireEvent, render, screen, waitFor, act } from "@testing-library/react";
 import ForgotPassword from "./page";
 
 vi.mock("next/link", () => ({
@@ -12,13 +11,8 @@ describe("forgot password page", () => {
     render(<ForgotPassword />);
 
     expect(screen.getByText(/forgot password/i)).toBeInTheDocument();
-
     expect(screen.getByText(/enter the email address/i)).toBeInTheDocument();
-
-    expect(
-      screen.getByPlaceholderText(/enter your email/i),
-    ).toBeInTheDocument();
-
+    expect(screen.getByPlaceholderText(/enter your email/i)).toBeInTheDocument();
     expect(screen.getByText(/send/i)).toBeInTheDocument();
   });
 
@@ -30,15 +24,15 @@ describe("forgot password page", () => {
     const emailInput = screen.getByPlaceholderText(/enter your email/i);
     const sendButton = screen.getByText(/send/i);
 
-    fireEvent.change(emailInput, {
-      target: { value: "unregistered@example.com" },
+    await act(async () => {
+      fireEvent.change(emailInput, {
+        target: { value: "unregistered@example.com" },
+      });
+      fireEvent.click(sendButton);
     });
-    fireEvent.click(sendButton);
 
     await waitFor(() => {
-      expect(
-        screen.getByText(/this email doesn't match our records/i),
-      ).toBeInTheDocument();
+      expect(screen.getByText(/this email doesn't match our records/i)).toBeInTheDocument();
     });
   });
 
@@ -49,10 +43,12 @@ describe("forgot password page", () => {
     const emailInput = screen.getByPlaceholderText(/enter your email/i);
     const sendButton = screen.getByText(/send/i);
 
-    fireEvent.change(emailInput, {
-      target: { value: "invalid-email@example.com" },
+    await act(async () => {
+      fireEvent.change(emailInput, {
+        target: { value: "invalid-email@example.com" },
+      });
+      fireEvent.click(sendButton);
     });
-    fireEvent.click(sendButton);
 
     await waitFor(() => {
       expect(screen.queryByText("Verification Code")).not.toBeInTheDocument();
@@ -65,17 +61,16 @@ describe("forgot password page", () => {
 
     const emailInput = screen.getByPlaceholderText(/enter your email/i);
     const sendButton = screen.getByText(/send/i);
-    fireEvent.change(emailInput, {
-      target: { value: "invalid-email" },
+
+    await act(async () => {
+      fireEvent.change(emailInput, {
+        target: { value: "invalid-email" },
+      });
+      fireEvent.click(sendButton);
     });
-    fireEvent.click(sendButton);
 
     await waitFor(() => {
-      expect(
-        screen.getByText(
-          "This email doesn't match our records please try again",
-        ),
-      ).toBeInTheDocument();
+      expect(screen.getByText("This email doesn't match our records please try again")).toBeInTheDocument();
     });
   });
 });
diff --git a/src/app/(landing-routes)/contact-us/page.test.tsx b/src/app/(landing-routes)/contact-us/page.test.tsx
index dea52ad56..1c664c4ba 100644
--- a/src/app/(landing-routes)/contact-us/page.test.tsx
+++ b/src/app/(landing-routes)/contact-us/page.test.tsx
@@ -1,11 +1,21 @@
 import { render } from "~/test/utils";
 import Page from "./page";
+import { SessionProvider } from "next-auth/react";
+import { ReactNode } from 'react';
 
 describe("page tests", () => {
+
+  const renderWithSession = (component: ReactNode) => {
+    return render(
+      <SessionProvider session={null}>
+        {component}
+      </SessionProvider>
+    );
+  };
   it("should render correctly", () => {
     expect.assertions(1);
 
-    render(<Page />);
+    renderWithSession(<Page />);
 
     expect(true).toBeTruthy();
   });
diff --git a/src/test/contact.test.tsx b/src/test/contact.test.tsx
index f5e2ef608..658e6e659 100644
--- a/src/test/contact.test.tsx
+++ b/src/test/contact.test.tsx
@@ -1,11 +1,22 @@
 import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { SessionProvider } from "next-auth/react";
+import { ReactNode } from "react";
 
 import Contact from "~/app/(landing-routes)/contact-us/page";
 
 describe("contact Page tests", () => {
+
+  const renderWithSession = (component: ReactNode) => {
+    return render(
+      <SessionProvider session={null}>
+        {component}
+      </SessionProvider>
+    );
+  };
+
   it("should render the Contact Us form and content card correctly", () => {
     expect.assertions(4);
-    render(<Contact />);
+    renderWithSession(<Contact />);
 
     expect(screen.getByRole("form")).toBeInTheDocument();
 
@@ -18,7 +29,7 @@ describe("contact Page tests", () => {
 
   it("should validate the form inputs correctly", async () => {
     expect.assertions(1);
-    render(<Contact />);
+    renderWithSession(<Contact />);
 
     fireEvent.change(screen.getByLabelText(/email/i), {
       target: { value: "invalid-email" },
@@ -32,7 +43,7 @@ describe("contact Page tests", () => {
 
   it("should be responsive", () => {
     expect.assertions(2);
-    render(<Contact />);
+    renderWithSession(<Contact />);
 
     window.innerWidth = 320;
     window.dispatchEvent(new Event("resize"));

From 25e4a043596ff5db1cf3cfb9255d424db1b0e9c8 Mon Sep 17 00:00:00 2001
From: Prudent Bird <prudentbird@gmail.com>
Date: Sat, 24 Aug 2024 19:43:52 +0100
Subject: [PATCH 12/29] chore: fixed lint errors

---
 .../forgot-password/page.test.tsx             | 45 ++++++++++---------
 .../(landing-routes)/contact-us/page.test.tsx | 10 ++---
 src/test/contact.test.tsx                     |  5 +--
 3 files changed, 30 insertions(+), 30 deletions(-)

diff --git a/src/app/(auth-routes)/forgot-password/page.test.tsx b/src/app/(auth-routes)/forgot-password/page.test.tsx
index e3aebf1db..2381a2d7f 100644
--- a/src/app/(auth-routes)/forgot-password/page.test.tsx
+++ b/src/app/(auth-routes)/forgot-password/page.test.tsx
@@ -1,4 +1,5 @@
-import { fireEvent, render, screen, waitFor, act } from "@testing-library/react";
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+
 import ForgotPassword from "./page";
 
 vi.mock("next/link", () => ({
@@ -11,8 +12,13 @@ describe("forgot password page", () => {
     render(<ForgotPassword />);
 
     expect(screen.getByText(/forgot password/i)).toBeInTheDocument();
+
     expect(screen.getByText(/enter the email address/i)).toBeInTheDocument();
-    expect(screen.getByPlaceholderText(/enter your email/i)).toBeInTheDocument();
+
+    expect(
+      screen.getByPlaceholderText(/enter your email/i),
+    ).toBeInTheDocument();
+
     expect(screen.getByText(/send/i)).toBeInTheDocument();
   });
 
@@ -24,15 +30,15 @@ describe("forgot password page", () => {
     const emailInput = screen.getByPlaceholderText(/enter your email/i);
     const sendButton = screen.getByText(/send/i);
 
-    await act(async () => {
-      fireEvent.change(emailInput, {
-        target: { value: "unregistered@example.com" },
-      });
-      fireEvent.click(sendButton);
+    fireEvent.change(emailInput, {
+      target: { value: "unregistered@example.com" },
     });
+    fireEvent.click(sendButton);
 
     await waitFor(() => {
-      expect(screen.getByText(/this email doesn't match our records/i)).toBeInTheDocument();
+      expect(
+        screen.getByText(/this email doesn't match our records/i),
+      ).toBeInTheDocument();
     });
   });
 
@@ -43,12 +49,10 @@ describe("forgot password page", () => {
     const emailInput = screen.getByPlaceholderText(/enter your email/i);
     const sendButton = screen.getByText(/send/i);
 
-    await act(async () => {
-      fireEvent.change(emailInput, {
-        target: { value: "invalid-email@example.com" },
-      });
-      fireEvent.click(sendButton);
+    fireEvent.change(emailInput, {
+      target: { value: "invalid-email@example.com" },
     });
+    fireEvent.click(sendButton);
 
     await waitFor(() => {
       expect(screen.queryByText("Verification Code")).not.toBeInTheDocument();
@@ -61,16 +65,17 @@ describe("forgot password page", () => {
 
     const emailInput = screen.getByPlaceholderText(/enter your email/i);
     const sendButton = screen.getByText(/send/i);
-
-    await act(async () => {
-      fireEvent.change(emailInput, {
-        target: { value: "invalid-email" },
-      });
-      fireEvent.click(sendButton);
+    fireEvent.change(emailInput, {
+      target: { value: "invalid-email" },
     });
+    fireEvent.click(sendButton);
 
     await waitFor(() => {
-      expect(screen.getByText("This email doesn't match our records please try again")).toBeInTheDocument();
+      expect(
+        screen.getByText(
+          "This email doesn't match our records please try again",
+        ),
+      ).toBeInTheDocument();
     });
   });
 });
diff --git a/src/app/(landing-routes)/contact-us/page.test.tsx b/src/app/(landing-routes)/contact-us/page.test.tsx
index 1c664c4ba..5c4112890 100644
--- a/src/app/(landing-routes)/contact-us/page.test.tsx
+++ b/src/app/(landing-routes)/contact-us/page.test.tsx
@@ -1,15 +1,13 @@
+import { SessionProvider } from "next-auth/react";
+import { ReactNode } from "react";
+
 import { render } from "~/test/utils";
 import Page from "./page";
-import { SessionProvider } from "next-auth/react";
-import { ReactNode } from 'react';
 
 describe("page tests", () => {
-
   const renderWithSession = (component: ReactNode) => {
     return render(
-      <SessionProvider session={null}>
-        {component}
-      </SessionProvider>
+      <SessionProvider session={undefined}>{component}</SessionProvider>,
     );
   };
   it("should render correctly", () => {
diff --git a/src/test/contact.test.tsx b/src/test/contact.test.tsx
index 658e6e659..c0847a0e7 100644
--- a/src/test/contact.test.tsx
+++ b/src/test/contact.test.tsx
@@ -5,12 +5,9 @@ import { ReactNode } from "react";
 import Contact from "~/app/(landing-routes)/contact-us/page";
 
 describe("contact Page tests", () => {
-
   const renderWithSession = (component: ReactNode) => {
     return render(
-      <SessionProvider session={null}>
-        {component}
-      </SessionProvider>
+      <SessionProvider session={undefined}>{component}</SessionProvider>,
     );
   };
 

From e1d797ca01fe0f54c3477dfeabcddf503377c788 Mon Sep 17 00:00:00 2001
From: Muneerat <oladipomunirat@gmail.com>
Date: Fri, 23 Aug 2024 13:15:12 +0100
Subject: [PATCH 13/29] fix: add router for terms and privacy in footer bottom

---
 src/components/layouts/footer/index.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/layouts/footer/index.tsx b/src/components/layouts/footer/index.tsx
index f9cef3e04..6e0c3b550 100644
--- a/src/components/layouts/footer/index.tsx
+++ b/src/components/layouts/footer/index.tsx
@@ -152,8 +152,8 @@ const Footer = () => {
   ];
 
   const footerBottom = [
-    { route: "privacyPolicy", link: "/" },
-    { route: "termsOfUse", link: "/" },
+    { route: "privacyPolicy", link: "/privacy-policy" },
+    { route: "termsOfUse", link: "/terms-and-conditions" },
   ];
 
   //

From cb25f6b7db0fa230b9a161bf09fcf14689e5bc42 Mon Sep 17 00:00:00 2001
From: Muneerat <oladipomunirat@gmail.com>
Date: Sat, 24 Aug 2024 09:34:42 +0100
Subject: [PATCH 14/29] Fix  update placeholder

---
 src/app/dashboard/(admin)/admin/(settings)/settings/page.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/dashboard/(admin)/admin/(settings)/settings/page.tsx b/src/app/dashboard/(admin)/admin/(settings)/settings/page.tsx
index 909155e7e..0f26d3f06 100644
--- a/src/app/dashboard/(admin)/admin/(settings)/settings/page.tsx
+++ b/src/app/dashboard/(admin)/admin/(settings)/settings/page.tsx
@@ -270,7 +270,7 @@ export default function SettingsPage() {
               onValueChange={(value) => setPronoun(value)}
             >
               <SelectTrigger className="w-full rounded-md border border-slate-300 bg-white text-sm font-medium text-slate-700 focus:border-orange-500 focus:ring-0">
-                <SelectValue placeholder="Select language" />
+                <SelectValue placeholder="Select" />
               </SelectTrigger>
               <SelectContent>
                 {pronouns.map((pronoun) => (

From f7f8a3e51a30af221df0c316758679daad4dc68f Mon Sep 17 00:00:00 2001
From: Muneerat <oladipomunirat@gmail.com>
Date: Sat, 24 Aug 2024 10:01:16 +0100
Subject: [PATCH 15/29] fix/update invite member modal title and dropdown

---
 src/components/common/modals/invite-member/index.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/common/modals/invite-member/index.tsx b/src/components/common/modals/invite-member/index.tsx
index ce0f294af..ee93cd2b4 100644
--- a/src/components/common/modals/invite-member/index.tsx
+++ b/src/components/common/modals/invite-member/index.tsx
@@ -154,14 +154,14 @@ const InviteMemberModal: React.FC<ModalProperties> = ({ show, onClose }) => {
             </div>
             <div>
               <label className="mb-2 block text-left text-base text-neutral-dark-2">
-                Add to Organization (Optional)
+                Invite as
               </label>
               <Select
                 onOpenChange={handleOrganizationDropdownOpen}
                 onValueChange={handleOrganizationChange}
               >
                 <SelectTrigger className="bg-white">
-                  <SelectValue placeholder="Select Organization" />
+                  <SelectValue placeholder="Select Role" />
                 </SelectTrigger>
                 <SelectContent>
                   <SelectGroup>

From 2709a95f894808f8f0d08f446d2a7f1ba015504a Mon Sep 17 00:00:00 2001
From: Muneerat <oladipomunirat@gmail.com>
Date: Sat, 24 Aug 2024 11:34:22 +0100
Subject: [PATCH 16/29] fix/link go to plans

---
 .../(settings)/settings/organization/members/page.tsx      | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/app/dashboard/(admin)/admin/(settings)/settings/organization/members/page.tsx b/src/app/dashboard/(admin)/admin/(settings)/settings/organization/members/page.tsx
index 65c41b98b..e7b948454 100644
--- a/src/app/dashboard/(admin)/admin/(settings)/settings/organization/members/page.tsx
+++ b/src/app/dashboard/(admin)/admin/(settings)/settings/organization/members/page.tsx
@@ -2,6 +2,7 @@
 
 import { AxiosResponse } from "axios";
 import { EllipsisIcon } from "lucide-react";
+import Link from "next/link";
 import { useState } from "react";
 
 import CustomButton from "~/components/common/common-button/common-button";
@@ -201,7 +202,11 @@ const Members = () => {
         <p className="text-sm">
           On the Free plan all members in a workspace are administrators.
           Upgrade to a paid plan to add the ability to assign or remove
-          administrator roles. <span className="text-primary">Go to Plans</span>
+          administrator roles.{" "}
+          <Link href="/dashboard/admin/settings/payment-information">
+            {" "}
+            <span className="text-primary">Go to Plans</span>
+          </Link>
         </p>
       </div>
       <div className="my-8 flex justify-between">

From 89ab9bd1afc662e69886901a5236697a222ffe4e Mon Sep 17 00:00:00 2001
From: JoshuaAkpan <joshuaakpan7@gmail.com>
Date: Sat, 24 Aug 2024 01:02:54 +0100
Subject: [PATCH 17/29] feat: enhance create role form with validation and
 error handling

---
 .../create-role/page.tsx                      | 41 +++++++++++++++----
 src/schemas/index.ts                          | 23 ++++++++---
 2 files changed, 51 insertions(+), 13 deletions(-)

diff --git a/src/app/dashboard/(admin)/admin/(settings)/settings/organization/roles-and-permissions/create-role/page.tsx b/src/app/dashboard/(admin)/admin/(settings)/settings/organization/roles-and-permissions/create-role/page.tsx
index 0333ece7a..35330829d 100644
--- a/src/app/dashboard/(admin)/admin/(settings)/settings/organization/roles-and-permissions/create-role/page.tsx
+++ b/src/app/dashboard/(admin)/admin/(settings)/settings/organization/roles-and-permissions/create-role/page.tsx
@@ -137,8 +137,9 @@ function CreateNewRolePage() {
     handleSubmit,
     formState: { errors },
     setValue,
+    trigger,
   } = useForm<UseFormInputs>({
-    mode: "onBlur",
+    mode: "onChange",
     resolver: zodResolver(roleSchema),
   });
 
@@ -207,6 +208,10 @@ function CreateNewRolePage() {
     }
   };
 
+  const handleInputChange = (field: keyof UseFormInputs) => {
+    trigger(field);
+  };
+
   return (
     <div className="flex w-full max-w-[682px] flex-col gap-6">
       <div className="flex flex-col gap-2">
@@ -237,17 +242,28 @@ function CreateNewRolePage() {
             <input
               type="text"
               placeholder="e.g: IT Staff"
-              {...register("name")}
-              className="!w-full rounded-md border border-border bg-transparent px-3 py-2 shadow-sm outline-none focus:border-primary focus:ring-ring md:w-56"
+              {...register("name", {
+                onChange: () => handleInputChange("name"),
+              })}
+              className={`!w-full rounded-md border ${
+                errors.name ? "border-red-500" : "border-border"
+              } bg-transparent px-3 py-2 shadow-sm outline-none focus:border-primary focus:ring-ring md:w-56`}
             />
+            {errors.name && (
+              <p className="mt-1 text-sm text-red-500">{errors.name.message}</p>
+            )}
           </div>
+
           <div className="flex w-full max-w-[620px] flex-col gap-2">
             <label className="block text-left text-base font-bold text-neutral-dark-2">
               Permissions
             </label>
             <div className="flex flex-col gap-0.5">
               <Select
-                onValueChange={(value) => setPermissions(JSON.parse(value))}
+                onValueChange={(value) => {
+                  setPermissions(JSON.parse(value));
+                  trigger("permissions");
+                }}
               >
                 <SelectTrigger className="!text-left">
                   <SelectValue
@@ -269,7 +285,9 @@ function CreateNewRolePage() {
                 </SelectContent>
               </Select>
               {errors.permissions && (
-                <p className="text-red-500">Please select valid permissions.</p>
+                <p className="mt-1 text-sm text-red-500">
+                  {errors.permissions.message}
+                </p>
               )}
             </div>
           </div>
@@ -279,9 +297,18 @@ function CreateNewRolePage() {
             </label>
             <textarea
               placeholder="describe role"
-              {...register("description")}
-              className="min-h-20 w-full resize-none rounded-md border border-border bg-transparent px-3 py-2 shadow-sm outline-none focus:border-primary focus:ring-ring"
+              {...register("description", {
+                onChange: () => handleInputChange("description"),
+              })}
+              className={`min-h-20 w-full resize-none rounded-md border ${
+                errors.description ? "border-red-500" : "border-border"
+              } bg-transparent px-3 py-2 shadow-sm outline-none focus:border-primary focus:ring-ring`}
             />
+            {errors.description && (
+              <p className="mt-1 text-sm text-red-500">
+                {errors.description.message}
+              </p>
+            )}
           </div>
         </div>
         <div className="flex gap-x-6">
diff --git a/src/schemas/index.ts b/src/schemas/index.ts
index 734a3fe96..74c9a6868 100644
--- a/src/schemas/index.ts
+++ b/src/schemas/index.ts
@@ -121,14 +121,25 @@ export const permissionsSchema = z.object({
   "Can create users": z.boolean(),
   "Can blacklist/whitelist users": z.boolean(),
 });
+
 export const roleSchema = z.object({
-  name: z.string().min(2, {
-    message: "name is required",
-  }),
+  name: z
+    .string()
+    .min(2, { message: "Name is required" })
+    .max(50, { message: "Name must be 50 characters or less" })
+    .regex(/^[a-zA-Z0-9 .,!?()-]+$/, {
+      message:
+        "Name can only include letters, numbers, spaces, and common punctuation marks",
+    }),
+  description: z
+    .string()
+    .min(10, { message: "Role description must be at least 10 characters" })
+    .max(200, { message: "Role description must be 200 characters or less" })
+    .regex(/^[a-zA-Z0-9 .,!?()-]+$/, {
+      message:
+        "Description can only include letters, numbers, spaces, and common punctuation marks",
+    }),
   permissions: z
     .array(z.string().uuid())
     .nonempty("At least one permission must be selected"),
-  description: z.string().min(2, {
-    message: "Role description must be at least 2 characters.",
-  }),
 });

From e2108b0d84243d464bccc5b3519b5a4eb25a089c Mon Sep 17 00:00:00 2001
From: JoshuaAkpan <joshuaakpan7@gmail.com>
Date: Sat, 24 Aug 2024 01:56:10 +0100
Subject: [PATCH 18/29] fix: fix lint error by optimizing regex

---
 src/schemas/index.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/schemas/index.ts b/src/schemas/index.ts
index 74c9a6868..03bf949cc 100644
--- a/src/schemas/index.ts
+++ b/src/schemas/index.ts
@@ -127,7 +127,7 @@ export const roleSchema = z.object({
     .string()
     .min(2, { message: "Name is required" })
     .max(50, { message: "Name must be 50 characters or less" })
-    .regex(/^[a-zA-Z0-9 .,!?()-]+$/, {
+    .regex(/^[\d !(),.?A-Za-z-]+$/, {
       message:
         "Name can only include letters, numbers, spaces, and common punctuation marks",
     }),
@@ -135,7 +135,7 @@ export const roleSchema = z.object({
     .string()
     .min(10, { message: "Role description must be at least 10 characters" })
     .max(200, { message: "Role description must be 200 characters or less" })
-    .regex(/^[a-zA-Z0-9 .,!?()-]+$/, {
+    .regex(/^[\d !(),.?A-Za-z-]+$/, {
       message:
         "Description can only include letters, numbers, spaces, and common punctuation marks",
     }),

From d9f07344e3243ac600bc10ccab563440c3e60f22 Mon Sep 17 00:00:00 2001
From: Oluwaseyi Tommy <130176232+seshconcept@users.noreply.github.com>
Date: Sat, 24 Aug 2024 00:09:09 +0100
Subject: [PATCH 19/29] Fix: responsiveness and uniform alignment of waitlist
 page.

---
 src/components/waitList/WaitListForm.tsx    | 12 +++++------
 src/components/waitList/WaitlistDialog.tsx  | 22 ++++++++++++---------
 src/components/waitList/WaitlistJoin.tsx    | 10 +++++-----
 src/components/waitList/WaitlistPayment.tsx |  6 ++++--
 4 files changed, 28 insertions(+), 22 deletions(-)

diff --git a/src/components/waitList/WaitListForm.tsx b/src/components/waitList/WaitListForm.tsx
index 549d53c73..f997e6591 100644
--- a/src/components/waitList/WaitListForm.tsx
+++ b/src/components/waitList/WaitListForm.tsx
@@ -122,7 +122,7 @@ const WaitlistForm: React.FC = () => {
   };
 
   return (
-    <div className="mt-20 flex flex-col items-center justify-center text-neutral-dark-2">
+    <div className="mt-20 flex flex-col items-center justify-center text-neutral-dark-2 ">
       <div className="flex flex-col items-center justify-center text-center md:mb-[50px] md:w-[623px]">
         <div className="mb-4 flex items-center justify-center gap-2 md:mb-[18px]">
           <Image
@@ -131,19 +131,19 @@ const WaitlistForm: React.FC = () => {
             src="/images/WaitList/circle 1.svg"
             alt="Circle with Tick"
           />
-          <h3 className="text-[18px] font-normal leading-5 md:text-[24px]">
+          <h3 className="text-sm font-normal leading-5 md:text-[24px]">
             Deployment made easy
           </h3>
         </div>
-        <h1 className="mb-2 w-[320px] text-[24px] font-bold leading-7 md:h-[108px] md:w-[623px] md:text-[36px] md:leading-10">
+        <h1 className="mb-2 w-[320px] text-2xl font-bold leading-8 md:h-[108px] md:w-[623px] md:text-[36px] lg:text-4xl lg:font-semibold lg:leading-10">
           You can level up your SaaS production today
         </h1>
-        <h1 className="text-center text-[16px] font-normal leading-5 md:text-[20px] md:leading-7">
+        <h1 className="text-center text-base font-normal leading-7 md:text-[20px] md:leading-7">
           Join our waitlist and get early access to our boilerplates
         </h1>
       </div>
 
-      <div className="mt-[52px] flex h-auto w-[383.344px] shrink-0 items-start gap-[19.2px] rounded-md border border-gray-300 p-7 md:mt-5 md:w-[510px] md:p-2.5">
+      <div className="mb-24 mt-[52px] flex h-auto w-[383.344px] shrink-0 items-start gap-[19.2px] rounded-md border border-gray-200 p-7 md:mt-5 md:w-[510px] md:p-2.5">
         {isSubmitted ? (
           <div className="flex w-full flex-col items-center justify-center">
             <Image
@@ -162,7 +162,7 @@ const WaitlistForm: React.FC = () => {
               <div className="mb-6 h-[90px]">
                 <label
                   htmlFor="full_name"
-                  className="mb-5 block text-left text-lg font-normal text-neutral-dark-2"
+                  className="mb-5 block text-left text-lg font-normal text-[#0A0A0A]"
                 >
                   Full Name
                 </label>
diff --git a/src/components/waitList/WaitlistDialog.tsx b/src/components/waitList/WaitlistDialog.tsx
index 39dd00a89..ce4c98955 100644
--- a/src/components/waitList/WaitlistDialog.tsx
+++ b/src/components/waitList/WaitlistDialog.tsx
@@ -4,8 +4,8 @@ import React from "react";
 const WaitlistDialog: React.FC = () => {
   return (
     <div className="flex flex-col items-center justify-center">
-      <div className="mt-[20px] flex flex-col items-center justify-center gap-[20px] text-neutral-dark-2 md:mt-[60px] md:flex-row md:gap-[57px]">
-        <div className="flex w-[320px] shrink-0 flex-col items-start rounded-[8px] border-[1px] border-neutral-dark-1 p-[24px] transition-transform duration-300 hover:scale-105 hover:bg-gray-50 hover:shadow-lg">
+      <div className="mt-[20px] grid grid-cols-1 gap-[20px] md:px-2 lg:grid-cols-3 lg:gap-[40px]">
+        <div className="flex shrink-0 flex-col items-start rounded-[8px] border-[1px] border-neutral-300 p-[24px] transition-transform duration-300 hover:scale-105 hover:bg-gray-50 hover:shadow-lg md:w-[500px] lg:w-[300px]">
           <div className="flex h-[53px] w-[53px] shrink-0 items-center justify-center rounded-full bg-primary">
             <Image
               src="/images/WaitList/Vector.svg"
@@ -14,7 +14,7 @@ const WaitlistDialog: React.FC = () => {
               height="25"
             />
           </div>
-          <h1 className="mt-[12px] text-[18px] font-semibold leading-[28px]">
+          <h1 className="mt-[12px] text-xl font-semibold leading-[28px]">
             Easy Customization
           </h1>
           <p className="w-[252px] text-[14px] font-normal leading-[20px]">
@@ -22,7 +22,7 @@ const WaitlistDialog: React.FC = () => {
             maximum results
           </p>
         </div>
-        <div className="flex w-[320px] shrink-0 flex-col items-start rounded-[8px] border-[1px] border-neutral-dark-1 p-[24px] transition-transform duration-300 hover:scale-105 hover:bg-gray-50 hover:shadow-lg">
+        <div className="flex shrink-0 flex-col items-start rounded-[8px] border-[1px] border-neutral-300 p-[24px] transition-transform duration-300 hover:scale-105 hover:bg-gray-50 hover:shadow-lg md:w-[500px] lg:w-[300px]">
           <div className="flex h-[53px] w-[53px] shrink-0 items-center justify-center rounded-full bg-primary">
             <Image
               src="/images/WaitList/pie-chart2.svg"
@@ -31,7 +31,7 @@ const WaitlistDialog: React.FC = () => {
               height="30"
             />
           </div>
-          <h1 className="mt-[12px] text-[18px] font-semibold leading-[28px]">
+          <h1 className="mt-[12px] text-xl font-semibold leading-[28px]">
             Scalable Foundation
           </h1>
           <p className="w-[252px] text-[14px] font-normal leading-[20px]">
@@ -39,7 +39,7 @@ const WaitlistDialog: React.FC = () => {
             product
           </p>
         </div>
-        <div className="flex w-[320px] shrink-0 flex-col items-start rounded-[8px] border-[1px] border-neutral-dark-1 p-[24px] transition-transform duration-300 hover:scale-105 hover:bg-gray-50 hover:shadow-lg">
+        <div className="flex shrink-0 flex-col items-start rounded-[8px] border-[1px] border-neutral-300 p-[24px] transition-transform duration-300 hover:scale-105 hover:bg-gray-50 hover:shadow-lg md:w-[500px] lg:w-[300px]">
           <div className="flex h-[53px] w-[53px] shrink-0 items-center justify-center rounded-full bg-primary">
             <Image
               src="/images/WaitList/activity 2.svg"
@@ -48,7 +48,7 @@ const WaitlistDialog: React.FC = () => {
               height="36"
             />
           </div>
-          <h1 className="mt-[12px] text-[18px] font-semibold leading-[28px]">
+          <h1 className="mt-[12px] text-xl font-semibold leading-[28px]">
             Pre-built Sections
           </h1>
           <p className="w-[252px] text-[14px] font-normal leading-[20px]">
@@ -65,8 +65,12 @@ const WaitlistDialog: React.FC = () => {
           <div className="boorder-white ml-[-16px] h-[40px] w-[40px] rounded-full border-[1px] bg-gray-300"></div>
         </div>
         <div>
-          <p className="text-[12px] text-neutral-dark-1">Resource variety</p>
-          <h1 className="text-[16px] font-bold">150+ Team support</h1>
+          <p className="text-[12px] font-normal leading-4 text-gray-400">
+            Resource variety
+          </p>
+          <h1 className="text-[16px] font-medium leading-5">
+            150+ Team support
+          </h1>
         </div>
       </div>
     </div>
diff --git a/src/components/waitList/WaitlistJoin.tsx b/src/components/waitList/WaitlistJoin.tsx
index bbcdc9239..c2a7f1c06 100644
--- a/src/components/waitList/WaitlistJoin.tsx
+++ b/src/components/waitList/WaitlistJoin.tsx
@@ -14,21 +14,21 @@ const scrollToForm = () => {
 const WaitlistJoin: React.FC = () => {
   return (
     <div className="mt-[10px] flex flex-col items-center justify-center text-neutral-dark-2 md:mt-[10px]">
-      <div className="mb-[10px] rounded-md bg-slate-200 px-3 text-[20px] font-normal">
+      <div className="mb-[10px] rounded-md bg-[#F1F1F1] px-3 text-[20px] font-normal leading-6">
         waitlist
       </div>
-      <div className="mt-[10px] flex h-auto w-[322px] flex-col items-center justify-center text-center md:mt-[25px] md:w-[1104px] md:gap-[15px]">
-        <h1 className="text-[32px] font-bold leading-[38.73px] md:text-[60px] md:leading-[72.61px]">
+      <div className="mt-[10px] flex h-auto w-[322px] flex-col items-center justify-center text-center md:mt-[25px] md:w-[700px] md:gap-[15px] lg:w-[1004px]">
+        <h1 className="text-3xl font-bold leading-normal md:text-3xl md:leading-[72.61px] lg:text-5xl">
           Join the waitlist and get early{" "}
           <span className="text-primary">access!</span>
         </h1>
-        <p className="text-16px leading-bormal mt-[12px] w-[322px] font-normal md:mt-0 md:w-[802px] md:text-[28px]">
+        <p className="mt-[12px] w-[322px] text-lg font-normal leading-6 md:mt-0 md:w-[802px] md:text-2xl md:leading-9 lg:text-2xl">
           Transform your remote work meetings into fun and engaging sessions
           with our innovative game-based platform.
         </p>
       </div>
       <div className="mt-[20px] h-[54px] w-[322px] text-center font-semibold leading-[28px] md:mt-[30px] md:h-[28px] md:w-[584px]">
-        <p className="text-[20px]">
+        <p className="text-lg font-bold leading-6 text-[#525252] md:font-medium md:leading-7">
           Be a part of the first 2300 users for a{" "}
           <span className="text-primary">10% discount</span>{" "}
         </p>
diff --git a/src/components/waitList/WaitlistPayment.tsx b/src/components/waitList/WaitlistPayment.tsx
index 9fa2a9991..947bf9096 100644
--- a/src/components/waitList/WaitlistPayment.tsx
+++ b/src/components/waitList/WaitlistPayment.tsx
@@ -95,8 +95,10 @@ const WaitlistPayment: React.FC = () => {
   return (
     <div className="mt-[60px] flex flex-col items-center justify-center px-3 text-neutral-dark-2 md:mt-[100px] md:flex-col">
       <div className="text-center">
-        <p className="text-[18px] md:text-[24px]">We have got you covered</p>
-        <h1 className="h-[87px] w-[332px] text-[24px] font-bold leading-[29.05px] md:h-[132px] md:w-[669px] md:text-[36px] md:leading-[43.57px]">
+        <p className="text-[18px] font-normal leading-8 md:text-[24px]">
+          We have got you covered
+        </p>
+        <h1 className="mb-6 mt-3 h-[87px] w-[332px] text-[24px] font-bold leading-[29.05px] md:h-[132px] md:w-[632px] md:text-[36px] md:leading-[43.57px] lg:w-[950px]">
           Transform your Deployment the easy and seamless way with our
           boilerplates.
         </h1>

From ac44cfddfd9699632bb3397feed58f179fc1f1ab Mon Sep 17 00:00:00 2001
From: Oluwaseyi Tommy <130176232+seshconcept@users.noreply.github.com>
Date: Sat, 24 Aug 2024 01:06:23 +0100
Subject: [PATCH 20/29] Fix: responsiveness and uniform alignment of waitlist
 page.

---
 src/components/waitList/WaitListForm.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/waitList/WaitListForm.tsx b/src/components/waitList/WaitListForm.tsx
index f997e6591..d3950373b 100644
--- a/src/components/waitList/WaitListForm.tsx
+++ b/src/components/waitList/WaitListForm.tsx
@@ -122,7 +122,7 @@ const WaitlistForm: React.FC = () => {
   };
 
   return (
-    <div className="mt-20 flex flex-col items-center justify-center text-neutral-dark-2 ">
+    <div className="mt-20 flex flex-col items-center justify-center text-neutral-dark-2">
       <div className="flex flex-col items-center justify-center text-center md:mb-[50px] md:w-[623px]">
         <div className="mb-4 flex items-center justify-center gap-2 md:mb-[18px]">
           <Image

From 9fed4eac192cba984c8cda99f285be1fa11ce751 Mon Sep 17 00:00:00 2001
From: Mary <101870828+Chioma227@users.noreply.github.com>
Date: Fri, 23 Aug 2024 18:52:25 +0100
Subject: [PATCH 21/29] chore: fix
 Non-Functional-Terms-of-Service-and-Privacy-Policy-Links

---
 src/app/(auth-routes)/login/page.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/(auth-routes)/login/page.tsx b/src/app/(auth-routes)/login/page.tsx
index 553cfd797..269782fdb 100644
--- a/src/app/(auth-routes)/login/page.tsx
+++ b/src/app/(auth-routes)/login/page.tsx
@@ -283,14 +283,14 @@ const Login = () => {
           <ShieldCheck className="mr-1 hidden h-4 w-4 text-gray-400 sm:inline-block" />
           {t("agree")}{" "}
           <a
-            href="#"
+            href="/terms-and-conditions"
             className="text-sm font-bold text-primary hover:text-orange-500"
           >
             {t("termsOfService")}
           </a>{" "}
           {t("and")}{" "}
           <a
-            href="#"
+            href="/privacy-policy"
             className="text-sm font-bold text-primary hover:text-orange-500"
           >
             {t("privacyPolicy")}

From 7e9ff42172486af029f878a3c1c7dbf83056aea4 Mon Sep 17 00:00:00 2001
From: Mary <101870828+Chioma227@users.noreply.github.com>
Date: Fri, 23 Aug 2024 19:03:15 +0100
Subject: [PATCH 22/29] chore: remove duplicate contactUs from help-center

---
 src/app/(landing-routes)/help-center/page.tsx | 11 -----------
 1 file changed, 11 deletions(-)

diff --git a/src/app/(landing-routes)/help-center/page.tsx b/src/app/(landing-routes)/help-center/page.tsx
index 26ff2313b..768041179 100644
--- a/src/app/(landing-routes)/help-center/page.tsx
+++ b/src/app/(landing-routes)/help-center/page.tsx
@@ -114,17 +114,6 @@ const HelpCenter = () => {
               >
                 Frequently Asked Questions
               </h1>
-
-              <p className="mb-3 text-[18px] text-neutral-600">
-                We couldn&apos;t answer your question?
-              </p>
-
-              <Link
-                href="/contact-us"
-                className="align-center flex w-[150px] justify-center rounded-md border border-[#0A0A0A] bg-[#FFF] py-4 text-[#0F172A] hover:bg-accent hover:text-accent-foreground"
-              >
-                Contact us
-              </Link>
             </div>
 
             <FaqAccordion faqs={faqData} containerClassName="px-0 py-0 " />

From 5b2012a9b67f09b6d2346d851694911fc3f58a1f Mon Sep 17 00:00:00 2001
From: Prudent Bird <prudentbird@gmail.com>
Date: Fri, 23 Aug 2024 19:42:46 +0100
Subject: [PATCH 23/29] chore: bug fixes

---
 src/components/authproviders/AuthProvider.tsx | 11 -----------
 1 file changed, 11 deletions(-)
 delete mode 100644 src/components/authproviders/AuthProvider.tsx

diff --git a/src/components/authproviders/AuthProvider.tsx b/src/components/authproviders/AuthProvider.tsx
deleted file mode 100644
index dcaa74598..000000000
--- a/src/components/authproviders/AuthProvider.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-function AuthProvider({ title }: { title: string }) {
-  return (
-    <>
-      <button className="flex items-center gap-2 rounded-md border border-gray-200 p-4">
-        {title}
-      </button>
-    </>
-  );
-}
-
-export default AuthProvider;

From 86fb5bd3930f9e98a7de2e01cc2265ecbec1b07a Mon Sep 17 00:00:00 2001
From: Prudent Bird <prudentbird@gmail.com>
Date: Sat, 24 Aug 2024 18:58:10 +0100
Subject: [PATCH 24/29] chore: resolve unhandled runtime errors and types

---
 hng_boilerplate_nextjs_project                |   1 -
 package.json                                  |   3 +-
 .../notifications/getAllNotifications.ts      |   4 +-
 src/actions/organization.ts                   |   7 +-
 src/actions/product.ts                        |   1 -
 src/actions/socialAuth.ts                     |   6 +-
 src/app/(auth-routes)/login/page.tsx          |  71 ++-
 .../blog/[id]/_components/BlogDetailsPage.tsx |   1 -
 .../(landing-routes)/blog/comments/page.tsx   |   1 -
 .../_components/layout/sidebar/index.tsx      |   6 +-
 .../create-role/page.tsx                      |   6 +-
 .../roles-and-permissions/page.tsx            |  23 +-
 .../(user-metrics)/layout.tsx                 |   2 +-
 .../_components/layout/navbar/index.tsx       |  65 +--
 .../layout/navbar/organisation-switcher.tsx   |  63 +--
 .../_components/overview-revenue/index.tsx    |  89 ++--
 src/app/dashboard/(user-dashboard)/layout.tsx |   2 +-
 .../_components/new-product-modal.tsx         |   7 +-
 .../_components/product-delete-modal.tsx      |  37 +-
 .../_components/product-detail-modal.tsx      |  42 +-
 .../_components/product-detail-view.tsx       |  37 +-
 src/app/dashboard/layout.tsx                  |  42 +-
 src/app/invite/page.tsx                       |  12 +-
 src/components/card/user-card.tsx             |  61 +--
 .../common/contact-us-form/index.tsx          |  28 +-
 .../layouts/navbar/mobile-navbar.tsx          |   9 +-
 src/config/auth.config.ts                     |  24 +-
 src/contexts/orgContext.tsx                   | 449 ++++--------------
 src/lib/auth.ts                               |   5 +-
 src/test/blog/comment/comment-body.test.tsx   |   6 +-
 src/test/blog/comment/comment-reply.test.tsx  |   1 -
 src/test/blog/comment/index.test.tsx          |   1 -
 src/types/index.d.ts                          |   6 +-
 33 files changed, 363 insertions(+), 755 deletions(-)
 delete mode 160000 hng_boilerplate_nextjs_project

diff --git a/hng_boilerplate_nextjs_project b/hng_boilerplate_nextjs_project
deleted file mode 160000
index 8fc1b95c0..000000000
--- a/hng_boilerplate_nextjs_project
+++ /dev/null
@@ -1 +0,0 @@
-Subproject commit 8fc1b95c0e495b78b6b2d20e43b85695edcafec9
diff --git a/package.json b/package.json
index 00d899270..de17b7cb7 100644
--- a/package.json
+++ b/package.json
@@ -16,7 +16,8 @@
     "test:ci": "vitest --coverage",
     "email:dev": "email dev --dir \"./src/email/templates\"",
     "email:build": "email build --dir \"./src/email/templates\"",
-    "email:start": "email start"
+    "email:start": "email start",
+    "typecheck": "tsc --project tsconfig.json --noEmit"
   },
   "dependencies": {
     "@hookform/resolvers": "^3.9.0",
diff --git a/src/actions/notifications/getAllNotifications.ts b/src/actions/notifications/getAllNotifications.ts
index c7389fb9f..456b27580 100644
--- a/src/actions/notifications/getAllNotifications.ts
+++ b/src/actions/notifications/getAllNotifications.ts
@@ -3,10 +3,10 @@
 import axios from "axios";
 
 import { auth } from "~/lib/auth";
-import { getApiUrl } from "../getApiUrl";
+
+const apiUrl = process.env.API_URL;
 
 export const getAllNotifications = async () => {
-  const apiUrl = await getApiUrl();
   const session = await auth();
   try {
     const response = await axios.get(`${apiUrl}/api/v1/notifications`, {
diff --git a/src/actions/organization.ts b/src/actions/organization.ts
index 36f321737..ac83db272 100644
--- a/src/actions/organization.ts
+++ b/src/actions/organization.ts
@@ -102,8 +102,13 @@ export const getAnalytics = async () => {
       },
     });
 
+    const formattedData = Object.keys(response.data.data).map((key) => ({
+      month: key,
+      revenue: response.data.data[key],
+    }));
+
     return {
-      data: response.data.data,
+      data: formattedData,
     };
   } catch (error) {
     return axios.isAxiosError(error) && error.response
diff --git a/src/actions/product.ts b/src/actions/product.ts
index b527d36c9..e9fe607f6 100644
--- a/src/actions/product.ts
+++ b/src/actions/product.ts
@@ -70,7 +70,6 @@ export const getAllProduct = async (org_id: string) => {
     );
     return {
       products: response.data.data,
-      response: response,
     };
   } catch (error) {
     return axios.isAxiosError(error) && error.response
diff --git a/src/actions/socialAuth.ts b/src/actions/socialAuth.ts
index 0673e95b5..1324573ac 100644
--- a/src/actions/socialAuth.ts
+++ b/src/actions/socialAuth.ts
@@ -2,14 +2,14 @@
 
 import axios from "axios";
 
-import { AuthResponse, ErrorResponse, Profile } from "~/types";
+import { AuthResponse, ErrorResponse } from "~/types";
 
 const apiUrl = process.env.API_URL;
 
-const googleAuth = async (profile: Profile): Promise<AuthResponse> => {
+const googleAuth = async (idToken: string): Promise<AuthResponse> => {
   try {
     const response = await axios.post(`${apiUrl}/api/v1/auth/google`, {
-      id_token: profile.id_token,
+      id_token: idToken,
     });
 
     return {
diff --git a/src/app/(auth-routes)/login/page.tsx b/src/app/(auth-routes)/login/page.tsx
index 269782fdb..5251e9fee 100644
--- a/src/app/(auth-routes)/login/page.tsx
+++ b/src/app/(auth-routes)/login/page.tsx
@@ -10,7 +10,6 @@ import { useEffect, useState, useTransition } from "react";
 import { useForm } from "react-hook-form";
 import * as z from "zod";
 
-import { loginUser } from "~/actions/login";
 import CustomButton from "~/components/common/common-button/common-button";
 import { Input } from "~/components/common/input";
 import LoadingSpinner from "~/components/miscellaneous/loading-spinner";
@@ -24,28 +23,22 @@ import {
   FormMessage,
 } from "~/components/ui/form";
 import { useToast } from "~/components/ui/use-toast";
-import { useLocalStorage } from "~/hooks/use-local-storage";
 import { cn } from "~/lib/utils";
 import { LoginSchema } from "~/schemas";
-import { Organisation } from "~/types";
 
 const Login = () => {
   const t = useTranslations("login");
   const router = useRouter();
   const { toast } = useToast();
-  const { status } = useSession();
   const [isLoading, startTransition] = useTransition();
   const [showPassword, setShowPassword] = useState(false);
-  const [, setUserOrg] = useLocalStorage<Organisation[]>("user_org", []);
-
-  const [currentOrgId, setCurrentOrgId] = useLocalStorage<string | undefined>(
-    "current_orgid",
-    "",
-  );
+  const { status } = useSession();
 
-  if (status === "authenticated") {
-    router.push("/dashboard");
-  }
+  useEffect(() => {
+    if (status === "authenticated") {
+      router.push("/dashboard");
+    }
+  }, [status, router]);
 
   const form = useForm<z.infer<typeof LoginSchema>>({
     resolver: zodResolver(LoginSchema),
@@ -55,34 +48,37 @@ const Login = () => {
       rememberMe: false,
     },
   });
-
   const onSubmit = async (values: z.infer<typeof LoginSchema>) => {
-    startTransition(async () => {
-      await loginUser(values).then(async (data) => {
-        const { email, password } = values;
+    const { email, password } = values;
 
-        if (data.status === 200) {
-          setUserOrg(data.organisations);
-          if (!currentOrgId && data.organisations.length > 0) {
-            setCurrentOrgId(data.organisations[0].organisation_id);
-          }
-          await signIn(
-            "credentials",
-            {
-              email,
-              password,
-              redirect: false,
-            },
-            { callbackUrl: "/dashboard" },
-          );
+    try {
+      startTransition(async () => {
+        const result = await signIn("credentials", {
+          email,
+          password,
+          redirect: false,
+        });
+
+        if (result?.ok) {
           router.push("/dashboard");
+          toast({
+            title: "Login success",
+            description: "Redirecting",
+          });
+        } else {
+          toast({
+            title: "An error occurred",
+            description: result?.error || "Unknown error",
+          });
         }
-        toast({
-          title: data.status === 200 ? "Login success" : "An error occurred",
-          description: data.status === 200 ? "Redirecting" : data.error,
-        });
       });
-    });
+    } catch (error) {
+      toast({
+        title: "Login failed",
+        description:
+          (error as Error).message || "An error occurred during login",
+      });
+    }
   };
 
   const togglePasswordVisibility = () => {
@@ -91,6 +87,7 @@ const Login = () => {
   useEffect(() => {
     document.title = "Login";
   }, []);
+
   return (
     <div className="flex min-h-full items-center justify-center px-4 py-10 sm:px-6 lg:px-8">
       <div className="w-full max-w-md space-y-6">
@@ -106,7 +103,7 @@ const Login = () => {
           <CustomButton
             variant="outline"
             isLeftIconVisible={true}
-            onClick={() => signIn("google", { callbackUrl: "/dashboard" })}
+            onClick={() => signIn("google", { callbackUrl: "/" })}
             icon={
               <svg
                 width="25"
diff --git a/src/app/(landing-routes)/blog/[id]/_components/BlogDetailsPage.tsx b/src/app/(landing-routes)/blog/[id]/_components/BlogDetailsPage.tsx
index 4eceb676f..71819d4ae 100644
--- a/src/app/(landing-routes)/blog/[id]/_components/BlogDetailsPage.tsx
+++ b/src/app/(landing-routes)/blog/[id]/_components/BlogDetailsPage.tsx
@@ -22,7 +22,6 @@ const mockSession: Session = {
     last_name: "User",
     email: "user@example.com",
     image: "path/to/image",
-    role: "user",
   },
   access_token: "some-token",
   expires: "2100-01-01T00:00:00.000Z",
diff --git a/src/app/(landing-routes)/blog/comments/page.tsx b/src/app/(landing-routes)/blog/comments/page.tsx
index 1f205e1ed..669d30c3d 100644
--- a/src/app/(landing-routes)/blog/comments/page.tsx
+++ b/src/app/(landing-routes)/blog/comments/page.tsx
@@ -12,7 +12,6 @@ const CommentPage = () => {
       last_name: "User",
       email: "user@example.com",
       image: "path/to/image",
-      role: "user",
     },
     access_token: "some-token",
     expires: "1",
diff --git a/src/app/dashboard/(admin)/admin/(settings)/settings/_components/layout/sidebar/index.tsx b/src/app/dashboard/(admin)/admin/(settings)/settings/_components/layout/sidebar/index.tsx
index 48d8aabe8..f65b5e87f 100644
--- a/src/app/dashboard/(admin)/admin/(settings)/settings/_components/layout/sidebar/index.tsx
+++ b/src/app/dashboard/(admin)/admin/(settings)/settings/_components/layout/sidebar/index.tsx
@@ -12,12 +12,12 @@ import {
   UserRoundCog,
   UsersIcon,
 } from "lucide-react";
+import { useSession } from "next-auth/react";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { FC, ForwardRefExoticComponent, RefAttributes } from "react";
 
 import { useOrgContext } from "~/contexts/orgContext";
-import { useLocalStorage } from "~/hooks/use-local-storage";
 
 const sideItems = [
   {
@@ -96,10 +96,10 @@ const SettingsSidebar: FC<Iproperties> = ({ sideNavitems = sideItems }) => {
     pathname?.split("/").length == 2 ? "general" : pathname?.split("/")[3];
   const organizationPath = pathname?.split("/")[4];
   const { organizations } = useOrgContext();
-  const [org_id] = useLocalStorage<string>("current_orgid", "");
+  const { data: session } = useSession();
 
   const organization = organizations.find(
-    (org) => org.organisation_id === org_id,
+    (org) => org.organisation_id === session?.currentOrgId,
   );
 
   return (
diff --git a/src/app/dashboard/(admin)/admin/(settings)/settings/organization/roles-and-permissions/create-role/page.tsx b/src/app/dashboard/(admin)/admin/(settings)/settings/organization/roles-and-permissions/create-role/page.tsx
index 35330829d..a55dfa546 100644
--- a/src/app/dashboard/(admin)/admin/(settings)/settings/organization/roles-and-permissions/create-role/page.tsx
+++ b/src/app/dashboard/(admin)/admin/(settings)/settings/organization/roles-and-permissions/create-role/page.tsx
@@ -2,6 +2,7 @@
 
 import { zodResolver } from "@hookform/resolvers/zod";
 import { ChevronLeftIcon } from "lucide-react";
+import { useSession } from "next-auth/react";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { useEffect, useState } from "react";
@@ -19,7 +20,6 @@ import {
   SelectValue,
 } from "~/components/ui/select";
 import { toast } from "~/components/ui/use-toast";
-import { useLocalStorage } from "~/hooks/use-local-storage";
 import { roleSchema } from "~/schemas";
 
 type UseFormInputs = z.infer<typeof roleSchema>;
@@ -123,7 +123,7 @@ const transformPermissions = (apiResponse: APIPermissions[]) => {
 
 function CreateNewRolePage() {
   const router = useRouter();
-  const [currentOrgId] = useLocalStorage<string>("current_orgid", "");
+  const { data: session } = useSession();
   const [isSaving, setIsSaving] = useState(false);
   const [permissions, setPermissions] = useState<
     PermissionOption["permissions"] | []
@@ -175,7 +175,7 @@ function CreateNewRolePage() {
   const onValid = async (values: UseFormInputs) => {
     setIsSaving(true);
     try {
-      await createRole(values, currentOrgId)
+      await createRole(values, session?.currentOrgId ?? "")
         .then((data) => {
           if (!data.error) {
             toast({
diff --git a/src/app/dashboard/(admin)/admin/(settings)/settings/organization/roles-and-permissions/page.tsx b/src/app/dashboard/(admin)/admin/(settings)/settings/organization/roles-and-permissions/page.tsx
index 11d6b6349..0ec979fa5 100644
--- a/src/app/dashboard/(admin)/admin/(settings)/settings/organization/roles-and-permissions/page.tsx
+++ b/src/app/dashboard/(admin)/admin/(settings)/settings/organization/roles-and-permissions/page.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { useSession } from "next-auth/react";
 import Link from "next/link";
 import { useEffect, useState } from "react";
 
@@ -13,7 +14,6 @@ import {
 import CustomButton from "~/components/common/common-button/common-button";
 import LoadingSpinner from "~/components/miscellaneous/loading-spinner";
 import { useToast } from "~/components/ui/use-toast";
-import { useLocalStorage } from "~/hooks/use-local-storage";
 
 type Role = {
   id: string;
@@ -39,18 +39,15 @@ const RolesAndPermission = () => {
   const [loadingRoles, setLoadingRoles] = useState<boolean>(true);
   const [loadingPermissions, setLoadingPermissions] = useState<boolean>(false);
   const [loadingRequest, setLoadingRequest] = useState<boolean>(false);
-  const [currentOrgId] = useLocalStorage<string | undefined>(
-    "current_orgid",
-    "",
-  );
+  const { data: session } = useSession();
 
   useEffect(() => {
-    if (!currentOrgId) return;
+    if (!session?.currentOrgId) return;
     const fetchData = async () => {
       try {
         const url = await getApiUrl();
         setApiUrl(url);
-        const { data, error } = await getRoles(currentOrgId);
+        const { data, error } = await getRoles(session?.currentOrgId ?? "");
 
         if (error) throw new Error("An error occurred!");
 
@@ -68,14 +65,14 @@ const RolesAndPermission = () => {
     };
     setLoadingRoles(true);
     fetchData();
-  }, [currentOrgId, toast]);
+  }, [session?.currentOrgId, toast]);
 
   useEffect(() => {
     const fetchPermissions = async () => {
-      if (selectedRoleId && currentOrgId) {
+      if (selectedRoleId && session?.currentOrgId) {
         setLoadingPermissions(true);
         try {
-          await getRolePermissions(currentOrgId, selectedRoleId).then(
+          await getRolePermissions(session?.currentOrgId, selectedRoleId).then(
             (data) => {
               const rolesData = data.data;
               if (rolesData.permissions.length > 0) {
@@ -99,7 +96,7 @@ const RolesAndPermission = () => {
       }
     };
     fetchPermissions();
-  }, [selectedRoleId, apiUrl, currentOrgId, toast]);
+  }, [selectedRoleId, apiUrl, session?.currentOrgId, toast]);
 
   useEffect(() => {
     const fetchPermissions = async () => {
@@ -132,7 +129,7 @@ const RolesAndPermission = () => {
   };
 
   const handleSave = async () => {
-    if (!selectedRoleId || !currentOrgId) return;
+    if (!selectedRoleId || !session?.currentOrgId) return;
     const selectedRole =
       roles.some((role) => role.id === selectedRoleId) &&
       roles.find((role) => role.id === selectedRoleId);
@@ -141,7 +138,7 @@ const RolesAndPermission = () => {
     try {
       await updateRole(
         { ...selectedRole, permissions },
-        currentOrgId,
+        session?.currentOrgId,
         selectedRoleId,
       ).then(() => {
         toast({
diff --git a/src/app/dashboard/(user-dashboard)/(user-metrics)/layout.tsx b/src/app/dashboard/(user-dashboard)/(user-metrics)/layout.tsx
index dbe5f72ec..41a7552da 100644
--- a/src/app/dashboard/(user-dashboard)/(user-metrics)/layout.tsx
+++ b/src/app/dashboard/(user-dashboard)/(user-metrics)/layout.tsx
@@ -22,7 +22,7 @@ const links = [
 export default function UserMetricsLayout({ children }: PropsWithChildren) {
   return (
     <div className="flex h-full flex-col gap-[37px] bg-background p-4">
-      <div className="flex flex-wrap items-center justify-between gap-x-6 gap-y-2 pt-6">
+      <div className="flex flex-wrap items-end justify-between gap-x-6 gap-y-2 pt-6">
         <div className="space-y-6">
           <h1 className="text-2xl font-semibold lg:text-[30px]">Dashboard</h1>
           <Tablinks links={links} />
diff --git a/src/app/dashboard/(user-dashboard)/_components/layout/navbar/index.tsx b/src/app/dashboard/(user-dashboard)/_components/layout/navbar/index.tsx
index d537b16e7..bf87dedb9 100644
--- a/src/app/dashboard/(user-dashboard)/_components/layout/navbar/index.tsx
+++ b/src/app/dashboard/(user-dashboard)/_components/layout/navbar/index.tsx
@@ -1,11 +1,7 @@
 "use client";
 
 import { BellIcon, HelpCircle } from "lucide-react";
-import { useSession } from "next-auth/react";
-import { useRouter } from "next/navigation";
-import { useEffect, useState } from "react";
 
-import { getAllNotifications } from "~/actions/notifications/getAllNotifications";
 import UnreadNotificationCard from "~/app/dashboard/(admin)/_components/unread-notification-card/UnreadNotificationCard";
 import { MobileNavlinks } from "~/app/dashboard/(user-dashboard)/_components/layout/navbar/mobile-navlinks";
 import { Navlinks } from "~/app/dashboard/(user-dashboard)/_components/layout/navbar/navlinks";
@@ -16,62 +12,23 @@ import {
   PopoverContent,
   PopoverTrigger,
 } from "~/components/ui/popover";
+import { useOrgContext } from "~/contexts/orgContext";
 import { OrganisationSwitcher } from "./organisation-switcher";
 
-interface NotificationPreview {
-  message: string;
-  created_at: string;
-  is_read: boolean;
-  id: string;
-}
-
-interface NotificationsData {
-  data: {
-    total_unread_notification_count: number;
-    total_notification_count: number;
-    notifications: NotificationPreview[];
-  };
-  message: string;
-}
-
 const UserNavbar = () => {
-  const [notifications, setNotifications] =
-    useState<NotificationsData | null>();
-  const { status } = useSession();
-  const router = useRouter();
-
-  useEffect(() => {
-    if (status === "unauthenticated") {
-      router.push("/login");
-    }
-  }, [status, router]);
-
-  useEffect(() => {
-    async function fetchNotifications() {
-      const result = await getAllNotifications();
-
-      if (result.error) {
-        return result.error;
-      } else {
-        setNotifications(result.data as NotificationsData);
-      }
-    }
-
-    fetchNotifications();
-  }, []);
+  const { notifications } = useOrgContext();
 
   const totalUnreadNotificationCount =
-    notifications?.data.total_unread_notification_count || 0;
+    notifications?.data?.total_unread_notification_count || 0;
 
   const totalNotificationCount =
-    notifications?.data.total_notification_count || 0;
-  const notificationContent: NotificationPreview[] =
-    notifications?.data.notifications || [];
+    notifications?.data?.total_notification_count || 0;
+  const notificationContent = notifications?.data?.notifications || [];
 
   return (
     <nav
       className="bg-white px-5 py-2.5 md:left-[220px] lg:left-[252px]"
-      role="navbar"
+      role="navigation"
     >
       <div className="flex items-center justify-between gap-2">
         <div className="flex gap-[50px]">
@@ -89,6 +46,7 @@ const UserNavbar = () => {
               <PopoverTrigger>
                 <BellIcon
                   data-testid="bell"
+                  aria-label="Notifications"
                   className="h-6 w-6 text-neutral-dark-2 transition-colors duration-300 hover:cursor-pointer hover:text-neutral-dark-1"
                 />
               </PopoverTrigger>
@@ -104,17 +62,14 @@ const UserNavbar = () => {
                 />
               </PopoverContent>
             </Popover>
-            {notifications && (
-              <>
-                {totalNotificationCount > 0 && (
-                  <span className="absolute right-1 top-0 h-[6px] w-[6px] rounded-full bg-error"></span>
-                )}
-              </>
+            {totalUnreadNotificationCount > 0 && (
+              <span className="absolute right-1 top-0 h-[6px] w-[6px] rounded-full bg-error"></span>
             )}
           </div>
           <div className="max-sm:hidden">
             <HelpCircle
               data-testid="help"
+              aria-label="Help"
               className="h-6 w-6 text-neutral-dark-2 transition-colors duration-300 hover:cursor-pointer hover:text-neutral-dark-1"
             />
           </div>
diff --git a/src/app/dashboard/(user-dashboard)/_components/layout/navbar/organisation-switcher.tsx b/src/app/dashboard/(user-dashboard)/_components/layout/navbar/organisation-switcher.tsx
index 36b1f6e0a..6f5b447e6 100644
--- a/src/app/dashboard/(user-dashboard)/_components/layout/navbar/organisation-switcher.tsx
+++ b/src/app/dashboard/(user-dashboard)/_components/layout/navbar/organisation-switcher.tsx
@@ -1,8 +1,8 @@
-"use client ";
+"use client";
 
-import { useEffect, useState } from "react";
+import { useSession } from "next-auth/react";
+import { useState } from "react";
 
-import { getCurrentOrgApi } from "~/actions/switchOrganization";
 import { Avatar, AvatarFallback, AvatarImage } from "~/components/ui/avatar";
 import { Button } from "~/components/ui/button";
 import {
@@ -14,43 +14,30 @@ import {
 } from "~/components/ui/select";
 import { Skeleton } from "~/components/ui/skeleton";
 import { useOrgContext } from "~/contexts/orgContext";
-import { useLocalStorage } from "~/hooks/use-local-storage";
 import { CreateOrganization } from "../../create-organization";
 
 export const OrganisationSwitcher = () => {
-  const [currentOrgId, setCurrentOrgId] = useLocalStorage<string | undefined>(
-    "current_orgid",
-    "",
-  );
-
-  const { organizations, isLoading, switchOrganization } = useOrgContext();
+  const { data: session } = useSession();
+  const { isLoading, switchOrganization } = useOrgContext();
 
-  useEffect(() => {
-    if (!currentOrgId && organizations.length > 0) {
-      setCurrentOrgId(organizations[0].organisation_id);
-      switchOrganization(organizations[0].organisation_id);
-    }
-    // console.log(organizations);
-  }, [currentOrgId, organizations, setCurrentOrgId, switchOrganization]);
-
-  const handleOrgChange = (currentOrg: string) => {
-    setCurrentOrgId(currentOrg);
-    switchOrganization(currentOrg);
-    getCurrentOrgApi({ orgId: currentOrg });
+  // Ensure that switchOrganization is properly defined and used
+  const handleOrgChange = (currentOrgId: string) => {
+    switchOrganization(currentOrgId);
   };
 
-  const currentOrg =
-    organizations.length > 0
-      ? organizations.find((org) => org.organisation_id === currentOrgId)
-      : undefined;
+  // Ensure currentOrg is correctly derived
+  const currentOrg = session?.userOrg?.find(
+    (org) => org.organisation_id === session.currentOrgId,
+  );
 
+  // State to manage the modal visibility
   const [isOpen, setIsOpen] = useState(false);
 
   return (
     <>
       <CreateOrganization isOpen={isOpen} setIsOpen={setIsOpen} />
       <Select
-        defaultValue={currentOrgId}
+        defaultValue={currentOrg?.name}
         onValueChange={(value) => handleOrgChange(value)}
       >
         <SelectTrigger
@@ -60,31 +47,33 @@ export const OrganisationSwitcher = () => {
           {isLoading ? (
             <Skeleton className="h-4 w-full" />
           ) : (
-            <SelectValue placeholder={currentOrg?.name}>
-              <span className="ml-2">{currentOrg && currentOrg.name}</span>
+            <SelectValue placeholder="Select an organization">
+              <span className="ml-2">
+                {currentOrg?.name || "No Organization Selected"}
+              </span>
             </SelectValue>
           )}
         </SelectTrigger>
         <SelectContent>
-          {organizations.map((org) => (
-            <SelectItem key={org.id} value={org.organisation_id}>
-              <div className="flex items-center gap-3 [&_svg]:h-4 [&_svg]:w-4 [&_svg]:shrink-0 [&_svg]:text-foreground">
-                <Avatar className="size-4 sm:size-3">
+          {session?.userOrg?.map((org) => (
+            <SelectItem key={org.organisation_id} value={org.organisation_id}>
+              <div className="flex items-center gap-3">
+                <Avatar className="h-4 w-4 sm:h-3 sm:w-3">
                   <AvatarImage src={""} />
                   <AvatarFallback className="bg-primary/30 uppercase">
-                    {org?.name?.charAt(0)}
+                    {org.name?.charAt(0)}
                   </AvatarFallback>
-                </Avatar>{" "}
+                </Avatar>
                 {org.name}
               </div>
             </SelectItem>
           ))}
           <Button
             variant="outline"
-            className="w-full"
+            className="mt-2 w-full"
             onClick={() => setIsOpen(!isOpen)}
           >
-            Create Organisation
+            Create Organization
           </Button>
         </SelectContent>
       </Select>
diff --git a/src/app/dashboard/(user-dashboard)/_components/overview-revenue/index.tsx b/src/app/dashboard/(user-dashboard)/_components/overview-revenue/index.tsx
index 10642e0eb..1e3335ebf 100644
--- a/src/app/dashboard/(user-dashboard)/_components/overview-revenue/index.tsx
+++ b/src/app/dashboard/(user-dashboard)/_components/overview-revenue/index.tsx
@@ -1,93 +1,60 @@
 "use client";
 
-import { useEffect, useState } from "react";
-
-import { dashboard } from "~/actions/dashboard";
 import { revenueData } from "~/app/dashboard/(user-dashboard)/_components/overview-revenue/revenueData";
 import CardComponent from "~/components/common/DashboardCard/CardComponent";
 import { useOrgContext } from "~/contexts/orgContext";
 
-interface dashboard {
-  revenue: number;
-  subscriptions: number;
-  sales: number;
-  activeSubscription: number;
-  monthSales: [
-    {
-      id: string;
-      user_id: string;
-      product_id: string;
-      subscription_id: string;
-      type: string;
-      status: string;
-      partners: string;
-      amount: number;
-      reference: string;
-      created_at: string;
-      paid_at: string;
-      modified_at: string;
-    },
-  ];
-}
 export function OverviewRevenue() {
-  const [dashboardObjectData, setDashboardObjectData] = useState<dashboard>();
-  useEffect(() => {
-    getDashboardData();
-  }, []);
-  const getDashboardData = async () => {
-    const data = await dashboard();
-    setDashboardObjectData(data);
-  };
   const { isLoading, dashboardData } = useOrgContext();
+
+  // If dashboardData is undefined or still loading, render a loading state
+  if (isLoading || !dashboardData) {
+    return (
+      <div className="mb-6 mt-4 grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-4">
+        {/* Placeholder card components or a loading spinner */}
+        {revenueData.map((data, index) => (
+          <CardComponent
+            key={index}
+            title={data.title}
+            value={0} // Default value during loading
+            percentage={0} // Default percentage during loading
+            icon={data.icon}
+            loading={true} // Indicate that the card is in a loading state
+          />
+        ))}
+      </div>
+    );
+  }
+
   return (
     <div className="mb-6 mt-4 grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-4">
       <CardComponent
         title={revenueData[0].title}
-        // title={revenueData[0].title}
-        value={dashboardObjectData?.revenue || 0}
-        // value={dashboardData?.revenue.current_month || 0}
-        percentage={dashboardData?.revenue.percentage_difference || 0}
-        // percentage={dashboardData?.revenue.percentage_difference || 0}
+        value={dashboardData.revenue.current_month || 0}
+        percentage={dashboardData.revenue.percentage_difference || 0}
         icon={revenueData[0].icon}
-        // icon={revenueData[0].icon}
         loading={isLoading}
-        // loading={isLoading}
       />
       <CardComponent
         title={revenueData[1].title}
-        // title={revenueData[1].title}
-        value={dashboardObjectData?.subscriptions || 0}
-        // value={dashboardData?.Subscriptions.current_month || 0}
-        percentage={dashboardData?.Subscriptions.percentage_difference || 0}
-        // percentage={dashboardData?.Subscriptions.percentage_difference || 0}
+        value={dashboardData.Subscriptions.current_month || 0}
+        percentage={dashboardData.Subscriptions.percentage_difference || 0}
         icon={revenueData[1].icon}
-        // icon={revenueData[1].icon}
         loading={isLoading}
-        // loading={isLoading}
       />
       <CardComponent
         title={revenueData[2].title}
-        // title={revenueData[2].title}
-        value={dashboardObjectData?.sales || 0}
-        // value={dashboardData?.orders.current_month || 0}
-        percentage={dashboardData?.orders.percentage_difference || 0}
-        // percentage={dashboardData?.orders.percentage_difference || 0}
+        value={dashboardData.orders.current_month || 0}
+        percentage={dashboardData.orders.percentage_difference || 0}
         icon={revenueData[2].icon}
-        // icon={revenueData[2].icon}
         loading={isLoading}
-        // loading={isLoading}
       />
       <CardComponent
         title={revenueData[3].title}
-        // title={revenueData[3].title}
-        value={dashboardObjectData?.activeSubscription || 0}
-        // value={dashboardData?.active_users.current || 0}
-        percentage={dashboardData?.active_users.difference_an_hour_ago || 0}
-        // percentage={dashboardData?.active_users.difference_an_hour_ago || 0}
+        value={dashboardData.active_users.current || 0}
+        percentage={dashboardData.active_users.difference_an_hour_ago || 0}
         icon={revenueData[3].icon}
-        // icon={revenueData[3].icon}
         loading={isLoading}
-        // loading={isLoading}
         isUser
       />
     </div>
diff --git a/src/app/dashboard/(user-dashboard)/layout.tsx b/src/app/dashboard/(user-dashboard)/layout.tsx
index 9448e15dc..b03d8ab91 100644
--- a/src/app/dashboard/(user-dashboard)/layout.tsx
+++ b/src/app/dashboard/(user-dashboard)/layout.tsx
@@ -21,7 +21,7 @@ export default function AdminLayout({
           <div className="w-[calc(100%_-_50px)] flex-1">
             <Suspense>{children}</Suspense>
           </div>
-        </div>{" "}
+        </div>
       </div>
     </div>
   );
diff --git a/src/app/dashboard/(user-dashboard)/products/_components/new-product-modal.tsx b/src/app/dashboard/(user-dashboard)/products/_components/new-product-modal.tsx
index f12531b9f..69f7b2c77 100644
--- a/src/app/dashboard/(user-dashboard)/products/_components/new-product-modal.tsx
+++ b/src/app/dashboard/(user-dashboard)/products/_components/new-product-modal.tsx
@@ -2,6 +2,7 @@
 import { zodResolver } from "@hookform/resolvers/zod";
 import { AnimatePresence, motion } from "framer-motion";
 import { Loader, X } from "lucide-react";
+import { useSession } from "next-auth/react";
 import Image from "next/image";
 import { useState, useTransition } from "react";
 import { useForm } from "react-hook-form";
@@ -32,7 +33,6 @@ import {
 import { Textarea } from "~/components/ui/textarea";
 import { useToast } from "~/components/ui/use-toast";
 import { useOrgContext } from "~/contexts/orgContext";
-import { useLocalStorage } from "~/hooks/use-local-storage";
 import { cn } from "~/lib/utils";
 import { productSchema } from "~/schemas";
 import { CloudinaryAsset } from "~/types";
@@ -43,7 +43,7 @@ const NewProductModal = () => {
   const { setIsNewModal, isNewModal } = useOrgContext();
   const [image, setImage] = useState<File | Blob>();
   const [isLoading, startTransition] = useTransition();
-  const [org_id] = useLocalStorage<string>("current_orgid", "");
+  const { data: session } = useSession();
 
   const variantProperties = {
     left: "50%",
@@ -82,7 +82,8 @@ const NewProductModal = () => {
         values.image_url = data.url;
       });
 
-      await createProduct(values, org_id).then((data) => {
+      if (session?.currentOrgId === undefined) return;
+      await createProduct(values, session?.currentOrgId).then((data) => {
         if (data.status === 201) {
           newProductForm.reset();
           setIsNewModal(false);
diff --git a/src/app/dashboard/(user-dashboard)/products/_components/product-delete-modal.tsx b/src/app/dashboard/(user-dashboard)/products/_components/product-delete-modal.tsx
index 99f2612a0..eb3904f82 100644
--- a/src/app/dashboard/(user-dashboard)/products/_components/product-delete-modal.tsx
+++ b/src/app/dashboard/(user-dashboard)/products/_components/product-delete-modal.tsx
@@ -1,13 +1,13 @@
 "use client";
 
 import { AnimatePresence, motion } from "framer-motion";
+import { useSession } from "next-auth/react";
 import { useTransition } from "react";
 
 import { deleteProduct } from "~/actions/product";
 import { Button } from "~/components/ui/button";
 import { toast } from "~/components/ui/use-toast";
 import { useOrgContext } from "~/contexts/orgContext";
-import { useLocalStorage } from "~/hooks/use-local-storage";
 import { cn } from "~/lib/utils";
 
 const variantProperties = {
@@ -18,7 +18,7 @@ const variantProperties = {
 };
 
 const ProductDeleteModal = () => {
-  const [org_id] = useLocalStorage<string>("current_orgid", "");
+  const { data: session } = useSession();
   const [isPending, startTransition] = useTransition();
   const { selectedProduct, products, isDelete, setIsDelete } = useOrgContext();
 
@@ -32,21 +32,24 @@ const ProductDeleteModal = () => {
     });
 
     startTransition(async () => {
-      await deleteProduct(org_id, selectedProduct).then((data) => {
-        if (data.status === 200) {
-          toast({
-            title: "Product deleted",
-            description: "Product deleted successfully.",
-          });
-        } else {
-          toast({
-            title: "Error",
-            description: data.error || "An unexpected error occurred.",
-            variant: "destructive",
-          });
-        }
-        setIsDelete(false);
-      });
+      if (session?.currentOrgId === undefined) return;
+      await deleteProduct(session?.currentOrgId, selectedProduct).then(
+        (data) => {
+          if (data.status === 200) {
+            toast({
+              title: "Product deleted",
+              description: "Product deleted successfully.",
+            });
+          } else {
+            toast({
+              title: "Error",
+              description: data.error || "An unexpected error occurred.",
+              variant: "destructive",
+            });
+          }
+          setIsDelete(false);
+        },
+      );
     });
   };
 
diff --git a/src/app/dashboard/(user-dashboard)/products/_components/product-detail-modal.tsx b/src/app/dashboard/(user-dashboard)/products/_components/product-detail-modal.tsx
index 0a6edfceb..271c00fce 100644
--- a/src/app/dashboard/(user-dashboard)/products/_components/product-detail-modal.tsx
+++ b/src/app/dashboard/(user-dashboard)/products/_components/product-detail-modal.tsx
@@ -1,5 +1,6 @@
 import { AnimatePresence, motion } from "framer-motion";
 import { Loader2, X } from "lucide-react";
+import { useSession } from "next-auth/react";
 import { useRouter } from "next-nprogress-bar";
 import { startTransition, useEffect, useState, useTransition } from "react";
 
@@ -8,7 +9,6 @@ import BlurImage from "~/components/miscellaneous/blur-image";
 import { Button } from "~/components/ui/button";
 import { toast } from "~/components/ui/use-toast";
 import { useOrgContext } from "~/contexts/orgContext";
-import { useLocalStorage } from "~/hooks/use-local-storage";
 import useWindowWidth from "~/hooks/use-window-width";
 import { cn, formatPrice } from "~/lib/utils";
 import { Product } from "~/types";
@@ -29,7 +29,7 @@ const ProductDetailModal = () => {
     useOrgContext();
 
   const [isLoading, startLoading] = useTransition();
-  const [org_id] = useLocalStorage<string>("current_orgid", "");
+  const { data: session } = useSession();
   const { winWidth } = useWindowWidth();
 
   useEffect(() => {
@@ -51,23 +51,27 @@ const ProductDetailModal = () => {
     });
 
     startLoading(() => {
-      deleteProduct(org_id, selectedProduct).then(async (data) => {
-        toast({
-          title: data.status === 200 ? `Product deleted` : "an error occurred",
-          description: (
-            <span>
-              <b>{product?.name}</b>{" "}
-              {data.status === 200 ? " has been deleted." : data.error}
-            </span>
-          ),
-          variant: "default",
-          className: "z-[99999]",
-        });
-        if (data.status === 200) {
-          updateOpen(false);
-          setIsDelete(false);
-        }
-      });
+      if (session?.currentOrgId === undefined) return;
+      deleteProduct(session?.currentOrgId, selectedProduct).then(
+        async (data) => {
+          toast({
+            title:
+              data.status === 200 ? `Product deleted` : "an error occurred",
+            description: (
+              <span>
+                <b>{product?.name}</b>{" "}
+                {data.status === 200 ? " has been deleted." : data.error}
+              </span>
+            ),
+            variant: "default",
+            className: "z-[99999]",
+          });
+          if (data.status === 200) {
+            updateOpen(false);
+            setIsDelete(false);
+          }
+        },
+      );
     });
   };
   const handleEditAction = (id: string) => {
diff --git a/src/app/dashboard/(user-dashboard)/products/_components/product-detail-view.tsx b/src/app/dashboard/(user-dashboard)/products/_components/product-detail-view.tsx
index 3c7b03b68..cfbf51e0f 100644
--- a/src/app/dashboard/(user-dashboard)/products/_components/product-detail-view.tsx
+++ b/src/app/dashboard/(user-dashboard)/products/_components/product-detail-view.tsx
@@ -2,6 +2,7 @@
 
 import { AnimatePresence, motion } from "framer-motion";
 import { X } from "lucide-react";
+import { useSession } from "next-auth/react";
 import { useRouter } from "next-nprogress-bar";
 import { useEffect, useTransition } from "react";
 
@@ -11,7 +12,6 @@ import LoadingSpinner from "~/components/miscellaneous/loading-spinner";
 import { Button } from "~/components/ui/button";
 import { toast } from "~/components/ui/use-toast";
 import { useOrgContext } from "~/contexts/orgContext";
-import { useLocalStorage } from "~/hooks/use-local-storage";
 import { cn, formatPrice } from "~/lib/utils";
 
 const ProductDetailView = () => {
@@ -28,7 +28,7 @@ const ProductDetailView = () => {
   const [isLoading, startTransition] = useTransition();
 
   const product = products.find((p) => p.id === selectedProduct);
-  const [org_id] = useLocalStorage<string>("current_orgid", "");
+  const { data: session } = useSession();
 
   const handleDelete = async () => {
     toast({
@@ -38,21 +38,24 @@ const ProductDetailView = () => {
     });
 
     startTransition(async () => {
-      await deleteProduct(org_id, selectedProduct).then((data) => {
-        if (data.status === 200) {
-          toast({
-            title: "Product deleted",
-            description: "Product deleted successfully.",
-          });
-        } else {
-          toast({
-            title: "Error",
-            description: data.error || "An unexpected error occurred.",
-            variant: "destructive",
-          });
-        }
-        setIsDelete(false);
-      });
+      if (session?.currentOrgId === undefined) return;
+      await deleteProduct(session?.currentOrgId, selectedProduct).then(
+        (data) => {
+          if (data.status === 200) {
+            toast({
+              title: "Product deleted",
+              description: "Product deleted successfully.",
+            });
+          } else {
+            toast({
+              title: "Error",
+              description: data.error || "An unexpected error occurred.",
+              variant: "destructive",
+            });
+          }
+          setIsDelete(false);
+        },
+      );
     });
   };
   const handleEditAction = (id: string) => {
diff --git a/src/app/dashboard/layout.tsx b/src/app/dashboard/layout.tsx
index 5c5cff5e4..84430821d 100644
--- a/src/app/dashboard/layout.tsx
+++ b/src/app/dashboard/layout.tsx
@@ -1,9 +1,41 @@
+import { getAllNotifications } from "~/actions/notifications/getAllNotifications";
+import { getAnalytics, getStatistics } from "~/actions/organization";
+import { getAllProduct } from "~/actions/product";
 import OrgContextProvider from "~/contexts/orgContext";
+import { auth } from "~/lib/auth";
 
-export default function GeneralLayout({
-  children,
-}: {
+interface GeneralLayoutProperties {
   children: React.ReactNode;
-}) {
-  return <OrgContextProvider>{children}</OrgContextProvider>;
+}
+
+export default async function GeneralLayout(
+  properties: GeneralLayoutProperties,
+) {
+  const session = await auth();
+
+  if (!session || !session.currentOrgId) {
+    return;
+  }
+
+  const { children } = properties;
+
+  const [notifications, statistics, analytics, products] = await Promise.all([
+    getAllNotifications(),
+    getStatistics(),
+    getAnalytics(),
+    getAllProduct(session?.currentOrgId),
+  ]);
+
+  return (
+    <OrgContextProvider
+      initialData={{
+        notifications: notifications?.data,
+        dashboardData: statistics?.data,
+        monthlyData: analytics?.data,
+        products: products.products,
+      }}
+    >
+      {children}
+    </OrgContextProvider>
+  );
 }
diff --git a/src/app/invite/page.tsx b/src/app/invite/page.tsx
index 61e1c1984..e03c03903 100644
--- a/src/app/invite/page.tsx
+++ b/src/app/invite/page.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { useRouter } from "next/navigation"; // Import from next/navigation
-import { useEffect } from "react";
+import { useCallback, useEffect } from "react";
 
 import { acceptInviteRequest } from "~/actions/inviteMembers";
 
@@ -12,12 +12,12 @@ const extractToken = () => {
     ? queryString
     : queryString.slice(0, Math.max(0, ampersandIndex));
 };
+
 const AcceptInvitePage = () => {
   const router = useRouter();
 
-  // Function to extract token from the query string
-
-  const handleAcceptInvite = async () => {
+  // Memoized function to handle invite acceptance
+  const handleAcceptInvite = useCallback(async () => {
     // Extract token using the function
     const token = extractToken();
 
@@ -56,12 +56,12 @@ const AcceptInvitePage = () => {
       // Handle unexpected errors
       router.push("/error?message=An unexpected error occurred");
     }
-  };
+  }, [router]);
 
   // Process the invite on page load
   useEffect(() => {
     handleAcceptInvite();
-  }, []);
+  }, [handleAcceptInvite]);
 
   return (
     <div className="flex h-[100vh] w-[100vw] items-center justify-center">
diff --git a/src/components/card/user-card.tsx b/src/components/card/user-card.tsx
index 8f37be0ac..ed6fac9af 100644
--- a/src/components/card/user-card.tsx
+++ b/src/components/card/user-card.tsx
@@ -1,10 +1,7 @@
-import axios from "axios";
 import { ChevronDown } from "lucide-react";
 import { signOut, useSession } from "next-auth/react";
 import Link from "next/link";
-import { useCallback, useEffect, useState } from "react";
 
-import { getApiUrl } from "~/actions/getApiUrl";
 import { Avatar, AvatarFallback, AvatarImage } from "~/components/ui/avatar";
 import {
   DropdownMenu,
@@ -16,7 +13,6 @@ import {
   DropdownMenuShortcut,
   DropdownMenuTrigger,
 } from "~/components/ui/dropdown-menu";
-import { toast } from "~/components/ui/use-toast";
 import { cn } from "~/lib/utils";
 
 const handleLogout = async () => {
@@ -27,55 +23,6 @@ const handleLogout = async () => {
 
 const UserCard = () => {
   const { data: session, status } = useSession();
-  const { user } = session ?? {};
-  const [profilePicUrl, setProfilePicUrl] = useState<string | undefined>("");
-
-  const fetchProfileData = useCallback(async () => {
-    if (status === "authenticated" && user?.id) {
-      try {
-        const baseUrl = await getApiUrl();
-        const API_URL = `${baseUrl}/api/v1/profile/${user.id}`;
-        const response = await axios.get(API_URL, {
-          headers: {
-            Authorization: `Bearer ${session?.access_token}`,
-          },
-        });
-        if (response.data?.data) {
-          const { avatar_url, profile_pic_url } = response.data.data;
-          setProfilePicUrl(avatar_url || profile_pic_url);
-        }
-      } catch {
-        toast({
-          title: "Error",
-          description: "Failed to fetch profile data.",
-          variant: "destructive",
-        });
-      }
-    }
-  }, [status, user?.id, session?.access_token]);
-
-  useEffect(() => {
-    fetchProfileData();
-    const handleProfileUpdate = (event: CustomEvent) => {
-      if (event.detail && event.detail.profilePicUrl) {
-        setProfilePicUrl(event.detail.profilePicUrl);
-      } else {
-        fetchProfileData();
-      }
-    };
-
-    window.addEventListener(
-      "userProfileUpdate",
-      handleProfileUpdate as EventListener,
-    );
-
-    return () => {
-      window.removeEventListener(
-        "userProfileUpdate",
-        handleProfileUpdate as EventListener,
-      );
-    };
-  }, [fetchProfileData]);
 
   return (
     <DropdownMenu>
@@ -91,11 +38,11 @@ const UserCard = () => {
           {status === "authenticated" && (
             <Avatar className="size-8 sm:size-10">
               <AvatarImage
-                src={`${profilePicUrl}?t=${Date.now()}`}
+                src={`${session.user.image}?t=${Date.now()}`}
                 alt="User Avatar"
               />
               <AvatarFallback className="bg-primary/30 uppercase">
-                {user?.first_name?.charAt(0)}
+                {session.user?.first_name?.charAt(0)}
               </AvatarFallback>
             </Avatar>
           )}
@@ -110,10 +57,10 @@ const UserCard = () => {
       </DropdownMenuTrigger>
       <DropdownMenuContent className="mr-1 w-56" align="end">
         <DropdownMenuLabel className="pb-0 pt-3">
-          {user?.first_name} {user?.last_name}
+          {session?.user?.first_name} {session?.user?.last_name}
         </DropdownMenuLabel>
         <span className="block px-2 pb-1 text-xs text-neutral-dark-1">
-          {user?.email ?? "Signed In"}
+          {session?.user?.email ?? "Signed In"}
         </span>
         <DropdownMenuSeparator />
         <DropdownMenuGroup>
diff --git a/src/components/common/contact-us-form/index.tsx b/src/components/common/contact-us-form/index.tsx
index 7609b15a6..1d8f692bc 100644
--- a/src/components/common/contact-us-form/index.tsx
+++ b/src/components/common/contact-us-form/index.tsx
@@ -1,13 +1,13 @@
 "use client";
 
 import { Mail } from "lucide-react";
+import { useSession } from "next-auth/react";
 import { useEffect, useState } from "react";
 import { z, ZodError } from "zod";
 
 import { getApiUrl } from "~/actions/getApiUrl";
 import { Toaster } from "~/components/ui/toaster";
 import { useToast } from "~/components/ui/use-toast";
-import { useLocalStorage } from "~/hooks/use-local-storage";
 import CustomButton from "../common-button/common-button";
 import InputField from "./inputfield";
 
@@ -44,7 +44,7 @@ const ContactForm: React.FC = () => {
   const [status, setStatus] = useState<boolean | undefined>();
   const [message, setMessage] = useState<string | undefined>();
   const [loading, setLoading] = useState<boolean>(false);
-  const [org_id] = useLocalStorage<string>("current_orgid", "");
+  const { data: session } = useSession();
   const { toast } = useToast();
 
   useEffect(() => {
@@ -72,22 +72,6 @@ const ContactForm: React.FC = () => {
     }
   };
 
-  function transformFormData(
-    formData: FormData,
-    orgId: string,
-  ): TransformedData {
-    // Create a new object with the required structure
-    const transformedData = {
-      full_name: formData.name,
-      email: formData.email,
-      phone_number: formData.phone,
-      message: formData.message,
-      org_id: orgId, // Pass orgId as a parameter or obtain it from your application context
-    };
-
-    return transformedData;
-  }
-
   const handleChange = (
     event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
   ) => {
@@ -104,7 +88,13 @@ const ContactForm: React.FC = () => {
     }
     try {
       const baseUrl = await getApiUrl();
-      const apiData = transformFormData(formData, org_id);
+      const apiData: TransformedData = {
+        full_name: formData.name,
+        email: formData.email,
+        phone_number: formData.phone,
+        message: formData.message,
+        org_id: session?.currentOrgId ?? "",
+      };
       setLoading(true);
       const response = await fetch(`${baseUrl}/api/v1/contact`, {
         method: "POST",
diff --git a/src/components/layouts/navbar/mobile-navbar.tsx b/src/components/layouts/navbar/mobile-navbar.tsx
index e2b563661..c81c18627 100644
--- a/src/components/layouts/navbar/mobile-navbar.tsx
+++ b/src/components/layouts/navbar/mobile-navbar.tsx
@@ -1,19 +1,20 @@
 import "./menu.css";
 
 import { motion, stagger, useAnimate } from "framer-motion";
+import { useSession } from "next-auth/react";
 import { useTranslations } from "next-intl";
 import Link from "next/link";
 import { useEffect, useState } from "react";
 
-import { useUser } from "~/hooks/user/use-user";
 import { cn } from "~/lib/utils";
 import { NAV_LINKS } from "./links";
 
 export default function MobileNav() {
   const [open, setOpen] = useState(false);
   const [scope, animate] = useAnimate();
-  const { user } = useUser();
   const t = useTranslations();
+  const { data: session } = useSession();
+  const user = session?.user;
 
   // the stagger effect
   const staggerList = stagger(0.1, { startDelay: 0.25 });
@@ -26,7 +27,7 @@ export default function MobileNav() {
       "ul",
       {
         width: open ? 180 : 0,
-        height: open && user.email ? 140 : open ? 250 : 0,
+        height: open && user?.email ? 140 : open ? 250 : 0,
         opacity: open ? 1 : 0,
       },
       {
@@ -45,7 +46,7 @@ export default function MobileNav() {
         delay: open ? staggerList : 0,
       },
     );
-  }, [animate, open, staggerList, user.email]);
+  }, [animate, open, staggerList, user?.email]);
 
   return (
     <>
diff --git a/src/config/auth.config.ts b/src/config/auth.config.ts
index 44768ac63..3206ae8d7 100644
--- a/src/config/auth.config.ts
+++ b/src/config/auth.config.ts
@@ -43,6 +43,7 @@ export default {
         }
 
         const user = {
+          ...response.data,
           ...response.data.user,
           access_token: response.access_token,
         };
@@ -73,7 +74,7 @@ export default {
           return token;
         }
 
-        const response = await googleAuth({ id_token: account?.id_token });
+        const response = await googleAuth(account?.id_token);
 
         if (!response.data) {
           token = {
@@ -127,21 +128,16 @@ export default {
       const customToken = token as CustomJWT;
       session.user = {
         id: customToken.id as string,
-        first_name:
-          customToken.first_name ||
-          customToken.name?.split(" ")[0] ||
-          customToken.fullname?.split(" ")[0] ||
-          "",
-        last_name:
-          customToken.last_name ||
-          customToken.name?.split(" ").slice(1).join(" ") ||
-          customToken.fullname?.split(" ").slice(1).join(" ") ||
-          "",
-        image: token.picture || customToken.avatar_url || "",
-        role: customToken.role as string,
-        email: token.email as string,
+        first_name: customToken.first_name,
+        last_name: customToken.last_name,
+        image: customToken.avatar_url || "",
+        email: customToken.email as string,
       };
       session.access_token = customToken.access_token;
+      session.userOrg = customToken.organisations;
+      session.currentOrgId =
+        customToken.organisations &&
+        customToken.organisations[0]?.organisation_id;
 
       return session;
     },
diff --git a/src/contexts/orgContext.tsx b/src/contexts/orgContext.tsx
index 7a90aeecc..9712adfaa 100644
--- a/src/contexts/orgContext.tsx
+++ b/src/contexts/orgContext.tsx
@@ -1,27 +1,34 @@
 "use client";
 
+import { useSession } from "next-auth/react";
 import React, {
   createContext,
   useCallback,
   useContext,
   useEffect,
-  useLayoutEffect,
-  useMemo,
   useState,
-  useTransition,
 } from "react";
 
-import { getAllProduct } from "~/actions/product";
-import { useLocalStorage } from "~/hooks/use-local-storage";
 import { DashboardData, MonthlyData, Organisation, Product } from "~/types";
-import {
-  getAllOrg,
-  getAnalytics,
-  getStatistics,
-} from "../actions/organization";
 
 type ActiveFilter = "in stock" | "out of stock" | "preorder" | "all";
 
+interface NotificationPreview {
+  message: string;
+  created_at: string;
+  is_read: boolean;
+  id: string;
+}
+
+interface NotificationsData {
+  data: {
+    total_unread_notification_count: number;
+    total_notification_count: number;
+    notifications: NotificationPreview[];
+  };
+  message: string;
+}
+
 interface OrgContextProperties {
   organizations: Organisation[];
   isLoading: boolean;
@@ -41,96 +48,55 @@ interface OrgContextProperties {
   isActionModal: boolean;
   setIsActionModal: React.Dispatch<React.SetStateAction<boolean>>;
   switchOrganization: (orgId: string) => void;
+  notifications: NotificationsData | undefined;
+}
+
+interface SessionCheckerProperties {
+  children: React.ReactNode;
 }
 
 export const OrgContext = createContext({} as OrgContextProperties);
 
-const OrgContextProvider = ({ children }: { children: React.ReactNode }) => {
-  const [organizations, setOrganizations] = useState<Organisation[]>([]);
-  const [isLoading, startTransition] = useTransition();
-  const [monthlyData, setMonthlydata] = useState<MonthlyData | undefined>();
-  const [dashboardData, setDashboardData] = useState<
-    DashboardData | undefined
-  >();
-  const [products, setProducts] = useState<Product[]>([]);
-  const [org_id, setOrgId] = useLocalStorage<string>("current_orgid", "");
-  const [selectedProduct, setSelectedProduct] = useState<string>("");
+interface ProviderProperties {
+  children: React.ReactNode;
+  initialData: {
+    monthlyData?: MonthlyData;
+    dashboardData?: DashboardData;
+    products?: Product[];
+    notifications?: NotificationsData;
+  };
+}
+const OrgContextProvider = (properties: ProviderProperties) => {
+  const { children, initialData } = properties;
+
+  const monthlyData = initialData.monthlyData;
+  const dashboardData = initialData.dashboardData;
+  const products = initialData.products || [];
+  const notifications = initialData.notifications;
+
+  const { data: session, update, status } = useSession();
+
+  const [selectedProduct, setSelectedProduct] = useState("");
   const [isNewModal, setIsNewModal] = useState(false);
   const [isDelete, setIsDelete] = useState(false);
   const [isOpen, updateOpen] = useState(false);
   const [isActionModal, setIsActionModal] = useState(false);
   const [active_filter, setActive_filter] = useState<ActiveFilter>("all");
-  const [userOrg] = useLocalStorage<Organisation[]>("user_org", []);
-
   const isAnyModalOpen = isNewModal || isDelete || isOpen || isActionModal;
+  const isLoading = status === "loading";
 
   const switchOrganization = useCallback(
     (orgId: string) => {
-      setOrgId(orgId);
+      if (session) {
+        const updatedSession = { ...session, currentOrgId: orgId };
+        update(() => updatedSession);
+      }
     },
-    [setOrgId],
+    [session, update],
   );
-
-  useLayoutEffect(() => {
-    if (organizations.length === 0) {
-      startTransition(() => {
-        getAllOrg().then((data) => {
-          const fetchedOrganizations = (data && data.organization) || [];
-          const newOrganizations = fetchedOrganizations.filter(
-            (fetchedOrg: { organisation_id: string }) =>
-              !organizations.some(
-                (org) => org.organisation_id === fetchedOrg.organisation_id,
-              ),
-          );
-
-          if (newOrganizations.length > 0) {
-            setOrganizations((previousOrganizations) => [
-              ...previousOrganizations,
-              ...newOrganizations,
-            ]);
-          }
-        });
-
-        getStatistics().then((subResponse) => {
-          setDashboardData(subResponse.data);
-        });
-
-        getAnalytics().then((data) => {
-          if (data && data.data) {
-            const formattedData: MonthlyData = Object.keys(data.data).map(
-              (key) => ({
-                month: key,
-                revenue: data.data[key],
-              }),
-            );
-            setMonthlydata(formattedData);
-          }
-        });
-      });
-    }
-  }, [organizations]);
-
-  useEffect(() => {
-    if (userOrg.length > 0) {
-      const uniqueOrgs = userOrg.filter(
-        (org) =>
-          !organizations.some(
-            (existingOrg) =>
-              existingOrg.organisation_id === org.organisation_id,
-          ),
-      );
-      setOrganizations((previousOrganizations) => [
-        ...previousOrganizations,
-        ...uniqueOrgs,
-      ]);
-    }
-  }, [userOrg, organizations]);
-
   useEffect(() => {
-    document.body.style.overflow = isAnyModalOpen ? "hidden" : "auto";
-
-    const handleKeyDown = (entries: KeyboardEvent) => {
-      if (entries.key === "Escape") {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") {
         setIsNewModal(false);
         setIsDelete(false);
         updateOpen(false);
@@ -138,60 +104,46 @@ const OrgContextProvider = ({ children }: { children: React.ReactNode }) => {
       }
     };
 
+    document.body.style.overflow = isAnyModalOpen ? "hidden" : "auto";
     document.addEventListener("keydown", handleKeyDown);
-
-    return () => {
-      document.removeEventListener("keydown", handleKeyDown);
-    };
+    return () => document.removeEventListener("keydown", handleKeyDown);
   }, [isAnyModalOpen]);
 
-  useLayoutEffect(() => {
-    if (!org_id || org_id === undefined) return;
-    startTransition(() => {
-      getAllProduct(org_id).then((data) => {
-        setProducts(data.products || []);
-      });
-    });
-  }, [org_id]);
+  function SessionChecker({ children }: SessionCheckerProperties) {
+    if (status === "loading") {
+      return <div>Loading...</div>;
+    }
 
-  const value = useMemo(
-    () => ({
-      isLoading,
-      organizations,
-      monthlyData,
-      dashboardData,
-      products,
-      selectedProduct,
-      setSelectedProduct,
-      isNewModal,
-      setIsNewModal,
-      isDelete,
-      setIsDelete,
-      isOpen,
-      updateOpen,
-      isActionModal,
-      setIsActionModal,
-      active_filter,
-      setActive_filter,
-      switchOrganization,
-    }),
-    [
-      isLoading,
-      organizations,
-      monthlyData,
-      dashboardData,
-      products,
-      selectedProduct,
-      isNewModal,
-      isDelete,
-      isOpen,
-      isActionModal,
-      active_filter,
-      switchOrganization,
-    ],
-  );
+    return <>{children}</>;
+  }
 
-  return <OrgContext.Provider value={value}>{children}</OrgContext.Provider>;
+  return (
+    <OrgContext.Provider
+      value={{
+        isLoading,
+        organizations: session?.userOrg || [],
+        monthlyData,
+        dashboardData,
+        products,
+        selectedProduct,
+        setSelectedProduct,
+        isNewModal,
+        setIsNewModal,
+        isDelete,
+        setIsDelete,
+        isOpen,
+        updateOpen,
+        isActionModal,
+        setIsActionModal,
+        active_filter,
+        setActive_filter,
+        switchOrganization,
+        notifications,
+      }}
+    >
+      <SessionChecker>{children}</SessionChecker>
+    </OrgContext.Provider>
+  );
 };
 
 export const useOrgContext = () => {
@@ -204,234 +156,3 @@ export const useOrgContext = () => {
 };
 
 export default OrgContextProvider;
-
-// "use client";
-
-// import React, {
-//   createContext,
-//   useContext,
-//   useEffect,
-//   useLayoutEffect,
-//   useMemo,
-//   useReducer,
-//   useTransition,
-// } from "react";
-
-// import { getAllProduct } from "~/actions/product";
-// import { useLocalStorage } from "~/hooks/use-local-storage";
-// import { DashboardData, MonthlyData, Organisation, Product } from "~/types";
-// import {
-//   getAllOrg,
-//   getAnalytics,
-//   getStatistics,
-// } from "../actions/organization";
-
-// type ActiveFilter = "in stock" | "out of stock" | "preorder" | "all";
-
-// interface OrgState {
-//   organizations: Organisation[];
-//   isLoading: boolean;
-//   monthlyData: MonthlyData | undefined;
-//   dashboardData: DashboardData | undefined;
-//   products: Product[];
-//   selectedProduct: string;
-//   isNewModal: boolean;
-//   isDelete: boolean;
-//   isOpen: boolean;
-//   isActionModal: boolean;
-//   active_filter: ActiveFilter;
-// }
-
-// type OrgAction =
-//   | { type: "SET_ORGANIZATIONS"; payload: Organisation[] }
-//   | { type: "SET_LOADING"; payload: boolean }
-//   | { type: "SET_MONTHLY_DATA"; payload: MonthlyData | undefined }
-//   | { type: "SET_DASHBOARD_DATA"; payload: DashboardData | undefined }
-//   | { type: "SET_PRODUCTS"; payload: Product[] }
-//   | { type: "SET_SELECTED_PRODUCT"; payload: string }
-//   | { type: "TOGGLE_NEW_MODAL"; payload: boolean }
-//   | { type: "TOGGLE_DELETE"; payload: boolean }
-//   | { type: "TOGGLE_OPEN"; payload: boolean }
-//   | { type: "TOGGLE_ACTION_MODAL"; payload: boolean }
-//   | { type: "SET_ACTIVE_FILTER"; payload: ActiveFilter };
-
-// const initialState: OrgState = {
-//   organizations: [],
-//   isLoading: false,
-//   monthlyData: undefined,
-//   dashboardData: undefined,
-//   products: [],
-//   selectedProduct: "",
-//   isNewModal: false,
-//   isDelete: false,
-//   isOpen: false,
-//   isActionModal: false,
-//   active_filter: "all",
-// };
-
-// function orgReducer(state: OrgState, action: OrgAction): OrgState {
-//   switch (action.type) {
-//     case "SET_ORGANIZATIONS": {
-//       return { ...state, organizations: action.payload };
-//     }
-//     case "SET_LOADING": {
-//       return { ...state, isLoading: action.payload };
-//     }
-//     case "SET_MONTHLY_DATA": {
-//       return { ...state, monthlyData: action.payload };
-//     }
-//     case "SET_DASHBOARD_DATA": {
-//       return { ...state, dashboardData: action.payload };
-//     }
-//     case "SET_PRODUCTS": {
-//       return { ...state, products: action.payload };
-//     }
-//     case "SET_SELECTED_PRODUCT": {
-//       return { ...state, selectedProduct: action.payload };
-//     }
-//     case "TOGGLE_NEW_MODAL": {
-//       return { ...state, isNewModal: action.payload };
-//     }
-//     case "TOGGLE_DELETE": {
-//       return { ...state, isDelete: action.payload };
-//     }
-//     case "TOGGLE_OPEN": {
-//       return { ...state, isOpen: action.payload };
-//     }
-//     case "TOGGLE_ACTION_MODAL": {
-//       return { ...state, isActionModal: action.payload };
-//     }
-//     case "SET_ACTIVE_FILTER": {
-//       return { ...state, active_filter: action.payload };
-//     }
-//     default: {
-//       return state;
-//     }
-//   }
-// }
-
-// export const OrgContext = createContext<{
-//   state: OrgState;
-//   dispatch: React.Dispatch<OrgAction>;
-// }>({ state: initialState, dispatch: () => {} });
-
-// const OrgContextProvider = ({ children }: { children: React.ReactNode }) => {
-//   const [state, dispatch] = useReducer(orgReducer, initialState);
-//   const [, startTransition] = useTransition();
-//   const [org_id] = useLocalStorage<string>("current_orgid", "");
-//   const [userOrg] = useLocalStorage<Organisation[]>("user_org", []);
-
-//   const isAnyModalOpen =
-//     state.isNewModal || state.isDelete || state.isOpen || state.isActionModal;
-
-//   useLayoutEffect(() => {
-//     if (state.organizations.length === 0) {
-//       startTransition(() => {
-//         getAllOrg().then((data) => {
-//           const fetchedOrganizations = data.organization || [];
-//           const newOrganizations = fetchedOrganizations.filter(
-//             (fetchedOrg: { organisation_id: string }) =>
-//               !state.organizations.some(
-//                 (org) => org.organisation_id === fetchedOrg.organisation_id,
-//               ),
-//           );
-
-//           if (newOrganizations.length > 0) {
-//             dispatch({
-//               type: "SET_ORGANIZATIONS",
-//               payload: [...state.organizations, ...newOrganizations],
-//             });
-//           }
-//         });
-
-//         getStatistics().then((subResponse) => {
-//           dispatch({
-//             type: "SET_DASHBOARD_DATA",
-//             payload: subResponse.data,
-//           });
-//         });
-
-//         getAnalytics().then((data) => {
-//           const formattedData: MonthlyData = Object.keys(data.data).map(
-//             (key) => ({
-//               month: key,
-//               revenue: data.data[key],
-//             }),
-//           );
-//           dispatch({
-//             type: "SET_MONTHLY_DATA",
-//             payload: formattedData,
-//           });
-//         });
-//       });
-//     }
-//   }, [state.organizations]);
-
-//   useEffect(() => {
-//     if (userOrg.length > 0) {
-//       const uniqueOrgs = userOrg.filter(
-//         (org) =>
-//           !state.organizations.some(
-//             (existingOrg) =>
-//               existingOrg.organisation_id === org.organisation_id,
-//           ),
-//       );
-//       dispatch({
-//         type: "SET_ORGANIZATIONS",
-//         payload: [...state.organizations, ...uniqueOrgs],
-//       });
-//     }
-//   }, [userOrg]);
-
-//   useEffect(() => {
-//     document.body.style.overflow = isAnyModalOpen ? "hidden" : "auto";
-
-//     const handleKeyDown = (entries: KeyboardEvent) => {
-//       if (entries.key === "Escape") {
-//         dispatch({ type: "TOGGLE_NEW_MODAL", payload: false });
-//         dispatch({ type: "TOGGLE_DELETE", payload: false });
-//         dispatch({ type: "TOGGLE_OPEN", payload: false });
-//         dispatch({ type: "TOGGLE_ACTION_MODAL", payload: false });
-//       }
-//     };
-
-//     document.addEventListener("keydown", handleKeyDown);
-
-//     return () => {
-//       document.removeEventListener("keydown", handleKeyDown);
-//     };
-//   }, [isAnyModalOpen]);
-
-//   useLayoutEffect(() => {
-//     if (!org_id || org_id === undefined) return;
-//     startTransition(() => {
-//       getAllProduct(org_id).then((data) => {
-//         dispatch({
-//           type: "SET_PRODUCTS",
-//           payload: data.products || [],
-//         });
-//       });
-//     });
-//   }, [org_id]);
-
-//   const value = useMemo(
-//     () => ({
-//       state,
-//       dispatch,
-//     }),
-//     [state],
-//   );
-
-//   return <OrgContext.Provider value={value}>{children}</OrgContext.Provider>;
-// };
-
-// export const useOrgContext = () => {
-//   const context = useContext(OrgContext);
-
-//   if (!context) {
-//     throw new Error("useOrgContext must be used within a OrgContextProvider");
-//   }
-//   return context;
-// };
-
-// export default OrgContextProvider;
diff --git a/src/lib/auth.ts b/src/lib/auth.ts
index 18de73deb..347e07c7c 100644
--- a/src/lib/auth.ts
+++ b/src/lib/auth.ts
@@ -1,7 +1,7 @@
 import NextAuth, { type DefaultSession } from "next-auth";
 
 import authConfig from "~/config/auth.config";
-import { User } from "~/types";
+import { Organisation, User } from "~/types";
 
 export const {
   handlers: { GET, POST },
@@ -19,11 +19,12 @@ declare module "next-auth" {
       last_name: User["last_name"];
       email: User["email"];
       image: User["avatar_url"];
-      role: User["role"];
       bio?: string;
       username?: string;
       is_superadmin?: boolean;
     } & DefaultSession["user"];
     access_token?: string;
+    currentOrgId?: string;
+    userOrg?: Organisation[];
   }
 }
diff --git a/src/test/blog/comment/comment-body.test.tsx b/src/test/blog/comment/comment-body.test.tsx
index 4fac54610..a486ccbf1 100644
--- a/src/test/blog/comment/comment-body.test.tsx
+++ b/src/test/blog/comment/comment-body.test.tsx
@@ -13,7 +13,6 @@ describe("comment body component", () => {
       last_name: "User",
       email: "user@example.com",
       image: "path/to/image",
-      role: "user",
     },
     access_token: "some-token",
     expires: "1",
@@ -35,6 +34,7 @@ describe("comment body component", () => {
         onLike={vi.fn()}
         onDislike={vi.fn()}
         onReply={vi.fn()}
+        isReplyActive={false}
       />,
     );
     expect(screen.getByTestId("comment-text")).toHaveTextContent(
@@ -64,6 +64,7 @@ describe("comment body component", () => {
         dislikes={0}
         onLike={mockOnLike}
         onDislike={mockOnDislike}
+        isReplyActive={false}
       />,
     );
 
@@ -93,6 +94,7 @@ describe("comment body component", () => {
         dislikes={3}
         onLike={vi.fn()}
         onDislike={vi.fn()}
+        isReplyActive={false}
       />,
     );
 
@@ -118,6 +120,7 @@ describe("comment body component", () => {
         onLike={vi.fn()}
         onDislike={vi.fn()}
         onReply={vi.fn()}
+        isReplyActive={false}
       />,
     );
 
@@ -142,6 +145,7 @@ describe("comment body component", () => {
         onLike={vi.fn()}
         onDislike={vi.fn()}
         onReply={vi.fn()}
+        isReplyActive={false}
       />,
     );
     expect(
diff --git a/src/test/blog/comment/comment-reply.test.tsx b/src/test/blog/comment/comment-reply.test.tsx
index ce980678e..9af91c8be 100644
--- a/src/test/blog/comment/comment-reply.test.tsx
+++ b/src/test/blog/comment/comment-reply.test.tsx
@@ -12,7 +12,6 @@ describe("comment reply component", () => {
       last_name: "User",
       email: "user@example.com",
       image: "path/to/image",
-      role: "user",
     },
     access_token: "some-token",
     expires: "1",
diff --git a/src/test/blog/comment/index.test.tsx b/src/test/blog/comment/index.test.tsx
index 47dc199bd..afc19231d 100644
--- a/src/test/blog/comment/index.test.tsx
+++ b/src/test/blog/comment/index.test.tsx
@@ -15,7 +15,6 @@ describe("comment box component", () => {
       last_name: "User",
       email: "user@example.com",
       image: "path/to/image",
-      role: "user",
     },
     access_token: "some-token",
     expires: "2100-01-01T00:00:00.000Z",
diff --git a/src/types/index.d.ts b/src/types/index.d.ts
index 6d117589b..a847ac733 100644
--- a/src/types/index.d.ts
+++ b/src/types/index.d.ts
@@ -6,24 +6,24 @@ export interface CustomJWT extends JWT {
   email?: string;
   picture?: string;
   avatar_url?: string;
-  role?: string;
   first_name?: string;
   last_name?: string;
   fullname?: string;
   access_token?: string;
+  organisations?: Organisation[];
 }
 export interface CustomSession extends Session {
   user: {
     id: string;
-    name: string;
     first_name: string;
     last_name: string;
     email: string;
     image: string;
-    role: string;
   };
   expires: DefaultSession["expires"];
   access_token?: string;
+  currentOrgId?: string;
+  userOrg?: Organisation[];
 }
 
 export interface User {

From 5a93f6cc5989d3526c0e96ece1aaf463ade7e8c2 Mon Sep 17 00:00:00 2001
From: Prudent Bird <prudentbird@gmail.com>
Date: Sat, 24 Aug 2024 19:39:50 +0100
Subject: [PATCH 25/29] chore: fixed test errors

---
 .../forgot-password/page.test.tsx             | 45 +++++++++----------
 .../(landing-routes)/contact-us/page.test.tsx | 12 ++++-
 src/test/contact.test.tsx                     | 17 +++++--
 3 files changed, 45 insertions(+), 29 deletions(-)

diff --git a/src/app/(auth-routes)/forgot-password/page.test.tsx b/src/app/(auth-routes)/forgot-password/page.test.tsx
index 2381a2d7f..e3aebf1db 100644
--- a/src/app/(auth-routes)/forgot-password/page.test.tsx
+++ b/src/app/(auth-routes)/forgot-password/page.test.tsx
@@ -1,5 +1,4 @@
-import { fireEvent, render, screen, waitFor } from "@testing-library/react";
-
+import { fireEvent, render, screen, waitFor, act } from "@testing-library/react";
 import ForgotPassword from "./page";
 
 vi.mock("next/link", () => ({
@@ -12,13 +11,8 @@ describe("forgot password page", () => {
     render(<ForgotPassword />);
 
     expect(screen.getByText(/forgot password/i)).toBeInTheDocument();
-
     expect(screen.getByText(/enter the email address/i)).toBeInTheDocument();
-
-    expect(
-      screen.getByPlaceholderText(/enter your email/i),
-    ).toBeInTheDocument();
-
+    expect(screen.getByPlaceholderText(/enter your email/i)).toBeInTheDocument();
     expect(screen.getByText(/send/i)).toBeInTheDocument();
   });
 
@@ -30,15 +24,15 @@ describe("forgot password page", () => {
     const emailInput = screen.getByPlaceholderText(/enter your email/i);
     const sendButton = screen.getByText(/send/i);
 
-    fireEvent.change(emailInput, {
-      target: { value: "unregistered@example.com" },
+    await act(async () => {
+      fireEvent.change(emailInput, {
+        target: { value: "unregistered@example.com" },
+      });
+      fireEvent.click(sendButton);
     });
-    fireEvent.click(sendButton);
 
     await waitFor(() => {
-      expect(
-        screen.getByText(/this email doesn't match our records/i),
-      ).toBeInTheDocument();
+      expect(screen.getByText(/this email doesn't match our records/i)).toBeInTheDocument();
     });
   });
 
@@ -49,10 +43,12 @@ describe("forgot password page", () => {
     const emailInput = screen.getByPlaceholderText(/enter your email/i);
     const sendButton = screen.getByText(/send/i);
 
-    fireEvent.change(emailInput, {
-      target: { value: "invalid-email@example.com" },
+    await act(async () => {
+      fireEvent.change(emailInput, {
+        target: { value: "invalid-email@example.com" },
+      });
+      fireEvent.click(sendButton);
     });
-    fireEvent.click(sendButton);
 
     await waitFor(() => {
       expect(screen.queryByText("Verification Code")).not.toBeInTheDocument();
@@ -65,17 +61,16 @@ describe("forgot password page", () => {
 
     const emailInput = screen.getByPlaceholderText(/enter your email/i);
     const sendButton = screen.getByText(/send/i);
-    fireEvent.change(emailInput, {
-      target: { value: "invalid-email" },
+
+    await act(async () => {
+      fireEvent.change(emailInput, {
+        target: { value: "invalid-email" },
+      });
+      fireEvent.click(sendButton);
     });
-    fireEvent.click(sendButton);
 
     await waitFor(() => {
-      expect(
-        screen.getByText(
-          "This email doesn't match our records please try again",
-        ),
-      ).toBeInTheDocument();
+      expect(screen.getByText("This email doesn't match our records please try again")).toBeInTheDocument();
     });
   });
 });
diff --git a/src/app/(landing-routes)/contact-us/page.test.tsx b/src/app/(landing-routes)/contact-us/page.test.tsx
index dea52ad56..1c664c4ba 100644
--- a/src/app/(landing-routes)/contact-us/page.test.tsx
+++ b/src/app/(landing-routes)/contact-us/page.test.tsx
@@ -1,11 +1,21 @@
 import { render } from "~/test/utils";
 import Page from "./page";
+import { SessionProvider } from "next-auth/react";
+import { ReactNode } from 'react';
 
 describe("page tests", () => {
+
+  const renderWithSession = (component: ReactNode) => {
+    return render(
+      <SessionProvider session={null}>
+        {component}
+      </SessionProvider>
+    );
+  };
   it("should render correctly", () => {
     expect.assertions(1);
 
-    render(<Page />);
+    renderWithSession(<Page />);
 
     expect(true).toBeTruthy();
   });
diff --git a/src/test/contact.test.tsx b/src/test/contact.test.tsx
index f5e2ef608..658e6e659 100644
--- a/src/test/contact.test.tsx
+++ b/src/test/contact.test.tsx
@@ -1,11 +1,22 @@
 import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { SessionProvider } from "next-auth/react";
+import { ReactNode } from "react";
 
 import Contact from "~/app/(landing-routes)/contact-us/page";
 
 describe("contact Page tests", () => {
+
+  const renderWithSession = (component: ReactNode) => {
+    return render(
+      <SessionProvider session={null}>
+        {component}
+      </SessionProvider>
+    );
+  };
+
   it("should render the Contact Us form and content card correctly", () => {
     expect.assertions(4);
-    render(<Contact />);
+    renderWithSession(<Contact />);
 
     expect(screen.getByRole("form")).toBeInTheDocument();
 
@@ -18,7 +29,7 @@ describe("contact Page tests", () => {
 
   it("should validate the form inputs correctly", async () => {
     expect.assertions(1);
-    render(<Contact />);
+    renderWithSession(<Contact />);
 
     fireEvent.change(screen.getByLabelText(/email/i), {
       target: { value: "invalid-email" },
@@ -32,7 +43,7 @@ describe("contact Page tests", () => {
 
   it("should be responsive", () => {
     expect.assertions(2);
-    render(<Contact />);
+    renderWithSession(<Contact />);
 
     window.innerWidth = 320;
     window.dispatchEvent(new Event("resize"));

From a2a8eceeb67d6de19e11a6c6008f127becea08ee Mon Sep 17 00:00:00 2001
From: Prudent Bird <prudentbird@gmail.com>
Date: Sat, 24 Aug 2024 19:43:52 +0100
Subject: [PATCH 26/29] chore: fixed lint errors

---
 .../forgot-password/page.test.tsx             | 45 ++++++++++---------
 .../(landing-routes)/contact-us/page.test.tsx | 10 ++---
 src/test/contact.test.tsx                     |  5 +--
 3 files changed, 30 insertions(+), 30 deletions(-)

diff --git a/src/app/(auth-routes)/forgot-password/page.test.tsx b/src/app/(auth-routes)/forgot-password/page.test.tsx
index e3aebf1db..2381a2d7f 100644
--- a/src/app/(auth-routes)/forgot-password/page.test.tsx
+++ b/src/app/(auth-routes)/forgot-password/page.test.tsx
@@ -1,4 +1,5 @@
-import { fireEvent, render, screen, waitFor, act } from "@testing-library/react";
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+
 import ForgotPassword from "./page";
 
 vi.mock("next/link", () => ({
@@ -11,8 +12,13 @@ describe("forgot password page", () => {
     render(<ForgotPassword />);
 
     expect(screen.getByText(/forgot password/i)).toBeInTheDocument();
+
     expect(screen.getByText(/enter the email address/i)).toBeInTheDocument();
-    expect(screen.getByPlaceholderText(/enter your email/i)).toBeInTheDocument();
+
+    expect(
+      screen.getByPlaceholderText(/enter your email/i),
+    ).toBeInTheDocument();
+
     expect(screen.getByText(/send/i)).toBeInTheDocument();
   });
 
@@ -24,15 +30,15 @@ describe("forgot password page", () => {
     const emailInput = screen.getByPlaceholderText(/enter your email/i);
     const sendButton = screen.getByText(/send/i);
 
-    await act(async () => {
-      fireEvent.change(emailInput, {
-        target: { value: "unregistered@example.com" },
-      });
-      fireEvent.click(sendButton);
+    fireEvent.change(emailInput, {
+      target: { value: "unregistered@example.com" },
     });
+    fireEvent.click(sendButton);
 
     await waitFor(() => {
-      expect(screen.getByText(/this email doesn't match our records/i)).toBeInTheDocument();
+      expect(
+        screen.getByText(/this email doesn't match our records/i),
+      ).toBeInTheDocument();
     });
   });
 
@@ -43,12 +49,10 @@ describe("forgot password page", () => {
     const emailInput = screen.getByPlaceholderText(/enter your email/i);
     const sendButton = screen.getByText(/send/i);
 
-    await act(async () => {
-      fireEvent.change(emailInput, {
-        target: { value: "invalid-email@example.com" },
-      });
-      fireEvent.click(sendButton);
+    fireEvent.change(emailInput, {
+      target: { value: "invalid-email@example.com" },
     });
+    fireEvent.click(sendButton);
 
     await waitFor(() => {
       expect(screen.queryByText("Verification Code")).not.toBeInTheDocument();
@@ -61,16 +65,17 @@ describe("forgot password page", () => {
 
     const emailInput = screen.getByPlaceholderText(/enter your email/i);
     const sendButton = screen.getByText(/send/i);
-
-    await act(async () => {
-      fireEvent.change(emailInput, {
-        target: { value: "invalid-email" },
-      });
-      fireEvent.click(sendButton);
+    fireEvent.change(emailInput, {
+      target: { value: "invalid-email" },
     });
+    fireEvent.click(sendButton);
 
     await waitFor(() => {
-      expect(screen.getByText("This email doesn't match our records please try again")).toBeInTheDocument();
+      expect(
+        screen.getByText(
+          "This email doesn't match our records please try again",
+        ),
+      ).toBeInTheDocument();
     });
   });
 });
diff --git a/src/app/(landing-routes)/contact-us/page.test.tsx b/src/app/(landing-routes)/contact-us/page.test.tsx
index 1c664c4ba..5c4112890 100644
--- a/src/app/(landing-routes)/contact-us/page.test.tsx
+++ b/src/app/(landing-routes)/contact-us/page.test.tsx
@@ -1,15 +1,13 @@
+import { SessionProvider } from "next-auth/react";
+import { ReactNode } from "react";
+
 import { render } from "~/test/utils";
 import Page from "./page";
-import { SessionProvider } from "next-auth/react";
-import { ReactNode } from 'react';
 
 describe("page tests", () => {
-
   const renderWithSession = (component: ReactNode) => {
     return render(
-      <SessionProvider session={null}>
-        {component}
-      </SessionProvider>
+      <SessionProvider session={undefined}>{component}</SessionProvider>,
     );
   };
   it("should render correctly", () => {
diff --git a/src/test/contact.test.tsx b/src/test/contact.test.tsx
index 658e6e659..c0847a0e7 100644
--- a/src/test/contact.test.tsx
+++ b/src/test/contact.test.tsx
@@ -5,12 +5,9 @@ import { ReactNode } from "react";
 import Contact from "~/app/(landing-routes)/contact-us/page";
 
 describe("contact Page tests", () => {
-
   const renderWithSession = (component: ReactNode) => {
     return render(
-      <SessionProvider session={null}>
-        {component}
-      </SessionProvider>
+      <SessionProvider session={undefined}>{component}</SessionProvider>,
     );
   };
 

From 2f1af46a3eaff58a08febd4d7e672d0b06124375 Mon Sep 17 00:00:00 2001
From: Robinson-Taiwo <omoyenisamuell66@gmail.com>
Date: Sat, 24 Aug 2024 20:15:00 +0100
Subject: [PATCH 27/29] Feat: implement DeleteMember modal

---
 .../modals/invite-member/DeleteMembers/index.tsx    | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/src/components/common/modals/invite-member/DeleteMembers/index.tsx b/src/components/common/modals/invite-member/DeleteMembers/index.tsx
index 2d46dd5b7..eb5c7e6ec 100644
--- a/src/components/common/modals/invite-member/DeleteMembers/index.tsx
+++ b/src/components/common/modals/invite-member/DeleteMembers/index.tsx
@@ -1,18 +1,14 @@
 "use client";
 
 import { Button } from "~/components/ui/button";
-// import { Link2Icon } from "lucide-react";
-
-// import CustomButton from "~/components/common/common-button/common-button";
 import {
   Dialog,
   DialogContent,
   DialogDescription,
   DialogHeader,
+  DialogTitle,
 } from "~/components/ui/dialog";
 
-// import { useToast } from "~/components/ui/use-toast";
-
 interface ModalProperties {
   show: boolean;
   onClose: () => void;
@@ -24,11 +20,13 @@ const DeleteMember: React.FC<ModalProperties> = ({ show, onClose }) => {
       <DialogContent>
         <DialogHeader>
           <DialogDescription className="outline-none">
-            <div className="delete-container">
+            <DialogTitle>
+              {" "}
               <h1 className="mb-[0.5rem] text-[1.125rem] font-semibold leading-[1.75rem] text-[#0F172A]">
                 Delete Member
               </h1>
-
+            </DialogTitle>
+            <div className="delete-container">
               <p className="text=[#64748B] mb-[1rem] text-[0.875rem]">
                 Are you sure you want to delete Chad Bosewick ? All data will be
                 permanently removed. This action cannot be undone.
@@ -37,6 +35,7 @@ const DeleteMember: React.FC<ModalProperties> = ({ show, onClose }) => {
               <div className="flex w-[100%] justify-end">
                 <div className="flex flex-row gap-[.5rem]">
                   <Button
+                    onClick={onClose}
                     className="text-[#0F172A] outline-none focus:outline-none"
                     variant="outline"
                   >

From aa9eb9f994a7e0d3a828e3ee2ff8dfc48667d3b3 Mon Sep 17 00:00:00 2001
From: Jibola Paul <harjibbolar26@gmail.com>
Date: Sat, 24 Aug 2024 23:00:51 +0100
Subject: [PATCH 28/29] fix: update branch

---
 .../(settings)/settings/account/_component.tsx/password.tsx      | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/app/dashboard/(admin)/admin/(settings)/settings/account/_component.tsx/password.tsx b/src/app/dashboard/(admin)/admin/(settings)/settings/account/_component.tsx/password.tsx
index 5114d8b4b..4b5a99a26 100644
--- a/src/app/dashboard/(admin)/admin/(settings)/settings/account/_component.tsx/password.tsx
+++ b/src/app/dashboard/(admin)/admin/(settings)/settings/account/_component.tsx/password.tsx
@@ -2,7 +2,6 @@
 
 import { zodResolver } from "@hookform/resolvers/zod";
 import axios from "axios";
-import { Eye, EyeOff } from "lucide-react";
 import { useSession } from "next-auth/react";
 import { useState } from "react";
 import { useForm } from "react-hook-form";

From 29959c90104cc37a100eb5e88705af849940f567 Mon Sep 17 00:00:00 2001
From: Jibola Paul <harjibbolar26@gmail.com>
Date: Sun, 25 Aug 2024 00:38:05 +0100
Subject: [PATCH 29/29] fix: buttons for data-and-privary page

---
 .../(settings)/settings/data-and-privacy/page.tsx    | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/app/dashboard/(admin)/admin/(settings)/settings/data-and-privacy/page.tsx b/src/app/dashboard/(admin)/admin/(settings)/settings/data-and-privacy/page.tsx
index dfd73041e..aa0e9bd79 100644
--- a/src/app/dashboard/(admin)/admin/(settings)/settings/data-and-privacy/page.tsx
+++ b/src/app/dashboard/(admin)/admin/(settings)/settings/data-and-privacy/page.tsx
@@ -2,6 +2,8 @@
 
 import { useState } from "react";
 
+import CustomButton from "~/components/common/common-button/common-button";
+
 interface ToggleSwitchProperties {
   label: string;
   description: string;
@@ -21,7 +23,7 @@ const ToggleSwitch: React.FC<ToggleSwitchProperties> = ({
   return (
     <div className="mb-4 rounded-md border p-6 shadow">
       <div className="mb-2 flex items-center justify-between">
-        <label className="text-2xl text-lg font-semibold">{label}</label>
+        <label className="text-2xl font-semibold">{label}</label>
         <label className="relative inline-block h-8 w-14">
           <input
             type="checkbox"
@@ -94,6 +96,14 @@ const Page = () => {
         description="Allow us to show you personalized ads based on your interests and browsing behavior. By enabling this feature, you consent to the use of data collected from your interactions within the app and across other platforms to deliver ads that are more relevant to you."
         apiEndpoint="/api/toggle-ads"
       />
+      <div className="mt-6 flex items-center justify-between gap-3 sm:justify-end">
+        <CustomButton variant="outline" className="font-[500] max-sm:w-full">
+          Cancel
+        </CustomButton>
+        <CustomButton variant="primary" className="font-[500] max-sm:w-full">
+          Save Changes
+        </CustomButton>
+      </div>
     </div>
   );
 };