Index: client/src/Dashboard/components/Forum.jsx
===================================================================
--- client/src/Dashboard/components/Forum.jsx	(revision 909821d87b77e470a89d64f5600d2259fb44dc15)
+++ client/src/Dashboard/components/Forum.jsx	(revision f2c1b898bcfc944f1487e139522c8f90224abccb)
@@ -1,12 +1,12 @@
-import React, { useState, useEffect, useCallback } from 'react';
-import { useNavigate, useSearchParams } from 'react-router-dom';
-import commentIcon from '../../assets/images/comment.svg';
-import trashIcon from '../../assets/images/delete.svg';
-import Navbar from './Navbar';
-import { getForumPosts, deleteForumPost } from '@/services/forumService';
-import { useAuth } from '@/contexts/AuthContext';
-import { DatePicker } from 'react-daisyui-timetools';
-import 'react-datepicker/dist/react-datepicker.css';
-import CalendarPopover from './CalendarPopover';
+import React, { useState, useEffect, useCallback } from "react";
+import { useNavigate, useSearchParams } from "react-router-dom";
+import commentIcon from "../../assets/images/comment.svg";
+import trashIcon from "../../assets/images/delete.svg";
+import Navbar from "./Navbar";
+import { getForumPosts, deleteForumPost } from "@/services/forumService";
+import { useAuth } from "@/contexts/AuthContext";
+import { DatePicker } from "react-daisyui-timetools";
+import "react-datepicker/dist/react-datepicker.css";
+import CalendarPopover from "./CalendarPopover";
 // import { useForumSearchParams } from "../../contexts/ForumSearchParamsContext";
 const Forum = () => {
@@ -22,6 +22,6 @@
   const [modal, setModal] = useState({
     isOpen: false,
-    message: '',
-    type: '',
+    message: "",
+    type: "",
     postId: null,
   });
@@ -31,9 +31,9 @@
 
   const defaultFilters = {
-    topic: 'all',
-    dateSort: 'newest',
+    topic: "all",
+    dateSort: "newest",
     selectedDate: null,
-    commentSort: 'none',
-    searchText: '',
+    commentSort: "none",
+    searchText: "",
   };
 
@@ -49,10 +49,10 @@
   const [showFilters, setShowFilters] = useState(false);
 
-  const showModal = (message, type = 'info', postId = null) => {
+  const showModal = (message, type = "info", postId = null) => {
     setModal({ isOpen: true, message, type, postId });
   };
 
   const closeModal = () => {
-    setModal({ isOpen: false, message: '', type: '', postId: null });
+    setModal({ isOpen: false, message: "", type: "", postId: null });
   };
 
@@ -101,8 +101,8 @@
         setPage(pageNum);
       } catch (error) {
-        console.error('Error fetching forum posts:', error);
+        console.error("Error fetching forum posts:", error);
 
         if (error.response) {
-          console.error('Error response:', error.response);
+          console.error("Error response:", error.response);
         }
 
@@ -118,5 +118,5 @@
   );
   useEffect(() => {
-    const pageFromUrl = parseInt(forumSearchParams.get('page') || '1', 10);
+    const pageFromUrl = parseInt(forumSearchParams.get("page") || "1", 10);
     const filtersFromUrl = { ...defaultFilters };
     for (const [key, value] of forumSearchParams.entries()) {
@@ -138,5 +138,5 @@
       }
     }
-    newSearchParams.set('page', '1');
+    newSearchParams.set("page", "1");
     setForumSearchParams(newSearchParams);
   };
@@ -150,5 +150,5 @@
       newSearchParams.delete(filterKey);
       setPage(1);
-      newSearchParams.set('page', '1');
+      newSearchParams.set("page", "1");
       setForumSearchParams(newSearchParams);
     }
@@ -160,5 +160,5 @@
     const freshDefaultFilters = { ...defaultFilters };
     setFilters(freshDefaultFilters);
-    setForumSearchParams({ page: '1' });
+    setForumSearchParams({ page: "1" });
 
     setPage(1);
