Merge pull request #412 from Osilaja78/admin-profile

Admin Dashboard

package.json

@@ -27,11 +27,13 @@
     "react-redux": "^8.0.4",
     "react-router-dom": "^6.3.0",
     "react-select": "^5.4.0",
+    "recharts": "^2.1.15",
     "redux": "^4.2.0",
     "styled-components": "^5.3.5",
     "swiper": "^8.4.4",
     "tailwindcss": "^3.1.8",
     "twin.macro": "^2.8.2",
+    "use-sync-external-store": "^1.2.0",
     "yarn": "^1.22.19"
   },
   "devDependencies": {

src/Routes.jsx

@@ -1,5 +1,14 @@
 import React from "react";
 
+
+// import AdminDeleteAccountPopup from './components/molecules/AdminDeleteAccountPopup';
+// import AdminDeleteAccountFailPopup from './components/molecules/AdminDeleteAccountFailPopup';
+// import AdminDeleteAccountSuccessfullPopup from './components/molecules/AdminDeleteAccountSuccessfullPopup';
+import AdminDashboard from './pages/AdminDashboard';
+import ProductSearchResults from './pages/ProductSearchReslts';
+import UserSearchResults from './pages/UserSearchResults';
+import AdminEmptySearchResults from './pages/AdminEmptySearchResult';
+import SearchProductsByUser from './pages/SearchProductsByUser';
 import { Route, Routes as Switch } from "react-router-dom";
 import AddNewProductPage1 from "./pages/AddNewProductPage1";
 import PhoneNumberVerification from "./pages/PhoneNumberVerification";
@@ -59,9 +68,29 @@ function Routes() {
       {/* Protected Pages */}
       <Route path="/dashboard" element={<DashboardPage />} />
       <Route element={<AdminDashBoardLayout />}>
-        <Route path="/admin/dashboard" element={<h1> create dashboard</h1>} />
+        <Route path="/admin/dashboard" element={<AdminDashboard/>} />
         <Route path="/admin/products" element={<ProductPage />} />
 
+        <Route
+            path='/admin/product-search-results'
+            element={<ProductSearchResults/>}
+        />
+        <Route
+            path='/admin/empty-search-results'
+            element={<AdminEmptySearchResults/>}
+        />
+        <Route
+            path='/admin/user-search-results'
+            element={<UserSearchResults/>}
+        />
+        <Route
+            path='/admin/search-product-by-users'
+            element={<SearchProductsByUser />}
+        />
+        <Route
+            path='/admin/products'
+            element={<h1> Admin producet </h1>}
+        />
         <Route path="/admin/messages" element={<MessagesEmpty />} />
         <Route path="/admin/messages/start" element={<MessagesStart />} />
         <Route path="/admin/messages/chat" element={<MessagesChat />} />

src/assets/data/AdminDashboardData.jsx

@@ -0,0 +1,103 @@
+import item1 from "../images/item1.png"
+import item2 from "../images/item2.png"
+import item3 from "../images/item3.png"
+import item4 from "../images/item4.png"
+import avatar from "../images/avatar7.png"
+
+export const chart = [
+    { name: "5-10", Products: "500"},
+    { name: "11-15", Products: "1500"},
+    { name: "16-20", Products: "3000"},
+    { name: "21-25", Products: "750"},
+    { name: "26-31", Products: "3800"},
+];
+
+export const productData = [
+    {
+        id: 1,
+        image: item1,
+        discription: "MacBook Pro 14'' M1 Chip",
+        price: "₦1,550,000.00",
+        category: "Laptops",
+        user: "Anees Adeyinka",
+        uploaded: "10/10/2022",
+    },
+    {
+        id: 2,
+        image: item2,
+        discription: "X Box Game Pad x2",
+        price: "₦1,550,000.00",
+        category: "Laptops",
+        user: "Anees Adeyinka",
+        uploaded: "10/10/2022",
+    },
+    {
+        id: 3,
+        image: item3,
+        discription: "Sony G29e7 VR racing bike",
+        price: "₦1,550,000.00",
+        category: "Laptops",
+        user: "Anees Adeyinka",
+        uploaded: "10/10/2022",
+    },
+    {
+        id: 4,
+        image: item4,
+        discription: "BeatsbyDre Headphones",
+        price: "₦1,550,000.00",
+        category: "Laptops",
+        user: "Anees Adeyinka",
+        uploaded: "10/10/2022",
+    },
+];
+
+export const userData = [
+    {
+        id: 1,
+        image: avatar,
+        name: "Nora Eboesomi",
+        email: "[email protected]",
+        phone: "+234 812 345 6789",
+        registered: "10/10/2022",
+    },
+    {
+        id: 2,
+        image: avatar,
+        name: "Nora Eboesomi",
+        email: "[email protected]",
+        phone: "+234 812 345 6789",
+        registered: "10/10/2022",
+    },
+    {
+        id: 3,
+        image: avatar,
+        name: "Nora Eboesomi",
+        email: "[email protected]",
+        phone: "+234 812 345 6789",
+        registered: "10/10/2022",
+    },
+    {
+        id: 4,
+        image: avatar,
+        name: "Nora Eboesomi",
+        email: "[email protected]",
+        phone: "+234 812 345 6789",
+        registered: "10/10/2022",
+    },
+    {
+        id: 5,
+        image: avatar,
+        name: "Nora Eboesomi",
+        email: "[email protected]",
+        phone: "+234 812 345 6789",
+        registered: "10/10/2022",
+    },
+    {
+        id: 6,
+        image: avatar,
+        name: "Nora Eboesomi",
+        email: "[email protected]",
+        phone: "+234 812 345 6789",
+        registered: "10/10/2022",
+    },
+];

src/components/molecules/AdminAnalyticsDropdown.jsx

@@ -0,0 +1,12 @@
+import React from "react";
+
+function AdminAnalyticsDropdown() {
+    return(
+        <div className=" bg-white border-2 rounded-md w-36 text-left font-cabinetGrotesk">
+            <p className="border-b p-3">Products</p>
+            <p className="p-3">Users</p>
+        </div>
+    )
+}
+
+export default AdminAnalyticsDropdown;

src/components/molecules/AdminDaysDropdown.jsx

@@ -0,0 +1,16 @@
+import React from "react";
+
+function AdminDaysDropdown() {
+    return(
+        <div className=" bg-white border-2 rounded-md w-36 text-left font-cabinetGrotesk">
+            <p className="border-b p-3">All Days</p>
+            <p className="border-b p-3">First Week</p>
+            <p className="border-b p-3">Second Week</p>
+            <p className="border-b p-3">Third Week</p>
+            <p className="border-b p-3">Fourth Week</p>
+            <p className="p-3">Fifth Week</p>
+        </div>
+    )
+}
+
+export default AdminDaysDropdown;

src/components/molecules/AdminMonthsDropdown.jsx

@@ -0,0 +1,22 @@
+import React from "react";
+
+function AdminMonthsDropdown() {
+    return(
+        <div className=" bg-white border-2 rounded-md w-36 text-left font-cabinetGrotesk">
+            <p className="border-b p-3">January</p>
+            <p className="border-b p-3">February</p>
+            <p className="border-b p-3">March</p>
+            <p className="border-b p-3">April</p>
+            <p className="border-b p-3">May</p>
+            <p className="border-b p-3">June</p>
+            <p className="border-b p-3">July</p>
+            <p className="border-b p-3">August</p>
+            <p className="border-b p-3">September</p>
+            <p className="border-b p-3">October</p>
+            <p className="border-b p-3">November</p>
+            <p className="p-3">December</p>
+        </div>
+    )
+}
+
+export default AdminMonthsDropdown;

src/components/molecules/AdminMoreOptions.jsx

@@ -0,0 +1,43 @@
+import React, { useState } from "react";
+import DeleteProductConfirmation from "./DeleteProductConfirmation";
+import ProductDetailsPopup from "../molecules/ProductDetailsPopup";
+
+function AdminMoreOptions() {
+
+    const [showError, setShowError] = useState(false) // state for error popup
+    const [showDetails, setShowDetails] = useState(false) // state for product details popup
+
+    let error
+    let popupMask, popupMask2
+    let productDetails
+
+    if(showError){
+        error= <DeleteProductConfirmation/>
+
+        // popupMask adds a transparent dark background once the component is open.
+        popupMask = <div onClick={() => setShowError(false)} className="fixed z-10 top-0 left-0 bg-black-t-50 w-screen h-full"></div>
+    }
+
+    if(showDetails){
+        productDetails = <ProductDetailsPopup />
+
+        // popupMask adds a transparent dark background once the component is open.
+        popupMask2 = <div onClick={() => setShowDetails(false)} className="fixed -z-0 top-0 left-0 bg-black-t-50 w-screen h-full"></div>
+    }
+
+    return(
+        <div>
+            <div className=" bg-white border-2 rounded-md text-left p-2">
+                <p onClick={() => setShowDetails(!showDetails)} className="border-b p-2 cursor-pointer">View Details</p>
+                <p className="border-b p-2">Make Unavailable</p>
+                <p onClick={() => setShowError(!showError)} className="p-2 text-[16px] font-semibold text-red-600 cursor-pointer">Delete</p>
+            </div>
+            {popupMask}
+            {error}
+            {popupMask2}
+            {productDetails}
+        </div>
+    )
+}
+
+export default AdminMoreOptions;

src/components/molecules/AdminSortByDropdown.jsx

@@ -0,0 +1,12 @@
+import React from "react";
+
+function AdminSortByDropdown() {
+    return(
+        <div className=" bg-white border-2 rounded-md w-36 text-left font-cabinetGrotesk">
+            <p className="border-b p-3">Latest</p>
+            <p className="p-3">Oldest</p>
+        </div>
+    )
+}
+
+export default AdminSortByDropdown;

src/components/molecules/AdminTopGreeting.jsx

@@ -0,0 +1,39 @@
+import React from "react";
+import userAvatar from "../../assets/icons/avatar.png";
+
+function AdminTopGreeting() {
+    return(
+        <div className="md:flex items-center justify-between">
+                <div className="px-6 md:px-0">
+                    {/* opening text */}
+                    <div className="font-cabinetGrotesk ">
+                        <p className="font-medium text-[20px]">Welcome Back, Admin👋🏾</p>
+                        <h1 className="font-bold text-[28px]">Dashboard</h1>
+                    </div>
+                </div>
+                {/* SEARCH BAR */}
+                <div className="md:flex items-center">
+                    <div className="flex gap-2 h-10 p-5 mx-6 my-4 border-2 hover:border-black rounded-md items-center ">
+                        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path d="M9.17502 16.6833C13.3218 16.6833 16.6834 13.3217 16.6834 9.17496C16.6834 5.02822 13.3218 1.66663 9.17502 1.66663C5.02828 1.66663 1.66669 5.02822 1.66669 9.17496C1.66669 13.3217 5.02828 16.6833 9.17502 16.6833Z" fill="#717591"/>
+                            <path d="M18.325 15.7917C18.05 15.2833 17.4667 15 16.6834 15C16.0917 15 15.5834 15.2417 15.2834 15.6583C14.9834 16.075 14.9167 16.6333 15.1 17.1917C15.4584 18.275 16.0834 18.5167 16.425 18.5583C16.475 18.5667 16.525 18.5667 16.5834 18.5667C16.95 18.5667 17.5167 18.4083 18.0667 17.5833C18.5084 16.9417 18.5917 16.3 18.325 15.7917Z" fill="#717591"/>
+                        </svg>
+                        <form action="">
+                            <input className="font-cabinetGrotesk outline-none" type="text" placeholder="Search for gadgets" />
+                        </form>
+                    </div>
+                    <div className="hidden md:flex gap-3">
+                        <div className=" bg-gray-300 rounded-full p-3">
+                            <svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                <path d="M20.9516 15.6975L19.8683 13.8991C19.6408 13.4983 19.435 12.74 19.435 12.2958V9.55496C19.435 7.00912 17.94 4.80996 15.7841 3.78079C15.2208 2.78413 14.1808 2.16663 12.9891 2.16663C11.8083 2.16663 10.7466 2.80579 10.1833 3.81329C8.07081 4.86413 6.60831 7.04163 6.60831 9.55496V12.2958C6.60831 12.74 6.40248 13.4983 6.17498 13.8883L5.08081 15.6975C4.64748 16.4233 4.54998 17.225 4.82081 17.9616C5.08081 18.6875 5.69831 19.2508 6.49998 19.5216C8.60165 20.2366 10.8116 20.5833 13.0216 20.5833C15.2316 20.5833 17.4416 20.2366 19.5433 19.5325C20.3016 19.2833 20.8866 18.7091 21.1683 17.9616C21.45 17.2141 21.3741 16.3908 20.9516 15.6975Z" fill="#717591"/>
+                                <path d="M16.0658 21.6775C15.6108 22.9341 14.4083 23.8333 13 23.8333C12.1442 23.8333 11.2992 23.4866 10.7033 22.8691C10.3567 22.5441 10.0967 22.1108 9.94501 21.6666C10.0858 21.6883 10.2267 21.6991 10.3783 21.7208C10.6275 21.7533 10.8875 21.7858 11.1475 21.8075C11.765 21.8616 12.3933 21.8941 13.0217 21.8941C13.6392 21.8941 14.2567 21.8616 14.8633 21.8075C15.0908 21.7858 15.3183 21.775 15.535 21.7425C15.7083 21.7208 15.8817 21.6991 16.0658 21.6775Z" fill="#717591"/>
+                            </svg>
+                        </div>
+                        <img src={userAvatar} alt="user avatar" width={50}/>
+                    </div>
+                </div>
+            </div>
+    )
+}
+
+export default AdminTopGreeting;

src/components/molecules/DeleteProductConfirmation.jsx

@@ -0,0 +1,25 @@
+import React from "react";
+import Button from "../atoms/PrimaryButton";
+import errorAvatar from "../../assets/icons/SadFace.png";
+
+function DeleteProductConfirmation() {
+    return(
+        <div className="flex justify-center w-[90%]">
+            <div className="fixed bg-white top-[20%] right-[2%] md:right-[30%] max-w-md align-middle text-center border rounded-lg z-20 shadow-lg p-4 m-4">
+                <p className="font-cabinetGrotesk font-bold text-[22px] text-orange-500">Delete Product Permanently?</p>
+                <img className="mx-auto" src={errorAvatar} alt="laptop-woman" width={120} />
+                <p className="font-campton px-6">Are you sure you want to delete this product? This action cannot be reversed.</p>
+                <div className="flex flex-col md:flex-row">
+                    <div className="p-6 gap-4 flex items-center md:w-[300px]">
+                        <Button  children="Yes, delete product"/>
+                    </div>
+                    <div className="px-6 gap-4 flex items-center md:w-[300px]">
+                        <Button  children="Cancel"/>
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default DeleteProductConfirmation;

src/components/molecules/ProductDetailsPopup.jsx

@@ -5,7 +5,7 @@ import productImg from "../../assets/images/image-2macbook.png"
 
 function ProductDetailsPopup() {
     return(
-        <div className="fixed top-[8%] md:top-[5%]  md:right-[28%] bg-gray-100 border p-6 m-6 font-cabinetGrotesk md:w-[500px] align-middle">
+        <div className="fixed top-[8%] right-[2%] md:top-[5%]  md:right-[28%] bg-gray-100 border p-6 m-6 font-cabinetGrotesk md:w-[500px] align-middle">
             <img className="absolute top-2 right-4 md:right-2 m-2 md:left-[410px] pb-2" src="../src/assets/icons/CloseSquare.svg" alt="" width={30}/>
             <div className="bg-gray-50 border-2 rounded-md flex items-center p-3 mt-8">
                 <svg width="10" height="18" viewBox="0 0 10 18" fill="none" xmlns="http://www.w3.org/2000/svg">

src/components/molecules/SideBar.jsx

@@ -7,7 +7,7 @@ import { Link, NavLink } from 'react-router-dom';
 
 export default function SideBar({ navData = [] }) {
   return (
-    <aside className=" font-campton h-screen bg-primary-50 w-[230px] pt-[50px] hidden lg:block">
+    <aside className="fixed font-campton h-screen bg-primary-50 w-[230px] pt-[50px] hidden lg:block">
       <h1 className="font-cabinetGrotesk text-[32px] font-[700]  pl-[50px] pb-[38px] text-primary-500">
         tech<span className="text-secondary-500">mart</span>
       </h1>