Added position fix to sidebar, Created Analytics page UI, Adjusted ov…

…erall layout for responsiveness

components/card-template/card-template.component.jsx

@@ -1,7 +1,7 @@
 export default function CardTemplate ({title, children, additionalClasses, additionalContentClasses}) {
     return(
-        <div className={`p-4 flex flex-col w-full bg-primary-color drop-shadow-primary rounded-2xl mr-5 ${additionalClasses}`}>
-            <header className="text-lg pb-5">{title}</header>
+        <div className={`p-4 flex flex-col w-full bg-primary-color drop-shadow-primary rounded-2xl ${additionalClasses}`}>
+            {title && <header className="text-lg pb-5">{title}</header>}
             <div className={`font-extralight h-full ${additionalContentClasses}`}>{children}</div>
         </div>
     );

components/dashboard-items/dashboard-cards.component.jsx

@@ -81,7 +81,7 @@ export default function DashboardCards() {
 
     return(
         <>
-            <div className="relative flex flex-col lg:flex-row pt-3 pb-3 gap-2 ">
+            <div className="relative flex flex-col lg:flex-row pt-3 pb-3 gap-2">
                 <CardTemplate additionalClasses="text-sm 2xl:text-lg" additionalContentClasses="flex flex-col justify-between" title="Description">
                 <div>
                     Trellometrics is the key to quick and seamless
@@ -135,7 +135,7 @@ export default function DashboardCards() {
                 </CardTemplate>
             </div>
             <div className="relative flex flex-col lg:flex-row pt-3 pb-3 gap-2">
-                <CardTemplate additionalClasses="text-sm 2xl:text-lg lg:w-fit w-full" title="Recent Activity">
+                <CardTemplate additionalClasses="text-sm 2xl:text-lg lg:w-fit h-fit w-full" title="Recent Activity">
                     <DashboardRecentActivity/>
                 </CardTemplate>
                 <CardTemplate additionalClasses="text-sm 2xl:text-lg" title="Active Members (5 members)">

components/progressbar/progressbar.component.jsx

@@ -11,7 +11,7 @@ export default function ProgressBar({max, value, type}) {
                     padding: 2px;
                 } 
                 progress::-webkit-progress-value {
-                    background-color: ${type === "good" ? "#71EB84" : type === "bad" ? "#FF5C5C" : "#2C3EDC"}; 
+                    background-color: ${type === "good" ? "#71EB84" : type === "bad" ? "#A90B0B" : "#2C3EDC"}; 
                     border-radius: 9999px;
                 }
             `}

components/projects-items/projects-cards.component.jsx

@@ -88,6 +88,7 @@ export default function ProjectsCards() {
                         </div>
                     </CardTemplate>
                 </div>
-            </div>
+
+        </div>
     )
 }

components/sidebar.component.jsx

@@ -12,7 +12,7 @@ export default function Sidebar() {
     return(
     <>
     <SideBarButtonMobile/>
-    <aside className={`h-screen z-20 mr-20 lg:bg-primary-color bg-primary-color-full lg:flex fixed lg:relative overflow-x-hidden flex-col lg:w-56 w-full px-4 py-8 overflow-y-auto ${isSidebarOpen ? "" : "hidden"}`}>
+    <aside className={`h-full z-20 lg:bg-primary-color bg-primary-color-full lg:flex fixed overflow-x-hidden flex-col lg:w-56 w-full px-4 py-8 overflow-y-auto ${isSidebarOpen ? "" : "hidden"}`}>
         <div className="text-center m-auto">
             <span className="font-bold lg:text-xl text-2xl">Trellometrics</span>
             <img className="m-auto mt-5" src="/favicon.svg" alt="favicon"/>

pages/_app.jsx

@@ -20,13 +20,13 @@ export default function App({ Component, pageProps }) {
             <meta name="description" content="View your trello boards statistics" />
             <meta name="viewport" content="width=device-width, initial-scale=1" />
             <link rel="icon" href="/favicon.svg" />
-            </Head>
-            <main className={styles.main}>
-              <Background/>
+            </Head>  
+            <Background/>
+            <main className={styles.main} >
               <section>
                 <Sidebar/>
               </section>
-              <section className="lg:mt-5 lg:mr-5 lg:ml-5 w-screen">
+              <section className="lg:mt-5 lg:mr-5 lg:ml-72 h-full">
                 <Navigation/>
                 <Component {...pageProps} />
               </section>

pages/analytics.jsx

@@ -1,10 +1,115 @@
 import PageSubNavigation from "@/components/page-template/page-subnavigation.component";
+import CardTemplate from "@/components/card-template/card-template.component";
+import ProgressBar from "@/components/progressbar/progressbar.component";
+import {AiOutlineArrowUp} from "react-icons/ai";
+// To be removed
+import { buildStyles, CircularProgressbar } from "react-circular-progressbar";
+import 'react-circular-progressbar/dist/styles.css';
 
 export default function Analytics() {
     return(
         <div className="lg:mt-0 mt-20 lg:p-0 p-5">
             <PageSubNavigation title="Analytics"/>
-            <div></div>
+            <div className="flex flex-col gap-2 lg:flex-row lg:gap-10 w-full">
+                <div className=" flex flex-col lg:flex-col pt-3 pb-3 gap-5 w-full">
+                    <CardTemplate additionalClasses="text-2xl 2xl:text-lg" additionalContentClasses="flex flex-col" title="Board Activity">
+                        <div>
+                            <span className="font-bold text-green-400">+4</span> New Activity
+                        </div>
+                        <div>
+                            <span className="font-bold text-green-400">+1</span> Completed Card(s)
+                        </div>
+                        <div>
+                            <span className="font-bold">-0</span> Card(s) Created
+                        </div>
+                    </CardTemplate>
+                    <CardTemplate title="Completion Status" additionalContentClasses="flex flex-col">
+                        <div className="text-green-400 font-medium"><AiOutlineArrowUp className="inline"/>+23%</div>
+                        <div>Card Completion progress has increased over the following week</div>
+                    </CardTemplate>
+                    <CardTemplate title="Cycle Time" additionalContentClasses="flex flex-col">
+                        <div>Displays how the time it takes for cards to be completed from start of creation date to finish</div>
+                        <div className="w-[300px] h-[250px] bg-contain bg-center bg-no-repeat" style={{backgroundImage:`url(images/NBcharts-lineChats.png)`}}></div>
+                    </CardTemplate>
+                    <CardTemplate title="Lead Time" additionalClasses="flex flex-col h-full">
+                        <div>Displays how the time it takes for cards to be completed when it is first worked on (first action) to finish</div>
+                        <div className="font-bold text-center pt-16">DATA TO BE DISPLAYED</div>
+                    </CardTemplate>
+                </div>
+
+
+                <div className=" flex flex-col lg:flex-col pt-3 pb-5 gap-5 w-full">
+                    <CardTemplate title="Board Age" additionalContentClasses="flex flex-row justify-center gap-4">
+                        <div className="w-[30%]">
+                        <CircularProgressbar value={70} text={"33 days"}
+                            strokeWidth={6}
+                            styles={buildStyles({
+                                textSize: "1rem",
+                                textColor: "#fff",
+                                pathColor: 70 < 20 ? "#FF5C5C" : 70 < 50 ? "#FFC05C" : "#71EB84",
+                                trailColor: "#fff",
+                            })}/>
+                        </div>
+                        <div className="flex flex-col text-3xl self-center gap-2">
+                            <div>Fairly New</div>
+                            <div>Status: <span className="text-green-400">Open</span></div>
+                        </div>
+                    </CardTemplate>
+                    <CardTemplate title="Members Utilization">
+                        <div className="flex flex-row gap-5">
+                            <div className="text-green-400 font-medium"><AiOutlineArrowUp className="inline"/>+5%</div>
+                            <div className="w-80">On average, performance has increased slightly compared to last week</div>
+                        </div>
+                    </CardTemplate>
+
+                    <div className="font-extrabold text-3xl text-center">Card Statistics</div>
+                    <div className="flex flex-row gap-5">
+                        <CardTemplate title="Milestones">
+                            <div className="m-auto w-5/6 lg:w-4/6">
+                                    <CircularProgressbar value={10} text={"10%"}
+                                    strokeWidth={6}
+                                    styles={buildStyles({
+                                    textSize: "1rem",
+                                    textColor: "#fff",
+                                    pathColor: 70 < 20 ? "#FF5C5C" : 70 < 50 ? "#FFC05C" : "#71EB84",
+                                    trailColor: "#fff",
+                                })}/>
+                            </div>
+                        </CardTemplate>
+                        <CardTemplate>
+                            <div className="pb-2">On Track <span className="float-right">15 <span className="opacity-80">{'(75%)'}</span></span></div>
+                            <ProgressBar max={20} value={15} type="good"/>
+
+                            <div className="pb-2">At Risk <span className="float-right">3 <span className="opacity-80">{'15%)'}</span></span></div>
+                            <ProgressBar max={20} value={3} type="bad"/>
+
+                            <div className="pb-2">Not Assigned <span className="float-right">10 <span className="opacity-80">{'(50%)'}</span></span></div>
+                            <ProgressBar max={20} value={10}/>
+
+                            <div>Done <span className="float-right">2 <span className="opacity-80">{'(10%)'}</span></span></div>
+                            <ProgressBar max={20} value={2}/>
+                        </CardTemplate>
+                    </div>
+
+                    <div className="flex flex-row gap-5">
+                        <CardTemplate title="Total Cards">
+                            <div className="font-extrabold text-8xl text-center ">20</div>
+                        </CardTemplate>
+                        <CardTemplate title="To Do Cards">
+                            <div className="font-extrabold text-8xl text-center ">13</div>
+                        </CardTemplate>
+                    </div>
+
+                    <div className="flex flex-row gap-5">
+                        <CardTemplate title="Doing Cards">
+                            <div className="font-extrabold text-8xl text-center ">5</div>
+                        </CardTemplate>
+                        <CardTemplate title="Done Cards">
+                            <div className="font-extrabold text-8xl text-center ">2</div>
+                        </CardTemplate>
+                    </div>
+                </div>
+            </div>
         </div>
     )
 }

styles/Background.module.css

@@ -1,12 +1,13 @@
 .background {
-    position: absolute;
+    position: fixed;
     top: 0;
     left: 0;
     z-index: -1;
     background-image: url("/images/pexels-luis-quintero-2471235.jpg");
     background-position: center;
     background-size: cover;
     background-repeat: no-repeat;
+    background-attachment: fixed;
     width: 100%;
     height: 100vh;
     filter: blur(65px);

styles/Home.module.css

@@ -1,10 +1,10 @@
 .main {
     position: relative;
     display: flex;
-    flex-direction: flex-column;
+    flex-direction: column;
     z-index: 1;
-    height: 100vh;
-    overflow: hidden;
+    width: 100%;
+    height: 100%;
 }
 
 @media (max-width: 767px) {

styles/globals.css

@@ -29,7 +29,8 @@
 
 html,
 body {
-  max-width: 100vw;
+  width: 100%;
+  height: 100%;
   overflow-x: hidden;
 }