@@ -172,15 +172,15 @@
 
       await fetchPosts(1, false, { ...filters });
-      showModal('Post deleted successfully.', 'success');
+      showModal("Post deleted successfully.", "success");
     } catch (error) {
-      console.error('Error deleting post:', error);
+      console.error("Error deleting post:", error);
     }
   };
   const formatFilterLabel = (value) => {
-    if (!value) return '';
+    if (!value) return "";
     return value
-      .split('-')
+      .split("-")
       .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
-      .join(' ');
+      .join(" ");
   };
 
@@ -193,5 +193,5 @@
             <div className="pt-3 pr-3 flex gap-3 justify-end">
               <button
-                onClick={() => navigate('/dashboard/create-post')}
+                onClick={() => navigate("/dashboard/create-post")}
                 className="btn bg-[#FFB800] text-black btn-sm gap-1"
               >
@@ -245,6 +245,6 @@
                     Filters
                     {/* Active filter count indicator */}
-                    {(filters.topic !== 'all' ||
-                      filters.dateSort !== 'newest' ||
+                    {(filters.topic !== "all" ||
+                      filters.dateSort !== "newest" ||
                       filters.selectedDate ||
                       (filters.searchText && filters.searchText.trim())) && (
@@ -252,8 +252,8 @@
                         {
                           [
-                            filters.topic !== 'all',
-                            filters.dateSort !== 'newest',
+                            filters.topic !== "all",
+                            filters.dateSort !== "newest",
                             filters.selectedDate,
-                            filters.commentSort !== 'none',
+                            filters.commentSort !== "none",
                             filters.searchText && filters.searchText.trim(),
                           ].filter(Boolean).length
@@ -268,5 +268,5 @@
                     <svg
                       className={`w-5 h-5 transition-transform duration-200 ${
-                        showFilters ? 'rotate-180' : ''
+                        showFilters ? "rotate-180" : ""
                       }`}
                       fill="none"
@@ -287,5 +287,5 @@
                 <div
                   className={`transition-all duration-300 ${
-                    showFilters ? 'block opacity-100' : 'hidden opacity-0'
+                    showFilters ? "block opacity-100" : "hidden opacity-0"
                   } lg:block lg:opacity-100`}
                 >
@@ -309,5 +309,5 @@
                           }
                           onKeyDown={(e) => {
-                            if (e.key === 'Enter') {
+                            if (e.key === "Enter") {
                               applyFilters();
                             }
@@ -412,10 +412,10 @@
                                 ? new Date(
                                     filters.selectedDate
-                                  ).toLocaleDateString('en-US', {
-                                    year: 'numeric',
-                                    month: 'short',
-                                    day: 'numeric',
+                                  ).toLocaleDateString("en-US", {
+                                    year: "numeric",
+                                    month: "short",
+                                    day: "numeric",
                                   })
-                                : '' // Use empty string so placeholder is visible
+                                : "" // Use empty string so placeholder is visible
                             }
                             placeholder="Select date"
@@ -458,6 +458,6 @@
                       </label>
                       <div className="flex gap-1.5">
-                        {(filters.topic !== 'all' ||
-                          filters.dateSort !== 'newest' ||
+                        {(filters.topic !== "all" ||
+                          filters.dateSort !== "newest" ||
                           filters.selectedDate ||
                           (filters.searchText &&
@@ -488,15 +488,15 @@
                   {/* Active Filters Display - Improved Mobile Layout */}
                   <div className="flex flex-wrap gap-1.5 sm:gap-2">
-                    {filters.topic !== 'all' && (
+                    {filters.topic !== "all" && (
                       <span className="badge badge-outline badge-sm flex items-center gap-1 px-2 py-1">
                         <span className="font-medium text-xs">
-                          {filters.topic === 'general'
-                            ? 'General'
-                            : 'Daily Challenge'}
+                          {filters.topic === "general"
+                            ? "General"
+                            : "Daily Challenge"}
                         </span>
                         <button
                           type="button"
                           className="ml-1 text-xs font-bold hover:text-error hover:cursor-pointer focus:outline-none"
-                          onClick={() => handleRemoveFilter('topic')}
+                          onClick={() => handleRemoveFilter("topic")}
                           aria-label="Remove topic filter"
                         >
@@ -513,5 +513,5 @@
                           type="button"
                           className="ml-1 text-xs font-bold hover:text-error hover:cursor-pointer focus:outline-none"
-                          onClick={() => handleRemoveFilter('searchText')}
+                          onClick={() => handleRemoveFilter("searchText")}
                           aria-label="Remove search filter"
                         >
@@ -520,5 +520,5 @@
                       </span>
                     )}
-                    {filters.commentSort != 'none' &&
+                    {filters.commentSort != "none" &&
                       filters.commentSort.trim() && (
                         <span className="badge badge-outline badge-sm flex items-center gap-1 px-2 py-1 max-w-[200px]">
@@ -529,5 +529,5 @@
                             type="button"
                             className="ml-1 text-xs font-bold hover:text-error hover:cursor-pointer focus:outline-none"
-                            onClick={() => handleRemoveFilter('commentSort')}
+                            onClick={() => handleRemoveFilter("commentSort")}
                             aria-label="Remove search filter"
                           >
@@ -537,5 +537,5 @@
                       )}
 
-                    {filters.dateSort !== 'newest' && (
+                    {filters.dateSort !== "newest" && (
                       <span className="badge badge-outline badge-sm flex items-center gap-1 px-2 py-1">
                         <span className="font-medium text-xs">
@@ -545,5 +545,5 @@
                           type="button"
                           className="ml-1 text-xs font-bold hover:text-error hover:cursor-pointer focus:outline-none"
-                          onClick={() => handleRemoveFilter('dateSort')}
+                          onClick={() => handleRemoveFilter("dateSort")}
                           aria-label="Remove sort filter"
                         >
@@ -556,9 +556,9 @@
                         <span className="font-medium text-xs">
                           {new Date(filters.selectedDate).toLocaleDateString(
-                            'en-US',
+                            "en-US",
                             {
-                              year: 'numeric',
-                              month: 'short',
-                              day: 'numeric',
+                              year: "numeric",
+                              month: "short",
+                              day: "numeric",
                             }
                           )}
@@ -567,5 +567,5 @@
                           type="button"
                           className="ml-1 text-xs font-bold hover:text-error hover:cursor-pointer focus:outline-none"
-                          onClick={() => handleRemoveFilter('selectedDate')}
+                          onClick={() => handleRemoveFilter("selectedDate")}
                           aria-label="Remove date filter"
                         >
@@ -606,5 +606,5 @@
               ) : (
                 // Replace your current grid container with this responsive grid
-                <div className="grid grid-cols-1 md:grid-cols-2 2xl:grid-cols-2 3xl:grid-cols-4 gap-4 lg:gap-6">
+                <div className="grid grid-cols-1 md:grid-cols-2 2xl:grid-cols-4 3xl:grid-cols-4 gap-4 lg:gap-6">
                   {posts.map((post) => (
                     <div
@@ -621,6 +621,6 @@
                               e.stopPropagation();
                               showModal(
-                                'Are you sure you want to delete this post? This action cannot be undone.',
-                                'confirm',
+                                "Are you sure you want to delete this post? This action cannot be undone.",
+                                "confirm",
                                 post.id
                               );
@@ -652,12 +652,12 @@
                           <span
                             className={`inline-block text-xs font-medium px-1 py-0.5 rounded ${
-                              post.topic === 'general'
-                                ? 'bg-blue-100 text-blue-800'
-                                : 'bg-green-100 text-green-800'
+                              post.topic === "general"
+                                ? "bg-blue-100 text-blue-800"
+                                : "bg-green-100 text-green-800"
                             }`}
                           >
-                            {post.topic === 'general'
-                              ? 'General'
-                              : 'Daily Challenge'}
+                            {post.topic === "general"
+                              ? "General"
+                              : "Daily Challenge"}
                           </span>
                           {post.challengeTitle && (
@@ -669,5 +669,5 @@
 
                         <p className="text-xs text-base-content/70 mb-1 sm:mb-2">
-                          By{' '}
+                          By{" "}
                           <span className="font-semibold">
                             {post.author_name}
@@ -676,9 +676,9 @@
                           <span className="italic">
                             {new Date(post.date_created).toLocaleDateString(
-                              'en-US',
+                              "en-US",
                               {
-                                year: 'numeric',
-                                month: 'short',
-                                day: 'numeric',
+                                year: "numeric",
+                                month: "short",
+                                day: "numeric",
                               }
                             )}
@@ -688,5 +688,5 @@
                         <p className="hidden sm:block text-sm md:text-xs lg:text-sm text-base-content/80 line-clamp-1 mb-auto">
                           {post.content && post.content.length > 50
-                            ? post.content.slice(0, 50) + '...'
+                            ? post.content.slice(0, 50) + "..."
                             : post.content}
                         </p>
@@ -723,5 +723,5 @@
                     onClick={() => {
                       const newPage = page - 1;
-                      forumSearchParams.set('page', newPage.toString());
+                      forumSearchParams.set("page", newPage.toString());
                       setForumSearchParams(forumSearchParams);
                     }}
@@ -736,8 +736,8 @@
                       key={idx}
                       className={`btn btn-sm px-2 sm:px-3 ${
-                        page - 1 === idx ? 'border-amber-400' : 'btn-ghost'
+                        page - 1 === idx ? "border-amber-400" : "btn-ghost"
                       }`}
                       onClick={() => {
-                        forumSearchParams.set('page', (idx + 1).toString());
+                        forumSearchParams.set("page", (idx + 1).toString());
                         setForumSearchParams(forumSearchParams);
                       }}
@@ -758,5 +758,5 @@
                       className="btn btn-sm border-amber-400 px-2 sm:px-3"
                       onClick={() => {
-                        forumSearchParams.set('page', page.toString());
+                        forumSearchParams.set("page", page.toString());
                         setForumSearchParams(forumSearchParams);
                       }}
@@ -770,8 +770,8 @@
                     <button
                       className={`btn btn-sm px-2 sm:px-3 ${
-                        page === totalPages ? 'border-amber-400' : 'btn-ghost'
+                        page === totalPages ? "border-amber-400" : "btn-ghost"
                       }`}
                       onClick={() => {
-                        forumSearchParams.set('page', totalPages.toString());
+                        forumSearchParams.set("page", totalPages.toString());
                         setForumSearchParams(forumSearchParams);
                       }}
@@ -786,5 +786,5 @@
                     onClick={() => {
                       const newPage = page + 1;
-                      forumSearchParams.set('page', newPage.toString());
+                      forumSearchParams.set("page", newPage.toString());
                       setForumSearchParams(forumSearchParams);
                     }}
@@ -811,5 +811,5 @@
           <div className="bg-base-200 rounded-lg shadow-xl p-4 sm:p-6 w-full max-w-sm sm:max-w-md mx-4">
             <div className="flex items-center gap-3 mb-4">
-              {modal.type === 'confirm' && (
+              {modal.type === "confirm" && (
                 <div className="w-8 h-8 rounded-full bg-error flex items-center justify-center shrink-0">
                   <svg
@@ -828,5 +828,5 @@
                 </div>
               )}
-              {modal.type === 'success' && (
+              {modal.type === "success" && (
                 <div className="w-8 h-8 rounded-full bg-success flex items-center justify-center shrink-0">
                   <svg
@@ -851,5 +851,5 @@
             <p className="py-3 sm:py-4 text-sm sm:text-base">{modal.message}</p>
             <div className="flex justify-end gap-2 sm:gap-3 mt-3 sm:mt-4">
-              {modal.type === 'confirm' ? (
+              {modal.type === "confirm" ? (
                 <>
                   <button
@@ -871,5 +871,5 @@
                       </>
                     ) : (
-                      'Delete'
+                      "Delete"
                     )}
                   </button>