First step on refactoring code structure

client/app/analysis/page.tsx

@@ -1,16 +1,9 @@
 "use client";
 import React, { useRef } from "react";
 import { useReactToPrint } from "react-to-print";
-import { Button } from "../../components/ui/button";
-import "../../styles/AnalysisPagePdfStyles.css";
-import { AnalysisHeader } from "../../containers/analysis-page/header-section/index";
-import { OveralAnalysis } from "@/containers/analysis-page/overal-analysis-section";
-import { Insights } from "@/containers/analysis-page/insights-section/indext";
-import { Recommendations } from "@/containers/analysis-page/recomendation-section";
-import NavBarAnalysis from "@/components/NavbarAnalysis";
-import Footer from "@/components/Footer";
-import { MostCommonPosition } from "@/containers/analysis-page/most-common-position-section";
-
+import { Button } from "@/components/ui/button";
+import "@/features/analysis/"
+import { AnalysisHeader, Footer, Insights, MostCommonPosition, NavBarAnalysis, OveralAnalysis, Recommendations } from "@/features";
 
 
 const AnalysisPage = () => {
@@ -25,16 +18,13 @@ const AnalysisPage = () => {
       <NavBarAnalysis />
       <AnalysisHeader />
       <div className="absolute top-4 right-6 z-20 flex">
-      <Button
-        onClick={handlePDF}
-        className="rounded-full bg-blue-600 noprint"
-      >
-        Save as PDF
-      </Button>
+        <Button
+          onClick={handlePDF}
+          className="rounded-full bg-blue-600 noprint"
+        >
+          Save as PDF
+        </Button>
       </div>
-      {/* <Button className="absolute top-4 right-36 rounded-full bg-blue-600 noprint">
-        Share PDF
-      </Button> */}
       <OveralAnalysis />
       <Insights />
       <MostCommonPosition />

client/components/BoxPlotChart/index.tsx → client/components/BoxPlotChart/BoxPlotChart.tsx

@@ -3,12 +3,17 @@
 import React from "react";
 import { ApexOptions } from "apexcharts";
 import dynamic from "next/dynamic";
-import { BoxPlotChartProps } from "@/types/BoxPlotChartProps";
 import { generateBoxplotChartOptions } from "@/services/generateBoxPlotChartOptions";
+import { LocationDetails } from "@/types/LocationDetails";
 const ReactApexChart = dynamic(() => import("react-apexcharts"), {
   ssr: false,
 });
 
+
+export type BoxPlotChartProps = {
+    data: LocationDetails[];
+  };
+
 export default function BoxPlotChart({ data }: BoxPlotChartProps) {
   const options: ApexOptions = generateBoxplotChartOptions(data);
   return (

client/containers/analysis-page/index.ts

@@ -0,0 +1,5 @@
+export * from "./header-section/analysis-header"
+export * from "./insights-section/insights-section"
+export * from "./most-common-position-section/most-common-position-section"
+export * from "./recomendation-section/recommendation-section"
+export * from "./overal-analysis-section/overal-analysis-section"

client/containers/analysis-page/insights-section/indext.tsx → client/containers/analysis-page/insights-section/insights-section.tsx

@@ -1,4 +1,4 @@
-import { PayGapPieChart } from "@/components/PayGapChart/idex";
+import { PayGapPieChart } from "@/components/PayGapChart/PayGapPieChart";
 import { DataContext } from "@/services/provider";
 import { splitTextIntoTwoParts } from "@/services/splitTextIntoTwoParts";
 import React, { useContext } from "react";

client/containers/analysis-page/most-common-position-section/index.tsx → client/containers/analysis-page/most-common-position-section/most-common-position-section.tsx

@@ -1,9 +1,8 @@
-import BoxPlotChart from "@/components/BoxPlotChart";
-import LineOfBestFitChart from "@/components/LineChart";
+import BoxPlotChart from "@/components/BoxPlotChart/BoxPlotChart";
+import LineOfBestFitChart from "@/components/LineChart/LineChart";
 import { DataContext } from "@/services/provider";
 import React, { useContext } from "react";
 
-
 export const MostCommonPosition = () => {
   const { data } = useContext(DataContext);
   return (
@@ -22,9 +21,7 @@ export const MostCommonPosition = () => {
                 Salary based on Location
               </h3>
               <div className="print-position__chart__boxplot">
-                <BoxPlotChart
-                  data={data.location_details}
-                />
+                <BoxPlotChart data={data.location_details} />
               </div>
             </>
           )}
@@ -44,5 +41,5 @@ export const MostCommonPosition = () => {
         </div>
       </section>
     </section>
-  )
+  );
 };

client/containers/analysis-page/overal-analysis-section/overal-analysis-section.tsx

@@ -0,0 +1,98 @@
+import { DataContext } from "@/services/provider";
+import React, { useContext } from "react";
+import HorizontalBarChart from "../../../components/HorizontalBarChart/HorizontalBarChart";
+import FemaleIcon from "@/public/icon/femaleIcon";
+import MaleIcon from "@/public/icon/maleIcon";
+
+export const OveralAnalysis = () => {
+  const { data } = useContext(DataContext);
+
+  let numberOfPeople: Record<string, number> = {};
+  let numberOfEmployees: number = 0;
+  if (data) {
+    numberOfPeople = data?.company_overview.gender_ratio;
+    numberOfEmployees = data?.company_overview.total_number_of_employees;
+  }
+
+  let maleRatio: number | undefined = 0;
+  let femaleRatio: number | undefined = 0;
+
+  if (numberOfPeople) {
+    maleRatio = numberOfPeople["Male"];
+    femaleRatio = numberOfPeople["Female"];
+  }
+
+  const maleRatiopercentage: number = Math.round(
+    ((maleRatio / numberOfEmployees) * 100)
+  );
+  const femaleRatioPercentage: number = Math.round(
+    ((femaleRatio / numberOfEmployees) * 100)
+  );
+
+  return (
+    <section className="flex flex-row justify-evenly mx-20 mt-10 print print-overall">
+      <article className="w-1/2 border-r-2 border-neutral-200 print-overall__chart">
+        <div className="px-20">
+          <h2 className="text-slate-950 text-2xl font-bold">
+            Your company average worker
+          </h2>
+          <div className="flex flex-row justify-around my-20 print-overall__boxes">
+            <div className="bg-neutral-200 rounded-lg h-24 w-24 text-center py-4">
+              <p className="font-medium">Age</p>
+              <p className="text-xl font-bold">
+                {data?.company_overview.average_age}
+              </p>
+              <p className="text-xs">years</p>
+            </div>
+            <div className="bg-neutral-200 rounded-lg h-24 w-24 text-center py-4">
+              <p className="font-medium">Salary</p>
+              <p className="text-xl font-bold">
+                {data?.company_overview.average_salary}
+              </p>
+              <p className="text-xs">(sek/month)</p>
+            </div>
+            <div className=" bg-neutral-200 rounded-lg h-24 w-24 text-center py-4">
+              <p className="font-medium">Tenure</p>
+              <p className="text-xl font-bold">
+                {data?.company_overview.average_tenure}
+              </p>
+              <p className="text-xs">years</p>
+            </div>
+          </div>
+          <div className=" flex flex-row">
+            <div>
+              <p className="text-sm text-neutral-500 mb-2">
+                Number of employees
+              </p>
+              <h3 className="text-slate-950 text-4xl font-bold">
+                {data?.company_overview.total_number_of_employees}
+              </h3>
+            </div>
+            <div className="flex items-center  ml-20 w-1/2 p-0">
+              <MaleIcon />
+              <p className="pt-10 font-bold text-2xl">{maleRatiopercentage}%</p>
+              <FemaleIcon />
+              <p className="pt-10 font-bold text-2xl">
+                {femaleRatioPercentage}%
+              </p>
+            </div>
+          </div>
+        </div>
+      </article>
+      <article className="w-1/2 print-overall__chart-two">
+        <div className="px-20">
+          <h2 className="text-slate-950 text-2xl font-bold mb-4">
+            Your biggest earners
+          </h2>
+          <p className="text-sm text-neutral-500">
+            These are the top 5 positions that have the biggest salary per month
+            in your company.
+          </p>
+        </div>
+        <div className="pl-5">
+          <HorizontalBarChart key="barchart" />
+        </div>
+      </article>
+    </section>
+  );
+};

client/containers/export.ts

@@ -0,0 +1 @@
+export * from "./analysis-page"

client/features/analysis/AnalysisPagePdfStyles.css

@@ -0,0 +1,13 @@
+@media print {
+    .title-for-print {
+        margin: 0;
+    }
+
+    .subtitle-for-print-one {
+        margin: 0 0 1rem 0;
+    }
+
+    .subtitle-for-print-two {
+        margin: 0 0 2rem 0;
+    }
+}

client/features/analysis/components/BoxPlotChart.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import React from "react";
+import { ApexOptions } from "apexcharts";
+import dynamic from "next/dynamic";
+import { generateBoxplotChartOptions } from "../generateBoxPlotChartOptions";
+import { LocationDetails } from "../types";
+const ReactApexChart = dynamic(() => import("react-apexcharts"), {
+  ssr: false,
+});
+
+type BoxPlotChartProps = {
+    data: LocationDetails[];
+  };
+
+export default function BoxPlotChart({ data }: BoxPlotChartProps) {
+  const options: ApexOptions = generateBoxplotChartOptions(data);
+  return (
+    <>
+      {typeof window !== "undefined" && (
+        <ReactApexChart
+          options={options}
+          series={options.series}
+          type="boxPlot"
+          height={400}
+          width={"100%"}
+        />
+      )}
+    </>
+  );
+}

client/features/analysis/components/Footer.tsx

@@ -0,0 +1,28 @@
+"use client";
+import GitHubIcon from "@/public/icon/gitHubIcon";
+import { useRouter } from "next/navigation";
+
+export default function Footer() {
+  const router = useRouter();
+  return (
+    <footer className="bottom-0 w-full default-gradient noprint">
+      <div className="flex flex-row justify-between pt-24 pb-14 px-24 items-center">
+        <div>
+          <div>&copy;EquityAi, 2024</div>
+          <button onClick={() => router.push("/developers")} className="hover:text-blue-800">About developers</button>
+        </div>
+        <div className="">
+          <h5>Turing Crafters</h5>
+          <div className="flex items-center justify-center space-x-4">
+            <a
+              href="https://github.com/TuringCrafters/EquityAI"
+              target="_blank"
+            >
+              <GitHubIcon />
+            </a>
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+}

client/features/analysis/components/HorizontalBarChart.tsx

@@ -0,0 +1,51 @@
+import { DataContext } from "@/services/provider";
+import React, { useContext } from "react";
+import { BarChart, Bar, XAxis, YAxis, ResponsiveContainer, LabelList } from "recharts";
+
+export default function HorizontalBarChart() {
+  const { data } = useContext(DataContext);
+  const positionsAndSalaries: { position: string; salary: number; currency: string }[] =
+    data?.company_overview.top_five_highest_paying_positions || [];
+  const barData = positionsAndSalaries.map(({ position, salary,currency }) => ({
+    position,
+    salary,
+    currency
+  }));
+  return (
+    <div className="w-3/4 mx-20 ">
+      <ResponsiveContainer width={400} height={300}>
+        <BarChart
+          layout="vertical"
+          className="mt-10"
+          barCategoryGap={5}
+          barGap={8}
+          barSize={25}
+          data={barData}
+          margin={{
+            left: 20,
+          }}
+        >
+          <XAxis type="number" tick={false} axisLine={false} label={barData[0]?.currency ? `${barData[0].currency.toLowerCase()}/month` : ""}/>
+          <YAxis
+            dataKey="position"
+            type="category"
+            className="text-xs text-neutral-500 "
+          />
+          <Bar
+            dataKey="salary"
+            fill="#376bec"
+            barSize={30}
+            radius={[0, 100, 100, 0]}
+            >
+
+          <LabelList 
+          dataKey="salary"
+          position="outside"
+          fill="white"
+          />
+          </Bar>
+        </BarChart>
+      </ResponsiveContainer>
+    </div>
+  );
+}