fix(chat ui):fixed ui for the chat

src/app/globals.css

@@ -241,9 +241,9 @@ body {}
 }
 
 /* Scroll */
-.o-hidden{overflow: hidden !important;}
+/* .o-hidden{overflow: hidden !important;}
 .o-x-scroll{overflow-y: scroll !important;}
-.opacity-0{opacity: 0 !important;}
+.opacity-0{opacity: 0 !important;} */
 /* doubleshricked*/
 /* width */
 .scroll-double-shrinked::-webkit-scrollbar {
@@ -264,4 +264,4 @@ body {}
     margin-top: 4px !important ;
     margin-bottom: 4px !important ;
     height: 90% !important;
-}
+}

src/app/page.tsx

@@ -7,15 +7,15 @@ import Header from '@/components/Header';
 import HeroSection from '@/components/HeroSection';
 import { LatestSection } from '@/components/LatestSection';
 import Footer from '@/components/Footer';
-import { MdOutlineChat } from 'react-icons/md';
-import { IoMdClose } from 'react-icons/io';
+
 import { HomeAds } from '@/components/HomeAds';
+
 import { ProductWithFilter } from '@/components/allProducts';
-import Link from 'next/link';
-import ChatRoomsList from '@/components/ChatRoomsList';
 import ChatPopUp from '@/hooks/ChatPopUp';
 import ChatWrapper from '@/components/chatWrapper';
