From 5fc6ae8e0f60c9f8d4d50e944bfd253bdd8cfc7c Mon Sep 17 00:00:00 2001
From: Roie <roiy0987@gmail.com>
Date: Tue, 6 Aug 2024 10:36:11 +0300
Subject: [PATCH 001/242] chore: Update environment variable name for server
 URL and add new fields to Chat and Message types

---
 next.config.mjs                     |   2 +-
 src/components/Sidebar/Sidebar.scss |   5 +
 src/components/Sidebar/Sidebar.tsx  |  12 +-
 src/pages/chat.tsx                  |   7 +-
 src/pages/dashboard.tsx             | 181 +++++++++++++++-------------
 src/pages/register.tsx              |   5 +-
 src/types/chat.type.ts              |   4 +-
 src/types/message.type.ts           |   3 +-
 styles/chat.module.css              |   2 +-
 9 files changed, 122 insertions(+), 99 deletions(-)

diff --git a/next.config.mjs b/next.config.mjs
index d6c1fa0..4339bc0 100644
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -1,7 +1,7 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   env: {
-    BACKEND_URL: process.env.BACKEND_URL,
+    NEXT_PUBLIC_SERVER_URL: process.env.BACKEND_URL,
   },
 };
 
diff --git a/src/components/Sidebar/Sidebar.scss b/src/components/Sidebar/Sidebar.scss
index 402f30b..eb89671 100644
--- a/src/components/Sidebar/Sidebar.scss
+++ b/src/components/Sidebar/Sidebar.scss
@@ -55,3 +55,8 @@
 .active {
   color: #fff !important;
 }
+.bg-gradient-primary {
+  background-color: #4e73df !important;
+  background-image: linear-gradient(180deg, #4e73df 10%, #224abe 100%);
+  background-size: cover;
+}
diff --git a/src/components/Sidebar/Sidebar.tsx b/src/components/Sidebar/Sidebar.tsx
index 9606f90..92a996f 100644
--- a/src/components/Sidebar/Sidebar.tsx
+++ b/src/components/Sidebar/Sidebar.tsx
@@ -29,13 +29,19 @@ const Sidebar: React.FC = () => {
         <ul className="navbar-nav text-light" id="accordionSidebar">
           <li className="nav-item">
             <a className="nav-link active sidebarItemBlock" href="#">
-              <FontAwesomeIcon className="sidebarItem" icon={faTachometerAlt} />
+              <FontAwesomeIcon
+                className="sidebarItem "
+                icon={faTachometerAlt}
+              />
               <span>Chat</span>
             </a>
           </li>
           <li className="nav-item">
-            <a className="nav-link sidebarItemBlock" href="#">
-              <FontAwesomeIcon className="styles.sidebarItem" icon={faUser} />
+            <a className="nav-link sidebarItemBlock " href="#">
+              <FontAwesomeIcon
+                className="styles.sidebarItem me-1"
+                icon={faUser}
+              />
               <span>Guides</span>
             </a>
           </li>
diff --git a/src/pages/chat.tsx b/src/pages/chat.tsx
index a137334..aac0051 100644
--- a/src/pages/chat.tsx
+++ b/src/pages/chat.tsx
@@ -35,12 +35,13 @@ const ChatApp: React.FC = () => {
   async function handleSendMessage() {
     if (message === "") return;
     console.log("Send message: ", message);
-    const newMessage = {
+    const newMessage: Message = {
+      messageId: chatMessages.length + 1,
       content: message,
       isNote: false,
       isSupportSender: false,
       chatId: chatId,
-      time: new Date(),
+      timeStamp: new Date(),
     };
 
     setChatMessages([...chatMessages, newMessage]);
@@ -121,7 +122,7 @@ const ChatApp: React.FC = () => {
                           className={`d-flex justify-content-end ${styles["message-data"]}`}
                         >
                           <span className={`${styles["message-data-time"]}`}>
-                            {msg.time.toLocaleTimeString()}
+                            {msg.timeStamp.toLocaleTimeString()}
                           </span>
                           <img
                             src="https://bootdey.com/img/Content/avatar/avatar7.png"
diff --git a/src/pages/dashboard.tsx b/src/pages/dashboard.tsx
index f3c2d2d..1c5cc12 100644
--- a/src/pages/dashboard.tsx
+++ b/src/pages/dashboard.tsx
@@ -6,6 +6,7 @@ import axios from "axios";
 import { Chat, Message } from "@/types";
 import { Sidebar, Topbar } from "@/components";
 import socket from "@/socket";
+import { width } from "@fortawesome/free-brands-svg-icons/fa42Group";
 
 const Dashboard = () => {
   const [usersChats, setUsersChats] = useState<Chat[]>([]);
@@ -16,17 +17,32 @@ const Dashboard = () => {
 
   useEffect(() => {
     const fetchChats = async () => {
-      const response = await axios.get(process.env.BACKEND_URL + "/chats");
+      axios.defaults.withCredentials = true;
+      const response = await axios.get(
+        process.env.NEXT_PUBLIC_SERVER_URL + "/chats"
+      );
+      console.log(response.data);
+
+      console.log(response.data[0].chatId);
+
       setUsersChats(response.data as Chat[]);
+      console.log(usersChats);
+
       setSelectedChat(response.data[0]);
       const messages = await axios.get(
-        process.env.BACKEND_URL + "/chats/" + response.data[0].chatId
+        process.env.NEXT_PUBLIC_SERVER_URL + "/chats/" + response.data[0].chatId
       );
-      setChatMessages(messages.data as Message[]);
+      console.log(messages.data.messages);
+
+      setChatMessages(messages.data.messages as Message[]);
     };
     fetchChats();
   }, []);
 
+  useEffect(() => {
+    console.log("Chat Messages:", chatMessages);
+  }, [chatMessages]);
+
   useEffect(() => {
     //If user creates a new chat
     socket.on("chatCreated", (chat: Chat) => {
@@ -77,7 +93,7 @@ const Dashboard = () => {
 
   const handleChangeChat = async (chat: Chat) => {
     const messages = await axios.get(
-      process.env.BACKEND_URL + "/chats/" + chat.chatId
+      process.env.NEXT_PUBLIC_SERVER_URL + "/chats/" + chat.chatId
     );
     setChatMessages(messages.data);
     setSelectedChat(chat);
@@ -114,7 +130,8 @@ const Dashboard = () => {
       isNote: false,
       isSupportSender: true,
       chatId: selectedChat!.chatId,
-      time: new Date(),
+      timeStamp: new Date(),
+      messageId: 0,
     };
     if (selectedChat) {
       const fd = new FormData();
@@ -122,7 +139,7 @@ const Dashboard = () => {
       fd.append("content", message);
       fd.append("isNote", "false");
       fd.append("isSupportSender", "true");
-      fd.append("time", newMessage.time.toISOString());
+      fd.append("timeStamp", newMessage.timeStamp.toISOString());
       setChatMessages([...chatMessages, newMessage]);
       socket.emit("message", fd);
       setMessage("");
@@ -173,7 +190,7 @@ const Dashboard = () => {
                         />
                         <div className={styles.about}>
                           <div className={styles.name}>
-                            <span>{chat.user.username}</span>
+                            <span>userName</span>
                           </div>
                           <div className={styles.status}>
                             <i
@@ -227,88 +244,79 @@ const Dashboard = () => {
             </div>
             <div className={styles.chat}>
               <div className={`${styles["chat-header"]} ${styles.clearfix}`}>
-                <div className="row">
-                  {selectedChat ? (
-                    <div>
-                      <div className="col-6 offset-xxl-0">
-                        <a data-toggle="modal" data-target="#view_info">
-                          <img
-                            src="https://bootdey.com/img/Content/avatar/avatar2.png"
-                            alt="avatar"
-                          />
-                        </a>
-                        <div className={`${styles["chat-about"]}`}>
-                          <h6 className="m-b-0">
-                            {selectedChat.user.username}
-                          </h6>
-                          <small>Last seen: 2 hours ago</small>
-                        </div>
+                {selectedChat ? (
+                  <div className="row">
+                    <div className="col-6  " style={{ height: "100%" }}>
+                      <a data-toggle="modal" data-target="#view_info">
+                        <img
+                          src="https://bootdey.com/img/Content/avatar/avatar2.png"
+                          alt="avatar"
+                        />
+                      </a>
+                      <div className={`${styles["chat-about"]}`}>
+                        <h6 className="m-b-0">selectedChat?.userName</h6>
+                        <small>Last seen: 2 hours ago</small>
                       </div>
-                      <div
-                        className="col-6"
-                        id="col-btns"
+                    </div>
+                    <div
+                      className="col-6"
+                      id="col-btns"
+                      style={{
+                        justifyContent: "end",
+                        alignItems: "center",
+                        display: "flex",
+                        gap: "0.5rem",
+                      }}
+                    >
+                      <a
+                        className="btn d-none d-sm-inline-block btn-primary"
+                        role="button"
+                        id="btn-generate-guide"
+                        href="#"
                         style={{
-                          textAlign: "left",
-                          lineHeight: 0,
-                          padding: "1rem",
-                          paddingTop: "inherit",
-                          paddingRight: "1rem",
-                          paddingBottom: "inherit",
-                          paddingLeft: "inherit",
-                          display: "flex",
-                          justifyContent: "end",
-                          gap: "5px",
+                          textAlign: "justify",
+                          height: "2.2em",
+                          borderStyle: "inherit",
+                          borderRadius: "5px",
                         }}
                       >
-                        <a
-                          className="btn d-none d-sm-inline-block btn-primary"
-                          role="button"
-                          id="btn-generate-guide"
-                          href="#"
-                          style={{
-                            textAlign: "justify",
-                            height: "2.2em",
-                            borderStyle: "inherit",
-                            borderRadius: "5px",
-                          }}
-                        >
-                          <FontAwesomeIcon icon={faDownload} />
-                          &nbsp;Generate Guide
-                        </a>
-                        <a
-                          className="btn d-none d-sm-inline-block btn-light"
-                          role="button"
-                          id="btn-snooze"
-                          href="#"
-                          style={{
-                            textAlign: "justify",
-                            height: "2.2em",
-                            background: "var(--bs-gray-300)",
-                            color: "black",
-                            borderStyle: "inherit",
-                            borderRadius: "5px",
-                          }}
-                        >
-                          Snooze
-                        </a>
-                        <a
-                          className="btn d-none d-sm-inline-block btn-dark"
-                          role="button"
-                          id="btn-close-conversation"
-                          href="#"
-                          style={{
-                            textAlign: "justify",
-                            height: "2.2em",
-                            borderStyle: "inherit",
-                            borderRadius: "5px",
-                          }}
-                        >
-                          Close
-                        </a>
-                      </div>
+                        <FontAwesomeIcon icon={faDownload} />
+                        &nbsp;Generate Guide
+                      </a>
+                      <a
+                        className="btn d-none d-sm-inline-block btn-light"
+                        role="button"
+                        id="btn-snooze"
+                        href="#"
+                        style={{
+                          textAlign: "justify",
+                          height: "2.2em",
+                          background: "var(--bs-gray-300)",
+                          color: "black",
+                          borderStyle: "inherit",
+                          borderRadius: "5px",
+                        }}
+                      >
+                        Snooze
+                      </a>
+                      <a
+                        className="btn d-none d-sm-inline-block btn-dark"
+                        role="button"
+                        id="btn-close-conversation"
+                        href="#"
+                        style={{
+                          textAlign: "justify",
+                          height: "2.2em",
+                          borderStyle: "inherit",
+                          borderRadius: "5px",
+                        }}
+                      >
+                        Close
+                      </a>
                     </div>
-                  ) : null}
-                  {/* <div className="col-6 offset-xxl-0" id="col-user-profile">
+                  </div>
+                ) : null}
+                {/* <div className="col-6 offset-xxl-0" id="col-user-profile">
                     <a data-toggle="modal" data-target="#view_info">
                       <img
                         src="https://bootdey.com/img/Content/avatar/avatar2.png"
@@ -320,11 +328,10 @@ const Dashboard = () => {
                       <small>Last seen: 2 hours ago</small>
                     </div>
                   </div> */}
-                </div>
               </div>
               <div
                 className={styles["chat-history"]}
-                style={{ height: "650px", overflowY: "auto" }}
+                style={{ height: "35.3rem", overflowY: "auto" }}
               >
                 <ul className="m-b-0">
                   {chatMessages.map((msg, index) => {
@@ -334,7 +341,7 @@ const Dashboard = () => {
                           className={`d-flex justify-content-end ${styles["message-data"]}`}
                         >
                           <span className={`${styles["message-data-time"]}`}>
-                            {msg.time.toLocaleTimeString()}
+                            {new Date(msg.timeStamp).toLocaleTimeString()}
                           </span>
                           <img
                             src="https://bootdey.com/img/Content/avatar/avatar7.png"
diff --git a/src/pages/register.tsx b/src/pages/register.tsx
index 45aa25d..0f70944 100644
--- a/src/pages/register.tsx
+++ b/src/pages/register.tsx
@@ -5,6 +5,7 @@ import { ToastContainer, toast } from "react-toastify";
 import { useRouter } from "next/router";
 import axios from "axios";
 import dogImage from "../assets/images/dogs/dog_orange_bg.jpeg";
+import Link from "next/link";
 
 const Register: React.FC = () => {
   const router = useRouter();
@@ -170,9 +171,9 @@ const Register: React.FC = () => {
                         </a>
                       </div>
                       <div className="text-center">
-                        <a className="small" href="/login">
+                        <Link href="/login" className="small">
                           Already have an account? Login!
-                        </a>
+                        </Link>
                       </div>
                     </div>
                   </div>
diff --git a/src/types/chat.type.ts b/src/types/chat.type.ts
index e153d21..9069a6b 100644
--- a/src/types/chat.type.ts
+++ b/src/types/chat.type.ts
@@ -4,5 +4,7 @@ export interface Chat {
   chatId: number;
   customerId: number;
   isOpen: boolean;
-  user: User;
+  startTime: Date;
+  endTime?: Date;
+  user?: User;
 }
diff --git a/src/types/message.type.ts b/src/types/message.type.ts
index 7b43dfe..42b36ca 100644
--- a/src/types/message.type.ts
+++ b/src/types/message.type.ts
@@ -1,7 +1,8 @@
 export interface Message {
+  messageId: number;
   content: string;
   isNote: boolean;
   isSupportSender: boolean;
   chatId: number;
-  time: Date;
+  timeStamp: Date;
 }
diff --git a/styles/chat.module.css b/styles/chat.module.css
index b3e8489..3333a69 100644
--- a/styles/chat.module.css
+++ b/styles/chat.module.css
@@ -328,7 +328,7 @@
 }
 
 .bg-gradient-primary {
-  background-color: #4e73df;
+  background-color: #4e73df !important;
   background-image: linear-gradient(180deg, #4e73df 10%, #224abe 100%);
   background-size: cover;
 }

From 443e92cf90f734616a7c124946321db8b6fe659d Mon Sep 17 00:00:00 2001
From: Tomer <tomermi123@gmail.com>
Date: Tue, 6 Aug 2024 14:14:19 +0300
Subject: [PATCH 002/242] feat: Optimize image loading with Next.js Image
 component, Add Google icon to google login btn.

---
 src/pages/login.tsx | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/src/pages/login.tsx b/src/pages/login.tsx
index e2f8f96..f8de8ed 100644
--- a/src/pages/login.tsx
+++ b/src/pages/login.tsx
@@ -1,11 +1,13 @@
 import React, { useState } from "react";
 import "bootstrap/dist/css/bootstrap.min.css";
 import dogImage from "../assets/images/dogs/dog_gray_bg.jpeg";
+import logo_google_icon from "../assets/images/logo_google_icon.ico";
 import { ToastContainer, toast } from "react-toastify";
 import axios, { isAxiosError } from "axios";
 import { useRouter } from "next/router";
 import "react-toastify/dist/ReactToastify.css";
 import { getCookie } from "cookies-next";
+import Image from "next/image";
 
 const Login: React.FC = () => {
   const [username, setUsername] = useState("");
@@ -61,10 +63,12 @@ const Login: React.FC = () => {
                 <div className="row">
                   <div className="col-lg-6 d-none d-lg-flex">
                     <div className="flex-grow-1 bg-login-image">
-                      <img
+                      <Image
                         className="flex-grow-1"
                         src={dogImage.src}
                         alt=""
+                        width={300}
+                        height={400}
                         style={{
                           width: "100%",
                           height: "100%",
@@ -134,7 +138,18 @@ const Login: React.FC = () => {
                           href="/auth/google"
                           role="button"
                         >
-                          <i className="fab fa-google"></i> Login with Google
+                          <Image 
+                            className="flex-grow-1"
+                            src={logo_google_icon}
+                            alt=""
+                            width={30}
+                            height={40}
+                            style={{
+                              objectFit: "cover",
+                              objectPosition: "center",
+                            }}
+                          ></Image> 
+                          Login with Google
                         </a>
                         <hr />
                         {error && (

From 9def1b1100566fccbeae2674ee83c0b04bcbfed1 Mon Sep 17 00:00:00 2001
From: Tomer <tomermi123@gmail.com>
Date: Tue, 6 Aug 2024 14:14:59 +0300
Subject: [PATCH 003/242] refactor: Optimize image loading with Next.js `Image`
 component, instead of `img`

---
 src/assets/images/logo_google_icon.ico | Bin 0 -> 5343 bytes
 src/components/Topbar/Topbar.tsx       |   3 ++-
 src/pages/chat.tsx                     |   7 ++++---
 src/pages/dashboard.tsx                |   7 ++++---
 src/pages/register.tsx                 |   3 ++-
 5 files changed, 12 insertions(+), 8 deletions(-)
 create mode 100644 src/assets/images/logo_google_icon.ico

diff --git a/src/assets/images/logo_google_icon.ico b/src/assets/images/logo_google_icon.ico
new file mode 100644
index 0000000000000000000000000000000000000000..f17a0a7b34b2d1cbe49e1bcb142b27ff7577a007
GIT binary patch
literal 5343
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

literal 0
HcmV?d00001

diff --git a/src/components/Topbar/Topbar.tsx b/src/components/Topbar/Topbar.tsx
index 2888a58..84d15ee 100644
--- a/src/components/Topbar/Topbar.tsx
+++ b/src/components/Topbar/Topbar.tsx
@@ -1,5 +1,6 @@
 import React from "react";
 import "./Topbar.scss";
+import Image from "next/image";
 
 const Topbar: React.FC = () => {
   return (
@@ -92,7 +93,7 @@ const Topbar: React.FC = () => {
                 <span className="d-none d-lg-inline me-2 text-gray-600 small">
                   Valerie Luna
                 </span>
-                <img
+                <Image
                   className="border rounded-circle img-profile"
                   src="assets/img/avatars/avatar1.jpeg"
                   alt="profile"
diff --git a/src/pages/chat.tsx b/src/pages/chat.tsx
index aac0051..c2dd76e 100644
--- a/src/pages/chat.tsx
+++ b/src/pages/chat.tsx
@@ -6,6 +6,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faPaperPlane } from "@fortawesome/free-solid-svg-icons";
 import { Chat, Message } from "@/types";
 import socket from "../socket";
+import Image from "next/image";
 
 const ChatApp: React.FC = () => {
   const [message, setMessage] = useState<string>("");
@@ -77,7 +78,7 @@ const ChatApp: React.FC = () => {
               </div>
               <ul className={`list-unstyled ${styles["chat-list"]} mt-2 mb-0`}>
                 <li className={styles.clearfix}>
-                  <img
+                  <Image
                     src="https://bootdey.com/img/Content/avatar/avatar1.png"
                     alt="avatar"
                   />
@@ -98,7 +99,7 @@ const ChatApp: React.FC = () => {
               <div className={`${styles["chat-header"]} ${styles.clearfix}`}>
                 <div className="row">
                   <div className="col-lg-6">
-                    <img
+                    <Image
                       src="https://bootdey.com/img/Content/avatar/avatar2.png"
                       alt="avatar"
                     />
@@ -124,7 +125,7 @@ const ChatApp: React.FC = () => {
                           <span className={`${styles["message-data-time"]}`}>
                             {msg.timeStamp.toLocaleTimeString()}
                           </span>
-                          <img
+                          <Image
                             src="https://bootdey.com/img/Content/avatar/avatar7.png"
                             alt="avatar"
                           />
diff --git a/src/pages/dashboard.tsx b/src/pages/dashboard.tsx
index 1c5cc12..8814a72 100644
--- a/src/pages/dashboard.tsx
+++ b/src/pages/dashboard.tsx
@@ -7,6 +7,7 @@ import { Chat, Message } from "@/types";
 import { Sidebar, Topbar } from "@/components";
 import socket from "@/socket";
 import { width } from "@fortawesome/free-brands-svg-icons/fa42Group";
+import Image from "next/image";
 
 const Dashboard = () => {
   const [usersChats, setUsersChats] = useState<Chat[]>([]);
@@ -184,7 +185,7 @@ const Dashboard = () => {
                         className={`${styles["clearfix"]} `}
                         onClick={() => handleChangeChat(chat)}
                       >
-                        <img
+                        <Image
                           src="https://bootdey.com/img/Content/avatar/avatar1.png"
                           alt="avatar"
                         />
@@ -248,7 +249,7 @@ const Dashboard = () => {
                   <div className="row">
                     <div className="col-6  " style={{ height: "100%" }}>
                       <a data-toggle="modal" data-target="#view_info">
-                        <img
+                        <Image
                           src="https://bootdey.com/img/Content/avatar/avatar2.png"
                           alt="avatar"
                         />
@@ -343,7 +344,7 @@ const Dashboard = () => {
                           <span className={`${styles["message-data-time"]}`}>
                             {new Date(msg.timeStamp).toLocaleTimeString()}
                           </span>
-                          <img
+                          <Image
                             src="https://bootdey.com/img/Content/avatar/avatar7.png"
                             alt="avatar"
                           />
diff --git a/src/pages/register.tsx b/src/pages/register.tsx
index 0f70944..2c0234e 100644
--- a/src/pages/register.tsx
+++ b/src/pages/register.tsx
@@ -6,6 +6,7 @@ import { useRouter } from "next/router";
 import axios from "axios";
 import dogImage from "../assets/images/dogs/dog_orange_bg.jpeg";
 import Link from "next/link";
+import Image from "next/image";
 
 const Register: React.FC = () => {
   const router = useRouter();
@@ -80,7 +81,7 @@ const Register: React.FC = () => {
                 <div className="row">
                   <div className="col-lg-6 d-none d-lg-flex">
                     <div className="flex-grow-1 bg-login-image">
-                      <img
+                      <Image
                         className="flex-grow-1 bg-login-image"
                         src={dogImage.src}
                         alt=""

From eeb62262543bfa6098c4762a1beeb91e020ee5f6 Mon Sep 17 00:00:00 2001
From: Roie <roiy0987@gmail.com>
Date: Tue, 6 Aug 2024 18:36:26 +0300
Subject: [PATCH 004/242] change directory for styles

---
 {styles => src/styles}/chat.module.css | 0
 {styles => src/styles}/chat.scss       | 0
 2 files changed, 0 insertions(+), 0 deletions(-)
 rename {styles => src/styles}/chat.module.css (100%)
 rename {styles => src/styles}/chat.scss (100%)

diff --git a/styles/chat.module.css b/src/styles/chat.module.css
similarity index 100%
rename from styles/chat.module.css
rename to src/styles/chat.module.css
diff --git a/styles/chat.scss b/src/styles/chat.scss
similarity index 100%
rename from styles/chat.scss
rename to src/styles/chat.scss

From 57c3947dd2e735c70a9c5516722b86b15b9f4816 Mon Sep 17 00:00:00 2001
From: Roie <roiy0987@gmail.com>
Date: Tue, 6 Aug 2024 18:36:38 +0300
Subject: [PATCH 005/242] chore: Update tsconfig.json paths for component,
 page, style, and socket directories

---
 tsconfig.json | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/tsconfig.json b/tsconfig.json
index 7b28589..f3eadef 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -17,8 +17,13 @@
         "name": "next"
       }
     ],
+    "baseUrl": ".",
     "paths": {
-      "@/*": ["./src/*"]
+      "@/*": ["./src/*"],
+      "@/components/*": ["src/components/*"],
+      "@/pages/*": ["src/pages/*"],
+      "@/styles/*": ["src/styles/*"],
+      "@/socket/*": ["src/socket/*"]
     }
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],

From 3127bc28e68f500b07065d57c80d79a52ad9a387 Mon Sep 17 00:00:00 2001
From: Roie <roiy0987@gmail.com>
Date: Tue, 6 Aug 2024 18:36:49 +0300
Subject: [PATCH 006/242] Refactor import paths for chat and dashboard pages

---
 src/pages/chat.tsx      | 4 ++--
 src/pages/dashboard.tsx | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/pages/chat.tsx b/src/pages/chat.tsx
index aac0051..30672e0 100644
--- a/src/pages/chat.tsx
+++ b/src/pages/chat.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from "react";
-import styles from "../../styles/chat.module.css";
-import "../../styles/chat.scss";
+import styles from "../styles/chat.module.css";
+import "../styles/chat.scss";
 import { Textarea } from "@/components";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faPaperPlane } from "@fortawesome/free-solid-svg-icons";
diff --git a/src/pages/dashboard.tsx b/src/pages/dashboard.tsx
index 1c5cc12..1348f79 100644
--- a/src/pages/dashboard.tsx
+++ b/src/pages/dashboard.tsx
@@ -1,4 +1,4 @@
-import styles from "../../styles/chat.module.css";
+import styles from "../styles/chat.module.css";
 import { useEffect, useRef, useState } from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faDownload } from "@fortawesome/free-solid-svg-icons";

From 465d4a52f3c7be33cd7e3f0ebc71353f964c96be Mon Sep 17 00:00:00 2001
From: Roie <roiy0987@gmail.com>
Date: Tue, 6 Aug 2024 18:37:34 +0300
Subject: [PATCH 007/242] chore: Update Dockerfile to copy tsconfig.json
 instead of jsconfig.json

---
 Dockerfile | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Dockerfile b/Dockerfile
index 7a993dd..996cb80 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -12,7 +12,7 @@ WORKDIR /app
 COPY --from=deps /app/node_modules ./node_modules
 COPY src ./src
 COPY public ./public
-COPY package.json next.config.js jsconfig.json ./
+COPY package.json next.config.mjs tsconfig.json ./
 RUN npm run build
 
 # Stage 3: run

From e234779d02f9dce8860f1e96c2fb71c596fdda28 Mon Sep 17 00:00:00 2001
From: Roie <roiy0987@gmail.com>
Date: Wed, 14 Aug 2024 16:06:34 +0300
Subject: [PATCH 008/242] chore: Update socket configuration and body style in
 layout component

---
 src/app/layout.tsx                  |   4 +-
 src/components/Sidebar/Sidebar.scss |   8 +
 src/components/Sidebar/Sidebar.tsx  |  91 ++++++---
 src/components/Topbar/Topbar.tsx    |   5 +-
 src/pages/_app.tsx                  |  24 ++-
 src/pages/dashboard.tsx             | 276 ++++++++++++++++++++--------
 src/socket.ts                       |   4 +-
 src/styles/chat.module.css          |  15 +-
 src/styles/dashboard.scss           |  52 ++++++
 9 files changed, 363 insertions(+), 116 deletions(-)
 create mode 100644 src/styles/dashboard.scss

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 3314e47..e7dc626 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -16,7 +16,9 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
-      <body className={inter.className}>{children}</body>
+      <body style={{ height: "100vh" }} className={inter.className}>
+        {children}
+      </body>
     </html>
   );
 }
diff --git a/src/components/Sidebar/Sidebar.scss b/src/components/Sidebar/Sidebar.scss
index eb89671..de8a21a 100644
--- a/src/components/Sidebar/Sidebar.scss
+++ b/src/components/Sidebar/Sidebar.scss
@@ -60,3 +60,11 @@
   background-image: linear-gradient(180deg, #4e73df 10%, #224abe 100%);
   background-size: cover;
 }
+
+.bg-logout {
+  background-color: #e05b66 !important;
+  display: flex;
+  justify-content: center !important;
+  align-items: center !important;
+  // background-image: linear-gradient(180deg, #f8d7da 10%, #f8d7da 100%);
+}
diff --git a/src/components/Sidebar/Sidebar.tsx b/src/components/Sidebar/Sidebar.tsx
index 92a996f..361feb9 100644
--- a/src/components/Sidebar/Sidebar.tsx
+++ b/src/components/Sidebar/Sidebar.tsx
@@ -3,16 +3,27 @@ import "./Sidebar.scss";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import {
   faLaughWink,
+  faSignOut,
   faTachometerAlt,
   faUser,
 } from "@fortawesome/free-solid-svg-icons";
+import { apiRequest } from "@/common";
+import { useRouter } from "next/navigation";
+import Link from "next/link";
 
 const Sidebar: React.FC = () => {
+  const router = useRouter();
+
+  async function handleLogout(): Promise<void> {
+    console.log("Logging out");
+    await apiRequest("/auth/logout", "POST");
+    router.push("/login"); // Client-side redirect
+  }
   return (
-    <nav className="navbar align-items-start sidebar sidebar-dark accordion bg-gradient-primary p-0 navbar-dark">
+    <nav className="navbar d-flex flex-column align-items-start sidebar sidebar-dark accordion bg-gradient-primary p-0 navbar-dark h-100">
       <div
-        className="container-fluid d-flex flex-column p-0"
-        style={{ flexWrap: "wrap" }}
+        className="container d-flex flex-column justify-content-start p-0"
+        style={{ height: "100%" }}
       >
         <a
           className="navbar-brand d-flex justify-content-center align-items-center sidebar-brand m-0`"
@@ -25,32 +36,54 @@ const Sidebar: React.FC = () => {
             <span>SupportAI</span>
           </div>
         </a>
-        <hr className="sidebar-divider my-0" />
-        <ul className="navbar-nav text-light" id="accordionSidebar">
-          <li className="nav-item">
-            <a className="nav-link active sidebarItemBlock" href="#">
-              <FontAwesomeIcon
-                className="sidebarItem "
-                icon={faTachometerAlt}
-              />
-              <span>Chat</span>
-            </a>
-          </li>
-          <li className="nav-item">
-            <a className="nav-link sidebarItemBlock " href="#">
-              <FontAwesomeIcon
-                className="styles.sidebarItem me-1"
-                icon={faUser}
-              />
-              <span>Guides</span>
-            </a>
-          </li>
-        </ul>
-        <div className="text-center d-none d-md-inline">
-          <button
-            className="btn pulse animated rounded-circle border-0"
-            type="button"
-          ></button>
+
+        <div
+          className="d-flex flex-column justify-content-between"
+          style={{ height: "90%" }}
+        >
+          <div className="row d-flex align-items-start justify-content-start">
+            <ul className="navbar-nav text-light d-flex justify-content-start align-items-start">
+              <li className="nav-item d-flex justify-content-start align-items-start">
+                <Link
+                  className="nav-link active sidebarItemBlock"
+                  href="/dashboard"
+                >
+                  <FontAwesomeIcon
+                    className="sidebarItem "
+                    icon={faTachometerAlt}
+                  />
+                  <span>Chat</span>
+                </Link>
+              </li>
+              <li className="nav-item">
+                <Link className="nav-link sidebarItemBlock " href="/guides">
+                  <FontAwesomeIcon
+                    className="styles.sidebarItem me-1"
+                    icon={faUser}
+                  />
+                  <span>Guides</span>
+                </Link>
+              </li>
+            </ul>
+          </div>
+
+          <div className="row d-flex align-items-center justify-content-center">
+            <button
+              className="btn text-light bg-logout col-6"
+              type="button"
+              onClick={handleLogout}
+            >
+              <div className="row d-flex  ">
+                <div className="col-7 d-flex ">Logout</div>
+                <div className="col-5 d-flex ">
+                  <FontAwesomeIcon
+                    className="text-light pt-1 "
+                    icon={faSignOut}
+                  />
+                </div>
+              </div>
+            </button>
+          </div>
         </div>
       </div>
     </nav>
diff --git a/src/components/Topbar/Topbar.tsx b/src/components/Topbar/Topbar.tsx
index 84d15ee..600d2fb 100644
--- a/src/components/Topbar/Topbar.tsx
+++ b/src/components/Topbar/Topbar.tsx
@@ -93,9 +93,10 @@ const Topbar: React.FC = () => {
                 <span className="d-none d-lg-inline me-2 text-gray-600 small">
                   Valerie Luna
                 </span>
-                <Image
+                <img
                   className="border rounded-circle img-profile"
-                  src="assets/img/avatars/avatar1.jpeg"
+                  src="https://bootdey.com/img/Content/avatar/avatar7.png"
+                  style={{ width: "30px", height: "30px" }}
                   alt="profile"
                 />
               </a>
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index b97528d..6a2bb1a 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -1,8 +1,30 @@
+import { Sidebar } from "@/components";
 import "bootstrap/dist/css/bootstrap.css";
 import "font-awesome/css/font-awesome.min.css";
+import { useRouter } from "next/router";
 
 function MyApp({ Component, pageProps }: { Component: any; pageProps: any }) {
-  return <Component {...pageProps} />;
+  const router = useRouter();
+  const hideForRoutes = ["/login", "/register"];
+
+  return (
+    <div className="container h-100 p-0 m-0 " style={{ minWidth: "100%" }}>
+      {!hideForRoutes.includes(router.pathname) ? (
+        <div className="main-div h-100 d-flex flex-row m-0">
+          <div className="" style={{ minHeight: "100%" }}>
+            <Sidebar />
+          </div>
+          <div className="w-100">
+            <Component {...pageProps} />
+          </div>
+        </div>
+      ) : (
+        <div className="w-100 h-100">
+          <Component {...pageProps} />
+        </div>
+      )}
+    </div>
+  );
 }
 
 export default MyApp;
diff --git a/src/pages/dashboard.tsx b/src/pages/dashboard.tsx
index 0fac4aa..deeafe6 100644
--- a/src/pages/dashboard.tsx
+++ b/src/pages/dashboard.tsx
@@ -2,12 +2,19 @@ import styles from "../styles/chat.module.css";
 import { useEffect, useRef, useState } from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faDownload } from "@fortawesome/free-solid-svg-icons";
-import axios from "axios";
+
 import { Chat, Message } from "@/types";
 import { Sidebar, Topbar } from "@/components";
 import socket from "@/socket";
-import { width } from "@fortawesome/free-brands-svg-icons/fa42Group";
-import Image from "next/image";
+import "../styles/dashboard.scss";
+import { apiRequest, SERVER_URL } from "@/common";
+import { getCookie } from "cookies-next";
+import axios from "axios";
+import { useRouter } from "next/router";
+import { cookies } from "next/headers";
+import { parse } from "cookie";
+
+// import Image from "next/image";
 
 const Dashboard = () => {
   const [usersChats, setUsersChats] = useState<Chat[]>([]);
@@ -15,33 +22,37 @@ const Dashboard = () => {
   const [message, setMessage] = useState<string>("");
   const [chatMessages, setChatMessages] = useState<Message[]>([]);
   const [selectedChat, setSelectedChat] = useState<Chat>();
+  const [isNote, setIsNote] = useState<boolean>(false);
+  const router = useRouter();
 
   useEffect(() => {
     const fetchChats = async () => {
-      axios.defaults.withCredentials = true;
-      const response = await axios.get(
-        process.env.NEXT_PUBLIC_SERVER_URL + "/chats"
-      );
-      console.log(response.data);
-
-      console.log(response.data[0].chatId);
+      try {
+        const response = await apiRequest("/chats", "GET");
+        console.log(response);
 
-      setUsersChats(response.data as Chat[]);
-      console.log(usersChats);
+        setUsersChats(response as Chat[]);
 
-      setSelectedChat(response.data[0]);
-      const messages = await axios.get(
-        process.env.NEXT_PUBLIC_SERVER_URL + "/chats/" + response.data[0].chatId
-      );
-      console.log(messages.data.messages);
+        setSelectedChat(response[0]);
+        const messages = await apiRequest(
+          "/chats/" + response[0].chatId,
+          "GET"
+        );
 
-      setChatMessages(messages.data.messages as Message[]);
+        setChatMessages(messages.messages as Message[]);
+      } catch (err: any) {
+        console.log(err);
+        if (err.response?.status === 401) {
+          router.push("/login");
+        }
+      }
     };
     fetchChats();
   }, []);
 
   useEffect(() => {
     console.log("Chat Messages:", chatMessages);
+    console.log(socket);
   }, [chatMessages]);
 
   useEffect(() => {
@@ -57,10 +68,12 @@ const Dashboard = () => {
   }, []);
 
   useEffect(() => {
+    console.log("Selected Chat:", selectedChat);
+
     if (selectedChat) {
       const fd = new FormData();
       fd.append("chatId", selectedChat.chatId.toString());
-      socket.emit("join", fd);
+      socket.emit("join", { chatId: selectedChat.chatId });
 
       // If user sends a new message
       socket.on("newMessage", (message: Message) => {
@@ -87,16 +100,26 @@ const Dashboard = () => {
         container.parentElement!.style.height = `${
           container.parentElement!.scrollHeight
         }px`;
-        container.parentElement!.style.marginTop = `-${newHeight - 24}px`;
+        // container.parentElement!.style.marginTop = `-${newHeight - 24}px`;
+        const lines = textareaRef.current.value.split("\n").length;
+
+        if (newHeight >= 30 * 5) {
+          container.parentElement!.style.marginTop = `-${(lines - 5) * 24}px`;
+        } else {
+          container.parentElement!.style.marginTop = `0px`;
+        }
       }
     }
   }, [message]);
 
   const handleChangeChat = async (chat: Chat) => {
-    const messages = await axios.get(
-      process.env.NEXT_PUBLIC_SERVER_URL + "/chats/" + chat.chatId
-    );
-    setChatMessages(messages.data);
+    // if (selectedChat?.chatId === chat.chatId) {
+    //   console.log("Same chat");
+    //   return;
+    // }
+    const messages = await apiRequest("/chats/" + chat.chatId, "GET");
+
+    setChatMessages(messages.messages as Message[]);
     setSelectedChat(chat);
   };
 
@@ -112,10 +135,12 @@ const Dashboard = () => {
 
   const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
     if (e.key === "Enter" && e.shiftKey) {
+      e.preventDefault();
       const lines = message.split("\n");
       if (lines.length >= 10) {
-        e.preventDefault();
+        return;
       }
+      setMessage((prev) => prev + "\n");
     } else if (e.key === "Enter") {
       e.preventDefault();
       handleSend();
@@ -123,33 +148,65 @@ const Dashboard = () => {
   };
 
   async function handleSend() {
+    console.log("Sending message");
+
     if (message.trim() === "") {
       return;
     }
-    const newMessage: Message = {
+    // const newMessage: Message = {
+    //   content: message,
+    //   isNote: false,
+    //   isSupportSender: true,
+    //   chatId: selectedChat!.chatId,
+    //   timeStamp: new Date(),
+    //   messageId: 0,
+    // };
+    console.log(selectedChat);
+    const data = {
+      chatId: selectedChat?.chatId,
       content: message,
-      isNote: false,
+    };
+    const allMessage = {
+      data: data,
       isSupportSender: true,
-      chatId: selectedChat!.chatId,
-      timeStamp: new Date(),
-      messageId: 0,
+      isNote: isNote,
     };
+    console.log("Message:", message);
+
     if (selectedChat) {
       const fd = new FormData();
-      fd.append("chatId", selectedChat.chatId.toString());
-      fd.append("content", message);
-      fd.append("isNote", "false");
+      fd.append("data", JSON.stringify(data));
       fd.append("isSupportSender", "true");
-      fd.append("timeStamp", newMessage.timeStamp.toISOString());
-      setChatMessages([...chatMessages, newMessage]);
-      socket.emit("message", fd);
+      fd.append("isNote", isNote.toString());
+      socket.emit("message", allMessage);
       setMessage("");
     }
   }
 
+  async function handleGenerateGuide(
+    event: React.MouseEvent<HTMLAnchorElement, MouseEvent>
+  ): Promise<void> {
+    event.preventDefault();
+    console.log("Generating guide");
+
+    const generatedGuide = await axios.post(
+      "localhost:3002/openai/generate-guide",
+      {
+        chatId: selectedChat?.chatId,
+      }
+    );
+    localStorage.setItem("generatedGuide", generatedGuide.data);
+    router.push("/editor");
+  }
+
   return (
-    <div id="wrapper" className="d-flex">
-      <Sidebar />
+    <div
+      id="wrapper"
+      className="d-flex "
+      style={{ minHeight: "100vh", flexDirection: "column" }}
+    >
+      {/* <Sidebar /> */}
+
       <div
         id="content-wrapper"
         className="d-flex flex-column"
@@ -185,13 +242,14 @@ const Dashboard = () => {
                         className={`${styles["clearfix"]} `}
                         onClick={() => handleChangeChat(chat)}
                       >
-                        <Image
+                        <img
                           src="https://bootdey.com/img/Content/avatar/avatar1.png"
                           alt="avatar"
+                          // style={{ width: "50px", height: "50px" }}
                         />
                         <div className={styles.about}>
                           <div className={styles.name}>
-                            <span>userName</span>
+                            <span>{chat.user?.username}</span>
                           </div>
                           <div className={styles.status}>
                             <i
@@ -243,19 +301,24 @@ const Dashboard = () => {
                 </li> */}
               </ul>
             </div>
-            <div className={styles.chat}>
+            <div className={`${styles.chat}`} style={{ marginLeft: "280px" }}>
               <div className={`${styles["chat-header"]} ${styles.clearfix}`}>
                 {selectedChat ? (
                   <div className="row">
-                    <div className="col-6  " style={{ height: "100%" }}>
-                      <a data-toggle="modal" data-target="#view_info">
-                        <Image
-                          src="https://bootdey.com/img/Content/avatar/avatar2.png"
-                          alt="avatar"
-                        />
-                      </a>
+                    <div
+                      className="col-6 d-flex align-items-center "
+                      style={{ height: "100%" }}
+                    >
+                      <img
+                        src="https://bootdey.com/img/Content/avatar/avatar2.png"
+                        alt="avatar"
+                        style={{ height: "2.5rem", width: "2.5rem" }}
+                      />
+
                       <div className={`${styles["chat-about"]}`}>
-                        <h6 className="m-b-0">selectedChat?.userName</h6>
+                        <h6 className="m-b-0">
+                          {selectedChat?.user?.username}
+                        </h6>
                         <small>Last seen: 2 hours ago</small>
                       </div>
                     </div>
@@ -280,6 +343,7 @@ const Dashboard = () => {
                           borderStyle: "inherit",
                           borderRadius: "5px",
                         }}
+                        onClick={handleGenerateGuide}
                       >
                         <FontAwesomeIcon icon={faDownload} />
                         &nbsp;Generate Guide
@@ -317,46 +381,62 @@ const Dashboard = () => {
                     </div>
                   </div>
                 ) : null}
-                {/* <div className="col-6 offset-xxl-0" id="col-user-profile">
-                    <a data-toggle="modal" data-target="#view_info">
-                      <img
-                        src="https://bootdey.com/img/Content/avatar/avatar2.png"
-                        alt="avatar"
-                      />
-                    </a>
-                    <div className={`${styles["chat-about"]}`}>
-                      <h6 className="m-b-0">Aiden Chavez</h6>
-                      <small>Last seen: 2 hours ago</small>
-                    </div>
-                  </div> */}
               </div>
               <div
                 className={styles["chat-history"]}
-                style={{ height: "35.3rem", overflowY: "auto" }}
+                style={{ height: "27.9rem", overflowY: "auto" }}
               >
-                <ul className="m-b-0">
+                <ul className="mb-0">
                   {chatMessages.map((msg, index) => {
                     return (
                       <li key={index} className={`${styles.clearfix}`}>
                         <div
-                          className={`d-flex justify-content-end ${styles["message-data"]}`}
+                          className={`d-flex ${
+                            msg.isSupportSender
+                              ? "justify-content-end"
+                              : "justify-content-start"
+                          } ${styles["message-data"]} align-items-center`}
                         >
                           <span className={`${styles["message-data-time"]}`}>
-                            {new Date(msg.timeStamp).toLocaleTimeString()}
+                            {new Date(msg.timeStamp).toLocaleTimeString(
+                              "il-IL",
+                              {
+                                hour: "2-digit",
+                                minute: "2-digit",
+                                hour12: false,
+                                month: "2-digit",
+                                day: "2-digit",
+                              }
+                            )}
                           </span>
-                          <Image
-                            src="https://bootdey.com/img/Content/avatar/avatar7.png"
-                            alt="avatar"
-                          />
+                          {msg.isSupportSender ? (
+                            <img
+                              className="ms-2"
+                              src="https://bootdey.com/img/Content/avatar/avatar7.png"
+                              alt="avatar"
+                            />
+                          ) : (
+                            <img
+                              className="ms-2"
+                              src="https://bootdey.com/img/Content/avatar/avatar1.png"
+                              alt="avatar"
+                            />
+                          )}
                         </div>
                         <div
                           className={`${styles["message"]} ${
                             msg.isSupportSender
-                              ? `${styles["float-right"]} ${styles["other-message"]}`
+                              ? `${styles["float-right"]} ${styles["other-message"]} `
                               : `${styles["my-message"]}`
-                          }`}
+                          } ${msg.isNote ? "note-message" : ""}`}
                         >
-                          {msg.content}
+                          {msg.content.split("\n").map((line, index) => {
+                            return (
+                              <p key={index} className="m-0">
+                                {line}
+                              </p>
+                            );
+                          })}
                         </div>
                       </li>
                     );
@@ -364,12 +444,12 @@ const Dashboard = () => {
                 </ul>
               </div>
               <div
-                className="container"
+                className="container mt-2"
                 style={{
                   bottom: "0",
                   padding: 0,
                   position: "relative",
-                  minWidth: "90%",
+                  minWidth: "98.5%",
                   border: "1px solid rgba(133, 135, 150, 0.32)",
                   borderRadius: "8px",
                   margin: "10px",
@@ -383,13 +463,17 @@ const Dashboard = () => {
                 <div className="row my-2 ms-2">
                   <div className="col" style={{ padding: 0 }}>
                     <button
-                      className="btn btn-sm"
+                      className={`btn-type ${!isNote ? "btn-selected" : ""}`}
                       type="button"
-                      style={{ backgroundColor: "white" }}
+                      onClick={() => setIsNote(false)}
                     >
                       Reply
                     </button>
-                    <button className="btn btn-sm" type="button">
+                    <button
+                      className={`btn-type ${isNote ? "btn-selected" : ""}`}
+                      type="button"
+                      onClick={() => setIsNote(true)}
+                    >
                       Note
                     </button>
                   </div>
@@ -422,7 +506,7 @@ const Dashboard = () => {
                       <button
                         className="btn btn-primary btn-sm"
                         type="button"
-                        onSubmit={handleSend}
+                        onClick={handleSend}
                       >
                         Send
                       </button>
@@ -448,4 +532,40 @@ const Dashboard = () => {
   );
 };
 
+export async function getServerSideProps(context: { req: any }) {
+  const cookieValue = getCookie("Authorization", { req: context.req });
+  // console.log(cookies().getAll());
+  const { req } = context;
+  // const cookies = parse(req.headers.cookie || "");
+  // console.log(cookies);
+  // try {
+  //   const testCookie = await axios.get(`${SERVER_URL}/chats`, {
+  //     withCredentials: true,
+  //   });
+  // } catch (err: any) {
+  //   console.log(err);
+  //   if (err.response.status === 401) {
+  //     return {
+  //       redirect: {
+  //         destination: "/login",
+  //         permanent: false,
+  //       },
+  //     };
+  //   }
+  // }
+
+  if (!cookieValue) {
+    return {
+      redirect: {
+        destination: "/login",
+        permanent: false,
+      },
+    };
+  }
+
+  return {
+    props: {},
+  };
+}
+
 export default Dashboard;
diff --git a/src/socket.ts b/src/socket.ts
index a4325a3..0272a3c 100644
--- a/src/socket.ts
+++ b/src/socket.ts
@@ -1,5 +1,7 @@
 import { io, Socket } from "socket.io-client";
 
-let socket: Socket = io(process.env.BACKEND_URL || "http://localhost:3000");
+let socket: Socket = io("http://localhost:8080/chat", {
+  transports: ["websocket", "polling"],
+});
 
 export default socket;
diff --git a/src/styles/chat.module.css b/src/styles/chat.module.css
index 3333a69..ac00719 100644
--- a/src/styles/chat.module.css
+++ b/src/styles/chat.module.css
@@ -19,7 +19,6 @@
 }
 
 .chat-app .chat {
-  margin-left: 280px;
   border-left: 1px solid #eaeaea;
 }
 
@@ -169,8 +168,8 @@
   width: 0;
   position: absolute;
   pointer-events: none;
-  border-bottom-color: #efefef;
   border-width: 10px;
+  border-bottom-color: #ddd8d8;
   margin-left: -10px;
 }
 
@@ -180,8 +179,16 @@
 }
 
 .chat .chat-history .other-message:after {
-  border-bottom-color: #e8f1f3;
-  left: 93%;
+  border-bottom-color: #ddeff3;
+  margin-right: -10px;
+
+  height: 0;
+  width: 0;
+  position: absolute;
+  pointer-events: none;
+  border-width: 10px;
+  bottom: 100%;
+  left: 1.75rem !important;
 }
 
 .chat .chat-message {
diff --git a/src/styles/dashboard.scss b/src/styles/dashboard.scss
new file mode 100644
index 0000000..0add53c
--- /dev/null
+++ b/src/styles/dashboard.scss
@@ -0,0 +1,52 @@
+.btn-selected {
+  background-color: #afc0d3;
+}
+
+.btn-selected:hover {
+  background-color: #afc0d3 !important;
+}
+
+.btn-selected:active {
+  background-color: #afc0d3 !important;
+}
+
+.btn-selected:focus {
+  background-color: #afc0d3 !important;
+}
+
+.btn-type {
+  border: none;
+  padding: 0.25rem 0.5rem;
+  border-radius: 0.25rem;
+}
+
+.note-message {
+  background-color: rgba(254, 237, 175) !important;
+}
+
+.note-message:after {
+  border-bottom-color: rgba(254, 237, 175) !important;
+}
+
+::-webkit-scrollbar {
+  width: 0.3rem !important;
+  border-radius: 5px !important;
+}
+
+/* Track */
+::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: 5px !important;
+}
+
+/* Handle */
+::-webkit-scrollbar-thumb {
+  background: #888;
+  border-radius: 5px !important;
+}
+
+/* Handle on hover */
+::-webkit-scrollbar-thumb:hover {
+  background: #555;
+  border-radius: 5px !important;
+}

From 7aefc767f0aa07211cdc60c723d6ed1509a6ccc8 Mon Sep 17 00:00:00 2001
From: Tomer Mizrahi <110380894+TomerMiz10@users.noreply.github.com>
Date: Wed, 14 Aug 2024 19:23:36 +0300
Subject: [PATCH 009/242] Update .gitignore

---
 .gitignore | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/.gitignore b/.gitignore
index 0be553d..cb33425 100644
--- a/.gitignore
+++ b/.gitignore
@@ -38,3 +38,5 @@ next-env.d.ts
 
 # .env
 .env
+
+.github/*

From bd0d7ab3501236c0ac1577c5066111802389f9eb Mon Sep 17 00:00:00 2001
From: nitzanto <nitzan16001@gmail.com>
Date: Wed, 14 Aug 2024 21:26:53 +0300
Subject: [PATCH 010/242] feat: signup, login, auth changes

---
 package-lock.json                            | 891 ++++++++++++++++++-
 package.json                                 |  13 +-
 src/api/auth.client.ts                       |  16 +
 src/api/base.client.ts                       | 112 +++
 src/api/types/login.ts                       |   8 +
 src/app/(public)/login/hooks/useLoginForm.ts |  42 +
 src/app/(public)/login/page.tsx              | 123 +++
 src/app/(public)/login/validations/schema.ts |   6 +
 src/app/(public)/signup/page.tsx             |  97 ++
 src/app/globals.css                          |  30 -
 src/app/layout.tsx                           |   9 +-
 src/app/providers.tsx                        |  11 +
 src/hooks/authHooks.ts                       |  11 +
 src/middleware.ts                            |  37 +
 src/pages/login.tsx                          | 186 ----
 15 files changed, 1350 insertions(+), 242 deletions(-)
 create mode 100644 src/api/auth.client.ts
 create mode 100644 src/api/base.client.ts
 create mode 100644 src/api/types/login.ts
 create mode 100644 src/app/(public)/login/hooks/useLoginForm.ts
 create mode 100644 src/app/(public)/login/page.tsx
 create mode 100644 src/app/(public)/login/validations/schema.ts
 create mode 100644 src/app/(public)/signup/page.tsx
 create mode 100644 src/app/providers.tsx
 create mode 100644 src/hooks/authHooks.ts
 create mode 100644 src/middleware.ts
 delete mode 100644 src/pages/login.tsx

diff --git a/package-lock.json b/package-lock.json
index 7dcaa0a..92cf682 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,24 +8,35 @@
       "name": "supportai-frontend",
       "version": "0.1.0",
       "dependencies": {
+        "@emotion/react": "^11.13.0",
+        "@emotion/styled": "^11.13.0",
         "@fortawesome/fontawesome-svg-core": "^6.5.2",
         "@fortawesome/free-brands-svg-icons": "^6.6.0",
         "@fortawesome/free-solid-svg-icons": "^6.5.2",
         "@fortawesome/react-fontawesome": "^0.2.2",
+        "@hookform/resolvers": "^3.9.0",
+        "@mui/icons-material": "^5.16.7",
+        "@mui/lab": "^5.0.0-alpha.173",
+        "@mui/material": "^5.16.7",
+        "@tanstack/react-query": "^5.51.23",
         "axios": "^1.7.2",
         "bootstrap": "^5.3.3",
         "cookie": "^0.6.0",
         "cookies-next": "^4.2.1",
         "font-awesome": "^4.7.0",
+        "lodash": "^4.17.21",
         "next": "14.2.3",
         "next-cookie": "^2.8.0",
         "react": "^18",
         "react-bootstrap": "^2.10.4",
         "react-dom": "^18",
+        "react-hook-form": "^7.52.2",
         "react-toastify": "^10.0.5",
-        "socket.io-client": "^4.7.5"
+        "socket.io-client": "^4.7.5",
+        "zod": "^3.23.8"
       },
       "devDependencies": {
+        "@types/lodash": "^4.17.7",
         "@types/node": "^20.3.1",
         "@types/react": "^18",
         "@types/react-dom": "^18",
@@ -49,6 +60,152 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/@babel/code-frame": {
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.24.7.tgz",
+      "integrity": "sha512-BcYH1CVJBO9tvyIZ2jVeXgSIMvGZ2FDRvDdOIVQyuklNKSsx+eppDEBq/g47Ayw+RqNFE+URvOShmf+f/qwAlA==",
+      "dependencies": {
+        "@babel/highlight": "^7.24.7",
+        "picocolors": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/generator": {
+      "version": "7.25.0",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.25.0.tgz",
+      "integrity": "sha512-3LEEcj3PVW8pW2R1SR1M89g/qrYk/m/mB/tLqn7dn4sbBUQyTqnlod+II2U4dqiGtUmkcnAmkMDralTFZttRiw==",
+      "dependencies": {
+        "@babel/types": "^7.25.0",
+        "@jridgewell/gen-mapping": "^0.3.5",
+        "@jridgewell/trace-mapping": "^0.3.25",
+        "jsesc": "^2.5.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-module-imports": {
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.24.7.tgz",
+      "integrity": "sha512-8AyH3C+74cgCVVXow/myrynrAGv+nTVg5vKu2nZph9x7RcRwzmh0VFallJuFTZ9mx6u4eSdXZfcOzSqTUm0HCA==",
+      "dependencies": {
+        "@babel/traverse": "^7.24.7",
+        "@babel/types": "^7.24.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-string-parser": {
+      "version": "7.24.8",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.24.8.tgz",
+      "integrity": "sha512-pO9KhhRcuUyGnJWwyEgnRJTSIZHiT+vMD0kPeD+so0l7mxkMT19g3pjY9GTnHySck/hDzq+dtW/4VgnMkippsQ==",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-identifier": {
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.24.7.tgz",
+      "integrity": "sha512-rR+PBcQ1SMQDDyF6X0wxtG8QyLCgUB0eRAGguqRLfkCA87l7yAP7ehq8SNj96OOGTO8OBV70KhuFYcIkHXOg0w==",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/highlight": {
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.24.7.tgz",
+      "integrity": "sha512-EStJpq4OuY8xYfhGVXngigBJRWxftKX9ksiGDnmlY3o7B/V7KIAc9X4oiK87uPJSc/vs5L869bem5fhZa8caZw==",
+      "dependencies": {
+        "@babel/helper-validator-identifier": "^7.24.7",
+        "chalk": "^2.4.2",
+        "js-tokens": "^4.0.0",
+        "picocolors": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/highlight/node_modules/ansi-styles": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+      "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+      "dependencies": {
+        "color-convert": "^1.9.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/@babel/highlight/node_modules/chalk": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+      "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+      "dependencies": {
+        "ansi-styles": "^3.2.1",
+        "escape-string-regexp": "^1.0.5",
+        "supports-color": "^5.3.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/@babel/highlight/node_modules/color-convert": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
+      "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+      "dependencies": {
+        "color-name": "1.1.3"
+      }
+    },
+    "node_modules/@babel/highlight/node_modules/color-name": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
+      "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw=="
+    },
+    "node_modules/@babel/highlight/node_modules/escape-string-regexp": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+      "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
+    "node_modules/@babel/highlight/node_modules/has-flag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+      "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/@babel/highlight/node_modules/supports-color": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+      "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+      "dependencies": {
+        "has-flag": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/@babel/parser": {
+      "version": "7.25.3",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.25.3.tgz",
+      "integrity": "sha512-iLTJKDbJ4hMvFPgQwwsVoxtHyWpKKPBrxkANrSYewDPaPpT5py5yeVkgPIJ7XYXhndxJpaA3PyALSXQ7u8e/Dw==",
+      "dependencies": {
+        "@babel/types": "^7.25.2"
+      },
+      "bin": {
+        "parser": "bin/babel-parser.js"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
     "node_modules/@babel/runtime": {
       "version": "7.24.8",
       "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.24.8.tgz",
@@ -60,6 +217,190 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@babel/template": {
+      "version": "7.25.0",
+      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.25.0.tgz",
+      "integrity": "sha512-aOOgh1/5XzKvg1jvVz7AVrx2piJ2XBi227DHmbY6y+bM9H2FlN+IfecYu4Xl0cNiiVejlsCri89LUsbj8vJD9Q==",
+      "dependencies": {
+        "@babel/code-frame": "^7.24.7",
+        "@babel/parser": "^7.25.0",
+        "@babel/types": "^7.25.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/traverse": {
+      "version": "7.25.3",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.25.3.tgz",
+      "integrity": "sha512-HefgyP1x754oGCsKmV5reSmtV7IXj/kpaE1XYY+D9G5PvKKoFfSbiS4M77MdjuwlZKDIKFCffq9rPU+H/s3ZdQ==",
+      "dependencies": {
+        "@babel/code-frame": "^7.24.7",
+        "@babel/generator": "^7.25.0",
+        "@babel/parser": "^7.25.3",
+        "@babel/template": "^7.25.0",
+        "@babel/types": "^7.25.2",
+        "debug": "^4.3.1",
+        "globals": "^11.1.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/traverse/node_modules/globals": {
+      "version": "11.12.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
+      "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/@babel/types": {
+      "version": "7.25.2",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.25.2.tgz",
+      "integrity": "sha512-YTnYtra7W9e6/oAZEHj0bJehPRUlLH9/fbpT5LfB0NhQXyALCRkRs3zH9v07IYhkgpqX6Z78FnuccZr/l4Fs4Q==",
+      "dependencies": {
+        "@babel/helper-string-parser": "^7.24.8",
+        "@babel/helper-validator-identifier": "^7.24.7",
+        "to-fast-properties": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@emotion/babel-plugin": {
+      "version": "11.12.0",
+      "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.12.0.tgz",
+      "integrity": "sha512-y2WQb+oP8Jqvvclh8Q55gLUyb7UFvgv7eJfsj7td5TToBrIUtPay2kMrZi4xjq9qw2vD0ZR5fSho0yqoFgX7Rw==",
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.16.7",
+        "@babel/runtime": "^7.18.3",
+        "@emotion/hash": "^0.9.2",
+        "@emotion/memoize": "^0.9.0",
+        "@emotion/serialize": "^1.2.0",
+        "babel-plugin-macros": "^3.1.0",
+        "convert-source-map": "^1.5.0",
+        "escape-string-regexp": "^4.0.0",
+        "find-root": "^1.1.0",
+        "source-map": "^0.5.7",
+        "stylis": "4.2.0"
+      }
+    },
+    "node_modules/@emotion/cache": {
+      "version": "11.13.1",
+      "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.13.1.tgz",
+      "integrity": "sha512-iqouYkuEblRcXmylXIwwOodiEK5Ifl7JcX7o6V4jI3iW4mLXX3dmt5xwBtIkJiQEXFAI+pC8X0i67yiPkH9Ucw==",
+      "dependencies": {
+        "@emotion/memoize": "^0.9.0",
+        "@emotion/sheet": "^1.4.0",
+        "@emotion/utils": "^1.4.0",
+        "@emotion/weak-memoize": "^0.4.0",
+        "stylis": "4.2.0"
+      }
+    },
+    "node_modules/@emotion/hash": {
+      "version": "0.9.2",
+      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.2.tgz",
+      "integrity": "sha512-MyqliTZGuOm3+5ZRSaaBGP3USLw6+EGykkwZns2EPC5g8jJ4z9OrdZY9apkl3+UP9+sdz76YYkwCKP5gh8iY3g=="
+    },
+    "node_modules/@emotion/is-prop-valid": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.3.0.tgz",
+      "integrity": "sha512-SHetuSLvJDzuNbOdtPVbq6yMMMlLoW5Q94uDqJZqy50gcmAjxFkVqmzqSGEFq9gT2iMuIeKV1PXVWmvUhuZLlQ==",
+      "dependencies": {
+        "@emotion/memoize": "^0.9.0"
+      }
+    },
+    "node_modules/@emotion/memoize": {
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.9.0.tgz",
+      "integrity": "sha512-30FAj7/EoJ5mwVPOWhAyCX+FPfMDrVecJAM+Iw9NRoSl4BBAQeqj4cApHHUXOVvIPgLVDsCFoz/hGD+5QQD1GQ=="
+    },
+    "node_modules/@emotion/react": {
+      "version": "11.13.0",
+      "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.13.0.tgz",
+      "integrity": "sha512-WkL+bw1REC2VNV1goQyfxjx1GYJkcc23CRQkXX+vZNLINyfI7o+uUn/rTGPt/xJ3bJHd5GcljgnxHf4wRw5VWQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.18.3",
+        "@emotion/babel-plugin": "^11.12.0",
+        "@emotion/cache": "^11.13.0",
+        "@emotion/serialize": "^1.3.0",
+        "@emotion/use-insertion-effect-with-fallbacks": "^1.1.0",
+        "@emotion/utils": "^1.4.0",
+        "@emotion/weak-memoize": "^0.4.0",
+        "hoist-non-react-statics": "^3.3.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@emotion/serialize": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.3.0.tgz",
+      "integrity": "sha512-jACuBa9SlYajnpIVXB+XOXnfJHyckDfe6fOpORIM6yhBDlqGuExvDdZYHDQGoDf3bZXGv7tNr+LpLjJqiEQ6EA==",
+      "dependencies": {
+        "@emotion/hash": "^0.9.2",
+        "@emotion/memoize": "^0.9.0",
+        "@emotion/unitless": "^0.9.0",
+        "@emotion/utils": "^1.4.0",
+        "csstype": "^3.0.2"
+      }
+    },
+    "node_modules/@emotion/sheet": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.4.0.tgz",
+      "integrity": "sha512-fTBW9/8r2w3dXWYM4HCB1Rdp8NLibOw2+XELH5m5+AkWiL/KqYX6dc0kKYlaYyKjrQ6ds33MCdMPEwgs2z1rqg=="
+    },
+    "node_modules/@emotion/styled": {
+      "version": "11.13.0",
+      "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.13.0.tgz",
+      "integrity": "sha512-tkzkY7nQhW/zC4hztlwucpT8QEZ6eUzpXDRhww/Eej4tFfO0FxQYWRyg/c5CCXa4d/f174kqeXYjuQRnhzf6dA==",
+      "dependencies": {
+        "@babel/runtime": "^7.18.3",
+        "@emotion/babel-plugin": "^11.12.0",
+        "@emotion/is-prop-valid": "^1.3.0",
+        "@emotion/serialize": "^1.3.0",
+        "@emotion/use-insertion-effect-with-fallbacks": "^1.1.0",
+        "@emotion/utils": "^1.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.0.0-rc.0",
+        "react": ">=16.8.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@emotion/unitless": {
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.9.0.tgz",
+      "integrity": "sha512-TP6GgNZtmtFaFcsOgExdnfxLLpRDla4Q66tnenA9CktvVSdNKDvMVuUah4QvWPIpNjrWsGg3qeGo9a43QooGZQ=="
+    },
+    "node_modules/@emotion/use-insertion-effect-with-fallbacks": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.1.0.tgz",
+      "integrity": "sha512-+wBOcIV5snwGgI2ya3u99D7/FJquOIniQT1IKyDsBmEgwvpxMNeS65Oib7OnE2d2aY+3BU4OiH+0Wchf8yk3Hw==",
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/@emotion/utils": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.4.0.tgz",
+      "integrity": "sha512-spEnrA1b6hDR/C68lC2M7m6ALPUHZC0lIY7jAS/B/9DuuO1ZP04eov8SMv/6fwRd8pzmsn2AuJEznRREWlQrlQ=="
+    },
+    "node_modules/@emotion/weak-memoize": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.4.0.tgz",
+      "integrity": "sha512-snKqtPW01tN0ui7yu9rGv69aJXr/a/Ywvl11sUjNtEcRc+ng/mQriFL0wLXMef74iHa/EkftbDzU9F8iFbH+zg=="
+    },
     "node_modules/@eslint-community/eslint-utils": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz",
@@ -116,6 +457,40 @@
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
+    "node_modules/@floating-ui/core": {
+      "version": "1.6.7",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.7.tgz",
+      "integrity": "sha512-yDzVT/Lm101nQ5TCVeK65LtdN7Tj4Qpr9RTXJ2vPFLqtLxwOrpoxAHAJI8J3yYWUc40J0BDBheaitK5SJmno2g==",
+      "dependencies": {
+        "@floating-ui/utils": "^0.2.7"
+      }
+    },
+    "node_modules/@floating-ui/dom": {
+      "version": "1.6.10",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.10.tgz",
+      "integrity": "sha512-fskgCFv8J8OamCmyun8MfjB1Olfn+uZKjOKZ0vhYF3gRmEUXcGOjxWL8bBr7i4kIuPZ2KD2S3EUIOxnjC8kl2A==",
+      "dependencies": {
+        "@floating-ui/core": "^1.6.0",
+        "@floating-ui/utils": "^0.2.7"
+      }
+    },
+    "node_modules/@floating-ui/react-dom": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.1.tgz",
+      "integrity": "sha512-4h84MJt3CHrtG18mGsXuLCHMrug49d7DFkU0RMIyshRveBeyV2hmV/pDaF2Uxtu8kgq5r46llp5E5FQiR0K2Yg==",
+      "dependencies": {
+        "@floating-ui/dom": "^1.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@floating-ui/utils": {
+      "version": "0.2.7",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.7.tgz",
+      "integrity": "sha512-X8R8Oj771YRl/w+c1HqAC1szL8zWQRwFvgDwT129k9ACdBoud/+/rX9V0qiMl6LWUdP9voC2nDVZYPMQQsb6eA=="
+    },
     "node_modules/@fortawesome/fontawesome-common-types": {
       "version": "6.5.2",
       "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.5.2.tgz",
@@ -180,6 +555,14 @@
         "react": ">=16.3"
       }
     },
+    "node_modules/@hookform/resolvers": {
+      "version": "3.9.0",
+      "resolved": "https://registry.npmjs.org/@hookform/resolvers/-/resolvers-3.9.0.tgz",
+      "integrity": "sha512-bU0Gr4EepJ/EQsH/IwEzYLsT/PEj5C0ynLQ4m+GSHS+xKH4TfSelhluTgOaoc4kA5s7eCsQbM4wvZLzELmWzUg==",
+      "peerDependencies": {
+        "react-hook-form": "^7.0.0"
+      }
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.11.14",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz",
@@ -261,7 +644,6 @@
       "version": "0.3.5",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz",
       "integrity": "sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==",
-      "dev": true,
       "dependencies": {
         "@jridgewell/set-array": "^1.2.1",
         "@jridgewell/sourcemap-codec": "^1.4.10",
@@ -275,7 +657,6 @@
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
       "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
-      "dev": true,
       "engines": {
         "node": ">=6.0.0"
       }
@@ -284,7 +665,6 @@
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz",
       "integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==",
-      "dev": true,
       "engines": {
         "node": ">=6.0.0"
       }
@@ -292,19 +672,314 @@
     "node_modules/@jridgewell/sourcemap-codec": {
       "version": "1.4.15",
       "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
-      "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==",
-      "dev": true
+      "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg=="
     },
     "node_modules/@jridgewell/trace-mapping": {
       "version": "0.3.25",
       "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz",
       "integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==",
-      "dev": true,
       "dependencies": {
         "@jridgewell/resolve-uri": "^3.1.0",
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@mui/base": {
+      "version": "5.0.0-beta.40",
+      "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-beta.40.tgz",
+      "integrity": "sha512-I/lGHztkCzvwlXpjD2+SNmvNQvB4227xBXhISPjEaJUXGImOQ9f3D2Yj/T3KasSI/h0MLWy74X0J6clhPmsRbQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.9",
+        "@floating-ui/react-dom": "^2.0.8",
+        "@mui/types": "^7.2.14",
+        "@mui/utils": "^5.15.14",
+        "@popperjs/core": "^2.11.8",
+        "clsx": "^2.1.0",
+        "prop-types": "^15.8.1"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@types/react": "^17.0.0 || ^18.0.0",
+        "react": "^17.0.0 || ^18.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/core-downloads-tracker": {
+      "version": "5.16.7",
+      "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.16.7.tgz",
+      "integrity": "sha512-RtsCt4Geed2/v74sbihWzzRs+HsIQCfclHeORh5Ynu2fS4icIKozcSubwuG7vtzq2uW3fOR1zITSP84TNt2GoQ==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      }
+    },
+    "node_modules/@mui/icons-material": {
+      "version": "5.16.7",
+      "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-5.16.7.tgz",
+      "integrity": "sha512-UrGwDJCXEszbDI7yV047BYU5A28eGJ79keTCP4cc74WyncuVrnurlmIRxaHL8YK+LI1Kzq+/JM52IAkNnv4u+Q==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.9"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@mui/material": "^5.0.0",
+        "@types/react": "^17.0.0 || ^18.0.0",
+        "react": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/lab": {
+      "version": "5.0.0-alpha.173",
+      "resolved": "https://registry.npmjs.org/@mui/lab/-/lab-5.0.0-alpha.173.tgz",
+      "integrity": "sha512-Gt5zopIWwxDgGy/MXcp6GueD84xFFugFai4hYiXY0zowJpTVnIrTQCQXV004Q7rejJ7aaCntX9hpPJqCrioshA==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.9",
+        "@mui/base": "5.0.0-beta.40",
+        "@mui/system": "^5.16.5",
+        "@mui/types": "^7.2.15",
+        "@mui/utils": "^5.16.5",
+        "clsx": "^2.1.0",
+        "prop-types": "^15.8.1"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.5.0",
+        "@emotion/styled": "^11.3.0",
+        "@mui/material": ">=5.15.0",
+        "@types/react": "^17.0.0 || ^18.0.0",
+        "react": "^17.0.0 || ^18.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/react": {
+          "optional": true
+        },
+        "@emotion/styled": {
+          "optional": true
+        },
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/material": {
+      "version": "5.16.7",
+      "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.16.7.tgz",
+      "integrity": "sha512-cwwVQxBhK60OIOqZOVLFt55t01zmarKJiJUWbk0+8s/Ix5IaUzAShqlJchxsIQ4mSrWqgcKCCXKtIlG5H+/Jmg==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.9",
+        "@mui/core-downloads-tracker": "^5.16.7",
+        "@mui/system": "^5.16.7",
+        "@mui/types": "^7.2.15",
+        "@mui/utils": "^5.16.6",
+        "@popperjs/core": "^2.11.8",
+        "@types/react-transition-group": "^4.4.10",
+        "clsx": "^2.1.0",
+        "csstype": "^3.1.3",
+        "prop-types": "^15.8.1",
+        "react-is": "^18.3.1",
+        "react-transition-group": "^4.4.5"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.5.0",
+        "@emotion/styled": "^11.3.0",
+        "@types/react": "^17.0.0 || ^18.0.0",
+        "react": "^17.0.0 || ^18.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/react": {
+          "optional": true
+        },
+        "@emotion/styled": {
+          "optional": true
+        },
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/material/node_modules/react-is": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
+      "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg=="
+    },
+    "node_modules/@mui/private-theming": {
+      "version": "5.16.6",
+      "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.16.6.tgz",
+      "integrity": "sha512-rAk+Rh8Clg7Cd7shZhyt2HGTTE5wYKNSJ5sspf28Fqm/PZ69Er9o6KX25g03/FG2dfpg5GCwZh/xOojiTfm3hw==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.9",
+        "@mui/utils": "^5.16.6",
+        "prop-types": "^15.8.1"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@types/react": "^17.0.0 || ^18.0.0",
+        "react": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/styled-engine": {
+      "version": "5.16.6",
+      "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.16.6.tgz",
+      "integrity": "sha512-zaThmS67ZmtHSWToTiHslbI8jwrmITcN93LQaR2lKArbvS7Z3iLkwRoiikNWutx9MBs8Q6okKvbZq1RQYB3v7g==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.9",
+        "@emotion/cache": "^11.11.0",
+        "csstype": "^3.1.3",
+        "prop-types": "^15.8.1"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.4.1",
+        "@emotion/styled": "^11.3.0",
+        "react": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/react": {
+          "optional": true
+        },
+        "@emotion/styled": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/system": {
+      "version": "5.16.7",
+      "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.16.7.tgz",
+      "integrity": "sha512-Jncvs/r/d/itkxh7O7opOunTqbbSSzMTHzZkNLM+FjAOg+cYAZHrPDlYe1ZGKUYORwwb2XexlWnpZp0kZ4AHuA==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.9",
+        "@mui/private-theming": "^5.16.6",
+        "@mui/styled-engine": "^5.16.6",
+        "@mui/types": "^7.2.15",
+        "@mui/utils": "^5.16.6",
+        "clsx": "^2.1.0",
+        "csstype": "^3.1.3",
+        "prop-types": "^15.8.1"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.5.0",
+        "@emotion/styled": "^11.3.0",
+        "@types/react": "^17.0.0 || ^18.0.0",
+        "react": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/react": {
+          "optional": true
+        },
+        "@emotion/styled": {
+          "optional": true
+        },
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/types": {
+      "version": "7.2.15",
+      "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.15.tgz",
+      "integrity": "sha512-nbo7yPhtKJkdf9kcVOF8JZHPZTmqXjJ/tI0bdWgHg5tp9AnIN4Y7f7wm9T+0SyGYJk76+GYZ8Q5XaTYAsUHN0Q==",
+      "peerDependencies": {
+        "@types/react": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/utils": {
+      "version": "5.16.6",
+      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.16.6.tgz",
+      "integrity": "sha512-tWiQqlhxAt3KENNiSRL+DIn9H5xNVK6Jjf70x3PnfQPz1MPBdh7yyIcAyVBT9xiw7hP3SomRhPR7hzBMBCjqEA==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.9",
+        "@mui/types": "^7.2.15",
+        "@types/prop-types": "^15.7.12",
+        "clsx": "^2.1.1",
+        "prop-types": "^15.8.1",
+        "react-is": "^18.3.1"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@types/react": "^17.0.0 || ^18.0.0",
+        "react": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/utils/node_modules/react-is": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
+      "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg=="
+    },
     "node_modules/@next/env": {
       "version": "14.2.3",
       "resolved": "https://registry.npmjs.org/@next/env/-/env-14.2.3.tgz",
@@ -586,6 +1261,30 @@
         "tslib": "^2.4.0"
       }
     },
+    "node_modules/@tanstack/query-core": {
+      "version": "5.51.21",
+      "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.51.21.tgz",
+      "integrity": "sha512-POQxm42IUp6n89kKWF4IZi18v3fxQWFRolvBA6phNVmA8psdfB1MvDnGacCJdS+EOX12w/CyHM62z//rHmYmvw==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
+    "node_modules/@tanstack/react-query": {
+      "version": "5.51.23",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.51.23.tgz",
+      "integrity": "sha512-CfJCfX45nnVIZjQBRYYtvVMIsGgWLKLYC4xcUiYEey671n1alvTZoCBaU9B85O8mF/tx9LPyrI04A6Bs2THv4A==",
+      "dependencies": {
+        "@tanstack/query-core": "5.51.21"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "react": "^18.0.0"
+      }
+    },
     "node_modules/@types/cookie": {
       "version": "0.6.0",
       "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.6.0.tgz",
@@ -598,6 +1297,12 @@
       "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==",
       "dev": true
     },
+    "node_modules/@types/lodash": {
+      "version": "4.17.7",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.7.tgz",
+      "integrity": "sha512-8wTvZawATi/lsmNu10/j2hk1KEP0IvjubqPE3cu1Xz7xfXXt5oCq3SNUz4fMIP4XGF9Ky+Ue2tBA3hcS7LSBlA==",
+      "dev": true
+    },
     "node_modules/@types/node": {
       "version": "20.12.12",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-20.12.12.tgz",
@@ -607,6 +1312,11 @@
         "undici-types": "~5.26.4"
       }
     },
+    "node_modules/@types/parse-json": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.2.tgz",
+      "integrity": "sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw=="
+    },
     "node_modules/@types/prop-types": {
       "version": "15.7.12",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.12.tgz",
@@ -1099,6 +1809,20 @@
         "dequal": "^2.0.3"
       }
     },
+    "node_modules/babel-plugin-macros": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz",
+      "integrity": "sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "cosmiconfig": "^7.0.0",
+        "resolve": "^1.19.0"
+      },
+      "engines": {
+        "node": ">=10",
+        "npm": ">=6"
+      }
+    },
     "node_modules/balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -1191,7 +1915,6 @@
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
       "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
-      "dev": true,
       "engines": {
         "node": ">=6"
       }
@@ -1339,6 +2062,11 @@
       "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
       "dev": true
     },
+    "node_modules/convert-source-map": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz",
+      "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A=="
+    },
     "node_modules/cookie": {
       "version": "0.6.0",
       "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.6.0.tgz",
@@ -1358,6 +2086,29 @@
         "cookie": "^0.6.0"
       }
     },
+    "node_modules/cosmiconfig": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz",
+      "integrity": "sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==",
+      "dependencies": {
+        "@types/parse-json": "^4.0.0",
+        "import-fresh": "^3.2.1",
+        "parse-json": "^5.0.0",
+        "path-type": "^4.0.0",
+        "yaml": "^1.10.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/cosmiconfig/node_modules/yaml": {
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
+      "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
@@ -1608,6 +2359,14 @@
         "node": ">=10.13.0"
       }
     },
+    "node_modules/error-ex": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
+      "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==",
+      "dependencies": {
+        "is-arrayish": "^0.2.1"
+      }
+    },
     "node_modules/es-abstract": {
       "version": "1.23.3",
       "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.23.3.tgz",
@@ -1770,7 +2529,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
       "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
-      "dev": true,
       "engines": {
         "node": ">=10"
       },
@@ -2269,6 +3027,11 @@
         "node": ">=8"
       }
     },
+    "node_modules/find-root": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz",
+      "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng=="
+    },
     "node_modules/find-up": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
@@ -2394,7 +3157,6 @@
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
       "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
-      "dev": true,
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
@@ -2679,7 +3441,6 @@
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
       "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
-      "dev": true,
       "dependencies": {
         "function-bind": "^1.1.2"
       },
@@ -2687,6 +3448,14 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "dependencies": {
+        "react-is": "^16.7.0"
+      }
+    },
     "node_modules/ignore": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.1.tgz",
@@ -2706,7 +3475,6 @@
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
       "integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==",
-      "dev": true,
       "dependencies": {
         "parent-module": "^1.0.0",
         "resolve-from": "^4.0.0"
@@ -2782,6 +3550,11 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-arrayish": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
+      "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg=="
+    },
     "node_modules/is-async-function": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/is-async-function/-/is-async-function-2.0.0.tgz",
@@ -2853,7 +3626,6 @@
       "version": "2.13.1",
       "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.13.1.tgz",
       "integrity": "sha512-hHrIjvZsftOsvKSn2TRYl63zvxsgE0K+0mYMoH6gD4omR5IWB2KynivBQczo3+wF1cCkjzvptnI9Q0sPU66ilw==",
-      "dev": true,
       "dependencies": {
         "hasown": "^2.0.0"
       },
@@ -3202,12 +3974,28 @@
         "js-yaml": "bin/js-yaml.js"
       }
     },
+    "node_modules/jsesc": {
+      "version": "2.5.2",
+      "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz",
+      "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==",
+      "bin": {
+        "jsesc": "bin/jsesc"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/json-buffer": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.1.tgz",
       "integrity": "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==",
       "dev": true
     },
+    "node_modules/json-parse-even-better-errors": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
+      "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w=="
+    },
     "node_modules/json-schema-traverse": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
@@ -3299,8 +4087,7 @@
     "node_modules/lines-and-columns": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
-      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
-      "dev": true
+      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg=="
     },
     "node_modules/locate-path": {
       "version": "6.0.0",
@@ -3317,6 +4104,11 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/lodash": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
+    },
     "node_modules/lodash.merge": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
@@ -3743,7 +4535,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
       "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
-      "dev": true,
       "dependencies": {
         "callsites": "^3.0.0"
       },
@@ -3751,6 +4542,23 @@
         "node": ">=6"
       }
     },
+    "node_modules/parse-json": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
+      "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==",
+      "dependencies": {
+        "@babel/code-frame": "^7.0.0",
+        "error-ex": "^1.3.1",
+        "json-parse-even-better-errors": "^2.3.0",
+        "lines-and-columns": "^1.1.6"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/path-exists": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
@@ -3781,8 +4589,7 @@
     "node_modules/path-parse": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
-      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
-      "dev": true
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw=="
     },
     "node_modules/path-scurry": {
       "version": "1.11.1",
@@ -3804,7 +4611,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
       "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -4119,6 +4925,21 @@
         "react": "^18.3.1"
       }
     },
+    "node_modules/react-hook-form": {
+      "version": "7.52.2",
+      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.52.2.tgz",
+      "integrity": "sha512-pqfPEbERnxxiNMPd0bzmt1tuaPcVccywFDpyk2uV5xCIBphHV5T8SVnX9/o3kplPE1zzKt77+YIoq+EMwJp56A==",
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/react-hook-form"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17 || ^18 || ^19"
+      }
+    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@@ -4226,7 +5047,6 @@
       "version": "1.22.8",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
       "integrity": "sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==",
-      "dev": true,
       "dependencies": {
         "is-core-module": "^2.13.0",
         "path-parse": "^1.0.7",
@@ -4243,7 +5063,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
       "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
-      "dev": true,
       "engines": {
         "node": ">=4"
       }
@@ -4515,6 +5334,14 @@
         "node": ">=10.0.0"
       }
     },
+    "node_modules/source-map": {
+      "version": "0.5.7",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
+      "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/source-map-js": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",
@@ -4739,6 +5566,11 @@
         }
       }
     },
+    "node_modules/stylis": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz",
+      "integrity": "sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw=="
+    },
     "node_modules/sucrase": {
       "version": "3.35.0",
       "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.0.tgz",
@@ -4777,7 +5609,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
       "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
-      "dev": true,
       "engines": {
         "node": ">= 0.4"
       },
@@ -4858,6 +5689,14 @@
         "node": ">=0.8"
       }
     },
+    "node_modules/to-fast-properties": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
+      "integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/to-regex-range": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
@@ -5352,6 +6191,14 @@
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
+    },
+    "node_modules/zod": {
+      "version": "3.23.8",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-3.23.8.tgz",
+      "integrity": "sha512-XBx9AXhXktjUqnepgTiE5flcKIYWi/rme0Eaj+5Y0lftuGBq+jyRu/md4WnuxqgP1ubdpNCsYEYPxrzVHD8d6g==",
+      "funding": {
+        "url": "https://github.com/sponsors/colinhacks"
+      }
     }
   }
 }
diff --git a/package.json b/package.json
index a36b604..5ddeeec 100644
--- a/package.json
+++ b/package.json
@@ -9,24 +9,35 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@emotion/react": "^11.13.0",
+    "@emotion/styled": "^11.13.0",
     "@fortawesome/fontawesome-svg-core": "^6.5.2",
     "@fortawesome/free-brands-svg-icons": "^6.6.0",
     "@fortawesome/free-solid-svg-icons": "^6.5.2",
     "@fortawesome/react-fontawesome": "^0.2.2",
+    "@hookform/resolvers": "^3.9.0",
+    "@mui/icons-material": "^5.16.7",
+    "@mui/lab": "^5.0.0-alpha.173",
+    "@mui/material": "^5.16.7",
+    "@tanstack/react-query": "^5.51.23",
     "axios": "^1.7.2",
     "bootstrap": "^5.3.3",
     "cookie": "^0.6.0",
     "cookies-next": "^4.2.1",
     "font-awesome": "^4.7.0",
+    "lodash": "^4.17.21",
     "next": "14.2.3",
     "next-cookie": "^2.8.0",
     "react": "^18",
     "react-bootstrap": "^2.10.4",
     "react-dom": "^18",
+    "react-hook-form": "^7.52.2",
     "react-toastify": "^10.0.5",
-    "socket.io-client": "^4.7.5"
+    "socket.io-client": "^4.7.5",
+    "zod": "^3.23.8"
   },
   "devDependencies": {
+    "@types/lodash": "^4.17.7",
     "@types/node": "^20.3.1",
     "@types/react": "^18",
     "@types/react-dom": "^18",
diff --git a/src/api/auth.client.ts b/src/api/auth.client.ts
new file mode 100644
index 0000000..6a223b4
--- /dev/null
+++ b/src/api/auth.client.ts
@@ -0,0 +1,16 @@
+import { BaseClient } from "./base.client";
+import { LoginRequest, LoginResponse } from "./types/login";
+
+export class AuthClient extends BaseClient {
+  async login(loginRequest: LoginRequest) {
+    return this.post<LoginResponse>("auth/login", loginRequest);
+  }
+
+  async register(username: string, email: string, password: string) {
+    return this.post("auth/register", { username, email, password });
+  }
+
+  async validateToken() {
+    return this.get("auth/validate-token");
+  }
+}
diff --git a/src/api/base.client.ts b/src/api/base.client.ts
new file mode 100644
index 0000000..65ef917
--- /dev/null
+++ b/src/api/base.client.ts
@@ -0,0 +1,112 @@
+interface ErrorResponse {
+  statusCode: number;
+  message: string;
+  error: string;
+}
+
+interface SuccessResponse<T> {
+  data: T;
+}
+
+type ClientResponse<T> = SuccessResponse<T> | ErrorResponse;
+
+class ApiError extends Error {
+  statusCode: number;
+  error: string;
+
+  constructor(statusCode: number, message: string, error: string) {
+    super(message);
+    this.statusCode = statusCode;
+    this.error = error;
+    this.name = "ApiError";
+  }
+}
+
+export class BaseClient {
+  base: string | undefined;
+
+  constructor() {
+    this.base = process.env.BACKEND_URL;
+  }
+
+  private async request<T>(
+    endpoint: string,
+    method: "GET" | "POST" | "PUT" | "DELETE",
+    body?: any,
+    options: RequestInit = {}
+  ): Promise<ClientResponse<T>> {
+    if (!this.base) {
+      throw new Error("Base URL is not defined");
+    }
+
+    try {
+      const response = await fetch(`${this.base}/${endpoint}`, {
+        method,
+        headers: {
+          "Content-Type": "application/json",
+          ...options.headers,
+        },
+        credentials: "include",
+        body: body != null ? JSON.stringify(body) : undefined,
+        ...options,
+      });
+
+      console.log("responseasdasd", response);
+
+      if (!response.ok) {
+        const errorData: ErrorResponse = await response.json();
+
+        throw new ApiError(
+          errorData.statusCode,
+          errorData.message,
+          errorData?.error
+        );
+      }
+
+      const data: T = await response.json();
+      return {
+        data,
+      };
+    } catch (error) {
+      if (error instanceof ApiError) {
+        throw error;
+      } else {
+        throw new ApiError(
+          500,
+          "An unexpected error occurred",
+          (error as Error).message
+        );
+      }
+    }
+  }
+
+  protected async get<T>(
+    endpoint: string,
+    options: RequestInit = {}
+  ): Promise<ClientResponse<T>> {
+    return this.request<T>(endpoint, "GET", options);
+  }
+
+  protected async post<T>(
+    endpoint: string,
+    body: any,
+    options: RequestInit = {}
+  ): Promise<ClientResponse<T>> {
+    return this.request<T>(endpoint, "POST", body, options);
+  }
+
+  protected async put<T>(
+    endpoint: string,
+    body: any,
+    options: RequestInit = {}
+  ): Promise<ClientResponse<T>> {
+    return this.request<T>(endpoint, "PUT", body, options);
+  }
+
+  protected async delete<T>(
+    endpoint: string,
+    options: RequestInit = {}
+  ): Promise<ClientResponse<T>> {
+    return this.request<T>(endpoint, "DELETE", options);
+  }
+}
diff --git a/src/api/types/login.ts b/src/api/types/login.ts
new file mode 100644
index 0000000..d37f7a1
--- /dev/null
+++ b/src/api/types/login.ts
@@ -0,0 +1,8 @@
+export type LoginRequest = {
+  username: string;
+  password: string;
+};
+
+export type LoginResponse = {
+  message: string;
+};
diff --git a/src/app/(public)/login/hooks/useLoginForm.ts b/src/app/(public)/login/hooks/useLoginForm.ts
new file mode 100644
index 0000000..1a034fa
--- /dev/null
+++ b/src/app/(public)/login/hooks/useLoginForm.ts
@@ -0,0 +1,42 @@
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { schema } from "../validations/schema";
+import { LoginRequest } from "@/api/types/login";
+import { useLogin } from "@/hooks/authHooks";
+import { useRouter } from "next/navigation";
+
+const useLoginForm = () => {
+  const {
+    register,
+    handleSubmit,
+    formState: { errors, isValid },
+  } = useForm<LoginRequest>({
+    resolver: zodResolver(schema),
+    mode: "onChange",
+    reValidateMode: "onChange",
+  });
+
+  const router = useRouter();
+
+  const { mutate, isError, error, isPending } = useLogin();
+
+  const onSubmit = (data: LoginRequest) => {
+    mutate(data, {
+      onSuccess: () => {
+        router.push("/");
+      },
+    });
+  };
+
+  return {
+    register,
+    handleSubmit: handleSubmit(onSubmit),
+    errors,
+    isValid,
+    isError,
+    isPending,
+    error,
+  };
+};
+
+export default useLoginForm;
diff --git a/src/app/(public)/login/page.tsx b/src/app/(public)/login/page.tsx
new file mode 100644
index 0000000..952c19d
--- /dev/null
+++ b/src/app/(public)/login/page.tsx
@@ -0,0 +1,123 @@
+"use client";
+
+import Avatar from "@mui/material/Avatar";
+import TextField from "@mui/material/TextField";
+import Link from "@mui/material/Link";
+import Paper from "@mui/material/Paper";
+import Box from "@mui/material/Box";
+import Grid from "@mui/material/Grid";
+import LockOutlinedIcon from "@mui/icons-material/LockOutlined";
+import Typography from "@mui/material/Typography";
+import { Alert } from "@mui/material";
+import useLoginForm from "./hooks/useLoginForm";
+import { LoadingButton } from "@mui/lab";
+
+const Login = () => {
+  const { register, handleSubmit, errors, isValid, isError, error, isPending } =
+    useLoginForm();
+
+  return (
+    <Grid container component="main" sx={{ height: "100vh" }}>
+      <Grid
+        item
+        xs={false}
+        sm={4}
+        md={7}
+        sx={{
+          backgroundImage: 'url("https://i.imgur.com/YNj4zoE.png")',
+          backgroundColor: (t) =>
+            t.palette.mode === "light"
+              ? t.palette.grey[50]
+              : t.palette.grey[900],
+          backgroundSize: "cover",
+          backgroundPosition: "left",
+        }}
+      />
+      <Grid item xs={12} sm={8} md={5} component={Paper} elevation={6} square>
+        <Box
+          sx={{
+            my: 8,
+            mx: 4,
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+          }}
+        >
+          <Avatar sx={{ m: 1, bgcolor: "secondary.main" }}>
+            <LockOutlinedIcon />
+          </Avatar>
+          <Typography component="h1" variant="h5">
+            Sign in
+          </Typography>
+          {isError && (
+            <Alert severity="error" sx={{ mt: 2 }}>
+              {error?.message}
+            </Alert>
+          )}
+          <Box
+            component="form"
+            noValidate
+            onSubmit={handleSubmit}
+            sx={{ mt: 1 }}
+          >
+            <TextField
+              margin="normal"
+              required
+              fullWidth
+              id="username"
+              label="Username"
+              autoComplete="username"
+              autoFocus
+              {...register("username")}
+              error={!!errors.username}
+              helperText={errors.username?.message}
+              sx={{
+                "& .MuiFormHelperText-root.Mui-error": {
+                  position: "absolute",
+                  top: "100%",
+                },
+              }}
+            />
+            <TextField
+              margin="normal"
+              required
+              fullWidth
+              label="Password"
+              type="password"
+              id="password"
+              autoComplete="current-password"
+              {...register("password")}
+              error={!!errors.password}
+              helperText={errors.password?.message}
+              sx={{
+                "& .MuiFormHelperText-root.Mui-error": {
+                  position: "absolute",
+                  top: "100%",
+                },
+              }}
+            />
+            <LoadingButton
+              type="submit"
+              loading={isPending}
+              fullWidth
+              disabled={!isValid}
+              variant="contained"
+              sx={{ mt: 3, mb: 2 }}
+            >
+              Sign In
+            </LoadingButton>
+            <Grid container>
+              <Grid item>
+                <Link href="signup" variant="body2">
+                  {"Don't have an account? Sign Up"}
+                </Link>
+              </Grid>
+            </Grid>
+          </Box>
+        </Box>
+      </Grid>
+    </Grid>
+  );
+};
+
+export default Login;
diff --git a/src/app/(public)/login/validations/schema.ts b/src/app/(public)/login/validations/schema.ts
new file mode 100644
index 0000000..34357d8
--- /dev/null
+++ b/src/app/(public)/login/validations/schema.ts
@@ -0,0 +1,6 @@
+import { z } from "zod";
+
+export const schema = z.object({
+  username: z.string().min(6, "Invalid username"),
+  password: z.string().min(6, "Password must be at least 6 characters long"),
+});
diff --git a/src/app/(public)/signup/page.tsx b/src/app/(public)/signup/page.tsx
new file mode 100644
index 0000000..e418f87
--- /dev/null
+++ b/src/app/(public)/signup/page.tsx
@@ -0,0 +1,97 @@
+"use client";
+
+import Avatar from "@mui/material/Avatar";
+import Button from "@mui/material/Button";
+import TextField from "@mui/material/TextField";
+import Link from "@mui/material/Link";
+import Grid from "@mui/material/Grid";
+import Box from "@mui/material/Box";
+import LockOutlinedIcon from "@mui/icons-material/LockOutlined";
+import Typography from "@mui/material/Typography";
+import Container from "@mui/material/Container";
+import { Paper } from "@mui/material";
+
+const SignUp = () => {
+  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    const data = new FormData(event.currentTarget);
+    console.log({
+      email: data.get("email"),
+      password: data.get("password"),
+    });
+  };
+
+  return (
+    <Container component={Paper} square elevation={6} maxWidth="xs">
+      <Box
+        sx={{
+          marginTop: 8,
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          padding: 3,
+        }}
+      >
+        <Avatar sx={{ m: 1, bgcolor: "secondary.main" }}>
+          <LockOutlinedIcon />
+        </Avatar>
+        <Typography component="h1" variant="h5">
+          Sign up
+        </Typography>
+        <Box component="form" noValidate onSubmit={handleSubmit} sx={{ mt: 3 }}>
+          <Grid container spacing={3}>
+            <Grid item xs={12}>
+              <TextField
+                autoComplete="username"
+                name="username"
+                required
+                fullWidth
+                id="username"
+                label="Username"
+                autoFocus
+              />
+            </Grid>
+            <Grid item xs={12}>
+              <TextField
+                required
+                fullWidth
+                id="email"
+                label="Email Address"
+                name="email"
+                autoComplete="email"
+              />
+            </Grid>
+            <Grid item xs={12}>
+              <TextField
+                required
+                fullWidth
+                name="password"
+                label="Password"
+                type="password"
+                id="password"
+                autoComplete="new-password"
+              />
+            </Grid>
+          </Grid>
+          <Button
+            type="submit"
+            fullWidth
+            variant="contained"
+            sx={{ mt: 4, mb: 2 }}
+          >
+            Sign Up
+          </Button>
+          <Grid container justifyContent="flex-end">
+            <Grid item>
+              <Link href="login" variant="body2">
+                Already have an account? Sign in
+              </Link>
+            </Grid>
+          </Grid>
+        </Box>
+      </Box>
+    </Container>
+  );
+};
+
+export default SignUp;
diff --git a/src/app/globals.css b/src/app/globals.css
index 875c01e..b5c61c9 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -1,33 +1,3 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-
-:root {
-  --foreground-rgb: 0, 0, 0;
-  --background-start-rgb: 214, 219, 220;
-  --background-end-rgb: 255, 255, 255;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --foreground-rgb: 255, 255, 255;
-    --background-start-rgb: 0, 0, 0;
-    --background-end-rgb: 0, 0, 0;
-  }
-}
-
-body {
-  color: rgb(var(--foreground-rgb));
-  background: linear-gradient(
-      to bottom,
-      transparent,
-      rgb(var(--background-end-rgb))
-    )
-    rgb(var(--background-start-rgb));
-}
-
-@layer utilities {
-  .text-balance {
-    text-wrap: balance;
-  }
-}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 3314e47..258aa7b 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,12 +1,13 @@
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 import "./globals.css";
+import { Providers } from "./providers";
 
 const inter = Inter({ subsets: ["latin"] });
 
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: "SupportAI",
+  description: "SupportAI is a platform that generates guides.",
 };
 
 export default function RootLayout({
@@ -16,7 +17,9 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
-      <body className={inter.className}>{children}</body>
+      <body className={inter.className}>
+        <Providers>{children}</Providers>
+      </body>
     </html>
   );
 }
diff --git a/src/app/providers.tsx b/src/app/providers.tsx
new file mode 100644
index 0000000..1e36205
--- /dev/null
+++ b/src/app/providers.tsx
@@ -0,0 +1,11 @@
+"use client";
+
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+
+export const queryClient = new QueryClient();
+
+export function Providers({ children }: { children: React.ReactNode }) {
+  return (
+    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+  );
+}
diff --git a/src/hooks/authHooks.ts b/src/hooks/authHooks.ts
new file mode 100644
index 0000000..40c70c3
--- /dev/null
+++ b/src/hooks/authHooks.ts
@@ -0,0 +1,11 @@
+import { AuthClient } from "@/api/auth.client";
+import { LoginRequest } from "@/api/types/login";
+import { useMutation } from "@tanstack/react-query";
+
+const authClient = new AuthClient();
+
+export function useLogin() {
+  return useMutation({
+    mutationFn: (data: LoginRequest) => authClient.login(data),
+  });
+}
diff --git a/src/middleware.ts b/src/middleware.ts
new file mode 100644
index 0000000..f2a78ed
--- /dev/null
+++ b/src/middleware.ts
@@ -0,0 +1,37 @@
+import type { NextRequest } from "next/server";
+import { NextResponse } from "next/server";
+import { AuthClient } from "./api/auth.client";
+
+export async function middleware(request: NextRequest) {
+  const token = request.cookies.get("Authorization")?.value;
+  const { pathname } = request.nextUrl;
+
+  if (!token && pathname !== "/login" && pathname !== "/signup") {
+    // Redirect unauthenticated users to login if they're trying to access a protected route
+    return NextResponse.redirect(new URL("/login", request.url));
+  }
+
+  if (token) {
+    try {
+      const authClient = new AuthClient();
+      const currentUser = await authClient.validateToken();
+
+      // Redirect authenticated users away from login or signup
+      if (currentUser && (pathname === "/login" || pathname === "/signup")) {
+        return NextResponse.redirect(new URL("/", request.url));
+      }
+    } catch (err) {
+      console.log("asdsdad Invalid Token, Redirecting to login");
+      // Redirect users with invalid tokens to login
+      if (pathname !== "/login") {
+        return NextResponse.redirect(new URL("/login", request.url));
+      }
+    }
+  }
+
+  return NextResponse.next();
+}
+
+export const config = {
+  matcher: ["/((?!api|_next/static|_next/image|.*\\.png$).*)"],
+};
diff --git a/src/pages/login.tsx b/src/pages/login.tsx
deleted file mode 100644
index e2f8f96..0000000
--- a/src/pages/login.tsx
+++ /dev/null
@@ -1,186 +0,0 @@
-import React, { useState } from "react";
-import "bootstrap/dist/css/bootstrap.min.css";
-import dogImage from "../assets/images/dogs/dog_gray_bg.jpeg";
-import { ToastContainer, toast } from "react-toastify";
-import axios, { isAxiosError } from "axios";
-import { useRouter } from "next/router";
-import "react-toastify/dist/ReactToastify.css";
-import { getCookie } from "cookies-next";
-
-const Login: React.FC = () => {
-  const [username, setUsername] = useState("");
-  const [password, setPassword] = useState("");
-  const [rememberMe, setRememberMe] = useState(false);
-  const [error, setError] = useState("");
-  const router = useRouter();
-
-  const handleLogin = async (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
-    setError("");
-
-    try {
-      const response = await axios.post(
-        `${process.env.NEXT_PUBLIC_SERVER_URL}/auth/login`,
-        {
-          username,
-          password,
-        },
-        { withCredentials: true }
-      );
-
-      router.push("/dashboard");
-      console.log("Login successful", response);
-    } catch (error: any) {
-      if (isAxiosError(error)) {
-        toast.error(
-          error.response?.data?.message || "Invalid username or password"
-        );
-      } else {
-        toast.error("An unexpected error occurred");
-      }
-    }
-  };
-
-  return (
-    <div
-      className="bg-gradient-primary"
-      style={{
-        height: "100vh",
-        minHeight: "inherit",
-        width: "100vw",
-        display: "flex",
-        justifyContent: "center",
-        alignItems: "center",
-      }}
-    >
-      <div className="container">
-        <div className="row justify-content-center">
-          <div className="col-md-9 col-lg-12 col-xl-10">
-            <div className="card shadow-lg o-hidden border-0 my-5">
-              <div className="card-body p-0">
-                <div className="row">
-                  <div className="col-lg-6 d-none d-lg-flex">
-                    <div className="flex-grow-1 bg-login-image">
-                      <img
-                        className="flex-grow-1"
-                        src={dogImage.src}
-                        alt=""
-                        style={{
-                          width: "100%",
-                          height: "100%",
-                          objectFit: "cover",
-                          objectPosition: "center",
-                        }}
-                      />
-                    </div>
-                  </div>
-                  <div className="col-lg-6">
-                    <div className="p-5">
-                      <div className="text-center">
-                        <h4 className="text-dark mb-4">Welcome Back!</h4>
-                      </div>
-                      <form className="user" onSubmit={handleLogin}>
-                        <div className="mb-3">
-                          <input
-                            id="exampleInputUsername"
-                            className="form-control form-control-user"
-                            type="text"
-                            placeholder="Enter Username..."
-                            name="username"
-                            value={username}
-                            onChange={(e) => setUsername(e.target.value)}
-                          />
-                        </div>
-                        <div className="mb-3">
-                          <input
-                            id="exampleInputPassword"
-                            className="form-control form-control-user"
-                            type="password"
-                            placeholder="Password"
-                            name="password"
-                            value={password}
-                            onChange={(e) => setPassword(e.target.value)}
-                          />
-                        </div>
-                        <div className="mb-3">
-                          <div className="custom-checkbox small">
-                            <div className="form-check">
-                              <input
-                                id="formCheck-1"
-                                className="form-check-input"
-                                type="checkbox"
-                                checked={rememberMe}
-                                onChange={() => setRememberMe(!rememberMe)}
-                              />
-                              <label
-                                className="form-check-label"
-                                htmlFor="formCheck-1"
-                                aria-checked={rememberMe}
-                              >
-                                Remember Me
-                              </label>
-                            </div>
-                          </div>
-                        </div>
-                        <button
-                          className="btn btn-primary d-block btn-user w-100"
-                          type="submit"
-                        >
-                          Login
-                        </button>
-                        <hr />
-                        <a
-                          className="btn btn-primary d-block btn-google btn-user w-100 mb-2"
-                          href="/auth/google"
-                          role="button"
-                        >
-                          <i className="fab fa-google"></i> Login with Google
-                        </a>
-                        <hr />
-                        {error && (
-                          <div className="alert alert-danger" role="alert">
-                            {error}
-                          </div>
-                        )}
-                      </form>
-                      <div className="text-center">
-                        <a className="small" href="forgot-password.html">
-                          Forgot Password?
-                        </a>
-                      </div>
-                      <div className="text-center">
-                        <a className="small" href="register">
-                          Create an Account!
-                        </a>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <ToastContainer />
-    </div>
-  );
-};
-
-export async function getServerSideProps(context: { req: any }) {
-  const cookieValue = getCookie("Authorization", { req: context.req });
-
-  if (cookieValue) {
-    return {
-      redirect: {
-        destination: "/dashboard",
-        permanent: false,
-      },
-    };
-  }
-
-  return {
-    props: {},
-  };
-}
-
-export default Login;

From ce92e1c5d4a25f8a33d294ac2fdbdfbf403b7ca6 Mon Sep 17 00:00:00 2001
From: nitzanto <nitzan16001@gmail.com>
Date: Wed, 14 Aug 2024 22:14:52 +0300
Subject: [PATCH 011/242] auth changes

---
 src/api/base.client.ts | 34 +++++++++++++++++-----------------
 src/middleware.ts      | 33 ++++++++++++---------------------
 2 files changed, 29 insertions(+), 38 deletions(-)

diff --git a/src/api/base.client.ts b/src/api/base.client.ts
index 65ef917..98e52ef 100644
--- a/src/api/base.client.ts
+++ b/src/api/base.client.ts
@@ -39,19 +39,22 @@ export class BaseClient {
       throw new Error("Base URL is not defined");
     }
 
+    const fetchOptions: RequestInit = {
+      method,
+      headers: {
+        "Content-Type": "application/json",
+        ...options.headers,
+      },
+      credentials: "include",
+      ...options,
+    };
+
+    if (method !== "GET" && method !== "DELETE") {
+      fetchOptions.body = body != null ? JSON.stringify(body) : undefined;
+    }
+
     try {
-      const response = await fetch(`${this.base}/${endpoint}`, {
-        method,
-        headers: {
-          "Content-Type": "application/json",
-          ...options.headers,
-        },
-        credentials: "include",
-        body: body != null ? JSON.stringify(body) : undefined,
-        ...options,
-      });
-
-      console.log("responseasdasd", response);
+      const response = await fetch(`${this.base}/${endpoint}`, fetchOptions);
 
       if (!response.ok) {
         const errorData: ErrorResponse = await response.json();
@@ -68,14 +71,11 @@ export class BaseClient {
         data,
       };
     } catch (error) {
+      console.error("An error occurred", error);
       if (error instanceof ApiError) {
         throw error;
       } else {
-        throw new ApiError(
-          500,
-          "An unexpected error occurred",
-          (error as Error).message
-        );
+        throw new Error("An unexpected error occurred");
       }
     }
   }
diff --git a/src/middleware.ts b/src/middleware.ts
index f2a78ed..5125fb8 100644
--- a/src/middleware.ts
+++ b/src/middleware.ts
@@ -1,32 +1,23 @@
 import type { NextRequest } from "next/server";
 import { NextResponse } from "next/server";
-import { AuthClient } from "./api/auth.client";
 
-export async function middleware(request: NextRequest) {
-  const token = request.cookies.get("Authorization")?.value;
+export function middleware(request: NextRequest) {
+  const currentUser = request.cookies.get("Authorization")?.value;
   const { pathname } = request.nextUrl;
 
-  if (!token && pathname !== "/login" && pathname !== "/signup") {
-    // Redirect unauthenticated users to login if they're trying to access a protected route
-    return NextResponse.redirect(new URL("/login", request.url));
+  // Redirect authenticated users away from login or signup
+  if (currentUser && (pathname === "/login" || pathname === "/signup")) {
+    return NextResponse.redirect(new URL("/", request.url));
   }
 
-  if (token) {
-    try {
-      const authClient = new AuthClient();
-      const currentUser = await authClient.validateToken();
+  // Allow unauthenticated users to access login or signup
+  if (!currentUser && (pathname === "/login" || pathname === "/signup")) {
+    return NextResponse.next();
+  }
 
-      // Redirect authenticated users away from login or signup
-      if (currentUser && (pathname === "/login" || pathname === "/signup")) {
-        return NextResponse.redirect(new URL("/", request.url));
-      }
-    } catch (err) {
-      console.log("asdsdad Invalid Token, Redirecting to login");
-      // Redirect users with invalid tokens to login
-      if (pathname !== "/login") {
-        return NextResponse.redirect(new URL("/login", request.url));
-      }
-    }
+  // Redirect unauthenticated users trying to access any other page to login
+  if (!currentUser && pathname !== "/login" && pathname !== "/signup") {
+    return NextResponse.redirect(new URL("/login", request.url));
   }
 
   return NextResponse.next();

From a04e98d5744c7ccb2fbd73ab53c677c045547d15 Mon Sep 17 00:00:00 2001
From: nitzanto <nitzan16001@gmail.com>
Date: Thu, 15 Aug 2024 16:47:19 +0300
Subject: [PATCH 012/242] feat: sign up page

---
 src/api/auth.client.ts                        |  9 +--
 src/api/base.client.ts                        |  2 +-
 src/api/types/login.ts                        |  6 +-
 src/api/types/signup.ts                       |  9 +++
 src/app/(public)/login/hooks/useLoginForm.ts  | 14 ++++-
 .../(public)/signup/hooks/useSignUpForm.ts    | 42 ++++++++++++++
 src/app/(public)/signup/page.tsx              | 57 ++++++++++++++-----
 src/app/(public)/signup/validations/schema.ts |  7 +++
 src/hooks/{ => api}/authHooks.ts              |  7 +++
 src/hooks/api/index.ts                        |  1 +
 src/hooks/index.ts                            |  1 +
 src/types/user.type.ts                        |  1 +
 12 files changed, 128 insertions(+), 28 deletions(-)
 create mode 100644 src/api/types/signup.ts
 create mode 100644 src/app/(public)/signup/hooks/useSignUpForm.ts
 create mode 100644 src/app/(public)/signup/validations/schema.ts
 rename src/hooks/{ => api}/authHooks.ts (63%)
 create mode 100644 src/hooks/api/index.ts
 create mode 100644 src/hooks/index.ts

diff --git a/src/api/auth.client.ts b/src/api/auth.client.ts
index 6a223b4..04ed67c 100644
--- a/src/api/auth.client.ts
+++ b/src/api/auth.client.ts
@@ -1,16 +1,13 @@
 import { BaseClient } from "./base.client";
 import { LoginRequest, LoginResponse } from "./types/login";
+import { SignUpRequest } from "./types/signup";
 
 export class AuthClient extends BaseClient {
   async login(loginRequest: LoginRequest) {
     return this.post<LoginResponse>("auth/login", loginRequest);
   }
 
-  async register(username: string, email: string, password: string) {
-    return this.post("auth/register", { username, email, password });
-  }
-
-  async validateToken() {
-    return this.get("auth/validate-token");
+  async register(signUpRequest: SignUpRequest) {
+    return this.post("auth/register", signUpRequest);
   }
 }
diff --git a/src/api/base.client.ts b/src/api/base.client.ts
index 98e52ef..bcbd552 100644
--- a/src/api/base.client.ts
+++ b/src/api/base.client.ts
@@ -4,7 +4,7 @@ interface ErrorResponse {
   error: string;
 }
 
-interface SuccessResponse<T> {
+export interface SuccessResponse<T> {
   data: T;
 }
 
diff --git a/src/api/types/login.ts b/src/api/types/login.ts
index d37f7a1..1f4506e 100644
--- a/src/api/types/login.ts
+++ b/src/api/types/login.ts
@@ -1,8 +1,8 @@
+import { User } from "@/types";
+
 export type LoginRequest = {
   username: string;
   password: string;
 };
 
-export type LoginResponse = {
-  message: string;
-};
+export type LoginResponse = User;
diff --git a/src/api/types/signup.ts b/src/api/types/signup.ts
new file mode 100644
index 0000000..e3cca48
--- /dev/null
+++ b/src/api/types/signup.ts
@@ -0,0 +1,9 @@
+import { User } from "@/types";
+
+export type SignUpRequest = {
+  username: string;
+  email: string;
+  password: string;
+};
+
+export type SignUpResponse = User;
diff --git a/src/app/(public)/login/hooks/useLoginForm.ts b/src/app/(public)/login/hooks/useLoginForm.ts
index 1a034fa..d7ebce8 100644
--- a/src/app/(public)/login/hooks/useLoginForm.ts
+++ b/src/app/(public)/login/hooks/useLoginForm.ts
@@ -2,8 +2,10 @@ import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { schema } from "../validations/schema";
 import { LoginRequest } from "@/api/types/login";
-import { useLogin } from "@/hooks/authHooks";
 import { useRouter } from "next/navigation";
+import { useLogin } from "@/hooks";
+import { SuccessResponse } from "@/api/base.client";
+import { User } from "@/types";
 
 const useLoginForm = () => {
   const {
@@ -22,8 +24,14 @@ const useLoginForm = () => {
 
   const onSubmit = (data: LoginRequest) => {
     mutate(data, {
-      onSuccess: () => {
-        router.push("/");
+      onSuccess: (response) => {
+        const { data: user } = response as SuccessResponse<User>;
+
+        if (user.roles.includes("admin")) {
+          router.push("/dashboard");
+        } else {
+          router.push("/");
+        }
       },
     });
   };
diff --git a/src/app/(public)/signup/hooks/useSignUpForm.ts b/src/app/(public)/signup/hooks/useSignUpForm.ts
new file mode 100644
index 0000000..f75b5a4
--- /dev/null
+++ b/src/app/(public)/signup/hooks/useSignUpForm.ts
@@ -0,0 +1,42 @@
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { schema } from "../validations/schema";
+import { useRouter } from "next/navigation";
+import { useSignUp } from "@/hooks";
+import { SignUpRequest } from "@/api/types/signup";
+
+const useSignUpForm = () => {
+  const {
+    register,
+    handleSubmit,
+    formState: { errors, isValid },
+  } = useForm<SignUpRequest>({
+    resolver: zodResolver(schema),
+    mode: "onChange",
+    reValidateMode: "onChange",
+  });
+
+  const router = useRouter();
+
+  const { mutate, isError, error, isPending } = useSignUp();
+
+  const onSubmit = (data: SignUpRequest) => {
+    mutate(data, {
+      onSuccess: () => {
+        router.push("/login");
+      },
+    });
+  };
+
+  return {
+    register,
+    handleSubmit: handleSubmit(onSubmit),
+    errors,
+    isValid,
+    isError,
+    isPending,
+    error,
+  };
+};
+
+export default useSignUpForm;
diff --git a/src/app/(public)/signup/page.tsx b/src/app/(public)/signup/page.tsx
index e418f87..38fcc9e 100644
--- a/src/app/(public)/signup/page.tsx
+++ b/src/app/(public)/signup/page.tsx
@@ -9,17 +9,13 @@ import Box from "@mui/material/Box";
 import LockOutlinedIcon from "@mui/icons-material/LockOutlined";
 import Typography from "@mui/material/Typography";
 import Container from "@mui/material/Container";
-import { Paper } from "@mui/material";
+import { Paper, Alert } from "@mui/material";
+import useSignUpForm from "./hooks/useSignUpForm";
+import { LoadingButton } from "@mui/lab";
 
 const SignUp = () => {
-  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
-    event.preventDefault();
-    const data = new FormData(event.currentTarget);
-    console.log({
-      email: data.get("email"),
-      password: data.get("password"),
-    });
-  };
+  const { register, handleSubmit, errors, isValid, isError, error, isPending } =
+    useSignUpForm();
 
   return (
     <Container component={Paper} square elevation={6} maxWidth="xs">
@@ -38,17 +34,30 @@ const SignUp = () => {
         <Typography component="h1" variant="h5">
           Sign up
         </Typography>
+        {isError && (
+          <Alert severity="error" sx={{ mt: 2 }}>
+            {error?.message}
+          </Alert>
+        )}
         <Box component="form" noValidate onSubmit={handleSubmit} sx={{ mt: 3 }}>
-          <Grid container spacing={3}>
+          <Grid container spacing={4}>
             <Grid item xs={12}>
               <TextField
                 autoComplete="username"
-                name="username"
                 required
                 fullWidth
                 id="username"
                 label="Username"
                 autoFocus
+                {...register("username")}
+                error={!!errors.username}
+                helperText={errors.username?.message}
+                sx={{
+                  "& .MuiFormHelperText-root.Mui-error": {
+                    position: "absolute",
+                    top: "100%",
+                  },
+                }}
               />
             </Grid>
             <Grid item xs={12}>
@@ -57,30 +66,48 @@ const SignUp = () => {
                 fullWidth
                 id="email"
                 label="Email Address"
-                name="email"
                 autoComplete="email"
+                {...register("email")}
+                error={!!errors.email}
+                helperText={errors.email?.message}
+                sx={{
+                  "& .MuiFormHelperText-root.Mui-error": {
+                    position: "absolute",
+                    top: "100%",
+                  },
+                }}
               />
             </Grid>
             <Grid item xs={12}>
               <TextField
                 required
                 fullWidth
-                name="password"
                 label="Password"
                 type="password"
                 id="password"
                 autoComplete="new-password"
+                {...register("password")}
+                error={!!errors.password}
+                helperText={errors.password?.message}
+                sx={{
+                  "& .MuiFormHelperText-root.Mui-error": {
+                    position: "absolute",
+                    top: "100%",
+                  },
+                }}
               />
             </Grid>
           </Grid>
-          <Button
+          <LoadingButton
             type="submit"
+            loading={isPending}
             fullWidth
             variant="contained"
             sx={{ mt: 4, mb: 2 }}
+            disabled={!isValid || isPending}
           >
             Sign Up
-          </Button>
+          </LoadingButton>
           <Grid container justifyContent="flex-end">
             <Grid item>
               <Link href="login" variant="body2">
diff --git a/src/app/(public)/signup/validations/schema.ts b/src/app/(public)/signup/validations/schema.ts
new file mode 100644
index 0000000..cd10a13
--- /dev/null
+++ b/src/app/(public)/signup/validations/schema.ts
@@ -0,0 +1,7 @@
+import { z } from "zod";
+
+export const schema = z.object({
+  username: z.string().min(6, "Invalid username"),
+  email: z.string().email("Invalid email"),
+  password: z.string().min(6, "Password must be at least 6 characters long"),
+});
diff --git a/src/hooks/authHooks.ts b/src/hooks/api/authHooks.ts
similarity index 63%
rename from src/hooks/authHooks.ts
rename to src/hooks/api/authHooks.ts
index 40c70c3..51749c9 100644
--- a/src/hooks/authHooks.ts
+++ b/src/hooks/api/authHooks.ts
@@ -1,5 +1,6 @@
 import { AuthClient } from "@/api/auth.client";
 import { LoginRequest } from "@/api/types/login";
+import { SignUpRequest } from "@/api/types/signup";
 import { useMutation } from "@tanstack/react-query";
 
 const authClient = new AuthClient();
@@ -9,3 +10,9 @@ export function useLogin() {
     mutationFn: (data: LoginRequest) => authClient.login(data),
   });
 }
+
+export function useSignUp() {
+  return useMutation({
+    mutationFn: (data: SignUpRequest) => authClient.register(data),
+  });
+}
diff --git a/src/hooks/api/index.ts b/src/hooks/api/index.ts
new file mode 100644
index 0000000..727ff51
--- /dev/null
+++ b/src/hooks/api/index.ts
@@ -0,0 +1 @@
+export * from "./authHooks";
diff --git a/src/hooks/index.ts b/src/hooks/index.ts
new file mode 100644
index 0000000..d158c57
--- /dev/null
+++ b/src/hooks/index.ts
@@ -0,0 +1 @@
+export * from "./api";
diff --git a/src/types/user.type.ts b/src/types/user.type.ts
index 944e96a..7a5a076 100644
--- a/src/types/user.type.ts
+++ b/src/types/user.type.ts
@@ -2,4 +2,5 @@ export interface User {
   userId: number;
   username: string;
   email: string;
+  roles: string[];
 }

From cc609cfbb17e1a25414ab5f274267c156078a7d4 Mon Sep 17 00:00:00 2001
From: nitzanto <nitzan16001@gmail.com>
Date: Thu, 15 Aug 2024 16:49:44 +0300
Subject: [PATCH 013/242] added type for register

---
 src/api/auth.client.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/api/auth.client.ts b/src/api/auth.client.ts
index 04ed67c..8a4c29a 100644
--- a/src/api/auth.client.ts
+++ b/src/api/auth.client.ts
@@ -8,6 +8,6 @@ export class AuthClient extends BaseClient {
   }
 
   async register(signUpRequest: SignUpRequest) {
-    return this.post("auth/register", signUpRequest);
+    return this.post<SignUpRequest>("auth/register", signUpRequest);
   }
 }

From 55bcaf0214c263077d405570299f316e9eb4728b Mon Sep 17 00:00:00 2001
From: nitzanto <nitzan16001@gmail.com>
Date: Thu, 15 Aug 2024 17:01:12 +0300
Subject: [PATCH 014/242] fix

---
 src/app/layout.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index bae94a0..582f19c 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -18,9 +18,7 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body style={{ height: "100vh" }} className={inter.className}>
-        
-        <Providers>{children}
-      </Providers>
+        <Providers>{children}</Providers>
       </body>
     </html>
   );

From 617382e862f2f8f33277b066d397474067fcfa6d Mon Sep 17 00:00:00 2001
From: nitzanto <nitzan16001@gmail.com>
Date: Thu, 15 Aug 2024 17:02:03 +0300
Subject: [PATCH 015/242] update package json

---
 package-lock.json | 89 ++++++++++++++++++++++++++++++-----------------
 1 file changed, 58 insertions(+), 31 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index b3d11dd..4751da0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,8 +8,6 @@
       "name": "supportai-frontend",
       "version": "0.1.0",
       "dependencies": {
-        "@emotion/react": "^11.13.0",
-        "@emotion/styled": "^11.13.0",
         "@emotion/react": "^11.13.0",
         "@emotion/styled": "^11.13.0",
         "@fortawesome/fontawesome-svg-core": "^6.5.2",
@@ -27,13 +25,12 @@
         "cookies-next": "^4.2.1",
         "file-saver": "^2.0.5",
         "font-awesome": "^4.7.0",
-        "lodash": "^4.17.21",
-        "next": "14.2.3",
         "html-to-text": "^9.0.5",
         "html2canvas": "^1.4.1",
         "html2pdf.js": "^0.10.2",
         "jspdf": "^2.5.1",
-        "next": "^14.2.3",
+        "lodash": "^4.17.21",
+        "next": "14.2.3",
         "next-cookie": "^2.8.0",
         "pdf-lib": "^1.17.1",
         "quill": "^2.0.2",
@@ -50,11 +47,9 @@
         "zod": "^3.23.8"
       },
       "devDependencies": {
-        "@types/lodash": "^4.17.7",
-        "@types/node": "^20.3.1",
-        "@types/react": "^18",
         "@types/file-saver": "^2.0.7",
         "@types/html-to-text": "^9.0.4",
+        "@types/lodash": "^4.17.7",
         "@types/node": "^20.14.14",
         "@types/react": "^18.3.3",
         "@types/react-dom": "^18",
@@ -2233,29 +2228,6 @@
         "cookie": "^0.6.0"
       }
     },
-    "node_modules/cosmiconfig": {
-      "version": "7.1.0",
-      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz",
-      "integrity": "sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==",
-      "dependencies": {
-        "@types/parse-json": "^4.0.0",
-        "import-fresh": "^3.2.1",
-        "parse-json": "^5.0.0",
-        "path-type": "^4.0.0",
-        "yaml": "^1.10.0"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/cosmiconfig/node_modules/yaml": {
-      "version": "1.10.2",
-      "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
-      "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
-      "engines": {
-        "node": ">= 6"
-      }
-    },
     "node_modules/core-js": {
       "version": "3.38.0",
       "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.38.0.tgz",
@@ -3759,6 +3731,61 @@
         "react-is": "^16.7.0"
       }
     },
+    "node_modules/html-to-text": {
+      "version": "9.0.5",
+      "resolved": "https://registry.npmjs.org/html-to-text/-/html-to-text-9.0.5.tgz",
+      "integrity": "sha512-qY60FjREgVZL03vJU6IfMV4GDjGBIoOyvuFdpBDIX9yTlDw0TjxVBQp+P8NvpdIXNJvfWBTNul7fsAQJq2FNpg==",
+      "dependencies": {
+        "@selderee/plugin-htmlparser2": "^0.11.0",
+        "deepmerge": "^4.3.1",
+        "dom-serializer": "^2.0.0",
+        "htmlparser2": "^8.0.2",
+        "selderee": "^0.11.0"
+      },
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/html2canvas": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.4.1.tgz",
+      "integrity": "sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==",
+      "dependencies": {
+        "css-line-break": "^2.1.0",
+        "text-segmentation": "^1.0.3"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
+    "node_modules/html2pdf.js": {
+      "version": "0.10.2",
+      "resolved": "https://registry.npmjs.org/html2pdf.js/-/html2pdf.js-0.10.2.tgz",
+      "integrity": "sha512-WyHVeMb18Bp7vYTmBv1GVsThH//K7SRfHdSdhHPkl4JvyQarNQXnailkYn0QUbRRmnN5rdbbmSIGEsPZtzPy2Q==",
+      "dependencies": {
+        "es6-promise": "^4.2.5",
+        "html2canvas": "^1.0.0",
+        "jspdf": "^2.3.1"
+      }
+    },
+    "node_modules/htmlparser2": {
+      "version": "8.0.2",
+      "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-8.0.2.tgz",
+      "integrity": "sha512-GYdjWKDkbRLkZ5geuHs5NY1puJ+PXwP7+fHPRz06Eirsb9ugf6d8kkXav6ADhcODhFFPMIXyxkxSuMf3D6NCFA==",
+      "funding": [
+        "https://github.com/fb55/htmlparser2?sponsor=1",
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fb55"
+        }
+      ],
+      "dependencies": {
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.3",
+        "domutils": "^3.0.1",
+        "entities": "^4.4.0"
+      }
+    },
     "node_modules/ignore": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.1.tgz",

From 6cdbcad7aec4a5f3352a43bb3be2f4c68bf29e26 Mon Sep 17 00:00:00 2001
From: nitzanto <nitzan16001@gmail.com>
Date: Thu, 15 Aug 2024 17:08:58 +0300
Subject: [PATCH 016/242] fix: url

---
 src/api/base.client.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/api/base.client.ts b/src/api/base.client.ts
index bcbd552..67e8a66 100644
--- a/src/api/base.client.ts
+++ b/src/api/base.client.ts
@@ -26,7 +26,7 @@ export class BaseClient {
   base: string | undefined;
 
   constructor() {
-    this.base = process.env.BACKEND_URL;
+    this.base = process.env.NEXT_PUBLIC_SERVER_URL;
   }
 
   private async request<T>(

From 5c3e15cbea1a214f956f8df605116b302d4c2797 Mon Sep 17 00:00:00 2001
From: nitzanto <nitzan16001@gmail.com>
Date: Thu, 15 Aug 2024 17:37:09 +0300
Subject: [PATCH 017/242] fix config url

---
 src/common/config/config.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/common/config/config.ts b/src/common/config/config.ts
index 8020f3f..a460032 100644
--- a/src/common/config/config.ts
+++ b/src/common/config/config.ts
@@ -1 +1,2 @@
-export const SERVER_URL = process.env.SERVER_URL || "http://localhost:8080";
+export const SERVER_URL =
+  process.env.NEXT_PUBLIC_SERVER_URL || "http://localhost:8080";

From c2c8bab682062132c7e6ed79823c2cabc50ce6cf Mon Sep 17 00:00:00 2001
From: nitzanto <nitzan16001@gmail.com>
Date: Thu, 15 Aug 2024 23:25:40 +0300
Subject: [PATCH 018/242] feat: new dashboard

---
 package-lock.json                             | 1713 ++++++++++++++++-
 package.json                                  |    7 +-
 public/logo.png                               |  Bin 0 -> 43495 bytes
 src/api/auth.client.ts                        |   17 +
 src/api/base.client.ts                        |  121 ++
 .../components/PageContainer/index.tsx        |   21 +
 .../components/sidebar/NavGroup/index.tsx     |   32 +
 .../components/sidebar/NavItem/index.tsx      |  100 +
 .../components/sidebar/Sidebar.tsx            |   76 +
 .../components/sidebar/SidebarItems.tsx       |   34 +
 .../components/sidebar/hooks/useMenuItems.ts  |   60 +
 src/app/(admin)/new_dashboard/layout.tsx      |   57 +
 src/app/(admin)/new_dashboard/page.tsx        |   84 +
 src/app/(public)/login/page.tsx               |  123 ++
 src/app/(public)/signup/page.tsx              |  124 ++
 src/app/layout.tsx                            |   21 +-
 src/util/theme.ts                             |  145 ++
 17 files changed, 2680 insertions(+), 55 deletions(-)
 create mode 100644 public/logo.png
 create mode 100644 src/api/auth.client.ts
 create mode 100644 src/api/base.client.ts
 create mode 100644 src/app/(admin)/new_dashboard/components/PageContainer/index.tsx
 create mode 100644 src/app/(admin)/new_dashboard/components/sidebar/NavGroup/index.tsx
 create mode 100644 src/app/(admin)/new_dashboard/components/sidebar/NavItem/index.tsx
 create mode 100644 src/app/(admin)/new_dashboard/components/sidebar/Sidebar.tsx
 create mode 100644 src/app/(admin)/new_dashboard/components/sidebar/SidebarItems.tsx
 create mode 100644 src/app/(admin)/new_dashboard/components/sidebar/hooks/useMenuItems.ts
 create mode 100644 src/app/(admin)/new_dashboard/layout.tsx
 create mode 100644 src/app/(admin)/new_dashboard/page.tsx
 create mode 100644 src/app/(public)/login/page.tsx
 create mode 100644 src/app/(public)/signup/page.tsx
 create mode 100644 src/util/theme.ts

diff --git a/package-lock.json b/package-lock.json
index b1c7423..7cf387d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -35,6 +35,9 @@
         "react": "^18.3.1",
         "react-bootstrap": "^2.10.4",
         "react-dom": "^18",
+        "react-helmet-async": "^2.0.5",
+        "react-hook-form": "^7.52.2",
+        "react-mui-sidebar": "^1.3.8",
         "react-quill": "^2.0.0",
         "react-router-dom": "^6.26.0",
         "react-toastify": "^10.0.5",
@@ -407,6 +410,374 @@
       "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.4.0.tgz",
       "integrity": "sha512-snKqtPW01tN0ui7yu9rGv69aJXr/a/Ywvl11sUjNtEcRc+ng/mQriFL0wLXMef74iHa/EkftbDzU9F8iFbH+zg=="
     },
+    "node_modules/@esbuild/aix-ppc64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.21.5.tgz",
+      "integrity": "sha512-1SDgH6ZSPTlggy1yI6+Dbkiz8xzpHJEVAlF/AM1tHPLsf5STom9rwtjE4hKAF20FfXXNTFqEYXyJNWh1GiZedQ==",
+      "cpu": [
+        "ppc64"
+      ],
+      "optional": true,
+      "os": [
+        "aix"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/android-arm": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.21.5.tgz",
+      "integrity": "sha512-vCPvzSjpPHEi1siZdlvAlsPxXl7WbOVUBBAowWug4rJHb68Ox8KualB+1ocNvT5fjv6wpkX6o/iEpbDrf68zcg==",
+      "cpu": [
+        "arm"
+      ],
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/android-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.21.5.tgz",
+      "integrity": "sha512-c0uX9VAUBQ7dTDCjq+wdyGLowMdtR/GoC2U5IYk/7D1H1JYC0qseD7+11iMP2mRLN9RcCMRcjC4YMclCzGwS/A==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/android-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.21.5.tgz",
+      "integrity": "sha512-D7aPRUUNHRBwHxzxRvp856rjUHRFW1SdQATKXH2hqA0kAZb1hKmi02OpYRacl0TxIGz/ZmXWlbZgjwWYaCakTA==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/darwin-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.21.5.tgz",
+      "integrity": "sha512-DwqXqZyuk5AiWWf3UfLiRDJ5EDd49zg6O9wclZ7kUMv2WRFr4HKjXp/5t8JZ11QbQfUS6/cRCKGwYhtNAY88kQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/darwin-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.21.5.tgz",
+      "integrity": "sha512-se/JjF8NlmKVG4kNIuyWMV/22ZaerB+qaSi5MdrXtd6R08kvs2qCN4C09miupktDitvh8jRFflwGFBQcxZRjbw==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/freebsd-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.21.5.tgz",
+      "integrity": "sha512-5JcRxxRDUJLX8JXp/wcBCy3pENnCgBR9bN6JsY4OmhfUtIHe3ZW0mawA7+RDAcMLrMIZaf03NlQiX9DGyB8h4g==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/freebsd-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.21.5.tgz",
+      "integrity": "sha512-J95kNBj1zkbMXtHVH29bBriQygMXqoVQOQYA+ISs0/2l3T9/kj42ow2mpqerRBxDJnmkUDCaQT/dfNXWX/ZZCQ==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-arm": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.21.5.tgz",
+      "integrity": "sha512-bPb5AHZtbeNGjCKVZ9UGqGwo8EUu4cLq68E95A53KlxAPRmUyYv2D6F0uUI65XisGOL1hBP5mTronbgo+0bFcA==",
+      "cpu": [
+        "arm"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.21.5.tgz",
+      "integrity": "sha512-ibKvmyYzKsBeX8d8I7MH/TMfWDXBF3db4qM6sy+7re0YXya+K1cem3on9XgdT2EQGMu4hQyZhan7TeQ8XkGp4Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-ia32": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.21.5.tgz",
+      "integrity": "sha512-YvjXDqLRqPDl2dvRODYmmhz4rPeVKYvppfGYKSNGdyZkA01046pLWyRKKI3ax8fbJoK5QbxblURkwK/MWY18Tg==",
+      "cpu": [
+        "ia32"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-loong64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.21.5.tgz",
+      "integrity": "sha512-uHf1BmMG8qEvzdrzAqg2SIG/02+4/DHB6a9Kbya0XDvwDEKCoC8ZRWI5JJvNdUjtciBGFQ5PuBlpEOXQj+JQSg==",
+      "cpu": [
+        "loong64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-mips64el": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.21.5.tgz",
+      "integrity": "sha512-IajOmO+KJK23bj52dFSNCMsz1QP1DqM6cwLUv3W1QwyxkyIWecfafnI555fvSGqEKwjMXVLokcV5ygHW5b3Jbg==",
+      "cpu": [
+        "mips64el"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-ppc64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.21.5.tgz",
+      "integrity": "sha512-1hHV/Z4OEfMwpLO8rp7CvlhBDnjsC3CttJXIhBi+5Aj5r+MBvy4egg7wCbe//hSsT+RvDAG7s81tAvpL2XAE4w==",
+      "cpu": [
+        "ppc64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-riscv64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.21.5.tgz",
+      "integrity": "sha512-2HdXDMd9GMgTGrPWnJzP2ALSokE/0O5HhTUvWIbD3YdjME8JwvSCnNGBnTThKGEB91OZhzrJ4qIIxk/SBmyDDA==",
+      "cpu": [
+        "riscv64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-s390x": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.21.5.tgz",
+      "integrity": "sha512-zus5sxzqBJD3eXxwvjN1yQkRepANgxE9lgOW2qLnmr8ikMTphkjgXu1HR01K4FJg8h1kEEDAqDcZQtbrRnB41A==",
+      "cpu": [
+        "s390x"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.21.5.tgz",
+      "integrity": "sha512-1rYdTpyv03iycF1+BhzrzQJCdOuAOtaqHTWJZCWvijKD2N5Xu0TtVC8/+1faWqcP9iBCWOmjmhoH94dH82BxPQ==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/netbsd-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.21.5.tgz",
+      "integrity": "sha512-Woi2MXzXjMULccIwMnLciyZH4nCIMpWQAs049KEeMvOcNADVxo0UBIQPfSmxB3CWKedngg7sWZdLvLczpe0tLg==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/openbsd-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.21.5.tgz",
+      "integrity": "sha512-HLNNw99xsvx12lFBUwoT8EVCsSvRNDVxNpjZ7bPn947b8gJPzeHWyNVhFsaerc0n3TsbOINvRP2byTZ5LKezow==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/sunos-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.21.5.tgz",
+      "integrity": "sha512-6+gjmFpfy0BHU5Tpptkuh8+uw3mnrvgs+dSPQXQOv3ekbordwnzTVEb4qnIvQcYXq6gzkyTnoZ9dZG+D4garKg==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "sunos"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/win32-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.21.5.tgz",
+      "integrity": "sha512-Z0gOTd75VvXqyq7nsl93zwahcTROgqvuAcYDUr+vOv8uHhNSKROyU961kgtCD1e95IqPKSQKH7tBTslnS3tA8A==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/win32-ia32": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.21.5.tgz",
+      "integrity": "sha512-SWXFF1CL2RVNMaVs+BBClwtfZSvDgtL//G/smwAc5oVK/UPu2Gu9tIaRgFmYFFKrmg3SyAjSrElf0TiJ1v8fYA==",
+      "cpu": [
+        "ia32"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/win32-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.21.5.tgz",
+      "integrity": "sha512-tQd/1efJuzPC6rCFwEvLtci/xNFcTZknmXs98FYDfGE4wP9ClFV98nyKrzJKVPMhdDnjzLhdUyMX4PsQAPjwIw==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/@eslint-community/eslint-utils": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz",
@@ -634,9 +1005,9 @@
       }
     },
     "node_modules/@jridgewell/sourcemap-codec": {
-      "version": "1.4.15",
-      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
-      "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg=="
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz",
+      "integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ=="
     },
     "node_modules/@jridgewell/trace-mapping": {
       "version": "0.3.25",
@@ -647,24 +1018,182 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
-    "node_modules/@mui/core-downloads-tracker": {
-      "version": "5.16.7",
-      "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.16.7.tgz",
-      "integrity": "sha512-RtsCt4Geed2/v74sbihWzzRs+HsIQCfclHeORh5Ynu2fS4icIKozcSubwuG7vtzq2uW3fOR1zITSP84TNt2GoQ==",
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/mui-org"
+    "node_modules/@microsoft/api-extractor": {
+      "version": "7.43.0",
+      "resolved": "https://registry.npmjs.org/@microsoft/api-extractor/-/api-extractor-7.43.0.tgz",
+      "integrity": "sha512-GFhTcJpB+MI6FhvXEI9b2K0snulNLWHqC/BbcJtyNYcKUiw7l3Lgis5ApsYncJ0leALX7/of4XfmXk+maT111w==",
+      "peer": true,
+      "dependencies": {
+        "@microsoft/api-extractor-model": "7.28.13",
+        "@microsoft/tsdoc": "0.14.2",
+        "@microsoft/tsdoc-config": "~0.16.1",
+        "@rushstack/node-core-library": "4.0.2",
+        "@rushstack/rig-package": "0.5.2",
+        "@rushstack/terminal": "0.10.0",
+        "@rushstack/ts-command-line": "4.19.1",
+        "lodash": "~4.17.15",
+        "minimatch": "~3.0.3",
+        "resolve": "~1.22.1",
+        "semver": "~7.5.4",
+        "source-map": "~0.6.1",
+        "typescript": "5.4.2"
+      },
+      "bin": {
+        "api-extractor": "bin/api-extractor"
       }
     },
-    "node_modules/@mui/icons-material": {
-      "version": "5.16.7",
-      "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-5.16.7.tgz",
-      "integrity": "sha512-UrGwDJCXEszbDI7yV047BYU5A28eGJ79keTCP4cc74WyncuVrnurlmIRxaHL8YK+LI1Kzq+/JM52IAkNnv4u+Q==",
+    "node_modules/@microsoft/api-extractor-model": {
+      "version": "7.28.13",
+      "resolved": "https://registry.npmjs.org/@microsoft/api-extractor-model/-/api-extractor-model-7.28.13.tgz",
+      "integrity": "sha512-39v/JyldX4MS9uzHcdfmjjfS6cYGAoXV+io8B5a338pkHiSt+gy2eXQ0Q7cGFJ7quSa1VqqlMdlPrB6sLR/cAw==",
+      "peer": true,
       "dependencies": {
-        "@babel/runtime": "^7.23.9"
+        "@microsoft/tsdoc": "0.14.2",
+        "@microsoft/tsdoc-config": "~0.16.1",
+        "@rushstack/node-core-library": "4.0.2"
+      }
+    },
+    "node_modules/@microsoft/api-extractor/node_modules/lru-cache": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+      "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+      "peer": true,
+      "dependencies": {
+        "yallist": "^4.0.0"
       },
       "engines": {
-        "node": ">=12.0.0"
+        "node": ">=10"
+      }
+    },
+    "node_modules/@microsoft/api-extractor/node_modules/minimatch": {
+      "version": "3.0.8",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.8.tgz",
+      "integrity": "sha512-6FsRAQsxQ61mw+qP1ZzbL9Bc78x2p5OqNgNpnoAFLTrX8n5Kxph0CsnhmKKNXTWjXqU5L0pGPR7hYk+XWZr60Q==",
+      "peer": true,
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/@microsoft/api-extractor/node_modules/semver": {
+      "version": "7.5.4",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
+      "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
+      "peer": true,
+      "dependencies": {
+        "lru-cache": "^6.0.0"
+      },
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@microsoft/api-extractor/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "peer": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/@microsoft/api-extractor/node_modules/typescript": {
+      "version": "5.4.2",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.4.2.tgz",
+      "integrity": "sha512-+2/g0Fds1ERlP6JsakQQDXjZdZMM+rqpamFZJEKh4kwTIn3iDkgKtby0CeNd5ATNZ4Ry1ax15TMx0W2V+miizQ==",
+      "peer": true,
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=14.17"
+      }
+    },
+    "node_modules/@microsoft/tsdoc": {
+      "version": "0.14.2",
+      "resolved": "https://registry.npmjs.org/@microsoft/tsdoc/-/tsdoc-0.14.2.tgz",
+      "integrity": "sha512-9b8mPpKrfeGRuhFH5iO1iwCLeIIsV6+H1sRfxbkoGXIyQE2BTsPd9zqSqQJ+pv5sJ/hT5M1zvOFL02MnEezFug==",
+      "peer": true
+    },
+    "node_modules/@microsoft/tsdoc-config": {
+      "version": "0.16.2",
+      "resolved": "https://registry.npmjs.org/@microsoft/tsdoc-config/-/tsdoc-config-0.16.2.tgz",
+      "integrity": "sha512-OGiIzzoBLgWWR0UdRJX98oYO+XKGf7tiK4Zk6tQ/E4IJqGCe7dvkTvgDZV5cFJUzLGDOjeAXrnZoA6QkVySuxw==",
+      "peer": true,
+      "dependencies": {
+        "@microsoft/tsdoc": "0.14.2",
+        "ajv": "~6.12.6",
+        "jju": "~1.4.0",
+        "resolve": "~1.19.0"
+      }
+    },
+    "node_modules/@microsoft/tsdoc-config/node_modules/resolve": {
+      "version": "1.19.0",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.19.0.tgz",
+      "integrity": "sha512-rArEXAgsBG4UgRGcynxWIWKFvh/XZCcS8UJdHhwy91zwAvCZIbcs+vAbflgBnNjYMs/i/i+/Ux6IZhML1yPvxg==",
+      "peer": true,
+      "dependencies": {
+        "is-core-module": "^2.1.0",
+        "path-parse": "^1.0.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/@mui/base": {
+      "version": "5.0.0-beta.40",
+      "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-beta.40.tgz",
+      "integrity": "sha512-I/lGHztkCzvwlXpjD2+SNmvNQvB4227xBXhISPjEaJUXGImOQ9f3D2Yj/T3KasSI/h0MLWy74X0J6clhPmsRbQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.9",
+        "@floating-ui/react-dom": "^2.0.8",
+        "@mui/types": "^7.2.14",
+        "@mui/utils": "^5.15.14",
+        "@popperjs/core": "^2.11.8",
+        "clsx": "^2.1.0",
+        "prop-types": "^15.8.1"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@types/react": "^17.0.0 || ^18.0.0",
+        "react": "^17.0.0 || ^18.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/core-downloads-tracker": {
+      "version": "5.16.7",
+      "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.16.7.tgz",
+      "integrity": "sha512-RtsCt4Geed2/v74sbihWzzRs+HsIQCfclHeORh5Ynu2fS4icIKozcSubwuG7vtzq2uW3fOR1zITSP84TNt2GoQ==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      }
+    },
+    "node_modules/@mui/icons-material": {
+      "version": "5.16.7",
+      "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-5.16.7.tgz",
+      "integrity": "sha512-UrGwDJCXEszbDI7yV047BYU5A28eGJ79keTCP4cc74WyncuVrnurlmIRxaHL8YK+LI1Kzq+/JM52IAkNnv4u+Q==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.9"
+      },
+      "engines": {
+        "node": ">=12.0.0"
       },
       "funding": {
         "type": "opencollective",
@@ -1153,12 +1682,355 @@
         "react": ">=16.14.0"
       }
     },
+    "node_modules/@rollup/pluginutils": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.1.0.tgz",
+      "integrity": "sha512-XTIWOPPcpvyKI6L1NHo0lFlCyznUEyPmPY1mc3KpPVDYulHSTvyeLNVW00QTLIAFNhR3kYnJTQHeGqU4M3n09g==",
+      "peer": true,
+      "dependencies": {
+        "@types/estree": "^1.0.0",
+        "estree-walker": "^2.0.2",
+        "picomatch": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "rollup": "^1.20.0||^2.0.0||^3.0.0||^4.0.0"
+      },
+      "peerDependenciesMeta": {
+        "rollup": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@rollup/rollup-android-arm-eabi": {
+      "version": "4.20.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.20.0.tgz",
+      "integrity": "sha512-TSpWzflCc4VGAUJZlPpgAJE1+V60MePDQnBd7PPkpuEmOy8i87aL6tinFGKBFKuEDikYpig72QzdT3QPYIi+oA==",
+      "cpu": [
+        "arm"
+      ],
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "peer": true
+    },
+    "node_modules/@rollup/rollup-android-arm64": {
+      "version": "4.20.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.20.0.tgz",
+      "integrity": "sha512-u00Ro/nok7oGzVuh/FMYfNoGqxU5CPWz1mxV85S2w9LxHR8OoMQBuSk+3BKVIDYgkpeOET5yXkx90OYFc+ytpQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "peer": true
+    },
+    "node_modules/@rollup/rollup-darwin-arm64": {
+      "version": "4.20.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.20.0.tgz",
+      "integrity": "sha512-uFVfvzvsdGtlSLuL0ZlvPJvl6ZmrH4CBwLGEFPe7hUmf7htGAN+aXo43R/V6LATyxlKVC/m6UsLb7jbG+LG39Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "peer": true
+    },
+    "node_modules/@rollup/rollup-darwin-x64": {
+      "version": "4.20.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.20.0.tgz",
+      "integrity": "sha512-xbrMDdlev53vNXexEa6l0LffojxhqDTBeL+VUxuuIXys4x6xyvbKq5XqTXBCEUA8ty8iEJblHvFaWRJTk/icAQ==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "peer": true
+    },
+    "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
+      "version": "4.20.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.20.0.tgz",
+      "integrity": "sha512-jMYvxZwGmoHFBTbr12Xc6wOdc2xA5tF5F2q6t7Rcfab68TT0n+r7dgawD4qhPEvasDsVpQi+MgDzj2faOLsZjA==",
+      "cpu": [
+        "arm"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true
+    },
+    "node_modules/@rollup/rollup-linux-arm-musleabihf": {
+      "version": "4.20.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.20.0.tgz",
+      "integrity": "sha512-1asSTl4HKuIHIB1GcdFHNNZhxAYEdqML/MW4QmPS4G0ivbEcBr1JKlFLKsIRqjSwOBkdItn3/ZDlyvZ/N6KPlw==",
+      "cpu": [
+        "arm"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true
+    },
+    "node_modules/@rollup/rollup-linux-arm64-gnu": {
+      "version": "4.20.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.20.0.tgz",
+      "integrity": "sha512-COBb8Bkx56KldOYJfMf6wKeYJrtJ9vEgBRAOkfw6Ens0tnmzPqvlpjZiLgkhg6cA3DGzCmLmmd319pmHvKWWlQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true
+    },
+    "node_modules/@rollup/rollup-linux-arm64-musl": {
+      "version": "4.20.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.20.0.tgz",
+      "integrity": "sha512-+it+mBSyMslVQa8wSPvBx53fYuZK/oLTu5RJoXogjk6x7Q7sz1GNRsXWjn6SwyJm8E/oMjNVwPhmNdIjwP135Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true
+    },
+    "node_modules/@rollup/rollup-linux-powerpc64le-gnu": {
+      "version": "4.20.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.20.0.tgz",
+      "integrity": "sha512-yAMvqhPfGKsAxHN8I4+jE0CpLWD8cv4z7CK7BMmhjDuz606Q2tFKkWRY8bHR9JQXYcoLfopo5TTqzxgPUjUMfw==",
+      "cpu": [
+        "ppc64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true
+    },
+    "node_modules/@rollup/rollup-linux-riscv64-gnu": {
+      "version": "4.20.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.20.0.tgz",
+      "integrity": "sha512-qmuxFpfmi/2SUkAw95TtNq/w/I7Gpjurx609OOOV7U4vhvUhBcftcmXwl3rqAek+ADBwSjIC4IVNLiszoj3dPA==",
+      "cpu": [
+        "riscv64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true
+    },
+    "node_modules/@rollup/rollup-linux-s390x-gnu": {
+      "version": "4.20.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.20.0.tgz",
+      "integrity": "sha512-I0BtGXddHSHjV1mqTNkgUZLnS3WtsqebAXv11D5BZE/gfw5KoyXSAXVqyJximQXNvNzUo4GKlCK/dIwXlz+jlg==",
+      "cpu": [
+        "s390x"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true
+    },
+    "node_modules/@rollup/rollup-linux-x64-gnu": {
+      "version": "4.20.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.20.0.tgz",
+      "integrity": "sha512-y+eoL2I3iphUg9tN9GB6ku1FA8kOfmF4oUEWhztDJ4KXJy1agk/9+pejOuZkNFhRwHAOxMsBPLbXPd6mJiCwew==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true
+    },
+    "node_modules/@rollup/rollup-linux-x64-musl": {
+      "version": "4.20.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.20.0.tgz",
+      "integrity": "sha512-hM3nhW40kBNYUkZb/r9k2FKK+/MnKglX7UYd4ZUy5DJs8/sMsIbqWK2piZtVGE3kcXVNj3B2IrUYROJMMCikNg==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true
+    },
+    "node_modules/@rollup/rollup-win32-arm64-msvc": {
+      "version": "4.20.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.20.0.tgz",
+      "integrity": "sha512-psegMvP+Ik/Bg7QRJbv8w8PAytPA7Uo8fpFjXyCRHWm6Nt42L+JtoqH8eDQ5hRP7/XW2UiIriy1Z46jf0Oa1kA==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "peer": true
+    },
+    "node_modules/@rollup/rollup-win32-ia32-msvc": {
+      "version": "4.20.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.20.0.tgz",
+      "integrity": "sha512-GabekH3w4lgAJpVxkk7hUzUf2hICSQO0a/BLFA11/RMxQT92MabKAqyubzDZmMOC/hcJNlc+rrypzNzYl4Dx7A==",
+      "cpu": [
+        "ia32"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "peer": true
+    },
+    "node_modules/@rollup/rollup-win32-x64-msvc": {
+      "version": "4.20.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.20.0.tgz",
+      "integrity": "sha512-aJ1EJSuTdGnM6qbVC4B5DSmozPTqIag9fSzXRNNo+humQLG89XpPgdt16Ia56ORD7s+H8Pmyx44uczDQ0yDzpg==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "peer": true
+    },
     "node_modules/@rushstack/eslint-patch": {
       "version": "1.10.3",
       "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.10.3.tgz",
       "integrity": "sha512-qC/xYId4NMebE6w/V33Fh9gWxLgURiNYgVNObbJl2LZv0GUUItCcCqC5axQSwRaAgaxl2mELq1rMzlswaQ0Zxg==",
       "dev": true
     },
+    "node_modules/@rushstack/node-core-library": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/@rushstack/node-core-library/-/node-core-library-4.0.2.tgz",
+      "integrity": "sha512-hyES82QVpkfQMeBMteQUnrhASL/KHPhd7iJ8euduwNJG4mu2GSOKybf0rOEjOm1Wz7CwJEUm9y0yD7jg2C1bfg==",
+      "peer": true,
+      "dependencies": {
+        "fs-extra": "~7.0.1",
+        "import-lazy": "~4.0.0",
+        "jju": "~1.4.0",
+        "resolve": "~1.22.1",
+        "semver": "~7.5.4",
+        "z-schema": "~5.0.2"
+      },
+      "peerDependencies": {
+        "@types/node": "*"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@rushstack/node-core-library/node_modules/lru-cache": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+      "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+      "peer": true,
+      "dependencies": {
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@rushstack/node-core-library/node_modules/semver": {
+      "version": "7.5.4",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
+      "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
+      "peer": true,
+      "dependencies": {
+        "lru-cache": "^6.0.0"
+      },
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@rushstack/rig-package": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/@rushstack/rig-package/-/rig-package-0.5.2.tgz",
+      "integrity": "sha512-mUDecIJeH3yYGZs2a48k+pbhM6JYwWlgjs2Ca5f2n1G2/kgdgP9D/07oglEGf6mRyXEnazhEENeYTSNDRCwdqA==",
+      "peer": true,
+      "dependencies": {
+        "resolve": "~1.22.1",
+        "strip-json-comments": "~3.1.1"
+      }
+    },
+    "node_modules/@rushstack/terminal": {
+      "version": "0.10.0",
+      "resolved": "https://registry.npmjs.org/@rushstack/terminal/-/terminal-0.10.0.tgz",
+      "integrity": "sha512-UbELbXnUdc7EKwfH2sb8ChqNgapUOdqcCIdQP4NGxBpTZV2sQyeekuK3zmfQSa/MN+/7b4kBogl2wq0vpkpYGw==",
+      "peer": true,
+      "dependencies": {
+        "@rushstack/node-core-library": "4.0.2",
+        "supports-color": "~8.1.1"
+      },
+      "peerDependencies": {
+        "@types/node": "*"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@rushstack/terminal/node_modules/supports-color": {
+      "version": "8.1.1",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
+      "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
+      "peer": true,
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/supports-color?sponsor=1"
+      }
+    },
+    "node_modules/@rushstack/ts-command-line": {
+      "version": "4.19.1",
+      "resolved": "https://registry.npmjs.org/@rushstack/ts-command-line/-/ts-command-line-4.19.1.tgz",
+      "integrity": "sha512-J7H768dgcpG60d7skZ5uSSwyCZs/S2HrWP1Ds8d1qYAyaaeJmpmmLr9BVw97RjFzmQPOYnoXcKA4GkqDCkduQg==",
+      "peer": true,
+      "dependencies": {
+        "@rushstack/terminal": "0.10.0",
+        "@types/argparse": "1.0.38",
+        "argparse": "~1.0.9",
+        "string-argv": "~0.3.1"
+      }
+    },
+    "node_modules/@rushstack/ts-command-line/node_modules/argparse": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
+      "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==",
+      "peer": true,
+      "dependencies": {
+        "sprintf-js": "~1.0.2"
+      }
+    },
     "node_modules/@selderee/plugin-htmlparser2": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/@selderee/plugin-htmlparser2/-/plugin-htmlparser2-0.11.0.tgz",
@@ -1176,6 +2048,204 @@
       "resolved": "https://registry.npmjs.org/@socket.io/component-emitter/-/component-emitter-3.1.2.tgz",
       "integrity": "sha512-9BCxFwvbGg/RsZK9tjXd8s4UcwR0MWeFQ1XEKIQVVvAGJyINdrqKMcTRyLoK8Rse1GjzLV9cwjWV1olXRWEXVA=="
     },
+    "node_modules/@swc/core": {
+      "version": "1.7.11",
+      "resolved": "https://registry.npmjs.org/@swc/core/-/core-1.7.11.tgz",
+      "integrity": "sha512-AB+qc45UrJrDfbhPKcUXk+9z/NmFfYYwJT6G7/iur0fCse9kXjx45gi40+u/O2zgarG/30/zV6E3ps8fUvjh7g==",
+      "hasInstallScript": true,
+      "peer": true,
+      "dependencies": {
+        "@swc/counter": "^0.1.3",
+        "@swc/types": "^0.1.12"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/swc"
+      },
+      "optionalDependencies": {
+        "@swc/core-darwin-arm64": "1.7.11",
+        "@swc/core-darwin-x64": "1.7.11",
+        "@swc/core-linux-arm-gnueabihf": "1.7.11",
+        "@swc/core-linux-arm64-gnu": "1.7.11",
+        "@swc/core-linux-arm64-musl": "1.7.11",
+        "@swc/core-linux-x64-gnu": "1.7.11",
+        "@swc/core-linux-x64-musl": "1.7.11",
+        "@swc/core-win32-arm64-msvc": "1.7.11",
+        "@swc/core-win32-ia32-msvc": "1.7.11",
+        "@swc/core-win32-x64-msvc": "1.7.11"
+      },
+      "peerDependencies": {
+        "@swc/helpers": "*"
+      },
+      "peerDependenciesMeta": {
+        "@swc/helpers": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@swc/core-darwin-arm64": {
+      "version": "1.7.11",
+      "resolved": "https://registry.npmjs.org/@swc/core-darwin-arm64/-/core-darwin-arm64-1.7.11.tgz",
+      "integrity": "sha512-HRQv4qIeMBPThZ6Y/4yYW52rGsS6yrpusvuxLGyoFo45Y0y12/V2yXkOIA/0HIQyrqoUAxn1k4zQXpPaPNCmnw==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@swc/core-darwin-x64": {
+      "version": "1.7.11",
+      "resolved": "https://registry.npmjs.org/@swc/core-darwin-x64/-/core-darwin-x64-1.7.11.tgz",
+      "integrity": "sha512-vtMQj0F3oYwDu5yhO7SKDRg1XekRSi6/TbzHAbBXv+dBhlGGvcZZynT1H90EVFTv+7w7Sh+lOFvRv5Z4ZTcxow==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@swc/core-linux-arm-gnueabihf": {
+      "version": "1.7.11",
+      "resolved": "https://registry.npmjs.org/@swc/core-linux-arm-gnueabihf/-/core-linux-arm-gnueabihf-1.7.11.tgz",
+      "integrity": "sha512-mHtzWKxhtyreI4CSxs+3+ENv8t/Qo35WFoYG66qHEgJz/Z2Lh6jv1E+MYgHdYwnpQHgHbdvAco7HsBu/Dt6xXw==",
+      "cpu": [
+        "arm"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@swc/core-linux-arm64-gnu": {
+      "version": "1.7.11",
+      "resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-gnu/-/core-linux-arm64-gnu-1.7.11.tgz",
+      "integrity": "sha512-FRwe/x0GfXSQjGP2lIk+NO0pUFS/lI/RorCLBPiK808EVE9JTbh9DKCc/4Bbb4jgScAjNkrFCUVObQYl3YKmpA==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@swc/core-linux-arm64-musl": {
+      "version": "1.7.11",
+      "resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-musl/-/core-linux-arm64-musl-1.7.11.tgz",
+      "integrity": "sha512-GY/rs0+GUq14Gbnza90KOrQd/9yHd5qQMii5jcSWcUCT5A8QTa8kiicsM2NxZeTJ69xlKmT7sLod5l99lki/2A==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@swc/core-linux-x64-gnu": {
+      "version": "1.7.11",
+      "resolved": "https://registry.npmjs.org/@swc/core-linux-x64-gnu/-/core-linux-x64-gnu-1.7.11.tgz",
+      "integrity": "sha512-QDkGRwSPmp2RBOlSs503IUXlWYlny8DyznTT0QuK0ML2RpDFlXWU94K/EZhS0RBEUkMY/W51OacM8P8aS/dkCg==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@swc/core-linux-x64-musl": {
+      "version": "1.7.11",
+      "resolved": "https://registry.npmjs.org/@swc/core-linux-x64-musl/-/core-linux-x64-musl-1.7.11.tgz",
+      "integrity": "sha512-SBEfKrXy6zQ6ksnyxw1FaCftrIH4fLfA81xNnKb7x/6iblv7Ko6H0aK3P5C86jyqF/82+ONl9C7ImGkUFQADig==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@swc/core-win32-arm64-msvc": {
+      "version": "1.7.11",
+      "resolved": "https://registry.npmjs.org/@swc/core-win32-arm64-msvc/-/core-win32-arm64-msvc-1.7.11.tgz",
+      "integrity": "sha512-a2Y4xxEsLLYHJN7sMnw9+YQJDi3M1BxEr9hklfopPuGGnYLFNnx5CypH1l9ReijEfWjIAHNi7pq3m023lzW1Hg==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@swc/core-win32-ia32-msvc": {
+      "version": "1.7.11",
+      "resolved": "https://registry.npmjs.org/@swc/core-win32-ia32-msvc/-/core-win32-ia32-msvc-1.7.11.tgz",
+      "integrity": "sha512-ZbZFMwZO+j8ulhegJ7EhJ/QVZPoQ5qc30ylJQSxizizTJaen71Q7/13lXWc6ksuCKvg6dUKrp/TPgoxOOtSrFA==",
+      "cpu": [
+        "ia32"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@swc/core-win32-x64-msvc": {
+      "version": "1.7.11",
+      "resolved": "https://registry.npmjs.org/@swc/core-win32-x64-msvc/-/core-win32-x64-msvc-1.7.11.tgz",
+      "integrity": "sha512-IUohZedSJyDu/ReEBG/mqX6uG29uA7zZ9z6dIAF+p6eFxjXmh9MuHryyM+H8ebUyoq/Ad3rL+rUCksnuYNnI0w==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/@swc/counter": {
       "version": "0.1.3",
       "resolved": "https://registry.npmjs.org/@swc/counter/-/counter-0.1.3.tgz",
@@ -1190,12 +2260,57 @@
         "tslib": "^2.4.0"
       }
     },
+    "node_modules/@swc/types": {
+      "version": "0.1.12",
+      "resolved": "https://registry.npmjs.org/@swc/types/-/types-0.1.12.tgz",
+      "integrity": "sha512-wBJA+SdtkbFhHjTMYH+dEH1y4VpfGdAc2Kw/LK09i9bXd/K6j6PkDcFCEzb6iVfZMkPRrl/q0e3toqTAJdkIVA==",
+      "peer": true,
+      "dependencies": {
+        "@swc/counter": "^0.1.3"
+      }
+    },
+    "node_modules/@tanstack/query-core": {
+      "version": "5.51.21",
+      "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.51.21.tgz",
+      "integrity": "sha512-POQxm42IUp6n89kKWF4IZi18v3fxQWFRolvBA6phNVmA8psdfB1MvDnGacCJdS+EOX12w/CyHM62z//rHmYmvw==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
+    "node_modules/@tanstack/react-query": {
+      "version": "5.51.23",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.51.23.tgz",
+      "integrity": "sha512-CfJCfX45nnVIZjQBRYYtvVMIsGgWLKLYC4xcUiYEey671n1alvTZoCBaU9B85O8mF/tx9LPyrI04A6Bs2THv4A==",
+      "dependencies": {
+        "@tanstack/query-core": "5.51.21"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "react": "^18.0.0"
+      }
+    },
+    "node_modules/@types/argparse": {
+      "version": "1.0.38",
+      "resolved": "https://registry.npmjs.org/@types/argparse/-/argparse-1.0.38.tgz",
+      "integrity": "sha512-ebDJ9b0e702Yr7pWgB0jzm+CX4Srzz8RcXtLJDJB+BSccqMa36uyH/zUsSYao5+BD1ytv3k3rPYCq4mAE1hsXA==",
+      "peer": true
+    },
     "node_modules/@types/cookie": {
       "version": "0.6.0",
       "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.6.0.tgz",
       "integrity": "sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==",
       "license": "MIT"
     },
+    "node_modules/@types/estree": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
+      "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
+      "peer": true
+    },
     "node_modules/@types/file-saver": {
       "version": "2.0.7",
       "resolved": "https://registry.npmjs.org/@types/file-saver/-/file-saver-2.0.7.tgz",
@@ -1218,7 +2333,7 @@
       "version": "20.14.14",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-20.14.14.tgz",
       "integrity": "sha512-d64f00982fS9YoOgJkAMolK7MN8Iq3TDdVjchbYHdEmjth/DHowx82GnoA+tVUAN+7vxfYUgAzi+JXbKNd2SDQ==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "undici-types": "~5.26.4"
       }
@@ -1416,6 +2531,124 @@
       "integrity": "sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==",
       "dev": true
     },
+    "node_modules/@vitejs/plugin-react-swc": {
+      "version": "3.7.0",
+      "resolved": "https://registry.npmjs.org/@vitejs/plugin-react-swc/-/plugin-react-swc-3.7.0.tgz",
+      "integrity": "sha512-yrknSb3Dci6svCd/qhHqhFPDSw0QtjumcqdKMoNNzmOl5lMXTTiqzjWtG4Qask2HdvvzaNgSunbQGet8/GrKdA==",
+      "peer": true,
+      "dependencies": {
+        "@swc/core": "^1.5.7"
+      },
+      "peerDependencies": {
+        "vite": "^4 || ^5"
+      }
+    },
+    "node_modules/@volar/language-core": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@volar/language-core/-/language-core-1.11.1.tgz",
+      "integrity": "sha512-dOcNn3i9GgZAcJt43wuaEykSluAuOkQgzni1cuxLxTV0nJKanQztp7FxyswdRILaKH+P2XZMPRp2S4MV/pElCw==",
+      "peer": true,
+      "dependencies": {
+        "@volar/source-map": "1.11.1"
+      }
+    },
+    "node_modules/@volar/source-map": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@volar/source-map/-/source-map-1.11.1.tgz",
+      "integrity": "sha512-hJnOnwZ4+WT5iupLRnuzbULZ42L7BWWPMmruzwtLhJfpDVoZLjNBxHDi2sY2bgZXCKlpU5XcsMFoYrsQmPhfZg==",
+      "peer": true,
+      "dependencies": {
+        "muggle-string": "^0.3.1"
+      }
+    },
+    "node_modules/@volar/typescript": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@volar/typescript/-/typescript-1.11.1.tgz",
+      "integrity": "sha512-iU+t2mas/4lYierSnoFOeRFQUhAEMgsFuQxoxvwn5EdQopw43j+J27a4lt9LMInx1gLJBC6qL14WYGlgymaSMQ==",
+      "peer": true,
+      "dependencies": {
+        "@volar/language-core": "1.11.1",
+        "path-browserify": "^1.0.1"
+      }
+    },
+    "node_modules/@vue/compiler-core": {
+      "version": "3.4.38",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.4.38.tgz",
+      "integrity": "sha512-8IQOTCWnLFqfHzOGm9+P8OPSEDukgg3Huc92qSG49if/xI2SAwLHQO2qaPQbjCWPBcQoO1WYfXfTACUrWV3c5A==",
+      "peer": true,
+      "dependencies": {
+        "@babel/parser": "^7.24.7",
+        "@vue/shared": "3.4.38",
+        "entities": "^4.5.0",
+        "estree-walker": "^2.0.2",
+        "source-map-js": "^1.2.0"
+      }
+    },
+    "node_modules/@vue/compiler-dom": {
+      "version": "3.4.38",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.4.38.tgz",
+      "integrity": "sha512-Osc/c7ABsHXTsETLgykcOwIxFktHfGSUDkb05V61rocEfsFDcjDLH/IHJSNJP+/Sv9KeN2Lx1V6McZzlSb9EhQ==",
+      "peer": true,
+      "dependencies": {
+        "@vue/compiler-core": "3.4.38",
+        "@vue/shared": "3.4.38"
+      }
+    },
+    "node_modules/@vue/language-core": {
+      "version": "1.8.27",
+      "resolved": "https://registry.npmjs.org/@vue/language-core/-/language-core-1.8.27.tgz",
+      "integrity": "sha512-L8Kc27VdQserNaCUNiSFdDl9LWT24ly8Hpwf1ECy3aFb9m6bDhBGQYOujDm21N7EW3moKIOKEanQwe1q5BK+mA==",
+      "peer": true,
+      "dependencies": {
+        "@volar/language-core": "~1.11.1",
+        "@volar/source-map": "~1.11.1",
+        "@vue/compiler-dom": "^3.3.0",
+        "@vue/shared": "^3.3.0",
+        "computeds": "^0.0.1",
+        "minimatch": "^9.0.3",
+        "muggle-string": "^0.3.1",
+        "path-browserify": "^1.0.1",
+        "vue-template-compiler": "^2.7.14"
+      },
+      "peerDependencies": {
+        "typescript": "*"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vue/language-core/node_modules/brace-expansion": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "peer": true,
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/@vue/language-core/node_modules/minimatch": {
+      "version": "9.0.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
+      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+      "peer": true,
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/@vue/shared": {
+      "version": "3.4.38",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.4.38.tgz",
+      "integrity": "sha512-q0xCiLkuWWQLzVrecPb0RMsNWyxICOjPrcrwxTUEHb1fsnvni4dcuyG7RT/Ie7VPTvnjzIaWzRMUBsrqNj/hhw==",
+      "peer": true
+    },
     "node_modules/acorn": {
       "version": "8.11.3",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.11.3.tgz",
@@ -1441,7 +2674,6 @@
       "version": "6.12.6",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
       "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
-      "dev": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.1",
         "fast-json-stable-stringify": "^2.0.0",
@@ -1767,8 +2999,7 @@
     "node_modules/balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
-      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
-      "dev": true
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
     },
     "node_modules/base64-arraybuffer": {
       "version": "1.0.2",
@@ -1812,7 +3043,6 @@
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
       "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
-      "dev": true,
       "dependencies": {
         "balanced-match": "^1.0.0",
         "concat-map": "0.0.1"
@@ -2048,11 +3278,16 @@
         "node": ">= 6"
       }
     },
+    "node_modules/computeds": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/computeds/-/computeds-0.0.1.tgz",
+      "integrity": "sha512-7CEBgcMjVmitjYo5q8JTJVra6X5mQ20uTThdK+0kR7UEaDrAWEQcRiBtWJzga4eRpP6afNwwLsX2SET2JhVB1Q==",
+      "peer": true
+    },
     "node_modules/concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
-      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
-      "dev": true
+      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg=="
     },
     "node_modules/convert-source-map": {
       "version": "1.9.0",
@@ -2208,6 +3443,12 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/de-indent": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/de-indent/-/de-indent-1.0.2.tgz",
+      "integrity": "sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==",
+      "peer": true
+    },
     "node_modules/debug": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@@ -2632,6 +3873,44 @@
       "resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-4.2.8.tgz",
       "integrity": "sha512-HJDGx5daxeIvxdBxvG2cb9g4tEvwIk3i8+nhX0yGrYmZUzbkdg8QbDevheDB8gd0//uPj4c1EQua8Q+MViT0/w=="
     },
+    "node_modules/esbuild": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.21.5.tgz",
+      "integrity": "sha512-mg3OPMV4hXywwpoDxu3Qda5xCKQi+vCTZq8S9J/EpkhB2HzKXq4SNFZE3+NK93JYxc8VMSep+lOUSC/RVKaBqw==",
+      "hasInstallScript": true,
+      "peer": true,
+      "bin": {
+        "esbuild": "bin/esbuild"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "optionalDependencies": {
+        "@esbuild/aix-ppc64": "0.21.5",
+        "@esbuild/android-arm": "0.21.5",
+        "@esbuild/android-arm64": "0.21.5",
+        "@esbuild/android-x64": "0.21.5",
+        "@esbuild/darwin-arm64": "0.21.5",
+        "@esbuild/darwin-x64": "0.21.5",
+        "@esbuild/freebsd-arm64": "0.21.5",
+        "@esbuild/freebsd-x64": "0.21.5",
+        "@esbuild/linux-arm": "0.21.5",
+        "@esbuild/linux-arm64": "0.21.5",
+        "@esbuild/linux-ia32": "0.21.5",
+        "@esbuild/linux-loong64": "0.21.5",
+        "@esbuild/linux-mips64el": "0.21.5",
+        "@esbuild/linux-ppc64": "0.21.5",
+        "@esbuild/linux-riscv64": "0.21.5",
+        "@esbuild/linux-s390x": "0.21.5",
+        "@esbuild/linux-x64": "0.21.5",
+        "@esbuild/netbsd-x64": "0.21.5",
+        "@esbuild/openbsd-x64": "0.21.5",
+        "@esbuild/sunos-x64": "0.21.5",
+        "@esbuild/win32-arm64": "0.21.5",
+        "@esbuild/win32-ia32": "0.21.5",
+        "@esbuild/win32-x64": "0.21.5"
+      }
+    },
     "node_modules/escape-string-regexp": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
@@ -3046,6 +4325,12 @@
         "node": ">=4.0"
       }
     },
+    "node_modules/estree-walker": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
+      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
+      "peer": true
+    },
     "node_modules/esutils": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
@@ -3068,8 +4353,7 @@
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
-      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
-      "dev": true
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
     },
     "node_modules/fast-diff": {
       "version": "1.3.0",
@@ -3107,8 +4391,7 @@
     "node_modules/fast-json-stable-stringify": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
-      "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
-      "dev": true
+      "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw=="
     },
     "node_modules/fast-levenshtein": {
       "version": "2.0.6",
@@ -3265,6 +4548,20 @@
         "node": ">= 6"
       }
     },
+    "node_modules/fs-extra": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-7.0.1.tgz",
+      "integrity": "sha512-YJDaCJZEnBmcbw13fvdAM9AwNOJwOzrE4pqMqBq5nFiEqXUqHwlK4B+3pUw6JNvfSPtX05xFHtYy/1ni01eGCw==",
+      "peer": true,
+      "dependencies": {
+        "graceful-fs": "^4.1.2",
+        "jsonfile": "^4.0.0",
+        "universalify": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=6 <7 || >=8"
+      }
+    },
     "node_modules/fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@@ -3275,7 +4572,6 @@
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
       "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
-      "dev": true,
       "hasInstallScript": true,
       "optional": true,
       "os": [
@@ -3510,7 +4806,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
       "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -3573,6 +4868,15 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/he": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
+      "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==",
+      "peer": true,
+      "bin": {
+        "he": "bin/he"
+      }
+    },
     "node_modules/hoist-non-react-statics": {
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
@@ -3666,6 +4970,15 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/import-lazy": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/import-lazy/-/import-lazy-4.0.0.tgz",
+      "integrity": "sha512-rKtvo6a868b5Hu3heneU+L4yEQ4jYKLtjpnPeUdK7h0yzXGmyBTypknlkCvHFBqfX9YlorEiMM6Dnq/5atfHkw==",
+      "peer": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/imurmurhash": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
@@ -4150,6 +5463,12 @@
         "jiti": "bin/jiti.js"
       }
     },
+    "node_modules/jju": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/jju/-/jju-1.4.0.tgz",
+      "integrity": "sha512-8wb9Yw966OSxApiCt0K3yNJL8pnNeIv+OEq2YMidz4FKP6nonSRoOXc80iXY4JaN2FC11B9qsNmDsm+ZOfMROA==",
+      "peer": true
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -4192,8 +5511,7 @@
     "node_modules/json-schema-traverse": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
-      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
-      "dev": true
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
     },
     "node_modules/json-stable-stringify-without-jsonify": {
       "version": "1.0.1",
@@ -4213,6 +5531,15 @@
         "json5": "lib/cli.js"
       }
     },
+    "node_modules/jsonfile": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
+      "integrity": "sha512-m6F1R3z8jjlf2imQHS2Qez5sjKWQzbuuhuJ/FKYFRZvPE3PuHcSMVZzfsLhGVOkfd20obL5SWEBew5ShlquNxg==",
+      "peer": true,
+      "optionalDependencies": {
+        "graceful-fs": "^4.1.6"
+      }
+    },
     "node_modules/jspdf": {
       "version": "2.5.1",
       "resolved": "https://registry.npmjs.org/jspdf/-/jspdf-2.5.1.tgz",
@@ -4254,6 +5581,12 @@
         "json-buffer": "3.0.1"
       }
     },
+    "node_modules/kolorist": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/kolorist/-/kolorist-1.8.0.tgz",
+      "integrity": "sha512-Y+60/zizpJ3HRH8DCss+q95yr6145JXZo46OTpFvDZWLfRCE4qChOyk1b26nMaNpfHHgxagk9dXT5OP0Tfe+dQ==",
+      "peer": true
+    },
     "node_modules/language-subtag-registry": {
       "version": "0.3.23",
       "resolved": "https://registry.npmjs.org/language-subtag-registry/-/language-subtag-registry-0.3.23.tgz",
@@ -4337,6 +5670,12 @@
       "resolved": "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz",
       "integrity": "sha512-H5ZhCF25riFd9uB5UCkVKo61m3S/xZk1x4wA6yp/L3RFP6Z/eHH1ymQcGLo7J3GMPfm0V/7m1tryHuGVxpqEBQ=="
     },
+    "node_modules/lodash.get": {
+      "version": "4.4.2",
+      "resolved": "https://registry.npmjs.org/lodash.get/-/lodash.get-4.4.2.tgz",
+      "integrity": "sha512-z+Uw/vLuy6gQe8cfaFWD7p0wVv8fJl3mbzXh33RS+0oW2wvUqiRXiQ69gLWSLpgB5/6sU+r6BlQR0MBILadqTQ==",
+      "peer": true
+    },
     "node_modules/lodash.isequal": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz",
@@ -4368,6 +5707,15 @@
         "node": "14 || >=16.14"
       }
     },
+    "node_modules/magic-string": {
+      "version": "0.30.11",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.11.tgz",
+      "integrity": "sha512-+Wri9p0QHMy+545hKww7YAu5NyzF8iomPL/RQazugQ9+Ez4Ic3mERMd8ZTX5rfK944j+560ZJi8iAwgak1Ac7A==",
+      "peer": true,
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.0"
+      }
+    },
     "node_modules/merge2": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
@@ -4444,6 +5792,12 @@
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
       "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
     },
+    "node_modules/muggle-string": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/muggle-string/-/muggle-string-0.3.1.tgz",
+      "integrity": "sha512-ckmWDJjphvd/FvZawgygcUeQCxzvohjFO5RxTjj4eq8kw359gFF3E1brjfI+viLMxss5JrHTDRHZvu2/tuy0Qg==",
+      "peer": true
+    },
     "node_modules/mz": {
       "version": "2.7.0",
       "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
@@ -4828,6 +6182,12 @@
         "url": "https://ko-fi.com/killymxi"
       }
     },
+    "node_modules/path-browserify": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/path-browserify/-/path-browserify-1.0.1.tgz",
+      "integrity": "sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==",
+      "peer": true
+    },
     "node_modules/path-exists": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
@@ -4923,7 +6283,6 @@
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
       "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-      "devOptional": true,
       "engines": {
         "node": ">=8.6"
       },
@@ -4959,10 +6318,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.4.38",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz",
-      "integrity": "sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==",
-      "dev": true,
+      "version": "8.4.41",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.41.tgz",
+      "integrity": "sha512-TesUflQ0WKZqAvg52PWL6kHgLKP6xB6heTOdoYM0Wt2UHyxNa4K25EZZMgKns3BH1RLVbZCREPpLY0rhnNoHVQ==",
       "funding": [
         {
           "type": "opencollective",
@@ -4979,7 +6337,7 @@
       ],
       "dependencies": {
         "nanoid": "^3.3.7",
-        "picocolors": "^1.0.0",
+        "picocolors": "^1.0.1",
         "source-map-js": "^1.2.0"
       },
       "engines": {
@@ -5147,7 +6505,6 @@
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
       "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==",
-      "dev": true,
       "engines": {
         "node": ">=6"
       }
@@ -5329,6 +6686,39 @@
         "react": "^18.3.1"
       }
     },
+    "node_modules/react-fast-compare": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.2.tgz",
+      "integrity": "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ=="
+    },
+    "node_modules/react-helmet-async": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/react-helmet-async/-/react-helmet-async-2.0.5.tgz",
+      "integrity": "sha512-rYUYHeus+i27MvFE+Jaa4WsyBKGkL6qVgbJvSBoX8mbsWoABJXdEO0bZyi0F6i+4f0NuIb8AvqPMj3iXFHkMwg==",
+      "dependencies": {
+        "invariant": "^2.2.4",
+        "react-fast-compare": "^3.2.2",
+        "shallowequal": "^1.1.0"
+      },
+      "peerDependencies": {
+        "react": "^16.6.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/react-hook-form": {
+      "version": "7.52.2",
+      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.52.2.tgz",
+      "integrity": "sha512-pqfPEbERnxxiNMPd0bzmt1tuaPcVccywFDpyk2uV5xCIBphHV5T8SVnX9/o3kplPE1zzKt77+YIoq+EMwJp56A==",
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/react-hook-form"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17 || ^18 || ^19"
+      }
+    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@@ -5339,6 +6729,17 @@
       "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
       "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
     },
+    "node_modules/react-mui-sidebar": {
+      "version": "1.3.8",
+      "resolved": "https://registry.npmjs.org/react-mui-sidebar/-/react-mui-sidebar-1.3.8.tgz",
+      "integrity": "sha512-/EU293TQ2WsPFP1ecf3VBC346phkVKo7VGizVgL8agvlJV6U9UXBvWdAL4vIf4EzyPTmo11Plp7BzvmFB+6KoQ==",
+      "peerDependencies": {
+        "@vitejs/plugin-react-swc": "^3.6.0",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0",
+        "vite-plugin-dts": "^3.8.1"
+      }
+    },
     "node_modules/react-quill": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/react-quill/-/react-quill-2.0.0.tgz",
@@ -5603,6 +7004,41 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/rollup": {
+      "version": "4.20.0",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.20.0.tgz",
+      "integrity": "sha512-6rbWBChcnSGzIlXeIdNIZTopKYad8ZG8ajhl78lGRLsI2rX8IkaotQhVas2Ma+GPxJav19wrSzvRvuiv0YKzWw==",
+      "peer": true,
+      "dependencies": {
+        "@types/estree": "1.0.5"
+      },
+      "bin": {
+        "rollup": "dist/bin/rollup"
+      },
+      "engines": {
+        "node": ">=18.0.0",
+        "npm": ">=8.0.0"
+      },
+      "optionalDependencies": {
+        "@rollup/rollup-android-arm-eabi": "4.20.0",
+        "@rollup/rollup-android-arm64": "4.20.0",
+        "@rollup/rollup-darwin-arm64": "4.20.0",
+        "@rollup/rollup-darwin-x64": "4.20.0",
+        "@rollup/rollup-linux-arm-gnueabihf": "4.20.0",
+        "@rollup/rollup-linux-arm-musleabihf": "4.20.0",
+        "@rollup/rollup-linux-arm64-gnu": "4.20.0",
+        "@rollup/rollup-linux-arm64-musl": "4.20.0",
+        "@rollup/rollup-linux-powerpc64le-gnu": "4.20.0",
+        "@rollup/rollup-linux-riscv64-gnu": "4.20.0",
+        "@rollup/rollup-linux-s390x-gnu": "4.20.0",
+        "@rollup/rollup-linux-x64-gnu": "4.20.0",
+        "@rollup/rollup-linux-x64-musl": "4.20.0",
+        "@rollup/rollup-win32-arm64-msvc": "4.20.0",
+        "@rollup/rollup-win32-ia32-msvc": "4.20.0",
+        "@rollup/rollup-win32-x64-msvc": "4.20.0",
+        "fsevents": "~2.3.2"
+      }
+    },
     "node_modules/run-parallel": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
@@ -5701,7 +7137,6 @@
       "version": "7.6.2",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.2.tgz",
       "integrity": "sha512-FNAIBWCx9qcRhoHcgcJ0gvU7SN1lYU2ZXuSfl04bSC5OpvDHFyJCjdNHomPXxjQlCBU67YW64PzY7/VIEH7F2w==",
-      "dev": true,
       "bin": {
         "semver": "bin/semver.js"
       },
@@ -5739,6 +7174,11 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/shallowequal": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
+      "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ=="
+    },
     "node_modules/shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -5841,6 +7281,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/sprintf-js": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
+      "integrity": "sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==",
+      "peer": true
+    },
     "node_modules/stackblur-canvas": {
       "version": "2.7.0",
       "resolved": "https://registry.npmjs.org/stackblur-canvas/-/stackblur-canvas-2.7.0.tgz",
@@ -5858,6 +7304,15 @@
         "node": ">=10.0.0"
       }
     },
+    "node_modules/string-argv": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/string-argv/-/string-argv-0.3.2.tgz",
+      "integrity": "sha512-aqD2Q0144Z+/RqG52NeHEkZauTAUWJO8c6yTftGJKO3Tja5tUgIfmIl6kExvhtxSDP7fXB6DvzkfMpCd/F3G+Q==",
+      "peer": true,
+      "engines": {
+        "node": ">=0.6.19"
+      }
+    },
     "node_modules/string-width": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
@@ -6036,7 +7491,6 @@
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
       "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       },
@@ -6362,7 +7816,6 @@
       "version": "5.5.4",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.5.4.tgz",
       "integrity": "sha512-Mtq29sKDAEYP7aljRgtPOpTvOfbwRWlS6dPRzwjdE+C0R4brX/GUyhHSecbHMFLNBLcJIPt9nl9yG5TZ1weH+Q==",
-      "dev": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -6404,7 +7857,7 @@
       "version": "5.26.5",
       "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz",
       "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/universal-cookie": {
       "version": "4.0.4",
@@ -6431,11 +7884,19 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/universalify": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz",
+      "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==",
+      "peer": true,
+      "engines": {
+        "node": ">= 4.0.0"
+      }
+    },
     "node_modules/uri-js": {
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
       "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
-      "dev": true,
       "dependencies": {
         "punycode": "^2.1.0"
       }
@@ -6454,6 +7915,128 @@
         "base64-arraybuffer": "^1.0.2"
       }
     },
+    "node_modules/validator": {
+      "version": "13.12.0",
+      "resolved": "https://registry.npmjs.org/validator/-/validator-13.12.0.tgz",
+      "integrity": "sha512-c1Q0mCiPlgdTVVVIJIrBuxNicYE+t/7oKeI9MWLj3fh/uq2Pxh/3eeWbVZ4OcGW1TUf53At0njHw5SMdA3tmMg==",
+      "peer": true,
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/vite": {
+      "version": "5.4.1",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.1.tgz",
+      "integrity": "sha512-1oE6yuNXssjrZdblI9AfBbHCC41nnyoVoEZxQnID6yvQZAFBzxxkqoFLtHUMkYunL8hwOLEjgTuxpkRxvba3kA==",
+      "peer": true,
+      "dependencies": {
+        "esbuild": "^0.21.3",
+        "postcss": "^8.4.41",
+        "rollup": "^4.13.0"
+      },
+      "bin": {
+        "vite": "bin/vite.js"
+      },
+      "engines": {
+        "node": "^18.0.0 || >=20.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/vitejs/vite?sponsor=1"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.3"
+      },
+      "peerDependencies": {
+        "@types/node": "^18.0.0 || >=20.0.0",
+        "less": "*",
+        "lightningcss": "^1.21.0",
+        "sass": "*",
+        "sass-embedded": "*",
+        "stylus": "*",
+        "sugarss": "*",
+        "terser": "^5.4.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        },
+        "less": {
+          "optional": true
+        },
+        "lightningcss": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        },
+        "sass-embedded": {
+          "optional": true
+        },
+        "stylus": {
+          "optional": true
+        },
+        "sugarss": {
+          "optional": true
+        },
+        "terser": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vite-plugin-dts": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/vite-plugin-dts/-/vite-plugin-dts-3.9.1.tgz",
+      "integrity": "sha512-rVp2KM9Ue22NGWB8dNtWEr+KekN3rIgz1tWD050QnRGlriUCmaDwa7qA5zDEjbXg5lAXhYMSBJtx3q3hQIJZSg==",
+      "peer": true,
+      "dependencies": {
+        "@microsoft/api-extractor": "7.43.0",
+        "@rollup/pluginutils": "^5.1.0",
+        "@vue/language-core": "^1.8.27",
+        "debug": "^4.3.4",
+        "kolorist": "^1.8.0",
+        "magic-string": "^0.30.8",
+        "vue-tsc": "^1.8.27"
+      },
+      "engines": {
+        "node": "^14.18.0 || >=16.0.0"
+      },
+      "peerDependencies": {
+        "typescript": "*",
+        "vite": "*"
+      },
+      "peerDependenciesMeta": {
+        "vite": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vue-template-compiler": {
+      "version": "2.7.16",
+      "resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.7.16.tgz",
+      "integrity": "sha512-AYbUWAJHLGGQM7+cNTELw+KsOG9nl2CnSv467WobS5Cv9uk3wFcnr1Etsz2sEIHEZvw1U+o9mRlEO6QbZvUPGQ==",
+      "peer": true,
+      "dependencies": {
+        "de-indent": "^1.0.2",
+        "he": "^1.2.0"
+      }
+    },
+    "node_modules/vue-tsc": {
+      "version": "1.8.27",
+      "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-1.8.27.tgz",
+      "integrity": "sha512-WesKCAZCRAbmmhuGl3+VrdWItEvfoFIPXOvUJkjULi+x+6G/Dy69yO3TBRJDr9eUlmsNAwVmxsNZxvHKzbkKdg==",
+      "peer": true,
+      "dependencies": {
+        "@volar/typescript": "~1.11.1",
+        "@vue/language-core": "1.8.27",
+        "semver": "^7.5.4"
+      },
+      "bin": {
+        "vue-tsc": "bin/vue-tsc.js"
+      },
+      "peerDependencies": {
+        "typescript": "*"
+      }
+    },
     "node_modules/warning": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
@@ -6693,6 +8276,12 @@
         "node": ">=0.4.0"
       }
     },
+    "node_modules/yallist": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+      "peer": true
+    },
     "node_modules/yaml": {
       "version": "2.4.2",
       "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.4.2.tgz",
@@ -6716,6 +8305,44 @@
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
+    },
+    "node_modules/z-schema": {
+      "version": "5.0.5",
+      "resolved": "https://registry.npmjs.org/z-schema/-/z-schema-5.0.5.tgz",
+      "integrity": "sha512-D7eujBWkLa3p2sIpJA0d1pr7es+a7m0vFAnZLlCEKq/Ij2k0MLi9Br2UPxoxdYystm5K1yeBGzub0FlYUEWj2Q==",
+      "peer": true,
+      "dependencies": {
+        "lodash.get": "^4.4.2",
+        "lodash.isequal": "^4.5.0",
+        "validator": "^13.7.0"
+      },
+      "bin": {
+        "z-schema": "bin/z-schema"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      },
+      "optionalDependencies": {
+        "commander": "^9.4.1"
+      }
+    },
+    "node_modules/z-schema/node_modules/commander": {
+      "version": "9.5.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-9.5.0.tgz",
+      "integrity": "sha512-KRs7WVDKg86PWiuAqhDrAQnTXZKraVcCc6vFdL14qrZ/DcWwuRo7VoiYXalXO7S5GKpqYiVEwCbgFDfxNHKJBQ==",
+      "optional": true,
+      "peer": true,
+      "engines": {
+        "node": "^12.20.0 || >=14"
+      }
+    },
+    "node_modules/zod": {
+      "version": "3.23.8",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-3.23.8.tgz",
+      "integrity": "sha512-XBx9AXhXktjUqnepgTiE5flcKIYWi/rme0Eaj+5Y0lftuGBq+jyRu/md4WnuxqgP1ubdpNCsYEYPxrzVHD8d6g==",
+      "funding": {
+        "url": "https://github.com/sponsors/colinhacks"
+      }
     }
   }
 }
diff --git a/package.json b/package.json
index 813ec38..0302b5b 100644
--- a/package.json
+++ b/package.json
@@ -27,7 +27,8 @@
     "html2canvas": "^1.4.1",
     "html2pdf.js": "^0.10.2",
     "jspdf": "^2.5.1",
-    "next": "^14.2.3",
+    "lodash": "^4.17.21",
+    "next": "14.2.3",
     "next-cookie": "^2.8.0",
     "pdf-lib": "^1.17.1",
     "quill": "^2.0.2",
@@ -36,6 +37,9 @@
     "react": "^18.3.1",
     "react-bootstrap": "^2.10.4",
     "react-dom": "^18",
+    "react-helmet-async": "^2.0.5",
+    "react-hook-form": "^7.52.2",
+    "react-mui-sidebar": "^1.3.8",
     "react-quill": "^2.0.0",
     "react-router-dom": "^6.26.0",
     "react-toastify": "^10.0.5",
@@ -44,6 +48,7 @@
   "devDependencies": {
     "@types/file-saver": "^2.0.7",
     "@types/html-to-text": "^9.0.4",
+    "@types/lodash": "^4.17.7",
     "@types/node": "^20.14.14",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18",
diff --git a/public/logo.png b/public/logo.png
new file mode 100644
index 0000000000000000000000000000000000000000..553200fdc292aa051f7884b862c6d7704c559011
GIT binary patch
literal 43495
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
E17&)L)c^nh

literal 0
HcmV?d00001

diff --git a/src/api/auth.client.ts b/src/api/auth.client.ts
new file mode 100644
index 0000000..c894ff4
--- /dev/null
+++ b/src/api/auth.client.ts
@@ -0,0 +1,17 @@
+import { BaseClient } from "./base.client";
+import { LoginRequest, LoginResponse } from "./types/login";
+import { SignUpRequest } from "./types/signup";
+
+export class AuthClient extends BaseClient {
+  async login(loginRequest: LoginRequest) {
+    return this.post<LoginResponse>("auth/login", loginRequest);
+  }
+
+  async register(signUpRequest: SignUpRequest) {
+    return this.post<SignUpRequest>("auth/register", signUpRequest);
+  }
+
+  async logout() {
+    return this.post("auth/logout", {});
+  }
+}
diff --git a/src/api/base.client.ts b/src/api/base.client.ts
new file mode 100644
index 0000000..e372e0e
--- /dev/null
+++ b/src/api/base.client.ts
@@ -0,0 +1,121 @@
+interface ErrorResponse {
+  statusCode: number;
+  message: string;
+  error: string;
+}
+
+export interface SuccessResponse<T> {
+  data: T;
+}
+
+type ClientResponse<T> = SuccessResponse<T> | ErrorResponse;
+
+class ApiError extends Error {
+  statusCode: number;
+  error: string;
+
+  constructor(statusCode: number, message: string, error: string) {
+    super(message);
+    this.statusCode = statusCode;
+    this.error = error;
+    this.name = "ApiError";
+  }
+}
+
+export class BaseClient {
+  base: string | undefined;
+
+  constructor() {
+    this.base = process.env.NEXT_PUBLIC_SERVER_URL;
+  }
+
+  private async request<T>(
+    endpoint: string,
+    method: "GET" | "POST" | "PUT" | "DELETE",
+    body?: any,
+    options: RequestInit = {}
+  ): Promise<ClientResponse<T>> {
+    if (!this.base) {
+      throw new Error("Base URL is not defined");
+    }
+
+    const fetchOptions: RequestInit = {
+      method,
+      headers: {
+        "Content-Type": "application/json",
+        ...options.headers,
+      },
+      credentials: "include",
+      ...options,
+    };
+
+    if (method !== "GET" && method !== "DELETE") {
+      fetchOptions.body = body != null ? JSON.stringify(body) : undefined;
+    }
+
+    try {
+      const response = await fetch(`${this.base}/${endpoint}`, fetchOptions);
+
+      if (!response.ok) {
+        const errorData: ErrorResponse = await response.json();
+
+        throw new ApiError(
+          errorData.statusCode,
+          errorData.message,
+          errorData?.error
+        );
+      }
+
+      const contentType = response.headers.get("Content-Type");
+      if (contentType && contentType.includes("application/json")) {
+        const data: T = await response.json();
+        return {
+          data,
+        };
+      } else {
+        return {
+          data: {} as T,
+        };
+      }
+    } catch (error) {
+      console.log("error", error);
+
+      console.error("An error occurred", error);
+      if (error instanceof ApiError) {
+        throw error;
+      } else {
+        throw new Error("An unexpected error occurred");
+      }
+    }
+  }
+
+  protected async get<T>(
+    endpoint: string,
+    options: RequestInit = {}
+  ): Promise<ClientResponse<T>> {
+    return this.request<T>(endpoint, "GET", options);
+  }
+
+  protected async post<T>(
+    endpoint: string,
+    body: any,
+    options: RequestInit = {}
+  ): Promise<ClientResponse<T>> {
+    return this.request<T>(endpoint, "POST", body, options);
+  }
+
+  protected async put<T>(
+    endpoint: string,
+    body: any,
+    options: RequestInit = {}
+  ): Promise<ClientResponse<T>> {
+    return this.request<T>(endpoint, "PUT", body, options);
+  }
+
+  protected async delete<T>(
+    endpoint: string,
+    options: RequestInit = {}
+  ): Promise<ClientResponse<T>> {
+    return this.request<T>(endpoint, "DELETE", options);
+  }
+}
diff --git a/src/app/(admin)/new_dashboard/components/PageContainer/index.tsx b/src/app/(admin)/new_dashboard/components/PageContainer/index.tsx
new file mode 100644
index 0000000..253ee04
--- /dev/null
+++ b/src/app/(admin)/new_dashboard/components/PageContainer/index.tsx
@@ -0,0 +1,21 @@
+import { Helmet, HelmetProvider } from "react-helmet-async";
+
+type Props = {
+  description?: string;
+  children: JSX.Element | JSX.Element[];
+  title?: string;
+};
+
+const PageContainer = ({ title, description, children }: Props) => (
+  <HelmetProvider>
+    <div>
+      <Helmet>
+        <title>{title}</title>
+        <meta name="description" content={description} />
+      </Helmet>
+      {children}
+    </div>
+  </HelmetProvider>
+);
+
+export default PageContainer;
diff --git a/src/app/(admin)/new_dashboard/components/sidebar/NavGroup/index.tsx b/src/app/(admin)/new_dashboard/components/sidebar/NavGroup/index.tsx
new file mode 100644
index 0000000..81e060f
--- /dev/null
+++ b/src/app/(admin)/new_dashboard/components/sidebar/NavGroup/index.tsx
@@ -0,0 +1,32 @@
+import PropTypes from "prop-types";
+import { ListSubheader, styled, Theme } from "@mui/material";
+
+type NavGroup = {
+  navlabel?: boolean;
+  subheader?: string;
+};
+
+interface ItemType {
+  item: NavGroup;
+}
+
+const NavGroup = ({ item }: ItemType) => {
+  const ListSubheaderStyle = styled((props: Theme | any) => (
+    <ListSubheader disableSticky {...props} />
+  ))(({ theme }) => ({
+    ...theme.typography.overline,
+    fontWeight: "700",
+    marginTop: theme.spacing(3),
+    marginBottom: theme.spacing(0),
+    color: theme.palette.text.primary,
+    lineHeight: "26px",
+    padding: "3px 12px",
+  }));
+  return <ListSubheaderStyle>{item.subheader}</ListSubheaderStyle>;
+};
+
+NavGroup.propTypes = {
+  item: PropTypes.object,
+};
+
+export default NavGroup;
diff --git a/src/app/(admin)/new_dashboard/components/sidebar/NavItem/index.tsx b/src/app/(admin)/new_dashboard/components/sidebar/NavItem/index.tsx
new file mode 100644
index 0000000..c075ad4
--- /dev/null
+++ b/src/app/(admin)/new_dashboard/components/sidebar/NavItem/index.tsx
@@ -0,0 +1,100 @@
+import React from "react";
+import {
+  ListItemIcon,
+  ListItem,
+  List,
+  styled,
+  ListItemText,
+  useTheme,
+  ListItemButton,
+} from "@mui/material";
+import Link from "next/link";
+
+type NavGroup = {
+  [x: string]: any;
+  id?: string;
+  navlabel?: boolean;
+  subheader?: string;
+  title?: string;
+  icon?: any;
+  href?: any;
+  onClick?: () => void; // Adjusted type to a function without event
+  disabled?: boolean;
+  external?: boolean;
+};
+
+interface ItemType {
+  item: NavGroup;
+  hideMenu?: any;
+  level?: number | any;
+  pathDirect: string;
+}
+
+const NavItem = ({ item, level, pathDirect }: ItemType) => {
+  const Icon = item.icon;
+  const theme = useTheme();
+  const itemIcon = <Icon stroke={1.5} size="1.3rem" />;
+
+  const ListItemStyled = styled(ListItem)(() => ({
+    padding: 0,
+    ".MuiButtonBase-root": {
+      whiteSpace: "nowrap",
+      marginBottom: "2px",
+      padding: "8px 10px",
+      borderRadius: "8px",
+      backgroundColor: level > 1 ? "transparent !important" : "inherit",
+      color: theme.palette.text.secondary,
+      paddingLeft: "10px",
+      "&:hover": {
+        backgroundColor: theme.palette.primary.light,
+        color: theme.palette.primary.main,
+      },
+      "&.Mui-selected": {
+        color: "white",
+        backgroundColor: theme.palette.primary.main,
+        "&:hover": {
+          backgroundColor: theme.palette.primary.main,
+          color: "white",
+        },
+      },
+    },
+  }));
+
+  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+    if (item.onClick) {
+      e.preventDefault(); // Prevent default navigation
+      item.onClick();
+    }
+  };
+
+  return (
+    <List component="div" disablePadding key={item.id}>
+      <ListItemStyled>
+        <ListItemButton
+          // Use a regular button if `onClick` is present, otherwise use `Link`
+          component={item.onClick ? "button" : Link}
+          onClick={handleClick}
+          href={item.href}
+          disabled={item.disabled}
+          selected={pathDirect === item.href}
+          target={item.external ? "_blank" : ""}
+        >
+          <ListItemIcon
+            sx={{
+              minWidth: "36px",
+              p: "3px 0",
+              color: "inherit",
+            }}
+          >
+            {itemIcon}
+          </ListItemIcon>
+          <ListItemText>
+            <>{item.title}</>
+          </ListItemText>
+        </ListItemButton>
+      </ListItemStyled>
+    </List>
+  );
+};
+
+export default NavItem;
diff --git a/src/app/(admin)/new_dashboard/components/sidebar/Sidebar.tsx b/src/app/(admin)/new_dashboard/components/sidebar/Sidebar.tsx
new file mode 100644
index 0000000..117583d
--- /dev/null
+++ b/src/app/(admin)/new_dashboard/components/sidebar/Sidebar.tsx
@@ -0,0 +1,76 @@
+import { Box, Drawer } from "@mui/material";
+import { Sidebar, Logo } from "react-mui-sidebar";
+import SidebarItems from "./SidebarItems";
+
+interface ItemType {
+  isSidebarOpen: boolean;
+}
+
+const DashboardSidebar = ({ isSidebarOpen }: ItemType) => {
+  const sidebarWidth = "270px";
+
+  // Custom CSS for short scrollbar
+  const scrollbarStyles = {
+    "&::-webkit-scrollbar": {
+      width: "7px",
+    },
+    "&::-webkit-scrollbar-thumb": {
+      backgroundColor: "#eff2f7",
+      borderRadius: "15px",
+    },
+  };
+
+  return (
+    <Box
+      sx={{
+        width: sidebarWidth,
+        flexShrink: 0,
+      }}
+    >
+      {/* ------------------------------------------- */}
+      {/* Sidebar*/}
+      {/* ------------------------------------------- */}
+      <Drawer
+        anchor="left"
+        open={isSidebarOpen}
+        variant="permanent"
+        PaperProps={{
+          sx: {
+            boxSizing: "border-box",
+            ...scrollbarStyles,
+          },
+        }}
+      >
+        {/* ------------------------------------------- */}
+        {/* Sidebar Box */}
+        {/* ------------------------------------------- */}
+        <Box
+          sx={{
+            height: "100%",
+          }}
+        >
+          <Sidebar
+            width={"270px"}
+            collapsewidth="80px"
+            open={isSidebarOpen}
+            themeColor="#5d87ff"
+            themeSecondaryColor="#49beff"
+            showProfile={false}
+          >
+            {/* ------------------------------------------- */}
+            {/* Logo */}
+            {/* ------------------------------------------- */}
+            <Logo img="/logo.png" />
+            <Box>
+              {/* ------------------------------------------- */}
+              {/* Sidebar Items */}
+              {/* ------------------------------------------- */}
+              <SidebarItems />
+            </Box>
+          </Sidebar>
+        </Box>
+      </Drawer>
+    </Box>
+  );
+};
+export default DashboardSidebar;
diff --git a/src/app/(admin)/new_dashboard/components/sidebar/SidebarItems.tsx b/src/app/(admin)/new_dashboard/components/sidebar/SidebarItems.tsx
new file mode 100644
index 0000000..d9ac27e
--- /dev/null
+++ b/src/app/(admin)/new_dashboard/components/sidebar/SidebarItems.tsx
@@ -0,0 +1,34 @@
+import { useMenuItems } from "./hooks/useMenuItems";
+import { usePathname } from "next/navigation";
+import { Box, List } from "@mui/material";
+import NavItem from "./NavItem";
+import NavGroup from "./NavGroup";
+
+const SidebarItems = () => {
+  const pathname = usePathname();
+  const pathDirect = pathname;
+  const { menuItems: Menuitems } = useMenuItems();
+  return (
+    <Box sx={{ px: 3 }}>
+      <List sx={{ pt: 0 }} className="sidebarNav" component="div">
+        {Menuitems.map((item) => {
+          // {/********SubHeader**********/}
+          if (item.subheader) {
+            return <NavGroup item={item} key={item.subheader} />;
+
+            // {/********If Sub Menu**********/}
+          } else {
+            return (
+              <NavItem
+                item={item}
+                key={item.id}
+                pathDirect={pathDirect ?? ""}
+              />
+            );
+          }
+        })}
+      </List>
+    </Box>
+  );
+};
+export default SidebarItems;
diff --git a/src/app/(admin)/new_dashboard/components/sidebar/hooks/useMenuItems.ts b/src/app/(admin)/new_dashboard/components/sidebar/hooks/useMenuItems.ts
new file mode 100644
index 0000000..1df65c1
--- /dev/null
+++ b/src/app/(admin)/new_dashboard/components/sidebar/hooks/useMenuItems.ts
@@ -0,0 +1,60 @@
+import DashboardIcon from "@mui/icons-material/Dashboard";
+import LogoutIcon from "@mui/icons-material/Logout";
+import { uniqueId } from "lodash";
+import ManageAccountsIcon from "@mui/icons-material/ManageAccounts";
+import AutoStoriesIcon from "@mui/icons-material/AutoStories";
+import { AuthClient } from "@/api/auth.client";
+import { useRouter } from "next/navigation";
+
+const authClient = new AuthClient();
+
+export const useMenuItems = () => {
+  const router = useRouter();
+
+  const handleLogout = async () => {
+    await authClient.logout();
+    router.push("/login");
+  };
+
+  const menuItems = [
+    {
+      navlabel: true,
+      subheader: "Home",
+    },
+    {
+      id: uniqueId(),
+      title: "Dashboard",
+      icon: DashboardIcon,
+      href: "/new_dashboard",
+    },
+    {
+      navlabel: true,
+      subheader: "Support",
+    },
+    {
+      id: uniqueId(),
+      title: "Guides",
+      icon: AutoStoriesIcon,
+      href: "/new_dashboard/guides",
+    },
+    {
+      navlabel: true,
+      subheader: "Auth",
+    },
+    {
+      id: uniqueId(),
+      title: "Logout",
+      icon: LogoutIcon,
+      onClick: handleLogout,
+      href: "#",
+    },
+    {
+      id: uniqueId(),
+      title: "Manage Accounts",
+      icon: ManageAccountsIcon,
+      href: "#",
+    },
+  ];
+
+  return { menuItems };
+};
diff --git a/src/app/(admin)/new_dashboard/layout.tsx b/src/app/(admin)/new_dashboard/layout.tsx
new file mode 100644
index 0000000..1e01ee6
--- /dev/null
+++ b/src/app/(admin)/new_dashboard/layout.tsx
@@ -0,0 +1,57 @@
+"use client";
+import { styled, Container, Box } from "@mui/material";
+import React, { useState } from "react";
+import Sidebar from "./components/sidebar/Sidebar";
+
+const MainWrapper = styled("div")(() => ({
+  display: "flex",
+  minHeight: "100vh",
+  width: "100%",
+}));
+
+const PageWrapper = styled("div")(() => ({
+  display: "flex",
+  flexGrow: 1,
+  paddingBottom: "60px",
+  flexDirection: "column",
+  zIndex: 1,
+  backgroundColor: "transparent",
+}));
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const [isSidebarOpen, setSidebarOpen] = useState(true);
+  return (
+    <MainWrapper className="mainwrapper">
+      {/* ------------------------------------------- */}
+      {/* Sidebar */}
+      {/* ------------------------------------------- */}
+      <Sidebar isSidebarOpen={isSidebarOpen} />
+      {/* ------------------------------------------- */}
+      {/* Main Wrapper */}
+      {/* ------------------------------------------- */}
+      <PageWrapper className="page-wrapper">
+        {/* ------------------------------------------- */}
+        {/* PageContent */}
+        {/* ------------------------------------------- */}
+        <Container
+          sx={{
+            paddingTop: "20px",
+            maxWidth: "1200px",
+          }}
+        >
+          {/* ------------------------------------------- */}
+          {/* Page Route */}
+          {/* ------------------------------------------- */}
+          <Box sx={{ minHeight: "calc(100vh - 170px)" }}>{children}</Box>
+          {/* ------------------------------------------- */}
+          {/* End Page */}
+          {/* ------------------------------------------- */}
+        </Container>
+      </PageWrapper>
+    </MainWrapper>
+  );
+}
diff --git a/src/app/(admin)/new_dashboard/page.tsx b/src/app/(admin)/new_dashboard/page.tsx
new file mode 100644
index 0000000..bb977b8
--- /dev/null
+++ b/src/app/(admin)/new_dashboard/page.tsx
@@ -0,0 +1,84 @@
+"use client";
+
+import {
+  Box,
+  Paper,
+  List,
+  ListItem,
+  ListItemText,
+  Typography,
+  TextField,
+  IconButton,
+  Divider,
+  Grid,
+} from "@mui/material";
+import SendIcon from "@mui/icons-material/Send";
+import { useState } from "react";
+import PageContainer from "./components/PageContainer";
+
+const Page = () => {
+  const [messages, setMessages] = useState([
+    { sender: "User 1", text: "Hello!", timestamp: "10:00 AM" },
+    { sender: "User 2", text: "Hi there!", timestamp: "10:01 AM" },
+  ]);
+  const [newMessage, setNewMessage] = useState("");
+
+  const handleSend = () => {
+    if (newMessage.trim()) {
+      const newMessageObj = {
+        sender: "User 1",
+        text: newMessage,
+        timestamp: new Date().toLocaleTimeString(),
+      };
+      setMessages([...messages, newMessageObj]);
+      setNewMessage("");
+    }
+  };
+
+  return (
+    <PageContainer title="Dashboard">
+      <Paper elevation={3} sx={{ maxWidth: 600, margin: "auto", padding: 2 }}>
+        <Grid container direction="column" sx={{ height: "500px" }}>
+          {/* Message List */}
+          <Grid item xs={10} sx={{ overflowY: "auto" }}>
+            <List>
+              {messages.map((msg, index) => (
+                <ListItem key={index}>
+                  <ListItemText
+                    primary={
+                      <Box>
+                        <Typography variant="body2" color="textSecondary">
+                          {msg.sender} • {msg.timestamp}
+                        </Typography>
+                        <Typography variant="body1">{msg.text}</Typography>
+                      </Box>
+                    }
+                  />
+                </ListItem>
+              ))}
+            </List>
+          </Grid>
+          <Divider />
+          {/* Input and Send Button */}
+          <Grid item xs={2}>
+            <Box display="flex" alignItems="center" mt={1}>
+              <TextField
+                fullWidth
+                variant="outlined"
+                size="small"
+                placeholder="Type a message..."
+                value={newMessage}
+                onChange={(e) => setNewMessage(e.target.value)}
+              />
+              <IconButton color="primary" onClick={handleSend}>
+                <SendIcon />
+              </IconButton>
+            </Box>
+          </Grid>
+        </Grid>
+      </Paper>
+    </PageContainer>
+  );
+};
+
+export default Page;
diff --git a/src/app/(public)/login/page.tsx b/src/app/(public)/login/page.tsx
new file mode 100644
index 0000000..e193ccd
--- /dev/null
+++ b/src/app/(public)/login/page.tsx
@@ -0,0 +1,123 @@
+"use client";
+
+import Avatar from "@mui/material/Avatar";
+import TextField from "@mui/material/TextField";
+import Link from "@mui/material/Link";
+import Paper from "@mui/material/Paper";
+import Box from "@mui/material/Box";
+import Grid from "@mui/material/Grid";
+import LockOutlinedIcon from "@mui/icons-material/LockOutlined";
+import Typography from "@mui/material/Typography";
+import { Alert } from "@mui/material";
+import useLoginForm from "./hooks/useLoginForm";
+import { LoadingButton } from "@mui/lab";
+
+const Login = () => {
+  const { register, handleSubmit, errors, isValid, isError, error, isPending } =
+    useLoginForm();
+
+  return (
+    <Grid container component="main" sx={{ height: "100vh" }}>
+      <Grid
+        item
+        xs={false}
+        sm={4}
+        md={7}
+        sx={{
+          backgroundImage: 'url("https://i.imgur.com/YNj4zoE.png")',
+          backgroundColor: (t) =>
+            t.palette.mode === "light"
+              ? t.palette.grey[50]
+              : t.palette.grey[900],
+          backgroundSize: "cover",
+          backgroundPosition: "left",
+        }}
+      />
+      <Grid item xs={12} sm={8} md={5} component={Paper} elevation={6} square>
+        <Box
+          sx={{
+            my: 8,
+            mx: 4,
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+          }}
+        >
+          <Avatar sx={{ m: 1, bgcolor: "secondary.main" }}>
+            <LockOutlinedIcon />
+          </Avatar>
+          <Typography component="h1" variant="h5">
+            Sign in
+          </Typography>
+          {isError && (
+            <Alert severity="error" sx={{ mt: 2, alignItems: 'center' }}>
+              {error?.message}
+            </Alert>
+          )}
+          <Box
+            component="form"
+            noValidate
+            onSubmit={handleSubmit}
+            sx={{ mt: 1 }}
+          >
+            <TextField
+              margin="normal"
+              required
+              fullWidth
+              id="username"
+              label="Username"
+              autoComplete="username"
+              autoFocus
+              {...register("username")}
+              error={!!errors.username}
+              helperText={errors.username?.message}
+              sx={{
+                "& .MuiFormHelperText-root.Mui-error": {
+                  position: "absolute",
+                  top: "100%",
+                },
+              }}
+            />
+            <TextField
+              margin="normal"
+              required
+              fullWidth
+              label="Password"
+              type="password"
+              id="password"
+              autoComplete="current-password"
+              {...register("password")}
+              error={!!errors.password}
+              helperText={errors.password?.message}
+              sx={{
+                "& .MuiFormHelperText-root.Mui-error": {
+                  position: "absolute",
+                  top: "100%",
+                },
+              }}
+            />
+            <LoadingButton
+              type="submit"
+              loading={isPending}
+              fullWidth
+              disabled={!isValid}
+              variant="contained"
+              sx={{ mt: 3, mb: 2 }}
+            >
+              Sign In
+            </LoadingButton>
+            <Grid container>
+              <Grid item>
+                <Link href="signup" variant="body2">
+                  {"Don't have an account? Sign Up"}
+                </Link>
+              </Grid>
+            </Grid>
+          </Box>
+        </Box>
+      </Grid>
+    </Grid>
+  );
+};
+
+export default Login;
diff --git a/src/app/(public)/signup/page.tsx b/src/app/(public)/signup/page.tsx
new file mode 100644
index 0000000..5726aba
--- /dev/null
+++ b/src/app/(public)/signup/page.tsx
@@ -0,0 +1,124 @@
+"use client";
+
+import Avatar from "@mui/material/Avatar";
+import Button from "@mui/material/Button";
+import TextField from "@mui/material/TextField";
+import Link from "@mui/material/Link";
+import Grid from "@mui/material/Grid";
+import Box from "@mui/material/Box";
+import LockOutlinedIcon from "@mui/icons-material/LockOutlined";
+import Typography from "@mui/material/Typography";
+import Container from "@mui/material/Container";
+import { Paper, Alert } from "@mui/material";
+import useSignUpForm from "./hooks/useSignUpForm";
+import { LoadingButton } from "@mui/lab";
+
+const SignUp = () => {
+  const { register, handleSubmit, errors, isValid, isError, error, isPending } =
+    useSignUpForm();
+
+  return (
+    <Container component={Paper} square elevation={6} maxWidth="xs">
+      <Box
+        sx={{
+          marginTop: 8,
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          padding: 3,
+        }}
+      >
+        <Avatar sx={{ m: 1, bgcolor: "secondary.main" }}>
+          <LockOutlinedIcon />
+        </Avatar>
+        <Typography component="h1" variant="h5">
+          Sign up
+        </Typography>
+        {isError && (
+          <Alert severity="error" sx={{ mt: 2, alignItems: "center" }}>
+            {error?.message}
+          </Alert>
+        )}
+        <Box component="form" noValidate onSubmit={handleSubmit} sx={{ mt: 3 }}>
+          <Grid container spacing={4}>
+            <Grid item xs={12}>
+              <TextField
+                autoComplete="username"
+                required
+                fullWidth
+                id="username"
+                label="Username"
+                autoFocus
+                {...register("username")}
+                error={!!errors.username}
+                helperText={errors.username?.message}
+                sx={{
+                  "& .MuiFormHelperText-root.Mui-error": {
+                    position: "absolute",
+                    top: "100%",
+                  },
+                }}
+              />
+            </Grid>
+            <Grid item xs={12}>
+              <TextField
+                required
+                fullWidth
+                id="email"
+                label="Email Address"
+                autoComplete="email"
+                {...register("email")}
+                error={!!errors.email}
+                helperText={errors.email?.message}
+                sx={{
+                  "& .MuiFormHelperText-root.Mui-error": {
+                    position: "absolute",
+                    top: "100%",
+                  },
+                }}
+              />
+            </Grid>
+            <Grid item xs={12}>
+              <TextField
+                required
+                fullWidth
+                label="Password"
+                type="password"
+                id="password"
+                autoComplete="new-password"
+                {...register("password")}
+                error={!!errors.password}
+                helperText={errors.password?.message}
+                sx={{
+                  "& .MuiFormHelperText-root.Mui-error": {
+                    position: "absolute",
+                    top: "100%",
+                  },
+                }}
+              />
+            </Grid>
+          </Grid>
+          <LoadingButton
+            type="submit"
+            loading={isPending}
+            fullWidth
+            variant="contained"
+            sx={{ mt: 4, mb: 2 }}
+            disabled={!isValid || isPending}
+          >
+            Sign Up
+          </LoadingButton>
+          <Grid container justifyContent="flex-end">
+            <Grid item>
+              <Link href="login" variant="body2">
+                Already have an account? Sign in
+              </Link>
+            </Grid>
+          </Grid>
+        </Box>
+      </Box>
+    </Container>
+  );
+};
+
+export default SignUp;
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index e7dc626..068c902 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,13 +1,9 @@
-import type { Metadata } from "next";
-import { Inter } from "next/font/google";
-import "./globals.css";
-
-const inter = Inter({ subsets: ["latin"] });
+"use client";
 
-export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
-};
+import { baselightTheme } from "@/util/theme";
+import "./globals.css";
+import { Providers } from "./providers";
+import { CssBaseline, ThemeProvider } from "@mui/material";
 
 export default function RootLayout({
   children,
@@ -16,8 +12,11 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
-      <body style={{ height: "100vh" }} className={inter.className}>
-        {children}
+      <body style={{ height: "100vh" }}>
+        <ThemeProvider theme={baselightTheme}>
+          <CssBaseline />
+          <Providers>{children}</Providers>
+        </ThemeProvider>
       </body>
     </html>
   );
diff --git a/src/util/theme.ts b/src/util/theme.ts
new file mode 100644
index 0000000..a3772f5
--- /dev/null
+++ b/src/util/theme.ts
@@ -0,0 +1,145 @@
+import { createTheme } from "@mui/material/styles";
+import { Plus_Jakarta_Sans } from "next/font/google";
+
+export const plus = Plus_Jakarta_Sans({
+  weight: ["300", "400", "500", "600", "700"],
+  subsets: ["latin"],
+  display: "swap",
+  fallback: ["Helvetica", "Arial", "sans-serif"],
+});
+
+const baselightTheme = createTheme({
+  direction: "ltr",
+  palette: {
+    primary: {
+      main: "#5D87FF",
+      light: "#ECF2FF",
+      dark: "#4570EA",
+    },
+    secondary: {
+      main: "#49BEFF",
+      light: "#E8F7FF",
+      dark: "#23afdb",
+    },
+    success: {
+      main: "#13DEB9",
+      light: "#E6FFFA",
+      dark: "#02b3a9",
+      contrastText: "#ffffff",
+    },
+    info: {
+      main: "#539BFF",
+      light: "#EBF3FE",
+      dark: "#1682d4",
+      contrastText: "#ffffff",
+    },
+    error: {
+      main: "#FA896B",
+      light: "#FDEDE8",
+      dark: "#f3704d",
+      contrastText: "#ffffff",
+    },
+    warning: {
+      main: "#FFAE1F",
+      light: "#FEF5E5",
+      dark: "#ae8e59",
+      contrastText: "#ffffff",
+    },
+    grey: {
+      100: "#F2F6FA",
+      200: "#EAEFF4",
+      300: "#DFE5EF",
+      400: "#7C8FAC",
+      500: "#5A6A85",
+      600: "#2A3547",
+    },
+    text: {
+      primary: "#2A3547",
+      secondary: "#5A6A85",
+    },
+    action: {
+      disabledBackground: "rgba(73,82,88,0.12)",
+      hoverOpacity: 0.02,
+      hover: "#f6f9fc",
+    },
+    divider: "#e5eaef",
+  },
+  typography: {
+    fontFamily: plus.style.fontFamily,
+    h1: {
+      fontWeight: 600,
+      fontSize: "2.25rem",
+      lineHeight: "2.75rem",
+      fontFamily: plus.style.fontFamily,
+    },
+    h2: {
+      fontWeight: 600,
+      fontSize: "1.875rem",
+      lineHeight: "2.25rem",
+      fontFamily: plus.style.fontFamily,
+    },
+    h3: {
+      fontWeight: 600,
+      fontSize: "1.5rem",
+      lineHeight: "1.75rem",
+      fontFamily: plus.style.fontFamily,
+    },
+    h4: {
+      fontWeight: 600,
+      fontSize: "1.3125rem",
+      lineHeight: "1.6rem",
+    },
+    h5: {
+      fontWeight: 600,
+      fontSize: "1.125rem",
+      lineHeight: "1.6rem",
+    },
+    h6: {
+      fontWeight: 600,
+      fontSize: "1rem",
+      lineHeight: "1.2rem",
+    },
+    button: {
+      textTransform: "capitalize",
+      fontWeight: 400,
+    },
+    body1: {
+      fontSize: "0.875rem",
+      fontWeight: 400,
+      lineHeight: "1.334rem",
+    },
+    body2: {
+      fontSize: "0.75rem",
+      letterSpacing: "0rem",
+      fontWeight: 400,
+      lineHeight: "1rem",
+    },
+    subtitle1: {
+      fontSize: "0.875rem",
+      fontWeight: 400,
+    },
+    subtitle2: {
+      fontSize: "0.875rem",
+      fontWeight: 400,
+    },
+  },
+  components: {
+    MuiCssBaseline: {
+      styleOverrides: {
+        ".MuiPaper-elevation9, .MuiPopover-root .MuiPaper-elevation": {
+          boxShadow:
+            "rgb(145 158 171 / 30%) 0px 0px 2px 0px, rgb(145 158 171 / 12%) 0px 12px 24px -4px !important",
+        },
+      },
+    },
+    MuiCard: {
+      styleOverrides: {
+        root: {
+          borderRadius: "7px",
+        },
+      },
+    },
+  },
+});
+
+export { baselightTheme };

From 919d269d302e38eb14745114d5f9846f70ec51ac Mon Sep 17 00:00:00 2001
From: nitzanto <nitzan16001@gmail.com>
Date: Thu, 15 Aug 2024 23:29:02 +0300
Subject: [PATCH 019/242] update package json

---
 package.json | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/package.json b/package.json
index d6ec464..a0c631e 100644
--- a/package.json
+++ b/package.json
@@ -9,8 +9,6 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@emotion/react": "^11.13.0",
-    "@emotion/styled": "^11.13.0",
     "@emotion/react": "^11.13.0",
     "@emotion/styled": "^11.13.0",
     "@fortawesome/fontawesome-svg-core": "^6.5.2",
@@ -57,9 +55,6 @@
     "@types/react": "^18",
     "@types/file-saver": "^2.0.7",
     "@types/html-to-text": "^9.0.4",
-    "@types/lodash": "^4.17.7",
-    "@types/node": "^20.14.14",
-    "@types/react": "^18.3.3",
     "@types/react-dom": "^18",
     "eslint": "^8",
     "eslint-config-next": "14.2.3",

From 599e6fdd775bf58eb3b5d75beb1879a79339b9ad Mon Sep 17 00:00:00 2001
From: nitzanto <nitzan16001@gmail.com>
Date: Fri, 16 Aug 2024 02:10:49 +0300
Subject: [PATCH 020/242] feature: new guide page & chat page

---
 .../new_dashboard/components/Card/index.tsx   |  70 ++++++++
 .../components/sidebar/NavItem/index.tsx      |   1 -
 .../guides/hooks/useGuideItems.ts             |  41 +++++
 src/app/(admin)/new_dashboard/guides/page.tsx | 106 ++++++++++++
 src/app/(admin)/new_dashboard/layout.tsx      |   4 +-
 src/app/(admin)/new_dashboard/page.tsx        | 152 +++++++++++++++---
 src/util/theme.ts                             |  13 ++
 7 files changed, 357 insertions(+), 30 deletions(-)
 create mode 100644 src/app/(admin)/new_dashboard/components/Card/index.tsx
 create mode 100644 src/app/(admin)/new_dashboard/guides/hooks/useGuideItems.ts
 create mode 100644 src/app/(admin)/new_dashboard/guides/page.tsx

diff --git a/src/app/(admin)/new_dashboard/components/Card/index.tsx b/src/app/(admin)/new_dashboard/components/Card/index.tsx
new file mode 100644
index 0000000..ee80fdf
--- /dev/null
+++ b/src/app/(admin)/new_dashboard/components/Card/index.tsx
@@ -0,0 +1,70 @@
+import { Card, CardContent, Typography, Stack, Box } from "@mui/material";
+
+type Props = {
+  title?: string;
+  subtitle?: string;
+  action?: JSX.Element | any;
+  footer?: JSX.Element;
+  cardheading?: string | JSX.Element;
+  headtitle?: string | JSX.Element;
+  headsubtitle?: string | JSX.Element;
+  children?: JSX.Element;
+  middlecontent?: string | JSX.Element;
+};
+
+const DashboardCard = ({
+  title,
+  subtitle,
+  children,
+  action,
+  footer,
+  cardheading,
+  headtitle,
+  headsubtitle,
+  middlecontent,
+}: Props) => {
+  return (
+    <Card sx={{ padding: 0 }} elevation={9} variant={undefined}>
+      {cardheading ? (
+        <CardContent>
+          <Typography variant="h5">{headtitle}</Typography>
+          <Typography variant="subtitle2" color="textSecondary">
+            {headsubtitle}
+          </Typography>
+        </CardContent>
+      ) : (
+        <CardContent sx={{ p: "30px" }}>
+          {title ? (
+            <Stack
+              direction="row"
+              spacing={2}
+              justifyContent="space-between"
+              alignItems={"center"}
+              mb={3}
+            >
+              <Box>
+                {title ? <Typography variant="h5">{title}</Typography> : ""}
+
+                {subtitle ? (
+                  <Typography variant="subtitle2" color="textSecondary">
+                    {subtitle}
+                  </Typography>
+                ) : (
+                  ""
+                )}
+              </Box>
+              {action}
+            </Stack>
+          ) : null}
+
+          {children}
+        </CardContent>
+      )}
+
+      {middlecontent}
+      {footer}
+    </Card>
+  );
+};
+
+export default DashboardCard;
diff --git a/src/app/(admin)/new_dashboard/components/sidebar/NavItem/index.tsx b/src/app/(admin)/new_dashboard/components/sidebar/NavItem/index.tsx
index c075ad4..d30db27 100644
--- a/src/app/(admin)/new_dashboard/components/sidebar/NavItem/index.tsx
+++ b/src/app/(admin)/new_dashboard/components/sidebar/NavItem/index.tsx
@@ -1,4 +1,3 @@
-import React from "react";
 import {
   ListItemIcon,
   ListItem,
diff --git a/src/app/(admin)/new_dashboard/guides/hooks/useGuideItems.ts b/src/app/(admin)/new_dashboard/guides/hooks/useGuideItems.ts
new file mode 100644
index 0000000..738f698
--- /dev/null
+++ b/src/app/(admin)/new_dashboard/guides/hooks/useGuideItems.ts
@@ -0,0 +1,41 @@
+import { useState } from "react";
+
+type GuideItem = {
+  title: string;
+  issue: string;
+  likes: number;
+  dislikes: number;
+};
+
+const useGuideItems = () => {
+  const [guideItems] = useState<GuideItem[]>([
+    {
+      title: "How to startup the computer",
+      issue: "Computer not starting",
+      likes: 100,
+      dislikes: 5,
+    },
+    {
+      title: "Fixing WIFI issues",
+      issue: "Wi-Fi connectivity issues",
+      likes: 75,
+      dislikes: 12,
+    },
+    {
+      title: "How to fix Installion Errors in Mac",
+      issue: "Software installation errors",
+      likes: 150,
+      dislikes: 7,
+    },
+    {
+      title: "Fixing slow system startup",
+      issue: "Slow system performance",
+      likes: 90,
+      dislikes: 10,
+    },
+  ]);
+
+  return { guideItems };
+};
+
+export default useGuideItems;
diff --git a/src/app/(admin)/new_dashboard/guides/page.tsx b/src/app/(admin)/new_dashboard/guides/page.tsx
new file mode 100644
index 0000000..75ea6c4
--- /dev/null
+++ b/src/app/(admin)/new_dashboard/guides/page.tsx
@@ -0,0 +1,106 @@
+"use client";
+import DashboardCard from "../components/Card";
+import useGuideItems from "./hooks/useGuideItems";
+import {
+  Card,
+  CardContent,
+  Typography,
+  Grid,
+  IconButton,
+  Box,
+  TextField,
+  InputAdornment,
+} from "@mui/material";
+import ThumbUpIcon from "@mui/icons-material/ThumbUp";
+import ThumbDownIcon from "@mui/icons-material/ThumbDown";
+import SupportIcon from "@mui/icons-material/Support";
+import { useTheme } from "@mui/material/styles";
+import PageContainer from "../components/PageContainer";
+import { useState } from "react";
+import SearchIcon from "@mui/icons-material/Search";
+
+const Page = () => {
+  const { guideItems } = useGuideItems();
+  const theme = useTheme();
+
+  const [searchQuery, setSearchQuery] = useState("");
+
+  const filteredGuides = guideItems.filter((guide) =>
+    guide.title.toLowerCase().includes(searchQuery.toLowerCase())
+  );
+
+  return (
+    <PageContainer title="Guides">
+      <DashboardCard title="Guides">
+        <Box>
+          <Box mb={2}>
+            <TextField
+              fullWidth
+              label="Search Guides"
+              variant="outlined"
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              InputProps={{
+                startAdornment: (
+                  <InputAdornment position="start">
+                    <SearchIcon />
+                  </InputAdornment>
+                ),
+              }}
+            />
+          </Box>
+          <Grid container spacing={2}>
+            {filteredGuides.map((guide, index) => (
+              <Grid item xs={12} sm={6} md={4} key={index}>
+                <Card variant="outlined">
+                  <CardContent>
+                    <Box display="flex" alignItems="center" mb={1}>
+                      <SupportIcon
+                        color="primary"
+                        sx={{ marginRight: theme.spacing(1) }}
+                      />
+                      <Typography variant="h6">{guide.title}</Typography>
+                    </Box>
+                    <Typography variant="body2" color="textSecondary" mb={2}>
+                      Issue: {guide.issue}
+                    </Typography>
+                    <Grid container spacing={1} alignItems="center">
+                      <Grid item>
+                        <Box display="flex" alignItems="center">
+                          <IconButton
+                            color="success"
+                            sx={{ color: theme.palette.success.main, p: 0 }}
+                          >
+                            <ThumbUpIcon />
+                          </IconButton>
+                          <Typography variant="body2" ml={0.5}>
+                            {guide.likes}
+                          </Typography>
+                        </Box>
+                      </Grid>
+                      <Grid item>
+                        <Box display="flex" alignItems="center">
+                          <IconButton
+                            color="error"
+                            sx={{ color: theme.palette.error.main, p: 0 }}
+                          >
+                            <ThumbDownIcon />
+                          </IconButton>
+                          <Typography variant="body2" ml={0.5}>
+                            {guide.dislikes}
+                          </Typography>
+                        </Box>
+                      </Grid>
+                    </Grid>
+                  </CardContent>
+                </Card>
+              </Grid>
+            ))}
+          </Grid>
+        </Box>
+      </DashboardCard>
+    </PageContainer>
+  );
+};
+
+export default Page;
diff --git a/src/app/(admin)/new_dashboard/layout.tsx b/src/app/(admin)/new_dashboard/layout.tsx
index 1e01ee6..7511ad1 100644
--- a/src/app/(admin)/new_dashboard/layout.tsx
+++ b/src/app/(admin)/new_dashboard/layout.tsx
@@ -1,6 +1,5 @@
 "use client";
 import { styled, Container, Box } from "@mui/material";
-import React, { useState } from "react";
 import Sidebar from "./components/sidebar/Sidebar";
 
 const MainWrapper = styled("div")(() => ({
@@ -23,13 +22,12 @@ export default function RootLayout({
 }: {
   children: React.ReactNode;
 }) {
-  const [isSidebarOpen, setSidebarOpen] = useState(true);
   return (
     <MainWrapper className="mainwrapper">
       {/* ------------------------------------------- */}
       {/* Sidebar */}
       {/* ------------------------------------------- */}
-      <Sidebar isSidebarOpen={isSidebarOpen} />
+      <Sidebar isSidebarOpen={true} />
       {/* ------------------------------------------- */}
       {/* Main Wrapper */}
       {/* ------------------------------------------- */}
diff --git a/src/app/(admin)/new_dashboard/page.tsx b/src/app/(admin)/new_dashboard/page.tsx
index bb977b8..3693022 100644
--- a/src/app/(admin)/new_dashboard/page.tsx
+++ b/src/app/(admin)/new_dashboard/page.tsx
@@ -1,5 +1,4 @@
 "use client";
-
 import {
   Box,
   Paper,
@@ -10,14 +9,28 @@ import {
   TextField,
   IconButton,
   Divider,
-  Grid,
+  Avatar,
+  ListItemAvatar,
 } from "@mui/material";
 import SendIcon from "@mui/icons-material/Send";
 import { useState } from "react";
 import PageContainer from "./components/PageContainer";
+import DashboardCard from "./components/Card";
+
+type Message = {
+  sender: string;
+  text: string;
+  timestamp: string;
+};
+
+type Contact = {
+  name: string;
+  avatar: string;
+  lastMessage: string;
+};
 
 const Page = () => {
-  const [messages, setMessages] = useState([
+  const [messages, setMessages] = useState<Message[]>([
     { sender: "User 1", text: "Hello!", timestamp: "10:00 AM" },
     { sender: "User 2", text: "Hi there!", timestamp: "10:01 AM" },
   ]);
@@ -35,33 +48,120 @@ const Page = () => {
     }
   };
 
+  const contacts: Contact[] = [
+    {
+      name: "Alice",
+      avatar: "/avatar1.png",
+      lastMessage: "See you later!",
+    },
+    {
+      name: "Bob",
+      avatar: "/avatar2.png",
+      lastMessage: "Let's catch up tomorrow.",
+    },
+    {
+      name: "Charlie",
+      avatar: "/avatar3.png",
+      lastMessage: "Can you send me the file?",
+    },
+  ];
+
   return (
     <PageContainer title="Dashboard">
-      <Paper elevation={3} sx={{ maxWidth: 600, margin: "auto", padding: 2 }}>
-        <Grid container direction="column" sx={{ height: "500px" }}>
-          {/* Message List */}
-          <Grid item xs={10} sx={{ overflowY: "auto" }}>
+      <DashboardCard title="Chat">
+        <Paper
+          elevation={3}
+          sx={{
+            maxWidth: 1200,
+            margin: "auto",
+            padding: 2,
+            display: "flex",
+            flexDirection: "row",
+            height: "500px",
+          }}
+        >
+          {/* Contact List */}
+          <Box
+            sx={{
+              width: "30%",
+              borderRight: "1px solid #e0e0e0",
+              paddingRight: 2,
+            }}
+          >
             <List>
-              {messages.map((msg, index) => (
-                <ListItem key={index}>
+              {contacts.map((contact, index) => (
+                <ListItem key={index} button>
+                  <ListItemAvatar>
+                    <Avatar src={contact.avatar} />
+                  </ListItemAvatar>
                   <ListItemText
-                    primary={
-                      <Box>
-                        <Typography variant="body2" color="textSecondary">
-                          {msg.sender} • {msg.timestamp}
-                        </Typography>
-                        <Typography variant="body1">{msg.text}</Typography>
-                      </Box>
-                    }
+                    primary={contact.name}
+                    secondary={contact.lastMessage}
                   />
                 </ListItem>
               ))}
             </List>
-          </Grid>
-          <Divider />
-          {/* Input and Send Button */}
-          <Grid item xs={2}>
-            <Box display="flex" alignItems="center" mt={1}>
+          </Box>
+
+          {/* Chat Container */}
+          <Box
+            sx={{
+              display: "flex",
+              flexDirection: "column",
+              height: "100%",
+              width: "70%",
+              paddingLeft: 2,
+            }}
+          >
+            {/* Message List */}
+            <Box sx={{ flex: 1, overflowY: "auto", paddingBottom: 2 }}>
+              <List>
+                {messages.map((msg, index) => (
+                  <ListItem
+                    key={index}
+                    sx={{
+                      display: "flex",
+                      justifyContent:
+                        msg.sender === "User 1" ? "flex-end" : "flex-start",
+                      mb: 1,
+                      alignItems: "flex-start",
+                    }}
+                  >
+                    <Box
+                      sx={{
+                        display: "flex",
+                        flexDirection: "column",
+                        alignItems:
+                          msg.sender === "User 1" ? "flex-end" : "flex-start",
+                        backgroundColor:
+                          msg.sender === "User 1" ? "lightblue" : "lightgray",
+                        borderRadius: 2,
+                        padding: 1,
+                        maxWidth: "70%",
+                        wordWrap: "break-word",
+                      }}
+                    >
+                      <Typography variant="body2" color="textSecondary">
+                        {msg.sender} • {msg.timestamp}
+                      </Typography>
+                      <Typography variant="body1">{msg.text}</Typography>
+                    </Box>
+                  </ListItem>
+                ))}
+              </List>
+            </Box>
+            <Divider />
+            {/* Input and Send Button */}
+            <Box
+              sx={{
+                display: "flex",
+                alignItems: "center",
+                paddingTop: 1,
+                position: "sticky",
+                bottom: 0,
+                backgroundColor: "background.paper",
+              }}
+            >
               <TextField
                 fullWidth
                 variant="outlined"
@@ -70,13 +170,13 @@ const Page = () => {
                 value={newMessage}
                 onChange={(e) => setNewMessage(e.target.value)}
               />
-              <IconButton color="primary" onClick={handleSend}>
+              <IconButton color="primary" onClick={handleSend} sx={{ ml: 1 }}>
                 <SendIcon />
               </IconButton>
             </Box>
-          </Grid>
-        </Grid>
-      </Paper>
+          </Box>
+        </Paper>
+      </DashboardCard>
     </PageContainer>
   );
 };
diff --git a/src/util/theme.ts b/src/util/theme.ts
index a3772f5..aae9f50 100644
--- a/src/util/theme.ts
+++ b/src/util/theme.ts
@@ -126,6 +126,19 @@ const baselightTheme = createTheme({
   components: {
     MuiCssBaseline: {
       styleOverrides: {
+        "*::-webkit-scrollbar": {
+          width: "8px",
+        },
+        "*::-webkit-scrollbar-track": {
+          backgroundColor: "transparent",
+        },
+        "*::-webkit-scrollbar-thumb": {
+          backgroundColor: "#C4C4C4",
+          borderRadius: "8px",
+        },
+        "*::-webkit-scrollbar-thumb:hover": {
+          backgroundColor: "#A0A0A0",
+        },
         ".MuiPaper-elevation9, .MuiPopover-root .MuiPaper-elevation": {
           boxShadow:
             "rgb(145 158 171 / 30%) 0px 0px 2px 0px, rgb(145 158 171 / 12%) 0px 12px 24px -4px !important",

From 22242fe29deeae309d60fa430b4bec1373251e84 Mon Sep 17 00:00:00 2001
From: nitzanto <nitzan16001@gmail.com>
Date: Fri, 16 Aug 2024 02:30:28 +0300
Subject: [PATCH 021/242] feat: add new buttons for chat

---
 src/api/base.client.ts                 |   2 -
 src/app/(admin)/new_dashboard/page.tsx | 103 +++++++++++++++++++------
 2 files changed, 81 insertions(+), 24 deletions(-)

diff --git a/src/api/base.client.ts b/src/api/base.client.ts
index e372e0e..e50f006 100644
--- a/src/api/base.client.ts
+++ b/src/api/base.client.ts
@@ -78,8 +78,6 @@ export class BaseClient {
         };
       }
     } catch (error) {
-      console.log("error", error);
-
       console.error("An error occurred", error);
       if (error instanceof ApiError) {
         throw error;
diff --git a/src/app/(admin)/new_dashboard/page.tsx b/src/app/(admin)/new_dashboard/page.tsx
index 3693022..6826be0 100644
--- a/src/app/(admin)/new_dashboard/page.tsx
+++ b/src/app/(admin)/new_dashboard/page.tsx
@@ -11,11 +11,15 @@ import {
   Divider,
   Avatar,
   ListItemAvatar,
+  Button,
+  ListItemButton,
 } from "@mui/material";
 import SendIcon from "@mui/icons-material/Send";
+import SnoozeIcon from "@mui/icons-material/Snooze";
 import { useState } from "react";
 import PageContainer from "./components/PageContainer";
 import DashboardCard from "./components/Card";
+import SmartToyIcon from "@mui/icons-material/SmartToy";
 
 type Message = {
   sender: string;
@@ -30,11 +34,33 @@ type Contact = {
 };
 
 const Page = () => {
+  const initialContacts: Contact[] = [
+    {
+      name: "Alice",
+      avatar: "/avatar1.png",
+      lastMessage: "See you later!",
+    },
+    {
+      name: "Bob",
+      avatar: "/avatar2.png",
+      lastMessage: "Let's catch up tomorrow.",
+    },
+    {
+      name: "Charlie",
+      avatar: "/avatar3.png",
+      lastMessage: "Can you send me the file?",
+    },
+  ];
+
+  // Automatically select the first contact (Alice) when the page loads
   const [messages, setMessages] = useState<Message[]>([
     { sender: "User 1", text: "Hello!", timestamp: "10:00 AM" },
     { sender: "User 2", text: "Hi there!", timestamp: "10:01 AM" },
   ]);
   const [newMessage, setNewMessage] = useState("");
+  const [selectedContact, setSelectedContact] = useState<Contact | null>(
+    initialContacts[0]
+  );
 
   const handleSend = () => {
     if (newMessage.trim()) {
@@ -48,24 +74,6 @@ const Page = () => {
     }
   };
 
-  const contacts: Contact[] = [
-    {
-      name: "Alice",
-      avatar: "/avatar1.png",
-      lastMessage: "See you later!",
-    },
-    {
-      name: "Bob",
-      avatar: "/avatar2.png",
-      lastMessage: "Let's catch up tomorrow.",
-    },
-    {
-      name: "Charlie",
-      avatar: "/avatar3.png",
-      lastMessage: "Can you send me the file?",
-    },
-  ];
-
   return (
     <PageContainer title="Dashboard">
       <DashboardCard title="Chat">
@@ -89,8 +97,18 @@ const Page = () => {
             }}
           >
             <List>
-              {contacts.map((contact, index) => (
-                <ListItem key={index} button>
+              {initialContacts.map((contact, index) => (
+                <ListItemButton
+                  key={index}
+                  selected={selectedContact?.name === contact.name}
+                  onClick={() => setSelectedContact(contact)}
+                  sx={{
+                    backgroundColor:
+                      selectedContact?.name === contact.name
+                        ? "#f5f5f5"
+                        : "inherit",
+                  }}
+                >
                   <ListItemAvatar>
                     <Avatar src={contact.avatar} />
                   </ListItemAvatar>
@@ -98,7 +116,7 @@ const Page = () => {
                     primary={contact.name}
                     secondary={contact.lastMessage}
                   />
-                </ListItem>
+                </ListItemButton>
               ))}
             </List>
           </Box>
@@ -113,6 +131,41 @@ const Page = () => {
               paddingLeft: 2,
             }}
           >
+            {/* Chat Header */}
+            {selectedContact && (
+              <Box
+                sx={{
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "space-between",
+                  paddingBottom: 1,
+                  marginBottom: 2,
+                  borderBottom: "1px solid",
+                  borderColor: "divider",
+                }}
+              >
+                <Typography variant="h6">{selectedContact.name}</Typography>
+                <Box
+                  sx={{
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 1,
+                  }}
+                >
+                  <Button variant="contained" startIcon={<SmartToyIcon />}>
+                    Generate Guide
+                  </Button>
+                  <Button
+                    variant="outlined"
+                    startIcon={<SnoozeIcon />}
+                    sx={{ textTransform: "none" }}
+                  >
+                    Snooze
+                  </Button>
+                </Box>
+              </Box>
+            )}
+
             {/* Message List */}
             <Box sx={{ flex: 1, overflowY: "auto", paddingBottom: 2 }}>
               <List>
@@ -169,8 +222,14 @@ const Page = () => {
                 placeholder="Type a message..."
                 value={newMessage}
                 onChange={(e) => setNewMessage(e.target.value)}
+                disabled={!selectedContact}
               />
-              <IconButton color="primary" onClick={handleSend} sx={{ ml: 1 }}>
+              <IconButton
+                color="primary"
+                onClick={handleSend}
+                sx={{ ml: 1 }}
+                disabled={!selectedContact}
+              >
                 <SendIcon />
               </IconButton>
             </Box>

From 3383f437d661d4ef94c6e6290def6ffd3ebfac8a Mon Sep 17 00:00:00 2001
From: nitzanto <nitzan16001@gmail.com>
Date: Fri, 16 Aug 2024 14:09:17 +0300
Subject: [PATCH 022/242] chore: add page container to components folder

---
 package-lock.json                             |   4 +-
 src/app/(admin)/new_dashboard/guides/page.tsx |   2 +-
 src/app/(admin)/new_dashboard/page.tsx        |   2 +-
 src/app/(public)/login/page.tsx               | 187 ++++++++--------
 src/app/(public)/signup/page.tsx              | 203 +++++++++---------
 .../components/PageContainer/index.tsx        |   0
 src/components/index.ts                       |   5 +-
 7 files changed, 207 insertions(+), 196 deletions(-)
 rename src/{app/(admin)/new_dashboard => }/components/PageContainer/index.tsx (100%)

diff --git a/package-lock.json b/package-lock.json
index 4136e8f..f384bd9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -52,8 +52,8 @@
         "@types/file-saver": "^2.0.7",
         "@types/html-to-text": "^9.0.4",
         "@types/lodash": "^4.17.7",
-        "@types/node": "^20.14.14",
-        "@types/react": "^18.3.3",
+        "@types/node": "^20.3.1",
+        "@types/react": "^18",
         "@types/react-dom": "^18",
         "eslint": "^8",
         "eslint-config-next": "14.2.3",
diff --git a/src/app/(admin)/new_dashboard/guides/page.tsx b/src/app/(admin)/new_dashboard/guides/page.tsx
index 75ea6c4..0b56a1a 100644
--- a/src/app/(admin)/new_dashboard/guides/page.tsx
+++ b/src/app/(admin)/new_dashboard/guides/page.tsx
@@ -15,7 +15,7 @@ import ThumbUpIcon from "@mui/icons-material/ThumbUp";
 import ThumbDownIcon from "@mui/icons-material/ThumbDown";
 import SupportIcon from "@mui/icons-material/Support";
 import { useTheme } from "@mui/material/styles";
-import PageContainer from "../components/PageContainer";
+import PageContainer from "../../../../components/PageContainer";
 import { useState } from "react";
 import SearchIcon from "@mui/icons-material/Search";
 
diff --git a/src/app/(admin)/new_dashboard/page.tsx b/src/app/(admin)/new_dashboard/page.tsx
index 6826be0..1a2bddb 100644
--- a/src/app/(admin)/new_dashboard/page.tsx
+++ b/src/app/(admin)/new_dashboard/page.tsx
@@ -17,7 +17,7 @@ import {
 import SendIcon from "@mui/icons-material/Send";
 import SnoozeIcon from "@mui/icons-material/Snooze";
 import { useState } from "react";
-import PageContainer from "./components/PageContainer";
+import PageContainer from "../../../components/PageContainer";
 import DashboardCard from "./components/Card";
 import SmartToyIcon from "@mui/icons-material/SmartToy";
 
diff --git a/src/app/(public)/login/page.tsx b/src/app/(public)/login/page.tsx
index e193ccd..32deec6 100644
--- a/src/app/(public)/login/page.tsx
+++ b/src/app/(public)/login/page.tsx
@@ -11,112 +11,115 @@ import Typography from "@mui/material/Typography";
 import { Alert } from "@mui/material";
 import useLoginForm from "./hooks/useLoginForm";
 import { LoadingButton } from "@mui/lab";
+import PageContainer from "@/components/PageContainer";
 
 const Login = () => {
   const { register, handleSubmit, errors, isValid, isError, error, isPending } =
     useLoginForm();
 
   return (
-    <Grid container component="main" sx={{ height: "100vh" }}>
-      <Grid
-        item
-        xs={false}
-        sm={4}
-        md={7}
-        sx={{
-          backgroundImage: 'url("https://i.imgur.com/YNj4zoE.png")',
-          backgroundColor: (t) =>
-            t.palette.mode === "light"
-              ? t.palette.grey[50]
-              : t.palette.grey[900],
-          backgroundSize: "cover",
-          backgroundPosition: "left",
-        }}
-      />
-      <Grid item xs={12} sm={8} md={5} component={Paper} elevation={6} square>
-        <Box
+    <PageContainer title="Login">
+      <Grid container component="main" sx={{ height: "100vh" }}>
+        <Grid
+          item
+          xs={false}
+          sm={4}
+          md={7}
           sx={{
-            my: 8,
-            mx: 4,
-            display: "flex",
-            flexDirection: "column",
-            alignItems: "center",
+            backgroundImage: 'url("https://i.imgur.com/YNj4zoE.png")',
+            backgroundColor: (t) =>
+              t.palette.mode === "light"
+                ? t.palette.grey[50]
+                : t.palette.grey[900],
+            backgroundSize: "cover",
+            backgroundPosition: "left",
           }}
-        >
-          <Avatar sx={{ m: 1, bgcolor: "secondary.main" }}>
-            <LockOutlinedIcon />
-          </Avatar>
-          <Typography component="h1" variant="h5">
-            Sign in
-          </Typography>
-          {isError && (
-            <Alert severity="error" sx={{ mt: 2, alignItems: 'center' }}>
-              {error?.message}
-            </Alert>
-          )}
+        />
+        <Grid item xs={12} sm={8} md={5} component={Paper} elevation={6} square>
           <Box
-            component="form"
-            noValidate
-            onSubmit={handleSubmit}
-            sx={{ mt: 1 }}
+            sx={{
+              my: 8,
+              mx: 4,
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "center",
+            }}
           >
-            <TextField
-              margin="normal"
-              required
-              fullWidth
-              id="username"
-              label="Username"
-              autoComplete="username"
-              autoFocus
-              {...register("username")}
-              error={!!errors.username}
-              helperText={errors.username?.message}
-              sx={{
-                "& .MuiFormHelperText-root.Mui-error": {
-                  position: "absolute",
-                  top: "100%",
-                },
-              }}
-            />
-            <TextField
-              margin="normal"
-              required
-              fullWidth
-              label="Password"
-              type="password"
-              id="password"
-              autoComplete="current-password"
-              {...register("password")}
-              error={!!errors.password}
-              helperText={errors.password?.message}
-              sx={{
-                "& .MuiFormHelperText-root.Mui-error": {
-                  position: "absolute",
-                  top: "100%",
-                },
-              }}
-            />
-            <LoadingButton
-              type="submit"
-              loading={isPending}
-              fullWidth
-              disabled={!isValid}
-              variant="contained"
-              sx={{ mt: 3, mb: 2 }}
+            <Avatar sx={{ m: 1, bgcolor: "secondary.main" }}>
+              <LockOutlinedIcon />
+            </Avatar>
+            <Typography component="h1" variant="h5">
+              Sign in
+            </Typography>
+            {isError && (
+              <Alert severity="error" sx={{ mt: 2, alignItems: "center" }}>
+                {error?.message}
+              </Alert>
+            )}
+            <Box
+              component="form"
+              noValidate
+              onSubmit={handleSubmit}
+              sx={{ mt: 1 }}
             >
-              Sign In
-            </LoadingButton>
-            <Grid container>
-              <Grid item>
-                <Link href="signup" variant="body2">
-                  {"Don't have an account? Sign Up"}
-                </Link>
+              <TextField
+                margin="normal"
+                required
+                fullWidth
+                id="username"
+                label="Username"
+                autoComplete="username"
+                autoFocus
+                {...register("username")}
+                error={!!errors.username}
+                helperText={errors.username?.message}
+                sx={{
+                  "& .MuiFormHelperText-root.Mui-error": {
+                    position: "absolute",
+                    top: "100%",
+                  },
+                }}
+              />
+              <TextField
+                margin="normal"
+                required
+                fullWidth
+                label="Password"
+                type="password"
+                id="password"
+                autoComplete="current-password"
+                {...register("password")}
+                error={!!errors.password}
+                helperText={errors.password?.message}
+                sx={{
+                  "& .MuiFormHelperText-root.Mui-error": {
+                    position: "absolute",
+                    top: "100%",
+                  },
+                }}
+              />
+              <LoadingButton
+                type="submit"
+                loading={isPending}
+                fullWidth
+                disabled={!isValid}
+                variant="contained"
+                sx={{ mt: 3, mb: 2 }}
+              >
+                Sign In
+              </LoadingButton>
+              <Grid container>
+                <Grid item>
+                  <Link href="signup" variant="body2">
+                    {"Don't have an account? Sign Up"}
+                  </Link>
+                </Grid>
               </Grid>
-            </Grid>
+            </Box>
           </Box>
-        </Box>
+        </Grid>
       </Grid>
-    </Grid>
+    </PageContainer>
   );
 };
 
diff --git a/src/app/(public)/signup/page.tsx b/src/app/(public)/signup/page.tsx
index 5726aba..e3f3830 100644
--- a/src/app/(public)/signup/page.tsx
+++ b/src/app/(public)/signup/page.tsx
@@ -1,7 +1,6 @@
 "use client";
 
 import Avatar from "@mui/material/Avatar";
-import Button from "@mui/material/Button";
 import TextField from "@mui/material/TextField";
 import Link from "@mui/material/Link";
 import Grid from "@mui/material/Grid";
@@ -12,112 +11,120 @@ import Container from "@mui/material/Container";
 import { Paper, Alert } from "@mui/material";
 import useSignUpForm from "./hooks/useSignUpForm";
 import { LoadingButton } from "@mui/lab";
+import PageContainer from "@/components/PageContainer";
 
 const SignUp = () => {
   const { register, handleSubmit, errors, isValid, isError, error, isPending } =
     useSignUpForm();
 
   return (
-    <Container component={Paper} square elevation={6} maxWidth="xs">
-      <Box
-        sx={{
-          marginTop: 8,
-          display: "flex",
-          flexDirection: "column",
-          alignItems: "center",
-          padding: 3,
-        }}
-      >
-        <Avatar sx={{ m: 1, bgcolor: "secondary.main" }}>
-          <LockOutlinedIcon />
-        </Avatar>
-        <Typography component="h1" variant="h5">
-          Sign up
-        </Typography>
-        {isError && (
-          <Alert severity="error" sx={{ mt: 2, alignItems: "center" }}>
-            {error?.message}
-          </Alert>
-        )}
-        <Box component="form" noValidate onSubmit={handleSubmit} sx={{ mt: 3 }}>
-          <Grid container spacing={4}>
-            <Grid item xs={12}>
-              <TextField
-                autoComplete="username"
-                required
-                fullWidth
-                id="username"
-                label="Username"
-                autoFocus
-                {...register("username")}
-                error={!!errors.username}
-                helperText={errors.username?.message}
-                sx={{
-                  "& .MuiFormHelperText-root.Mui-error": {
-                    position: "absolute",
-                    top: "100%",
-                  },
-                }}
-              />
-            </Grid>
-            <Grid item xs={12}>
-              <TextField
-                required
-                fullWidth
-                id="email"
-                label="Email Address"
-                autoComplete="email"
-                {...register("email")}
-                error={!!errors.email}
-                helperText={errors.email?.message}
-                sx={{
-                  "& .MuiFormHelperText-root.Mui-error": {
-                    position: "absolute",
-                    top: "100%",
-                  },
-                }}
-              />
-            </Grid>
-            <Grid item xs={12}>
-              <TextField
-                required
-                fullWidth
-                label="Password"
-                type="password"
-                id="password"
-                autoComplete="new-password"
-                {...register("password")}
-                error={!!errors.password}
-                helperText={errors.password?.message}
-                sx={{
-                  "& .MuiFormHelperText-root.Mui-error": {
-                    position: "absolute",
-                    top: "100%",
-                  },
-                }}
-              />
-            </Grid>
-          </Grid>
-          <LoadingButton
-            type="submit"
-            loading={isPending}
-            fullWidth
-            variant="contained"
-            sx={{ mt: 4, mb: 2 }}
-            disabled={!isValid || isPending}
+    <PageContainer title="Sign Up">
+      <Container component={Paper} square elevation={6} maxWidth="xs">
+        <Box
+          sx={{
+            marginTop: 8,
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            padding: 3,
+          }}
+        >
+          <Avatar sx={{ m: 1, bgcolor: "secondary.main" }}>
+            <LockOutlinedIcon />
+          </Avatar>
+          <Typography component="h1" variant="h5">
+            Sign up
+          </Typography>
+          {isError && (
+            <Alert severity="error" sx={{ mt: 2, alignItems: "center" }}>
+              {error?.message}
+            </Alert>
+          )}
+          <Box
+            component="form"
+            noValidate
+            onSubmit={handleSubmit}
+            sx={{ mt: 3 }}
           >
-            Sign Up
-          </LoadingButton>
-          <Grid container justifyContent="flex-end">
-            <Grid item>
-              <Link href="login" variant="body2">
-                Already have an account? Sign in
-              </Link>
+            <Grid container spacing={4}>
+              <Grid item xs={12}>
+                <TextField
+                  autoComplete="username"
+                  required
+                  fullWidth
+                  id="username"
+                  label="Username"
+                  autoFocus
+                  {...register("username")}
+                  error={!!errors.username}
+                  helperText={errors.username?.message}
+                  sx={{
+                    "& .MuiFormHelperText-root.Mui-error": {
+                      position: "absolute",
+                      top: "100%",
+                    },
+                  }}
+                />
+              </Grid>
+              <Grid item xs={12}>
+                <TextField
+                  required
+                  fullWidth
+                  id="email"
+                  label="Email Address"
+                  autoComplete="email"
+                  {...register("email")}
+                  error={!!errors.email}
+                  helperText={errors.email?.message}
+                  sx={{
+                    "& .MuiFormHelperText-root.Mui-error": {
+                      position: "absolute",
+                      top: "100%",
+                    },
+                  }}
+                />
+              </Grid>
+              <Grid item xs={12}>
+                <TextField
+                  required
+                  fullWidth
+                  label="Password"
+                  type="password"
+                  id="password"
+                  autoComplete="new-password"
+                  {...register("password")}
+                  error={!!errors.password}
+                  helperText={errors.password?.message}
+                  sx={{
+                    "& .MuiFormHelperText-root.Mui-error": {
+                      position: "absolute",
+                      top: "100%",
+                    },
+                  }}
+                />
+              </Grid>
+            </Grid>
+            <LoadingButton
+              type="submit"
+              loading={isPending}
+              fullWidth
+              variant="contained"
+              sx={{ mt: 4, mb: 2 }}
+              disabled={!isValid || isPending}
+            >
+              Sign Up
+            </LoadingButton>
+            <Grid container justifyContent="flex-end">
+              <Grid item>
+                <Link href="login" variant="body2">
+                  Already have an account? Sign in
+                </Link>
+              </Grid>
             </Grid>
-          </Grid>
+          </Box>
         </Box>
-      </Box>
-    </Container>
+      </Container>
+    </PageContainer>
   );
 };
 
diff --git a/src/app/(admin)/new_dashboard/components/PageContainer/index.tsx b/src/components/PageContainer/index.tsx
similarity index 100%
rename from src/app/(admin)/new_dashboard/components/PageContainer/index.tsx
rename to src/components/PageContainer/index.tsx
diff --git a/src/components/index.ts b/src/components/index.ts
index 27baa64..0232385 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -1,5 +1,6 @@
 export { default as Sidebar } from "./Sidebar";
 export { default as Textarea } from "./Textarea";
 export { default as Topbar } from "./Topbar";
-export { default as Editor} from "./Editor";
-export { default as GuidesList} from "./GuidesList";
+export { default as Editor } from "./Editor";
+export { default as GuidesList } from "./GuidesList";
+export * from "./PageContainer";

From 9c76d8e410db84aa72e59d6544d44afcef5377a8 Mon Sep 17 00:00:00 2001
From: nitzanto <nitzan16001@gmail.com>
Date: Fri, 16 Aug 2024 14:37:14 +0300
Subject: [PATCH 023/242] chore: make the cards fit the whole screen

---
 src/app/(admin)/new_dashboard/layout.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/(admin)/new_dashboard/layout.tsx b/src/app/(admin)/new_dashboard/layout.tsx
index 7511ad1..6d25c96 100644
--- a/src/app/(admin)/new_dashboard/layout.tsx
+++ b/src/app/(admin)/new_dashboard/layout.tsx
@@ -36,9 +36,9 @@ export default function RootLayout({
         {/* PageContent */}
         {/* ------------------------------------------- */}
         <Container
+          maxWidth={false}
           sx={{
             paddingTop: "20px",
-            maxWidth: "1200px",
           }}
         >
           {/* ------------------------------------------- */}

From ca537141e29c1c7fb24e2b674e7d4df00fbc2721 Mon Sep 17 00:00:00 2001
From: nitzanto <nitzan16001@gmail.com>
Date: Fri, 16 Aug 2024 14:59:53 +0300
Subject: [PATCH 024/242] fix: layout padding

---
 src/app/(admin)/new_dashboard/layout.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/app/(admin)/new_dashboard/layout.tsx b/src/app/(admin)/new_dashboard/layout.tsx
index 6d25c96..e591572 100644
--- a/src/app/(admin)/new_dashboard/layout.tsx
+++ b/src/app/(admin)/new_dashboard/layout.tsx
@@ -11,7 +11,6 @@ const MainWrapper = styled("div")(() => ({
 const PageWrapper = styled("div")(() => ({
   display: "flex",
   flexGrow: 1,
-  paddingBottom: "60px",
   flexDirection: "column",
   zIndex: 1,
   backgroundColor: "transparent",

From f32cce3835411de8bbae284f8f05dde6a13a16a2 Mon Sep 17 00:00:00 2001
From: nitzanto <nitzan16001@gmail.com>
Date: Fri, 16 Aug 2024 15:05:51 +0300
Subject: [PATCH 025/242] fix chat layout

---
 src/app/(admin)/new_dashboard/page.tsx | 27 +++++++++++++-------------
 1 file changed, 14 insertions(+), 13 deletions(-)

diff --git a/src/app/(admin)/new_dashboard/page.tsx b/src/app/(admin)/new_dashboard/page.tsx
index 1a2bddb..9759009 100644
--- a/src/app/(admin)/new_dashboard/page.tsx
+++ b/src/app/(admin)/new_dashboard/page.tsx
@@ -1,18 +1,17 @@
 "use client";
 import {
   Box,
-  Paper,
   List,
   ListItem,
   ListItemText,
   Typography,
   TextField,
   IconButton,
-  Divider,
   Avatar,
   ListItemAvatar,
   Button,
   ListItemButton,
+  Divider,
 } from "@mui/material";
 import SendIcon from "@mui/icons-material/Send";
 import SnoozeIcon from "@mui/icons-material/Snooze";
@@ -52,7 +51,6 @@ const Page = () => {
     },
   ];
 
-  // Automatically select the first contact (Alice) when the page loads
   const [messages, setMessages] = useState<Message[]>([
     { sender: "User 1", text: "Hello!", timestamp: "10:00 AM" },
     { sender: "User 2", text: "Hi there!", timestamp: "10:01 AM" },
@@ -77,15 +75,13 @@ const Page = () => {
   return (
     <PageContainer title="Dashboard">
       <DashboardCard title="Chat">
-        <Paper
-          elevation={3}
+        <Box
           sx={{
-            maxWidth: 1200,
-            margin: "auto",
-            padding: 2,
             display: "flex",
             flexDirection: "row",
-            height: "500px",
+            height: "calc(100vh - 150px)",
+            margin: 0,
+            padding: 0,
           }}
         >
           {/* Contact List */}
@@ -93,7 +89,6 @@ const Page = () => {
             sx={{
               width: "30%",
               borderRight: "1px solid #e0e0e0",
-              paddingRight: 2,
             }}
           >
             <List>
@@ -126,8 +121,8 @@ const Page = () => {
             sx={{
               display: "flex",
               flexDirection: "column",
-              height: "100%",
               width: "70%",
+              height: "100%",
               paddingLeft: 2,
             }}
           >
@@ -167,7 +162,13 @@ const Page = () => {
             )}
 
             {/* Message List */}
-            <Box sx={{ flex: 1, overflowY: "auto", paddingBottom: 2 }}>
+            <Box
+              sx={{
+                flex: 1,
+                overflowY: "auto",
+                paddingBottom: 2,
+              }}
+            >
               <List>
                 {messages.map((msg, index) => (
                   <ListItem
@@ -234,7 +235,7 @@ const Page = () => {
               </IconButton>
             </Box>
           </Box>
-        </Paper>
+        </Box>
       </DashboardCard>
     </PageContainer>
   );

From 561624ac7f94d7d9f9bc10283c7432136eea6bab Mon Sep 17 00:00:00 2001
From: nitzanto <nitzan16001@gmail.com>
Date: Fri, 16 Aug 2024 15:18:01 +0300
Subject: [PATCH 026/242] fix margin & padding with contacts list

---
 src/app/(admin)/new_dashboard/page.tsx | 39 ++++++++++++++++----------
 1 file changed, 24 insertions(+), 15 deletions(-)

diff --git a/src/app/(admin)/new_dashboard/page.tsx b/src/app/(admin)/new_dashboard/page.tsx
index 9759009..4001280 100644
--- a/src/app/(admin)/new_dashboard/page.tsx
+++ b/src/app/(admin)/new_dashboard/page.tsx
@@ -89,29 +89,38 @@ const Page = () => {
             sx={{
               width: "30%",
               borderRight: "1px solid #e0e0e0",
+              overflow: "hidden",
             }}
           >
             <List>
               {initialContacts.map((contact, index) => (
-                <ListItemButton
+                <Box
                   key={index}
-                  selected={selectedContact?.name === contact.name}
-                  onClick={() => setSelectedContact(contact)}
                   sx={{
-                    backgroundColor:
-                      selectedContact?.name === contact.name
-                        ? "#f5f5f5"
-                        : "inherit",
+                    padding: "0 8px",
                   }}
                 >
-                  <ListItemAvatar>
-                    <Avatar src={contact.avatar} />
-                  </ListItemAvatar>
-                  <ListItemText
-                    primary={contact.name}
-                    secondary={contact.lastMessage}
-                  />
-                </ListItemButton>
+                  <ListItemButton
+                    selected={selectedContact?.name === contact.name}
+                    onClick={() => setSelectedContact(contact)}
+                    sx={{
+                      backgroundColor:
+                        selectedContact?.name === contact.name
+                          ? "#f5f5f5"
+                          : "inherit",
+                      borderRadius: 0,
+                      marginRight: 0,
+                    }}
+                  >
+                    <ListItemAvatar>
+                      <Avatar src={contact.avatar} />
+                    </ListItemAvatar>
+                    <ListItemText
+                      primary={contact.name}
+                      secondary={contact.lastMessage}
+                    />
+                  </ListItemButton>
+                </Box>
               ))}
             </List>
           </Box>

From af0cb77861f858ae448e1fd13ca0ead42f213f9f Mon Sep 17 00:00:00 2001
From: nitzanto <nitzan16001@gmail.com>
Date: Fri, 16 Aug 2024 15:25:51 +0300
Subject: [PATCH 027/242] fix chat layout

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

diff --git a/src/app/(admin)/new_dashboard/page.tsx b/src/app/(admin)/new_dashboard/page.tsx
index 4001280..07fc2f7 100644
--- a/src/app/(admin)/new_dashboard/page.tsx
+++ b/src/app/(admin)/new_dashboard/page.tsx
@@ -79,7 +79,7 @@ const Page = () => {
           sx={{
             display: "flex",
             flexDirection: "row",
-            height: "calc(100vh - 150px)",
+            height: "calc(100vh - 135px)",
             margin: 0,
             padding: 0,
           }}

From 99bce14d5f19276a4ffc53208843d675e872ced4 Mon Sep 17 00:00:00 2001
From: nitzanto <nitzan16001@gmail.com>
Date: Fri, 16 Aug 2024 15:48:03 +0300
Subject: [PATCH 028/242] refactor: chat folder structure

---
 .../components/ChatHeader/index.tsx           |  44 ++++
 .../components/ContactList/index.tsx          |  56 +++++
 .../components/MessageInput/index.tsx         |  49 +++++
 .../components/MessageList/index.tsx          |  54 +++++
 .../(admin)/new_dashboard/components/index.ts |   4 +
 src/app/(admin)/new_dashboard/guides/page.tsx |   4 +-
 src/app/(admin)/new_dashboard/layout.tsx      |   2 +-
 src/app/(admin)/new_dashboard/page.tsx        | 194 ++----------------
 .../{components => shared}/Card/index.tsx     |   0
 .../sidebar/NavGroup/index.tsx                |   0
 .../sidebar/NavItem/index.tsx                 |   0
 .../sidebar/Sidebar.tsx                       |   0
 .../sidebar/SidebarItems.tsx                  |   0
 .../sidebar/hooks/useMenuItems.ts             |   0
 src/app/(admin)/new_dashboard/types/index.ts  |  11 +
 15 files changed, 243 insertions(+), 175 deletions(-)
 create mode 100644 src/app/(admin)/new_dashboard/components/ChatHeader/index.tsx
 create mode 100644 src/app/(admin)/new_dashboard/components/ContactList/index.tsx
 create mode 100644 src/app/(admin)/new_dashboard/components/MessageInput/index.tsx
 create mode 100644 src/app/(admin)/new_dashboard/components/MessageList/index.tsx
 create mode 100644 src/app/(admin)/new_dashboard/components/index.ts
 rename src/app/(admin)/new_dashboard/{components => shared}/Card/index.tsx (100%)
 rename src/app/(admin)/new_dashboard/{components => shared}/sidebar/NavGroup/index.tsx (100%)
 rename src/app/(admin)/new_dashboard/{components => shared}/sidebar/NavItem/index.tsx (100%)
 rename src/app/(admin)/new_dashboard/{components => shared}/sidebar/Sidebar.tsx (100%)
 rename src/app/(admin)/new_dashboard/{components => shared}/sidebar/SidebarItems.tsx (100%)
 rename src/app/(admin)/new_dashboard/{components => shared}/sidebar/hooks/useMenuItems.ts (100%)
 create mode 100644 src/app/(admin)/new_dashboard/types/index.ts

diff --git a/src/app/(admin)/new_dashboard/components/ChatHeader/index.tsx b/src/app/(admin)/new_dashboard/components/ChatHeader/index.tsx
new file mode 100644
index 0000000..bf00947
--- /dev/null
+++ b/src/app/(admin)/new_dashboard/components/ChatHeader/index.tsx
@@ -0,0 +1,44 @@
+import { Box, Typography, Button } from "@mui/material";
+import SmartToyIcon from "@mui/icons-material/SmartToy";
+import SnoozeIcon from "@mui/icons-material/Snooze";
+import { Contact } from "../../types";
+
+type Props = {
+  selectedContact: Contact | null;
+};
+
+const ChatHeader = ({ selectedContact }: Props) => {
+  return (
+    <Box
+      sx={{
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        paddingBottom: 1,
+        marginBottom: 2,
+        borderBottom: "1px solid",
+        borderColor: "divider",
+      }}
+    >
+      {selectedContact && (
+        <>
+          <Typography variant="h6">{selectedContact.name}</Typography>
+          <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
+            <Button variant="contained" startIcon={<SmartToyIcon />}>
+              Generate Guide
+            </Button>
+            <Button
+              variant="outlined"
+              startIcon={<SnoozeIcon />}
+              sx={{ textTransform: "none" }}
+            >
+              Snooze
+            </Button>
+          </Box>
+        </>
+      )}
+    </Box>
+  );
+};
+
+export default ChatHeader;
diff --git a/src/app/(admin)/new_dashboard/components/ContactList/index.tsx b/src/app/(admin)/new_dashboard/components/ContactList/index.tsx
new file mode 100644
index 0000000..21ffd3e
--- /dev/null
+++ b/src/app/(admin)/new_dashboard/components/ContactList/index.tsx
@@ -0,0 +1,56 @@
+import {
+  Box,
+  List,
+  ListItemButton,
+  ListItemAvatar,
+  Avatar,
+  ListItemText,
+} from "@mui/material";
+import { Contact } from "../../types";
+
+type Props = {
+  contacts: Contact[];
+  selectedContact: Contact | null;
+  onSelectContact: (contact: Contact) => void;
+};
+
+const ContactList = ({ contacts, selectedContact, onSelectContact }: Props) => {
+  return (
+    <Box
+      sx={{
+        width: "30%",
+        borderRight: "1px solid #e0e0e0",
+        overflow: "hidden",
+      }}
+    >
+      <List>
+        {contacts.map((contact, index) => (
+          <Box key={index} sx={{ padding: "0 8px" }}>
+            <ListItemButton
+              selected={selectedContact?.name === contact.name}
+              onClick={() => onSelectContact(contact)}
+              sx={{
+                backgroundColor:
+                  selectedContact?.name === contact.name
+                    ? "#f5f5f5"
+                    : "inherit",
+                borderRadius: 0,
+                marginRight: 0,
+              }}
+            >
+              <ListItemAvatar>
+                <Avatar src={contact.avatar} />
+              </ListItemAvatar>
+              <ListItemText
+                primary={contact.name}
+                secondary={contact.lastMessage}
+              />
+            </ListItemButton>
+          </Box>
+        ))}
+      </List>
+    </Box>
+  );
+};
+
+export default ContactList;
diff --git a/src/app/(admin)/new_dashboard/components/MessageInput/index.tsx b/src/app/(admin)/new_dashboard/components/MessageInput/index.tsx
new file mode 100644
index 0000000..4ca9a02
--- /dev/null
+++ b/src/app/(admin)/new_dashboard/components/MessageInput/index.tsx
@@ -0,0 +1,49 @@
+import { Box, TextField, IconButton } from "@mui/material";
+import SendIcon from "@mui/icons-material/Send";
+
+type Props = {
+  newMessage: string;
+  onMessageChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  onSend: () => void;
+  disabled: boolean;
+};
+
+const MessageInput = ({
+  newMessage,
+  onMessageChange,
+  onSend,
+  disabled,
+}: Props) => {
+  return (
+    <Box
+      sx={{
+        display: "flex",
+        alignItems: "center",
+        paddingTop: 1,
+        position: "sticky",
+        bottom: 0,
+        backgroundColor: "background.paper",
+      }}
+    >
+      <TextField
+        fullWidth
+        variant="outlined"
+        size="small"
+        placeholder="Type a message..."
+        value={newMessage}
+        onChange={onMessageChange}
+        disabled={disabled}
+      />
+      <IconButton
+        color="primary"
+        onClick={onSend}
+        sx={{ ml: 1 }}
+        disabled={disabled}
+      >
+        <SendIcon />
+      </IconButton>
+    </Box>
+  );
+};
+
+export default MessageInput;
diff --git a/src/app/(admin)/new_dashboard/components/MessageList/index.tsx b/src/app/(admin)/new_dashboard/components/MessageList/index.tsx
new file mode 100644
index 0000000..2b07176
--- /dev/null
+++ b/src/app/(admin)/new_dashboard/components/MessageList/index.tsx
@@ -0,0 +1,54 @@
+import { Box, List, ListItem, Typography } from "@mui/material";
+import { Message } from "../../types";
+
+type Props = {
+  messages: Message[];
+};
+
+const MessageList = ({ messages }: Props) => {
+  return (
+    <Box
+      sx={{
+        flex: 1,
+        overflowY: "auto",
+        paddingBottom: 2,
+      }}
+    >
+      <List>
+        {messages.map((msg, index) => (
+          <ListItem
+            key={index}
+            sx={{
+              display: "flex",
+              justifyContent:
+                msg.sender === "User 1" ? "flex-end" : "flex-start",
+              mb: 1,
+              alignItems: "flex-start",
+            }}
+          >
+            <Box
+              sx={{
+                display: "flex",
+                flexDirection: "column",
+                alignItems: msg.sender === "User 1" ? "flex-end" : "flex-start",
+                backgroundColor:
+                  msg.sender === "User 1" ? "lightblue" : "lightgray",
+                borderRadius: 2,
+                padding: 1,
+                maxWidth: "70%",
+                wordWrap: "break-word",
+              }}
+            >
+              <Typography variant="body2" color="textSecondary">
+                {msg.sender} • {msg.timestamp}
+              </Typography>
+              <Typography variant="body1">{msg.text}</Typography>
+            </Box>
+          </ListItem>
+        ))}
+      </List>
+    </Box>
+  );
+};
+
+export default MessageList;
diff --git a/src/app/(admin)/new_dashboard/components/index.ts b/src/app/(admin)/new_dashboard/components/index.ts
new file mode 100644
index 0000000..67a6f28
--- /dev/null
+++ b/src/app/(admin)/new_dashboard/components/index.ts
@@ -0,0 +1,4 @@
+export * from "./ChatHeader";
+export * from "./ContactList";
+export * from "./MessageInput";
+export * from "./MessageList";
diff --git a/src/app/(admin)/new_dashboard/guides/page.tsx b/src/app/(admin)/new_dashboard/guides/page.tsx
index 0b56a1a..682890d 100644
--- a/src/app/(admin)/new_dashboard/guides/page.tsx
+++ b/src/app/(admin)/new_dashboard/guides/page.tsx
@@ -1,5 +1,5 @@
 "use client";
-import DashboardCard from "../components/Card";
+import DashboardCard from "../shared/Card";
 import useGuideItems from "./hooks/useGuideItems";
 import {
   Card,
@@ -15,7 +15,7 @@ import ThumbUpIcon from "@mui/icons-material/ThumbUp";
 import ThumbDownIcon from "@mui/icons-material/ThumbDown";
 import SupportIcon from "@mui/icons-material/Support";
 import { useTheme } from "@mui/material/styles";
-import PageContainer from "../../../../components/PageContainer";
+import PageContainer from "@/components/PageContainer";
 import { useState } from "react";
 import SearchIcon from "@mui/icons-material/Search";
 
diff --git a/src/app/(admin)/new_dashboard/layout.tsx b/src/app/(admin)/new_dashboard/layout.tsx
index e591572..55ffc45 100644
--- a/src/app/(admin)/new_dashboard/layout.tsx
+++ b/src/app/(admin)/new_dashboard/layout.tsx
@@ -1,6 +1,6 @@
 "use client";
 import { styled, Container, Box } from "@mui/material";
-import Sidebar from "./components/sidebar/Sidebar";
+import Sidebar from "./shared/sidebar/Sidebar";
 
 const MainWrapper = styled("div")(() => ({
   display: "flex",
diff --git a/src/app/(admin)/new_dashboard/page.tsx b/src/app/(admin)/new_dashboard/page.tsx
index 07fc2f7..28a7f17 100644
--- a/src/app/(admin)/new_dashboard/page.tsx
+++ b/src/app/(admin)/new_dashboard/page.tsx
@@ -1,36 +1,15 @@
 "use client";
-import {
-  Box,
-  List,
-  ListItem,
-  ListItemText,
-  Typography,
-  TextField,
-  IconButton,
-  Avatar,
-  ListItemAvatar,
-  Button,
-  ListItemButton,
-  Divider,
-} from "@mui/material";
-import SendIcon from "@mui/icons-material/Send";
-import SnoozeIcon from "@mui/icons-material/Snooze";
 import { useState } from "react";
-import PageContainer from "../../../components/PageContainer";
-import DashboardCard from "./components/Card";
-import SmartToyIcon from "@mui/icons-material/SmartToy";
+import PageContainer from "@/components/PageContainer";
+import DashboardCard from "./shared/Card";
+import MessageInput from "./components/MessageInput";
+import { Box } from "@mui/material";
+import ContactList from "./components/ContactList";
+import ChatHeader from "./components/ChatHeader";
 
-type Message = {
-  sender: string;
-  text: string;
-  timestamp: string;
-};
+import MessageList from "./components/MessageList";
 
-type Contact = {
-  name: string;
-  avatar: string;
-  lastMessage: string;
-};
+import { Message, Contact } from "./types";
 
 const Page = () => {
   const initialContacts: Contact[] = [
@@ -85,45 +64,11 @@ const Page = () => {
           }}
         >
           {/* Contact List */}
-          <Box
-            sx={{
-              width: "30%",
-              borderRight: "1px solid #e0e0e0",
-              overflow: "hidden",
-            }}
-          >
-            <List>
-              {initialContacts.map((contact, index) => (
-                <Box
-                  key={index}
-                  sx={{
-                    padding: "0 8px",
-                  }}
-                >
-                  <ListItemButton
-                    selected={selectedContact?.name === contact.name}
-                    onClick={() => setSelectedContact(contact)}
-                    sx={{
-                      backgroundColor:
-                        selectedContact?.name === contact.name
-                          ? "#f5f5f5"
-                          : "inherit",
-                      borderRadius: 0,
-                      marginRight: 0,
-                    }}
-                  >
-                    <ListItemAvatar>
-                      <Avatar src={contact.avatar} />
-                    </ListItemAvatar>
-                    <ListItemText
-                      primary={contact.name}
-                      secondary={contact.lastMessage}
-                    />
-                  </ListItemButton>
-                </Box>
-              ))}
-            </List>
-          </Box>
+          <ContactList
+            contacts={initialContacts}
+            selectedContact={selectedContact}
+            onSelectContact={setSelectedContact}
+          />
 
           {/* Chat Container */}
           <Box
@@ -136,113 +81,18 @@ const Page = () => {
             }}
           >
             {/* Chat Header */}
-            {selectedContact && (
-              <Box
-                sx={{
-                  display: "flex",
-                  alignItems: "center",
-                  justifyContent: "space-between",
-                  paddingBottom: 1,
-                  marginBottom: 2,
-                  borderBottom: "1px solid",
-                  borderColor: "divider",
-                }}
-              >
-                <Typography variant="h6">{selectedContact.name}</Typography>
-                <Box
-                  sx={{
-                    display: "flex",
-                    alignItems: "center",
-                    gap: 1,
-                  }}
-                >
-                  <Button variant="contained" startIcon={<SmartToyIcon />}>
-                    Generate Guide
-                  </Button>
-                  <Button
-                    variant="outlined"
-                    startIcon={<SnoozeIcon />}
-                    sx={{ textTransform: "none" }}
-                  >
-                    Snooze
-                  </Button>
-                </Box>
-              </Box>
-            )}
+            <ChatHeader selectedContact={selectedContact} />
 
             {/* Message List */}
-            <Box
-              sx={{
-                flex: 1,
-                overflowY: "auto",
-                paddingBottom: 2,
-              }}
-            >
-              <List>
-                {messages.map((msg, index) => (
-                  <ListItem
-                    key={index}
-                    sx={{
-                      display: "flex",
-                      justifyContent:
-                        msg.sender === "User 1" ? "flex-end" : "flex-start",
-                      mb: 1,
-                      alignItems: "flex-start",
-                    }}
-                  >
-                    <Box
-                      sx={{
-                        display: "flex",
-                        flexDirection: "column",
-                        alignItems:
-                          msg.sender === "User 1" ? "flex-end" : "flex-start",
-                        backgroundColor:
-                          msg.sender === "User 1" ? "lightblue" : "lightgray",
-                        borderRadius: 2,
-                        padding: 1,
-                        maxWidth: "70%",
-                        wordWrap: "break-word",
-                      }}
-                    >
-                      <Typography variant="body2" color="textSecondary">
-                        {msg.sender} • {msg.timestamp}
-                      </Typography>
-                      <Typography variant="body1">{msg.text}</Typography>
-                    </Box>
-                  </ListItem>
-                ))}
-              </List>
-            </Box>
-            <Divider />
+            <MessageList messages={messages} />
+
             {/* Input and Send Button */}
-            <Box
-              sx={{
-                display: "flex",
-                alignItems: "center",
-                paddingTop: 1,
-                position: "sticky",
-                bottom: 0,
-                backgroundColor: "background.paper",
-              }}
-            >
-              <TextField
-                fullWidth
-                variant="outlined"
-                size="small"
-                placeholder="Type a message..."
-                value={newMessage}
-                onChange={(e) => setNewMessage(e.target.value)}
-                disabled={!selectedContact}
-              />
-              <IconButton
-                color="primary"
-                onClick={handleSend}
-                sx={{ ml: 1 }}
-                disabled={!selectedContact}
-              >
-                <SendIcon />
-              </IconButton>
-            </Box>
+            <MessageInput
+              newMessage={newMessage}
+              onMessageChange={(e) => setNewMessage(e.target.value)}
+              onSend={handleSend}
+              disabled={!selectedContact}
+            />
           </Box>
         </Box>
       </DashboardCard>
diff --git a/src/app/(admin)/new_dashboard/components/Card/index.tsx b/src/app/(admin)/new_dashboard/shared/Card/index.tsx
similarity index 100%
rename from src/app/(admin)/new_dashboard/components/Card/index.tsx
rename to src/app/(admin)/new_dashboard/shared/Card/index.tsx
diff --git a/src/app/(admin)/new_dashboard/components/sidebar/NavGroup/index.tsx b/src/app/(admin)/new_dashboard/shared/sidebar/NavGroup/index.tsx
similarity index 100%
rename from src/app/(admin)/new_dashboard/components/sidebar/NavGroup/index.tsx
rename to src/app/(admin)/new_dashboard/shared/sidebar/NavGroup/index.tsx
diff --git a/src/app/(admin)/new_dashboard/components/sidebar/NavItem/index.tsx b/src/app/(admin)/new_dashboard/shared/sidebar/NavItem/index.tsx
similarity index 100%
rename from src/app/(admin)/new_dashboard/components/sidebar/NavItem/index.tsx
rename to src/app/(admin)/new_dashboard/shared/sidebar/NavItem/index.tsx
diff --git a/src/app/(admin)/new_dashboard/components/sidebar/Sidebar.tsx b/src/app/(admin)/new_dashboard/shared/sidebar/Sidebar.tsx
similarity index 100%
rename from src/app/(admin)/new_dashboard/components/sidebar/Sidebar.tsx
rename to src/app/(admin)/new_dashboard/shared/sidebar/Sidebar.tsx
diff --git a/src/app/(admin)/new_dashboard/components/sidebar/SidebarItems.tsx b/src/app/(admin)/new_dashboard/shared/sidebar/SidebarItems.tsx
similarity index 100%
rename from src/app/(admin)/new_dashboard/components/sidebar/SidebarItems.tsx
rename to src/app/(admin)/new_dashboard/shared/sidebar/SidebarItems.tsx
diff --git a/src/app/(admin)/new_dashboard/components/sidebar/hooks/useMenuItems.ts b/src/app/(admin)/new_dashboard/shared/sidebar/hooks/useMenuItems.ts
similarity index 100%
rename from src/app/(admin)/new_dashboard/components/sidebar/hooks/useMenuItems.ts
rename to src/app/(admin)/new_dashboard/shared/sidebar/hooks/useMenuItems.ts
diff --git a/src/app/(admin)/new_dashboard/types/index.ts b/src/app/(admin)/new_dashboard/types/index.ts
new file mode 100644
index 0000000..41196b6
--- /dev/null
+++ b/src/app/(admin)/new_dashboard/types/index.ts
@@ -0,0 +1,11 @@
+export type Message = {
+  sender: string;
+  text: string;
+  timestamp: string;
+};
+
+export type Contact = {
+  name: string;
+  avatar: string;
+  lastMessage: string;
+};

From 3449eaafa02c17a7c695e6d95512979ce9ef72cb Mon Sep 17 00:00:00 2001
From: nitzanto <nitzan16001@gmail.com>
Date: Fri, 16 Aug 2024 15:58:55 +0300
Subject: [PATCH 029/242] refactor: add custom hooks for chat

---
 .../(admin)/new_dashboard/components/index.ts |  4 --
 src/app/(admin)/new_dashboard/hooks/index.ts  |  2 +
 .../(admin)/new_dashboard/hooks/useChat.ts    | 41 +++++++++++++++
 .../new_dashboard/hooks/useContacts.ts        | 22 ++++++++
 src/app/(admin)/new_dashboard/page.tsx        | 50 +++----------------
 5 files changed, 73 insertions(+), 46 deletions(-)
 delete mode 100644 src/app/(admin)/new_dashboard/components/index.ts
 create mode 100644 src/app/(admin)/new_dashboard/hooks/index.ts
 create mode 100644 src/app/(admin)/new_dashboard/hooks/useChat.ts
 create mode 100644 src/app/(admin)/new_dashboard/hooks/useContacts.ts

diff --git a/src/app/(admin)/new_dashboard/components/index.ts b/src/app/(admin)/new_dashboard/components/index.ts
deleted file mode 100644
index 67a6f28..0000000
--- a/src/app/(admin)/new_dashboard/components/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export * from "./ChatHeader";
-export * from "./ContactList";
-export * from "./MessageInput";
-export * from "./MessageList";
diff --git a/src/app/(admin)/new_dashboard/hooks/index.ts b/src/app/(admin)/new_dashboard/hooks/index.ts
new file mode 100644
index 0000000..f683fa9
--- /dev/null
+++ b/src/app/(admin)/new_dashboard/hooks/index.ts
@@ -0,0 +1,2 @@
+export * from "./useChat";
+export * from "./useContacts";
diff --git a/src/app/(admin)/new_dashboard/hooks/useChat.ts b/src/app/(admin)/new_dashboard/hooks/useChat.ts
new file mode 100644
index 0000000..687a8a5
--- /dev/null
+++ b/src/app/(admin)/new_dashboard/hooks/useChat.ts
@@ -0,0 +1,41 @@
+import { useState } from "react";
+import { Message } from "../types";
+
+export const useChat = () => {
+  // Initial dummy messages
+  const initialMessages: Message[] = [
+    { sender: "User 1", text: "Hello!", timestamp: "10:00 AM" },
+    { sender: "User 2", text: "Hi there!", timestamp: "10:01 AM" },
+  ];
+
+  const [messages, setMessages] = useState<Message[]>(initialMessages);
+  const [newMessage, setNewMessage] = useState("");
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setNewMessage(event.target.value);
+  };
+
+  const clearMessage = () => {
+    setNewMessage("");
+  };
+
+  const addMessage = (message: Message) => {
+    if (newMessage.trim()) {
+      setMessages((prevMessages) => [...prevMessages, message]);
+      clearMessage();
+    }
+  };
+
+  const handleSend = (sender: string) => {
+    if (newMessage.trim()) {
+      const newMessageObj: Message = {
+        sender,
+        text: newMessage,
+        timestamp: new Date().toLocaleTimeString(),
+      };
+      addMessage(newMessageObj);
+    }
+  };
+
+  return { messages, newMessage, handleChange, handleSend };
+};
diff --git a/src/app/(admin)/new_dashboard/hooks/useContacts.ts b/src/app/(admin)/new_dashboard/hooks/useContacts.ts
new file mode 100644
index 0000000..543ba1e
--- /dev/null
+++ b/src/app/(admin)/new_dashboard/hooks/useContacts.ts
@@ -0,0 +1,22 @@
+import { useState } from "react";
+import { Contact } from "../types";
+
+export const useContacts = () => {
+  const initialContacts: Contact[] = [
+    { name: "Alice", avatar: "/avatar1.png", lastMessage: "See you later!" },
+    {
+      name: "Bob",
+      avatar: "/avatar2.png",
+      lastMessage: "Let's catch up tomorrow.",
+    },
+    {
+      name: "Charlie",
+      avatar: "/avatar3.png",
+      lastMessage: "Can you send me the file?",
+    },
+  ];
+
+  const [contacts, setContacts] = useState<Contact[]>(initialContacts);
+
+  return { contacts, setContacts };
+};
diff --git a/src/app/(admin)/new_dashboard/page.tsx b/src/app/(admin)/new_dashboard/page.tsx
index 28a7f17..fabb9bc 100644
--- a/src/app/(admin)/new_dashboard/page.tsx
+++ b/src/app/(admin)/new_dashboard/page.tsx
@@ -6,51 +6,17 @@ import MessageInput from "./components/MessageInput";
 import { Box } from "@mui/material";
 import ContactList from "./components/ContactList";
 import ChatHeader from "./components/ChatHeader";
-
 import MessageList from "./components/MessageList";
-
-import { Message, Contact } from "./types";
+import { Contact } from "./types";
+import { useChat, useContacts } from "./hooks";
 
 const Page = () => {
-  const initialContacts: Contact[] = [
-    {
-      name: "Alice",
-      avatar: "/avatar1.png",
-      lastMessage: "See you later!",
-    },
-    {
-      name: "Bob",
-      avatar: "/avatar2.png",
-      lastMessage: "Let's catch up tomorrow.",
-    },
-    {
-      name: "Charlie",
-      avatar: "/avatar3.png",
-      lastMessage: "Can you send me the file?",
-    },
-  ];
-
-  const [messages, setMessages] = useState<Message[]>([
-    { sender: "User 1", text: "Hello!", timestamp: "10:00 AM" },
-    { sender: "User 2", text: "Hi there!", timestamp: "10:01 AM" },
-  ]);
-  const [newMessage, setNewMessage] = useState("");
+  const { contacts } = useContacts();
+  const { messages, newMessage, handleChange, handleSend } = useChat();
   const [selectedContact, setSelectedContact] = useState<Contact | null>(
-    initialContacts[0]
+    contacts[0]
   );
 
-  const handleSend = () => {
-    if (newMessage.trim()) {
-      const newMessageObj = {
-        sender: "User 1",
-        text: newMessage,
-        timestamp: new Date().toLocaleTimeString(),
-      };
-      setMessages([...messages, newMessageObj]);
-      setNewMessage("");
-    }
-  };
-
   return (
     <PageContainer title="Dashboard">
       <DashboardCard title="Chat">
@@ -65,7 +31,7 @@ const Page = () => {
         >
           {/* Contact List */}
           <ContactList
-            contacts={initialContacts}
+            contacts={contacts}
             selectedContact={selectedContact}
             onSelectContact={setSelectedContact}
           />
@@ -89,8 +55,8 @@ const Page = () => {
             {/* Input and Send Button */}
             <MessageInput
               newMessage={newMessage}
-              onMessageChange={(e) => setNewMessage(e.target.value)}
-              onSend={handleSend}
+              onMessageChange={handleChange}
+              onSend={() => selectedContact && handleSend("User 1")}
               disabled={!selectedContact}
             />
           </Box>

From e6e9d76ae13cd78d5d60b7099ce607fe455de845 Mon Sep 17 00:00:00 2001
From: nitzanto <nitzan16001@gmail.com>
Date: Fri, 16 Aug 2024 15:59:32 +0300
Subject: [PATCH 030/242] add type to hook

---
 src/app/(admin)/new_dashboard/hooks/useChat.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/(admin)/new_dashboard/hooks/useChat.ts b/src/app/(admin)/new_dashboard/hooks/useChat.ts
index 687a8a5..59d900c 100644
--- a/src/app/(admin)/new_dashboard/hooks/useChat.ts
+++ b/src/app/(admin)/new_dashboard/hooks/useChat.ts
@@ -9,7 +9,7 @@ export const useChat = () => {
   ];
 
   const [messages, setMessages] = useState<Message[]>(initialMessages);
-  const [newMessage, setNewMessage] = useState("");
+  const [newMessage, setNewMessage] = useState<string>("");
 
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     setNewMessage(event.target.value);

From 5921b3bbfc0d31c8f183929d0764a490355660db Mon Sep 17 00:00:00 2001
From: nitzanto <nitzan16001@gmail.com>
Date: Fri, 16 Aug 2024 16:07:10 +0300
Subject: [PATCH 031/242] refactor guide file structure

---
 .../guides/components/GuideCard/index.tsx     | 54 +++++++++++
 .../guides/components/GuideList/index.tsx     | 19 ++++
 .../guides/components/SearchBar/index.tsx     | 26 +++++
 .../new_dashboard/guides/hooks/index.ts       |  2 +
 .../guides/hooks/useGuideItems.ts             | 14 +--
 .../guides/hooks/useSearchGuides.ts           | 20 ++++
 src/app/(admin)/new_dashboard/guides/page.tsx | 96 ++-----------------
 .../new_dashboard/guides/types/index.ts       |  6 ++
 8 files changed, 140 insertions(+), 97 deletions(-)
 create mode 100644 src/app/(admin)/new_dashboard/guides/components/GuideCard/index.tsx
 create mode 100644 src/app/(admin)/new_dashboard/guides/components/GuideList/index.tsx
 create mode 100644 src/app/(admin)/new_dashboard/guides/components/SearchBar/index.tsx
 create mode 100644 src/app/(admin)/new_dashboard/guides/hooks/index.ts
 create mode 100644 src/app/(admin)/new_dashboard/guides/hooks/useSearchGuides.ts
 create mode 100644 src/app/(admin)/new_dashboard/guides/types/index.ts

diff --git a/src/app/(admin)/new_dashboard/guides/components/GuideCard/index.tsx b/src/app/(admin)/new_dashboard/guides/components/GuideCard/index.tsx
new file mode 100644
index 0000000..a20c223
--- /dev/null
+++ b/src/app/(admin)/new_dashboard/guides/components/GuideCard/index.tsx
@@ -0,0 +1,54 @@
+import { Card, CardContent, Typography, Box, IconButton } from "@mui/material";
+import ThumbUpIcon from "@mui/icons-material/ThumbUp";
+import ThumbDownIcon from "@mui/icons-material/ThumbDown";
+import SupportIcon from "@mui/icons-material/Support";
+import { useTheme } from "@mui/material/styles";
+import { Guide } from "../../types";
+
+type Props = {
+  guide: Guide;
+};
+
+const GuideCard = ({ guide }: Props) => {
+  const theme = useTheme();
+
+  return (
+    <Card variant="outlined">
+      <CardContent>
+        <Box display="flex" alignItems="center" mb={1}>
+          <SupportIcon color="primary" sx={{ marginRight: theme.spacing(1) }} />
+          <Typography variant="h6">{guide.title}</Typography>
+        </Box>
+        <Typography variant="body2" color="textSecondary" mb={2}>
+          Issue: {guide.issue}
+        </Typography>
+        <Box display="flex" alignItems="center">
+          <Box display="flex" alignItems="center" mr={2}>
+            <IconButton
+              color="success"
+              sx={{ color: theme.palette.success.main, p: 0 }}
+            >
+              <ThumbUpIcon />
+            </IconButton>
+            <Typography variant="body2" ml={0.5}>
+              {guide.likes}
+            </Typography>
+          </Box>
+          <Box display="flex" alignItems="center">
+            <IconButton
+              color="error"
+              sx={{ color: theme.palette.error.main, p: 0 }}
+            >
+              <ThumbDownIcon />
+            </IconButton>
+            <Typography variant="body2" ml={0.5}>
+              {guide.dislikes}
+            </Typography>
+          </Box>
+        </Box>
+      </CardContent>
+    </Card>
+  );
+};
+
+export default GuideCard;
diff --git a/src/app/(admin)/new_dashboard/guides/components/GuideList/index.tsx b/src/app/(admin)/new_dashboard/guides/components/GuideList/index.tsx
new file mode 100644
index 0000000..396abb4
--- /dev/null
+++ b/src/app/(admin)/new_dashboard/guides/components/GuideList/index.tsx
@@ -0,0 +1,19 @@
+import { Grid } from "@mui/material";
+import { Guide } from "../../types";
+import GuideCard from "../GuideCard";
+
+type Props = {
+  guides: Guide[];
+};
+
+const GuideList = ({ guides }: Props) => (
+  <Grid container spacing={2}>
+    {guides.map((guide, index) => (
+      <Grid item xs={12} sm={6} md={4} key={index}>
+        <GuideCard guide={guide} />
+      </Grid>
+    ))}
+  </Grid>
+);
+
+export default GuideList;
diff --git a/src/app/(admin)/new_dashboard/guides/components/SearchBar/index.tsx b/src/app/(admin)/new_dashboard/guides/components/SearchBar/index.tsx
new file mode 100644
index 0000000..e24097d
--- /dev/null
+++ b/src/app/(admin)/new_dashboard/guides/components/SearchBar/index.tsx
@@ -0,0 +1,26 @@
+import { TextField, InputAdornment } from "@mui/material";
+import SearchIcon from "@mui/icons-material/Search";
+
+type Props = {
+  searchQuery: string;
+  onSearchChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+};
+
+const SearchBar = ({ searchQuery, onSearchChange }: Props) => (
+  <TextField
+    fullWidth
+    label="Search Guides"
+    variant="outlined"
+    value={searchQuery}
+    onChange={onSearchChange}
+    InputProps={{
+      startAdornment: (
+        <InputAdornment position="start">
+          <SearchIcon />
+        </InputAdornment>
+      ),
+    }}
+  />
+);
+
+export default SearchBar;
diff --git a/src/app/(admin)/new_dashboard/guides/hooks/index.ts b/src/app/(admin)/new_dashboard/guides/hooks/index.ts
new file mode 100644
index 0000000..8e8f18c
--- /dev/null
+++ b/src/app/(admin)/new_dashboard/guides/hooks/index.ts
@@ -0,0 +1,2 @@
+export * from "./useGuideItems";
+export * from "./useSearchGuides";
diff --git a/src/app/(admin)/new_dashboard/guides/hooks/useGuideItems.ts b/src/app/(admin)/new_dashboard/guides/hooks/useGuideItems.ts
index 738f698..c4c5ccc 100644
--- a/src/app/(admin)/new_dashboard/guides/hooks/useGuideItems.ts
+++ b/src/app/(admin)/new_dashboard/guides/hooks/useGuideItems.ts
@@ -1,14 +1,8 @@
 import { useState } from "react";
+import { Guide } from "../types";
 
-type GuideItem = {
-  title: string;
-  issue: string;
-  likes: number;
-  dislikes: number;
-};
-
-const useGuideItems = () => {
-  const [guideItems] = useState<GuideItem[]>([
+export const useGuideItems = () => {
+  const [guideItems] = useState<Guide[]>([
     {
       title: "How to startup the computer",
       issue: "Computer not starting",
@@ -37,5 +31,3 @@ const useGuideItems = () => {
 
   return { guideItems };
 };
-
-export default useGuideItems;
diff --git a/src/app/(admin)/new_dashboard/guides/hooks/useSearchGuides.ts b/src/app/(admin)/new_dashboard/guides/hooks/useSearchGuides.ts
new file mode 100644
index 0000000..6cbe58d
--- /dev/null
+++ b/src/app/(admin)/new_dashboard/guides/hooks/useSearchGuides.ts
@@ -0,0 +1,20 @@
+import { useState } from "react";
+import { Guide } from "../types";
+
+export const useSearchGuides = (initialGuides: Guide[]) => {
+  const [searchQuery, setSearchQuery] = useState("");
+
+  const filteredGuides = initialGuides.filter((guide) =>
+    guide.title.toLowerCase().includes(searchQuery.toLowerCase())
+  );
+
+  const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setSearchQuery(event.target.value);
+  };
+
+  return {
+    searchQuery,
+    filteredGuides,
+    handleSearchChange,
+  };
+};
diff --git a/src/app/(admin)/new_dashboard/guides/page.tsx b/src/app/(admin)/new_dashboard/guides/page.tsx
index 682890d..27369db 100644
--- a/src/app/(admin)/new_dashboard/guides/page.tsx
+++ b/src/app/(admin)/new_dashboard/guides/page.tsx
@@ -1,102 +1,26 @@
 "use client";
 import DashboardCard from "../shared/Card";
-import useGuideItems from "./hooks/useGuideItems";
-import {
-  Card,
-  CardContent,
-  Typography,
-  Grid,
-  IconButton,
-  Box,
-  TextField,
-  InputAdornment,
-} from "@mui/material";
-import ThumbUpIcon from "@mui/icons-material/ThumbUp";
-import ThumbDownIcon from "@mui/icons-material/ThumbDown";
-import SupportIcon from "@mui/icons-material/Support";
-import { useTheme } from "@mui/material/styles";
 import PageContainer from "@/components/PageContainer";
-import { useState } from "react";
-import SearchIcon from "@mui/icons-material/Search";
-
+import { Box } from "@mui/material";
+import GuideList from "./components/GuideList";
+import SearchBar from "./components/SearchBar";
+import { useSearchGuides, useGuideItems } from "./hooks";
 const Page = () => {
   const { guideItems } = useGuideItems();
-  const theme = useTheme();
-
-  const [searchQuery, setSearchQuery] = useState("");
-
-  const filteredGuides = guideItems.filter((guide) =>
-    guide.title.toLowerCase().includes(searchQuery.toLowerCase())
-  );
+  const { searchQuery, filteredGuides, handleSearchChange } =
+    useSearchGuides(guideItems);
 
   return (
     <PageContainer title="Guides">
       <DashboardCard title="Guides">
         <Box>
           <Box mb={2}>
-            <TextField
-              fullWidth
-              label="Search Guides"
-              variant="outlined"
-              value={searchQuery}
-              onChange={(e) => setSearchQuery(e.target.value)}
-              InputProps={{
-                startAdornment: (
-                  <InputAdornment position="start">
-                    <SearchIcon />
-                  </InputAdornment>
-                ),
-              }}
+            <SearchBar
+              searchQuery={searchQuery}
+              onSearchChange={handleSearchChange}
             />
           </Box>
-          <Grid container spacing={2}>
-            {filteredGuides.map((guide, index) => (
-              <Grid item xs={12} sm={6} md={4} key={index}>
-                <Card variant="outlined">
-                  <CardContent>
-                    <Box display="flex" alignItems="center" mb={1}>
-                      <SupportIcon
-                        color="primary"
-                        sx={{ marginRight: theme.spacing(1) }}
-                      />
-                      <Typography variant="h6">{guide.title}</Typography>
-                    </Box>
-                    <Typography variant="body2" color="textSecondary" mb={2}>
-                      Issue: {guide.issue}
-                    </Typography>
-                    <Grid container spacing={1} alignItems="center">
-                      <Grid item>
-                        <Box display="flex" alignItems="center">
-                          <IconButton
-                            color="success"
-                            sx={{ color: theme.palette.success.main, p: 0 }}
-                          >
-                            <ThumbUpIcon />
-                          </IconButton>
-                          <Typography variant="body2" ml={0.5}>
-                            {guide.likes}
-                          </Typography>
-                        </Box>
-                      </Grid>
-                      <Grid item>
-                        <Box display="flex" alignItems="center">
-                          <IconButton
-                            color="error"
-                            sx={{ color: theme.palette.error.main, p: 0 }}
-                          >
-                            <ThumbDownIcon />
-                          </IconButton>
-                          <Typography variant="body2" ml={0.5}>
-                            {guide.dislikes}
-                          </Typography>
-                        </Box>
-                      </Grid>
-                    </Grid>
-                  </CardContent>
-                </Card>
-              </Grid>
-            ))}
-          </Grid>
+          <GuideList guides={filteredGuides} />
         </Box>
       </DashboardCard>
     </PageContainer>
diff --git a/src/app/(admin)/new_dashboard/guides/types/index.ts b/src/app/(admin)/new_dashboard/guides/types/index.ts
new file mode 100644
index 0000000..6a1a409
--- /dev/null
+++ b/src/app/(admin)/new_dashboard/guides/types/index.ts
@@ -0,0 +1,6 @@
+export type Guide = {
+  title: string;
+  issue: string;
+  likes: number;
+  dislikes: number;
+};

From 716cd055efa2b2b94325acdfe5796937a57527e1 Mon Sep 17 00:00:00 2001
From: nitzanto <nitzan16001@gmail.com>
Date: Sun, 18 Aug 2024 01:41:05 +0300
Subject: [PATCH 032/242] feat: guides, create, edit

---
 .../new_dashboard/guides/[id]/page.tsx        | 32 ++++++++
 .../guides/components/Editor/index.tsx        | 75 +++++++++++++++++++
 .../guides/create/hooks/useCreateGuide.ts     |  7 ++
 .../new_dashboard/guides/create/page.tsx      | 25 +++++++
 .../guides/edit/[id]/hooks/useUpdateGuide.ts  |  7 ++
 .../new_dashboard/guides/edit/[id]/page.tsx   | 26 +++++++
 .../guides/hooks/useGuideItems.ts             |  4 +
 .../new_dashboard/guides/types/index.ts       |  1 +
 .../new_dashboard/shared/Card/index.tsx       | 17 ++++-
 .../shared/sidebar/hooks/useMenuItems.ts      |  7 ++
 10 files changed, 198 insertions(+), 3 deletions(-)
 create mode 100644 src/app/(admin)/new_dashboard/guides/[id]/page.tsx
 create mode 100644 src/app/(admin)/new_dashboard/guides/components/Editor/index.tsx
 create mode 100644 src/app/(admin)/new_dashboard/guides/create/hooks/useCreateGuide.ts
 create mode 100644 src/app/(admin)/new_dashboard/guides/create/page.tsx
 create mode 100644 src/app/(admin)/new_dashboard/guides/edit/[id]/hooks/useUpdateGuide.ts
 create mode 100644 src/app/(admin)/new_dashboard/guides/edit/[id]/page.tsx

diff --git a/src/app/(admin)/new_dashboard/guides/[id]/page.tsx b/src/app/(admin)/new_dashboard/guides/[id]/page.tsx
new file mode 100644
index 0000000..1896725
--- /dev/null
+++ b/src/app/(admin)/new_dashboard/guides/[id]/page.tsx
@@ -0,0 +1,32 @@
+"use client";
+import PageContainer from "@/components/PageContainer";
+import { Guide } from "../types";
+import { useParams } from "next/navigation";
+import { useGuideItems } from "../hooks";
+import DashboardCard from "../../shared/Card";
+
+const GuidePage = () => {
+  const { id } = useParams<{ id: string }>()!;
+
+  const { guideItems } = useGuideItems();
+  const guide = guideItems.find((guide: Guide) => guide.id === Number(id));
+
+  if (!guide) {
+    return <p>Guide not found</p>;
+  }
+
+  return (
+    <PageContainer title={guide?.title}>
+      <DashboardCard title={guide?.title}>
+        <div>
+          <h1>{guide?.title}</h1>
+          <p>{guide?.issue}</p>
+          <p>Likes: {guide?.likes}</p>
+          <p>Dislikes: {guide?.dislikes}</p>
+        </div>
+      </DashboardCard>
+    </PageContainer>
+  );
+};
+
+export default GuidePage;
diff --git a/src/app/(admin)/new_dashboard/guides/components/Editor/index.tsx b/src/app/(admin)/new_dashboard/guides/components/Editor/index.tsx
new file mode 100644
index 0000000..6def424
--- /dev/null
+++ b/src/app/(admin)/new_dashboard/guides/components/Editor/index.tsx
@@ -0,0 +1,75 @@
+import dynamic from "next/dynamic";
+import { useState } from "react";
+import "react-quill/dist/quill.snow.css";
+import { Box, Button, TextField } from "@mui/material";
+import SaveAsIcon from "@mui/icons-material/SaveAs";
+
+const DynamicReactQuill = dynamic(() => import("react-quill"));
+
+interface Props {
+  intitialTitle?: string;
+  initialIssue?: string;
+  initialContent?: string;
+  onSave: (content: string) => void;
+}
+
+const GuideEditor = ({ initialContent = "", onSave }: Props) => {
+  const [contentHTML, setContent] = useState<string>(initialContent);
+
+  const modules = {
+    toolbar: [
+      [{ header: [1, 2, 3, 4, 5, 6, false] }],
+      [{ font: [] }],
+      ["bold", "italic", "underline", "strike", "blockquote"],
+      [{ align: ["right", "center", "justify"] }],
+      [{ list: "ordered" }, { list: "bullet" }],
+      ["link", "image"],
+      [{ color: [] }],
+      [{ background: [] }],
+    ],
+  };
+
+  const formats = [
+    "header",
+    "font",
+    "bold",
+    "italic",
+    "underline",
+    "strike",
+    "blockquote",
+    "list",
+    "bullet",
+    "link",
+    "color",
+    "image",
+    "background",
+    "align",
+  ];
+
+  return (
+    <>
+      <TextField label="Title" variant="outlined" fullWidth sx={{ mb: 2 }} />
+      <TextField label="Issue" variant="outlined" fullWidth sx={{ mb: 2 }} />
+      <DynamicReactQuill
+        theme="snow"
+        modules={modules}
+        formats={formats}
+        value={contentHTML}
+        style={{ height: "570px" }}
+        onChange={(content) => setContent(content)}
+      />
+      <Box display="flex" flexDirection="column" alignItems="flex-end" mt={6}>
+        <Button
+          variant="contained"
+          color="primary"
+          startIcon={<SaveAsIcon />}
+          onClick={() => onSave(contentHTML)}
+        >
+          Save Guide
+        </Button>
+      </Box>
+    </>
+  );
+};
+
+export default GuideEditor;
diff --git a/src/app/(admin)/new_dashboard/guides/create/hooks/useCreateGuide.ts b/src/app/(admin)/new_dashboard/guides/create/hooks/useCreateGuide.ts
new file mode 100644
index 0000000..d4e6f14
--- /dev/null
+++ b/src/app/(admin)/new_dashboard/guides/create/hooks/useCreateGuide.ts
@@ -0,0 +1,7 @@
+export const useCreateGuide = () => {
+  const handleSave = (content: string) => {
+    console.log("Saving new guide:", content);
+  };
+
+  return { handleSave };
+};
diff --git a/src/app/(admin)/new_dashboard/guides/create/page.tsx b/src/app/(admin)/new_dashboard/guides/create/page.tsx
new file mode 100644
index 0000000..3312520
--- /dev/null
+++ b/src/app/(admin)/new_dashboard/guides/create/page.tsx
@@ -0,0 +1,25 @@
+"use client";
+import PageContainer from "@/components/PageContainer";
+import DashboardCard from "../../shared/Card";
+import { Box } from "@mui/material";
+import GuideEditor from "../components/Editor";
+import { useCreateGuide } from "./hooks/useCreateGuide";
+
+const Page = () => {
+  const { handleSave } = useCreateGuide();
+  return (
+    <PageContainer title="Create Guide">
+      <Box
+        sx={{
+          height: "calc(100vh - 30px)",
+        }}
+      >
+        <DashboardCard title="Create Guide" fullHeight>
+          <GuideEditor onSave={handleSave} />
+        </DashboardCard>
+      </Box>
+    </PageContainer>
+  );
+};
+
+export default Page;
diff --git a/src/app/(admin)/new_dashboard/guides/edit/[id]/hooks/useUpdateGuide.ts b/src/app/(admin)/new_dashboard/guides/edit/[id]/hooks/useUpdateGuide.ts
new file mode 100644
index 0000000..3b23f43
--- /dev/null
+++ b/src/app/(admin)/new_dashboard/guides/edit/[id]/hooks/useUpdateGuide.ts
@@ -0,0 +1,7 @@
+export const useUpdateGuide = () => {
+  const handleSave = (content: string) => {
+    console.log("Saving new guide:", content);
+  };
+
+  return { handleSave };
+};
diff --git a/src/app/(admin)/new_dashboard/guides/edit/[id]/page.tsx b/src/app/(admin)/new_dashboard/guides/edit/[id]/page.tsx
new file mode 100644
index 0000000..0c6eb8c
--- /dev/null
+++ b/src/app/(admin)/new_dashboard/guides/edit/[id]/page.tsx
@@ -0,0 +1,26 @@
+"use client";
+import PageContainer from "@/components/PageContainer";
+import DashboardCard from "../../../shared/Card";
+import { Box } from "@mui/material";
+import GuideEditor from "../../components/Editor";
+import { useUpdateGuide } from "./hooks/useUpdateGuide";
+
+const Page = () => {
+  const { handleSave } = useUpdateGuide();
+
+  return (
+    <PageContainer title="Edit Guide">
+      <Box
+        sx={{
+          height: "calc(100vh - 30px)",
+        }}
+      >
+        <DashboardCard title="Edit Guide" fullHeight>
+          <GuideEditor onSave={handleSave} />
+        </DashboardCard>
+      </Box>
+    </PageContainer>
+  );
+};
+
+export default Page;
diff --git a/src/app/(admin)/new_dashboard/guides/hooks/useGuideItems.ts b/src/app/(admin)/new_dashboard/guides/hooks/useGuideItems.ts
index c4c5ccc..cad316b 100644
--- a/src/app/(admin)/new_dashboard/guides/hooks/useGuideItems.ts
+++ b/src/app/(admin)/new_dashboard/guides/hooks/useGuideItems.ts
@@ -4,24 +4,28 @@ import { Guide } from "../types";
 export const useGuideItems = () => {
   const [guideItems] = useState<Guide[]>([
     {
+      id: 1,
       title: "How to startup the computer",
       issue: "Computer not starting",
       likes: 100,
       dislikes: 5,
     },
     {
+      id: 2,
       title: "Fixing WIFI issues",
       issue: "Wi-Fi connectivity issues",
       likes: 75,
       dislikes: 12,
     },
     {
+      id: 3,
       title: "How to fix Installion Errors in Mac",
       issue: "Software installation errors",
       likes: 150,
       dislikes: 7,
     },
     {
+      id: 4,
       title: "Fixing slow system startup",
       issue: "Slow system performance",
       likes: 90,
diff --git a/src/app/(admin)/new_dashboard/guides/types/index.ts b/src/app/(admin)/new_dashboard/guides/types/index.ts
index 6a1a409..3f76fc5 100644
--- a/src/app/(admin)/new_dashboard/guides/types/index.ts
+++ b/src/app/(admin)/new_dashboard/guides/types/index.ts
@@ -1,4 +1,5 @@
 export type Guide = {
+  id: number;
   title: string;
   issue: string;
   likes: number;
diff --git a/src/app/(admin)/new_dashboard/shared/Card/index.tsx b/src/app/(admin)/new_dashboard/shared/Card/index.tsx
index ee80fdf..11701c2 100644
--- a/src/app/(admin)/new_dashboard/shared/Card/index.tsx
+++ b/src/app/(admin)/new_dashboard/shared/Card/index.tsx
@@ -10,6 +10,7 @@ type Props = {
   headsubtitle?: string | JSX.Element;
   children?: JSX.Element;
   middlecontent?: string | JSX.Element;
+  fullHeight?: boolean;
 };
 
 const DashboardCard = ({
@@ -22,9 +23,19 @@ const DashboardCard = ({
   headtitle,
   headsubtitle,
   middlecontent,
+  fullHeight = false,
 }: Props) => {
   return (
-    <Card sx={{ padding: 0 }} elevation={9} variant={undefined}>
+    <Card
+      sx={{
+        padding: 0,
+        height: fullHeight ? "100%" : "auto",
+        display: "flex",
+        flexDirection: "column",
+        elevation: 9,
+        variant: undefined,
+      }}
+    >
       {cardheading ? (
         <CardContent>
           <Typography variant="h5">{headtitle}</Typography>
@@ -33,7 +44,8 @@ const DashboardCard = ({
           </Typography>
         </CardContent>
       ) : (
-        <CardContent sx={{ p: "30px" }}>
+        <CardContent sx={{ p: "30px", flex: 1 }}>
+          {/* Allow content to expand */}
           {title ? (
             <Stack
               direction="row"
@@ -56,7 +68,6 @@ const DashboardCard = ({
               {action}
             </Stack>
           ) : null}
-
           {children}
         </CardContent>
       )}
diff --git a/src/app/(admin)/new_dashboard/shared/sidebar/hooks/useMenuItems.ts b/src/app/(admin)/new_dashboard/shared/sidebar/hooks/useMenuItems.ts
index 1df65c1..c28b50a 100644
--- a/src/app/(admin)/new_dashboard/shared/sidebar/hooks/useMenuItems.ts
+++ b/src/app/(admin)/new_dashboard/shared/sidebar/hooks/useMenuItems.ts
@@ -5,6 +5,7 @@ import ManageAccountsIcon from "@mui/icons-material/ManageAccounts";
 import AutoStoriesIcon from "@mui/icons-material/AutoStories";
 import { AuthClient } from "@/api/auth.client";
 import { useRouter } from "next/navigation";
+import CreateIcon from "@mui/icons-material/Create";
 
 const authClient = new AuthClient();
 
@@ -37,6 +38,12 @@ export const useMenuItems = () => {
       icon: AutoStoriesIcon,
       href: "/new_dashboard/guides",
     },
+    {
+      id: uniqueId(),
+      title: "Create Guide",
+      icon: CreateIcon,
+      href: "/new_dashboard/guides/create",
+    },
     {
       navlabel: true,
       subheader: "Auth",

From 9ee0ad980c70b6ff3345943bc1d3b90e46c8b505 Mon Sep 17 00:00:00 2001
From: Roie <roiy0987@gmail.com>
Date: Sun, 18 Aug 2024 20:28:54 +0300
Subject: [PATCH 033/242] refactor: add ChatClient and related hooks for chat
 functionality

---
 src/api/chat.client.ts     | 11 +++++++++++
 src/api/types/chat.ts      |  7 +++++++
 src/hooks/api/chatHooks.ts | 19 +++++++++++++++++++
 3 files changed, 37 insertions(+)
 create mode 100644 src/api/chat.client.ts
 create mode 100644 src/api/types/chat.ts
 create mode 100644 src/hooks/api/chatHooks.ts

diff --git a/src/api/chat.client.ts b/src/api/chat.client.ts
new file mode 100644
index 0000000..d6b9c22
--- /dev/null
+++ b/src/api/chat.client.ts
@@ -0,0 +1,11 @@
+import { BaseClient } from "./base.client";
+import { ChatRequest, ChatResponse } from "./types/chat";
+
+export class ChatClient extends BaseClient {
+  async chats() {
+    return this.get<ChatResponse[]>("chats");
+  }
+  async chatById(chatRequest: ChatRequest) {
+    return this.get<ChatResponse>(`chats/${chatRequest.chatId}`);
+  }
+}
diff --git a/src/api/types/chat.ts b/src/api/types/chat.ts
new file mode 100644
index 0000000..88065a8
--- /dev/null
+++ b/src/api/types/chat.ts
@@ -0,0 +1,7 @@
+import { Chat } from "@/types";
+
+export type ChatRequest = {
+  chatId: number;
+};
+
+export type ChatResponse = Chat;
diff --git a/src/hooks/api/chatHooks.ts b/src/hooks/api/chatHooks.ts
new file mode 100644
index 0000000..9b2ed31
--- /dev/null
+++ b/src/hooks/api/chatHooks.ts
@@ -0,0 +1,19 @@
+import { ChatClient } from "@/api/chat.client";
+import { useQuery } from "@tanstack/react-query";
+
+const chatClient = new ChatClient();
+
+export function useChats() {
+  return useQuery({
+    queryKey: ["chats"],
+    queryFn: () => chatClient.chats(),
+  });
+}
+
+export function useChatById(chatId: number | null) {
+  return useQuery({
+    queryKey: chatId ? ["chats", chatId] : ["random"],
+    queryFn: chatId ? () => chatClient.chatById({ chatId }) : undefined,
+    enabled: !!chatId,
+  });
+}

From 563e07c8f31d6bc5ecfa63bf82dbe612c3548134 Mon Sep 17 00:00:00 2001
From: Roie <roiy0987@gmail.com>
Date: Sun, 18 Aug 2024 20:29:15 +0300
Subject: [PATCH 034/242] feat: add messages to Chat interface

---
 src/types/chat.type.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/types/chat.type.ts b/src/types/chat.type.ts
index 9069a6b..8625059 100644
--- a/src/types/chat.type.ts
+++ b/src/types/chat.type.ts
@@ -1,3 +1,4 @@
+import { Message } from "./message.type";
 import { User } from "./user.type";
 
 export interface Chat {
@@ -6,5 +7,6 @@ export interface Chat {
   isOpen: boolean;
   startTime: Date;
   endTime?: Date;
+  messages?: Message[];
   user?: User;
 }

From 6f53b1161d35b8e1a62c69443b704aa1aebbe992 Mon Sep 17 00:00:00 2001
From: Roie <roiy0987@gmail.com>
Date: Sun, 18 Aug 2024 20:29:36 +0300
Subject: [PATCH 035/242] feat: add socket hook for real-time chat
 functionality

---
 src/hooks/index.ts         |  1 +
 src/hooks/socket/index.ts  |  1 +
 src/hooks/socket/socket.ts | 11 +++++++++++
 src/socket.ts              |  3 ++-
 4 files changed, 15 insertions(+), 1 deletion(-)
 create mode 100644 src/hooks/socket/index.ts
 create mode 100644 src/hooks/socket/socket.ts

diff --git a/src/hooks/index.ts b/src/hooks/index.ts
index d158c57..39c079e 100644
--- a/src/hooks/index.ts
+++ b/src/hooks/index.ts
@@ -1 +1,2 @@
 export * from "./api";
+export * from "./socket";
diff --git a/src/hooks/socket/index.ts b/src/hooks/socket/index.ts
new file mode 100644
index 0000000..e498292
--- /dev/null
+++ b/src/hooks/socket/index.ts
@@ -0,0 +1 @@
+export * from "./socket";
diff --git a/src/hooks/socket/socket.ts b/src/hooks/socket/socket.ts
new file mode 100644
index 0000000..3d2381d
--- /dev/null
+++ b/src/hooks/socket/socket.ts
@@ -0,0 +1,11 @@
+import socket from "@/socket";
+import { useEffect } from "react";
+
+export const useSocket = () => {
+  useEffect(() => {
+    socket.connect();
+    return () => {
+      socket.disconnect();
+    };
+  }, []);
+};
diff --git a/src/socket.ts b/src/socket.ts
index 0272a3c..5a5321f 100644
--- a/src/socket.ts
+++ b/src/socket.ts
@@ -1,7 +1,8 @@
 import { io, Socket } from "socket.io-client";
 
-let socket: Socket = io("http://localhost:8080/chat", {
+let socket: Socket = io("http://localhost:3001/chat", {
   transports: ["websocket", "polling"],
+  autoConnect: false,
 });
 
 export default socket;

From 4c358febfeebeb62495c5e19b46cdca61b5cd222 Mon Sep 17 00:00:00 2001
From: Roie <roiy0987@gmail.com>
Date: Sun, 18 Aug 2024 20:30:12 +0300
Subject: [PATCH 036/242] refactor: update useChat and useContacts hooks for
 new dashboard

---
 .../(admin)/new_dashboard/hooks/useChat.ts    | 94 +++++++++++++------
 .../new_dashboard/hooks/useContacts.ts        | 56 +++++++----
 2 files changed, 104 insertions(+), 46 deletions(-)

diff --git a/src/app/(admin)/new_dashboard/hooks/useChat.ts b/src/app/(admin)/new_dashboard/hooks/useChat.ts
index 59d900c..132bfe3 100644
--- a/src/app/(admin)/new_dashboard/hooks/useChat.ts
+++ b/src/app/(admin)/new_dashboard/hooks/useChat.ts
@@ -1,41 +1,77 @@
-import { useState } from "react";
-import { Message } from "../types";
+import { useEffect, useState } from "react";
+import { Chat, Message } from "@/types";
+import socket from "@/socket";
+import { useChatById } from "@/hooks/api/chatHooks";
+import { SuccessResponse } from "@/api/base.client";
 
-export const useChat = () => {
-  // Initial dummy messages
-  const initialMessages: Message[] = [
-    { sender: "User 1", text: "Hello!", timestamp: "10:00 AM" },
-    { sender: "User 2", text: "Hi there!", timestamp: "10:01 AM" },
-  ];
-
-  const [messages, setMessages] = useState<Message[]>(initialMessages);
+export const useChat = (chatId: number | null) => {
+  const [chatMessages, setChatMessages] = useState<Message[]>([]);
   const [newMessage, setNewMessage] = useState<string>("");
+  const [isNote, setIsNote] = useState<boolean>(false);
+
+  const { data, error, isError } = useChatById(chatId);
+  useEffect(() => {
+    if (chatId) {
+      socket.emit("join", { chatId });
+
+      socket.on("newMessage", (message: Message) => {
+        setChatMessages((prevMessages) => [...prevMessages, message]);
+      });
+
+      return () => {
+        socket.off("newMessage");
+        socket.emit("leave", { chatId });
+      };
+    }
+  }, [chatId]);
+
+  useEffect(() => {
+    if (isError) {
+      console.error(error);
+    }
+    if (data) {
+      const { data: chat } = data as SuccessResponse<Chat>;
+      const messages = chat.messages as Message[];
+      setChatMessages(messages);
+    }
+  }, [data, error, isError]);
 
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    if (event.target.value.split("\n").length > 10) return;
     setNewMessage(event.target.value);
   };
 
-  const clearMessage = () => {
-    setNewMessage("");
-  };
-
-  const addMessage = (message: Message) => {
-    if (newMessage.trim()) {
-      setMessages((prevMessages) => [...prevMessages, message]);
-      clearMessage();
+  const handleSendMessage = () => {
+    if (newMessage.trim() === "") {
+      return;
     }
-  };
 
-  const handleSend = (sender: string) => {
-    if (newMessage.trim()) {
-      const newMessageObj: Message = {
-        sender,
-        text: newMessage,
-        timestamp: new Date().toLocaleTimeString(),
-      };
-      addMessage(newMessageObj);
+    const data = {
+      chatId: chatId,
+      content: newMessage,
+    };
+    const allMessage = {
+      data: data,
+      isSupportSender: true,
+      isNote: isNote,
+    };
+    console.log("Message:", newMessage);
+
+    if (chatId) {
+      const fd = new FormData();
+      fd.append("data", JSON.stringify(data));
+      fd.append("isSupportSender", "true");
+      fd.append("isNote", isNote.toString());
+      socket.emit("message", allMessage);
+      setNewMessage("");
     }
   };
-
-  return { messages, newMessage, handleChange, handleSend };
+  return {
+    chatMessages,
+    handleSendMessage,
+    newMessage,
+    handleChange,
+    isNote,
+    handleChangeNote: () => setIsNote(!isNote),
+  };
 };
diff --git a/src/app/(admin)/new_dashboard/hooks/useContacts.ts b/src/app/(admin)/new_dashboard/hooks/useContacts.ts
index 543ba1e..778a4e0 100644
--- a/src/app/(admin)/new_dashboard/hooks/useContacts.ts
+++ b/src/app/(admin)/new_dashboard/hooks/useContacts.ts
@@ -1,22 +1,44 @@
-import { useState } from "react";
-import { Contact } from "../types";
+import { useEffect, useState } from "react";
+import { Chat } from "@/types";
+import { useChats } from "@/hooks/api/chatHooks";
+import { SuccessResponse } from "@/api/base.client";
+import socket from "@/socket";
 
 export const useContacts = () => {
-  const initialContacts: Contact[] = [
-    { name: "Alice", avatar: "/avatar1.png", lastMessage: "See you later!" },
-    {
-      name: "Bob",
-      avatar: "/avatar2.png",
-      lastMessage: "Let's catch up tomorrow.",
-    },
-    {
-      name: "Charlie",
-      avatar: "/avatar3.png",
-      lastMessage: "Can you send me the file?",
-    },
-  ];
+  const [contacts, setContacts] = useState<Chat[]>([]);
+  const [selectedChat, setSelectedChat] = useState<Chat | null>(null);
 
-  const [contacts, setContacts] = useState<Contact[]>(initialContacts);
+  const { isError, data, error } = useChats();
 
-  return { contacts, setContacts };
+  useEffect(() => {
+    if (data) {
+      const { data: chats } = data as SuccessResponse<Chat[]>;
+      setContacts(chats);
+      setSelectedChat(chats[0]);
+    }
+  }, [data]);
+
+  if (isError) {
+    console.error(error);
+  }
+
+  useEffect(() => {
+    //If user creates a new chat
+    socket.on("chatCreated", (chat: Chat) => {
+      setContacts((prevChats) => [...prevChats, chat]);
+    });
+
+    return () => {
+      socket.off("chatCreated");
+    };
+  }, []);
+  const handleChatSelect = (chat: Chat) => {
+    setSelectedChat(chat);
+  };
+
+  return {
+    contacts,
+    selectedChat,
+    handleChatSelect,
+  };
 };

From c7a872bcfca05600aaf0c1d0bcefc7dabdf4c955 Mon Sep 17 00:00:00 2001
From: Roie <roiy0987@gmail.com>
Date: Sun, 18 Aug 2024 20:30:45 +0300
Subject: [PATCH 037/242] refactor: update MessageInput component with note and
 reply functionality

---
 .../components/MessageInput/index.tsx         | 78 +++++++++++++++----
 1 file changed, 61 insertions(+), 17 deletions(-)

diff --git a/src/app/(admin)/new_dashboard/components/MessageInput/index.tsx b/src/app/(admin)/new_dashboard/components/MessageInput/index.tsx
index 4ca9a02..049dc85 100644
--- a/src/app/(admin)/new_dashboard/components/MessageInput/index.tsx
+++ b/src/app/(admin)/new_dashboard/components/MessageInput/index.tsx
@@ -1,4 +1,10 @@
-import { Box, TextField, IconButton } from "@mui/material";
+import {
+  Box,
+  TextField,
+  IconButton,
+  TextareaAutosize,
+  Button,
+} from "@mui/material";
 import SendIcon from "@mui/icons-material/Send";
 
 type Props = {
@@ -6,11 +12,15 @@ type Props = {
   onMessageChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
   onSend: () => void;
   disabled: boolean;
+  isNote: boolean;
+  handleChangeNote: () => void;
 };
 
 const MessageInput = ({
   newMessage,
   onMessageChange,
+  isNote,
+  handleChangeNote,
   onSend,
   disabled,
 }: Props) => {
@@ -19,29 +29,63 @@ const MessageInput = ({
       sx={{
         display: "flex",
         alignItems: "center",
+        flexDirection: "column",
         paddingTop: 1,
         position: "sticky",
         bottom: 0,
         backgroundColor: "background.paper",
       }}
     >
-      <TextField
-        fullWidth
-        variant="outlined"
-        size="small"
-        placeholder="Type a message..."
-        value={newMessage}
-        onChange={onMessageChange}
-        disabled={disabled}
-      />
-      <IconButton
-        color="primary"
-        onClick={onSend}
-        sx={{ ml: 1 }}
-        disabled={disabled}
+      <Box sx={{ display: "flex", alignSelf: "start", gap: 1 }}>
+        <Button
+          variant={!isNote ? "contained" : "outlined"}
+          onClick={isNote ? handleChangeNote : () => {}}
+        >
+          Reply
+        </Button>
+        <Button
+          variant={isNote ? "contained" : "outlined"}
+          onClick={!isNote ? handleChangeNote : () => {}}
+        >
+          Note
+        </Button>
+      </Box>
+      <Box
+        sx={{
+          display: "flex",
+          alignItems: "end",
+          flexDirection: "row",
+          paddingTop: 1,
+          width: "100%",
+          position: "sticky",
+          bottom: 0,
+          backgroundColor: "background.paper",
+        }}
       >
-        <SendIcon />
-      </IconButton>
+        <TextField
+          fullWidth
+          variant="outlined"
+          size="small"
+          placeholder="Type a message..."
+          value={newMessage}
+          onChange={onMessageChange}
+          disabled={disabled}
+          multiline
+          minRows={5}
+          maxRows={10}
+          InputProps={{
+            style: { overflow: "hidden" },
+          }}
+        />
+        <IconButton
+          color="primary"
+          onClick={onSend}
+          sx={{ ml: 1 }}
+          disabled={disabled}
+        >
+          <SendIcon />
+        </IconButton>
+      </Box>
     </Box>
   );
 };

From 32a0a22c16786cb0b468796f1ff37246beb6ea7f Mon Sep 17 00:00:00 2001
From: Roie <roiy0987@gmail.com>
Date: Sun, 18 Aug 2024 20:31:14 +0300
Subject: [PATCH 038/242] refactor: update ContactList component to use chats
 instead of contacts

---
 .../components/ContactList/index.tsx          | 68 +++++++++++--------
 1 file changed, 40 insertions(+), 28 deletions(-)

diff --git a/src/app/(admin)/new_dashboard/components/ContactList/index.tsx b/src/app/(admin)/new_dashboard/components/ContactList/index.tsx
index 21ffd3e..75173f8 100644
--- a/src/app/(admin)/new_dashboard/components/ContactList/index.tsx
+++ b/src/app/(admin)/new_dashboard/components/ContactList/index.tsx
@@ -6,15 +6,15 @@ import {
   Avatar,
   ListItemText,
 } from "@mui/material";
-import { Contact } from "../../types";
+import { Chat } from "@/types";
 
 type Props = {
-  contacts: Contact[];
-  selectedContact: Contact | null;
-  onSelectContact: (contact: Contact) => void;
+  chats: Chat[];
+  selectedChat: Chat | null;
+  onSelectChat: (chat: Chat) => void;
 };
 
-const ContactList = ({ contacts, selectedContact, onSelectContact }: Props) => {
+const ContactList = ({ chats, selectedChat, onSelectChat }: Props) => {
   return (
     <Box
       sx={{
@@ -24,30 +24,42 @@ const ContactList = ({ contacts, selectedContact, onSelectContact }: Props) => {
       }}
     >
       <List>
-        {contacts.map((contact, index) => (
-          <Box key={index} sx={{ padding: "0 8px" }}>
-            <ListItemButton
-              selected={selectedContact?.name === contact.name}
-              onClick={() => onSelectContact(contact)}
-              sx={{
-                backgroundColor:
-                  selectedContact?.name === contact.name
-                    ? "#f5f5f5"
-                    : "inherit",
-                borderRadius: 0,
-                marginRight: 0,
-              }}
-            >
-              <ListItemAvatar>
-                <Avatar src={contact.avatar} />
-              </ListItemAvatar>
-              <ListItemText
-                primary={contact.name}
-                secondary={contact.lastMessage}
-              />
-            </ListItemButton>
+        {chats.length === 0 ? (
+          <Box sx={{ padding: "16px", textAlign: "center", color: "#888" }}>
+            No chats yet!
           </Box>
-        ))}
+        ) : (
+          <List>
+            {chats.map((chat, index) => (
+              <Box key={index} sx={{ padding: "0 8px" }}>
+                <ListItemButton
+                  selected={
+                    selectedChat?.user?.username === chat.user?.username
+                  }
+                  onClick={() => onSelectChat(chat)}
+                  sx={{
+                    backgroundColor:
+                      selectedChat?.user?.username === chat.user?.username
+                        ? "#f5f5f5"
+                        : "inherit",
+                    borderRadius: 0,
+                    marginRight: 0,
+                  }}
+                >
+                  <ListItemAvatar>
+                    <Avatar
+                      src={"https://bootdey.com/img/Content/avatar/avatar2.png"} // Maybe add later avatars to users
+                    />
+                  </ListItemAvatar>
+                  <ListItemText
+                    primary={chat.user?.username}
+                    // secondary={chat.}
+                  />
+                </ListItemButton>
+              </Box>
+            ))}
+          </List>
+        )}
       </List>
     </Box>
   );

From ca772f37e858e9725ca1847d2b6b6a48ee7d8670 Mon Sep 17 00:00:00 2001
From: Roie <roiy0987@gmail.com>
Date: Sun, 18 Aug 2024 20:31:26 +0300
Subject: [PATCH 039/242] refactor: update MessageList component to improve
 message display

---
 .../components/MessageList/index.tsx          | 35 ++++++++++++++-----
 1 file changed, 26 insertions(+), 9 deletions(-)

diff --git a/src/app/(admin)/new_dashboard/components/MessageList/index.tsx b/src/app/(admin)/new_dashboard/components/MessageList/index.tsx
index 2b07176..6777c08 100644
--- a/src/app/(admin)/new_dashboard/components/MessageList/index.tsx
+++ b/src/app/(admin)/new_dashboard/components/MessageList/index.tsx
@@ -1,6 +1,5 @@
 import { Box, List, ListItem, Typography } from "@mui/material";
-import { Message } from "../../types";
-
+import { Message } from "@/types";
 type Props = {
   messages: Message[];
 };
@@ -20,8 +19,7 @@ const MessageList = ({ messages }: Props) => {
             key={index}
             sx={{
               display: "flex",
-              justifyContent:
-                msg.sender === "User 1" ? "flex-end" : "flex-start",
+              justifyContent: msg.isSupportSender ? "flex-end" : "flex-start",
               mb: 1,
               alignItems: "flex-start",
             }}
@@ -30,9 +28,12 @@ const MessageList = ({ messages }: Props) => {
               sx={{
                 display: "flex",
                 flexDirection: "column",
-                alignItems: msg.sender === "User 1" ? "flex-end" : "flex-start",
-                backgroundColor:
-                  msg.sender === "User 1" ? "lightblue" : "lightgray",
+                alignItems: msg.isSupportSender ? "flex-end" : "flex-start",
+                backgroundColor: msg.isSupportSender
+                  ? !msg.isNote
+                    ? "lightblue"
+                    : "rgba(254, 237, 175)"
+                  : "lightgray",
                 borderRadius: 2,
                 padding: 1,
                 maxWidth: "70%",
@@ -40,9 +41,25 @@ const MessageList = ({ messages }: Props) => {
               }}
             >
               <Typography variant="body2" color="textSecondary">
-                {msg.sender} • {msg.timestamp}
+                {msg.isSupportSender ? "Support" : "User"} •{" "}
+                {new Date(msg.timeStamp).toLocaleTimeString("il-IL", {
+                  hour: "2-digit",
+                  minute: "2-digit",
+                  hour12: false,
+                  month: "2-digit",
+                  day: "2-digit",
+                })}
+              </Typography>
+              <Typography
+                variant="body1"
+                sx={{
+                  whiteSpace: "pre-line",
+                  wordWrap: "break-word",
+                  alignSelf: "flex-start",
+                }}
+              >
+                {msg.content}
               </Typography>
-              <Typography variant="body1">{msg.text}</Typography>
             </Box>
           </ListItem>
         ))}

From 4edbd0c19bb403731b4c4c5223444a686fbdd4df Mon Sep 17 00:00:00 2001
From: Roie <roiy0987@gmail.com>
Date: Sun, 18 Aug 2024 20:32:19 +0300
Subject: [PATCH 040/242] refactor: Update Chat page components and hooks for
 new dashboard layout

---
 src/app/(admin)/new_dashboard/page.tsx       | 35 +++++++++++---------
 src/app/(admin)/new_dashboard/types/index.ts | 11 ------
 2 files changed, 20 insertions(+), 26 deletions(-)
 delete mode 100644 src/app/(admin)/new_dashboard/types/index.ts

diff --git a/src/app/(admin)/new_dashboard/page.tsx b/src/app/(admin)/new_dashboard/page.tsx
index fabb9bc..6ade7c5 100644
--- a/src/app/(admin)/new_dashboard/page.tsx
+++ b/src/app/(admin)/new_dashboard/page.tsx
@@ -1,5 +1,4 @@
 "use client";
-import { useState } from "react";
 import PageContainer from "@/components/PageContainer";
 import DashboardCard from "./shared/Card";
 import MessageInput from "./components/MessageInput";
@@ -7,16 +6,20 @@ import { Box } from "@mui/material";
 import ContactList from "./components/ContactList";
 import ChatHeader from "./components/ChatHeader";
 import MessageList from "./components/MessageList";
-import { Contact } from "./types";
 import { useChat, useContacts } from "./hooks";
+import { useSocket } from "@/hooks";
 
 const Page = () => {
-  const { contacts } = useContacts();
-  const { messages, newMessage, handleChange, handleSend } = useChat();
-  const [selectedContact, setSelectedContact] = useState<Contact | null>(
-    contacts[0]
-  );
-
+  const { contacts, selectedChat, handleChatSelect } = useContacts();
+  const {
+    chatMessages,
+    handleSendMessage,
+    newMessage,
+    handleChange,
+    isNote,
+    handleChangeNote,
+  } = useChat(selectedChat?.chatId || null);
+  useSocket();
   return (
     <PageContainer title="Dashboard">
       <DashboardCard title="Chat">
@@ -31,9 +34,9 @@ const Page = () => {
         >
           {/* Contact List */}
           <ContactList
-            contacts={contacts}
-            selectedContact={selectedContact}
-            onSelectContact={setSelectedContact}
+            chats={contacts}
+            selectedChat={selectedChat}
+            onSelectChat={handleChatSelect}
           />
 
           {/* Chat Container */}
@@ -47,17 +50,19 @@ const Page = () => {
             }}
           >
             {/* Chat Header */}
-            <ChatHeader selectedContact={selectedContact} />
+            <ChatHeader selectedContact={selectedChat} />
 
             {/* Message List */}
-            <MessageList messages={messages} />
+            <MessageList messages={chatMessages} />
 
             {/* Input and Send Button */}
             <MessageInput
               newMessage={newMessage}
               onMessageChange={handleChange}
-              onSend={() => selectedContact && handleSend("User 1")}
-              disabled={!selectedContact}
+              handleChangeNote={handleChangeNote}
+              isNote={isNote}
+              onSend={() => selectedChat && handleSendMessage()}
+              disabled={!selectedChat}
             />
           </Box>
         </Box>
diff --git a/src/app/(admin)/new_dashboard/types/index.ts b/src/app/(admin)/new_dashboard/types/index.ts
deleted file mode 100644
index 41196b6..0000000
--- a/src/app/(admin)/new_dashboard/types/index.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-export type Message = {
-  sender: string;
-  text: string;
-  timestamp: string;
-};
-
-export type Contact = {
-  name: string;
-  avatar: string;
-  lastMessage: string;
-};

From 85d2513af16a7539c9d3d7040021fdd870049af7 Mon Sep 17 00:00:00 2001
From: Roie <roiy0987@gmail.com>
Date: Sun, 18 Aug 2024 21:50:30 +0300
Subject: [PATCH 041/242] refactor: Update socket URL handling to use
 environment variable

---
 src/socket.ts | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/socket.ts b/src/socket.ts
index 5a5321f..699b5c3 100644
--- a/src/socket.ts
+++ b/src/socket.ts
@@ -1,6 +1,18 @@
 import { io, Socket } from "socket.io-client";
+import { z } from "zod";
 
-let socket: Socket = io("http://localhost:3001/chat", {
+const socketUrlSchema = z.string().url();
+
+const socketUrlEnv = process.env.NEXT_PUBLIC_SOCKET_URL;
+const socketUrl = socketUrlSchema.safeParse(socketUrlEnv);
+
+if (!socketUrl.success) {
+  throw new Error(
+    `Invalid SOCKET_URL environment variable: ${socketUrl.error.message}`
+  );
+}
+
+let socket: Socket = io(socketUrl.data, {
   transports: ["websocket", "polling"],
   autoConnect: false,
 });

From 21df62cfa65ddea1b776fe547413fbbb040cfc81 Mon Sep 17 00:00:00 2001
From: Ori <ori100no@gmail.com>
Date: Mon, 19 Aug 2024 14:15:15 +0300
Subject: [PATCH 042/242] chore: update npm dependencies

---
 package-lock.json | 1 +
 package.json      | 4 ++--
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index f384bd9..bce7a0b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8434,6 +8434,7 @@
       "version": "3.23.8",
       "resolved": "https://registry.npmjs.org/zod/-/zod-3.23.8.tgz",
       "integrity": "sha512-XBx9AXhXktjUqnepgTiE5flcKIYWi/rme0Eaj+5Y0lftuGBq+jyRu/md4WnuxqgP1ubdpNCsYEYPxrzVHD8d6g==",
+      "license": "MIT",
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
       }
diff --git a/package.json b/package.json
index a0c631e..3be360f 100644
--- a/package.json
+++ b/package.json
@@ -50,11 +50,11 @@
     "zod": "^3.23.8"
   },
   "devDependencies": {
+    "@types/file-saver": "^2.0.7",
+    "@types/html-to-text": "^9.0.4",
     "@types/lodash": "^4.17.7",
     "@types/node": "^20.3.1",
     "@types/react": "^18",
-    "@types/file-saver": "^2.0.7",
-    "@types/html-to-text": "^9.0.4",
     "@types/react-dom": "^18",
     "eslint": "^8",
     "eslint-config-next": "14.2.3",

From 7e9026ff39899ae5398de5bc11546762b456e5d1 Mon Sep 17 00:00:00 2001
From: Ori <ori100no@gmail.com>
Date: Mon, 19 Aug 2024 14:15:46 +0300
Subject: [PATCH 043/242] refactor: add GuideClient and types for guides and
 reviews

---
 src/api/guide.client.ts                        | 13 +++++++++++++
 src/api/types/Guide.ts                         | 12 ++++++++++++
 src/api/types/Review.ts                        | 12 ++++++++++++
 .../new_dashboard/guides/hooks/guideHooks.ts   | 18 ++++++++++++++++++
 .../new_dashboard/guides/hooks/index.ts        |  5 +++--
 5 files changed, 58 insertions(+), 2 deletions(-)
 create mode 100644 src/api/guide.client.ts
 create mode 100644 src/api/types/Guide.ts
 create mode 100644 src/api/types/Review.ts
 create mode 100644 src/app/(admin)/new_dashboard/guides/hooks/guideHooks.ts

diff --git a/src/api/guide.client.ts b/src/api/guide.client.ts
new file mode 100644
index 0000000..00949bf
--- /dev/null
+++ b/src/api/guide.client.ts
@@ -0,0 +1,13 @@
+import { BaseClient } from './base.client';
+import { Guide } from './types/Guide';
+import { Review } from './types/Review';
+
+export class GuideClient extends BaseClient {
+  async getAllGuides() {
+    return await this.get<Guide[]>('guides');
+  }
+
+  async getReviews(guideId: number) {
+    return await this.get<Review[]>('reviews/guide/' + guideId);
+  }
+}
diff --git a/src/api/types/Guide.ts b/src/api/types/Guide.ts
new file mode 100644
index 0000000..4667db3
--- /dev/null
+++ b/src/api/types/Guide.ts
@@ -0,0 +1,12 @@
+import { z } from 'zod';
+
+const guideSchema = z.object({
+  guideId: z.number(),
+  title: z.string(),
+  contentHTML: z.string(),
+  creatorId: z.number(),
+  starsTotalSum: z.number(),
+  createdAt: z.date(),
+});
+
+export type Guide = z.infer<typeof guideSchema>;
diff --git a/src/api/types/Review.ts b/src/api/types/Review.ts
new file mode 100644
index 0000000..395f729
--- /dev/null
+++ b/src/api/types/Review.ts
@@ -0,0 +1,12 @@
+import { z } from 'zod';
+
+const reviewSchema = z.object({
+  reviewId: z.number(),
+  userId: z.number(),
+  guideId: z.number(),
+  stars: z.number().min(1).max(5),
+  comment: z.string().optional(),
+  createdAt: z.date(),
+});
+
+export type Review = z.infer<typeof reviewSchema>;
diff --git a/src/app/(admin)/new_dashboard/guides/hooks/guideHooks.ts b/src/app/(admin)/new_dashboard/guides/hooks/guideHooks.ts
new file mode 100644
index 0000000..52182dd
--- /dev/null
+++ b/src/app/(admin)/new_dashboard/guides/hooks/guideHooks.ts
@@ -0,0 +1,18 @@
+import { GuideClient } from '@/api/guide.client';
+import { useQuery } from '@tanstack/react-query';
+
+const guideClient = new GuideClient();
+
+export function useGuides() {
+  return useQuery({
+    queryKey: ['guides'],
+    queryFn: () => guideClient.getAllGuides(),
+  });
+}
+
+export function useReviews(guideId: number) {
+  return useQuery({
+    queryKey: ['reviews', 'guide', guideId],
+    queryFn: () => guideClient.getReviews(guideId),
+  });
+}
diff --git a/src/app/(admin)/new_dashboard/guides/hooks/index.ts b/src/app/(admin)/new_dashboard/guides/hooks/index.ts
index 8e8f18c..b3dd361 100644
--- a/src/app/(admin)/new_dashboard/guides/hooks/index.ts
+++ b/src/app/(admin)/new_dashboard/guides/hooks/index.ts
@@ -1,2 +1,3 @@
-export * from "./useGuideItems";
-export * from "./useSearchGuides";
+export * from './useGuideItems';
+export * from './useSearchGuides';
+export * from './guideHooks';

From 117fe2db5d531652662419a47749553a1523c5bc Mon Sep 17 00:00:00 2001
From: Ori <ori100no@gmail.com>
Date: Mon, 19 Aug 2024 18:50:54 +0300
Subject: [PATCH 044/242] added query to render the guides list in the frontend

---
 src/api/base.client.ts                        | 30 +++++------
 .../guides/components/GuideCard/index.tsx     | 39 ++++----------
 .../guides/components/GuideList/index.tsx     | 51 +++++++++++++++----
 src/app/(admin)/new_dashboard/guides/page.tsx | 18 ++++---
 src/types/guide.type.ts                       | 24 ---------
 5 files changed, 77 insertions(+), 85 deletions(-)
 delete mode 100644 src/types/guide.type.ts

diff --git a/src/api/base.client.ts b/src/api/base.client.ts
index e50f006..34ae65e 100644
--- a/src/api/base.client.ts
+++ b/src/api/base.client.ts
@@ -8,7 +8,7 @@ export interface SuccessResponse<T> {
   data: T;
 }
 
-type ClientResponse<T> = SuccessResponse<T> | ErrorResponse;
+export type ClientResponse<T> = SuccessResponse<T> | ErrorResponse;
 
 class ApiError extends Error {
   statusCode: number;
@@ -18,7 +18,7 @@ class ApiError extends Error {
     super(message);
     this.statusCode = statusCode;
     this.error = error;
-    this.name = "ApiError";
+    this.name = 'ApiError';
   }
 }
 
@@ -31,25 +31,25 @@ export class BaseClient {
 
   private async request<T>(
     endpoint: string,
-    method: "GET" | "POST" | "PUT" | "DELETE",
+    method: 'GET' | 'POST' | 'PUT' | 'DELETE',
     body?: any,
     options: RequestInit = {}
   ): Promise<ClientResponse<T>> {
     if (!this.base) {
-      throw new Error("Base URL is not defined");
+      throw new Error('Base URL is not defined');
     }
 
     const fetchOptions: RequestInit = {
       method,
       headers: {
-        "Content-Type": "application/json",
+        'Content-Type': 'application/json',
         ...options.headers,
       },
-      credentials: "include",
+      credentials: 'include',
       ...options,
     };
 
-    if (method !== "GET" && method !== "DELETE") {
+    if (method !== 'GET' && method !== 'DELETE') {
       fetchOptions.body = body != null ? JSON.stringify(body) : undefined;
     }
 
@@ -66,8 +66,8 @@ export class BaseClient {
         );
       }
 
-      const contentType = response.headers.get("Content-Type");
-      if (contentType && contentType.includes("application/json")) {
+      const contentType = response.headers.get('Content-Type');
+      if (contentType && contentType.includes('application/json')) {
         const data: T = await response.json();
         return {
           data,
@@ -78,11 +78,11 @@ export class BaseClient {
         };
       }
     } catch (error) {
-      console.error("An error occurred", error);
+      console.error('An error occurred', error);
       if (error instanceof ApiError) {
         throw error;
       } else {
-        throw new Error("An unexpected error occurred");
+        throw new Error('An unexpected error occurred');
       }
     }
   }
@@ -91,7 +91,7 @@ export class BaseClient {
     endpoint: string,
     options: RequestInit = {}
   ): Promise<ClientResponse<T>> {
-    return this.request<T>(endpoint, "GET", options);
+    return this.request<T>(endpoint, 'GET', options);
   }
 
   protected async post<T>(
@@ -99,7 +99,7 @@ export class BaseClient {
     body: any,
     options: RequestInit = {}
   ): Promise<ClientResponse<T>> {
-    return this.request<T>(endpoint, "POST", body, options);
+    return this.request<T>(endpoint, 'POST', body, options);
   }
 
   protected async put<T>(
@@ -107,13 +107,13 @@ export class BaseClient {
     body: any,
     options: RequestInit = {}
   ): Promise<ClientResponse<T>> {
-    return this.request<T>(endpoint, "PUT", body, options);
+    return this.request<T>(endpoint, 'PUT', body, options);
   }
 
   protected async delete<T>(
     endpoint: string,
     options: RequestInit = {}
   ): Promise<ClientResponse<T>> {
-    return this.request<T>(endpoint, "DELETE", options);
+    return this.request<T>(endpoint, 'DELETE', options);
   }
 }
diff --git a/src/app/(admin)/new_dashboard/guides/components/GuideCard/index.tsx b/src/app/(admin)/new_dashboard/guides/components/GuideCard/index.tsx
index a20c223..b207b51 100644
--- a/src/app/(admin)/new_dashboard/guides/components/GuideCard/index.tsx
+++ b/src/app/(admin)/new_dashboard/guides/components/GuideCard/index.tsx
@@ -1,9 +1,7 @@
-import { Card, CardContent, Typography, Box, IconButton } from "@mui/material";
-import ThumbUpIcon from "@mui/icons-material/ThumbUp";
-import ThumbDownIcon from "@mui/icons-material/ThumbDown";
+import { Card, CardContent, Typography, Box } from "@mui/material";
 import SupportIcon from "@mui/icons-material/Support";
 import { useTheme } from "@mui/material/styles";
-import { Guide } from "../../types";
+import { Guide } from "@/api/types/Guide";
 
 type Props = {
   guide: Guide;
@@ -20,31 +18,16 @@ const GuideCard = ({ guide }: Props) => {
           <Typography variant="h6">{guide.title}</Typography>
         </Box>
         <Typography variant="body2" color="textSecondary" mb={2}>
-          Issue: {guide.issue}
+          Created by User ID: {guide.creatorId}
         </Typography>
-        <Box display="flex" alignItems="center">
-          <Box display="flex" alignItems="center" mr={2}>
-            <IconButton
-              color="success"
-              sx={{ color: theme.palette.success.main, p: 0 }}
-            >
-              <ThumbUpIcon />
-            </IconButton>
-            <Typography variant="body2" ml={0.5}>
-              {guide.likes}
-            </Typography>
-          </Box>
-          <Box display="flex" alignItems="center">
-            <IconButton
-              color="error"
-              sx={{ color: theme.palette.error.main, p: 0 }}
-            >
-              <ThumbDownIcon />
-            </IconButton>
-            <Typography variant="body2" ml={0.5}>
-              {guide.dislikes}
-            </Typography>
-          </Box>
+        <Typography variant="body2" color="textSecondary" mb={2}>
+          Created at: {new Date(guide.createdAt).toLocaleDateString()}
+        </Typography>
+        <Typography variant="body1" dangerouslySetInnerHTML={{ __html: guide.contentHTML }} />
+        <Box display="flex" alignItems="center" mt={2}>
+          <Typography variant="body2" color="textSecondary">
+            Total Stars: {guide.starsTotalSum}
+          </Typography>
         </Box>
       </CardContent>
     </Card>
diff --git a/src/app/(admin)/new_dashboard/guides/components/GuideList/index.tsx b/src/app/(admin)/new_dashboard/guides/components/GuideList/index.tsx
index 396abb4..5907934 100644
--- a/src/app/(admin)/new_dashboard/guides/components/GuideList/index.tsx
+++ b/src/app/(admin)/new_dashboard/guides/components/GuideList/index.tsx
@@ -1,19 +1,48 @@
-import { Grid } from "@mui/material";
-import { Guide } from "../../types";
+import { Grid, Typography } from "@mui/material";
 import GuideCard from "../GuideCard";
+import { Guide } from "@/api/types/Guide";
+import { ClientResponse } from "@/api/base.client";
 
 type Props = {
-  guides: Guide[];
+  guideItems: ClientResponse<Guide[]> | undefined;
 };
 
-const GuideList = ({ guides }: Props) => (
-  <Grid container spacing={2}>
-    {guides.map((guide, index) => (
-      <Grid item xs={12} sm={6} md={4} key={index}>
-        <GuideCard guide={guide} />
+const GuideList = ({ guideItems }: Props) => {
+  if (!guideItems) {
+    return (
+      <Grid item xs={12}>
+        <Typography>Loading...</Typography>
       </Grid>
-    ))}
-  </Grid>
-);
+    );
+  }
+
+  if ("error" in guideItems) {
+    return (
+      <Grid item xs={12}>
+        <Typography color="error">
+          Error: {guideItems.message} (Status Code: {guideItems.statusCode})
+        </Typography>
+      </Grid>
+    );
+  }
+
+  const guides = guideItems.data;
+
+  return (
+    <Grid container spacing={2}>
+      {guides.length > 0 ? (
+        guides.map((guide) => (
+          <Grid item xs={12} sm={6} md={4} key={guide.guideId}>
+            <GuideCard guide={guide} />
+          </Grid>
+        ))
+      ) : (
+        <Grid item xs={12}>
+          <Typography>No guides available</Typography>
+        </Grid>
+      )}
+    </Grid>
+  );
+};
 
 export default GuideList;
diff --git a/src/app/(admin)/new_dashboard/guides/page.tsx b/src/app/(admin)/new_dashboard/guides/page.tsx
index 27369db..bf1ab69 100644
--- a/src/app/(admin)/new_dashboard/guides/page.tsx
+++ b/src/app/(admin)/new_dashboard/guides/page.tsx
@@ -4,23 +4,27 @@ import PageContainer from "@/components/PageContainer";
 import { Box } from "@mui/material";
 import GuideList from "./components/GuideList";
 import SearchBar from "./components/SearchBar";
-import { useSearchGuides, useGuideItems } from "./hooks";
+import { useSearchGuides, useGuideItems, useGuides } from "./hooks";
+import { Guide } from "@/api/types/Guide";
+
 const Page = () => {
-  const { guideItems } = useGuideItems();
-  const { searchQuery, filteredGuides, handleSearchChange } =
-    useSearchGuides(guideItems);
+  const { data: guideItems, isLoading, isError, error } = useGuides();
+  // const { searchQuery, filteredGuides, handleSearchChange } =
+  //   useSearchGuides(guideItems);
 
   return (
     <PageContainer title="Guides">
       <DashboardCard title="Guides">
         <Box>
-          <Box mb={2}>
+          {/* <Box mb={2}>
             <SearchBar
               searchQuery={searchQuery}
               onSearchChange={handleSearchChange}
             />
-          </Box>
-          <GuideList guides={filteredGuides} />
+          </Box> */}
+           {isLoading && <div>Loading...</div>}
+           {isError && <div>Error loading guides</div>}
+           {guideItems && <GuideList guideItems={guideItems} />}
         </Box>
       </DashboardCard>
     </PageContainer>
diff --git a/src/types/guide.type.ts b/src/types/guide.type.ts
deleted file mode 100644
index cd56b25..0000000
--- a/src/types/guide.type.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-export interface Guide {
-  contentHTML: string | TrustedHTML;
-  guideId:
-    | string
-    | number
-    | boolean
-    | readonly string[]
-    | readonly number[]
-    | readonly boolean[]
-    | null
-    | undefined;
-  id:
-    | string
-    | number
-    | boolean
-    | readonly string[]
-    | readonly number[]
-    | readonly boolean[]
-    | null
-    | undefined;
-  title: string;
-  content: string;
-  creationDate: string;
-}

From 82c129b67a0d20abbc0a5339f7ef0593a2bdd526 Mon Sep 17 00:00:00 2001
From: Ori <ori100no@gmail.com>
Date: Mon, 19 Aug 2024 19:23:24 +0300
Subject: [PATCH 045/242] a cleaner way to display guides

---
 src/api/base.client.ts                        |  2 +-
 src/api/guide.client.ts                       | 12 ++++++++--
 .../guides/components/GuideList/index.tsx     | 20 ++++-------------
 .../new_dashboard/guides/hooks/guideHooks.ts  |  1 +
 src/app/(admin)/new_dashboard/guides/page.tsx | 22 +++++++++++++++----
 5 files changed, 34 insertions(+), 23 deletions(-)

diff --git a/src/api/base.client.ts b/src/api/base.client.ts
index 34ae65e..2f0ffaa 100644
--- a/src/api/base.client.ts
+++ b/src/api/base.client.ts
@@ -8,7 +8,7 @@ export interface SuccessResponse<T> {
   data: T;
 }
 
-export type ClientResponse<T> = SuccessResponse<T> | ErrorResponse;
+type ClientResponse<T> = SuccessResponse<T> | ErrorResponse;
 
 class ApiError extends Error {
   statusCode: number;
diff --git a/src/api/guide.client.ts b/src/api/guide.client.ts
index 00949bf..feb1db2 100644
--- a/src/api/guide.client.ts
+++ b/src/api/guide.client.ts
@@ -4,10 +4,18 @@ import { Review } from './types/Review';
 
 export class GuideClient extends BaseClient {
   async getAllGuides() {
-    return await this.get<Guide[]>('guides');
+    const response = await this.get<Guide[]>('guides');
+    if('error' in response) {
+      return response;
+    }
+    return response.data;
   }
 
   async getReviews(guideId: number) {
-    return await this.get<Review[]>('reviews/guide/' + guideId);
+    const response = await this.get<Review[]>('reviews/guide/' + guideId);
+    if('error' in response) {
+      return response;
+    }
+    return response.data;
   }
 }
diff --git a/src/app/(admin)/new_dashboard/guides/components/GuideList/index.tsx b/src/app/(admin)/new_dashboard/guides/components/GuideList/index.tsx
index 5907934..7ec5990 100644
--- a/src/app/(admin)/new_dashboard/guides/components/GuideList/index.tsx
+++ b/src/app/(admin)/new_dashboard/guides/components/GuideList/index.tsx
@@ -1,10 +1,10 @@
 import { Grid, Typography } from "@mui/material";
 import GuideCard from "../GuideCard";
 import { Guide } from "@/api/types/Guide";
-import { ClientResponse } from "@/api/base.client";
+import { ClientResponse, SuccessResponse } from "@/api/base.client";
 
 type Props = {
-  guideItems: ClientResponse<Guide[]> | undefined;
+  guideItems:Guide[];
 };
 
 const GuideList = ({ guideItems }: Props) => {
@@ -16,22 +16,10 @@ const GuideList = ({ guideItems }: Props) => {
     );
   }
 
-  if ("error" in guideItems) {
-    return (
-      <Grid item xs={12}>
-        <Typography color="error">
-          Error: {guideItems.message} (Status Code: {guideItems.statusCode})
-        </Typography>
-      </Grid>
-    );
-  }
-
-  const guides = guideItems.data;
-
   return (
     <Grid container spacing={2}>
-      {guides.length > 0 ? (
-        guides.map((guide) => (
+      {guideItems.length > 0 ? (
+        guideItems.map((guide) => (
           <Grid item xs={12} sm={6} md={4} key={guide.guideId}>
             <GuideCard guide={guide} />
           </Grid>
diff --git a/src/app/(admin)/new_dashboard/guides/hooks/guideHooks.ts b/src/app/(admin)/new_dashboard/guides/hooks/guideHooks.ts
index 52182dd..20d5a88 100644
--- a/src/app/(admin)/new_dashboard/guides/hooks/guideHooks.ts
+++ b/src/app/(admin)/new_dashboard/guides/hooks/guideHooks.ts
@@ -14,5 +14,6 @@ export function useReviews(guideId: number) {
   return useQuery({
     queryKey: ['reviews', 'guide', guideId],
     queryFn: () => guideClient.getReviews(guideId),
+    
   });
 }
diff --git a/src/app/(admin)/new_dashboard/guides/page.tsx b/src/app/(admin)/new_dashboard/guides/page.tsx
index bf1ab69..378a129 100644
--- a/src/app/(admin)/new_dashboard/guides/page.tsx
+++ b/src/app/(admin)/new_dashboard/guides/page.tsx
@@ -1,7 +1,7 @@
 "use client";
 import DashboardCard from "../shared/Card";
 import PageContainer from "@/components/PageContainer";
-import { Box } from "@mui/material";
+import { Box, Typography } from "@mui/material";
 import GuideList from "./components/GuideList";
 import SearchBar from "./components/SearchBar";
 import { useSearchGuides, useGuideItems, useGuides } from "./hooks";
@@ -9,6 +9,22 @@ import { Guide } from "@/api/types/Guide";
 
 const Page = () => {
   const { data: guideItems, isLoading, isError, error } = useGuides();
+
+  let content;
+  
+  if (isLoading) {
+    content = <Typography>Loading...</Typography>;
+  } else if (isError || !guideItems) {
+    content = <Typography>Error loading guides</Typography>;
+  } else if ("error" in guideItems) {
+    content = (
+      <Typography color="error">
+        Error: {guideItems.message} (Status Code: {guideItems.statusCode})
+      </Typography>
+    );
+  } else {
+    content = <GuideList guideItems={guideItems} />;
+  }
   // const { searchQuery, filteredGuides, handleSearchChange } =
   //   useSearchGuides(guideItems);
 
@@ -22,9 +38,7 @@ const Page = () => {
               onSearchChange={handleSearchChange}
             />
           </Box> */}
-           {isLoading && <div>Loading...</div>}
-           {isError && <div>Error loading guides</div>}
-           {guideItems && <GuideList guideItems={guideItems} />}
+          {content}
         </Box>
       </DashboardCard>
     </PageContainer>

From 8960d6c38ac96a5457151ee7cfe628f7069da777 Mon Sep 17 00:00:00 2001
From: Ori <ori100no@gmail.com>
Date: Mon, 19 Aug 2024 19:24:48 +0300
Subject: [PATCH 046/242] removed import

---
 .../(admin)/new_dashboard/guides/components/GuideList/index.tsx  | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/app/(admin)/new_dashboard/guides/components/GuideList/index.tsx b/src/app/(admin)/new_dashboard/guides/components/GuideList/index.tsx
index 7ec5990..1ab1086 100644
--- a/src/app/(admin)/new_dashboard/guides/components/GuideList/index.tsx
+++ b/src/app/(admin)/new_dashboard/guides/components/GuideList/index.tsx
@@ -1,7 +1,6 @@
 import { Grid, Typography } from "@mui/material";
 import GuideCard from "../GuideCard";
 import { Guide } from "@/api/types/Guide";
-import { ClientResponse, SuccessResponse } from "@/api/base.client";
 
 type Props = {
   guideItems:Guide[];

From dbe2e0849534b4e4346e4994e7b44c9a705de3cb Mon Sep 17 00:00:00 2001
From: Ori <ori100no@gmail.com>
Date: Mon, 19 Aug 2024 20:19:09 +0300
Subject: [PATCH 047/242] a better practice of react query

---
 src/api/guide.client.ts                       | 12 +----
 .../guides/components/GuideCard/index.tsx     |  1 -
 .../guides/hooks/useSearchGuides.ts           |  2 +-
 src/app/(admin)/new_dashboard/guides/page.tsx | 51 ++++++++++---------
 4 files changed, 29 insertions(+), 37 deletions(-)

diff --git a/src/api/guide.client.ts b/src/api/guide.client.ts
index feb1db2..00949bf 100644
--- a/src/api/guide.client.ts
+++ b/src/api/guide.client.ts
@@ -4,18 +4,10 @@ import { Review } from './types/Review';
 
 export class GuideClient extends BaseClient {
   async getAllGuides() {
-    const response = await this.get<Guide[]>('guides');
-    if('error' in response) {
-      return response;
-    }
-    return response.data;
+    return await this.get<Guide[]>('guides');
   }
 
   async getReviews(guideId: number) {
-    const response = await this.get<Review[]>('reviews/guide/' + guideId);
-    if('error' in response) {
-      return response;
-    }
-    return response.data;
+    return await this.get<Review[]>('reviews/guide/' + guideId);
   }
 }
diff --git a/src/app/(admin)/new_dashboard/guides/components/GuideCard/index.tsx b/src/app/(admin)/new_dashboard/guides/components/GuideCard/index.tsx
index b207b51..32dfd6d 100644
--- a/src/app/(admin)/new_dashboard/guides/components/GuideCard/index.tsx
+++ b/src/app/(admin)/new_dashboard/guides/components/GuideCard/index.tsx
@@ -23,7 +23,6 @@ const GuideCard = ({ guide }: Props) => {
         <Typography variant="body2" color="textSecondary" mb={2}>
           Created at: {new Date(guide.createdAt).toLocaleDateString()}
         </Typography>
-        <Typography variant="body1" dangerouslySetInnerHTML={{ __html: guide.contentHTML }} />
         <Box display="flex" alignItems="center" mt={2}>
           <Typography variant="body2" color="textSecondary">
             Total Stars: {guide.starsTotalSum}
diff --git a/src/app/(admin)/new_dashboard/guides/hooks/useSearchGuides.ts b/src/app/(admin)/new_dashboard/guides/hooks/useSearchGuides.ts
index 6cbe58d..d3c1f60 100644
--- a/src/app/(admin)/new_dashboard/guides/hooks/useSearchGuides.ts
+++ b/src/app/(admin)/new_dashboard/guides/hooks/useSearchGuides.ts
@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { Guide } from "../types";
+import { Guide } from "@/api/types/Guide";
 
 export const useSearchGuides = (initialGuides: Guide[]) => {
   const [searchQuery, setSearchQuery] = useState("");
diff --git a/src/app/(admin)/new_dashboard/guides/page.tsx b/src/app/(admin)/new_dashboard/guides/page.tsx
index 378a129..bca3e87 100644
--- a/src/app/(admin)/new_dashboard/guides/page.tsx
+++ b/src/app/(admin)/new_dashboard/guides/page.tsx
@@ -4,41 +4,42 @@ import PageContainer from "@/components/PageContainer";
 import { Box, Typography } from "@mui/material";
 import GuideList from "./components/GuideList";
 import SearchBar from "./components/SearchBar";
-import { useSearchGuides, useGuideItems, useGuides } from "./hooks";
+import { useSearchGuides, useGuides } from "./hooks";
 import { Guide } from "@/api/types/Guide";
 
 const Page = () => {
-  const { data: guideItems, isLoading, isError, error } = useGuides();
+  const { data: guideItems, isLoading, isError, isSuccess } = useGuides();
 
-  let content;
-  
-  if (isLoading) {
-    content = <Typography>Loading...</Typography>;
-  } else if (isError || !guideItems) {
-    content = <Typography>Error loading guides</Typography>;
-  } else if ("error" in guideItems) {
-    content = (
-      <Typography color="error">
-        Error: {guideItems.message} (Status Code: {guideItems.statusCode})
-      </Typography>
-    );
-  } else {
-    content = <GuideList guideItems={guideItems} />;
+  let guides: Guide[] = [];
+
+  if (isSuccess && "data" in guideItems) {
+    guides = guideItems.data;
   }
-  // const { searchQuery, filteredGuides, handleSearchChange } =
-  //   useSearchGuides(guideItems);
+
+  const { searchQuery, filteredGuides, handleSearchChange } = useSearchGuides(
+    guides
+  );
 
   return (
     <PageContainer title="Guides">
       <DashboardCard title="Guides">
         <Box>
-          {/* <Box mb={2}>
-            <SearchBar
-              searchQuery={searchQuery}
-              onSearchChange={handleSearchChange}
-            />
-          </Box> */}
-          {content}
+          {isLoading && <Typography>Loading...</Typography>}
+          {isError && <Typography>Error loading guides</Typography>}
+          {isSuccess && guides.length > 0 && (
+            <>
+              <Box mb={2}>
+                <SearchBar
+                  searchQuery={searchQuery}
+                  onSearchChange={handleSearchChange}
+                />
+              </Box>
+              <GuideList guideItems={filteredGuides} />
+            </>
+          )}
+          {isSuccess && guides.length === 0 && (
+            <Typography>No guides available</Typography>
+          )}
         </Box>
       </DashboardCard>
     </PageContainer>

From 279b60c28a562570629aa457fd094888c6dba0a5 Mon Sep 17 00:00:00 2001
From: Ori <ori100no@gmail.com>
Date: Tue, 20 Aug 2024 12:20:21 +0300
Subject: [PATCH 048/242] added guide page

---
 .../new_dashboard/guides/[id]/page.tsx        | 56 ++++++++++++-------
 1 file changed, 37 insertions(+), 19 deletions(-)

diff --git a/src/app/(admin)/new_dashboard/guides/[id]/page.tsx b/src/app/(admin)/new_dashboard/guides/[id]/page.tsx
index 1896725..578b3fe 100644
--- a/src/app/(admin)/new_dashboard/guides/[id]/page.tsx
+++ b/src/app/(admin)/new_dashboard/guides/[id]/page.tsx
@@ -1,32 +1,50 @@
 "use client";
 import PageContainer from "@/components/PageContainer";
-import { Guide } from "../types";
 import { useParams } from "next/navigation";
-import { useGuideItems } from "../hooks";
+import { useGuides } from "../hooks";
 import DashboardCard from "../../shared/Card";
+import { Typography } from "@mui/material";
+import { Guide } from "@/api/types/Guide";
 
 const GuidePage = () => {
-  const { id } = useParams<{ id: string }>()!;
+  const params = useParams();
 
-  const { guideItems } = useGuideItems();
-  const guide = guideItems.find((guide: Guide) => guide.id === Number(id));
+  const id = params?.id ? Number(params.id) : null;
 
-  if (!guide) {
-    return <p>Guide not found</p>;
+  const { data: guideItems, isLoading, isError, isSuccess } = useGuides();
+
+  let guide: Guide | undefined;
+
+  if (isSuccess && guideItems && "data" in guideItems) {
+    guide = guideItems.data.find((g) => g.guideId === Number(id));
+  }
+
+  if (isLoading) {
+    return <Typography>Loading...</Typography>;
   }
 
-  return (
-    <PageContainer title={guide?.title}>
-      <DashboardCard title={guide?.title}>
-        <div>
-          <h1>{guide?.title}</h1>
-          <p>{guide?.issue}</p>
-          <p>Likes: {guide?.likes}</p>
-          <p>Dislikes: {guide?.dislikes}</p>
-        </div>
-      </DashboardCard>
-    </PageContainer>
-  );
+  if (isError || !guideItems || (isSuccess && !guide)) {
+    return <Typography>Guide not found</Typography>;
+  }
+  if(isSuccess && guide) {
+    return (
+      <PageContainer title={guide.title}>
+        <DashboardCard title={guide.title}>
+          <div>
+            <h1>{guide.title}</h1>
+            <div dangerouslySetInnerHTML={{ __html: guide.contentHTML }} />
+            <Typography variant="body2">
+              Created by User ID: {guide.creatorId} on{" "}
+              {new Date(guide.createdAt).toLocaleDateString()}
+            </Typography>
+            <Typography variant="body2">
+              Stars: {guide.starsTotalSum}
+            </Typography>
+          </div>
+        </DashboardCard>
+      </PageContainer>
+    );
+  }
 };
 
 export default GuidePage;

From a6e1afc6c98654acc5fc194243e1262e9af02b90 Mon Sep 17 00:00:00 2001
From: Ori <ori100no@gmail.com>
Date: Tue, 20 Aug 2024 12:51:19 +0300
Subject: [PATCH 049/242] removed loader from redundant place

---
 .../new_dashboard/guides/components/GuideList/index.tsx  | 9 +--------
 1 file changed, 1 insertion(+), 8 deletions(-)

diff --git a/src/app/(admin)/new_dashboard/guides/components/GuideList/index.tsx b/src/app/(admin)/new_dashboard/guides/components/GuideList/index.tsx
index 1ab1086..e5d5a8d 100644
--- a/src/app/(admin)/new_dashboard/guides/components/GuideList/index.tsx
+++ b/src/app/(admin)/new_dashboard/guides/components/GuideList/index.tsx
@@ -7,14 +7,7 @@ type Props = {
 };
 
 const GuideList = ({ guideItems }: Props) => {
-  if (!guideItems) {
-    return (
-      <Grid item xs={12}>
-        <Typography>Loading...</Typography>
-      </Grid>
-    );
-  }
-
+ 
   return (
     <Grid container spacing={2}>
       {guideItems.length > 0 ? (

From 13fee5debe5053286f3e2d0af37aa3ceecb46fbd Mon Sep 17 00:00:00 2001
From: Ori <ori100no@gmail.com>
Date: Tue, 20 Aug 2024 13:35:33 +0300
Subject: [PATCH 050/242] added a link to the guide page from the card

---
 .../guides/components/GuideList/index.tsx     | 20 ++++++++++++++++---
 1 file changed, 17 insertions(+), 3 deletions(-)

diff --git a/src/app/(admin)/new_dashboard/guides/components/GuideList/index.tsx b/src/app/(admin)/new_dashboard/guides/components/GuideList/index.tsx
index e5d5a8d..8096848 100644
--- a/src/app/(admin)/new_dashboard/guides/components/GuideList/index.tsx
+++ b/src/app/(admin)/new_dashboard/guides/components/GuideList/index.tsx
@@ -1,18 +1,32 @@
 import { Grid, Typography } from "@mui/material";
 import GuideCard from "../GuideCard";
 import { Guide } from "@/api/types/Guide";
+import { useRouter } from "next/navigation";
 
 type Props = {
-  guideItems:Guide[];
+  guideItems: Guide[];
 };
 
 const GuideList = ({ guideItems }: Props) => {
- 
+  const router = useRouter();
+
+  const handleCardClick = (guideId: number) => {
+    router.push(`guides/${guideId}`);
+  };
+
   return (
     <Grid container spacing={2}>
       {guideItems.length > 0 ? (
         guideItems.map((guide) => (
-          <Grid item xs={12} sm={6} md={4} key={guide.guideId}>
+          <Grid
+            item
+            xs={12}
+            sm={6}
+            md={4}
+            key={guide.guideId}
+            onClick={() => handleCardClick(guide.guideId)}
+            style={{ cursor: "pointer" }}
+          >
             <GuideCard guide={guide} />
           </Grid>
         ))

From 41fdf631a8172822facc75ae6df256e73a112f17 Mon Sep 17 00:00:00 2001
From: Ori <ori100no@gmail.com>
Date: Tue, 20 Aug 2024 13:40:02 +0300
Subject: [PATCH 051/242] refactor: Remove redundant h1 element from GuidePage
 component

---
 src/app/(admin)/new_dashboard/guides/[id]/page.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/app/(admin)/new_dashboard/guides/[id]/page.tsx b/src/app/(admin)/new_dashboard/guides/[id]/page.tsx
index 578b3fe..ab90f9b 100644
--- a/src/app/(admin)/new_dashboard/guides/[id]/page.tsx
+++ b/src/app/(admin)/new_dashboard/guides/[id]/page.tsx
@@ -31,7 +31,6 @@ const GuidePage = () => {
       <PageContainer title={guide.title}>
         <DashboardCard title={guide.title}>
           <div>
-            <h1>{guide.title}</h1>
             <div dangerouslySetInnerHTML={{ __html: guide.contentHTML }} />
             <Typography variant="body2">
               Created by User ID: {guide.creatorId} on{" "}

From 72a82baa61f163c751c092a686f8e457e3b699dd Mon Sep 17 00:00:00 2001
From: Roie <roiy0987@gmail.com>
Date: Tue, 20 Aug 2024 15:05:32 +0300
Subject: [PATCH 052/242] refactor: Update Chat page components and hooks for
 new dashboard layout

---
 src/app/(admin)/new_dashboard/layout.tsx    | 51 ++++++-------
 src/app/(admin)/new_dashboard/page.tsx      | 80 +++++++++++----------
 src/app/(admin)/new_dashboard/providers.tsx | 31 ++++++++
 src/socket.ts                               |  3 +-
 4 files changed, 102 insertions(+), 63 deletions(-)
 create mode 100644 src/app/(admin)/new_dashboard/providers.tsx

diff --git a/src/app/(admin)/new_dashboard/layout.tsx b/src/app/(admin)/new_dashboard/layout.tsx
index 55ffc45..73862d0 100644
--- a/src/app/(admin)/new_dashboard/layout.tsx
+++ b/src/app/(admin)/new_dashboard/layout.tsx
@@ -1,6 +1,7 @@
 "use client";
 import { styled, Container, Box } from "@mui/material";
 import Sidebar from "./shared/sidebar/Sidebar";
+import { SocketProvider } from "./providers";
 
 const MainWrapper = styled("div")(() => ({
   display: "flex",
@@ -22,33 +23,35 @@ export default function RootLayout({
   children: React.ReactNode;
 }) {
   return (
-    <MainWrapper className="mainwrapper">
-      {/* ------------------------------------------- */}
-      {/* Sidebar */}
-      {/* ------------------------------------------- */}
-      <Sidebar isSidebarOpen={true} />
-      {/* ------------------------------------------- */}
-      {/* Main Wrapper */}
-      {/* ------------------------------------------- */}
-      <PageWrapper className="page-wrapper">
+    <SocketProvider>
+      <MainWrapper className="mainwrapper">
         {/* ------------------------------------------- */}
-        {/* PageContent */}
+        {/* Sidebar */}
         {/* ------------------------------------------- */}
-        <Container
-          maxWidth={false}
-          sx={{
-            paddingTop: "20px",
-          }}
-        >
-          {/* ------------------------------------------- */}
-          {/* Page Route */}
-          {/* ------------------------------------------- */}
-          <Box sx={{ minHeight: "calc(100vh - 170px)" }}>{children}</Box>
+        <Sidebar isSidebarOpen={true} />
+        {/* ------------------------------------------- */}
+        {/* Main Wrapper */}
+        {/* ------------------------------------------- */}
+        <PageWrapper className="page-wrapper">
           {/* ------------------------------------------- */}
-          {/* End Page */}
+          {/* PageContent */}
           {/* ------------------------------------------- */}
-        </Container>
-      </PageWrapper>
-    </MainWrapper>
+          <Container
+            maxWidth={false}
+            sx={{
+              paddingTop: "20px",
+            }}
+          >
+            {/* ------------------------------------------- */}
+            {/* Page Route */}
+            {/* ------------------------------------------- */}
+            <Box sx={{ minHeight: "calc(100vh - 170px)" }}>{children}</Box>
+            {/* ------------------------------------------- */}
+            {/* End Page */}
+            {/* ------------------------------------------- */}
+          </Container>
+        </PageWrapper>
+      </MainWrapper>
+    </SocketProvider>
   );
 }
diff --git a/src/app/(admin)/new_dashboard/page.tsx b/src/app/(admin)/new_dashboard/page.tsx
index 6ade7c5..dfb77e3 100644
--- a/src/app/(admin)/new_dashboard/page.tsx
+++ b/src/app/(admin)/new_dashboard/page.tsx
@@ -6,20 +6,20 @@ import { Box } from "@mui/material";
 import ContactList from "./components/ContactList";
 import ChatHeader from "./components/ChatHeader";
 import MessageList from "./components/MessageList";
-import { useChat, useContacts } from "./hooks";
-import { useSocket } from "@/hooks";
+import { useContacts } from "./hooks";
+import { useSocket } from "./providers";
+import { useSelectedContact } from "./hooks/useSelectedContact";
 
 const Page = () => {
-  const { contacts, selectedChat, handleChatSelect } = useContacts();
-  const {
-    chatMessages,
-    handleSendMessage,
-    newMessage,
-    handleChange,
-    isNote,
-    handleChangeNote,
-  } = useChat(selectedChat?.chatId || null);
-  useSocket();
+  const socket = useSocket();
+  const { selectedContact, handleContactSelect } = useSelectedContact({
+    socket,
+  });
+  const { contacts } = useContacts({
+    socket,
+    handleContactSelect,
+  });
+
   return (
     <PageContainer title="Dashboard">
       <DashboardCard title="Chat">
@@ -34,37 +34,41 @@ const Page = () => {
         >
           {/* Contact List */}
           <ContactList
-            chats={contacts}
-            selectedChat={selectedChat}
-            onSelectChat={handleChatSelect}
+            contacts={contacts}
+            selectedContact={selectedContact}
+            onSelectContact={handleContactSelect}
           />
 
           {/* Chat Container */}
-          <Box
-            sx={{
-              display: "flex",
-              flexDirection: "column",
-              width: "70%",
-              height: "100%",
-              paddingLeft: 2,
-            }}
-          >
-            {/* Chat Header */}
-            <ChatHeader selectedContact={selectedChat} />
+          {selectedContact && (
+            <Box
+              sx={{
+                display: "flex",
+                flexDirection: "column",
+                width: "70%",
+                height: "100%",
+                paddingLeft: 2,
+              }}
+            >
+              {/* Chat Header */}
+              {selectedContact && (
+                <ChatHeader selectedContact={selectedContact} />
+              )}
 
-            {/* Message List */}
-            <MessageList messages={chatMessages} />
+              {/* Message List */}
+              {selectedContact && (
+                <MessageList
+                  // messages={contactMessages}
+                  chatId={selectedContact.chatId}
+                />
+              )}
 
-            {/* Input and Send Button */}
-            <MessageInput
-              newMessage={newMessage}
-              onMessageChange={handleChange}
-              handleChangeNote={handleChangeNote}
-              isNote={isNote}
-              onSend={() => selectedChat && handleSendMessage()}
-              disabled={!selectedChat}
-            />
-          </Box>
+              {/* Input and Send Button */}
+              {selectedContact && (
+                <MessageInput chatId={selectedContact.chatId} />
+              )}
+            </Box>
+          )}
         </Box>
       </DashboardCard>
     </PageContainer>
diff --git a/src/app/(admin)/new_dashboard/providers.tsx b/src/app/(admin)/new_dashboard/providers.tsx
new file mode 100644
index 0000000..1878bc4
--- /dev/null
+++ b/src/app/(admin)/new_dashboard/providers.tsx
@@ -0,0 +1,31 @@
+"use client";
+import React, { createContext, useContext, ReactNode, useMemo } from "react";
+import socket from "@/socket";
+import { Socket } from "socket.io-client";
+
+const SocketContext = createContext<Socket | null>(null);
+
+export const useSocket = (): Socket => {
+  const context = useContext(SocketContext);
+  if (!context) {
+    throw new Error("useSocket must be used within a SocketProvider");
+  }
+  return context;
+};
+
+interface SocketProviderProps {
+  children: ReactNode;
+}
+
+export const SocketProvider: React.FC<SocketProviderProps> = ({ children }) => {
+  const socketInstance = useMemo(() => {
+    socket.connect();
+    return socket;
+  }, []);
+
+  return (
+    <SocketContext.Provider value={socketInstance}>
+      {children}
+    </SocketContext.Provider>
+  );
+};
diff --git a/src/socket.ts b/src/socket.ts
index 699b5c3..10b1911 100644
--- a/src/socket.ts
+++ b/src/socket.ts
@@ -1,3 +1,4 @@
+"use client";
 import { io, Socket } from "socket.io-client";
 import { z } from "zod";
 
@@ -13,7 +14,7 @@ if (!socketUrl.success) {
 }
 
 let socket: Socket = io(socketUrl.data, {
-  transports: ["websocket", "polling"],
+  transports: ["websocket"],
   autoConnect: false,
 });
 

From b6630e45ac2aadca2e827412277174d2e92c2508 Mon Sep 17 00:00:00 2001
From: Roie <roiy0987@gmail.com>
Date: Tue, 20 Aug 2024 15:08:43 +0300
Subject: [PATCH 053/242] refactor: Update ContactList component to use
 contacts instead of chats

---
 .../components/ContactList/index.tsx          | 22 ++++-----
 src/app/(admin)/new_dashboard/hooks/index.ts  |  1 -
 .../new_dashboard/hooks/useContacts.ts        | 48 ++++++++++---------
 3 files changed, 36 insertions(+), 35 deletions(-)

diff --git a/src/app/(admin)/new_dashboard/components/ContactList/index.tsx b/src/app/(admin)/new_dashboard/components/ContactList/index.tsx
index 75173f8..da7b03e 100644
--- a/src/app/(admin)/new_dashboard/components/ContactList/index.tsx
+++ b/src/app/(admin)/new_dashboard/components/ContactList/index.tsx
@@ -9,12 +9,12 @@ import {
 import { Chat } from "@/types";
 
 type Props = {
-  chats: Chat[];
-  selectedChat: Chat | null;
-  onSelectChat: (chat: Chat) => void;
+  contacts: Chat[];
+  selectedContact: Chat | null;
+  onSelectContact: (chat: Chat) => void;
 };
 
-const ContactList = ({ chats, selectedChat, onSelectChat }: Props) => {
+const ContactList = ({ contacts, onSelectContact, selectedContact }: Props) => {
   return (
     <Box
       sx={{
@@ -24,24 +24,24 @@ const ContactList = ({ chats, selectedChat, onSelectChat }: Props) => {
       }}
     >
       <List>
-        {chats.length === 0 ? (
+        {contacts.length === 0 ? (
           <Box sx={{ padding: "16px", textAlign: "center", color: "#888" }}>
             No chats yet!
           </Box>
         ) : (
           <List>
-            {chats.map((chat, index) => (
+            {contacts.map((contact, index) => (
               <Box key={index} sx={{ padding: "0 8px" }}>
                 <ListItemButton
                   selected={
-                    selectedChat?.user?.username === chat.user?.username
+                    selectedContact?.user?.userId === contact.user?.userId
                   }
-                  onClick={() => onSelectChat(chat)}
+                  onClick={() => onSelectContact(contact)}
                   sx={{
                     backgroundColor:
-                      selectedChat?.user?.username === chat.user?.username
+                      selectedContact?.user?.userId === contact.user?.userId
                         ? "#f5f5f5"
-                        : "inherit",
+                        : "#ffffff",
                     borderRadius: 0,
                     marginRight: 0,
                   }}
@@ -52,7 +52,7 @@ const ContactList = ({ chats, selectedChat, onSelectChat }: Props) => {
                     />
                   </ListItemAvatar>
                   <ListItemText
-                    primary={chat.user?.username}
+                    primary={contact.user?.username}
                     // secondary={chat.}
                   />
                 </ListItemButton>
diff --git a/src/app/(admin)/new_dashboard/hooks/index.ts b/src/app/(admin)/new_dashboard/hooks/index.ts
index f683fa9..34eddca 100644
--- a/src/app/(admin)/new_dashboard/hooks/index.ts
+++ b/src/app/(admin)/new_dashboard/hooks/index.ts
@@ -1,2 +1 @@
-export * from "./useChat";
 export * from "./useContacts";
diff --git a/src/app/(admin)/new_dashboard/hooks/useContacts.ts b/src/app/(admin)/new_dashboard/hooks/useContacts.ts
index 778a4e0..8115c91 100644
--- a/src/app/(admin)/new_dashboard/hooks/useContacts.ts
+++ b/src/app/(admin)/new_dashboard/hooks/useContacts.ts
@@ -1,44 +1,46 @@
+"use client";
 import { useEffect, useState } from "react";
 import { Chat } from "@/types";
 import { useChats } from "@/hooks/api/chatHooks";
-import { SuccessResponse } from "@/api/base.client";
-import socket from "@/socket";
+import { ClientResponse, SuccessResponse } from "@/api/base.client";
+import { useOnFetch } from "@/common/hooks/useOnFetch";
+import { Socket } from "socket.io-client";
 
-export const useContacts = () => {
-  const [contacts, setContacts] = useState<Chat[]>([]);
-  const [selectedChat, setSelectedChat] = useState<Chat | null>(null);
+type Props = {
+  socket: Socket;
+  handleContactSelect: (contact: Chat) => void;
+};
 
+export const useContacts = ({ socket, handleContactSelect }: Props) => {
+  const [contacts, setContacts] = useState<Chat[]>([]);
   const { isError, data, error } = useChats();
 
-  useEffect(() => {
-    if (data) {
-      const { data: chats } = data as SuccessResponse<Chat[]>;
-      setContacts(chats);
-      setSelectedChat(chats[0]);
-    }
-  }, [data]);
-
-  if (isError) {
-    console.error(error);
-  }
+  useOnFetch(
+    (clientResponse: ClientResponse<Chat[]>) => {
+      if (isError) {
+        throw error;
+      } else {
+        const successResponse = clientResponse as SuccessResponse<Chat[]>;
+        const chats = successResponse.data;
+        setContacts(() => chats);
+        handleContactSelect(chats[0]);
+      }
+    },
+    !!data || isError,
+    data
+  );
 
   useEffect(() => {
-    //If user creates a new chat
     socket.on("chatCreated", (chat: Chat) => {
-      setContacts((prevChats) => [...prevChats, chat]);
+      setContacts((prevContacts) => [...prevContacts, chat]);
     });
 
     return () => {
       socket.off("chatCreated");
     };
   }, []);
-  const handleChatSelect = (chat: Chat) => {
-    setSelectedChat(chat);
-  };
 
   return {
     contacts,
-    selectedChat,
-    handleChatSelect,
   };
 };

From 67caa9b0dde982841650a7776f9d0145c57a9c93 Mon Sep 17 00:00:00 2001
From: Roie <roiy0987@gmail.com>
Date: Tue, 20 Aug 2024 15:09:01 +0300
Subject: [PATCH 054/242] refactor: Update MessageInput component to use custom
 hook for sending messages

---
 .../MessageInput/hooks/useMessage.ts          | 65 +++++++++++++++++++
 .../components/MessageInput/index.tsx         | 45 +++++--------
 2 files changed, 83 insertions(+), 27 deletions(-)
 create mode 100644 src/app/(admin)/new_dashboard/components/MessageInput/hooks/useMessage.ts

diff --git a/src/app/(admin)/new_dashboard/components/MessageInput/hooks/useMessage.ts b/src/app/(admin)/new_dashboard/components/MessageInput/hooks/useMessage.ts
new file mode 100644
index 0000000..fbba0b6
--- /dev/null
+++ b/src/app/(admin)/new_dashboard/components/MessageInput/hooks/useMessage.ts
@@ -0,0 +1,65 @@
+"use client";
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Socket } from "socket.io-client";
+
+const schema = z.object({
+  message: z
+    .string()
+    .trim()
+    .min(1)
+    .refine((msg) => msg.split("\n").length <= 10, {
+      message: "Message should not exceed 10 lines",
+    }),
+});
+
+type MessageRequest = {
+  message: string;
+};
+type Props = {
+  chatId: number;
+  socket: Socket;
+};
+
+export const useMessage = ({ chatId, socket }: Props) => {
+  const [isNote, setIsNote] = useState<boolean>(false);
+  const {
+    register,
+    handleSubmit,
+    reset,
+    formState: { errors },
+  } = useForm<MessageRequest>({
+    resolver: zodResolver(schema),
+    mode: "onChange",
+    reValidateMode: "onChange",
+  });
+
+  const handleSendMessage = (messageRequest: MessageRequest) => {
+    const newMessage = messageRequest.message;
+    const data = {
+      chatId: chatId,
+      content: newMessage,
+    };
+    const allMessage = {
+      data: data,
+      isSupportSender: true,
+      isNote: isNote,
+    };
+
+    if (chatId) {
+      socket.emit("message", allMessage);
+      reset({
+        message: "",
+      });
+    }
+  };
+  return {
+    isNote,
+    handleChangeNote: () => setIsNote(!isNote),
+    register,
+    handleSubmit: handleSubmit(handleSendMessage),
+    errors,
+  };
+};
diff --git a/src/app/(admin)/new_dashboard/components/MessageInput/index.tsx b/src/app/(admin)/new_dashboard/components/MessageInput/index.tsx
index 049dc85..521b6c2 100644
--- a/src/app/(admin)/new_dashboard/components/MessageInput/index.tsx
+++ b/src/app/(admin)/new_dashboard/components/MessageInput/index.tsx
@@ -1,29 +1,17 @@
-import {
-  Box,
-  TextField,
-  IconButton,
-  TextareaAutosize,
-  Button,
-} from "@mui/material";
+import { Box, TextField, IconButton, Button } from "@mui/material";
 import SendIcon from "@mui/icons-material/Send";
+import { useMessage } from "./hooks/useMessage";
+import { useSocket } from "../../providers";
 
-type Props = {
-  newMessage: string;
-  onMessageChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
-  onSend: () => void;
-  disabled: boolean;
-  isNote: boolean;
-  handleChangeNote: () => void;
+type MessageInputProps = {
+  chatId: number;
 };
 
-const MessageInput = ({
-  newMessage,
-  onMessageChange,
-  isNote,
-  handleChangeNote,
-  onSend,
-  disabled,
-}: Props) => {
+const MessageInput = ({ chatId }: MessageInputProps) => {
+  const socket = useSocket();
+  const { errors, handleChangeNote, handleSubmit, isNote, register } =
+    useMessage({ chatId, socket });
+
   return (
     <Box
       sx={{
@@ -67,21 +55,24 @@ const MessageInput = ({
           variant="outlined"
           size="small"
           placeholder="Type a message..."
-          value={newMessage}
-          onChange={onMessageChange}
-          disabled={disabled}
+          id="message"
+          autoComplete="message"
+          autoFocus
+          {...register("message")}
           multiline
           minRows={5}
           maxRows={10}
           InputProps={{
             style: { overflow: "hidden" },
           }}
+          error={!!errors.message}
+          helperText={errors.message ? errors.message.message : ""}
         />
         <IconButton
           color="primary"
-          onClick={onSend}
+          onClick={handleSubmit}
           sx={{ ml: 1 }}
-          disabled={disabled}
+          // disabled={disabled}
         >
           <SendIcon />
         </IconButton>

From 167c162d23d95a9d938464e2301d29f8482bc086 Mon Sep 17 00:00:00 2001
From: Roie <roiy0987@gmail.com>
Date: Tue, 20 Aug 2024 15:09:28 +0300
Subject: [PATCH 055/242] refactor: Update MessageList component to include
 real-time message updates

---
 .../MessageList/hooks/useMessageList.ts       | 35 +++++++++++++++++++
 .../MessageList/hooks/useOnMessageReceived.ts | 21 +++++++++++
 .../components/MessageList/index.tsx          | 18 +++++++---
 3 files changed, 69 insertions(+), 5 deletions(-)
 create mode 100644 src/app/(admin)/new_dashboard/components/MessageList/hooks/useMessageList.ts
 create mode 100644 src/app/(admin)/new_dashboard/components/MessageList/hooks/useOnMessageReceived.ts

diff --git a/src/app/(admin)/new_dashboard/components/MessageList/hooks/useMessageList.ts b/src/app/(admin)/new_dashboard/components/MessageList/hooks/useMessageList.ts
new file mode 100644
index 0000000..cc95cb2
--- /dev/null
+++ b/src/app/(admin)/new_dashboard/components/MessageList/hooks/useMessageList.ts
@@ -0,0 +1,35 @@
+"use client";
+import { ClientResponse, SuccessResponse } from "@/api/base.client";
+import { useOnFetch } from "@/common/hooks/useOnFetch";
+import { useChatById } from "@/hooks/api/chatHooks";
+import { Chat, Message } from "@/types";
+import { useState } from "react";
+
+type Props = {
+  chatId: number;
+};
+
+export const useMessageList = ({ chatId }: Props) => {
+  const [chatMessages, setChatMessages] = useState<Message[]>([]);
+
+  const { data, error, isError } = useChatById(chatId);
+
+  useOnFetch(
+    (clientResponse: ClientResponse<Chat>) => {
+      if (isError) {
+        throw error;
+      } else {
+        const successResponse = clientResponse as SuccessResponse<Chat>;
+        const messages = successResponse.data.messages as Message[];
+        setChatMessages(messages);
+      }
+    },
+    !!data || isError,
+    data,
+    false
+  );
+
+  return {
+    messages: chatMessages,
+  };
+};
diff --git a/src/app/(admin)/new_dashboard/components/MessageList/hooks/useOnMessageReceived.ts b/src/app/(admin)/new_dashboard/components/MessageList/hooks/useOnMessageReceived.ts
new file mode 100644
index 0000000..4ae3cc8
--- /dev/null
+++ b/src/app/(admin)/new_dashboard/components/MessageList/hooks/useOnMessageReceived.ts
@@ -0,0 +1,21 @@
+"use client";
+import { Message } from "@/types";
+import { useEffect, useState } from "react";
+import { Socket } from "socket.io-client";
+
+type Props = {
+  socket: Socket;
+};
+export const useOnMessagesReceived = ({ socket }: Props) => {
+  const [newMessages, setNewMessages] = useState<Message[]>([]);
+  useEffect(() => {
+    socket.on("newMessage", (message: Message) => {
+      setNewMessages((prev) => [...prev, message]);
+    });
+
+    return () => {
+      socket.off("newMessage");
+    };
+  }, []);
+  return { newMessages };
+};
diff --git a/src/app/(admin)/new_dashboard/components/MessageList/index.tsx b/src/app/(admin)/new_dashboard/components/MessageList/index.tsx
index 6777c08..db248cb 100644
--- a/src/app/(admin)/new_dashboard/components/MessageList/index.tsx
+++ b/src/app/(admin)/new_dashboard/components/MessageList/index.tsx
@@ -1,10 +1,18 @@
 import { Box, List, ListItem, Typography } from "@mui/material";
-import { Message } from "@/types";
+import { useMessageList } from "./hooks/useMessageList";
+import { useSocket } from "../../providers";
+import { useOnMessagesReceived } from "./hooks/useOnMessageReceived";
 type Props = {
-  messages: Message[];
+  chatId: number;
 };
 
-const MessageList = ({ messages }: Props) => {
+const MessageList = ({ chatId }: Props) => {
+  const socket = useSocket();
+  const { messages } = useMessageList({ chatId });
+  const { newMessages } = useOnMessagesReceived({ socket });
+  const allMessages = messages.concat(
+    newMessages.length > 0 ? newMessages : []
+  );
   return (
     <Box
       sx={{
@@ -14,7 +22,7 @@ const MessageList = ({ messages }: Props) => {
       }}
     >
       <List>
-        {messages.map((msg, index) => (
+        {allMessages.map((msg, index) => (
           <ListItem
             key={index}
             sx={{
@@ -32,7 +40,7 @@ const MessageList = ({ messages }: Props) => {
                 backgroundColor: msg.isSupportSender
                   ? !msg.isNote
                     ? "lightblue"
-                    : "rgba(254, 237, 175)"
+                    : (theme) => theme.palette.note.main
                   : "lightgray",
                 borderRadius: 2,
                 padding: 1,

From e23a72ef30475800938ac36f0d2b338482e662cc Mon Sep 17 00:00:00 2001
From: Roie <roiy0987@gmail.com>
Date: Tue, 20 Aug 2024 15:09:36 +0300
Subject: [PATCH 056/242] refactor: Remove unused useChat hook

---
 .../(admin)/new_dashboard/hooks/useChat.ts    | 77 -------------------
 1 file changed, 77 deletions(-)
 delete mode 100644 src/app/(admin)/new_dashboard/hooks/useChat.ts

diff --git a/src/app/(admin)/new_dashboard/hooks/useChat.ts b/src/app/(admin)/new_dashboard/hooks/useChat.ts
deleted file mode 100644
index 132bfe3..0000000
--- a/src/app/(admin)/new_dashboard/hooks/useChat.ts
+++ /dev/null
@@ -1,77 +0,0 @@
-import { useEffect, useState } from "react";
-import { Chat, Message } from "@/types";
-import socket from "@/socket";
-import { useChatById } from "@/hooks/api/chatHooks";
-import { SuccessResponse } from "@/api/base.client";
-
-export const useChat = (chatId: number | null) => {
-  const [chatMessages, setChatMessages] = useState<Message[]>([]);
-  const [newMessage, setNewMessage] = useState<string>("");
-  const [isNote, setIsNote] = useState<boolean>(false);
-
-  const { data, error, isError } = useChatById(chatId);
-  useEffect(() => {
-    if (chatId) {
-      socket.emit("join", { chatId });
-
-      socket.on("newMessage", (message: Message) => {
-        setChatMessages((prevMessages) => [...prevMessages, message]);
-      });
-
-      return () => {
-        socket.off("newMessage");
-        socket.emit("leave", { chatId });
-      };
-    }
-  }, [chatId]);
-
-  useEffect(() => {
-    if (isError) {
-      console.error(error);
-    }
-    if (data) {
-      const { data: chat } = data as SuccessResponse<Chat>;
-      const messages = chat.messages as Message[];
-      setChatMessages(messages);
-    }
-  }, [data, error, isError]);
-
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    if (event.target.value.split("\n").length > 10) return;
-    setNewMessage(event.target.value);
-  };
-
-  const handleSendMessage = () => {
-    if (newMessage.trim() === "") {
-      return;
-    }
-
-    const data = {
-      chatId: chatId,
-      content: newMessage,
-    };
-    const allMessage = {
-      data: data,
-      isSupportSender: true,
-      isNote: isNote,
-    };
-    console.log("Message:", newMessage);
-
-    if (chatId) {
-      const fd = new FormData();
-      fd.append("data", JSON.stringify(data));
-      fd.append("isSupportSender", "true");
-      fd.append("isNote", isNote.toString());
-      socket.emit("message", allMessage);
-      setNewMessage("");
-    }
-  };
-  return {
-    chatMessages,
-    handleSendMessage,
-    newMessage,
-    handleChange,
-    isNote,
-    handleChangeNote: () => setIsNote(!isNote),
-  };
-};

From df8d02c89b4de1c29cbca64b4c184c6c1d5594c0 Mon Sep 17 00:00:00 2001
From: Roie <roiy0987@gmail.com>
Date: Tue, 20 Aug 2024 15:10:14 +0300
Subject: [PATCH 057/242] refactor: Add useSelectedContact hook for managing
 selected contact in new dashboard

---
 .../new_dashboard/hooks/useSelectedContact.ts | 30 +++++++++++++++++++
 src/common/hooks/useOnFetch.ts                | 17 +++++++++++
 src/hooks/api/chatHooks.ts                    | 14 +++++----
 3 files changed, 55 insertions(+), 6 deletions(-)
 create mode 100644 src/app/(admin)/new_dashboard/hooks/useSelectedContact.ts
 create mode 100644 src/common/hooks/useOnFetch.ts

diff --git a/src/app/(admin)/new_dashboard/hooks/useSelectedContact.ts b/src/app/(admin)/new_dashboard/hooks/useSelectedContact.ts
new file mode 100644
index 0000000..dfab9e8
--- /dev/null
+++ b/src/app/(admin)/new_dashboard/hooks/useSelectedContact.ts
@@ -0,0 +1,30 @@
+"use client";
+import { useEffect, useState } from "react";
+import { Chat } from "@/types";
+import { Socket } from "socket.io-client";
+
+type Props = {
+  socket: Socket;
+};
+
+export const useSelectedContact = ({ socket }: Props) => {
+  const [selectedContact, setSelectedContact] = useState<Chat | null>(null);
+
+  useEffect(() => {
+    if (socket && selectedContact) {
+      socket.emit("join", { chatId: selectedContact.chatId });
+      return () => {
+        socket.emit("leave", { chatId: selectedContact.chatId });
+      };
+    }
+  }, [selectedContact]);
+
+  const handleContactSelect = (chat: Chat) => {
+    setSelectedContact(chat);
+  };
+
+  return {
+    selectedContact,
+    handleContactSelect,
+  };
+};
diff --git a/src/common/hooks/useOnFetch.ts b/src/common/hooks/useOnFetch.ts
new file mode 100644
index 0000000..e4d8123
--- /dev/null
+++ b/src/common/hooks/useOnFetch.ts
@@ -0,0 +1,17 @@
+import { useEffect, useRef } from "react";
+
+export const useOnFetch = <T>(
+  onFetched: (data: T) => void,
+  isFetched: boolean,
+  data: T | undefined,
+  fetchOnce: boolean = true
+) => {
+  const hasFetched = useRef(false);
+
+  useEffect(() => {
+    if (isFetched && data && !hasFetched.current) {
+      onFetched(data);
+      hasFetched.current = fetchOnce;
+    }
+  }, [data, isFetched, onFetched]);
+};
diff --git a/src/hooks/api/chatHooks.ts b/src/hooks/api/chatHooks.ts
index 9b2ed31..e3f6078 100644
--- a/src/hooks/api/chatHooks.ts
+++ b/src/hooks/api/chatHooks.ts
@@ -1,19 +1,21 @@
+import { ClientResponse, SuccessResponse } from "@/api/base.client";
 import { ChatClient } from "@/api/chat.client";
+import { ChatResponse } from "@/api/types/chat";
+import { Chat } from "@/types";
 import { useQuery } from "@tanstack/react-query";
 
 const chatClient = new ChatClient();
 
 export function useChats() {
-  return useQuery({
+  return useQuery<ClientResponse<ChatResponse[]>, Error>({
     queryKey: ["chats"],
     queryFn: () => chatClient.chats(),
   });
 }
 
-export function useChatById(chatId: number | null) {
-  return useQuery({
-    queryKey: chatId ? ["chats", chatId] : ["random"],
-    queryFn: chatId ? () => chatClient.chatById({ chatId }) : undefined,
-    enabled: !!chatId,
+export function useChatById(chatId: number) {
+  return useQuery<ClientResponse<ChatResponse>, Error>({
+    queryKey: ["chatID", chatId],
+    queryFn: () => chatClient.chatById({ chatId }),
   });
 }

From de8155512eb78735cf6ccb302efc00785be5d3fe Mon Sep 17 00:00:00 2001
From: Roie <roiy0987@gmail.com>
Date: Tue, 20 Aug 2024 15:10:27 +0300
Subject: [PATCH 058/242] refactor: Update theme file to include note color in
 the palette

---
 src/util/theme.ts | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/src/util/theme.ts b/src/util/theme.ts
index aae9f50..55c7c5d 100644
--- a/src/util/theme.ts
+++ b/src/util/theme.ts
@@ -1,4 +1,8 @@
-import { createTheme } from "@mui/material/styles";
+import {
+  createTheme,
+  PaletteColorOptions,
+  SimplePaletteColorOptions,
+} from "@mui/material/styles";
 import { Plus_Jakarta_Sans } from "next/font/google";
 
 export const plus = Plus_Jakarta_Sans({
@@ -7,10 +11,21 @@ export const plus = Plus_Jakarta_Sans({
   display: "swap",
   fallback: ["Helvetica", "Arial", "sans-serif"],
 });
+declare module "@mui/material/styles" {
+  interface Palette {
+    note: SimplePaletteColorOptions;
+  }
+  interface PaletteOptions {
+    note?: SimplePaletteColorOptions;
+  }
+}
 
 const baselightTheme = createTheme({
   direction: "ltr",
   palette: {
+    note: {
+      main: "rgba(254, 237, 175)",
+    },
     primary: {
       main: "#5D87FF",
       light: "#ECF2FF",
@@ -45,6 +60,7 @@ const baselightTheme = createTheme({
       dark: "#ae8e59",
       contrastText: "#ffffff",
     },
+
     grey: {
       100: "#F2F6FA",
       200: "#EAEFF4",

From 012a4f63b1d75a307f79298bd0352aa36ddeaf9e Mon Sep 17 00:00:00 2001
From: Roie <roiy0987@gmail.com>
Date: Tue, 20 Aug 2024 15:22:54 +0300
Subject: [PATCH 059/242] Client Response type refactor

---
 .../components/MessageList/hooks/useMessageList.ts    |  3 +--
 src/app/(admin)/new_dashboard/hooks/useContacts.ts    |  3 +--
 src/app/(public)/login/hooks/useLoginForm.ts          |  3 +--
 src/types/clientResponse.type.ts                      | 11 +++++++++++
 4 files changed, 14 insertions(+), 6 deletions(-)
 create mode 100644 src/types/clientResponse.type.ts

diff --git a/src/app/(admin)/new_dashboard/components/MessageList/hooks/useMessageList.ts b/src/app/(admin)/new_dashboard/components/MessageList/hooks/useMessageList.ts
index cc95cb2..b92e30c 100644
--- a/src/app/(admin)/new_dashboard/components/MessageList/hooks/useMessageList.ts
+++ b/src/app/(admin)/new_dashboard/components/MessageList/hooks/useMessageList.ts
@@ -1,8 +1,7 @@
 "use client";
-import { ClientResponse, SuccessResponse } from "@/api/base.client";
 import { useOnFetch } from "@/common/hooks/useOnFetch";
 import { useChatById } from "@/hooks/api/chatHooks";
-import { Chat, Message } from "@/types";
+import { Chat, Message, ClientResponse, SuccessResponse } from "@/types";
 import { useState } from "react";
 
 type Props = {
diff --git a/src/app/(admin)/new_dashboard/hooks/useContacts.ts b/src/app/(admin)/new_dashboard/hooks/useContacts.ts
index 8115c91..23f195e 100644
--- a/src/app/(admin)/new_dashboard/hooks/useContacts.ts
+++ b/src/app/(admin)/new_dashboard/hooks/useContacts.ts
@@ -1,8 +1,7 @@
 "use client";
 import { useEffect, useState } from "react";
-import { Chat } from "@/types";
+import { Chat, ClientResponse, SuccessResponse } from "@/types";
 import { useChats } from "@/hooks/api/chatHooks";
-import { ClientResponse, SuccessResponse } from "@/api/base.client";
 import { useOnFetch } from "@/common/hooks/useOnFetch";
 import { Socket } from "socket.io-client";
 
diff --git a/src/app/(public)/login/hooks/useLoginForm.ts b/src/app/(public)/login/hooks/useLoginForm.ts
index d7ebce8..95c7213 100644
--- a/src/app/(public)/login/hooks/useLoginForm.ts
+++ b/src/app/(public)/login/hooks/useLoginForm.ts
@@ -4,8 +4,7 @@ import { schema } from "../validations/schema";
 import { LoginRequest } from "@/api/types/login";
 import { useRouter } from "next/navigation";
 import { useLogin } from "@/hooks";
-import { SuccessResponse } from "@/api/base.client";
-import { User } from "@/types";
+import { User, SuccessResponse } from "@/types";
 
 const useLoginForm = () => {
   const {
diff --git a/src/types/clientResponse.type.ts b/src/types/clientResponse.type.ts
new file mode 100644
index 0000000..0a0622b
--- /dev/null
+++ b/src/types/clientResponse.type.ts
@@ -0,0 +1,11 @@
+export interface ErrorResponse {
+  statusCode: number;
+  message: string;
+  error: string;
+}
+
+export interface SuccessResponse<T> {
+  data: T;
+}
+
+export type ClientResponse<T> = SuccessResponse<T> | ErrorResponse;

From 6c2170540f26bf5aaca04214e83d92abeae79f35 Mon Sep 17 00:00:00 2001
From: Roie <roiy0987@gmail.com>
Date: Tue, 20 Aug 2024 15:23:04 +0300
Subject: [PATCH 060/242] refactor: Update useChats and useChatById hooks to
 use new ChatResponse type

---
 src/hooks/api/chatHooks.ts | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/hooks/api/chatHooks.ts b/src/hooks/api/chatHooks.ts
index e3f6078..d9106a1 100644
--- a/src/hooks/api/chatHooks.ts
+++ b/src/hooks/api/chatHooks.ts
@@ -1,20 +1,18 @@
-import { ClientResponse, SuccessResponse } from "@/api/base.client";
 import { ChatClient } from "@/api/chat.client";
-import { ChatResponse } from "@/api/types/chat";
-import { Chat } from "@/types";
+import { Chat, ClientResponse } from "@/types";
 import { useQuery } from "@tanstack/react-query";
 
 const chatClient = new ChatClient();
 
 export function useChats() {
-  return useQuery<ClientResponse<ChatResponse[]>, Error>({
+  return useQuery<ClientResponse<Chat[]>, Error>({
     queryKey: ["chats"],
     queryFn: () => chatClient.chats(),
   });
 }
 
 export function useChatById(chatId: number) {
-  return useQuery<ClientResponse<ChatResponse>, Error>({
+  return useQuery<ClientResponse<Chat>, Error>({
     queryKey: ["chatID", chatId],
     queryFn: () => chatClient.chatById({ chatId }),
   });

From 2eb51baedee1fdee1e63b019e68a10829d4001ac Mon Sep 17 00:00:00 2001
From: Roie <roiy0987@gmail.com>
Date: Tue, 20 Aug 2024 15:23:25 +0300
Subject: [PATCH 061/242] refactor: Import ClientResponse and ErrorResponse
 types in base.client.ts

---
 src/api/base.client.ts | 12 +-----------
 1 file changed, 1 insertion(+), 11 deletions(-)

diff --git a/src/api/base.client.ts b/src/api/base.client.ts
index e50f006..7b594c5 100644
--- a/src/api/base.client.ts
+++ b/src/api/base.client.ts
@@ -1,14 +1,4 @@
-interface ErrorResponse {
-  statusCode: number;
-  message: string;
-  error: string;
-}
-
-export interface SuccessResponse<T> {
-  data: T;
-}
-
-type ClientResponse<T> = SuccessResponse<T> | ErrorResponse;
+import { ClientResponse, ErrorResponse } from "@/types";
 
 class ApiError extends Error {
   statusCode: number;

From be86ee61351e25df1de3bbfc00e7d0421c43116b Mon Sep 17 00:00:00 2001
From: Roie <roiy0987@gmail.com>
Date: Tue, 20 Aug 2024 15:24:25 +0300
Subject: [PATCH 062/242] refactor: Import ClientResponse and ErrorResponse
 types in base.client.ts

---
 src/types/index.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/types/index.ts b/src/types/index.ts
index 2fc1790..a47204f 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -1,4 +1,5 @@
 export * from "./chat.type";
 export * from "./message.type";
 export * from "./user.type";
-export * from "./guide.type"
+export * from "./guide.type";
+export * from "./clientResponse.type";

From 7c9811d0833b2fc605befd6cbd4320a6e4f74908 Mon Sep 17 00:00:00 2001
From: Roie <roiy0987@gmail.com>
Date: Tue, 20 Aug 2024 16:06:56 +0300
Subject: [PATCH 063/242] refactor: Update layout component to include
 SocketProvider in new dashboard

---
 src/app/(admin)/new_dashboard/layout.tsx | 51 +++++++++++-------------
 src/app/layout.tsx                       |  6 ++-
 src/app/providers.tsx                    | 30 ++++++++++++++
 3 files changed, 58 insertions(+), 29 deletions(-)

diff --git a/src/app/(admin)/new_dashboard/layout.tsx b/src/app/(admin)/new_dashboard/layout.tsx
index 73862d0..55ffc45 100644
--- a/src/app/(admin)/new_dashboard/layout.tsx
+++ b/src/app/(admin)/new_dashboard/layout.tsx
@@ -1,7 +1,6 @@
 "use client";
 import { styled, Container, Box } from "@mui/material";
 import Sidebar from "./shared/sidebar/Sidebar";
-import { SocketProvider } from "./providers";
 
 const MainWrapper = styled("div")(() => ({
   display: "flex",
@@ -23,35 +22,33 @@ export default function RootLayout({
   children: React.ReactNode;
 }) {
   return (
-    <SocketProvider>
-      <MainWrapper className="mainwrapper">
+    <MainWrapper className="mainwrapper">
+      {/* ------------------------------------------- */}
+      {/* Sidebar */}
+      {/* ------------------------------------------- */}
+      <Sidebar isSidebarOpen={true} />
+      {/* ------------------------------------------- */}
+      {/* Main Wrapper */}
+      {/* ------------------------------------------- */}
+      <PageWrapper className="page-wrapper">
         {/* ------------------------------------------- */}
-        {/* Sidebar */}
+        {/* PageContent */}
         {/* ------------------------------------------- */}
-        <Sidebar isSidebarOpen={true} />
-        {/* ------------------------------------------- */}
-        {/* Main Wrapper */}
-        {/* ------------------------------------------- */}
-        <PageWrapper className="page-wrapper">
+        <Container
+          maxWidth={false}
+          sx={{
+            paddingTop: "20px",
+          }}
+        >
+          {/* ------------------------------------------- */}
+          {/* Page Route */}
+          {/* ------------------------------------------- */}
+          <Box sx={{ minHeight: "calc(100vh - 170px)" }}>{children}</Box>
           {/* ------------------------------------------- */}
-          {/* PageContent */}
+          {/* End Page */}
           {/* ------------------------------------------- */}
-          <Container
-            maxWidth={false}
-            sx={{
-              paddingTop: "20px",
-            }}
-          >
-            {/* ------------------------------------------- */}
-            {/* Page Route */}
-            {/* ------------------------------------------- */}
-            <Box sx={{ minHeight: "calc(100vh - 170px)" }}>{children}</Box>
-            {/* ------------------------------------------- */}
-            {/* End Page */}
-            {/* ------------------------------------------- */}
-          </Container>
-        </PageWrapper>
-      </MainWrapper>
-    </SocketProvider>
+        </Container>
+      </PageWrapper>
+    </MainWrapper>
   );
 }
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 068c902..8c4f0ce 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -2,7 +2,7 @@
 
 import { baselightTheme } from "@/util/theme";
 import "./globals.css";
-import { Providers } from "./providers";
+import { Providers, SocketProvider } from "./providers";
 import { CssBaseline, ThemeProvider } from "@mui/material";
 
 export default function RootLayout({
@@ -15,7 +15,9 @@ export default function RootLayout({
       <body style={{ height: "100vh" }}>
         <ThemeProvider theme={baselightTheme}>
           <CssBaseline />
-          <Providers>{children}</Providers>
+          <Providers>
+            <SocketProvider>{children}</SocketProvider>
+          </Providers>
         </ThemeProvider>
       </body>
     </html>
diff --git a/src/app/providers.tsx b/src/app/providers.tsx
index 1e36205..3e9aa34 100644
--- a/src/app/providers.tsx
+++ b/src/app/providers.tsx
@@ -1,6 +1,36 @@
 "use client";
 
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import React, { createContext, useContext, ReactNode, useMemo } from "react";
+import socket from "@/socket";
+import { Socket } from "socket.io-client";
+
+const SocketContext = createContext<Socket | null>(null);
+
+export const useSocket = (): Socket => {
+  const context = useContext(SocketContext);
+  if (!context) {
+    throw new Error("useSocket must be used within a SocketProvider");
+  }
+  return context;
+};
+
+interface SocketProviderProps {
+  children: ReactNode;
+}
+
+export const SocketProvider: React.FC<SocketProviderProps> = ({ children }) => {
+  const socketInstance = useMemo(() => {
+    socket.connect();
+    return socket;
+  }, []);
+
+  return (
+    <SocketContext.Provider value={socketInstance}>
+      {children}
+    </SocketContext.Provider>
+  );
+};
 
 export const queryClient = new QueryClient();
 

From a341cff94b59b995974e5cb24ed1477c9f2a59ee Mon Sep 17 00:00:00 2001
From: Roie <roiy0987@gmail.com>
Date: Tue, 20 Aug 2024 16:07:37 +0300
Subject: [PATCH 064/242] refactor: Update ChatHeader component to display the
 username of the selected contact

---
 .../(admin)/new_dashboard/components/ChatHeader/index.tsx  | 6 +++---
 .../new_dashboard/components/MessageInput/index.tsx        | 2 +-
 .../components/MessageList/hooks/useOnMessageReceived.ts   | 7 ++++++-
 .../(admin)/new_dashboard/components/MessageList/index.tsx | 4 ++--
 src/app/(admin)/new_dashboard/page.tsx                     | 2 +-
 5 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/src/app/(admin)/new_dashboard/components/ChatHeader/index.tsx b/src/app/(admin)/new_dashboard/components/ChatHeader/index.tsx
index bf00947..91f5bf0 100644
--- a/src/app/(admin)/new_dashboard/components/ChatHeader/index.tsx
+++ b/src/app/(admin)/new_dashboard/components/ChatHeader/index.tsx
@@ -1,10 +1,10 @@
 import { Box, Typography, Button } from "@mui/material";
 import SmartToyIcon from "@mui/icons-material/SmartToy";
 import SnoozeIcon from "@mui/icons-material/Snooze";
-import { Contact } from "../../types";
+import { Chat } from "@/types";
 
 type Props = {
-  selectedContact: Contact | null;
+  selectedContact: Chat | null;
 };
 
 const ChatHeader = ({ selectedContact }: Props) => {
@@ -22,7 +22,7 @@ const ChatHeader = ({ selectedContact }: Props) => {
     >
       {selectedContact && (
         <>
-          <Typography variant="h6">{selectedContact.name}</Typography>
+          <Typography variant="h6">{selectedContact.user?.username}</Typography>
           <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
             <Button variant="contained" startIcon={<SmartToyIcon />}>
               Generate Guide
diff --git a/src/app/(admin)/new_dashboard/components/MessageInput/index.tsx b/src/app/(admin)/new_dashboard/components/MessageInput/index.tsx
index 521b6c2..a14aa92 100644
--- a/src/app/(admin)/new_dashboard/components/MessageInput/index.tsx
+++ b/src/app/(admin)/new_dashboard/components/MessageInput/index.tsx
@@ -1,7 +1,7 @@
 import { Box, TextField, IconButton, Button } from "@mui/material";
 import SendIcon from "@mui/icons-material/Send";
 import { useMessage } from "./hooks/useMessage";
-import { useSocket } from "../../providers";
+import { useSocket } from "@/app/providers";
 
 type MessageInputProps = {
   chatId: number;
diff --git a/src/app/(admin)/new_dashboard/components/MessageList/hooks/useOnMessageReceived.ts b/src/app/(admin)/new_dashboard/components/MessageList/hooks/useOnMessageReceived.ts
index 4ae3cc8..fe5fbfa 100644
--- a/src/app/(admin)/new_dashboard/components/MessageList/hooks/useOnMessageReceived.ts
+++ b/src/app/(admin)/new_dashboard/components/MessageList/hooks/useOnMessageReceived.ts
@@ -5,8 +5,9 @@ import { Socket } from "socket.io-client";
 
 type Props = {
   socket: Socket;
+  chatId: number;
 };
-export const useOnMessagesReceived = ({ socket }: Props) => {
+export const useOnMessagesReceived = ({ socket, chatId }: Props) => {
   const [newMessages, setNewMessages] = useState<Message[]>([]);
   useEffect(() => {
     socket.on("newMessage", (message: Message) => {
@@ -17,5 +18,9 @@ export const useOnMessagesReceived = ({ socket }: Props) => {
       socket.off("newMessage");
     };
   }, []);
+  useEffect(() => {
+    if (chatId) setNewMessages([]);
+  }, [chatId]);
+
   return { newMessages };
 };
diff --git a/src/app/(admin)/new_dashboard/components/MessageList/index.tsx b/src/app/(admin)/new_dashboard/components/MessageList/index.tsx
index db248cb..f72d52d 100644
--- a/src/app/(admin)/new_dashboard/components/MessageList/index.tsx
+++ b/src/app/(admin)/new_dashboard/components/MessageList/index.tsx
@@ -1,6 +1,6 @@
 import { Box, List, ListItem, Typography } from "@mui/material";
 import { useMessageList } from "./hooks/useMessageList";
-import { useSocket } from "../../providers";
+import { useSocket } from "@/app/providers";
 import { useOnMessagesReceived } from "./hooks/useOnMessageReceived";
 type Props = {
   chatId: number;
@@ -8,8 +8,8 @@ type Props = {
 
 const MessageList = ({ chatId }: Props) => {
   const socket = useSocket();
+  const { newMessages } = useOnMessagesReceived({ socket, chatId });
   const { messages } = useMessageList({ chatId });
-  const { newMessages } = useOnMessagesReceived({ socket });
   const allMessages = messages.concat(
     newMessages.length > 0 ? newMessages : []
   );
diff --git a/src/app/(admin)/new_dashboard/page.tsx b/src/app/(admin)/new_dashboard/page.tsx
index dfb77e3..2d11ac9 100644
--- a/src/app/(admin)/new_dashboard/page.tsx
+++ b/src/app/(admin)/new_dashboard/page.tsx
@@ -7,8 +7,8 @@ import ContactList from "./components/ContactList";
 import ChatHeader from "./components/ChatHeader";
 import MessageList from "./components/MessageList";
 import { useContacts } from "./hooks";
-import { useSocket } from "./providers";
 import { useSelectedContact } from "./hooks/useSelectedContact";
+import { useSocket } from "@/app/providers";
 
 const Page = () => {
   const socket = useSocket();

From 4c1f4dd58d7cde04d641282375dcfbafb430afdc Mon Sep 17 00:00:00 2001
From: Roie <roiy0987@gmail.com>
Date: Tue, 20 Aug 2024 17:21:23 +0300
Subject: [PATCH 065/242] refactor: Update ContactList component to remove
 unnecessary code and improve performance

---
 .../components/ContactList/index.tsx          |  5 +--
 .../components/MessageInput/index.tsx         |  7 +----
 src/app/(admin)/new_dashboard/providers.tsx   | 31 -------------------
 3 files changed, 2 insertions(+), 41 deletions(-)
 delete mode 100644 src/app/(admin)/new_dashboard/providers.tsx

diff --git a/src/app/(admin)/new_dashboard/components/ContactList/index.tsx b/src/app/(admin)/new_dashboard/components/ContactList/index.tsx
index da7b03e..677349d 100644
--- a/src/app/(admin)/new_dashboard/components/ContactList/index.tsx
+++ b/src/app/(admin)/new_dashboard/components/ContactList/index.tsx
@@ -51,10 +51,7 @@ const ContactList = ({ contacts, onSelectContact, selectedContact }: Props) => {
                       src={"https://bootdey.com/img/Content/avatar/avatar2.png"} // Maybe add later avatars to users
                     />
                   </ListItemAvatar>
-                  <ListItemText
-                    primary={contact.user?.username}
-                    // secondary={chat.}
-                  />
+                  <ListItemText primary={contact.user?.username} />
                 </ListItemButton>
               </Box>
             ))}
diff --git a/src/app/(admin)/new_dashboard/components/MessageInput/index.tsx b/src/app/(admin)/new_dashboard/components/MessageInput/index.tsx
index a14aa92..eb1eb3d 100644
--- a/src/app/(admin)/new_dashboard/components/MessageInput/index.tsx
+++ b/src/app/(admin)/new_dashboard/components/MessageInput/index.tsx
@@ -68,12 +68,7 @@ const MessageInput = ({ chatId }: MessageInputProps) => {
           error={!!errors.message}
           helperText={errors.message ? errors.message.message : ""}
         />
-        <IconButton
-          color="primary"
-          onClick={handleSubmit}
-          sx={{ ml: 1 }}
-          // disabled={disabled}
-        >
+        <IconButton color="primary" onClick={handleSubmit} sx={{ ml: 1 }}>
           <SendIcon />
         </IconButton>
       </Box>
diff --git a/src/app/(admin)/new_dashboard/providers.tsx b/src/app/(admin)/new_dashboard/providers.tsx
deleted file mode 100644
index 1878bc4..0000000
--- a/src/app/(admin)/new_dashboard/providers.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-"use client";
-import React, { createContext, useContext, ReactNode, useMemo } from "react";
-import socket from "@/socket";
-import { Socket } from "socket.io-client";
-
-const SocketContext = createContext<Socket | null>(null);
-
-export const useSocket = (): Socket => {
-  const context = useContext(SocketContext);
-  if (!context) {
-    throw new Error("useSocket must be used within a SocketProvider");
-  }
-  return context;
-};
-
-interface SocketProviderProps {
-  children: ReactNode;
-}
-
-export const SocketProvider: React.FC<SocketProviderProps> = ({ children }) => {
-  const socketInstance = useMemo(() => {
-    socket.connect();
-    return socket;
-  }, []);
-
-  return (
-    <SocketContext.Provider value={socketInstance}>
-      {children}
-    </SocketContext.Provider>
-  );
-};

From 2530f85397a1cad9c4e44c766f69000bce06cc64 Mon Sep 17 00:00:00 2001
From: Roie <roiy0987@gmail.com>
Date: Tue, 20 Aug 2024 17:32:22 +0300
Subject: [PATCH 066/242] refactor: Update useMessageList hook to include
 real-time message updates using Socket.io

---
 .../MessageList/hooks/useMessageList.ts       | 23 +++++++++++++---
 .../MessageList/hooks/useOnMessageReceived.ts | 26 -------------------
 .../components/MessageList/index.tsx          | 13 ++++------
 3 files changed, 24 insertions(+), 38 deletions(-)
 delete mode 100644 src/app/(admin)/new_dashboard/components/MessageList/hooks/useOnMessageReceived.ts

diff --git a/src/app/(admin)/new_dashboard/components/MessageList/hooks/useMessageList.ts b/src/app/(admin)/new_dashboard/components/MessageList/hooks/useMessageList.ts
index b92e30c..ae29a45 100644
--- a/src/app/(admin)/new_dashboard/components/MessageList/hooks/useMessageList.ts
+++ b/src/app/(admin)/new_dashboard/components/MessageList/hooks/useMessageList.ts
@@ -2,15 +2,17 @@
 import { useOnFetch } from "@/common/hooks/useOnFetch";
 import { useChatById } from "@/hooks/api/chatHooks";
 import { Chat, Message, ClientResponse, SuccessResponse } from "@/types";
-import { useState } from "react";
+import { useEffect, useState } from "react";
+import { Socket } from "socket.io-client";
 
 type Props = {
   chatId: number;
+  socket: Socket;
 };
 
-export const useMessageList = ({ chatId }: Props) => {
+export const useMessageList = ({ chatId, socket }: Props) => {
   const [chatMessages, setChatMessages] = useState<Message[]>([]);
-
+  const [newMessages, setNewMessages] = useState<Message[]>([]);
   const { data, error, isError } = useChatById(chatId);
 
   useOnFetch(
@@ -28,7 +30,20 @@ export const useMessageList = ({ chatId }: Props) => {
     false
   );
 
+  useEffect(() => {
+    socket.on("newMessage", (message: Message) => {
+      setNewMessages((prev) => [...prev, message]);
+    });
+
+    return () => {
+      socket.off("newMessage");
+    };
+  }, []);
+  useEffect(() => {
+    if (chatId) setNewMessages([]);
+  }, [chatId]);
+
   return {
-    messages: chatMessages,
+    messages: chatMessages.concat(newMessages),
   };
 };
diff --git a/src/app/(admin)/new_dashboard/components/MessageList/hooks/useOnMessageReceived.ts b/src/app/(admin)/new_dashboard/components/MessageList/hooks/useOnMessageReceived.ts
deleted file mode 100644
index fe5fbfa..0000000
--- a/src/app/(admin)/new_dashboard/components/MessageList/hooks/useOnMessageReceived.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-"use client";
-import { Message } from "@/types";
-import { useEffect, useState } from "react";
-import { Socket } from "socket.io-client";
-
-type Props = {
-  socket: Socket;
-  chatId: number;
-};
-export const useOnMessagesReceived = ({ socket, chatId }: Props) => {
-  const [newMessages, setNewMessages] = useState<Message[]>([]);
-  useEffect(() => {
-    socket.on("newMessage", (message: Message) => {
-      setNewMessages((prev) => [...prev, message]);
-    });
-
-    return () => {
-      socket.off("newMessage");
-    };
-  }, []);
-  useEffect(() => {
-    if (chatId) setNewMessages([]);
-  }, [chatId]);
-
-  return { newMessages };
-};
diff --git a/src/app/(admin)/new_dashboard/components/MessageList/index.tsx b/src/app/(admin)/new_dashboard/components/MessageList/index.tsx
index f72d52d..9c91d7c 100644
--- a/src/app/(admin)/new_dashboard/components/MessageList/index.tsx
+++ b/src/app/(admin)/new_dashboard/components/MessageList/index.tsx
@@ -1,18 +1,15 @@
 import { Box, List, ListItem, Typography } from "@mui/material";
 import { useMessageList } from "./hooks/useMessageList";
-import { useSocket } from "@/app/providers";
-import { useOnMessagesReceived } from "./hooks/useOnMessageReceived";
+
+import { useSocket } from "@/app/hooks/useSocket";
 type Props = {
   chatId: number;
 };
 
 const MessageList = ({ chatId }: Props) => {
   const socket = useSocket();
-  const { newMessages } = useOnMessagesReceived({ socket, chatId });
-  const { messages } = useMessageList({ chatId });
-  const allMessages = messages.concat(
-    newMessages.length > 0 ? newMessages : []
-  );
+  const { messages } = useMessageList({ chatId, socket });
+
   return (
     <Box
       sx={{
@@ -22,7 +19,7 @@ const MessageList = ({ chatId }: Props) => {
       }}
     >
       <List>
-        {allMessages.map((msg, index) => (
+        {messages.map((msg, index) => (
           <ListItem
             key={index}
             sx={{

From 5011cd9b6d2bd3dbfb3a6fa0d9eedac7d9a5a3e3 Mon Sep 17 00:00:00 2001
From: Roie <roiy0987@gmail.com>
Date: Tue, 20 Aug 2024 17:33:01 +0300
Subject: [PATCH 067/242] refactor: Update imports for Socket usage in
 MessageInput and Page components

---
 .../new_dashboard/components/MessageInput/index.tsx  |  2 +-
 src/app/(admin)/new_dashboard/page.tsx               |  2 +-
 src/app/hooks/useSocket.ts                           | 11 +++++++++++
 src/app/providers.tsx                                | 12 ++----------
 4 files changed, 15 insertions(+), 12 deletions(-)
 create mode 100644 src/app/hooks/useSocket.ts

diff --git a/src/app/(admin)/new_dashboard/components/MessageInput/index.tsx b/src/app/(admin)/new_dashboard/components/MessageInput/index.tsx
index eb1eb3d..32759ba 100644
--- a/src/app/(admin)/new_dashboard/components/MessageInput/index.tsx
+++ b/src/app/(admin)/new_dashboard/components/MessageInput/index.tsx
@@ -1,7 +1,7 @@
 import { Box, TextField, IconButton, Button } from "@mui/material";
 import SendIcon from "@mui/icons-material/Send";
 import { useMessage } from "./hooks/useMessage";
-import { useSocket } from "@/app/providers";
+import { useSocket } from "@/app/hooks/useSocket";
 
 type MessageInputProps = {
   chatId: number;
diff --git a/src/app/(admin)/new_dashboard/page.tsx b/src/app/(admin)/new_dashboard/page.tsx
index 2d11ac9..3c6ee63 100644
--- a/src/app/(admin)/new_dashboard/page.tsx
+++ b/src/app/(admin)/new_dashboard/page.tsx
@@ -8,7 +8,7 @@ import ChatHeader from "./components/ChatHeader";
 import MessageList from "./components/MessageList";
 import { useContacts } from "./hooks";
 import { useSelectedContact } from "./hooks/useSelectedContact";
-import { useSocket } from "@/app/providers";
+import { useSocket } from "@/app/hooks/useSocket";
 
 const Page = () => {
   const socket = useSocket();
diff --git a/src/app/hooks/useSocket.ts b/src/app/hooks/useSocket.ts
new file mode 100644
index 0000000..e2590d3
--- /dev/null
+++ b/src/app/hooks/useSocket.ts
@@ -0,0 +1,11 @@
+import { useContext } from "react";
+import { Socket } from "socket.io-client";
+import { SocketContext } from "../providers";
+
+export const useSocket = (): Socket => {
+  const context = useContext(SocketContext);
+  if (!context) {
+    throw new Error("useSocket must be used within a SocketProvider");
+  }
+  return context;
+};
diff --git a/src/app/providers.tsx b/src/app/providers.tsx
index 3e9aa34..c58fd7a 100644
--- a/src/app/providers.tsx
+++ b/src/app/providers.tsx
@@ -1,19 +1,11 @@
 "use client";
 
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import React, { createContext, useContext, ReactNode, useMemo } from "react";
+import React, { createContext, ReactNode, useMemo } from "react";
 import socket from "@/socket";
 import { Socket } from "socket.io-client";
 
-const SocketContext = createContext<Socket | null>(null);
-
-export const useSocket = (): Socket => {
-  const context = useContext(SocketContext);
-  if (!context) {
-    throw new Error("useSocket must be used within a SocketProvider");
-  }
-  return context;
-};
+export const SocketContext = createContext<Socket | null>(null);
 
 interface SocketProviderProps {
   children: ReactNode;

From 623051c8975e636cb9ef13b532668912bf5d0573 Mon Sep 17 00:00:00 2001
From: Roie <roiy0987@gmail.com>
Date: Tue, 20 Aug 2024 18:03:45 +0300
Subject: [PATCH 068/242] refactor: Update useMessage.ts to use separate schema
 file for message validation

---
 .../components/MessageInput/hooks/useMessage.ts      | 12 +-----------
 .../components/MessageInput/validations/schema.ts    | 11 +++++++++++
 2 files changed, 12 insertions(+), 11 deletions(-)
 create mode 100644 src/app/(admin)/new_dashboard/components/MessageInput/validations/schema.ts

diff --git a/src/app/(admin)/new_dashboard/components/MessageInput/hooks/useMessage.ts b/src/app/(admin)/new_dashboard/components/MessageInput/hooks/useMessage.ts
index fbba0b6..075a750 100644
--- a/src/app/(admin)/new_dashboard/components/MessageInput/hooks/useMessage.ts
+++ b/src/app/(admin)/new_dashboard/components/MessageInput/hooks/useMessage.ts
@@ -1,20 +1,10 @@
 "use client";
 import { useState } from "react";
 import { useForm } from "react-hook-form";
-import { z } from "zod";
+import { schema } from "../validations/schema";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { Socket } from "socket.io-client";
 
-const schema = z.object({
-  message: z
-    .string()
-    .trim()
-    .min(1)
-    .refine((msg) => msg.split("\n").length <= 10, {
-      message: "Message should not exceed 10 lines",
-    }),
-});
-
 type MessageRequest = {
   message: string;
 };
diff --git a/src/app/(admin)/new_dashboard/components/MessageInput/validations/schema.ts b/src/app/(admin)/new_dashboard/components/MessageInput/validations/schema.ts
new file mode 100644
index 0000000..0ad8c04
--- /dev/null
+++ b/src/app/(admin)/new_dashboard/components/MessageInput/validations/schema.ts
@@ -0,0 +1,11 @@
+import { z } from "zod";
+
+export const schema = z.object({
+  message: z
+    .string()
+    .trim()
+    .min(1)
+    .refine((msg) => msg.split("\n").length <= 10, {
+      message: "Message should not exceed 10 lines",
+    }),
+});

From 2b1270689f56d85ca4dbb201273c3bfbb50dcdb9 Mon Sep 17 00:00:00 2001
From: Roie <roiy0987@gmail.com>
Date: Tue, 20 Aug 2024 18:04:13 +0300
Subject: [PATCH 069/242] refactor: Update hooks imports in
 new_dashboard/page.tsx

---
 src/app/(admin)/new_dashboard/hooks/index.ts | 1 +
 src/app/(admin)/new_dashboard/page.tsx       | 3 +--
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/(admin)/new_dashboard/hooks/index.ts b/src/app/(admin)/new_dashboard/hooks/index.ts
index 34eddca..34d7f23 100644
--- a/src/app/(admin)/new_dashboard/hooks/index.ts
+++ b/src/app/(admin)/new_dashboard/hooks/index.ts
@@ -1 +1,2 @@
 export * from "./useContacts";
+export * from "./useSelectedContact";
diff --git a/src/app/(admin)/new_dashboard/page.tsx b/src/app/(admin)/new_dashboard/page.tsx
index 3c6ee63..5779077 100644
--- a/src/app/(admin)/new_dashboard/page.tsx
+++ b/src/app/(admin)/new_dashboard/page.tsx
@@ -6,8 +6,7 @@ import { Box } from "@mui/material";
 import ContactList from "./components/ContactList";
 import ChatHeader from "./components/ChatHeader";
 import MessageList from "./components/MessageList";
-import { useContacts } from "./hooks";
-import { useSelectedContact } from "./hooks/useSelectedContact";
+import { useContacts, useSelectedContact } from "./hooks";
 import { useSocket } from "@/app/hooks/useSocket";
 
 const Page = () => {

From c335a4fe198e5fadadb0965d22ede8c9c10d333d Mon Sep 17 00:00:00 2001
From: Roie <roiy0987@gmail.com>
Date: Tue, 20 Aug 2024 18:05:00 +0300
Subject: [PATCH 070/242] refactor: Update ChatHeader and ContactList
 components to use Contact type instead of Chat type

---
 .../components/ChatHeader/index.tsx           |  6 ++---
 .../components/ContactList/index.tsx          | 16 ++++++-------
 .../MessageList/hooks/useMessageList.ts       |  3 ++-
 .../new_dashboard/hooks/useContacts.ts        | 23 +++++++++++++++----
 .../new_dashboard/hooks/useSelectedContact.ts |  8 +++----
 .../(admin)/new_dashboard/types/contact.ts    |  6 +++++
 src/app/(admin)/new_dashboard/types/index.ts  |  2 ++
 .../(admin)/new_dashboard/types/message.ts    |  6 +++++
 8 files changed, 48 insertions(+), 22 deletions(-)
 create mode 100644 src/app/(admin)/new_dashboard/types/contact.ts
 create mode 100644 src/app/(admin)/new_dashboard/types/index.ts
 create mode 100644 src/app/(admin)/new_dashboard/types/message.ts

diff --git a/src/app/(admin)/new_dashboard/components/ChatHeader/index.tsx b/src/app/(admin)/new_dashboard/components/ChatHeader/index.tsx
index 91f5bf0..c89f83d 100644
--- a/src/app/(admin)/new_dashboard/components/ChatHeader/index.tsx
+++ b/src/app/(admin)/new_dashboard/components/ChatHeader/index.tsx
@@ -1,10 +1,10 @@
 import { Box, Typography, Button } from "@mui/material";
 import SmartToyIcon from "@mui/icons-material/SmartToy";
 import SnoozeIcon from "@mui/icons-material/Snooze";
-import { Chat } from "@/types";
+import { Contact } from "../../types";
 
 type Props = {
-  selectedContact: Chat | null;
+  selectedContact: Contact | null;
 };
 
 const ChatHeader = ({ selectedContact }: Props) => {
@@ -22,7 +22,7 @@ const ChatHeader = ({ selectedContact }: Props) => {
     >
       {selectedContact && (
         <>
-          <Typography variant="h6">{selectedContact.user?.username}</Typography>
+          <Typography variant="h6">{selectedContact.username}</Typography>
           <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
             <Button variant="contained" startIcon={<SmartToyIcon />}>
               Generate Guide
diff --git a/src/app/(admin)/new_dashboard/components/ContactList/index.tsx b/src/app/(admin)/new_dashboard/components/ContactList/index.tsx
index 677349d..06fabd7 100644
--- a/src/app/(admin)/new_dashboard/components/ContactList/index.tsx
+++ b/src/app/(admin)/new_dashboard/components/ContactList/index.tsx
@@ -6,12 +6,12 @@ import {
   Avatar,
   ListItemText,
 } from "@mui/material";
-import { Chat } from "@/types";
+import { Contact } from "../../types";
 
 type Props = {
-  contacts: Chat[];
-  selectedContact: Chat | null;
-  onSelectContact: (chat: Chat) => void;
+  contacts: Contact[];
+  selectedContact: Contact | null;
+  onSelectContact: (chat: Contact) => void;
 };
 
 const ContactList = ({ contacts, onSelectContact, selectedContact }: Props) => {
@@ -33,13 +33,11 @@ const ContactList = ({ contacts, onSelectContact, selectedContact }: Props) => {
             {contacts.map((contact, index) => (
               <Box key={index} sx={{ padding: "0 8px" }}>
                 <ListItemButton
-                  selected={
-                    selectedContact?.user?.userId === contact.user?.userId
-                  }
+                  selected={selectedContact?.chatId === contact.chatId}
                   onClick={() => onSelectContact(contact)}
                   sx={{
                     backgroundColor:
-                      selectedContact?.user?.userId === contact.user?.userId
+                      selectedContact?.chatId === contact.chatId
                         ? "#f5f5f5"
                         : "#ffffff",
                     borderRadius: 0,
@@ -51,7 +49,7 @@ const ContactList = ({ contacts, onSelectContact, selectedContact }: Props) => {
                       src={"https://bootdey.com/img/Content/avatar/avatar2.png"} // Maybe add later avatars to users
                     />
                   </ListItemAvatar>
-                  <ListItemText primary={contact.user?.username} />
+                  <ListItemText primary={contact.username} />
                 </ListItemButton>
               </Box>
             ))}
diff --git a/src/app/(admin)/new_dashboard/components/MessageList/hooks/useMessageList.ts b/src/app/(admin)/new_dashboard/components/MessageList/hooks/useMessageList.ts
index ae29a45..ebd8154 100644
--- a/src/app/(admin)/new_dashboard/components/MessageList/hooks/useMessageList.ts
+++ b/src/app/(admin)/new_dashboard/components/MessageList/hooks/useMessageList.ts
@@ -1,7 +1,8 @@
 "use client";
 import { useOnFetch } from "@/common/hooks/useOnFetch";
 import { useChatById } from "@/hooks/api/chatHooks";
-import { Chat, Message, ClientResponse, SuccessResponse } from "@/types";
+import { Chat, ClientResponse, SuccessResponse } from "@/types";
+import { Message } from "../../../types";
 import { useEffect, useState } from "react";
 import { Socket } from "socket.io-client";
 
diff --git a/src/app/(admin)/new_dashboard/hooks/useContacts.ts b/src/app/(admin)/new_dashboard/hooks/useContacts.ts
index 23f195e..f748be6 100644
--- a/src/app/(admin)/new_dashboard/hooks/useContacts.ts
+++ b/src/app/(admin)/new_dashboard/hooks/useContacts.ts
@@ -4,14 +4,15 @@ import { Chat, ClientResponse, SuccessResponse } from "@/types";
 import { useChats } from "@/hooks/api/chatHooks";
 import { useOnFetch } from "@/common/hooks/useOnFetch";
 import { Socket } from "socket.io-client";
+import { Contact } from "../types";
 
 type Props = {
   socket: Socket;
-  handleContactSelect: (contact: Chat) => void;
+  handleContactSelect: (contact: Contact) => void;
 };
 
 export const useContacts = ({ socket, handleContactSelect }: Props) => {
-  const [contacts, setContacts] = useState<Chat[]>([]);
+  const [contacts, setContacts] = useState<Contact[]>([]);
   const { isError, data, error } = useChats();
 
   useOnFetch(
@@ -21,8 +22,14 @@ export const useContacts = ({ socket, handleContactSelect }: Props) => {
       } else {
         const successResponse = clientResponse as SuccessResponse<Chat[]>;
         const chats = successResponse.data;
-        setContacts(() => chats);
-        handleContactSelect(chats[0]);
+        const contacts = chats.map((chat) => ({
+          chatId: chat.chatId,
+          userId: chat.user!.userId,
+          username: chat.user!.username,
+          isOpen: chat.isOpen,
+        }));
+        setContacts(() => contacts);
+        handleContactSelect(contacts[0]);
       }
     },
     !!data || isError,
@@ -31,7 +38,13 @@ export const useContacts = ({ socket, handleContactSelect }: Props) => {
 
   useEffect(() => {
     socket.on("chatCreated", (chat: Chat) => {
-      setContacts((prevContacts) => [...prevContacts, chat]);
+      const contact = {
+        chatId: chat.chatId,
+        userId: chat.user!.userId,
+        username: chat.user!.username,
+        isOpen: chat.isOpen,
+      };
+      setContacts((prevContacts) => [...prevContacts, contact]);
     });
 
     return () => {
diff --git a/src/app/(admin)/new_dashboard/hooks/useSelectedContact.ts b/src/app/(admin)/new_dashboard/hooks/useSelectedContact.ts
index dfab9e8..172cabb 100644
--- a/src/app/(admin)/new_dashboard/hooks/useSelectedContact.ts
+++ b/src/app/(admin)/new_dashboard/hooks/useSelectedContact.ts
@@ -1,14 +1,14 @@
 "use client";
 import { useEffect, useState } from "react";
-import { Chat } from "@/types";
 import { Socket } from "socket.io-client";
+import { Contact } from "../types";
 
 type Props = {
   socket: Socket;
 };
 
 export const useSelectedContact = ({ socket }: Props) => {
-  const [selectedContact, setSelectedContact] = useState<Chat | null>(null);
+  const [selectedContact, setSelectedContact] = useState<Contact | null>(null);
 
   useEffect(() => {
     if (socket && selectedContact) {
@@ -19,8 +19,8 @@ export const useSelectedContact = ({ socket }: Props) => {
     }
   }, [selectedContact]);
 
-  const handleContactSelect = (chat: Chat) => {
-    setSelectedContact(chat);
+  const handleContactSelect = (contact: Contact) => {
+    setSelectedContact(contact);
   };
 
   return {
diff --git a/src/app/(admin)/new_dashboard/types/contact.ts b/src/app/(admin)/new_dashboard/types/contact.ts
new file mode 100644
index 0000000..2792105
--- /dev/null
+++ b/src/app/(admin)/new_dashboard/types/contact.ts
@@ -0,0 +1,6 @@
+export type Contact = {
+  username: string;
+  chatId: number;
+  isOpen: boolean;
+  userId: number;
+};
diff --git a/src/app/(admin)/new_dashboard/types/index.ts b/src/app/(admin)/new_dashboard/types/index.ts
new file mode 100644
index 0000000..418dc9e
--- /dev/null
+++ b/src/app/(admin)/new_dashboard/types/index.ts
@@ -0,0 +1,2 @@
+export * from "./contact";
+export * from "./message";
diff --git a/src/app/(admin)/new_dashboard/types/message.ts b/src/app/(admin)/new_dashboard/types/message.ts
new file mode 100644
index 0000000..ffa5744
--- /dev/null
+++ b/src/app/(admin)/new_dashboard/types/message.ts
@@ -0,0 +1,6 @@
+export interface Message {
+  content: string;
+  isNote: boolean;
+  isSupportSender: boolean;
+  timeStamp: Date;
+}

From e0cdb04c6f06209e74c2779b04f289830c38be7e Mon Sep 17 00:00:00 2001
From: Roie <roiy0987@gmail.com>
Date: Tue, 20 Aug 2024 18:58:40 +0300
Subject: [PATCH 071/242] refactor: Update Sidebar component to use next/image
 for logo display

---
 .../new_dashboard/shared/sidebar/Sidebar.tsx  | 32 +++++++++++++------
 1 file changed, 23 insertions(+), 9 deletions(-)

diff --git a/src/app/(admin)/new_dashboard/shared/sidebar/Sidebar.tsx b/src/app/(admin)/new_dashboard/shared/sidebar/Sidebar.tsx
index 117583d..98c058c 100644
--- a/src/app/(admin)/new_dashboard/shared/sidebar/Sidebar.tsx
+++ b/src/app/(admin)/new_dashboard/shared/sidebar/Sidebar.tsx
@@ -1,5 +1,5 @@
 import { Box, Drawer } from "@mui/material";
-import { Sidebar, Logo } from "react-mui-sidebar";
+import Image from "next/image";
 import SidebarItems from "./SidebarItems";
 
 interface ItemType {
@@ -49,25 +49,39 @@ const DashboardSidebar = ({ isSidebarOpen }: ItemType) => {
             height: "100%",
           }}
         >
-          <Sidebar
-            width={"270px"}
-            collapsewidth="80px"
+          <Drawer
             open={isSidebarOpen}
-            themeColor="#5d87ff"
-            themeSecondaryColor="#49beff"
-            showProfile={false}
+            variant="permanent"
+            PaperProps={{
+              sx: {
+                boxSizing: "border-box",
+                ...scrollbarStyles,
+                width: "270px",
+              },
+            }}
           >
             {/* ------------------------------------------- */}
             {/* Logo */}
             {/* ------------------------------------------- */}
-            <Logo img="/logo.png" />
+            <Box
+              sx={{
+                display: "flex",
+                justifyContent: "center",
+                alignItems: "center",
+                height: "100px",
+                width: "270px",
+              }}
+            >
+              <Image src="/logo.png" alt="logo" width={220} height={150} />
+            </Box>
+            {/* <Logo img="/logo.png" /> */}
             <Box>
               {/* ------------------------------------------- */}
               {/* Sidebar Items */}
               {/* ------------------------------------------- */}
               <SidebarItems />
             </Box>
-          </Sidebar>
+          </Drawer>
         </Box>
       </Drawer>
     </Box>

From c09062746f6f065c2a8c53ba06e26b95851a3461 Mon Sep 17 00:00:00 2001
From: Ori <ori100no@gmail.com>
Date: Tue, 20 Aug 2024 20:10:52 +0300
Subject: [PATCH 072/242] added useGuide hook that retrives a simgle guide from
 the backend , also with the guide's creator and reviews from the backend

---
 src/api/guide.client.ts                       |  4 +++
 src/api/types/Guide.ts                        | 22 ++++++++++--
 .../new_dashboard/guides/[id]/page.tsx        | 36 +++++++++++--------
 .../guides/components/GuideCard/index.tsx     |  5 ---
 .../new_dashboard/guides/hooks/guideHooks.ts  | 10 ++++--
 src/app/(admin)/new_dashboard/guides/page.tsx |  4 +--
 6 files changed, 56 insertions(+), 25 deletions(-)

diff --git a/src/api/guide.client.ts b/src/api/guide.client.ts
index 00949bf..f8d7f17 100644
--- a/src/api/guide.client.ts
+++ b/src/api/guide.client.ts
@@ -10,4 +10,8 @@ export class GuideClient extends BaseClient {
   async getReviews(guideId: number) {
     return await this.get<Review[]>('reviews/guide/' + guideId);
   }
+
+  async getGuide(guideId: number) {
+    return await this.get<Guide>('guides/' + guideId);
+  }
 }
diff --git a/src/api/types/Guide.ts b/src/api/types/Guide.ts
index 4667db3..ea582f5 100644
--- a/src/api/types/Guide.ts
+++ b/src/api/types/Guide.ts
@@ -1,12 +1,30 @@
 import { z } from 'zod';
 
+const userSchema = z.object({
+  userId: z.number(),
+  username: z.string(),
+  email: z.string(),
+  password: z.string(), 
+  roles: z.array(z.string()),
+}).optional();
+
+const reviewSchema = z.object({
+  reviewId: z.number(),
+  userId: z.number(),
+  guideId: z.number(),
+  stars: z.number(),
+  comment: z.string(),
+  createdAt: z.date(),
+});
+
 const guideSchema = z.object({
   guideId: z.number(),
   title: z.string(),
   contentHTML: z.string(),
   creatorId: z.number(),
-  starsTotalSum: z.number(),
   createdAt: z.date(),
+  creator: userSchema.optional(), 
+  reviews: z.array(reviewSchema).optional(), 
 });
 
-export type Guide = z.infer<typeof guideSchema>;
+export type Guide = z.infer<typeof guideSchema>;
\ No newline at end of file
diff --git a/src/app/(admin)/new_dashboard/guides/[id]/page.tsx b/src/app/(admin)/new_dashboard/guides/[id]/page.tsx
index ab90f9b..74c7c20 100644
--- a/src/app/(admin)/new_dashboard/guides/[id]/page.tsx
+++ b/src/app/(admin)/new_dashboard/guides/[id]/page.tsx
@@ -1,44 +1,52 @@
 "use client";
 import PageContainer from "@/components/PageContainer";
 import { useParams } from "next/navigation";
-import { useGuides } from "../hooks";
+import { useAllGuides, useGuide } from "../hooks";
 import DashboardCard from "../../shared/Card";
-import { Typography } from "@mui/material";
+import { Typography,Rating } from "@mui/material";
 import { Guide } from "@/api/types/Guide";
 
 const GuidePage = () => {
   const params = useParams();
 
   const id = params?.id ? Number(params.id) : null;
+  
+  
+  let guide: Guide | undefined = undefined;
 
-  const { data: guideItems, isLoading, isError, isSuccess } = useGuides();
-
-  let guide: Guide | undefined;
-
-  if (isSuccess && guideItems && "data" in guideItems) {
-    guide = guideItems.data.find((g) => g.guideId === Number(id));
-  }
+ const {data:response , isLoading, isError, isSuccess} = useGuide(id ?? 0);
 
+ 
   if (isLoading) {
     return <Typography>Loading...</Typography>;
   }
 
-  if (isError || !guideItems || (isSuccess && !guide)) {
-    return <Typography>Guide not found</Typography>;
+  if(isError) {
+    return <Typography>Error</Typography>;
   }
-  if(isSuccess && guide) {
+
+  if(isSuccess && "data" in response) {
+    guide = response.data;
+    if(!guide.title) {
+      return <Typography>Guide not found</Typography>;
+    }
     return (
       <PageContainer title={guide.title}>
         <DashboardCard title={guide.title}>
           <div>
             <div dangerouslySetInnerHTML={{ __html: guide.contentHTML }} />
             <Typography variant="body2">
-              Created by User ID: {guide.creatorId} on{" "}
+              Created by {guide.creator?.username} on{" "}
               {new Date(guide.createdAt).toLocaleDateString()}
             </Typography>
             <Typography variant="body2">
-              Stars: {guide.starsTotalSum}
+              <Rating
+                value={3}
+                precision={0.5}
+                readOnly
+              />
             </Typography>
+            <Typography>length {guide.reviews?.length}</Typography>
           </div>
         </DashboardCard>
       </PageContainer>
diff --git a/src/app/(admin)/new_dashboard/guides/components/GuideCard/index.tsx b/src/app/(admin)/new_dashboard/guides/components/GuideCard/index.tsx
index 32dfd6d..8a3031e 100644
--- a/src/app/(admin)/new_dashboard/guides/components/GuideCard/index.tsx
+++ b/src/app/(admin)/new_dashboard/guides/components/GuideCard/index.tsx
@@ -23,11 +23,6 @@ const GuideCard = ({ guide }: Props) => {
         <Typography variant="body2" color="textSecondary" mb={2}>
           Created at: {new Date(guide.createdAt).toLocaleDateString()}
         </Typography>
-        <Box display="flex" alignItems="center" mt={2}>
-          <Typography variant="body2" color="textSecondary">
-            Total Stars: {guide.starsTotalSum}
-          </Typography>
-        </Box>
       </CardContent>
     </Card>
   );
diff --git a/src/app/(admin)/new_dashboard/guides/hooks/guideHooks.ts b/src/app/(admin)/new_dashboard/guides/hooks/guideHooks.ts
index 20d5a88..ac0af3c 100644
--- a/src/app/(admin)/new_dashboard/guides/hooks/guideHooks.ts
+++ b/src/app/(admin)/new_dashboard/guides/hooks/guideHooks.ts
@@ -3,7 +3,7 @@ import { useQuery } from '@tanstack/react-query';
 
 const guideClient = new GuideClient();
 
-export function useGuides() {
+export function useAllGuides() {
   return useQuery({
     queryKey: ['guides'],
     queryFn: () => guideClient.getAllGuides(),
@@ -14,6 +14,12 @@ export function useReviews(guideId: number) {
   return useQuery({
     queryKey: ['reviews', 'guide', guideId],
     queryFn: () => guideClient.getReviews(guideId),
-    
+  });
+}
+
+export function useGuide(guideId: number) {
+  return useQuery({
+    queryKey: ['guide', guideId],
+    queryFn: () => guideClient.getGuide(guideId),
   });
 }
diff --git a/src/app/(admin)/new_dashboard/guides/page.tsx b/src/app/(admin)/new_dashboard/guides/page.tsx
index bca3e87..f7b7376 100644
--- a/src/app/(admin)/new_dashboard/guides/page.tsx
+++ b/src/app/(admin)/new_dashboard/guides/page.tsx
@@ -4,11 +4,11 @@ import PageContainer from "@/components/PageContainer";
 import { Box, Typography } from "@mui/material";
 import GuideList from "./components/GuideList";
 import SearchBar from "./components/SearchBar";
-import { useSearchGuides, useGuides } from "./hooks";
+import { useSearchGuides, useAllGuides } from "./hooks";
 import { Guide } from "@/api/types/Guide";
 
 const Page = () => {
-  const { data: guideItems, isLoading, isError, isSuccess } = useGuides();
+  const { data: guideItems, isLoading, isError, isSuccess } = useAllGuides();
 
   let guides: Guide[] = [];
 

From b8d80723421b914031aafcbfe11de740719fd80a Mon Sep 17 00:00:00 2001
From: Ori <ori100no@gmail.com>
Date: Tue, 20 Aug 2024 20:46:50 +0300
Subject: [PATCH 073/242] added avrage rating in the right place

---
 src/app/(admin)/new_dashboard/guides/[id]/page.tsx   | 10 +---------
 .../guides/components/GuideCard/index.tsx            | 12 +++++++++---
 2 files changed, 10 insertions(+), 12 deletions(-)

diff --git a/src/app/(admin)/new_dashboard/guides/[id]/page.tsx b/src/app/(admin)/new_dashboard/guides/[id]/page.tsx
index 74c7c20..43d861a 100644
--- a/src/app/(admin)/new_dashboard/guides/[id]/page.tsx
+++ b/src/app/(admin)/new_dashboard/guides/[id]/page.tsx
@@ -35,18 +35,10 @@ const GuidePage = () => {
         <DashboardCard title={guide.title}>
           <div>
             <div dangerouslySetInnerHTML={{ __html: guide.contentHTML }} />
-            <Typography variant="body2">
+            <Typography>
               Created by {guide.creator?.username} on{" "}
               {new Date(guide.createdAt).toLocaleDateString()}
             </Typography>
-            <Typography variant="body2">
-              <Rating
-                value={3}
-                precision={0.5}
-                readOnly
-              />
-            </Typography>
-            <Typography>length {guide.reviews?.length}</Typography>
           </div>
         </DashboardCard>
       </PageContainer>
diff --git a/src/app/(admin)/new_dashboard/guides/components/GuideCard/index.tsx b/src/app/(admin)/new_dashboard/guides/components/GuideCard/index.tsx
index 8a3031e..d0b8784 100644
--- a/src/app/(admin)/new_dashboard/guides/components/GuideCard/index.tsx
+++ b/src/app/(admin)/new_dashboard/guides/components/GuideCard/index.tsx
@@ -1,4 +1,4 @@
-import { Card, CardContent, Typography, Box } from "@mui/material";
+import { Card, CardContent, Typography, Box, Rating } from "@mui/material";
 import SupportIcon from "@mui/icons-material/Support";
 import { useTheme } from "@mui/material/styles";
 import { Guide } from "@/api/types/Guide";
@@ -9,7 +9,8 @@ type Props = {
 
 const GuideCard = ({ guide }: Props) => {
   const theme = useTheme();
-
+  const totalStars = guide.reviews?.reduce((acc, review) => acc + review.stars, 0);
+  const avgRating = (totalStars ?? 0) / (guide.reviews?.length ?? 1);
   return (
     <Card variant="outlined">
       <CardContent>
@@ -18,8 +19,13 @@ const GuideCard = ({ guide }: Props) => {
           <Typography variant="h6">{guide.title}</Typography>
         </Box>
         <Typography variant="body2" color="textSecondary" mb={2}>
-          Created by User ID: {guide.creatorId}
+          Created by : {guide.creator?.username}
         </Typography>
+        <Rating
+                value={avgRating}
+                precision={0.5}
+                readOnly
+              />
         <Typography variant="body2" color="textSecondary" mb={2}>
           Created at: {new Date(guide.createdAt).toLocaleDateString()}
         </Typography>

From 010e1433c12304b8c1196541d101f6b706cc4e62 Mon Sep 17 00:00:00 2001
From: Ori <ori100no@gmail.com>
Date: Tue, 20 Aug 2024 21:42:28 +0300
Subject: [PATCH 074/242] added loagind spinners and an error message

---
 src/app/(admin)/new_dashboard/guides/[id]/page.tsx | 10 +++++-----
 src/app/(admin)/new_dashboard/guides/page.tsx      |  8 ++++----
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/app/(admin)/new_dashboard/guides/[id]/page.tsx b/src/app/(admin)/new_dashboard/guides/[id]/page.tsx
index 43d861a..6f463fa 100644
--- a/src/app/(admin)/new_dashboard/guides/[id]/page.tsx
+++ b/src/app/(admin)/new_dashboard/guides/[id]/page.tsx
@@ -1,9 +1,9 @@
 "use client";
 import PageContainer from "@/components/PageContainer";
 import { useParams } from "next/navigation";
-import { useAllGuides, useGuide } from "../hooks";
+import { useGuide } from "../hooks";
 import DashboardCard from "../../shared/Card";
-import { Typography,Rating } from "@mui/material";
+import { Typography, CircularProgress, Alert } from "@mui/material";
 import { Guide } from "@/api/types/Guide";
 
 const GuidePage = () => {
@@ -14,15 +14,15 @@ const GuidePage = () => {
   
   let guide: Guide | undefined = undefined;
 
- const {data:response , isLoading, isError, isSuccess} = useGuide(id ?? 0);
+ const {data:response , isLoading, isError, error, isSuccess} = useGuide(id ?? 0);
 
  
   if (isLoading) {
-    return <Typography>Loading...</Typography>;
+    return <CircularProgress />;
   }
 
   if(isError) {
-    return <Typography>Error</Typography>;
+    return <Alert severity="error">This is an error Alert.</Alert>;
   }
 
   if(isSuccess && "data" in response) {
diff --git a/src/app/(admin)/new_dashboard/guides/page.tsx b/src/app/(admin)/new_dashboard/guides/page.tsx
index f7b7376..bc3c22e 100644
--- a/src/app/(admin)/new_dashboard/guides/page.tsx
+++ b/src/app/(admin)/new_dashboard/guides/page.tsx
@@ -1,14 +1,14 @@
 "use client";
 import DashboardCard from "../shared/Card";
 import PageContainer from "@/components/PageContainer";
-import { Box, Typography } from "@mui/material";
+import { Alert, Box, CircularProgress, Typography } from "@mui/material";
 import GuideList from "./components/GuideList";
 import SearchBar from "./components/SearchBar";
 import { useSearchGuides, useAllGuides } from "./hooks";
 import { Guide } from "@/api/types/Guide";
 
 const Page = () => {
-  const { data: guideItems, isLoading, isError, isSuccess } = useAllGuides();
+  const { data: guideItems, isLoading, error, isError, isSuccess } = useAllGuides();
 
   let guides: Guide[] = [];
 
@@ -24,8 +24,8 @@ const Page = () => {
     <PageContainer title="Guides">
       <DashboardCard title="Guides">
         <Box>
-          {isLoading && <Typography>Loading...</Typography>}
-          {isError && <Typography>Error loading guides</Typography>}
+          {isLoading && <CircularProgress />}
+          {isError && <Alert severity="error">{error.message}</Alert>}
           {isSuccess && guides.length > 0 && (
             <>
               <Box mb={2}>

From 12f36383773dfbc9cc55c62f7d0821ec2b65b86b Mon Sep 17 00:00:00 2001
From: Ori <ori100no@gmail.com>
Date: Tue, 20 Aug 2024 22:10:31 +0300
Subject: [PATCH 075/242] added reviews list to the guide page

---
 .../new_dashboard/guides/[id]/page.tsx        | 11 ++++++--
 .../guides/components/ReviewList/index.tsx    | 27 +++++++++++++++++++
 2 files changed, 36 insertions(+), 2 deletions(-)
 create mode 100644 src/app/(admin)/new_dashboard/guides/components/ReviewList/index.tsx

diff --git a/src/app/(admin)/new_dashboard/guides/[id]/page.tsx b/src/app/(admin)/new_dashboard/guides/[id]/page.tsx
index 6f463fa..9f10149 100644
--- a/src/app/(admin)/new_dashboard/guides/[id]/page.tsx
+++ b/src/app/(admin)/new_dashboard/guides/[id]/page.tsx
@@ -3,8 +3,9 @@ import PageContainer from "@/components/PageContainer";
 import { useParams } from "next/navigation";
 import { useGuide } from "../hooks";
 import DashboardCard from "../../shared/Card";
-import { Typography, CircularProgress, Alert } from "@mui/material";
+import { Typography, CircularProgress, Alert, Container } from "@mui/material";
 import { Guide } from "@/api/types/Guide";
+import ReviewList from "../components/ReviewList";
 
 const GuidePage = () => {
   const params = useParams();
@@ -35,10 +36,16 @@ const GuidePage = () => {
         <DashboardCard title={guide.title}>
           <div>
             <div dangerouslySetInnerHTML={{ __html: guide.contentHTML }} />
-            <Typography>
+            <Typography variant="body2" sx={{ mt: 1 }}>
               Created by {guide.creator?.username} on{" "}
               {new Date(guide.createdAt).toLocaleDateString()}
             </Typography>
+            <Typography variant="h6" sx={{ mt: 2 }}>
+              Reviews
+            </Typography>
+            <Container sx={{ mt: 2 , mb: 2}}>
+              <ReviewList reviews={guide.reviews || []} />
+            </Container>  
           </div>
         </DashboardCard>
       </PageContainer>
diff --git a/src/app/(admin)/new_dashboard/guides/components/ReviewList/index.tsx b/src/app/(admin)/new_dashboard/guides/components/ReviewList/index.tsx
new file mode 100644
index 0000000..bee89da
--- /dev/null
+++ b/src/app/(admin)/new_dashboard/guides/components/ReviewList/index.tsx
@@ -0,0 +1,27 @@
+import React from "react";
+import { Typography, Box, Rating, Divider } from "@mui/material";
+import { Review } from "@/api/types/Review"; 
+
+interface ReviewListProps {
+  reviews: Review[];
+}
+
+const ReviewList: React.FC<ReviewListProps> = ({ reviews }) => {
+  if (reviews.length === 0) {
+    return <Typography>No reviews yet.</Typography>;
+  }
+
+  return (
+    <Box>
+      {reviews.map((review, index) => (
+        <Box key={review.reviewId} mb={2}>
+          <Typography variant="body1" mb={0.5}>{review.comment}</Typography>
+          <Rating value={review.stars} readOnly />
+          {index < reviews.length - 1 && <Divider sx={{ mt: 2, mb: 2 }} />}     
+        </Box>
+      ))}
+    </Box>
+  );
+};
+
+export default ReviewList;

From f79d9f8dd0a4452f34e75fc70cd2fe24eee8b619 Mon Sep 17 00:00:00 2001
From: Ori <ori100no@gmail.com>
Date: Tue, 20 Aug 2024 22:45:15 +0300
Subject: [PATCH 076/242] designed the application

---
 .../(admin)/new_dashboard/guides/[id]/page.tsx    | 15 ++++++---------
 .../guides/components/ReviewList/index.tsx        | 10 +++++++++-
 2 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/src/app/(admin)/new_dashboard/guides/[id]/page.tsx b/src/app/(admin)/new_dashboard/guides/[id]/page.tsx
index 9f10149..736f320 100644
--- a/src/app/(admin)/new_dashboard/guides/[id]/page.tsx
+++ b/src/app/(admin)/new_dashboard/guides/[id]/page.tsx
@@ -3,7 +3,7 @@ import PageContainer from "@/components/PageContainer";
 import { useParams } from "next/navigation";
 import { useGuide } from "../hooks";
 import DashboardCard from "../../shared/Card";
-import { Typography, CircularProgress, Alert, Container } from "@mui/material";
+import { Typography, CircularProgress, Alert, Box } from "@mui/material";
 import { Guide } from "@/api/types/Guide";
 import ReviewList from "../components/ReviewList";
 
@@ -35,19 +35,16 @@ const GuidePage = () => {
       <PageContainer title={guide.title}>
         <DashboardCard title={guide.title}>
           <div>
-            <div dangerouslySetInnerHTML={{ __html: guide.contentHTML }} />
-            <Typography variant="body2" sx={{ mt: 1 }}>
+          <Typography variant="body2" sx={{ mb: 2 }}>
               Created by {guide.creator?.username} on{" "}
               {new Date(guide.createdAt).toLocaleDateString()}
             </Typography>
-            <Typography variant="h6" sx={{ mt: 2 }}>
-              Reviews
-            </Typography>
-            <Container sx={{ mt: 2 , mb: 2}}>
-              <ReviewList reviews={guide.reviews || []} />
-            </Container>  
+            <div dangerouslySetInnerHTML={{ __html: guide.contentHTML }} />
+            
           </div>
         </DashboardCard>
+        <Box mt={2}></Box>
+        <ReviewList reviews={guide.reviews || []} />
       </PageContainer>
     );
   }
diff --git a/src/app/(admin)/new_dashboard/guides/components/ReviewList/index.tsx b/src/app/(admin)/new_dashboard/guides/components/ReviewList/index.tsx
index bee89da..80c99e4 100644
--- a/src/app/(admin)/new_dashboard/guides/components/ReviewList/index.tsx
+++ b/src/app/(admin)/new_dashboard/guides/components/ReviewList/index.tsx
@@ -1,6 +1,9 @@
+"use client";
 import React from "react";
 import { Typography, Box, Rating, Divider } from "@mui/material";
 import { Review } from "@/api/types/Review"; 
+import PageContainer from "@/components/PageContainer";
+import DashboardCard from "../../../shared/Card";
 
 interface ReviewListProps {
   reviews: Review[];
@@ -12,7 +15,9 @@ const ReviewList: React.FC<ReviewListProps> = ({ reviews }) => {
   }
 
   return (
-    <Box>
+    <PageContainer title={"Reviews"} >
+        <DashboardCard title={"Reviews"}>
+         <Box mt={2}>
       {reviews.map((review, index) => (
         <Box key={review.reviewId} mb={2}>
           <Typography variant="body1" mb={0.5}>{review.comment}</Typography>
@@ -21,6 +26,9 @@ const ReviewList: React.FC<ReviewListProps> = ({ reviews }) => {
         </Box>
       ))}
     </Box>
+        </DashboardCard>
+      </PageContainer>
+    
   );
 };
 

From 3218e1b079ff26528dc05af1f0506392d9990eaa Mon Sep 17 00:00:00 2001
From: Ori <ori100no@gmail.com>
Date: Wed, 21 Aug 2024 09:57:58 +0300
Subject: [PATCH 077/242] linted reviewlist

---
 .../guides/components/ReviewList/index.tsx    | 27 ++++++++++---------
 1 file changed, 14 insertions(+), 13 deletions(-)

diff --git a/src/app/(admin)/new_dashboard/guides/components/ReviewList/index.tsx b/src/app/(admin)/new_dashboard/guides/components/ReviewList/index.tsx
index 80c99e4..3eaf384 100644
--- a/src/app/(admin)/new_dashboard/guides/components/ReviewList/index.tsx
+++ b/src/app/(admin)/new_dashboard/guides/components/ReviewList/index.tsx
@@ -15,20 +15,21 @@ const ReviewList: React.FC<ReviewListProps> = ({ reviews }) => {
   }
 
   return (
-    <PageContainer title={"Reviews"} >
-        <DashboardCard title={"Reviews"}>
-         <Box mt={2}>
-      {reviews.map((review, index) => (
-        <Box key={review.reviewId} mb={2}>
-          <Typography variant="body1" mb={0.5}>{review.comment}</Typography>
-          <Rating value={review.stars} readOnly />
-          {index < reviews.length - 1 && <Divider sx={{ mt: 2, mb: 2 }} />}     
+    <PageContainer title="Reviews">
+      <DashboardCard title="Reviews">
+        <Box mt={2}>
+          {reviews.map((review, index) => (
+            <Box key={review.reviewId} mb={2}>
+              <Typography variant="body1" mb={0.5}>
+                {review.comment}
+              </Typography>
+              <Rating value={review.stars} readOnly />
+              {index < reviews.length - 1 && <Divider sx={{ mt: 2, mb: 2 }} />}
+            </Box>
+          ))}
         </Box>
-      ))}
-    </Box>
-        </DashboardCard>
-      </PageContainer>
-    
+      </DashboardCard>
+    </PageContainer>
   );
 };
 

From e96adb4f05d68dff49d0a3ffbe99fd79cd4b50f3 Mon Sep 17 00:00:00 2001
From: Ori <ori100no@gmail.com>
Date: Wed, 21 Aug 2024 12:11:26 +0300
Subject: [PATCH 078/242] feat: Add AddReviewBox component to allow users to
 submit reviews, also each review has its user's username

---
 src/api/guide.client.ts                       |  5 ++
 src/api/types/Guide.ts                        | 19 +----
 src/api/types/Review.ts                       |  4 +-
 src/api/types/User.ts                         | 11 +++
 .../new_dashboard/guides/[id]/page.tsx        |  7 +-
 .../guides/components/AddReviewBox/index.tsx  | 82 +++++++++++++++++++
 .../guides/components/ReviewList/index.tsx    | 72 +++++++++++-----
 .../guides/dto/CreateReviewDto.ts             | 13 +++
 .../new_dashboard/guides/hooks/guideHooks.ts  | 10 ++-
 9 files changed, 179 insertions(+), 44 deletions(-)
 create mode 100644 src/api/types/User.ts
 create mode 100644 src/app/(admin)/new_dashboard/guides/components/AddReviewBox/index.tsx
 create mode 100644 src/app/(admin)/new_dashboard/guides/dto/CreateReviewDto.ts

diff --git a/src/api/guide.client.ts b/src/api/guide.client.ts
index f8d7f17..704e7cf 100644
--- a/src/api/guide.client.ts
+++ b/src/api/guide.client.ts
@@ -1,3 +1,4 @@
+import { CreateReviewDto } from '@/app/(admin)/new_dashboard/guides/dto/CreateReviewDto';
 import { BaseClient } from './base.client';
 import { Guide } from './types/Guide';
 import { Review } from './types/Review';
@@ -14,4 +15,8 @@ export class GuideClient extends BaseClient {
   async getGuide(guideId: number) {
     return await this.get<Guide>('guides/' + guideId);
   }
+  
+  async addReview(review:CreateReviewDto) {
+    return await this.post<Review>('reviews', review);
+  }
 }
diff --git a/src/api/types/Guide.ts b/src/api/types/Guide.ts
index ea582f5..5af4830 100644
--- a/src/api/types/Guide.ts
+++ b/src/api/types/Guide.ts
@@ -1,21 +1,6 @@
 import { z } from 'zod';
-
-const userSchema = z.object({
-  userId: z.number(),
-  username: z.string(),
-  email: z.string(),
-  password: z.string(), 
-  roles: z.array(z.string()),
-}).optional();
-
-const reviewSchema = z.object({
-  reviewId: z.number(),
-  userId: z.number(),
-  guideId: z.number(),
-  stars: z.number(),
-  comment: z.string(),
-  createdAt: z.date(),
-});
+import { userSchema } from './User';
+import { reviewSchema } from './Review';
 
 const guideSchema = z.object({
   guideId: z.number(),
diff --git a/src/api/types/Review.ts b/src/api/types/Review.ts
index 395f729..842c4a2 100644
--- a/src/api/types/Review.ts
+++ b/src/api/types/Review.ts
@@ -1,12 +1,14 @@
 import { z } from 'zod';
+import { userSchema } from './User';
 
-const reviewSchema = z.object({
+export const reviewSchema = z.object({
   reviewId: z.number(),
   userId: z.number(),
   guideId: z.number(),
   stars: z.number().min(1).max(5),
   comment: z.string().optional(),
   createdAt: z.date(),
+  user: userSchema.optional(),
 });
 
 export type Review = z.infer<typeof reviewSchema>;
diff --git a/src/api/types/User.ts b/src/api/types/User.ts
new file mode 100644
index 0000000..a90744a
--- /dev/null
+++ b/src/api/types/User.ts
@@ -0,0 +1,11 @@
+import { z } from 'zod';
+
+export const userSchema = z.object({
+  userId: z.number(),
+  username: z.string(),
+  email: z.string().email(),
+  password: z.string(),
+  roles: z.array(z.string()),
+});
+
+export type User = z.infer<typeof userSchema>;
diff --git a/src/app/(admin)/new_dashboard/guides/[id]/page.tsx b/src/app/(admin)/new_dashboard/guides/[id]/page.tsx
index 736f320..7386f0b 100644
--- a/src/app/(admin)/new_dashboard/guides/[id]/page.tsx
+++ b/src/app/(admin)/new_dashboard/guides/[id]/page.tsx
@@ -3,9 +3,10 @@ import PageContainer from "@/components/PageContainer";
 import { useParams } from "next/navigation";
 import { useGuide } from "../hooks";
 import DashboardCard from "../../shared/Card";
-import { Typography, CircularProgress, Alert, Box } from "@mui/material";
+import { Typography, CircularProgress, Alert, Box, Divider } from "@mui/material";
 import { Guide } from "@/api/types/Guide";
 import ReviewList from "../components/ReviewList";
+import AddReviewBox from "../components/AddReviewBox";
 
 const GuidePage = () => {
   const params = useParams();
@@ -43,8 +44,8 @@ const GuidePage = () => {
             
           </div>
         </DashboardCard>
-        <Box mt={2}></Box>
-        <ReviewList reviews={guide.reviews || []} />
+        <Divider sx={{ mt: 2, mb: 2, border: 'none' }} />
+        <ReviewList guideId={guide.guideId}/>        
       </PageContainer>
     );
   }
diff --git a/src/app/(admin)/new_dashboard/guides/components/AddReviewBox/index.tsx b/src/app/(admin)/new_dashboard/guides/components/AddReviewBox/index.tsx
new file mode 100644
index 0000000..5c4aaac
--- /dev/null
+++ b/src/app/(admin)/new_dashboard/guides/components/AddReviewBox/index.tsx
@@ -0,0 +1,82 @@
+import React, { useState } from 'react';
+import { useAddReview } from '../../hooks';
+import { Box, Typography, Rating, TextField, Button } from '@mui/material';
+import { CreateReviewDto,CreateReviewSchema } from '../../dto/CreateReviewDto';
+
+interface AddReviewBoxProps {
+    guideId: number;
+}
+
+const AddReviewBox: React.FC<AddReviewBoxProps> = ({ guideId }) => {
+  const [comment, setComment] = useState('');
+  const [stars, setStars] = useState(0);
+  const [validationError, setValidationError] = useState<string | null>(null);
+  const {mutate, isError,error,isPending,isSuccess} = useAddReview();
+
+  const handleSubmit = () => {
+    const newReview: CreateReviewDto = {
+        guideId,
+        stars: stars ?? 0,
+        comment: comment.trim() || undefined,
+    };
+    const validation = CreateReviewSchema.safeParse(newReview);
+    if (!validation.success) {
+        setValidationError(validation.error.errors.map((err) => err.message).join(", "));
+        return;
+    }
+
+    mutate(validation.data,{
+        onSuccess: () => {
+            setComment('');
+            setStars(5);
+        }
+    });
+  };
+
+  return (
+    <Box>
+      <Typography variant="h6">Add Your Review</Typography>
+      <Box mb={2}>
+        <Typography component="legend">Rating</Typography>
+        <Rating
+          name="stars"
+          value={stars}
+          onChange={(event, newValue) => setStars(newValue ?? 1)}
+        />
+      </Box>
+      <TextField
+        label="Write your comment (optional)"
+        multiline
+        fullWidth
+        minRows={3}
+        variant="outlined"
+        value={comment}
+        onChange={(e) => setComment(e.target.value)}
+        disabled={isPending}
+      />
+      <Box mt={2}>
+        <Button
+          variant="contained"
+          color="primary"
+          onClick={handleSubmit}
+          disabled={isPending || stars === null}
+        >
+          {isPending ? 'Submitting...' : 'Submit Review'}
+        </Button>
+      </Box>
+      {validationError && (
+        <Typography color="error">{validationError}</Typography>
+      )}
+      {isError && (
+        <Typography color="error">
+          Error: {error.message}
+        </Typography>
+      )}
+      {isSuccess && (
+        <Typography color="success.main">Review submitted successfully!</Typography>
+      )}
+    </Box>
+  );
+};
+
+export default AddReviewBox;
\ No newline at end of file
diff --git a/src/app/(admin)/new_dashboard/guides/components/ReviewList/index.tsx b/src/app/(admin)/new_dashboard/guides/components/ReviewList/index.tsx
index 3eaf384..a428ac6 100644
--- a/src/app/(admin)/new_dashboard/guides/components/ReviewList/index.tsx
+++ b/src/app/(admin)/new_dashboard/guides/components/ReviewList/index.tsx
@@ -1,36 +1,64 @@
 "use client";
 import React from "react";
-import { Typography, Box, Rating, Divider } from "@mui/material";
+import { Typography, Box, Rating, Divider,CircularProgress, Alert } from "@mui/material";
 import { Review } from "@/api/types/Review"; 
 import PageContainer from "@/components/PageContainer";
 import DashboardCard from "../../../shared/Card";
+import AddReviewBox from "../AddReviewBox";
+import { useReviews } from "../../hooks";
 
 interface ReviewListProps {
-  reviews: Review[];
+  guideId: number;
 }
 
-const ReviewList: React.FC<ReviewListProps> = ({ reviews }) => {
-  if (reviews.length === 0) {
-    return <Typography>No reviews yet.</Typography>;
+const ReviewList: React.FC<ReviewListProps> = ({ guideId }) => {
+  const {data:response , isError , error , isSuccess  ,isLoading} = useReviews(guideId);
+  let reviews: Review[] = [];
+  if (isLoading) {
+    return <CircularProgress />;
   }
 
-  return (
-    <PageContainer title="Reviews">
-      <DashboardCard title="Reviews">
-        <Box mt={2}>
-          {reviews.map((review, index) => (
-            <Box key={review.reviewId} mb={2}>
-              <Typography variant="body1" mb={0.5}>
-                {review.comment}
-              </Typography>
-              <Rating value={review.stars} readOnly />
-              {index < reviews.length - 1 && <Divider sx={{ mt: 2, mb: 2 }} />}
+  if(isError) {
+    return <Alert severity="error">This is an error Alert.</Alert>;
+  }
+
+  if(isSuccess && "data" in response) {
+    reviews = response.data;
+    if(reviews.length === 0) {
+      return (
+        <PageContainer title="Reviews">
+          <DashboardCard title="Reviews">
+            <Box mt={2}>
+              <Typography>No reviews available</Typography>
+              <Divider sx={{ mt: 2, mb: 2 }} />
+              <AddReviewBox guideId={guideId} />
             </Box>
-          ))}
-        </Box>
-      </DashboardCard>
-    </PageContainer>
-  );
-};
+          </DashboardCard>
+        </PageContainer>
+      )
+    }
+    return (
+      <PageContainer title="Reviews">
+        <DashboardCard title="Reviews">
+          <Box mt={2}>
+            {reviews.map((review, index) => (
+              <Box key={review.reviewId} mb={2}>
+                <Typography>
+                  {review.user?.username} - {new Date(review.createdAt).toLocaleDateString()}
+                </Typography>
+                <Typography variant="body1" mb={0.5}>
+                  {review.comment}
+                </Typography>
+                <Rating value={review.stars} readOnly />
+                {index < reviews.length - 1 && <Divider sx={{ mt: 2, mb: 2 }} />}
+              </Box>
+            ))}
+            <AddReviewBox guideId={guideId} />
+          </Box>
+        </DashboardCard>
+      </PageContainer>
+    );
+  };
+}
 
 export default ReviewList;
diff --git a/src/app/(admin)/new_dashboard/guides/dto/CreateReviewDto.ts b/src/app/(admin)/new_dashboard/guides/dto/CreateReviewDto.ts
new file mode 100644
index 0000000..6470dc0
--- /dev/null
+++ b/src/app/(admin)/new_dashboard/guides/dto/CreateReviewDto.ts
@@ -0,0 +1,13 @@
+import { z } from 'zod';
+
+export const CreateReviewSchema = z.object({
+  guideId: z.number({
+    required_error: "Guide ID is required",
+  }),
+  stars: z.number({
+    required_error: "Stars rating is required",
+  }).min(1, "Stars rating must be at least 1").max(5, "Stars rating cannot exceed 5"),
+  comment: z.string().optional(),
+});
+
+export type CreateReviewDto = z.infer<typeof CreateReviewSchema>;
diff --git a/src/app/(admin)/new_dashboard/guides/hooks/guideHooks.ts b/src/app/(admin)/new_dashboard/guides/hooks/guideHooks.ts
index ac0af3c..1fe05c1 100644
--- a/src/app/(admin)/new_dashboard/guides/hooks/guideHooks.ts
+++ b/src/app/(admin)/new_dashboard/guides/hooks/guideHooks.ts
@@ -1,5 +1,7 @@
 import { GuideClient } from '@/api/guide.client';
-import { useQuery } from '@tanstack/react-query';
+import { Review } from '@/api/types/Review';
+import { useQuery, useMutation } from '@tanstack/react-query';
+import { CreateReviewDto } from '../dto/CreateReviewDto';
 
 const guideClient = new GuideClient();
 
@@ -23,3 +25,9 @@ export function useGuide(guideId: number) {
     queryFn: () => guideClient.getGuide(guideId),
   });
 }
+
+export function useAddReview() {
+  return useMutation({
+    mutationFn: (review:CreateReviewDto) => guideClient.addReview(review),
+  });
+}

From 450aa1caf3894ecc0640a5f21a5bf17675fca5e8 Mon Sep 17 00:00:00 2001
From: Ori <ori100no@gmail.com>
Date: Wed, 21 Aug 2024 14:10:33 +0300
Subject: [PATCH 079/242] added proper error message

---
 src/app/(admin)/new_dashboard/guides/[id]/page.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/(admin)/new_dashboard/guides/[id]/page.tsx b/src/app/(admin)/new_dashboard/guides/[id]/page.tsx
index 7386f0b..33787c1 100644
--- a/src/app/(admin)/new_dashboard/guides/[id]/page.tsx
+++ b/src/app/(admin)/new_dashboard/guides/[id]/page.tsx
@@ -24,7 +24,7 @@ const GuidePage = () => {
   }
 
   if(isError) {
-    return <Alert severity="error">This is an error Alert.</Alert>;
+    return <Alert severity="error">{error.message}</Alert>;
   }
 
   if(isSuccess && "data" in response) {

From 091c6befc7ffbc473e28e389980a9521bcf79172 Mon Sep 17 00:00:00 2001
From: Ori <ori100no@gmail.com>
Date: Wed, 21 Aug 2024 14:22:08 +0300
Subject: [PATCH 080/242] removed dummy data

---
 .../guides/hooks/useGuideItems.ts             | 37 -------------------
 1 file changed, 37 deletions(-)
 delete mode 100644 src/app/(admin)/new_dashboard/guides/hooks/useGuideItems.ts

diff --git a/src/app/(admin)/new_dashboard/guides/hooks/useGuideItems.ts b/src/app/(admin)/new_dashboard/guides/hooks/useGuideItems.ts
deleted file mode 100644
index cad316b..0000000
--- a/src/app/(admin)/new_dashboard/guides/hooks/useGuideItems.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-import { useState } from "react";
-import { Guide } from "../types";
-
-export const useGuideItems = () => {
-  const [guideItems] = useState<Guide[]>([
-    {
-      id: 1,
-      title: "How to startup the computer",
-      issue: "Computer not starting",
-      likes: 100,
-      dislikes: 5,
-    },
-    {
-      id: 2,
-      title: "Fixing WIFI issues",
-      issue: "Wi-Fi connectivity issues",
-      likes: 75,
-      dislikes: 12,
-    },
-    {
-      id: 3,
-      title: "How to fix Installion Errors in Mac",
-      issue: "Software installation errors",
-      likes: 150,
-      dislikes: 7,
-    },
-    {
-      id: 4,
-      title: "Fixing slow system startup",
-      issue: "Slow system performance",
-      likes: 90,
-      dislikes: 10,
-    },
-  ]);
-
-  return { guideItems };
-};

From dcc9214dbfb50de7f9e4feb1a3930c367d84c7d7 Mon Sep 17 00:00:00 2001
From: Ori <ori100no@gmail.com>
Date: Wed, 21 Aug 2024 14:24:01 +0300
Subject: [PATCH 081/242] added proper error message

---
 .../new_dashboard/guides/components/ReviewList/index.tsx        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/(admin)/new_dashboard/guides/components/ReviewList/index.tsx b/src/app/(admin)/new_dashboard/guides/components/ReviewList/index.tsx
index a428ac6..79d9cfc 100644
--- a/src/app/(admin)/new_dashboard/guides/components/ReviewList/index.tsx
+++ b/src/app/(admin)/new_dashboard/guides/components/ReviewList/index.tsx
@@ -19,7 +19,7 @@ const ReviewList: React.FC<ReviewListProps> = ({ guideId }) => {
   }
 
   if(isError) {
-    return <Alert severity="error">This is an error Alert.</Alert>;
+    return <Alert severity="error">{error.message}</Alert>;
   }
 
   if(isSuccess && "data" in response) {

From b48bbde4fd816b945041cc83849a4cf4c1e6dfcb Mon Sep 17 00:00:00 2001
From: Ori <ori100no@gmail.com>
Date: Wed, 21 Aug 2024 14:44:09 +0300
Subject: [PATCH 082/242] extracted buisness logic from the AddReview box
 component

---
 .../guides/components/AddReviewBox/index.tsx  | 57 +++++++------------
 .../guides/components/ReviewList/index.tsx    |  1 +
 .../{guideHooks.ts => guideClientHooks.ts}    |  1 -
 .../new_dashboard/guides/hooks/index.ts       |  4 +-
 .../guides/hooks/useAddReviewForm.ts          | 48 ++++++++++++++++
 5 files changed, 73 insertions(+), 38 deletions(-)
 rename src/app/(admin)/new_dashboard/guides/hooks/{guideHooks.ts => guideClientHooks.ts} (94%)
 create mode 100644 src/app/(admin)/new_dashboard/guides/hooks/useAddReviewForm.ts

diff --git a/src/app/(admin)/new_dashboard/guides/components/AddReviewBox/index.tsx b/src/app/(admin)/new_dashboard/guides/components/AddReviewBox/index.tsx
index 5c4aaac..1bb59d5 100644
--- a/src/app/(admin)/new_dashboard/guides/components/AddReviewBox/index.tsx
+++ b/src/app/(admin)/new_dashboard/guides/components/AddReviewBox/index.tsx
@@ -1,43 +1,28 @@
-import React, { useState } from 'react';
-import { useAddReview } from '../../hooks';
+import React from 'react';
 import { Box, Typography, Rating, TextField, Button } from '@mui/material';
-import { CreateReviewDto,CreateReviewSchema } from '../../dto/CreateReviewDto';
-
+import useAddReviewForm from '../../hooks/useAddReviewForm';
 interface AddReviewBoxProps {
-    guideId: number;
+  guideId: number;
 }
 
 const AddReviewBox: React.FC<AddReviewBoxProps> = ({ guideId }) => {
-  const [comment, setComment] = useState('');
-  const [stars, setStars] = useState(0);
-  const [validationError, setValidationError] = useState<string | null>(null);
-  const {mutate, isError,error,isPending,isSuccess} = useAddReview();
-
-  const handleSubmit = () => {
-    const newReview: CreateReviewDto = {
-        guideId,
-        stars: stars ?? 0,
-        comment: comment.trim() || undefined,
-    };
-    const validation = CreateReviewSchema.safeParse(newReview);
-    if (!validation.success) {
-        setValidationError(validation.error.errors.map((err) => err.message).join(", "));
-        return;
-    }
-
-    mutate(validation.data,{
-        onSuccess: () => {
-            setComment('');
-            setStars(5);
-        }
-    });
-  };
+  const {
+    comment,
+    setComment,
+    stars,
+    setStars,
+    validationError,
+    isError,
+    error,
+    isPending,
+    isSuccess,
+    handleSubmit,
+  } = useAddReviewForm(guideId);
 
   return (
     <Box>
-      <Typography variant="h6">Add Your Review</Typography>
-      <Box mb={2}>
-        <Typography component="legend">Rating</Typography>
+      <Typography variant="h6" >Add Your Review:</Typography>
+      <Box mb={2} mt={2}>
         <Rating
           name="stars"
           value={stars}
@@ -69,14 +54,16 @@ const AddReviewBox: React.FC<AddReviewBoxProps> = ({ guideId }) => {
       )}
       {isError && (
         <Typography color="error">
-          Error: {error.message}
+          {error?.message}
         </Typography>
       )}
       {isSuccess && (
-        <Typography color="success.main">Review submitted successfully!</Typography>
+        <Typography color="success.main">
+          Review submitted successfully!
+        </Typography>
       )}
     </Box>
   );
 };
 
-export default AddReviewBox;
\ No newline at end of file
+export default AddReviewBox;
diff --git a/src/app/(admin)/new_dashboard/guides/components/ReviewList/index.tsx b/src/app/(admin)/new_dashboard/guides/components/ReviewList/index.tsx
index 79d9cfc..71c155e 100644
--- a/src/app/(admin)/new_dashboard/guides/components/ReviewList/index.tsx
+++ b/src/app/(admin)/new_dashboard/guides/components/ReviewList/index.tsx
@@ -53,6 +53,7 @@ const ReviewList: React.FC<ReviewListProps> = ({ guideId }) => {
                 {index < reviews.length - 1 && <Divider sx={{ mt: 2, mb: 2 }} />}
               </Box>
             ))}
+            <Divider sx={{ mt: 2, mb: 2 }} />
             <AddReviewBox guideId={guideId} />
           </Box>
         </DashboardCard>
diff --git a/src/app/(admin)/new_dashboard/guides/hooks/guideHooks.ts b/src/app/(admin)/new_dashboard/guides/hooks/guideClientHooks.ts
similarity index 94%
rename from src/app/(admin)/new_dashboard/guides/hooks/guideHooks.ts
rename to src/app/(admin)/new_dashboard/guides/hooks/guideClientHooks.ts
index 1fe05c1..6ef749b 100644
--- a/src/app/(admin)/new_dashboard/guides/hooks/guideHooks.ts
+++ b/src/app/(admin)/new_dashboard/guides/hooks/guideClientHooks.ts
@@ -1,5 +1,4 @@
 import { GuideClient } from '@/api/guide.client';
-import { Review } from '@/api/types/Review';
 import { useQuery, useMutation } from '@tanstack/react-query';
 import { CreateReviewDto } from '../dto/CreateReviewDto';
 
diff --git a/src/app/(admin)/new_dashboard/guides/hooks/index.ts b/src/app/(admin)/new_dashboard/guides/hooks/index.ts
index b3dd361..2350a6e 100644
--- a/src/app/(admin)/new_dashboard/guides/hooks/index.ts
+++ b/src/app/(admin)/new_dashboard/guides/hooks/index.ts
@@ -1,3 +1,3 @@
-export * from './useGuideItems';
 export * from './useSearchGuides';
-export * from './guideHooks';
+export * from './guideClientHooks';
+export * from './useAddReviewForm';
diff --git a/src/app/(admin)/new_dashboard/guides/hooks/useAddReviewForm.ts b/src/app/(admin)/new_dashboard/guides/hooks/useAddReviewForm.ts
new file mode 100644
index 0000000..3c96316
--- /dev/null
+++ b/src/app/(admin)/new_dashboard/guides/hooks/useAddReviewForm.ts
@@ -0,0 +1,48 @@
+import { useState } from 'react';
+import { useAddReview } from './guideClientHooks';
+import { CreateReviewDto, CreateReviewSchema } from '../dto/CreateReviewDto';
+
+const useAddReviewForm = (guideId: number) => {
+  const [comment, setComment] = useState('');
+  const [stars, setStars] = useState(0);
+  const [validationError, setValidationError] = useState<string | null>(null);
+  const { mutate, isError, error, isPending, isSuccess } = useAddReview();
+
+  const handleSubmit = () => {
+    const newReview: CreateReviewDto = {
+      guideId,
+      stars: stars ?? 0,
+      comment: comment.trim() || undefined,
+    };
+    const validation = CreateReviewSchema.safeParse(newReview);
+    if (!validation.success) {
+      setValidationError(
+        validation.error.errors.map((err) => err.message).join(', ')
+      );
+      return;
+    }
+
+    mutate(validation.data, {
+      onSuccess: () => {
+        setComment('');
+        setStars(0);
+      },
+    });
+  };
+
+  return {
+    comment,
+    setComment,
+    stars,
+    setStars,
+    validationError,
+    setValidationError,
+    isError,
+    error,
+    isPending,
+    isSuccess,
+    handleSubmit,
+  };
+};
+
+export default useAddReviewForm;

From 4bf79555b2d8adcc0d53cc84cc9fc22f6b49f699 Mon Sep 17 00:00:00 2001
From: Roie <roiy0987@gmail.com>
Date: Wed, 21 Aug 2024 14:46:48 +0300
Subject: [PATCH 083/242] refactor: Improve performance of ContactList
 component

---
 src/app/(admin)/new_dashboard/components/ContactList/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/(admin)/new_dashboard/components/ContactList/index.tsx b/src/app/(admin)/new_dashboard/components/ContactList/index.tsx
index 06fabd7..e1e4d96 100644
--- a/src/app/(admin)/new_dashboard/components/ContactList/index.tsx
+++ b/src/app/(admin)/new_dashboard/components/ContactList/index.tsx
@@ -20,7 +20,7 @@ const ContactList = ({ contacts, onSelectContact, selectedContact }: Props) => {
       sx={{
         width: "30%",
         borderRight: "1px solid #e0e0e0",
-        overflow: "hidden",
+        overflow: "auto",
       }}
     >
       <List>

From b396c68379e73d0eabaf5432ae2ebbfd87d607ab Mon Sep 17 00:00:00 2001
From: Roie <roiy0987@gmail.com>
Date: Wed, 21 Aug 2024 15:03:10 +0300
Subject: [PATCH 084/242] refactor: Update MessageList component to use
 selectedContact's chatId

---
 src/app/(admin)/new_dashboard/page.tsx | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/app/(admin)/new_dashboard/page.tsx b/src/app/(admin)/new_dashboard/page.tsx
index 5779077..56f5343 100644
--- a/src/app/(admin)/new_dashboard/page.tsx
+++ b/src/app/(admin)/new_dashboard/page.tsx
@@ -56,10 +56,7 @@ const Page = () => {
 
               {/* Message List */}
               {selectedContact && (
-                <MessageList
-                  // messages={contactMessages}
-                  chatId={selectedContact.chatId}
-                />
+                <MessageList chatId={selectedContact.chatId} />
               )}
 
               {/* Input and Send Button */}

From 8615022becefa39504c3e51b7d0b009e46249749 Mon Sep 17 00:00:00 2001
From: Roie <roiy0987@gmail.com>
Date: Wed, 21 Aug 2024 15:58:07 +0300
Subject: [PATCH 085/242] refactor: Update SupportMessageList component to use
 selectedContact's chatId

---
 .../MessageInput/hooks/useMessage.ts          | 55 -------------
 .../components/MessageInput/index.tsx         | 79 -------------------
 .../MessageInput/validations/schema.ts        | 11 ---
 .../MessageList/hooks/useMessageList.ts       | 50 ------------
 .../components/MessageList/index.tsx          | 76 ------------------
 .../components/SupportMessageList/index.tsx   | 30 +++++++
 .../SupportMessageList/types/index.ts         |  9 +++
 src/app/(admin)/new_dashboard/page.tsx        |  7 +-
 8 files changed, 43 insertions(+), 274 deletions(-)
 delete mode 100644 src/app/(admin)/new_dashboard/components/MessageInput/hooks/useMessage.ts
 delete mode 100644 src/app/(admin)/new_dashboard/components/MessageInput/index.tsx
 delete mode 100644 src/app/(admin)/new_dashboard/components/MessageInput/validations/schema.ts
 delete mode 100644 src/app/(admin)/new_dashboard/components/MessageList/hooks/useMessageList.ts
 delete mode 100644 src/app/(admin)/new_dashboard/components/MessageList/index.tsx
 create mode 100644 src/app/(admin)/new_dashboard/components/SupportMessageList/index.tsx
 create mode 100644 src/app/(admin)/new_dashboard/components/SupportMessageList/types/index.ts

diff --git a/src/app/(admin)/new_dashboard/components/MessageInput/hooks/useMessage.ts b/src/app/(admin)/new_dashboard/components/MessageInput/hooks/useMessage.ts
deleted file mode 100644
index 075a750..0000000
--- a/src/app/(admin)/new_dashboard/components/MessageInput/hooks/useMessage.ts
+++ /dev/null
@@ -1,55 +0,0 @@
-"use client";
-import { useState } from "react";
-import { useForm } from "react-hook-form";
-import { schema } from "../validations/schema";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { Socket } from "socket.io-client";
-
-type MessageRequest = {
-  message: string;
-};
-type Props = {
-  chatId: number;
-  socket: Socket;
-};
-
-export const useMessage = ({ chatId, socket }: Props) => {
-  const [isNote, setIsNote] = useState<boolean>(false);
-  const {
-    register,
-    handleSubmit,
-    reset,
-    formState: { errors },
-  } = useForm<MessageRequest>({
-    resolver: zodResolver(schema),
-    mode: "onChange",
-    reValidateMode: "onChange",
-  });
-
-  const handleSendMessage = (messageRequest: MessageRequest) => {
-    const newMessage = messageRequest.message;
-    const data = {
-      chatId: chatId,
-      content: newMessage,
-    };
-    const allMessage = {
-      data: data,
-      isSupportSender: true,
-      isNote: isNote,
-    };
-
-    if (chatId) {
-      socket.emit("message", allMessage);
-      reset({
-        message: "",
-      });
-    }
-  };
-  return {
-    isNote,
-    handleChangeNote: () => setIsNote(!isNote),
-    register,
-    handleSubmit: handleSubmit(handleSendMessage),
-    errors,
-  };
-};
diff --git a/src/app/(admin)/new_dashboard/components/MessageInput/index.tsx b/src/app/(admin)/new_dashboard/components/MessageInput/index.tsx
deleted file mode 100644
index 32759ba..0000000
--- a/src/app/(admin)/new_dashboard/components/MessageInput/index.tsx
+++ /dev/null
@@ -1,79 +0,0 @@
-import { Box, TextField, IconButton, Button } from "@mui/material";
-import SendIcon from "@mui/icons-material/Send";
-import { useMessage } from "./hooks/useMessage";
-import { useSocket } from "@/app/hooks/useSocket";
-
-type MessageInputProps = {
-  chatId: number;
-};
-
-const MessageInput = ({ chatId }: MessageInputProps) => {
-  const socket = useSocket();
-  const { errors, handleChangeNote, handleSubmit, isNote, register } =
-    useMessage({ chatId, socket });
-
-  return (
-    <Box
-      sx={{
-        display: "flex",
-        alignItems: "center",
-        flexDirection: "column",
-        paddingTop: 1,
-        position: "sticky",
-        bottom: 0,
-        backgroundColor: "background.paper",
-      }}
-    >
-      <Box sx={{ display: "flex", alignSelf: "start", gap: 1 }}>
-        <Button
-          variant={!isNote ? "contained" : "outlined"}
-          onClick={isNote ? handleChangeNote : () => {}}
-        >
-          Reply
-        </Button>
-        <Button
-          variant={isNote ? "contained" : "outlined"}
-          onClick={!isNote ? handleChangeNote : () => {}}
-        >
-          Note
-        </Button>
-      </Box>
-      <Box
-        sx={{
-          display: "flex",
-          alignItems: "end",
-          flexDirection: "row",
-          paddingTop: 1,
-          width: "100%",
-          position: "sticky",
-          bottom: 0,
-          backgroundColor: "background.paper",
-        }}
-      >
-        <TextField
-          fullWidth
-          variant="outlined"
-          size="small"
-          placeholder="Type a message..."
-          id="message"
-          autoComplete="message"
-          autoFocus
-          {...register("message")}
-          multiline
-          minRows={5}
-          maxRows={10}
-          InputProps={{
-            style: { overflow: "hidden" },
-          }}
-          error={!!errors.message}
-          helperText={errors.message ? errors.message.message : ""}
-        />
-        <IconButton color="primary" onClick={handleSubmit} sx={{ ml: 1 }}>
-          <SendIcon />
-        </IconButton>
-      </Box>
-    </Box>
-  );
-};
-
-export default MessageInput;
diff --git a/src/app/(admin)/new_dashboard/components/MessageInput/validations/schema.ts b/src/app/(admin)/new_dashboard/components/MessageInput/validations/schema.ts
deleted file mode 100644
index 0ad8c04..0000000
--- a/src/app/(admin)/new_dashboard/components/MessageInput/validations/schema.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { z } from "zod";
-
-export const schema = z.object({
-  message: z
-    .string()
-    .trim()
-    .min(1)
-    .refine((msg) => msg.split("\n").length <= 10, {
-      message: "Message should not exceed 10 lines",
-    }),
-});
diff --git a/src/app/(admin)/new_dashboard/components/MessageList/hooks/useMessageList.ts b/src/app/(admin)/new_dashboard/components/MessageList/hooks/useMessageList.ts
deleted file mode 100644
index ebd8154..0000000
--- a/src/app/(admin)/new_dashboard/components/MessageList/hooks/useMessageList.ts
+++ /dev/null
@@ -1,50 +0,0 @@
-"use client";
-import { useOnFetch } from "@/common/hooks/useOnFetch";
-import { useChatById } from "@/hooks/api/chatHooks";
-import { Chat, ClientResponse, SuccessResponse } from "@/types";
-import { Message } from "../../../types";
-import { useEffect, useState } from "react";
-import { Socket } from "socket.io-client";
-
-type Props = {
-  chatId: number;
-  socket: Socket;
-};
-
-export const useMessageList = ({ chatId, socket }: Props) => {
-  const [chatMessages, setChatMessages] = useState<Message[]>([]);
-  const [newMessages, setNewMessages] = useState<Message[]>([]);
-  const { data, error, isError } = useChatById(chatId);
-
-  useOnFetch(
-    (clientResponse: ClientResponse<Chat>) => {
-      if (isError) {
-        throw error;
-      } else {
-        const successResponse = clientResponse as SuccessResponse<Chat>;
-        const messages = successResponse.data.messages as Message[];
-        setChatMessages(messages);
-      }
-    },
-    !!data || isError,
-    data,
-    false
-  );
-
-  useEffect(() => {
-    socket.on("newMessage", (message: Message) => {
-      setNewMessages((prev) => [...prev, message]);
-    });
-
-    return () => {
-      socket.off("newMessage");
-    };
-  }, []);
-  useEffect(() => {
-    if (chatId) setNewMessages([]);
-  }, [chatId]);
-
-  return {
-    messages: chatMessages.concat(newMessages),
-  };
-};
diff --git a/src/app/(admin)/new_dashboard/components/MessageList/index.tsx b/src/app/(admin)/new_dashboard/components/MessageList/index.tsx
deleted file mode 100644
index 9c91d7c..0000000
--- a/src/app/(admin)/new_dashboard/components/MessageList/index.tsx
+++ /dev/null
@@ -1,76 +0,0 @@
-import { Box, List, ListItem, Typography } from "@mui/material";
-import { useMessageList } from "./hooks/useMessageList";
-
-import { useSocket } from "@/app/hooks/useSocket";
-type Props = {
-  chatId: number;
-};
-
-const MessageList = ({ chatId }: Props) => {
-  const socket = useSocket();
-  const { messages } = useMessageList({ chatId, socket });
-
-  return (
-    <Box
-      sx={{
-        flex: 1,
-        overflowY: "auto",
-        paddingBottom: 2,
-      }}
-    >
-      <List>
-        {messages.map((msg, index) => (
-          <ListItem
-            key={index}
-            sx={{
-              display: "flex",
-              justifyContent: msg.isSupportSender ? "flex-end" : "flex-start",
-              mb: 1,
-              alignItems: "flex-start",
-            }}
-          >
-            <Box
-              sx={{
-                display: "flex",
-                flexDirection: "column",
-                alignItems: msg.isSupportSender ? "flex-end" : "flex-start",
-                backgroundColor: msg.isSupportSender
-                  ? !msg.isNote
-                    ? "lightblue"
-                    : (theme) => theme.palette.note.main
-                  : "lightgray",
-                borderRadius: 2,
-                padding: 1,
-                maxWidth: "70%",
-                wordWrap: "break-word",
-              }}
-            >
-              <Typography variant="body2" color="textSecondary">
-                {msg.isSupportSender ? "Support" : "User"} •{" "}
-                {new Date(msg.timeStamp).toLocaleTimeString("il-IL", {
-                  hour: "2-digit",
-                  minute: "2-digit",
-                  hour12: false,
-                  month: "2-digit",
-                  day: "2-digit",
-                })}
-              </Typography>
-              <Typography
-                variant="body1"
-                sx={{
-                  whiteSpace: "pre-line",
-                  wordWrap: "break-word",
-                  alignSelf: "flex-start",
-                }}
-              >
-                {msg.content}
-              </Typography>
-            </Box>
-          </ListItem>
-        ))}
-      </List>
-    </Box>
-  );
-};
-
-export default MessageList;
diff --git a/src/app/(admin)/new_dashboard/components/SupportMessageList/index.tsx b/src/app/(admin)/new_dashboard/components/SupportMessageList/index.tsx
new file mode 100644
index 0000000..2cbfa51
--- /dev/null
+++ b/src/app/(admin)/new_dashboard/components/SupportMessageList/index.tsx
@@ -0,0 +1,30 @@
+import { Box, List } from "@mui/material";
+import { useSocket } from "@/app/hooks/useSocket";
+import { useMessageList } from "@/common/hooks/useMessageList";
+import { Message } from "@/common";
+type Props = {
+  chatId: number;
+};
+
+const SupportMessageList = ({ chatId }: Props) => {
+  const socket = useSocket();
+  const { messages } = useMessageList({ chatId, socket });
+
+  return (
+    <Box
+      sx={{
+        flex: 1,
+        overflowY: "auto",
+        paddingBottom: 2,
+      }}
+    >
+      <List>
+        {messages.map((msg, index) => {
+          return <Message message={msg} key={index}></Message>;
+        })}
+      </List>
+    </Box>
+  );
+};
+
+export default SupportMessageList;
diff --git a/src/app/(admin)/new_dashboard/components/SupportMessageList/types/index.ts b/src/app/(admin)/new_dashboard/components/SupportMessageList/types/index.ts
new file mode 100644
index 0000000..5eec3d5
--- /dev/null
+++ b/src/app/(admin)/new_dashboard/components/SupportMessageList/types/index.ts
@@ -0,0 +1,9 @@
+type Chat = {
+  messages?: Message[];
+};
+type Message = {
+  isNote: boolean;
+  isSupportSender: boolean;
+  timeStamp: Date;
+  content: string;
+};
diff --git a/src/app/(admin)/new_dashboard/page.tsx b/src/app/(admin)/new_dashboard/page.tsx
index 56f5343..cd681c9 100644
--- a/src/app/(admin)/new_dashboard/page.tsx
+++ b/src/app/(admin)/new_dashboard/page.tsx
@@ -1,13 +1,14 @@
 "use client";
 import PageContainer from "@/components/PageContainer";
 import DashboardCard from "./shared/Card";
-import MessageInput from "./components/MessageInput";
+
 import { Box } from "@mui/material";
 import ContactList from "./components/ContactList";
 import ChatHeader from "./components/ChatHeader";
-import MessageList from "./components/MessageList";
 import { useContacts, useSelectedContact } from "./hooks";
 import { useSocket } from "@/app/hooks/useSocket";
+import SupportMessageList from "./components/SupportMessageList";
+import MessageInput from "@/common/components/MessageInput";
 
 const Page = () => {
   const socket = useSocket();
@@ -56,7 +57,7 @@ const Page = () => {
 
               {/* Message List */}
               {selectedContact && (
-                <MessageList chatId={selectedContact.chatId} />
+                <SupportMessageList chatId={selectedContact.chatId} />
               )}
 
               {/* Input and Send Button */}

From 4f0ffdccd811616e42a3127b2f43af6990575086 Mon Sep 17 00:00:00 2001
From: Roie <roiy0987@gmail.com>
Date: Wed, 21 Aug 2024 15:59:12 +0300
Subject: [PATCH 086/242] refactor: Remove unused import in
 new_dashboard/page.tsx

---
 src/app/(admin)/new_dashboard/page.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/app/(admin)/new_dashboard/page.tsx b/src/app/(admin)/new_dashboard/page.tsx
index cd681c9..6216f6b 100644
--- a/src/app/(admin)/new_dashboard/page.tsx
+++ b/src/app/(admin)/new_dashboard/page.tsx
@@ -1,7 +1,6 @@
 "use client";
 import PageContainer from "@/components/PageContainer";
 import DashboardCard from "./shared/Card";
-
 import { Box } from "@mui/material";
 import ContactList from "./components/ContactList";
 import ChatHeader from "./components/ChatHeader";

From 9aabbb87b9c1103def758a01e83b4f4ff755c111 Mon Sep 17 00:00:00 2001
From: Roie <roiy0987@gmail.com>
Date: Wed, 21 Aug 2024 16:00:12 +0300
Subject: [PATCH 087/242] refactor: Update common components and hooks for chat
 functionality

---
 .../new_dashboard/hooks/useContacts.ts        | 28 +++----
 src/common/components/Message/index.tsx       | 62 ++++++++++++++
 .../MessageInput/hooks/useMessage.ts          | 57 +++++++++++++
 src/common/components/MessageInput/index.tsx  | 84 +++++++++++++++++++
 .../MessageInput/validations/schema.ts        | 11 +++
 src/common/components/index.ts                |  1 +
 src/common/hooks/useMessageList.ts            | 49 +++++++++++
 src/common/index.ts                           |  1 +
 8 files changed, 278 insertions(+), 15 deletions(-)
 create mode 100644 src/common/components/Message/index.tsx
 create mode 100644 src/common/components/MessageInput/hooks/useMessage.ts
 create mode 100644 src/common/components/MessageInput/index.tsx
 create mode 100644 src/common/components/MessageInput/validations/schema.ts
 create mode 100644 src/common/components/index.ts
 create mode 100644 src/common/hooks/useMessageList.ts

diff --git a/src/app/(admin)/new_dashboard/hooks/useContacts.ts b/src/app/(admin)/new_dashboard/hooks/useContacts.ts
index f748be6..47f09f7 100644
--- a/src/app/(admin)/new_dashboard/hooks/useContacts.ts
+++ b/src/app/(admin)/new_dashboard/hooks/useContacts.ts
@@ -28,7 +28,7 @@ export const useContacts = ({ socket, handleContactSelect }: Props) => {
           username: chat.user!.username,
           isOpen: chat.isOpen,
         }));
-        setContacts(() => contacts);
+        setContacts(contacts);
         handleContactSelect(contacts[0]);
       }
     },
@@ -37,20 +37,18 @@ export const useContacts = ({ socket, handleContactSelect }: Props) => {
   );
 
   useEffect(() => {
-    socket.on("chatCreated", (chat: Chat) => {
-      const contact = {
-        chatId: chat.chatId,
-        userId: chat.user!.userId,
-        username: chat.user!.username,
-        isOpen: chat.isOpen,
-      };
-      setContacts((prevContacts) => [...prevContacts, contact]);
-    });
-
-    return () => {
-      socket.off("chatCreated");
-    };
-  }, []);
+    if (socket && contacts) {
+      socket.on("chatCreated", (chat: Chat) => {
+        const contact = {
+          chatId: chat.chatId,
+          userId: chat.customerId,
+          username: chat.user!.username,
+          isOpen: chat.isOpen,
+        };
+        setContacts([...contacts, contact]);
+      });
+    }
+  }, [contacts]);
 
   return {
     contacts,
diff --git a/src/common/components/Message/index.tsx b/src/common/components/Message/index.tsx
new file mode 100644
index 0000000..67489c4
--- /dev/null
+++ b/src/common/components/Message/index.tsx
@@ -0,0 +1,62 @@
+import { ListItem, Box, Typography } from "@mui/material";
+
+type IMessage = {
+  message: Message;
+  key: number;
+  isSupport?: boolean;
+};
+
+export const Message = (messageProps: IMessage) => {
+  const { message, key, isSupport = true } = messageProps;
+  const { isNote, isSupportSender, timeStamp, content } = message;
+  const chatMode = isSupport ? isSupportSender : !isSupportSender;
+  return (
+    <ListItem
+      key={key}
+      sx={{
+        display: "flex",
+        justifyContent: chatMode ? "flex-end" : "flex-start",
+        mb: 1,
+        alignItems: "flex-start",
+      }}
+    >
+      <Box
+        sx={{
+          display: "flex",
+          flexDirection: "column",
+          alignItems: chatMode ? "flex-end" : "flex-start",
+          backgroundColor: chatMode
+            ? !isNote
+              ? "lightblue"
+              : (theme) => theme.palette.note.main
+            : "lightgray",
+          borderRadius: 2,
+          padding: 1,
+          maxWidth: "70%",
+          wordWrap: "break-word",
+        }}
+      >
+        <Typography variant="body2" color="textSecondary">
+          {isSupportSender ? "Support" : "User"} •{" "}
+          {new Date(timeStamp).toLocaleTimeString("il-IL", {
+            hour: "2-digit",
+            minute: "2-digit",
+            hour12: false,
+            month: "2-digit",
+            day: "2-digit",
+          })}
+        </Typography>
+        <Typography
+          variant="body1"
+          sx={{
+            whiteSpace: "pre-line",
+            wordWrap: "break-word",
+            alignSelf: "flex-start",
+          }}
+        >
+          {content}
+        </Typography>
+      </Box>
+    </ListItem>
+  );
+};
diff --git a/src/common/components/MessageInput/hooks/useMessage.ts b/src/common/components/MessageInput/hooks/useMessage.ts
new file mode 100644
index 0000000..5807369
--- /dev/null
+++ b/src/common/components/MessageInput/hooks/useMessage.ts
@@ -0,0 +1,57 @@
+"use client";
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import { schema } from "../validations/schema";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Socket } from "socket.io-client";
+
+type MessageRequest = {
+  message: string;
+};
+type Props = {
+  chatId: number;
+  socket: Socket;
+  isSupport: boolean;
+};
+
+export const useMessage = ({ chatId, socket, isSupport }: Props) => {
+  const [isNote, setIsNote] = useState<boolean>(false);
+
+  const {
+    register,
+    handleSubmit,
+    reset,
+    formState: { errors },
+  } = useForm<MessageRequest>({
+    resolver: zodResolver(schema),
+    mode: "onChange",
+    reValidateMode: "onChange",
+  });
+
+  const handleSendMessage = (messageRequest: MessageRequest) => {
+    const newMessage = messageRequest.message;
+    const data = {
+      chatId: chatId,
+      content: newMessage,
+    };
+    const allMessage = {
+      data: data,
+      isSupportSender: isSupport,
+      isNote: isNote,
+    };
+
+    if (chatId) {
+      socket.emit("message", allMessage);
+      reset({
+        message: "",
+      });
+    }
+  };
+  return {
+    isNote,
+    handleChangeNote: () => setIsNote(!isNote),
+    register,
+    handleSubmit: handleSubmit(handleSendMessage),
+    errors,
+  };
+};
diff --git a/src/common/components/MessageInput/index.tsx b/src/common/components/MessageInput/index.tsx
new file mode 100644
index 0000000..ff8a5f3
--- /dev/null
+++ b/src/common/components/MessageInput/index.tsx
@@ -0,0 +1,84 @@
+import { Box, TextField, IconButton, Button } from "@mui/material";
+import SendIcon from "@mui/icons-material/Send";
+import { useMessage } from "./hooks/useMessage";
+import { useSocket } from "@/app/hooks/useSocket";
+
+type MessageInputProps = {
+  chatId: number;
+  isSupport?: boolean;
+};
+
+const MessageInput = ({ chatId, isSupport = true }: MessageInputProps) => {
+  const socket = useSocket();
+
+  const { errors, handleChangeNote, handleSubmit, isNote, register } =
+    useMessage({ chatId, socket, isSupport });
+
+  return (
+    <Box
+      sx={{
+        display: "flex",
+        alignItems: "center",
+        flexDirection: "column",
+        paddingTop: 1,
+        position: "sticky",
+        bottom: 0,
+        backgroundColor: "background.paper",
+      }}
+    >
+      {isSupport && (
+        <Box sx={{ display: "flex", alignSelf: "start", gap: 1 }}>
+          <Button
+            variant={!isNote ? "contained" : "outlined"}
+            onClick={isNote ? handleChangeNote : () => {}}
+          >
+            Reply
+          </Button>
+          <Button
+            variant={isNote ? "contained" : "outlined"}
+            onClick={!isNote ? handleChangeNote : () => {}}
+          >
+            Note
+          </Button>
+        </Box>
+      )}
+
+      <Box
+        sx={{
+          display: "flex",
+          alignItems: "end",
+          flexDirection: "row",
+          paddingTop: 1,
+          width: "100%",
+          position: "sticky",
+          bottom: 0,
+          backgroundColor: "background.paper",
+        }}
+      >
+        <TextField
+          fullWidth
+          variant="outlined"
+          size="small"
+          placeholder="Type a message..."
+          id="message"
+          autoComplete="message"
+          autoFocus
+          {...register("message")}
+          multiline
+          minRows={5}
+          maxRows={10}
+          InputProps={{
+            style: { overflow: "hidden" },
+          }}
+          error={!!errors.message}
+          helperText={errors.message ? errors.message.message : ""}
+        />
+        <IconButton color="primary" onClick={handleSubmit} sx={{ ml: 1 }}>
+          <SendIcon />
+        </IconButton>
+      </Box>
+    </Box>
+  );
+};
+
+export default MessageInput;
diff --git a/src/common/components/MessageInput/validations/schema.ts b/src/common/components/MessageInput/validations/schema.ts
new file mode 100644
index 0000000..0ad8c04
--- /dev/null
+++ b/src/common/components/MessageInput/validations/schema.ts
@@ -0,0 +1,11 @@
+import { z } from "zod";
+
+export const schema = z.object({
+  message: z
+    .string()
+    .trim()
+    .min(1)
+    .refine((msg) => msg.split("\n").length <= 10, {
+      message: "Message should not exceed 10 lines",
+    }),
+});
diff --git a/src/common/components/index.ts b/src/common/components/index.ts
new file mode 100644
index 0000000..9611b59
--- /dev/null
+++ b/src/common/components/index.ts
@@ -0,0 +1 @@
+export * from "./Message";
diff --git a/src/common/hooks/useMessageList.ts b/src/common/hooks/useMessageList.ts
new file mode 100644
index 0000000..f5e3fcb
--- /dev/null
+++ b/src/common/hooks/useMessageList.ts
@@ -0,0 +1,49 @@
+"use client";
+import { useOnFetch } from "@/common/hooks/useOnFetch";
+import { useChatById } from "@/hooks/api/chatHooks";
+import { ClientResponse, SuccessResponse } from "@/types";
+import { useEffect, useState } from "react";
+import { Socket } from "socket.io-client";
+
+type Props = {
+  chatId: number;
+  socket: Socket;
+};
+
+export const useMessageList = ({ chatId, socket }: Props) => {
+  const [chatMessages, setChatMessages] = useState<Message[]>([]);
+  const [newMessages, setNewMessages] = useState<Message[]>([]);
+  const { data, error, isError } = useChatById(chatId);
+
+  useOnFetch(
+    (clientResponse: ClientResponse<Chat>) => {
+      if (isError) {
+        throw error;
+      } else {
+        const successResponse = clientResponse as SuccessResponse<Chat>;
+        const messages = successResponse.data.messages;
+        setChatMessages(messages!);
+      }
+    },
+    !!data || isError,
+    data,
+    false
+  );
+
+  useEffect(() => {
+    socket.on("newMessage", (message: Message) => {
+      setNewMessages((prev) => [...prev, message]);
+    });
+
+    return () => {
+      socket.off("newMessage");
+    };
+  }, []);
+  useEffect(() => {
+    if (chatId) setNewMessages([]);
+  }, [chatId]);
+
+  return {
+    messages: chatMessages.concat(newMessages),
+  };
+};
diff --git a/src/common/index.ts b/src/common/index.ts
index ba3dec5..31f218e 100644
--- a/src/common/index.ts
+++ b/src/common/index.ts
@@ -1,2 +1,3 @@
 export * from "./api";
 export * from "./config";
+export * from "./components";

From 65f3581f0d1acc3e19547820ba5ddf914c8e5b25 Mon Sep 17 00:00:00 2001
From: Roie <roiy0987@gmail.com>
Date: Wed, 21 Aug 2024 16:01:45 +0300
Subject: [PATCH 088/242] refactor: Remove unused socket hook and related files

---
 src/hooks/index.ts         |  1 -
 src/hooks/socket/index.ts  |  1 -
 src/hooks/socket/socket.ts | 11 -----------
 3 files changed, 13 deletions(-)
 delete mode 100644 src/hooks/socket/index.ts
 delete mode 100644 src/hooks/socket/socket.ts

diff --git a/src/hooks/index.ts b/src/hooks/index.ts
index 39c079e..d158c57 100644
--- a/src/hooks/index.ts
+++ b/src/hooks/index.ts
@@ -1,2 +1 @@
 export * from "./api";
-export * from "./socket";
diff --git a/src/hooks/socket/index.ts b/src/hooks/socket/index.ts
deleted file mode 100644
index e498292..0000000
--- a/src/hooks/socket/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./socket";
diff --git a/src/hooks/socket/socket.ts b/src/hooks/socket/socket.ts
deleted file mode 100644
index 3d2381d..0000000
--- a/src/hooks/socket/socket.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import socket from "@/socket";
-import { useEffect } from "react";
-
-export const useSocket = () => {
-  useEffect(() => {
-    socket.connect();
-    return () => {
-      socket.disconnect();
-    };
-  }, []);
-};

From 93e357cf2000edf4a963337e8d47dfc75495e555 Mon Sep 17 00:00:00 2001
From: Roie <roiy0987@gmail.com>
Date: Wed, 21 Aug 2024 16:02:04 +0300
Subject: [PATCH 089/242] refactor: Update UserMessageList component to display
 user messages in the chat

---
 .../components/UserMessageList/index.tsx      | 32 +++++++++++++++++++
 1 file changed, 32 insertions(+)
 create mode 100644 src/app/(user)/new_chat/[userId]/components/UserMessageList/index.tsx

diff --git a/src/app/(user)/new_chat/[userId]/components/UserMessageList/index.tsx b/src/app/(user)/new_chat/[userId]/components/UserMessageList/index.tsx
new file mode 100644
index 0000000..6f5137c
--- /dev/null
+++ b/src/app/(user)/new_chat/[userId]/components/UserMessageList/index.tsx
@@ -0,0 +1,32 @@
+import { Box, List } from "@mui/material";
+import { useSocket } from "@/app/hooks/useSocket";
+import { useMessageList } from "@/common/hooks/useMessageList";
+import { Message } from "@/common";
+type Props = {
+  chatId: number;
+};
+
+const SupportMessageList = ({ chatId }: Props) => {
+  const socket = useSocket();
+  const { messages } = useMessageList({ chatId, socket });
+
+  return (
+    <Box
+      sx={{
+        flex: 1,
+        overflowY: "auto",
+        paddingBottom: 2,
+      }}
+    >
+      <List>
+        {messages.map((msg, index) => {
+          return (
+            <Message message={msg} key={index} isSupport={false}></Message>
+          );
+        })}
+      </List>
+    </Box>
+  );
+};
+
+export default SupportMessageList;

From 0e109346c6d2cd504a808504adef16cf5e888e64 Mon Sep 17 00:00:00 2001
From: Roie <roiy0987@gmail.com>
Date: Wed, 21 Aug 2024 16:03:32 +0300
Subject: [PATCH 090/242] refactor: Rename SupportMessageList to
 UserMessageList and update its usage in the code

---
 .../new_chat/[userId]/components/UserMessageList/index.tsx    | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/(user)/new_chat/[userId]/components/UserMessageList/index.tsx b/src/app/(user)/new_chat/[userId]/components/UserMessageList/index.tsx
index 6f5137c..8bc420f 100644
--- a/src/app/(user)/new_chat/[userId]/components/UserMessageList/index.tsx
+++ b/src/app/(user)/new_chat/[userId]/components/UserMessageList/index.tsx
@@ -6,7 +6,7 @@ type Props = {
   chatId: number;
 };
 
-const SupportMessageList = ({ chatId }: Props) => {
+const UserMessageList = ({ chatId }: Props) => {
   const socket = useSocket();
   const { messages } = useMessageList({ chatId, socket });
 
@@ -29,4 +29,4 @@ const SupportMessageList = ({ chatId }: Props) => {
   );
 };
 
-export default SupportMessageList;
+export default UserMessageList;

From e484ac0590df1bb9c6cb9af9cc97222114e5be01 Mon Sep 17 00:00:00 2001
From: Roie <roiy0987@gmail.com>
Date: Wed, 21 Aug 2024 16:25:27 +0300
Subject: [PATCH 091/242] refactor: Update useChatByUserId hook to fetch chats
 by user ID and select the first open chat

---
 src/hooks/api/chatHooks.ts | 23 ++++++++++++++++++++++-
 1 file changed, 22 insertions(+), 1 deletion(-)

diff --git a/src/hooks/api/chatHooks.ts b/src/hooks/api/chatHooks.ts
index d9106a1..507d000 100644
--- a/src/hooks/api/chatHooks.ts
+++ b/src/hooks/api/chatHooks.ts
@@ -1,5 +1,5 @@
 import { ChatClient } from "@/api/chat.client";
-import { Chat, ClientResponse } from "@/types";
+import { Chat, ClientResponse, SuccessResponse } from "@/types";
 import { useQuery } from "@tanstack/react-query";
 
 const chatClient = new ChatClient();
@@ -8,6 +8,7 @@ export function useChats() {
   return useQuery<ClientResponse<Chat[]>, Error>({
     queryKey: ["chats"],
     queryFn: () => chatClient.chats(),
+    refetchOnWindowFocus: false,
   });
 }
 
@@ -15,5 +16,25 @@ export function useChatById(chatId: number) {
   return useQuery<ClientResponse<Chat>, Error>({
     queryKey: ["chatID", chatId],
     queryFn: () => chatClient.chatById({ chatId }),
+    refetchOnWindowFocus: false,
+  });
+}
+
+export function useChatByUserId(userId: number) {
+  return useQuery<Chat | undefined>({
+    queryKey: ["chatUserID", userId],
+    queryFn: async () => {
+      const result = (await chatClient.chats()) as ClientResponse<Chat[]>;
+      if (result instanceof Error) {
+        throw result;
+      }
+      const data = result as SuccessResponse<Chat[]>;
+      const chats = data.data as Chat[];
+
+      return (
+        chats.find((chat) => chat.user?.userId === userId && chat.isOpen) ||
+        chats[0]
+      );
+    },
   });
 }

From e0412f0f4b5bca7bb8a228b0a2c2a0d4ebc01117 Mon Sep 17 00:00:00 2001
From: Roie <roiy0987@gmail.com>
Date: Wed, 21 Aug 2024 16:25:39 +0300
Subject: [PATCH 092/242] refactor: Remove unused key prop in Message component

---
 src/common/components/Message/index.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/common/components/Message/index.tsx b/src/common/components/Message/index.tsx
index 67489c4..e6c2699 100644
--- a/src/common/components/Message/index.tsx
+++ b/src/common/components/Message/index.tsx
@@ -2,17 +2,15 @@ import { ListItem, Box, Typography } from "@mui/material";
 
 type IMessage = {
   message: Message;
-  key: number;
   isSupport?: boolean;
 };
 
 export const Message = (messageProps: IMessage) => {
-  const { message, key, isSupport = true } = messageProps;
+  const { message, isSupport = true } = messageProps;
   const { isNote, isSupportSender, timeStamp, content } = message;
   const chatMode = isSupport ? isSupportSender : !isSupportSender;
   return (
     <ListItem
-      key={key}
       sx={{
         display: "flex",
         justifyContent: chatMode ? "flex-end" : "flex-start",

From 871900e75a8c67834198ed57ffeaa97070277f28 Mon Sep 17 00:00:00 2001
From: Roie <roiy0987@gmail.com>
Date: Wed, 21 Aug 2024 16:26:04 +0300
Subject: [PATCH 093/242] refactor: Update UserMessageList component to display
 user messages in the chat

---
 .../components/UserMessageList/index.tsx      |  1 +
 .../(user)/new_chat/[userId]/hooks/index.ts   |  1 +
 .../(user)/new_chat/[userId]/hooks/useChat.ts | 34 +++++++++++
 src/app/(user)/new_chat/[userId]/page.tsx     | 56 +++++++++++++++++++
 4 files changed, 92 insertions(+)
 create mode 100644 src/app/(user)/new_chat/[userId]/hooks/index.ts
 create mode 100644 src/app/(user)/new_chat/[userId]/hooks/useChat.ts
 create mode 100644 src/app/(user)/new_chat/[userId]/page.tsx

diff --git a/src/app/(user)/new_chat/[userId]/components/UserMessageList/index.tsx b/src/app/(user)/new_chat/[userId]/components/UserMessageList/index.tsx
index 8bc420f..2762144 100644
--- a/src/app/(user)/new_chat/[userId]/components/UserMessageList/index.tsx
+++ b/src/app/(user)/new_chat/[userId]/components/UserMessageList/index.tsx
@@ -20,6 +20,7 @@ const UserMessageList = ({ chatId }: Props) => {
     >
       <List>
         {messages.map((msg, index) => {
+          if (msg.isNote) return null;
           return (
             <Message message={msg} key={index} isSupport={false}></Message>
           );
diff --git a/src/app/(user)/new_chat/[userId]/hooks/index.ts b/src/app/(user)/new_chat/[userId]/hooks/index.ts
new file mode 100644
index 0000000..e3f97a2
--- /dev/null
+++ b/src/app/(user)/new_chat/[userId]/hooks/index.ts
@@ -0,0 +1 @@
+export * from "./useChat";
diff --git a/src/app/(user)/new_chat/[userId]/hooks/useChat.ts b/src/app/(user)/new_chat/[userId]/hooks/useChat.ts
new file mode 100644
index 0000000..88e889b
--- /dev/null
+++ b/src/app/(user)/new_chat/[userId]/hooks/useChat.ts
@@ -0,0 +1,34 @@
+import { useEffect, useState } from "react";
+import { useChatByUserId } from "@/hooks/api/chatHooks";
+import { Socket } from "socket.io-client";
+
+type Props = {
+  userId: number;
+  socket: Socket;
+};
+type Chat = {
+  chatId: number;
+};
+
+export const useChat = ({ userId, socket }: Props) => {
+  const [chatId, setChatId] = useState<number | null>(null);
+  const { data, error } = useChatByUserId(userId);
+  useEffect(() => {
+    if (data) {
+      if (data.user?.userId !== userId) {
+        socket.emit("create");
+        socket.on("chatCreated", (chat: Chat) => {
+          socket.emit("join", { chatId: chat.chatId });
+          setChatId(chat.chatId);
+        });
+        return;
+      }
+      if (data.chatId) {
+        console.log("Chat exists");
+        socket.emit("join", { chatId: data.chatId });
+        setChatId(data.chatId);
+      }
+    }
+  }, [data]);
+  return { chatId, error };
+};
diff --git a/src/app/(user)/new_chat/[userId]/page.tsx b/src/app/(user)/new_chat/[userId]/page.tsx
new file mode 100644
index 0000000..4e36519
--- /dev/null
+++ b/src/app/(user)/new_chat/[userId]/page.tsx
@@ -0,0 +1,56 @@
+"use client";
+import PageContainer from "@/components/PageContainer";
+import { Box, Card } from "@mui/material";
+import { useChat } from "./hooks";
+import { useParams } from "next/navigation";
+import { useSocket } from "@/app/hooks/useSocket";
+import MessageInput from "@/common/components/MessageInput";
+import UserMessageList from "./components/UserMessageList";
+
+const ChatPage = () => {
+  const { userId } = useParams<{ userId: string }>()!;
+  const { chatId, error } = useChat({
+    userId: parseInt(userId),
+    socket: useSocket(),
+  });
+
+  return (
+    <PageContainer title="Chat">
+      <Card
+        sx={{
+          padding: 0,
+          height: "auto",
+          display: "flex",
+          width: "100%",
+          flexDirection: "column",
+          alignItems: "center",
+          justifyContent: "center",
+          border: 0,
+          boxShadow: 0,
+          flex: 1,
+        }}
+      >
+        <Box
+          sx={{
+            display: "flex",
+            flexDirection: "column",
+            height: "calc(100vh - 135px)",
+            width: "70%",
+            boxShadow: "0px 0px 0px 0.5px rgba(0, 0, 0, 0.1)",
+            margin: 0,
+            padding: 0,
+          }}
+        >
+          {chatId ? (
+            <>
+              <UserMessageList chatId={chatId} />
+              <MessageInput isSupport={false} chatId={chatId} />
+            </>
+          ) : null}
+          {error ? <p>{error.message}</p> : null}
+        </Box>
+      </Card>
+    </PageContainer>
+  );
+};
+export default ChatPage;

From b8e1e208d1ba652b665c65d52bd5124fa5018008 Mon Sep 17 00:00:00 2001
From: Ori <ori100no@gmail.com>
Date: Wed, 21 Aug 2024 17:34:43 +0300
Subject: [PATCH 094/242] changed rewiewId to id

---
 src/api/types/Review.ts                                         | 2 +-
 .../new_dashboard/guides/components/ReviewList/index.tsx        | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/api/types/Review.ts b/src/api/types/Review.ts
index 842c4a2..59ec14f 100644
--- a/src/api/types/Review.ts
+++ b/src/api/types/Review.ts
@@ -2,7 +2,7 @@ import { z } from 'zod';
 import { userSchema } from './User';
 
 export const reviewSchema = z.object({
-  reviewId: z.number(),
+  id: z.number(),
   userId: z.number(),
   guideId: z.number(),
   stars: z.number().min(1).max(5),
diff --git a/src/app/(admin)/new_dashboard/guides/components/ReviewList/index.tsx b/src/app/(admin)/new_dashboard/guides/components/ReviewList/index.tsx
index 71c155e..732aad2 100644
--- a/src/app/(admin)/new_dashboard/guides/components/ReviewList/index.tsx
+++ b/src/app/(admin)/new_dashboard/guides/components/ReviewList/index.tsx
@@ -42,7 +42,7 @@ const ReviewList: React.FC<ReviewListProps> = ({ guideId }) => {
         <DashboardCard title="Reviews">
           <Box mt={2}>
             {reviews.map((review, index) => (
-              <Box key={review.reviewId} mb={2}>
+              <Box key={review.id} mb={2}>
                 <Typography>
                   {review.user?.username} - {new Date(review.createdAt).toLocaleDateString()}
                 </Typography>

From fead93910c1f21c0b9bfa80543fc512d75fe1736 Mon Sep 17 00:00:00 2001
From: Ori <ori100no@gmail.com>
Date: Wed, 21 Aug 2024 17:35:52 +0300
Subject: [PATCH 095/242] changed guideId to id

---
 src/api/types/Guide.ts                                    | 8 ++++----
 src/app/(admin)/new_dashboard/guides/[id]/page.tsx        | 2 +-
 .../new_dashboard/guides/components/GuideList/index.tsx   | 4 ++--
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/api/types/Guide.ts b/src/api/types/Guide.ts
index 5af4830..cae0b42 100644
--- a/src/api/types/Guide.ts
+++ b/src/api/types/Guide.ts
@@ -3,13 +3,13 @@ import { userSchema } from './User';
 import { reviewSchema } from './Review';
 
 const guideSchema = z.object({
-  guideId: z.number(),
+  id: z.number(),
   title: z.string(),
   contentHTML: z.string(),
   creatorId: z.number(),
   createdAt: z.date(),
-  creator: userSchema.optional(), 
-  reviews: z.array(reviewSchema).optional(), 
+  creator: userSchema.optional(),
+  reviews: z.array(reviewSchema).optional(),
 });
 
-export type Guide = z.infer<typeof guideSchema>;
\ No newline at end of file
+export type Guide = z.infer<typeof guideSchema>;
diff --git a/src/app/(admin)/new_dashboard/guides/[id]/page.tsx b/src/app/(admin)/new_dashboard/guides/[id]/page.tsx
index 33787c1..b7231f4 100644
--- a/src/app/(admin)/new_dashboard/guides/[id]/page.tsx
+++ b/src/app/(admin)/new_dashboard/guides/[id]/page.tsx
@@ -45,7 +45,7 @@ const GuidePage = () => {
           </div>
         </DashboardCard>
         <Divider sx={{ mt: 2, mb: 2, border: 'none' }} />
-        <ReviewList guideId={guide.guideId}/>        
+        <ReviewList guideId={guide.id}/>        
       </PageContainer>
     );
   }
diff --git a/src/app/(admin)/new_dashboard/guides/components/GuideList/index.tsx b/src/app/(admin)/new_dashboard/guides/components/GuideList/index.tsx
index 8096848..7a47319 100644
--- a/src/app/(admin)/new_dashboard/guides/components/GuideList/index.tsx
+++ b/src/app/(admin)/new_dashboard/guides/components/GuideList/index.tsx
@@ -23,8 +23,8 @@ const GuideList = ({ guideItems }: Props) => {
             xs={12}
             sm={6}
             md={4}
-            key={guide.guideId}
-            onClick={() => handleCardClick(guide.guideId)}
+            key={guide.id}
+            onClick={() => handleCardClick(guide.id)}
             style={{ cursor: "pointer" }}
           >
             <GuideCard guide={guide} />

From afaa8da131ac3896887ce4cc229c2f5bf92903f5 Mon Sep 17 00:00:00 2001
From: Ori <ori100no@gmail.com>
Date: Wed, 21 Aug 2024 17:38:45 +0300
Subject: [PATCH 096/242] changed userId to id

---
 src/api/types/User.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/api/types/User.ts b/src/api/types/User.ts
index a90744a..57da6f7 100644
--- a/src/api/types/User.ts
+++ b/src/api/types/User.ts
@@ -1,7 +1,7 @@
 import { z } from 'zod';
 
 export const userSchema = z.object({
-  userId: z.number(),
+  id: z.number(),
   username: z.string(),
   email: z.string().email(),
   password: z.string(),

From 4344c1434ba79138a4665ce6489ba1c76ca49885 Mon Sep 17 00:00:00 2001
From: Ori <ori100no@gmail.com>
Date: Wed, 21 Aug 2024 19:52:37 +0300
Subject: [PATCH 097/242] changed starts to rating

---
 src/api/types/Review.ts                               |  2 +-
 .../guides/components/GuideCard/index.tsx             |  2 +-
 .../guides/components/ReviewList/index.tsx            |  2 +-
 .../new_dashboard/guides/dto/CreateReviewDto.ts       | 11 +++++++----
 .../new_dashboard/guides/hooks/useAddReviewForm.ts    |  2 +-
 5 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/src/api/types/Review.ts b/src/api/types/Review.ts
index 59ec14f..ccbc076 100644
--- a/src/api/types/Review.ts
+++ b/src/api/types/Review.ts
@@ -5,7 +5,7 @@ export const reviewSchema = z.object({
   id: z.number(),
   userId: z.number(),
   guideId: z.number(),
-  stars: z.number().min(1).max(5),
+  rating: z.number().min(1).max(5),
   comment: z.string().optional(),
   createdAt: z.date(),
   user: userSchema.optional(),
diff --git a/src/app/(admin)/new_dashboard/guides/components/GuideCard/index.tsx b/src/app/(admin)/new_dashboard/guides/components/GuideCard/index.tsx
index d0b8784..02d3648 100644
--- a/src/app/(admin)/new_dashboard/guides/components/GuideCard/index.tsx
+++ b/src/app/(admin)/new_dashboard/guides/components/GuideCard/index.tsx
@@ -9,7 +9,7 @@ type Props = {
 
 const GuideCard = ({ guide }: Props) => {
   const theme = useTheme();
-  const totalStars = guide.reviews?.reduce((acc, review) => acc + review.stars, 0);
+  const totalStars = guide.reviews?.reduce((acc, review) => acc + review.rating, 0);
   const avgRating = (totalStars ?? 0) / (guide.reviews?.length ?? 1);
   return (
     <Card variant="outlined">
diff --git a/src/app/(admin)/new_dashboard/guides/components/ReviewList/index.tsx b/src/app/(admin)/new_dashboard/guides/components/ReviewList/index.tsx
index 732aad2..2a3fae3 100644
--- a/src/app/(admin)/new_dashboard/guides/components/ReviewList/index.tsx
+++ b/src/app/(admin)/new_dashboard/guides/components/ReviewList/index.tsx
@@ -49,7 +49,7 @@ const ReviewList: React.FC<ReviewListProps> = ({ guideId }) => {
                 <Typography variant="body1" mb={0.5}>
                   {review.comment}
                 </Typography>
-                <Rating value={review.stars} readOnly />
+                <Rating value={review.rating} readOnly />
                 {index < reviews.length - 1 && <Divider sx={{ mt: 2, mb: 2 }} />}
               </Box>
             ))}
diff --git a/src/app/(admin)/new_dashboard/guides/dto/CreateReviewDto.ts b/src/app/(admin)/new_dashboard/guides/dto/CreateReviewDto.ts
index 6470dc0..8cecb2c 100644
--- a/src/app/(admin)/new_dashboard/guides/dto/CreateReviewDto.ts
+++ b/src/app/(admin)/new_dashboard/guides/dto/CreateReviewDto.ts
@@ -2,11 +2,14 @@ import { z } from 'zod';
 
 export const CreateReviewSchema = z.object({
   guideId: z.number({
-    required_error: "Guide ID is required",
+    required_error: 'Guide ID is required',
   }),
-  stars: z.number({
-    required_error: "Stars rating is required",
-  }).min(1, "Stars rating must be at least 1").max(5, "Stars rating cannot exceed 5"),
+  rating: z
+    .number({
+      required_error: 'Stars rating is required',
+    })
+    .min(1, 'Stars rating must be at least 1')
+    .max(5, 'Stars rating cannot exceed 5'),
   comment: z.string().optional(),
 });
 
diff --git a/src/app/(admin)/new_dashboard/guides/hooks/useAddReviewForm.ts b/src/app/(admin)/new_dashboard/guides/hooks/useAddReviewForm.ts
index 3c96316..071ca10 100644
--- a/src/app/(admin)/new_dashboard/guides/hooks/useAddReviewForm.ts
+++ b/src/app/(admin)/new_dashboard/guides/hooks/useAddReviewForm.ts
@@ -11,7 +11,7 @@ const useAddReviewForm = (guideId: number) => {
   const handleSubmit = () => {
     const newReview: CreateReviewDto = {
       guideId,
-      stars: stars ?? 0,
+      rating: stars ?? 0,
       comment: comment.trim() || undefined,
     };
     const validation = CreateReviewSchema.safeParse(newReview);

From e19385a546ce705fe38c4b0b9c015ebe6c3bf4d1 Mon Sep 17 00:00:00 2001
From: Ori <ori100no@gmail.com>
Date: Wed, 21 Aug 2024 23:54:16 +0300
Subject: [PATCH 098/242] changed to id

---
 src/types/user.type.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/types/user.type.ts b/src/types/user.type.ts
index 7a5a076..de9ff4f 100644
--- a/src/types/user.type.ts
+++ b/src/types/user.type.ts
@@ -1,5 +1,5 @@
 export interface User {
-  userId: number;
+  id: number;
   username: string;
   email: string;
   roles: string[];

From 6080ed7ead1cfbac36ee43256b72578ee713e561 Mon Sep 17 00:00:00 2001
From: Ori <ori100no@gmail.com>
Date: Thu, 22 Aug 2024 11:56:56 +0300
Subject: [PATCH 099/242] updated the frontend to use the review from guide
 service

---
 .../new_dashboard/guides/[id]/page.tsx        |  2 +-
 .../guides/components/ReviewList/index.tsx    | 84 +++++++++----------
 2 files changed, 43 insertions(+), 43 deletions(-)

diff --git a/src/app/(admin)/new_dashboard/guides/[id]/page.tsx b/src/app/(admin)/new_dashboard/guides/[id]/page.tsx
index b7231f4..4c49168 100644
--- a/src/app/(admin)/new_dashboard/guides/[id]/page.tsx
+++ b/src/app/(admin)/new_dashboard/guides/[id]/page.tsx
@@ -45,7 +45,7 @@ const GuidePage = () => {
           </div>
         </DashboardCard>
         <Divider sx={{ mt: 2, mb: 2, border: 'none' }} />
-        <ReviewList guideId={guide.id}/>        
+        <ReviewList guideId={guide.id} reviews={guide.reviews ?? []}/>        
       </PageContainer>
     );
   }
diff --git a/src/app/(admin)/new_dashboard/guides/components/ReviewList/index.tsx b/src/app/(admin)/new_dashboard/guides/components/ReviewList/index.tsx
index 2a3fae3..80bac74 100644
--- a/src/app/(admin)/new_dashboard/guides/components/ReviewList/index.tsx
+++ b/src/app/(admin)/new_dashboard/guides/components/ReviewList/index.tsx
@@ -1,65 +1,65 @@
 "use client";
+
 import React from "react";
-import { Typography, Box, Rating, Divider,CircularProgress, Alert } from "@mui/material";
-import { Review } from "@/api/types/Review"; 
+import {
+  Typography,
+  Box,
+  Rating,
+  Divider,
+  CircularProgress,
+  Alert,
+} from "@mui/material";
+import { Review } from "@/api/types/Review";
 import PageContainer from "@/components/PageContainer";
 import DashboardCard from "../../../shared/Card";
 import AddReviewBox from "../AddReviewBox";
 import { useReviews } from "../../hooks";
 
 interface ReviewListProps {
+  reviews: Review[];
   guideId: number;
 }
 
-const ReviewList: React.FC<ReviewListProps> = ({ guideId }) => {
-  const {data:response , isError , error , isSuccess  ,isLoading} = useReviews(guideId);
-  let reviews: Review[] = [];
-  if (isLoading) {
-    return <CircularProgress />;
-  }
-
-  if(isError) {
-    return <Alert severity="error">{error.message}</Alert>;
-  }
-
-  if(isSuccess && "data" in response) {
-    reviews = response.data;
-    if(reviews.length === 0) {
-      return (
-        <PageContainer title="Reviews">
-          <DashboardCard title="Reviews">
-            <Box mt={2}>
-              <Typography>No reviews available</Typography>
-              <Divider sx={{ mt: 2, mb: 2 }} />
-              <AddReviewBox guideId={guideId} />
-            </Box>
-          </DashboardCard>
-        </PageContainer>
-      )
-    }
+const ReviewList: React.FC<ReviewListProps> = ({ reviews, guideId }) => {
+  if (!reviews.length) {
     return (
       <PageContainer title="Reviews">
         <DashboardCard title="Reviews">
           <Box mt={2}>
-            {reviews.map((review, index) => (
-              <Box key={review.id} mb={2}>
-                <Typography>
-                  {review.user?.username} - {new Date(review.createdAt).toLocaleDateString()}
-                </Typography>
-                <Typography variant="body1" mb={0.5}>
-                  {review.comment}
-                </Typography>
-                <Rating value={review.rating} readOnly />
-                {index < reviews.length - 1 && <Divider sx={{ mt: 2, mb: 2 }} />}
-              </Box>
-            ))}
+            <Typography>No reviews available</Typography>
             <Divider sx={{ mt: 2, mb: 2 }} />
             <AddReviewBox guideId={guideId} />
           </Box>
         </DashboardCard>
       </PageContainer>
     );
-  };
-}
+  }
+
+  return (
+    <PageContainer title="Reviews">
+      <DashboardCard title="Reviews">
+        <Box mt={2}>
+          {reviews.map((review, index) => (
+            <Box key={review.id} mb={2}>
+              <Typography>
+                {review.user?.username} -{" "}
+                {new Date(review.createdAt).toLocaleDateString()}
+              </Typography>
+              <Typography variant="body1" mb={0.5}>
+                {review.comment}
+              </Typography>
+              <Rating value={review.rating} readOnly />
+              {index < reviews.length - 1 && (
+                <Divider sx={{ mt: 2, mb: 2 }} />
+              )}
+            </Box>
+          ))}
+          <Divider sx={{ mt: 2, mb: 2 }} />
+          <AddReviewBox guideId={guideId} />
+        </Box>
+      </DashboardCard>
+    </PageContainer>
+  );
+};
 
 export default ReviewList;

From 8fa31ab1f770873a1fc9133ae49e82ee5126ae0a Mon Sep 17 00:00:00 2001
From: Ori <ori100no@gmail.com>
Date: Fri, 23 Aug 2024 12:27:06 +0300
Subject: [PATCH 100/242] fixed problems that came with changing the id name

---
 src/api/chat.client.ts                        |  8 +++----
 src/api/types/User.ts                         |  4 ++--
 src/api/types/chat.ts                         |  4 ++--
 .../new_dashboard/hooks/useContacts.ts        | 24 +++++++++----------
 .../(user)/new_chat/[userId]/hooks/useChat.ts | 22 ++++++++---------
 src/hooks/api/chatHooks.ts                    | 16 ++++++-------
 src/pages/chat.tsx                            |  4 ++--
 src/pages/dashboard.tsx                       | 12 +++++-----
 src/types/chat.type.ts                        |  7 +++---
 src/types/user.type.ts                        |  6 -----
 10 files changed, 50 insertions(+), 57 deletions(-)
 delete mode 100644 src/types/user.type.ts

diff --git a/src/api/chat.client.ts b/src/api/chat.client.ts
index d6b9c22..063563b 100644
--- a/src/api/chat.client.ts
+++ b/src/api/chat.client.ts
@@ -1,11 +1,11 @@
-import { BaseClient } from "./base.client";
-import { ChatRequest, ChatResponse } from "./types/chat";
+import { BaseClient } from './base.client';
+import { ChatRequest, ChatResponse } from './types/chat';
 
 export class ChatClient extends BaseClient {
   async chats() {
-    return this.get<ChatResponse[]>("chats");
+    return this.get<ChatResponse[]>('chats');
   }
   async chatById(chatRequest: ChatRequest) {
-    return this.get<ChatResponse>(`chats/${chatRequest.chatId}`);
+    return this.get<ChatResponse>(`chats/${chatRequest.id}`);
   }
 }
diff --git a/src/api/types/User.ts b/src/api/types/User.ts
index 57da6f7..a5dba9c 100644
--- a/src/api/types/User.ts
+++ b/src/api/types/User.ts
@@ -3,8 +3,8 @@ import { z } from 'zod';
 export const userSchema = z.object({
   id: z.number(),
   username: z.string(),
-  email: z.string().email(),
-  password: z.string(),
+  email: z.string().email().optional(),
+  password: z.string().optional(),
   roles: z.array(z.string()),
 });
 
diff --git a/src/api/types/chat.ts b/src/api/types/chat.ts
index 88065a8..eb6418d 100644
--- a/src/api/types/chat.ts
+++ b/src/api/types/chat.ts
@@ -1,7 +1,7 @@
-import { Chat } from "@/types";
+import { Chat } from '@/types';
 
 export type ChatRequest = {
-  chatId: number;
+  id: number;
 };
 
 export type ChatResponse = Chat;
diff --git a/src/app/(admin)/new_dashboard/hooks/useContacts.ts b/src/app/(admin)/new_dashboard/hooks/useContacts.ts
index 47f09f7..8126223 100644
--- a/src/app/(admin)/new_dashboard/hooks/useContacts.ts
+++ b/src/app/(admin)/new_dashboard/hooks/useContacts.ts
@@ -1,10 +1,10 @@
-"use client";
-import { useEffect, useState } from "react";
-import { Chat, ClientResponse, SuccessResponse } from "@/types";
-import { useChats } from "@/hooks/api/chatHooks";
-import { useOnFetch } from "@/common/hooks/useOnFetch";
-import { Socket } from "socket.io-client";
-import { Contact } from "../types";
+'use client';
+import { useEffect, useState } from 'react';
+import { Chat, ClientResponse, SuccessResponse } from '@/types';
+import { useChats } from '@/hooks/api/chatHooks';
+import { useOnFetch } from '@/common/hooks/useOnFetch';
+import { Socket } from 'socket.io-client';
+import { Contact } from '../types';
 
 type Props = {
   socket: Socket;
@@ -23,9 +23,9 @@ export const useContacts = ({ socket, handleContactSelect }: Props) => {
         const successResponse = clientResponse as SuccessResponse<Chat[]>;
         const chats = successResponse.data;
         const contacts = chats.map((chat) => ({
-          chatId: chat.chatId,
-          userId: chat.user!.userId,
-          username: chat.user!.username,
+          chatId: chat.id,
+          userId: chat.user?.id ?? 0,
+          username: chat.user?.username ?? 'a',
           isOpen: chat.isOpen,
         }));
         setContacts(contacts);
@@ -38,9 +38,9 @@ export const useContacts = ({ socket, handleContactSelect }: Props) => {
 
   useEffect(() => {
     if (socket && contacts) {
-      socket.on("chatCreated", (chat: Chat) => {
+      socket.on('chatCreated', (chat: Chat) => {
         const contact = {
-          chatId: chat.chatId,
+          chatId: chat.id,
           userId: chat.customerId,
           username: chat.user!.username,
           isOpen: chat.isOpen,
diff --git a/src/app/(user)/new_chat/[userId]/hooks/useChat.ts b/src/app/(user)/new_chat/[userId]/hooks/useChat.ts
index 88e889b..737496f 100644
--- a/src/app/(user)/new_chat/[userId]/hooks/useChat.ts
+++ b/src/app/(user)/new_chat/[userId]/hooks/useChat.ts
@@ -1,6 +1,6 @@
-import { useEffect, useState } from "react";
-import { useChatByUserId } from "@/hooks/api/chatHooks";
-import { Socket } from "socket.io-client";
+import { useEffect, useState } from 'react';
+import { useChatByUserId } from '@/hooks/api/chatHooks';
+import { Socket } from 'socket.io-client';
 
 type Props = {
   userId: number;
@@ -15,18 +15,18 @@ export const useChat = ({ userId, socket }: Props) => {
   const { data, error } = useChatByUserId(userId);
   useEffect(() => {
     if (data) {
-      if (data.user?.userId !== userId) {
-        socket.emit("create");
-        socket.on("chatCreated", (chat: Chat) => {
-          socket.emit("join", { chatId: chat.chatId });
+      if (data.user?.id !== userId) {
+        socket.emit('create');
+        socket.on('chatCreated', (chat: Chat) => {
+          socket.emit('join', { chatId: chat.chatId });
           setChatId(chat.chatId);
         });
         return;
       }
-      if (data.chatId) {
-        console.log("Chat exists");
-        socket.emit("join", { chatId: data.chatId });
-        setChatId(data.chatId);
+      if (data.id) {
+        console.log('Chat exists');
+        socket.emit('join', { chatId: data.id });
+        setChatId(data.id);
       }
     }
   }, [data]);
diff --git a/src/hooks/api/chatHooks.ts b/src/hooks/api/chatHooks.ts
index 507d000..18f3e51 100644
--- a/src/hooks/api/chatHooks.ts
+++ b/src/hooks/api/chatHooks.ts
@@ -1,12 +1,12 @@
-import { ChatClient } from "@/api/chat.client";
-import { Chat, ClientResponse, SuccessResponse } from "@/types";
-import { useQuery } from "@tanstack/react-query";
+import { ChatClient } from '@/api/chat.client';
+import { Chat, ClientResponse, SuccessResponse } from '@/types';
+import { useQuery } from '@tanstack/react-query';
 
 const chatClient = new ChatClient();
 
 export function useChats() {
   return useQuery<ClientResponse<Chat[]>, Error>({
-    queryKey: ["chats"],
+    queryKey: ['chats'],
     queryFn: () => chatClient.chats(),
     refetchOnWindowFocus: false,
   });
@@ -14,15 +14,15 @@ export function useChats() {
 
 export function useChatById(chatId: number) {
   return useQuery<ClientResponse<Chat>, Error>({
-    queryKey: ["chatID", chatId],
-    queryFn: () => chatClient.chatById({ chatId }),
+    queryKey: ['chatID', chatId],
+    queryFn: () => chatClient.chatById({ id: chatId }),
     refetchOnWindowFocus: false,
   });
 }
 
 export function useChatByUserId(userId: number) {
   return useQuery<Chat | undefined>({
-    queryKey: ["chatUserID", userId],
+    queryKey: ['chatUserID', userId],
     queryFn: async () => {
       const result = (await chatClient.chats()) as ClientResponse<Chat[]>;
       if (result instanceof Error) {
@@ -32,7 +32,7 @@ export function useChatByUserId(userId: number) {
       const chats = data.data as Chat[];
 
       return (
-        chats.find((chat) => chat.user?.userId === userId && chat.isOpen) ||
+        chats.find((chat) => chat.user?.id === userId && chat.isOpen) ||
         chats[0]
       );
     },
diff --git a/src/pages/chat.tsx b/src/pages/chat.tsx
index ad7c619..77349ac 100644
--- a/src/pages/chat.tsx
+++ b/src/pages/chat.tsx
@@ -17,8 +17,8 @@ const ChatApp: React.FC = () => {
     socket.emit("create");
     socket.on("chatCreated", (chat: Chat) => {
       const fd = new FormData();
-      setChatId(chat.chatId);
-      fd.append("chatId", chat.chatId.toString());
+      setChatId(chat.id);
+      fd.append("chatId", chat.id.toString());
       socket.emit("join", fd);
       socket.on("newMessage", (data: Message) => {
         console.log("Received message: ", data);
diff --git a/src/pages/dashboard.tsx b/src/pages/dashboard.tsx
index deeafe6..cbb5fc6 100644
--- a/src/pages/dashboard.tsx
+++ b/src/pages/dashboard.tsx
@@ -72,8 +72,8 @@ const Dashboard = () => {
 
     if (selectedChat) {
       const fd = new FormData();
-      fd.append("chatId", selectedChat.chatId.toString());
-      socket.emit("join", { chatId: selectedChat.chatId });
+      fd.append("chatId", selectedChat.id.toString());
+      socket.emit("join", { chatId: selectedChat.id });
 
       // If user sends a new message
       socket.on("newMessage", (message: Message) => {
@@ -83,7 +83,7 @@ const Dashboard = () => {
       return () => {
         socket.off("newMessage");
         const fd = new FormData();
-        fd.append("chatId", selectedChat.chatId.toString());
+        fd.append("chatId", selectedChat.id.toString());
         socket.emit("leave", fd);
       };
     }
@@ -117,7 +117,7 @@ const Dashboard = () => {
     //   console.log("Same chat");
     //   return;
     // }
-    const messages = await apiRequest("/chats/" + chat.chatId, "GET");
+    const messages = await apiRequest("/chats/" + chat.id, "GET");
 
     setChatMessages(messages.messages as Message[]);
     setSelectedChat(chat);
@@ -163,7 +163,7 @@ const Dashboard = () => {
     // };
     console.log(selectedChat);
     const data = {
-      chatId: selectedChat?.chatId,
+      chatId: selectedChat?.id,
       content: message,
     };
     const allMessage = {
@@ -192,7 +192,7 @@ const Dashboard = () => {
     const generatedGuide = await axios.post(
       "localhost:3002/openai/generate-guide",
       {
-        chatId: selectedChat?.chatId,
+        chatId: selectedChat?.id,
       }
     );
     localStorage.setItem("generatedGuide", generatedGuide.data);
diff --git a/src/types/chat.type.ts b/src/types/chat.type.ts
index 8625059..f295ed5 100644
--- a/src/types/chat.type.ts
+++ b/src/types/chat.type.ts
@@ -1,8 +1,7 @@
-import { Message } from "./message.type";
-import { User } from "./user.type";
-
+import { Message } from './message.type';
+import { User } from '@/api/types/User';
 export interface Chat {
-  chatId: number;
+  id: number;
   customerId: number;
   isOpen: boolean;
   startTime: Date;
diff --git a/src/types/user.type.ts b/src/types/user.type.ts
deleted file mode 100644
index de9ff4f..0000000
--- a/src/types/user.type.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export interface User {
-  id: number;
-  username: string;
-  email: string;
-  roles: string[];
-}

From 86955fee7f9d4b65b64f73eadcf9a6ba10990ef0 Mon Sep 17 00:00:00 2001
From: Ori <ori100no@gmail.com>
Date: Fri, 23 Aug 2024 17:22:19 +0300
Subject: [PATCH 101/242] fix

---
 .../(user)/new_chat/[userId]/hooks/useChat.ts | 20 +++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/app/(user)/new_chat/[userId]/hooks/useChat.ts b/src/app/(user)/new_chat/[userId]/hooks/useChat.ts
index 737496f..cee46a0 100644
--- a/src/app/(user)/new_chat/[userId]/hooks/useChat.ts
+++ b/src/app/(user)/new_chat/[userId]/hooks/useChat.ts
@@ -7,28 +7,28 @@ type Props = {
   socket: Socket;
 };
 type Chat = {
-  chatId: number;
+  id: number;
 };
 
 export const useChat = ({ userId, socket }: Props) => {
   const [chatId, setChatId] = useState<number | null>(null);
-  const { data, error } = useChatByUserId(userId);
+  const { data: chat, error } = useChatByUserId(userId);
   useEffect(() => {
-    if (data) {
-      if (data.user?.id !== userId) {
+    if (chat) {
+      if (chat.user?.id !== userId) {
         socket.emit('create');
         socket.on('chatCreated', (chat: Chat) => {
-          socket.emit('join', { chatId: chat.chatId });
-          setChatId(chat.chatId);
+          socket.emit('join', { chatId: chat.id});
+          setChatId(chat.id);
         });
         return;
       }
-      if (data.id) {
+      if (chat.id) {
         console.log('Chat exists');
-        socket.emit('join', { chatId: data.id });
-        setChatId(data.id);
+        socket.emit('join', { chatId: chat.id });
+        setChatId(chat.id);
       }
     }
-  }, [data]);
+  }, [chat]);
   return { chatId, error };
 };

From 0ec92cfe57dc4a5a10d666b55939c4bfaf0ddffa Mon Sep 17 00:00:00 2001
From: roiy0987 <roiy0987@gmail.com>
Date: Sat, 24 Aug 2024 13:03:25 +0300
Subject: [PATCH 102/242] default baseUrl value and added client for model-ai

---
 src/api/base.client.ts  | 32 ++++++++++++++++----------------
 src/api/model.client.ts | 13 +++++++++++++
 2 files changed, 29 insertions(+), 16 deletions(-)
 create mode 100644 src/api/model.client.ts

diff --git a/src/api/base.client.ts b/src/api/base.client.ts
index 99b6a24..80f4a6d 100644
--- a/src/api/base.client.ts
+++ b/src/api/base.client.ts
@@ -8,38 +8,38 @@ class ApiError extends Error {
     super(message);
     this.statusCode = statusCode;
     this.error = error;
-    this.name = 'ApiError';
+    this.name = "ApiError";
   }
 }
 
 export class BaseClient {
   base: string | undefined;
 
-  constructor() {
-    this.base = process.env.NEXT_PUBLIC_SERVER_URL;
+  constructor(base: string = process.env.NEXT_PUBLIC_SERVER_URL!) {
+    this.base = base;
   }
 
   private async request<T>(
     endpoint: string,
-    method: 'GET' | 'POST' | 'PUT' | 'DELETE',
+    method: "GET" | "POST" | "PUT" | "DELETE",
     body?: any,
     options: RequestInit = {}
   ): Promise<ClientResponse<T>> {
     if (!this.base) {
-      throw new Error('Base URL is not defined');
+      throw new Error("Base URL is not defined");
     }
 
     const fetchOptions: RequestInit = {
       method,
       headers: {
-        'Content-Type': 'application/json',
+        "Content-Type": "application/json",
         ...options.headers,
       },
-      credentials: 'include',
+      credentials: "include",
       ...options,
     };
 
-    if (method !== 'GET' && method !== 'DELETE') {
+    if (method !== "GET" && method !== "DELETE") {
       fetchOptions.body = body != null ? JSON.stringify(body) : undefined;
     }
 
@@ -56,8 +56,8 @@ export class BaseClient {
         );
       }
 
-      const contentType = response.headers.get('Content-Type');
-      if (contentType && contentType.includes('application/json')) {
+      const contentType = response.headers.get("Content-Type");
+      if (contentType && contentType.includes("application/json")) {
         const data: T = await response.json();
         return {
           data,
@@ -68,11 +68,11 @@ export class BaseClient {
         };
       }
     } catch (error) {
-      console.error('An error occurred', error);
+      console.error("An error occurred", error);
       if (error instanceof ApiError) {
         throw error;
       } else {
-        throw new Error('An unexpected error occurred');
+        throw new Error("An unexpected error occurred");
       }
     }
   }
@@ -81,7 +81,7 @@ export class BaseClient {
     endpoint: string,
     options: RequestInit = {}
   ): Promise<ClientResponse<T>> {
-    return this.request<T>(endpoint, 'GET', options);
+    return this.request<T>(endpoint, "GET", options);
   }
 
   protected async post<T>(
@@ -89,7 +89,7 @@ export class BaseClient {
     body: any,
     options: RequestInit = {}
   ): Promise<ClientResponse<T>> {
-    return this.request<T>(endpoint, 'POST', body, options);
+    return this.request<T>(endpoint, "POST", body, options);
   }
 
   protected async put<T>(
@@ -97,13 +97,13 @@ export class BaseClient {
     body: any,
     options: RequestInit = {}
   ): Promise<ClientResponse<T>> {
-    return this.request<T>(endpoint, 'PUT', body, options);
+    return this.request<T>(endpoint, "PUT", body, options);
   }
 
   protected async delete<T>(
     endpoint: string,
     options: RequestInit = {}
   ): Promise<ClientResponse<T>> {
-    return this.request<T>(endpoint, 'DELETE', options);
+    return this.request<T>(endpoint, "DELETE", options);
   }
 }
diff --git a/src/api/model.client.ts b/src/api/model.client.ts
new file mode 100644
index 0000000..5c0912f
--- /dev/null
+++ b/src/api/model.client.ts
@@ -0,0 +1,13 @@
+import { BaseClient } from "./base.client";
+
+export class ModelClient extends BaseClient {
+  constructor() {
+    super(process.env.NEXT_PUBLIC_MODEL_AI_URL!);
+  }
+  createGuide(modelCreateGuideRequest: ModelCreateGuideRequest) {
+    return this.post<ModelCreateGuideResponse>(
+      "openai/generate-guide",
+      modelCreateGuideRequest
+    );
+  }
+}

From c0e98d30834616cac2180cca383f2b9153a3d1c9 Mon Sep 17 00:00:00 2001
From: roiy0987 <roiy0987@gmail.com>
Date: Sat, 24 Aug 2024 13:04:26 +0300
Subject: [PATCH 103/242] chore: Seperate Guide and Review clients

---
 src/api/guide.client.ts  | 22 +++++++++-------------
 src/api/review.client.ts | 12 ++++++++++++
 2 files changed, 21 insertions(+), 13 deletions(-)
 create mode 100644 src/api/review.client.ts

diff --git a/src/api/guide.client.ts b/src/api/guide.client.ts
index 704e7cf..3afc510 100644
--- a/src/api/guide.client.ts
+++ b/src/api/guide.client.ts
@@ -1,22 +1,18 @@
-import { CreateReviewDto } from '@/app/(admin)/new_dashboard/guides/dto/CreateReviewDto';
-import { BaseClient } from './base.client';
-import { Guide } from './types/Guide';
-import { Review } from './types/Review';
+import { CreateReviewDto } from "@/app/(admin)/new_dashboard/guides/dto/CreateReviewDto";
+import { BaseClient } from "./base.client";
+import { CreateGuideRequest, Guide } from "./types/Guide";
+import { Review } from "./types/Review";
 
 export class GuideClient extends BaseClient {
   async getAllGuides() {
-    return await this.get<Guide[]>('guides');
-  }
-
-  async getReviews(guideId: number) {
-    return await this.get<Review[]>('reviews/guide/' + guideId);
+    return await this.get<Guide[]>("guides");
   }
 
   async getGuide(guideId: number) {
-    return await this.get<Guide>('guides/' + guideId);
+    return await this.get<Guide>("guides/" + guideId);
   }
-  
-  async addReview(review:CreateReviewDto) {
-    return await this.post<Review>('reviews', review);
+
+  async createGuide(createGuideRequest: CreateGuideRequest) {
+    return await this.post<Guide>("guides", createGuideRequest);
   }
 }
diff --git a/src/api/review.client.ts b/src/api/review.client.ts
new file mode 100644
index 0000000..7badffe
--- /dev/null
+++ b/src/api/review.client.ts
@@ -0,0 +1,12 @@
+import { BaseClient } from "./base.client";
+import { CreateReviewRequest, Review } from "./types/Review";
+
+export class ReviewClient extends BaseClient {
+  async getReviews(guideId: number) {
+    return await this.get<Review[]>("reviews/guide/" + guideId);
+  }
+
+  async addReview(review: CreateReviewRequest) {
+    return await this.post<Review>("reviews", review);
+  }
+}

From 957420eb5cd730da32daf0fc9b94ce1f7ef223ec Mon Sep 17 00:00:00 2001
From: roiy0987 <roiy0987@gmail.com>
Date: Sat, 24 Aug 2024 13:05:24 +0300
Subject: [PATCH 104/242] chore: create review and guide request

---
 src/api/types/Guide.ts  | 11 ++++++++---
 src/api/types/Review.ts | 19 +++++++++++++++++--
 2 files changed, 25 insertions(+), 5 deletions(-)

diff --git a/src/api/types/Guide.ts b/src/api/types/Guide.ts
index cae0b42..6033db2 100644
--- a/src/api/types/Guide.ts
+++ b/src/api/types/Guide.ts
@@ -1,6 +1,6 @@
-import { z } from 'zod';
-import { userSchema } from './User';
-import { reviewSchema } from './Review';
+import { z } from "zod";
+import { userSchema } from "./User";
+import { reviewSchema } from "./Review";
 
 const guideSchema = z.object({
   id: z.number(),
@@ -13,3 +13,8 @@ const guideSchema = z.object({
 });
 
 export type Guide = z.infer<typeof guideSchema>;
+
+export type CreateGuideRequest = {
+  title: string;
+  contentHTML: string;
+};
diff --git a/src/api/types/Review.ts b/src/api/types/Review.ts
index ccbc076..6c50efc 100644
--- a/src/api/types/Review.ts
+++ b/src/api/types/Review.ts
@@ -1,5 +1,5 @@
-import { z } from 'zod';
-import { userSchema } from './User';
+import { z } from "zod";
+import { userSchema } from "./User";
 
 export const reviewSchema = z.object({
   id: z.number(),
@@ -12,3 +12,18 @@ export const reviewSchema = z.object({
 });
 
 export type Review = z.infer<typeof reviewSchema>;
+
+export const CreateReviewSchema = z.object({
+  guideId: z.number({
+    required_error: "Guide ID is required",
+  }),
+  rating: z
+    .number({
+      required_error: "Stars rating is required",
+    })
+    .min(1, "Stars rating must be at least 1")
+    .max(5, "Stars rating cannot exceed 5"),
+  comment: z.string().optional(),
+});
+
+export type CreateReviewRequest = z.infer<typeof CreateReviewSchema>;

From 6e2ff545070273b82b6f39d9a1a5634856a8103e Mon Sep 17 00:00:00 2001
From: roiy0987 <roiy0987@gmail.com>
Date: Sat, 24 Aug 2024 13:05:48 +0300
Subject: [PATCH 105/242] refactor: Remove unused guideClientHooks file

---
 .../guides/hooks/guideClientHooks.ts          | 32 -------------------
 1 file changed, 32 deletions(-)
 delete mode 100644 src/app/(admin)/new_dashboard/guides/hooks/guideClientHooks.ts

diff --git a/src/app/(admin)/new_dashboard/guides/hooks/guideClientHooks.ts b/src/app/(admin)/new_dashboard/guides/hooks/guideClientHooks.ts
deleted file mode 100644
index 6ef749b..0000000
--- a/src/app/(admin)/new_dashboard/guides/hooks/guideClientHooks.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import { GuideClient } from '@/api/guide.client';
-import { useQuery, useMutation } from '@tanstack/react-query';
-import { CreateReviewDto } from '../dto/CreateReviewDto';
-
-const guideClient = new GuideClient();
-
-export function useAllGuides() {
-  return useQuery({
-    queryKey: ['guides'],
-    queryFn: () => guideClient.getAllGuides(),
-  });
-}
-
-export function useReviews(guideId: number) {
-  return useQuery({
-    queryKey: ['reviews', 'guide', guideId],
-    queryFn: () => guideClient.getReviews(guideId),
-  });
-}
-
-export function useGuide(guideId: number) {
-  return useQuery({
-    queryKey: ['guide', guideId],
-    queryFn: () => guideClient.getGuide(guideId),
-  });
-}
-
-export function useAddReview() {
-  return useMutation({
-    mutationFn: (review:CreateReviewDto) => guideClient.addReview(review),
-  });
-}

From c5ce75fe0b79ad51218f1b199d8a7e0297a2504b Mon Sep 17 00:00:00 2001
From: roiy0987 <roiy0987@gmail.com>
Date: Sat, 24 Aug 2024 13:05:58 +0300
Subject: [PATCH 106/242] feat: Add User and UserRole interfaces

---
 src/types/user.type.ts | 10 ++++++++++
 1 file changed, 10 insertions(+)
 create mode 100644 src/types/user.type.ts

diff --git a/src/types/user.type.ts b/src/types/user.type.ts
new file mode 100644
index 0000000..6966da3
--- /dev/null
+++ b/src/types/user.type.ts
@@ -0,0 +1,10 @@
+export interface User {
+  id: number;
+  username: string;
+  email: string;
+  roles: string[];
+}
+
+export interface UserRole {
+  roles: string[];
+}

From 70b1c9abc50b103966f6188ea334d9ae81894091 Mon Sep 17 00:00:00 2001
From: roiy0987 <roiy0987@gmail.com>
Date: Sat, 24 Aug 2024 13:06:09 +0300
Subject: [PATCH 107/242] feat: Add reviewHooks for managing reviews and
 queries

---
 src/hooks/api/reviewHooks.ts | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)
 create mode 100644 src/hooks/api/reviewHooks.ts

diff --git a/src/hooks/api/reviewHooks.ts b/src/hooks/api/reviewHooks.ts
new file mode 100644
index 0000000..adf7907
--- /dev/null
+++ b/src/hooks/api/reviewHooks.ts
@@ -0,0 +1,17 @@
+import { ReviewClient } from "@/api/review.client";
+import { CreateReviewRequest } from "@/api/types/Review";
+import { useQuery, useMutation } from "@tanstack/react-query";
+
+const reviewClient = new ReviewClient();
+
+export function useAddReview() {
+  return useMutation({
+    mutationFn: (review: CreateReviewRequest) => reviewClient.addReview(review),
+  });
+}
+export function useReviews(guideId: number) {
+  return useQuery({
+    queryKey: ["reviews", "guide", guideId],
+    queryFn: () => reviewClient.getReviews(guideId),
+  });
+}

From 177629d7b83fc952e79dc041744d33a7ab273d2f Mon Sep 17 00:00:00 2001
From: roiy0987 <roiy0987@gmail.com>
Date: Sat, 24 Aug 2024 13:06:44 +0300
Subject: [PATCH 108/242] chore: Add chatHooks and guideHooks for managing chat
 and guide queries

---
 src/hooks/api/chatHooks.ts  | 17 ++++++++++-------
 src/hooks/api/guideHooks.ts | 25 +++++++++++++++++++++++++
 src/hooks/api/index.ts      |  3 +++
 3 files changed, 38 insertions(+), 7 deletions(-)
 create mode 100644 src/hooks/api/guideHooks.ts

diff --git a/src/hooks/api/chatHooks.ts b/src/hooks/api/chatHooks.ts
index 18f3e51..545cc51 100644
--- a/src/hooks/api/chatHooks.ts
+++ b/src/hooks/api/chatHooks.ts
@@ -1,12 +1,12 @@
-import { ChatClient } from '@/api/chat.client';
-import { Chat, ClientResponse, SuccessResponse } from '@/types';
-import { useQuery } from '@tanstack/react-query';
+import { ChatClient } from "@/api/chat.client";
+import { Chat, ClientResponse, SuccessResponse } from "@/types";
+import { useQuery } from "@tanstack/react-query";
 
 const chatClient = new ChatClient();
 
 export function useChats() {
   return useQuery<ClientResponse<Chat[]>, Error>({
-    queryKey: ['chats'],
+    queryKey: ["chats"],
     queryFn: () => chatClient.chats(),
     refetchOnWindowFocus: false,
   });
@@ -14,15 +14,15 @@ export function useChats() {
 
 export function useChatById(chatId: number) {
   return useQuery<ClientResponse<Chat>, Error>({
-    queryKey: ['chatID', chatId],
+    queryKey: ["chatID", chatId],
     queryFn: () => chatClient.chatById({ id: chatId }),
     refetchOnWindowFocus: false,
   });
 }
 
 export function useChatByUserId(userId: number) {
-  return useQuery<Chat | undefined>({
-    queryKey: ['chatUserID', userId],
+  return useQuery<Chat | null>({
+    queryKey: ["chatUserID", userId],
     queryFn: async () => {
       const result = (await chatClient.chats()) as ClientResponse<Chat[]>;
       if (result instanceof Error) {
@@ -30,6 +30,9 @@ export function useChatByUserId(userId: number) {
       }
       const data = result as SuccessResponse<Chat[]>;
       const chats = data.data as Chat[];
+      if (chats.length === 0) {
+        return null;
+      }
 
       return (
         chats.find((chat) => chat.user?.id === userId && chat.isOpen) ||
diff --git a/src/hooks/api/guideHooks.ts b/src/hooks/api/guideHooks.ts
new file mode 100644
index 0000000..2a087a1
--- /dev/null
+++ b/src/hooks/api/guideHooks.ts
@@ -0,0 +1,25 @@
+import { GuideClient } from "@/api/guide.client";
+import { CreateGuideRequest } from "@/api/types/Guide";
+import { useQuery, useMutation } from "@tanstack/react-query";
+
+const guideClient = new GuideClient();
+
+export function useAllGuides() {
+  return useQuery({
+    queryKey: ["guides"],
+    queryFn: () => guideClient.getAllGuides(),
+  });
+}
+
+export function useGuide(guideId: number) {
+  return useQuery({
+    queryKey: ["guide", guideId],
+    queryFn: () => guideClient.getGuide(guideId),
+  });
+}
+
+export function useCreateGuide() {
+  return useMutation({
+    mutationFn: (data: CreateGuideRequest) => guideClient.createGuide(data),
+  });
+}
diff --git a/src/hooks/api/index.ts b/src/hooks/api/index.ts
index 727ff51..8762941 100644
--- a/src/hooks/api/index.ts
+++ b/src/hooks/api/index.ts
@@ -1 +1,4 @@
 export * from "./authHooks";
+export * from "./chatHooks";
+export * from "./guideHooks";
+export * from "./reviewHooks";

From 3a45f8c15e0f7e94659f7999dd6bdf43d889726e Mon Sep 17 00:00:00 2001
From: roiy0987 <roiy0987@gmail.com>
Date: Sat, 24 Aug 2024 13:08:19 +0300
Subject: [PATCH 109/242] feat: Add GuideProvider for managing guide context

---
 src/app/layout.tsx          |  5 ++++-
 src/app/providers/guide.tsx | 26 ++++++++++++++++++++++++++
 2 files changed, 30 insertions(+), 1 deletion(-)
 create mode 100644 src/app/providers/guide.tsx

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 8c4f0ce..0ed4f8b 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -4,6 +4,7 @@ import { baselightTheme } from "@/util/theme";
 import "./globals.css";
 import { Providers, SocketProvider } from "./providers";
 import { CssBaseline, ThemeProvider } from "@mui/material";
+import { GuideProvider } from "./providers/guide";
 
 export default function RootLayout({
   children,
@@ -16,7 +17,9 @@ export default function RootLayout({
         <ThemeProvider theme={baselightTheme}>
           <CssBaseline />
           <Providers>
-            <SocketProvider>{children}</SocketProvider>
+            <SocketProvider>
+              <GuideProvider>{children}</GuideProvider>
+            </SocketProvider>
           </Providers>
         </ThemeProvider>
       </body>
diff --git a/src/app/providers/guide.tsx b/src/app/providers/guide.tsx
new file mode 100644
index 0000000..712b12c
--- /dev/null
+++ b/src/app/providers/guide.tsx
@@ -0,0 +1,26 @@
+import { createContext, useContext, useState } from "react";
+
+interface GuideContextType {
+  guide: string;
+  setGuide: (newGuide: string) => void;
+}
+
+export const guideContext = createContext<GuideContextType | undefined>(
+  undefined
+);
+
+export const GuideProvider = ({ children }: { children: React.ReactNode }) => {
+  const [guide, setGuide] = useState<string>("");
+  return (
+    <guideContext.Provider value={{ guide, setGuide }}>
+      {children}
+    </guideContext.Provider>
+  );
+};
+export const useGuideContext = () => {
+  const context = useContext(guideContext);
+  if (!context) {
+    throw new Error("useGuideContext must be used within a GuideProvider");
+  }
+  return context;
+};

From 566c67d7a81f917c3beaee8e29d535e000957335 Mon Sep 17 00:00:00 2001
From: roiy0987 <roiy0987@gmail.com>
Date: Sat, 24 Aug 2024 13:08:28 +0300
Subject: [PATCH 110/242] refactor: Update useLoginForm to use UserRole instead
 of User in response

---
 src/app/(public)/login/hooks/useLoginForm.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/(public)/login/hooks/useLoginForm.ts b/src/app/(public)/login/hooks/useLoginForm.ts
index 95c7213..450af87 100644
--- a/src/app/(public)/login/hooks/useLoginForm.ts
+++ b/src/app/(public)/login/hooks/useLoginForm.ts
@@ -4,7 +4,7 @@ import { schema } from "../validations/schema";
 import { LoginRequest } from "@/api/types/login";
 import { useRouter } from "next/navigation";
 import { useLogin } from "@/hooks";
-import { User, SuccessResponse } from "@/types";
+import { UserRole, SuccessResponse } from "@/types";
 
 const useLoginForm = () => {
   const {
@@ -24,7 +24,7 @@ const useLoginForm = () => {
   const onSubmit = (data: LoginRequest) => {
     mutate(data, {
       onSuccess: (response) => {
-        const { data: user } = response as SuccessResponse<User>;
+        const { data: user } = response as SuccessResponse<UserRole>;
 
         if (user.roles.includes("admin")) {
           router.push("/dashboard");

From 9e1708a3d26b3fa2e55a819f610a69523fdfa9e5 Mon Sep 17 00:00:00 2001
From: roiy0987 <roiy0987@gmail.com>
Date: Sat, 24 Aug 2024 15:18:46 +0300
Subject: [PATCH 111/242] Remove unused guide.type from types/index.ts

---
 src/types/index.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/types/index.ts b/src/types/index.ts
index a47204f..bb8489a 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -1,5 +1,4 @@
 export * from "./chat.type";
 export * from "./message.type";
 export * from "./user.type";
-export * from "./guide.type";
 export * from "./clientResponse.type";

From 187b371a8270ae1030be76387edac526108bfea7 Mon Sep 17 00:00:00 2001
From: roiy0987 <roiy0987@gmail.com>
Date: Sat, 24 Aug 2024 15:18:57 +0300
Subject: [PATCH 112/242] refactor: Update GuideProvider to use Guide object
 instead of string

---
 src/app/providers/guide.tsx | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/src/app/providers/guide.tsx b/src/app/providers/guide.tsx
index 712b12c..12fcc1a 100644
--- a/src/app/providers/guide.tsx
+++ b/src/app/providers/guide.tsx
@@ -1,16 +1,27 @@
-import { createContext, useContext, useState } from "react";
+import {
+  createContext,
+  Dispatch,
+  SetStateAction,
+  useContext,
+  useState,
+} from "react";
 
 interface GuideContextType {
-  guide: string;
-  setGuide: (newGuide: string) => void;
+  guide: Guide | undefined;
+  setGuide: Dispatch<SetStateAction<Guide | undefined>>;
 }
 
+type Guide = {
+  title: string;
+  contentHTML: string;
+};
+
 export const guideContext = createContext<GuideContextType | undefined>(
   undefined
 );
 
 export const GuideProvider = ({ children }: { children: React.ReactNode }) => {
-  const [guide, setGuide] = useState<string>("");
+  const [guide, setGuide] = useState<Guide | undefined>(undefined);
   return (
     <guideContext.Provider value={{ guide, setGuide }}>
       {children}

From f285ea098b02e99a68fdbe95f6ff33eb6bb100c7 Mon Sep 17 00:00:00 2001
From: roiy0987 <roiy0987@gmail.com>
Date: Sat, 24 Aug 2024 15:19:54 +0300
Subject: [PATCH 113/242] refactor: Update useChat to use socket.io-client for
 chat functionality

---
 .../(user)/new_chat/[userId]/hooks/useChat.ts | 24 +++++++++----------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/app/(user)/new_chat/[userId]/hooks/useChat.ts b/src/app/(user)/new_chat/[userId]/hooks/useChat.ts
index cee46a0..811a89e 100644
--- a/src/app/(user)/new_chat/[userId]/hooks/useChat.ts
+++ b/src/app/(user)/new_chat/[userId]/hooks/useChat.ts
@@ -1,6 +1,6 @@
-import { useEffect, useState } from 'react';
-import { useChatByUserId } from '@/hooks/api/chatHooks';
-import { Socket } from 'socket.io-client';
+import { useEffect, useState } from "react";
+import { useChatByUserId } from "@/hooks/api/chatHooks";
+import { Socket } from "socket.io-client";
 
 type Props = {
   userId: number;
@@ -12,23 +12,23 @@ type Chat = {
 
 export const useChat = ({ userId, socket }: Props) => {
   const [chatId, setChatId] = useState<number | null>(null);
-  const { data: chat, error } = useChatByUserId(userId);
+  const { data: chat, error, isPending } = useChatByUserId(userId);
+
   useEffect(() => {
-    if (chat) {
-      if (chat.user?.id !== userId) {
-        socket.emit('create');
-        socket.on('chatCreated', (chat: Chat) => {
-          socket.emit('join', { chatId: chat.id});
+    if (!isPending) {
+      if (chat == null || chat.user?.id !== userId) {
+        socket.emit("create");
+        socket.on("chatCreated", (chat: Chat) => {
+          socket.emit("join", { chatId: chat.id });
           setChatId(chat.id);
         });
         return;
       }
       if (chat.id) {
-        console.log('Chat exists');
-        socket.emit('join', { chatId: chat.id });
+        socket.emit("join", { chatId: chat.id });
         setChatId(chat.id);
       }
     }
-  }, [chat]);
+  }, [isPending]);
   return { chatId, error };
 };

From 5435313101e626e851deb8a4042ef12962aab26c Mon Sep 17 00:00:00 2001
From: roiy0987 <roiy0987@gmail.com>
Date: Sat, 24 Aug 2024 15:20:16 +0300
Subject: [PATCH 114/242] refactor: Update hooks imports in
 guides/hooks/index.ts

---
 src/app/(admin)/new_dashboard/guides/hooks/index.ts | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/app/(admin)/new_dashboard/guides/hooks/index.ts b/src/app/(admin)/new_dashboard/guides/hooks/index.ts
index 2350a6e..22228ae 100644
--- a/src/app/(admin)/new_dashboard/guides/hooks/index.ts
+++ b/src/app/(admin)/new_dashboard/guides/hooks/index.ts
@@ -1,3 +1,2 @@
-export * from './useSearchGuides';
-export * from './guideClientHooks';
-export * from './useAddReviewForm';
+export * from "./useSearchGuides";
+export * from "./useAddReviewForm";

From 52aa37202705e69f83446a649f70c53de09bb74a Mon Sep 17 00:00:00 2001
From: roiy0987 <roiy0987@gmail.com>
Date: Sat, 24 Aug 2024 15:20:54 +0300
Subject: [PATCH 115/242] refactor: Update useAddReviewForm import

---
 .../new_dashboard/guides/hooks/useAddReviewForm.ts   | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/app/(admin)/new_dashboard/guides/hooks/useAddReviewForm.ts b/src/app/(admin)/new_dashboard/guides/hooks/useAddReviewForm.ts
index 071ca10..1f7c4aa 100644
--- a/src/app/(admin)/new_dashboard/guides/hooks/useAddReviewForm.ts
+++ b/src/app/(admin)/new_dashboard/guides/hooks/useAddReviewForm.ts
@@ -1,9 +1,9 @@
-import { useState } from 'react';
-import { useAddReview } from './guideClientHooks';
-import { CreateReviewDto, CreateReviewSchema } from '../dto/CreateReviewDto';
+import { useState } from "react";
+import { CreateReviewDto, CreateReviewSchema } from "../dto/CreateReviewDto";
+import { useAddReview } from "@/hooks";
 
 const useAddReviewForm = (guideId: number) => {
-  const [comment, setComment] = useState('');
+  const [comment, setComment] = useState("");
   const [stars, setStars] = useState(0);
   const [validationError, setValidationError] = useState<string | null>(null);
   const { mutate, isError, error, isPending, isSuccess } = useAddReview();
@@ -17,14 +17,14 @@ const useAddReviewForm = (guideId: number) => {
     const validation = CreateReviewSchema.safeParse(newReview);
     if (!validation.success) {
       setValidationError(
-        validation.error.errors.map((err) => err.message).join(', ')
+        validation.error.errors.map((err) => err.message).join(", ")
       );
       return;
     }
 
     mutate(validation.data, {
       onSuccess: () => {
-        setComment('');
+        setComment("");
         setStars(0);
       },
     });

From d9ac12aa4eb3cee510d36c3a4b0502ebf0fc772c Mon Sep 17 00:00:00 2001
From: roiy0987 <roiy0987@gmail.com>
Date: Sat, 24 Aug 2024 15:24:19 +0300
Subject: [PATCH 116/242] refactor: Update GuideEditor component to use
 react-hook-form for form management

---
 .../guides/components/Editor/index.tsx        | 37 ++++++++++++++-----
 1 file changed, 28 insertions(+), 9 deletions(-)

diff --git a/src/app/(admin)/new_dashboard/guides/components/Editor/index.tsx b/src/app/(admin)/new_dashboard/guides/components/Editor/index.tsx
index 6def424..700b8c3 100644
--- a/src/app/(admin)/new_dashboard/guides/components/Editor/index.tsx
+++ b/src/app/(admin)/new_dashboard/guides/components/Editor/index.tsx
@@ -3,19 +3,29 @@ import { useState } from "react";
 import "react-quill/dist/quill.snow.css";
 import { Box, Button, TextField } from "@mui/material";
 import SaveAsIcon from "@mui/icons-material/SaveAs";
+import { UseFormRegister, UseFormSetValue } from "react-hook-form";
+import { CreateGuideRequest } from "@/api/types/Guide";
 
 const DynamicReactQuill = dynamic(() => import("react-quill"));
 
 interface Props {
-  intitialTitle?: string;
+  initialTitle?: string;
   initialIssue?: string;
   initialContent?: string;
-  onSave: (content: string) => void;
+  onSave: () => void;
+  register: UseFormRegister<CreateGuideRequest>;
+  error: Error | null;
+  setValue: UseFormSetValue<CreateGuideRequest>;
 }
 
-const GuideEditor = ({ initialContent = "", onSave }: Props) => {
-  const [contentHTML, setContent] = useState<string>(initialContent);
-
+const GuideEditor = ({
+  initialContent = "",
+  initialTitle = "",
+  onSave,
+  register,
+  error,
+  setValue,
+}: Props) => {
   const modules = {
     toolbar: [
       [{ header: [1, 2, 3, 4, 5, 6, false] }],
@@ -48,22 +58,31 @@ const GuideEditor = ({ initialContent = "", onSave }: Props) => {
 
   return (
     <>
-      <TextField label="Title" variant="outlined" fullWidth sx={{ mb: 2 }} />
+      <TextField
+        {...register("title")}
+        label="Title"
+        variant="outlined"
+        fullWidth
+        defaultValue={initialTitle}
+        onChange={(e) => setValue("title", e.target.value)}
+        sx={{ mb: 2 }}
+      />
       <TextField label="Issue" variant="outlined" fullWidth sx={{ mb: 2 }} />
       <DynamicReactQuill
         theme="snow"
         modules={modules}
         formats={formats}
-        value={contentHTML}
         style={{ height: "570px" }}
-        onChange={(content) => setContent(content)}
+        defaultValue={initialContent} // Initial content for the editor
+        onChange={(content) => setValue("contentHTML", content)}
       />
+      <input type="hidden" {...register("contentHTML")} />
       <Box display="flex" flexDirection="column" alignItems="flex-end" mt={6}>
         <Button
           variant="contained"
           color="primary"
           startIcon={<SaveAsIcon />}
-          onClick={() => onSave(contentHTML)}
+          onClick={() => onSave()}
         >
           Save Guide
         </Button>

From f5d87508991226079561cdf5cd954998a81e9ac6 Mon Sep 17 00:00:00 2001
From: roiy0987 <roiy0987@gmail.com>
Date: Sat, 24 Aug 2024 15:24:40 +0300
Subject: [PATCH 117/242] feat: Add ModelCreateGuideRequest and
 ModelCreateGuideResponse types

---
 src/api/types/model.ts | 14 ++++++++++++++
 1 file changed, 14 insertions(+)
 create mode 100644 src/api/types/model.ts

diff --git a/src/api/types/model.ts b/src/api/types/model.ts
new file mode 100644
index 0000000..e62cbbd
--- /dev/null
+++ b/src/api/types/model.ts
@@ -0,0 +1,14 @@
+type ModelCreateGuideRequest = {
+  messages: Message[];
+  user: User;
+};
+
+type User = {
+  username: string;
+  roles: string[];
+};
+
+type ModelCreateGuideResponse = {
+  contentHTML: string;
+  title: string;
+};

From f6ca7ba6a5ced607b5e18f212a0f99e7d97e5dfe Mon Sep 17 00:00:00 2001
From: roiy0987 <roiy0987@gmail.com>
Date: Sat, 24 Aug 2024 15:28:03 +0300
Subject: [PATCH 118/242] refactor: Add useGuide hook for generating guides

---
 .../components/ChatHeader/hooks/useGuide.ts   | 35 +++++++++++++++++++
 .../components/ChatHeader/index.tsx           |  7 +++-
 .../components/ChatHeader/types/index.ts      |  9 +++++
 .../new_dashboard/guides/[id]/page.tsx        | 35 ++++++++++++-------
 src/app/(admin)/new_dashboard/guides/page.tsx | 16 ++++++---
 5 files changed, 83 insertions(+), 19 deletions(-)
 create mode 100644 src/app/(admin)/new_dashboard/components/ChatHeader/hooks/useGuide.ts
 create mode 100644 src/app/(admin)/new_dashboard/components/ChatHeader/types/index.ts

diff --git a/src/app/(admin)/new_dashboard/components/ChatHeader/hooks/useGuide.ts b/src/app/(admin)/new_dashboard/components/ChatHeader/hooks/useGuide.ts
new file mode 100644
index 0000000..464a980
--- /dev/null
+++ b/src/app/(admin)/new_dashboard/components/ChatHeader/hooks/useGuide.ts
@@ -0,0 +1,35 @@
+import { ChatClient } from "@/api/chat.client";
+import { ModelClient } from "@/api/model.client";
+import { guideContext, useGuideContext } from "@/app/providers/guide";
+import { ClientResponse, SuccessResponse } from "@/types";
+import { useRouter } from "next/navigation";
+import { Chat, User } from "../types/index";
+
+export const useGuide = () => {
+  const router = useRouter();
+  const { setGuide } = useGuideContext();
+
+  async function handleGenerateGuide(chatId: number): Promise<void> {
+    const chatModel = new ChatClient();
+    const clientResponse = (await chatModel.chatById({
+      id: chatId,
+    })) as ClientResponse<Chat>;
+    const successResponse = clientResponse as SuccessResponse<Chat>;
+    const chat = successResponse.data as Chat;
+
+    const modelClient = new ModelClient();
+    const response = (await modelClient.createGuide({
+      user: chat.user,
+      messages: chat.messages,
+    })) as ClientResponse<ModelCreateGuideResponse>;
+
+    const modelCreateGuideResponse =
+      response as SuccessResponse<ModelCreateGuideResponse>;
+    setGuide(modelCreateGuideResponse.data);
+    router.push("new_dashboard/guides/create");
+  }
+
+  return {
+    handleGenerateGuide,
+  };
+};
diff --git a/src/app/(admin)/new_dashboard/components/ChatHeader/index.tsx b/src/app/(admin)/new_dashboard/components/ChatHeader/index.tsx
index c89f83d..665beeb 100644
--- a/src/app/(admin)/new_dashboard/components/ChatHeader/index.tsx
+++ b/src/app/(admin)/new_dashboard/components/ChatHeader/index.tsx
@@ -2,12 +2,14 @@ import { Box, Typography, Button } from "@mui/material";
 import SmartToyIcon from "@mui/icons-material/SmartToy";
 import SnoozeIcon from "@mui/icons-material/Snooze";
 import { Contact } from "../../types";
+import { useGuide } from "./hooks/useGuide";
 
 type Props = {
   selectedContact: Contact | null;
 };
 
 const ChatHeader = ({ selectedContact }: Props) => {
+  const { handleGenerateGuide } = useGuide();
   return (
     <Box
       sx={{
@@ -23,7 +25,10 @@ const ChatHeader = ({ selectedContact }: Props) => {
       {selectedContact && (
         <>
           <Typography variant="h6">{selectedContact.username}</Typography>
-          <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
+          <Box
+            onClick={() => handleGenerateGuide(selectedContact.chatId)}
+            sx={{ display: "flex", alignItems: "center", gap: 1 }}
+          >
             <Button variant="contained" startIcon={<SmartToyIcon />}>
               Generate Guide
             </Button>
diff --git a/src/app/(admin)/new_dashboard/components/ChatHeader/types/index.ts b/src/app/(admin)/new_dashboard/components/ChatHeader/types/index.ts
new file mode 100644
index 0000000..7cf0e3a
--- /dev/null
+++ b/src/app/(admin)/new_dashboard/components/ChatHeader/types/index.ts
@@ -0,0 +1,9 @@
+export type Chat = {
+  messages: Message[];
+  user: User;
+};
+export interface User {
+  id: number;
+  username: string;
+  roles: string[];
+}
diff --git a/src/app/(admin)/new_dashboard/guides/[id]/page.tsx b/src/app/(admin)/new_dashboard/guides/[id]/page.tsx
index 4c49168..ee4e921 100644
--- a/src/app/(admin)/new_dashboard/guides/[id]/page.tsx
+++ b/src/app/(admin)/new_dashboard/guides/[id]/page.tsx
@@ -1,51 +1,60 @@
 "use client";
 import PageContainer from "@/components/PageContainer";
 import { useParams } from "next/navigation";
-import { useGuide } from "../hooks";
 import DashboardCard from "../../shared/Card";
-import { Typography, CircularProgress, Alert, Box, Divider } from "@mui/material";
+import {
+  Typography,
+  CircularProgress,
+  Alert,
+  Box,
+  Divider,
+} from "@mui/material";
 import { Guide } from "@/api/types/Guide";
 import ReviewList from "../components/ReviewList";
 import AddReviewBox from "../components/AddReviewBox";
+import { useGuide } from "@/hooks";
 
 const GuidePage = () => {
   const params = useParams();
 
   const id = params?.id ? Number(params.id) : null;
-  
-  
+
   let guide: Guide | undefined = undefined;
 
- const {data:response , isLoading, isError, error, isSuccess} = useGuide(id ?? 0);
+  const {
+    data: response,
+    isLoading,
+    isError,
+    error,
+    isSuccess,
+  } = useGuide(id ?? 0);
 
- 
   if (isLoading) {
     return <CircularProgress />;
   }
 
-  if(isError) {
+  if (isError) {
     return <Alert severity="error">{error.message}</Alert>;
   }
 
-  if(isSuccess && "data" in response) {
+  if (isSuccess && "data" in response) {
     guide = response.data;
-    if(!guide.title) {
+    if (!guide.title) {
       return <Typography>Guide not found</Typography>;
     }
     return (
       <PageContainer title={guide.title}>
         <DashboardCard title={guide.title}>
           <div>
-          <Typography variant="body2" sx={{ mb: 2 }}>
+            <Typography variant="body2" sx={{ mb: 2 }}>
               Created by {guide.creator?.username} on{" "}
               {new Date(guide.createdAt).toLocaleDateString()}
             </Typography>
             <div dangerouslySetInnerHTML={{ __html: guide.contentHTML }} />
-            
           </div>
         </DashboardCard>
-        <Divider sx={{ mt: 2, mb: 2, border: 'none' }} />
-        <ReviewList guideId={guide.id} reviews={guide.reviews ?? []}/>        
+        <Divider sx={{ mt: 2, mb: 2, border: "none" }} />
+        <ReviewList guideId={guide.id} reviews={guide.reviews ?? []} />
       </PageContainer>
     );
   }
diff --git a/src/app/(admin)/new_dashboard/guides/page.tsx b/src/app/(admin)/new_dashboard/guides/page.tsx
index bc3c22e..4d03b6c 100644
--- a/src/app/(admin)/new_dashboard/guides/page.tsx
+++ b/src/app/(admin)/new_dashboard/guides/page.tsx
@@ -4,11 +4,18 @@ import PageContainer from "@/components/PageContainer";
 import { Alert, Box, CircularProgress, Typography } from "@mui/material";
 import GuideList from "./components/GuideList";
 import SearchBar from "./components/SearchBar";
-import { useSearchGuides, useAllGuides } from "./hooks";
+import { useSearchGuides } from "./hooks";
+import { useAllGuides } from "@/hooks";
 import { Guide } from "@/api/types/Guide";
 
 const Page = () => {
-  const { data: guideItems, isLoading, error, isError, isSuccess } = useAllGuides();
+  const {
+    data: guideItems,
+    isLoading,
+    error,
+    isError,
+    isSuccess,
+  } = useAllGuides();
 
   let guides: Guide[] = [];
 
@@ -16,9 +23,8 @@ const Page = () => {
     guides = guideItems.data;
   }
 
-  const { searchQuery, filteredGuides, handleSearchChange } = useSearchGuides(
-    guides
-  );
+  const { searchQuery, filteredGuides, handleSearchChange } =
+    useSearchGuides(guides);
 
   return (
     <PageContainer title="Guides">

From 9856abf6d319ef3833489e80418e3008bec9b2eb Mon Sep 17 00:00:00 2001
From: Ori <ori100no@gmail.com>
Date: Sat, 24 Aug 2024 20:49:57 +0300
Subject: [PATCH 119/242] improved styling of the application

---
 .../guides/components/GuideCard/index.tsx     |  30 ++--
 .../new_dashboard/shared/Card/index.tsx       |   2 +-
 src/util/theme.ts                             | 148 +++++++++---------
 3 files changed, 90 insertions(+), 90 deletions(-)

diff --git a/src/app/(admin)/new_dashboard/guides/components/GuideCard/index.tsx b/src/app/(admin)/new_dashboard/guides/components/GuideCard/index.tsx
index 02d3648..c51cac5 100644
--- a/src/app/(admin)/new_dashboard/guides/components/GuideCard/index.tsx
+++ b/src/app/(admin)/new_dashboard/guides/components/GuideCard/index.tsx
@@ -14,21 +14,21 @@ const GuideCard = ({ guide }: Props) => {
   return (
     <Card variant="outlined">
       <CardContent>
-        <Box display="flex" alignItems="center" mb={1}>
-          <SupportIcon color="primary" sx={{ marginRight: theme.spacing(1) }} />
-          <Typography variant="h6">{guide.title}</Typography>
-        </Box>
-        <Typography variant="body2" color="textSecondary" mb={2}>
-          Created by : {guide.creator?.username}
-        </Typography>
-        <Rating
-                value={avgRating}
-                precision={0.5}
-                readOnly
-              />
-        <Typography variant="body2" color="textSecondary" mb={2}>
-          Created at: {new Date(guide.createdAt).toLocaleDateString()}
-        </Typography>
+        <Box display="grid" alignItems="center" mb={1}>
+          <Box display="flex" alignItems="center">
+            <SupportIcon color="primary" sx={{ marginRight: theme.spacing(1) }} />
+            <Typography variant="h6">{guide.title}</Typography>
+          </Box>
+          <Typography variant="body2" color="textSecondary" mb={2}>
+            Created at: {new Date(guide.createdAt).toLocaleDateString()}
+          </Typography>
+          </Box>
+          <Rating
+                  value={avgRating}
+                  precision={0.5}
+                  readOnly
+                />
+
       </CardContent>
     </Card>
   );
diff --git a/src/app/(admin)/new_dashboard/shared/Card/index.tsx b/src/app/(admin)/new_dashboard/shared/Card/index.tsx
index 11701c2..79fe3ce 100644
--- a/src/app/(admin)/new_dashboard/shared/Card/index.tsx
+++ b/src/app/(admin)/new_dashboard/shared/Card/index.tsx
@@ -55,7 +55,7 @@ const DashboardCard = ({
               mb={3}
             >
               <Box>
-                {title ? <Typography variant="h5">{title}</Typography> : ""}
+                {title ? <Typography variant="h1" color={"#7091e6"}>{title}</Typography> : ""}
 
                 {subtitle ? (
                   <Typography variant="subtitle2" color="textSecondary">
diff --git a/src/util/theme.ts b/src/util/theme.ts
index 55c7c5d..05c2107 100644
--- a/src/util/theme.ts
+++ b/src/util/theme.ts
@@ -2,16 +2,16 @@ import {
   createTheme,
   PaletteColorOptions,
   SimplePaletteColorOptions,
-} from "@mui/material/styles";
-import { Plus_Jakarta_Sans } from "next/font/google";
+} from '@mui/material/styles';
+import { Plus_Jakarta_Sans } from 'next/font/google';
 
 export const plus = Plus_Jakarta_Sans({
-  weight: ["300", "400", "500", "600", "700"],
-  subsets: ["latin"],
-  display: "swap",
-  fallback: ["Helvetica", "Arial", "sans-serif"],
+  weight: ['300', '400', '500', '600', '700'],
+  subsets: ['latin'],
+  display: 'swap',
+  fallback: ['Helvetica', 'Arial', 'sans-serif'],
 });
-declare module "@mui/material/styles" {
+declare module '@mui/material/styles' {
   interface Palette {
     note: SimplePaletteColorOptions;
   }
@@ -21,150 +21,150 @@ declare module "@mui/material/styles" {
 }
 
 const baselightTheme = createTheme({
-  direction: "ltr",
+  direction: 'ltr',
   palette: {
     note: {
-      main: "rgba(254, 237, 175)",
+      main: 'rgba(254, 237, 175)',
     },
     primary: {
-      main: "#5D87FF",
-      light: "#ECF2FF",
-      dark: "#4570EA",
+      main: '#7091e6',
+      light: '#ede8f5',
+      dark: '#3d52a0',
     },
     secondary: {
-      main: "#49BEFF",
-      light: "#E8F7FF",
-      dark: "#23afdb",
+      main: '#49BEFF',
+      light: '#E8F7FF',
+      dark: '#456e96',
     },
     success: {
-      main: "#13DEB9",
-      light: "#E6FFFA",
-      dark: "#02b3a9",
-      contrastText: "#ffffff",
+      main: '#13DEB9',
+      light: '#E6FFFA',
+      dark: '#02b3a9',
+      contrastText: '#ffffff',
     },
     info: {
-      main: "#539BFF",
-      light: "#EBF3FE",
-      dark: "#1682d4",
-      contrastText: "#ffffff",
+      main: '#539BFF',
+      light: '#EBF3FE',
+      dark: '#1682d4',
+      contrastText: '#ffffff',
     },
     error: {
-      main: "#FA896B",
-      light: "#FDEDE8",
-      dark: "#f3704d",
-      contrastText: "#ffffff",
+      main: '#FA896B',
+      light: '#FDEDE8',
+      dark: '#f3704d',
+      contrastText: '#ffffff',
     },
     warning: {
-      main: "#FFAE1F",
-      light: "#FEF5E5",
-      dark: "#ae8e59",
-      contrastText: "#ffffff",
+      main: '#FFAE1F',
+      light: '#FEF5E5',
+      dark: '#ae8e59',
+      contrastText: '#ffffff',
     },
 
     grey: {
-      100: "#F2F6FA",
-      200: "#EAEFF4",
-      300: "#DFE5EF",
-      400: "#7C8FAC",
-      500: "#5A6A85",
-      600: "#2A3547",
+      100: '#F2F6FA',
+      200: '#EAEFF4',
+      300: '#DFE5EF',
+      400: '#7C8FAC',
+      500: '#5A6A85',
+      600: '#2A3547',
     },
     text: {
-      primary: "#2A3547",
-      secondary: "#5A6A85",
+      primary: '#2A3547',
+      secondary: '#5A6A85',
     },
     action: {
-      disabledBackground: "rgba(73,82,88,0.12)",
+      disabledBackground: 'rgba(73,82,88,0.12)',
       hoverOpacity: 0.02,
-      hover: "#f6f9fc",
+      hover: '#f6f9fc',
     },
-    divider: "#e5eaef",
+    divider: '#e5eaef',
   },
   typography: {
     fontFamily: plus.style.fontFamily,
     h1: {
       fontWeight: 600,
-      fontSize: "2.25rem",
-      lineHeight: "2.75rem",
+      fontSize: '2.25rem',
+      lineHeight: '2.75rem',
       fontFamily: plus.style.fontFamily,
     },
     h2: {
       fontWeight: 600,
-      fontSize: "1.875rem",
-      lineHeight: "2.25rem",
+      fontSize: '1.875rem',
+      lineHeight: '2.25rem',
       fontFamily: plus.style.fontFamily,
     },
     h3: {
       fontWeight: 600,
-      fontSize: "1.5rem",
-      lineHeight: "1.75rem",
+      fontSize: '1.5rem',
+      lineHeight: '1.75rem',
       fontFamily: plus.style.fontFamily,
     },
     h4: {
       fontWeight: 600,
-      fontSize: "1.3125rem",
-      lineHeight: "1.6rem",
+      fontSize: '1.3125rem',
+      lineHeight: '1.6rem',
     },
     h5: {
       fontWeight: 600,
-      fontSize: "1.125rem",
-      lineHeight: "1.6rem",
+      fontSize: '1.125rem',
+      lineHeight: '1.6rem',
     },
     h6: {
       fontWeight: 600,
-      fontSize: "1rem",
-      lineHeight: "1.2rem",
+      fontSize: '1rem',
+      lineHeight: '1.2rem',
     },
     button: {
-      textTransform: "capitalize",
+      textTransform: 'capitalize',
       fontWeight: 400,
     },
     body1: {
-      fontSize: "0.875rem",
+      fontSize: '0.875rem',
       fontWeight: 400,
-      lineHeight: "1.334rem",
+      lineHeight: '1.334rem',
     },
     body2: {
-      fontSize: "0.75rem",
-      letterSpacing: "0rem",
+      fontSize: '0.75rem',
+      letterSpacing: '0rem',
       fontWeight: 400,
-      lineHeight: "1rem",
+      lineHeight: '1rem',
     },
     subtitle1: {
-      fontSize: "0.875rem",
+      fontSize: '0.875rem',
       fontWeight: 400,
     },
     subtitle2: {
-      fontSize: "0.875rem",
+      fontSize: '0.875rem',
       fontWeight: 400,
     },
   },
   components: {
     MuiCssBaseline: {
       styleOverrides: {
-        "*::-webkit-scrollbar": {
-          width: "8px",
+        '*::-webkit-scrollbar': {
+          width: '8px',
         },
-        "*::-webkit-scrollbar-track": {
-          backgroundColor: "transparent",
+        '*::-webkit-scrollbar-track': {
+          backgroundColor: '#EEF0E5',
         },
-        "*::-webkit-scrollbar-thumb": {
-          backgroundColor: "#C4C4C4",
-          borderRadius: "8px",
+        '*::-webkit-scrollbar-thumb': {
+          backgroundColor: '#C4C4C4',
+          borderRadius: '8px',
         },
-        "*::-webkit-scrollbar-thumb:hover": {
-          backgroundColor: "#A0A0A0",
+        '*::-webkit-scrollbar-thumb:hover': {
+          backgroundColor: '#A0A0A0',
         },
-        ".MuiPaper-elevation9, .MuiPopover-root .MuiPaper-elevation": {
+        '.MuiPaper-elevation9, .MuiPopover-root .MuiPaper-elevation': {
           boxShadow:
-            "rgb(145 158 171 / 30%) 0px 0px 2px 0px, rgb(145 158 171 / 12%) 0px 12px 24px -4px !important",
+            'rgb(145 158 171 / 30%) 0px 0px 2px 0px, rgb(145 158 171 / 12%) 0px 12px 24px -4px !important',
         },
       },
     },
     MuiCard: {
       styleOverrides: {
         root: {
-          borderRadius: "7px",
+          borderRadius: '7px',
         },
       },
     },

From 1d2c25e82d418300480fcb7a24cc406ebf66ae11 Mon Sep 17 00:00:00 2001
From: Ori <ori100no@gmail.com>
Date: Sat, 24 Aug 2024 20:50:25 +0300
Subject: [PATCH 120/242] put add review box into a different component

---
 .../new_dashboard/guides/[id]/page.tsx        | 11 ++---
 .../index.tsx => add-review/page.tsx}         | 28 ++++++++---
 .../components/ActionAddReview/index.tsx      | 24 ++++++++++
 .../guides/components/ReviewList/index.tsx    | 46 +++++++++++--------
 4 files changed, 77 insertions(+), 32 deletions(-)
 rename src/app/(admin)/new_dashboard/guides/{components/AddReviewBox/index.tsx => add-review/page.tsx} (69%)
 create mode 100644 src/app/(admin)/new_dashboard/guides/components/ActionAddReview/index.tsx

diff --git a/src/app/(admin)/new_dashboard/guides/[id]/page.tsx b/src/app/(admin)/new_dashboard/guides/[id]/page.tsx
index 4c49168..3927895 100644
--- a/src/app/(admin)/new_dashboard/guides/[id]/page.tsx
+++ b/src/app/(admin)/new_dashboard/guides/[id]/page.tsx
@@ -6,11 +6,10 @@ import DashboardCard from "../../shared/Card";
 import { Typography, CircularProgress, Alert, Box, Divider } from "@mui/material";
 import { Guide } from "@/api/types/Guide";
 import ReviewList from "../components/ReviewList";
-import AddReviewBox from "../components/AddReviewBox";
 
 const GuidePage = () => {
   const params = useParams();
-
+  
   const id = params?.id ? Number(params.id) : null;
   
   
@@ -29,19 +28,15 @@ const GuidePage = () => {
 
   if(isSuccess && "data" in response) {
     guide = response.data;
+    const creatorAndDateString = `Created by ${guide.creator?.username} on ${new Date(guide.createdAt).toLocaleDateString()}`
     if(!guide.title) {
       return <Typography>Guide not found</Typography>;
     }
     return (
       <PageContainer title={guide.title}>
-        <DashboardCard title={guide.title}>
+        <DashboardCard title={guide.title} subtitle={creatorAndDateString}>
           <div>
-          <Typography variant="body2" sx={{ mb: 2 }}>
-              Created by {guide.creator?.username} on{" "}
-              {new Date(guide.createdAt).toLocaleDateString()}
-            </Typography>
             <div dangerouslySetInnerHTML={{ __html: guide.contentHTML }} />
-            
           </div>
         </DashboardCard>
         <Divider sx={{ mt: 2, mb: 2, border: 'none' }} />
diff --git a/src/app/(admin)/new_dashboard/guides/components/AddReviewBox/index.tsx b/src/app/(admin)/new_dashboard/guides/add-review/page.tsx
similarity index 69%
rename from src/app/(admin)/new_dashboard/guides/components/AddReviewBox/index.tsx
rename to src/app/(admin)/new_dashboard/guides/add-review/page.tsx
index 1bb59d5..39ec591 100644
--- a/src/app/(admin)/new_dashboard/guides/components/AddReviewBox/index.tsx
+++ b/src/app/(admin)/new_dashboard/guides/add-review/page.tsx
@@ -1,11 +1,17 @@
+"use client";
 import React from 'react';
 import { Box, Typography, Rating, TextField, Button } from '@mui/material';
-import useAddReviewForm from '../../hooks/useAddReviewForm';
-interface AddReviewBoxProps {
-  guideId: number;
-}
+import useAddReviewForm from '../hooks/useAddReviewForm';
+import { useRouter , useSearchParams} from 'next/navigation';
+import ArrowBackIcon from '@mui/icons-material/ArrowBack';
+
+
+const AddReviewBox: React.FC = () => {
+
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const guideId = Number(searchParams?.get('guideId') ?? 0);
 
-const AddReviewBox: React.FC<AddReviewBoxProps> = ({ guideId }) => {
   const {
     comment,
     setComment,
@@ -19,8 +25,18 @@ const AddReviewBox: React.FC<AddReviewBoxProps> = ({ guideId }) => {
     handleSubmit,
   } = useAddReviewForm(guideId);
 
+  const handleGoBack = () => {
+    router.back();
+  };
+
   return (
-    <Box>
+    <Box display="flex" flexDirection="column" alignItems="flex-start" sx={{ width: '100%' }}>
+
+      <ArrowBackIcon 
+        onClick={handleGoBack}
+        sx={{mb:2 , cursor: 'pointer', fontSize: 30}}        
+        />
+      
       <Typography variant="h6" >Add Your Review:</Typography>
       <Box mb={2} mt={2}>
         <Rating
diff --git a/src/app/(admin)/new_dashboard/guides/components/ActionAddReview/index.tsx b/src/app/(admin)/new_dashboard/guides/components/ActionAddReview/index.tsx
new file mode 100644
index 0000000..958a528
--- /dev/null
+++ b/src/app/(admin)/new_dashboard/guides/components/ActionAddReview/index.tsx
@@ -0,0 +1,24 @@
+"use client";
+import React from 'react';
+import Link from 'next/link';
+import AddCircleOutlineIcon from '@mui/icons-material/AddCircleOutline';
+import { Box, Typography } from '@mui/material';
+
+interface ActionAddReviewProps {
+  guideId: number;
+}
+
+const ActionAddReview: React.FC<ActionAddReviewProps> = ({ guideId }) => {
+  return (
+    <Link href={{ pathname: '/new_dashboard/guides/add-review', query: { guideId } }} passHref>
+      <Box display="flex" alignItems="center" sx={{ cursor: 'pointer' }}>
+        <AddCircleOutlineIcon /> 
+        <Typography>
+          Add Review
+        </Typography>
+      </Box>
+    </Link>
+  );
+};
+
+export default ActionAddReview;
diff --git a/src/app/(admin)/new_dashboard/guides/components/ReviewList/index.tsx b/src/app/(admin)/new_dashboard/guides/components/ReviewList/index.tsx
index 80bac74..56374f9 100644
--- a/src/app/(admin)/new_dashboard/guides/components/ReviewList/index.tsx
+++ b/src/app/(admin)/new_dashboard/guides/components/ReviewList/index.tsx
@@ -6,14 +6,12 @@ import {
   Box,
   Rating,
   Divider,
-  CircularProgress,
-  Alert,
 } from "@mui/material";
 import { Review } from "@/api/types/Review";
 import PageContainer from "@/components/PageContainer";
 import DashboardCard from "../../../shared/Card";
-import AddReviewBox from "../AddReviewBox";
-import { useReviews } from "../../hooks";
+import AddReviewBox from "../../add-review/page";
+import ActionAddReview from "../ActionAddReview";
 
 interface ReviewListProps {
   reviews: Review[];
@@ -24,11 +22,14 @@ const ReviewList: React.FC<ReviewListProps> = ({ reviews, guideId }) => {
   if (!reviews.length) {
     return (
       <PageContainer title="Reviews">
-        <DashboardCard title="Reviews">
+        <DashboardCard 
+          title="Reviews" 
+          action={<ActionAddReview guideId={guideId} />}
+        >
           <Box mt={2}>
             <Typography>No reviews available</Typography>
             <Divider sx={{ mt: 2, mb: 2 }} />
-            <AddReviewBox guideId={guideId} />
+            <AddReviewBox />
           </Box>
         </DashboardCard>
       </PageContainer>
@@ -37,25 +38,34 @@ const ReviewList: React.FC<ReviewListProps> = ({ reviews, guideId }) => {
 
   return (
     <PageContainer title="Reviews">
-      <DashboardCard title="Reviews">
+      <DashboardCard 
+        title="Reviews" 
+        action={<ActionAddReview guideId={guideId} />}
+      >
         <Box mt={2}>
           {reviews.map((review, index) => (
-            <Box key={review.id} mb={2}>
-              <Typography>
-                {review.user?.username} -{" "}
-                {new Date(review.createdAt).toLocaleDateString()}
-              </Typography>
+            <Box
+              display="grid"
+              key={review.id}
+              mb={1}
+              sx={{
+                backgroundColor: index % 2 === 0 ? "#f8f8f8" : "#7091e6",
+                padding: 2,
+                borderRadius: 2,
+              }}
+            >
+              <Box display="flex" justifyContent="space-between" mb={2}>
+                <Rating value={review.rating} readOnly />
+                <Typography variant="body2">
+                  {review.user?.username} —{" "}
+                  {new Date(review.createdAt).toLocaleDateString()}
+                </Typography>
+              </Box>
               <Typography variant="body1" mb={0.5}>
                 {review.comment}
               </Typography>
-              <Rating value={review.rating} readOnly />
-              {index < reviews.length - 1 && (
-                <Divider sx={{ mt: 2, mb: 2 }} />
-              )}
             </Box>
           ))}
-          <Divider sx={{ mt: 2, mb: 2 }} />
-          <AddReviewBox guideId={guideId} />
         </Box>
       </DashboardCard>
     </PageContainer>

From 65128b3d3b498e7a988563221f043eaf6bf5cf4e Mon Sep 17 00:00:00 2001
From: Ori <ori100no@gmail.com>
Date: Sun, 25 Aug 2024 11:46:35 +0300
Subject: [PATCH 121/242] added num of reviews

---
 .../guides/components/GuideCard/index.tsx        | 16 ++++++++++------
 .../guides/components/ReviewList/index.tsx       |  1 -
 2 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/src/app/(admin)/new_dashboard/guides/components/GuideCard/index.tsx b/src/app/(admin)/new_dashboard/guides/components/GuideCard/index.tsx
index c51cac5..d5fcc39 100644
--- a/src/app/(admin)/new_dashboard/guides/components/GuideCard/index.tsx
+++ b/src/app/(admin)/new_dashboard/guides/components/GuideCard/index.tsx
@@ -23,12 +23,16 @@ const GuideCard = ({ guide }: Props) => {
             Created at: {new Date(guide.createdAt).toLocaleDateString()}
           </Typography>
           </Box>
-          <Rating
-                  value={avgRating}
-                  precision={0.5}
-                  readOnly
-                />
-
+          <Box display="flex" alignItems={"center"}>
+            <Rating
+                    value={avgRating}
+                    precision={0.5}
+                    readOnly
+            />
+            <Typography variant="body2" mx={1}>
+              ({guide.reviews?.length})
+            </Typography>   
+          </Box>
       </CardContent>
     </Card>
   );
diff --git a/src/app/(admin)/new_dashboard/guides/components/ReviewList/index.tsx b/src/app/(admin)/new_dashboard/guides/components/ReviewList/index.tsx
index 56374f9..a7762a5 100644
--- a/src/app/(admin)/new_dashboard/guides/components/ReviewList/index.tsx
+++ b/src/app/(admin)/new_dashboard/guides/components/ReviewList/index.tsx
@@ -49,7 +49,6 @@ const ReviewList: React.FC<ReviewListProps> = ({ reviews, guideId }) => {
               key={review.id}
               mb={1}
               sx={{
-                backgroundColor: index % 2 === 0 ? "#f8f8f8" : "#7091e6",
                 padding: 2,
                 borderRadius: 2,
               }}

From b25cd0ad0c4858315971c0191edf1ef804ac5206 Mon Sep 17 00:00:00 2001
From: Ori <ori100no@gmail.com>
Date: Sun, 25 Aug 2024 11:49:34 +0300
Subject: [PATCH 122/242] linted component

---
 .../guides/components/GuideCard/index.tsx     | 23 ++++++++-----------
 1 file changed, 10 insertions(+), 13 deletions(-)

diff --git a/src/app/(admin)/new_dashboard/guides/components/GuideCard/index.tsx b/src/app/(admin)/new_dashboard/guides/components/GuideCard/index.tsx
index d5fcc39..e526e02 100644
--- a/src/app/(admin)/new_dashboard/guides/components/GuideCard/index.tsx
+++ b/src/app/(admin)/new_dashboard/guides/components/GuideCard/index.tsx
@@ -9,8 +9,9 @@ type Props = {
 
 const GuideCard = ({ guide }: Props) => {
   const theme = useTheme();
-  const totalStars = guide.reviews?.reduce((acc, review) => acc + review.rating, 0);
-  const avgRating = (totalStars ?? 0) / (guide.reviews?.length ?? 1);
+  const totalStars = guide.reviews?.reduce((acc, review) => acc + review.rating, 0) ?? 0;
+  const avgRating = totalStars / (guide.reviews?.length ?? 1);
+
   return (
     <Card variant="outlined">
       <CardContent>
@@ -22,17 +23,13 @@ const GuideCard = ({ guide }: Props) => {
           <Typography variant="body2" color="textSecondary" mb={2}>
             Created at: {new Date(guide.createdAt).toLocaleDateString()}
           </Typography>
-          </Box>
-          <Box display="flex" alignItems={"center"}>
-            <Rating
-                    value={avgRating}
-                    precision={0.5}
-                    readOnly
-            />
-            <Typography variant="body2" mx={1}>
-              ({guide.reviews?.length})
-            </Typography>   
-          </Box>
+        </Box>
+        <Box display="flex" alignItems="center">
+          <Rating value={avgRating} precision={0.5} readOnly />
+          <Typography variant="body2" mx={1}>
+            ({guide.reviews?.length ?? 0})
+          </Typography>
+        </Box>
       </CardContent>
     </Card>
   );

From f1a96a8f6ff00926e09c4efbc203f20d87d3f637 Mon Sep 17 00:00:00 2001
From: Ori <ori100no@gmail.com>
Date: Sun, 25 Aug 2024 13:17:41 +0300
Subject: [PATCH 123/242] changed the color of the stars and aligned the ui

---
 .../new_dashboard/guides/add-review/page.tsx  |  1 +
 .../guides/components/GuideCard/index.tsx     |  6 ++-
 .../guides/components/ReviewCard/index.tsx    | 50 +++++++++++++++++++
 .../guides/components/ReviewList/index.tsx    | 23 ++-------
 4 files changed, 59 insertions(+), 21 deletions(-)
 create mode 100644 src/app/(admin)/new_dashboard/guides/components/ReviewCard/index.tsx

diff --git a/src/app/(admin)/new_dashboard/guides/add-review/page.tsx b/src/app/(admin)/new_dashboard/guides/add-review/page.tsx
index 39ec591..b2a9983 100644
--- a/src/app/(admin)/new_dashboard/guides/add-review/page.tsx
+++ b/src/app/(admin)/new_dashboard/guides/add-review/page.tsx
@@ -43,6 +43,7 @@ const AddReviewBox: React.FC = () => {
           name="stars"
           value={stars}
           onChange={(event, newValue) => setStars(newValue ?? 1)}
+          sx={{color: '#3d52a0'}}
         />
       </Box>
       <TextField
diff --git a/src/app/(admin)/new_dashboard/guides/components/GuideCard/index.tsx b/src/app/(admin)/new_dashboard/guides/components/GuideCard/index.tsx
index e526e02..534dc5f 100644
--- a/src/app/(admin)/new_dashboard/guides/components/GuideCard/index.tsx
+++ b/src/app/(admin)/new_dashboard/guides/components/GuideCard/index.tsx
@@ -25,7 +25,11 @@ const GuideCard = ({ guide }: Props) => {
           </Typography>
         </Box>
         <Box display="flex" alignItems="center">
-          <Rating value={avgRating} precision={0.5} readOnly />
+          <Rating
+            value={avgRating}
+            precision={0.5}
+            readOnly sx={{ color: '#3d52a0' }}
+          />
           <Typography variant="body2" mx={1}>
             ({guide.reviews?.length ?? 0})
           </Typography>
diff --git a/src/app/(admin)/new_dashboard/guides/components/ReviewCard/index.tsx b/src/app/(admin)/new_dashboard/guides/components/ReviewCard/index.tsx
new file mode 100644
index 0000000..e88353e
--- /dev/null
+++ b/src/app/(admin)/new_dashboard/guides/components/ReviewCard/index.tsx
@@ -0,0 +1,50 @@
+import { Review } from '@/api/types/Review';
+import {
+  Typography,
+  Box,
+  Rating,
+  Divider,
+} from "@mui/material";
+import React from 'react';
+
+interface ReviewCardProps {
+  review: Review;
+}
+
+const ReviewCard: React.FC<ReviewCardProps> = ({ review }) => {
+  return (
+    <>
+      <Box
+        display="flex"
+        flexDirection="row"
+        mb={3}
+        sx={{
+          padding: 2,
+          borderRadius: 2,
+        }}
+      >
+        <Box display="grid" mr={10}>
+          <Rating 
+            value={review.rating}
+            readOnly
+            precision={0.5}
+            sx={{ fontSize: '1.25rem', color: '#3d52a0' }}
+            />
+          <Typography variant="body2" color="textSecondary" >
+            by {review.user?.username}
+          </Typography>
+          <Typography variant="body2" color="textSecondary" mb={1}>
+              {new Date(review.createdAt).toLocaleDateString()}
+           </Typography>
+        </Box>
+        
+        <Typography variant="body1" mb={1} >
+          {review.comment}
+        </Typography>
+      </Box>
+      <Divider />
+    </>
+  );
+};
+
+export default ReviewCard;
diff --git a/src/app/(admin)/new_dashboard/guides/components/ReviewList/index.tsx b/src/app/(admin)/new_dashboard/guides/components/ReviewList/index.tsx
index a7762a5..492f0b7 100644
--- a/src/app/(admin)/new_dashboard/guides/components/ReviewList/index.tsx
+++ b/src/app/(admin)/new_dashboard/guides/components/ReviewList/index.tsx
@@ -12,6 +12,7 @@ import PageContainer from "@/components/PageContainer";
 import DashboardCard from "../../../shared/Card";
 import AddReviewBox from "../../add-review/page";
 import ActionAddReview from "../ActionAddReview";
+import ReviewCard from "../ReviewCard";
 
 interface ReviewListProps {
   reviews: Review[];
@@ -43,27 +44,9 @@ const ReviewList: React.FC<ReviewListProps> = ({ reviews, guideId }) => {
         action={<ActionAddReview guideId={guideId} />}
       >
         <Box mt={2}>
+          <Divider sx={{ mt: 2, mb: 2 }} />
           {reviews.map((review, index) => (
-            <Box
-              display="grid"
-              key={review.id}
-              mb={1}
-              sx={{
-                padding: 2,
-                borderRadius: 2,
-              }}
-            >
-              <Box display="flex" justifyContent="space-between" mb={2}>
-                <Rating value={review.rating} readOnly />
-                <Typography variant="body2">
-                  {review.user?.username} —{" "}
-                  {new Date(review.createdAt).toLocaleDateString()}
-                </Typography>
-              </Box>
-              <Typography variant="body1" mb={0.5}>
-                {review.comment}
-              </Typography>
-            </Box>
+            <ReviewCard key={index} review={review} />
           ))}
         </Box>
       </DashboardCard>

From fbb14883ca642ceac46a8af2f28fda5ef28b6708 Mon Sep 17 00:00:00 2001
From: Ori <ori100no@gmail.com>
Date: Sun, 25 Aug 2024 14:32:17 +0300
Subject: [PATCH 124/242] changed to previous colors

---
 .../new_dashboard/shared/Card/index.tsx       |   2 +-
 src/util/theme.ts                             | 150 +++++++++---------
 2 files changed, 76 insertions(+), 76 deletions(-)

diff --git a/src/app/(admin)/new_dashboard/shared/Card/index.tsx b/src/app/(admin)/new_dashboard/shared/Card/index.tsx
index 79fe3ce..e7c120d 100644
--- a/src/app/(admin)/new_dashboard/shared/Card/index.tsx
+++ b/src/app/(admin)/new_dashboard/shared/Card/index.tsx
@@ -55,7 +55,7 @@ const DashboardCard = ({
               mb={3}
             >
               <Box>
-                {title ? <Typography variant="h1" color={"#7091e6"}>{title}</Typography> : ""}
+                {title ? <Typography variant="h1">{title}</Typography> : ""}
 
                 {subtitle ? (
                   <Typography variant="subtitle2" color="textSecondary">
diff --git a/src/util/theme.ts b/src/util/theme.ts
index 05c2107..5a7a6ca 100644
--- a/src/util/theme.ts
+++ b/src/util/theme.ts
@@ -2,16 +2,16 @@ import {
   createTheme,
   PaletteColorOptions,
   SimplePaletteColorOptions,
-} from '@mui/material/styles';
-import { Plus_Jakarta_Sans } from 'next/font/google';
+} from "@mui/material/styles";
+import { Plus_Jakarta_Sans } from "next/font/google";
 
 export const plus = Plus_Jakarta_Sans({
-  weight: ['300', '400', '500', '600', '700'],
-  subsets: ['latin'],
-  display: 'swap',
-  fallback: ['Helvetica', 'Arial', 'sans-serif'],
+  weight: ["300", "400", "500", "600", "700"],
+  subsets: ["latin"],
+  display: "swap",
+  fallback: ["Helvetica", "Arial", "sans-serif"],
 });
-declare module '@mui/material/styles' {
+declare module "@mui/material/styles" {
   interface Palette {
     note: SimplePaletteColorOptions;
   }
@@ -21,154 +21,154 @@ declare module '@mui/material/styles' {
 }
 
 const baselightTheme = createTheme({
-  direction: 'ltr',
+  direction: "ltr",
   palette: {
     note: {
-      main: 'rgba(254, 237, 175)',
+      main: "rgba(254, 237, 175)",
     },
     primary: {
-      main: '#7091e6',
-      light: '#ede8f5',
-      dark: '#3d52a0',
+      main: "#5D87FF",
+      light: "#ECF2FF",
+      dark: "#4570EA",
     },
     secondary: {
-      main: '#49BEFF',
-      light: '#E8F7FF',
-      dark: '#456e96',
+      main: "#49BEFF",
+      light: "#E8F7FF",
+      dark: "#23afdb",
     },
     success: {
-      main: '#13DEB9',
-      light: '#E6FFFA',
-      dark: '#02b3a9',
-      contrastText: '#ffffff',
+      main: "#13DEB9",
+      light: "#E6FFFA",
+      dark: "#02b3a9",
+      contrastText: "#ffffff",
     },
     info: {
-      main: '#539BFF',
-      light: '#EBF3FE',
-      dark: '#1682d4',
-      contrastText: '#ffffff',
+      main: "#539BFF",
+      light: "#EBF3FE",
+      dark: "#1682d4",
+      contrastText: "#ffffff",
     },
     error: {
-      main: '#FA896B',
-      light: '#FDEDE8',
-      dark: '#f3704d',
-      contrastText: '#ffffff',
+      main: "#FA896B",
+      light: "#FDEDE8",
+      dark: "#f3704d",
+      contrastText: "#ffffff",
     },
     warning: {
-      main: '#FFAE1F',
-      light: '#FEF5E5',
-      dark: '#ae8e59',
-      contrastText: '#ffffff',
+      main: "#FFAE1F",
+      light: "#FEF5E5",
+      dark: "#ae8e59",
+      contrastText: "#ffffff",
     },
 
     grey: {
-      100: '#F2F6FA',
-      200: '#EAEFF4',
-      300: '#DFE5EF',
-      400: '#7C8FAC',
-      500: '#5A6A85',
-      600: '#2A3547',
+      100: "#F2F6FA",
+      200: "#EAEFF4",
+      300: "#DFE5EF",
+      400: "#7C8FAC",
+      500: "#5A6A85",
+      600: "#2A3547",
     },
     text: {
-      primary: '#2A3547',
-      secondary: '#5A6A85',
+      primary: "#2A3547",
+      secondary: "#5A6A85",
     },
     action: {
-      disabledBackground: 'rgba(73,82,88,0.12)',
+      disabledBackground: "rgba(73,82,88,0.12)",
       hoverOpacity: 0.02,
-      hover: '#f6f9fc',
+      hover: "#f6f9fc",
     },
-    divider: '#e5eaef',
+    divider: "#e5eaef",
   },
   typography: {
     fontFamily: plus.style.fontFamily,
     h1: {
       fontWeight: 600,
-      fontSize: '2.25rem',
-      lineHeight: '2.75rem',
+      fontSize: "2.25rem",
+      lineHeight: "2.75rem",
       fontFamily: plus.style.fontFamily,
     },
     h2: {
       fontWeight: 600,
-      fontSize: '1.875rem',
-      lineHeight: '2.25rem',
+      fontSize: "1.875rem",
+      lineHeight: "2.25rem",
       fontFamily: plus.style.fontFamily,
     },
     h3: {
       fontWeight: 600,
-      fontSize: '1.5rem',
-      lineHeight: '1.75rem',
+      fontSize: "1.5rem",
+      lineHeight: "1.75rem",
       fontFamily: plus.style.fontFamily,
     },
     h4: {
       fontWeight: 600,
-      fontSize: '1.3125rem',
-      lineHeight: '1.6rem',
+      fontSize: "1.3125rem",
+      lineHeight: "1.6rem",
     },
     h5: {
       fontWeight: 600,
-      fontSize: '1.125rem',
-      lineHeight: '1.6rem',
+      fontSize: "1.125rem",
+      lineHeight: "1.6rem",
     },
     h6: {
       fontWeight: 600,
-      fontSize: '1rem',
-      lineHeight: '1.2rem',
+      fontSize: "1rem",
+      lineHeight: "1.2rem",
     },
     button: {
-      textTransform: 'capitalize',
+      textTransform: "capitalize",
       fontWeight: 400,
     },
     body1: {
-      fontSize: '0.875rem',
+      fontSize: "0.875rem",
       fontWeight: 400,
-      lineHeight: '1.334rem',
+      lineHeight: "1.334rem",
     },
     body2: {
-      fontSize: '0.75rem',
-      letterSpacing: '0rem',
+      fontSize: "0.75rem",
+      letterSpacing: "0rem",
       fontWeight: 400,
-      lineHeight: '1rem',
+      lineHeight: "1rem",
     },
     subtitle1: {
-      fontSize: '0.875rem',
+      fontSize: "0.875rem",
       fontWeight: 400,
     },
     subtitle2: {
-      fontSize: '0.875rem',
+      fontSize: "0.875rem",
       fontWeight: 400,
     },
   },
   components: {
     MuiCssBaseline: {
       styleOverrides: {
-        '*::-webkit-scrollbar': {
-          width: '8px',
+        "*::-webkit-scrollbar": {
+          width: "8px",
         },
-        '*::-webkit-scrollbar-track': {
-          backgroundColor: '#EEF0E5',
+        "*::-webkit-scrollbar-track": {
+          backgroundColor: "transparent",
         },
-        '*::-webkit-scrollbar-thumb': {
-          backgroundColor: '#C4C4C4',
-          borderRadius: '8px',
+        "*::-webkit-scrollbar-thumb": {
+          backgroundColor: "#C4C4C4",
+          borderRadius: "8px",
         },
-        '*::-webkit-scrollbar-thumb:hover': {
-          backgroundColor: '#A0A0A0',
+        "*::-webkit-scrollbar-thumb:hover": {
+          backgroundColor: "#A0A0A0",
         },
-        '.MuiPaper-elevation9, .MuiPopover-root .MuiPaper-elevation': {
+        ".MuiPaper-elevation9, .MuiPopover-root .MuiPaper-elevation": {
           boxShadow:
-            'rgb(145 158 171 / 30%) 0px 0px 2px 0px, rgb(145 158 171 / 12%) 0px 12px 24px -4px !important',
+            "rgb(145 158 171 / 30%) 0px 0px 2px 0px, rgb(145 158 171 / 12%) 0px 12px 24px -4px !important",
         },
       },
     },
     MuiCard: {
       styleOverrides: {
         root: {
-          borderRadius: '7px',
+          borderRadius: "7px",
         },
       },
     },
   },
 });
 
-export { baselightTheme };
+export { baselightTheme };
\ No newline at end of file

From 311ccb7d99e419189f03fb94f1bdc0890489a6f3 Mon Sep 17 00:00:00 2001
From: Ori <ori100no@gmail.com>
Date: Sun, 25 Aug 2024 14:57:12 +0300
Subject: [PATCH 125/242] added a show more button reviews list

---
 .../AddReviewBox/index.tsx}                   | 21 ++-----
 .../guides/components/ReviewCard/index.tsx    |  2 +-
 .../guides/components/ReviewList/index.tsx    | 55 +++++++++----------
 3 files changed, 34 insertions(+), 44 deletions(-)
 rename src/app/(admin)/new_dashboard/guides/{add-review/page.tsx => components/AddReviewBox/index.tsx} (79%)

diff --git a/src/app/(admin)/new_dashboard/guides/add-review/page.tsx b/src/app/(admin)/new_dashboard/guides/components/AddReviewBox/index.tsx
similarity index 79%
rename from src/app/(admin)/new_dashboard/guides/add-review/page.tsx
rename to src/app/(admin)/new_dashboard/guides/components/AddReviewBox/index.tsx
index b2a9983..904b02e 100644
--- a/src/app/(admin)/new_dashboard/guides/add-review/page.tsx
+++ b/src/app/(admin)/new_dashboard/guides/components/AddReviewBox/index.tsx
@@ -1,16 +1,16 @@
 "use client";
 import React from 'react';
 import { Box, Typography, Rating, TextField, Button } from '@mui/material';
-import useAddReviewForm from '../hooks/useAddReviewForm';
+import useAddReviewForm from '../../hooks/useAddReviewForm';
 import { useRouter , useSearchParams} from 'next/navigation';
 import ArrowBackIcon from '@mui/icons-material/ArrowBack';
 
+interface AddReviewBoxProps {
+  guideId: number;
+}
 
-const AddReviewBox: React.FC = () => {
+const AddReviewBox: React.FC<AddReviewBoxProps> = ({guideId}) => {
 
-  const router = useRouter();
-  const searchParams = useSearchParams();
-  const guideId = Number(searchParams?.get('guideId') ?? 0);
 
   const {
     comment,
@@ -25,18 +25,9 @@ const AddReviewBox: React.FC = () => {
     handleSubmit,
   } = useAddReviewForm(guideId);
 
-  const handleGoBack = () => {
-    router.back();
-  };
 
   return (
-    <Box display="flex" flexDirection="column" alignItems="flex-start" sx={{ width: '100%' }}>
-
-      <ArrowBackIcon 
-        onClick={handleGoBack}
-        sx={{mb:2 , cursor: 'pointer', fontSize: 30}}        
-        />
-      
+    <Box display="flex" flexDirection="column" alignItems="flex-start" sx={{ width: '100%' , mt:2}}>
       <Typography variant="h6" >Add Your Review:</Typography>
       <Box mb={2} mt={2}>
         <Rating
diff --git a/src/app/(admin)/new_dashboard/guides/components/ReviewCard/index.tsx b/src/app/(admin)/new_dashboard/guides/components/ReviewCard/index.tsx
index e88353e..aab33a1 100644
--- a/src/app/(admin)/new_dashboard/guides/components/ReviewCard/index.tsx
+++ b/src/app/(admin)/new_dashboard/guides/components/ReviewCard/index.tsx
@@ -42,7 +42,7 @@ const ReviewCard: React.FC<ReviewCardProps> = ({ review }) => {
           {review.comment}
         </Typography>
       </Box>
-      <Divider />
+     
     </>
   );
 };
diff --git a/src/app/(admin)/new_dashboard/guides/components/ReviewList/index.tsx b/src/app/(admin)/new_dashboard/guides/components/ReviewList/index.tsx
index 492f0b7..eb6f0dd 100644
--- a/src/app/(admin)/new_dashboard/guides/components/ReviewList/index.tsx
+++ b/src/app/(admin)/new_dashboard/guides/components/ReviewList/index.tsx
@@ -1,17 +1,16 @@
 "use client";
 
-import React from "react";
+import React, { useState } from "react";
 import {
   Typography,
   Box,
-  Rating,
+  Button,
   Divider,
 } from "@mui/material";
 import { Review } from "@/api/types/Review";
 import PageContainer from "@/components/PageContainer";
 import DashboardCard from "../../../shared/Card";
-import AddReviewBox from "../../add-review/page";
-import ActionAddReview from "../ActionAddReview";
+import AddReviewBox from "../AddReviewBox";
 import ReviewCard from "../ReviewCard";
 
 interface ReviewListProps {
@@ -20,34 +19,34 @@ interface ReviewListProps {
 }
 
 const ReviewList: React.FC<ReviewListProps> = ({ reviews, guideId }) => {
-  if (!reviews.length) {
-    return (
-      <PageContainer title="Reviews">
-        <DashboardCard 
-          title="Reviews" 
-          action={<ActionAddReview guideId={guideId} />}
-        >
-          <Box mt={2}>
-            <Typography>No reviews available</Typography>
-            <Divider sx={{ mt: 2, mb: 2 }} />
-            <AddReviewBox />
-          </Box>
-        </DashboardCard>
-      </PageContainer>
-    );
-  }
+  const [visibleCount, setVisibleCount] = useState(1); 
+
+  const showMoreReviews = () => {
+    setVisibleCount((prevCount) => Math.min(prevCount + 2, reviews.length)); 
+  };
+
+  let reviewsContext = !reviews.length ? (
+    <Typography>No reviews available</Typography>
+  ) : (
+    reviews.slice(0, visibleCount).map((review, index) => (
+      <ReviewCard key={index} review={review} />
+    ))
+  );
 
   return (
     <PageContainer title="Reviews">
-      <DashboardCard 
-        title="Reviews" 
-        action={<ActionAddReview guideId={guideId} />}
-      >
+      <DashboardCard title="Reviews">
         <Box mt={2}>
-          <Divider sx={{ mt: 2, mb: 2 }} />
-          {reviews.map((review, index) => (
-            <ReviewCard key={index} review={review} />
-          ))}
+          <Divider />
+          {reviewsContext}
+          {visibleCount < reviews.length && (
+            <Box display="flex" justifyContent="center" width="100%" mt={2}>
+              <Button onClick={showMoreReviews}>
+                Show More...
+              </Button>
+            </Box>
+          )}
+          <AddReviewBox guideId={guideId} />
         </Box>
       </DashboardCard>
     </PageContainer>

From b40d94b483bf4a280b87a8aa04786a4a8950cb23 Mon Sep 17 00:00:00 2001
From: Ori <ori100no@gmail.com>
Date: Sun, 25 Aug 2024 15:12:11 +0300
Subject: [PATCH 126/242] added a show more button for the reviews list

---
 .../guides/components/ReviewCard/index.tsx     |  2 +-
 .../guides/components/ReviewList/index.tsx     | 18 +++++++++++-------
 2 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/src/app/(admin)/new_dashboard/guides/components/ReviewCard/index.tsx b/src/app/(admin)/new_dashboard/guides/components/ReviewCard/index.tsx
index aab33a1..4d5d800 100644
--- a/src/app/(admin)/new_dashboard/guides/components/ReviewCard/index.tsx
+++ b/src/app/(admin)/new_dashboard/guides/components/ReviewCard/index.tsx
@@ -17,7 +17,7 @@ const ReviewCard: React.FC<ReviewCardProps> = ({ review }) => {
       <Box
         display="flex"
         flexDirection="row"
-        mb={3}
+        mb={4}
         sx={{
           padding: 2,
           borderRadius: 2,
diff --git a/src/app/(admin)/new_dashboard/guides/components/ReviewList/index.tsx b/src/app/(admin)/new_dashboard/guides/components/ReviewList/index.tsx
index eb6f0dd..4c7eb1f 100644
--- a/src/app/(admin)/new_dashboard/guides/components/ReviewList/index.tsx
+++ b/src/app/(admin)/new_dashboard/guides/components/ReviewList/index.tsx
@@ -25,6 +25,10 @@ const ReviewList: React.FC<ReviewListProps> = ({ reviews, guideId }) => {
     setVisibleCount((prevCount) => Math.min(prevCount + 2, reviews.length)); 
   };
 
+  const showLessReviews = () => {
+    setVisibleCount(1);
+  }
+
   let reviewsContext = !reviews.length ? (
     <Typography>No reviews available</Typography>
   ) : (
@@ -39,13 +43,13 @@ const ReviewList: React.FC<ReviewListProps> = ({ reviews, guideId }) => {
         <Box mt={2}>
           <Divider />
           {reviewsContext}
-          {visibleCount < reviews.length && (
-            <Box display="flex" justifyContent="center" width="100%" mt={2}>
-              <Button onClick={showMoreReviews}>
-                Show More...
-              </Button>
-            </Box>
-          )}
+          <Box display="flex" justifyContent="center" width="100%" mt={2}>
+            <Button onClick={()=>{
+              visibleCount === reviews.length ? showLessReviews() : showMoreReviews();
+            }}>
+              {visibleCount === reviews.length ? "Show Less" : "Show More"}
+            </Button>
+          </Box>
           <AddReviewBox guideId={guideId} />
         </Box>
       </DashboardCard>

From 4f7371b80b0d02ff6aad00a9b4b4aaed4ad756fb Mon Sep 17 00:00:00 2001
From: Ori <ori100no@gmail.com>
Date: Sun, 25 Aug 2024 15:19:50 +0300
Subject: [PATCH 127/242] sont need it anymore

---
 .../components/ActionAddReview/index.tsx      | 24 -------------------
 1 file changed, 24 deletions(-)
 delete mode 100644 src/app/(admin)/new_dashboard/guides/components/ActionAddReview/index.tsx

diff --git a/src/app/(admin)/new_dashboard/guides/components/ActionAddReview/index.tsx b/src/app/(admin)/new_dashboard/guides/components/ActionAddReview/index.tsx
deleted file mode 100644
index 958a528..0000000
--- a/src/app/(admin)/new_dashboard/guides/components/ActionAddReview/index.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-"use client";
-import React from 'react';
-import Link from 'next/link';
-import AddCircleOutlineIcon from '@mui/icons-material/AddCircleOutline';
-import { Box, Typography } from '@mui/material';
-
-interface ActionAddReviewProps {
-  guideId: number;
-}
-
-const ActionAddReview: React.FC<ActionAddReviewProps> = ({ guideId }) => {
-  return (
-    <Link href={{ pathname: '/new_dashboard/guides/add-review', query: { guideId } }} passHref>
-      <Box display="flex" alignItems="center" sx={{ cursor: 'pointer' }}>
-        <AddCircleOutlineIcon /> 
-        <Typography>
-          Add Review
-        </Typography>
-      </Box>
-    </Link>
-  );
-};
-
-export default ActionAddReview;

From 681897460926c779c199537596a8565b285a56df Mon Sep 17 00:00:00 2001
From: Ori <ori100no@gmail.com>
Date: Sun, 25 Aug 2024 15:20:47 +0300
Subject: [PATCH 128/242] removed redundant imports

---
 .../new_dashboard/guides/components/AddReviewBox/index.tsx      | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/app/(admin)/new_dashboard/guides/components/AddReviewBox/index.tsx b/src/app/(admin)/new_dashboard/guides/components/AddReviewBox/index.tsx
index 904b02e..300d75b 100644
--- a/src/app/(admin)/new_dashboard/guides/components/AddReviewBox/index.tsx
+++ b/src/app/(admin)/new_dashboard/guides/components/AddReviewBox/index.tsx
@@ -2,8 +2,6 @@
 import React from 'react';
 import { Box, Typography, Rating, TextField, Button } from '@mui/material';
 import useAddReviewForm from '../../hooks/useAddReviewForm';
-import { useRouter , useSearchParams} from 'next/navigation';
-import ArrowBackIcon from '@mui/icons-material/ArrowBack';
 
 interface AddReviewBoxProps {
   guideId: number;

From f568f8d109ff2e89289d28d76fefed3bcfa1d3a6 Mon Sep 17 00:00:00 2001
From: Ori <ori100no@gmail.com>
Date: Sun, 25 Aug 2024 15:26:45 +0300
Subject: [PATCH 129/242] linted page

---
 .../new_dashboard/guides/[id]/page.tsx        | 33 +++++++++----------
 1 file changed, 16 insertions(+), 17 deletions(-)

diff --git a/src/app/(admin)/new_dashboard/guides/[id]/page.tsx b/src/app/(admin)/new_dashboard/guides/[id]/page.tsx
index 3927895..113818e 100644
--- a/src/app/(admin)/new_dashboard/guides/[id]/page.tsx
+++ b/src/app/(admin)/new_dashboard/guides/[id]/page.tsx
@@ -1,49 +1,48 @@
 "use client";
+
+import React from "react";
 import PageContainer from "@/components/PageContainer";
 import { useParams } from "next/navigation";
 import { useGuide } from "../hooks";
 import DashboardCard from "../../shared/Card";
 import { Typography, CircularProgress, Alert, Box, Divider } from "@mui/material";
-import { Guide } from "@/api/types/Guide";
 import ReviewList from "../components/ReviewList";
 
-const GuidePage = () => {
+const GuidePage: React.FC = () => {
   const params = useParams();
   
   const id = params?.id ? Number(params.id) : null;
-  
-  
-  let guide: Guide | undefined = undefined;
 
- const {data:response , isLoading, isError, error, isSuccess} = useGuide(id ?? 0);
+  const { data: response, isLoading, isError, error, isSuccess } = useGuide(id ?? 0);
 
- 
   if (isLoading) {
     return <CircularProgress />;
   }
 
-  if(isError) {
+  if (isError) {
     return <Alert severity="error">{error.message}</Alert>;
   }
 
-  if(isSuccess && "data" in response) {
-    guide = response.data;
-    const creatorAndDateString = `Created by ${guide.creator?.username} on ${new Date(guide.createdAt).toLocaleDateString()}`
-    if(!guide.title) {
+  if (isSuccess && "data" in response) {
+    const guide = response.data;
+    const creatorAndDateString = `Created by ${guide.creator?.username} on ${new Date(guide.createdAt).toLocaleDateString()}`;
+
+    if (!guide.title) {
       return <Typography>Guide not found</Typography>;
     }
+
     return (
       <PageContainer title={guide.title}>
         <DashboardCard title={guide.title} subtitle={creatorAndDateString}>
-          <div>
-            <div dangerouslySetInnerHTML={{ __html: guide.contentHTML }} />
-          </div>
+          <div dangerouslySetInnerHTML={{ __html: guide.contentHTML }} />
         </DashboardCard>
-        <Divider sx={{ mt: 2, mb: 2, border: 'none' }} />
-        <ReviewList guideId={guide.id} reviews={guide.reviews ?? []}/>        
+        <Divider sx={{ mt: 2, mb: 2, border: "none" }} />
+        <ReviewList guideId={guide.id} reviews={guide.reviews ?? []} />
       </PageContainer>
     );
   }
+
+  return null; // Handle case where the component doesn't return anything
 };
 
 export default GuidePage;

From 07b64f9cb62a015bface7b194e16d5a2c83df490 Mon Sep 17 00:00:00 2001
From: Ori <ori100no@gmail.com>
Date: Sun, 25 Aug 2024 21:28:17 +0300
Subject: [PATCH 130/242] showing show more button only if there are items to
 show

---
 .../new_dashboard/guides/components/ReviewList/index.tsx       | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/app/(admin)/new_dashboard/guides/components/ReviewList/index.tsx b/src/app/(admin)/new_dashboard/guides/components/ReviewList/index.tsx
index 4c7eb1f..9166f41 100644
--- a/src/app/(admin)/new_dashboard/guides/components/ReviewList/index.tsx
+++ b/src/app/(admin)/new_dashboard/guides/components/ReviewList/index.tsx
@@ -43,13 +43,14 @@ const ReviewList: React.FC<ReviewListProps> = ({ reviews, guideId }) => {
         <Box mt={2}>
           <Divider />
           {reviewsContext}
+          {!!reviews.length &&(
           <Box display="flex" justifyContent="center" width="100%" mt={2}>
             <Button onClick={()=>{
               visibleCount === reviews.length ? showLessReviews() : showMoreReviews();
             }}>
               {visibleCount === reviews.length ? "Show Less" : "Show More"}
             </Button>
-          </Box>
+          </Box>)}
           <AddReviewBox guideId={guideId} />
         </Box>
       </DashboardCard>

From 9ca2f10b852164a1c767e00866923971c4607f07 Mon Sep 17 00:00:00 2001
From: Ori <ori100no@gmail.com>
Date: Sun, 25 Aug 2024 22:49:27 +0300
Subject: [PATCH 131/242] fixed the thing with the html tag

---
 .../new_dashboard/guides/[id]/page.tsx        |   6 +-
 src/app/globals.css                           | 148 ++++++++++++++++++
 2 files changed, 153 insertions(+), 1 deletion(-)

diff --git a/src/app/(admin)/new_dashboard/guides/[id]/page.tsx b/src/app/(admin)/new_dashboard/guides/[id]/page.tsx
index 113818e..4ee71d9 100644
--- a/src/app/(admin)/new_dashboard/guides/[id]/page.tsx
+++ b/src/app/(admin)/new_dashboard/guides/[id]/page.tsx
@@ -7,6 +7,8 @@ import { useGuide } from "../hooks";
 import DashboardCard from "../../shared/Card";
 import { Typography, CircularProgress, Alert, Box, Divider } from "@mui/material";
 import ReviewList from "../components/ReviewList";
+import parse from "html-react-parser";
+import "quill/dist/quill.snow.css";
 
 const GuidePage: React.FC = () => {
   const params = useParams();
@@ -34,7 +36,9 @@ const GuidePage: React.FC = () => {
     return (
       <PageContainer title={guide.title}>
         <DashboardCard title={guide.title} subtitle={creatorAndDateString}>
-          <div dangerouslySetInnerHTML={{ __html: guide.contentHTML }} />
+        <div className="quill-content">
+          {parse(guide.contentHTML)}
+        </div>
         </DashboardCard>
         <Divider sx={{ mt: 2, mb: 2, border: "none" }} />
         <ReviewList guideId={guide.id} reviews={guide.reviews ?? []} />
diff --git a/src/app/globals.css b/src/app/globals.css
index b5c61c9..0316fee 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -1,3 +1,151 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+.quill-content {
+    font-family: 'Arial', sans-serif;
+    line-height: 1.6;
+    color: #333;
+    padding: 16px;
+    background-color: #fff;
+    border-radius: 8px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  }
+  
+  .quill-content h1 {
+    font-size: 2rem;
+    font-weight: bold;
+    margin-bottom: 16px;
+    color: #2c3e50;
+  }
+  
+  .quill-content h2 {
+    font-size: 1.75rem;
+    font-weight: bold;
+    margin-bottom: 14px;
+    color: #34495e;
+  }
+  
+  .quill-content h3 {
+    font-size: 1.5rem;
+    font-weight: bold;
+    margin-bottom: 12px;
+    color: #4a4a4a;
+  }
+  
+  .quill-content h4 {
+    font-size: 1.25rem;
+    font-weight: bold;
+    margin-bottom: 10px;
+    color: #4a4a4a;
+  }
+  
+  .quill-content p {
+    font-size: 1rem;
+    margin-bottom: 16px;
+    color: #666;
+  }
+  
+  .quill-content ul {
+    list-style-type: disc;
+    margin-left: 20px;
+    margin-bottom: 16px;
+  }
+  
+  .quill-content ul li {
+    margin-bottom: 8px;
+    font-size: 1rem;
+    color: #555;
+  }
+  
+  .quill-content ol {
+    list-style-type: decimal;
+    margin-left: 20px;
+    margin-bottom: 16px;
+  }
+  
+  .quill-content ol li {
+    margin-bottom: 8px;
+    font-size: 1rem;
+    color: #555;
+  }
+  
+  .quill-content img {
+    max-width: 100%;
+    height: auto;
+    margin: 16px 0;
+    border-radius: 8px;
+  }
+  
+  /* Blockquotes */
+  .quill-content blockquote {
+    margin: 16px 0;
+    padding: 16px;
+    background-color: #f9f9f9;
+    border-left: 4px solid #ccc;
+    font-style: italic;
+    color: #555;
+  }
+  
+  /* Links */
+  .quill-content a {
+    color: #2980b9;
+    text-decoration: underline;
+  }
+  
+  .quill-content a:hover {
+    color: #3498db;
+  }
+  
+  /* Code Blocks */
+  .quill-content pre {
+    background-color: #f4f4f4;
+    border-radius: 4px;
+    padding: 16px;
+    overflow-x: auto;
+    font-family: 'Courier New', Courier, monospace;
+    font-size: 0.95rem;
+    color: #333;
+    margin-bottom: 16px;
+  }
+  
+  .quill-content code {
+    background-color: #f4f4f4;
+    border-radius: 4px;
+    padding: 2px 4px;
+    font-family: 'Courier New', Courier, monospace;
+    font-size: 0.95rem;
+    color: #c7254e;
+  }
+  
+  /* Horizontal Rules */
+  .quill-content hr {
+    border: 0;
+    border-top: 1px solid #eee;
+    margin: 24px 0;
+  }
+  
+  /* Customizing table elements */
+  .quill-content table {
+    width: 100%;
+    border-collapse: collapse;
+    margin-bottom: 16px;
+  }
+  
+  .quill-content table th,
+  .quill-content table td {
+    border: 1px solid #ddd;
+    padding: 8px;
+    text-align: left;
+  }
+  
+  .quill-content table th {
+    background-color: #f4f4f4;
+    color: #333;
+  }
+  
+  .quill-content table td {
+    background-color: #fff;
+    color: #666;
+  }
+  
\ No newline at end of file

From cbddf9adefa39d8c2c33cde64409874e430b9c33 Mon Sep 17 00:00:00 2001
From: Ori <ori100no@gmail.com>
Date: Sun, 25 Aug 2024 23:08:19 +0300
Subject: [PATCH 132/242] added globas css for quill content that look like the
 global styles of the application

---
 src/app/globals.css | 230 ++++++++++++++++----------------------------
 1 file changed, 84 insertions(+), 146 deletions(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index 0316fee..07fb699 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -3,149 +3,87 @@
 @tailwind utilities;
 
 .quill-content {
-    font-family: 'Arial', sans-serif;
-    line-height: 1.6;
-    color: #333;
-    padding: 16px;
-    background-color: #fff;
-    border-radius: 8px;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-  }
-  
-  .quill-content h1 {
-    font-size: 2rem;
-    font-weight: bold;
-    margin-bottom: 16px;
-    color: #2c3e50;
-  }
-  
-  .quill-content h2 {
-    font-size: 1.75rem;
-    font-weight: bold;
-    margin-bottom: 14px;
-    color: #34495e;
-  }
-  
-  .quill-content h3 {
-    font-size: 1.5rem;
-    font-weight: bold;
-    margin-bottom: 12px;
-    color: #4a4a4a;
-  }
-  
-  .quill-content h4 {
-    font-size: 1.25rem;
-    font-weight: bold;
-    margin-bottom: 10px;
-    color: #4a4a4a;
-  }
-  
-  .quill-content p {
-    font-size: 1rem;
-    margin-bottom: 16px;
-    color: #666;
-  }
-  
-  .quill-content ul {
-    list-style-type: disc;
-    margin-left: 20px;
-    margin-bottom: 16px;
-  }
-  
-  .quill-content ul li {
-    margin-bottom: 8px;
-    font-size: 1rem;
-    color: #555;
-  }
-  
-  .quill-content ol {
-    list-style-type: decimal;
-    margin-left: 20px;
-    margin-bottom: 16px;
-  }
-  
-  .quill-content ol li {
-    margin-bottom: 8px;
-    font-size: 1rem;
-    color: #555;
-  }
-  
-  .quill-content img {
-    max-width: 100%;
-    height: auto;
-    margin: 16px 0;
-    border-radius: 8px;
-  }
-  
-  /* Blockquotes */
-  .quill-content blockquote {
-    margin: 16px 0;
-    padding: 16px;
-    background-color: #f9f9f9;
-    border-left: 4px solid #ccc;
-    font-style: italic;
-    color: #555;
-  }
-  
-  /* Links */
-  .quill-content a {
-    color: #2980b9;
-    text-decoration: underline;
-  }
-  
-  .quill-content a:hover {
-    color: #3498db;
-  }
-  
-  /* Code Blocks */
-  .quill-content pre {
-    background-color: #f4f4f4;
-    border-radius: 4px;
-    padding: 16px;
-    overflow-x: auto;
-    font-family: 'Courier New', Courier, monospace;
-    font-size: 0.95rem;
-    color: #333;
-    margin-bottom: 16px;
-  }
-  
-  .quill-content code {
-    background-color: #f4f4f4;
-    border-radius: 4px;
-    padding: 2px 4px;
-    font-family: 'Courier New', Courier, monospace;
-    font-size: 0.95rem;
-    color: #c7254e;
-  }
-  
-  /* Horizontal Rules */
-  .quill-content hr {
-    border: 0;
-    border-top: 1px solid #eee;
-    margin: 24px 0;
-  }
-  
-  /* Customizing table elements */
-  .quill-content table {
-    width: 100%;
-    border-collapse: collapse;
-    margin-bottom: 16px;
-  }
-  
-  .quill-content table th,
-  .quill-content table td {
-    border: 1px solid #ddd;
-    padding: 8px;
-    text-align: left;
-  }
-  
-  .quill-content table th {
-    background-color: #f4f4f4;
-    color: #333;
-  }
-  
-  .quill-content table td {
-    background-color: #fff;
-    color: #666;
-  }
-  
\ No newline at end of file
+  @apply font-sans text-gray-700 p-4 bg-white rounded-lg shadow-md;
+  line-height: 1.6;
+}
+
+.quill-content h1 {
+  @apply text-2xl font-bold mb-4 text-gray-800;
+}
+
+.quill-content h2 {
+  @apply text-xl font-bold mb-3 text-gray-700;
+}
+
+.quill-content h3 {
+  @apply text-lg font-bold mb-3 text-gray-600;
+}
+
+.quill-content h4 {
+  @apply text-base font-bold mb-2 text-gray-600;
+}
+
+.quill-content p {
+  @apply text-base mb-4 text-gray-600;
+}
+
+.quill-content ul {
+  @apply list-disc ml-5 mb-4;
+}
+
+.quill-content ul li {
+  @apply mb-2 text-base text-gray-600;
+}
+
+.quill-content ol {
+  @apply list-decimal ml-5 mb-4;
+}
+
+.quill-content ol li {
+  @apply mb-2 text-base text-gray-600;
+}
+
+.quill-content img {
+  @apply max-w-full h-auto my-4 rounded-lg;
+}
+
+.quill-content blockquote {
+  @apply my-4 p-4 bg-gray-100 border-l-4 border-gray-300 italic text-gray-600;
+}
+
+.quill-content a {
+  @apply text-blue-600 underline;
+}
+
+.quill-content a:hover {
+  @apply text-blue-500;
+}
+
+.quill-content pre {
+  @apply bg-gray-100 rounded p-4 overflow-x-auto font-mono text-sm text-gray-700 mb-4;
+}
+
+.quill-content code {
+  @apply bg-gray-100 rounded p-1 font-mono text-sm text-red-600;
+}
+
+.quill-content hr {
+  @apply border-t border-gray-200 my-6;
+}
+
+.quill-content table {
+  @apply w-full border-collapse mb-4;
+}
+
+.quill-content table th,
+.quill-content table td {
+  @apply border border-gray-300 p-2 text-left;
+}
+
+.quill-content table th {
+  @apply bg-gray-100 text-gray-800;
+}
+
+.quill-content table td {
+  @apply bg-white text-gray-700;
+}

From 7ddf4480b0da95799d402f8f21787fe9b5db903c Mon Sep 17 00:00:00 2001
From: Ori <ori100no@gmail.com>
Date: Mon, 26 Aug 2024 10:51:29 +0300
Subject: [PATCH 133/242] resolved changes

---
 src/app/(admin)/new_dashboard/guides/[id]/page.tsx             | 1 -
 .../new_dashboard/guides/components/AddReviewBox/index.tsx     | 2 +-
 .../new_dashboard/guides/components/GuideCard/index.tsx        | 2 +-
 .../new_dashboard/guides/components/ReviewCard/index.tsx       | 3 +--
 4 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/app/(admin)/new_dashboard/guides/[id]/page.tsx b/src/app/(admin)/new_dashboard/guides/[id]/page.tsx
index 4ee71d9..658410a 100644
--- a/src/app/(admin)/new_dashboard/guides/[id]/page.tsx
+++ b/src/app/(admin)/new_dashboard/guides/[id]/page.tsx
@@ -46,7 +46,6 @@ const GuidePage: React.FC = () => {
     );
   }
 
-  return null; // Handle case where the component doesn't return anything
 };
 
 export default GuidePage;
diff --git a/src/app/(admin)/new_dashboard/guides/components/AddReviewBox/index.tsx b/src/app/(admin)/new_dashboard/guides/components/AddReviewBox/index.tsx
index 300d75b..3c8363e 100644
--- a/src/app/(admin)/new_dashboard/guides/components/AddReviewBox/index.tsx
+++ b/src/app/(admin)/new_dashboard/guides/components/AddReviewBox/index.tsx
@@ -32,7 +32,7 @@ const AddReviewBox: React.FC<AddReviewBoxProps> = ({guideId}) => {
           name="stars"
           value={stars}
           onChange={(event, newValue) => setStars(newValue ?? 1)}
-          sx={{color: '#3d52a0'}}
+          sx={{color: '#FFD35C'}}
         />
       </Box>
       <TextField
diff --git a/src/app/(admin)/new_dashboard/guides/components/GuideCard/index.tsx b/src/app/(admin)/new_dashboard/guides/components/GuideCard/index.tsx
index 534dc5f..f5195bd 100644
--- a/src/app/(admin)/new_dashboard/guides/components/GuideCard/index.tsx
+++ b/src/app/(admin)/new_dashboard/guides/components/GuideCard/index.tsx
@@ -28,7 +28,7 @@ const GuideCard = ({ guide }: Props) => {
           <Rating
             value={avgRating}
             precision={0.5}
-            readOnly sx={{ color: '#3d52a0' }}
+            readOnly sx={{ color: '#FFD35C' }}
           />
           <Typography variant="body2" mx={1}>
             ({guide.reviews?.length ?? 0})
diff --git a/src/app/(admin)/new_dashboard/guides/components/ReviewCard/index.tsx b/src/app/(admin)/new_dashboard/guides/components/ReviewCard/index.tsx
index 4d5d800..a56a1f4 100644
--- a/src/app/(admin)/new_dashboard/guides/components/ReviewCard/index.tsx
+++ b/src/app/(admin)/new_dashboard/guides/components/ReviewCard/index.tsx
@@ -3,7 +3,6 @@ import {
   Typography,
   Box,
   Rating,
-  Divider,
 } from "@mui/material";
 import React from 'react';
 
@@ -28,7 +27,7 @@ const ReviewCard: React.FC<ReviewCardProps> = ({ review }) => {
             value={review.rating}
             readOnly
             precision={0.5}
-            sx={{ fontSize: '1.25rem', color: '#3d52a0' }}
+            sx={{ fontSize: '1.25rem', color: '#FFD35C' }}
             />
           <Typography variant="body2" color="textSecondary" >
             by {review.user?.username}

From 1749d7244edb9fc4cb6bd0e149f3df0437581ba6 Mon Sep 17 00:00:00 2001
From: Ori <ori100no@gmail.com>
Date: Mon, 26 Aug 2024 11:34:40 +0300
Subject: [PATCH 134/242] added color to theme and put color from theme

---
 src/app/(admin)/new_dashboard/guides/[id]/page.tsx       | 4 ++--
 .../guides/components/AddReviewBox/index.tsx             | 2 +-
 .../new_dashboard/guides/components/GuideCard/index.tsx  | 2 +-
 .../new_dashboard/guides/components/ReviewCard/index.tsx | 2 +-
 src/util/theme.ts                                        | 9 ++++++++-
 5 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/src/app/(admin)/new_dashboard/guides/[id]/page.tsx b/src/app/(admin)/new_dashboard/guides/[id]/page.tsx
index 658410a..e9faa2e 100644
--- a/src/app/(admin)/new_dashboard/guides/[id]/page.tsx
+++ b/src/app/(admin)/new_dashboard/guides/[id]/page.tsx
@@ -27,7 +27,7 @@ const GuidePage: React.FC = () => {
 
   if (isSuccess && "data" in response) {
     const guide = response.data;
-    const creatorAndDateString = `Created by ${guide.creator?.username} on ${new Date(guide.createdAt).toLocaleDateString()}`;
+    const creatorAndDateInfo = `Created by ${guide.creator?.username} on ${new Date(guide.createdAt).toLocaleDateString()}`;
 
     if (!guide.title) {
       return <Typography>Guide not found</Typography>;
@@ -35,7 +35,7 @@ const GuidePage: React.FC = () => {
 
     return (
       <PageContainer title={guide.title}>
-        <DashboardCard title={guide.title} subtitle={creatorAndDateString}>
+        <DashboardCard title={guide.title} subtitle={creatorAndDateInfo}>
         <div className="quill-content">
           {parse(guide.contentHTML)}
         </div>
diff --git a/src/app/(admin)/new_dashboard/guides/components/AddReviewBox/index.tsx b/src/app/(admin)/new_dashboard/guides/components/AddReviewBox/index.tsx
index 3c8363e..bd1464a 100644
--- a/src/app/(admin)/new_dashboard/guides/components/AddReviewBox/index.tsx
+++ b/src/app/(admin)/new_dashboard/guides/components/AddReviewBox/index.tsx
@@ -32,7 +32,7 @@ const AddReviewBox: React.FC<AddReviewBoxProps> = ({guideId}) => {
           name="stars"
           value={stars}
           onChange={(event, newValue) => setStars(newValue ?? 1)}
-          sx={{color: '#FFD35C'}}
+          sx={{color: "gold"}}
         />
       </Box>
       <TextField
diff --git a/src/app/(admin)/new_dashboard/guides/components/GuideCard/index.tsx b/src/app/(admin)/new_dashboard/guides/components/GuideCard/index.tsx
index f5195bd..0d6b26b 100644
--- a/src/app/(admin)/new_dashboard/guides/components/GuideCard/index.tsx
+++ b/src/app/(admin)/new_dashboard/guides/components/GuideCard/index.tsx
@@ -28,7 +28,7 @@ const GuideCard = ({ guide }: Props) => {
           <Rating
             value={avgRating}
             precision={0.5}
-            readOnly sx={{ color: '#FFD35C' }}
+            readOnly sx={{ color: 'gold' }}
           />
           <Typography variant="body2" mx={1}>
             ({guide.reviews?.length ?? 0})
diff --git a/src/app/(admin)/new_dashboard/guides/components/ReviewCard/index.tsx b/src/app/(admin)/new_dashboard/guides/components/ReviewCard/index.tsx
index a56a1f4..9bd7cfb 100644
--- a/src/app/(admin)/new_dashboard/guides/components/ReviewCard/index.tsx
+++ b/src/app/(admin)/new_dashboard/guides/components/ReviewCard/index.tsx
@@ -27,7 +27,7 @@ const ReviewCard: React.FC<ReviewCardProps> = ({ review }) => {
             value={review.rating}
             readOnly
             precision={0.5}
-            sx={{ fontSize: '1.25rem', color: '#FFD35C' }}
+            sx={{ fontSize: '1.25rem', color: 'gold' }}
             />
           <Typography variant="body2" color="textSecondary" >
             by {review.user?.username}
diff --git a/src/util/theme.ts b/src/util/theme.ts
index 5a7a6ca..0a77b01 100644
--- a/src/util/theme.ts
+++ b/src/util/theme.ts
@@ -14,9 +14,11 @@ export const plus = Plus_Jakarta_Sans({
 declare module "@mui/material/styles" {
   interface Palette {
     note: SimplePaletteColorOptions;
+    gold: SimplePaletteColorOptions;
   }
   interface PaletteOptions {
     note?: SimplePaletteColorOptions;
+    gold?: SimplePaletteColorOptions;
   }
 }
 
@@ -60,7 +62,7 @@ const baselightTheme = createTheme({
       dark: "#ae8e59",
       contrastText: "#ffffff",
     },
-
+    
     grey: {
       100: "#F2F6FA",
       200: "#EAEFF4",
@@ -69,6 +71,7 @@ const baselightTheme = createTheme({
       500: "#5A6A85",
       600: "#2A3547",
     },
+
     text: {
       primary: "#2A3547",
       secondary: "#5A6A85",
@@ -79,7 +82,11 @@ const baselightTheme = createTheme({
       hover: "#f6f9fc",
     },
     divider: "#e5eaef",
+    gold: {
+      main: "#FFD35C",
+    },
   },
+  
   typography: {
     fontFamily: plus.style.fontFamily,
     h1: {

From 36f1c67cdd612427dcca421037d3d5f892fc3471 Mon Sep 17 00:00:00 2001
From: Ori <ori100no@gmail.com>
Date: Mon, 26 Aug 2024 12:16:07 +0300
Subject: [PATCH 135/242] added a librery

---
 package-lock.json | 81 +++++++++++++++++++++++++++++++++++++++++++++++
 package.json      |  1 +
 2 files changed, 82 insertions(+)

diff --git a/package-lock.json b/package-lock.json
index bce7a0b..e141e97 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -25,6 +25,7 @@
         "cookies-next": "^4.2.1",
         "file-saver": "^2.0.5",
         "font-awesome": "^4.7.0",
+        "html-react-parser": "^5.1.13",
         "html-to-text": "^9.0.5",
         "html2canvas": "^1.4.1",
         "html2pdf.js": "^0.10.2",
@@ -4979,6 +4980,56 @@
         "react-is": "^16.7.0"
       }
     },
+    "node_modules/html-dom-parser": {
+      "version": "5.0.9",
+      "resolved": "https://registry.npmjs.org/html-dom-parser/-/html-dom-parser-5.0.9.tgz",
+      "integrity": "sha512-QGeoFYwgQ582EDvrBx0+ejIz76/LuQcwwkmSR4ueKncjl2yWbciA45Kfz/LrHvWR3CgtKnxKFkr4Mpq2Sh1QNg==",
+      "license": "MIT",
+      "dependencies": {
+        "domhandler": "5.0.3",
+        "htmlparser2": "9.1.0"
+      }
+    },
+    "node_modules/html-dom-parser/node_modules/htmlparser2": {
+      "version": "9.1.0",
+      "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-9.1.0.tgz",
+      "integrity": "sha512-5zfg6mHUoaer/97TxnGpxmbR7zJtPwIYFMZ/H5ucTlPZhKvtum05yiPK3Mgai3a0DyVxv7qYqoweaEd2nrYQzQ==",
+      "funding": [
+        "https://github.com/fb55/htmlparser2?sponsor=1",
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fb55"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.3",
+        "domutils": "^3.1.0",
+        "entities": "^4.5.0"
+      }
+    },
+    "node_modules/html-react-parser": {
+      "version": "5.1.13",
+      "resolved": "https://registry.npmjs.org/html-react-parser/-/html-react-parser-5.1.13.tgz",
+      "integrity": "sha512-XTG2lbn9JDHc3DqGLpHkoArvptXMPl+Ckk5/cqRhdUmrhcPNZ5MPDrwd2PU3BePl2QmkLOb3WsWdjAotznMdUw==",
+      "license": "MIT",
+      "dependencies": {
+        "domhandler": "5.0.3",
+        "html-dom-parser": "5.0.9",
+        "react-property": "2.0.2",
+        "style-to-js": "1.1.12"
+      },
+      "peerDependencies": {
+        "@types/react": "0.14 || 15 || 16 || 17 || 18",
+        "react": "0.14 || 15 || 16 || 17 || 18"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/html-to-text": {
       "version": "9.0.5",
       "resolved": "https://registry.npmjs.org/html-to-text/-/html-to-text-9.0.5.tgz",
@@ -5099,6 +5150,12 @@
       "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
       "dev": true
     },
+    "node_modules/inline-style-parser": {
+      "version": "0.2.3",
+      "resolved": "https://registry.npmjs.org/inline-style-parser/-/inline-style-parser-0.2.3.tgz",
+      "integrity": "sha512-qlD8YNDqyTKTyuITrDOffsl6Tdhv+UC4hcdAVuQsK4IMQ99nSgd1MIA/Q+jQYoh9r3hVUXhYh7urSRmXPkW04g==",
+      "license": "MIT"
+    },
     "node_modules/internal-slot": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.7.tgz",
@@ -6834,6 +6891,12 @@
         "vite-plugin-dts": "^3.8.1"
       }
     },
+    "node_modules/react-property": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/react-property/-/react-property-2.0.2.tgz",
+      "integrity": "sha512-+PbtI3VuDV0l6CleQMsx2gtK0JZbZKbpdu5ynr+lbsuvtmgbNcS3VM0tuY2QjFNOcWxvXeHjDpy42RO+4U2rug==",
+      "license": "MIT"
+    },
     "node_modules/react-quill": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/react-quill/-/react-quill-2.0.0.tgz",
@@ -7592,6 +7655,24 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/style-to-js": {
+      "version": "1.1.12",
+      "resolved": "https://registry.npmjs.org/style-to-js/-/style-to-js-1.1.12.tgz",
+      "integrity": "sha512-tv+/FkgNYHI2fvCoBMsqPHh5xovwiw+C3X0Gfnss/Syau0Nr3IqGOJ9XiOYXoPnToHVbllKFf5qCNFJGwFg5mg==",
+      "license": "MIT",
+      "dependencies": {
+        "style-to-object": "1.0.6"
+      }
+    },
+    "node_modules/style-to-object": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/style-to-object/-/style-to-object-1.0.6.tgz",
+      "integrity": "sha512-khxq+Qm3xEyZfKd/y9L3oIWQimxuc4STrQKtQn8aSDRHb8mFgpukgX1hdzfrMEW6JCjyJ8p89x+IUMVnCBI1PA==",
+      "license": "MIT",
+      "dependencies": {
+        "inline-style-parser": "0.2.3"
+      }
+    },
     "node_modules/styled-jsx": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.1.1.tgz",
diff --git a/package.json b/package.json
index 3be360f..7d8b27b 100644
--- a/package.json
+++ b/package.json
@@ -26,6 +26,7 @@
     "cookies-next": "^4.2.1",
     "file-saver": "^2.0.5",
     "font-awesome": "^4.7.0",
+    "html-react-parser": "^5.1.13",
     "html-to-text": "^9.0.5",
     "html2canvas": "^1.4.1",
     "html2pdf.js": "^0.10.2",

From fea3b1a76abc0a4208243eff4e8609ec84d18920 Mon Sep 17 00:00:00 2001
From: roiy0987 <roiy0987@gmail.com>
Date: Mon, 26 Aug 2024 12:46:51 +0300
Subject: [PATCH 136/242] refactor: Update imports for User and Message types
 in codebase

---
 src/api/model.client.ts                       |  4 ++
 src/api/types/User.ts                         |  7 ++-
 src/api/types/chat.ts                         | 16 +++++-
 src/api/types/login.ts                        |  2 +-
 src/api/types/message.ts                      | 12 ++++
 src/api/types/model.ts                        | 14 ++---
 src/api/types/signup.ts                       |  2 +-
 .../components/ChatHeader/hooks/useGuide.ts   | 56 +++++++++++++------
 .../components/ChatHeader/types/index.ts      |  9 ---
 .../components/SupportMessageList/index.tsx   |  6 +-
 .../SupportMessageList/types/index.ts         |  9 ---
 .../guides/components/Editor/index.tsx        |  2 -
 .../guides/create/hooks/useCreateGuide.ts     | 47 ++++++++++++++--
 .../new_dashboard/guides/create/page.tsx      | 13 ++++-
 .../guides/create/validations/schema.ts       |  6 ++
 src/app/(admin)/new_dashboard/types/index.ts  |  1 -
 .../(admin)/new_dashboard/types/message.ts    |  6 --
 .../components/UserMessageList/index.tsx      |  9 ++-
 src/common/components/Message/index.tsx       |  7 ++-
 src/common/hooks/useMessageList.ts            |  3 +
 src/hooks/api/chatHooks.ts                    |  3 +-
 src/types/chat.type.ts                        | 11 ----
 src/types/clientResponse.type.ts              |  6 ++
 src/types/index.ts                            |  3 -
 src/types/message.type.ts                     |  8 ---
 src/types/user.type.ts                        | 10 ----
 26 files changed, 167 insertions(+), 105 deletions(-)
 create mode 100644 src/api/types/message.ts
 delete mode 100644 src/app/(admin)/new_dashboard/components/ChatHeader/types/index.ts
 delete mode 100644 src/app/(admin)/new_dashboard/components/SupportMessageList/types/index.ts
 create mode 100644 src/app/(admin)/new_dashboard/guides/create/validations/schema.ts
 delete mode 100644 src/app/(admin)/new_dashboard/types/message.ts
 delete mode 100644 src/types/chat.type.ts
 delete mode 100644 src/types/message.type.ts
 delete mode 100644 src/types/user.type.ts

diff --git a/src/api/model.client.ts b/src/api/model.client.ts
index 5c0912f..e5a5164 100644
--- a/src/api/model.client.ts
+++ b/src/api/model.client.ts
@@ -1,4 +1,8 @@
 import { BaseClient } from "./base.client";
+import {
+  ModelCreateGuideRequest,
+  ModelCreateGuideResponse,
+} from "./types/model";
 
 export class ModelClient extends BaseClient {
   constructor() {
diff --git a/src/api/types/User.ts b/src/api/types/User.ts
index a5dba9c..27898ce 100644
--- a/src/api/types/User.ts
+++ b/src/api/types/User.ts
@@ -1,11 +1,14 @@
-import { z } from 'zod';
+import { z } from "zod";
 
 export const userSchema = z.object({
   id: z.number(),
   username: z.string(),
   email: z.string().email().optional(),
-  password: z.string().optional(),
   roles: z.array(z.string()),
 });
 
 export type User = z.infer<typeof userSchema>;
+
+export type UserRole = Pick<User, "id" | "roles">;
+
+export type UserInfo = Pick<User, "id" | "username">;
diff --git a/src/api/types/chat.ts b/src/api/types/chat.ts
index eb6418d..a4b1158 100644
--- a/src/api/types/chat.ts
+++ b/src/api/types/chat.ts
@@ -1,4 +1,18 @@
-import { Chat } from '@/types';
+import { z } from "zod";
+import { messageSchema } from "./message";
+import { userSchema } from "./User";
+
+export const chatSchema = z.object({
+  id: z.number(),
+  customerId: z.number(),
+  isOpen: z.boolean(),
+  startTime: z.date(),
+  endTime: z.date().optional(),
+  messages: z.array(messageSchema),
+  user: userSchema,
+});
+
+export type Chat = z.infer<typeof chatSchema>;
 
 export type ChatRequest = {
   id: number;
diff --git a/src/api/types/login.ts b/src/api/types/login.ts
index 1f4506e..c62219f 100644
--- a/src/api/types/login.ts
+++ b/src/api/types/login.ts
@@ -1,4 +1,4 @@
-import { User } from "@/types";
+import { User } from "./User";
 
 export type LoginRequest = {
   username: string;
diff --git a/src/api/types/message.ts b/src/api/types/message.ts
new file mode 100644
index 0000000..e62a5b0
--- /dev/null
+++ b/src/api/types/message.ts
@@ -0,0 +1,12 @@
+import { z } from "zod";
+
+export const messageSchema = z.object({
+  id: z.number(),
+  chatId: z.number(),
+  isSupportSender: z.boolean(),
+  content: z.string(),
+  isNote: z.boolean(),
+  timeStamp: z.date(),
+});
+
+export type Message = z.infer<typeof messageSchema>;
diff --git a/src/api/types/model.ts b/src/api/types/model.ts
index e62cbbd..998b7bc 100644
--- a/src/api/types/model.ts
+++ b/src/api/types/model.ts
@@ -1,14 +1,12 @@
-type ModelCreateGuideRequest = {
-  messages: Message[];
-  user: User;
-};
+import { Message } from "./message";
+import { User } from "./User";
 
-type User = {
-  username: string;
-  roles: string[];
+export type ModelCreateGuideRequest = {
+  messages: Pick<Message, "content" | "isSupportSender">[];
+  user: Pick<User, "roles" | "username">;
 };
 
-type ModelCreateGuideResponse = {
+export type ModelCreateGuideResponse = {
   contentHTML: string;
   title: string;
 };
diff --git a/src/api/types/signup.ts b/src/api/types/signup.ts
index e3cca48..4344069 100644
--- a/src/api/types/signup.ts
+++ b/src/api/types/signup.ts
@@ -1,4 +1,4 @@
-import { User } from "@/types";
+import { User } from "./User";
 
 export type SignUpRequest = {
   username: string;
diff --git a/src/app/(admin)/new_dashboard/components/ChatHeader/hooks/useGuide.ts b/src/app/(admin)/new_dashboard/components/ChatHeader/hooks/useGuide.ts
index 464a980..66ce99d 100644
--- a/src/app/(admin)/new_dashboard/components/ChatHeader/hooks/useGuide.ts
+++ b/src/app/(admin)/new_dashboard/components/ChatHeader/hooks/useGuide.ts
@@ -1,31 +1,51 @@
 import { ChatClient } from "@/api/chat.client";
 import { ModelClient } from "@/api/model.client";
-import { guideContext, useGuideContext } from "@/app/providers/guide";
-import { ClientResponse, SuccessResponse } from "@/types";
+import { useGuideContext } from "@/app/providers/guide";
+import { SuccessResponse, ErrorResponse, isSuccessResponse } from "@/types";
 import { useRouter } from "next/navigation";
-import { Chat, User } from "../types/index";
+import { Chat } from "@/api/types/chat";
+import { ModelCreateGuideResponse } from "@/api/types/model";
+
+const modelClient = new ModelClient();
+const chatModel = new ChatClient();
 
 export const useGuide = () => {
   const router = useRouter();
   const { setGuide } = useGuideContext();
 
   async function handleGenerateGuide(chatId: number): Promise<void> {
-    const chatModel = new ChatClient();
-    const clientResponse = (await chatModel.chatById({
+    const chatResponse = await chatModel.chatById({
       id: chatId,
-    })) as ClientResponse<Chat>;
-    const successResponse = clientResponse as SuccessResponse<Chat>;
-    const chat = successResponse.data as Chat;
-
-    const modelClient = new ModelClient();
-    const response = (await modelClient.createGuide({
-      user: chat.user,
-      messages: chat.messages,
-    })) as ClientResponse<ModelCreateGuideResponse>;
-
-    const modelCreateGuideResponse =
-      response as SuccessResponse<ModelCreateGuideResponse>;
-    setGuide(modelCreateGuideResponse.data);
+    });
+
+    if (!isSuccessResponse(chatResponse)) {
+      const errorResponse = chatResponse as ErrorResponse;
+      console.error(errorResponse.error);
+      return;
+    }
+    const chat = (chatResponse as SuccessResponse<Chat>).data;
+
+    const modelCreateGuideResponse = await modelClient.createGuide({
+      user: {
+        roles: chat.user.roles,
+        username: chat.user.username,
+      },
+      messages: chat.messages.map((message) => ({
+        content: message.content,
+        isSupportSender: message.isSupportSender,
+      })),
+    });
+
+    if (!isSuccessResponse(modelCreateGuideResponse)) {
+      const errorResponse = modelCreateGuideResponse as ErrorResponse;
+      console.error(errorResponse.error);
+      return;
+    }
+
+    const guideResponse = (
+      modelCreateGuideResponse as SuccessResponse<ModelCreateGuideResponse>
+    ).data;
+    setGuide(guideResponse);
     router.push("new_dashboard/guides/create");
   }
 
diff --git a/src/app/(admin)/new_dashboard/components/ChatHeader/types/index.ts b/src/app/(admin)/new_dashboard/components/ChatHeader/types/index.ts
deleted file mode 100644
index 7cf0e3a..0000000
--- a/src/app/(admin)/new_dashboard/components/ChatHeader/types/index.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-export type Chat = {
-  messages: Message[];
-  user: User;
-};
-export interface User {
-  id: number;
-  username: string;
-  roles: string[];
-}
diff --git a/src/app/(admin)/new_dashboard/components/SupportMessageList/index.tsx b/src/app/(admin)/new_dashboard/components/SupportMessageList/index.tsx
index 2cbfa51..87758db 100644
--- a/src/app/(admin)/new_dashboard/components/SupportMessageList/index.tsx
+++ b/src/app/(admin)/new_dashboard/components/SupportMessageList/index.tsx
@@ -1,7 +1,7 @@
 import { Box, List } from "@mui/material";
 import { useSocket } from "@/app/hooks/useSocket";
 import { useMessageList } from "@/common/hooks/useMessageList";
-import { Message } from "@/common";
+import { MessageContainer } from "@/common";
 type Props = {
   chatId: number;
 };
@@ -20,7 +20,9 @@ const SupportMessageList = ({ chatId }: Props) => {
     >
       <List>
         {messages.map((msg, index) => {
-          return <Message message={msg} key={index}></Message>;
+          return (
+            <MessageContainer message={msg} key={index}></MessageContainer>
+          );
         })}
       </List>
     </Box>
diff --git a/src/app/(admin)/new_dashboard/components/SupportMessageList/types/index.ts b/src/app/(admin)/new_dashboard/components/SupportMessageList/types/index.ts
deleted file mode 100644
index 5eec3d5..0000000
--- a/src/app/(admin)/new_dashboard/components/SupportMessageList/types/index.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-type Chat = {
-  messages?: Message[];
-};
-type Message = {
-  isNote: boolean;
-  isSupportSender: boolean;
-  timeStamp: Date;
-  content: string;
-};
diff --git a/src/app/(admin)/new_dashboard/guides/components/Editor/index.tsx b/src/app/(admin)/new_dashboard/guides/components/Editor/index.tsx
index 700b8c3..1de4666 100644
--- a/src/app/(admin)/new_dashboard/guides/components/Editor/index.tsx
+++ b/src/app/(admin)/new_dashboard/guides/components/Editor/index.tsx
@@ -10,7 +10,6 @@ const DynamicReactQuill = dynamic(() => import("react-quill"));
 
 interface Props {
   initialTitle?: string;
-  initialIssue?: string;
   initialContent?: string;
   onSave: () => void;
   register: UseFormRegister<CreateGuideRequest>;
@@ -67,7 +66,6 @@ const GuideEditor = ({
         onChange={(e) => setValue("title", e.target.value)}
         sx={{ mb: 2 }}
       />
-      <TextField label="Issue" variant="outlined" fullWidth sx={{ mb: 2 }} />
       <DynamicReactQuill
         theme="snow"
         modules={modules}
diff --git a/src/app/(admin)/new_dashboard/guides/create/hooks/useCreateGuide.ts b/src/app/(admin)/new_dashboard/guides/create/hooks/useCreateGuide.ts
index d4e6f14..044ae87 100644
--- a/src/app/(admin)/new_dashboard/guides/create/hooks/useCreateGuide.ts
+++ b/src/app/(admin)/new_dashboard/guides/create/hooks/useCreateGuide.ts
@@ -1,7 +1,46 @@
-export const useCreateGuide = () => {
-  const handleSave = (content: string) => {
-    console.log("Saving new guide:", content);
+import { CreateGuideRequest } from "@/api/types/Guide";
+import { useGuideContext } from "@/app/providers/guide";
+import { useCreateGuide } from "@/hooks";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useForm } from "react-hook-form";
+import { schema } from "../validations/schema";
+import { useRouter } from "next/navigation";
+
+export const useGuide = () => {
+  const {
+    register,
+    handleSubmit,
+    setValue,
+    formState: { errors, isValid },
+  } = useForm<CreateGuideRequest>({
+    resolver: zodResolver(schema),
+    mode: "onChange",
+    reValidateMode: "onChange",
+  });
+  const { guide } = useGuideContext();
+
+  const router = useRouter();
+
+  const { mutate, isError, error, isPending } = useCreateGuide();
+
+  const onSubmit = (data: CreateGuideRequest) => {
+    mutate(data, {
+      onSuccess: (response) => {
+        console.log(response);
+        router.push("/new_dashboard/guides");
+      },
+    });
   };
 
-  return { handleSave };
+  return {
+    guide,
+    register,
+    setValue,
+    handleSubmit: handleSubmit(onSubmit),
+    errors,
+    isValid,
+    isError,
+    error,
+    isPending,
+  };
 };
diff --git a/src/app/(admin)/new_dashboard/guides/create/page.tsx b/src/app/(admin)/new_dashboard/guides/create/page.tsx
index 3312520..8f5bbb4 100644
--- a/src/app/(admin)/new_dashboard/guides/create/page.tsx
+++ b/src/app/(admin)/new_dashboard/guides/create/page.tsx
@@ -3,10 +3,10 @@ import PageContainer from "@/components/PageContainer";
 import DashboardCard from "../../shared/Card";
 import { Box } from "@mui/material";
 import GuideEditor from "../components/Editor";
-import { useCreateGuide } from "./hooks/useCreateGuide";
+import { useGuide } from "./hooks/useCreateGuide";
 
 const Page = () => {
-  const { handleSave } = useCreateGuide();
+  const { guide, register, error, handleSubmit, setValue } = useGuide();
   return (
     <PageContainer title="Create Guide">
       <Box
@@ -15,7 +15,14 @@ const Page = () => {
         }}
       >
         <DashboardCard title="Create Guide" fullHeight>
-          <GuideEditor onSave={handleSave} />
+          <GuideEditor
+            register={register}
+            setValue={setValue}
+            error={error}
+            onSave={handleSubmit}
+            initialTitle={guide?.title}
+            initialContent={guide?.contentHTML}
+          />
         </DashboardCard>
       </Box>
     </PageContainer>
diff --git a/src/app/(admin)/new_dashboard/guides/create/validations/schema.ts b/src/app/(admin)/new_dashboard/guides/create/validations/schema.ts
new file mode 100644
index 0000000..75b955a
--- /dev/null
+++ b/src/app/(admin)/new_dashboard/guides/create/validations/schema.ts
@@ -0,0 +1,6 @@
+import { z } from "zod";
+
+export const schema = z.object({
+  contentHTML: z.string(),
+  title: z.string(),
+});
diff --git a/src/app/(admin)/new_dashboard/types/index.ts b/src/app/(admin)/new_dashboard/types/index.ts
index 418dc9e..f3b6f73 100644
--- a/src/app/(admin)/new_dashboard/types/index.ts
+++ b/src/app/(admin)/new_dashboard/types/index.ts
@@ -1,2 +1 @@
 export * from "./contact";
-export * from "./message";
diff --git a/src/app/(admin)/new_dashboard/types/message.ts b/src/app/(admin)/new_dashboard/types/message.ts
deleted file mode 100644
index ffa5744..0000000
--- a/src/app/(admin)/new_dashboard/types/message.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export interface Message {
-  content: string;
-  isNote: boolean;
-  isSupportSender: boolean;
-  timeStamp: Date;
-}
diff --git a/src/app/(user)/new_chat/[userId]/components/UserMessageList/index.tsx b/src/app/(user)/new_chat/[userId]/components/UserMessageList/index.tsx
index 2762144..4a611ac 100644
--- a/src/app/(user)/new_chat/[userId]/components/UserMessageList/index.tsx
+++ b/src/app/(user)/new_chat/[userId]/components/UserMessageList/index.tsx
@@ -1,7 +1,8 @@
 import { Box, List } from "@mui/material";
 import { useSocket } from "@/app/hooks/useSocket";
 import { useMessageList } from "@/common/hooks/useMessageList";
-import { Message } from "@/common";
+import { MessageContainer } from "@/common";
+
 type Props = {
   chatId: number;
 };
@@ -22,7 +23,11 @@ const UserMessageList = ({ chatId }: Props) => {
         {messages.map((msg, index) => {
           if (msg.isNote) return null;
           return (
-            <Message message={msg} key={index} isSupport={false}></Message>
+            <MessageContainer
+              message={msg}
+              key={index}
+              isSupport={false}
+            ></MessageContainer>
           );
         })}
       </List>
diff --git a/src/common/components/Message/index.tsx b/src/common/components/Message/index.tsx
index e6c2699..6350fbd 100644
--- a/src/common/components/Message/index.tsx
+++ b/src/common/components/Message/index.tsx
@@ -1,11 +1,12 @@
 import { ListItem, Box, Typography } from "@mui/material";
+import { Message as MessageType } from "@/api/types/message";
 
-type IMessage = {
-  message: Message;
+type Props = {
+  message: MessageType;
   isSupport?: boolean;
 };
 
-export const Message = (messageProps: IMessage) => {
+export const MessageContainer = (messageProps: Props) => {
   const { message, isSupport = true } = messageProps;
   const { isNote, isSupportSender, timeStamp, content } = message;
   const chatMode = isSupport ? isSupportSender : !isSupportSender;
diff --git a/src/common/hooks/useMessageList.ts b/src/common/hooks/useMessageList.ts
index f5e3fcb..99501c3 100644
--- a/src/common/hooks/useMessageList.ts
+++ b/src/common/hooks/useMessageList.ts
@@ -1,7 +1,10 @@
 "use client";
+import { Chat } from "@/api/types/chat";
+import { Message } from "@/api/types/message";
 import { useOnFetch } from "@/common/hooks/useOnFetch";
 import { useChatById } from "@/hooks/api/chatHooks";
 import { ClientResponse, SuccessResponse } from "@/types";
+
 import { useEffect, useState } from "react";
 import { Socket } from "socket.io-client";
 
diff --git a/src/hooks/api/chatHooks.ts b/src/hooks/api/chatHooks.ts
index 545cc51..1fe558a 100644
--- a/src/hooks/api/chatHooks.ts
+++ b/src/hooks/api/chatHooks.ts
@@ -1,5 +1,6 @@
 import { ChatClient } from "@/api/chat.client";
-import { Chat, ClientResponse, SuccessResponse } from "@/types";
+import { ClientResponse, SuccessResponse } from "@/types";
+import { Chat } from "@/api/types/chat";
 import { useQuery } from "@tanstack/react-query";
 
 const chatClient = new ChatClient();
diff --git a/src/types/chat.type.ts b/src/types/chat.type.ts
deleted file mode 100644
index f295ed5..0000000
--- a/src/types/chat.type.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Message } from './message.type';
-import { User } from '@/api/types/User';
-export interface Chat {
-  id: number;
-  customerId: number;
-  isOpen: boolean;
-  startTime: Date;
-  endTime?: Date;
-  messages?: Message[];
-  user?: User;
-}
diff --git a/src/types/clientResponse.type.ts b/src/types/clientResponse.type.ts
index 0a0622b..1ce160e 100644
--- a/src/types/clientResponse.type.ts
+++ b/src/types/clientResponse.type.ts
@@ -9,3 +9,9 @@ export interface SuccessResponse<T> {
 }
 
 export type ClientResponse<T> = SuccessResponse<T> | ErrorResponse;
+
+export const isSuccessResponse = <T>(
+  response: ClientResponse<T>
+): response is SuccessResponse<T> => {
+  return (response as SuccessResponse<T>).data !== undefined;
+};
diff --git a/src/types/index.ts b/src/types/index.ts
index bb8489a..b63bb39 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -1,4 +1 @@
-export * from "./chat.type";
-export * from "./message.type";
-export * from "./user.type";
 export * from "./clientResponse.type";
diff --git a/src/types/message.type.ts b/src/types/message.type.ts
deleted file mode 100644
index 42b36ca..0000000
--- a/src/types/message.type.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-export interface Message {
-  messageId: number;
-  content: string;
-  isNote: boolean;
-  isSupportSender: boolean;
-  chatId: number;
-  timeStamp: Date;
-}
diff --git a/src/types/user.type.ts b/src/types/user.type.ts
deleted file mode 100644
index 6966da3..0000000
--- a/src/types/user.type.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-export interface User {
-  id: number;
-  username: string;
-  email: string;
-  roles: string[];
-}
-
-export interface UserRole {
-  roles: string[];
-}

From bceed9731276563cb79dfdf9f958332a1675ed7b Mon Sep 17 00:00:00 2001
From: Ori <ori100no@gmail.com>
Date: Mon, 26 Aug 2024 12:59:22 +0300
Subject: [PATCH 137/242] changed name to guide page and styled the chat

---
 src/app/(admin)/new_dashboard/guides/page.tsx | 4 ++--
 src/common/components/MessageInput/index.tsx  | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/app/(admin)/new_dashboard/guides/page.tsx b/src/app/(admin)/new_dashboard/guides/page.tsx
index bc3c22e..9ac734b 100644
--- a/src/app/(admin)/new_dashboard/guides/page.tsx
+++ b/src/app/(admin)/new_dashboard/guides/page.tsx
@@ -7,7 +7,7 @@ import SearchBar from "./components/SearchBar";
 import { useSearchGuides, useAllGuides } from "./hooks";
 import { Guide } from "@/api/types/Guide";
 
-const Page = () => {
+const GuidesListPage = () => {
   const { data: guideItems, isLoading, error, isError, isSuccess } = useAllGuides();
 
   let guides: Guide[] = [];
@@ -46,4 +46,4 @@ const Page = () => {
   );
 };
 
-export default Page;
+export default GuidesListPage;
diff --git a/src/common/components/MessageInput/index.tsx b/src/common/components/MessageInput/index.tsx
index ff8a5f3..d2705ea 100644
--- a/src/common/components/MessageInput/index.tsx
+++ b/src/common/components/MessageInput/index.tsx
@@ -65,7 +65,7 @@ const MessageInput = ({ chatId, isSupport = true }: MessageInputProps) => {
           autoFocus
           {...register("message")}
           multiline
-          minRows={5}
+          minRows={1}
           maxRows={10}
           InputProps={{
             style: { overflow: "hidden" },

From 43f7c609e0d14d36ed155638a899cafb012beb7e Mon Sep 17 00:00:00 2001
From: roiy0987 <roiy0987@gmail.com>
Date: Mon, 26 Aug 2024 13:02:11 +0300
Subject: [PATCH 138/242] refactor: Update imports for User and Message types,
 and fix routing in useLoginForm

---
 src/app/(public)/login/hooks/useLoginForm.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/app/(public)/login/hooks/useLoginForm.ts b/src/app/(public)/login/hooks/useLoginForm.ts
index 450af87..731a3c0 100644
--- a/src/app/(public)/login/hooks/useLoginForm.ts
+++ b/src/app/(public)/login/hooks/useLoginForm.ts
@@ -4,7 +4,8 @@ import { schema } from "../validations/schema";
 import { LoginRequest } from "@/api/types/login";
 import { useRouter } from "next/navigation";
 import { useLogin } from "@/hooks";
-import { UserRole, SuccessResponse } from "@/types";
+import { SuccessResponse } from "@/types";
+import { UserRole } from "@/api/types/User";
 
 const useLoginForm = () => {
   const {
@@ -25,11 +26,10 @@ const useLoginForm = () => {
     mutate(data, {
       onSuccess: (response) => {
         const { data: user } = response as SuccessResponse<UserRole>;
-
         if (user.roles.includes("admin")) {
-          router.push("/dashboard");
+          router.push("/new_dashboard");
         } else {
-          router.push("/");
+          router.push("/new_chat/" + user.id);
         }
       },
     });

From c44910541ab43060a8e5a68462c1b9a9c98438c1 Mon Sep 17 00:00:00 2001
From: Ori <ori100no@gmail.com>
Date: Mon, 26 Aug 2024 13:09:08 +0300
Subject: [PATCH 139/242] created a static chat popup and adjusted the css in
 message input to fit both chats

---
 .../components/ChatPopup/index.tsx            | 110 ++++++++++++++++++
 src/common/components/MessageInput/index.tsx  |   2 +-
 2 files changed, 111 insertions(+), 1 deletion(-)
 create mode 100644 src/app/(admin)/new_dashboard/components/ChatPopup/index.tsx

diff --git a/src/app/(admin)/new_dashboard/components/ChatPopup/index.tsx b/src/app/(admin)/new_dashboard/components/ChatPopup/index.tsx
new file mode 100644
index 0000000..f7286a8
--- /dev/null
+++ b/src/app/(admin)/new_dashboard/components/ChatPopup/index.tsx
@@ -0,0 +1,110 @@
+"use client";
+
+import React, { useState } from 'react';
+import { Box, IconButton, Paper, Typography } from '@mui/material';
+import { Chat, Close } from '@mui/icons-material';
+import SupportMessageList from '../SupportMessageList';
+import MessageInput from '@/common/components/MessageInput';
+import { Contact } from '../../types';
+
+interface Props {
+  selectedContact: Contact | null;
+}
+
+const ChatPopup = ({ selectedContact }: Props) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const toggleChat = () => {
+    setIsOpen(!isOpen);
+  };
+
+  return (
+    <Box
+      sx={{
+        position: 'fixed',
+        bottom: 0,
+        right: 0,
+        width: '100%',
+        display: 'flex',
+        justifyContent: 'flex-end',
+        alignItems: 'flex-end',
+        padding: 2,
+        boxSizing: 'border-box',
+        zIndex: 1000, // Ensures the chat popup is on top of other elements
+      }}
+    >
+      {/* Toggle Button */}
+      <IconButton
+        color="primary"
+        onClick={toggleChat}
+        sx={{
+          backgroundColor: 'primary.main',
+          color: 'white',
+          '&:hover': { backgroundColor: 'primary.dark' },
+        }}
+      >
+        {isOpen ? <Close /> : <Chat />}
+      </IconButton>
+
+      {/* Chat Popup */}
+      {isOpen && selectedContact && (
+        <Paper
+          elevation={6}
+          sx={{
+            width: 400, // Increased width
+            height: 500, // Increased height
+            display: 'flex',
+            flexDirection: 'column',
+            marginLeft: 2,
+            backgroundColor: 'background.paper',
+            boxShadow: 1,
+            borderRadius: 1,
+            overflow: 'hidden',
+            zIndex: 1000,
+          }}
+        >
+          {/* Chat Header */}
+          <Box
+            sx={{
+              backgroundColor: 'primary.main',
+              color: 'white',
+              padding: 2,
+              display: 'flex',
+              justifyContent: 'space-between',
+              alignItems: 'center',
+            }}
+          >
+            <Typography variant="h6">{selectedContact.username}</Typography>
+            <IconButton
+              onClick={toggleChat}
+              sx={{
+                color: 'white',
+              }}
+            >
+              <Close />
+            </IconButton>
+          </Box>
+
+          {/* Message List */}
+          <Box
+            sx={{
+              flexGrow: 1,
+              padding: 2,
+              overflowY: 'auto',
+              backgroundColor: 'background.default',
+            }}
+          >
+            <SupportMessageList chatId={selectedContact.chatId} />
+          </Box>
+
+          {/* Input and Send Button */}
+          <Box>
+            <MessageInput chatId={selectedContact.chatId} />
+          </Box>
+        </Paper>
+      )}
+    </Box>
+  );
+};
+
+export default ChatPopup;
diff --git a/src/common/components/MessageInput/index.tsx b/src/common/components/MessageInput/index.tsx
index d2705ea..c486b73 100644
--- a/src/common/components/MessageInput/index.tsx
+++ b/src/common/components/MessageInput/index.tsx
@@ -65,7 +65,7 @@ const MessageInput = ({ chatId, isSupport = true }: MessageInputProps) => {
           autoFocus
           {...register("message")}
           multiline
-          minRows={1}
+          minRows={2}
           maxRows={10}
           InputProps={{
             style: { overflow: "hidden" },

From 80f543c7d2842e1483f1067e083a59e660126ae1 Mon Sep 17 00:00:00 2001
From: Ori <ori100no@gmail.com>
Date: Mon, 26 Aug 2024 13:30:26 +0300
Subject: [PATCH 140/242] extracted providers into different files

---
 src/app/hooks/useSocket.ts                               | 8 ++++----
 src/app/layout.tsx                                       | 7 ++++---
 src/app/providers/QueryClient/provider.tsx               | 9 +++++++++
 .../SocketProvider/provider.tsx}                         | 7 +------
 4 files changed, 18 insertions(+), 13 deletions(-)
 create mode 100644 src/app/providers/QueryClient/provider.tsx
 rename src/app/{providers.tsx => providers/SocketProvider/provider.tsx} (75%)

diff --git a/src/app/hooks/useSocket.ts b/src/app/hooks/useSocket.ts
index e2590d3..7027c87 100644
--- a/src/app/hooks/useSocket.ts
+++ b/src/app/hooks/useSocket.ts
@@ -1,11 +1,11 @@
-import { useContext } from "react";
-import { Socket } from "socket.io-client";
-import { SocketContext } from "../providers";
+import { useContext } from 'react';
+import { Socket } from 'socket.io-client';
+import { SocketContext } from '../providers/SocketProvider/provider';
 
 export const useSocket = (): Socket => {
   const context = useContext(SocketContext);
   if (!context) {
-    throw new Error("useSocket must be used within a SocketProvider");
+    throw new Error('useSocket must be used within a SocketProvider');
   }
   return context;
 };
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 8c4f0ce..b1a9ef7 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -2,7 +2,8 @@
 
 import { baselightTheme } from "@/util/theme";
 import "./globals.css";
-import { Providers, SocketProvider } from "./providers";
+import { SocketProvider } from "./providers/SocketProvider/provider";
+import { QueryProvider } from "./providers/QueryClient/provider";
 import { CssBaseline, ThemeProvider } from "@mui/material";
 
 export default function RootLayout({
@@ -15,9 +16,9 @@ export default function RootLayout({
       <body style={{ height: "100vh" }}>
         <ThemeProvider theme={baselightTheme}>
           <CssBaseline />
-          <Providers>
+          <QueryProvider>
             <SocketProvider>{children}</SocketProvider>
-          </Providers>
+          </QueryProvider>
         </ThemeProvider>
       </body>
     </html>
diff --git a/src/app/providers/QueryClient/provider.tsx b/src/app/providers/QueryClient/provider.tsx
new file mode 100644
index 0000000..ed07491
--- /dev/null
+++ b/src/app/providers/QueryClient/provider.tsx
@@ -0,0 +1,9 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+
+export const queryClient = new QueryClient();
+
+export function QueryProvider({ children }: { children: React.ReactNode }) {
+  return (
+    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+  );
+}
\ No newline at end of file
diff --git a/src/app/providers.tsx b/src/app/providers/SocketProvider/provider.tsx
similarity index 75%
rename from src/app/providers.tsx
rename to src/app/providers/SocketProvider/provider.tsx
index c58fd7a..4f78a13 100644
--- a/src/app/providers.tsx
+++ b/src/app/providers/SocketProvider/provider.tsx
@@ -24,10 +24,5 @@ export const SocketProvider: React.FC<SocketProviderProps> = ({ children }) => {
   );
 };
 
-export const queryClient = new QueryClient();
 
-export function Providers({ children }: { children: React.ReactNode }) {
-  return (
-    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
-  );
-}
+

From 5cd5dbb5a408cc233baf41b6d0d059d254734306 Mon Sep 17 00:00:00 2001
From: Ori <ori100no@gmail.com>
Date: Mon, 26 Aug 2024 13:31:11 +0300
Subject: [PATCH 141/242] changed name to query provider

---
 src/app/layout.tsx                                            | 2 +-
 src/app/providers/{QueryClient => QueryProvider}/provider.tsx | 0
 2 files changed, 1 insertion(+), 1 deletion(-)
 rename src/app/providers/{QueryClient => QueryProvider}/provider.tsx (100%)

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index b1a9ef7..0acfbd1 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -3,7 +3,7 @@
 import { baselightTheme } from "@/util/theme";
 import "./globals.css";
 import { SocketProvider } from "./providers/SocketProvider/provider";
-import { QueryProvider } from "./providers/QueryClient/provider";
+import { QueryProvider } from "./providers/QueryProvider/provider";
 import { CssBaseline, ThemeProvider } from "@mui/material";
 
 export default function RootLayout({
diff --git a/src/app/providers/QueryClient/provider.tsx b/src/app/providers/QueryProvider/provider.tsx
similarity index 100%
rename from src/app/providers/QueryClient/provider.tsx
rename to src/app/providers/QueryProvider/provider.tsx

From af029d9928445cbae0c70c924ce9408fd60f5886 Mon Sep 17 00:00:00 2001
From: Ori <ori100no@gmail.com>
Date: Mon, 26 Aug 2024 14:04:17 +0300
Subject: [PATCH 142/242] made the contacts as a global context

---
 src/app/(admin)/new_dashboard/page.tsx        | 12 ++-----
 src/app/hooks/useGlobalContacts.ts            | 11 +++++++
 src/app/layout.tsx                            |  7 +++-
 .../SelectedContactProvider/provider.tsx      | 33 +++++++++++++++++++
 4 files changed, 52 insertions(+), 11 deletions(-)
 create mode 100644 src/app/hooks/useGlobalContacts.ts
 create mode 100644 src/app/providers/SelectedContactProvider/provider.tsx

diff --git a/src/app/(admin)/new_dashboard/page.tsx b/src/app/(admin)/new_dashboard/page.tsx
index 6216f6b..ff0d4a3 100644
--- a/src/app/(admin)/new_dashboard/page.tsx
+++ b/src/app/(admin)/new_dashboard/page.tsx
@@ -4,21 +4,13 @@ import DashboardCard from "./shared/Card";
 import { Box } from "@mui/material";
 import ContactList from "./components/ContactList";
 import ChatHeader from "./components/ChatHeader";
-import { useContacts, useSelectedContact } from "./hooks";
-import { useSocket } from "@/app/hooks/useSocket";
 import SupportMessageList from "./components/SupportMessageList";
 import MessageInput from "@/common/components/MessageInput";
+import { useGlobalContacts } from "@/app/hooks/useGlobalContacts";
 
 const Page = () => {
-  const socket = useSocket();
-  const { selectedContact, handleContactSelect } = useSelectedContact({
-    socket,
-  });
-  const { contacts } = useContacts({
-    socket,
-    handleContactSelect,
-  });
 
+ const {selectedContact, handleContactSelect, contacts} = useGlobalContacts();
   return (
     <PageContainer title="Dashboard">
       <DashboardCard title="Chat">
diff --git a/src/app/hooks/useGlobalContacts.ts b/src/app/hooks/useGlobalContacts.ts
new file mode 100644
index 0000000..72ccc94
--- /dev/null
+++ b/src/app/hooks/useGlobalContacts.ts
@@ -0,0 +1,11 @@
+import { useContext } from 'react';
+import { SelectedContactContextValue } from '../providers/SelectedContactProvider/provider';
+import { SelectedContactContext } from '../providers/SelectedContactProvider/provider';
+
+export const useGlobalContacts = (): SelectedContactContextValue => {
+  const context = useContext(SelectedContactContext);
+  if (!context) {
+    throw new Error('useGlobalSelectedContact must be used within a SelectedContactProvider');
+  }
+  return context;
+};
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 0acfbd1..735e270 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -5,6 +5,7 @@ import "./globals.css";
 import { SocketProvider } from "./providers/SocketProvider/provider";
 import { QueryProvider } from "./providers/QueryProvider/provider";
 import { CssBaseline, ThemeProvider } from "@mui/material";
+import { SelectedContactProvider } from "./providers/SelectedContactProvider/provider";
 
 export default function RootLayout({
   children,
@@ -17,7 +18,11 @@ export default function RootLayout({
         <ThemeProvider theme={baselightTheme}>
           <CssBaseline />
           <QueryProvider>
-            <SocketProvider>{children}</SocketProvider>
+            <SocketProvider>
+              <SelectedContactProvider>
+                {children}
+              </SelectedContactProvider>
+            </SocketProvider>
           </QueryProvider>
         </ThemeProvider>
       </body>
diff --git a/src/app/providers/SelectedContactProvider/provider.tsx b/src/app/providers/SelectedContactProvider/provider.tsx
new file mode 100644
index 0000000..97a6423
--- /dev/null
+++ b/src/app/providers/SelectedContactProvider/provider.tsx
@@ -0,0 +1,33 @@
+import { Contact } from '@/app/(admin)/new_dashboard/types';
+import { useSocket } from '@/app/hooks/useSocket';
+import React, { createContext, useState, useContext, ReactNode } from 'react';
+import {useContacts, useSelectedContact} from '@/app/(admin)/new_dashboard/hooks';
+interface ContactProviderProps {
+    children: ReactNode;
+}
+
+export interface SelectedContactContextValue {
+  selectedContact: Contact | null;
+  handleContactSelect: (contact: Contact) => void;
+  contacts: Contact[];
+}
+
+export const SelectedContactContext = createContext<SelectedContactContextValue | null>(null);
+
+export const SelectedContactProvider: React.FC<ContactProviderProps> = ({ children }) => {
+  const socket = useSocket();
+  const { selectedContact, handleContactSelect } = useSelectedContact({
+    socket,
+  });
+  const { contacts } = useContacts({
+    socket,
+    handleContactSelect,
+  });
+  return (
+    <SelectedContactContext.Provider value={{ selectedContact, handleContactSelect,contacts }}>
+      {children}
+    </SelectedContactContext.Provider>
+  );
+};
+
+export const useGlobalSelectedContact = () => useContext(SelectedContactContext);

From e65297ab059a754e5fed8927ee15dd59b0081095 Mon Sep 17 00:00:00 2001
From: Ori <ori100no@gmail.com>
Date: Mon, 26 Aug 2024 14:04:42 +0300
Subject: [PATCH 143/242] added space

---
 src/app/(admin)/new_dashboard/page.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/app/(admin)/new_dashboard/page.tsx b/src/app/(admin)/new_dashboard/page.tsx
index ff0d4a3..6532aff 100644
--- a/src/app/(admin)/new_dashboard/page.tsx
+++ b/src/app/(admin)/new_dashboard/page.tsx
@@ -11,6 +11,7 @@ import { useGlobalContacts } from "@/app/hooks/useGlobalContacts";
 const Page = () => {
 
  const {selectedContact, handleContactSelect, contacts} = useGlobalContacts();
+ 
   return (
     <PageContainer title="Dashboard">
       <DashboardCard title="Chat">

From 5f9c4cc3c9f1d1744155413cded656ea97c08f06 Mon Sep 17 00:00:00 2001
From: Ori <ori100no@gmail.com>
Date: Mon, 26 Aug 2024 14:37:14 +0300
Subject: [PATCH 144/242] created the chat popup

---
 src/app/(admin)/new_dashboard/guides/[id]/page.tsx | 7 +++++++
 src/app/(admin)/new_dashboard/guides/page.tsx      | 6 ++++++
 2 files changed, 13 insertions(+)

diff --git a/src/app/(admin)/new_dashboard/guides/[id]/page.tsx b/src/app/(admin)/new_dashboard/guides/[id]/page.tsx
index e9faa2e..aa52110 100644
--- a/src/app/(admin)/new_dashboard/guides/[id]/page.tsx
+++ b/src/app/(admin)/new_dashboard/guides/[id]/page.tsx
@@ -9,6 +9,8 @@ import { Typography, CircularProgress, Alert, Box, Divider } from "@mui/material
 import ReviewList from "../components/ReviewList";
 import parse from "html-react-parser";
 import "quill/dist/quill.snow.css";
+import { useGlobalContacts } from "@/app/hooks/useGlobalContacts";
+import ChatPopup from "../../components/ChatPopup";
 
 const GuidePage: React.FC = () => {
   const params = useParams();
@@ -17,6 +19,8 @@ const GuidePage: React.FC = () => {
 
   const { data: response, isLoading, isError, error, isSuccess } = useGuide(id ?? 0);
 
+  const {selectedContact} = useGlobalContacts();
+
   if (isLoading) {
     return <CircularProgress />;
   }
@@ -34,6 +38,7 @@ const GuidePage: React.FC = () => {
     }
 
     return (
+      <>
       <PageContainer title={guide.title}>
         <DashboardCard title={guide.title} subtitle={creatorAndDateInfo}>
         <div className="quill-content">
@@ -43,6 +48,8 @@ const GuidePage: React.FC = () => {
         <Divider sx={{ mt: 2, mb: 2, border: "none" }} />
         <ReviewList guideId={guide.id} reviews={guide.reviews ?? []} />
       </PageContainer>
+      {selectedContact && <ChatPopup selectedContact={selectedContact} />}
+      </>
     );
   }
 
diff --git a/src/app/(admin)/new_dashboard/guides/page.tsx b/src/app/(admin)/new_dashboard/guides/page.tsx
index 9ac734b..b7954da 100644
--- a/src/app/(admin)/new_dashboard/guides/page.tsx
+++ b/src/app/(admin)/new_dashboard/guides/page.tsx
@@ -6,9 +6,12 @@ import GuideList from "./components/GuideList";
 import SearchBar from "./components/SearchBar";
 import { useSearchGuides, useAllGuides } from "./hooks";
 import { Guide } from "@/api/types/Guide";
+import ChatPopup from "../components/ChatPopup";
+import { useGlobalContacts } from "@/app/hooks/useGlobalContacts";
 
 const GuidesListPage = () => {
   const { data: guideItems, isLoading, error, isError, isSuccess } = useAllGuides();
+  const {selectedContact} = useGlobalContacts();
 
   let guides: Guide[] = [];
 
@@ -21,6 +24,7 @@ const GuidesListPage = () => {
   );
 
   return (
+    <>
     <PageContainer title="Guides">
       <DashboardCard title="Guides">
         <Box>
@@ -43,6 +47,8 @@ const GuidesListPage = () => {
         </Box>
       </DashboardCard>
     </PageContainer>
+    {selectedContact && <ChatPopup selectedContact={selectedContact} />}
+    </>
   );
 };
 

From 92772d8efa1c421f5e3bc6a87afb11cc5db87326 Mon Sep 17 00:00:00 2001
From: roiy0987 <roiy0987@gmail.com>
Date: Mon, 26 Aug 2024 15:01:46 +0300
Subject: [PATCH 145/242] refactor: Update useContacts hook to handle
 selectedContact state and socket events

---
 .../new_dashboard/hooks/useContacts.ts        | 49 ++++++++++++++-----
 .../new_dashboard/hooks/useSelectedContact.ts | 30 ------------
 2 files changed, 38 insertions(+), 41 deletions(-)
 delete mode 100644 src/app/(admin)/new_dashboard/hooks/useSelectedContact.ts

diff --git a/src/app/(admin)/new_dashboard/hooks/useContacts.ts b/src/app/(admin)/new_dashboard/hooks/useContacts.ts
index 8126223..94a0dc1 100644
--- a/src/app/(admin)/new_dashboard/hooks/useContacts.ts
+++ b/src/app/(admin)/new_dashboard/hooks/useContacts.ts
@@ -1,19 +1,44 @@
-'use client';
-import { useEffect, useState } from 'react';
-import { Chat, ClientResponse, SuccessResponse } from '@/types';
-import { useChats } from '@/hooks/api/chatHooks';
-import { useOnFetch } from '@/common/hooks/useOnFetch';
-import { Socket } from 'socket.io-client';
-import { Contact } from '../types';
+"use client";
+import { useEffect, useState } from "react";
+import { ClientResponse, SuccessResponse } from "@/types";
+import { useChats } from "@/hooks/api/chatHooks";
+import { useOnFetch } from "@/common/hooks/useOnFetch";
+import { Socket } from "socket.io-client";
+import { Contact } from "../types";
+import { Chat } from "@/api/types/chat";
 
 type Props = {
   socket: Socket;
-  handleContactSelect: (contact: Contact) => void;
 };
 
-export const useContacts = ({ socket, handleContactSelect }: Props) => {
+export const useContacts = ({ socket }: Props) => {
   const [contacts, setContacts] = useState<Contact[]>([]);
   const { isError, data, error } = useChats();
+  const [selectedContact, setSelectedContact] = useState<Contact | null>(null);
+
+  useEffect(() => {
+    if (socket && selectedContact && !selectedContact.isOpen) {
+      setContacts(
+        contacts.map((contact) =>
+          contact.chatId === selectedContact.chatId
+            ? { ...contact, isOpen: false }
+            : contact
+        )
+      );
+      return;
+    }
+    if (socket && selectedContact) {
+      socket.emit("join", { chatId: selectedContact.chatId });
+      return () => {
+        socket.emit("leave", { chatId: selectedContact.chatId });
+      };
+    }
+  }, [selectedContact]);
+
+  const handleContactSelect = (contact: Contact) => {
+    console.log(contact);
+    setSelectedContact(contact);
+  };
 
   useOnFetch(
     (clientResponse: ClientResponse<Chat[]>) => {
@@ -25,7 +50,7 @@ export const useContacts = ({ socket, handleContactSelect }: Props) => {
         const contacts = chats.map((chat) => ({
           chatId: chat.id,
           userId: chat.user?.id ?? 0,
-          username: chat.user?.username ?? 'a',
+          username: chat.user?.username ?? "a",
           isOpen: chat.isOpen,
         }));
         setContacts(contacts);
@@ -38,7 +63,7 @@ export const useContacts = ({ socket, handleContactSelect }: Props) => {
 
   useEffect(() => {
     if (socket && contacts) {
-      socket.on('chatCreated', (chat: Chat) => {
+      socket.on("chatCreated", (chat: Chat) => {
         const contact = {
           chatId: chat.id,
           userId: chat.customerId,
@@ -52,5 +77,7 @@ export const useContacts = ({ socket, handleContactSelect }: Props) => {
 
   return {
     contacts,
+    selectedContact,
+    handleContactSelect,
   };
 };
diff --git a/src/app/(admin)/new_dashboard/hooks/useSelectedContact.ts b/src/app/(admin)/new_dashboard/hooks/useSelectedContact.ts
deleted file mode 100644
index 172cabb..0000000
--- a/src/app/(admin)/new_dashboard/hooks/useSelectedContact.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-"use client";
-import { useEffect, useState } from "react";
-import { Socket } from "socket.io-client";
-import { Contact } from "../types";
-
-type Props = {
-  socket: Socket;
-};
-
-export const useSelectedContact = ({ socket }: Props) => {
-  const [selectedContact, setSelectedContact] = useState<Contact | null>(null);
-
-  useEffect(() => {
-    if (socket && selectedContact) {
-      socket.emit("join", { chatId: selectedContact.chatId });
-      return () => {
-        socket.emit("leave", { chatId: selectedContact.chatId });
-      };
-    }
-  }, [selectedContact]);
-
-  const handleContactSelect = (contact: Contact) => {
-    setSelectedContact(contact);
-  };
-
-  return {
-    selectedContact,
-    handleContactSelect,
-  };
-};

From f36bd08a12eb3d7cbe751ca1e380f6efe3e4fa10 Mon Sep 17 00:00:00 2001
From: roiy0987 <roiy0987@gmail.com>
Date: Mon, 26 Aug 2024 15:02:06 +0300
Subject: [PATCH 146/242] refactor: Update HTTP method in BaseClient to use
 PATCH instead of PUT

---
 src/api/base.client.ts |  6 +++---
 src/api/chat.client.ts | 12 +++++++++---
 2 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/src/api/base.client.ts b/src/api/base.client.ts
index 80f4a6d..a7cc738 100644
--- a/src/api/base.client.ts
+++ b/src/api/base.client.ts
@@ -21,7 +21,7 @@ export class BaseClient {
 
   private async request<T>(
     endpoint: string,
-    method: "GET" | "POST" | "PUT" | "DELETE",
+    method: "GET" | "POST" | "PATCH" | "DELETE",
     body?: any,
     options: RequestInit = {}
   ): Promise<ClientResponse<T>> {
@@ -92,12 +92,12 @@ export class BaseClient {
     return this.request<T>(endpoint, "POST", body, options);
   }
 
-  protected async put<T>(
+  protected async patch<T>(
     endpoint: string,
     body: any,
     options: RequestInit = {}
   ): Promise<ClientResponse<T>> {
-    return this.request<T>(endpoint, "PUT", body, options);
+    return this.request<T>(endpoint, "PATCH", body, options);
   }
 
   protected async delete<T>(
diff --git a/src/api/chat.client.ts b/src/api/chat.client.ts
index 063563b..6f7b0c9 100644
--- a/src/api/chat.client.ts
+++ b/src/api/chat.client.ts
@@ -1,11 +1,17 @@
-import { BaseClient } from './base.client';
-import { ChatRequest, ChatResponse } from './types/chat';
+import { BaseClient } from "./base.client";
+import { ChatRequest, ChatRequestUpdate, ChatResponse } from "./types/chat";
 
 export class ChatClient extends BaseClient {
   async chats() {
-    return this.get<ChatResponse[]>('chats');
+    return this.get<ChatResponse[]>("chats");
   }
   async chatById(chatRequest: ChatRequest) {
     return this.get<ChatResponse>(`chats/${chatRequest.id}`);
   }
+  async closeChat(chatRequestUpdate: ChatRequestUpdate) {
+    return this.patch<ChatResponse>(`chats/${chatRequestUpdate.id}`, {
+      isOpen: false,
+      customerId: chatRequestUpdate.customerId,
+    });
+  }
 }

From 778a59d03d35e830788c1686f0cabd38d898cc0c Mon Sep 17 00:00:00 2001
From: roiy0987 <roiy0987@gmail.com>
Date: Mon, 26 Aug 2024 15:02:16 +0300
Subject: [PATCH 147/242] refactor: Add ChatRequestUpdate type for partial
 updates to ChatRequest

---
 src/api/types/chat.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/api/types/chat.ts b/src/api/types/chat.ts
index a4b1158..55be656 100644
--- a/src/api/types/chat.ts
+++ b/src/api/types/chat.ts
@@ -18,4 +18,6 @@ export type ChatRequest = {
   id: number;
 };
 
+export type ChatRequestUpdate = Partial<Chat>;
+
 export type ChatResponse = Chat;

From b4fc667a8d6c9270b4df52e2ec88728fa2863b61 Mon Sep 17 00:00:00 2001
From: roiy0987 <roiy0987@gmail.com>
Date: Mon, 26 Aug 2024 15:03:09 +0300
Subject: [PATCH 148/242] refactor: Update useGuide hook to handle closing chat
 and generating guide

---
 .../components/ChatHeader/hooks/useGuide.ts   | 33 +++++++++++++++++--
 .../components/ChatHeader/index.tsx           | 28 ++++++++++------
 src/app/(admin)/new_dashboard/hooks/index.ts  |  1 -
 src/app/(admin)/new_dashboard/page.tsx        | 15 ++++-----
 4 files changed, 55 insertions(+), 22 deletions(-)

diff --git a/src/app/(admin)/new_dashboard/components/ChatHeader/hooks/useGuide.ts b/src/app/(admin)/new_dashboard/components/ChatHeader/hooks/useGuide.ts
index 66ce99d..dc83808 100644
--- a/src/app/(admin)/new_dashboard/components/ChatHeader/hooks/useGuide.ts
+++ b/src/app/(admin)/new_dashboard/components/ChatHeader/hooks/useGuide.ts
@@ -5,16 +5,42 @@ import { SuccessResponse, ErrorResponse, isSuccessResponse } from "@/types";
 import { useRouter } from "next/navigation";
 import { Chat } from "@/api/types/chat";
 import { ModelCreateGuideResponse } from "@/api/types/model";
+import { Contact } from "../../../types";
 
 const modelClient = new ModelClient();
-const chatModel = new ChatClient();
+const chatClient = new ChatClient();
 
-export const useGuide = () => {
+interface Props {
+  handleContactSelect: (contact: Contact) => void;
+  selectedContact: Contact | null;
+}
+
+export const useGuide = ({ handleContactSelect, selectedContact }: Props) => {
   const router = useRouter();
   const { setGuide } = useGuideContext();
 
+  async function handleCloseChat(chatId: number): Promise<void> {
+    const clientResponse = await chatClient.closeChat({
+      id: chatId,
+      customerId: selectedContact?.userId,
+    });
+    if (!isSuccessResponse(clientResponse)) {
+      const errorResponse = clientResponse as ErrorResponse;
+      console.error(errorResponse.error);
+      return;
+    }
+    if (selectedContact) {
+      handleContactSelect({
+        chatId: selectedContact.chatId,
+        isOpen: false,
+        userId: selectedContact.userId,
+        username: selectedContact.username,
+      });
+    }
+  }
+
   async function handleGenerateGuide(chatId: number): Promise<void> {
-    const chatResponse = await chatModel.chatById({
+    const chatResponse = await chatClient.chatById({
       id: chatId,
     });
 
@@ -51,5 +77,6 @@ export const useGuide = () => {
 
   return {
     handleGenerateGuide,
+    handleCloseChat,
   };
 };
diff --git a/src/app/(admin)/new_dashboard/components/ChatHeader/index.tsx b/src/app/(admin)/new_dashboard/components/ChatHeader/index.tsx
index 665beeb..28f045c 100644
--- a/src/app/(admin)/new_dashboard/components/ChatHeader/index.tsx
+++ b/src/app/(admin)/new_dashboard/components/ChatHeader/index.tsx
@@ -1,15 +1,19 @@
 import { Box, Typography, Button } from "@mui/material";
 import SmartToyIcon from "@mui/icons-material/SmartToy";
-import SnoozeIcon from "@mui/icons-material/Snooze";
+import DoneIcon from "@mui/icons-material/Done";
 import { Contact } from "../../types";
 import { useGuide } from "./hooks/useGuide";
 
 type Props = {
   selectedContact: Contact | null;
+  handleContactSelect: (contact: Contact) => void;
 };
 
-const ChatHeader = ({ selectedContact }: Props) => {
-  const { handleGenerateGuide } = useGuide();
+const ChatHeader = ({ selectedContact, handleContactSelect }: Props) => {
+  const { handleGenerateGuide, handleCloseChat } = useGuide({
+    handleContactSelect,
+    selectedContact,
+  });
   return (
     <Box
       sx={{
@@ -25,19 +29,23 @@ const ChatHeader = ({ selectedContact }: Props) => {
       {selectedContact && (
         <>
           <Typography variant="h6">{selectedContact.username}</Typography>
-          <Box
-            onClick={() => handleGenerateGuide(selectedContact.chatId)}
-            sx={{ display: "flex", alignItems: "center", gap: 1 }}
-          >
-            <Button variant="contained" startIcon={<SmartToyIcon />}>
+          <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
+            <Button
+              variant="contained"
+              startIcon={<SmartToyIcon />}
+              onClick={() => handleGenerateGuide(selectedContact.chatId)}
+            >
               Generate Guide
             </Button>
+
             <Button
               variant="outlined"
-              startIcon={<SnoozeIcon />}
+              startIcon={<DoneIcon />}
               sx={{ textTransform: "none" }}
+              disabled={!selectedContact.isOpen}
+              onClick={() => handleCloseChat(selectedContact.chatId)}
             >
-              Snooze
+              Close
             </Button>
           </Box>
         </>
diff --git a/src/app/(admin)/new_dashboard/hooks/index.ts b/src/app/(admin)/new_dashboard/hooks/index.ts
index 34d7f23..34eddca 100644
--- a/src/app/(admin)/new_dashboard/hooks/index.ts
+++ b/src/app/(admin)/new_dashboard/hooks/index.ts
@@ -1,2 +1 @@
 export * from "./useContacts";
-export * from "./useSelectedContact";
diff --git a/src/app/(admin)/new_dashboard/page.tsx b/src/app/(admin)/new_dashboard/page.tsx
index 6216f6b..4b185fb 100644
--- a/src/app/(admin)/new_dashboard/page.tsx
+++ b/src/app/(admin)/new_dashboard/page.tsx
@@ -4,20 +4,16 @@ import DashboardCard from "./shared/Card";
 import { Box } from "@mui/material";
 import ContactList from "./components/ContactList";
 import ChatHeader from "./components/ChatHeader";
-import { useContacts, useSelectedContact } from "./hooks";
+import { useContacts } from "./hooks";
 import { useSocket } from "@/app/hooks/useSocket";
 import SupportMessageList from "./components/SupportMessageList";
 import MessageInput from "@/common/components/MessageInput";
 
 const Page = () => {
   const socket = useSocket();
-  const { selectedContact, handleContactSelect } = useSelectedContact({
+  const { contacts, selectedContact, handleContactSelect } = useContacts({
     socket,
   });
-  const { contacts } = useContacts({
-    socket,
-    handleContactSelect,
-  });
 
   return (
     <PageContainer title="Dashboard">
@@ -51,7 +47,10 @@ const Page = () => {
             >
               {/* Chat Header */}
               {selectedContact && (
-                <ChatHeader selectedContact={selectedContact} />
+                <ChatHeader
+                  selectedContact={selectedContact}
+                  handleContactSelect={handleContactSelect}
+                />
               )}
 
               {/* Message List */}
@@ -60,7 +59,7 @@ const Page = () => {
               )}
 
               {/* Input and Send Button */}
-              {selectedContact && (
+              {selectedContact && selectedContact.isOpen && (
                 <MessageInput chatId={selectedContact.chatId} />
               )}
             </Box>

From f74ebda4059ade8262be5a8372a4ba342abdb26a Mon Sep 17 00:00:00 2001
From: Ori <ori100no@gmail.com>
Date: Tue, 27 Aug 2024 12:41:31 +0300
Subject: [PATCH 149/242] fixed bug in displaying the chat popup

---
 .../new_dashboard/guides/[id]/page.tsx        | 17 ++++++++--------
 .../guides/components/AddReviewBox/index.tsx  | 20 +++++++++++--------
 .../guides/components/ReviewList/index.tsx    | 15 +++++++-------
 .../guides/hooks/useAddReviewForm.ts          |  8 ++++----
 4 files changed, 31 insertions(+), 29 deletions(-)

diff --git a/src/app/(admin)/new_dashboard/guides/[id]/page.tsx b/src/app/(admin)/new_dashboard/guides/[id]/page.tsx
index aa52110..fa1465b 100644
--- a/src/app/(admin)/new_dashboard/guides/[id]/page.tsx
+++ b/src/app/(admin)/new_dashboard/guides/[id]/page.tsx
@@ -38,18 +38,17 @@ const GuidePage: React.FC = () => {
     }
 
     return (
-      <>
-      <PageContainer title={guide.title}>
-        <DashboardCard title={guide.title} subtitle={creatorAndDateInfo}>
-        <div className="quill-content">
+      <Box>
+        <Typography variant="h1">{guide.title}</Typography>
+        <Typography variant="subtitle1">{creatorAndDateInfo}</Typography>
+        <Box className="quill-content">
           {parse(guide.contentHTML)}
-        </div>
-        </DashboardCard>
+        </Box>
         <Divider sx={{ mt: 2, mb: 2, border: "none" }} />
         <ReviewList guideId={guide.id} reviews={guide.reviews ?? []} />
-      </PageContainer>
-      {selectedContact && <ChatPopup selectedContact={selectedContact} />}
-      </>
+        <Divider sx={{ mt: 5, mb: 5, border: "none" }} />
+        {selectedContact && <ChatPopup selectedContact={selectedContact} />}
+      </Box>
     );
   }
 
diff --git a/src/app/(admin)/new_dashboard/guides/components/AddReviewBox/index.tsx b/src/app/(admin)/new_dashboard/guides/components/AddReviewBox/index.tsx
index bd1464a..6a70175 100644
--- a/src/app/(admin)/new_dashboard/guides/components/AddReviewBox/index.tsx
+++ b/src/app/(admin)/new_dashboard/guides/components/AddReviewBox/index.tsx
@@ -1,6 +1,6 @@
 "use client";
 import React from 'react';
-import { Box, Typography, Rating, TextField, Button } from '@mui/material';
+import { Box, Typography, Rating, TextField, Button, CircularProgress, Alert } from '@mui/material';
 import useAddReviewForm from '../../hooks/useAddReviewForm';
 
 interface AddReviewBoxProps {
@@ -9,7 +9,6 @@ interface AddReviewBoxProps {
 
 const AddReviewBox: React.FC<AddReviewBoxProps> = ({guideId}) => {
 
-
   const {
     comment,
     setComment,
@@ -24,15 +23,20 @@ const AddReviewBox: React.FC<AddReviewBoxProps> = ({guideId}) => {
   } = useAddReviewForm(guideId);
 
 
+  if(!guideId){
+    return <Alert severity="error">Guide not found</Alert>
+  }
+
   return (
-    <Box display="flex" flexDirection="column" alignItems="flex-start" sx={{ width: '100%' , mt:2}}>
+    <Box display="flex" flexDirection="column" alignItems="flex-start" sx={{ mt:2}}>
       <Typography variant="h6" >Add Your Review:</Typography>
       <Box mb={2} mt={2}>
         <Rating
           name="stars"
           value={stars}
-          onChange={(event, newValue) => setStars(newValue ?? 1)}
-          sx={{color: "gold"}}
+          onChange={(event, newValue) => {
+            setStars(newValue ?? 1)
+          }}
         />
       </Box>
       <TextField
@@ -43,16 +47,16 @@ const AddReviewBox: React.FC<AddReviewBoxProps> = ({guideId}) => {
         variant="outlined"
         value={comment}
         onChange={(e) => setComment(e.target.value)}
-        disabled={isPending}
       />
       <Box mt={2}>
         <Button
           variant="contained"
           color="primary"
           onClick={handleSubmit}
-          disabled={isPending || stars === null}
+          disabled={isPending}
+          sx={{mb:2}}
         >
-          {isPending ? 'Submitting...' : 'Submit Review'}
+        {isPending ? <CircularProgress size={24} /> : 'Submit'}
         </Button>
       </Box>
       {validationError && (
diff --git a/src/app/(admin)/new_dashboard/guides/components/ReviewList/index.tsx b/src/app/(admin)/new_dashboard/guides/components/ReviewList/index.tsx
index 9166f41..f98802b 100644
--- a/src/app/(admin)/new_dashboard/guides/components/ReviewList/index.tsx
+++ b/src/app/(admin)/new_dashboard/guides/components/ReviewList/index.tsx
@@ -30,7 +30,7 @@ const ReviewList: React.FC<ReviewListProps> = ({ reviews, guideId }) => {
   }
 
   let reviewsContext = !reviews.length ? (
-    <Typography>No reviews available</Typography>
+    <Typography>No reviews available yet</Typography>
   ) : (
     reviews.slice(0, visibleCount).map((review, index) => (
       <ReviewCard key={index} review={review} />
@@ -38,12 +38,13 @@ const ReviewList: React.FC<ReviewListProps> = ({ reviews, guideId }) => {
   );
 
   return (
-    <PageContainer title="Reviews">
-      <DashboardCard title="Reviews">
         <Box mt={2}>
-          <Divider />
+          <Typography variant="h1" mt={2}>
+            Reviews
+          </Typography>
+          <Divider sx={{mt:2 , mb:2}}/>
           {reviewsContext}
-          {!!reviews.length &&(
+          {!!reviews.length && reviews.length !== 1 &&(
           <Box display="flex" justifyContent="center" width="100%" mt={2}>
             <Button onClick={()=>{
               visibleCount === reviews.length ? showLessReviews() : showMoreReviews();
@@ -51,10 +52,8 @@ const ReviewList: React.FC<ReviewListProps> = ({ reviews, guideId }) => {
               {visibleCount === reviews.length ? "Show Less" : "Show More"}
             </Button>
           </Box>)}
-          <AddReviewBox guideId={guideId} />
+          <AddReviewBox guideId={guideId ?? 0} />
         </Box>
-      </DashboardCard>
-    </PageContainer>
   );
 };
 
diff --git a/src/app/(admin)/new_dashboard/guides/hooks/useAddReviewForm.ts b/src/app/(admin)/new_dashboard/guides/hooks/useAddReviewForm.ts
index 071ca10..36ade47 100644
--- a/src/app/(admin)/new_dashboard/guides/hooks/useAddReviewForm.ts
+++ b/src/app/(admin)/new_dashboard/guides/hooks/useAddReviewForm.ts
@@ -4,15 +4,15 @@ import { CreateReviewDto, CreateReviewSchema } from '../dto/CreateReviewDto';
 
 const useAddReviewForm = (guideId: number) => {
   const [comment, setComment] = useState('');
-  const [stars, setStars] = useState(0);
+  const [stars, setStars] = useState(1);
   const [validationError, setValidationError] = useState<string | null>(null);
   const { mutate, isError, error, isPending, isSuccess } = useAddReview();
 
   const handleSubmit = () => {
     const newReview: CreateReviewDto = {
       guideId,
-      rating: stars ?? 0,
-      comment: comment.trim() || undefined,
+      rating: stars ?? 1,
+      comment: comment.trim() || '',
     };
     const validation = CreateReviewSchema.safeParse(newReview);
     if (!validation.success) {
@@ -25,7 +25,7 @@ const useAddReviewForm = (guideId: number) => {
     mutate(validation.data, {
       onSuccess: () => {
         setComment('');
-        setStars(0);
+        setStars(1);
       },
     });
   };

From 3ec4871b60455caefd0e939772464da2a6b6e311 Mon Sep 17 00:00:00 2001
From: Ori <ori100no@gmail.com>
Date: Tue, 27 Aug 2024 12:43:26 +0300
Subject: [PATCH 150/242] removed x

---
 .../new_dashboard/components/ChatPopup/index.tsx     | 12 ++----------
 1 file changed, 2 insertions(+), 10 deletions(-)

diff --git a/src/app/(admin)/new_dashboard/components/ChatPopup/index.tsx b/src/app/(admin)/new_dashboard/components/ChatPopup/index.tsx
index f7286a8..dfac68d 100644
--- a/src/app/(admin)/new_dashboard/components/ChatPopup/index.tsx
+++ b/src/app/(admin)/new_dashboard/components/ChatPopup/index.tsx
@@ -51,8 +51,8 @@ const ChatPopup = ({ selectedContact }: Props) => {
         <Paper
           elevation={6}
           sx={{
-            width: 400, // Increased width
-            height: 500, // Increased height
+            width: 400, 
+            height: 500, 
             display: 'flex',
             flexDirection: 'column',
             marginLeft: 2,
@@ -75,14 +75,6 @@ const ChatPopup = ({ selectedContact }: Props) => {
             }}
           >
             <Typography variant="h6">{selectedContact.username}</Typography>
-            <IconButton
-              onClick={toggleChat}
-              sx={{
-                color: 'white',
-              }}
-            >
-              <Close />
-            </IconButton>
           </Box>
 
           {/* Message List */}

From 03c20aa7a70178068b92223cfb0ae0821f539190 Mon Sep 17 00:00:00 2001
From: Ori <ori100no@gmail.com>
Date: Tue, 27 Aug 2024 17:28:19 +0300
Subject: [PATCH 151/242] resolved some of the changes about naming

---
 src/app/(admin)/new_dashboard/guides/[id]/page.tsx |  4 ++--
 .../guides/components/ReviewList/index.tsx         |  4 +---
 .../new_dashboard/guides/hooks/useAddReviewForm.ts | 10 +++++-----
 src/app/(admin)/new_dashboard/guides/page.tsx      |  4 ++--
 src/app/(admin)/new_dashboard/page.tsx             |  4 ++--
 src/app/hooks/useGlobalContacts.ts                 | 12 +++++++-----
 src/app/layout.tsx                                 |  6 +++---
 .../providers/SelectedContactProvider/provider.tsx | 14 +++++++-------
 8 files changed, 29 insertions(+), 29 deletions(-)

diff --git a/src/app/(admin)/new_dashboard/guides/[id]/page.tsx b/src/app/(admin)/new_dashboard/guides/[id]/page.tsx
index a0b1aba..a1f2c18 100644
--- a/src/app/(admin)/new_dashboard/guides/[id]/page.tsx
+++ b/src/app/(admin)/new_dashboard/guides/[id]/page.tsx
@@ -17,7 +17,7 @@ import {
 import ReviewList from "../components/ReviewList";
 import parse from "html-react-parser";
 import "quill/dist/quill.snow.css";
-import { useGlobalContacts } from "@/app/hooks/useGlobalContacts";
+import { useGlobalChat } from "@/app/hooks/useGlobalContacts";
 import ChatPopup from "../../components/ChatPopup";
 
 const GuidePage: React.FC = () => {
@@ -27,7 +27,7 @@ const GuidePage: React.FC = () => {
 
   const { data: response, isLoading, isError, error, isSuccess } = useGuide(id ?? 0);
 
-  const {selectedContact} = useGlobalContacts();
+  const {selectedContact} = useGlobalChat();
 
   if (isLoading) {
     return <CircularProgress />;
diff --git a/src/app/(admin)/new_dashboard/guides/components/ReviewList/index.tsx b/src/app/(admin)/new_dashboard/guides/components/ReviewList/index.tsx
index f98802b..6fbb724 100644
--- a/src/app/(admin)/new_dashboard/guides/components/ReviewList/index.tsx
+++ b/src/app/(admin)/new_dashboard/guides/components/ReviewList/index.tsx
@@ -8,8 +8,6 @@ import {
   Divider,
 } from "@mui/material";
 import { Review } from "@/api/types/Review";
-import PageContainer from "@/components/PageContainer";
-import DashboardCard from "../../../shared/Card";
 import AddReviewBox from "../AddReviewBox";
 import ReviewCard from "../ReviewCard";
 
@@ -44,7 +42,7 @@ const ReviewList: React.FC<ReviewListProps> = ({ reviews, guideId }) => {
           </Typography>
           <Divider sx={{mt:2 , mb:2}}/>
           {reviewsContext}
-          {!!reviews.length && reviews.length !== 1 &&(
+          {reviews?.length > 1 &&(
           <Box display="flex" justifyContent="center" width="100%" mt={2}>
             <Button onClick={()=>{
               visibleCount === reviews.length ? showLessReviews() : showMoreReviews();
diff --git a/src/app/(admin)/new_dashboard/guides/hooks/useAddReviewForm.ts b/src/app/(admin)/new_dashboard/guides/hooks/useAddReviewForm.ts
index 7917795..470677f 100644
--- a/src/app/(admin)/new_dashboard/guides/hooks/useAddReviewForm.ts
+++ b/src/app/(admin)/new_dashboard/guides/hooks/useAddReviewForm.ts
@@ -1,6 +1,6 @@
-import { useState } from "react";
-import { CreateReviewDto, CreateReviewSchema } from "../dto/CreateReviewDto";
-import { useAddReview } from "@/hooks";
+import { useState } from 'react';
+import { CreateReviewDto, CreateReviewSchema } from '../dto/CreateReviewDto';
+import { useAddReview } from '@/hooks';
 
 const useAddReviewForm = (guideId: number) => {
   const [comment, setComment] = useState('');
@@ -11,13 +11,13 @@ const useAddReviewForm = (guideId: number) => {
   const handleSubmit = () => {
     const newReview: CreateReviewDto = {
       guideId,
-      rating: stars ?? 1,
+      rating: stars ?? 0,
       comment: comment.trim() || '',
     };
     const validation = CreateReviewSchema.safeParse(newReview);
     if (!validation.success) {
       setValidationError(
-        validation.error.errors.map((err) => err.message).join(", ")
+        validation.error.errors.map((err) => err.message).join(', ')
       );
       return;
     }
diff --git a/src/app/(admin)/new_dashboard/guides/page.tsx b/src/app/(admin)/new_dashboard/guides/page.tsx
index f77d881..52147b4 100644
--- a/src/app/(admin)/new_dashboard/guides/page.tsx
+++ b/src/app/(admin)/new_dashboard/guides/page.tsx
@@ -8,11 +8,11 @@ import { useSearchGuides } from "./hooks";
 import { useAllGuides } from "@/hooks";
 import { Guide } from "@/api/types/Guide";
 import ChatPopup from "../components/ChatPopup";
-import { useGlobalContacts } from "@/app/hooks/useGlobalContacts";
+import { useGlobalChat } from "@/app/hooks/useGlobalContacts";
 
 const GuidesListPage = () => {
   const { data: guideItems, isLoading, error, isError, isSuccess } = useAllGuides();
-  const {selectedContact} = useGlobalContacts();
+  const {selectedContact} = useGlobalChat();
 
   let guides: Guide[] = [];
 
diff --git a/src/app/(admin)/new_dashboard/page.tsx b/src/app/(admin)/new_dashboard/page.tsx
index 6532aff..6a0d221 100644
--- a/src/app/(admin)/new_dashboard/page.tsx
+++ b/src/app/(admin)/new_dashboard/page.tsx
@@ -6,11 +6,11 @@ import ContactList from "./components/ContactList";
 import ChatHeader from "./components/ChatHeader";
 import SupportMessageList from "./components/SupportMessageList";
 import MessageInput from "@/common/components/MessageInput";
-import { useGlobalContacts } from "@/app/hooks/useGlobalContacts";
+import { useGlobalChat } from "@/app/hooks/useGlobalContacts";
 
 const Page = () => {
 
- const {selectedContact, handleContactSelect, contacts} = useGlobalContacts();
+ const {selectedContact, handleContactSelect, contacts} = useGlobalChat();
  
   return (
     <PageContainer title="Dashboard">
diff --git a/src/app/hooks/useGlobalContacts.ts b/src/app/hooks/useGlobalContacts.ts
index 72ccc94..a71918e 100644
--- a/src/app/hooks/useGlobalContacts.ts
+++ b/src/app/hooks/useGlobalContacts.ts
@@ -1,11 +1,13 @@
 import { useContext } from 'react';
-import { SelectedContactContextValue } from '../providers/SelectedContactProvider/provider';
-import { SelectedContactContext } from '../providers/SelectedContactProvider/provider';
+import { ChatContextValue } from '../providers/SelectedContactProvider/provider';
+import { ChatContext } from '../providers/SelectedContactProvider/provider';
 
-export const useGlobalContacts = (): SelectedContactContextValue => {
-  const context = useContext(SelectedContactContext);
+export const useGlobalChat = (): ChatContextValue => {
+  const context = useContext(ChatContext);
   if (!context) {
-    throw new Error('useGlobalSelectedContact must be used within a SelectedContactProvider');
+    throw new Error(
+      'useGlobalSelectedContact must be used within a SelectedContactProvider'
+    );
   }
   return context;
 };
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 80ee284..838ab2c 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -5,7 +5,7 @@ import "./globals.css";
 import { SocketProvider } from "./providers/SocketProvider/provider";
 import { QueryProvider } from "./providers/QueryProvider/provider";
 import { CssBaseline, ThemeProvider } from "@mui/material";
-import { SelectedContactProvider } from "./providers/SelectedContactProvider/provider";
+import { ChatProvider } from "./providers/SelectedContactProvider/provider";
 import { GuideProvider } from "./providers/guide";
 
 export default function RootLayout({
@@ -20,9 +20,9 @@ export default function RootLayout({
           <CssBaseline />
           <QueryProvider>
             <SocketProvider>
-              <SelectedContactProvider>
+              <ChatProvider>
               <GuideProvider>{children}</GuideProvider>
-              </SelectedContactProvider>
+              </ChatProvider>
             </SocketProvider>
           </QueryProvider>
         </ThemeProvider>
diff --git a/src/app/providers/SelectedContactProvider/provider.tsx b/src/app/providers/SelectedContactProvider/provider.tsx
index 97a6423..44e90d6 100644
--- a/src/app/providers/SelectedContactProvider/provider.tsx
+++ b/src/app/providers/SelectedContactProvider/provider.tsx
@@ -2,19 +2,19 @@ import { Contact } from '@/app/(admin)/new_dashboard/types';
 import { useSocket } from '@/app/hooks/useSocket';
 import React, { createContext, useState, useContext, ReactNode } from 'react';
 import {useContacts, useSelectedContact} from '@/app/(admin)/new_dashboard/hooks';
-interface ContactProviderProps {
+interface ChatProviderProps {
     children: ReactNode;
 }
 
-export interface SelectedContactContextValue {
+export interface ChatContextValue {
   selectedContact: Contact | null;
   handleContactSelect: (contact: Contact) => void;
   contacts: Contact[];
 }
 
-export const SelectedContactContext = createContext<SelectedContactContextValue | null>(null);
+export const ChatContext = createContext<ChatContextValue | null>(null);
 
-export const SelectedContactProvider: React.FC<ContactProviderProps> = ({ children }) => {
+export const ChatProvider: React.FC<ChatProviderProps> = ({ children }) => {
   const socket = useSocket();
   const { selectedContact, handleContactSelect } = useSelectedContact({
     socket,
@@ -24,10 +24,10 @@ export const SelectedContactProvider: React.FC<ContactProviderProps> = ({ childr
     handleContactSelect,
   });
   return (
-    <SelectedContactContext.Provider value={{ selectedContact, handleContactSelect,contacts }}>
+    <ChatContext.Provider value={{ selectedContact, handleContactSelect,contacts }}>
       {children}
-    </SelectedContactContext.Provider>
+    </ChatContext.Provider>
   );
 };
 
-export const useGlobalSelectedContact = () => useContext(SelectedContactContext);
+export const useGlobalChatContext = () => useContext(ChatContext);

From 4ad11afc32e8248c246d16692b2382b0a98f858e Mon Sep 17 00:00:00 2001
From: Ori <ori100no@gmail.com>
Date: Tue, 27 Aug 2024 17:51:47 +0300
Subject: [PATCH 152/242] resolved error

---
 src/app/hooks/useGlobalContacts.ts | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/app/hooks/useGlobalContacts.ts b/src/app/hooks/useGlobalContacts.ts
index a71918e..d0124a8 100644
--- a/src/app/hooks/useGlobalContacts.ts
+++ b/src/app/hooks/useGlobalContacts.ts
@@ -5,9 +5,7 @@ import { ChatContext } from '../providers/SelectedContactProvider/provider';
 export const useGlobalChat = (): ChatContextValue => {
   const context = useContext(ChatContext);
   if (!context) {
-    throw new Error(
-      'useGlobalSelectedContact must be used within a SelectedContactProvider'
-    );
+    throw new Error('useGlobalChat must be used within a ChatProvider');
   }
   return context;
 };

From 9595059c4d33f49c3b3c4790a7e957fe042055ea Mon Sep 17 00:00:00 2001
From: Ori <ori100no@gmail.com>
Date: Tue, 27 Aug 2024 18:07:52 +0300
Subject: [PATCH 153/242] importing the chat globally in all of the app

---
 .../(admin)/new_dashboard/guides/[id]/page.tsx  |  4 +---
 src/app/(admin)/new_dashboard/guides/layout.tsx | 17 +++++++++++++++++
 src/app/(admin)/new_dashboard/guides/page.tsx   |  3 +--
 src/app/(admin)/new_dashboard/page.tsx          |  2 +-
 .../{useGlobalContacts.ts => useGlobalChat.ts}  |  5 +++--
 src/app/layout.tsx                              |  2 +-
 .../provider.tsx                                |  2 ++
 src/app/providers/QueryProvider/provider.tsx    |  2 ++
 8 files changed, 28 insertions(+), 9 deletions(-)
 create mode 100644 src/app/(admin)/new_dashboard/guides/layout.tsx
 rename src/app/hooks/{useGlobalContacts.ts => useGlobalChat.ts} (61%)
 rename src/app/providers/{SelectedContactProvider => ChatProvider}/provider.tsx (98%)

diff --git a/src/app/(admin)/new_dashboard/guides/[id]/page.tsx b/src/app/(admin)/new_dashboard/guides/[id]/page.tsx
index a1f2c18..0cd8c76 100644
--- a/src/app/(admin)/new_dashboard/guides/[id]/page.tsx
+++ b/src/app/(admin)/new_dashboard/guides/[id]/page.tsx
@@ -17,7 +17,7 @@ import {
 import ReviewList from "../components/ReviewList";
 import parse from "html-react-parser";
 import "quill/dist/quill.snow.css";
-import { useGlobalChat } from "@/app/hooks/useGlobalContacts";
+import { useGlobalChat } from "@/app/hooks/useGlobalChat";
 import ChatPopup from "../../components/ChatPopup";
 
 const GuidePage: React.FC = () => {
@@ -56,8 +56,6 @@ const GuidePage: React.FC = () => {
         </Box>
         <Divider sx={{ mt: 2, mb: 2, border: "none" }} />
         <ReviewList guideId={guide.id} reviews={guide.reviews ?? []} />
-        <Divider sx={{ mt: 5, mb: 5, border: "none" }} />
-        {selectedContact && <ChatPopup selectedContact={selectedContact} />}
       </Box>
     );
   }
diff --git a/src/app/(admin)/new_dashboard/guides/layout.tsx b/src/app/(admin)/new_dashboard/guides/layout.tsx
new file mode 100644
index 0000000..8b322c1
--- /dev/null
+++ b/src/app/(admin)/new_dashboard/guides/layout.tsx
@@ -0,0 +1,17 @@
+"use client"
+import { ReactNode } from "react";
+import ChatPopup from "../components/ChatPopup";
+import { useGlobalChat } from "@/app/hooks/useGlobalChat";
+
+const GuideLayout = ({ children }: { children: ReactNode }) => {
+  const { selectedContact } = useGlobalChat();
+
+  return (
+    <>
+      {children}
+      {selectedContact && <ChatPopup selectedContact={selectedContact} />}
+    </>
+  );
+};
+
+export default GuideLayout;
diff --git a/src/app/(admin)/new_dashboard/guides/page.tsx b/src/app/(admin)/new_dashboard/guides/page.tsx
index 52147b4..0f3dd87 100644
--- a/src/app/(admin)/new_dashboard/guides/page.tsx
+++ b/src/app/(admin)/new_dashboard/guides/page.tsx
@@ -8,7 +8,7 @@ import { useSearchGuides } from "./hooks";
 import { useAllGuides } from "@/hooks";
 import { Guide } from "@/api/types/Guide";
 import ChatPopup from "../components/ChatPopup";
-import { useGlobalChat } from "@/app/hooks/useGlobalContacts";
+import { useGlobalChat } from "@/app/hooks/useGlobalChat";
 
 const GuidesListPage = () => {
   const { data: guideItems, isLoading, error, isError, isSuccess } = useAllGuides();
@@ -47,7 +47,6 @@ const GuidesListPage = () => {
         </Box>
       </DashboardCard>
     </PageContainer>
-    {selectedContact && <ChatPopup selectedContact={selectedContact} />}
     </>
   );
 };
diff --git a/src/app/(admin)/new_dashboard/page.tsx b/src/app/(admin)/new_dashboard/page.tsx
index 6a0d221..08ad592 100644
--- a/src/app/(admin)/new_dashboard/page.tsx
+++ b/src/app/(admin)/new_dashboard/page.tsx
@@ -6,7 +6,7 @@ import ContactList from "./components/ContactList";
 import ChatHeader from "./components/ChatHeader";
 import SupportMessageList from "./components/SupportMessageList";
 import MessageInput from "@/common/components/MessageInput";
-import { useGlobalChat } from "@/app/hooks/useGlobalContacts";
+import { useGlobalChat } from "@/app/hooks/useGlobalChat";
 
 const Page = () => {
 
diff --git a/src/app/hooks/useGlobalContacts.ts b/src/app/hooks/useGlobalChat.ts
similarity index 61%
rename from src/app/hooks/useGlobalContacts.ts
rename to src/app/hooks/useGlobalChat.ts
index d0124a8..7dd9393 100644
--- a/src/app/hooks/useGlobalContacts.ts
+++ b/src/app/hooks/useGlobalChat.ts
@@ -1,6 +1,7 @@
+'use client';
 import { useContext } from 'react';
-import { ChatContextValue } from '../providers/SelectedContactProvider/provider';
-import { ChatContext } from '../providers/SelectedContactProvider/provider';
+import { ChatContextValue } from '../providers/ChatProvider/provider';
+import { ChatContext } from '../providers/ChatProvider/provider';
 
 export const useGlobalChat = (): ChatContextValue => {
   const context = useContext(ChatContext);
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 838ab2c..df18ae6 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -5,7 +5,7 @@ import "./globals.css";
 import { SocketProvider } from "./providers/SocketProvider/provider";
 import { QueryProvider } from "./providers/QueryProvider/provider";
 import { CssBaseline, ThemeProvider } from "@mui/material";
-import { ChatProvider } from "./providers/SelectedContactProvider/provider";
+import { ChatProvider } from "./providers/ChatProvider/provider";
 import { GuideProvider } from "./providers/guide";
 
 export default function RootLayout({
diff --git a/src/app/providers/SelectedContactProvider/provider.tsx b/src/app/providers/ChatProvider/provider.tsx
similarity index 98%
rename from src/app/providers/SelectedContactProvider/provider.tsx
rename to src/app/providers/ChatProvider/provider.tsx
index 44e90d6..7f58c0b 100644
--- a/src/app/providers/SelectedContactProvider/provider.tsx
+++ b/src/app/providers/ChatProvider/provider.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { Contact } from '@/app/(admin)/new_dashboard/types';
 import { useSocket } from '@/app/hooks/useSocket';
 import React, { createContext, useState, useContext, ReactNode } from 'react';
diff --git a/src/app/providers/QueryProvider/provider.tsx b/src/app/providers/QueryProvider/provider.tsx
index ed07491..e250536 100644
--- a/src/app/providers/QueryProvider/provider.tsx
+++ b/src/app/providers/QueryProvider/provider.tsx
@@ -1,3 +1,5 @@
+"use client"
+
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 
 export const queryClient = new QueryClient();

From 80ca7bf28e2c0b38d4df2bbcfab08130ff2fca1a Mon Sep 17 00:00:00 2001
From: Ori <ori100no@gmail.com>
Date: Tue, 27 Aug 2024 19:08:44 +0300
Subject: [PATCH 154/242] added patch to base client

---
 src/api/base.client.ts | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/api/base.client.ts b/src/api/base.client.ts
index 80f4a6d..694138f 100644
--- a/src/api/base.client.ts
+++ b/src/api/base.client.ts
@@ -21,7 +21,7 @@ export class BaseClient {
 
   private async request<T>(
     endpoint: string,
-    method: "GET" | "POST" | "PUT" | "DELETE",
+    method: "GET" | "POST" | "PUT" | "PATCH" | "DELETE",
     body?: any,
     options: RequestInit = {}
   ): Promise<ClientResponse<T>> {
@@ -100,6 +100,14 @@ export class BaseClient {
     return this.request<T>(endpoint, "PUT", body, options);
   }
 
+  protected async patch<T>(
+    endpoint: string,
+    body: any,
+    options: RequestInit = {}
+  ): Promise<ClientResponse<T>> {
+    return this.request<T>(endpoint, "PATCH", body, options);
+  }
+
   protected async delete<T>(
     endpoint: string,
     options: RequestInit = {}

From e00f0fd8a08abae9227efe4941fc00ae677ca88e Mon Sep 17 00:00:00 2001
From: Ori <ori100no@gmail.com>
Date: Tue, 27 Aug 2024 19:13:30 +0300
Subject: [PATCH 155/242] chore: Add IssueClient and related types for issue
 API integration

---
 src/api/issue.client.ts     | 13 +++++++++++++
 src/api/types/Issue.ts      | 15 +++++++++++++++
 src/hooks/api/issueHooks.ts | 18 ++++++++++++++++++
 3 files changed, 46 insertions(+)
 create mode 100644 src/api/issue.client.ts
 create mode 100644 src/api/types/Issue.ts
 create mode 100644 src/hooks/api/issueHooks.ts

diff --git a/src/api/issue.client.ts b/src/api/issue.client.ts
new file mode 100644
index 0000000..47c12d9
--- /dev/null
+++ b/src/api/issue.client.ts
@@ -0,0 +1,13 @@
+import { BaseClient } from './base.client';
+import { Issue } from './types/issue';
+import { UpdateIssueDto } from './types/issue';
+
+export class IssueClient extends BaseClient {
+  async getIssue() {
+    return await this.get<Issue>('issues');
+  }
+
+  async updateIssue(updateIssueRequest: UpdateIssueDto) {
+    return await this.patch<Issue>('issues', updateIssueRequest);
+  }
+}
diff --git a/src/api/types/Issue.ts b/src/api/types/Issue.ts
new file mode 100644
index 0000000..56f2140
--- /dev/null
+++ b/src/api/types/Issue.ts
@@ -0,0 +1,15 @@
+import { z } from 'zod';
+
+export const issueSchema = z.object({
+  id: z.number(),
+  categories: z.array(z.string()),
+  singletonKey: z.number().default(1),
+});
+
+export const updateIssueDtoSchema = z.object({
+  categories: z.array(z.string()),
+});
+
+export type UpdateIssueDto = z.infer<typeof updateIssueDtoSchema>;
+
+export type Issue = z.infer<typeof issueSchema>;
\ No newline at end of file
diff --git a/src/hooks/api/issueHooks.ts b/src/hooks/api/issueHooks.ts
new file mode 100644
index 0000000..66f63c0
--- /dev/null
+++ b/src/hooks/api/issueHooks.ts
@@ -0,0 +1,18 @@
+import { IssueClient } from "@/api/issue.client";
+import { UpdateIssueDto } from "@/api/types/issue";
+import { useQuery, useMutation } from "@tanstack/react-query";
+
+const issueClient = new IssueClient();
+
+export function useIssue() {
+  return useQuery({
+    queryKey: ["issue"],
+    queryFn: () => issueClient.getIssue(),
+  });
+}
+
+export function useUpdateIssue() {
+  return useMutation({
+    mutationFn: (data: UpdateIssueDto) => issueClient.updateIssue(data),
+  });
+}

From ab32cb35a7974eed2144f55b5ca9a9b4b77bb289 Mon Sep 17 00:00:00 2001
From: Ori <ori100no@gmail.com>
Date: Tue, 27 Aug 2024 21:26:48 +0300
Subject: [PATCH 156/242] add issue to searchbar

---
 src/api/types/Guide.ts                        |  7 ++-
 .../guides/components/SearchBar/index.tsx     | 55 +++++++++++++------
 .../guides/hooks/useSearchGuides.ts           | 16 +++++-
 src/app/(admin)/new_dashboard/guides/page.tsx | 35 +++++++-----
 4 files changed, 78 insertions(+), 35 deletions(-)

diff --git a/src/api/types/Guide.ts b/src/api/types/Guide.ts
index 6033db2..59ac8fa 100644
--- a/src/api/types/Guide.ts
+++ b/src/api/types/Guide.ts
@@ -1,11 +1,12 @@
-import { z } from "zod";
-import { userSchema } from "./User";
-import { reviewSchema } from "./Review";
+import { z } from 'zod';
+import { userSchema } from './User';
+import { reviewSchema } from './Review';
 
 const guideSchema = z.object({
   id: z.number(),
   title: z.string(),
   contentHTML: z.string(),
+  issue: z.string(),
   creatorId: z.number(),
   createdAt: z.date(),
   creator: userSchema.optional(),
diff --git a/src/app/(admin)/new_dashboard/guides/components/SearchBar/index.tsx b/src/app/(admin)/new_dashboard/guides/components/SearchBar/index.tsx
index e24097d..c895d6e 100644
--- a/src/app/(admin)/new_dashboard/guides/components/SearchBar/index.tsx
+++ b/src/app/(admin)/new_dashboard/guides/components/SearchBar/index.tsx
@@ -1,26 +1,49 @@
-import { TextField, InputAdornment } from "@mui/material";
+import { TextField, InputAdornment, Box, FormControl, InputLabel, Select, MenuItem, SelectChangeEvent } from "@mui/material";
 import SearchIcon from "@mui/icons-material/Search";
 
 type Props = {
   searchQuery: string;
   onSearchChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  selectedIssue: string;
+  onIssueChange: (e: SelectChangeEvent<string>) => void;
+  issues: string[];
 };
 
-const SearchBar = ({ searchQuery, onSearchChange }: Props) => (
-  <TextField
-    fullWidth
-    label="Search Guides"
-    variant="outlined"
-    value={searchQuery}
-    onChange={onSearchChange}
-    InputProps={{
-      startAdornment: (
-        <InputAdornment position="start">
-          <SearchIcon />
-        </InputAdornment>
-      ),
-    }}
-  />
+const SearchBar = ({ searchQuery, onSearchChange, selectedIssue, onIssueChange, issues }: Props) => (
+  <Box display="flex" alignItems="center" justifyContent="space-between">
+    <TextField
+      fullWidth
+      label="Search Guides"
+      variant="outlined"
+      value={searchQuery}
+      onChange={onSearchChange}
+      InputProps={{
+        startAdornment: (
+          <InputAdornment position="start">
+            <SearchIcon />
+          </InputAdornment>
+        ),
+      }}
+    />
+    <FormControl variant="outlined" sx={{ ml: 2, minWidth: 200 }}>
+      <InputLabel id="issue-filter-label">Filter by Issue</InputLabel>
+      <Select
+        labelId="issue-filter-label"
+        value={selectedIssue}
+        onChange={onIssueChange}
+        label="Filter by Issue"
+      >
+        <MenuItem value="">
+          <em>All Issues</em>
+        </MenuItem>
+        {issues.map((issue) => (
+          <MenuItem key={issue} value={issue}>
+            {issue}
+          </MenuItem>
+        ))}
+      </Select>
+    </FormControl>
+  </Box>
 );
 
 export default SearchBar;
diff --git a/src/app/(admin)/new_dashboard/guides/hooks/useSearchGuides.ts b/src/app/(admin)/new_dashboard/guides/hooks/useSearchGuides.ts
index d3c1f60..5c10be1 100644
--- a/src/app/(admin)/new_dashboard/guides/hooks/useSearchGuides.ts
+++ b/src/app/(admin)/new_dashboard/guides/hooks/useSearchGuides.ts
@@ -1,20 +1,30 @@
 import { useState } from "react";
 import { Guide } from "@/api/types/Guide";
+import { SelectChangeEvent } from "@mui/material";
 
 export const useSearchGuides = (initialGuides: Guide[]) => {
   const [searchQuery, setSearchQuery] = useState("");
+  const [selectedIssue, setSelectedIssue] = useState("All");
 
-  const filteredGuides = initialGuides.filter((guide) =>
-    guide.title.toLowerCase().includes(searchQuery.toLowerCase())
-  );
+  const filteredGuides = initialGuides.filter((guide) => {
+    const matchesQuery = guide.title.toLowerCase().includes(searchQuery.toLowerCase());
+    const matchesIssue = selectedIssue === "All" || guide.issue === selectedIssue;
+    return matchesQuery && matchesIssue;
+  });
 
   const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     setSearchQuery(event.target.value);
   };
 
+  const handleIssueChange = (event: SelectChangeEvent<string>) => {
+    setSelectedIssue(event.target.value);
+  };
+
   return {
     searchQuery,
+    selectedIssue,
     filteredGuides,
     handleSearchChange,
+    handleIssueChange,
   };
 };
diff --git a/src/app/(admin)/new_dashboard/guides/page.tsx b/src/app/(admin)/new_dashboard/guides/page.tsx
index 0f3dd87..f9a99d8 100644
--- a/src/app/(admin)/new_dashboard/guides/page.tsx
+++ b/src/app/(admin)/new_dashboard/guides/page.tsx
@@ -5,49 +5,58 @@ import { Alert, Box, CircularProgress, Typography } from "@mui/material";
 import GuideList from "./components/GuideList";
 import SearchBar from "./components/SearchBar";
 import { useSearchGuides } from "./hooks";
-import { useAllGuides } from "@/hooks";
+import { useAllGuides} from "@/hooks";
+import { useIssue } from "@/hooks/api/issueHooks";
 import { Guide } from "@/api/types/Guide";
-import ChatPopup from "../components/ChatPopup";
-import { useGlobalChat } from "@/app/hooks/useGlobalChat";
 
 const GuidesListPage = () => {
-  const { data: guideItems, isLoading, error, isError, isSuccess } = useAllGuides();
-  const {selectedContact} = useGlobalChat();
+  const { data: guideItems, isLoading: isLoadingGuides, error: guidesError, isError: isGuidesError, isSuccess: isGuidesSuccess } = useAllGuides();
+  const { data: issueData, isLoading: isLoadingIssues, error: issuesError, isError: isIssuesError, isSuccess: isIssuesSuccess } = useIssue();
 
   let guides: Guide[] = [];
+  let issues: string[] = [];
 
-  if (isSuccess && "data" in guideItems) {
+  if (isGuidesSuccess && "data" in guideItems) {
     guides = guideItems.data;
   }
 
-  const { searchQuery, filteredGuides, handleSearchChange } =
+  if (isIssuesSuccess && "data" in issueData) {
+    issues = issueData.data.categories;
+  }
+
+  const { searchQuery, selectedIssue, filteredGuides, handleSearchChange, handleIssueChange } =
     useSearchGuides(guides);
 
   return (
-    <>
     <PageContainer title="Guides">
       <DashboardCard title="Guides">
         <Box>
-          {isLoading && <CircularProgress />}
-          {isError && <Alert severity="error">{error.message}</Alert>}
-          {isSuccess && guides.length > 0 && (
+          {(isLoadingGuides || isLoadingIssues) && <CircularProgress />}
+          {(isGuidesError || isIssuesError) && (
+            <Alert severity="error">
+              {guidesError?.message || issuesError?.message || "An error occurred"}
+            </Alert>
+          )}
+          {isGuidesSuccess && isIssuesSuccess && guides.length > 0 && (
             <>
               <Box mb={2}>
                 <SearchBar
                   searchQuery={searchQuery}
                   onSearchChange={handleSearchChange}
+                  selectedIssue={selectedIssue}
+                  onIssueChange={handleIssueChange}
+                  issues={["All", ...issues]}  
                 />
               </Box>
               <GuideList guideItems={filteredGuides} />
             </>
           )}
-          {isSuccess && guides.length === 0 && (
+          {isGuidesSuccess && guides.length === 0 && (
             <Typography>No guides available</Typography>
           )}
         </Box>
       </DashboardCard>
     </PageContainer>
-    </>
   );
 };
 

From c406f81b0d8f6764ba7b568931084d7adbad5350 Mon Sep 17 00:00:00 2001
From: Ori <ori100no@gmail.com>
Date: Tue, 27 Aug 2024 21:32:01 +0300
Subject: [PATCH 157/242] resolved conflicts

---
 src/app/(admin)/new_dashboard/components/ChatPopup/index.tsx | 2 +-
 src/app/(admin)/new_dashboard/guides/[id]/page.tsx           | 4 ++--
 .../(admin)/new_dashboard/guides/hooks/useAddReviewForm.ts   | 2 +-
 src/app/(admin)/new_dashboard/guides/layout.tsx              | 4 ++--
 src/app/(admin)/new_dashboard/guides/page.tsx                | 4 ++--
 src/app/(admin)/new_dashboard/page.tsx                       | 4 ++--
 src/app/hooks/useGlobalChat.ts                               | 4 ++--
 src/common/components/MessageInput/index.tsx                 | 5 +++--
 8 files changed, 15 insertions(+), 14 deletions(-)

diff --git a/src/app/(admin)/new_dashboard/components/ChatPopup/index.tsx b/src/app/(admin)/new_dashboard/components/ChatPopup/index.tsx
index dfac68d..bcaa3df 100644
--- a/src/app/(admin)/new_dashboard/components/ChatPopup/index.tsx
+++ b/src/app/(admin)/new_dashboard/components/ChatPopup/index.tsx
@@ -91,7 +91,7 @@ const ChatPopup = ({ selectedContact }: Props) => {
 
           {/* Input and Send Button */}
           <Box>
-            <MessageInput chatId={selectedContact.chatId} />
+            <MessageInput chatId={selectedContact.chatId} isPopup={true}/>
           </Box>
         </Paper>
       )}
diff --git a/src/app/(admin)/new_dashboard/guides/[id]/page.tsx b/src/app/(admin)/new_dashboard/guides/[id]/page.tsx
index 0cd8c76..9720bf7 100644
--- a/src/app/(admin)/new_dashboard/guides/[id]/page.tsx
+++ b/src/app/(admin)/new_dashboard/guides/[id]/page.tsx
@@ -17,7 +17,7 @@ import {
 import ReviewList from "../components/ReviewList";
 import parse from "html-react-parser";
 import "quill/dist/quill.snow.css";
-import { useGlobalChat } from "@/app/hooks/useGlobalChat";
+import { useChat } from "@/app/hooks/useGlobalChat";
 import ChatPopup from "../../components/ChatPopup";
 
 const GuidePage: React.FC = () => {
@@ -27,7 +27,7 @@ const GuidePage: React.FC = () => {
 
   const { data: response, isLoading, isError, error, isSuccess } = useGuide(id ?? 0);
 
-  const {selectedContact} = useGlobalChat();
+  const {selectedContact} = useChat();
 
   if (isLoading) {
     return <CircularProgress />;
diff --git a/src/app/(admin)/new_dashboard/guides/hooks/useAddReviewForm.ts b/src/app/(admin)/new_dashboard/guides/hooks/useAddReviewForm.ts
index 470677f..50609d7 100644
--- a/src/app/(admin)/new_dashboard/guides/hooks/useAddReviewForm.ts
+++ b/src/app/(admin)/new_dashboard/guides/hooks/useAddReviewForm.ts
@@ -25,7 +25,7 @@ const useAddReviewForm = (guideId: number) => {
     mutate(validation.data, {
       onSuccess: () => {
         setComment('');
-        setStars(1);
+        setStars(0);
       },
     });
   };
diff --git a/src/app/(admin)/new_dashboard/guides/layout.tsx b/src/app/(admin)/new_dashboard/guides/layout.tsx
index 8b322c1..7e614fc 100644
--- a/src/app/(admin)/new_dashboard/guides/layout.tsx
+++ b/src/app/(admin)/new_dashboard/guides/layout.tsx
@@ -1,10 +1,10 @@
 "use client"
 import { ReactNode } from "react";
 import ChatPopup from "../components/ChatPopup";
-import { useGlobalChat } from "@/app/hooks/useGlobalChat";
+import { useChat } from "@/app/hooks/useGlobalChat";
 
 const GuideLayout = ({ children }: { children: ReactNode }) => {
-  const { selectedContact } = useGlobalChat();
+  const { selectedContact } = useChat();
 
   return (
     <>
diff --git a/src/app/(admin)/new_dashboard/guides/page.tsx b/src/app/(admin)/new_dashboard/guides/page.tsx
index 0f3dd87..5a4e3c7 100644
--- a/src/app/(admin)/new_dashboard/guides/page.tsx
+++ b/src/app/(admin)/new_dashboard/guides/page.tsx
@@ -8,11 +8,11 @@ import { useSearchGuides } from "./hooks";
 import { useAllGuides } from "@/hooks";
 import { Guide } from "@/api/types/Guide";
 import ChatPopup from "../components/ChatPopup";
-import { useGlobalChat } from "@/app/hooks/useGlobalChat";
+import { useChat } from "@/app/hooks/useGlobalChat";
 
 const GuidesListPage = () => {
   const { data: guideItems, isLoading, error, isError, isSuccess } = useAllGuides();
-  const {selectedContact} = useGlobalChat();
+  const {selectedContact} = useChat();
 
   let guides: Guide[] = [];
 
diff --git a/src/app/(admin)/new_dashboard/page.tsx b/src/app/(admin)/new_dashboard/page.tsx
index 08ad592..97b3f5b 100644
--- a/src/app/(admin)/new_dashboard/page.tsx
+++ b/src/app/(admin)/new_dashboard/page.tsx
@@ -6,11 +6,11 @@ import ContactList from "./components/ContactList";
 import ChatHeader from "./components/ChatHeader";
 import SupportMessageList from "./components/SupportMessageList";
 import MessageInput from "@/common/components/MessageInput";
-import { useGlobalChat } from "@/app/hooks/useGlobalChat";
+import { useChat } from "@/app/hooks/useGlobalChat";
 
 const Page = () => {
 
- const {selectedContact, handleContactSelect, contacts} = useGlobalChat();
+ const {selectedContact, handleContactSelect, contacts} = useChat();
  
   return (
     <PageContainer title="Dashboard">
diff --git a/src/app/hooks/useGlobalChat.ts b/src/app/hooks/useGlobalChat.ts
index 7dd9393..0117c9d 100644
--- a/src/app/hooks/useGlobalChat.ts
+++ b/src/app/hooks/useGlobalChat.ts
@@ -3,10 +3,10 @@ import { useContext } from 'react';
 import { ChatContextValue } from '../providers/ChatProvider/provider';
 import { ChatContext } from '../providers/ChatProvider/provider';
 
-export const useGlobalChat = (): ChatContextValue => {
+export const useChat = (): ChatContextValue => {
   const context = useContext(ChatContext);
   if (!context) {
-    throw new Error('useGlobalChat must be used within a ChatProvider');
+    throw new Error('useChat must be used within a ChatProvider');
   }
   return context;
 };
diff --git a/src/common/components/MessageInput/index.tsx b/src/common/components/MessageInput/index.tsx
index c486b73..0366a17 100644
--- a/src/common/components/MessageInput/index.tsx
+++ b/src/common/components/MessageInput/index.tsx
@@ -6,9 +6,10 @@ import { useSocket } from "@/app/hooks/useSocket";
 type MessageInputProps = {
   chatId: number;
   isSupport?: boolean;
+  isPopup?: boolean;
 };
 
-const MessageInput = ({ chatId, isSupport = true }: MessageInputProps) => {
+const MessageInput = ({ chatId, isSupport = true , isPopup = false }: MessageInputProps) => {
   const socket = useSocket();
 
   const { errors, handleChangeNote, handleSubmit, isNote, register } =
@@ -65,7 +66,7 @@ const MessageInput = ({ chatId, isSupport = true }: MessageInputProps) => {
           autoFocus
           {...register("message")}
           multiline
-          minRows={2}
+          minRows={isPopup ? 2 : 5}
           maxRows={10}
           InputProps={{
             style: { overflow: "hidden" },

From bc6ee0bec9f69401ba9eb1333939ef20f8dd8633 Mon Sep 17 00:00:00 2001
From: Ori <ori100no@gmail.com>
Date: Tue, 27 Aug 2024 21:36:12 +0300
Subject: [PATCH 158/242] changed file name

---
 src/app/(admin)/new_dashboard/guides/[id]/page.tsx | 2 +-
 src/app/(admin)/new_dashboard/guides/layout.tsx    | 2 +-
 src/app/(admin)/new_dashboard/guides/page.tsx      | 2 +-
 src/app/(admin)/new_dashboard/page.tsx             | 2 +-
 src/app/hooks/{useGlobalChat.ts => useChat.ts}     | 0
 5 files changed, 4 insertions(+), 4 deletions(-)
 rename src/app/hooks/{useGlobalChat.ts => useChat.ts} (100%)

diff --git a/src/app/(admin)/new_dashboard/guides/[id]/page.tsx b/src/app/(admin)/new_dashboard/guides/[id]/page.tsx
index 9720bf7..bd0bbcc 100644
--- a/src/app/(admin)/new_dashboard/guides/[id]/page.tsx
+++ b/src/app/(admin)/new_dashboard/guides/[id]/page.tsx
@@ -17,7 +17,7 @@ import {
 import ReviewList from "../components/ReviewList";
 import parse from "html-react-parser";
 import "quill/dist/quill.snow.css";
-import { useChat } from "@/app/hooks/useGlobalChat";
+import { useChat } from "@/app/hooks/useChat";
 import ChatPopup from "../../components/ChatPopup";
 
 const GuidePage: React.FC = () => {
diff --git a/src/app/(admin)/new_dashboard/guides/layout.tsx b/src/app/(admin)/new_dashboard/guides/layout.tsx
index 7e614fc..388a6ea 100644
--- a/src/app/(admin)/new_dashboard/guides/layout.tsx
+++ b/src/app/(admin)/new_dashboard/guides/layout.tsx
@@ -1,7 +1,7 @@
 "use client"
 import { ReactNode } from "react";
 import ChatPopup from "../components/ChatPopup";
-import { useChat } from "@/app/hooks/useGlobalChat";
+import { useChat } from "@/app/hooks/useChat";
 
 const GuideLayout = ({ children }: { children: ReactNode }) => {
   const { selectedContact } = useChat();
diff --git a/src/app/(admin)/new_dashboard/guides/page.tsx b/src/app/(admin)/new_dashboard/guides/page.tsx
index 5a4e3c7..a28fe4c 100644
--- a/src/app/(admin)/new_dashboard/guides/page.tsx
+++ b/src/app/(admin)/new_dashboard/guides/page.tsx
@@ -8,7 +8,7 @@ import { useSearchGuides } from "./hooks";
 import { useAllGuides } from "@/hooks";
 import { Guide } from "@/api/types/Guide";
 import ChatPopup from "../components/ChatPopup";
-import { useChat } from "@/app/hooks/useGlobalChat";
+import { useChat } from "@/app/hooks/useChat";
 
 const GuidesListPage = () => {
   const { data: guideItems, isLoading, error, isError, isSuccess } = useAllGuides();
diff --git a/src/app/(admin)/new_dashboard/page.tsx b/src/app/(admin)/new_dashboard/page.tsx
index 97b3f5b..e4aface 100644
--- a/src/app/(admin)/new_dashboard/page.tsx
+++ b/src/app/(admin)/new_dashboard/page.tsx
@@ -6,7 +6,7 @@ import ContactList from "./components/ContactList";
 import ChatHeader from "./components/ChatHeader";
 import SupportMessageList from "./components/SupportMessageList";
 import MessageInput from "@/common/components/MessageInput";
-import { useChat } from "@/app/hooks/useGlobalChat";
+import { useChat } from "@/app/hooks/useChat";
 
 const Page = () => {
 
diff --git a/src/app/hooks/useGlobalChat.ts b/src/app/hooks/useChat.ts
similarity index 100%
rename from src/app/hooks/useGlobalChat.ts
rename to src/app/hooks/useChat.ts

From 8f2ffe83ccbd95ab7d878729b226091d02490714 Mon Sep 17 00:00:00 2001
From: Ori <ori100no@gmail.com>
Date: Tue, 27 Aug 2024 21:54:33 +0300
Subject: [PATCH 159/242] changed name of bar

---
 .../new_dashboard/guides/components/SearchBar/index.tsx      | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/app/(admin)/new_dashboard/guides/components/SearchBar/index.tsx b/src/app/(admin)/new_dashboard/guides/components/SearchBar/index.tsx
index c895d6e..3f52045 100644
--- a/src/app/(admin)/new_dashboard/guides/components/SearchBar/index.tsx
+++ b/src/app/(admin)/new_dashboard/guides/components/SearchBar/index.tsx
@@ -31,11 +31,8 @@ const SearchBar = ({ searchQuery, onSearchChange, selectedIssue, onIssueChange,
         labelId="issue-filter-label"
         value={selectedIssue}
         onChange={onIssueChange}
-        label="Filter by Issue"
+        label="Filter by tag"
       >
-        <MenuItem value="">
-          <em>All Issues</em>
-        </MenuItem>
         {issues.map((issue) => (
           <MenuItem key={issue} value={issue}>
             {issue}

From 8e45bfe5cbc91b8daa6ae8e611e81b8780dd27c4 Mon Sep 17 00:00:00 2001
From: Ori <ori100no@gmail.com>
Date: Tue, 27 Aug 2024 22:09:02 +0300
Subject: [PATCH 160/242] sorted categories

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

diff --git a/src/app/(admin)/new_dashboard/guides/page.tsx b/src/app/(admin)/new_dashboard/guides/page.tsx
index f9a99d8..739ae85 100644
--- a/src/app/(admin)/new_dashboard/guides/page.tsx
+++ b/src/app/(admin)/new_dashboard/guides/page.tsx
@@ -21,7 +21,7 @@ const GuidesListPage = () => {
   }
 
   if (isIssuesSuccess && "data" in issueData) {
-    issues = issueData.data.categories;
+    issues = issueData.data.categories.toSorted();
   }
 
   const { searchQuery, selectedIssue, filteredGuides, handleSearchChange, handleIssueChange } =

From 5d2ef63eb231228db800c199d264ad1339d5ca14 Mon Sep 17 00:00:00 2001
From: Ori <ori100no@gmail.com>
Date: Tue, 27 Aug 2024 22:27:21 +0300
Subject: [PATCH 161/242] added tags instead of issue as an array

---
 src/api/types/Guide.ts                             |  3 ++-
 .../guides/components/SearchBar/index.tsx          |  4 ++--
 .../new_dashboard/guides/hooks/useSearchGuides.ts  | 14 +++++++-------
 3 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/src/api/types/Guide.ts b/src/api/types/Guide.ts
index 59ac8fa..21bebdf 100644
--- a/src/api/types/Guide.ts
+++ b/src/api/types/Guide.ts
@@ -5,7 +5,7 @@ import { reviewSchema } from './Review';
 const guideSchema = z.object({
   id: z.number(),
   title: z.string(),
-  contentHTML: z.string(),
+  tags: z.array(z.string()).max(3),
   issue: z.string(),
   creatorId: z.number(),
   createdAt: z.date(),
@@ -18,4 +18,5 @@ export type Guide = z.infer<typeof guideSchema>;
 export type CreateGuideRequest = {
   title: string;
   contentHTML: string;
+  tags: string[];
 };
diff --git a/src/app/(admin)/new_dashboard/guides/components/SearchBar/index.tsx b/src/app/(admin)/new_dashboard/guides/components/SearchBar/index.tsx
index 3f52045..352978f 100644
--- a/src/app/(admin)/new_dashboard/guides/components/SearchBar/index.tsx
+++ b/src/app/(admin)/new_dashboard/guides/components/SearchBar/index.tsx
@@ -25,8 +25,8 @@ const SearchBar = ({ searchQuery, onSearchChange, selectedIssue, onIssueChange,
         ),
       }}
     />
-    <FormControl variant="outlined" sx={{ ml: 2, minWidth: 200 }}>
-      <InputLabel id="issue-filter-label">Filter by Issue</InputLabel>
+    <FormControl variant="outlined" sx={{ ml: 2, minWidth: 290 }}>
+      <InputLabel id="issue-filter-label">Filter by tag</InputLabel>
       <Select
         labelId="issue-filter-label"
         value={selectedIssue}
diff --git a/src/app/(admin)/new_dashboard/guides/hooks/useSearchGuides.ts b/src/app/(admin)/new_dashboard/guides/hooks/useSearchGuides.ts
index 5c10be1..72e545c 100644
--- a/src/app/(admin)/new_dashboard/guides/hooks/useSearchGuides.ts
+++ b/src/app/(admin)/new_dashboard/guides/hooks/useSearchGuides.ts
@@ -4,27 +4,27 @@ import { SelectChangeEvent } from "@mui/material";
 
 export const useSearchGuides = (initialGuides: Guide[]) => {
   const [searchQuery, setSearchQuery] = useState("");
-  const [selectedIssue, setSelectedIssue] = useState("All");
+  const [selectedTag, setSelectedTag] = useState("All");
 
   const filteredGuides = initialGuides.filter((guide) => {
     const matchesQuery = guide.title.toLowerCase().includes(searchQuery.toLowerCase());
-    const matchesIssue = selectedIssue === "All" || guide.issue === selectedIssue;
-    return matchesQuery && matchesIssue;
+    const matchesTag = selectedTag === "All" || guide.tags.includes(selectedTag);
+    return matchesQuery && matchesTag;
   });
 
   const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     setSearchQuery(event.target.value);
   };
 
-  const handleIssueChange = (event: SelectChangeEvent<string>) => {
-    setSelectedIssue(event.target.value);
+  const handleTagChange = (event: SelectChangeEvent<string>) => {
+    setSelectedTag(event.target.value);
   };
 
   return {
     searchQuery,
-    selectedIssue,
+    selectedTag,
     filteredGuides,
     handleSearchChange,
-    handleIssueChange,
+    handleTagChange,
   };
 };

From d1c3456dde378f783f6735fffb904babc073c00a Mon Sep 17 00:00:00 2001
From: Ori <ori100no@gmail.com>
Date: Tue, 27 Aug 2024 22:52:03 +0300
Subject: [PATCH 162/242] updated ui

---
 src/app/(admin)/new_dashboard/guides/[id]/page.tsx | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/src/app/(admin)/new_dashboard/guides/[id]/page.tsx b/src/app/(admin)/new_dashboard/guides/[id]/page.tsx
index bd0bbcc..9058971 100644
--- a/src/app/(admin)/new_dashboard/guides/[id]/page.tsx
+++ b/src/app/(admin)/new_dashboard/guides/[id]/page.tsx
@@ -49,12 +49,11 @@ const GuidePage: React.FC = () => {
 
     return (
       <Box>
-        <Typography variant="h1">{guide.title}</Typography>
-        <Typography variant="subtitle1">{creatorAndDateInfo}</Typography>
-        <Box className="quill-content">
-          {parse(guide.contentHTML)}
-        </Box>
-        <Divider sx={{ mt: 2, mb: 2, border: "none" }} />
+        <DashboardCard title={guide.title} subtitle={creatorAndDateInfo}>
+          <Box className="quill-content">
+            {parse(guide.contentHTML)}
+          </Box>
+        </DashboardCard>
         <ReviewList guideId={guide.id} reviews={guide.reviews ?? []} />
       </Box>
     );

From 5382af0e7e9d8ff755e7854c25b09514af2dbb60 Mon Sep 17 00:00:00 2001
From: Ori <ori100no@gmail.com>
Date: Tue, 27 Aug 2024 22:57:14 +0300
Subject: [PATCH 163/242] put issue into an array

---
 src/api/types/Guide.ts                        |  2 +-
 .../guides/components/SearchBar/index.tsx     | 38 ++++++++++---------
 .../guides/hooks/useSearchGuides.ts           | 20 +++++-----
 src/app/(admin)/new_dashboard/guides/page.tsx | 12 +++---
 4 files changed, 38 insertions(+), 34 deletions(-)

diff --git a/src/api/types/Guide.ts b/src/api/types/Guide.ts
index 21bebdf..d43e664 100644
--- a/src/api/types/Guide.ts
+++ b/src/api/types/Guide.ts
@@ -6,7 +6,7 @@ const guideSchema = z.object({
   id: z.number(),
   title: z.string(),
   tags: z.array(z.string()).max(3),
-  issue: z.string(),
+  contentHTML: z.string(),
   creatorId: z.number(),
   createdAt: z.date(),
   creator: userSchema.optional(),
diff --git a/src/app/(admin)/new_dashboard/guides/components/SearchBar/index.tsx b/src/app/(admin)/new_dashboard/guides/components/SearchBar/index.tsx
index 352978f..b1106d0 100644
--- a/src/app/(admin)/new_dashboard/guides/components/SearchBar/index.tsx
+++ b/src/app/(admin)/new_dashboard/guides/components/SearchBar/index.tsx
@@ -1,15 +1,16 @@
-import { TextField, InputAdornment, Box, FormControl, InputLabel, Select, MenuItem, SelectChangeEvent } from "@mui/material";
+import { TextField, InputAdornment, Box, FormControl } from "@mui/material";
 import SearchIcon from "@mui/icons-material/Search";
+import Autocomplete from "@mui/material/Autocomplete";
 
 type Props = {
   searchQuery: string;
   onSearchChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
-  selectedIssue: string;
-  onIssueChange: (e: SelectChangeEvent<string>) => void;
-  issues: string[];
+  selectedTag: string;
+  onTagChange: (e: React.ChangeEvent<{}>, value: string | null) => void;
+  tags: string[];
 };
 
-const SearchBar = ({ searchQuery, onSearchChange, selectedIssue, onIssueChange, issues }: Props) => (
+const SearchBar = ({ searchQuery, onSearchChange, selectedTag, onTagChange, tags }: Props) => (
   <Box display="flex" alignItems="center" justifyContent="space-between">
     <TextField
       fullWidth
@@ -26,19 +27,20 @@ const SearchBar = ({ searchQuery, onSearchChange, selectedIssue, onIssueChange,
       }}
     />
     <FormControl variant="outlined" sx={{ ml: 2, minWidth: 290 }}>
-      <InputLabel id="issue-filter-label">Filter by tag</InputLabel>
-      <Select
-        labelId="issue-filter-label"
-        value={selectedIssue}
-        onChange={onIssueChange}
-        label="Filter by tag"
-      >
-        {issues.map((issue) => (
-          <MenuItem key={issue} value={issue}>
-            {issue}
-          </MenuItem>
-        ))}
-      </Select>
+      <Autocomplete
+        options={[...tags]}
+        value={selectedTag}
+        onChange={onTagChange}
+        renderInput={(params) => (
+          <TextField
+            {...params}
+            label="Filter by tag"
+            variant="outlined"
+          />
+        )}
+        isOptionEqualToValue={(option, value) => option === value}
+        getOptionLabel={(option) => option}
+      />
     </FormControl>
   </Box>
 );
diff --git a/src/app/(admin)/new_dashboard/guides/hooks/useSearchGuides.ts b/src/app/(admin)/new_dashboard/guides/hooks/useSearchGuides.ts
index 72e545c..2e2d8fc 100644
--- a/src/app/(admin)/new_dashboard/guides/hooks/useSearchGuides.ts
+++ b/src/app/(admin)/new_dashboard/guides/hooks/useSearchGuides.ts
@@ -1,14 +1,16 @@
-import { useState } from "react";
-import { Guide } from "@/api/types/Guide";
-import { SelectChangeEvent } from "@mui/material";
+import { useState } from 'react';
+import { Guide } from '@/api/types/Guide';
 
 export const useSearchGuides = (initialGuides: Guide[]) => {
-  const [searchQuery, setSearchQuery] = useState("");
-  const [selectedTag, setSelectedTag] = useState("All");
+  const [searchQuery, setSearchQuery] = useState('');
+  const [selectedTag, setSelectedTag] = useState('All');
 
   const filteredGuides = initialGuides.filter((guide) => {
-    const matchesQuery = guide.title.toLowerCase().includes(searchQuery.toLowerCase());
-    const matchesTag = selectedTag === "All" || guide.tags.includes(selectedTag);
+    const matchesQuery = guide.title
+      .toLowerCase()
+      .includes(searchQuery.toLowerCase());
+    const matchesTag =
+      selectedTag === 'All' || guide.tags.includes(selectedTag);
     return matchesQuery && matchesTag;
   });
 
@@ -16,8 +18,8 @@ export const useSearchGuides = (initialGuides: Guide[]) => {
     setSearchQuery(event.target.value);
   };
 
-  const handleTagChange = (event: SelectChangeEvent<string>) => {
-    setSelectedTag(event.target.value);
+  const handleTagChange = (_: React.ChangeEvent<{}>, value: string | null) => {
+    setSelectedTag(value || 'All');
   };
 
   return {
diff --git a/src/app/(admin)/new_dashboard/guides/page.tsx b/src/app/(admin)/new_dashboard/guides/page.tsx
index 739ae85..c70b7a3 100644
--- a/src/app/(admin)/new_dashboard/guides/page.tsx
+++ b/src/app/(admin)/new_dashboard/guides/page.tsx
@@ -14,17 +14,17 @@ const GuidesListPage = () => {
   const { data: issueData, isLoading: isLoadingIssues, error: issuesError, isError: isIssuesError, isSuccess: isIssuesSuccess } = useIssue();
 
   let guides: Guide[] = [];
-  let issues: string[] = [];
+  let tags: string[] = [];
 
   if (isGuidesSuccess && "data" in guideItems) {
     guides = guideItems.data;
   }
 
   if (isIssuesSuccess && "data" in issueData) {
-    issues = issueData.data.categories.toSorted();
+    tags = issueData.data.categories.toSorted();
   }
 
-  const { searchQuery, selectedIssue, filteredGuides, handleSearchChange, handleIssueChange } =
+  const { searchQuery, selectedTag, filteredGuides, handleSearchChange, handleTagChange } =
     useSearchGuides(guides);
 
   return (
@@ -43,9 +43,9 @@ const GuidesListPage = () => {
                 <SearchBar
                   searchQuery={searchQuery}
                   onSearchChange={handleSearchChange}
-                  selectedIssue={selectedIssue}
-                  onIssueChange={handleIssueChange}
-                  issues={["All", ...issues]}  
+                  selectedTag={selectedTag}
+                  onTagChange={handleTagChange}
+                  tags={["All", ...tags]}  
                 />
               </Box>
               <GuideList guideItems={filteredGuides} />

From c18e4f077420974d52c1465b3f0a79f368b3017d Mon Sep 17 00:00:00 2001
From: Ori <ori100no@gmail.com>
Date: Wed, 28 Aug 2024 10:32:35 +0300
Subject: [PATCH 164/242] changed to capital I

---
 src/api/issue.client.ts     | 11 +++++------
 src/api/types/Issue.ts      |  6 +++---
 src/hooks/api/issueHooks.ts |  4 ++--
 3 files changed, 10 insertions(+), 11 deletions(-)

diff --git a/src/api/issue.client.ts b/src/api/issue.client.ts
index 47c12d9..80b33df 100644
--- a/src/api/issue.client.ts
+++ b/src/api/issue.client.ts
@@ -1,13 +1,12 @@
-import { BaseClient } from './base.client';
-import { Issue } from './types/issue';
-import { UpdateIssueDto } from './types/issue';
+import { BaseClient } from "./base.client";
+import { UpdateIssueRequest, Issue } from "./types/Issue";
 
 export class IssueClient extends BaseClient {
   async getIssue() {
-    return await this.get<Issue>('issues');
+    return await this.get<Issue>("issues");
   }
 
-  async updateIssue(updateIssueRequest: UpdateIssueDto) {
-    return await this.patch<Issue>('issues', updateIssueRequest);
+  async updateIssue(updateIssueRequest: UpdateIssueRequest) {
+    return await this.patch<Issue>("issues", updateIssueRequest);
   }
 }
diff --git a/src/api/types/Issue.ts b/src/api/types/Issue.ts
index 56f2140..2d60e45 100644
--- a/src/api/types/Issue.ts
+++ b/src/api/types/Issue.ts
@@ -1,4 +1,4 @@
-import { z } from 'zod';
+import { z } from "zod";
 
 export const issueSchema = z.object({
   id: z.number(),
@@ -10,6 +10,6 @@ export const updateIssueDtoSchema = z.object({
   categories: z.array(z.string()),
 });
 
-export type UpdateIssueDto = z.infer<typeof updateIssueDtoSchema>;
+export type UpdateIssueRequest = z.infer<typeof updateIssueDtoSchema>;
 
-export type Issue = z.infer<typeof issueSchema>;
\ No newline at end of file
+export type Issue = z.infer<typeof issueSchema>;
diff --git a/src/hooks/api/issueHooks.ts b/src/hooks/api/issueHooks.ts
index 66f63c0..aec69d9 100644
--- a/src/hooks/api/issueHooks.ts
+++ b/src/hooks/api/issueHooks.ts
@@ -1,5 +1,5 @@
 import { IssueClient } from "@/api/issue.client";
-import { UpdateIssueDto } from "@/api/types/issue";
+import { UpdateIssueRequest } from "@/api/types/Issue";
 import { useQuery, useMutation } from "@tanstack/react-query";
 
 const issueClient = new IssueClient();
@@ -13,6 +13,6 @@ export function useIssue() {
 
 export function useUpdateIssue() {
   return useMutation({
-    mutationFn: (data: UpdateIssueDto) => issueClient.updateIssue(data),
+    mutationFn: (data: UpdateIssueRequest) => issueClient.updateIssue(data),
   });
 }

From dd4ae801f4e8fa429137c52dd0c07e06e975708b Mon Sep 17 00:00:00 2001
From: Ori <ori100no@gmail.com>
Date: Wed, 28 Aug 2024 11:00:39 +0300
Subject: [PATCH 165/242] changed name of tags to categories

---
 src/api/types/Guide.ts                               |  4 ++--
 .../guides/components/SearchBar/index.tsx            |  6 +++---
 .../new_dashboard/guides/hooks/useSearchGuides.ts    | 12 ++++++------
 src/app/(admin)/new_dashboard/guides/page.tsx        |  6 +++---
 4 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/api/types/Guide.ts b/src/api/types/Guide.ts
index d43e664..d8bfd63 100644
--- a/src/api/types/Guide.ts
+++ b/src/api/types/Guide.ts
@@ -5,7 +5,7 @@ import { reviewSchema } from './Review';
 const guideSchema = z.object({
   id: z.number(),
   title: z.string(),
-  tags: z.array(z.string()).max(3),
+  categories: z.array(z.string()).max(3),
   contentHTML: z.string(),
   creatorId: z.number(),
   createdAt: z.date(),
@@ -18,5 +18,5 @@ export type Guide = z.infer<typeof guideSchema>;
 export type CreateGuideRequest = {
   title: string;
   contentHTML: string;
-  tags: string[];
+  categories: string[];
 };
diff --git a/src/app/(admin)/new_dashboard/guides/components/SearchBar/index.tsx b/src/app/(admin)/new_dashboard/guides/components/SearchBar/index.tsx
index b1106d0..842f823 100644
--- a/src/app/(admin)/new_dashboard/guides/components/SearchBar/index.tsx
+++ b/src/app/(admin)/new_dashboard/guides/components/SearchBar/index.tsx
@@ -7,10 +7,10 @@ type Props = {
   onSearchChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
   selectedTag: string;
   onTagChange: (e: React.ChangeEvent<{}>, value: string | null) => void;
-  tags: string[];
+  categories: string[];
 };
 
-const SearchBar = ({ searchQuery, onSearchChange, selectedTag, onTagChange, tags }: Props) => (
+const SearchBar = ({ searchQuery, onSearchChange, selectedTag, onTagChange, categories }: Props) => (
   <Box display="flex" alignItems="center" justifyContent="space-between">
     <TextField
       fullWidth
@@ -28,7 +28,7 @@ const SearchBar = ({ searchQuery, onSearchChange, selectedTag, onTagChange, tags
     />
     <FormControl variant="outlined" sx={{ ml: 2, minWidth: 290 }}>
       <Autocomplete
-        options={[...tags]}
+        options={[...categories]}
         value={selectedTag}
         onChange={onTagChange}
         renderInput={(params) => (
diff --git a/src/app/(admin)/new_dashboard/guides/hooks/useSearchGuides.ts b/src/app/(admin)/new_dashboard/guides/hooks/useSearchGuides.ts
index 2e2d8fc..bb39488 100644
--- a/src/app/(admin)/new_dashboard/guides/hooks/useSearchGuides.ts
+++ b/src/app/(admin)/new_dashboard/guides/hooks/useSearchGuides.ts
@@ -1,16 +1,16 @@
-import { useState } from 'react';
-import { Guide } from '@/api/types/Guide';
+import { useState } from "react";
+import { Guide } from "@/api/types/Guide";
 
 export const useSearchGuides = (initialGuides: Guide[]) => {
-  const [searchQuery, setSearchQuery] = useState('');
-  const [selectedTag, setSelectedTag] = useState('All');
+  const [searchQuery, setSearchQuery] = useState("");
+  const [selectedTag, setSelectedTag] = useState("All");
 
   const filteredGuides = initialGuides.filter((guide) => {
     const matchesQuery = guide.title
       .toLowerCase()
       .includes(searchQuery.toLowerCase());
     const matchesTag =
-      selectedTag === 'All' || guide.tags.includes(selectedTag);
+      selectedTag === "All" || guide.categories.includes(selectedTag);
     return matchesQuery && matchesTag;
   });
 
@@ -19,7 +19,7 @@ export const useSearchGuides = (initialGuides: Guide[]) => {
   };
 
   const handleTagChange = (_: React.ChangeEvent<{}>, value: string | null) => {
-    setSelectedTag(value || 'All');
+    setSelectedTag(value || "All");
   };
 
   return {
diff --git a/src/app/(admin)/new_dashboard/guides/page.tsx b/src/app/(admin)/new_dashboard/guides/page.tsx
index c70b7a3..6513b2c 100644
--- a/src/app/(admin)/new_dashboard/guides/page.tsx
+++ b/src/app/(admin)/new_dashboard/guides/page.tsx
@@ -14,14 +14,14 @@ const GuidesListPage = () => {
   const { data: issueData, isLoading: isLoadingIssues, error: issuesError, isError: isIssuesError, isSuccess: isIssuesSuccess } = useIssue();
 
   let guides: Guide[] = [];
-  let tags: string[] = [];
+  let categories: string[] = [];
 
   if (isGuidesSuccess && "data" in guideItems) {
     guides = guideItems.data;
   }
 
   if (isIssuesSuccess && "data" in issueData) {
-    tags = issueData.data.categories.toSorted();
+    categories = issueData.data.categories.toSorted();
   }
 
   const { searchQuery, selectedTag, filteredGuides, handleSearchChange, handleTagChange } =
@@ -45,7 +45,7 @@ const GuidesListPage = () => {
                   onSearchChange={handleSearchChange}
                   selectedTag={selectedTag}
                   onTagChange={handleTagChange}
-                  tags={["All", ...tags]}  
+                  categories={["All", ...categories]}  
                 />
               </Box>
               <GuideList guideItems={filteredGuides} />

From 34ffc299960519e7d3c1cc73c4f73baf5f12db58 Mon Sep 17 00:00:00 2001
From: Ori <ori100no@gmail.com>
Date: Wed, 28 Aug 2024 11:27:38 +0300
Subject: [PATCH 166/242] displaying categories in guide card

---
 .../guides/components/GuideCard/index.tsx     | 20 ++++++++++++++-----
 1 file changed, 15 insertions(+), 5 deletions(-)

diff --git a/src/app/(admin)/new_dashboard/guides/components/GuideCard/index.tsx b/src/app/(admin)/new_dashboard/guides/components/GuideCard/index.tsx
index 0d6b26b..2087c2b 100644
--- a/src/app/(admin)/new_dashboard/guides/components/GuideCard/index.tsx
+++ b/src/app/(admin)/new_dashboard/guides/components/GuideCard/index.tsx
@@ -1,4 +1,4 @@
-import { Card, CardContent, Typography, Box, Rating } from "@mui/material";
+import { Card, CardContent, Typography, Box, Rating, Chip } from "@mui/material";
 import SupportIcon from "@mui/icons-material/Support";
 import { useTheme } from "@mui/material/styles";
 import { Guide } from "@/api/types/Guide";
@@ -13,16 +13,26 @@ const GuideCard = ({ guide }: Props) => {
   const avgRating = totalStars / (guide.reviews?.length ?? 1);
 
   return (
-    <Card variant="outlined">
-      <CardContent>
-        <Box display="grid" alignItems="center" mb={1}>
+    <Card sx={{ minHeight: 200, display: 'flex', flexDirection: 'column' }}>
+      <CardContent sx={{ flexGrow: 1, display: 'flex', flexDirection: 'column' }}>    
+        <Box display="grid" alignItems="center" mb={1}>    
           <Box display="flex" alignItems="center">
             <SupportIcon color="primary" sx={{ marginRight: theme.spacing(1) }} />
             <Typography variant="h6">{guide.title}</Typography>
           </Box>
-          <Typography variant="body2" color="textSecondary" mb={2}>
+          <Typography variant="body2" color="textSecondary" mt="auto" mb="auto">
             Created at: {new Date(guide.createdAt).toLocaleDateString()}
           </Typography>
+        </Box>  
+        <Box display="flex" flexWrap="wrap" mt="auto">
+          {guide.categories.map((category) => (
+            <Chip
+              key={category}
+              label={category}
+              size="small"
+              sx={{ margin: theme.spacing(0.5) }}
+            />
+          ))}
         </Box>
         <Box display="flex" alignItems="center">
           <Rating

From 051186b10f91a10e3cb01dccdc7b63693a1d1fd0 Mon Sep 17 00:00:00 2001
From: Ori <ori100no@gmail.com>
Date: Wed, 28 Aug 2024 11:45:41 +0300
Subject: [PATCH 167/242] extracted editor format and modules to themes

---
 .../guides/components/Editor/index.tsx        | 38 +++----------------
 src/util/theme.ts                             | 30 +++++++++++++++
 2 files changed, 35 insertions(+), 33 deletions(-)

diff --git a/src/app/(admin)/new_dashboard/guides/components/Editor/index.tsx b/src/app/(admin)/new_dashboard/guides/components/Editor/index.tsx
index 1de4666..557f625 100644
--- a/src/app/(admin)/new_dashboard/guides/components/Editor/index.tsx
+++ b/src/app/(admin)/new_dashboard/guides/components/Editor/index.tsx
@@ -5,6 +5,7 @@ import { Box, Button, TextField } from "@mui/material";
 import SaveAsIcon from "@mui/icons-material/SaveAs";
 import { UseFormRegister, UseFormSetValue } from "react-hook-form";
 import { CreateGuideRequest } from "@/api/types/Guide";
+import { editorFormats, editorModules } from "@/util/theme";
 
 const DynamicReactQuill = dynamic(() => import("react-quill"));
 
@@ -25,36 +26,7 @@ const GuideEditor = ({
   error,
   setValue,
 }: Props) => {
-  const modules = {
-    toolbar: [
-      [{ header: [1, 2, 3, 4, 5, 6, false] }],
-      [{ font: [] }],
-      ["bold", "italic", "underline", "strike", "blockquote"],
-      [{ align: ["right", "center", "justify"] }],
-      [{ list: "ordered" }, { list: "bullet" }],
-      ["link", "image"],
-      [{ color: [] }],
-      [{ background: [] }],
-    ],
-  };
-
-  const formats = [
-    "header",
-    "font",
-    "bold",
-    "italic",
-    "underline",
-    "strike",
-    "blockquote",
-    "list",
-    "bullet",
-    "link",
-    "color",
-    "image",
-    "background",
-    "align",
-  ];
-
+  
   return (
     <>
       <TextField
@@ -68,10 +40,10 @@ const GuideEditor = ({
       />
       <DynamicReactQuill
         theme="snow"
-        modules={modules}
-        formats={formats}
+        modules={editorModules}
+        formats={editorFormats}
         style={{ height: "570px" }}
-        defaultValue={initialContent} // Initial content for the editor
+        defaultValue={initialContent} 
         onChange={(content) => setValue("contentHTML", content)}
       />
       <input type="hidden" {...register("contentHTML")} />
diff --git a/src/util/theme.ts b/src/util/theme.ts
index 0a77b01..55c16ba 100644
--- a/src/util/theme.ts
+++ b/src/util/theme.ts
@@ -178,4 +178,34 @@ const baselightTheme = createTheme({
   },
 });
 
+export const editorModules = {
+  toolbar: [
+    [{ header: [1, 2, 3, 4, 5, 6, false] }],
+    [{ font: [] }],
+    ["bold", "italic", "underline", "strike", "blockquote"],
+    [{ align: ["right", "center", "justify"] }],
+    [{ list: "ordered" }, { list: "bullet" }],
+    ["link", "image"],
+    [{ color: [] }],
+    [{ background: [] }],
+  ],
+};
+
+export const editorFormats = [
+  "header",
+  "font",
+  "bold",
+  "italic",
+  "underline",
+  "strike",
+  "blockquote",
+  "list",
+  "bullet",
+  "link",
+  "color",
+  "image",
+  "background",
+  "align",
+];
+
 export { baselightTheme };
\ No newline at end of file

From 53ccbc158cfdd65c81bef24662414a02970451f4 Mon Sep 17 00:00:00 2001
From: Ori <ori100no@gmail.com>
Date: Wed, 28 Aug 2024 11:51:46 +0300
Subject: [PATCH 168/242] Revert "displaying categories in guide card"

This reverts commit 34ffc299960519e7d3c1cc73c4f73baf5f12db58.
---
 .../guides/components/GuideCard/index.tsx     | 20 +++++--------------
 1 file changed, 5 insertions(+), 15 deletions(-)

diff --git a/src/app/(admin)/new_dashboard/guides/components/GuideCard/index.tsx b/src/app/(admin)/new_dashboard/guides/components/GuideCard/index.tsx
index 2087c2b..0d6b26b 100644
--- a/src/app/(admin)/new_dashboard/guides/components/GuideCard/index.tsx
+++ b/src/app/(admin)/new_dashboard/guides/components/GuideCard/index.tsx
@@ -1,4 +1,4 @@
-import { Card, CardContent, Typography, Box, Rating, Chip } from "@mui/material";
+import { Card, CardContent, Typography, Box, Rating } from "@mui/material";
 import SupportIcon from "@mui/icons-material/Support";
 import { useTheme } from "@mui/material/styles";
 import { Guide } from "@/api/types/Guide";
@@ -13,26 +13,16 @@ const GuideCard = ({ guide }: Props) => {
   const avgRating = totalStars / (guide.reviews?.length ?? 1);
 
   return (
-    <Card sx={{ minHeight: 200, display: 'flex', flexDirection: 'column' }}>
-      <CardContent sx={{ flexGrow: 1, display: 'flex', flexDirection: 'column' }}>    
-        <Box display="grid" alignItems="center" mb={1}>    
+    <Card variant="outlined">
+      <CardContent>
+        <Box display="grid" alignItems="center" mb={1}>
           <Box display="flex" alignItems="center">
             <SupportIcon color="primary" sx={{ marginRight: theme.spacing(1) }} />
             <Typography variant="h6">{guide.title}</Typography>
           </Box>
-          <Typography variant="body2" color="textSecondary" mt="auto" mb="auto">
+          <Typography variant="body2" color="textSecondary" mb={2}>
             Created at: {new Date(guide.createdAt).toLocaleDateString()}
           </Typography>
-        </Box>  
-        <Box display="flex" flexWrap="wrap" mt="auto">
-          {guide.categories.map((category) => (
-            <Chip
-              key={category}
-              label={category}
-              size="small"
-              sx={{ margin: theme.spacing(0.5) }}
-            />
-          ))}
         </Box>
         <Box display="flex" alignItems="center">
           <Rating

From a6d0fd9cf18177e6f4875c8d17ae79bdf362f076 Mon Sep 17 00:00:00 2001
From: Ori <ori100no@gmail.com>
Date: Wed, 28 Aug 2024 11:53:34 +0300
Subject: [PATCH 169/242] Revert "extracted editor format and modules to
 themes"

This reverts commit 051186b10f91a10e3cb01dccdc7b63693a1d1fd0.
---
 .../guides/components/Editor/index.tsx        | 38 ++++++++++++++++---
 src/util/theme.ts                             | 30 ---------------
 2 files changed, 33 insertions(+), 35 deletions(-)

diff --git a/src/app/(admin)/new_dashboard/guides/components/Editor/index.tsx b/src/app/(admin)/new_dashboard/guides/components/Editor/index.tsx
index 557f625..1de4666 100644
--- a/src/app/(admin)/new_dashboard/guides/components/Editor/index.tsx
+++ b/src/app/(admin)/new_dashboard/guides/components/Editor/index.tsx
@@ -5,7 +5,6 @@ import { Box, Button, TextField } from "@mui/material";
 import SaveAsIcon from "@mui/icons-material/SaveAs";
 import { UseFormRegister, UseFormSetValue } from "react-hook-form";
 import { CreateGuideRequest } from "@/api/types/Guide";
-import { editorFormats, editorModules } from "@/util/theme";
 
 const DynamicReactQuill = dynamic(() => import("react-quill"));
 
@@ -26,7 +25,36 @@ const GuideEditor = ({
   error,
   setValue,
 }: Props) => {
-  
+  const modules = {
+    toolbar: [
+      [{ header: [1, 2, 3, 4, 5, 6, false] }],
+      [{ font: [] }],
+      ["bold", "italic", "underline", "strike", "blockquote"],
+      [{ align: ["right", "center", "justify"] }],
+      [{ list: "ordered" }, { list: "bullet" }],
+      ["link", "image"],
+      [{ color: [] }],
+      [{ background: [] }],
+    ],
+  };
+
+  const formats = [
+    "header",
+    "font",
+    "bold",
+    "italic",
+    "underline",
+    "strike",
+    "blockquote",
+    "list",
+    "bullet",
+    "link",
+    "color",
+    "image",
+    "background",
+    "align",
+  ];
+
   return (
     <>
       <TextField
@@ -40,10 +68,10 @@ const GuideEditor = ({
       />
       <DynamicReactQuill
         theme="snow"
-        modules={editorModules}
-        formats={editorFormats}
+        modules={modules}
+        formats={formats}
         style={{ height: "570px" }}
-        defaultValue={initialContent} 
+        defaultValue={initialContent} // Initial content for the editor
         onChange={(content) => setValue("contentHTML", content)}
       />
       <input type="hidden" {...register("contentHTML")} />
diff --git a/src/util/theme.ts b/src/util/theme.ts
index 55c16ba..0a77b01 100644
--- a/src/util/theme.ts
+++ b/src/util/theme.ts
@@ -178,34 +178,4 @@ const baselightTheme = createTheme({
   },
 });
 
-export const editorModules = {
-  toolbar: [
-    [{ header: [1, 2, 3, 4, 5, 6, false] }],
-    [{ font: [] }],
-    ["bold", "italic", "underline", "strike", "blockquote"],
-    [{ align: ["right", "center", "justify"] }],
-    [{ list: "ordered" }, { list: "bullet" }],
-    ["link", "image"],
-    [{ color: [] }],
-    [{ background: [] }],
-  ],
-};
-
-export const editorFormats = [
-  "header",
-  "font",
-  "bold",
-  "italic",
-  "underline",
-  "strike",
-  "blockquote",
-  "list",
-  "bullet",
-  "link",
-  "color",
-  "image",
-  "background",
-  "align",
-];
-
 export { baselightTheme };
\ No newline at end of file

From f249160496c71eff7981181f85a4a3cdd436efec Mon Sep 17 00:00:00 2001
From: Ori <ori100no@gmail.com>
Date: Wed, 28 Aug 2024 12:03:00 +0300
Subject: [PATCH 170/242] changed schema to fit new guide type

---
 .../(admin)/new_dashboard/guides/create/validations/schema.ts   | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/app/(admin)/new_dashboard/guides/create/validations/schema.ts b/src/app/(admin)/new_dashboard/guides/create/validations/schema.ts
index 75b955a..1fd7237 100644
--- a/src/app/(admin)/new_dashboard/guides/create/validations/schema.ts
+++ b/src/app/(admin)/new_dashboard/guides/create/validations/schema.ts
@@ -1,6 +1,8 @@
+import { getEnabledCategories } from "trace_events";
 import { z } from "zod";
 
 export const schema = z.object({
   contentHTML: z.string(),
   title: z.string(),
+  categories: z.array(z.string()).max(3),
 });

From fe5a6efe04c2477ff9a2380c237d8948e9f32463 Mon Sep 17 00:00:00 2001
From: Ori <ori100no@gmail.com>
Date: Wed, 28 Aug 2024 12:09:23 +0300
Subject: [PATCH 171/242] feat: Add useCategories hook for fetching and
 returning categories

This commit adds a new file, `useCategories.ts`, which contains the `useCategories` hook. This hook utilizes the `useIssue` hook from the `api/issueHooks` module to fetch issue data. If the request is successful and the issue data contains a `categories` property, the `categories` variable is populated with the category values. The `useCategories` hook returns the `categories` array, along with the `error` and `isLoading` variables.

Recent user commits:
- changed schema to fit new guide type
- extracted editor format and modules to themes
- displaying categories in guide card
- changed name of tags to categories
- changed to capital I
- put issue into an array
- updated ui
- added tags instead of issue as an array
---
 .../new_dashboard/guides/hooks/useCategories.ts        | 10 ++++++++++
 1 file changed, 10 insertions(+)
 create mode 100644 src/app/(admin)/new_dashboard/guides/hooks/useCategories.ts

diff --git a/src/app/(admin)/new_dashboard/guides/hooks/useCategories.ts b/src/app/(admin)/new_dashboard/guides/hooks/useCategories.ts
new file mode 100644
index 0000000..fdf4f05
--- /dev/null
+++ b/src/app/(admin)/new_dashboard/guides/hooks/useCategories.ts
@@ -0,0 +1,10 @@
+import { useIssue } from "@/hooks/api/issueHooks"
+
+export const useCategories = () => {
+    const {data:issue, error, isLoading,isSuccess} = useIssue()
+    let categories: string[] = []
+    if(isSuccess && "data" in issue){
+        categories = issue.data.categories
+    }
+    return {categories, error, isLoading}
+}
\ No newline at end of file

From 27aab4bc6fdda87388f6bb689f4dfe382649da86 Mon Sep 17 00:00:00 2001
From: Ori <ori100no@gmail.com>
Date: Wed, 28 Aug 2024 12:21:24 +0300
Subject: [PATCH 172/242] feat: Add useGuideItems hook for fetching and
 returning guide items

---
 .../guides/hooks/useGuideItems.ts             | 21 ++++++++++++++++
 src/app/(admin)/new_dashboard/guides/page.tsx | 24 +++++--------------
 2 files changed, 27 insertions(+), 18 deletions(-)
 create mode 100644 src/app/(admin)/new_dashboard/guides/hooks/useGuideItems.ts

diff --git a/src/app/(admin)/new_dashboard/guides/hooks/useGuideItems.ts b/src/app/(admin)/new_dashboard/guides/hooks/useGuideItems.ts
new file mode 100644
index 0000000..47b545f
--- /dev/null
+++ b/src/app/(admin)/new_dashboard/guides/hooks/useGuideItems.ts
@@ -0,0 +1,21 @@
+import { useAllGuides } from "@/hooks";
+import { Guide } from "@/api/types/Guide";
+
+export const useGuideItems = () => {
+  const {
+    data: guideItems,
+    isLoading: isLoadingGuides,
+    error: guidesError,
+    isError: isGuidesError,
+    isSuccess: isGuidesSuccess,
+  } = useAllGuides();
+
+    let guides: Guide[] = [];
+
+    if (isGuidesSuccess && "data" in guideItems) {
+      guides = guideItems.data;
+    }
+
+    return { guides, isLoadingGuides, guidesError, isGuidesError, isGuidesSuccess };
+
+};
diff --git a/src/app/(admin)/new_dashboard/guides/page.tsx b/src/app/(admin)/new_dashboard/guides/page.tsx
index 6513b2c..0b5be21 100644
--- a/src/app/(admin)/new_dashboard/guides/page.tsx
+++ b/src/app/(admin)/new_dashboard/guides/page.tsx
@@ -5,24 +5,12 @@ import { Alert, Box, CircularProgress, Typography } from "@mui/material";
 import GuideList from "./components/GuideList";
 import SearchBar from "./components/SearchBar";
 import { useSearchGuides } from "./hooks";
-import { useAllGuides} from "@/hooks";
-import { useIssue } from "@/hooks/api/issueHooks";
-import { Guide } from "@/api/types/Guide";
+import { useGuideItems } from "./hooks/useGuideItems";
+import { useCategories } from "./hooks/useCategories";
 
 const GuidesListPage = () => {
-  const { data: guideItems, isLoading: isLoadingGuides, error: guidesError, isError: isGuidesError, isSuccess: isGuidesSuccess } = useAllGuides();
-  const { data: issueData, isLoading: isLoadingIssues, error: issuesError, isError: isIssuesError, isSuccess: isIssuesSuccess } = useIssue();
-
-  let guides: Guide[] = [];
-  let categories: string[] = [];
-
-  if (isGuidesSuccess && "data" in guideItems) {
-    guides = guideItems.data;
-  }
-
-  if (isIssuesSuccess && "data" in issueData) {
-    categories = issueData.data.categories.toSorted();
-  }
+  const { guides, isLoadingGuides, guidesError, isGuidesError, isGuidesSuccess } = useGuideItems();
+  const { categories, error: issuesError, isLoading: isLoadingIssues } = useCategories();
 
   const { searchQuery, selectedTag, filteredGuides, handleSearchChange, handleTagChange } =
     useSearchGuides(guides);
@@ -32,12 +20,12 @@ const GuidesListPage = () => {
       <DashboardCard title="Guides">
         <Box>
           {(isLoadingGuides || isLoadingIssues) && <CircularProgress />}
-          {(isGuidesError || isIssuesError) && (
+          {(isGuidesError || issuesError) && (
             <Alert severity="error">
               {guidesError?.message || issuesError?.message || "An error occurred"}
             </Alert>
           )}
-          {isGuidesSuccess && isIssuesSuccess && guides.length > 0 && (
+          {isGuidesSuccess && guides.length > 0 && (
             <>
               <Box mb={2}>
                 <SearchBar

From 2cdb85529b044f32b861e33b879467840a5f6540 Mon Sep 17 00:00:00 2001
From: Ori <ori100no@gmail.com>
Date: Wed, 28 Aug 2024 12:21:39 +0300
Subject: [PATCH 173/242] refactor: Update GuideCard component to display
 categories as chips

---
 .../guides/components/GuideCard/index.tsx     | 23 +++++++++++++++----
 1 file changed, 18 insertions(+), 5 deletions(-)

diff --git a/src/app/(admin)/new_dashboard/guides/components/GuideCard/index.tsx b/src/app/(admin)/new_dashboard/guides/components/GuideCard/index.tsx
index 0d6b26b..b7d6417 100644
--- a/src/app/(admin)/new_dashboard/guides/components/GuideCard/index.tsx
+++ b/src/app/(admin)/new_dashboard/guides/components/GuideCard/index.tsx
@@ -1,4 +1,4 @@
-import { Card, CardContent, Typography, Box, Rating } from "@mui/material";
+import { Card, CardContent, Typography, Box, Rating, Chip } from "@mui/material";
 import SupportIcon from "@mui/icons-material/Support";
 import { useTheme } from "@mui/material/styles";
 import { Guide } from "@/api/types/Guide";
@@ -13,8 +13,8 @@ const GuideCard = ({ guide }: Props) => {
   const avgRating = totalStars / (guide.reviews?.length ?? 1);
 
   return (
-    <Card variant="outlined">
-      <CardContent>
+    <Card sx={{ minHeight: 200, display: 'flex', flexDirection: 'column' }}>
+      <CardContent sx={{ flexGrow: 1, display: 'flex', flexDirection: 'column' }}>
         <Box display="grid" alignItems="center" mb={1}>
           <Box display="flex" alignItems="center">
             <SupportIcon color="primary" sx={{ marginRight: theme.spacing(1) }} />
@@ -24,11 +24,24 @@ const GuideCard = ({ guide }: Props) => {
             Created at: {new Date(guide.createdAt).toLocaleDateString()}
           </Typography>
         </Box>
-        <Box display="flex" alignItems="center">
+        
+        <Box display="flex" flexWrap="wrap" mb={2}>
+          {guide.categories.map((category) => (
+            <Chip
+              key={category}
+              label={category}
+              size="small"
+              sx={{ margin: theme.spacing(0.5) }}
+            />
+          ))}
+        </Box>
+
+        <Box display="flex" alignItems="center" mt="auto">
           <Rating
             value={avgRating}
             precision={0.5}
-            readOnly sx={{ color: 'gold' }}
+            readOnly
+            sx={{ color: 'gold' }}
           />
           <Typography variant="body2" mx={1}>
             ({guide.reviews?.length ?? 0})

From 8f0a2cb9d81dd818da6bb7dac6aca9409d7708de Mon Sep 17 00:00:00 2001
From: Ori <ori100no@gmail.com>
Date: Wed, 28 Aug 2024 12:42:36 +0300
Subject: [PATCH 174/242] now the popup is in the background

---
 src/app/(admin)/new_dashboard/components/ChatPopup/index.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/app/(admin)/new_dashboard/components/ChatPopup/index.tsx b/src/app/(admin)/new_dashboard/components/ChatPopup/index.tsx
index bcaa3df..656ab70 100644
--- a/src/app/(admin)/new_dashboard/components/ChatPopup/index.tsx
+++ b/src/app/(admin)/new_dashboard/components/ChatPopup/index.tsx
@@ -24,7 +24,6 @@ const ChatPopup = ({ selectedContact }: Props) => {
         position: 'fixed',
         bottom: 0,
         right: 0,
-        width: '100%',
         display: 'flex',
         justifyContent: 'flex-end',
         alignItems: 'flex-end',

From 89d6e8c1cb40a7f8b0ea9e13789a9878c45cd181 Mon Sep 17 00:00:00 2001
From: Ori <ori100no@gmail.com>
Date: Wed, 28 Aug 2024 12:43:01 +0300
Subject: [PATCH 175/242] chore: Remove commented out code and unnecessary
 comments in ChatPopup component

---
 .../(admin)/new_dashboard/components/ChatPopup/index.tsx   | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/src/app/(admin)/new_dashboard/components/ChatPopup/index.tsx b/src/app/(admin)/new_dashboard/components/ChatPopup/index.tsx
index 656ab70..8668edc 100644
--- a/src/app/(admin)/new_dashboard/components/ChatPopup/index.tsx
+++ b/src/app/(admin)/new_dashboard/components/ChatPopup/index.tsx
@@ -29,10 +29,9 @@ const ChatPopup = ({ selectedContact }: Props) => {
         alignItems: 'flex-end',
         padding: 2,
         boxSizing: 'border-box',
-        zIndex: 1000, // Ensures the chat popup is on top of other elements
+        zIndex: 1000,
       }}
     >
-      {/* Toggle Button */}
       <IconButton
         color="primary"
         onClick={toggleChat}
@@ -45,7 +44,6 @@ const ChatPopup = ({ selectedContact }: Props) => {
         {isOpen ? <Close /> : <Chat />}
       </IconButton>
 
-      {/* Chat Popup */}
       {isOpen && selectedContact && (
         <Paper
           elevation={6}
@@ -62,7 +60,6 @@ const ChatPopup = ({ selectedContact }: Props) => {
             zIndex: 1000,
           }}
         >
-          {/* Chat Header */}
           <Box
             sx={{
               backgroundColor: 'primary.main',
@@ -76,7 +73,6 @@ const ChatPopup = ({ selectedContact }: Props) => {
             <Typography variant="h6">{selectedContact.username}</Typography>
           </Box>
 
-          {/* Message List */}
           <Box
             sx={{
               flexGrow: 1,
@@ -88,7 +84,6 @@ const ChatPopup = ({ selectedContact }: Props) => {
             <SupportMessageList chatId={selectedContact.chatId} />
           </Box>
 
-          {/* Input and Send Button */}
           <Box>
             <MessageInput chatId={selectedContact.chatId} isPopup={true}/>
           </Box>

From 6ebf132f21e8e728f27c3fb528a05093bde6bbcb Mon Sep 17 00:00:00 2001
From: Ori <ori100no@gmail.com>
Date: Wed, 28 Aug 2024 13:15:12 +0300
Subject: [PATCH 176/242] edded categories to guide editor

---
 .../guides/components/Editor/index.tsx        | 38 ++++++++++++++++++-
 .../guides/create/hooks/useCreateGuide.ts     |  5 +++
 .../new_dashboard/guides/create/page.tsx      |  6 ++-
 .../guides/create/validations/schema.ts       |  7 ++--
 .../guides/hooks/useCategories.ts             | 16 ++++----
 5 files changed, 57 insertions(+), 15 deletions(-)

diff --git a/src/app/(admin)/new_dashboard/guides/components/Editor/index.tsx b/src/app/(admin)/new_dashboard/guides/components/Editor/index.tsx
index 1de4666..ca1efef 100644
--- a/src/app/(admin)/new_dashboard/guides/components/Editor/index.tsx
+++ b/src/app/(admin)/new_dashboard/guides/components/Editor/index.tsx
@@ -1,9 +1,9 @@
 import dynamic from "next/dynamic";
 import { useState } from "react";
 import "react-quill/dist/quill.snow.css";
-import { Box, Button, TextField } from "@mui/material";
+import { Box, Button, TextField, Autocomplete, Chip } from "@mui/material";
 import SaveAsIcon from "@mui/icons-material/SaveAs";
-import { UseFormRegister, UseFormSetValue } from "react-hook-form";
+import { UseFormRegister, UseFormSetValue, UseFormWatch } from "react-hook-form";
 import { CreateGuideRequest } from "@/api/types/Guide";
 
 const DynamicReactQuill = dynamic(() => import("react-quill"));
@@ -11,20 +11,33 @@ const DynamicReactQuill = dynamic(() => import("react-quill"));
 interface Props {
   initialTitle?: string;
   initialContent?: string;
+  categories: string[];
   onSave: () => void;
   register: UseFormRegister<CreateGuideRequest>;
   error: Error | null;
   setValue: UseFormSetValue<CreateGuideRequest>;
+  watch: UseFormWatch<CreateGuideRequest>;
 }
 
 const GuideEditor = ({
   initialContent = "",
   initialTitle = "",
+  categories,
   onSave,
   register,
   error,
   setValue,
+  watch,
 }: Props) => {
+  const [selectedCategories, setSelectedCategories] = useState<string[]>(watch("categories") || []);
+
+  const handleCategoryChange = (event: any, newValue: string[]) => {
+    if (newValue.length <= 3) {
+      setSelectedCategories(newValue);
+      setValue("categories", newValue);
+    }
+  };
+
   const modules = {
     toolbar: [
       [{ header: [1, 2, 3, 4, 5, 6, false] }],
@@ -66,6 +79,26 @@ const GuideEditor = ({
         onChange={(e) => setValue("title", e.target.value)}
         sx={{ mb: 2 }}
       />
+
+      <Autocomplete
+        multiple
+        freeSolo
+        options={categories}
+        value={selectedCategories}
+        onChange={handleCategoryChange}
+        renderTags={(value: string[], getTagProps) =>
+          value.map((option: string, index: number) => (
+            <Box key={index}>
+              <Chip variant="outlined" label={option} {...getTagProps({ index })} />
+            </Box>
+          ))
+        }
+        renderInput={(params) => (
+          <TextField {...params} variant="outlined" label="Categories" placeholder="Add up to 3 categories" />
+        )}
+        sx={{ mt: 2 ,mb: 2 }}
+      />
+
       <DynamicReactQuill
         theme="snow"
         modules={modules}
@@ -75,6 +108,7 @@ const GuideEditor = ({
         onChange={(content) => setValue("contentHTML", content)}
       />
       <input type="hidden" {...register("contentHTML")} />
+
       <Box display="flex" flexDirection="column" alignItems="flex-end" mt={6}>
         <Button
           variant="contained"
diff --git a/src/app/(admin)/new_dashboard/guides/create/hooks/useCreateGuide.ts b/src/app/(admin)/new_dashboard/guides/create/hooks/useCreateGuide.ts
index 044ae87..48f5744 100644
--- a/src/app/(admin)/new_dashboard/guides/create/hooks/useCreateGuide.ts
+++ b/src/app/(admin)/new_dashboard/guides/create/hooks/useCreateGuide.ts
@@ -11,11 +11,15 @@ export const useGuide = () => {
     register,
     handleSubmit,
     setValue,
+    watch,
     formState: { errors, isValid },
   } = useForm<CreateGuideRequest>({
     resolver: zodResolver(schema),
     mode: "onChange",
     reValidateMode: "onChange",
+    defaultValues: {
+      categories: [],
+    },
   });
   const { guide } = useGuideContext();
 
@@ -36,6 +40,7 @@ export const useGuide = () => {
     guide,
     register,
     setValue,
+    watch,
     handleSubmit: handleSubmit(onSubmit),
     errors,
     isValid,
diff --git a/src/app/(admin)/new_dashboard/guides/create/page.tsx b/src/app/(admin)/new_dashboard/guides/create/page.tsx
index 8f5bbb4..7618378 100644
--- a/src/app/(admin)/new_dashboard/guides/create/page.tsx
+++ b/src/app/(admin)/new_dashboard/guides/create/page.tsx
@@ -4,9 +4,11 @@ import DashboardCard from "../../shared/Card";
 import { Box } from "@mui/material";
 import GuideEditor from "../components/Editor";
 import { useGuide } from "./hooks/useCreateGuide";
+import { useCategories } from "../hooks/useCategories";
 
 const Page = () => {
-  const { guide, register, error, handleSubmit, setValue } = useGuide();
+  const { guide, register, error, handleSubmit, setValue, watch } = useGuide();
+  const { categories } = useCategories();
   return (
     <PageContainer title="Create Guide">
       <Box
@@ -18,6 +20,8 @@ const Page = () => {
           <GuideEditor
             register={register}
             setValue={setValue}
+            watch={watch}
+            categories={categories}
             error={error}
             onSave={handleSubmit}
             initialTitle={guide?.title}
diff --git a/src/app/(admin)/new_dashboard/guides/create/validations/schema.ts b/src/app/(admin)/new_dashboard/guides/create/validations/schema.ts
index 1fd7237..04cfef3 100644
--- a/src/app/(admin)/new_dashboard/guides/create/validations/schema.ts
+++ b/src/app/(admin)/new_dashboard/guides/create/validations/schema.ts
@@ -1,8 +1,7 @@
-import { getEnabledCategories } from "trace_events";
 import { z } from "zod";
 
 export const schema = z.object({
-  contentHTML: z.string(),
-  title: z.string(),
-  categories: z.array(z.string()).max(3),
+  contentHTML: z.string().min(1, "Content is required"),
+  title: z.string().min(1, "Title is required"),
+  categories: z.array(z.string()).max(3, "You can select up to 3 categories"),
 });
diff --git a/src/app/(admin)/new_dashboard/guides/hooks/useCategories.ts b/src/app/(admin)/new_dashboard/guides/hooks/useCategories.ts
index fdf4f05..4c34fea 100644
--- a/src/app/(admin)/new_dashboard/guides/hooks/useCategories.ts
+++ b/src/app/(admin)/new_dashboard/guides/hooks/useCategories.ts
@@ -1,10 +1,10 @@
-import { useIssue } from "@/hooks/api/issueHooks"
+import { useIssue } from "@/hooks/api/issueHooks";
 
 export const useCategories = () => {
-    const {data:issue, error, isLoading,isSuccess} = useIssue()
-    let categories: string[] = []
-    if(isSuccess && "data" in issue){
-        categories = issue.data.categories
-    }
-    return {categories, error, isLoading}
-}
\ No newline at end of file
+  const { data: issue, error, isLoading, isSuccess } = useIssue();
+  let categories: string[] = [];
+  if (isSuccess && "data" in issue) {
+    categories = issue.data.categories.toSorted();
+  }
+  return { categories, error, isLoading };
+};

From e16bf7550bfd2539ac94e3177790f2027f600c62 Mon Sep 17 00:00:00 2001
From: Ori <ori100no@gmail.com>
Date: Wed, 28 Aug 2024 13:35:48 +0300
Subject: [PATCH 177/242] feat: Add selectedCategories and handleCategoryChange
 to GuideEditor

The changes in this commit add the `selectedCategories` prop and `handleCategoryChange` function to the `GuideEditor` component. These additions allow for the selection and handling of categories in the guide editor.
---
 .../guides/components/Editor/index.tsx            | 11 ++++-------
 .../guides/create/hooks/useCreateGuide.ts         | 15 +++++++++++++++
 .../(admin)/new_dashboard/guides/create/page.tsx  |  5 +++--
 3 files changed, 22 insertions(+), 9 deletions(-)

diff --git a/src/app/(admin)/new_dashboard/guides/components/Editor/index.tsx b/src/app/(admin)/new_dashboard/guides/components/Editor/index.tsx
index ca1efef..3d6f0a9 100644
--- a/src/app/(admin)/new_dashboard/guides/components/Editor/index.tsx
+++ b/src/app/(admin)/new_dashboard/guides/components/Editor/index.tsx
@@ -12,6 +12,8 @@ interface Props {
   initialTitle?: string;
   initialContent?: string;
   categories: string[];
+  selectedCategories: string[];
+  handleCategoryChange: (event: any, newValue: string[]) => void;
   onSave: () => void;
   register: UseFormRegister<CreateGuideRequest>;
   error: Error | null;
@@ -23,20 +25,15 @@ const GuideEditor = ({
   initialContent = "",
   initialTitle = "",
   categories,
+  selectedCategories,
+  handleCategoryChange,
   onSave,
   register,
   error,
   setValue,
   watch,
 }: Props) => {
-  const [selectedCategories, setSelectedCategories] = useState<string[]>(watch("categories") || []);
 
-  const handleCategoryChange = (event: any, newValue: string[]) => {
-    if (newValue.length <= 3) {
-      setSelectedCategories(newValue);
-      setValue("categories", newValue);
-    }
-  };
 
   const modules = {
     toolbar: [
diff --git a/src/app/(admin)/new_dashboard/guides/create/hooks/useCreateGuide.ts b/src/app/(admin)/new_dashboard/guides/create/hooks/useCreateGuide.ts
index 48f5744..99efd29 100644
--- a/src/app/(admin)/new_dashboard/guides/create/hooks/useCreateGuide.ts
+++ b/src/app/(admin)/new_dashboard/guides/create/hooks/useCreateGuide.ts
@@ -5,6 +5,8 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { useForm } from "react-hook-form";
 import { schema } from "../validations/schema";
 import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { useCategories } from "../../hooks/useCategories";
 
 export const useGuide = () => {
   const {
@@ -36,8 +38,21 @@ export const useGuide = () => {
     });
   };
 
+  const {categories} = useCategories();
+  const [selectedCategories, setSelectedCategories] = useState<string[]>(watch("categories") || []);
+  const handleCategoryChange = (event: any, newValue: string[]) => {
+    if (newValue.length <= 3) {
+      setSelectedCategories(newValue);
+      setValue("categories", newValue);
+    }
+  };
+
+
   return {
     guide,
+    categories,
+    selectedCategories,
+    handleCategoryChange,
     register,
     setValue,
     watch,
diff --git a/src/app/(admin)/new_dashboard/guides/create/page.tsx b/src/app/(admin)/new_dashboard/guides/create/page.tsx
index 7618378..2228e2a 100644
--- a/src/app/(admin)/new_dashboard/guides/create/page.tsx
+++ b/src/app/(admin)/new_dashboard/guides/create/page.tsx
@@ -7,8 +7,7 @@ import { useGuide } from "./hooks/useCreateGuide";
 import { useCategories } from "../hooks/useCategories";
 
 const Page = () => {
-  const { guide, register, error, handleSubmit, setValue, watch } = useGuide();
-  const { categories } = useCategories();
+  const { guide,categories,selectedCategories,handleCategoryChange ,register, error, handleSubmit, setValue, watch } = useGuide();
   return (
     <PageContainer title="Create Guide">
       <Box
@@ -20,6 +19,8 @@ const Page = () => {
           <GuideEditor
             register={register}
             setValue={setValue}
+            selectedCategories={selectedCategories}
+            handleCategoryChange={handleCategoryChange}
             watch={watch}
             categories={categories}
             error={error}

From a4b7b3c251059336213216ed9b74f19c53189fe4 Mon Sep 17 00:00:00 2001
From: Ori <ori100no@gmail.com>
Date: Wed, 28 Aug 2024 13:39:02 +0300
Subject: [PATCH 178/242] improve ui

---
 .../(admin)/new_dashboard/guides/components/Editor/index.tsx    | 2 +-
 .../(admin)/new_dashboard/guides/components/GuideCard/index.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/(admin)/new_dashboard/guides/components/Editor/index.tsx b/src/app/(admin)/new_dashboard/guides/components/Editor/index.tsx
index 3d6f0a9..129f7ec 100644
--- a/src/app/(admin)/new_dashboard/guides/components/Editor/index.tsx
+++ b/src/app/(admin)/new_dashboard/guides/components/Editor/index.tsx
@@ -6,7 +6,7 @@ import SaveAsIcon from "@mui/icons-material/SaveAs";
 import { UseFormRegister, UseFormSetValue, UseFormWatch } from "react-hook-form";
 import { CreateGuideRequest } from "@/api/types/Guide";
 
-const DynamicReactQuill = dynamic(() => import("react-quill"));
+const DynamicReactQuill = dynamic((Pgiu) => import("react-quill"));
 
 interface Props {
   initialTitle?: string;
diff --git a/src/app/(admin)/new_dashboard/guides/components/GuideCard/index.tsx b/src/app/(admin)/new_dashboard/guides/components/GuideCard/index.tsx
index b7d6417..9000abf 100644
--- a/src/app/(admin)/new_dashboard/guides/components/GuideCard/index.tsx
+++ b/src/app/(admin)/new_dashboard/guides/components/GuideCard/index.tsx
@@ -13,7 +13,7 @@ const GuideCard = ({ guide }: Props) => {
   const avgRating = totalStars / (guide.reviews?.length ?? 1);
 
   return (
-    <Card sx={{ minHeight: 200, display: 'flex', flexDirection: 'column' }}>
+    <Card sx={{ minHeight:230, display: 'flex', flexDirection: 'column' }}>
       <CardContent sx={{ flexGrow: 1, display: 'flex', flexDirection: 'column' }}>
         <Box display="grid" alignItems="center" mb={1}>
           <Box display="flex" alignItems="center">

From ce036a636e7c8f9cb570b88fe1507fed836319df Mon Sep 17 00:00:00 2001
From: roiy0987 <roiy0987@gmail.com>
Date: Wed, 28 Aug 2024 18:10:30 +0300
Subject: [PATCH 179/242] refactor: Update useGuide hook to handle closing chat
 and generating guide

---
 .../components/ChatHeader/index.tsx           |  20 +++-
 .../components/ChatPopup/index.tsx            | 107 ++++++++++++++++++
 .../components/SupportMessageList/index.tsx   |  35 +++++-
 .../new_dashboard/guides/[id]/page.tsx        |  24 ++--
 .../guides/components/AddReviewBox/index.tsx  |  20 ++--
 .../guides/components/ReviewList/index.tsx    |  17 ++-
 .../guides/hooks/useAddReviewForm.ts          |  16 +--
 .../(admin)/new_dashboard/guides/layout.tsx   |  17 +++
 src/app/(admin)/new_dashboard/guides/page.tsx |  50 ++++----
 src/app/(admin)/new_dashboard/page.tsx        |  15 ++-
 .../new_dashboard/shared/Card/index.tsx       |   2 +
 .../new_dashboard/shared/sidebar/Sidebar.tsx  |   2 +-
 .../shared/sidebar/hooks/useMenuItems.ts      |  11 ++
 src/app/layout.tsx                            |  10 +-
 src/app/providers.tsx                         |  33 ------
 15 files changed, 262 insertions(+), 117 deletions(-)
 create mode 100644 src/app/(admin)/new_dashboard/components/ChatPopup/index.tsx
 create mode 100644 src/app/(admin)/new_dashboard/guides/layout.tsx
 delete mode 100644 src/app/providers.tsx

diff --git a/src/app/(admin)/new_dashboard/components/ChatHeader/index.tsx b/src/app/(admin)/new_dashboard/components/ChatHeader/index.tsx
index 28f045c..5977b21 100644
--- a/src/app/(admin)/new_dashboard/components/ChatHeader/index.tsx
+++ b/src/app/(admin)/new_dashboard/components/ChatHeader/index.tsx
@@ -1,8 +1,9 @@
-import { Box, Typography, Button } from "@mui/material";
+import { Box, Typography, Button, CircularProgress } from "@mui/material";
 import SmartToyIcon from "@mui/icons-material/SmartToy";
 import DoneIcon from "@mui/icons-material/Done";
 import { Contact } from "../../types";
 import { useGuide } from "./hooks/useGuide";
+import { useState } from "react";
 
 type Props = {
   selectedContact: Contact | null;
@@ -10,10 +11,12 @@ type Props = {
 };
 
 const ChatHeader = ({ selectedContact, handleContactSelect }: Props) => {
+  const [isLoading, setIsLoading] = useState(false);
   const { handleGenerateGuide, handleCloseChat } = useGuide({
     handleContactSelect,
     selectedContact,
   });
+
   return (
     <Box
       sx={{
@@ -32,10 +35,19 @@ const ChatHeader = ({ selectedContact, handleContactSelect }: Props) => {
           <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
             <Button
               variant="contained"
-              startIcon={<SmartToyIcon />}
-              onClick={() => handleGenerateGuide(selectedContact.chatId)}
+              startIcon={!isLoading && <SmartToyIcon />}
+              onClick={() => {
+                handleGenerateGuide(selectedContact.chatId);
+                setIsLoading(true);
+              }}
+              disabled={isLoading}
+              sx={{ width: "163px", height: "36px", textTransform: "none" }}
             >
-              Generate Guide
+              {!isLoading ? (
+                "Generate Guide"
+              ) : (
+                <CircularProgress size={20} color="inherit" />
+              )}
             </Button>
 
             <Button
diff --git a/src/app/(admin)/new_dashboard/components/ChatPopup/index.tsx b/src/app/(admin)/new_dashboard/components/ChatPopup/index.tsx
new file mode 100644
index 0000000..98cca5b
--- /dev/null
+++ b/src/app/(admin)/new_dashboard/components/ChatPopup/index.tsx
@@ -0,0 +1,107 @@
+"use client";
+
+import React, { useState } from "react";
+import { Box, IconButton, Paper, Typography } from "@mui/material";
+import { Chat, Close } from "@mui/icons-material";
+import SupportMessageList from "../SupportMessageList";
+import MessageInput from "@/common/components/MessageInput";
+import { Contact } from "../../types";
+
+interface Props {
+  selectedContact: Contact | null;
+}
+
+const ChatPopup = ({ selectedContact }: Props) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const toggleChat = () => {
+    setIsOpen(!isOpen);
+  };
+
+  return (
+    <Box
+      sx={{
+        position: "fixed",
+        bottom: 0,
+        right: 0,
+        width: "100%",
+        display: "flex",
+        justifyContent: "flex-end",
+        alignItems: "flex-end",
+        padding: 2,
+        boxSizing: "border-box",
+        zIndex: 1000, // Ensures the chat popup is on top of other elements
+      }}
+    >
+      {/* Toggle Button */}
+      <IconButton
+        color="primary"
+        onClick={toggleChat}
+        sx={{
+          backgroundColor: "primary.main",
+          color: "white",
+          "&:hover": { backgroundColor: "primary.dark" },
+        }}
+      >
+        {isOpen ? <Close /> : <Chat />}
+      </IconButton>
+
+      {/* Chat Popup */}
+      {isOpen && selectedContact && (
+        <Paper
+          elevation={6}
+          sx={{
+            width: 400,
+            height: 500,
+            display: "flex",
+            flexDirection: "column",
+            marginLeft: 2,
+            backgroundColor: "background.paper",
+            boxShadow: 1,
+            borderRadius: 1,
+            overflow: "hidden",
+            zIndex: 1000,
+          }}
+        >
+          {/* Chat Header */}
+          <Box
+            sx={{
+              backgroundColor: "primary.main",
+              color: "white",
+              padding: 2,
+              display: "flex",
+              justifyContent: "space-between",
+              alignItems: "center",
+            }}
+          >
+            <Typography variant="h6">{selectedContact.username}</Typography>
+          </Box>
+
+          {/* Message List */}
+          <Box
+            sx={{
+              flexGrow: 1,
+              padding: 2,
+              overflowY: "auto",
+              backgroundColor: "background.default",
+            }}
+          >
+            <SupportMessageList
+              chatId={selectedContact.chatId}
+              username={selectedContact.username}
+            />
+          </Box>
+
+          {/* Input and Send Button */}
+          {selectedContact && selectedContact.isOpen && (
+            <Box>
+              <MessageInput chatId={selectedContact.chatId} isPopup={true} />
+            </Box>
+          )}
+        </Paper>
+      )}
+    </Box>
+  );
+};
+
+export default ChatPopup;
diff --git a/src/app/(admin)/new_dashboard/components/SupportMessageList/index.tsx b/src/app/(admin)/new_dashboard/components/SupportMessageList/index.tsx
index 87758db..90a0798 100644
--- a/src/app/(admin)/new_dashboard/components/SupportMessageList/index.tsx
+++ b/src/app/(admin)/new_dashboard/components/SupportMessageList/index.tsx
@@ -4,9 +4,10 @@ import { useMessageList } from "@/common/hooks/useMessageList";
 import { MessageContainer } from "@/common";
 type Props = {
   chatId: number;
+  username: string;
 };
 
-const SupportMessageList = ({ chatId }: Props) => {
+const SupportMessageList = ({ chatId, username }: Props) => {
   const socket = useSocket();
   const { messages } = useMessageList({ chatId, socket });
 
@@ -16,14 +17,36 @@ const SupportMessageList = ({ chatId }: Props) => {
         flex: 1,
         overflowY: "auto",
         paddingBottom: 2,
+        backgroundColor: (theme) => theme.palette.background.paper,
       }}
     >
       <List>
-        {messages.map((msg, index) => {
-          return (
-            <MessageContainer message={msg} key={index}></MessageContainer>
-          );
-        })}
+        {messages &&
+          Object.keys(messages).map((date, index) => {
+            return (
+              <Box key={index}>
+                <Box
+                  sx={{
+                    display: "flex",
+                    justifyContent: "center",
+                    alignItems: "center",
+                    padding: 1,
+                  }}
+                >
+                  {date}
+                </Box>
+                {messages[date].map((msg, index) => {
+                  return (
+                    <MessageContainer
+                      message={msg}
+                      key={index}
+                      username={username}
+                    ></MessageContainer>
+                  );
+                })}
+              </Box>
+            );
+          })}
       </List>
     </Box>
   );
diff --git a/src/app/(admin)/new_dashboard/guides/[id]/page.tsx b/src/app/(admin)/new_dashboard/guides/[id]/page.tsx
index 2dbf4ef..bd0bbcc 100644
--- a/src/app/(admin)/new_dashboard/guides/[id]/page.tsx
+++ b/src/app/(admin)/new_dashboard/guides/[id]/page.tsx
@@ -17,19 +17,17 @@ import {
 import ReviewList from "../components/ReviewList";
 import parse from "html-react-parser";
 import "quill/dist/quill.snow.css";
+import { useChat } from "@/app/hooks/useChat";
+import ChatPopup from "../../components/ChatPopup";
 
 const GuidePage: React.FC = () => {
   const params = useParams();
 
   const id = params?.id ? Number(params.id) : null;
 
-  const {
-    data: response,
-    isLoading,
-    isError,
-    error,
-    isSuccess,
-  } = useGuide(id ?? 0);
+  const { data: response, isLoading, isError, error, isSuccess } = useGuide(id ?? 0);
+
+  const {selectedContact} = useChat();
 
   if (isLoading) {
     return <CircularProgress />;
@@ -50,13 +48,15 @@ const GuidePage: React.FC = () => {
     }
 
     return (
-      <PageContainer title={guide.title}>
-        <DashboardCard title={guide.title} subtitle={creatorAndDateInfo}>
-          <div className="quill-content">{parse(guide.contentHTML)}</div>
-        </DashboardCard>
+      <Box>
+        <Typography variant="h1">{guide.title}</Typography>
+        <Typography variant="subtitle1">{creatorAndDateInfo}</Typography>
+        <Box className="quill-content">
+          {parse(guide.contentHTML)}
+        </Box>
         <Divider sx={{ mt: 2, mb: 2, border: "none" }} />
         <ReviewList guideId={guide.id} reviews={guide.reviews ?? []} />
-      </PageContainer>
+      </Box>
     );
   }
 };
diff --git a/src/app/(admin)/new_dashboard/guides/components/AddReviewBox/index.tsx b/src/app/(admin)/new_dashboard/guides/components/AddReviewBox/index.tsx
index bd1464a..6a70175 100644
--- a/src/app/(admin)/new_dashboard/guides/components/AddReviewBox/index.tsx
+++ b/src/app/(admin)/new_dashboard/guides/components/AddReviewBox/index.tsx
@@ -1,6 +1,6 @@
 "use client";
 import React from 'react';
-import { Box, Typography, Rating, TextField, Button } from '@mui/material';
+import { Box, Typography, Rating, TextField, Button, CircularProgress, Alert } from '@mui/material';
 import useAddReviewForm from '../../hooks/useAddReviewForm';
 
 interface AddReviewBoxProps {
@@ -9,7 +9,6 @@ interface AddReviewBoxProps {
 
 const AddReviewBox: React.FC<AddReviewBoxProps> = ({guideId}) => {
 
-
   const {
     comment,
     setComment,
@@ -24,15 +23,20 @@ const AddReviewBox: React.FC<AddReviewBoxProps> = ({guideId}) => {
   } = useAddReviewForm(guideId);
 
 
+  if(!guideId){
+    return <Alert severity="error">Guide not found</Alert>
+  }
+
   return (
-    <Box display="flex" flexDirection="column" alignItems="flex-start" sx={{ width: '100%' , mt:2}}>
+    <Box display="flex" flexDirection="column" alignItems="flex-start" sx={{ mt:2}}>
       <Typography variant="h6" >Add Your Review:</Typography>
       <Box mb={2} mt={2}>
         <Rating
           name="stars"
           value={stars}
-          onChange={(event, newValue) => setStars(newValue ?? 1)}
-          sx={{color: "gold"}}
+          onChange={(event, newValue) => {
+            setStars(newValue ?? 1)
+          }}
         />
       </Box>
       <TextField
@@ -43,16 +47,16 @@ const AddReviewBox: React.FC<AddReviewBoxProps> = ({guideId}) => {
         variant="outlined"
         value={comment}
         onChange={(e) => setComment(e.target.value)}
-        disabled={isPending}
       />
       <Box mt={2}>
         <Button
           variant="contained"
           color="primary"
           onClick={handleSubmit}
-          disabled={isPending || stars === null}
+          disabled={isPending}
+          sx={{mb:2}}
         >
-          {isPending ? 'Submitting...' : 'Submit Review'}
+        {isPending ? <CircularProgress size={24} /> : 'Submit'}
         </Button>
       </Box>
       {validationError && (
diff --git a/src/app/(admin)/new_dashboard/guides/components/ReviewList/index.tsx b/src/app/(admin)/new_dashboard/guides/components/ReviewList/index.tsx
index 9166f41..6fbb724 100644
--- a/src/app/(admin)/new_dashboard/guides/components/ReviewList/index.tsx
+++ b/src/app/(admin)/new_dashboard/guides/components/ReviewList/index.tsx
@@ -8,8 +8,6 @@ import {
   Divider,
 } from "@mui/material";
 import { Review } from "@/api/types/Review";
-import PageContainer from "@/components/PageContainer";
-import DashboardCard from "../../../shared/Card";
 import AddReviewBox from "../AddReviewBox";
 import ReviewCard from "../ReviewCard";
 
@@ -30,7 +28,7 @@ const ReviewList: React.FC<ReviewListProps> = ({ reviews, guideId }) => {
   }
 
   let reviewsContext = !reviews.length ? (
-    <Typography>No reviews available</Typography>
+    <Typography>No reviews available yet</Typography>
   ) : (
     reviews.slice(0, visibleCount).map((review, index) => (
       <ReviewCard key={index} review={review} />
@@ -38,12 +36,13 @@ const ReviewList: React.FC<ReviewListProps> = ({ reviews, guideId }) => {
   );
 
   return (
-    <PageContainer title="Reviews">
-      <DashboardCard title="Reviews">
         <Box mt={2}>
-          <Divider />
+          <Typography variant="h1" mt={2}>
+            Reviews
+          </Typography>
+          <Divider sx={{mt:2 , mb:2}}/>
           {reviewsContext}
-          {!!reviews.length &&(
+          {reviews?.length > 1 &&(
           <Box display="flex" justifyContent="center" width="100%" mt={2}>
             <Button onClick={()=>{
               visibleCount === reviews.length ? showLessReviews() : showMoreReviews();
@@ -51,10 +50,8 @@ const ReviewList: React.FC<ReviewListProps> = ({ reviews, guideId }) => {
               {visibleCount === reviews.length ? "Show Less" : "Show More"}
             </Button>
           </Box>)}
-          <AddReviewBox guideId={guideId} />
+          <AddReviewBox guideId={guideId ?? 0} />
         </Box>
-      </DashboardCard>
-    </PageContainer>
   );
 };
 
diff --git a/src/app/(admin)/new_dashboard/guides/hooks/useAddReviewForm.ts b/src/app/(admin)/new_dashboard/guides/hooks/useAddReviewForm.ts
index 1f7c4aa..50609d7 100644
--- a/src/app/(admin)/new_dashboard/guides/hooks/useAddReviewForm.ts
+++ b/src/app/(admin)/new_dashboard/guides/hooks/useAddReviewForm.ts
@@ -1,10 +1,10 @@
-import { useState } from "react";
-import { CreateReviewDto, CreateReviewSchema } from "../dto/CreateReviewDto";
-import { useAddReview } from "@/hooks";
+import { useState } from 'react';
+import { CreateReviewDto, CreateReviewSchema } from '../dto/CreateReviewDto';
+import { useAddReview } from '@/hooks';
 
 const useAddReviewForm = (guideId: number) => {
-  const [comment, setComment] = useState("");
-  const [stars, setStars] = useState(0);
+  const [comment, setComment] = useState('');
+  const [stars, setStars] = useState(1);
   const [validationError, setValidationError] = useState<string | null>(null);
   const { mutate, isError, error, isPending, isSuccess } = useAddReview();
 
@@ -12,19 +12,19 @@ const useAddReviewForm = (guideId: number) => {
     const newReview: CreateReviewDto = {
       guideId,
       rating: stars ?? 0,
-      comment: comment.trim() || undefined,
+      comment: comment.trim() || '',
     };
     const validation = CreateReviewSchema.safeParse(newReview);
     if (!validation.success) {
       setValidationError(
-        validation.error.errors.map((err) => err.message).join(", ")
+        validation.error.errors.map((err) => err.message).join(', ')
       );
       return;
     }
 
     mutate(validation.data, {
       onSuccess: () => {
-        setComment("");
+        setComment('');
         setStars(0);
       },
     });
diff --git a/src/app/(admin)/new_dashboard/guides/layout.tsx b/src/app/(admin)/new_dashboard/guides/layout.tsx
new file mode 100644
index 0000000..388a6ea
--- /dev/null
+++ b/src/app/(admin)/new_dashboard/guides/layout.tsx
@@ -0,0 +1,17 @@
+"use client"
+import { ReactNode } from "react";
+import ChatPopup from "../components/ChatPopup";
+import { useChat } from "@/app/hooks/useChat";
+
+const GuideLayout = ({ children }: { children: ReactNode }) => {
+  const { selectedContact } = useChat();
+
+  return (
+    <>
+      {children}
+      {selectedContact && <ChatPopup selectedContact={selectedContact} />}
+    </>
+  );
+};
+
+export default GuideLayout;
diff --git a/src/app/(admin)/new_dashboard/guides/page.tsx b/src/app/(admin)/new_dashboard/guides/page.tsx
index 4d03b6c..4cbabb1 100644
--- a/src/app/(admin)/new_dashboard/guides/page.tsx
+++ b/src/app/(admin)/new_dashboard/guides/page.tsx
@@ -8,7 +8,7 @@ import { useSearchGuides } from "./hooks";
 import { useAllGuides } from "@/hooks";
 import { Guide } from "@/api/types/Guide";
 
-const Page = () => {
+const GuidesListPage = () => {
   const {
     data: guideItems,
     isLoading,
@@ -27,29 +27,31 @@ const Page = () => {
     useSearchGuides(guides);
 
   return (
-    <PageContainer title="Guides">
-      <DashboardCard title="Guides">
-        <Box>
-          {isLoading && <CircularProgress />}
-          {isError && <Alert severity="error">{error.message}</Alert>}
-          {isSuccess && guides.length > 0 && (
-            <>
-              <Box mb={2}>
-                <SearchBar
-                  searchQuery={searchQuery}
-                  onSearchChange={handleSearchChange}
-                />
-              </Box>
-              <GuideList guideItems={filteredGuides} />
-            </>
-          )}
-          {isSuccess && guides.length === 0 && (
-            <Typography>No guides available</Typography>
-          )}
-        </Box>
-      </DashboardCard>
-    </PageContainer>
+    <>
+      <PageContainer title="Guides">
+        <DashboardCard title="Guides">
+          <Box>
+            {isLoading && <CircularProgress />}
+            {isError && <Alert severity="error">{error.message}</Alert>}
+            {isSuccess && guides.length > 0 && (
+              <>
+                <Box mb={2}>
+                  <SearchBar
+                    searchQuery={searchQuery}
+                    onSearchChange={handleSearchChange}
+                  />
+                </Box>
+                <GuideList guideItems={filteredGuides} />
+              </>
+            )}
+            {isSuccess && guides.length === 0 && (
+              <Typography>No guides available</Typography>
+            )}
+          </Box>
+        </DashboardCard>
+      </PageContainer>
+    </>
   );
 };
 
-export default Page;
+export default GuidesListPage;
diff --git a/src/app/(admin)/new_dashboard/page.tsx b/src/app/(admin)/new_dashboard/page.tsx
index 4b185fb..5509985 100644
--- a/src/app/(admin)/new_dashboard/page.tsx
+++ b/src/app/(admin)/new_dashboard/page.tsx
@@ -4,16 +4,12 @@ import DashboardCard from "./shared/Card";
 import { Box } from "@mui/material";
 import ContactList from "./components/ContactList";
 import ChatHeader from "./components/ChatHeader";
-import { useContacts } from "./hooks";
-import { useSocket } from "@/app/hooks/useSocket";
 import SupportMessageList from "./components/SupportMessageList";
 import MessageInput from "@/common/components/MessageInput";
+import { useChat } from "@/app/hooks/useChat";
 
 const Page = () => {
-  const socket = useSocket();
-  const { contacts, selectedContact, handleContactSelect } = useContacts({
-    socket,
-  });
+  const { selectedContact, handleContactSelect, contacts } = useChat();
 
   return (
     <PageContainer title="Dashboard">
@@ -22,7 +18,7 @@ const Page = () => {
           sx={{
             display: "flex",
             flexDirection: "row",
-            height: "calc(100vh - 135px)",
+            height: "calc(100vh - 155px)",
             margin: 0,
             padding: 0,
           }}
@@ -55,7 +51,10 @@ const Page = () => {
 
               {/* Message List */}
               {selectedContact && (
-                <SupportMessageList chatId={selectedContact.chatId} />
+                <SupportMessageList
+                  chatId={selectedContact.chatId}
+                  username={selectedContact.username}
+                />
               )}
 
               {/* Input and Send Button */}
diff --git a/src/app/(admin)/new_dashboard/shared/Card/index.tsx b/src/app/(admin)/new_dashboard/shared/Card/index.tsx
index e7c120d..6420629 100644
--- a/src/app/(admin)/new_dashboard/shared/Card/index.tsx
+++ b/src/app/(admin)/new_dashboard/shared/Card/index.tsx
@@ -51,6 +51,8 @@ const DashboardCard = ({
               direction="row"
               spacing={2}
               justifyContent="space-between"
+              borderBottom={1}
+              borderColor={"divider"}
               alignItems={"center"}
               mb={3}
             >
diff --git a/src/app/(admin)/new_dashboard/shared/sidebar/Sidebar.tsx b/src/app/(admin)/new_dashboard/shared/sidebar/Sidebar.tsx
index 98c058c..0dcd84e 100644
--- a/src/app/(admin)/new_dashboard/shared/sidebar/Sidebar.tsx
+++ b/src/app/(admin)/new_dashboard/shared/sidebar/Sidebar.tsx
@@ -69,7 +69,7 @@ const DashboardSidebar = ({ isSidebarOpen }: ItemType) => {
                 justifyContent: "center",
                 alignItems: "center",
                 height: "100px",
-                width: "270px",
+                width: "260px",
               }}
             >
               <Image src="/logo.png" alt="logo" width={220} height={150} />
diff --git a/src/app/(admin)/new_dashboard/shared/sidebar/hooks/useMenuItems.ts b/src/app/(admin)/new_dashboard/shared/sidebar/hooks/useMenuItems.ts
index c28b50a..b2d1049 100644
--- a/src/app/(admin)/new_dashboard/shared/sidebar/hooks/useMenuItems.ts
+++ b/src/app/(admin)/new_dashboard/shared/sidebar/hooks/useMenuItems.ts
@@ -6,17 +6,27 @@ import AutoStoriesIcon from "@mui/icons-material/AutoStories";
 import { AuthClient } from "@/api/auth.client";
 import { useRouter } from "next/navigation";
 import CreateIcon from "@mui/icons-material/Create";
+import { useGuideContext } from "@/app/providers/guide";
 
 const authClient = new AuthClient();
 
 export const useMenuItems = () => {
   const router = useRouter();
+  const { setGuide } = useGuideContext();
 
   const handleLogout = async () => {
     await authClient.logout();
     router.push("/login");
   };
 
+  const handleCreateGuide = () => {
+    setGuide({
+      contentHTML: "",
+      title: "",
+    });
+    router.push("/new_dashboard/guides/create");
+  };
+
   const menuItems = [
     {
       navlabel: true,
@@ -43,6 +53,7 @@ export const useMenuItems = () => {
       title: "Create Guide",
       icon: CreateIcon,
       href: "/new_dashboard/guides/create",
+      onClick: handleCreateGuide,
     },
     {
       navlabel: true,
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 0ed4f8b..df18ae6 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -2,8 +2,10 @@
 
 import { baselightTheme } from "@/util/theme";
 import "./globals.css";
-import { Providers, SocketProvider } from "./providers";
+import { SocketProvider } from "./providers/SocketProvider/provider";
+import { QueryProvider } from "./providers/QueryProvider/provider";
 import { CssBaseline, ThemeProvider } from "@mui/material";
+import { ChatProvider } from "./providers/ChatProvider/provider";
 import { GuideProvider } from "./providers/guide";
 
 export default function RootLayout({
@@ -16,11 +18,13 @@ export default function RootLayout({
       <body style={{ height: "100vh" }}>
         <ThemeProvider theme={baselightTheme}>
           <CssBaseline />
-          <Providers>
+          <QueryProvider>
             <SocketProvider>
+              <ChatProvider>
               <GuideProvider>{children}</GuideProvider>
+              </ChatProvider>
             </SocketProvider>
-          </Providers>
+          </QueryProvider>
         </ThemeProvider>
       </body>
     </html>
diff --git a/src/app/providers.tsx b/src/app/providers.tsx
deleted file mode 100644
index c58fd7a..0000000
--- a/src/app/providers.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-"use client";
-
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import React, { createContext, ReactNode, useMemo } from "react";
-import socket from "@/socket";
-import { Socket } from "socket.io-client";
-
-export const SocketContext = createContext<Socket | null>(null);
-
-interface SocketProviderProps {
-  children: ReactNode;
-}
-
-export const SocketProvider: React.FC<SocketProviderProps> = ({ children }) => {
-  const socketInstance = useMemo(() => {
-    socket.connect();
-    return socket;
-  }, []);
-
-  return (
-    <SocketContext.Provider value={socketInstance}>
-      {children}
-    </SocketContext.Provider>
-  );
-};
-
-export const queryClient = new QueryClient();
-
-export function Providers({ children }: { children: React.ReactNode }) {
-  return (
-    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
-  );
-}

From fa1fc430e623e4aeca0179c22c229efd6a0d1862 Mon Sep 17 00:00:00 2001
From: Ori <ori100no@gmail.com>
Date: Wed, 28 Aug 2024 22:20:08 +0300
Subject: [PATCH 180/242] fix

---
 .../(admin)/new_dashboard/guides/components/Editor/index.tsx    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/(admin)/new_dashboard/guides/components/Editor/index.tsx b/src/app/(admin)/new_dashboard/guides/components/Editor/index.tsx
index 129f7ec..3d6f0a9 100644
--- a/src/app/(admin)/new_dashboard/guides/components/Editor/index.tsx
+++ b/src/app/(admin)/new_dashboard/guides/components/Editor/index.tsx
@@ -6,7 +6,7 @@ import SaveAsIcon from "@mui/icons-material/SaveAs";
 import { UseFormRegister, UseFormSetValue, UseFormWatch } from "react-hook-form";
 import { CreateGuideRequest } from "@/api/types/Guide";
 
-const DynamicReactQuill = dynamic((Pgiu) => import("react-quill"));
+const DynamicReactQuill = dynamic(() => import("react-quill"));
 
 interface Props {
   initialTitle?: string;

From 53e1d245b252e088bed5474647e8e6fcb725865a Mon Sep 17 00:00:00 2001
From: Ori <ori100no@gmail.com>
Date: Wed, 28 Aug 2024 22:20:33 +0300
Subject: [PATCH 181/242] lint

---
 src/api/types/Guide.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/api/types/Guide.ts b/src/api/types/Guide.ts
index d8bfd63..9bf9a07 100644
--- a/src/api/types/Guide.ts
+++ b/src/api/types/Guide.ts
@@ -1,6 +1,6 @@
-import { z } from 'zod';
-import { userSchema } from './User';
-import { reviewSchema } from './Review';
+import { z } from "zod";
+import { userSchema } from "./User";
+import { reviewSchema } from "./Review";
 
 const guideSchema = z.object({
   id: z.number(),

From 17ab60da2fd468a9d02288059ee3ff83e688faf8 Mon Sep 17 00:00:00 2001
From: Ori <ori100no@gmail.com>
Date: Wed, 28 Aug 2024 23:00:32 +0300
Subject: [PATCH 182/242] added title to input when adding review

---
 src/api/types/Review.ts                       |  7 +++++
 .../guides/components/AddReviewBox/index.tsx  | 27 ++++++++++++-------
 .../guides/dto/CreateReviewDto.ts             | 13 +++++----
 .../guides/hooks/useAddReviewForm.ts          | 19 ++++++++-----
 4 files changed, 45 insertions(+), 21 deletions(-)

diff --git a/src/api/types/Review.ts b/src/api/types/Review.ts
index 6c50efc..d302ddf 100644
--- a/src/api/types/Review.ts
+++ b/src/api/types/Review.ts
@@ -6,6 +6,7 @@ export const reviewSchema = z.object({
   userId: z.number(),
   guideId: z.number(),
   rating: z.number().min(1).max(5),
+  title: z.string(),
   comment: z.string().optional(),
   createdAt: z.date(),
   user: userSchema.optional(),
@@ -17,13 +18,19 @@ export const CreateReviewSchema = z.object({
   guideId: z.number({
     required_error: "Guide ID is required",
   }),
+
   rating: z
     .number({
       required_error: "Stars rating is required",
     })
     .min(1, "Stars rating must be at least 1")
     .max(5, "Stars rating cannot exceed 5"),
+
   comment: z.string().optional(),
+
+  title: z.string({
+    required_error: "Title is required",
+  }),
 });
 
 export type CreateReviewRequest = z.infer<typeof CreateReviewSchema>;
diff --git a/src/app/(admin)/new_dashboard/guides/components/AddReviewBox/index.tsx b/src/app/(admin)/new_dashboard/guides/components/AddReviewBox/index.tsx
index 6a70175..1da575a 100644
--- a/src/app/(admin)/new_dashboard/guides/components/AddReviewBox/index.tsx
+++ b/src/app/(admin)/new_dashboard/guides/components/AddReviewBox/index.tsx
@@ -7,11 +7,13 @@ interface AddReviewBoxProps {
   guideId: number;
 }
 
-const AddReviewBox: React.FC<AddReviewBoxProps> = ({guideId}) => {
+const AddReviewBox: React.FC<AddReviewBoxProps> = ({ guideId }) => {
 
   const {
     comment,
     setComment,
+    title,
+    setTitle,
     stars,
     setStars,
     validationError,
@@ -22,23 +24,30 @@ const AddReviewBox: React.FC<AddReviewBoxProps> = ({guideId}) => {
     handleSubmit,
   } = useAddReviewForm(guideId);
 
-
-  if(!guideId){
-    return <Alert severity="error">Guide not found</Alert>
+  if (!guideId) {
+    return <Alert severity="error">Guide not found</Alert>;
   }
 
   return (
-    <Box display="flex" flexDirection="column" alignItems="flex-start" sx={{ mt:2}}>
-      <Typography variant="h6" >Add Your Review:</Typography>
+    <Box display="flex" flexDirection="column" alignItems="flex-start" sx={{ mt: 2 }}>
+      <Typography variant="h6">Add Your Review:</Typography>
       <Box mb={2} mt={2}>
         <Rating
           name="stars"
           value={stars}
           onChange={(event, newValue) => {
-            setStars(newValue ?? 1)
+            setStars(newValue ?? 1);
           }}
         />
       </Box>
+      <TextField
+        label="Review Title"
+        variant="outlined"
+        fullWidth
+        value={title}
+        onChange={(e) => setTitle(e.target.value)}
+        sx={{ mb: 2 }}
+      />
       <TextField
         label="Write your comment (optional)"
         multiline
@@ -54,9 +63,9 @@ const AddReviewBox: React.FC<AddReviewBoxProps> = ({guideId}) => {
           color="primary"
           onClick={handleSubmit}
           disabled={isPending}
-          sx={{mb:2}}
+          sx={{ mb: 2 }}
         >
-        {isPending ? <CircularProgress size={24} /> : 'Submit'}
+          {isPending ? <CircularProgress size={24} /> : 'Submit'}
         </Button>
       </Box>
       {validationError && (
diff --git a/src/app/(admin)/new_dashboard/guides/dto/CreateReviewDto.ts b/src/app/(admin)/new_dashboard/guides/dto/CreateReviewDto.ts
index 8cecb2c..dffd468 100644
--- a/src/app/(admin)/new_dashboard/guides/dto/CreateReviewDto.ts
+++ b/src/app/(admin)/new_dashboard/guides/dto/CreateReviewDto.ts
@@ -1,15 +1,18 @@
-import { z } from 'zod';
+import { z } from "zod";
 
 export const CreateReviewSchema = z.object({
   guideId: z.number({
-    required_error: 'Guide ID is required',
+    required_error: "Guide ID is required",
   }),
   rating: z
     .number({
-      required_error: 'Stars rating is required',
+      required_error: "Stars rating is required",
     })
-    .min(1, 'Stars rating must be at least 1')
-    .max(5, 'Stars rating cannot exceed 5'),
+    .min(1, "Stars rating must be at least 1")
+    .max(5, "Stars rating cannot exceed 5"),
+
+  title: z.string(),
+
   comment: z.string().optional(),
 });
 
diff --git a/src/app/(admin)/new_dashboard/guides/hooks/useAddReviewForm.ts b/src/app/(admin)/new_dashboard/guides/hooks/useAddReviewForm.ts
index 50609d7..f536c51 100644
--- a/src/app/(admin)/new_dashboard/guides/hooks/useAddReviewForm.ts
+++ b/src/app/(admin)/new_dashboard/guides/hooks/useAddReviewForm.ts
@@ -1,9 +1,10 @@
-import { useState } from 'react';
-import { CreateReviewDto, CreateReviewSchema } from '../dto/CreateReviewDto';
-import { useAddReview } from '@/hooks';
+import { useState } from "react";
+import { CreateReviewDto, CreateReviewSchema } from "../dto/CreateReviewDto";
+import { useAddReview } from "@/hooks";
 
 const useAddReviewForm = (guideId: number) => {
-  const [comment, setComment] = useState('');
+  const [comment, setComment] = useState("");
+  const [title, setTitle] = useState("");
   const [stars, setStars] = useState(1);
   const [validationError, setValidationError] = useState<string | null>(null);
   const { mutate, isError, error, isPending, isSuccess } = useAddReview();
@@ -12,19 +13,21 @@ const useAddReviewForm = (guideId: number) => {
     const newReview: CreateReviewDto = {
       guideId,
       rating: stars ?? 0,
-      comment: comment.trim() || '',
+      title: title.trim(),
+      comment: comment.trim() || "",
     };
     const validation = CreateReviewSchema.safeParse(newReview);
     if (!validation.success) {
       setValidationError(
-        validation.error.errors.map((err) => err.message).join(', ')
+        validation.error.errors.map((err) => err.message).join(", ")
       );
       return;
     }
 
     mutate(validation.data, {
       onSuccess: () => {
-        setComment('');
+        setComment("");
+        setTitle("");
         setStars(0);
       },
     });
@@ -33,6 +36,8 @@ const useAddReviewForm = (guideId: number) => {
   return {
     comment,
     setComment,
+    title,
+    setTitle,
     stars,
     setStars,
     validationError,

From 1334df0cb42cb48ff3df7f9fb2daee91580c9ed9 Mon Sep 17 00:00:00 2001
From: roiy0987 <roiy0987@gmail.com>
Date: Thu, 29 Aug 2024 00:05:04 +0300
Subject: [PATCH 183/242] refactor: Improve rendering efficiency in
 UserMessageList component

---
 .../[userId]/components/UserMessageList/index.tsx     | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/app/(user)/new_chat/[userId]/components/UserMessageList/index.tsx b/src/app/(user)/new_chat/[userId]/components/UserMessageList/index.tsx
index d777c2c..e84e054 100644
--- a/src/app/(user)/new_chat/[userId]/components/UserMessageList/index.tsx
+++ b/src/app/(user)/new_chat/[userId]/components/UserMessageList/index.tsx
@@ -35,12 +35,13 @@ const UserMessageList = ({ chatId }: Props) => {
                   {date}
                 </Box>
                 {messages[date].map((msg, index) => {
-                  if (msg.isNote) return null;
                   return (
-                    <MessageContainer
-                      message={msg}
-                      key={index}
-                    ></MessageContainer>
+                    !msg.isNote && (
+                      <MessageContainer
+                        message={msg}
+                        key={index}
+                      ></MessageContainer>
+                    )
                   );
                 })}
               </Box>

From 5c6464c6cebd40c6d28a716bc0b6480115f4e661 Mon Sep 17 00:00:00 2001
From: roiy0987 <roiy0987@gmail.com>
Date: Thu, 29 Aug 2024 10:22:41 +0300
Subject: [PATCH 184/242] refactor: Update import path for groupByDay in
 useMessageList.ts

---
 src/common/hooks/useMessageList.ts  | 2 +-
 src/{common/utils => util}/index.ts | 0
 2 files changed, 1 insertion(+), 1 deletion(-)
 rename src/{common/utils => util}/index.ts (100%)

diff --git a/src/common/hooks/useMessageList.ts b/src/common/hooks/useMessageList.ts
index 5781713..71df4d3 100644
--- a/src/common/hooks/useMessageList.ts
+++ b/src/common/hooks/useMessageList.ts
@@ -7,7 +7,7 @@ import { ClientResponse, SuccessResponse } from "@/types";
 
 import { useEffect, useState } from "react";
 import { Socket } from "socket.io-client";
-import { groupByDay } from "../utils";
+import { groupByDay } from "../../util";
 
 type Props = {
   chatId: number;
diff --git a/src/common/utils/index.ts b/src/util/index.ts
similarity index 100%
rename from src/common/utils/index.ts
rename to src/util/index.ts

From f77e150f3ae0ef98a87dc9a8156b4f22ca54ce20 Mon Sep 17 00:00:00 2001
From: roiy0987 <roiy0987@gmail.com>
Date: Thu, 29 Aug 2024 12:11:01 +0300
Subject: [PATCH 185/242] refactor: Update import paths and types in
 chat-related files

---
 src/api/chat.client.ts                        |   8 +-
 src/api/types/chat.ts                         |   2 +
 .../components/ChatHeader/hooks/useChat.ts    |  37 ++++++
 .../components/ChatHeader/hooks/useGuide.ts   |  78 ++----------
 .../components/ChatHeader/index.tsx           | 113 +++++++++++-------
 src/common/components/Message/index.tsx       |   1 -
 src/common/index.ts                           |   1 -
 src/hooks/api/chatHooks.ts                    |  14 ++-
 src/hooks/api/modelHooks.ts                   |  29 +++++
 9 files changed, 165 insertions(+), 118 deletions(-)
 create mode 100644 src/app/(admin)/new_dashboard/components/ChatHeader/hooks/useChat.ts
 create mode 100644 src/hooks/api/modelHooks.ts

diff --git a/src/api/chat.client.ts b/src/api/chat.client.ts
index 6f7b0c9..c9c5883 100644
--- a/src/api/chat.client.ts
+++ b/src/api/chat.client.ts
@@ -1,5 +1,5 @@
 import { BaseClient } from "./base.client";
-import { ChatRequest, ChatRequestUpdate, ChatResponse } from "./types/chat";
+import { ChatRequest, ChatRequestClose, ChatResponse } from "./types/chat";
 
 export class ChatClient extends BaseClient {
   async chats() {
@@ -8,10 +8,10 @@ export class ChatClient extends BaseClient {
   async chatById(chatRequest: ChatRequest) {
     return this.get<ChatResponse>(`chats/${chatRequest.id}`);
   }
-  async closeChat(chatRequestUpdate: ChatRequestUpdate) {
-    return this.patch<ChatResponse>(`chats/${chatRequestUpdate.id}`, {
+  async closeChat(chatRequestClose: ChatRequestClose) {
+    return this.patch<ChatResponse>(`chats/${chatRequestClose.id}`, {
       isOpen: false,
-      customerId: chatRequestUpdate.customerId,
+      customerId: chatRequestClose.customerId,
     });
   }
 }
diff --git a/src/api/types/chat.ts b/src/api/types/chat.ts
index 55be656..685adb6 100644
--- a/src/api/types/chat.ts
+++ b/src/api/types/chat.ts
@@ -20,4 +20,6 @@ export type ChatRequest = {
 
 export type ChatRequestUpdate = Partial<Chat>;
 
+export type ChatRequestClose = Pick<Chat, "id" | "customerId">;
+
 export type ChatResponse = Chat;
diff --git a/src/app/(admin)/new_dashboard/components/ChatHeader/hooks/useChat.ts b/src/app/(admin)/new_dashboard/components/ChatHeader/hooks/useChat.ts
new file mode 100644
index 0000000..a1d526a
--- /dev/null
+++ b/src/app/(admin)/new_dashboard/components/ChatHeader/hooks/useChat.ts
@@ -0,0 +1,37 @@
+import { ChatClient } from "@/api/chat.client";
+import { ErrorResponse, isSuccessResponse } from "@/types";
+import { Contact } from "../../../types";
+import { useCloseChat } from "@/hooks";
+import { ChatRequestClose } from "@/api/types/chat";
+
+interface Props {
+  handleContactSelect: (contact: Contact) => void;
+  selectedContact: Contact | null;
+}
+
+export const useChat = ({ handleContactSelect, selectedContact }: Props) => {
+  const { mutate, error, isError } = useCloseChat();
+
+  async function handleCloseChat(
+    chatRequestClose: ChatRequestClose
+  ): Promise<void> {
+    mutate(chatRequestClose, {
+      onSuccess: () => {
+        if (selectedContact) {
+          handleContactSelect({
+            chatId: selectedContact.chatId,
+            isOpen: false,
+            userId: selectedContact.userId,
+            username: selectedContact.username,
+          });
+        }
+      },
+    });
+  }
+
+  return {
+    handleCloseChat,
+    chatError: error,
+    isChatError: isError,
+  };
+};
diff --git a/src/app/(admin)/new_dashboard/components/ChatHeader/hooks/useGuide.ts b/src/app/(admin)/new_dashboard/components/ChatHeader/hooks/useGuide.ts
index dc83808..08b33aa 100644
--- a/src/app/(admin)/new_dashboard/components/ChatHeader/hooks/useGuide.ts
+++ b/src/app/(admin)/new_dashboard/components/ChatHeader/hooks/useGuide.ts
@@ -1,82 +1,30 @@
-import { ChatClient } from "@/api/chat.client";
-import { ModelClient } from "@/api/model.client";
 import { useGuideContext } from "@/app/providers/guide";
 import { SuccessResponse, ErrorResponse, isSuccessResponse } from "@/types";
 import { useRouter } from "next/navigation";
-import { Chat } from "@/api/types/chat";
 import { ModelCreateGuideResponse } from "@/api/types/model";
-import { Contact } from "../../../types";
+import { useModelGenerateGuide } from "@/hooks/api/modelHooks";
 
-const modelClient = new ModelClient();
-const chatClient = new ChatClient();
-
-interface Props {
-  handleContactSelect: (contact: Contact) => void;
-  selectedContact: Contact | null;
-}
-
-export const useGuide = ({ handleContactSelect, selectedContact }: Props) => {
+export const useGuide = () => {
   const router = useRouter();
   const { setGuide } = useGuideContext();
-
-  async function handleCloseChat(chatId: number): Promise<void> {
-    const clientResponse = await chatClient.closeChat({
-      id: chatId,
-      customerId: selectedContact?.userId,
-    });
-    if (!isSuccessResponse(clientResponse)) {
-      const errorResponse = clientResponse as ErrorResponse;
-      console.error(errorResponse.error);
-      return;
-    }
-    if (selectedContact) {
-      handleContactSelect({
-        chatId: selectedContact.chatId,
-        isOpen: false,
-        userId: selectedContact.userId,
-        username: selectedContact.username,
-      });
-    }
-  }
+  const { mutate, isError, error, isPending } = useModelGenerateGuide();
 
   async function handleGenerateGuide(chatId: number): Promise<void> {
-    const chatResponse = await chatClient.chatById({
-      id: chatId,
-    });
-
-    if (!isSuccessResponse(chatResponse)) {
-      const errorResponse = chatResponse as ErrorResponse;
-      console.error(errorResponse.error);
-      return;
-    }
-    const chat = (chatResponse as SuccessResponse<Chat>).data;
-
-    const modelCreateGuideResponse = await modelClient.createGuide({
-      user: {
-        roles: chat.user.roles,
-        username: chat.user.username,
+    mutate(chatId, {
+      onSuccess: (response) => {
+        const modelCreateGuideResponse =
+          response as SuccessResponse<ModelCreateGuideResponse>;
+        const guideResponse = modelCreateGuideResponse.data;
+        setGuide(guideResponse);
+        router.push("new_dashboard/guides/create");
       },
-      messages: chat.messages.map((message) => ({
-        content: message.content,
-        isSupportSender: message.isSupportSender,
-      })),
     });
-
-    if (!isSuccessResponse(modelCreateGuideResponse)) {
-      const errorResponse = modelCreateGuideResponse as ErrorResponse;
-      console.error(errorResponse.error);
-      return;
-    }
-
-    const guideResponse = (
-      modelCreateGuideResponse as SuccessResponse<ModelCreateGuideResponse>
-    ).data;
-    setGuide(guideResponse);
-    router.push("new_dashboard/guides/create");
   }
 
   return {
     handleGenerateGuide,
-    handleCloseChat,
+    isPending,
+    guideError: error,
+    isGuideError: isError,
   };
 };
diff --git a/src/app/(admin)/new_dashboard/components/ChatHeader/index.tsx b/src/app/(admin)/new_dashboard/components/ChatHeader/index.tsx
index 5977b21..15940b9 100644
--- a/src/app/(admin)/new_dashboard/components/ChatHeader/index.tsx
+++ b/src/app/(admin)/new_dashboard/components/ChatHeader/index.tsx
@@ -4,6 +4,7 @@ import DoneIcon from "@mui/icons-material/Done";
 import { Contact } from "../../types";
 import { useGuide } from "./hooks/useGuide";
 import { useState } from "react";
+import { useChat } from "./hooks/useChat";
 
 type Props = {
   selectedContact: Contact | null;
@@ -12,57 +13,79 @@ type Props = {
 
 const ChatHeader = ({ selectedContact, handleContactSelect }: Props) => {
   const [isLoading, setIsLoading] = useState(false);
-  const { handleGenerateGuide, handleCloseChat } = useGuide({
+  const { handleGenerateGuide, guideError, isGuideError } = useGuide();
+  const { handleCloseChat, chatError, isChatError } = useChat({
     handleContactSelect,
     selectedContact,
   });
 
   return (
-    <Box
-      sx={{
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "space-between",
-        paddingBottom: 1,
-        marginBottom: 2,
-        borderBottom: "1px solid",
-        borderColor: "divider",
-      }}
-    >
-      {selectedContact && (
-        <>
-          <Typography variant="h6">{selectedContact.username}</Typography>
-          <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
-            <Button
-              variant="contained"
-              startIcon={!isLoading && <SmartToyIcon />}
-              onClick={() => {
-                handleGenerateGuide(selectedContact.chatId);
-                setIsLoading(true);
-              }}
-              disabled={isLoading}
-              sx={{ width: "163px", height: "36px", textTransform: "none" }}
-            >
-              {!isLoading ? (
-                "Generate Guide"
-              ) : (
-                <CircularProgress size={20} color="inherit" />
-              )}
-            </Button>
+    <>
+      <Box
+        sx={{
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          paddingBottom: 1,
+          marginBottom: 2,
+          borderBottom: "1px solid",
+          borderColor: "divider",
+        }}
+      >
+        {selectedContact && (
+          <>
+            <Typography variant="h6">{selectedContact.username}</Typography>
+            <Box sx={{ display: "flex", flexDirection: "column" }}>
+              <Box sx={{ color: "red", height: "1.5rem" }}>
+                {isGuideError && (
+                  <Typography variant="subtitle1" color="red">
+                    {guideError?.message}
+                  </Typography>
+                )}
+                {isChatError && (
+                  <Typography variant="subtitle1" color="red">
+                    {chatError?.message}
+                  </Typography>
+                )}
+              </Box>
+              <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
+                <Button
+                  variant="contained"
+                  startIcon={!isLoading && <SmartToyIcon />}
+                  onClick={() => {
+                    handleGenerateGuide(selectedContact.chatId);
+                    setIsLoading(true);
+                  }}
+                  disabled={isLoading}
+                  sx={{ width: "163px", height: "36px", textTransform: "none" }}
+                >
+                  {!isLoading ? (
+                    "Generate Guide"
+                  ) : (
+                    <CircularProgress size={20} color="inherit" />
+                  )}
+                </Button>
 
-            <Button
-              variant="outlined"
-              startIcon={<DoneIcon />}
-              sx={{ textTransform: "none" }}
-              disabled={!selectedContact.isOpen}
-              onClick={() => handleCloseChat(selectedContact.chatId)}
-            >
-              Close
-            </Button>
-          </Box>
-        </>
-      )}
-    </Box>
+                <Button
+                  variant="outlined"
+                  startIcon={<DoneIcon />}
+                  sx={{ textTransform: "none" }}
+                  disabled={!selectedContact.isOpen}
+                  onClick={() =>
+                    handleCloseChat({
+                      id: selectedContact.chatId,
+                      customerId: selectedContact.userId,
+                    })
+                  }
+                >
+                  Close
+                </Button>
+              </Box>
+            </Box>
+          </>
+        )}
+      </Box>
+    </>
   );
 };
 
diff --git a/src/common/components/Message/index.tsx b/src/common/components/Message/index.tsx
index f67198a..a6db227 100644
--- a/src/common/components/Message/index.tsx
+++ b/src/common/components/Message/index.tsx
@@ -1,6 +1,5 @@
 import { ListItem, Box, Typography } from "@mui/material";
 import { Message as MessageType } from "@/api/types/message";
-import { use } from "react";
 
 type Props = {
   message: MessageType;
diff --git a/src/common/index.ts b/src/common/index.ts
index 613396d..31f218e 100644
--- a/src/common/index.ts
+++ b/src/common/index.ts
@@ -1,4 +1,3 @@
 export * from "./api";
 export * from "./config";
 export * from "./components";
-export * from "./utils";
diff --git a/src/hooks/api/chatHooks.ts b/src/hooks/api/chatHooks.ts
index 1fe558a..57d0e0c 100644
--- a/src/hooks/api/chatHooks.ts
+++ b/src/hooks/api/chatHooks.ts
@@ -1,7 +1,7 @@
 import { ChatClient } from "@/api/chat.client";
 import { ClientResponse, SuccessResponse } from "@/types";
-import { Chat } from "@/api/types/chat";
-import { useQuery } from "@tanstack/react-query";
+import { Chat, ChatRequestClose } from "@/api/types/chat";
+import { useMutation, useQuery } from "@tanstack/react-query";
 
 const chatClient = new ChatClient();
 
@@ -42,3 +42,13 @@ export function useChatByUserId(userId: number) {
     },
   });
 }
+
+export function useCloseChat() {
+  return useMutation({
+    mutationFn: (chatRequestClose: ChatRequestClose) =>
+      chatClient.closeChat({
+        id: chatRequestClose.id,
+        customerId: chatRequestClose.customerId,
+      }),
+  });
+}
diff --git a/src/hooks/api/modelHooks.ts b/src/hooks/api/modelHooks.ts
new file mode 100644
index 0000000..6616b47
--- /dev/null
+++ b/src/hooks/api/modelHooks.ts
@@ -0,0 +1,29 @@
+import { ChatClient } from "@/api/chat.client";
+import { ModelClient } from "@/api/model.client";
+import { Chat } from "@/api/types/chat";
+import { SuccessResponse } from "@/types";
+import { useMutation } from "@tanstack/react-query";
+
+const modelClient = new ModelClient();
+const chatClient = new ChatClient();
+
+export function useModelGenerateGuide() {
+  return useMutation({
+    mutationFn: async (chatId: number) => {
+      const chatResponse = await chatClient.chatById({
+        id: chatId,
+      });
+      const chat = (chatResponse as SuccessResponse<Chat>).data;
+      return modelClient.createGuide({
+        user: {
+          roles: chat.user.roles,
+          username: chat.user.username,
+        },
+        messages: chat.messages.map((message) => ({
+          content: message.content,
+          isSupportSender: message.isSupportSender,
+        })),
+      });
+    },
+  });
+}

From 6738cbbbad91a657a07cdb72025dfed8c27f1ab6 Mon Sep 17 00:00:00 2001
From: Ori <ori100no@gmail.com>
Date: Thu, 29 Aug 2024 12:36:19 +0300
Subject: [PATCH 186/242] added title to review and styled the application

---
 .../new_dashboard/guides/[id]/page.tsx        |  3 -
 .../guides/components/ReviewCard/index.tsx    | 59 ++++++++++---------
 .../new_dashboard/shared/Card/index.tsx       |  5 +-
 3 files changed, 34 insertions(+), 33 deletions(-)

diff --git a/src/app/(admin)/new_dashboard/guides/[id]/page.tsx b/src/app/(admin)/new_dashboard/guides/[id]/page.tsx
index 9058971..3a2459a 100644
--- a/src/app/(admin)/new_dashboard/guides/[id]/page.tsx
+++ b/src/app/(admin)/new_dashboard/guides/[id]/page.tsx
@@ -18,7 +18,6 @@ import ReviewList from "../components/ReviewList";
 import parse from "html-react-parser";
 import "quill/dist/quill.snow.css";
 import { useChat } from "@/app/hooks/useChat";
-import ChatPopup from "../../components/ChatPopup";
 
 const GuidePage: React.FC = () => {
   const params = useParams();
@@ -27,8 +26,6 @@ const GuidePage: React.FC = () => {
 
   const { data: response, isLoading, isError, error, isSuccess } = useGuide(id ?? 0);
 
-  const {selectedContact} = useChat();
-
   if (isLoading) {
     return <CircularProgress />;
   }
diff --git a/src/app/(admin)/new_dashboard/guides/components/ReviewCard/index.tsx b/src/app/(admin)/new_dashboard/guides/components/ReviewCard/index.tsx
index 9bd7cfb..6764fd3 100644
--- a/src/app/(admin)/new_dashboard/guides/components/ReviewCard/index.tsx
+++ b/src/app/(admin)/new_dashboard/guides/components/ReviewCard/index.tsx
@@ -12,37 +12,40 @@ interface ReviewCardProps {
 
 const ReviewCard: React.FC<ReviewCardProps> = ({ review }) => {
   return (
-    <>
-      <Box
-        display="flex"
-        flexDirection="row"
-        mb={4}
-        sx={{
-          padding: 2,
-          borderRadius: 2,
-        }}
-      >
-        <Box display="grid" mr={10}>
-          <Rating 
-            value={review.rating}
-            readOnly
-            precision={0.5}
-            sx={{ fontSize: '1.25rem', color: 'gold' }}
-            />
-          <Typography variant="body2" color="textSecondary" >
-            by {review.user?.username}
-          </Typography>
-          <Typography variant="body2" color="textSecondary" mb={1}>
-              {new Date(review.createdAt).toLocaleDateString()}
-           </Typography>
-        </Box>
-        
-        <Typography variant="body1" mb={1} >
+    <Box
+      display="flex"
+      flexDirection="row"
+      mb={4}
+      sx={{
+        padding: 2,
+        borderRadius: 2,
+      }}
+    >
+      <Box display="grid" mr={10}>
+        <Rating 
+          value={review.rating}
+          readOnly
+          precision={0.5}
+          sx={{ fontSize: '1.25rem', color: 'gold' }}
+        />
+        <Typography variant="body2" color="textSecondary">
+          by {review.user?.username}
+        </Typography>
+        <Typography variant="body2" color="textSecondary" mb={1}>
+          {new Date(review.createdAt).toLocaleDateString()}
+        </Typography>
+      </Box>
+
+      <Box>
+        <Typography variant="h6" component="h3" mb={1}>
+          {review.title}
+        </Typography>
+
+        <Typography variant="body1" mb={1}>
           {review.comment}
         </Typography>
       </Box>
-     
-    </>
+    </Box>
   );
 };
 
diff --git a/src/app/(admin)/new_dashboard/shared/Card/index.tsx b/src/app/(admin)/new_dashboard/shared/Card/index.tsx
index e7c120d..0fe1e22 100644
--- a/src/app/(admin)/new_dashboard/shared/Card/index.tsx
+++ b/src/app/(admin)/new_dashboard/shared/Card/index.tsx
@@ -32,7 +32,9 @@ const DashboardCard = ({
         height: fullHeight ? "100%" : "auto",
         display: "flex",
         flexDirection: "column",
-        elevation: 9,
+        border: "none",
+        boxShadow: "none",
+        elevation: 0,
         variant: undefined,
       }}
     >
@@ -45,7 +47,6 @@ const DashboardCard = ({
         </CardContent>
       ) : (
         <CardContent sx={{ p: "30px", flex: 1 }}>
-          {/* Allow content to expand */}
           {title ? (
             <Stack
               direction="row"

From 6d9fb121e2130afb961d3e2cb2be0b5b5fea9018 Mon Sep 17 00:00:00 2001
From: Ori <ori100no@gmail.com>
Date: Thu, 29 Aug 2024 12:44:09 +0300
Subject: [PATCH 187/242] removed double card styling

---
 src/app/globals.css | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index 07fb699..dfa9b50 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -2,10 +2,6 @@
 @tailwind components;
 @tailwind utilities;
 
-.quill-content {
-  @apply font-sans text-gray-700 p-4 bg-white rounded-lg shadow-md;
-  line-height: 1.6;
-}
 
 .quill-content h1 {
   @apply text-2xl font-bold mb-4 text-gray-800;

From b2530b4ac6c9858903efc5ae0e9bf259f54ba452 Mon Sep 17 00:00:00 2001
From: Ori <ori100no@gmail.com>
Date: Thu, 29 Aug 2024 12:51:21 +0300
Subject: [PATCH 188/242] improved styling

---
 src/app/(admin)/new_dashboard/guides/[id]/page.tsx          | 4 +++-
 .../new_dashboard/guides/components/AddReviewBox/index.tsx  | 6 +++++-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/app/(admin)/new_dashboard/guides/[id]/page.tsx b/src/app/(admin)/new_dashboard/guides/[id]/page.tsx
index 3a2459a..838ef11 100644
--- a/src/app/(admin)/new_dashboard/guides/[id]/page.tsx
+++ b/src/app/(admin)/new_dashboard/guides/[id]/page.tsx
@@ -51,7 +51,9 @@ const GuidePage: React.FC = () => {
             {parse(guide.contentHTML)}
           </Box>
         </DashboardCard>
-        <ReviewList guideId={guide.id} reviews={guide.reviews ?? []} />
+        <Box ml={3}>
+          <ReviewList guideId={guide.id} reviews={guide.reviews ?? []} />
+        </Box>
       </Box>
     );
   }
diff --git a/src/app/(admin)/new_dashboard/guides/components/AddReviewBox/index.tsx b/src/app/(admin)/new_dashboard/guides/components/AddReviewBox/index.tsx
index 1da575a..dfccfb2 100644
--- a/src/app/(admin)/new_dashboard/guides/components/AddReviewBox/index.tsx
+++ b/src/app/(admin)/new_dashboard/guides/components/AddReviewBox/index.tsx
@@ -29,7 +29,11 @@ const AddReviewBox: React.FC<AddReviewBoxProps> = ({ guideId }) => {
   }
 
   return (
-    <Box display="flex" flexDirection="column" alignItems="flex-start" sx={{ mt: 2 }}>
+    <Box 
+      display="flex"
+      flexDirection="column"
+      alignItems="flex-start"
+      sx={{ mt: 2 }} >
       <Typography variant="h6">Add Your Review:</Typography>
       <Box mb={2} mt={2}>
         <Rating

From 04e052cd4b9410d68e70ed003405286130c1572e Mon Sep 17 00:00:00 2001
From: Ori <ori100no@gmail.com>
Date: Thu, 29 Aug 2024 12:56:36 +0300
Subject: [PATCH 189/242] improved styling

---
 .../new_dashboard/guides/components/AddReviewBox/index.tsx      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/(admin)/new_dashboard/guides/components/AddReviewBox/index.tsx b/src/app/(admin)/new_dashboard/guides/components/AddReviewBox/index.tsx
index dfccfb2..0eb69cb 100644
--- a/src/app/(admin)/new_dashboard/guides/components/AddReviewBox/index.tsx
+++ b/src/app/(admin)/new_dashboard/guides/components/AddReviewBox/index.tsx
@@ -33,7 +33,7 @@ const AddReviewBox: React.FC<AddReviewBoxProps> = ({ guideId }) => {
       display="flex"
       flexDirection="column"
       alignItems="flex-start"
-      sx={{ mt: 2 }} >
+      sx={{ mt: 2 , ml: 2}} >
       <Typography variant="h6">Add Your Review:</Typography>
       <Box mb={2} mt={2}>
         <Rating

From 088cf4272b66e81063ad615c39b66917cef436fb Mon Sep 17 00:00:00 2001
From: Ori <ori100no@gmail.com>
Date: Thu, 29 Aug 2024 14:42:51 +0300
Subject: [PATCH 190/242] removed x from popup and added minus to minimize the
 chat

---
 .../components/ChatPopup/index.tsx            | 24 +++++++++++++------
 1 file changed, 17 insertions(+), 7 deletions(-)

diff --git a/src/app/(admin)/new_dashboard/components/ChatPopup/index.tsx b/src/app/(admin)/new_dashboard/components/ChatPopup/index.tsx
index 8668edc..7e63f2c 100644
--- a/src/app/(admin)/new_dashboard/components/ChatPopup/index.tsx
+++ b/src/app/(admin)/new_dashboard/components/ChatPopup/index.tsx
@@ -2,7 +2,7 @@
 
 import React, { useState } from 'react';
 import { Box, IconButton, Paper, Typography } from '@mui/material';
-import { Chat, Close } from '@mui/icons-material';
+import { Chat, Close, Minimize } from '@mui/icons-material';
 import SupportMessageList from '../SupportMessageList';
 import MessageInput from '@/common/components/MessageInput';
 import { Contact } from '../../types';
@@ -32,8 +32,10 @@ const ChatPopup = ({ selectedContact }: Props) => {
         zIndex: 1000,
       }}
     >
+
+      {!isOpen &&(
       <IconButton
-        color="primary"
+        color='primary'
         onClick={toggleChat}
         sx={{
           backgroundColor: 'primary.main',
@@ -41,8 +43,8 @@ const ChatPopup = ({ selectedContact }: Props) => {
           '&:hover': { backgroundColor: 'primary.dark' },
         }}
       >
-        {isOpen ? <Close /> : <Chat />}
-      </IconButton>
+        <Chat />
+      </IconButton>)}
 
       {isOpen && selectedContact && (
         <Paper
@@ -60,16 +62,23 @@ const ChatPopup = ({ selectedContact }: Props) => {
             zIndex: 1000,
           }}
         >
+
           <Box
             sx={{
               backgroundColor: 'primary.main',
-              color: 'white',
-              padding: 2,
+              color:'info.contrastText',
+              padding: 1,
               display: 'flex',
-              justifyContent: 'space-between',
+              justifyContent: "space-between",
               alignItems: 'center',
             }}
           >
+           
+            <IconButton 
+              onClick={toggleChat}
+              sx={{color: 'info.contrastText' ,mb:1}} >
+              <Minimize />
+            </IconButton>
             <Typography variant="h6">{selectedContact.username}</Typography>
           </Box>
 
@@ -87,6 +96,7 @@ const ChatPopup = ({ selectedContact }: Props) => {
           <Box>
             <MessageInput chatId={selectedContact.chatId} isPopup={true}/>
           </Box>
+
         </Paper>
       )}
     </Box>

From 59c6a36cec05a24b08f21656f0cf81b431a60860 Mon Sep 17 00:00:00 2001
From: Ori <ori100no@gmail.com>
Date: Thu, 29 Aug 2024 15:07:03 +0300
Subject: [PATCH 191/242] made one note buton with contained and non contained

---
 src/common/components/MessageInput/index.tsx | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/src/common/components/MessageInput/index.tsx b/src/common/components/MessageInput/index.tsx
index 0366a17..72a26f5 100644
--- a/src/common/components/MessageInput/index.tsx
+++ b/src/common/components/MessageInput/index.tsx
@@ -30,14 +30,12 @@ const MessageInput = ({ chatId, isSupport = true , isPopup = false }: MessageInp
       {isSupport && (
         <Box sx={{ display: "flex", alignSelf: "start", gap: 1 }}>
           <Button
-            variant={!isNote ? "contained" : "outlined"}
-            onClick={isNote ? handleChangeNote : () => {}}
-          >
-            Reply
-          </Button>
-          <Button
+            color="note"
             variant={isNote ? "contained" : "outlined"}
-            onClick={!isNote ? handleChangeNote : () => {}}
+            onClick={handleChangeNote}
+            sx={{
+              color: isNote ? "inherit" : "rgba(0, 0, 0, 0.38)", 
+              borderColor: isNote ? "inherit" : "rgba(0, 0, 0, 0.38)",}}
           >
             Note
           </Button>

From a669eef1a4c50abb4350959ad4c76971b9c954d1 Mon Sep 17 00:00:00 2001
From: Ori <ori100no@gmail.com>
Date: Thu, 29 Aug 2024 15:07:48 +0300
Subject: [PATCH 192/242] refactor: extracted mui components overide to a new
 file

---
 src/util/overide.mui.modules.ts | 18 ++++++++++++++++++
 src/util/theme.ts               | 22 ++++------------------
 2 files changed, 22 insertions(+), 18 deletions(-)
 create mode 100644 src/util/overide.mui.modules.ts

diff --git a/src/util/overide.mui.modules.ts b/src/util/overide.mui.modules.ts
new file mode 100644
index 0000000..b48c62d
--- /dev/null
+++ b/src/util/overide.mui.modules.ts
@@ -0,0 +1,18 @@
+import { SimplePaletteColorOptions } from "@mui/material/styles";
+
+declare module "@mui/material/styles" {
+  interface Palette {
+    note: SimplePaletteColorOptions;
+    gold: SimplePaletteColorOptions;
+  }
+  interface PaletteOptions {
+    note?: SimplePaletteColorOptions;
+    gold?: SimplePaletteColorOptions;
+  }
+}
+
+declare module "@mui/material/Button" {
+  interface ButtonPropsColorOverrides {
+    note: true;
+  }
+}
diff --git a/src/util/theme.ts b/src/util/theme.ts
index 0a77b01..0905e08 100644
--- a/src/util/theme.ts
+++ b/src/util/theme.ts
@@ -1,8 +1,4 @@
-import {
-  createTheme,
-  PaletteColorOptions,
-  SimplePaletteColorOptions,
-} from "@mui/material/styles";
+import { createTheme } from "@mui/material/styles";
 import { Plus_Jakarta_Sans } from "next/font/google";
 
 export const plus = Plus_Jakarta_Sans({
@@ -11,16 +7,6 @@ export const plus = Plus_Jakarta_Sans({
   display: "swap",
   fallback: ["Helvetica", "Arial", "sans-serif"],
 });
-declare module "@mui/material/styles" {
-  interface Palette {
-    note: SimplePaletteColorOptions;
-    gold: SimplePaletteColorOptions;
-  }
-  interface PaletteOptions {
-    note?: SimplePaletteColorOptions;
-    gold?: SimplePaletteColorOptions;
-  }
-}
 
 const baselightTheme = createTheme({
   direction: "ltr",
@@ -62,7 +48,7 @@ const baselightTheme = createTheme({
       dark: "#ae8e59",
       contrastText: "#ffffff",
     },
-    
+
     grey: {
       100: "#F2F6FA",
       200: "#EAEFF4",
@@ -86,7 +72,7 @@ const baselightTheme = createTheme({
       main: "#FFD35C",
     },
   },
-  
+
   typography: {
     fontFamily: plus.style.fontFamily,
     h1: {
@@ -178,4 +164,4 @@ const baselightTheme = createTheme({
   },
 });
 
-export { baselightTheme };
\ No newline at end of file
+export { baselightTheme };

From e705004a4c7929bfb712fb212f3efb5f1b36f0ef Mon Sep 17 00:00:00 2001
From: Ori <ori100no@gmail.com>
Date: Thu, 29 Aug 2024 15:08:53 +0300
Subject: [PATCH 193/242] extracted theme files to a new folder

---
 src/app/layout.tsx                          | 2 +-
 src/util/{ => theme}/overide.mui.modules.ts | 0
 src/util/{ => theme}/theme.ts               | 0
 3 files changed, 1 insertion(+), 1 deletion(-)
 rename src/util/{ => theme}/overide.mui.modules.ts (100%)
 rename src/util/{ => theme}/theme.ts (100%)

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index df18ae6..3224f07 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { baselightTheme } from "@/util/theme";
+import { baselightTheme } from "@/util/theme/theme";
 import "./globals.css";
 import { SocketProvider } from "./providers/SocketProvider/provider";
 import { QueryProvider } from "./providers/QueryProvider/provider";
diff --git a/src/util/overide.mui.modules.ts b/src/util/theme/overide.mui.modules.ts
similarity index 100%
rename from src/util/overide.mui.modules.ts
rename to src/util/theme/overide.mui.modules.ts
diff --git a/src/util/theme.ts b/src/util/theme/theme.ts
similarity index 100%
rename from src/util/theme.ts
rename to src/util/theme/theme.ts

From dba7f9747b40a3da216243da766e695c83eca671 Mon Sep 17 00:00:00 2001
From: Ori <ori100no@gmail.com>
Date: Thu, 29 Aug 2024 15:26:31 +0300
Subject: [PATCH 194/242] extracted typography to a separate file

---
 src/util/theme/app.typography.ts | 76 ++++++++++++++++++++++++++++++++
 src/util/theme/theme.ts          | 69 ++---------------------------
 2 files changed, 79 insertions(+), 66 deletions(-)
 create mode 100644 src/util/theme/app.typography.ts

diff --git a/src/util/theme/app.typography.ts b/src/util/theme/app.typography.ts
new file mode 100644
index 0000000..f0a049d
--- /dev/null
+++ b/src/util/theme/app.typography.ts
@@ -0,0 +1,76 @@
+import { Plus_Jakarta_Sans } from "next/font/google";
+
+export const plusFont = Plus_Jakarta_Sans({
+  weight: ["300", "400", "500", "600", "700"],
+  subsets: ["latin"],
+  display: "swap",
+  fallback: ["Helvetica", "Arial", "sans-serif"],
+});
+
+export const appTypography = {
+  fontFamily: plusFont.style.fontFamily,
+  h1: {
+    fontWeight: 600,
+    fontSize: "2.25rem",
+    lineHeight: "2.75rem",
+    fontFamily: plusFont.style.fontFamily,
+  },
+  h2: {
+    fontWeight: 600,
+    fontSize: "1.875rem",
+    lineHeight: "2.25rem",
+    fontFamily: plusFont.style.fontFamily,
+  },
+  h3: {
+    fontWeight: 600,
+    fontSize: "1.5rem",
+    lineHeight: "1.75rem",
+    fontFamily: plusFont.style.fontFamily,
+  },
+  h4: {
+    fontWeight: 600,
+    fontSize: "1.3125rem",
+    lineHeight: "1.6rem",
+    fontFamily: plusFont.style.fontFamily,
+  },
+  h5: {
+    fontWeight: 600,
+    fontSize: "1.125rem",
+    lineHeight: "1.6rem",
+    fontFamily: plusFont.style.fontFamily,
+  },
+  h6: {
+    fontWeight: 600,
+    fontSize: "1rem",
+    lineHeight: "1.2rem",
+    fontFamily: plusFont.style.fontFamily,
+  },
+  button: {
+    textTransform: "capitalize" as const,
+    fontWeight: 400,
+    fontFamily: plusFont.style.fontFamily,
+  },
+  body1: {
+    fontSize: "0.875rem",
+    fontWeight: 400,
+    lineHeight: "1.334rem",
+    fontFamily: plusFont.style.fontFamily,
+  },
+  body2: {
+    fontSize: "0.75rem",
+    letterSpacing: "0rem",
+    fontWeight: 400,
+    lineHeight: "1rem",
+    fontFamily: plusFont.style.fontFamily,
+  },
+  subtitle1: {
+    fontSize: "0.875rem",
+    fontWeight: 400,
+    fontFamily: plusFont.style.fontFamily,
+  },
+  subtitle2: {
+    fontSize: "0.875rem",
+    fontWeight: 400,
+    fontFamily: plusFont.style.fontFamily,
+  },
+};
diff --git a/src/util/theme/theme.ts b/src/util/theme/theme.ts
index 0905e08..d9ceee6 100644
--- a/src/util/theme/theme.ts
+++ b/src/util/theme/theme.ts
@@ -1,12 +1,6 @@
 import { createTheme } from "@mui/material/styles";
 import { Plus_Jakarta_Sans } from "next/font/google";
-
-export const plus = Plus_Jakarta_Sans({
-  weight: ["300", "400", "500", "600", "700"],
-  subsets: ["latin"],
-  display: "swap",
-  fallback: ["Helvetica", "Arial", "sans-serif"],
-});
+import { appTypography, plusFont } from "./app.typography";
 
 const baselightTheme = createTheme({
   direction: "ltr",
@@ -73,65 +67,7 @@ const baselightTheme = createTheme({
     },
   },
 
-  typography: {
-    fontFamily: plus.style.fontFamily,
-    h1: {
-      fontWeight: 600,
-      fontSize: "2.25rem",
-      lineHeight: "2.75rem",
-      fontFamily: plus.style.fontFamily,
-    },
-    h2: {
-      fontWeight: 600,
-      fontSize: "1.875rem",
-      lineHeight: "2.25rem",
-      fontFamily: plus.style.fontFamily,
-    },
-    h3: {
-      fontWeight: 600,
-      fontSize: "1.5rem",
-      lineHeight: "1.75rem",
-      fontFamily: plus.style.fontFamily,
-    },
-    h4: {
-      fontWeight: 600,
-      fontSize: "1.3125rem",
-      lineHeight: "1.6rem",
-    },
-    h5: {
-      fontWeight: 600,
-      fontSize: "1.125rem",
-      lineHeight: "1.6rem",
-    },
-    h6: {
-      fontWeight: 600,
-      fontSize: "1rem",
-      lineHeight: "1.2rem",
-    },
-    button: {
-      textTransform: "capitalize",
-      fontWeight: 400,
-    },
-    body1: {
-      fontSize: "0.875rem",
-      fontWeight: 400,
-      lineHeight: "1.334rem",
-    },
-    body2: {
-      fontSize: "0.75rem",
-      letterSpacing: "0rem",
-      fontWeight: 400,
-      lineHeight: "1rem",
-    },
-    subtitle1: {
-      fontSize: "0.875rem",
-      fontWeight: 400,
-    },
-    subtitle2: {
-      fontSize: "0.875rem",
-      fontWeight: 400,
-    },
-  },
+  typography: appTypography,
   components: {
     MuiCssBaseline: {
       styleOverrides: {
@@ -158,6 +94,7 @@ const baselightTheme = createTheme({
       styleOverrides: {
         root: {
           borderRadius: "7px",
+          fontFamily: plusFont.style.fontFamily,
         },
       },
     },

From 1393f0b0223cee04e9cf5cda4d0d1ac0130650ce Mon Sep 17 00:00:00 2001
From: Ori <ori100no@gmail.com>
Date: Thu, 29 Aug 2024 17:30:28 +0300
Subject: [PATCH 195/242] changed primery blue color and border radius

---
 src/app/(admin)/new_dashboard/components/ChatPopup/index.tsx | 2 +-
 src/util/theme/theme.ts                                      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/(admin)/new_dashboard/components/ChatPopup/index.tsx b/src/app/(admin)/new_dashboard/components/ChatPopup/index.tsx
index 7e63f2c..27e029d 100644
--- a/src/app/(admin)/new_dashboard/components/ChatPopup/index.tsx
+++ b/src/app/(admin)/new_dashboard/components/ChatPopup/index.tsx
@@ -57,7 +57,7 @@ const ChatPopup = ({ selectedContact }: Props) => {
             marginLeft: 2,
             backgroundColor: 'background.paper',
             boxShadow: 1,
-            borderRadius: 1,
+            borderRadius: 3,
             overflow: 'hidden',
             zIndex: 1000,
           }}
diff --git a/src/util/theme/theme.ts b/src/util/theme/theme.ts
index d9ceee6..cd26286 100644
--- a/src/util/theme/theme.ts
+++ b/src/util/theme/theme.ts
@@ -9,7 +9,7 @@ const baselightTheme = createTheme({
       main: "rgba(254, 237, 175)",
     },
     primary: {
-      main: "#5D87FF",
+      main: "#2D52BD",
       light: "#ECF2FF",
       dark: "#4570EA",
     },

From 3dcc8ad80ee1b91ddb7c3c2192d59d76929b7ff6 Mon Sep 17 00:00:00 2001
From: Ori <ori100no@gmail.com>
Date: Thu, 29 Aug 2024 17:47:13 +0300
Subject: [PATCH 196/242] styled the guide display page

---
 src/app/(admin)/new_dashboard/guides/[id]/page.tsx  |  5 ++++-
 .../guides/components/ReviewList/index.tsx          | 13 ++++++++-----
 src/app/(admin)/new_dashboard/shared/Card/index.tsx |  6 ++++--
 3 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/src/app/(admin)/new_dashboard/guides/[id]/page.tsx b/src/app/(admin)/new_dashboard/guides/[id]/page.tsx
index 838ef11..4440236 100644
--- a/src/app/(admin)/new_dashboard/guides/[id]/page.tsx
+++ b/src/app/(admin)/new_dashboard/guides/[id]/page.tsx
@@ -47,7 +47,10 @@ const GuidePage: React.FC = () => {
     return (
       <Box>
         <DashboardCard title={guide.title} subtitle={creatorAndDateInfo}>
-          <Box className="quill-content">
+          <Box 
+          className="quill-content"
+          sx={{backgroundColor:"#f5f5f5", padding:5, borderRadius:2}}
+          >
             {parse(guide.contentHTML)}
           </Box>
         </DashboardCard>
diff --git a/src/app/(admin)/new_dashboard/guides/components/ReviewList/index.tsx b/src/app/(admin)/new_dashboard/guides/components/ReviewList/index.tsx
index 6fbb724..1153b43 100644
--- a/src/app/(admin)/new_dashboard/guides/components/ReviewList/index.tsx
+++ b/src/app/(admin)/new_dashboard/guides/components/ReviewList/index.tsx
@@ -10,6 +10,7 @@ import {
 import { Review } from "@/api/types/Review";
 import AddReviewBox from "../AddReviewBox";
 import ReviewCard from "../ReviewCard";
+import DashboardCard from "../../../shared/Card";
 
 interface ReviewListProps {
   reviews: Review[];
@@ -36,11 +37,10 @@ const ReviewList: React.FC<ReviewListProps> = ({ reviews, guideId }) => {
   );
 
   return (
-        <Box mt={2}>
-          <Typography variant="h1" mt={2}>
-            Reviews
-          </Typography>
-          <Divider sx={{mt:2 , mb:2}}/>
+
+    <Box mt={3}>
+      <DashboardCard title={"Reviews"}> 
+        <Box>
           {reviewsContext}
           {reviews?.length > 1 &&(
           <Box display="flex" justifyContent="center" width="100%" mt={2}>
@@ -52,6 +52,9 @@ const ReviewList: React.FC<ReviewListProps> = ({ reviews, guideId }) => {
           </Box>)}
           <AddReviewBox guideId={guideId ?? 0} />
         </Box>
+      </DashboardCard>
+  </Box>
+  
   );
 };
 
diff --git a/src/app/(admin)/new_dashboard/shared/Card/index.tsx b/src/app/(admin)/new_dashboard/shared/Card/index.tsx
index 0fe1e22..9680e34 100644
--- a/src/app/(admin)/new_dashboard/shared/Card/index.tsx
+++ b/src/app/(admin)/new_dashboard/shared/Card/index.tsx
@@ -11,6 +11,7 @@ type Props = {
   children?: JSX.Element;
   middlecontent?: string | JSX.Element;
   fullHeight?: boolean;
+  isVisibleBorder?: boolean;
 };
 
 const DashboardCard = ({
@@ -24,6 +25,7 @@ const DashboardCard = ({
   headsubtitle,
   middlecontent,
   fullHeight = false,
+  isVisibleBorder = false,
 }: Props) => {
   return (
     <Card
@@ -32,7 +34,7 @@ const DashboardCard = ({
         height: fullHeight ? "100%" : "auto",
         display: "flex",
         flexDirection: "column",
-        border: "none",
+        border: isVisibleBorder ? "1px solid #E0E0E0" : "none",
         boxShadow: "none",
         elevation: 0,
         variant: undefined,
@@ -56,7 +58,7 @@ const DashboardCard = ({
               mb={3}
             >
               <Box>
-                {title ? <Typography variant="h1">{title}</Typography> : ""}
+                {title ? <Typography variant="h3">{title}</Typography> : ""}
 
                 {subtitle ? (
                   <Typography variant="subtitle2" color="textSecondary">

From 9f973bc5795c18e68528cfaf85be5f5b65d14596 Mon Sep 17 00:00:00 2001
From: Ori <ori100no@gmail.com>
Date: Thu, 29 Aug 2024 18:20:48 +0300
Subject: [PATCH 197/242] added colors and styled app

---
 src/app/(admin)/new_dashboard/guides/[id]/page.tsx         | 2 +-
 src/app/(admin)/new_dashboard/shared/Card/index.tsx        | 4 ++--
 .../new_dashboard/shared/sidebar/NavGroup/index.tsx        | 2 +-
 src/app/(admin)/new_dashboard/shared/sidebar/Sidebar.tsx   | 5 +++--
 src/util/theme/overide.mui.modules.ts                      | 7 ++++++-
 src/util/theme/theme.ts                                    | 7 ++++++-
 6 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/src/app/(admin)/new_dashboard/guides/[id]/page.tsx b/src/app/(admin)/new_dashboard/guides/[id]/page.tsx
index 4440236..3712c51 100644
--- a/src/app/(admin)/new_dashboard/guides/[id]/page.tsx
+++ b/src/app/(admin)/new_dashboard/guides/[id]/page.tsx
@@ -49,7 +49,7 @@ const GuidePage: React.FC = () => {
         <DashboardCard title={guide.title} subtitle={creatorAndDateInfo}>
           <Box 
           className="quill-content"
-          sx={{backgroundColor:"#f5f5f5", padding:5, borderRadius:2}}
+          sx={{backgroundColor:"bg.light", padding:5, borderRadius:2}}
           >
             {parse(guide.contentHTML)}
           </Box>
diff --git a/src/app/(admin)/new_dashboard/shared/Card/index.tsx b/src/app/(admin)/new_dashboard/shared/Card/index.tsx
index 9680e34..7c41582 100644
--- a/src/app/(admin)/new_dashboard/shared/Card/index.tsx
+++ b/src/app/(admin)/new_dashboard/shared/Card/index.tsx
@@ -43,7 +43,7 @@ const DashboardCard = ({
       {cardheading ? (
         <CardContent>
           <Typography variant="h5">{headtitle}</Typography>
-          <Typography variant="subtitle2" color="textSecondary">
+          <Typography variant="subtitle2" color="text.primary">
             {headsubtitle}
           </Typography>
         </CardContent>
@@ -61,7 +61,7 @@ const DashboardCard = ({
                 {title ? <Typography variant="h3">{title}</Typography> : ""}
 
                 {subtitle ? (
-                  <Typography variant="subtitle2" color="textSecondary">
+                  <Typography variant="subtitle2" color="text.primary">
                     {subtitle}
                   </Typography>
                 ) : (
diff --git a/src/app/(admin)/new_dashboard/shared/sidebar/NavGroup/index.tsx b/src/app/(admin)/new_dashboard/shared/sidebar/NavGroup/index.tsx
index 81e060f..79496d1 100644
--- a/src/app/(admin)/new_dashboard/shared/sidebar/NavGroup/index.tsx
+++ b/src/app/(admin)/new_dashboard/shared/sidebar/NavGroup/index.tsx
@@ -18,7 +18,7 @@ const NavGroup = ({ item }: ItemType) => {
     fontWeight: "700",
     marginTop: theme.spacing(3),
     marginBottom: theme.spacing(0),
-    color: theme.palette.text.primary,
+    color: "text.secondary",
     lineHeight: "26px",
     padding: "3px 12px",
   }));
diff --git a/src/app/(admin)/new_dashboard/shared/sidebar/Sidebar.tsx b/src/app/(admin)/new_dashboard/shared/sidebar/Sidebar.tsx
index 98c058c..4cfd6da 100644
--- a/src/app/(admin)/new_dashboard/shared/sidebar/Sidebar.tsx
+++ b/src/app/(admin)/new_dashboard/shared/sidebar/Sidebar.tsx
@@ -15,7 +15,7 @@ const DashboardSidebar = ({ isSidebarOpen }: ItemType) => {
       width: "7px",
     },
     "&::-webkit-scrollbar-thumb": {
-      backgroundColor: "#eff2f7",
+      backgroundColor: "primary.main",
       borderRadius: "15px",
     },
   };
@@ -38,6 +38,7 @@ const DashboardSidebar = ({ isSidebarOpen }: ItemType) => {
           sx: {
             boxSizing: "border-box",
             ...scrollbarStyles,
+            
           },
         }}
       >
@@ -57,6 +58,7 @@ const DashboardSidebar = ({ isSidebarOpen }: ItemType) => {
                 boxSizing: "border-box",
                 ...scrollbarStyles,
                 width: "270px",
+                backgroundColor: "primary.main",
               },
             }}
           >
@@ -74,7 +76,6 @@ const DashboardSidebar = ({ isSidebarOpen }: ItemType) => {
             >
               <Image src="/logo.png" alt="logo" width={220} height={150} />
             </Box>
-            {/* <Logo img="/logo.png" /> */}
             <Box>
               {/* ------------------------------------------- */}
               {/* Sidebar Items */}
diff --git a/src/util/theme/overide.mui.modules.ts b/src/util/theme/overide.mui.modules.ts
index b48c62d..1a40d01 100644
--- a/src/util/theme/overide.mui.modules.ts
+++ b/src/util/theme/overide.mui.modules.ts
@@ -1,13 +1,18 @@
-import { SimplePaletteColorOptions } from "@mui/material/styles";
+import {
+  SimplePaletteColorOptions,
+  PaletteColorOptions,
+} from "@mui/material/styles";
 
 declare module "@mui/material/styles" {
   interface Palette {
     note: SimplePaletteColorOptions;
     gold: SimplePaletteColorOptions;
+    bg: PaletteColorOptions;
   }
   interface PaletteOptions {
     note?: SimplePaletteColorOptions;
     gold?: SimplePaletteColorOptions;
+    bg?: PaletteColorOptions;
   }
 }
 
diff --git a/src/util/theme/theme.ts b/src/util/theme/theme.ts
index cd26286..a02f0f3 100644
--- a/src/util/theme/theme.ts
+++ b/src/util/theme/theme.ts
@@ -54,7 +54,7 @@ const baselightTheme = createTheme({
 
     text: {
       primary: "#2A3547",
-      secondary: "#5A6A85",
+      secondary: "#FFFFFF",
     },
     action: {
       disabledBackground: "rgba(73,82,88,0.12)",
@@ -65,6 +65,11 @@ const baselightTheme = createTheme({
     gold: {
       main: "#FFD35C",
     },
+    bg:{
+      main: "#F5F5F5",
+      dark: "#F5F5F5",
+      light:"#F0F0F0"
+    }
   },
 
   typography: appTypography,

From ec2bca0234325e9040be7daa71418fe245c53df8 Mon Sep 17 00:00:00 2001
From: roiy0987 <roiy0987@gmail.com>
Date: Thu, 29 Aug 2024 19:53:18 +0300
Subject: [PATCH 198/242] refactor: Optimize rendering efficiency in
 SupportMessageList component

---
 .../components/SupportMessageList/index.tsx   | 49 +++++++++----------
 1 file changed, 24 insertions(+), 25 deletions(-)

diff --git a/src/app/(admin)/new_dashboard/components/SupportMessageList/index.tsx b/src/app/(admin)/new_dashboard/components/SupportMessageList/index.tsx
index 90a0798..9ebe74c 100644
--- a/src/app/(admin)/new_dashboard/components/SupportMessageList/index.tsx
+++ b/src/app/(admin)/new_dashboard/components/SupportMessageList/index.tsx
@@ -21,32 +21,31 @@ const SupportMessageList = ({ chatId, username }: Props) => {
       }}
     >
       <List>
-        {messages &&
-          Object.keys(messages).map((date, index) => {
-            return (
-              <Box key={index}>
-                <Box
-                  sx={{
-                    display: "flex",
-                    justifyContent: "center",
-                    alignItems: "center",
-                    padding: 1,
-                  }}
-                >
-                  {date}
-                </Box>
-                {messages[date].map((msg, index) => {
-                  return (
-                    <MessageContainer
-                      message={msg}
-                      key={index}
-                      username={username}
-                    ></MessageContainer>
-                  );
-                })}
+        {Object.keys(messages).map((date, index) => {
+          return (
+            <Box key={index}>
+              <Box
+                sx={{
+                  display: "flex",
+                  justifyContent: "center",
+                  alignItems: "center",
+                  padding: 1,
+                }}
+              >
+                {date}
               </Box>
-            );
-          })}
+              {messages[date].map((msg, index) => {
+                return (
+                  <MessageContainer
+                    message={msg}
+                    key={index}
+                    username={username}
+                  ></MessageContainer>
+                );
+              })}
+            </Box>
+          );
+        })}
       </List>
     </Box>
   );

From 7fc199fddd3b148f6526d9aab019a1c0fdd6d6ba Mon Sep 17 00:00:00 2001
From: Ori <ori100no@gmail.com>
Date: Thu, 29 Aug 2024 20:27:52 +0300
Subject: [PATCH 199/242] improved styling

---
 .../new_dashboard/guides/[id]/page.tsx        |  6 ++--
 .../guides/components/AddReviewBox/index.tsx  |  6 ++--
 .../guides/components/ReviewCard/index.tsx    | 29 ++++++++++++-------
 .../guides/components/ReviewList/index.tsx    | 22 +++++++-------
 .../new_dashboard/shared/Card/index.tsx       |  2 +-
 .../shared/sidebar/NavItem/index.tsx          |  8 ++---
 src/util/theme/overide.mui.modules.ts         |  6 ++++
 src/util/theme/theme.ts                       | 10 +++++--
 8 files changed, 54 insertions(+), 35 deletions(-)

diff --git a/src/app/(admin)/new_dashboard/guides/[id]/page.tsx b/src/app/(admin)/new_dashboard/guides/[id]/page.tsx
index 3712c51..f06a96d 100644
--- a/src/app/(admin)/new_dashboard/guides/[id]/page.tsx
+++ b/src/app/(admin)/new_dashboard/guides/[id]/page.tsx
@@ -49,14 +49,12 @@ const GuidePage: React.FC = () => {
         <DashboardCard title={guide.title} subtitle={creatorAndDateInfo}>
           <Box 
           className="quill-content"
-          sx={{backgroundColor:"bg.light", padding:5, borderRadius:2}}
+          sx={{backgroundColor:"bg.light", padding:5, borderRadius:3}}
           >
             {parse(guide.contentHTML)}
           </Box>
         </DashboardCard>
-        <Box ml={3}>
-          <ReviewList guideId={guide.id} reviews={guide.reviews ?? []} />
-        </Box>
+         <ReviewList guideId={guide.id} reviews={guide.reviews ?? []} />
       </Box>
     );
   }
diff --git a/src/app/(admin)/new_dashboard/guides/components/AddReviewBox/index.tsx b/src/app/(admin)/new_dashboard/guides/components/AddReviewBox/index.tsx
index 0eb69cb..7347d40 100644
--- a/src/app/(admin)/new_dashboard/guides/components/AddReviewBox/index.tsx
+++ b/src/app/(admin)/new_dashboard/guides/components/AddReviewBox/index.tsx
@@ -2,6 +2,7 @@
 import React from 'react';
 import { Box, Typography, Rating, TextField, Button, CircularProgress, Alert } from '@mui/material';
 import useAddReviewForm from '../../hooks/useAddReviewForm';
+import DashboardCard from '../../../shared/Card';
 
 interface AddReviewBoxProps {
   guideId: number;
@@ -29,12 +30,12 @@ const AddReviewBox: React.FC<AddReviewBoxProps> = ({ guideId }) => {
   }
 
   return (
+   <DashboardCard title={"Add Your Review"}> 
     <Box 
       display="flex"
       flexDirection="column"
       alignItems="flex-start"
-      sx={{ mt: 2 , ml: 2}} >
-      <Typography variant="h6">Add Your Review:</Typography>
+      sx={{ mt: 2 }} >
       <Box mb={2} mt={2}>
         <Rating
           name="stars"
@@ -86,6 +87,7 @@ const AddReviewBox: React.FC<AddReviewBoxProps> = ({ guideId }) => {
         </Typography>
       )}
     </Box>
+  </DashboardCard>
   );
 };
 
diff --git a/src/app/(admin)/new_dashboard/guides/components/ReviewCard/index.tsx b/src/app/(admin)/new_dashboard/guides/components/ReviewCard/index.tsx
index 6764fd3..c5dbde2 100644
--- a/src/app/(admin)/new_dashboard/guides/components/ReviewCard/index.tsx
+++ b/src/app/(admin)/new_dashboard/guides/components/ReviewCard/index.tsx
@@ -3,6 +3,7 @@ import {
   Typography,
   Box,
   Rating,
+  Divider,
 } from "@mui/material";
 import React from 'react';
 
@@ -17,33 +18,39 @@ const ReviewCard: React.FC<ReviewCardProps> = ({ review }) => {
       flexDirection="row"
       mb={4}
       sx={{
-        padding: 2,
+        padding: 3,
         borderRadius: 2,
+        backgroundColor:"bg.light" ,
       }}
     >
-      <Box display="grid" mr={10}>
-        <Rating 
+      <Box display="flex" flexDirection="column" sx={{mr:13}}>
+      <Rating 
           value={review.rating}
           readOnly
           precision={0.5}
           sx={{ fontSize: '1.25rem', color: 'gold' }}
         />
-        <Typography variant="body2" color="textSecondary">
-          by {review.user?.username}
-        </Typography>
-        <Typography variant="body2" color="textSecondary" mb={1}>
-          {new Date(review.createdAt).toLocaleDateString()}
-        </Typography>
-      </Box>
+        <Box ml={1}>
+          <Typography fontWeight={700} >
+            {review.user?.username}
+          </Typography>
 
+          <Typography color="text.primary">
+            {new Date(review.createdAt).toLocaleDateString()}
+          </Typography>
+        </Box>
+      </Box>
+      <Divider orientation="vertical" flexItem />
       <Box>
-        <Typography variant="h6" component="h3" mb={1}>
+        <Typography variant="h6" mb={1}>
           {review.title}
         </Typography>
 
         <Typography variant="body1" mb={1}>
           {review.comment}
         </Typography>
+
+      
       </Box>
     </Box>
   );
diff --git a/src/app/(admin)/new_dashboard/guides/components/ReviewList/index.tsx b/src/app/(admin)/new_dashboard/guides/components/ReviewList/index.tsx
index 1153b43..26bacfd 100644
--- a/src/app/(admin)/new_dashboard/guides/components/ReviewList/index.tsx
+++ b/src/app/(admin)/new_dashboard/guides/components/ReviewList/index.tsx
@@ -32,7 +32,7 @@ const ReviewList: React.FC<ReviewListProps> = ({ reviews, guideId }) => {
     <Typography>No reviews available yet</Typography>
   ) : (
     reviews.slice(0, visibleCount).map((review, index) => (
-      <ReviewCard key={index} review={review} />
+        <ReviewCard key={index} review={review} />
     ))
   );
 
@@ -41,18 +41,20 @@ const ReviewList: React.FC<ReviewListProps> = ({ reviews, guideId }) => {
     <Box mt={3}>
       <DashboardCard title={"Reviews"}> 
         <Box>
-          {reviewsContext}
+          <Box sx={{border:"1px solid" , borderColor:"border.main", padding:2, borderRadius:3}}>
+            {reviewsContext}
+          </Box>
           {reviews?.length > 1 &&(
-          <Box display="flex" justifyContent="center" width="100%" mt={2}>
-            <Button onClick={()=>{
-              visibleCount === reviews.length ? showLessReviews() : showMoreReviews();
-            }}>
-              {visibleCount === reviews.length ? "Show Less" : "Show More"}
-            </Button>
-          </Box>)}
-          <AddReviewBox guideId={guideId ?? 0} />
+            <Box display="flex" justifyContent="center" width="100%">
+              <Button onClick={()=>{
+                visibleCount === reviews.length ? showLessReviews() : showMoreReviews();
+              }}>
+                {visibleCount === reviews.length ? "Show Less" : "Show More"}
+              </Button>
+            </Box>)}
         </Box>
       </DashboardCard>
+      <AddReviewBox guideId={guideId ?? 0} />
   </Box>
   
   );
diff --git a/src/app/(admin)/new_dashboard/shared/Card/index.tsx b/src/app/(admin)/new_dashboard/shared/Card/index.tsx
index 7c41582..41e4e6d 100644
--- a/src/app/(admin)/new_dashboard/shared/Card/index.tsx
+++ b/src/app/(admin)/new_dashboard/shared/Card/index.tsx
@@ -34,7 +34,7 @@ const DashboardCard = ({
         height: fullHeight ? "100%" : "auto",
         display: "flex",
         flexDirection: "column",
-        border: isVisibleBorder ? "1px solid #E0E0E0" : "none",
+        border: isVisibleBorder ? "border.main" : "none",
         boxShadow: "none",
         elevation: 0,
         variant: undefined,
diff --git a/src/app/(admin)/new_dashboard/shared/sidebar/NavItem/index.tsx b/src/app/(admin)/new_dashboard/shared/sidebar/NavItem/index.tsx
index d30db27..5c8403b 100644
--- a/src/app/(admin)/new_dashboard/shared/sidebar/NavItem/index.tsx
+++ b/src/app/(admin)/new_dashboard/shared/sidebar/NavItem/index.tsx
@@ -49,11 +49,11 @@ const NavItem = ({ item, level, pathDirect }: ItemType) => {
         color: theme.palette.primary.main,
       },
       "&.Mui-selected": {
-        color: "white",
-        backgroundColor: theme.palette.primary.main,
+        color: theme.palette.primary.main,
+        backgroundColor: theme.palette.primary.light,
         "&:hover": {
-          backgroundColor: theme.palette.primary.main,
-          color: "white",
+          backgroundColor: theme.palette.primary.light,
+          color: theme.palette.primary.main,
         },
       },
     },
diff --git a/src/util/theme/overide.mui.modules.ts b/src/util/theme/overide.mui.modules.ts
index 1a40d01..677d446 100644
--- a/src/util/theme/overide.mui.modules.ts
+++ b/src/util/theme/overide.mui.modules.ts
@@ -8,11 +8,17 @@ declare module "@mui/material/styles" {
     note: SimplePaletteColorOptions;
     gold: SimplePaletteColorOptions;
     bg: PaletteColorOptions;
+    border: PaletteColorOptions;
   }
   interface PaletteOptions {
     note?: SimplePaletteColorOptions;
     gold?: SimplePaletteColorOptions;
     bg?: PaletteColorOptions;
+    border?: PaletteColorOptions;
+  }
+
+  interface TypeText {
+    bold?: string;
   }
 }
 
diff --git a/src/util/theme/theme.ts b/src/util/theme/theme.ts
index a02f0f3..6fc5e78 100644
--- a/src/util/theme/theme.ts
+++ b/src/util/theme/theme.ts
@@ -55,6 +55,7 @@ const baselightTheme = createTheme({
     text: {
       primary: "#2A3547",
       secondary: "#FFFFFF",
+      bold: "#2c2929",
     },
     action: {
       disabledBackground: "rgba(73,82,88,0.12)",
@@ -65,11 +66,14 @@ const baselightTheme = createTheme({
     gold: {
       main: "#FFD35C",
     },
-    bg:{
+    bg: {
       main: "#F5F5F5",
       dark: "#F5F5F5",
-      light:"#F0F0F0"
-    }
+      light: "#F0F0F0",
+    },
+    border: {
+      main: "#E0E0E0",
+    },
   },
 
   typography: appTypography,

From 2feeeed42960ba77f623976751a6eb35b703d2eb Mon Sep 17 00:00:00 2001
From: Ori <ori100no@gmail.com>
Date: Fri, 30 Aug 2024 10:25:01 +0300
Subject: [PATCH 200/242] styled the app

---
 .../components/ContactList/index.tsx              | 15 ++++++++-------
 .../components/SupportMessageList/index.tsx       |  2 ++
 .../(admin)/new_dashboard/shared/Card/index.tsx   |  2 +-
 src/common/components/Message/index.tsx           |  2 +-
 src/common/components/MessageInput/index.tsx      |  5 +++--
 5 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/src/app/(admin)/new_dashboard/components/ContactList/index.tsx b/src/app/(admin)/new_dashboard/components/ContactList/index.tsx
index e1e4d96..33dd863 100644
--- a/src/app/(admin)/new_dashboard/components/ContactList/index.tsx
+++ b/src/app/(admin)/new_dashboard/components/ContactList/index.tsx
@@ -18,9 +18,10 @@ const ContactList = ({ contacts, onSelectContact, selectedContact }: Props) => {
   return (
     <Box
       sx={{
-        width: "30%",
-        borderRight: "1px solid #e0e0e0",
+        width: "20%",
+        borderRight: "1px solid #E0E0E0",
         overflow: "auto",
+        padding: 2,
       }}
     >
       <List>
@@ -31,17 +32,17 @@ const ContactList = ({ contacts, onSelectContact, selectedContact }: Props) => {
         ) : (
           <List>
             {contacts.map((contact, index) => (
-              <Box key={index} sx={{ padding: "0 8px" }}>
+              <Box key={index} sx={{ padding: "8px 0" }}>
                 <ListItemButton
                   selected={selectedContact?.chatId === contact.chatId}
                   onClick={() => onSelectContact(contact)}
                   sx={{
                     backgroundColor:
                       selectedContact?.chatId === contact.chatId
-                        ? "#f5f5f5"
-                        : "#ffffff",
-                    borderRadius: 0,
-                    marginRight: 0,
+                        ? "primary.main"
+                        : "primary.light",
+                    borderRadius: 1,
+                    marginLeft: 0, 
                   }}
                 >
                   <ListItemAvatar>
diff --git a/src/app/(admin)/new_dashboard/components/SupportMessageList/index.tsx b/src/app/(admin)/new_dashboard/components/SupportMessageList/index.tsx
index 87758db..06bd257 100644
--- a/src/app/(admin)/new_dashboard/components/SupportMessageList/index.tsx
+++ b/src/app/(admin)/new_dashboard/components/SupportMessageList/index.tsx
@@ -18,6 +18,7 @@ const SupportMessageList = ({ chatId }: Props) => {
         paddingBottom: 2,
       }}
     >
+
       <List>
         {messages.map((msg, index) => {
           return (
@@ -25,6 +26,7 @@ const SupportMessageList = ({ chatId }: Props) => {
           );
         })}
       </List>
+      
     </Box>
   );
 };
diff --git a/src/app/(admin)/new_dashboard/shared/Card/index.tsx b/src/app/(admin)/new_dashboard/shared/Card/index.tsx
index 41e4e6d..9a6722d 100644
--- a/src/app/(admin)/new_dashboard/shared/Card/index.tsx
+++ b/src/app/(admin)/new_dashboard/shared/Card/index.tsx
@@ -34,7 +34,7 @@ const DashboardCard = ({
         height: fullHeight ? "100%" : "auto",
         display: "flex",
         flexDirection: "column",
-        border: isVisibleBorder ? "border.main" : "none",
+        border: "none",
         boxShadow: "none",
         elevation: 0,
         variant: undefined,
diff --git a/src/common/components/Message/index.tsx b/src/common/components/Message/index.tsx
index 6350fbd..cbe9501 100644
--- a/src/common/components/Message/index.tsx
+++ b/src/common/components/Message/index.tsx
@@ -35,7 +35,7 @@ export const MessageContainer = (messageProps: Props) => {
           wordWrap: "break-word",
         }}
       >
-        <Typography variant="body2" color="textSecondary">
+        <Typography variant="body2" color="text.primary">
           {isSupportSender ? "Support" : "User"} •{" "}
           {new Date(timeStamp).toLocaleTimeString("il-IL", {
             hour: "2-digit",
diff --git a/src/common/components/MessageInput/index.tsx b/src/common/components/MessageInput/index.tsx
index 72a26f5..284d741 100644
--- a/src/common/components/MessageInput/index.tsx
+++ b/src/common/components/MessageInput/index.tsx
@@ -28,7 +28,7 @@ const MessageInput = ({ chatId, isSupport = true , isPopup = false }: MessageInp
       }}
     >
       {isSupport && (
-        <Box sx={{ display: "flex", alignSelf: "start", gap: 1 }}>
+        <Box sx={{ display: "flex", alignSelf: "start" ,padding:1}}>
           <Button
             color="note"
             variant={isNote ? "contained" : "outlined"}
@@ -47,7 +47,7 @@ const MessageInput = ({ chatId, isSupport = true , isPopup = false }: MessageInp
           display: "flex",
           alignItems: "end",
           flexDirection: "row",
-          paddingTop: 1,
+          padding: 1,
           width: "100%",
           position: "sticky",
           bottom: 0,
@@ -69,6 +69,7 @@ const MessageInput = ({ chatId, isSupport = true , isPopup = false }: MessageInp
           InputProps={{
             style: { overflow: "hidden" },
           }}
+          sx={{ backgroundColor: "bg.main"}}
           error={!!errors.message}
           helperText={errors.message ? errors.message.message : ""}
         />

From 24babaf44d27cc2d9cb6e24f3df4474175edbeff Mon Sep 17 00:00:00 2001
From: Ori <ori100no@gmail.com>
Date: Fri, 30 Aug 2024 10:34:25 +0300
Subject: [PATCH 201/242] styled message input

---
 src/common/components/MessageInput/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/common/components/MessageInput/index.tsx b/src/common/components/MessageInput/index.tsx
index 284d741..a61938b 100644
--- a/src/common/components/MessageInput/index.tsx
+++ b/src/common/components/MessageInput/index.tsx
@@ -58,7 +58,7 @@ const MessageInput = ({ chatId, isSupport = true , isPopup = false }: MessageInp
           fullWidth
           variant="outlined"
           size="small"
-          placeholder="Type a message..."
+          placeholder={isNote ? "Add a note" : "Type a message..."}
           id="message"
           autoComplete="message"
           autoFocus

From 98d9cea91b25f6bc3cdf22e8a81433e0e3c6f493 Mon Sep 17 00:00:00 2001
From: Ori <ori100no@gmail.com>
Date: Fri, 30 Aug 2024 11:02:46 +0300
Subject: [PATCH 202/242] styled the guide card

---
 .../(admin)/new_dashboard/guides/components/GuideCard/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/(admin)/new_dashboard/guides/components/GuideCard/index.tsx b/src/app/(admin)/new_dashboard/guides/components/GuideCard/index.tsx
index 9000abf..e2efb27 100644
--- a/src/app/(admin)/new_dashboard/guides/components/GuideCard/index.tsx
+++ b/src/app/(admin)/new_dashboard/guides/components/GuideCard/index.tsx
@@ -20,7 +20,7 @@ const GuideCard = ({ guide }: Props) => {
             <SupportIcon color="primary" sx={{ marginRight: theme.spacing(1) }} />
             <Typography variant="h6">{guide.title}</Typography>
           </Box>
-          <Typography variant="body2" color="textSecondary" mb={2}>
+          <Typography variant="body2" color="text.primary" mb={2} mt={1} ml={1}>
             Created at: {new Date(guide.createdAt).toLocaleDateString()}
           </Typography>
         </Box>

From 617955518bbb29b92fdd0843e22f5c1eb0e2dcb6 Mon Sep 17 00:00:00 2001
From: Ori <ori100no@gmail.com>
Date: Fri, 30 Aug 2024 11:16:56 +0300
Subject: [PATCH 203/242] added global text color styling

---
 src/util/theme/theme.ts | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/src/util/theme/theme.ts b/src/util/theme/theme.ts
index 6fc5e78..b7b7f35 100644
--- a/src/util/theme/theme.ts
+++ b/src/util/theme/theme.ts
@@ -107,6 +107,14 @@ const baselightTheme = createTheme({
         },
       },
     },
+    MuiInputLabel: {
+      styleOverrides: {
+        root: {
+          fontFamily: plusFont.style.fontFamily,
+          color: "#2A3547",
+        },
+      },
+    },
   },
 });
 

From 4e0d9d804b265ded018f3deb6b843ed68f3933dd Mon Sep 17 00:00:00 2001
From: Ori <ori100no@gmail.com>
Date: Fri, 30 Aug 2024 11:21:32 +0300
Subject: [PATCH 204/242] added global styling

---
 src/util/theme/theme.ts | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/util/theme/theme.ts b/src/util/theme/theme.ts
index b7b7f35..95fd2c6 100644
--- a/src/util/theme/theme.ts
+++ b/src/util/theme/theme.ts
@@ -110,11 +110,17 @@ const baselightTheme = createTheme({
     MuiInputLabel: {
       styleOverrides: {
         root: {
-          fontFamily: plusFont.style.fontFamily,
           color: "#2A3547",
         },
       },
     },
+    MuiTextField: {
+      styleOverrides: {
+        root: {
+          backgroundColor: "#f5f5f5",
+        },
+      },
+    },
   },
 });
 

From 57f7dfce7f9b069faa9f0f1bfdf48f60f0660285 Mon Sep 17 00:00:00 2001
From: Ori <ori100no@gmail.com>
Date: Fri, 30 Aug 2024 12:03:26 +0300
Subject: [PATCH 205/242] removed redundant lines

---
 src/app/(admin)/new_dashboard/guides/hooks/useAddReviewForm.ts | 2 +-
 src/common/components/MessageInput/index.tsx                   | 1 -
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/app/(admin)/new_dashboard/guides/hooks/useAddReviewForm.ts b/src/app/(admin)/new_dashboard/guides/hooks/useAddReviewForm.ts
index f536c51..2971ea5 100644
--- a/src/app/(admin)/new_dashboard/guides/hooks/useAddReviewForm.ts
+++ b/src/app/(admin)/new_dashboard/guides/hooks/useAddReviewForm.ts
@@ -5,7 +5,7 @@ import { useAddReview } from "@/hooks";
 const useAddReviewForm = (guideId: number) => {
   const [comment, setComment] = useState("");
   const [title, setTitle] = useState("");
-  const [stars, setStars] = useState(1);
+  const [stars, setStars] = useState(0);
   const [validationError, setValidationError] = useState<string | null>(null);
   const { mutate, isError, error, isPending, isSuccess } = useAddReview();
 
diff --git a/src/common/components/MessageInput/index.tsx b/src/common/components/MessageInput/index.tsx
index a61938b..bcb31df 100644
--- a/src/common/components/MessageInput/index.tsx
+++ b/src/common/components/MessageInput/index.tsx
@@ -69,7 +69,6 @@ const MessageInput = ({ chatId, isSupport = true , isPopup = false }: MessageInp
           InputProps={{
             style: { overflow: "hidden" },
           }}
-          sx={{ backgroundColor: "bg.main"}}
           error={!!errors.message}
           helperText={errors.message ? errors.message.message : ""}
         />

From 875e3113d12c2ce914effc9b73852cbc9e05be3e Mon Sep 17 00:00:00 2001
From: Ori <ori100no@gmail.com>
Date: Fri, 30 Aug 2024 17:45:16 +0300
Subject: [PATCH 206/242] aligned conracts sidebar to the right

---
 .../guides/hooks/useIsDashboardPage.ts        |  6 ++++
 src/app/(admin)/new_dashboard/layout.tsx      | 35 +++++++++++--------
 2 files changed, 26 insertions(+), 15 deletions(-)
 create mode 100644 src/app/(admin)/new_dashboard/guides/hooks/useIsDashboardPage.ts

diff --git a/src/app/(admin)/new_dashboard/guides/hooks/useIsDashboardPage.ts b/src/app/(admin)/new_dashboard/guides/hooks/useIsDashboardPage.ts
new file mode 100644
index 0000000..121b00a
--- /dev/null
+++ b/src/app/(admin)/new_dashboard/guides/hooks/useIsDashboardPage.ts
@@ -0,0 +1,6 @@
+import { usePathname } from "next/navigation";
+
+export const useIsDashboardPage = () => {
+  const pathname = usePathname();
+  return pathname === "/new_dashboard"; // TODO: change "new_dashboard" name when we have a landing page
+};
diff --git a/src/app/(admin)/new_dashboard/layout.tsx b/src/app/(admin)/new_dashboard/layout.tsx
index 55ffc45..7ddfee4 100644
--- a/src/app/(admin)/new_dashboard/layout.tsx
+++ b/src/app/(admin)/new_dashboard/layout.tsx
@@ -1,6 +1,10 @@
 "use client";
 import { styled, Container, Box } from "@mui/material";
 import Sidebar from "./shared/sidebar/Sidebar";
+import ContactSidebar from "./components/ContactSidebar";
+import ChatPopup from "./components/ChatPopup";
+import { useChat } from "@/app/hooks/useChat";
+import { useIsDashboardPage } from "./guides/hooks/useIsDashboardPage";
 
 const MainWrapper = styled("div")(() => ({
   display: "flex",
@@ -16,39 +20,40 @@ const PageWrapper = styled("div")(() => ({
   backgroundColor: "transparent",
 }));
 
+const RightSidebarWrapper = styled(Box)(() => ({
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "flex-end", 
+  gap: 2,
+}));
+
 export default function RootLayout({
   children,
 }: {
   children: React.ReactNode;
 }) {
+  const { selectedContact } = useChat();
+  const isDashboardPage = useIsDashboardPage();
+
   return (
     <MainWrapper className="mainwrapper">
-      {/* ------------------------------------------- */}
-      {/* Sidebar */}
-      {/* ------------------------------------------- */}
       <Sidebar isSidebarOpen={true} />
-      {/* ------------------------------------------- */}
-      {/* Main Wrapper */}
-      {/* ------------------------------------------- */}
+
       <PageWrapper className="page-wrapper">
-        {/* ------------------------------------------- */}
-        {/* PageContent */}
-        {/* ------------------------------------------- */}
         <Container
           maxWidth={false}
           sx={{
             paddingTop: "20px",
           }}
         >
-          {/* ------------------------------------------- */}
-          {/* Page Route */}
-          {/* ------------------------------------------- */}
           <Box sx={{ minHeight: "calc(100vh - 170px)" }}>{children}</Box>
-          {/* ------------------------------------------- */}
-          {/* End Page */}
-          {/* ------------------------------------------- */}
         </Container>
       </PageWrapper>
+
+      <RightSidebarWrapper>
+        <ContactSidebar isContactSidebarOpen={true} />
+        {!isDashboardPage && <ChatPopup selectedContact={selectedContact} />}
+      </RightSidebarWrapper>
     </MainWrapper>
   );
 }

From 22c90d309c46c82340b6113a836343700ef4e732 Mon Sep 17 00:00:00 2001
From: Ori <ori100no@gmail.com>
Date: Fri, 30 Aug 2024 17:46:03 +0300
Subject: [PATCH 207/242] made a contact side bar that is in the whole
 dashboard exacpt the chat page

---
 .../components/ChatPopup/index.tsx            | 59 ++++++------
 .../components/ContactSidebar/index.tsx       | 89 +++++++++++++++++++
 src/app/(admin)/new_dashboard/page.tsx        |  8 +-
 3 files changed, 115 insertions(+), 41 deletions(-)
 create mode 100644 src/app/(admin)/new_dashboard/components/ContactSidebar/index.tsx

diff --git a/src/app/(admin)/new_dashboard/components/ChatPopup/index.tsx b/src/app/(admin)/new_dashboard/components/ChatPopup/index.tsx
index 27e029d..9e1b006 100644
--- a/src/app/(admin)/new_dashboard/components/ChatPopup/index.tsx
+++ b/src/app/(admin)/new_dashboard/components/ChatPopup/index.tsx
@@ -2,7 +2,7 @@
 
 import React, { useState } from 'react';
 import { Box, IconButton, Paper, Typography } from '@mui/material';
-import { Chat, Close, Minimize } from '@mui/icons-material';
+import { Chat, Minimize } from '@mui/icons-material';
 import SupportMessageList from '../SupportMessageList';
 import MessageInput from '@/common/components/MessageInput';
 import { Contact } from '../../types';
@@ -21,62 +21,54 @@ const ChatPopup = ({ selectedContact }: Props) => {
   return (
     <Box
       sx={{
-        position: 'fixed',
-        bottom: 0,
-        right: 0,
-        display: 'flex',
-        justifyContent: 'flex-end',
-        alignItems: 'flex-end',
-        padding: 2,
-        boxSizing: 'border-box',
-        zIndex: 1000,
+        position: 'fixed', 
+        bottom: 20, 
+        right: 290, 
+        zIndex: 1500,
       }}
     >
-
-      {!isOpen &&(
-      <IconButton
-        color='primary'
-        onClick={toggleChat}
-        sx={{
-          backgroundColor: 'primary.main',
-          color: 'white',
-          '&:hover': { backgroundColor: 'primary.dark' },
-        }}
-      >
-        <Chat />
-      </IconButton>)}
+      {!isOpen && (
+        <IconButton
+          color='primary'
+          onClick={toggleChat}
+          sx={{
+            backgroundColor: 'primary.main',
+            color: 'white',
+            '&:hover': { backgroundColor: 'primary.dark' },
+          }}
+        >
+          <Chat />
+        </IconButton>
+      )}
 
       {isOpen && selectedContact && (
         <Paper
           elevation={6}
           sx={{
-            width: 400, 
-            height: 500, 
+            width: 400,
+            height: 500,
             display: 'flex',
             flexDirection: 'column',
-            marginLeft: 2,
             backgroundColor: 'background.paper',
             boxShadow: 1,
             borderRadius: 3,
             overflow: 'hidden',
-            zIndex: 1000,
           }}
         >
-
           <Box
             sx={{
               backgroundColor: 'primary.main',
-              color:'info.contrastText',
+              color: 'info.contrastText',
               padding: 1,
               display: 'flex',
               justifyContent: "space-between",
               alignItems: 'center',
             }}
           >
-           
-            <IconButton 
+            <IconButton
               onClick={toggleChat}
-              sx={{color: 'info.contrastText' ,mb:1}} >
+              sx={{ color: 'info.contrastText', mb: 1 }}
+            >
               <Minimize />
             </IconButton>
             <Typography variant="h6">{selectedContact.username}</Typography>
@@ -94,9 +86,8 @@ const ChatPopup = ({ selectedContact }: Props) => {
           </Box>
 
           <Box>
-            <MessageInput chatId={selectedContact.chatId} isPopup={true}/>
+            <MessageInput chatId={selectedContact.chatId} isPopup={true} />
           </Box>
-
         </Paper>
       )}
     </Box>
diff --git a/src/app/(admin)/new_dashboard/components/ContactSidebar/index.tsx b/src/app/(admin)/new_dashboard/components/ContactSidebar/index.tsx
new file mode 100644
index 0000000..f36d52f
--- /dev/null
+++ b/src/app/(admin)/new_dashboard/components/ContactSidebar/index.tsx
@@ -0,0 +1,89 @@
+"use client";
+import {
+    Box,
+    Drawer,
+    List,
+    ListItemButton,
+    ListItemAvatar,
+    Avatar,
+    ListItemText,
+  } from "@mui/material";
+  import { Contact } from "../../types";
+  import { useChat } from "@/app/hooks/useChat";
+  
+  interface Props {
+    isContactSidebarOpen: boolean;
+  }
+  
+  const ContactSidebar = ({ isContactSidebarOpen }: Props) => {
+    const sidebarWidth = "270px";
+    const { selectedContact, contacts, handleContactSelect } = useChat();
+  
+    const scrollbarStyles = {
+      "&::-webkit-scrollbar": {
+        width: "7px",
+      },
+      "&::-webkit-scrollbar-thumb": {
+        backgroundColor: "primary.main",
+        borderRadius: "15px",
+      },
+    };
+  
+    return (
+      <Box
+        sx={{
+          width: sidebarWidth,
+          flexShrink: 0,
+        }}
+      >
+        <Drawer
+          anchor="right"
+          open={isContactSidebarOpen}
+          variant="permanent"
+          PaperProps={{
+            sx: {
+              boxSizing: "border-box",
+              ...scrollbarStyles,
+              width: sidebarWidth,
+              backgroundColor: "primary.light",
+            },
+          }}
+        >
+          <List>
+            {contacts.length === 0 ? (
+              <Box sx={{ padding: "16px", textAlign: "center", color: "#883434" }}>
+                No chats yet!
+              </Box>
+            ) : (
+              contacts.map((contact, index) => (
+                <Box key={index} sx={{ padding: "8px 0" }}>
+                  <ListItemButton
+                    selected={selectedContact?.chatId === contact.chatId}
+                    onClick={() => handleContactSelect(contact)}
+                    sx={{
+                      backgroundColor:
+                        selectedContact?.chatId === contact.chatId
+                          ? "primary.main"
+                          : "primary.light",
+                      borderRadius: 1,
+                      marginRight: 0,
+                    }}
+                  >
+                    <ListItemAvatar>
+                      <Avatar
+                        src={"https://bootdey.com/img/Content/avatar/avatar2.png"} 
+                      />
+                    </ListItemAvatar>
+                    <ListItemText primary={contact.username} />
+                  </ListItemButton>
+                </Box>
+              ))
+            )}
+          </List>
+        </Drawer>
+      </Box>
+    );
+  };
+  
+  export default ContactSidebar;
+  
\ No newline at end of file
diff --git a/src/app/(admin)/new_dashboard/page.tsx b/src/app/(admin)/new_dashboard/page.tsx
index e4aface..57c8245 100644
--- a/src/app/(admin)/new_dashboard/page.tsx
+++ b/src/app/(admin)/new_dashboard/page.tsx
@@ -24,12 +24,6 @@ const Page = () => {
             padding: 0,
           }}
         >
-          {/* Contact List */}
-          <ContactList
-            contacts={contacts}
-            selectedContact={selectedContact}
-            onSelectContact={handleContactSelect}
-          />
 
           {/* Chat Container */}
           {selectedContact && (
@@ -37,7 +31,7 @@ const Page = () => {
               sx={{
                 display: "flex",
                 flexDirection: "column",
-                width: "70%",
+                width: "100%",
                 height: "100%",
                 paddingLeft: 2,
               }}

From a42d293071682d333b03b8a9a7882f1425bb58b4 Mon Sep 17 00:00:00 2001
From: Ori <ori100no@gmail.com>
Date: Fri, 30 Aug 2024 18:10:07 +0300
Subject: [PATCH 208/242] sidebar styling

---
 .../components/ContactSidebar/index.tsx          | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/app/(admin)/new_dashboard/components/ContactSidebar/index.tsx b/src/app/(admin)/new_dashboard/components/ContactSidebar/index.tsx
index f36d52f..4a7008f 100644
--- a/src/app/(admin)/new_dashboard/components/ContactSidebar/index.tsx
+++ b/src/app/(admin)/new_dashboard/components/ContactSidebar/index.tsx
@@ -7,6 +7,7 @@ import {
     ListItemAvatar,
     Avatar,
     ListItemText,
+    Typography,
   } from "@mui/material";
   import { Contact } from "../../types";
   import { useChat } from "@/app/hooks/useChat";
@@ -16,7 +17,7 @@ import {
   }
   
   const ContactSidebar = ({ isContactSidebarOpen }: Props) => {
-    const sidebarWidth = "270px";
+    const sidebarWidth = "230px";
     const { selectedContact, contacts, handleContactSelect } = useChat();
   
     const scrollbarStyles = {
@@ -34,6 +35,7 @@ import {
         sx={{
           width: sidebarWidth,
           flexShrink: 0,
+          whiteSpace: "nowrap",
         }}
       >
         <Drawer
@@ -45,26 +47,24 @@ import {
               boxSizing: "border-box",
               ...scrollbarStyles,
               width: sidebarWidth,
-              backgroundColor: "primary.light",
+              backgroundColor: "paper",
+              padding: "20px",
             },
           }}
         >
           <List>
+            <Typography variant="h4" mb={4}>Open chats</Typography>
             {contacts.length === 0 ? (
-              <Box sx={{ padding: "16px", textAlign: "center", color: "#883434" }}>
+              <Box sx={{ padding: "16px", textAlign: "center", color: "text.primary" }}>
                 No chats yet!
               </Box>
             ) : (
               contacts.map((contact, index) => (
-                <Box key={index} sx={{ padding: "8px 0" }}>
+                <Box key={index} >
                   <ListItemButton
                     selected={selectedContact?.chatId === contact.chatId}
                     onClick={() => handleContactSelect(contact)}
                     sx={{
-                      backgroundColor:
-                        selectedContact?.chatId === contact.chatId
-                          ? "primary.main"
-                          : "primary.light",
                       borderRadius: 1,
                       marginRight: 0,
                     }}

From 647c59e9dd1040aeecc4142680d384847d08fc17 Mon Sep 17 00:00:00 2001
From: Ori <ori100no@gmail.com>
Date: Fri, 30 Aug 2024 18:47:51 +0300
Subject: [PATCH 209/242] returned to previous colors

---
 .../components/ContactSidebar/index.tsx           |  3 +--
 .../new_dashboard/shared/sidebar/Sidebar.tsx      |  4 ++--
 src/util/theme/theme.ts                           | 15 ++++++++++++++-
 3 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/src/app/(admin)/new_dashboard/components/ContactSidebar/index.tsx b/src/app/(admin)/new_dashboard/components/ContactSidebar/index.tsx
index 4a7008f..5611a58 100644
--- a/src/app/(admin)/new_dashboard/components/ContactSidebar/index.tsx
+++ b/src/app/(admin)/new_dashboard/components/ContactSidebar/index.tsx
@@ -65,8 +65,7 @@ import {
                     selected={selectedContact?.chatId === contact.chatId}
                     onClick={() => handleContactSelect(contact)}
                     sx={{
-                      borderRadius: 1,
-                      marginRight: 0,
+                      borderRadius: 2,
                     }}
                   >
                     <ListItemAvatar>
diff --git a/src/app/(admin)/new_dashboard/shared/sidebar/Sidebar.tsx b/src/app/(admin)/new_dashboard/shared/sidebar/Sidebar.tsx
index 4cfd6da..9092f68 100644
--- a/src/app/(admin)/new_dashboard/shared/sidebar/Sidebar.tsx
+++ b/src/app/(admin)/new_dashboard/shared/sidebar/Sidebar.tsx
@@ -15,7 +15,7 @@ const DashboardSidebar = ({ isSidebarOpen }: ItemType) => {
       width: "7px",
     },
     "&::-webkit-scrollbar-thumb": {
-      backgroundColor: "primary.main",
+      backgroundColor: "paper",
       borderRadius: "15px",
     },
   };
@@ -58,7 +58,7 @@ const DashboardSidebar = ({ isSidebarOpen }: ItemType) => {
                 boxSizing: "border-box",
                 ...scrollbarStyles,
                 width: "270px",
-                backgroundColor: "primary.main",
+                backgroundColor: "paper",
               },
             }}
           >
diff --git a/src/util/theme/theme.ts b/src/util/theme/theme.ts
index 95fd2c6..0b52736 100644
--- a/src/util/theme/theme.ts
+++ b/src/util/theme/theme.ts
@@ -54,7 +54,7 @@ const baselightTheme = createTheme({
 
     text: {
       primary: "#2A3547",
-      secondary: "#FFFFFF",
+      secondary: "#2A3547",
       bold: "#2c2929",
     },
     action: {
@@ -121,6 +121,19 @@ const baselightTheme = createTheme({
         },
       },
     },
+    MuiListItemButton: {
+      styleOverrides: {
+        root: {
+          "&:hover": {
+            backgroundColor: "#2D52BD",
+          },
+          "&$selected": {
+            color: "#FFFFFF",
+            backgroundColor: "#2D52BD",
+          },
+        },
+      },
+    },
   },
 });
 

From daa4ed4cb449a5f1d16ca90693f973018d94e142 Mon Sep 17 00:00:00 2001
From: Tomer <tomermi123@gmail.com>
Date: Sat, 31 Aug 2024 12:17:47 +0300
Subject: [PATCH 210/242] Feat: Refactor useSearchGuides hook to include
 sorting functionality

---
 .../guides/hooks/useSearchGuides.ts           | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

diff --git a/src/app/(admin)/new_dashboard/guides/hooks/useSearchGuides.ts b/src/app/(admin)/new_dashboard/guides/hooks/useSearchGuides.ts
index bb39488..b9c1009 100644
--- a/src/app/(admin)/new_dashboard/guides/hooks/useSearchGuides.ts
+++ b/src/app/(admin)/new_dashboard/guides/hooks/useSearchGuides.ts
@@ -1,9 +1,11 @@
 import { useState } from "react";
 import { Guide } from "@/api/types/Guide";
+import { SelectChangeEvent } from "@mui/material";
 
 export const useSearchGuides = (initialGuides: Guide[]) => {
   const [searchQuery, setSearchQuery] = useState("");
   const [selectedTag, setSelectedTag] = useState("All");
+  const [sortCriteria, setSortCriteria] = useState<"rating" | "date">("rating");
 
   const filteredGuides = initialGuides.filter((guide) => {
     const matchesQuery = guide.title
@@ -12,7 +14,16 @@ export const useSearchGuides = (initialGuides: Guide[]) => {
     const matchesTag =
       selectedTag === "All" || guide.categories.includes(selectedTag);
     return matchesQuery && matchesTag;
-  });
+  })
+    .sort((a, b) => {
+      if (sortCriteria === "rating") {
+        const avgRatingA = a.reviews?.reduce((acc, review) => acc + review.rating, 0) ?? 1;
+        const avgRatingB = b.reviews?.reduce((acc, review) => acc + review.rating, 0) ?? 1;
+        return avgRatingB - avgRatingA;
+      } else {
+        return new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime();
+      }
+    });
 
   const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     setSearchQuery(event.target.value);
@@ -22,11 +33,17 @@ export const useSearchGuides = (initialGuides: Guide[]) => {
     setSelectedTag(value || "All");
   };
 
+  const handleSortChange = (event: SelectChangeEvent<string> ) => {
+    setSortCriteria(event.target.value as "rating" | "date");
+  };
+
   return {
     searchQuery,
     selectedTag,
+    sortCriteria,
     filteredGuides,
     handleSearchChange,
     handleTagChange,
+    handleSortChange,
   };
 };

From f9923527e9413f32edfcc44e98451394aec284a4 Mon Sep 17 00:00:00 2001
From: Tomer <tomermi123@gmail.com>
Date: Sat, 31 Aug 2024 12:18:27 +0300
Subject: [PATCH 211/242] Feat: Refactor useSearchGuides hook to include
 sorting functionality

---
 src/app/(admin)/new_dashboard/guides/page.tsx | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/app/(admin)/new_dashboard/guides/page.tsx b/src/app/(admin)/new_dashboard/guides/page.tsx
index 0b5be21..282e9ea 100644
--- a/src/app/(admin)/new_dashboard/guides/page.tsx
+++ b/src/app/(admin)/new_dashboard/guides/page.tsx
@@ -12,7 +12,15 @@ const GuidesListPage = () => {
   const { guides, isLoadingGuides, guidesError, isGuidesError, isGuidesSuccess } = useGuideItems();
   const { categories, error: issuesError, isLoading: isLoadingIssues } = useCategories();
 
-  const { searchQuery, selectedTag, filteredGuides, handleSearchChange, handleTagChange } =
+  const { 
+    searchQuery, 
+    selectedTag, 
+    filteredGuides, 
+    sortCriteria, 
+    handleSearchChange, 
+    handleTagChange, 
+    handleSortChange 
+  } =
     useSearchGuides(guides);
 
   return (
@@ -34,6 +42,8 @@ const GuidesListPage = () => {
                   selectedTag={selectedTag}
                   onTagChange={handleTagChange}
                   categories={["All", ...categories]}  
+                  sortCriteria={sortCriteria}
+                  handleSortChange={handleSortChange}
                 />
               </Box>
               <GuideList guideItems={filteredGuides} />

From 9a013eafbf8d9d4287c54270b1dd01578553a504 Mon Sep 17 00:00:00 2001
From: Tomer <tomermi123@gmail.com>
Date: Sat, 31 Aug 2024 12:18:46 +0300
Subject: [PATCH 212/242] feat: Add sorting functionality to SearchBar
 component

---
 .../guides/components/SearchBar/index.tsx     | 32 +++++++++++++++++--
 1 file changed, 30 insertions(+), 2 deletions(-)

diff --git a/src/app/(admin)/new_dashboard/guides/components/SearchBar/index.tsx b/src/app/(admin)/new_dashboard/guides/components/SearchBar/index.tsx
index 842f823..1087a66 100644
--- a/src/app/(admin)/new_dashboard/guides/components/SearchBar/index.tsx
+++ b/src/app/(admin)/new_dashboard/guides/components/SearchBar/index.tsx
@@ -1,4 +1,12 @@
-import { TextField, InputAdornment, Box, FormControl } from "@mui/material";
+import { 
+  TextField, 
+  InputAdornment, 
+  Box, 
+  FormControl, 
+  Select, 
+  MenuItem,
+  SelectChangeEvent
+} from "@mui/material";
 import SearchIcon from "@mui/icons-material/Search";
 import Autocomplete from "@mui/material/Autocomplete";
 
@@ -8,9 +16,19 @@ type Props = {
   selectedTag: string;
   onTagChange: (e: React.ChangeEvent<{}>, value: string | null) => void;
   categories: string[];
+  sortCriteria: "rating" | "date";
+  handleSortChange: (e: SelectChangeEvent<string>) => void;
 };
 
-const SearchBar = ({ searchQuery, onSearchChange, selectedTag, onTagChange, categories }: Props) => (
+const SearchBar = ({ 
+  searchQuery, 
+  onSearchChange, 
+  selectedTag, 
+  onTagChange, 
+  categories, 
+  sortCriteria, 
+  handleSortChange 
+}: Props) => (
   <Box display="flex" alignItems="center" justifyContent="space-between">
     <TextField
       fullWidth
@@ -42,6 +60,16 @@ const SearchBar = ({ searchQuery, onSearchChange, selectedTag, onTagChange, cate
         getOptionLabel={(option) => option}
       />
     </FormControl>
+    <FormControl variant="outlined" sx={{ ml: 2, minWidth: 150 }}>
+      <Select
+        value={sortCriteria}
+        onChange={handleSortChange}
+        displayEmpty
+      >
+        <MenuItem value="rating">Sort by Rating</MenuItem>
+        <MenuItem value="date">Sort by Date</MenuItem>
+      </Select>
+    </FormControl>
   </Box>
 );
 

From ce01ac7b3ceefebf5887900051829147dba16b04 Mon Sep 17 00:00:00 2001
From: Tomer <tomermi123@gmail.com>
Date: Sat, 31 Aug 2024 14:43:16 +0300
Subject: [PATCH 213/242] feat: Add SortCriteria Type and SortOptions Array to
 Guide types

---
 src/app/(admin)/new_dashboard/guides/types/index.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/app/(admin)/new_dashboard/guides/types/index.ts b/src/app/(admin)/new_dashboard/guides/types/index.ts
index 3f76fc5..8037824 100644
--- a/src/app/(admin)/new_dashboard/guides/types/index.ts
+++ b/src/app/(admin)/new_dashboard/guides/types/index.ts
@@ -5,3 +5,6 @@ export type Guide = {
   likes: number;
   dislikes: number;
 };
+
+export type SortCriteria = "rating" | "date";
+export const sortOptions = ["rating", "date"];
\ No newline at end of file

From 0af794db7485795733c9e59d6da8e5f8353bf8ca Mon Sep 17 00:00:00 2001
From: Tomer <tomermi123@gmail.com>
Date: Sat, 31 Aug 2024 14:43:30 +0300
Subject: [PATCH 214/242] feat: Add sortGuides.ts file for sorting
 functionality

---
 .../new_dashboard/guides/hooks/sortGuides.ts       | 14 ++++++++++++++
 1 file changed, 14 insertions(+)
 create mode 100644 src/app/(admin)/new_dashboard/guides/hooks/sortGuides.ts

diff --git a/src/app/(admin)/new_dashboard/guides/hooks/sortGuides.ts b/src/app/(admin)/new_dashboard/guides/hooks/sortGuides.ts
new file mode 100644
index 0000000..4b71a4c
--- /dev/null
+++ b/src/app/(admin)/new_dashboard/guides/hooks/sortGuides.ts
@@ -0,0 +1,14 @@
+import { Guide } from "@/api/types/Guide";
+
+export const sortByCriteria = (guides: Guide[], sortCriteria: string): Guide[] => {
+    return guides.sort((a, b) => {
+        if (sortCriteria === "rating") {
+            const avgRatingA = a.reviews?.reduce((acc, review) => acc + review.rating, 0) ?? 1;
+            const avgRatingB = b.reviews?.reduce((acc, review) => acc + review.rating, 0) ?? 1;
+            return avgRatingB - avgRatingA;
+        } else if (sortCriteria === "date") {
+            return new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime();
+        }
+        return 0;
+    });
+};
\ No newline at end of file

From 81a3fc20f0f1176893fb9151608b13a1c445f2f1 Mon Sep 17 00:00:00 2001
From: Tomer <tomermi123@gmail.com>
Date: Sat, 31 Aug 2024 14:43:47 +0300
Subject: [PATCH 215/242] feat: Refactor useSearchGuides hook to include
 sorting functionality

---
 .../guides/hooks/useSearchGuides.ts           | 34 ++++++++-----------
 1 file changed, 15 insertions(+), 19 deletions(-)

diff --git a/src/app/(admin)/new_dashboard/guides/hooks/useSearchGuides.ts b/src/app/(admin)/new_dashboard/guides/hooks/useSearchGuides.ts
index b9c1009..7e77b93 100644
--- a/src/app/(admin)/new_dashboard/guides/hooks/useSearchGuides.ts
+++ b/src/app/(admin)/new_dashboard/guides/hooks/useSearchGuides.ts
@@ -1,29 +1,25 @@
 import { useState } from "react";
 import { Guide } from "@/api/types/Guide";
 import { SelectChangeEvent } from "@mui/material";
+import { SortCriteria } from "../types";
+import { sortByCriteria } from "./sortGuides";
 
 export const useSearchGuides = (initialGuides: Guide[]) => {
   const [searchQuery, setSearchQuery] = useState("");
   const [selectedTag, setSelectedTag] = useState("All");
-  const [sortCriteria, setSortCriteria] = useState<"rating" | "date">("rating");
+  const [sortCriteria, setSortCriteria] = useState<SortCriteria>("rating");
 
-  const filteredGuides = initialGuides.filter((guide) => {
-    const matchesQuery = guide.title
-      .toLowerCase()
-      .includes(searchQuery.toLowerCase());
-    const matchesTag =
-      selectedTag === "All" || guide.categories.includes(selectedTag);
-    return matchesQuery && matchesTag;
-  })
-    .sort((a, b) => {
-      if (sortCriteria === "rating") {
-        const avgRatingA = a.reviews?.reduce((acc, review) => acc + review.rating, 0) ?? 1;
-        const avgRatingB = b.reviews?.reduce((acc, review) => acc + review.rating, 0) ?? 1;
-        return avgRatingB - avgRatingA;
-      } else {
-        return new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime();
-      }
-    });
+  const filteredGuides = sortByCriteria(
+    initialGuides.filter((guide) => {
+      const matchesQuery = guide.title
+        .toLowerCase()
+        .includes(searchQuery.toLowerCase());
+      const matchesTag =
+        selectedTag === "All" || guide.categories.includes(selectedTag);
+      return matchesQuery && matchesTag;
+    }),
+    sortCriteria
+  );
 
   const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     setSearchQuery(event.target.value);
@@ -34,7 +30,7 @@ export const useSearchGuides = (initialGuides: Guide[]) => {
   };
 
   const handleSortChange = (event: SelectChangeEvent<string> ) => {
-    setSortCriteria(event.target.value as "rating" | "date");
+    setSortCriteria(event.target.value as SortCriteria);
   };
 
   return {

From 86bffa12e1c354b18920497a774fa955d6240f1d Mon Sep 17 00:00:00 2001
From: Tomer <tomermi123@gmail.com>
Date: Sat, 31 Aug 2024 14:45:18 +0300
Subject: [PATCH 216/242] Refactor: Use sorting functionality and array of
 sorting options to sort the guides array we get from the hook

---
 .../guides/components/SearchBar/index.tsx            | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/app/(admin)/new_dashboard/guides/components/SearchBar/index.tsx b/src/app/(admin)/new_dashboard/guides/components/SearchBar/index.tsx
index 1087a66..9681fa1 100644
--- a/src/app/(admin)/new_dashboard/guides/components/SearchBar/index.tsx
+++ b/src/app/(admin)/new_dashboard/guides/components/SearchBar/index.tsx
@@ -9,6 +9,7 @@ import {
 } from "@mui/material";
 import SearchIcon from "@mui/icons-material/Search";
 import Autocomplete from "@mui/material/Autocomplete";
+import { SortCriteria, sortOptions } from "../../types";
 
 type Props = {
   searchQuery: string;
@@ -16,10 +17,11 @@ type Props = {
   selectedTag: string;
   onTagChange: (e: React.ChangeEvent<{}>, value: string | null) => void;
   categories: string[];
-  sortCriteria: "rating" | "date";
+  sortCriteria: SortCriteria;
   handleSortChange: (e: SelectChangeEvent<string>) => void;
 };
 
+
 const SearchBar = ({ 
   searchQuery, 
   onSearchChange, 
@@ -62,12 +64,14 @@ const SearchBar = ({
     </FormControl>
     <FormControl variant="outlined" sx={{ ml: 2, minWidth: 150 }}>
       <Select
-        value={sortCriteria}
         onChange={handleSortChange}
         displayEmpty
       >
-        <MenuItem value="rating">Sort by Rating</MenuItem>
-        <MenuItem value="date">Sort by Date</MenuItem>
+        {sortOptions.map((option) => (
+          <MenuItem key={option} value={option}>
+            Sort by {option}
+          </MenuItem>
+        ))}
       </Select>
     </FormControl>
   </Box>

From 909e55f930caebb6af818a233f30bad47f6da515 Mon Sep 17 00:00:00 2001
From: Tomer <tomermi123@gmail.com>
Date: Sat, 31 Aug 2024 18:41:12 +0300
Subject: [PATCH 217/242] feat: Add calculateAvgRating utility function

---
 src/util/calculateAvgRating.ts | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 src/util/calculateAvgRating.ts

diff --git a/src/util/calculateAvgRating.ts b/src/util/calculateAvgRating.ts
new file mode 100644
index 0000000..4d7b6d3
--- /dev/null
+++ b/src/util/calculateAvgRating.ts
@@ -0,0 +1,5 @@
+import { Guide } from "@/api/types/Guide";
+
+export const calculateAvgRating = (guide: Guide): number => {
+  return guide.reviews?.reduce((acc, review) => acc + review.rating, 0) ?? 1;
+};
\ No newline at end of file

From aca848fe9a1dc5ea397d90d9fe2742431694c302 Mon Sep 17 00:00:00 2001
From: Tomer <tomermi123@gmail.com>
Date: Sat, 31 Aug 2024 18:42:24 +0300
Subject: [PATCH 218/242] Refactor `sortGuides.ts` to use calculateAvgRating
 utility function

---
 src/app/(admin)/new_dashboard/guides/hooks/sortGuides.ts | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/app/(admin)/new_dashboard/guides/hooks/sortGuides.ts b/src/app/(admin)/new_dashboard/guides/hooks/sortGuides.ts
index 4b71a4c..c26ebbf 100644
--- a/src/app/(admin)/new_dashboard/guides/hooks/sortGuides.ts
+++ b/src/app/(admin)/new_dashboard/guides/hooks/sortGuides.ts
@@ -1,13 +1,14 @@
 import { Guide } from "@/api/types/Guide";
+import { calculateAvgRating } from "@/util/calculateAvgRating";
 
 export const sortByCriteria = (guides: Guide[], sortCriteria: string): Guide[] => {
-    return guides.sort((a, b) => {
+    return guides.sort((guide1, guide2) => {
         if (sortCriteria === "rating") {
-            const avgRatingA = a.reviews?.reduce((acc, review) => acc + review.rating, 0) ?? 1;
-            const avgRatingB = b.reviews?.reduce((acc, review) => acc + review.rating, 0) ?? 1;
+            const avgRatingA = calculateAvgRating(guide1);
+            const avgRatingB = calculateAvgRating(guide2);
             return avgRatingB - avgRatingA;
         } else if (sortCriteria === "date") {
-            return new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime();
+            return new Date(guide2.createdAt).getTime() - new Date(guide1.createdAt).getTime();
         }
         return 0;
     });

From 59a023c1fcc440962342c04010e5a3016c0cbe53 Mon Sep 17 00:00:00 2001
From: Tomer <tomermi123@gmail.com>
Date: Sat, 31 Aug 2024 18:42:42 +0300
Subject: [PATCH 219/242] Refactor useSearchGuides hook to include sorting
 functionality

---
 .../guides/hooks/useSearchGuides.ts           | 23 +++++++++----------
 1 file changed, 11 insertions(+), 12 deletions(-)

diff --git a/src/app/(admin)/new_dashboard/guides/hooks/useSearchGuides.ts b/src/app/(admin)/new_dashboard/guides/hooks/useSearchGuides.ts
index 7e77b93..41c8c6e 100644
--- a/src/app/(admin)/new_dashboard/guides/hooks/useSearchGuides.ts
+++ b/src/app/(admin)/new_dashboard/guides/hooks/useSearchGuides.ts
@@ -9,17 +9,16 @@ export const useSearchGuides = (initialGuides: Guide[]) => {
   const [selectedTag, setSelectedTag] = useState("All");
   const [sortCriteria, setSortCriteria] = useState<SortCriteria>("rating");
 
-  const filteredGuides = sortByCriteria(
-    initialGuides.filter((guide) => {
-      const matchesQuery = guide.title
-        .toLowerCase()
-        .includes(searchQuery.toLowerCase());
-      const matchesTag =
-        selectedTag === "All" || guide.categories.includes(selectedTag);
-      return matchesQuery && matchesTag;
-    }),
-    sortCriteria
-  );
+  const filteredGuides = initialGuides.filter((guide) => {
+    const matchesQuery = guide.title
+      .toLowerCase()
+      .includes(searchQuery.toLowerCase());
+    const matchesTag =
+      selectedTag === "All" || guide.categories.includes(selectedTag);
+    return matchesQuery && matchesTag;
+  });
+
+  const sortedAndFilteredGuides = sortByCriteria(filteredGuides, sortCriteria);
 
   const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     setSearchQuery(event.target.value);
@@ -37,7 +36,7 @@ export const useSearchGuides = (initialGuides: Guide[]) => {
     searchQuery,
     selectedTag,
     sortCriteria,
-    filteredGuides,
+    filteredGuides: sortedAndFilteredGuides,
     handleSearchChange,
     handleTagChange,
     handleSortChange,

From 01bc05a6bbf414e11d60b2ad87004316c2726b77 Mon Sep 17 00:00:00 2001
From: Ori <ori100no@gmail.com>
Date: Sat, 31 Aug 2024 22:26:34 +0300
Subject: [PATCH 220/242] Refactor ChatPopup component to use isOpen prop and
 setIsOpen callback

---
 .../new_dashboard/components/ChatPopup/index.tsx       |  6 ++++--
 .../(admin)/new_dashboard/hooks/useIsChatPopupOpen.ts  | 10 ++++++++++
 src/app/(admin)/new_dashboard/layout.tsx               |  6 ++++--
 src/util/theme/theme.ts                                |  7 -------
 4 files changed, 18 insertions(+), 11 deletions(-)
 create mode 100644 src/app/(admin)/new_dashboard/hooks/useIsChatPopupOpen.ts

diff --git a/src/app/(admin)/new_dashboard/components/ChatPopup/index.tsx b/src/app/(admin)/new_dashboard/components/ChatPopup/index.tsx
index 9e1b006..aab9e38 100644
--- a/src/app/(admin)/new_dashboard/components/ChatPopup/index.tsx
+++ b/src/app/(admin)/new_dashboard/components/ChatPopup/index.tsx
@@ -9,10 +9,12 @@ import { Contact } from '../../types';
 
 interface Props {
   selectedContact: Contact | null;
+  isOpen: boolean;
+  setIsOpen: (isOpen: boolean) => void;
 }
 
-const ChatPopup = ({ selectedContact }: Props) => {
-  const [isOpen, setIsOpen] = useState(false);
+const ChatPopup = ({ selectedContact, setIsOpen,isOpen }: Props) => {
+  
 
   const toggleChat = () => {
     setIsOpen(!isOpen);
diff --git a/src/app/(admin)/new_dashboard/hooks/useIsChatPopupOpen.ts b/src/app/(admin)/new_dashboard/hooks/useIsChatPopupOpen.ts
new file mode 100644
index 0000000..d9b8d5a
--- /dev/null
+++ b/src/app/(admin)/new_dashboard/hooks/useIsChatPopupOpen.ts
@@ -0,0 +1,10 @@
+import { useState } from "react";
+
+export const useIsChatPopupOpen = () => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return {
+    isOpen,
+    setIsOpen,
+  };
+};
diff --git a/src/app/(admin)/new_dashboard/layout.tsx b/src/app/(admin)/new_dashboard/layout.tsx
index 7ddfee4..243784d 100644
--- a/src/app/(admin)/new_dashboard/layout.tsx
+++ b/src/app/(admin)/new_dashboard/layout.tsx
@@ -5,6 +5,7 @@ import ContactSidebar from "./components/ContactSidebar";
 import ChatPopup from "./components/ChatPopup";
 import { useChat } from "@/app/hooks/useChat";
 import { useIsDashboardPage } from "./guides/hooks/useIsDashboardPage";
+import { useIsChatPopupOpen } from "./hooks/useIsChatPopupOpen";
 
 const MainWrapper = styled("div")(() => ({
   display: "flex",
@@ -34,6 +35,7 @@ export default function RootLayout({
 }) {
   const { selectedContact } = useChat();
   const isDashboardPage = useIsDashboardPage();
+  const {isOpen ,setIsOpen} = useIsChatPopupOpen();
 
   return (
     <MainWrapper className="mainwrapper">
@@ -51,8 +53,8 @@ export default function RootLayout({
       </PageWrapper>
 
       <RightSidebarWrapper>
-        <ContactSidebar isContactSidebarOpen={true} />
-        {!isDashboardPage && <ChatPopup selectedContact={selectedContact} />}
+        {(isOpen || isDashboardPage) && <ContactSidebar isContactSidebarOpen={true} />}
+        {!isDashboardPage && <ChatPopup isOpen={isOpen} setIsOpen={setIsOpen} selectedContact={selectedContact} />}
       </RightSidebarWrapper>
     </MainWrapper>
   );
diff --git a/src/util/theme/theme.ts b/src/util/theme/theme.ts
index 0b52736..4427164 100644
--- a/src/util/theme/theme.ts
+++ b/src/util/theme/theme.ts
@@ -114,13 +114,6 @@ const baselightTheme = createTheme({
         },
       },
     },
-    MuiTextField: {
-      styleOverrides: {
-        root: {
-          backgroundColor: "#f5f5f5",
-        },
-      },
-    },
     MuiListItemButton: {
       styleOverrides: {
         root: {

From f85166318719d89cb34e6cf457525ee85370bc6a Mon Sep 17 00:00:00 2001
From: Ori <ori100no@gmail.com>
Date: Sat, 31 Aug 2024 22:39:53 +0300
Subject: [PATCH 221/242] added animations

---
 .../(admin)/new_dashboard/components/ChatPopup/index.tsx | 9 +++++++--
 .../new_dashboard/components/ContactSidebar/index.tsx    | 3 +++
 src/app/(admin)/new_dashboard/layout.tsx                 | 2 +-
 3 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/app/(admin)/new_dashboard/components/ChatPopup/index.tsx b/src/app/(admin)/new_dashboard/components/ChatPopup/index.tsx
index aab9e38..213e610 100644
--- a/src/app/(admin)/new_dashboard/components/ChatPopup/index.tsx
+++ b/src/app/(admin)/new_dashboard/components/ChatPopup/index.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import React, { useState } from 'react';
-import { Box, IconButton, Paper, Typography } from '@mui/material';
+import { Box, IconButton, Paper, Typography,Slide } from '@mui/material';
 import { Chat, Minimize } from '@mui/icons-material';
 import SupportMessageList from '../SupportMessageList';
 import MessageInput from '@/common/components/MessageInput';
@@ -21,6 +21,7 @@ const ChatPopup = ({ selectedContact, setIsOpen,isOpen }: Props) => {
   };
 
   return (
+    
     <Box
       sx={{
         position: 'fixed', 
@@ -42,8 +43,9 @@ const ChatPopup = ({ selectedContact, setIsOpen,isOpen }: Props) => {
           <Chat />
         </IconButton>
       )}
-
+      
       {isOpen && selectedContact && (
+        <Slide direction="up" in={isOpen} mountOnEnter unmountOnExit>
         <Paper
           elevation={6}
           sx={{
@@ -91,8 +93,11 @@ const ChatPopup = ({ selectedContact, setIsOpen,isOpen }: Props) => {
             <MessageInput chatId={selectedContact.chatId} isPopup={true} />
           </Box>
         </Paper>
+        </Slide>
       )}
+      
     </Box>
+    
   );
 };
 
diff --git a/src/app/(admin)/new_dashboard/components/ContactSidebar/index.tsx b/src/app/(admin)/new_dashboard/components/ContactSidebar/index.tsx
index 5611a58..43eef79 100644
--- a/src/app/(admin)/new_dashboard/components/ContactSidebar/index.tsx
+++ b/src/app/(admin)/new_dashboard/components/ContactSidebar/index.tsx
@@ -8,6 +8,7 @@ import {
     Avatar,
     ListItemText,
     Typography,
+    Slide,
   } from "@mui/material";
   import { Contact } from "../../types";
   import { useChat } from "@/app/hooks/useChat";
@@ -31,6 +32,7 @@ import {
     };
   
     return (
+      <Slide direction="left" in={isContactSidebarOpen} mountOnEnter unmountOnExit>
       <Box
         sx={{
           width: sidebarWidth,
@@ -81,6 +83,7 @@ import {
           </List>
         </Drawer>
       </Box>
+      </Slide>
     );
   };
   
diff --git a/src/app/(admin)/new_dashboard/layout.tsx b/src/app/(admin)/new_dashboard/layout.tsx
index 243784d..7b761ea 100644
--- a/src/app/(admin)/new_dashboard/layout.tsx
+++ b/src/app/(admin)/new_dashboard/layout.tsx
@@ -53,7 +53,7 @@ export default function RootLayout({
       </PageWrapper>
 
       <RightSidebarWrapper>
-        {(isOpen || isDashboardPage) && <ContactSidebar isContactSidebarOpen={true} />}
+        {(isOpen || isDashboardPage) && <ContactSidebar isContactSidebarOpen={isOpen} />}
         {!isDashboardPage && <ChatPopup isOpen={isOpen} setIsOpen={setIsOpen} selectedContact={selectedContact} />}
       </RightSidebarWrapper>
     </MainWrapper>

From c8d70dff2b7219a74d38cdd1d290e01e15571d26 Mon Sep 17 00:00:00 2001
From: Ori <ori100no@gmail.com>
Date: Sat, 31 Aug 2024 23:46:24 +0300
Subject: [PATCH 222/242] Refactor ChatHeader component to include loading
 state and handleClicked function

---
 .../components/ChatHeader/index.tsx           |  87 +++++---
 .../guides/hooks/useIsDashboardPage.ts        |  10 +-
 src/app/(admin)/new_dashboard/layout.tsx      |   2 +-
 src/app/(public)/login/page.tsx               | 204 ++++++++++--------
 src/util/theme/theme.ts                       | 122 +++++++----
 5 files changed, 260 insertions(+), 165 deletions(-)

diff --git a/src/app/(admin)/new_dashboard/components/ChatHeader/index.tsx b/src/app/(admin)/new_dashboard/components/ChatHeader/index.tsx
index 665beeb..808140a 100644
--- a/src/app/(admin)/new_dashboard/components/ChatHeader/index.tsx
+++ b/src/app/(admin)/new_dashboard/components/ChatHeader/index.tsx
@@ -1,8 +1,15 @@
-import { Box, Typography, Button } from "@mui/material";
+import {
+  Box,
+  Typography,
+  Button,
+  Backdrop,
+  CircularProgress,
+} from "@mui/material";
 import SmartToyIcon from "@mui/icons-material/SmartToy";
 import SnoozeIcon from "@mui/icons-material/Snooze";
 import { Contact } from "../../types";
 import { useGuide } from "./hooks/useGuide";
+import { useState } from "react";
 
 type Props = {
   selectedContact: Contact | null;
@@ -10,39 +17,55 @@ type Props = {
 
 const ChatHeader = ({ selectedContact }: Props) => {
   const { handleGenerateGuide } = useGuide();
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleClicked = (selectedContact: Contact) => {
+    setIsLoading(true);
+    handleGenerateGuide(selectedContact.chatId);
+  };
+
   return (
-    <Box
-      sx={{
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "space-between",
-        paddingBottom: 1,
-        marginBottom: 2,
-        borderBottom: "1px solid",
-        borderColor: "divider",
-      }}
-    >
-      {selectedContact && (
-        <>
-          <Typography variant="h6">{selectedContact.username}</Typography>
-          <Box
-            onClick={() => handleGenerateGuide(selectedContact.chatId)}
-            sx={{ display: "flex", alignItems: "center", gap: 1 }}
-          >
-            <Button variant="contained" startIcon={<SmartToyIcon />}>
-              Generate Guide
-            </Button>
-            <Button
-              variant="outlined"
-              startIcon={<SnoozeIcon />}
-              sx={{ textTransform: "none" }}
+    <>
+      <Backdrop
+        sx={(theme) => ({ color: "#fff", zIndex: theme.zIndex.drawer + 1 })}
+        open={isLoading}
+      >
+        <CircularProgress color="inherit" />
+      </Backdrop>
+      <Box
+        sx={{
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          paddingBottom: 1,
+          marginBottom: 2,
+          borderBottom: "1px solid",
+          borderColor: "divider",
+        }}
+      >
+        {}
+        {selectedContact && (
+          <>
+            <Typography variant="h6">{selectedContact.username}</Typography>
+            <Box
+              onClick={() => handleClicked(selectedContact)}
+              sx={{ display: "flex", alignItems: "center", gap: 1 }}
             >
-              Snooze
-            </Button>
-          </Box>
-        </>
-      )}
-    </Box>
+              <Button variant="contained" startIcon={<SmartToyIcon />}>
+                Generate Guide
+              </Button>
+              <Button
+                variant="outlined"
+                startIcon={<SnoozeIcon />}
+                sx={{ textTransform: "none" }}
+              >
+                Snooze
+              </Button>
+            </Box>
+          </>
+        )}
+      </Box>
+    </>
   );
 };
 
diff --git a/src/app/(admin)/new_dashboard/guides/hooks/useIsDashboardPage.ts b/src/app/(admin)/new_dashboard/guides/hooks/useIsDashboardPage.ts
index 121b00a..9cab2b5 100644
--- a/src/app/(admin)/new_dashboard/guides/hooks/useIsDashboardPage.ts
+++ b/src/app/(admin)/new_dashboard/guides/hooks/useIsDashboardPage.ts
@@ -1,6 +1,14 @@
 import { usePathname } from "next/navigation";
+import { useEffect, useState } from "react";
 
 export const useIsDashboardPage = () => {
   const pathname = usePathname();
-  return pathname === "/new_dashboard"; // TODO: change "new_dashboard" name when we have a landing page
+
+  const [isDashboardPage, setIsDashboardPage] = useState(false);
+
+  useEffect(() => {
+    setIsDashboardPage(pathname === "/new_dashboard");
+    console.log(isDashboardPage, "isDashboardPage");
+  }, [isDashboardPage,pathname]);
+  return isDashboardPage;
 };
diff --git a/src/app/(admin)/new_dashboard/layout.tsx b/src/app/(admin)/new_dashboard/layout.tsx
index 7b761ea..fa961a0 100644
--- a/src/app/(admin)/new_dashboard/layout.tsx
+++ b/src/app/(admin)/new_dashboard/layout.tsx
@@ -53,7 +53,7 @@ export default function RootLayout({
       </PageWrapper>
 
       <RightSidebarWrapper>
-        {(isOpen || isDashboardPage) && <ContactSidebar isContactSidebarOpen={isOpen} />}
+        {(isOpen || isDashboardPage) && <ContactSidebar isContactSidebarOpen={isDashboardPage ? true : isOpen} />}
         {!isDashboardPage && <ChatPopup isOpen={isOpen} setIsOpen={setIsOpen} selectedContact={selectedContact} />}
       </RightSidebarWrapper>
     </MainWrapper>
diff --git a/src/app/(public)/login/page.tsx b/src/app/(public)/login/page.tsx
index 32deec6..935101a 100644
--- a/src/app/(public)/login/page.tsx
+++ b/src/app/(public)/login/page.tsx
@@ -8,7 +8,7 @@ import Box from "@mui/material/Box";
 import Grid from "@mui/material/Grid";
 import LockOutlinedIcon from "@mui/icons-material/LockOutlined";
 import Typography from "@mui/material/Typography";
-import { Alert } from "@mui/material";
+import { Alert, Backdrop, CircularProgress } from "@mui/material";
 import useLoginForm from "./hooks/useLoginForm";
 import { LoadingButton } from "@mui/lab";
 import PageContainer from "@/components/PageContainer";
@@ -18,108 +18,124 @@ const Login = () => {
     useLoginForm();
 
   return (
-    <PageContainer title="Login">
-      <Grid container component="main" sx={{ height: "100vh" }}>
-        <Grid
-          item
-          xs={false}
-          sm={4}
-          md={7}
-          sx={{
-            backgroundImage: 'url("https://i.imgur.com/YNj4zoE.png")',
-            backgroundColor: (t) =>
-              t.palette.mode === "light"
-                ? t.palette.grey[50]
-                : t.palette.grey[900],
-            backgroundSize: "cover",
-            backgroundPosition: "left",
-          }}
-        />
-        <Grid item xs={12} sm={8} md={5} component={Paper} elevation={6} square>
-          <Box
+    <>
+      <Backdrop
+        sx={(theme) => ({ color: "#fff", zIndex: theme.zIndex.drawer + 1 })}
+        open={isPending}
+      >
+        <CircularProgress color="inherit" />
+      </Backdrop>
+      <PageContainer title="Login">
+        <Grid container component="main" sx={{ height: "100vh" }}>
+          <Grid
+            item
+            xs={false}
+            sm={4}
+            md={7}
             sx={{
-              my: 8,
-              mx: 4,
-              display: "flex",
-              flexDirection: "column",
-              alignItems: "center",
+              backgroundImage: 'url("https://i.imgur.com/YNj4zoE.png")',
+              backgroundColor: (t) =>
+                t.palette.mode === "light"
+                  ? t.palette.grey[50]
+                  : t.palette.grey[900],
+              backgroundSize: "cover",
+              backgroundPosition: "left",
             }}
+          />
+          <Grid
+            item
+            xs={12}
+            sm={8}
+            md={5}
+            component={Paper}
+            elevation={6}
+            square
           >
-            <Avatar sx={{ m: 1, bgcolor: "secondary.main" }}>
-              <LockOutlinedIcon />
-            </Avatar>
-            <Typography component="h1" variant="h5">
-              Sign in
-            </Typography>
-            {isError && (
-              <Alert severity="error" sx={{ mt: 2, alignItems: "center" }}>
-                {error?.message}
-              </Alert>
-            )}
             <Box
-              component="form"
-              noValidate
-              onSubmit={handleSubmit}
-              sx={{ mt: 1 }}
+              sx={{
+                my: 8,
+                mx: 4,
+                display: "flex",
+                flexDirection: "column",
+                alignItems: "center",
+              }}
             >
-              <TextField
-                margin="normal"
-                required
-                fullWidth
-                id="username"
-                label="Username"
-                autoComplete="username"
-                autoFocus
-                {...register("username")}
-                error={!!errors.username}
-                helperText={errors.username?.message}
-                sx={{
-                  "& .MuiFormHelperText-root.Mui-error": {
-                    position: "absolute",
-                    top: "100%",
-                  },
-                }}
-              />
-              <TextField
-                margin="normal"
-                required
-                fullWidth
-                label="Password"
-                type="password"
-                id="password"
-                autoComplete="current-password"
-                {...register("password")}
-                error={!!errors.password}
-                helperText={errors.password?.message}
-                sx={{
-                  "& .MuiFormHelperText-root.Mui-error": {
-                    position: "absolute",
-                    top: "100%",
-                  },
-                }}
-              />
-              <LoadingButton
-                type="submit"
-                loading={isPending}
-                fullWidth
-                disabled={!isValid}
-                variant="contained"
-                sx={{ mt: 3, mb: 2 }}
+              <Avatar sx={{ m: 1, bgcolor: "secondary.main" }}>
+                <LockOutlinedIcon />
+              </Avatar>
+              <Typography component="h1" variant="h5">
+                Sign in
+              </Typography>
+              {isError && (
+                <Alert severity="error" sx={{ mt: 2, alignItems: "center" }}>
+                  {error?.message}
+                </Alert>
+              )}
+              <Box
+                component="form"
+                noValidate
+                onSubmit={handleSubmit}
+                sx={{ mt: 1 }}
               >
-                Sign In
-              </LoadingButton>
-              <Grid container>
-                <Grid item>
-                  <Link href="signup" variant="body2">
-                    {"Don't have an account? Sign Up"}
-                  </Link>
+                <TextField
+                  margin="normal"
+                  required
+                  fullWidth
+                  id="username"
+                  label="Username"
+                  autoComplete="username"
+                  autoFocus
+                  {...register("username")}
+                  error={!!errors.username}
+                  helperText={errors.username?.message}
+                  sx={{
+                    "& .MuiFormHelperText-root.Mui-error": {
+                      position: "absolute",
+                      top: "100%",
+                    },
+                  }}
+                />
+                <TextField
+                  margin="normal"
+                  required
+                  fullWidth
+                  label="Password"
+                  type="password"
+                  id="password"
+                  autoComplete="current-password"
+                  {...register("password")}
+                  error={!!errors.password}
+                  helperText={errors.password?.message}
+                  sx={{
+                    "& .MuiFormHelperText-root.Mui-error": {
+                      position: "absolute",
+                      top: "100%",
+                    },
+                  }}
+                />
+                <LoadingButton
+                  type="submit"
+                  loading={isPending}
+                  fullWidth
+                  disabled={!isValid}
+                  variant="contained"
+                  sx={{ mt: 3, mb: 2 }}
+                >
+                  Sign In
+                </LoadingButton>
+                <Grid container>
+                  <Grid item>
+                    <Link href="signup" variant="body2">
+                      {"Don't have an account? Sign Up"}
+                    </Link>
+                  </Grid>
                 </Grid>
-              </Grid>
+              </Box>
             </Box>
-          </Box>
+          </Grid>
         </Grid>
-      </Grid>
-    </PageContainer>
+      </PageContainer>
+    </>
   );
 };
 
diff --git a/src/util/theme/theme.ts b/src/util/theme/theme.ts
index 4427164..0a77b01 100644
--- a/src/util/theme/theme.ts
+++ b/src/util/theme/theme.ts
@@ -1,6 +1,26 @@
-import { createTheme } from "@mui/material/styles";
+import {
+  createTheme,
+  PaletteColorOptions,
+  SimplePaletteColorOptions,
+} from "@mui/material/styles";
 import { Plus_Jakarta_Sans } from "next/font/google";
-import { appTypography, plusFont } from "./app.typography";
+
+export const plus = Plus_Jakarta_Sans({
+  weight: ["300", "400", "500", "600", "700"],
+  subsets: ["latin"],
+  display: "swap",
+  fallback: ["Helvetica", "Arial", "sans-serif"],
+});
+declare module "@mui/material/styles" {
+  interface Palette {
+    note: SimplePaletteColorOptions;
+    gold: SimplePaletteColorOptions;
+  }
+  interface PaletteOptions {
+    note?: SimplePaletteColorOptions;
+    gold?: SimplePaletteColorOptions;
+  }
+}
 
 const baselightTheme = createTheme({
   direction: "ltr",
@@ -9,7 +29,7 @@ const baselightTheme = createTheme({
       main: "rgba(254, 237, 175)",
     },
     primary: {
-      main: "#2D52BD",
+      main: "#5D87FF",
       light: "#ECF2FF",
       dark: "#4570EA",
     },
@@ -42,7 +62,7 @@ const baselightTheme = createTheme({
       dark: "#ae8e59",
       contrastText: "#ffffff",
     },
-
+    
     grey: {
       100: "#F2F6FA",
       200: "#EAEFF4",
@@ -54,8 +74,7 @@ const baselightTheme = createTheme({
 
     text: {
       primary: "#2A3547",
-      secondary: "#2A3547",
-      bold: "#2c2929",
+      secondary: "#5A6A85",
     },
     action: {
       disabledBackground: "rgba(73,82,88,0.12)",
@@ -66,17 +85,67 @@ const baselightTheme = createTheme({
     gold: {
       main: "#FFD35C",
     },
-    bg: {
-      main: "#F5F5F5",
-      dark: "#F5F5F5",
-      light: "#F0F0F0",
-    },
-    border: {
-      main: "#E0E0E0",
+  },
+  
+  typography: {
+    fontFamily: plus.style.fontFamily,
+    h1: {
+      fontWeight: 600,
+      fontSize: "2.25rem",
+      lineHeight: "2.75rem",
+      fontFamily: plus.style.fontFamily,
+    },
+    h2: {
+      fontWeight: 600,
+      fontSize: "1.875rem",
+      lineHeight: "2.25rem",
+      fontFamily: plus.style.fontFamily,
+    },
+    h3: {
+      fontWeight: 600,
+      fontSize: "1.5rem",
+      lineHeight: "1.75rem",
+      fontFamily: plus.style.fontFamily,
+    },
+    h4: {
+      fontWeight: 600,
+      fontSize: "1.3125rem",
+      lineHeight: "1.6rem",
+    },
+    h5: {
+      fontWeight: 600,
+      fontSize: "1.125rem",
+      lineHeight: "1.6rem",
+    },
+    h6: {
+      fontWeight: 600,
+      fontSize: "1rem",
+      lineHeight: "1.2rem",
+    },
+    button: {
+      textTransform: "capitalize",
+      fontWeight: 400,
+    },
+    body1: {
+      fontSize: "0.875rem",
+      fontWeight: 400,
+      lineHeight: "1.334rem",
+    },
+    body2: {
+      fontSize: "0.75rem",
+      letterSpacing: "0rem",
+      fontWeight: 400,
+      lineHeight: "1rem",
+    },
+    subtitle1: {
+      fontSize: "0.875rem",
+      fontWeight: 400,
+    },
+    subtitle2: {
+      fontSize: "0.875rem",
+      fontWeight: 400,
     },
   },
-
-  typography: appTypography,
   components: {
     MuiCssBaseline: {
       styleOverrides: {
@@ -103,31 +172,10 @@ const baselightTheme = createTheme({
       styleOverrides: {
         root: {
           borderRadius: "7px",
-          fontFamily: plusFont.style.fontFamily,
-        },
-      },
-    },
-    MuiInputLabel: {
-      styleOverrides: {
-        root: {
-          color: "#2A3547",
-        },
-      },
-    },
-    MuiListItemButton: {
-      styleOverrides: {
-        root: {
-          "&:hover": {
-            backgroundColor: "#2D52BD",
-          },
-          "&$selected": {
-            color: "#FFFFFF",
-            backgroundColor: "#2D52BD",
-          },
         },
       },
     },
   },
 });
 
-export { baselightTheme };
+export { baselightTheme };
\ No newline at end of file

From 41850a6d916a1b560f375f3d291b48fb004efd0b Mon Sep 17 00:00:00 2001
From: roiy0987 <roiy0987@gmail.com>
Date: Sun, 1 Sep 2024 00:14:50 +0300
Subject: [PATCH 223/242] refactor: Update import paths and types in
 chat-related files

---
 package-lock.json                             |  81 ++++++++++++++++++
 package.json                                  |   1 +
 .../new_dashboard/guides/[id]/page.tsx        |  12 ++-
 .../guides/components/Editor/index.tsx        |  25 ++++--
 .../new_dashboard/shared/Card/index.tsx       |   2 -
 src/app/favicon.ico                           | Bin 25931 -> 0 bytes
 src/app/icon.ico                              | Bin 0 -> 1146 bytes
 7 files changed, 108 insertions(+), 13 deletions(-)
 delete mode 100644 src/app/favicon.ico
 create mode 100644 src/app/icon.ico

diff --git a/package-lock.json b/package-lock.json
index bce7a0b..cda2437 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -25,6 +25,7 @@
         "cookies-next": "^4.2.1",
         "file-saver": "^2.0.5",
         "font-awesome": "^4.7.0",
+        "html-react-parser": "^5.1.15",
         "html-to-text": "^9.0.5",
         "html2canvas": "^1.4.1",
         "html2pdf.js": "^0.10.2",
@@ -4979,6 +4980,56 @@
         "react-is": "^16.7.0"
       }
     },
+    "node_modules/html-dom-parser": {
+      "version": "5.0.10",
+      "resolved": "https://registry.npmjs.org/html-dom-parser/-/html-dom-parser-5.0.10.tgz",
+      "integrity": "sha512-GwArYL3V3V8yU/mLKoFF7HlLBv80BZ2Ey1BzfVNRpAci0cEKhFHI/Qh8o8oyt3qlAMLlK250wsxLdYX4viedvg==",
+      "license": "MIT",
+      "dependencies": {
+        "domhandler": "5.0.3",
+        "htmlparser2": "9.1.0"
+      }
+    },
+    "node_modules/html-dom-parser/node_modules/htmlparser2": {
+      "version": "9.1.0",
+      "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-9.1.0.tgz",
+      "integrity": "sha512-5zfg6mHUoaer/97TxnGpxmbR7zJtPwIYFMZ/H5ucTlPZhKvtum05yiPK3Mgai3a0DyVxv7qYqoweaEd2nrYQzQ==",
+      "funding": [
+        "https://github.com/fb55/htmlparser2?sponsor=1",
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fb55"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.3",
+        "domutils": "^3.1.0",
+        "entities": "^4.5.0"
+      }
+    },
+    "node_modules/html-react-parser": {
+      "version": "5.1.15",
+      "resolved": "https://registry.npmjs.org/html-react-parser/-/html-react-parser-5.1.15.tgz",
+      "integrity": "sha512-LRwSTseAZtdtzYbBaN0a+pJ48x4qmwPzQC5tvwAp9IvuNf7afxtTHLpCPYCsVjRKRUqhXvfjTaKJJrhctxkHJA==",
+      "license": "MIT",
+      "dependencies": {
+        "domhandler": "5.0.3",
+        "html-dom-parser": "5.0.10",
+        "react-property": "2.0.2",
+        "style-to-js": "1.1.13"
+      },
+      "peerDependencies": {
+        "@types/react": "0.14 || 15 || 16 || 17 || 18",
+        "react": "0.14 || 15 || 16 || 17 || 18"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/html-to-text": {
       "version": "9.0.5",
       "resolved": "https://registry.npmjs.org/html-to-text/-/html-to-text-9.0.5.tgz",
@@ -5099,6 +5150,12 @@
       "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
       "dev": true
     },
+    "node_modules/inline-style-parser": {
+      "version": "0.2.3",
+      "resolved": "https://registry.npmjs.org/inline-style-parser/-/inline-style-parser-0.2.3.tgz",
+      "integrity": "sha512-qlD8YNDqyTKTyuITrDOffsl6Tdhv+UC4hcdAVuQsK4IMQ99nSgd1MIA/Q+jQYoh9r3hVUXhYh7urSRmXPkW04g==",
+      "license": "MIT"
+    },
     "node_modules/internal-slot": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.7.tgz",
@@ -6834,6 +6891,12 @@
         "vite-plugin-dts": "^3.8.1"
       }
     },
+    "node_modules/react-property": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/react-property/-/react-property-2.0.2.tgz",
+      "integrity": "sha512-+PbtI3VuDV0l6CleQMsx2gtK0JZbZKbpdu5ynr+lbsuvtmgbNcS3VM0tuY2QjFNOcWxvXeHjDpy42RO+4U2rug==",
+      "license": "MIT"
+    },
     "node_modules/react-quill": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/react-quill/-/react-quill-2.0.0.tgz",
@@ -7592,6 +7655,24 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/style-to-js": {
+      "version": "1.1.13",
+      "resolved": "https://registry.npmjs.org/style-to-js/-/style-to-js-1.1.13.tgz",
+      "integrity": "sha512-+43kvxwjrW9n5gFR40Rv98A0/Mcjew7Lt+p5Nnw1KGR9SZf/ZaKqmMwl9Enj9EnYNcJ5VzuCjejC5KZzvH2lOA==",
+      "license": "MIT",
+      "dependencies": {
+        "style-to-object": "1.0.6"
+      }
+    },
+    "node_modules/style-to-object": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/style-to-object/-/style-to-object-1.0.6.tgz",
+      "integrity": "sha512-khxq+Qm3xEyZfKd/y9L3oIWQimxuc4STrQKtQn8aSDRHb8mFgpukgX1hdzfrMEW6JCjyJ8p89x+IUMVnCBI1PA==",
+      "license": "MIT",
+      "dependencies": {
+        "inline-style-parser": "0.2.3"
+      }
+    },
     "node_modules/styled-jsx": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.1.1.tgz",
diff --git a/package.json b/package.json
index 3be360f..379801d 100644
--- a/package.json
+++ b/package.json
@@ -26,6 +26,7 @@
     "cookies-next": "^4.2.1",
     "file-saver": "^2.0.5",
     "font-awesome": "^4.7.0",
+    "html-react-parser": "^5.1.15",
     "html-to-text": "^9.0.5",
     "html2canvas": "^1.4.1",
     "html2pdf.js": "^0.10.2",
diff --git a/src/app/(admin)/new_dashboard/guides/[id]/page.tsx b/src/app/(admin)/new_dashboard/guides/[id]/page.tsx
index 838ef11..d6f8b01 100644
--- a/src/app/(admin)/new_dashboard/guides/[id]/page.tsx
+++ b/src/app/(admin)/new_dashboard/guides/[id]/page.tsx
@@ -24,7 +24,13 @@ const GuidePage: React.FC = () => {
 
   const id = params?.id ? Number(params.id) : null;
 
-  const { data: response, isLoading, isError, error, isSuccess } = useGuide(id ?? 0);
+  const {
+    data: response,
+    isLoading,
+    isError,
+    error,
+    isSuccess,
+  } = useGuide(id ?? 0);
 
   if (isLoading) {
     return <CircularProgress />;
@@ -47,9 +53,7 @@ const GuidePage: React.FC = () => {
     return (
       <Box>
         <DashboardCard title={guide.title} subtitle={creatorAndDateInfo}>
-          <Box className="quill-content">
-            {parse(guide.contentHTML)}
-          </Box>
+          <Box className="quill-content">{parse(guide.contentHTML)}</Box>
         </DashboardCard>
         <Box ml={3}>
           <ReviewList guideId={guide.id} reviews={guide.reviews ?? []} />
diff --git a/src/app/(admin)/new_dashboard/guides/components/Editor/index.tsx b/src/app/(admin)/new_dashboard/guides/components/Editor/index.tsx
index 3d6f0a9..257abd6 100644
--- a/src/app/(admin)/new_dashboard/guides/components/Editor/index.tsx
+++ b/src/app/(admin)/new_dashboard/guides/components/Editor/index.tsx
@@ -3,7 +3,11 @@ import { useState } from "react";
 import "react-quill/dist/quill.snow.css";
 import { Box, Button, TextField, Autocomplete, Chip } from "@mui/material";
 import SaveAsIcon from "@mui/icons-material/SaveAs";
-import { UseFormRegister, UseFormSetValue, UseFormWatch } from "react-hook-form";
+import {
+  UseFormRegister,
+  UseFormSetValue,
+  UseFormWatch,
+} from "react-hook-form";
 import { CreateGuideRequest } from "@/api/types/Guide";
 
 const DynamicReactQuill = dynamic(() => import("react-quill"));
@@ -33,8 +37,6 @@ const GuideEditor = ({
   setValue,
   watch,
 }: Props) => {
-
-
   const modules = {
     toolbar: [
       [{ header: [1, 2, 3, 4, 5, 6, false] }],
@@ -86,21 +88,30 @@ const GuideEditor = ({
         renderTags={(value: string[], getTagProps) =>
           value.map((option: string, index: number) => (
             <Box key={index}>
-              <Chip variant="outlined" label={option} {...getTagProps({ index })} />
+              <Chip
+                variant="outlined"
+                label={option}
+                {...getTagProps({ index })}
+              />
             </Box>
           ))
         }
         renderInput={(params) => (
-          <TextField {...params} variant="outlined" label="Categories" placeholder="Add up to 3 categories" />
+          <TextField
+            {...params}
+            variant="outlined"
+            label="Categories"
+            placeholder="Add up to 3 categories"
+          />
         )}
-        sx={{ mt: 2 ,mb: 2 }}
+        sx={{ mt: 2, mb: 2 }}
       />
 
       <DynamicReactQuill
         theme="snow"
         modules={modules}
         formats={formats}
-        style={{ height: "570px" }}
+        style={{ height: "550px" }}
         defaultValue={initialContent} // Initial content for the editor
         onChange={(content) => setValue("contentHTML", content)}
       />
diff --git a/src/app/(admin)/new_dashboard/shared/Card/index.tsx b/src/app/(admin)/new_dashboard/shared/Card/index.tsx
index 9a19aa7..0fe1e22 100644
--- a/src/app/(admin)/new_dashboard/shared/Card/index.tsx
+++ b/src/app/(admin)/new_dashboard/shared/Card/index.tsx
@@ -52,8 +52,6 @@ const DashboardCard = ({
               direction="row"
               spacing={2}
               justifyContent="space-between"
-              borderBottom={1}
-              borderColor={"divider"}
               alignItems={"center"}
               mb={3}
             >
diff --git a/src/app/favicon.ico b/src/app/favicon.ico
deleted file mode 100644
index 718d6fea4835ec2d246af9800eddb7ffb276240c..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 25931
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
LrJugUA?W`A8`#=m

diff --git a/src/app/icon.ico b/src/app/icon.ico
new file mode 100644
index 0000000000000000000000000000000000000000..c738b99014df22465c1f2d04fcd8e6f3e1f9bd34
GIT binary patch
literal 1146
zcmV-=1cm#FP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800009a7bBm000XU
z000XU0RWnu7ytkS5=lfsRCt{2mP>3KRTPF@Saiz<)`$g2v~CcH6dKf)%1J$b#ZEJ0
zK&Sy43e<@mKUyb^$Ch9R2!v=_wLFB_I7Fgq5;vLgcx=yO!wL}z1T4#A(Tb=-kWxj;
zLI0hM?L3^cs$&U>D;;Sx_uTXS=iGDejKlF?9T84(j(Ftr37=9(`_&_DhetW-R?H*c
z9OtW)74*L{FBp5;CLqd5A4NHNNfb27hIMA5pncFj0dDDB!lx|R@KyV;Z32dRqz;t7
z4%e32x&;`?fZ~mD^0k;-{<-aNdxV^mQ!qz+2i-Ro)DI;Cl{Zfwp8am{VBs54(7SRk
z8IL#|v}?z($v`=p^p}2$dzIViP#Im{*npM^`tPEkf0`4tgDnG}?k$JoK4mfHk!iHA
zf`;1&-pmB8lo5=MdxEC|rHe66rnt9AB7cYA1``GSRyJIXZ42W0sr!R_@;#w_Up`cW
z`%6-klPTd-HZS*GnUS{Rf&mtoH36Z$`FBFjNeVe9f3V={1;9tVMatYWoZS;ESzdo}
zmGvW7LFeS#bph6Kf&fYe^v9!|v;qNVk5yX$ul2;@7_UEQbJiT+P=kPkPx+pe-mkO{
zUa!Q&mI97FF-1{MwzBW9QiiWm#3j?K&&<+5=L`*Y6)5g0H3h^y3iE;QYtPQokV~S>
zn&#F1?A!NMa{+^g3J^dsPm#e-bj?zvdxkDwP^kK~N}uE;8rVO>M6HJdhB^4a_wsp#
zPPu03#DT&Z5d#OVG#3!*o@WA50hK`j|KnGU7Oxw$u%OfO-zJ&UDjk1%n$Gl=YeDgh
zcbJ0@e6a>=Ap+uT-#3n2Z7v|{mY9Gu!7?j5vOu7dDUDu^RO!8Q8qsZ&()|S*>aJG-
zfYJV|Z0_BUEnlozykW8!*p8a-QE3YSoXiY2-to?9R!U@pfOb#@IW<RbJwIOyif6pT
z-0Mlp7q+lquowfK(=}gQY}*PL>#MM4x|EezNs&3=a!IFuZklXsVm-xL(CATXyD&Ge
z=uE`>6FMy~nRHQ<Xz;nh-3y3&O021jD=Nzj2EfFqM6c|hq49=0V!Xe~-eC?twm;S)
zMxx>5Y$_n=%zthPur447fHN8q&4oQjiIF9a*lEAI;S{9&DiZ-8_+ky#Ha4IoKw7p0
z<Ugwk=<Ucq9NL?|G~zAZXcS;~I2sQ7jIuXozTPm0?SSu)OQv+N9>=zHNHxI%bHhg|
z?koPXUce6AhRy$=5<cbIofojh-*c?D@<1w}&YkV6TyHs8(68aMJnWv^?bv?ME|E8$
z$_o0h7}meYhBZ?ZwBOigb^8*ptooX4t)LI*1ntR|{4Wl>=XPg!^RXPSb>;-al?@v_
z4A1OcSby{mGyH!z?C~!W_L87<-G7(>000hUSV?A0O#mtY000O800000007cclK=n!
M07*qoM6N<$f(+glC;$Ke

literal 0
HcmV?d00001


From 4003a52b9239b80f219fea92211cf031a0c7b6bc Mon Sep 17 00:00:00 2001
From: Ori <ori100no@gmail.com>
Date: Sun, 1 Sep 2024 00:28:53 +0300
Subject: [PATCH 224/242] resolved changes from master

---
 src/app/(admin)/new_dashboard/components/ChatHeader/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/(admin)/new_dashboard/components/ChatHeader/index.tsx b/src/app/(admin)/new_dashboard/components/ChatHeader/index.tsx
index efb1f56..c0001e4 100644
--- a/src/app/(admin)/new_dashboard/components/ChatHeader/index.tsx
+++ b/src/app/(admin)/new_dashboard/components/ChatHeader/index.tsx
@@ -5,7 +5,7 @@ import {
   Backdrop,
   CircularProgress,
 } from "@mui/material";
-import { Box, Typography, Button, CircularProgress } from "@mui/material";
+
 import SmartToyIcon from "@mui/icons-material/SmartToy";
 import DoneIcon from "@mui/icons-material/Done";
 import { Contact } from "../../types";

From 130584d66d35907eee3187ad5963e7f650c32e06 Mon Sep 17 00:00:00 2001
From: Ori <ori100no@gmail.com>
Date: Sun, 1 Sep 2024 12:38:12 +0300
Subject: [PATCH 225/242] fixed sory input

---
 .../guides/components/SearchBar/index.tsx     | 55 ++++++++++---------
 .../guides/hooks/useSearchGuides.ts           |  2 +-
 2 files changed, 29 insertions(+), 28 deletions(-)

diff --git a/src/app/(admin)/new_dashboard/guides/components/SearchBar/index.tsx b/src/app/(admin)/new_dashboard/guides/components/SearchBar/index.tsx
index 9681fa1..164efa6 100644
--- a/src/app/(admin)/new_dashboard/guides/components/SearchBar/index.tsx
+++ b/src/app/(admin)/new_dashboard/guides/components/SearchBar/index.tsx
@@ -1,11 +1,12 @@
-import { 
-  TextField, 
-  InputAdornment, 
-  Box, 
-  FormControl, 
-  Select, 
+import {
+  TextField,
+  InputAdornment,
+  Box,
+  FormControl,
+  Select,
   MenuItem,
-  SelectChangeEvent
+  SelectChangeEvent,
+  InputLabel,
 } from "@mui/material";
 import SearchIcon from "@mui/icons-material/Search";
 import Autocomplete from "@mui/material/Autocomplete";
@@ -18,18 +19,19 @@ type Props = {
   onTagChange: (e: React.ChangeEvent<{}>, value: string | null) => void;
   categories: string[];
   sortCriteria: SortCriteria;
-  handleSortChange: (e: SelectChangeEvent<string>) => void;
+  handleSortChange: (
+    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
+  ) => void;
 };
 
-
-const SearchBar = ({ 
-  searchQuery, 
-  onSearchChange, 
-  selectedTag, 
-  onTagChange, 
-  categories, 
-  sortCriteria, 
-  handleSortChange 
+const SearchBar = ({
+  searchQuery,
+  onSearchChange,
+  selectedTag,
+  onTagChange,
+  categories,
+  sortCriteria,
+  handleSortChange,
 }: Props) => (
   <Box display="flex" alignItems="center" justifyContent="space-between">
     <TextField
@@ -52,27 +54,26 @@ const SearchBar = ({
         value={selectedTag}
         onChange={onTagChange}
         renderInput={(params) => (
-          <TextField
-            {...params}
-            label="Filter by tag"
-            variant="outlined"
-          />
+          <TextField {...params} label="Filter by tag" variant="outlined" />
         )}
         isOptionEqualToValue={(option, value) => option === value}
         getOptionLabel={(option) => option}
       />
     </FormControl>
     <FormControl variant="outlined" sx={{ ml: 2, minWidth: 150 }}>
-      <Select
-        onChange={handleSortChange}
-        displayEmpty
+      <TextField
+        select
+        label="Sort by"
+        value={sortCriteria}
+        onChange={(e) => handleSortChange(e)}
+        variant="outlined"
       >
         {sortOptions.map((option) => (
           <MenuItem key={option} value={option}>
-            Sort by {option}
+            {option}
           </MenuItem>
         ))}
-      </Select>
+      </TextField>
     </FormControl>
   </Box>
 );
diff --git a/src/app/(admin)/new_dashboard/guides/hooks/useSearchGuides.ts b/src/app/(admin)/new_dashboard/guides/hooks/useSearchGuides.ts
index 41c8c6e..dfaa6a0 100644
--- a/src/app/(admin)/new_dashboard/guides/hooks/useSearchGuides.ts
+++ b/src/app/(admin)/new_dashboard/guides/hooks/useSearchGuides.ts
@@ -28,7 +28,7 @@ export const useSearchGuides = (initialGuides: Guide[]) => {
     setSelectedTag(value || "All");
   };
 
-  const handleSortChange = (event: SelectChangeEvent<string> ) => {
+  const handleSortChange = (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement> ) => {
     setSortCriteria(event.target.value as SortCriteria);
   };
 

From 2d9102a15aaefa3212d49ca875a21479d4ecb2be Mon Sep 17 00:00:00 2001
From: Ori <ori100no@gmail.com>
Date: Sun, 1 Sep 2024 12:53:14 +0300
Subject: [PATCH 226/242] fixed review box style

---
 .../guides/components/ReviewList/index.tsx    | 44 +++++++++----------
 src/util/theme/theme.ts                       |  4 ++
 2 files changed, 24 insertions(+), 24 deletions(-)

diff --git a/src/app/(admin)/new_dashboard/guides/components/ReviewList/index.tsx b/src/app/(admin)/new_dashboard/guides/components/ReviewList/index.tsx
index 26bacfd..83a3038 100644
--- a/src/app/(admin)/new_dashboard/guides/components/ReviewList/index.tsx
+++ b/src/app/(admin)/new_dashboard/guides/components/ReviewList/index.tsx
@@ -1,12 +1,7 @@
 "use client";
 
 import React, { useState } from "react";
-import {
-  Typography,
-  Box,
-  Button,
-  Divider,
-} from "@mui/material";
+import { Typography, Box, Button, Divider } from "@mui/material";
 import { Review } from "@/api/types/Review";
 import AddReviewBox from "../AddReviewBox";
 import ReviewCard from "../ReviewCard";
@@ -18,45 +13,46 @@ interface ReviewListProps {
 }
 
 const ReviewList: React.FC<ReviewListProps> = ({ reviews, guideId }) => {
-  const [visibleCount, setVisibleCount] = useState(1); 
+  const [visibleCount, setVisibleCount] = useState(1);
 
   const showMoreReviews = () => {
-    setVisibleCount((prevCount) => Math.min(prevCount + 2, reviews.length)); 
+    setVisibleCount((prevCount) => Math.min(prevCount + 2, reviews.length));
   };
 
   const showLessReviews = () => {
     setVisibleCount(1);
-  }
+  };
 
   let reviewsContext = !reviews.length ? (
     <Typography>No reviews available yet</Typography>
   ) : (
-    reviews.slice(0, visibleCount).map((review, index) => (
-        <ReviewCard key={index} review={review} />
-    ))
+    reviews
+      .slice(0, visibleCount)
+      .map((review, index) => <ReviewCard key={index} review={review} />)
   );
 
   return (
-
     <Box mt={3}>
-      <DashboardCard title={"Reviews"}> 
+      <DashboardCard title={"Reviews"}>
         <Box>
-          <Box sx={{border:"1px solid" , borderColor:"border.main", padding:2, borderRadius:3}}>
-            {reviewsContext}
-          </Box>
-          {reviews?.length > 1 &&(
+          <Box sx={{ padding: 2, borderRadius: 3 }}>{reviewsContext}</Box>
+          {reviews?.length > 1 && (
             <Box display="flex" justifyContent="center" width="100%">
-              <Button onClick={()=>{
-                visibleCount === reviews.length ? showLessReviews() : showMoreReviews();
-              }}>
+              <Button
+                onClick={() => {
+                  visibleCount === reviews.length
+                    ? showLessReviews()
+                    : showMoreReviews();
+                }}
+              >
                 {visibleCount === reviews.length ? "Show Less" : "Show More"}
               </Button>
-            </Box>)}
+            </Box>
+          )}
         </Box>
       </DashboardCard>
       <AddReviewBox guideId={guideId ?? 0} />
-  </Box>
-  
+    </Box>
   );
 };
 
diff --git a/src/util/theme/theme.ts b/src/util/theme/theme.ts
index fb4ec2b..ce47bb0 100644
--- a/src/util/theme/theme.ts
+++ b/src/util/theme/theme.ts
@@ -96,6 +96,10 @@ const baselightTheme = createTheme({
       main: "#ebebeb",
       light: "rgba(42, 53, 71, 0.6)",
     },
+    bg: {
+      main: "#f5f5f5",
+      light: "#f5f5f5",
+    },
   },
 
   typography: {

From ec655d11cc81f237841e3ae27dcb5067980e6d45 Mon Sep 17 00:00:00 2001
From: Ori <ori100no@gmail.com>
Date: Sun, 1 Sep 2024 12:55:57 +0300
Subject: [PATCH 227/242] fixed review card styling

---
 .../guides/components/ReviewCard/index.tsx    | 26 ++++++-------------
 1 file changed, 8 insertions(+), 18 deletions(-)

diff --git a/src/app/(admin)/new_dashboard/guides/components/ReviewCard/index.tsx b/src/app/(admin)/new_dashboard/guides/components/ReviewCard/index.tsx
index c5dbde2..fd0cd95 100644
--- a/src/app/(admin)/new_dashboard/guides/components/ReviewCard/index.tsx
+++ b/src/app/(admin)/new_dashboard/guides/components/ReviewCard/index.tsx
@@ -1,11 +1,6 @@
-import { Review } from '@/api/types/Review';
-import {
-  Typography,
-  Box,
-  Rating,
-  Divider,
-} from "@mui/material";
-import React from 'react';
+import { Review } from "@/api/types/Review";
+import { Typography, Box, Rating, Divider } from "@mui/material";
+import React from "react";
 
 interface ReviewCardProps {
   review: Review;
@@ -20,27 +15,24 @@ const ReviewCard: React.FC<ReviewCardProps> = ({ review }) => {
       sx={{
         padding: 3,
         borderRadius: 2,
-        backgroundColor:"bg.light" ,
+        backgroundColor: "bg.light",
       }}
     >
-      <Box display="flex" flexDirection="column" sx={{mr:13}}>
-      <Rating 
+      <Box display="flex" flexDirection="column" sx={{ mr: 13 }}>
+        <Rating
           value={review.rating}
           readOnly
           precision={0.5}
-          sx={{ fontSize: '1.25rem', color: 'gold' }}
+          sx={{ fontSize: "1.25rem", color: "gold" }}
         />
         <Box ml={1}>
-          <Typography fontWeight={700} >
-            {review.user?.username}
-          </Typography>
+          <Typography fontWeight={700}>{review.user?.username}</Typography>
 
           <Typography color="text.primary">
             {new Date(review.createdAt).toLocaleDateString()}
           </Typography>
         </Box>
       </Box>
-      <Divider orientation="vertical" flexItem />
       <Box>
         <Typography variant="h6" mb={1}>
           {review.title}
@@ -49,8 +41,6 @@ const ReviewCard: React.FC<ReviewCardProps> = ({ review }) => {
         <Typography variant="body1" mb={1}>
           {review.comment}
         </Typography>
-
-      
       </Box>
     </Box>
   );

From 266e39a641bea9937fc54d0f2f1b0a48fdad7812 Mon Sep 17 00:00:00 2001
From: Ori <ori100no@gmail.com>
Date: Sun, 1 Sep 2024 13:05:47 +0300
Subject: [PATCH 228/242] now showing popup on create guide page

---
 .../guides/hooks/useIsCreateGuidePage.ts      | 13 ++++++++++++
 .../(admin)/new_dashboard/guides/layout.tsx   |  1 -
 src/app/(admin)/new_dashboard/layout.tsx      | 20 +++++++++++++++----
 3 files changed, 29 insertions(+), 5 deletions(-)
 create mode 100644 src/app/(admin)/new_dashboard/guides/hooks/useIsCreateGuidePage.ts

diff --git a/src/app/(admin)/new_dashboard/guides/hooks/useIsCreateGuidePage.ts b/src/app/(admin)/new_dashboard/guides/hooks/useIsCreateGuidePage.ts
new file mode 100644
index 0000000..87bb5cb
--- /dev/null
+++ b/src/app/(admin)/new_dashboard/guides/hooks/useIsCreateGuidePage.ts
@@ -0,0 +1,13 @@
+import { usePathname } from "next/navigation";
+import { useEffect, useState } from "react";
+
+export const useIsCreateGuidePage = () => {
+  const pathname = usePathname();
+
+  const [IsCreateGuidePage, setIsCreateGuidePage] = useState(false);
+
+  useEffect(() => {
+    setIsCreateGuidePage(pathname === "/new_dashboard/guides/create");
+  }, [IsCreateGuidePage, pathname]);
+  return IsCreateGuidePage;
+};
diff --git a/src/app/(admin)/new_dashboard/guides/layout.tsx b/src/app/(admin)/new_dashboard/guides/layout.tsx
index 388a6ea..9211007 100644
--- a/src/app/(admin)/new_dashboard/guides/layout.tsx
+++ b/src/app/(admin)/new_dashboard/guides/layout.tsx
@@ -9,7 +9,6 @@ const GuideLayout = ({ children }: { children: ReactNode }) => {
   return (
     <>
       {children}
-      {selectedContact && <ChatPopup selectedContact={selectedContact} />}
     </>
   );
 };
diff --git a/src/app/(admin)/new_dashboard/layout.tsx b/src/app/(admin)/new_dashboard/layout.tsx
index fa961a0..6029deb 100644
--- a/src/app/(admin)/new_dashboard/layout.tsx
+++ b/src/app/(admin)/new_dashboard/layout.tsx
@@ -6,6 +6,7 @@ import ChatPopup from "./components/ChatPopup";
 import { useChat } from "@/app/hooks/useChat";
 import { useIsDashboardPage } from "./guides/hooks/useIsDashboardPage";
 import { useIsChatPopupOpen } from "./hooks/useIsChatPopupOpen";
+import { useIsCreateGuidePage } from "./guides/hooks/useIsCreateGuidePage";
 
 const MainWrapper = styled("div")(() => ({
   display: "flex",
@@ -24,7 +25,7 @@ const PageWrapper = styled("div")(() => ({
 const RightSidebarWrapper = styled(Box)(() => ({
   display: "flex",
   flexDirection: "column",
-  alignItems: "flex-end", 
+  alignItems: "flex-end",
   gap: 2,
 }));
 
@@ -35,7 +36,8 @@ export default function RootLayout({
 }) {
   const { selectedContact } = useChat();
   const isDashboardPage = useIsDashboardPage();
-  const {isOpen ,setIsOpen} = useIsChatPopupOpen();
+  const isCreateGuidePage = useIsCreateGuidePage();
+  const { isOpen, setIsOpen } = useIsChatPopupOpen();
 
   return (
     <MainWrapper className="mainwrapper">
@@ -53,8 +55,18 @@ export default function RootLayout({
       </PageWrapper>
 
       <RightSidebarWrapper>
-        {(isOpen || isDashboardPage) && <ContactSidebar isContactSidebarOpen={isDashboardPage ? true : isOpen} />}
-        {!isDashboardPage && <ChatPopup isOpen={isOpen} setIsOpen={setIsOpen} selectedContact={selectedContact} />}
+        {(isOpen || isDashboardPage) && (
+          <ContactSidebar
+            isContactSidebarOpen={isDashboardPage ? true : isOpen}
+          />
+        )}
+        {!isDashboardPage && !isCreateGuidePage && (
+          <ChatPopup
+            isOpen={isOpen}
+            setIsOpen={setIsOpen}
+            selectedContact={selectedContact}
+          />
+        )}
       </RightSidebarWrapper>
     </MainWrapper>
   );

From 6210de92a28b2004d8ba134640b2f7fe8a89b943 Mon Sep 17 00:00:00 2001
From: Ori <ori100no@gmail.com>
Date: Sun, 1 Sep 2024 13:21:06 +0300
Subject: [PATCH 229/242] extracted wrappers

---
 src/app/(admin)/new_dashboard/layout.tsx | 30 +++++++-----------------
 src/app/wrappers/wrappers.ts             | 29 +++++++++++++++++++++++
 2 files changed, 37 insertions(+), 22 deletions(-)
 create mode 100644 src/app/wrappers/wrappers.ts

diff --git a/src/app/(admin)/new_dashboard/layout.tsx b/src/app/(admin)/new_dashboard/layout.tsx
index 6029deb..0061a84 100644
--- a/src/app/(admin)/new_dashboard/layout.tsx
+++ b/src/app/(admin)/new_dashboard/layout.tsx
@@ -1,5 +1,5 @@
 "use client";
-import { styled, Container, Box } from "@mui/material";
+import { Container, Box } from "@mui/material";
 import Sidebar from "./shared/sidebar/Sidebar";
 import ContactSidebar from "./components/ContactSidebar";
 import ChatPopup from "./components/ChatPopup";
@@ -7,27 +7,13 @@ import { useChat } from "@/app/hooks/useChat";
 import { useIsDashboardPage } from "./guides/hooks/useIsDashboardPage";
 import { useIsChatPopupOpen } from "./hooks/useIsChatPopupOpen";
 import { useIsCreateGuidePage } from "./guides/hooks/useIsCreateGuidePage";
-
-const MainWrapper = styled("div")(() => ({
-  display: "flex",
-  minHeight: "100vh",
-  width: "100%",
-}));
-
-const PageWrapper = styled("div")(() => ({
-  display: "flex",
-  flexGrow: 1,
-  flexDirection: "column",
-  zIndex: 1,
-  backgroundColor: "transparent",
-}));
-
-const RightSidebarWrapper = styled(Box)(() => ({
-  display: "flex",
-  flexDirection: "column",
-  alignItems: "flex-end",
-  gap: 2,
-}));
+import {
+  LeftSidebarWrapper,
+  RightSidebarWrapper,
+  PageWrapper,
+  MainWrapper,
+} from "@/app/wrappers/wrappers";
+import ContactList from "./components/ContactList";
 
 export default function RootLayout({
   children,
diff --git a/src/app/wrappers/wrappers.ts b/src/app/wrappers/wrappers.ts
new file mode 100644
index 0000000..1588b2c
--- /dev/null
+++ b/src/app/wrappers/wrappers.ts
@@ -0,0 +1,29 @@
+import { styled, Box } from "@mui/material";
+
+export const MainWrapper = styled("div")(() => ({
+  display: "flex",
+  minHeight: "100vh",
+  width: "100%",
+}));
+
+export const PageWrapper = styled("div")(() => ({
+  display: "flex",
+  flexGrow: 1,
+  flexDirection: "column",
+  zIndex: 1,
+  backgroundColor: "transparent",
+}));
+
+export const LeftSidebarWrapper = styled(Box)(() => ({
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "flex-start",
+  gap: 2,
+}));
+
+export const RightSidebarWrapper = styled(Box)(() => ({
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "flex-end",
+    gap: 2,
+  }));
\ No newline at end of file

From 50a87aeb417f841eb609a42bb46786360a914b77 Mon Sep 17 00:00:00 2001
From: Ori <ori100no@gmail.com>
Date: Sun, 1 Sep 2024 13:27:37 +0300
Subject: [PATCH 230/242] fixed generate guide button

---
 .../(admin)/new_dashboard/components/ChatHeader/index.tsx   | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/app/(admin)/new_dashboard/components/ChatHeader/index.tsx b/src/app/(admin)/new_dashboard/components/ChatHeader/index.tsx
index c0001e4..cbe7e7e 100644
--- a/src/app/(admin)/new_dashboard/components/ChatHeader/index.tsx
+++ b/src/app/(admin)/new_dashboard/components/ChatHeader/index.tsx
@@ -64,7 +64,11 @@ const ChatHeader = ({ selectedContact, handleContactSelect }: Props) => {
                     setIsLoading(true);
                   }}
                   disabled={isLoading}
-                  sx={{ width: "163px", height: "36px", textTransform: "none" }}
+                  sx={{
+                    width: "10rem",
+                    height: "2rem",
+                    textTransform: "none",
+                  }}
                 >
                   {!isLoading ? (
                     "Generate Guide"

From e1858747a15b1e89ff96c30b9349029f8c91efe5 Mon Sep 17 00:00:00 2001
From: Ori <ori100no@gmail.com>
Date: Sun, 1 Sep 2024 16:00:16 +0300
Subject: [PATCH 231/242] put contacts list on the left side when on dashboard
 page

---
 .../components/ContactList/index.tsx              | 15 +++++++--------
 src/app/(admin)/new_dashboard/layout.tsx          |  2 +-
 src/app/(admin)/new_dashboard/page.tsx            |  5 +++++
 3 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/src/app/(admin)/new_dashboard/components/ContactList/index.tsx b/src/app/(admin)/new_dashboard/components/ContactList/index.tsx
index 33dd863..e1e4d96 100644
--- a/src/app/(admin)/new_dashboard/components/ContactList/index.tsx
+++ b/src/app/(admin)/new_dashboard/components/ContactList/index.tsx
@@ -18,10 +18,9 @@ const ContactList = ({ contacts, onSelectContact, selectedContact }: Props) => {
   return (
     <Box
       sx={{
-        width: "20%",
-        borderRight: "1px solid #E0E0E0",
+        width: "30%",
+        borderRight: "1px solid #e0e0e0",
         overflow: "auto",
-        padding: 2,
       }}
     >
       <List>
@@ -32,17 +31,17 @@ const ContactList = ({ contacts, onSelectContact, selectedContact }: Props) => {
         ) : (
           <List>
             {contacts.map((contact, index) => (
-              <Box key={index} sx={{ padding: "8px 0" }}>
+              <Box key={index} sx={{ padding: "0 8px" }}>
                 <ListItemButton
                   selected={selectedContact?.chatId === contact.chatId}
                   onClick={() => onSelectContact(contact)}
                   sx={{
                     backgroundColor:
                       selectedContact?.chatId === contact.chatId
-                        ? "primary.main"
-                        : "primary.light",
-                    borderRadius: 1,
-                    marginLeft: 0, 
+                        ? "#f5f5f5"
+                        : "#ffffff",
+                    borderRadius: 0,
+                    marginRight: 0,
                   }}
                 >
                   <ListItemAvatar>
diff --git a/src/app/(admin)/new_dashboard/layout.tsx b/src/app/(admin)/new_dashboard/layout.tsx
index 0061a84..99764b5 100644
--- a/src/app/(admin)/new_dashboard/layout.tsx
+++ b/src/app/(admin)/new_dashboard/layout.tsx
@@ -41,7 +41,7 @@ export default function RootLayout({
       </PageWrapper>
 
       <RightSidebarWrapper>
-        {(isOpen || isDashboardPage) && (
+        {(isOpen && !isDashboardPage) && (
           <ContactSidebar
             isContactSidebarOpen={isDashboardPage ? true : isOpen}
           />
diff --git a/src/app/(admin)/new_dashboard/page.tsx b/src/app/(admin)/new_dashboard/page.tsx
index d19a549..de8bd8f 100644
--- a/src/app/(admin)/new_dashboard/page.tsx
+++ b/src/app/(admin)/new_dashboard/page.tsx
@@ -23,6 +23,11 @@ const Page = () => {
             padding: 0,
           }}
         >
+          <ContactList
+            contacts={contacts}
+            selectedContact={selectedContact}
+            onSelectContact={handleContactSelect}
+          />
 
           {/* Chat Container */}
           {selectedContact && (

From 54f009ab9b7613d5bb102d427837b2470140cf94 Mon Sep 17 00:00:00 2001
From: nitzanto <nitzan16001@gmail.com>
Date: Sun, 1 Sep 2024 22:11:39 +0300
Subject: [PATCH 232/242] fix height

---
 src/app/(admin)/new_dashboard/components/ChatHeader/index.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/(admin)/new_dashboard/components/ChatHeader/index.tsx b/src/app/(admin)/new_dashboard/components/ChatHeader/index.tsx
index cbe7e7e..1eabac4 100644
--- a/src/app/(admin)/new_dashboard/components/ChatHeader/index.tsx
+++ b/src/app/(admin)/new_dashboard/components/ChatHeader/index.tsx
@@ -65,8 +65,8 @@ const ChatHeader = ({ selectedContact, handleContactSelect }: Props) => {
                   }}
                   disabled={isLoading}
                   sx={{
-                    width: "10rem",
-                    height: "2rem",
+                    width: "10.5rem",
+                    height: "36px",
                     textTransform: "none",
                   }}
                 >

From fe5b0f282130f493f647e03b5cf61b5a1c69372c Mon Sep 17 00:00:00 2001
From: nitzanto <nitzan16001@gmail.com>
Date: Mon, 2 Sep 2024 01:40:06 +0300
Subject: [PATCH 233/242] add sidebar item

---
 .../new_dashboard/shared/sidebar/Sidebar.tsx  | 36 +++++++++++++++++--
 1 file changed, 34 insertions(+), 2 deletions(-)

diff --git a/src/app/(admin)/new_dashboard/shared/sidebar/Sidebar.tsx b/src/app/(admin)/new_dashboard/shared/sidebar/Sidebar.tsx
index 969eb21..36934bc 100644
--- a/src/app/(admin)/new_dashboard/shared/sidebar/Sidebar.tsx
+++ b/src/app/(admin)/new_dashboard/shared/sidebar/Sidebar.tsx
@@ -1,6 +1,7 @@
-import { Box, Drawer } from "@mui/material";
+import { Box, Button, Drawer, Typography } from "@mui/material";
 import Image from "next/image";
 import SidebarItems from "./SidebarItems";
+import Link from "next/link";
 
 interface ItemType {
   isSidebarOpen: boolean;
@@ -38,7 +39,6 @@ const DashboardSidebar = ({ isSidebarOpen }: ItemType) => {
           sx: {
             boxSizing: "border-box",
             ...scrollbarStyles,
-            
           },
         }}
       >
@@ -81,6 +81,38 @@ const DashboardSidebar = ({ isSidebarOpen }: ItemType) => {
               {/* Sidebar Items */}
               {/* ------------------------------------------- */}
               <SidebarItems />
+              <Box
+                display="flex"
+                alignItems="center"
+                gap={2}
+                sx={{
+                  m: 3,
+                  p: 3,
+                  bgcolor: "primary.light",
+                  borderRadius: "8px",
+                }}
+              >
+                <>
+                  <Box>
+                    <Typography
+                      variant="h5"
+                      sx={{ width: "80px" }}
+                      fontSize="16px"
+                      mb={1}
+                    >
+                      Empower Guides with AI!
+                    </Typography>
+                  </Box>
+                  <Box mt="-35px">
+                    <img
+                      width="94"
+                      height="94"
+                      src="https://img.icons8.com/3d-fluency/94/chatbot.png"
+                      alt="chatbot"
+                    />
+                  </Box>
+                </>
+              </Box>
             </Box>
           </Drawer>
         </Box>

From d87a98d8354532dd331787db1615a910ed51fa36 Mon Sep 17 00:00:00 2001
From: Ori <ori100no@gmail.com>
Date: Mon, 2 Sep 2024 10:52:01 +0300
Subject: [PATCH 234/242] fixed note button

---
 src/common/components/MessageInput/index.tsx | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/common/components/MessageInput/index.tsx b/src/common/components/MessageInput/index.tsx
index bcb31df..89e5736 100644
--- a/src/common/components/MessageInput/index.tsx
+++ b/src/common/components/MessageInput/index.tsx
@@ -9,7 +9,11 @@ type MessageInputProps = {
   isPopup?: boolean;
 };
 
-const MessageInput = ({ chatId, isSupport = true , isPopup = false }: MessageInputProps) => {
+const MessageInput = ({
+  chatId,
+  isSupport = true,
+  isPopup = false,
+}: MessageInputProps) => {
   const socket = useSocket();
 
   const { errors, handleChangeNote, handleSubmit, isNote, register } =
@@ -28,14 +32,15 @@ const MessageInput = ({ chatId, isSupport = true , isPopup = false }: MessageInp
       }}
     >
       {isSupport && (
-        <Box sx={{ display: "flex", alignSelf: "start" ,padding:1}}>
+        <Box sx={{ display: "flex", alignSelf: "start", padding: 1 }}>
           <Button
             color="note"
             variant={isNote ? "contained" : "outlined"}
             onClick={handleChangeNote}
             sx={{
-              color: isNote ? "inherit" : "rgba(0, 0, 0, 0.38)", 
-              borderColor: isNote ? "inherit" : "rgba(0, 0, 0, 0.38)",}}
+              color: "inherit",
+              borderColor: "inherit",
+            }}
           >
             Note
           </Button>

From 6cb77657013f38d163c36085ceae08e3f733146a Mon Sep 17 00:00:00 2001
From: Ori <ori100no@gmail.com>
Date: Mon, 2 Sep 2024 11:01:59 +0300
Subject: [PATCH 235/242] fixed guide card

---
 .../guides/components/GuideCard/index.tsx     | 30 ++++++++++++++-----
 1 file changed, 22 insertions(+), 8 deletions(-)

diff --git a/src/app/(admin)/new_dashboard/guides/components/GuideCard/index.tsx b/src/app/(admin)/new_dashboard/guides/components/GuideCard/index.tsx
index e2efb27..22f758e 100644
--- a/src/app/(admin)/new_dashboard/guides/components/GuideCard/index.tsx
+++ b/src/app/(admin)/new_dashboard/guides/components/GuideCard/index.tsx
@@ -1,4 +1,11 @@
-import { Card, CardContent, Typography, Box, Rating, Chip } from "@mui/material";
+import {
+  Card,
+  CardContent,
+  Typography,
+  Box,
+  Rating,
+  Chip,
+} from "@mui/material";
 import SupportIcon from "@mui/icons-material/Support";
 import { useTheme } from "@mui/material/styles";
 import { Guide } from "@/api/types/Guide";
@@ -9,22 +16,29 @@ type Props = {
 
 const GuideCard = ({ guide }: Props) => {
   const theme = useTheme();
-  const totalStars = guide.reviews?.reduce((acc, review) => acc + review.rating, 0) ?? 0;
+  const totalStars =
+    guide.reviews?.reduce((acc, review) => acc + review.rating, 0) ?? 0;
   const avgRating = totalStars / (guide.reviews?.length ?? 1);
 
   return (
-    <Card sx={{ minHeight:230, display: 'flex', flexDirection: 'column' }}>
-      <CardContent sx={{ flexGrow: 1, display: 'flex', flexDirection: 'column' }}>
+    <Card sx={{ minHeight: 230, display: "flex", flexDirection: "column" }}>
+      <CardContent
+        sx={{ flexGrow: 1, display: "flex", flexDirection: "column" }}
+      >
         <Box display="grid" alignItems="center" mb={1}>
           <Box display="flex" alignItems="center">
-            <SupportIcon color="primary" sx={{ marginRight: theme.spacing(1) }} />
+            <SupportIcon
+              color="primary"
+              sx={{ marginRight: theme.spacing(1) }}
+            />
             <Typography variant="h6">{guide.title}</Typography>
           </Box>
           <Typography variant="body2" color="text.primary" mb={2} mt={1} ml={1}>
-            Created at: {new Date(guide.createdAt).toLocaleDateString()}
+            Created by <b>{guide.creator?.username}</b> at{" "}
+            {new Date(guide.createdAt).toLocaleDateString()}
           </Typography>
         </Box>
-        
+
         <Box display="flex" flexWrap="wrap" mb={2}>
           {guide.categories.map((category) => (
             <Chip
@@ -41,7 +55,7 @@ const GuideCard = ({ guide }: Props) => {
             value={avgRating}
             precision={0.5}
             readOnly
-            sx={{ color: 'gold' }}
+            sx={{ color: "gold" }}
           />
           <Typography variant="body2" mx={1}>
             ({guide.reviews?.length ?? 0})

From 039983e5d33945de8a110f3607a4275520d81007 Mon Sep 17 00:00:00 2001
From: Ori <ori100no@gmail.com>
Date: Mon, 2 Sep 2024 11:19:03 +0300
Subject: [PATCH 236/242] put chat on the right side of the screen

---
 src/app/(admin)/new_dashboard/components/ChatPopup/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/(admin)/new_dashboard/components/ChatPopup/index.tsx b/src/app/(admin)/new_dashboard/components/ChatPopup/index.tsx
index 332d450..cefc392 100644
--- a/src/app/(admin)/new_dashboard/components/ChatPopup/index.tsx
+++ b/src/app/(admin)/new_dashboard/components/ChatPopup/index.tsx
@@ -23,7 +23,7 @@ const ChatPopup = ({ selectedContact, setIsOpen, isOpen }: Props) => {
       sx={{
         position: "fixed",
         bottom: 20,
-        right: 290,
+        right: isOpen ? 270 : 30,
         zIndex: 1500,
       }}
     >

From 35b0204dd851e7d636f7c116890bfeb7caef3317 Mon Sep 17 00:00:00 2001
From: Ori <ori100no@gmail.com>
Date: Mon, 2 Sep 2024 11:21:55 +0300
Subject: [PATCH 237/242] name is on the rigth and minimize is on the left

---
 src/app/(admin)/new_dashboard/components/ChatPopup/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/(admin)/new_dashboard/components/ChatPopup/index.tsx b/src/app/(admin)/new_dashboard/components/ChatPopup/index.tsx
index cefc392..ef890dc 100644
--- a/src/app/(admin)/new_dashboard/components/ChatPopup/index.tsx
+++ b/src/app/(admin)/new_dashboard/components/ChatPopup/index.tsx
@@ -66,13 +66,13 @@ const ChatPopup = ({ selectedContact, setIsOpen, isOpen }: Props) => {
                 alignItems: "center",
               }}
             >
+              <Typography variant="h6">{selectedContact.username}</Typography>
               <IconButton
                 onClick={toggleChat}
                 sx={{ color: "info.contrastText", mb: 1 }}
               >
                 <Minimize />
               </IconButton>
-              <Typography variant="h6">{selectedContact.username}</Typography>
             </Box>
 
             <Box

From afe39f201c7b8f7f4e16fdf260ed54f48ae86bd2 Mon Sep 17 00:00:00 2001
From: Ori <ori100no@gmail.com>
Date: Mon, 2 Sep 2024 11:39:22 +0300
Subject: [PATCH 238/242] changed avatar to an empty user image

---
 public/user.png                               | Bin 0 -> 531 bytes
 .../components/ContactCard/index.tsx          |  40 ++++++++++++++++++
 .../components/ContactList/index.tsx          |  28 +++---------
 .../components/ContactSidebar/index.tsx       |  24 +++--------
 4 files changed, 54 insertions(+), 38 deletions(-)
 create mode 100644 public/user.png
 create mode 100644 src/app/(admin)/new_dashboard/components/ContactCard/index.tsx

diff --git a/public/user.png b/public/user.png
new file mode 100644
index 0000000000000000000000000000000000000000..14ed98e4b03a3682d3f2346bd401e8870320f14a
GIT binary patch
literal 531
zcmV+u0_^>XP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800004b3#c}2nYxW
zd<bNS00009a7bBm0002&0002&0eL8Ky#N3J8FWQhbW?9;ba!ELWdL_~cP?peYja~^
zaAhuUa%Y?FJQ@H10gy>VK~z|U#n(S;6hR!u@y{J<DnW&40%GkSkW@)y8tW9XNl2MW
z5X91VAa>X28?X}t3F!l(1Y==ih)I_a5WFPU2_bNt7P||VaM``xnN1#enw_2B_u1K*
zomt9j3h%Lvzo~!W9VRQ(8(KH<3IB53!$;hR4Ijr&0leQk7>fnJij5NR%-_<!!FpK%
zp7}*6yn(%d0K1_9CIaA@ALjv@1pyvZ&pup@q5v_L)2)yIM-c+FLjwGa5MVR3z?SM0
zFc=OC0RiS>1ZZHj0(>Ry8%5Xgr3CzQ+9#^6;Vq7Hz{hx_#2!#(i0)z@PjN53wvRQ*
zR{Xm{&C65S5oqEz?qKvx+o9y6)0VuBXlh^vAJ9=e0XylvGa{^lX?!07dY(7%q$>Os
zx&iRaUA!&}Z$$u~b!%AoVh!-j&x_y>aZ+P|6Wq@Wuv{ZN^U`_nN0J|lx&!pmk;dr*
z$ukjmuN*ZnJE&n@{ZF6y>!1J!7Z~7A|8T$+$qX$zBgRq>Bj`5!E^J*89Dbxs{{h?;
Vhd$LB)yV(=002ovPDHLkV1g$x+GhX&

literal 0
HcmV?d00001

diff --git a/src/app/(admin)/new_dashboard/components/ContactCard/index.tsx b/src/app/(admin)/new_dashboard/components/ContactCard/index.tsx
new file mode 100644
index 0000000..c5b461d
--- /dev/null
+++ b/src/app/(admin)/new_dashboard/components/ContactCard/index.tsx
@@ -0,0 +1,40 @@
+import React from "react";
+import {
+  Box,
+  ListItemButton,
+  ListItemAvatar,
+  Avatar,
+  ListItemText,
+} from "@mui/material";
+import { Contact } from "../../types";
+
+interface ContactCardProps {
+  contact: Contact;
+  selected: boolean;
+  onSelect: (contact: Contact) => void;
+}
+
+const ContactCard: React.FC<ContactCardProps> = ({
+  contact,
+  selected,
+  onSelect,
+}) => {
+  return (
+    <Box>
+      <ListItemButton
+        selected={selected}
+        onClick={() => onSelect(contact)}
+        sx={{
+          borderRadius: 2,
+        }}
+      >
+        <ListItemAvatar>
+          <Avatar src={"SupportAI-Frontend/public/user.png"} />
+        </ListItemAvatar>
+        <ListItemText primary={contact.username} />
+      </ListItemButton>
+    </Box>
+  );
+};
+
+export default ContactCard;
diff --git a/src/app/(admin)/new_dashboard/components/ContactList/index.tsx b/src/app/(admin)/new_dashboard/components/ContactList/index.tsx
index e1e4d96..a4befb6 100644
--- a/src/app/(admin)/new_dashboard/components/ContactList/index.tsx
+++ b/src/app/(admin)/new_dashboard/components/ContactList/index.tsx
@@ -7,6 +7,7 @@ import {
   ListItemText,
 } from "@mui/material";
 import { Contact } from "../../types";
+import ContactCard from "../ContactCard";
 
 type Props = {
   contacts: Contact[];
@@ -31,27 +32,12 @@ const ContactList = ({ contacts, onSelectContact, selectedContact }: Props) => {
         ) : (
           <List>
             {contacts.map((contact, index) => (
-              <Box key={index} sx={{ padding: "0 8px" }}>
-                <ListItemButton
-                  selected={selectedContact?.chatId === contact.chatId}
-                  onClick={() => onSelectContact(contact)}
-                  sx={{
-                    backgroundColor:
-                      selectedContact?.chatId === contact.chatId
-                        ? "#f5f5f5"
-                        : "#ffffff",
-                    borderRadius: 0,
-                    marginRight: 0,
-                  }}
-                >
-                  <ListItemAvatar>
-                    <Avatar
-                      src={"https://bootdey.com/img/Content/avatar/avatar2.png"} // Maybe add later avatars to users
-                    />
-                  </ListItemAvatar>
-                  <ListItemText primary={contact.username} />
-                </ListItemButton>
-              </Box>
+              <ContactCard
+                key={index}
+                contact={contact}
+                selected={selectedContact?.chatId === contact.chatId}
+                onSelect={onSelectContact}
+              />
             ))}
           </List>
         )}
diff --git a/src/app/(admin)/new_dashboard/components/ContactSidebar/index.tsx b/src/app/(admin)/new_dashboard/components/ContactSidebar/index.tsx
index 43eef79..a46e42b 100644
--- a/src/app/(admin)/new_dashboard/components/ContactSidebar/index.tsx
+++ b/src/app/(admin)/new_dashboard/components/ContactSidebar/index.tsx
@@ -10,8 +10,8 @@ import {
     Typography,
     Slide,
   } from "@mui/material";
-  import { Contact } from "../../types";
   import { useChat } from "@/app/hooks/useChat";
+  import ContactCard from "../ContactCard";
   
   interface Props {
     isContactSidebarOpen: boolean;
@@ -62,22 +62,12 @@ import {
               </Box>
             ) : (
               contacts.map((contact, index) => (
-                <Box key={index} >
-                  <ListItemButton
-                    selected={selectedContact?.chatId === contact.chatId}
-                    onClick={() => handleContactSelect(contact)}
-                    sx={{
-                      borderRadius: 2,
-                    }}
-                  >
-                    <ListItemAvatar>
-                      <Avatar
-                        src={"https://bootdey.com/img/Content/avatar/avatar2.png"} 
-                      />
-                    </ListItemAvatar>
-                    <ListItemText primary={contact.username} />
-                  </ListItemButton>
-                </Box>
+                <ContactCard
+                key={index}
+                contact={contact}
+                selected={selectedContact?.chatId === contact.chatId}
+                onSelect={handleContactSelect}
+              />
               ))
             )}
           </List>

From a21de9d73e2c8157e0549ee21ce78f797fe36b97 Mon Sep 17 00:00:00 2001
From: Ori <ori100no@gmail.com>
Date: Mon, 2 Sep 2024 11:46:22 +0300
Subject: [PATCH 239/242] adjusted height

---
 src/app/(admin)/new_dashboard/components/ChatHeader/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/(admin)/new_dashboard/components/ChatHeader/index.tsx b/src/app/(admin)/new_dashboard/components/ChatHeader/index.tsx
index 1eabac4..3d0de4c 100644
--- a/src/app/(admin)/new_dashboard/components/ChatHeader/index.tsx
+++ b/src/app/(admin)/new_dashboard/components/ChatHeader/index.tsx
@@ -66,7 +66,7 @@ const ChatHeader = ({ selectedContact, handleContactSelect }: Props) => {
                   disabled={isLoading}
                   sx={{
                     width: "10.5rem",
-                    height: "36px",
+                    height: "40px",
                     textTransform: "none",
                   }}
                 >

From 166d1bee2897bc138e88bc7d77b0ef33934c9f54 Mon Sep 17 00:00:00 2001
From: roiy0987 <roiy0987@gmail.com>
Date: Mon, 2 Sep 2024 13:18:54 +0300
Subject: [PATCH 240/242] fix: remove unused user roles in
 ModelCreateGuideRequest

---
 src/api/guide.client.ts                       | 14 +++++-
 src/api/types/Guide.ts                        | 11 +++--
 src/api/types/model.ts                        |  2 +-
 .../new_dashboard/guides/[id]/page.tsx        | 15 ++++--
 .../guides/components/Buttons/index.tsx       | 38 +++++++++++++++
 .../guides/components/Editor/index.tsx        | 39 +++++++++------
 .../guides/create/hooks/useCreateGuide.ts     | 12 +----
 .../new_dashboard/guides/create/page.tsx      |  7 ++-
 .../guides/edit/[id]/hooks/useGetGuide.ts     | 25 ++++++++++
 .../guides/edit/[id]/hooks/useUpdateGuide.ts  | 47 +++++++++++++++++--
 .../new_dashboard/guides/edit/[id]/page.tsx   | 38 +++++++++++++--
 .../guides/hooks/useDeleteGuide.ts            | 16 +++++++
 .../guides/validations/guideSchema.ts         |  7 +++
 .../new_dashboard/shared/Card/index.tsx       | 30 +++++++++---
 src/hooks/api/guideHooks.ts                   | 15 +++++-
 src/hooks/api/modelHooks.ts                   |  1 -
 16 files changed, 260 insertions(+), 57 deletions(-)
 create mode 100644 src/app/(admin)/new_dashboard/guides/components/Buttons/index.tsx
 create mode 100644 src/app/(admin)/new_dashboard/guides/edit/[id]/hooks/useGetGuide.ts
 create mode 100644 src/app/(admin)/new_dashboard/guides/hooks/useDeleteGuide.ts
 create mode 100644 src/app/(admin)/new_dashboard/guides/validations/guideSchema.ts

diff --git a/src/api/guide.client.ts b/src/api/guide.client.ts
index 3afc510..cd265ec 100644
--- a/src/api/guide.client.ts
+++ b/src/api/guide.client.ts
@@ -1,6 +1,6 @@
 import { CreateReviewDto } from "@/app/(admin)/new_dashboard/guides/dto/CreateReviewDto";
 import { BaseClient } from "./base.client";
-import { CreateGuideRequest, Guide } from "./types/Guide";
+import { CreateGuideRequest, Guide, UpdateGuideRequest } from "./types/Guide";
 import { Review } from "./types/Review";
 
 export class GuideClient extends BaseClient {
@@ -15,4 +15,16 @@ export class GuideClient extends BaseClient {
   async createGuide(createGuideRequest: CreateGuideRequest) {
     return await this.post<Guide>("guides", createGuideRequest);
   }
+
+  async updateGuide(updateGuideRequest: UpdateGuideRequest) {
+    return await this.patch<Guide>("guides/" + updateGuideRequest.id, {
+      title: updateGuideRequest.title,
+      contentHTML: updateGuideRequest.contentHTML,
+      categories: updateGuideRequest.categories,
+    });
+  }
+
+  async deleteGuide(guideId: number) {
+    return await this.delete("guides/" + guideId);
+  }
 }
diff --git a/src/api/types/Guide.ts b/src/api/types/Guide.ts
index 9bf9a07..54bde28 100644
--- a/src/api/types/Guide.ts
+++ b/src/api/types/Guide.ts
@@ -15,8 +15,9 @@ const guideSchema = z.object({
 
 export type Guide = z.infer<typeof guideSchema>;
 
-export type CreateGuideRequest = {
-  title: string;
-  contentHTML: string;
-  categories: string[];
-};
+export type CreateGuideRequest = Pick<
+  Guide,
+  "title" | "categories" | "contentHTML"
+>;
+
+export type UpdateGuideRequest = Partial<CreateGuideRequest> & { id: number };
diff --git a/src/api/types/model.ts b/src/api/types/model.ts
index 998b7bc..e4a7a40 100644
--- a/src/api/types/model.ts
+++ b/src/api/types/model.ts
@@ -3,7 +3,7 @@ import { User } from "./User";
 
 export type ModelCreateGuideRequest = {
   messages: Pick<Message, "content" | "isSupportSender">[];
-  user: Pick<User, "roles" | "username">;
+  user: Pick<User, "username">;
 };
 
 export type ModelCreateGuideResponse = {
diff --git a/src/app/(admin)/new_dashboard/guides/[id]/page.tsx b/src/app/(admin)/new_dashboard/guides/[id]/page.tsx
index 9a68c91..91277fd 100644
--- a/src/app/(admin)/new_dashboard/guides/[id]/page.tsx
+++ b/src/app/(admin)/new_dashboard/guides/[id]/page.tsx
@@ -18,6 +18,7 @@ import ReviewList from "../components/ReviewList";
 import parse from "html-react-parser";
 import "quill/dist/quill.snow.css";
 import { useChat } from "@/app/hooks/useChat";
+import DeleteEditButtons from "../components/Buttons";
 
 const GuidePage: React.FC = () => {
   const params = useParams();
@@ -52,15 +53,19 @@ const GuidePage: React.FC = () => {
 
     return (
       <Box>
-        <DashboardCard title={guide.title} subtitle={creatorAndDateInfo}>
-          <Box 
-          className="quill-content"
-          sx={{backgroundColor:"bg.light", padding:5, borderRadius:3}}
+        <DashboardCard
+          buttons={<DeleteEditButtons />}
+          title={guide.title}
+          subtitle={creatorAndDateInfo}
+        >
+          <Box
+            className="quill-content"
+            sx={{ backgroundColor: "bg.light", padding: 5, borderRadius: 3 }}
           >
             {parse(guide.contentHTML)}
           </Box>
         </DashboardCard>
-         <ReviewList guideId={guide.id} reviews={guide.reviews ?? []} />
+        <ReviewList guideId={guide.id} reviews={guide.reviews ?? []} />
       </Box>
     );
   }
diff --git a/src/app/(admin)/new_dashboard/guides/components/Buttons/index.tsx b/src/app/(admin)/new_dashboard/guides/components/Buttons/index.tsx
new file mode 100644
index 0000000..dc7cf80
--- /dev/null
+++ b/src/app/(admin)/new_dashboard/guides/components/Buttons/index.tsx
@@ -0,0 +1,38 @@
+"use client";
+import React from "react";
+import { Box, IconButton } from "@mui/material";
+import ModeEditOutlineOutlinedIcon from "@mui/icons-material/ModeEditOutlineOutlined";
+import DeleteOutlinedIcon from "@mui/icons-material/DeleteOutlined";
+import { useParams, useRouter } from "next/navigation";
+import { useDeleteGuide } from "../../hooks/useDeleteGuide";
+
+const DeleteEditButtons = () => {
+  const router = useRouter();
+  const params = useParams();
+
+  const id = params?.id ? Number(params.id) : 0;
+
+  const { handleDelete } = useDeleteGuide(id);
+
+  const handleEdit = () => {
+    router.push(`/new_dashboard/guides/edit/${id}`);
+  };
+
+  return (
+    <Box
+      sx={{
+        display: "flex",
+        gap: 0,
+      }}
+    >
+      <IconButton aria-label="edit" onClick={handleEdit}>
+        <ModeEditOutlineOutlinedIcon />
+      </IconButton>
+      <IconButton aria-label="delete" onClick={handleDelete}>
+        <DeleteOutlinedIcon />
+      </IconButton>
+    </Box>
+  );
+};
+
+export default DeleteEditButtons;
diff --git a/src/app/(admin)/new_dashboard/guides/components/Editor/index.tsx b/src/app/(admin)/new_dashboard/guides/components/Editor/index.tsx
index 257abd6..f64e9bf 100644
--- a/src/app/(admin)/new_dashboard/guides/components/Editor/index.tsx
+++ b/src/app/(admin)/new_dashboard/guides/components/Editor/index.tsx
@@ -1,24 +1,30 @@
 import dynamic from "next/dynamic";
-import { useState } from "react";
+import {
+  BaseSyntheticEvent,
+  FormEventHandler,
+  useEffect,
+  useState,
+} from "react";
 import "react-quill/dist/quill.snow.css";
 import { Box, Button, TextField, Autocomplete, Chip } from "@mui/material";
 import SaveAsIcon from "@mui/icons-material/SaveAs";
 import {
+  SubmitHandler,
   UseFormRegister,
   UseFormSetValue,
   UseFormWatch,
 } from "react-hook-form";
 import { CreateGuideRequest } from "@/api/types/Guide";
+import { LoadingButton } from "@mui/lab";
 
 const DynamicReactQuill = dynamic(() => import("react-quill"));
 
 interface Props {
   initialTitle?: string;
   initialContent?: string;
-  categories: string[];
-  selectedCategories: string[];
-  handleCategoryChange: (event: any, newValue: string[]) => void;
-  onSave: () => void;
+  categories?: string[];
+  allCategories?: string[];
+  onSave: (e?: BaseSyntheticEvent) => void;
   register: UseFormRegister<CreateGuideRequest>;
   error: Error | null;
   setValue: UseFormSetValue<CreateGuideRequest>;
@@ -29,9 +35,8 @@ const GuideEditor = ({
   initialContent = "",
   initialTitle = "",
   categories,
-  selectedCategories,
-  handleCategoryChange,
   onSave,
+  allCategories = ["Internet", "Router", "Wi-Fi", "Network"],
   register,
   error,
   setValue,
@@ -68,7 +73,7 @@ const GuideEditor = ({
   ];
 
   return (
-    <>
+    <Box component="form" onSubmit={onSave} noValidate>
       <TextField
         {...register("title")}
         label="Title"
@@ -82,9 +87,13 @@ const GuideEditor = ({
       <Autocomplete
         multiple
         freeSolo
-        options={categories}
-        value={selectedCategories}
-        onChange={handleCategoryChange}
+        options={allCategories}
+        defaultValue={categories}
+        {...register("categories")}
+        value={watch("categories") || categories}
+        onChange={(event, newValue) => {
+          setValue("categories", newValue);
+        }}
         renderTags={(value: string[], getTagProps) =>
           value.map((option: string, index: number) => (
             <Box key={index}>
@@ -118,16 +127,16 @@ const GuideEditor = ({
       <input type="hidden" {...register("contentHTML")} />
 
       <Box display="flex" flexDirection="column" alignItems="flex-end" mt={6}>
-        <Button
+        <LoadingButton
           variant="contained"
           color="primary"
           startIcon={<SaveAsIcon />}
-          onClick={() => onSave()}
+          type="submit"
         >
           Save Guide
-        </Button>
+        </LoadingButton>
       </Box>
-    </>
+    </Box>
   );
 };
 
diff --git a/src/app/(admin)/new_dashboard/guides/create/hooks/useCreateGuide.ts b/src/app/(admin)/new_dashboard/guides/create/hooks/useCreateGuide.ts
index 99efd29..33ff433 100644
--- a/src/app/(admin)/new_dashboard/guides/create/hooks/useCreateGuide.ts
+++ b/src/app/(admin)/new_dashboard/guides/create/hooks/useCreateGuide.ts
@@ -38,21 +38,11 @@ export const useGuide = () => {
     });
   };
 
-  const {categories} = useCategories();
-  const [selectedCategories, setSelectedCategories] = useState<string[]>(watch("categories") || []);
-  const handleCategoryChange = (event: any, newValue: string[]) => {
-    if (newValue.length <= 3) {
-      setSelectedCategories(newValue);
-      setValue("categories", newValue);
-    }
-  };
-
+  const { categories } = useCategories();
 
   return {
     guide,
     categories,
-    selectedCategories,
-    handleCategoryChange,
     register,
     setValue,
     watch,
diff --git a/src/app/(admin)/new_dashboard/guides/create/page.tsx b/src/app/(admin)/new_dashboard/guides/create/page.tsx
index 2228e2a..705d85d 100644
--- a/src/app/(admin)/new_dashboard/guides/create/page.tsx
+++ b/src/app/(admin)/new_dashboard/guides/create/page.tsx
@@ -7,7 +7,8 @@ import { useGuide } from "./hooks/useCreateGuide";
 import { useCategories } from "../hooks/useCategories";
 
 const Page = () => {
-  const { guide,categories,selectedCategories,handleCategoryChange ,register, error, handleSubmit, setValue, watch } = useGuide();
+  const { guide, categories, register, error, handleSubmit, setValue, watch } =
+    useGuide();
   return (
     <PageContainer title="Create Guide">
       <Box
@@ -19,10 +20,8 @@ const Page = () => {
           <GuideEditor
             register={register}
             setValue={setValue}
-            selectedCategories={selectedCategories}
-            handleCategoryChange={handleCategoryChange}
             watch={watch}
-            categories={categories}
+            allCategories={categories}
             error={error}
             onSave={handleSubmit}
             initialTitle={guide?.title}
diff --git a/src/app/(admin)/new_dashboard/guides/edit/[id]/hooks/useGetGuide.ts b/src/app/(admin)/new_dashboard/guides/edit/[id]/hooks/useGetGuide.ts
new file mode 100644
index 0000000..6ffb655
--- /dev/null
+++ b/src/app/(admin)/new_dashboard/guides/edit/[id]/hooks/useGetGuide.ts
@@ -0,0 +1,25 @@
+import { Guide } from "@/api/types/Guide";
+import { useOnFetch } from "@/common/hooks/useOnFetch";
+import { useGuide } from "@/hooks";
+import { ClientResponse, SuccessResponse } from "@/types";
+import { useState } from "react";
+
+export const useGetGuide = (id: number) => {
+  const { data, isError, error, isLoading } = useGuide(id);
+  const [guide, setGuide] = useState<Guide>();
+
+  useOnFetch(
+    (clientResponse: ClientResponse<Guide>) => {
+      if (isError) {
+        throw error;
+      } else {
+        const successResponse = clientResponse as SuccessResponse<Guide>;
+        setGuide(successResponse.data);
+      }
+    },
+    !!data || isError,
+    data
+  );
+
+  return { guide, isLoading };
+};
diff --git a/src/app/(admin)/new_dashboard/guides/edit/[id]/hooks/useUpdateGuide.ts b/src/app/(admin)/new_dashboard/guides/edit/[id]/hooks/useUpdateGuide.ts
index 3b23f43..2c9611b 100644
--- a/src/app/(admin)/new_dashboard/guides/edit/[id]/hooks/useUpdateGuide.ts
+++ b/src/app/(admin)/new_dashboard/guides/edit/[id]/hooks/useUpdateGuide.ts
@@ -1,7 +1,46 @@
-export const useUpdateGuide = () => {
-  const handleSave = (content: string) => {
-    console.log("Saving new guide:", content);
+import { CreateGuideRequest, UpdateGuideRequest } from "@/api/types/Guide";
+import { useUpdateGuide } from "@/hooks";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useForm } from "react-hook-form";
+import { schema } from "../../../validations/guideSchema";
+import { useRouter } from "next/navigation";
+
+export const useUpdateGuideHook = (id: number) => {
+  const {
+    register,
+    handleSubmit,
+    setValue,
+    watch,
+    formState: { errors },
+  } = useForm<CreateGuideRequest>({
+    resolver: zodResolver(schema),
+    mode: "onChange",
+    reValidateMode: "onChange",
+  });
+  const router = useRouter();
+  const { mutate, isError, error } = useUpdateGuide();
+
+  const handleSave = (createGuideRequest: CreateGuideRequest) => {
+    mutate(
+      { ...createGuideRequest, id },
+      {
+        onSuccess: () => {
+          router.push("/new_dashboard/guides/" + id);
+        },
+        onError: (error) => {
+          console.log(error);
+        },
+      }
+    );
   };
 
-  return { handleSave };
+  return {
+    register,
+    handleSubmit: handleSubmit(handleSave),
+    setValue,
+    errors,
+    isServerError: isError,
+    serverError: error,
+    watch,
+  };
 };
diff --git a/src/app/(admin)/new_dashboard/guides/edit/[id]/page.tsx b/src/app/(admin)/new_dashboard/guides/edit/[id]/page.tsx
index 0c6eb8c..6dd4176 100644
--- a/src/app/(admin)/new_dashboard/guides/edit/[id]/page.tsx
+++ b/src/app/(admin)/new_dashboard/guides/edit/[id]/page.tsx
@@ -3,10 +3,33 @@ import PageContainer from "@/components/PageContainer";
 import DashboardCard from "../../../shared/Card";
 import { Box } from "@mui/material";
 import GuideEditor from "../../components/Editor";
-import { useUpdateGuide } from "./hooks/useUpdateGuide";
+import { useUpdateGuideHook } from "./hooks/useUpdateGuide";
+import { useParams } from "next/navigation";
+import { useGetGuide } from "./hooks/useGetGuide";
+import { useEffect } from "react";
 
 const Page = () => {
-  const { handleSave } = useUpdateGuide();
+  const params = useParams();
+  const id = params?.id ? Number(params.id) : 0;
+  const { register, handleSubmit, serverError, setValue, watch } =
+    useUpdateGuideHook(id);
+
+  const { guide, isLoading } = useGetGuide(id);
+  useEffect(() => {
+    if (guide) {
+      setValue("title", guide?.title);
+      setValue("categories", guide?.categories);
+      setValue("contentHTML", guide?.contentHTML);
+    }
+  }, [guide]);
+  if (isLoading) {
+    return "Loading...";
+  }
+
+  const handleSave = (e) => {
+    e.preventDefault();
+    handleSubmit();
+  };
 
   return (
     <PageContainer title="Edit Guide">
@@ -16,7 +39,16 @@ const Page = () => {
         }}
       >
         <DashboardCard title="Edit Guide" fullHeight>
-          <GuideEditor onSave={handleSave} />
+          <GuideEditor
+            onSave={handleSave} // Ensure handleSubmit is passed correctly
+            register={register}
+            setValue={setValue}
+            initialContent={guide?.contentHTML}
+            initialTitle={guide?.title}
+            categories={guide?.categories || []}
+            watch={watch}
+            error={serverError}
+          />
         </DashboardCard>
       </Box>
     </PageContainer>
diff --git a/src/app/(admin)/new_dashboard/guides/hooks/useDeleteGuide.ts b/src/app/(admin)/new_dashboard/guides/hooks/useDeleteGuide.ts
new file mode 100644
index 0000000..4bb07e9
--- /dev/null
+++ b/src/app/(admin)/new_dashboard/guides/hooks/useDeleteGuide.ts
@@ -0,0 +1,16 @@
+import { useDeleteGuide as useDeleteGuideHook } from "@/hooks";
+import { useRouter } from "next/navigation";
+
+export const useDeleteGuide = (id: number) => {
+  const router = useRouter();
+  const { mutate, error, isError } = useDeleteGuideHook();
+
+  const handleDelete = () => {
+    mutate(id, {
+      onSuccess: () => {
+        router.push("/new_dashboard/guides");
+      },
+    });
+  };
+  return { handleDelete, error, isError };
+};
diff --git a/src/app/(admin)/new_dashboard/guides/validations/guideSchema.ts b/src/app/(admin)/new_dashboard/guides/validations/guideSchema.ts
new file mode 100644
index 0000000..04cfef3
--- /dev/null
+++ b/src/app/(admin)/new_dashboard/guides/validations/guideSchema.ts
@@ -0,0 +1,7 @@
+import { z } from "zod";
+
+export const schema = z.object({
+  contentHTML: z.string().min(1, "Content is required"),
+  title: z.string().min(1, "Title is required"),
+  categories: z.array(z.string()).max(3, "You can select up to 3 categories"),
+});
diff --git a/src/app/(admin)/new_dashboard/shared/Card/index.tsx b/src/app/(admin)/new_dashboard/shared/Card/index.tsx
index 9a6722d..4439eb5 100644
--- a/src/app/(admin)/new_dashboard/shared/Card/index.tsx
+++ b/src/app/(admin)/new_dashboard/shared/Card/index.tsx
@@ -12,6 +12,7 @@ type Props = {
   middlecontent?: string | JSX.Element;
   fullHeight?: boolean;
   isVisibleBorder?: boolean;
+  buttons?: JSX.Element;
 };
 
 const DashboardCard = ({
@@ -21,6 +22,7 @@ const DashboardCard = ({
   action,
   footer,
   cardheading,
+  buttons,
   headtitle,
   headsubtitle,
   middlecontent,
@@ -57,17 +59,33 @@ const DashboardCard = ({
               alignItems={"center"}
               mb={3}
             >
-              <Box>
-                {title ? <Typography variant="h3">{title}</Typography> : ""}
+              <Box
+                sx={{
+                  display: "flex",
+                  justifyContent: "space-between",
+                  width: "100%",
+                }}
+              >
+                <Box>
+                  {title ? <Typography variant="h3">{title}</Typography> : ""}
 
-                {subtitle ? (
-                  <Typography variant="subtitle2" color="text.primary">
-                    {subtitle}
-                  </Typography>
+                  {subtitle ? (
+                    <Typography variant="subtitle2" color="text.primary">
+                      {subtitle}
+                    </Typography>
+                  ) : (
+                    ""
+                  )}
+                </Box>
+                {buttons ? (
+                  <Box mt={1} ml={5}>
+                    {buttons}
+                  </Box>
                 ) : (
                   ""
                 )}
               </Box>
+
               {action}
             </Stack>
           ) : null}
diff --git a/src/hooks/api/guideHooks.ts b/src/hooks/api/guideHooks.ts
index 2a087a1..32a64c1 100644
--- a/src/hooks/api/guideHooks.ts
+++ b/src/hooks/api/guideHooks.ts
@@ -1,5 +1,5 @@
 import { GuideClient } from "@/api/guide.client";
-import { CreateGuideRequest } from "@/api/types/Guide";
+import { CreateGuideRequest, UpdateGuideRequest } from "@/api/types/Guide";
 import { useQuery, useMutation } from "@tanstack/react-query";
 
 const guideClient = new GuideClient();
@@ -15,6 +15,7 @@ export function useGuide(guideId: number) {
   return useQuery({
     queryKey: ["guide", guideId],
     queryFn: () => guideClient.getGuide(guideId),
+    refetchOnWindowFocus: false,
   });
 }
 
@@ -23,3 +24,15 @@ export function useCreateGuide() {
     mutationFn: (data: CreateGuideRequest) => guideClient.createGuide(data),
   });
 }
+
+export function useUpdateGuide() {
+  return useMutation({
+    mutationFn: (data: UpdateGuideRequest) => guideClient.updateGuide(data),
+  });
+}
+
+export function useDeleteGuide() {
+  return useMutation({
+    mutationFn: (guideId: number) => guideClient.deleteGuide(guideId),
+  });
+}
diff --git a/src/hooks/api/modelHooks.ts b/src/hooks/api/modelHooks.ts
index 6616b47..c2f4cb8 100644
--- a/src/hooks/api/modelHooks.ts
+++ b/src/hooks/api/modelHooks.ts
@@ -16,7 +16,6 @@ export function useModelGenerateGuide() {
       const chat = (chatResponse as SuccessResponse<Chat>).data;
       return modelClient.createGuide({
         user: {
-          roles: chat.user.roles,
           username: chat.user.username,
         },
         messages: chat.messages.map((message) => ({

From 581b62c2cca74558ecba52465a59ff9c957be960 Mon Sep 17 00:00:00 2001
From: Ori <ori100no@gmail.com>
Date: Mon, 2 Sep 2024 15:05:23 +0300
Subject: [PATCH 241/242] fixed save guide button

---
 .../guides/components/Editor/index.tsx        | 39 +++++++++++++------
 1 file changed, 28 insertions(+), 11 deletions(-)

diff --git a/src/app/(admin)/new_dashboard/guides/components/Editor/index.tsx b/src/app/(admin)/new_dashboard/guides/components/Editor/index.tsx
index f64e9bf..85d979a 100644
--- a/src/app/(admin)/new_dashboard/guides/components/Editor/index.tsx
+++ b/src/app/(admin)/new_dashboard/guides/components/Editor/index.tsx
@@ -1,15 +1,9 @@
 import dynamic from "next/dynamic";
-import {
-  BaseSyntheticEvent,
-  FormEventHandler,
-  useEffect,
-  useState,
-} from "react";
+import { BaseSyntheticEvent, useEffect, useState } from "react";
 import "react-quill/dist/quill.snow.css";
 import { Box, Button, TextField, Autocomplete, Chip } from "@mui/material";
 import SaveAsIcon from "@mui/icons-material/SaveAs";
 import {
-  SubmitHandler,
   UseFormRegister,
   UseFormSetValue,
   UseFormWatch,
@@ -73,7 +67,15 @@ const GuideEditor = ({
   ];
 
   return (
-    <Box component="form" onSubmit={onSave} noValidate>
+    <Box
+      component="form"
+      onSubmit={onSave}
+      noValidate
+      sx={{
+        maxWidth: "100%",
+        padding: "1rem",
+      }}
+    >
       <TextField
         {...register("title")}
         label="Title"
@@ -120,18 +122,33 @@ const GuideEditor = ({
         theme="snow"
         modules={modules}
         formats={formats}
-        style={{ height: "550px" }}
-        defaultValue={initialContent} // Initial content for the editor
+        style={{
+          height: "45vh",
+          minHeight: "300px",
+        }}
+        defaultValue={initialContent}
         onChange={(content) => setValue("contentHTML", content)}
       />
       <input type="hidden" {...register("contentHTML")} />
 
-      <Box display="flex" flexDirection="column" alignItems="flex-end" mt={6}>
+      <Box
+        display="flex"
+        flexDirection="column"
+        alignItems="flex-end"
+        mt={6}
+        sx={{
+          width: "100%",
+          bottom: "4rem",
+        }}
+      >
         <LoadingButton
           variant="contained"
           color="primary"
           startIcon={<SaveAsIcon />}
           type="submit"
+          sx={{
+            width: "15%",
+          }}
         >
           Save Guide
         </LoadingButton>

From 3e8724011184e8e850ef0e3b75a90a8e23ba6ab2 Mon Sep 17 00:00:00 2001
From: Tomer <tomermi123@gmail.com>
Date: Mon, 2 Sep 2024 15:14:32 +0300
Subject: [PATCH 242/242] feat: reverse order of contacts in ContactList
 component

---
 .../(admin)/new_dashboard/components/ContactList/index.tsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/app/(admin)/new_dashboard/components/ContactList/index.tsx b/src/app/(admin)/new_dashboard/components/ContactList/index.tsx
index a4befb6..7fe2887 100644
--- a/src/app/(admin)/new_dashboard/components/ContactList/index.tsx
+++ b/src/app/(admin)/new_dashboard/components/ContactList/index.tsx
@@ -16,6 +16,9 @@ type Props = {
 };
 
 const ContactList = ({ contacts, onSelectContact, selectedContact }: Props) => {
+  
+  const reversedContacts = [...contacts].reverse();
+  
   return (
     <Box
       sx={{
@@ -25,13 +28,13 @@ const ContactList = ({ contacts, onSelectContact, selectedContact }: Props) => {
       }}
     >
       <List>
-        {contacts.length === 0 ? (
+        {reversedContacts.length === 0 ? (
           <Box sx={{ padding: "16px", textAlign: "center", color: "#888" }}>
             No chats yet!
           </Box>
         ) : (
           <List>
-            {contacts.map((contact, index) => (
+            {reversedContacts.map((contact, index) => (
               <ContactCard
                 key={index}
                 contact={contact}