made profile page responsive

devlarabar · Dec 15, 2023 · cd5bd4f · cd5bd4f
1 parent d502273
commit cd5bd4f
Show file tree

Hide file tree

Showing 8 changed files with 231 additions and 117 deletions.
diff --git a/client/app/profile/page.jsx b/client/app/profile/page.jsx
@@ -1,14 +1,19 @@
 "use client";
 import React, { useState, useEffect } from "react";
-import BusinessCardEngagementChart from "@components/client/stats/BusinessCardEngagementChart";
+import BusinessEngagementChart from "@components/client/stats/BusinessCardEngagementChart";
 import NumberStats from "@components/client/stats/NumberStats";
 import ProposalVsContract from "@components/client/stats/ProposalVsContract";
 import SiteCompleted from "@components/client/stats/SiteCompleted";
-import OutreachResponseRate from "@components/client/stats/OutreachResponseRate";
+import OutreachSuccesseRate from "@components/client/stats/OutreachSuccesseRate";
 import OutreachResults from "@components/client/stats/YesOrNoResponse";
+import OutreachResponseAnalyzer from "@components/client/stats/OutreachResponseAnalyzer";
 import { fetchStats } from "@utils/stats";
 
 export default function Profile() {
+  const [viewPercentage, setViewPercentage] = useState(false);
+
+  const [isChecked, setIsChecked] = useState(false);
+
   const [statsData, setStatsData] = useState({
     profileStats: {
       totalClients: 1,
@@ -20,54 +25,109 @@ export default function Profile() {
       proposalsSent: 1,
       contractsSent: 1,
       sitesCompleted: 1,
-      paid:1,
+      paid: 1,
     },
   });
 
+  const changeView = () => {
+    setIsChecked(!isChecked);
+    setViewPercentage(!viewPercentage);
+  };
   useEffect(() => {
     fetchStats().then((data) => setStatsData((prevData) => data));
   }, []);
+
   const maxWidth = "1000px";
+
+  const minWidth = "300px";
+
   const maxHeight = "1200px";
 
   return (
-    <main
-      className={`grid h-[1100px] max-h-[${maxHeight}]  max-w-[${maxWidth}] grid-cols-12 grid-rows-6 gap-4  text-center font-bold text-secondary`}
-    >
-      <section className="rounded-box  col-span-4  col-start-1 row-span-2 row-start-1 flex flex-col items-center justify-between bg-primary p-2">
-        <h3>Response Analysis: Answered vs Unanswered Outreach</h3>
-      </section>
-      <section className="rounded-box   col-span-4 col-start-1 row-span-2 row-start-3 flex flex-col items-center justify-between bg-primary p-2">
-        <h3>Outreach Outcomes: Yes vs No Responses</h3>
-        <OutreachResults stats={statsData} />
-      </section>
-      <section className="rounded-box  col-span-4 col-start-1 row-span-2 row-start-5  flex flex-col items-center justify-between bg-primary p-2">
-        <h3>Outreach Success Rate </h3>
-        <OutreachResponseRate stats={statsData} />
-      </section>
-      <section className=" rounded-box col-span-8 col-start-5 row-span-4 row-start-1 flex flex-col items-center justify-start bg-primary p-2">
-        <h3>Business Card Engagement: Saved vs Contacted</h3>
-        <div className="my-auto w-[500px]">
-          <BusinessCardEngagementChart stats={statsData} />
-        </div>
-        <div className=" align-bottom">
-          <NumberStats stats={statsData} />
-        </div>
-      </section>
+    <main>
+      <div className=" mb-2 flex items-center justify-start gap-2 pl-2">
+        <span className="font-bold text-secondary">TOGGLE VIEW</span>
+        <label className=" flex">
+          <input
+            type="checkbox"
+            className="toggle"
+            checked={isChecked}
+            onChange={changeView}
+          />
+        </label>
+      </div>
+      <section
+        className={`grid h-[1100px] max-h-[${maxHeight}] max-w-[${maxWidth}]  min-w-[${minWidth}] gap-4 text-center  font-bold text-secondary 2xs:grid-cols-1 2xs:grid-rows-6 xs:grid-cols-1 xs:grid-rows-6 sm:grid-cols-4 sm:grid-rows-5 sm:gap-4 md:grid-cols-4 md:grid-rows-5 lg:grid-cols-6 lg:grid-rows-4 xl:grid-cols-12 xl:grid-rows-6`}
+      >
+        <section className="rounded-box  bg-primary p-2 2xs:row-start-1 2xs:flex 2xs:flex-col 2xs:items-center 2xs:justify-between xs:col-span-1 sm:col-span-2 sm:col-start-1 md:col-span-2 md:col-start-1 lg:col-span-3 lg:col-start-1 lg:row-span-1 lg:row-start-1 xl:col-span-4 xl:col-start-1 xl:row-span-2 xl:row-start-1">
+          <h3 className="xs:text-base sm:text-lg ">
+            Answered vs Unanswered Outreach
+          </h3>
+          <div className=" my-auto w-full rounded-lg  sm:items-center md:flex md:items-center">
+            <div className="w-full  md:shrink">
+              <OutreachResponseAnalyzer
+                stats={statsData}
+                showPercentage={viewPercentage}
+              />
+            </div>
+          </div>
+        </section>
+        <section className="rounded-box bg-primary p-2 2xs:row-start-2 2xs:flex 2xs:flex-col 2xs:items-center 2xs:justify-between xs:col-span-1 sm:col-span-2 sm:col-start-3 sm:row-start-1 md:col-span-2 md:col-start-3 md:row-start-1 lg:col-span-3  lg:col-start-1 lg:row-span-1 lg:row-start-2 xl:col-span-4 xl:col-start-1 xl:row-span-2 xl:row-start-3">
+          <h3 className="xs:text-base sm:text-lg">Yes vs No Responses</h3>
+          <div className=" my-auto  w-full rounded-lg md:flex">
+            <div className="w-full md:shrink">
+              <OutreachResults
+                stats={statsData}
+                showPercentage={viewPercentage}
+              />
+            </div>
+          </div>
+        </section>
+        <section className="rounded-box bg-primary  p-2 2xs:row-start-3 2xs:flex 2xs:flex-col  2xs:items-center 2xs:justify-between xs:col-span-1 sm:col-span-2 sm:col-start-1 sm:row-span-1 sm:row-start-4 md:col-span-2 md:col-start-1 md:row-span-1 md:row-start-4 lg:col-span-3 lg:col-start-1 lg:row-span-1 lg:row-start-3 xl:col-span-4 xl:col-start-1 xl:row-span-2 xl:row-start-5">
+          <h3 className="xs:text-base sm:text-lg">Outreach Success Rate </h3>
+          <div className=" my-auto  w-full rounded-lg md:flex">
+            <div className="w-full md:shrink">
+              <OutreachSuccesseRate
+                stats={statsData}
+                showPercentage={viewPercentage}
+              />
+            </div>
+          </div>
+        </section>
+        <section className=" rounded-box  bg-primary p-2 2xs:row-start-4 2xs:flex 2xs:flex-col 2xs:items-center 2xs:justify-between xs:col-span-1 sm:col-span-4 sm:col-start-1 sm:row-span-2 sm:row-start-2 md:col-span-4 md:col-start-1 md:row-span-2  md:row-start-2 lg:col-span-3 lg:col-start-4 lg:row-span-3 lg:row-start-1 xl:col-span-8 xl:col-start-5 xl:row-span-4 xl:row-start-1">
+          <h3 className="xs:text-base sm:text-lg">
+            Saved vs Contacted Clients
+          </h3>
+          <div className="flex w-full  grow items-center   transition-all duration-300 2xs:justify-evenly sm:justify-evenly md:justify-evenly lg:flex-col lg:justify-evenly xl:justify-evenly">
+            <div className="relative sm:h-[340px] sm:w-[340px] md:h-[350px] md:w-[350px]  lg:h-[400px] lg:w-[400px] xl:h-[500px] xl:w-[500px]">
+              <BusinessEngagementChart stats={statsData} />
+            </div>
+            <div className=" w-full align-bottom">
+              <NumberStats stats={statsData} showPercentage={viewPercentage} />
+            </div>
+          </div>
+        </section>
 
-      <section className=" rounded-box col-span-4 col-start-5 row-span-2 flex flex-col items-center justify-between bg-primary p-2">
-        <h3>Proposal sent vs Contract sent</h3>
-        <ProposalVsContract stats={statsData} />
-      </section>
-      <section className="  rounded-box  col-span-4 col-start-9 row-span-2 flex flex-col items-center justify-between bg-primary p-2">
-        <h3>Sites completed</h3>
-        <SiteCompleted stats={statsData} />
+        <section className="rounded-box  bg-primary p-2 2xs:row-start-5 2xs:flex 2xs:flex-col 2xs:items-center 2xs:justify-between xs:col-span-1 sm:col-span-2 sm:col-start-3 sm:row-span-1 sm:row-start-4 md:col-span-2 md:col-start-3 md:row-span-1 md:row-start-4  lg:col-span-3 lg:col-start-1 lg:row-span-1 lg:row-start-4 xl:col-span-4 xl:col-start-5 xl:row-span-2">
+          <h3 className=" xs:text-base sm:text-lg">
+            Proposals sent vs Contracts sent
+          </h3>
+          <div className=" my-auto w-full rounded-lg md:flex ">
+            <div className="w-full md:shrink">
+              <ProposalVsContract
+                stats={statsData}
+                showPercentage={viewPercentage}
+              />
+            </div>
+          </div>
+        </section>
+        <section className=" rounded-box  bg-primary p-2  2xs:row-start-6 2xs:flex 2xs:flex-col 2xs:items-center 2xs:justify-between xs:col-span-1 sm:col-span-4 sm:col-start-1 sm:row-span-1 sm:row-start-5 md:col-span-4 md:col-start-1 md:row-start-5  md:flex lg:col-span-3 lg:col-start-4 lg:row-span-1  lg:row-start-4 xl:col-span-4 xl:col-start-9 xl:row-span-2">
+          <h3 className=" xs:text-base sm:text-lg">Sites completed</h3>
+          <div className=" my-auto  w-full rounded-lg">
+            <SiteCompleted stats={statsData} showPercentage={viewPercentage} />
+          </div>
+        </section>
       </section>
     </main>
   );
 }
-/**
- * thought process
- *
- *
- */
diff --git a/client/components/client/stats/BusinessCardEngagementChart.jsx b/client/components/client/stats/BusinessCardEngagementChart.jsx
@@ -9,9 +9,9 @@ function BusinessCardEngagementChart({ stats }) {
     labels: ["Total Clients", "  Clients  Contacted "],
     datasets: [
       {
-        data: [60,40],
-        backgroundColor: ["rgba(255, 99, 132, 0.2)", "rgba(54, 162, 235, 0.2)"],
-        borderColor: ["rgba(255, 99, 132, 1)", "rgba(54, 162, 235, 1)"],
+        data: [60, 40],
+        backgroundColor: ["#E8DAB2", "#C0D6DF"],
+        borderColor: ["#E8DAB2", "#C0D6DF"],
         borderWidth: 1,
       },
     ],
@@ -23,15 +23,15 @@ function BusinessCardEngagementChart({ stats }) {
       legend: {
         labels: {
           font: {
-            size: 18,
+            size: 15,
           },
           color: "primary",
         },
       },
     },
   });
   useEffect(() => {
-    const updateChartData = (stats) => 
+    const updateChartData = (stats) =>
       setChartData((prevData) => {
         const updatedData = { ...prevData };
         updatedData.datasets = [...prevData.datasets];
@@ -44,11 +44,12 @@ function BusinessCardEngagementChart({ stats }) {
         };
         return updatedData;
       });
+
     updateChartData(stats);
   }, [stats]);
 
   return (
-    <div className=" h-full ">
+    <div className=" hidden  sm:block h-full w-full sm:p-2">
       <Pie data={chartData} options={chartOptions} />
     </div>
   );