-
+import Link from 'next/link';
+import { MdOutlineChat } from 'react-icons/md';
+import { checkUserLoggedIn } from '@/components/isLogged';
 
 export interface FormDataType {
   confirmPassword: string;
@@ -24,9 +24,8 @@ export interface FormDataType {
 }
 
 export default function Home() {
-  // const [isOpen, setIsOpen] = useState(false);
-  const [showlModal, setShowmodal] = useState(false);
   const { isChatPopUpOpen, setIsChatPopUpOpen, toggleChatPopUp } = ChatPopUp();
+  const [showlModal, setShowmodal] = useState(false);
   const {
     register,
     handleSubmit,
@@ -43,42 +42,12 @@ export default function Home() {
     reset();
   };
 
-  // function handlePopUp(): void {
-  //   setIsOpen(!isOpen);
-  // }
-
   return (
     <div className="sm:flex sm:justify-center sm:items-center sm:flex-col">
       <Header />
       <HeroSection />
-      <main className="flex flex-col items-center justify-between ">
-        {/* <div className="sm:flex h-[20px] gap-10">
-          <div>
-            <button
-              className=" w-auto"
-              onClick={() => setShowmodal(!showlModal)}
-            >
-              change password
-            </button>
-          </div>
-        </div> */}
-      </main>
-      {/* Startttttttt */}
-      <div className='absolute right-5 w-full flex justify-end items-end'>
-        <div className="fixed bottom-20 z-50 h-[30rem] w-full max-w-[20%] ">
-          <div className="fixed bottom-5 right-0 z-10 p-4 bg-green-300 rounded-full">
-            <MdOutlineChat
-              className="text-4xl cursor-pointer z-20"
-              onClick={toggleChatPopUp}
-            />
-          </div>
-          {isChatPopUpOpen && (
-            // <ChatRoomsList chatrooms= {chatrooms} currentUser = {currentUser as string}/>
-            <ChatWrapper />
-          )}
-        </div>
-      </div>
-      {/* Enddddddddd */}
+      <main className="flex   flex-col items-center justify-between "></main>
+
       {/* The Image adds */}
       <HomeAds />
       {/* LAtest Product */}
@@ -98,6 +67,26 @@ export default function Home() {
           </Link>
         </div>
       </div>
+      {/* Startttttttt */}
+      <div className="absolute right-5 w-full flex justify-end items-end">
+        {checkUserLoggedIn() && (
+          <div className="fixed bottom-5 right-0 z-10 p-4 bg-green-300 rounded-full">
+            <MdOutlineChat
+              className="text-4xl cursor-pointer z-20"
+              onClick={toggleChatPopUp}
+            />
+          </div>
+        )}
+        <div
+          className={`${isChatPopUpOpen ? 'block fixed bottom-24' : 'hidden'} h-[30rem] w-full max-w-[20%]`}
+        >
+          {isChatPopUpOpen && (
+            // <ChatRoomsList chatrooms= {chatrooms} currentUser = {currentUser as string}/>
+            <ChatWrapper />
+          )}
+        </div>
+      </div>
+      {/* Enddddddddd */}
       {/* Footer Sections  */}
       <Footer />
     </div>

src/app/payments/success/page.tsx

@@ -2,15 +2,13 @@
 import React, { useEffect, useState } from 'react';
 import Header from '@/components/Header';
 import Button from '@/components/Button';
-//import Modal from '@/components/ConfirmPayment';
 import { useRouter } from 'next/router';
 import request from '@/utils/axios';
 import Link from 'next/link';
 import OrdersOverlay from '@/hooks/ordersOverlay';
 import SideBarOverlay from '@/components/UsableSideOvelay';
 import OrdersContainer from '@/components/OrdersContainer';
-
-
+import BuyerOrdersList from '@/components/BuyerOrdersList';
 const View: React.FC = () => {
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [orders, setOrders] = useState([]);
@@ -27,10 +25,6 @@ const View: React.FC = () => {
     setOrderId(orderId);
     setIsTruckOrderStatusModalOpen(true);
  };
-
-
-
-
   useEffect(() => {
     const fetchOrders = async () => {
       try {
@@ -41,22 +35,11 @@ const View: React.FC = () => {
         console.error('Error fetching orders:', error);
       }
     };
-
     fetchOrders();
   }, []);
-
   return (
     <>
-      {/* <Header /> */}
       <section className="bg-white py-8 antialiased dark:bg-gray-900 md:py-16">
-      {isOrdersOverlayOpen ? (
-          <OrdersContainer
-            isOrdersOverlayOpen={isOrdersOverlayOpen}
-            toggleOrdersSlider={toggleOrdersSlider}
-          />
-        ) : (
-          ''
-        )}
         <div className="mx-auto max-w-2xl px-4 2xl:px-0">
           <h2 className="text-xl font-semibold text-gray-900 dark:text-white sm:text-2xl mb-2">
             Thanks for your order!
@@ -66,46 +49,21 @@ const View: React.FC = () => {
           </p>
           <div className="space-y-4 sm:space-y-2">
             <div className="order-details">
-
+              <BuyerOrdersList/>
             </div>
-
             <div className="flex items-center space-x-4">
-
-              <button
-                className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600"
-                 onClick={toggleOrdersSlider}
-                // handle={() => handleOpenTruckOrdePopup(row.row.original.id)}
-              >
-                View Order
-              </button>
-
-
               <Link href='/'>
               <button
-                className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600"
-
+                className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 my-5"
               >
                 Return to Shopping
               </button>
               </Link>
             </div>
           </div>
         </div>
-        {/* {isOrdersOverlayOpen ? (
-          <OrdersContainer
-            isOrdersOverlayOpen={isOrdersOverlayOpen}
-            toggleOrdersSlider={toggleOrdersSlider}
-          />
-        ) : (
-          ''
-        )} */}
       </section>
-
-
-
-
     </>
     )
 };
-
 export default View;

src/components/ChatConversation.tsx

@@ -70,7 +70,7 @@ const allMessagesList = messages.map((message:Message)=>{
            toogleDislay={toogleDislay}
           />
         </div>
-        <div className="h-[78%] w-full p-2 o-x-hidden o-x-scroll scroll-double-shrinked">
+        <div className="h-[78%] w-full p-2 overflow-hidden overflow-y-auto scroll-double-shrinked">
           {allMessagesList}
         </div>
         <div className="h-[10%] w-full border">

src/components/ChatRoomsList.tsx

@@ -23,16 +23,10 @@ const ChatRoomsList:React.FC<chatroomsLists>=({chatrooms, currentUser, toogleDis
     ))
   return (
     <>
-        <h2 className="flex justify-center self-center text-bold text-2xl py-3">
+        <h2 className="flex justify-center self-center text-bold text-2xl py-5 bg-gray-100">
           Messages
         </h2>
-        <div className="w-full flex justify-center items-center">
-          <input
-            type="text"
-            className="rounded-full border bg-gray-200 h-10 w-full max-w-[70%]"
-          />
-        </div>
-        <hr className="my-3" />
+        <hr />
         <div>
           {ListOfChatRooms}
         </div>

src/components/DashboardHeader.tsx

@@ -1,5 +1,5 @@
 'use client';
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import { CiBellOn } from 'react-icons/ci';
 import { GiHamburgerMenu } from 'react-icons/gi';
 import { useQuery } from '@tanstack/react-query';
@@ -32,41 +32,6 @@ const DashboardHeader: React.FC<HeaderInterface> = ({ pageName }) => {
     setOverlayComponent('notification');
   };
   const user = data?.User as userData;
-  // const { isChatPopUpOpen, setIsChatPopUpOpen, toggleChatPopUp } = ChatPopUp();
-  // const [currentUser, setCurrentUser] = useState(getCurrentUser());
-  // const [currentUserToken, setCurrentUserToken] = useState('');
-  // const [chatrooms, setChatrooms] = useState([]);
-
-
-  //  useEffect(() => {
-  //   const token = localStorage.getItem('token');
-  //   if (token) {
-  //     const trimmedToken = token.split(' ')[1];
-  //     setCurrentUserToken(trimmedToken);
-
-  //     socket = io(`${process.env.URL__CHAT}`, {
-  //       auth: { token: trimmedToken },
-  //     });
-
-  //     socket.on('connect', () => {
-  //       socket.emit('fetch all chatrooms');
-  //     });
-
-  //     socket.on('connect_error', (err) => {
-  //       console.error('Socket connection error:', err);
-
-  //     });
-
-  //      socket.on('all chatrooms', (receivedChatrooms) => {
-  //     setChatrooms(receivedChatrooms);
-  //   });
-
-  //     return () => {
-  //       socket.off('all chatrooms');
-  //       socket.disconnect();
-  //     };
-  //   }
-  // }, [currentUserToken]);
 
   const handleCloseOverlay = () => {
     setOverlayComponent(null);