10-12-2023

amegh-ts · Dec 10, 2023 · 2111e88 · 2111e88
1 parent e0819fe
commit 2111e88
Show file tree

Hide file tree

Showing 7 changed files with 136 additions and 26 deletions.
diff --git a/Express/Projects/Unknown/Frontend/unknown/src/Components/Admin/Allusers/AllUsers.css b/Express/Projects/Unknown/Frontend/unknown/src/Components/Admin/Allusers/AllUsers.css
@@ -0,0 +1,44 @@
+.all-users-main{
+    padding: 20px;
+}
+.al-users-header{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+.all-users-title{
+    display: flex;
+    align-items: center;
+}
+.al-users-header h3{
+    font-weight: var(--h3-font-weight);
+    font-size: var(--h3-font-size);
+}
+.users-icon{
+    font-size: var(--icon-size);
+    margin-right: 10px;
+}
+.all-users-input{
+    padding: 10px;
+    background-color: var(--body-color);
+    display: flex;
+    border-radius: 10px;
+}
+.all-users-input input{
+    background-color: var(--body-color);
+    border: none;
+    outline: none;
+    max-width: 300px;
+    width: 250px;
+}
+
+.al-users-body{
+    display: flex;
+    flex-direction: column;
+    margin-top: 30px;
+}
+.user-cards{
+    background-color: var(--body-color);
+    width: 100%;
+    height: 20px;
+}
diff --git a/Express/Projects/Unknown/Frontend/unknown/src/Components/Admin/Allusers/AllUsers.jsx b/Express/Projects/Unknown/Frontend/unknown/src/Components/Admin/Allusers/AllUsers.jsx
@@ -0,0 +1,31 @@
+import React from 'react'
+import './AllUsers.css'
+import { GrGroup } from "react-icons/gr";
+import { IoSearch } from "react-icons/io5";
+
+
+const AllUsers = () => {
+    return (
+        <div>
+            <div className="all-users-main">
+                <div className="al-users-header">
+                    <div className='all-users-title'>
+                        <GrGroup className='users-icon' />
+                        <h3>Users</h3>
+                    </div>
+                    <div className='all-users-input'>
+                        <input type="text" />
+                        <IoSearch />
+                    </div>
+                </div>
+                <div className="al-users-body">
+                    <div className="user-cards">
+
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default AllUsers
diff --git a/.../Projects/Unknown/Frontend/unknown/src/Components/Admin/Notification/SendNotification.css b/.../Projects/Unknown/Frontend/unknown/src/Components/Admin/Notification/SendNotification.css
@@ -1,25 +1,28 @@
-.send-notification-main{
+.send-notification-main {
     padding: 20px;
 }
 
-.send-notification-header{
+.send-notification-header {
     display: flex;
     align-items: center;
-    
+
 }
-.send-notification-header h3{
+
+.send-notification-header h3 {
     font-weight: var(--h3-font-weight);
     font-size: var(--h3-font-size);
-    
+
 }
-.bell-plus-icon{
+
+.bell-plus-icon {
     font-size: var(--icon-size);
     margin-right: 10px;
 }
 
-.send-notification-body{
+.send-notification-body {
     margin-top: 30px;
 }
+
 textarea {
     width: 100%;
     height: 150px;
@@ -30,4 +33,17 @@ textarea {
     background-color: #f8f8f8;
     font-size: 16px;
     resize: none;
-  }
+}
+
+.send-notification-body button {
+    padding: 10px 20px;
+    background: var(--primary-color);
+    border: none;
+    border-radius: 10px;
+    font-size: 18px;
+    color: white;
+}
+
+.send-notification-body button:hover {
+    cursor: pointer;
+}
diff --git a/.../Projects/Unknown/Frontend/unknown/src/Components/Admin/Notification/SendNotification.jsx b/.../Projects/Unknown/Frontend/unknown/src/Components/Admin/Notification/SendNotification.jsx
@@ -1,24 +1,35 @@
-import React from 'react'
-import './SendNotification.css'
-import { LuBellPlus } from "react-icons/lu";
+import React, { useState } from 'react';
+import './SendNotification.css';
+import { LuBellPlus } from 'react-icons/lu';
 
 const SendNotification = () => {
+  const [notification, setNotification] = useState('');
+
+  const handleTextareaChange = (event) => {
+    setNotification(event.target.value);
+  };
+
+  const handleSendClick = () => {
+    console.log('Notification data:', notification);
+    alert("Message sent successfully")
+  };
+
   return (
     <div>
       <div className="send-notification-main">
-        <div className='send-notification-header'>
-          <LuBellPlus className='bell-plus-icon' />
+        <div className="send-notification-header">
+          <LuBellPlus className="bell-plus-icon" />
           <h3>Notification</h3>
         </div>
         <div className="send-notification-body">
           <div>
-            <textarea name="" id="" cols="30" rows="10"></textarea>
+            <textarea name="notification" cols="30" rows="10" value={notification} onChange={handleTextareaChange} ></textarea>
           </div>
-          <button>send</button>
+          <button onClick={handleSendClick}>Send</button>
         </div>
       </div>
     </div>
-  )
-}
+  );
+};
 
-export default SendNotification
+export default SendNotification;
diff --git a/Express/Projects/Unknown/Frontend/unknown/src/Components/Admin/Sidebar/AdminSidebar.jsx b/Express/Projects/Unknown/Frontend/unknown/src/Components/Admin/Sidebar/AdminSidebar.jsx
@@ -6,11 +6,12 @@ import { useDispatch } from 'react-redux';
 import AdminDashboard from '../Dashboard/AdminDashboard';
 import SendNotification from '../Notification/SendNotification';
 import Profile from '../Profile/Profile';
+import AllUsers from '../Allusers/AllUsers';
 
 
 const AdminSidebar = () => {
     const [isSidebarClosed, setSidebarClosed] = useState(true);
-    const [activePage, setActivePage] = useState('dashboard');
+    const [activePage, setActivePage] = useState('allusers');
     const dispatch = useDispatch()
 
     const toggleSidebar = () => {
@@ -29,6 +30,7 @@ const AdminSidebar = () => {
 
         dashboard: <AdminDashboard />,
         notification: <SendNotification />,
+        allusers:<AllUsers/>,
         profile: <Profile />
     };
 
@@ -73,10 +75,10 @@ const AdminSidebar = () => {
                                     </a>
                                 </li>
 
-                                <li className="nav-link" onClick={closeSidebar}>
+                                <li className={`nav-link ${activePage === 'allusers' ? 'active' : ''}`} onClick={() => { setActivePage('allusers'); closeSidebar(); }}>
                                     <a href="#revenue">
-                                        <i className='bx bx-bar-chart-alt-2 icon' ></i>
-                                        <span className="text nav-text">Revenue</span>
+                                        <i className='bx bx-group icon' ></i>
+                                        <span className="text nav-text">Users</span>
                                     </a>
                                 </li>
 
@@ -121,10 +123,10 @@ const AdminSidebar = () => {
                             <div className='navbar-header'>
                                 <h1>Unknown</h1>
                             </div>
-                            <div className='navbar-search'>
+                            {/* <div className='navbar-search'>
                                 <input type="text" />
                                 <IoSearch />
-                            </div>
+                            </div> */}
                             <div className={`navbar-icon ${activePage === 'profile' ? 'active' : ''}`} onClick={() => { setActivePage('profile'); closeSidebar(); }}>
                                 <span>
                                     <IoPersonSharp />

diff --git a/Express/Projects/Unknown/Frontend/unknown/src/Components/Admin/Sidebar/Adminsidebar.css b/Express/Projects/Unknown/Frontend/unknown/src/Components/Admin/Sidebar/Adminsidebar.css
@@ -53,6 +53,9 @@ body{
     min-width: 60px;
     border-radius: 6px;
 }
+.image:hover{
+    cursor: pointer;
+}
 
 .sidebar .icon{
     min-width: 60px;
@@ -281,6 +284,9 @@ header .image-text .profession{
 .navbar-icon{
     display: flex;
 }
+.navbar-icon:hover{
+    cursor: pointer;
+}
 
 .navbar-icon span{
     color: var(--primary-color);

diff --git a/Express/Projects/Unknown/Frontend/unknown/src/Components/User/Sidebar/SideBar.jsx b/Express/Projects/Unknown/Frontend/unknown/src/Components/User/Sidebar/SideBar.jsx
@@ -122,10 +122,10 @@ const SideBar = () => {
                             <div className='navbar-header'>
                                 <h1>Unknown</h1>
                             </div>
-                            <div className='navbar-search'>
+                            {/* <div className='navbar-search'>
                                 <input type="text" />
                                 <IoSearch />
-                            </div>
+                            </div> */}
                             <div className={`navbar-icon ${activePage === 'profile' ? 'active' : ''}`} onClick={() => { setActivePage('profile'); closeSidebar(); }}>
                                 <span>
                                     <IoPersonSharp />