client side optimized

client/app/(landing-pages)/about/page.tsx

@@ -5,6 +5,7 @@ import LocationMap from "@/components/page-components/landing/about/LocationMap"
 import MissionAndValues from "@/components/page-components/landing/about/MissionAndValues";
 import OurStory from "@/components/page-components/landing/about/OurStory";
 import WhyChooseUs from "@/components/page-components/landing/about/WhyChooseUs";
+import { memo } from "react";
 
 export const metadata: Metadata = {
   title: "About Us",
@@ -13,12 +14,11 @@ export const metadata: Metadata = {
   keywords: ["Ayurveda", "Holistic Health", "About Us", "Our Team", "Our Mission", "Ayurvedic Center"],
 };
 
-export default function AboutPage() {
+const  AboutPage= () => {
   return (
     <div className="min-h-screen bg-background py-8">
       <div className="container mx-auto px-4">
         <h1 className="mb-8 text-4xl font-bold text-center">About AVM Ayurveda</h1>
-
         <HeroSection />
         <OurStory />
         <MissionAndValues />
@@ -29,3 +29,5 @@ export default function AboutPage() {
     </div>
   );
 }
+
+export default memo(AboutPage)

client/app/(landing-pages)/clinicians/page.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { memo } from "react";
 import { AyurvedaSection } from "@/components/page-components/landing/clinicians/AyurvedaSection";
 import { TestimonialsSection } from "@/components/page-components/landing/clinicians/TestimonialsSection";
 import { FAQSection } from "@/components/page-components/landing/clinicians/FAQSection";
@@ -39,4 +39,4 @@ const Page = async () => {
    );
 };
 
-export default Page;
+export default memo(Page);

client/app/(landing-pages)/services/page.tsx

@@ -1,7 +1,15 @@
 import Featured from "@/components/page-components/landing/services/Featured";
 import Services from "@/components/page-components/landing/services/Services";
 import WhyOurService from "@/components/page-components/landing/services/WhyOurService";
+import { Spinner } from "@/components/skeletons/spinner";
 import { Metadata } from "next";
+import dynamic from "next/dynamic";
+import { memo } from "react";
+
+const FeaturesList = dynamic(() => import("@/components/page-components/landing/services/FeatureList"), {
+   loading: () => <Spinner className="w-10 h-10 justify-center items-center" size="md" />,
+});
+
 
 export const metadata: Metadata = {
    title: "Services",
@@ -16,9 +24,10 @@ const ServicesPage = () => {
             <Services />
             <WhyOurService />
             <Featured />
+            <FeaturesList />
          </div>
       </div>
    );
 };
 
-export default ServicesPage;
+export default memo(ServicesPage);

client/app/page.tsx

@@ -1,17 +1,12 @@
 import AboutAyurveda from "@/components/page-components/landing/home/AboutAyurveda";
 import ImageSlider from "@/components/page-components/landing/home/ImageSlider";
 import WhyUs from "@/components/page-components/landing/home/WhyUs";
-import dynamic from "next/dynamic";
-import { Spinner } from "@/components/skeletons/spinner";
 import { Metadata } from "next";
 import FeaturedTreatments from "@/components/page-components/landing/home/FeaturedTreatment";
 import { FAQSection } from "@/components/page-components/landing/clinicians/FAQSection";
 import LifestyleTips from "@/components/page-components/landing/home/LifeStyleTips";
 import AyurvedicHerbs from "@/components/page-components/landing/home/Herbs";
-
-const FeaturesList = dynamic(() => import("@/components/page-components/landing/home/FeatureList"), {
-   loading: () => <Spinner className="w-10 h-10 justify-center items-center" size="md" />,
-});
+import { memo } from "react";
 
 export const metadata: Metadata = {
    keywords: [
@@ -44,9 +39,8 @@ const HomePage = () => {
          <LifestyleTips />
          <FAQSection />
          <AyurvedicHerbs />
-         <FeaturesList />
       </section>
    );
 };
 
-export default HomePage;
+export default memo(HomePage);

client/components/button/DownloadPrescriptionButton.tsx

@@ -2,16 +2,16 @@ import { IDoctor, IPatient, IPrescription } from '@/types/entities';
 import { ButtonV2 } from './ButtonV2';
 import { pdf } from '@react-pdf/renderer';
 import PrescriptionPDF from '../page-components/patient/appointments/PrescriptionPdf';
-import { memo } from 'react';
+import { memo, useCallback } from 'react';
 
 type Props = {
     prescription: IPrescription;
     doctor: IDoctor;
     patient: IPatient;
 };
 
-const  DownloadPrescriptionButton = ({ prescription, doctor, patient }: Props) => {   
-    const handleDownload = async () => {
+const DownloadPrescriptionButton = ({ prescription, doctor, patient }: Props) => {
+    const handleDownload = useCallback(async () => {
         try {
             const blob = await pdf(
                 <PrescriptionPDF
@@ -29,14 +29,14 @@ const  DownloadPrescriptionButton = ({ prescription, doctor, patient }: Props) =
         } catch (error) {
             console.error('Error generating PDF:', error);
         }
-    };
+    }, []);
 
     return (
         <ButtonV2 variant="shine" onClick={handleDownload}>
             Download Prescription
         </ButtonV2>
     );
-}
+};
 
 
 export default memo(DownloadPrescriptionButton);

client/components/button/NotificationButtonDoctor.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, memo, useState } from "react";
+import React, { forwardRef, memo, useCallback, useState } from "react";
 import { Bell } from "lucide-react";
 import { Badge } from "@/components/ui/badge";
 import { ButtonV2 } from "@/components/button/ButtonV2";
@@ -13,20 +13,20 @@ const NotificationButtonDoctor = forwardRef<HTMLButtonElement>((props, ref) => {
 
   const notificationCount = notifications.length;
 
-  const handleNotificationClick = () => {
+  const handleNotificationClick = useCallback(() => {
     setIsNotificationModalOpen(true);
-  };
+  }, [isNotificationModalOpen]);
 
-  const handleClearSingleNotification = (notificationId: string) => {
+  const handleClearSingleNotification = useCallback((notificationId: string) => {
     clearNotification(notificationId);
-  };
+  }, [notifications]);
 
-  const handleClearAllNotifications = () => {
+  const handleClearAllNotifications = useCallback(() => {
     if (!notifications || notifications.length === 0) return;
 
     const notificationIds = notifications.map((notification) => notification._id!);
     clearAllNotifications(notificationIds);
-  };
+  },[notifications]);
 
   return (
     <>

client/components/button/NotificationButtonPatient.tsx

@@ -3,7 +3,7 @@
 import { Bell } from "lucide-react";
 import { Badge } from "@/components/ui/badge";
 import { ButtonV2 } from "@/components/button/ButtonV2";
-import { memo, useState } from "react";
+import { memo, useCallback, useState } from "react";
 import { INotification } from "@/types/entities";
 import dynamic from "next/dynamic";
 import useNotification from "@/lib/hooks/useNotification";
@@ -18,19 +18,19 @@ const NotificationButtonPatient = () => {
 
   const notificationCount = notifications.length;
 
-  const handleNotificationClick = () => {
+  const handleNotificationClick = useCallback(() => {
     setIsNotificationModalOpen(true);
-  };
+  },[isNotificationModalOpen]);
 
-  const handleClearSingleNotification = (notificationId: string) => {
+  const handleClearSingleNotification = useCallback((notificationId: string) => {
     clearNotification(notificationId);
-  };
+  },[notifications]);
 
-  const handleClearAllNotifications = () => {
+  const handleClearAllNotifications = useCallback(() => {
     if (!notifications || notifications.length === 0) return;
     const notificationsIds = notifications.map(el => el._id!);
     clearAllNotifications(notificationsIds);
-  };
+  },[notifications]);
 
   return (
     <>

client/components/forms/doctor/SignupForm.tsx

@@ -153,7 +153,7 @@ const SignUpForm = () => {
                                     "You have successfully registered and your profile image has been uploaded.",
                                  variant: "success",
                               });
-                              router.push("/doctor");
+                              router.back();
                            },
                            onError: (uploadError) => {
                               setError(uploadError.message || "Failed to upload profile image");

client/components/page-components/chatbot/ChatBotButton.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useState } from 'react'
+import { memo, useState } from 'react'
 import { motion, AnimatePresence } from "framer-motion"
 import { ButtonV2 } from '@/components/button/ButtonV2';
 import Image from 'next/image';
@@ -60,4 +60,4 @@ const Chatbot = () => {
     )
 }
 
-export default Chatbot
+export default memo(Chatbot)

client/components/page-components/chatbot/ChatBotCardHeader.tsx

@@ -1,6 +1,7 @@
 import { ButtonV2 } from "@/components/button/ButtonV2"
 import { CardHeader } from "@/components/ui/card"
 import Image from "next/image"
+import { memo } from "react";
 
 const ChatBotCardHeader = ({ handleClose }: { handleClose: () => void }) => {
     return (
@@ -34,4 +35,4 @@ const ChatBotCardHeader = ({ handleClose }: { handleClose: () => void }) => {
     )
 }
 
-export default ChatBotCardHeader
+export default memo(ChatBotCardHeader);

client/components/page-components/chatbot/ChatBotController.tsx

@@ -2,6 +2,7 @@ import { ButtonV2 } from "@/components/button/ButtonV2";
 import { Input } from "@/components/ui/input";
 import { CardFooter } from "@/components/ui/card";
 import { Send } from "lucide-react";
+import { memo } from "react";
 
 type ChatBotControllerProps = {
     inputMessage: string;
@@ -49,4 +50,4 @@ const ChatBotController = ({ inputMessage, setInputMessage, sendMessage, isSendi
     );
 };
 
-export default ChatBotController;
+export default memo(ChatBotController);

client/components/page-components/chatbot/ChatSection.tsx

@@ -1,21 +1,21 @@
-'use client'
+'use client';
 
-import { useState, useEffect, memo } from 'react'
-import { Card } from "@/components/ui/card"
-import { motion, AnimatePresence } from "framer-motion"
-import ChatBotController from './ChatBotController'
-import MessageDisplay from './MessageDisplay'
-import NotAuthenticated from './NotAuthenticated'
-import { IChatBotMessage } from '@/types/entities'
-import { useCreateMessage, useGetMessage } from '@/lib/hooks/chatbot/useChatBot'
-import { toast } from '@/components/ui/use-toast'
-import { getRandomId } from '@/lib/utils'
+import { useState, useEffect, memo, useCallback } from 'react';
+import { Card } from "@/components/ui/card";
+import { motion, AnimatePresence } from "framer-motion";
+import ChatBotController from './ChatBotController';
+import MessageDisplay from './MessageDisplay';
+import NotAuthenticated from './NotAuthenticated';
+import { IChatBotMessage } from '@/types/entities';
+import { useCreateMessage, useGetMessage } from '@/lib/hooks/chatbot/useChatBot';
+import { toast } from '@/components/ui/use-toast';
+import { getRandomId } from '@/lib/utils';
 
 type Props = {
     isVisible: boolean;
     setIsOpen: (value: boolean) => void;
     isAuthenticated: boolean;
-}
+};
 
 const ChatSection = ({ isVisible, setIsOpen, isAuthenticated }: Props) => {
     const { data, isLoading } = useGetMessage();
@@ -30,17 +30,17 @@ const ChatSection = ({ isVisible, setIsOpen, isAuthenticated }: Props) => {
         }
     }, [data]);
 
-    const handleClose = () => {
+    const handleClose = useCallback(() => {
         setIsOpen(false);
-    };
+    }, [setIsOpen]);
 
-    const sendMessage = () => {
+    const sendMessage = useCallback(() => {
         if (inputMessage.trim()) {
-            const id = getRandomId()
-            const tempMessage: IChatBotMessage = { 
-                isBotMessage: false, 
-                message: inputMessage, 
-                _id: id, 
+            const id = getRandomId();
+            const tempMessage: IChatBotMessage = {
+                isBotMessage: false,
+                message: inputMessage,
+                _id: id,
                 patientId: id
             };
             setMessages(prev => [...prev, tempMessage]);
@@ -65,7 +65,7 @@ const ChatSection = ({ isVisible, setIsOpen, isAuthenticated }: Props) => {
                 }
             );
         }
-    };
+    }, [inputMessage, setInputMessage, setIsTyping, getRandomId]);
 
     return (
         <AnimatePresence onExitComplete={() => setIsOpen(false)}>