diff --git a/client/components/client/stats/NumberStats.jsx b/client/components/client/stats/NumberStats.jsx
@@ -1,26 +1,43 @@
 import React from "react";
 import { useEffect, useState } from "react";
-function NumberStats({ stats}) {
+function NumberStats({ stats, showPercentage }) {
   const [numberData, setNumberData] = useState({
     totalClient: 0,
     clientsContacted: 0,
   });
+
   useEffect(() => {
     setNumberData((prevData) => ({
       totalClient: stats.profileStats["totalClients"],
       clientsContacted: stats.profileStats["totalOutreach"],
     }));
   }, [stats]);
 
+  const outreachPercentage = numberData.totalClient
+    ? ((numberData.clientsContacted / numberData.totalClient) * 100).toFixed(2)
+    : 0;
+
   return (
-    <div className="stats stats-vertical bg-primary text-primary-content shadow lg:stats-horizontal">
-      <div className="stat">
-        <div className="stat-title  text-secondary">Total Clients</div>
-        <div className="stat-value">{numberData.totalClient}</div>
+    <div className="stats stats-vertical w-full bg-primary text-primary-content shadow 2xs:stats-horizontal lg:stats-horizontal">
+      <div className="stat p-1">
+        <div className=" sm:text-md stat-title text-secondary 2xs:text-[15px] xs:text-base sm:flex sm:items-center sm:justify-center xl:text-lg">
+          Total Clients
+        </div>
+        <div className="stat-value 2xs:text-base xs:text-base sm:text-lg lg:text-2xl xl:text-2xl">
+          {numberData.totalClient}
+        </div>
       </div>
-      <div className="stat">
-        <div className="stat-title text-secondary">Clients Contacted</div>
-        <div className="stat-value">{numberData.clientsContacted}</div>
+      <div className="stat p-1">
+        <div className=" sm:text-md stat-title text-secondary 2xs:text-[15px] xs:text-base sm:flex sm:items-center sm:justify-center xl:text-lg">
+          Clients Contacted
+        </div>
+        <div className="stat-value 2xs:text-base xs:text-base sm:text-lg lg:text-2xl xl:text-2xl">
+          {showPercentage ? (
+            <span>{outreachPercentage}%</span>
+          ) : (
+            numberData.clientsContacted
+          )}
+        </div>
       </div>
     </div>
   );

diff --git a/client/components/client/stats/OutreachResponseAnalyzer.jsx b/client/components/client/stats/OutreachResponseAnalyzer.jsx
@@ -0,0 +1,61 @@
+import React from "react";
+import { useEffect, useState } from "react";
+import CountUp from "react-countup";
+
+function OutreachResponseAnalyzer({ stats, showPercentage }) {
+  const [responseCounts, setResponseCounts] = useState({
+    answeredOutreach: 0,
+    unAnsweredOutReach: 0,
+  });
+  useEffect(() => {
+    setResponseCounts((prevData) => ({
+      answeredOutreach: stats.profileStats["answeredOutreach"],
+      unAnsweredOutReach: stats.profileStats["unansweredOutreach"],
+    }));
+  }, [stats]);
+
+  const totalResponses =
+    responseCounts.answeredOutreach + responseCounts.unAnsweredOutReach;
+
+  const answeredPercentages = totalResponses
+    ? ((responseCounts.answeredOutreach / totalResponses) * 100).toFixed(2)
+    : 0;
+  const unAnsweredPercentages = totalResponses
+    ? ((responseCounts.unAnsweredOutReach / totalResponses) * 100).toFixed(2)
+    : 0;
+  return (
+    <>
+      <div className=" stats stats-vertical w-full bg-primary  text-primary-content  shadow 2xs:stats-horizontal xs:stats-horizontal sm:stats-horizontal  md:stats-horizontal lg:stats-horizontal sm:h-24">
+        <div className="stat  p-1 xs:p-0">
+          <div className="sm:text-md stat-title text-secondary 2xs:text-base xs:text-base sm:flex sm:items-center sm:justify-center xl:text-lg">
+            Answered
+          </div>
+          <div className="stat-value 2xs:text-base xs:text-base sm:text-lg lg:text-2xl xl:text-2xl">
+            {showPercentage ? (
+              <span>{answeredPercentages}%</span>
+            ) : (
+              <CountUp end={responseCounts.answeredOutreach} duration={2.75} />
+            )}
+          </div>
+        </div>
+        <div className="stat p-1 sm:p-0">
+          <div className="sm:text-md stat-title text-secondary 2xs:text-base xs:text-base sm:flex sm:items-center sm:justify-center xl:text-lg">
+            UnAnswered
+          </div>
+          <div className="stat-value 2xs:text-base xs:text-base sm:text-lg lg:text-2xl xl:text-2xl">
+            {showPercentage ? (
+              <span>{unAnsweredPercentages}%</span>
+            ) : (
+              <CountUp
+                end={responseCounts.unAnsweredOutReach}
+                duration={2.75}
+              />
+            )}
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}
+
+export default OutreachResponseAnalyzer;
diff --git a/...nts/client/stats/OutreachResponseRate.jsx → ...nts/client/stats/OutreachSuccesseRate.jsx b/...nts/client/stats/OutreachResponseRate.jsx → ...nts/client/stats/OutreachSuccesseRate.jsx
@@ -2,7 +2,7 @@ import React from "react";
 import { useEffect, useState } from "react";
 import CountUp from "react-countup";
 
-function OutreachResponseRate({ stats }) {
+function OutreachSuccesseRate({ stats, showPercentage }) {
   const [responseCounts, setResponseCounts] = useState({
     respondedCount: 0,
     notRespondedCount: 0,
@@ -14,34 +14,29 @@ function OutreachResponseRate({ stats }) {
     }));
   }, [stats]);
 
-  const [viewPercentage, setViewPercentage] = useState(false);
-
-  const totalResponses = responseCounts.respondedCount + responseCounts.notRespondedCount;
+  const totalResponses =
+    responseCounts.respondedCount + responseCounts.notRespondedCount;
 
   const respondedRate = totalResponses
     ? ((responseCounts.respondedCount / totalResponses) * 100).toFixed(2)
     : 0;
   return (
     <>
-      <div className=" stats stats-vertical w-full bg-primary text-primary-content  shadow lg:stats-horizontal ">
-        <div className="stat ">
-          <div className="stat-title text-lg text-secondary">Success</div>
-          <div className="stat-value text-3xl">
-            {viewPercentage ? (
+      <div className=" xs:stat-horizontal stats stats-vertical w-full bg-primary text-primary-content shadow md:stats-horizontal lg:stats-horizontal ">
+        <div className="stat p-1">
+          <div className="sm:text-md stat-title text-secondary 2xs:text-base xs:text-base sm:flex sm:items-center sm:justify-center xl:text-lg">
+            Success
+          </div>
+          <div className="stat-value 2xs:text-base xs:text-base sm:text-lg lg:text-2xl xl:text-2xl">
+            {showPercentage ? (
               <span>{respondedRate}%</span>
             ) : (
               <CountUp end={responseCounts.respondedCount} duration={2.75} />
             )}
           </div>
         </div>
       </div>
-      <button
-        className="btn btn-secondary"
-        onClick={() => setViewPercentage(!viewPercentage)}
-      >
-        Toggle View
-      </button>
     </>
   );
 }
-export default OutreachResponseRate;
+export default OutreachSuccesseRate;