Feature/ia tickets 26 71 user dashboard (#94)

Full featured dashboard with individual summary pages:

Dash:

    Total emissions summary based on the user's unit preference
    Circular progress indicators change color based on its respective percentage
        0% should be displayed when there is absolute no calculations saved
        Otherwise, the percentage should be rendered center of the circle
        Color changes happen at:
            [ 0-40 ] %: green
            ( 40-80 ] %: yellow
            ( 80-100 ] %: red
    Each card also changes its emissions value based on the user's unit preference

Fuel, Electricity, and Flight summary pages:

    Render a responsive table, collapsing columns as the view-port shrinks
    Each page has a header
    Each page has a 'empty table' message, linking to the appropriate calculator page to start

Vehicle summary page:

    On larger screens, a tabbed UI is rendered. Each tab corresponds to a user's vehicle
    On smaller screens, an accordion UI is rendered
    In either style:
        A table is rendered, responsive to the size of the view-port, collapsing columns as needed.
    For each vehicle, if no data exists, a message and link will appear to redirect to the proper calculator

All summary pages:

    All data is sorted recent to oldest, top to bottom.

package.json

@@ -22,6 +22,7 @@
     "next": "12.2.3",
     "next-auth": "^4.10.3",
     "nodemailer": "^6.7.8",
+    "rc-progress": "^3.4.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-icons": "^4.4.0",

src/components/Account/Dashboard.tsx

@@ -0,0 +1,74 @@
+import { useRouter } from 'next/router';
+import React from 'react';
+import { EmissionsSummaryData } from '../../schema/dashboard.schema';
+import { formatWeightToUserUnitPreference } from '../../utils/unitConverter';
+import SummaryTile from './SummaryTile';
+
+interface DashboardProps {
+  greeting: string;
+  emissionsSummaryData: EmissionsSummaryData[] | undefined;
+  unitPreference: string;
+}
+
+const Dashboard = ({
+  greeting,
+  emissionsSummaryData,
+  unitPreference,
+}: DashboardProps) => {
+  const router = useRouter();
+
+  const totalEmissions =
+    emissionsSummaryData?.reduce((previousValue, current) => {
+      return previousValue + current.emissions;
+    }, 0) ?? 0;
+
+  const handleOnClickTile = (type: string) => {
+    switch (type) {
+      case 'Electricity':
+        return router.push('/account/electricity-summary');
+      case 'Driving':
+        return router.push('/account/driving-summary');
+      case 'Fuel':
+        return router.push('/account/fuel-summary');
+      case 'Flight':
+        return router.push('/account/flight-summary');
+      default:
+        return;
+    }
+  };
+
+  if (!emissionsSummaryData) return <p>Something went wrong</p>;
+
+  return (
+    <div className="flex flex-col justify-between px-5 mb-10 gap-5">
+      <h2 className="text-4xl mb-14">{greeting}</h2>
+      <div className="flex flex-col justify-center text-center">
+        <h2 className="text-2xl mb-5">Your total emissions to date</h2>
+        <h2 className="text-xl mb-5 font-bold">
+          {formatWeightToUserUnitPreference(unitPreference, totalEmissions)}
+        </h2>
+      </div>
+      <div className="flex justify-center text-center">
+        <h4 className="text-2xl mb-5">
+          To this date, your total emissions break down as follows
+        </h4>
+      </div>
+      <div className="grid grid-cols-1 md:grid-cols-4 xl:grid-cols-8 gap-5 md:px-10">
+        {emissionsSummaryData.map((classification) => {
+          return (
+            <SummaryTile
+              type={classification.type}
+              unitPreference={unitPreference}
+              emissionsValue={classification.emissions}
+              totalEmissions={totalEmissions}
+              key={classification.type}
+              handleOnClick={() => handleOnClickTile(classification.type)}
+            />
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
+export default Dashboard;

src/components/Account/ElectricityTable.tsx

@@ -0,0 +1,95 @@
+import { Button, Spinner, Table } from 'flowbite-react';
+import Link from 'next/link';
+import React from 'react';
+import { ElectricityData } from '../../schema/dashboard.schema';
+
+interface ElectricityTableProps {
+  electricityData: ElectricityData[] | undefined;
+}
+
+const ElectricityTable = ({ electricityData }: ElectricityTableProps) => {
+  const electricityDataDatesDesc = () => {
+    const dataToBeSorted = [...electricityData!];
+    if (electricityData)
+      return dataToBeSorted.sort(
+        (a, b) => b.estimated_at.valueOf() - a.estimated_at.valueOf()
+      );
+  };
+
+  if (!electricityData) {
+    return (
+      <div className="flex justify-center items-center">
+        <Spinner />
+      </div>
+    );
+  }
+
+  return (
+    <div className="px-10">
+      <Table hoverable={true}>
+        <Table.Head>
+          <Table.HeadCell>Date</Table.HeadCell>
+          <Table.HeadCell className="hidden sm:table-cell">
+            Electricity Used
+          </Table.HeadCell>
+          <Table.HeadCell className="hidden sm:table-cell">
+            Emissions
+          </Table.HeadCell>
+          <Table.HeadCell className="sm:hidden">
+            <div className="text-end">
+              <p>Electricity Used</p>
+              <strong>Emissions</strong>
+            </div>
+          </Table.HeadCell>
+        </Table.Head>
+        <Table.Body className="divide-y">
+          {electricityData.length !== 0 ? (
+            electricityDataDatesDesc()!.map((entry) => {
+              return (
+                <Table.Row
+                  className="bg-white dark:border-gray-700 dark:bg-gray-800"
+                  key={entry.id}
+                >
+                  <Table.Cell className="whitespace-nowrap font-medium text-gray-900 dark:text-white">
+                    <p>{entry.estimated_at.toLocaleDateString()}</p>
+                    <p>{entry.estimated_at.toLocaleTimeString()}</p>
+                  </Table.Cell>
+                  {/** Todo: update this to use the users unit preference */}
+                  <Table.Cell className="font-medium text-gray-900 dark:text-white hidden sm:table-cell">
+                    <>
+                      {entry.electricity_value} {entry.electricity_unit}
+                    </>
+                  </Table.Cell>
+                  <Table.Cell className="font-medium text-gray-900 dark:text-white hidden sm:table-cell">
+                    <>{entry.carbon_g / 1000.0}kg</>
+                  </Table.Cell>
+                  <Table.Cell className="whitespace-nowrap font-medium text-gray-900 flex flex-col dark:text-white text-end sm:hidden">
+                    <>
+                      {entry.electricity_value} {entry.electricity_unit}
+                      <strong>{entry.carbon_g / 1000.0}kg</strong>
+                    </>
+                  </Table.Cell>
+                </Table.Row>
+              );
+            })
+          ) : (
+            <div></div>
+          )}
+        </Table.Body>
+      </Table>
+      {electricityData.length === 0 ? (
+        <div className="flex flex-col items-center pt-10 gap-4">
+          <strong>You haven't recorded any electricity data.</strong>
+          <p>You can make your emissions calculation here:</p>
+          <Button size="sm">
+            <Link href="/electricity">Make a new calculation</Link>
+          </Button>
+        </div>
+      ) : (
+        ''
+      )}
+    </div>
+  );
+};
+
+export default ElectricityTable;