Prem UI overlapping issue

package.json

@@ -203,4 +203,4 @@
     ],
     "**/*.{css,scss,sass}": "stylelint"
   }
-}
+}

src/components/CommunityPortal/CPDashboard.jsx

@@ -1,6 +1,6 @@
 import { useState, useEffect } from 'react';
 import { Container, Row, Col, Card, CardBody, Button, Input } from 'reactstrap';
-import './CPDashboard.css';
+import styles from './CPDashboard.module.css';
 import { FaCalendarAlt, FaMapMarkerAlt, FaUserAlt } from 'react-icons/fa';
 import { ENDPOINTS } from '../../utils/URL';
 import axios from 'axios';
@@ -8,19 +8,19 @@
 export function CPDashboard() {
   const [events, setEvents] = useState([]);
   const [search, setSearch] = useState('');
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState(null);
   const [pagination, setPagination] = useState({
     currentPage: 1,
     totalPages: 5,
     total: 0,
     limit: 6,
   });
 
   const FALLBACK_IMG =
     'https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=600&q=60';
 
   const FixedRatioImage = ({ src, alt, fallback }) => (
     <div
       style={{
         width: '100%',
@@ -65,7 +65,7 @@
     fetchEvents();
   }, []);
 
   const formatDate = dateStr => {
     if (!dateStr) return 'Date TBD';
     const date = new Date(dateStr);
     return date.toLocaleString('en-US', {
@@ -81,160 +81,109 @@
     event.title?.toLowerCase().includes(search.toLowerCase()),
   );
 
   const totalPages = Math.ceil(filteredEvents.length / pagination.limit);
 
   const displayedEvents = filteredEvents.slice(
     (pagination.currentPage - 1) * pagination.limit,
     pagination.currentPage * pagination.limit,
   );
 
   return (
-    <Container fluid className="dashboard-container">
-      <header className="dashboard-header">
+    <Container className={styles['dashboard-container']}>
+      <header className={styles['dashboard-header']}>
         <h1>All Events</h1>
-        <div className="dashboard-controls">
-          <div className="dashboard-search-container">
+        <div className={styles['dashboard-controls']}>
+          <div className={styles['dashboard-search-container']}>
             <Input
               type="search"
               placeholder="Search events..."
               value={search}
               onChange={e => setSearch(e.target.value)}
-              className="dashboard-search"
+              className={styles['dashboard-search']}
             />
           </div>
         </div>
       </header>
 
       <Row>
-        <Col md={3} className="dashboard-sidebar">
-          <div className="filter-section">
+        <Col md={3} className={styles['dashboard-sidebar']}>
+          <div className={styles['filter-section']}>
             <h4>Search Filters</h4>
-            <div className="filter-item">
-              <label htmlFor="date-tomorrow"> Dates</label>
-              <div className="filter-options-horizontal">
-                <div>
-                  <Input type="radio" name="dates" /> Tomorrow
+            <div className={styles['filter-section-divider']}>
+              <div className={styles['filter-item']}>
+                <label htmlFor="date-tomorrow"> Dates</label>
+                <div className={styles['filter-options-horizontal']}>
+                  <div>
+                    <Input type="radio" name="dates" /> Tomorrow
+                  </div>
+                  <div>
+                    <Input type="radio" name="dates" /> This Weekend
+                  </div>
                 </div>
+                <Input type="date" placeholder="Ending After" className={styles['date-filter']} />
+              </div>
+              <div className={styles['filter-item']}>
+                <label htmlFor="online-only">Online</label>
                 <div>
-                  <Input type="radio" name="dates" /> This Weekend
+                  <Input type="checkbox" /> Online Only
                 </div>
               </div>
-              <Input
-                type="date"
-                value={selectedDate}
-                onChange={handleDateChange}
-                className="date-filter"
-              />
-              {dateError && (
-                <p className="date-error-message" style={{ color: 'red', marginTop: '5px' }}>
-                  {dateError}
-                </p>
-              )}
-            </div>
-            <div className="filter-item">
-              <label htmlFor="online-only">Online</label>
-              <div>
-                <Input type="checkbox" /> Online Only
+              <div className={styles['filter-item']}>
+                <label htmlFor="branches">Branches</label>
+                <Input type="select">
+                  <option>Select branches</option>
+                </Input>
+              </div>
+              <div className={styles['filter-item']}>
+                <label htmlFor="themes">Themes</label>
+                <Input type="select">
+                  <option>Select themes</option>
+                </Input>
+              </div>
+              <div className={styles['filter-item']}>
+                <label htmlFor="categories">Categories</label>
+                <Input type="select">
+                  <option>Select categories</option>
+                </Input>
               </div>
-            </div>
-            <div className="filter-item">
-              <label htmlFor="branches">Branches</label>
-              <Input type="select">
-                <option>Select branches</option>
-              </Input>
-            </div>
-            <div className="filter-item">
-              <label htmlFor="themes">Themes</label>
-              <Input type="select">
-                <option>Select themes</option>
-              </Input>
-            </div>
-            <div className="filter-item">
-              <label htmlFor="categories">Categories</label>
-              <Input type="select">
-                <option>Select categories</option>
-              </Input>
             </div>
           </div>
         </Col>
 
-        <Col md={9} className="dashboard-main">
-          <h2 className="section-title">Events</h2>
-
-          {error && <div className="alert alert-danger">{error}</div>}
-
-          {isLoading ? (
-            <div className="d-flex justify-content-center mt-4"></div>
-          ) : displayedEvents.length > 0 ? (
-            <Row>
-              {displayedEvents.map(event => (
-                <Col md={4} key={event._id || event.id} className="event-card-col">
-                  <Card
-                    className="event-card"
-                    style={{
-                      display: 'flex',
-                      flexDirection: 'column',
-                      borderRadius: 14,
-                      overflow: 'hidden',
-                    }}
-                  >
-                    <div className="event-card-img-container">
-                      <FixedRatioImage
-                        src={event.coverImage}
+        <Col md={9} className={styles['dashboard-main']}>
+          <h2 className={styles['section-title']}>Events</h2>
+          <Row>
+            {events.length > 0 ? (
+              events.map(event => (
+                <Col md={4} key={event.id} className={styles['event-card-col']}>
+                  <Card className={styles['event-card']}>
+                    <div className={styles['event-card-img-container']}>
+                      <img
+                        src={event.image}
                         alt={event.title}
-                        fallback={FALLBACK_IMG}
+                        className={styles['event-card-img']}
                       />
                     </div>
-                    <CardBody style={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
-                      <h5 className="event-title">{event.title}</h5>
-                      <p className="event-date">
-                        <FaCalendarAlt className="event-icon" /> {formatDate(event.date)}
+                    <CardBody>
+                      <h5 className={styles['event-title']}>{event.title}</h5>
+                      <p className={styles['event-date']}>
+                        <FaCalendarAlt className={styles['event-icon']} /> {event.date}
                       </p>
-                      <p className="event-location">
-                        <FaMapMarkerAlt className="event-icon" /> {event.location || 'TBD'}
+                      <p className={styles['event-location']}>
+                        <FaMapMarkerAlt className={styles['event-icon']} /> {event.location}
                       </p>
-                      <p className="event-organizer">
-                        <FaUserAlt className="event-icon" /> {event.maxAttendees || 'No limit'}{' '}
-                        Attendees limit
+                      <p className={styles['event-organizer']}>
+                        <FaUserAlt className={styles['event-icon']} /> {event.organizer}
                       </p>
                     </CardBody>
                   </Card>
                 </Col>
-              ))}
-            </Row>
-          ) : (
-            <div className="no-events">No events available</div>
-          )}
-
-          <div className="d-flex justify-content-center mt-4">
-            <div className="pagination-controls">
-              <Button
-                color="secondary"
-                disabled={pagination.currentPage === 1}
-                onClick={() =>
-                  setPagination(prev => ({ ...prev, currentPage: prev.currentPage - 1 }))
-                }
-              >
-                Previous
-              </Button>
-
-              <span className="mx-3">
-                Page {pagination.currentPage} of {totalPages}
-              </span>
-
-              <Button
-                color="secondary"
-                disabled={pagination.currentPage === totalPages}
-                onClick={() =>
-                  setPagination(prev => ({ ...prev, currentPage: prev.currentPage + 1 }))
-                }
-              >
-                Next
-              </Button>
-            </div>
-          </div>
-
-          <div className="dashboard-actions text-center mt-4">
+              ))
+            ) : (
+              <div className={styles['no-events']}>No events available</div>
+            )}
+          </Row>
+          <div className={styles['dashboard-actions']}>
             <Button color="primary">Show Past Events</Button>
           </div>
         </Col>

src/components/CommunityPortal/CPDashboard.css → src/components/CommunityPortal/CPDashboard.module.css

@@ -6,12 +6,16 @@
 }
 
 .dashboard-container {
-  padding: 40px 20px;
+  padding: 20px 15px;
   max-width: 1400px;
   margin: 0 auto;
   background: #ffffff;
   border-radius: 16px;
   box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
+  font-size: 16px;
+  line-height: 1.6;
+  letter-spacing: 0.2px;
+  width: min(95%, 1400px);
 }
 
 .dashboard-header {
@@ -57,19 +61,26 @@
 .filter-section h4 {
   font-size: 1.8rem;
   color: #2c3e50;
-  margin-bottom: 20px;
+  /* margin-bottom: 20px; */
   font-weight: 600;
 }
 
-.filter-item input,
-.filter-item select {
-  padding: 12px 15px;
+.filter-section-divider {
+  height: fit-content;
+  margin: 10px 10px;;
+  border-radius: 1px;
+  display: flex;
+  flex-direction: column;
+}
+
+.filter-item{
+  padding: 8px 15px;
   margin-top: 10px;
-  border: 1px solid #ddd;
+  /* border: 1px solid #ddd; */
   border-radius: 8px;
   width: 100%;
   font-size: 1rem;
-  background: #ffffff;
+  /* background: #ffffff; */
   transition: all 0.3s ease;
 }
 
@@ -81,12 +92,17 @@
 }
 
 .dashboard-main {
+  margin-top: 25px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+  background-color: #e5e5e5;
   padding: 30px;
-  background: #ffffff;
   border-radius: 12px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 4px 12px #0000001a;
 }
 
+
 .section-title {
   font-size: 2.2rem;
   color: #2c3e50;
@@ -154,3 +170,7 @@
   background-color: #34495e;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
 }
+
+.date-filter {
+  margin-top: 15px;
+}