Reports front (#13)

* Readme updated * Readme updated * Readme updated * Updated for SEO * Updated for SEO * Updated for SEO * working on responsiveness * working on responsiveness * Merge remote changes and resolve conflicts * Merge remote changes and resolve conflicts * Merge remote changes and resolve conflicts * Added web 3 animd * Added web 3 animd * Added web 3 animd * Working on Reporting Dashboard * Fixed project details error * Fixed project details error * Updated * Updated
bilalmohib · Apr 15, 2023 · cd9912f · cd9912f · vercel · Apr 15, 2023
1 parent 2868490
commit cd9912f
Show file tree

Hide file tree

Showing 25 changed files with 1,111 additions and 18 deletions.
diff --git a/components/HeaderReportDetails/index.tsx b/components/HeaderReportDetails/index.tsx
@@ -0,0 +1,162 @@
+import React, { useState, useEffect } from 'react';
+import { useRouter } from 'next/router';
+import { RiArrowDropDownLine } from 'react-icons/ri';
+import { GiCircle, GiPlainCircle } from 'react-icons/gi';
+import { IoIosArrowDown } from 'react-icons/io';
+import { BsPeopleFill, BsPencil } from 'react-icons/bs';
+import { FaCheckCircle } from 'react-icons/fa';
+import Image from 'next/image';
+import Link from 'next/link';
+
+import {
+    doc,
+    collection,
+    onSnapshot,
+    addDoc,
+    query,
+    orderBy,
+    deleteDoc,
+    setDoc,
+    where
+} from "firebase/firestore";
+import { useCollection } from 'react-firebase-hooks/firestore';
+
+import { db } from "../../firebase";
+
+import ProjectIcon from '../ProjectIcon';
+
+import {
+    CircularProgress,
+    Box,
+    Typography
+} from "@mui/material";
+
+import styles from './style.module.css';
+
+interface IProps {
+    reportID: any,
+    email: string,
+    reportName: any,
+    photoURL: string,
+}
+
+const HeaderReportDetails: React.FC<IProps> = ({
+    photoURL,
+    reportName,
+    email,
+    reportID
+}) => {
+
+    const router = useRouter();
+
+    /////////////////////////////////////// Database Part ////////////////////////////////////////////////
+    const [firestoreData, setFirestoreData] = useState<any>([]);
+    const [status, setStatus] = useState<Boolean>(false);
+    const [signedInUserData, setSignedInUserData] = useState<any>(null);
+    const [isSignedIn, setIsSignedIn] = useState<Boolean>(false);
+
+    let q = query(collection(db, "Data", "Projects", `${email}`));
+
+    const [snapshot, loading, error] = useCollection(
+        q,
+        {
+            snapshotListenOptions: { includeMetadataChanges: true },
+        }
+    );
+
+    // FOR GETTING REPORT TITLE
+    useEffect(() => {
+
+        if (!loading && snapshot && email) {
+            let localObj;
+            let arrProjects = snapshot?.docs.map(doc => ({ ...doc.data(), id: doc.id }));
+            for (let i = 0; i < arrProjects.length; i++) {
+                if (arrProjects[i].id === reportID.toString()) {
+                    localObj = arrProjects[i];
+                }
+            }
+            setFirestoreData(localObj);
+        }
+
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [loading, snapshot]);
+    // FOR GETTING REPORT TITLE
+
+    return (
+        <nav className={styles.container}>
+            <div className={styles.leftSide}>
+                <div className='d-flex'>
+                    <ProjectIcon
+                        h={48}
+                        w={48}
+                        IconSize={35}
+                        Color="white"
+                        // BGC={firestoreData?.color_code}
+                        BGC={"#4573d2"}
+                    />
+                    <div className="ml-5">
+                        <p
+                            onClick={() => router.back()}
+                            className='cursor-pointer text-'
+                            style={{
+                                fontSize: 15,
+                                lineHeight: 1
+                            }}
+                        >
+                            Reporting &gt;
+                        </p>
+                        <h3 className={`${styles.headingProject}`}>
+                            {reportName}
+                        </h3>
+                    </div>
+                    <div>
+                        <div>
+                            <a data-mdb-toggle="dropdown" aria-expanded="false" style={{ alignItems: "center", display: "flex", justifyContent: "center", boxShadow: "none", paddingTop: 2, cursor: "pointer" }}>
+                                <IoIosArrowDown
+                                    className={styles.arrowIcon}
+                                />
+                            </a>
+                            <ul className="dropdown-menu">
+                                <li><a className="dropdown-item flex h-10" href="#"><p className='w-5 h-5 mt-[2px]'><BsPencil style={{ fontSize: 18 }} /></p> <p className='mt-[1px] ml-2'>Edit dashboard details</p></a></li>
+                                <li><a className="dropdown-item flex h-10" href="#"> <p className='w-5 h-5 mt-[2px] bg-[#4573d2]'></p> <p className='mt-[1px] ml-3'>Set Color & icon</p> </a></li>
+                                <li><hr className="dropdown-divider" /></li>
+                                <li><a className="dropdown-item" href="#" onClick={() => alert("Delete Dashboard")}><span className='text-red-600'>Delete dashboard</span></a></li>
+                            </ul>
+                        </div>
+                    </div>
+                    <div>
+                        <a data-mdb-toggle="dropdown" aria-expanded="false" className={styles.statusBtn}>
+                            <GiCircle /> &nbsp; Set status <RiArrowDropDownLine size={30} />
+                        </a>
+                        <ul className="dropdown-menu">
+                            <li><a className="dropdown-item mt-2" href="#"><GiPlainCircle style={{ marginTop: -4 }} color='#58a182' /> &nbsp; On track</a></li>
+                            <li><a className="dropdown-item" href="#"><GiPlainCircle style={{ marginTop: -4 }} color='#f1bd6c' /> &nbsp; At risk</a></li>
+                            <li><a className="dropdown-item" href="#"><GiPlainCircle style={{ marginTop: -4 }} color='#de5f73' /> &nbsp; Off track</a></li>
+                            <li><a className="dropdown-item" href="#"><GiPlainCircle style={{ marginTop: -4 }} color='#3f6ac4' /> &nbsp; On hold</a></li>
+                            <li><hr className="dropdown-divider" /></li>
+                            <li><a className="dropdown-item mb-2" href="#"><FaCheckCircle style={{ marginTop: -4 }} color='#58a182' /> &nbsp; Complete</a></li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+            <div className={styles.rightSide}>
+                <div className={styles.profileImageRightSide}>
+                    <Image
+                        width={24}
+                        height={24}
+                        style={{ borderRadius: "50%" }}
+                        src={photoURL}
+                        alt="Picture of the author"
+                        loading="lazy"
+                    />
+                </div>
+                <button className={`btn btn-primary ${styles.btn_share}`}>
+                    <BsPeopleFill size={16} style={{ marginTop: 3 }} />
+                    &nbsp;
+                    Share
+                </button>
+            </div>
+        </nav>
+    )
+}
+export default HeaderReportDetails;
diff --git a/components/HeaderReportDetails/style.module.css b/components/HeaderReportDetails/style.module.css
@@ -0,0 +1,138 @@
+.container {
+    /* border: 1px solid red; */
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    padding-top: 14px;
+    padding-left: 20px;
+    z-index: 1;
+    margin-left: 2px;
+    height: 78px;
+}
+
+.arrowIcon {
+    transition: background-color 0.3s ease;
+    width: 35px !important;
+    height: 35px !important;
+    margin-top: 5px;
+    margin-left: 20px;
+    margin-right: 10px;
+    border-radius: 5px;
+}
+
+.arrowIcon:hover {
+    background-color: #f3f1f1;
+    /* width: 20px;
+    height: 20px; */
+}
+
+/* LEFT SIDE */
+.leftSide {
+    height: 50px;
+    /* border: 2px solid rgb(0, 48, 152); */
+}
+
+.headingProject {
+    /* border: 1px solid blue; */
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
+    font-size: 20px;
+    font-weight: 400;
+    align-items: center;
+    color: #1E1F21;
+    min-width: 1px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    transition: color 200ms ease-in-out;
+    white-space: nowrap;
+    margin-top: -12px !important;
+}
+
+.statusBtn {
+    align-items: center;
+    display: flex;
+    justify-content: center;
+    box-shadow: none;
+    padding-top: 2px;
+    cursor: pointer;
+    /* border: 1px solid red; */
+    margin-top: 8px;
+    font-weight: 400;
+    border-radius: 8px;
+    padding-left: 6px;
+}
+
+.statusBtn:hover {
+    background-color: #f9f8f8;
+    color: black;
+}
+
+/* Tabs List Container */
+.downLeftTabsList {
+    /* border: 1px solid red; */
+    list-style: none;
+    margin-left: -32px;
+    display: flex;
+    flex-direction: row;
+}
+
+.downLeftTabsList li {
+    color: #6D6E6F;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 34px;
+    margin-right: 20px;
+    /* border: 1px solid green; */
+    transition-duration: .2s;
+    transition-property: box-shadow, color;
+    white-space: nowrap;
+    border-bottom: 2px solid transparent;
+}
+
+.selectedTabItem {
+    border-bottom: 2px solid #1E1F21 !important;
+    color: #1E1F21 !important;
+}
+
+.downLeftTabsList li:hover {
+    color: #1e1f21;
+    border-bottom: 2px solid #6d6e6f;
+    cursor: pointer;
+}
+
+/* Tabs List Container */
+
+/* ================================================= LEFT SIDE =============================================== */
+
+/* ================================================= RIGHT SIDE =============================================== */
+.rightSide {
+    /* border: 1px solid green; */
+    display: flex;
+    flex-direction: row;
+    padding-right: 25px;
+    padding-top: 10px;
+}
+
+.profileImageRightSide {
+    /* height: 24px;
+    width: 24px; */
+    /* margin-right: 10px;
+    margin-top: 10px; */
+    /* border: 1px solid red; */
+    padding-right: 15px;
+    padding-top: 3px;
+    cursor: pointer;
+}
+
+.btn_share {
+    /* border: 1px solid red; */
+    height: 28px !important;
+    padding-top: 3px !important;
+    display: flex;
+    font-weight: 400;
+    font-size: 15px;
+    flex-direction: row;
+    text-transform: none !important;
+    justify-content: center !important;
+}
+
+/* ================================================= RIGHT SIDE =============================================== */
diff --git a/components/Main/Home/MainContent/index.tsx b/components/Main/Home/MainContent/index.tsx
@@ -38,7 +38,9 @@ const MainContent: React.FC<MainContentProps> = (
     }) => {
     return (
         <main className={styles.main}>
-            <Navbar isOpen={isOpen} setIsOpen={setIsOpen} />
+            <div style={{ zIndex: 1, position: "relative" }}>
+                <Navbar isOpen={isOpen} setIsOpen={setIsOpen} />
+            </div>
             <div className="d-flex">
                 <Sidebar currentMenuItem={currentMenuItem} setCurrentMenuItem={setCurrentMenuItem} isOpen={isOpen} setIsOpen={setIsOpen} />
 

diff --git a/components/Main/Home/MainContent/style.module.css b/components/Main/Home/MainContent/style.module.css
@@ -10,6 +10,8 @@
     height: 100%;
 
     margin-top: 3rem;
+    z-index: 0.3;
+    position:relative;
     /* border: 2px solid rgb(255, 0, 0);
     background-color: rgb(144, 3, 226); */
 }

diff --git a/components/Main/Inbox/index.tsx b/components/Main/Inbox/index.tsx
@@ -1672,7 +1672,7 @@ const Inbox: React.FC<InboxProps> = ({
                                 <br />
                                 <Typography
                                     sx={{
-                                        fontSize: '20px',
+                                        fontSize: '20px'
                                     }}
                                 >
                                     Please Select any User to start chat

diff --git a/components/Main/Reporting/index.tsx b/components/Main/Reporting/index.tsx
@@ -352,6 +352,19 @@ const Reporting: React.FC<ReportingProps> = ({
                                                             borderRadius: "10px",
                                                             boxShadow: "none",
                                                             border: "1px solid rgb(203, 203, 208)",
+                                                            cursor: "pointer",
+                                                            transition: "all 0.1s ease-in-out",
+                                                            "&:hover": {
+                                                                // backgroundColor: '#E5F0FF',
+                                                                // backgroundColor: '#4573d2',
+                                                                // color: 'white',
+                                                                border: "1px solid #4573d2",
+                                                                transition: "all 0.1s ease-in-out",
+                                                            }
+                                                        }}
+                                                        onClick={() => {
+                                                            const targetUrl = `/reportDetails/${reportingDashboard.title}/${reportingDashboard.dashboardID}`;
+                                                            router.push(targetUrl, undefined, { shallow: true });
                                                         }}
                                                         variants={itemVariants}
                                                     >
@@ -467,4 +480,4 @@ const Reporting: React.FC<ReportingProps> = ({
         </div>
     );
 }
-export default Reporting;
+export default Reporting;
diff --git a/components/Navbar/style.module.css b/components/Navbar/style.module.css
@@ -9,6 +9,7 @@
     justify-content: space-between;
     align-items: center;
     z-index: 2;
+    z-index: 100 !important;
 }
 
 /* Name */