From d6287cb76f72e6cf003bbfbe83589f13641ac5cb Mon Sep 17 00:00:00 2001
From: ialej001 <ivan.alejandre@gmail.com>
Date: Fri, 2 Sep 2022 17:03:03 -0700
Subject: [PATCH 01/44] created dashboard control panel

---
 src/components/Dashboard/ControlPanel.tsx | 42 +++++++++++++++++++++++
 1 file changed, 42 insertions(+)
 create mode 100644 src/components/Dashboard/ControlPanel.tsx

diff --git a/src/components/Dashboard/ControlPanel.tsx b/src/components/Dashboard/ControlPanel.tsx
new file mode 100644
index 0000000..8aa0bca
--- /dev/null
+++ b/src/components/Dashboard/ControlPanel.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import { GoSettings } from 'react-icons/go';
+import { MdDashboard } from 'react-icons/md';
+import { CgLogOut } from 'react-icons/cg';
+import { Tooltip } from 'flowbite-react';
+import { useRouter } from 'next/router';
+import { signOut } from 'next-auth/react';
+
+const ControlPanel = () => {
+  const router = useRouter();
+  const buttonSize = 50;
+
+  return (
+    <div className="flex flex-col items-center justify-start py-4">
+      <Tooltip content="Dashboard">
+        <MdDashboard
+          onClick={() => {
+            router.push('/account');
+          }}
+          size={buttonSize}
+          className="cursor-pointer mb-5"
+        />
+      </Tooltip>
+
+      <Tooltip content="Preferences">
+        <GoSettings
+          onClick={() => {
+            router.push('/account/preferences');
+          }}
+          size={buttonSize}
+          className="cursor-pointer hover:bg-gray-400 mb-5"
+        />
+      </Tooltip>
+
+      <Tooltip content="Logout">
+        <CgLogOut onClick={() => signOut()} size={buttonSize} />
+      </Tooltip>
+    </div>
+  );
+};
+
+export default ControlPanel;

From 47c33cab9e2fefa1ed76946349aa8d147414b584 Mon Sep 17 00:00:00 2001
From: ialej001 <ivan.alejandre@gmail.com>
Date: Fri, 2 Sep 2022 18:00:12 -0700
Subject: [PATCH 02/44] created summary tile

---
 src/components/Dashboard/SummaryTile.tsx | 44 ++++++++++++++++++++++++
 1 file changed, 44 insertions(+)
 create mode 100644 src/components/Dashboard/SummaryTile.tsx

diff --git a/src/components/Dashboard/SummaryTile.tsx b/src/components/Dashboard/SummaryTile.tsx
new file mode 100644
index 0000000..10cf7ae
--- /dev/null
+++ b/src/components/Dashboard/SummaryTile.tsx
@@ -0,0 +1,44 @@
+import { Card } from 'flowbite-react';
+import React from 'react';
+import { FaGasPump } from 'react-icons/fa';
+import { ImPowerCord } from 'react-icons/im';
+import { MdDriveEta, MdFlight } from 'react-icons/md';
+
+interface SummaryTileProps {
+  type: string;
+  emissionsValue: number;
+}
+
+const SummaryTile = ({ type, emissionsValue }: SummaryTileProps) => {
+  return (
+    <div className="max-w-lg cursor-pointer">
+      <Card onClick={() => console.log(type)}>
+        <div className="flex flex-col items-center gap-5 px-20 py-5">
+          <h4 className="text-2xl font-bold">{type}</h4>
+          {getIcon(type)}
+          <h3 className="text-xl">Emissions</h3>
+          <h3 className="font-bold">{emissionsValue}</h3>
+        </div>
+      </Card>
+    </div>
+  );
+};
+
+const getIcon = (type: string) => {
+  const buttonSize = 45;
+
+  switch (type) {
+    case 'Power':
+      return <ImPowerCord size={buttonSize} />;
+    case 'Fuel':
+      return <FaGasPump size={buttonSize} />;
+    case 'Flight':
+      return <MdFlight size={buttonSize} />;
+    case 'Driving':
+      return <MdDriveEta size={buttonSize} />;
+    default:
+      return;
+  }
+};
+
+export default SummaryTile;

From bc07c7fe356cbefa14b70bd3b5e8427768d7c0da Mon Sep 17 00:00:00 2001
From: ialej001 <ivan.alejandre@gmail.com>
Date: Fri, 2 Sep 2022 18:00:22 -0700
Subject: [PATCH 03/44] updated styling

---
 src/components/Dashboard/ControlPanel.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Dashboard/ControlPanel.tsx b/src/components/Dashboard/ControlPanel.tsx
index 8aa0bca..2450165 100644
--- a/src/components/Dashboard/ControlPanel.tsx
+++ b/src/components/Dashboard/ControlPanel.tsx
@@ -11,7 +11,7 @@ const ControlPanel = () => {
   const buttonSize = 50;
 
   return (
-    <div className="flex flex-col items-center justify-start py-4">
+    <div className="flex flex-col items-center justify-start p-4">
       <Tooltip content="Dashboard">
         <MdDashboard
           onClick={() => {

From eb71ebd095660a7f6593d404ccf39307cc923031 Mon Sep 17 00:00:00 2001
From: ialej001 <ivan.alejandre@gmail.com>
Date: Fri, 2 Sep 2022 18:00:42 -0700
Subject: [PATCH 04/44] created dash

---
 src/components/Dashboard/Dashboard.tsx | 38 ++++++++++++++++++++++++++
 1 file changed, 38 insertions(+)
 create mode 100644 src/components/Dashboard/Dashboard.tsx

diff --git a/src/components/Dashboard/Dashboard.tsx b/src/components/Dashboard/Dashboard.tsx
new file mode 100644
index 0000000..df86cf9
--- /dev/null
+++ b/src/components/Dashboard/Dashboard.tsx
@@ -0,0 +1,38 @@
+import React from 'react';
+import SummaryTile from './SummaryTile';
+
+const Dashboard = () => {
+  const data = [
+    { type: 'Power', emissions: 3000 },
+    { type: 'Fuel', emissions: 2000 },
+    { type: 'Flight', emissions: 4000 },
+    { type: 'Driving', emissions: 6000 },
+  ];
+
+  return (
+    <div>
+      <div className='flex justify-center text-center'>
+        <h2 className='text-2xl mb-5'>Your total emissions to date</h2>
+        
+      </div>
+      <div className="flex justify-center text-center">
+        <h4 className="text-2xl mb-5">
+          To this day, your total emissions break down as follows
+        </h4>
+      </div>
+      <div className="flex flex-wrap justify-around content-around gap-5">
+        {data.map((classification) => {
+          return (
+            <SummaryTile
+              type={classification.type}
+              emissionsValue={classification.emissions}
+              key={classification.type}
+            />
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
+export default Dashboard;

From 6aba9d467842f0b5867df49ef28b3474f4a5ac52 Mon Sep 17 00:00:00 2001
From: ialej001 <ivan.alejandre@gmail.com>
Date: Fri, 2 Sep 2022 18:03:41 -0700
Subject: [PATCH 05/44] incorporated dashboard and control panel

---
 src/pages/account/index.tsx | 36 ++++++++++++++++--------------------
 1 file changed, 16 insertions(+), 20 deletions(-)

diff --git a/src/pages/account/index.tsx b/src/pages/account/index.tsx
index 75e2bba..ac78b25 100644
--- a/src/pages/account/index.tsx
+++ b/src/pages/account/index.tsx
@@ -1,8 +1,8 @@
-import { router } from '@trpc/server';
-import { Button, Spinner } from 'flowbite-react';
-import { signOut, useSession } from 'next-auth/react';
+import { useSession } from 'next-auth/react';
 import { useRouter } from 'next/router';
-import { useEffect, useState } from 'react';
+import { useEffect } from 'react';
+import ControlPanel from '../../components/Dashboard/ControlPanel';
+import Dashboard from '../../components/Dashboard/Dashboard';
 
 export default function AccountPage() {
   const { data: session } = useSession();
@@ -15,24 +15,20 @@ export default function AccountPage() {
   }, [session]);
 
   if (!session) {
-    return (
-      <div>
-        Access denied. Please sign in.
-      </div>
-    )
+    return <div>Access denied. Please sign in.</div>;
   }
+
   return (
-    <div>
-      <h2>Account Page</h2>
-      <Button onClick={() => signOut()}>Sign out</Button>
-      <Button
-        onClick={() => {
-          router.push('/account/preferences');
-        }}
-      >
-        Preferences
-      </Button>
+    <div className="flex mt-5">
+      <div className="grow-0 bg-gray-200">
+        <ControlPanel />
+      </div>
+      <div className="grow">
+        <div className="flex flex-col justify-between px-5 mb-10 gap-5">
+          <h2 className="text-4xl mb-14">Welcome, {session.user?.name}</h2>
+          <Dashboard />
+        </div>
+      </div>
     </div>
   );
 }
-

From e708cc8d5c13f12fd795eb3142e56866a9bfc95d Mon Sep 17 00:00:00 2001
From: ialej001 <ivan.alejandre@gmail.com>
Date: Fri, 2 Sep 2022 18:10:06 -0700
Subject: [PATCH 06/44] created dashboard route

---
 src/server/router/dashboard.router.ts | 51 +++++++++++++++++++++++++++
 src/server/router/index.ts            |  5 +--
 2 files changed, 54 insertions(+), 2 deletions(-)
 create mode 100644 src/server/router/dashboard.router.ts

diff --git a/src/server/router/dashboard.router.ts b/src/server/router/dashboard.router.ts
new file mode 100644
index 0000000..1bf2417
--- /dev/null
+++ b/src/server/router/dashboard.router.ts
@@ -0,0 +1,51 @@
+import { createRouter } from './context';
+
+export const dashboardRouter = createRouter().query('summary', {
+  async resolve({ ctx }) {
+    const user = ctx.session?.user;
+
+    if (user) {
+      const electricityCarbon = ctx.prisma.electricityUse.findMany({
+        select: {
+          carbon_g: true,
+          estimatedAt: true,
+        },
+        where: {
+          userId: user.id,
+        },
+      });
+
+      const vehicleCarbon = ctx.prisma.vehicle.findMany({
+        select: {
+          trips: {
+            select: {
+              carbon_g: true,
+              estimatedAt: true,
+            },
+          },
+        },
+        where: {
+          userId: user.id,
+        },
+      });
+
+      const fuelCarbon = ctx.prisma.fuelUsed.findMany({
+        select: {
+          carbon_g: true,
+          estimatedAt: true,
+        },
+      });
+
+      const flightCarbon = ctx.prisma.flight.findMany({
+        select: {
+          carbon_g: true,
+          estimatedAt: true,
+        },
+      });
+
+      return { electricityCarbon, vehicleCarbon, fuelCarbon, flightCarbon };
+    }
+
+    return {};
+  },
+});
diff --git a/src/server/router/index.ts b/src/server/router/index.ts
index 6fb8389..06ff4b4 100644
--- a/src/server/router/index.ts
+++ b/src/server/router/index.ts
@@ -1,6 +1,5 @@
 // src/server/router/index.ts
 import { createRouter } from "./context";
-import superjson from "superjson";
 
 import { exampleRouter } from './example';
 import { protectedExampleRouter } from './protected-example-router';
@@ -8,6 +7,7 @@ import { electricityRouter } from './electricity.router';
 import { flightRouter } from "./flight.router";
 import { vehicleRouter } from './vehicle.router';
 import { fuelRouter } from './fuel.router';
+import { dashboardRouter } from "./dashboard.router";
 
 export const appRouter = createRouter()
   .merge('example.', exampleRouter)
@@ -15,7 +15,8 @@ export const appRouter = createRouter()
   .merge('electricity.', electricityRouter)
   .merge('flight.', flightRouter)
   .merge('vehicle.', vehicleRouter)
-  .merge('fuel.', fuelRouter);
+  .merge('fuel.', fuelRouter)
+  .merge('dashboard.', dashboardRouter);
 
 // export type definition of API
 export type AppRouter = typeof appRouter;

From ba869786e7d3224994402aa2045f97b7e236aefa Mon Sep 17 00:00:00 2001
From: ialej001 <ivan.alejandre@gmail.com>
Date: Fri, 2 Sep 2022 18:57:07 -0700
Subject: [PATCH 07/44] renamed power to electricity for consistency

---
 src/components/Dashboard/Dashboard.tsx   | 19 +++++++++++++------
 src/components/Dashboard/SummaryTile.tsx |  2 +-
 2 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/src/components/Dashboard/Dashboard.tsx b/src/components/Dashboard/Dashboard.tsx
index df86cf9..39ffba6 100644
--- a/src/components/Dashboard/Dashboard.tsx
+++ b/src/components/Dashboard/Dashboard.tsx
@@ -1,19 +1,26 @@
 import React from 'react';
+import { trpc } from '../../utils/trpc';
 import SummaryTile from './SummaryTile';
 
 const Dashboard = () => {
-  const data = [
-    { type: 'Power', emissions: 3000 },
+  const dummyData = [
+    { type: 'Electricity', emissions: 3000 },
     { type: 'Fuel', emissions: 2000 },
     { type: 'Flight', emissions: 4000 },
     { type: 'Driving', emissions: 6000 },
   ];
+  const { data, isLoading } = trpc.useQuery(['dashboard.summary']);
+
+  const totalEmissions = dummyData.reduce((previousValue, current) => {
+    return previousValue + current.emissions;
+  }, 0);
+
+  console.log(data, totalEmissions);
 
   return (
     <div>
-      <div className='flex justify-center text-center'>
-        <h2 className='text-2xl mb-5'>Your total emissions to date</h2>
-        
+      <div className="flex justify-center text-center">
+        <h2 className="text-2xl mb-5">Your total emissions to date</h2>
       </div>
       <div className="flex justify-center text-center">
         <h4 className="text-2xl mb-5">
@@ -21,7 +28,7 @@ const Dashboard = () => {
         </h4>
       </div>
       <div className="flex flex-wrap justify-around content-around gap-5">
-        {data.map((classification) => {
+        {dummyData.map((classification) => {
           return (
             <SummaryTile
               type={classification.type}
diff --git a/src/components/Dashboard/SummaryTile.tsx b/src/components/Dashboard/SummaryTile.tsx
index 10cf7ae..7005fc6 100644
--- a/src/components/Dashboard/SummaryTile.tsx
+++ b/src/components/Dashboard/SummaryTile.tsx
@@ -28,7 +28,7 @@ const getIcon = (type: string) => {
   const buttonSize = 45;
 
   switch (type) {
-    case 'Power':
+    case 'Electricity':
       return <ImPowerCord size={buttonSize} />;
     case 'Fuel':
       return <FaGasPump size={buttonSize} />;

From 96c517baba29f943660ec2eaab6df1e95b8eb6cc Mon Sep 17 00:00:00 2001
From: ialej001 <ivan.alejandre@gmail.com>
Date: Fri, 2 Sep 2022 21:11:44 -0700
Subject: [PATCH 08/44] added circular progress indicator for relative %s

---
 package-lock.json                        | 65 ++++++++++++++++++++++--
 package.json                             |  1 +
 src/components/Dashboard/SummaryTile.tsx | 26 ++++++++--
 3 files changed, 85 insertions(+), 7 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 04bc37b..5e7fa86 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -20,6 +20,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",
@@ -8900,6 +8901,34 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/rc-progress": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/rc-progress/-/rc-progress-3.4.0.tgz",
+      "integrity": "sha512-ZuMyOzzTkZnn+EKqGQ7YHzrvGzBtcCCVjx1McC/E/pMTvr6GWVfVRSawDlWsscxsJs7MkqSTwCO6Lu4IeoY2zQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.10.1",
+        "classnames": "^2.2.6",
+        "rc-util": "^5.16.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/rc-util": {
+      "version": "5.23.0",
+      "resolved": "https://registry.npmjs.org/rc-util/-/rc-util-5.23.0.tgz",
+      "integrity": "sha512-lgm6diJ/pLgyfoZY59Vz7sW4mSoQCgozqbBye9IJ7/mb5w5h4T7h+i2JpXAx/UBQxscBZe68q0sP7EW+qfkKUg==",
+      "dependencies": {
+        "@babel/runtime": "^7.18.3",
+        "react-is": "^16.12.0",
+        "shallowequal": "^1.1.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
     "node_modules/react": {
       "version": "18.2.0",
       "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
@@ -8952,8 +8981,7 @@
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
-      "dev": true
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
     "node_modules/react-query": {
       "version": "3.39.2",
@@ -9391,6 +9419,11 @@
       "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==",
       "dev": true
     },
+    "node_modules/shallowequal": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
+      "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ=="
+    },
     "node_modules/shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -17111,6 +17144,26 @@
         "unpipe": "1.0.0"
       }
     },
+    "rc-progress": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/rc-progress/-/rc-progress-3.4.0.tgz",
+      "integrity": "sha512-ZuMyOzzTkZnn+EKqGQ7YHzrvGzBtcCCVjx1McC/E/pMTvr6GWVfVRSawDlWsscxsJs7MkqSTwCO6Lu4IeoY2zQ==",
+      "requires": {
+        "@babel/runtime": "^7.10.1",
+        "classnames": "^2.2.6",
+        "rc-util": "^5.16.1"
+      }
+    },
+    "rc-util": {
+      "version": "5.23.0",
+      "resolved": "https://registry.npmjs.org/rc-util/-/rc-util-5.23.0.tgz",
+      "integrity": "sha512-lgm6diJ/pLgyfoZY59Vz7sW4mSoQCgozqbBye9IJ7/mb5w5h4T7h+i2JpXAx/UBQxscBZe68q0sP7EW+qfkKUg==",
+      "requires": {
+        "@babel/runtime": "^7.18.3",
+        "react-is": "^16.12.0",
+        "shallowequal": "^1.1.0"
+      }
+    },
     "react": {
       "version": "18.2.0",
       "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
@@ -17147,8 +17200,7 @@
     "react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
-      "dev": true
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
     "react-query": {
       "version": "3.39.2",
@@ -17462,6 +17514,11 @@
       "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==",
       "dev": true
     },
+    "shallowequal": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
+      "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ=="
+    },
     "shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
diff --git a/package.json b/package.json
index 72a7ed4..11c3a83 100644
--- a/package.json
+++ b/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",
diff --git a/src/components/Dashboard/SummaryTile.tsx b/src/components/Dashboard/SummaryTile.tsx
index 7005fc6..c7992d8 100644
--- a/src/components/Dashboard/SummaryTile.tsx
+++ b/src/components/Dashboard/SummaryTile.tsx
@@ -1,4 +1,5 @@
-import { Card } from 'flowbite-react';
+import { Card, Progress } from 'flowbite-react';
+import { Circle } from 'rc-progress';
 import React from 'react';
 import { FaGasPump } from 'react-icons/fa';
 import { ImPowerCord } from 'react-icons/im';
@@ -7,9 +8,15 @@ import { MdDriveEta, MdFlight } from 'react-icons/md';
 interface SummaryTileProps {
   type: string;
   emissionsValue: number;
+  totalEmissions: number;
 }
 
-const SummaryTile = ({ type, emissionsValue }: SummaryTileProps) => {
+const SummaryTile = ({
+  type,
+  emissionsValue,
+  totalEmissions,
+}: SummaryTileProps) => {
+  const emissionsPercentage = (emissionsValue / totalEmissions) * 100;
   return (
     <div className="max-w-lg cursor-pointer">
       <Card onClick={() => console.log(type)}>
@@ -17,13 +24,26 @@ const SummaryTile = ({ type, emissionsValue }: SummaryTileProps) => {
           <h4 className="text-2xl font-bold">{type}</h4>
           {getIcon(type)}
           <h3 className="text-xl">Emissions</h3>
-          <h3 className="font-bold">{emissionsValue}</h3>
+          <h3 className="font-bold">{emissionsValue} g</h3>
+          <p className="text-center">{emissionsPercentage.toFixed(2)}% of all calculations</p>
+
+          <Circle
+            percent={emissionsPercentage}
+            strokeWidth={5}
+            strokeColor={getColor(emissionsPercentage)}
+          />
         </div>
       </Card>
     </div>
   );
 };
 
+const getColor = (emissionsPercentage: number) => {
+  if (emissionsPercentage > 80) return 'red';
+  if (emissionsPercentage > 40) return 'yellow';
+  return 'green';
+};
+
 const getIcon = (type: string) => {
   const buttonSize = 45;
 

From dfaf7e9df28df774efcd297442e4d1c221d052a2 Mon Sep 17 00:00:00 2001
From: ialej001 <ivan.alejandre@gmail.com>
Date: Fri, 2 Sep 2022 22:14:40 -0700
Subject: [PATCH 09/44] added summary output schema

---
 src/schema/dashboard.schema.ts        | 12 ++++
 src/server/router/dashboard.router.ts | 94 +++++++++++++++++----------
 2 files changed, 72 insertions(+), 34 deletions(-)
 create mode 100644 src/schema/dashboard.schema.ts

diff --git a/src/schema/dashboard.schema.ts b/src/schema/dashboard.schema.ts
new file mode 100644
index 0000000..5700f9d
--- /dev/null
+++ b/src/schema/dashboard.schema.ts
@@ -0,0 +1,12 @@
+import z from 'zod';
+
+export const summarySchema = z.array(
+  z.object({ type: z.string(), emissions: z.number() })
+);
+
+export type SummaryResponseType = z.TypeOf<typeof summarySchema>;
+
+export interface SummaryQueryResponse {
+  data: SummaryResponseType;
+  isLoading: boolean;
+}
diff --git a/src/server/router/dashboard.router.ts b/src/server/router/dashboard.router.ts
index 1bf2417..e4e62ce 100644
--- a/src/server/router/dashboard.router.ts
+++ b/src/server/router/dashboard.router.ts
@@ -1,51 +1,77 @@
+import { summarySchema, SummaryResponseType } from '../../schema/dashboard.schema';
 import { createRouter } from './context';
 
 export const dashboardRouter = createRouter().query('summary', {
+  output: summarySchema,
   async resolve({ ctx }) {
     const user = ctx.session?.user;
 
     if (user) {
-      const electricityCarbon = ctx.prisma.electricityUse.findMany({
-        select: {
-          carbon_g: true,
-          estimatedAt: true,
-        },
-        where: {
-          userId: user.id,
-        },
-      });
+      const electricityCarbon = await ctx.prisma.electricityUse
+        .aggregate({
+          _sum: {
+            carbon_g: true,
+          },
+          where: {
+            userId: user.id,
+          },
+        })
+        .then((response) => response._sum.carbon_g);
 
-      const vehicleCarbon = ctx.prisma.vehicle.findMany({
-        select: {
-          trips: {
-            select: {
-              carbon_g: true,
-              estimatedAt: true,
+      const vehicleCarbon = await ctx.prisma.vehicle
+        .findMany({
+          select: {
+            trips: {
+              select: {
+                carbon_g: true,
+              },
             },
           },
-        },
-        where: {
-          userId: user.id,
-        },
-      });
+          where: {
+            userId: user.id,
+          },
+        })
+        .then((response) =>
+          response.reduce((previous, current) => {
+            return (
+              previous +
+              current.trips.reduce((previous, current) => {
+                return previous + current.carbon_g;
+              }, 0)
+            );
+          }, 0)
+        );
 
-      const fuelCarbon = ctx.prisma.fuelUsed.findMany({
-        select: {
-          carbon_g: true,
-          estimatedAt: true,
-        },
-      });
+      const fuelCarbon = await ctx.prisma.fuelUsed
+        .aggregate({
+          _sum: {
+            carbon_g: true,
+          },
+          where: {
+            userId: user.id,
+          },
+        })
+        .then((response) => response._sum.carbon_g);
 
-      const flightCarbon = ctx.prisma.flight.findMany({
-        select: {
-          carbon_g: true,
-          estimatedAt: true,
-        },
-      });
+      const flightCarbon = await ctx.prisma.flight
+        .aggregate({
+          _sum: {
+            carbon_g: true,
+          },
+          where: {
+            userId: user.id,
+          },
+        })
+        .then((response) => response._sum.carbon_g);
 
-      return { electricityCarbon, vehicleCarbon, fuelCarbon, flightCarbon };
+      return [
+        { type: 'Electricity', emissions: electricityCarbon ?? 0 },
+        { type: 'Driving', emissions: vehicleCarbon ?? 0 },
+        { type: 'Fuel', emissions: fuelCarbon ?? 0 },
+        { type: 'Flight', emissions: flightCarbon ?? 0 },
+      ];
     }
 
-    return {};
+    return [];
   },
 });

From 0bfc8efdedfa2de93fdb18aa25c707900afa557e Mon Sep 17 00:00:00 2001
From: ialej001 <ivan.alejandre@gmail.com>
Date: Fri, 2 Sep 2022 22:22:45 -0700
Subject: [PATCH 10/44] added loading spinner

---
 src/components/Dashboard/Dashboard.tsx | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/components/Dashboard/Dashboard.tsx b/src/components/Dashboard/Dashboard.tsx
index 39ffba6..f1ce3f2 100644
--- a/src/components/Dashboard/Dashboard.tsx
+++ b/src/components/Dashboard/Dashboard.tsx
@@ -1,3 +1,4 @@
+import { Spinner } from 'flowbite-react';
 import React from 'react';
 import { trpc } from '../../utils/trpc';
 import SummaryTile from './SummaryTile';
@@ -11,28 +12,31 @@ const Dashboard = () => {
   ];
   const { data, isLoading } = trpc.useQuery(['dashboard.summary']);
 
-  const totalEmissions = dummyData.reduce((previousValue, current) => {
+  const totalEmissions = data?.reduce((previousValue, current) => {
     return previousValue + current.emissions;
-  }, 0);
+  }, 0) ?? 0;
 
   console.log(data, totalEmissions);
 
   return (
     <div>
-      <div className="flex justify-center text-center">
+      <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'>{totalEmissions} g</h2>
       </div>
       <div className="flex justify-center text-center">
         <h4 className="text-2xl mb-5">
-          To this day, your total emissions break down as follows
+          To this date, your total emissions break down as follows
         </h4>
       </div>
-      <div className="flex flex-wrap justify-around content-around gap-5">
-        {dummyData.map((classification) => {
+      <div className="flex flex-wrap justify-around content-around gap-5 max-w-6xl min-w-xl mx-auto">
+        {isLoading && !data && <Spinner className='my-20' size='lg'/>}
+        {!isLoading && data && data.map((classification) => {
           return (
             <SummaryTile
               type={classification.type}
               emissionsValue={classification.emissions}
+              totalEmissions={totalEmissions}
               key={classification.type}
             />
           );

From 70382b913483e420da37cef962e869fcb97ead88 Mon Sep 17 00:00:00 2001
From: ialej001 <ivan.alejandre@gmail.com>
Date: Fri, 2 Sep 2022 22:23:14 -0700
Subject: [PATCH 11/44] removed unused types

---
 src/schema/dashboard.schema.ts        | 9 +--------
 src/server/router/dashboard.router.ts | 2 +-
 2 files changed, 2 insertions(+), 9 deletions(-)

diff --git a/src/schema/dashboard.schema.ts b/src/schema/dashboard.schema.ts
index 5700f9d..202dfda 100644
--- a/src/schema/dashboard.schema.ts
+++ b/src/schema/dashboard.schema.ts
@@ -2,11 +2,4 @@ import z from 'zod';
 
 export const summarySchema = z.array(
   z.object({ type: z.string(), emissions: z.number() })
-);
-
-export type SummaryResponseType = z.TypeOf<typeof summarySchema>;
-
-export interface SummaryQueryResponse {
-  data: SummaryResponseType;
-  isLoading: boolean;
-}
+);
\ No newline at end of file
diff --git a/src/server/router/dashboard.router.ts b/src/server/router/dashboard.router.ts
index e4e62ce..b7bdb0e 100644
--- a/src/server/router/dashboard.router.ts
+++ b/src/server/router/dashboard.router.ts
@@ -1,4 +1,4 @@
-import { summarySchema, SummaryResponseType } from '../../schema/dashboard.schema';
+import { summarySchema } from '../../schema/dashboard.schema';
 import { createRouter } from './context';
 
 export const dashboardRouter = createRouter().query('summary', {

From 5cb10a3cce8ceffb6b379a6aaa54e783303c1408 Mon Sep 17 00:00:00 2001
From: ialej001 <ivan.alejandre@gmail.com>
Date: Fri, 2 Sep 2022 23:55:51 -0700
Subject: [PATCH 12/44] added and refactored layouts

---
 src/layouts/AccountLayout.tsx | 20 ++++++++++++++++++++
 src/pages/_app.tsx            | 19 ++++++++++++++++---
 src/pages/account/index.tsx   | 31 ++++++++++++++-----------------
 3 files changed, 50 insertions(+), 20 deletions(-)
 create mode 100644 src/layouts/AccountLayout.tsx

diff --git a/src/layouts/AccountLayout.tsx b/src/layouts/AccountLayout.tsx
new file mode 100644
index 0000000..c634b7a
--- /dev/null
+++ b/src/layouts/AccountLayout.tsx
@@ -0,0 +1,20 @@
+import React, { ReactNode } from 'react'
+import ControlPanel from '../components/Dashboard/ControlPanel'
+
+interface AccountLayoutProps {
+    children: ReactNode
+}
+const AccountLayout = ({ children }: AccountLayoutProps) => {
+  return (
+    <div className="flex mt-5">
+      <div className="grow-0 bg-gray-200">
+        <ControlPanel />
+      </div>
+      <div className="grow">
+        { children }
+      </div>
+    </div>
+  )
+}
+
+export default AccountLayout
\ No newline at end of file
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 84e4636..806f54a 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -7,15 +7,28 @@ import { SessionProvider } from 'next-auth/react';
 import '../styles/globals.css';
 import Footer from '../components/Footer';
 import Nav from '../components/Nav';
+import { NextPage } from 'next';
+import { ReactElement, ReactNode } from 'react';
+import { AppProps } from 'next/app';
 
-const MyApp: AppType = ({
+export type NextPageWithLayout<P = {}, IP = P> = NextPage<P, IP> & {
+  getLayout?: (page: ReactElement) => ReactNode;
+};
+
+type AppPropsWithLayout = AppProps & {
+  Component: NextPageWithLayout;
+};
+
+const MyApp = ({
   Component,
   pageProps: { session, ...pageProps },
-}) => {
+}: AppPropsWithLayout) => {
+  const getLayout = Component.getLayout ?? ((page) => page);
+
   return (
     <SessionProvider session={session}>
       <Nav />
-      <Component {...pageProps} />
+      {getLayout(<Component {...pageProps} />)}
       <Footer />
     </SessionProvider>
   );
diff --git a/src/pages/account/index.tsx b/src/pages/account/index.tsx
index ac78b25..4910e0a 100644
--- a/src/pages/account/index.tsx
+++ b/src/pages/account/index.tsx
@@ -1,16 +1,19 @@
 import { useSession } from 'next-auth/react';
 import { useRouter } from 'next/router';
-import { useEffect } from 'react';
+import { ReactElement, useEffect } from 'react';
 import ControlPanel from '../../components/Dashboard/ControlPanel';
 import Dashboard from '../../components/Dashboard/Dashboard';
+import AccountLayout from '../../layouts/AccountLayout';
+import { NextPageWithLayout } from '../_app';
 
-export default function AccountPage() {
+const AccountPage: NextPageWithLayout = () => {
   const { data: session } = useSession();
   const router = useRouter();
+  const greetingMessage = `Welcome, ${session?.user?.name}`;
 
   useEffect(() => {
     if (!session) {
-      router.push('/');
+      router.push('/auth/login');
     }
   }, [session]);
 
@@ -18,17 +21,11 @@ export default function AccountPage() {
     return <div>Access denied. Please sign in.</div>;
   }
 
-  return (
-    <div className="flex mt-5">
-      <div className="grow-0 bg-gray-200">
-        <ControlPanel />
-      </div>
-      <div className="grow">
-        <div className="flex flex-col justify-between px-5 mb-10 gap-5">
-          <h2 className="text-4xl mb-14">Welcome, {session.user?.name}</h2>
-          <Dashboard />
-        </div>
-      </div>
-    </div>
-  );
-}
+  return <Dashboard greeting={greetingMessage} />;
+};
+
+AccountPage.getLayout = function getLayout(page: ReactElement) {
+  return <AccountLayout>{page}</AccountLayout>;
+};
+
+export default AccountPage;

From 64731c16f6f880995e2989132ac34f679fb45338 Mon Sep 17 00:00:00 2001
From: ialej001 <ivan.alejandre@gmail.com>
Date: Fri, 2 Sep 2022 23:56:15 -0700
Subject: [PATCH 13/44] moved greeting into dashboard

---
 src/components/Dashboard/Dashboard.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/Dashboard/Dashboard.tsx b/src/components/Dashboard/Dashboard.tsx
index f1ce3f2..03d0587 100644
--- a/src/components/Dashboard/Dashboard.tsx
+++ b/src/components/Dashboard/Dashboard.tsx
@@ -3,7 +3,10 @@ import React from 'react';
 import { trpc } from '../../utils/trpc';
 import SummaryTile from './SummaryTile';
 
-const Dashboard = () => {
+interface DashboardProps {
+  greeting: string;
+}
+const Dashboard = ({greeting}: DashboardProps) => {
   const dummyData = [
     { type: 'Electricity', emissions: 3000 },
     { type: 'Fuel', emissions: 2000 },
@@ -19,7 +22,8 @@ const Dashboard = () => {
   console.log(data, totalEmissions);
 
   return (
-    <div>
+    <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'>{totalEmissions} g</h2>

From 2a3ae3dbae47617a955ff902c0d5e2852b97d4da Mon Sep 17 00:00:00 2001
From: ialej001 <ivan.alejandre@gmail.com>
Date: Sat, 3 Sep 2022 00:00:21 -0700
Subject: [PATCH 14/44] renamed a folder

---
 .../{Dashboard => Account}/ControlPanel.tsx   |  0
 .../{Dashboard => Account}/Dashboard.tsx      |  0
 src/components/Account/FlightModal.tsx        | 40 +++++++++++++++++++
 .../{Dashboard => Account}/SummaryTile.tsx    |  0
 src/layouts/AccountLayout.tsx                 |  2 +-
 src/pages/account/index.tsx                   |  4 +-
 6 files changed, 43 insertions(+), 3 deletions(-)
 rename src/components/{Dashboard => Account}/ControlPanel.tsx (100%)
 rename src/components/{Dashboard => Account}/Dashboard.tsx (100%)
 create mode 100644 src/components/Account/FlightModal.tsx
 rename src/components/{Dashboard => Account}/SummaryTile.tsx (100%)

diff --git a/src/components/Dashboard/ControlPanel.tsx b/src/components/Account/ControlPanel.tsx
similarity index 100%
rename from src/components/Dashboard/ControlPanel.tsx
rename to src/components/Account/ControlPanel.tsx
diff --git a/src/components/Dashboard/Dashboard.tsx b/src/components/Account/Dashboard.tsx
similarity index 100%
rename from src/components/Dashboard/Dashboard.tsx
rename to src/components/Account/Dashboard.tsx
diff --git a/src/components/Account/FlightModal.tsx b/src/components/Account/FlightModal.tsx
new file mode 100644
index 0000000..a54f865
--- /dev/null
+++ b/src/components/Account/FlightModal.tsx
@@ -0,0 +1,40 @@
+import { Button, Modal } from 'flowbite-react';
+import React, { useState } from 'react';
+
+const FlightModal = () => {
+  const [showModal, setShowModal] = useState<boolean>(false);
+  const handleModalToggle = () => setShowModal((old) => !old);
+  
+  return (
+    <div>
+      <Button onClick={handleModalToggle}>Toggle modal</Button>
+      <Modal show={showModal} onClose={handleModalToggle}>
+        <Modal.Header>Terms of Service</Modal.Header>
+        <Modal.Body>
+          <div className="space-y-6">
+            <p className="text-base leading-relaxed text-gray-500 dark:text-gray-400">
+              With less than a month to go before the European Union enacts new
+              consumer privacy laws for its citizens, companies around the world
+              are updating their terms of service agreements to comply.
+            </p>
+            <p className="text-base leading-relaxed text-gray-500 dark:text-gray-400">
+              The European Union’s General Data Protection Regulation (G.D.P.R.)
+              goes into effect on May 25 and is meant to ensure a common set of
+              data rights in the European Union. It requires organizations to
+              notify users as soon as possible of high-risk data breaches that
+              could personally affect them.
+            </p>
+          </div>
+        </Modal.Body>
+        <Modal.Footer>
+          <Button onClick={handleModalToggle}>I accept</Button>
+          <Button color="gray" onClick={handleModalToggle}>
+            Decline
+          </Button>
+        </Modal.Footer>
+      </Modal>
+    </div>
+  );
+};
+
+export default FlightModal;
diff --git a/src/components/Dashboard/SummaryTile.tsx b/src/components/Account/SummaryTile.tsx
similarity index 100%
rename from src/components/Dashboard/SummaryTile.tsx
rename to src/components/Account/SummaryTile.tsx
diff --git a/src/layouts/AccountLayout.tsx b/src/layouts/AccountLayout.tsx
index c634b7a..d15ea97 100644
--- a/src/layouts/AccountLayout.tsx
+++ b/src/layouts/AccountLayout.tsx
@@ -1,5 +1,5 @@
 import React, { ReactNode } from 'react'
-import ControlPanel from '../components/Dashboard/ControlPanel'
+import ControlPanel from '../components/Account/ControlPanel'
 
 interface AccountLayoutProps {
     children: ReactNode
diff --git a/src/pages/account/index.tsx b/src/pages/account/index.tsx
index 4910e0a..7f30778 100644
--- a/src/pages/account/index.tsx
+++ b/src/pages/account/index.tsx
@@ -1,8 +1,8 @@
 import { useSession } from 'next-auth/react';
 import { useRouter } from 'next/router';
 import { ReactElement, useEffect } from 'react';
-import ControlPanel from '../../components/Dashboard/ControlPanel';
-import Dashboard from '../../components/Dashboard/Dashboard';
+import ControlPanel from '../../components/Account/ControlPanel';
+import Dashboard from '../../components/Account/Dashboard';
 import AccountLayout from '../../layouts/AccountLayout';
 import { NextPageWithLayout } from '../_app';
 

From ef091b3aac023bd928b4985ccb8067378530a8fc Mon Sep 17 00:00:00 2001
From: ialej001 <ivan.alejandre@gmail.com>
Date: Sat, 3 Sep 2022 00:19:07 -0700
Subject: [PATCH 15/44] init individual summary pages

---
 src/pages/account/driving.tsx     |  9 +++++++++
 src/pages/account/electricity.tsx |  9 +++++++++
 src/pages/account/flight.tsx      | 14 ++++++++++++++
 src/pages/account/fuel.tsx        |  9 +++++++++
 4 files changed, 41 insertions(+)
 create mode 100644 src/pages/account/driving.tsx
 create mode 100644 src/pages/account/electricity.tsx
 create mode 100644 src/pages/account/flight.tsx
 create mode 100644 src/pages/account/fuel.tsx

diff --git a/src/pages/account/driving.tsx b/src/pages/account/driving.tsx
new file mode 100644
index 0000000..394f762
--- /dev/null
+++ b/src/pages/account/driving.tsx
@@ -0,0 +1,9 @@
+import React from 'react'
+
+const DrivingSummaryPage = () => {
+  return (
+    <div>DrivingSummaryPage</div>
+  )
+}
+
+export default DrivingSummaryPage
\ No newline at end of file
diff --git a/src/pages/account/electricity.tsx b/src/pages/account/electricity.tsx
new file mode 100644
index 0000000..8f1620c
--- /dev/null
+++ b/src/pages/account/electricity.tsx
@@ -0,0 +1,9 @@
+import React from 'react'
+
+const ElectricitySummaryPage = () => {
+  return (
+    <div>ElectricitySummaryPage</div>
+  )
+}
+
+export default ElectricitySummaryPage
\ No newline at end of file
diff --git a/src/pages/account/flight.tsx b/src/pages/account/flight.tsx
new file mode 100644
index 0000000..652dc4d
--- /dev/null
+++ b/src/pages/account/flight.tsx
@@ -0,0 +1,14 @@
+import React, { ReactElement } from 'react'
+import AccountLayout from '../../layouts/AccountLayout';
+import { NextPageWithLayout } from '../_app'
+
+const FlightSummaryPage: NextPageWithLayout = () => {
+  return (
+    <div>FlightSummary</div>
+  )
+}
+
+FlightSummaryPage.getLayout = function getLayout(page: ReactElement) {
+    return <AccountLayout>{page}</AccountLayout>;
+  };
+export default FlightSummaryPage
\ No newline at end of file
diff --git a/src/pages/account/fuel.tsx b/src/pages/account/fuel.tsx
new file mode 100644
index 0000000..0501651
--- /dev/null
+++ b/src/pages/account/fuel.tsx
@@ -0,0 +1,9 @@
+import React from 'react'
+
+const FuelSummaryPage = () => {
+  return (
+    <div>FuelSummaryPage</div>
+  )
+}
+
+export default FuelSummaryPage
\ No newline at end of file

From 322f1688e67760e6cf0ec37cebf3449938eb8edf Mon Sep 17 00:00:00 2001
From: ialej001 <ivan.alejandre@gmail.com>
Date: Sat, 3 Sep 2022 00:19:22 -0700
Subject: [PATCH 16/44] added handler to route to each page

---
 src/components/Account/Dashboard.tsx   | 53 +++++++++++++++++---------
 src/components/Account/SummaryTile.tsx |  8 +++-
 2 files changed, 42 insertions(+), 19 deletions(-)

diff --git a/src/components/Account/Dashboard.tsx b/src/components/Account/Dashboard.tsx
index 03d0587..1421d15 100644
--- a/src/components/Account/Dashboard.tsx
+++ b/src/components/Account/Dashboard.tsx
@@ -1,4 +1,5 @@
 import { Spinner } from 'flowbite-react';
+import { useRouter } from 'next/router';
 import React from 'react';
 import { trpc } from '../../utils/trpc';
 import SummaryTile from './SummaryTile';
@@ -6,27 +7,42 @@ import SummaryTile from './SummaryTile';
 interface DashboardProps {
   greeting: string;
 }
-const Dashboard = ({greeting}: DashboardProps) => {
+const Dashboard = ({ greeting }: DashboardProps) => {
   const dummyData = [
     { type: 'Electricity', emissions: 3000 },
     { type: 'Fuel', emissions: 2000 },
     { type: 'Flight', emissions: 4000 },
     { type: 'Driving', emissions: 6000 },
   ];
+  const router = useRouter();
   const { data, isLoading } = trpc.useQuery(['dashboard.summary']);
 
-  const totalEmissions = data?.reduce((previousValue, current) => {
-    return previousValue + current.emissions;
-  }, 0) ?? 0;
+  const totalEmissions =
+    data?.reduce((previousValue, current) => {
+      return previousValue + current.emissions;
+    }, 0) ?? 0;
 
-  console.log(data, totalEmissions);
+  const handleOnClickTile = (type: string) => {
+    switch (type) {
+      case 'Electricity':
+        return router.push('/account/electricity');
+      case 'Driving':
+        router.push('/account/driving');
+      case 'Fuel':
+        router.push('/account/fuel');
+      case 'Flight':
+        router.push('/account/flight');
+      default:
+        return;
+    }
+  };
 
   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'>{totalEmissions} g</h2>
+        <h2 className="text-xl mb-5 font-bold">{totalEmissions} g</h2>
       </div>
       <div className="flex justify-center text-center">
         <h4 className="text-2xl mb-5">
@@ -34,17 +50,20 @@ const Dashboard = ({greeting}: DashboardProps) => {
         </h4>
       </div>
       <div className="flex flex-wrap justify-around content-around gap-5 max-w-6xl min-w-xl mx-auto">
-        {isLoading && !data && <Spinner className='my-20' size='lg'/>}
-        {!isLoading && data && data.map((classification) => {
-          return (
-            <SummaryTile
-              type={classification.type}
-              emissionsValue={classification.emissions}
-              totalEmissions={totalEmissions}
-              key={classification.type}
-            />
-          );
-        })}
+        {isLoading && !data && <Spinner className="my-20" size="lg" />}
+        {!isLoading &&
+          data &&
+          data.map((classification) => {
+            return (
+              <SummaryTile
+                type={classification.type}
+                emissionsValue={classification.emissions}
+                totalEmissions={totalEmissions}
+                key={classification.type}
+                handleOnClick={() => handleOnClickTile(classification.type)}
+              />
+            );
+          })}
       </div>
     </div>
   );
diff --git a/src/components/Account/SummaryTile.tsx b/src/components/Account/SummaryTile.tsx
index c7992d8..1473e08 100644
--- a/src/components/Account/SummaryTile.tsx
+++ b/src/components/Account/SummaryTile.tsx
@@ -9,23 +9,27 @@ interface SummaryTileProps {
   type: string;
   emissionsValue: number;
   totalEmissions: number;
+  handleOnClick: () => void;
 }
 
 const SummaryTile = ({
   type,
   emissionsValue,
   totalEmissions,
+  handleOnClick,
 }: SummaryTileProps) => {
   const emissionsPercentage = (emissionsValue / totalEmissions) * 100;
   return (
     <div className="max-w-lg cursor-pointer">
-      <Card onClick={() => console.log(type)}>
+      <Card onClick={() => handleOnClick()}>
         <div className="flex flex-col items-center gap-5 px-20 py-5">
           <h4 className="text-2xl font-bold">{type}</h4>
           {getIcon(type)}
           <h3 className="text-xl">Emissions</h3>
           <h3 className="font-bold">{emissionsValue} g</h3>
-          <p className="text-center">{emissionsPercentage.toFixed(2)}% of all calculations</p>
+          <p className="text-center">
+            {emissionsPercentage.toFixed(2)}% of all calculations
+          </p>
 
           <Circle
             percent={emissionsPercentage}

From 5a790be39d35a17a29a8c3732ba01c0ec62ea364 Mon Sep 17 00:00:00 2001
From: ialej001 <ivan.alejandre@gmail.com>
Date: Sat, 3 Sep 2022 12:00:19 -0700
Subject: [PATCH 17/44] fixed routing issue

---
 src/components/Account/Dashboard.tsx   | 6 +++---
 src/components/Account/SummaryTile.tsx | 9 +++++----
 2 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/components/Account/Dashboard.tsx b/src/components/Account/Dashboard.tsx
index 1421d15..56b92c1 100644
--- a/src/components/Account/Dashboard.tsx
+++ b/src/components/Account/Dashboard.tsx
@@ -27,11 +27,11 @@ const Dashboard = ({ greeting }: DashboardProps) => {
       case 'Electricity':
         return router.push('/account/electricity');
       case 'Driving':
-        router.push('/account/driving');
+        return router.push('/account/driving');
       case 'Fuel':
-        router.push('/account/fuel');
+        return router.push('/account/fuel');
       case 'Flight':
-        router.push('/account/flight');
+        return router.push('/account/flight');
       default:
         return;
     }
diff --git a/src/components/Account/SummaryTile.tsx b/src/components/Account/SummaryTile.tsx
index 1473e08..1ac327f 100644
--- a/src/components/Account/SummaryTile.tsx
+++ b/src/components/Account/SummaryTile.tsx
@@ -1,4 +1,4 @@
-import { Card, Progress } from 'flowbite-react';
+import { Button, Card, Progress } from 'flowbite-react';
 import { Circle } from 'rc-progress';
 import React from 'react';
 import { FaGasPump } from 'react-icons/fa';
@@ -9,7 +9,7 @@ interface SummaryTileProps {
   type: string;
   emissionsValue: number;
   totalEmissions: number;
-  handleOnClick: () => void;
+  handleOnClick: (type: string) => void;
 }
 
 const SummaryTile = ({
@@ -20,8 +20,8 @@ const SummaryTile = ({
 }: SummaryTileProps) => {
   const emissionsPercentage = (emissionsValue / totalEmissions) * 100;
   return (
-    <div className="max-w-lg cursor-pointer">
-      <Card onClick={() => handleOnClick()}>
+    <div className="max-w-lg">
+      <Card>
         <div className="flex flex-col items-center gap-5 px-20 py-5">
           <h4 className="text-2xl font-bold">{type}</h4>
           {getIcon(type)}
@@ -36,6 +36,7 @@ const SummaryTile = ({
             strokeWidth={5}
             strokeColor={getColor(emissionsPercentage)}
           />
+          <Button onClick={() => handleOnClick(type)}>View All</Button>
         </div>
       </Card>
     </div>

From 45fc402d6388ee2f7644c382eaccba1425865787 Mon Sep 17 00:00:00 2001
From: ialej001 <ivan.alejandre@gmail.com>
Date: Sat, 3 Sep 2022 12:00:25 -0700
Subject: [PATCH 18/44] added layouts

---
 src/pages/account/driving.tsx     | 18 +++++++++++-------
 src/pages/account/electricity.tsx | 18 +++++++++++-------
 src/pages/account/fuel.tsx        | 18 +++++++++++-------
 3 files changed, 33 insertions(+), 21 deletions(-)

diff --git a/src/pages/account/driving.tsx b/src/pages/account/driving.tsx
index 394f762..16c8a7d 100644
--- a/src/pages/account/driving.tsx
+++ b/src/pages/account/driving.tsx
@@ -1,9 +1,13 @@
-import React from 'react'
+import React, { ReactElement } from 'react';
+import AccountLayout from '../../layouts/AccountLayout';
+import { NextPageWithLayout } from '../_app';
 
-const DrivingSummaryPage = () => {
-  return (
-    <div>DrivingSummaryPage</div>
-  )
-}
+const DrivingSummaryPage: NextPageWithLayout = () => {
+  return <div>DrivingSummaryPage</div>;
+};
 
-export default DrivingSummaryPage
\ No newline at end of file
+DrivingSummaryPage.getLayout = function getLayout(page: ReactElement) {
+  return <AccountLayout>{page}</AccountLayout>;
+};
+
+export default DrivingSummaryPage;
diff --git a/src/pages/account/electricity.tsx b/src/pages/account/electricity.tsx
index 8f1620c..f11f86f 100644
--- a/src/pages/account/electricity.tsx
+++ b/src/pages/account/electricity.tsx
@@ -1,9 +1,13 @@
-import React from 'react'
+import React, { ReactElement } from 'react';
+import AccountLayout from '../../layouts/AccountLayout';
+import { NextPageWithLayout } from '../_app';
 
-const ElectricitySummaryPage = () => {
-  return (
-    <div>ElectricitySummaryPage</div>
-  )
-}
+const ElectricitySummaryPage: NextPageWithLayout = () => {
+  return <div>ElectricitySummaryPage</div>;
+};
 
-export default ElectricitySummaryPage
\ No newline at end of file
+ElectricitySummaryPage.getLayout = function getLayout(page: ReactElement) {
+  return <AccountLayout>{page}</AccountLayout>;
+};
+
+export default ElectricitySummaryPage;
diff --git a/src/pages/account/fuel.tsx b/src/pages/account/fuel.tsx
index 0501651..b487868 100644
--- a/src/pages/account/fuel.tsx
+++ b/src/pages/account/fuel.tsx
@@ -1,9 +1,13 @@
-import React from 'react'
+import React, { ReactElement } from 'react';
+import AccountLayout from '../../layouts/AccountLayout';
+import { NextPageWithLayout } from '../_app';
 
-const FuelSummaryPage = () => {
-  return (
-    <div>FuelSummaryPage</div>
-  )
-}
+const FuelSummaryPage: NextPageWithLayout = () => {
+  return <div>FuelSummaryPage</div>;
+};
 
-export default FuelSummaryPage
\ No newline at end of file
+FuelSummaryPage.getLayout = function getLayout(page: ReactElement) {
+  return <AccountLayout>{page}</AccountLayout>;
+};
+
+export default FuelSummaryPage;

From 4873896a8dc0ca859d708907c1121f128835a384 Mon Sep 17 00:00:00 2001
From: ialej001 <ivan.alejandre@gmail.com>
Date: Sat, 3 Sep 2022 13:09:11 -0700
Subject: [PATCH 19/44] init preferences router and schema

---
 src/schema/preferences.schema.ts        | 8 ++++++++
 src/server/router/index.ts              | 4 +++-
 src/server/router/preferences.router.ts | 7 +++++++
 3 files changed, 18 insertions(+), 1 deletion(-)
 create mode 100644 src/schema/preferences.schema.ts
 create mode 100644 src/server/router/preferences.router.ts

diff --git a/src/schema/preferences.schema.ts b/src/schema/preferences.schema.ts
new file mode 100644
index 0000000..b78b23f
--- /dev/null
+++ b/src/schema/preferences.schema.ts
@@ -0,0 +1,8 @@
+import { z } from 'zod';
+
+export const locationInputSchema = z.object({
+  country: z.string(),
+  state: z.string().optional(),
+});
+
+export type LocationInputType = z.TypeOf<typeof locationInputSchema>;
diff --git a/src/server/router/index.ts b/src/server/router/index.ts
index 06ff4b4..36ffa92 100644
--- a/src/server/router/index.ts
+++ b/src/server/router/index.ts
@@ -8,6 +8,7 @@ import { flightRouter } from "./flight.router";
 import { vehicleRouter } from './vehicle.router';
 import { fuelRouter } from './fuel.router';
 import { dashboardRouter } from "./dashboard.router";
+import { preferencesRouter } from "./preferences.router";
 
 export const appRouter = createRouter()
   .merge('example.', exampleRouter)
@@ -16,7 +17,8 @@ export const appRouter = createRouter()
   .merge('flight.', flightRouter)
   .merge('vehicle.', vehicleRouter)
   .merge('fuel.', fuelRouter)
-  .merge('dashboard.', dashboardRouter);
+  .merge('dashboard.', dashboardRouter)
+  .merge('preferences.', preferencesRouter);
 
 // export type definition of API
 export type AppRouter = typeof appRouter;
diff --git a/src/server/router/preferences.router.ts b/src/server/router/preferences.router.ts
new file mode 100644
index 0000000..a9b1148
--- /dev/null
+++ b/src/server/router/preferences.router.ts
@@ -0,0 +1,7 @@
+import { locationInputSchema } from '../../schema/preferences.schema';
+import { createRouter } from './context';
+
+export const preferencesRouter = createRouter().mutation('update-location', {
+  input: locationInputSchema,
+  async resolve({}) {},
+});

From f380d16c82d63e01d761881f2daebd22928a3816 Mon Sep 17 00:00:00 2001
From: ialej001 <ivan.alejandre@gmail.com>
Date: Tue, 6 Sep 2022 18:20:21 -0700
Subject: [PATCH 20/44] removed some files

---
 src/server/router/index.ts              | 4 +---
 src/server/router/preferences.router.ts | 7 -------
 2 files changed, 1 insertion(+), 10 deletions(-)
 delete mode 100644 src/server/router/preferences.router.ts

diff --git a/src/server/router/index.ts b/src/server/router/index.ts
index 36ffa92..06ff4b4 100644
--- a/src/server/router/index.ts
+++ b/src/server/router/index.ts
@@ -8,7 +8,6 @@ import { flightRouter } from "./flight.router";
 import { vehicleRouter } from './vehicle.router';
 import { fuelRouter } from './fuel.router';
 import { dashboardRouter } from "./dashboard.router";
-import { preferencesRouter } from "./preferences.router";
 
 export const appRouter = createRouter()
   .merge('example.', exampleRouter)
@@ -17,8 +16,7 @@ export const appRouter = createRouter()
   .merge('flight.', flightRouter)
   .merge('vehicle.', vehicleRouter)
   .merge('fuel.', fuelRouter)
-  .merge('dashboard.', dashboardRouter)
-  .merge('preferences.', preferencesRouter);
+  .merge('dashboard.', dashboardRouter);
 
 // export type definition of API
 export type AppRouter = typeof appRouter;
diff --git a/src/server/router/preferences.router.ts b/src/server/router/preferences.router.ts
deleted file mode 100644
index a9b1148..0000000
--- a/src/server/router/preferences.router.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { locationInputSchema } from '../../schema/preferences.schema';
-import { createRouter } from './context';
-
-export const preferencesRouter = createRouter().mutation('update-location', {
-  input: locationInputSchema,
-  async resolve({}) {},
-});

From c48ceb506fe18f5210f0fb6dd1433c1a74bdcdfc Mon Sep 17 00:00:00 2001
From: ialej001 <ivan.alejandre@gmail.com>
Date: Tue, 6 Sep 2022 20:16:03 -0700
Subject: [PATCH 21/44] created dashboard detailed data endpoints

---
 src/server/router/dashboard.router.ts | 244 +++++++++++++++++++-------
 1 file changed, 178 insertions(+), 66 deletions(-)

diff --git a/src/server/router/dashboard.router.ts b/src/server/router/dashboard.router.ts
index b7bdb0e..7f7e969 100644
--- a/src/server/router/dashboard.router.ts
+++ b/src/server/router/dashboard.router.ts
@@ -1,77 +1,189 @@
 import { summarySchema } from '../../schema/dashboard.schema';
 import { createRouter } from './context';
 
-export const dashboardRouter = createRouter().query('summary', {
-  output: summarySchema,
-  async resolve({ ctx }) {
-    const user = ctx.session?.user;
+export const dashboardRouter = createRouter()
+  .query('summary', {
+    output: summarySchema,
+    async resolve({ ctx }) {
+      const user = ctx.session?.user;
 
-    if (user) {
-      const electricityCarbon = await ctx.prisma.electricityUse
-        .aggregate({
-          _sum: {
-            carbon_g: true,
-          },
-          where: {
-            userId: user.id,
-          },
-        })
-        .then((response) => response._sum.carbon_g);
+      if (user) {
+        const electricityCarbon = await ctx.prisma.electricityUse
+          .aggregate({
+            _sum: {
+              carbon_g: true,
+            },
+            where: {
+              userId: user.id,
+            },
+          })
+          .then((response) => response._sum.carbon_g);
 
-      const vehicleCarbon = await ctx.prisma.vehicle
-        .findMany({
-          select: {
-            trips: {
-              select: {
-                carbon_g: true,
+        const vehicleCarbon = await ctx.prisma.vehicle
+          .findMany({
+            select: {
+              trips: {
+                select: {
+                  carbon_g: true,
+                },
               },
             },
-          },
-          where: {
-            userId: user.id,
-          },
-        })
-        .then((response) =>
-          response.reduce((previous, current) => {
-            return (
-              previous +
-              current.trips.reduce((previous, current) => {
-                return previous + current.carbon_g;
-              }, 0)
-            );
-          }, 0)
-        );
+            where: {
+              userId: user.id,
+            },
+          })
+          .then((response) =>
+            response.reduce((previous, current) => {
+              return (
+                previous +
+                current.trips.reduce((previous, current) => {
+                  return previous + current.carbon_g;
+                }, 0)
+              );
+            }, 0)
+          );
+
+        const fuelCarbon = await ctx.prisma.fuelUsed
+          .aggregate({
+            _sum: {
+              carbon_g: true,
+            },
+            where: {
+              userId: user.id,
+            },
+          })
+          .then((response) => response._sum.carbon_g);
+
+        const flightCarbon = await ctx.prisma.flight
+          .aggregate({
+            _sum: {
+              carbon_g: true,
+            },
+            where: {
+              userId: user.id,
+            },
+          })
+          .then((response) => response._sum.carbon_g);
+
+        return [
+          { type: 'Electricity', emissions: electricityCarbon ?? 0 },
+          { type: 'Driving', emissions: vehicleCarbon ?? 0 },
+          { type: 'Fuel', emissions: fuelCarbon ?? 0 },
+          { type: 'Flight', emissions: flightCarbon ?? 0 },
+        ];
+      }
+
+      return [];
+    },
+  })
+  .query('get-fuel-data', {
+    async resolve({ ctx }) {
+      const user = ctx.session?.user;
+
+      if (user) {
+        const fuelRecords = await ctx.prisma.fuelUsed
+          .findMany({
+            select: {
+              id: true,
+              fuel_source_type: true,
+              fuel_source_unit: true,
+              fuel_source_value: true,
+              carbon_g: true,
+              estimated_at: true,
+            },
+            where: {
+              userId: user.id,
+            },
+          })
+          .then((response) => response);
+
+        return fuelRecords;
+      }
+    },
+  })
+  .query('get-electicity-data', {
+    async resolve({ ctx }) {
+      const user = ctx.session?.user;
+
+      if (user) {
+        const electricityRecords = await ctx.prisma.electricityUse
+          .findMany({
+            select: {
+              id: true,
+              electricity_unit: true,
+              electricity_value: true,
+              carbon_g: true,
+              estimated_at: true,
+            },
+            where: {
+              userId: user.id,
+            },
+          })
+          .then((response) => response);
 
-      const fuelCarbon = await ctx.prisma.fuelUsed
-        .aggregate({
-          _sum: {
-            carbon_g: true,
-          },
-          where: {
-            userId: user.id,
-          },
-        })
-        .then((response) => response._sum.carbon_g);
+        return electricityRecords;
+      }
+    },
+  })
+  .query('get-flight-data', {
+    async resolve({ ctx }) {
+      const user = ctx.session?.user;
 
-      const flightCarbon = await ctx.prisma.flight
-        .aggregate({
-          _sum: {
-            carbon_g: true,
-          },
-          where: {
-            userId: user.id,
-          },
-        })
-        .then((response) => response._sum.carbon_g);
+      if (user) {
+        const flightRecords = await ctx.prisma.flight
+          .findMany({
+            select: {
+              id: true,
+              passengers: true,
+              distance_value: true,
+              distance_unit: true,
+              carbon_g: true,
+              estimated_at: true,
+              flightLeg: {
+                select: {
+                  id: true,
+                  departure_airport: true,
+                  destination_airport: true,
+                  legNumber: true,
+                },
+              },
+            },
+            where: {
+              userId: user.id,
+            },
+          })
+          .then((response) => response);
 
-      return [
-        { type: 'Electricity', emissions: electricityCarbon ?? 0 },
-        { type: 'Driving', emissions: vehicleCarbon ?? 0 },
-        { type: 'Fuel', emissions: fuelCarbon ?? 0 },
-        { type: 'Flight', emissions: flightCarbon ?? 0 },
-      ];
-    }
+        return flightRecords;
+      }
+    },
+  })
+  .query('get-vehicle-trip-data', {
+    async resolve({ ctx }) {
+      const user = ctx.session?.user;
+
+      if (user) {
+        const vehicleTripRecords = await ctx.prisma.vehicle
+          .findMany({
+            select: {
+              id: true,
+              vehicle_make: true,
+              vehicle_model: true,
+              vehicle_year: true,
+              trips: {
+                select: {
+                  id: true,
+                  distance_value: true,
+                  distance_unit: true,
+                  carbon_g: true,
+                  estimated_at: true,
+                },
+              },
+            },
+          })
+          .then((response) => response);
 
-    return [];
-  },
-});
+        return vehicleTripRecords;
+      }
+    },
+  });

From 945f77528e6efd82cc3b804b901f741478a05f33 Mon Sep 17 00:00:00 2001
From: ialej001 <ivan.alejandre@gmail.com>
Date: Wed, 7 Sep 2022 00:26:48 -0700
Subject: [PATCH 22/44] elec table with mapped rows

---
 src/components/Account/ElectricityTable.tsx | 70 +++++++++++++++++++++
 src/components/Account/FlightModal.tsx      | 27 +-------
 src/components/Home/Hero.tsx                |  2 +-
 src/pages/account/electricity.tsx           |  7 ++-
 src/pages/auth/login.tsx                    |  2 +-
 src/schema/dashboard.schema.ts              | 14 ++++-
 src/server/router/dashboard.router.ts       |  2 +-
 7 files changed, 93 insertions(+), 31 deletions(-)
 create mode 100644 src/components/Account/ElectricityTable.tsx

diff --git a/src/components/Account/ElectricityTable.tsx b/src/components/Account/ElectricityTable.tsx
new file mode 100644
index 0000000..64a1b53
--- /dev/null
+++ b/src/components/Account/ElectricityTable.tsx
@@ -0,0 +1,70 @@
+import { Spinner, Table } from 'flowbite-react';
+import React from 'react';
+import { ElectricityData } from '../../schema/dashboard.schema';
+import { trpc } from '../../utils/trpc';
+
+const ElectricityTable = () => {
+  const { data: electricityData } = trpc.useQuery([
+    'dashboard.get-electicity-data',
+  ]);
+
+//   const sortedElectricityData = () => {
+//     if (electricityData)
+//     return electricityData.sort((a: ElectricityData, b) => {
+//         return b.estimated_at - a.estimated_at;
+//     })
+//   }
+
+  if (!electricityData) {
+    return (
+      <div>
+        <Spinner />
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <Table hoverable={true}>
+        <Table.Head>
+          <Table.HeadCell>Date</Table.HeadCell>
+          <Table.HeadCell>Electricity Used</Table.HeadCell>
+          <Table.HeadCell>Emissions</Table.HeadCell>
+        </Table.Head>
+        <Table.Body className="divide-y">
+          {electricityData.length !== 0 ? (
+            electricityData.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()} at{' '}
+                      {entry.estimated_at.toLocaleTimeString()}
+                    </p>
+                  </Table.Cell>
+                  {/** Todo: update this to use the users unit preference */}
+                  <Table.Cell className="whitespace-nowrap font-medium text-gray-900 dark:text-white">
+                    <>
+                      {entry.electricity_value} {entry.electricity_unit}
+                    </>
+                  </Table.Cell>
+                  <Table.Cell className="whitespace-nowrap font-medium text-gray-900 dark:text-white">
+                    <>
+                    {entry.carbon_g / 1000.0}kg</>
+                  </Table.Cell>
+                </Table.Row>
+              );
+            })
+          ) : (
+            <div></div>
+          )}
+        </Table.Body>
+      </Table>
+    </div>
+  );
+};
+
+export default ElectricityTable;
diff --git a/src/components/Account/FlightModal.tsx b/src/components/Account/FlightModal.tsx
index a54f865..947fa7b 100644
--- a/src/components/Account/FlightModal.tsx
+++ b/src/components/Account/FlightModal.tsx
@@ -7,32 +7,7 @@ const FlightModal = () => {
   
   return (
     <div>
-      <Button onClick={handleModalToggle}>Toggle modal</Button>
-      <Modal show={showModal} onClose={handleModalToggle}>
-        <Modal.Header>Terms of Service</Modal.Header>
-        <Modal.Body>
-          <div className="space-y-6">
-            <p className="text-base leading-relaxed text-gray-500 dark:text-gray-400">
-              With less than a month to go before the European Union enacts new
-              consumer privacy laws for its citizens, companies around the world
-              are updating their terms of service agreements to comply.
-            </p>
-            <p className="text-base leading-relaxed text-gray-500 dark:text-gray-400">
-              The European Union’s General Data Protection Regulation (G.D.P.R.)
-              goes into effect on May 25 and is meant to ensure a common set of
-              data rights in the European Union. It requires organizations to
-              notify users as soon as possible of high-risk data breaches that
-              could personally affect them.
-            </p>
-          </div>
-        </Modal.Body>
-        <Modal.Footer>
-          <Button onClick={handleModalToggle}>I accept</Button>
-          <Button color="gray" onClick={handleModalToggle}>
-            Decline
-          </Button>
-        </Modal.Footer>
-      </Modal>
+      
     </div>
   );
 };
diff --git a/src/components/Home/Hero.tsx b/src/components/Home/Hero.tsx
index 65838b2..f24505a 100644
--- a/src/components/Home/Hero.tsx
+++ b/src/components/Home/Hero.tsx
@@ -1,6 +1,6 @@
 import Image from 'next/image';
 import React from 'react';
-import bikeWoman1 from '../../assets/images/bike-woman1.png';
+import bikeWoman1 from '../../assets/images/bike-woman 1.png';
 
 const Hero = () => (
   <div className="flex flex-col md:flex-row justify-center items-center">
diff --git a/src/pages/account/electricity.tsx b/src/pages/account/electricity.tsx
index f11f86f..b766482 100644
--- a/src/pages/account/electricity.tsx
+++ b/src/pages/account/electricity.tsx
@@ -1,9 +1,14 @@
 import React, { ReactElement } from 'react';
+import ElectricityTable from '../../components/Account/ElectricityTable';
 import AccountLayout from '../../layouts/AccountLayout';
 import { NextPageWithLayout } from '../_app';
 
 const ElectricitySummaryPage: NextPageWithLayout = () => {
-  return <div>ElectricitySummaryPage</div>;
+  return (
+    <div className='px-10'>
+      <ElectricityTable />
+    </div>
+  );
 };
 
 ElectricitySummaryPage.getLayout = function getLayout(page: ReactElement) {
diff --git a/src/pages/auth/login.tsx b/src/pages/auth/login.tsx
index cb7b0e8..983877d 100644
--- a/src/pages/auth/login.tsx
+++ b/src/pages/auth/login.tsx
@@ -11,7 +11,7 @@ import Head from 'next/head';
 import Image from 'next/image';
 import { FaGoogle } from 'react-icons/fa';
 import { BsFacebook, BsGithub } from 'react-icons/bs';
-import plantImage from '../../assets/images/holding-plant-removebg-preview.png';
+import plantImage from '../../assets/images/holding-plant.png';
 import { InferGetServerSidePropsType } from 'next';
 import { useEffect } from 'react';
 import { useRouter } from 'next/router';
diff --git a/src/schema/dashboard.schema.ts b/src/schema/dashboard.schema.ts
index 202dfda..22ec663 100644
--- a/src/schema/dashboard.schema.ts
+++ b/src/schema/dashboard.schema.ts
@@ -2,4 +2,16 @@ import z from 'zod';
 
 export const summarySchema = z.array(
   z.object({ type: z.string(), emissions: z.number() })
-);
\ No newline at end of file
+);
+
+const electricityDataSchema = z.object({
+  electricity_value: z.number(),
+  electricity_unit: z.string(),
+  carbon_g: z.number(),
+  estimated_at: z.date(),
+  id: z.string(),
+});
+
+export const electricityDataArraySchema = z.array(electricityDataSchema);
+
+export type ElectricityData = z.TypeOf<typeof electricityDataSchema>;
diff --git a/src/server/router/dashboard.router.ts b/src/server/router/dashboard.router.ts
index 7f7e969..4853889 100644
--- a/src/server/router/dashboard.router.ts
+++ b/src/server/router/dashboard.router.ts
@@ -1,4 +1,4 @@
-import { summarySchema } from '../../schema/dashboard.schema';
+import { electricityDataArraySchema, summarySchema } from '../../schema/dashboard.schema';
 import { createRouter } from './context';
 
 export const dashboardRouter = createRouter()

From d1b7d01ef4170bec9bfc9211dde78663ce8dd0ad Mon Sep 17 00:00:00 2001
From: ialej001 <ivan.alejandre@gmail.com>
Date: Wed, 7 Sep 2022 12:18:08 -0700
Subject: [PATCH 23/44] styling: table is responsive

---
 src/components/Account/ElectricityTable.tsx | 46 +++++++++++++--------
 1 file changed, 29 insertions(+), 17 deletions(-)

diff --git a/src/components/Account/ElectricityTable.tsx b/src/components/Account/ElectricityTable.tsx
index 64a1b53..031c89a 100644
--- a/src/components/Account/ElectricityTable.tsx
+++ b/src/components/Account/ElectricityTable.tsx
@@ -1,6 +1,5 @@
 import { Spinner, Table } from 'flowbite-react';
 import React from 'react';
-import { ElectricityData } from '../../schema/dashboard.schema';
 import { trpc } from '../../utils/trpc';
 
 const ElectricityTable = () => {
@@ -8,12 +7,13 @@ const ElectricityTable = () => {
     'dashboard.get-electicity-data',
   ]);
 
-//   const sortedElectricityData = () => {
-//     if (electricityData)
-//     return electricityData.sort((a: ElectricityData, b) => {
-//         return b.estimated_at - a.estimated_at;
-//     })
-//   }
+  const electricityDataDatesDesc = () => {
+    const dataToBeSorted = [...electricityData!];
+    if (electricityData)
+      return dataToBeSorted.sort(
+        (a, b) => b.estimated_at.valueOf() - a.estimated_at.valueOf()
+      );
+  };
 
   if (!electricityData) {
     return (
@@ -28,32 +28,43 @@ const ElectricityTable = () => {
       <Table hoverable={true}>
         <Table.Head>
           <Table.HeadCell>Date</Table.HeadCell>
-          <Table.HeadCell>Electricity Used</Table.HeadCell>
-          <Table.HeadCell>Emissions</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 ? (
-            electricityData.map((entry) => {
+            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()} at{' '}
-                      {entry.estimated_at.toLocaleTimeString()}
-                    </p>
+                    <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="whitespace-nowrap font-medium text-gray-900 dark:text-white">
+                  <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="whitespace-nowrap font-medium text-gray-900 dark:text-white">
+                  <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.carbon_g / 1000.0}kg</>
+                    {entry.electricity_value} {entry.electricity_unit}
+                    <strong>{entry.carbon_g / 1000.0}kg</strong>
+                    </>
                   </Table.Cell>
                 </Table.Row>
               );
@@ -63,6 +74,7 @@ const ElectricityTable = () => {
           )}
         </Table.Body>
       </Table>
+      {electricityData.length === 0 ? <div></div> : <div></div>}
     </div>
   );
 };

From 627f2a0bcf02ba379fc65dd53f23356d6a0a627e Mon Sep 17 00:00:00 2001
From: ialej001 <ivan.alejandre@gmail.com>
Date: Wed, 7 Sep 2022 13:23:55 -0700
Subject: [PATCH 24/44] added empty table message w/ redirect

---
 src/components/Account/ElectricityTable.tsx | 15 +++++++++++----
 src/pages/account/electricity.tsx           |  2 +-
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/src/components/Account/ElectricityTable.tsx b/src/components/Account/ElectricityTable.tsx
index 031c89a..ffca382 100644
--- a/src/components/Account/ElectricityTable.tsx
+++ b/src/components/Account/ElectricityTable.tsx
@@ -1,4 +1,5 @@
-import { Spinner, Table } from 'flowbite-react';
+import { Button, Spinner, Table } from 'flowbite-react';
+import Link from 'next/link';
 import React from 'react';
 import { trpc } from '../../utils/trpc';
 
@@ -17,14 +18,14 @@ const ElectricityTable = () => {
 
   if (!electricityData) {
     return (
-      <div>
+      <div className='flex justify-center items-center'>
         <Spinner />
       </div>
     );
   }
 
   return (
-    <div>
+    <div className='px-10'>
       <Table hoverable={true}>
         <Table.Head>
           <Table.HeadCell>Date</Table.HeadCell>
@@ -74,7 +75,13 @@ const ElectricityTable = () => {
           )}
         </Table.Body>
       </Table>
-      {electricityData.length === 0 ? <div></div> : <div></div>}
+      {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></div>}
     </div>
   );
 };
diff --git a/src/pages/account/electricity.tsx b/src/pages/account/electricity.tsx
index b766482..929ce73 100644
--- a/src/pages/account/electricity.tsx
+++ b/src/pages/account/electricity.tsx
@@ -5,7 +5,7 @@ import { NextPageWithLayout } from '../_app';
 
 const ElectricitySummaryPage: NextPageWithLayout = () => {
   return (
-    <div className='px-10'>
+    <div>
       <ElectricityTable />
     </div>
   );

From 1aa3f05de19846941decf9083262387df0fd2baf Mon Sep 17 00:00:00 2001
From: ialej001 <ivan.alejandre@gmail.com>
Date: Wed, 7 Sep 2022 13:51:25 -0700
Subject: [PATCH 25/44] Flight table complete and responsive

---
 src/components/Account/FlightModal.tsx |  15 ---
 src/components/Account/FlightTable.tsx | 130 +++++++++++++++++++++++++
 src/pages/account/flight.tsx           |   3 +-
 src/schema/flight.schema.ts            |   9 ++
 src/server/router/dashboard.router.ts  |   1 +
 5 files changed, 142 insertions(+), 16 deletions(-)
 delete mode 100644 src/components/Account/FlightModal.tsx
 create mode 100644 src/components/Account/FlightTable.tsx

diff --git a/src/components/Account/FlightModal.tsx b/src/components/Account/FlightModal.tsx
deleted file mode 100644
index 947fa7b..0000000
--- a/src/components/Account/FlightModal.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Button, Modal } from 'flowbite-react';
-import React, { useState } from 'react';
-
-const FlightModal = () => {
-  const [showModal, setShowModal] = useState<boolean>(false);
-  const handleModalToggle = () => setShowModal((old) => !old);
-  
-  return (
-    <div>
-      
-    </div>
-  );
-};
-
-export default FlightModal;
diff --git a/src/components/Account/FlightTable.tsx b/src/components/Account/FlightTable.tsx
new file mode 100644
index 0000000..cc30692
--- /dev/null
+++ b/src/components/Account/FlightTable.tsx
@@ -0,0 +1,130 @@
+import { Button, Spinner, Table } from 'flowbite-react';
+import Link from 'next/link';
+import React from 'react';
+import { HiArrowRight } from 'react-icons/hi';
+import { FlightLegData } from '../../schema/flight.schema';
+import { trpc } from '../../utils/trpc';
+
+const FlightTable = () => {
+  const { data: flightData } = trpc.useQuery(['dashboard.get-flight-data']);
+
+  const flightDataDatesDesc = () => {
+    const dataToBeSorted = [...flightData!];
+    if (flightData)
+      return dataToBeSorted.sort(
+        (a, b) => b.estimated_at.valueOf() - a.estimated_at.valueOf()
+      );
+  };
+
+  if (!flightData) {
+    return (
+      <div className="flex justify-center items-center">
+        <Spinner />
+      </div>
+    );
+  }
+
+  const getFlightLegs = (flightLegs: FlightLegData[]) => {
+    return (
+      <div className="flex flex-col">
+        {flightLegs.map((leg) => {
+          return (
+            <div className="flex flex-row gap-2 items-center justify-between">
+              <div className="flex flex-row gap-2 items-center">
+                <p>{leg.cabin_class === 'economy' ? 'Economy:' : 'Premium:'}</p>{' '}
+                <p> {leg.departure_airport}</p>
+                <HiArrowRight />
+                <p>{leg.destination_airport}</p>
+              </div>
+              <div></div>
+            </div>
+          );
+        })}
+      </div>
+    );
+  };
+
+  return (
+    <div className="px-2 sm:px-10">
+      <Table hoverable={true}>
+        <Table.Head>
+          <Table.HeadCell>Date</Table.HeadCell>
+          <Table.HeadCell className="hidden md:table-cell">
+            Passengers
+          </Table.HeadCell>
+          <Table.HeadCell className="hidden sm:table-cell">
+            Trip Info
+          </Table.HeadCell>
+          <Table.HeadCell className="hidden sm:table-cell">
+            Emissions
+          </Table.HeadCell>
+          <Table.HeadCell className="sm:hidden">
+            <div className="text-end">
+              <p>Trip Summary</p>
+              <strong>Emissions</strong>
+            </div>
+          </Table.HeadCell>
+        </Table.Head>
+        <Table.Body className="divide-y">
+          {flightData.length !== 0 ? (
+            flightDataDatesDesc()!.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>
+                  <Table.Cell className="font-medium text-gray-900 dark:text-white hidden md:table-cell">
+                    <p>{entry.passengers}</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">
+                    <>
+                      <p className='mb-2 md:hidden'>
+                        {entry.passengers}{' '}
+                        {entry.passengers > 1 ? 'passengers' : 'passenger'}
+                      </p>
+                      {getFlightLegs(entry.flightLeg)}
+                    </>
+                  </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="font-medium text-gray-900 flex flex-col dark:text-white text-end sm:hidden">
+                    <>
+                      <p>
+                        {entry.passengers}{' '}
+                        {entry.passengers > 1 ? 'passengers' : 'passenger'}
+                      </p>
+                      {entry.flightLeg.length}{' '}
+                      {entry.flightLeg.length > 1 ? 'stops' : 'stop'}
+                      <strong>{entry.carbon_g / 1000.0}kg</strong>
+                    </>
+                  </Table.Cell>
+                </Table.Row>
+              );
+            })
+          ) : (
+            <div></div>
+          )}
+        </Table.Body>
+      </Table>
+      {flightData.length === 0 ? (
+        <div className="flex flex-col items-center pt-10 gap-4">
+          <strong>You haven't recorded any flight data.</strong>
+          <p>You can make your emissions calculation here:</p>
+          <Button size="sm">
+            <Link href="/travel">Make a new calculation</Link>
+          </Button>
+        </div>
+      ) : (
+        <div></div>
+      )}
+    </div>
+  );
+};
+
+export default FlightTable;
diff --git a/src/pages/account/flight.tsx b/src/pages/account/flight.tsx
index 652dc4d..ff6bfde 100644
--- a/src/pages/account/flight.tsx
+++ b/src/pages/account/flight.tsx
@@ -1,10 +1,11 @@
 import React, { ReactElement } from 'react'
+import FlightTable from '../../components/Account/FlightTable';
 import AccountLayout from '../../layouts/AccountLayout';
 import { NextPageWithLayout } from '../_app'
 
 const FlightSummaryPage: NextPageWithLayout = () => {
   return (
-    <div>FlightSummary</div>
+    <div><FlightTable /></div>
   )
 }
 
diff --git a/src/schema/flight.schema.ts b/src/schema/flight.schema.ts
index e0379e2..94c9951 100644
--- a/src/schema/flight.schema.ts
+++ b/src/schema/flight.schema.ts
@@ -14,12 +14,21 @@ const flightLegSchema = z.object({
 
 const distanceUnitSchema = z.enum(['km', 'mi']);
 
+const flightLegDataSchema = z.object({
+  departure_airport: z.string(),
+  destination_airport: z.string(),
+  legNumber: z.number(),
+  id: z.string(),
+  cabin_class: z.string()
+})
+
 export const flightRequestSchema = z.object({
   passengers: z.number(),
   distance_unit: distanceUnitSchema,
   legs: z.array(flightLegSchema),
 });
 
+export type FlightLegData = z.TypeOf<typeof flightLegDataSchema>
 export type CabinClass = z.TypeOf<typeof cabinClassSchema>;
 export type FlightLeg = z.TypeOf<typeof flightLegSchema>;
 
diff --git a/src/server/router/dashboard.router.ts b/src/server/router/dashboard.router.ts
index 4853889..648d1dd 100644
--- a/src/server/router/dashboard.router.ts
+++ b/src/server/router/dashboard.router.ts
@@ -144,6 +144,7 @@ export const dashboardRouter = createRouter()
                   id: true,
                   departure_airport: true,
                   destination_airport: true,
+                  cabin_class: true,
                   legNumber: true,
                 },
               },

From d0f2d7322cf7b24be20b9deb680dd511c63925dd Mon Sep 17 00:00:00 2001
From: ialej001 <ivan.alejandre@gmail.com>
Date: Wed, 7 Sep 2022 13:57:22 -0700
Subject: [PATCH 26/44] fixed residual mess from merge

---
 src/server/router/index.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/server/router/index.ts b/src/server/router/index.ts
index 6592847..321d13a 100644
--- a/src/server/router/index.ts
+++ b/src/server/router/index.ts
@@ -8,6 +8,7 @@ import { flightRouter } from "./flight.router";
 import { vehicleRouter } from './vehicle.router';
 import { fuelRouter } from './fuel.router';
 import { preferencesRouter } from "./preferences.router";
+import { dashboardRouter } from "./dashboard.router";
 
 export const appRouter = createRouter()
   .merge('example.', exampleRouter)
@@ -16,6 +17,7 @@ export const appRouter = createRouter()
   .merge('flight.', flightRouter)
   .merge('vehicle.', vehicleRouter)
   .merge('fuel.', fuelRouter)
+  .merge('dashboard.', dashboardRouter)
   .merge('preferences.', preferencesRouter);
 
 // export type definition of API

From a4e973a2e566f74d9afd923d5f76188f0fc6dafa Mon Sep 17 00:00:00 2001
From: ialej001 <ivan.alejandre@gmail.com>
Date: Wed, 7 Sep 2022 14:01:20 -0700
Subject: [PATCH 27/44] cleaned up empty table message

---
 src/components/Account/ElectricityTable.tsx | 26 +++++++++++++--------
 src/components/Account/FlightTable.tsx      |  4 ++--
 2 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/src/components/Account/ElectricityTable.tsx b/src/components/Account/ElectricityTable.tsx
index ffca382..302dd58 100644
--- a/src/components/Account/ElectricityTable.tsx
+++ b/src/components/Account/ElectricityTable.tsx
@@ -18,23 +18,25 @@ const ElectricityTable = () => {
 
   if (!electricityData) {
     return (
-      <div className='flex justify-center items-center'>
+      <div className="flex justify-center items-center">
         <Spinner />
       </div>
     );
   }
 
   return (
-    <div className='px-10'>
+    <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'>
+          <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>
@@ -63,8 +65,8 @@ const ElectricityTable = () => {
                   </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>
+                      {entry.electricity_value} {entry.electricity_unit}
+                      <strong>{entry.carbon_g / 1000.0}kg</strong>
                     </>
                   </Table.Cell>
                 </Table.Row>
@@ -75,13 +77,17 @@ const ElectricityTable = () => {
           )}
         </Table.Body>
       </Table>
-      {electricityData.length === 0 ? <div className="flex flex-col items-center pt-10 gap-4">
+      {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>
+            <Link href="/electricity">Make a new calculation</Link>
           </Button>
-        </div> : <div></div>}
+        </div>
+      ) : (
+        ''
+      )}
     </div>
   );
 };
diff --git a/src/components/Account/FlightTable.tsx b/src/components/Account/FlightTable.tsx
index cc30692..ac405c4 100644
--- a/src/components/Account/FlightTable.tsx
+++ b/src/components/Account/FlightTable.tsx
@@ -83,7 +83,7 @@ const FlightTable = () => {
                   {/** Todo: update this to use the users unit preference */}
                   <Table.Cell className="font-medium text-gray-900 dark:text-white hidden sm:table-cell">
                     <>
-                      <p className='mb-2 md:hidden'>
+                      <p className="mb-2 md:hidden">
                         {entry.passengers}{' '}
                         {entry.passengers > 1 ? 'passengers' : 'passenger'}
                       </p>
@@ -121,7 +121,7 @@ const FlightTable = () => {
           </Button>
         </div>
       ) : (
-        <div></div>
+        ''
       )}
     </div>
   );

From 5bac8f0d66116945cee6be65638ddc8ae993d6e3 Mon Sep 17 00:00:00 2001
From: ialej001 <ivan.alejandre@gmail.com>
Date: Wed, 7 Sep 2022 16:55:48 -0700
Subject: [PATCH 28/44] fuel table created with responsiveness

---
 src/components/Account/FuelTable.tsx | 147 +++++++++++++++++++++++++++
 src/pages/account/fuel.tsx           |   3 +-
 2 files changed, 149 insertions(+), 1 deletion(-)
 create mode 100644 src/components/Account/FuelTable.tsx

diff --git a/src/components/Account/FuelTable.tsx b/src/components/Account/FuelTable.tsx
new file mode 100644
index 0000000..160490c
--- /dev/null
+++ b/src/components/Account/FuelTable.tsx
@@ -0,0 +1,147 @@
+import { Prisma } from '@prisma/client/';
+import { Button, Spinner, Table } from 'flowbite-react';
+import Link from 'next/link';
+import React from 'react';
+import { trpc } from '../../utils/trpc';
+import { Decimal } from 'Decimal.js';
+
+const FuelTable = () => {
+  const { data: fuelData } = trpc.useQuery(['dashboard.get-fuel-data']);
+
+  const electricityDataDatesDesc = () => {
+    const dataToBeSorted = [...fuelData!];
+    if (fuelData)
+      return dataToBeSorted.sort(
+        (a, b) => b.estimated_at.valueOf() - a.estimated_at.valueOf()
+      );
+  };
+
+  const getFormattedFuelData = (fuelUnitType: string, fuelValue: number) => {
+    let formattedFuelUnit = fuelUnitType
+      .split('_')
+      .map((word) => {
+        if (word.includes('btu')) {
+          return word.toUpperCase();
+        }
+
+        return word.charAt(0).toUpperCase() + word.substring(1);
+      })
+      .join(' ');
+
+    if (formattedFuelUnit.includes('Gallon') && fuelValue > 1)
+      formattedFuelUnit += 's';
+
+    return `${fuelValue} ${formattedFuelUnit}`;
+  };
+
+  const getFuelType = (fuelTypeCode: string) => {
+    switch (fuelTypeCode) {
+      case 'ng':
+        return <p>Natural gas</p>;
+      case 'dfo':
+        return <p>Home Heating and Diesel Fuel</p>;
+      case 'pg':
+        return <p>Propane Gas</p>;
+      case 'ker':
+        return <p>Kerosene</p>;
+      default:
+        return <div></div>;
+    }
+  };
+
+  if (!fuelData) {
+    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">
+            Type of Fuel Burned
+          </Table.HeadCell>
+          <Table.HeadCell className="hidden sm:table-cell">
+            Amount Burned
+          </Table.HeadCell>
+          <Table.HeadCell className="hidden sm:table-cell">
+            Emissions
+          </Table.HeadCell>
+          <Table.HeadCell className="sm:hidden">
+            <div className="text-end">
+              <p>Summary</p>
+              <strong>Emissions</strong>
+            </div>
+          </Table.HeadCell>
+        </Table.Head>
+        <Table.Body className="divide-y">
+          {fuelData.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>
+                  <Table.Cell className="whitespace-nowrap font-medium text-gray-900 dark:text-white hidden sm:table-cell">
+                    {getFuelType(entry.fuel_source_type)}
+                  </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">
+                    <>
+                      {getFormattedFuelData(
+                        entry.fuel_source_unit,
+                        parseFloat(String(entry.fuel_source_value))
+                      )}
+                    </>
+                  </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>
+                  {/** mobile screen */}
+                  <Table.Cell className="whitespace font-medium text-gray-900 flex flex-col dark:text-white text-end sm:hidden">
+                    <div className="gap-4">
+                      <p className="text-wrap">
+                        {getFuelType(entry.fuel_source_type)}
+                      </p>
+                      <p>
+                        {getFormattedFuelData(
+                          entry.fuel_source_unit,
+                          parseFloat(String(entry.fuel_source_value))
+                        )}
+                      </p>
+                      <strong>{entry.carbon_g / 1000.0}kg</strong>
+                    </div>
+                  </Table.Cell>
+                </Table.Row>
+              );
+            })
+          ) : (
+            <div></div>
+          )}
+        </Table.Body>
+      </Table>
+
+      {fuelData.length === 0 ? (
+        <div className="flex flex-col items-center pt-10 gap-4">
+          <strong>You haven't recorded any fuel data.</strong>
+          <p>You can make your emissions calculation here:</p>
+          <Button size="sm">
+            <Link href="/fuel">Make a new calculation</Link>
+          </Button>
+        </div>
+      ) : (
+        ''
+      )}
+    </div>
+  );
+};
+
+export default FuelTable;
diff --git a/src/pages/account/fuel.tsx b/src/pages/account/fuel.tsx
index b487868..a7a4731 100644
--- a/src/pages/account/fuel.tsx
+++ b/src/pages/account/fuel.tsx
@@ -1,9 +1,10 @@
 import React, { ReactElement } from 'react';
+import FuelTable from '../../components/Account/FuelTable';
 import AccountLayout from '../../layouts/AccountLayout';
 import { NextPageWithLayout } from '../_app';
 
 const FuelSummaryPage: NextPageWithLayout = () => {
-  return <div>FuelSummaryPage</div>;
+  return <div><FuelTable /></div>;
 };
 
 FuelSummaryPage.getLayout = function getLayout(page: ReactElement) {

From 1e48e84352627a83fba285bed6fc267a6499cbe5 Mon Sep 17 00:00:00 2001
From: ialej001 <ivan.alejandre@gmail.com>
Date: Thu, 8 Sep 2022 11:03:45 -0700
Subject: [PATCH 29/44] added vehicle tables within tabs on larger screens

---
 src/components/Account/VehicleTripTable.tsx | 103 ++++++++++++++++++++
 src/pages/account/driving.tsx               |  37 ++++++-
 src/schema/dashboard.schema.ts              |   1 +
 3 files changed, 140 insertions(+), 1 deletion(-)
 create mode 100644 src/components/Account/VehicleTripTable.tsx

diff --git a/src/components/Account/VehicleTripTable.tsx b/src/components/Account/VehicleTripTable.tsx
new file mode 100644
index 0000000..eccfa7b
--- /dev/null
+++ b/src/components/Account/VehicleTripTable.tsx
@@ -0,0 +1,103 @@
+import React from 'react';
+import { Prisma } from '@prisma/client';
+import { Button, Spinner, Table } from 'flowbite-react';
+import Link from 'next/link';
+import { trpc } from '../../utils/trpc';
+
+type TripData = {
+  carbon_g: number;
+  estimated_at: Date;
+  distance_unit: string;
+  distance_value: Prisma.Decimal;
+  id: string;
+};
+
+interface VehicleTripTableProps {
+  tripData: TripData[];
+}
+const VehicleTripTable = ({ tripData }: VehicleTripTableProps) => {
+  const tripDataDatesDesc = () => {
+    const dataToBeSorted = [...tripData!];
+    if (tripData)
+      return dataToBeSorted.sort(
+        (a, b) => b.estimated_at.valueOf() - a.estimated_at.valueOf()
+      );
+  };
+
+  if (!tripData) {
+    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">
+            Distance Traveled
+          </Table.HeadCell>
+          <Table.HeadCell className="hidden sm:table-cell">
+            Emissions
+          </Table.HeadCell>
+          <Table.HeadCell className="sm:hidden">
+            <div className="text-end">
+              <p>Distance Traveled</p>
+              <strong>Emissions</strong>
+            </div>
+          </Table.HeadCell>
+        </Table.Head>
+        <Table.Body className="divide-y">
+          {tripData.length !== 0 ? (
+            tripDataDatesDesc()!.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.distance_value} {entry.distance_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.distance_value} {entry.distance_unit}
+                      <strong>{entry.carbon_g / 1000.0}kg</strong>
+                    </>
+                  </Table.Cell>
+                </Table.Row>
+              );
+            })
+          ) : (
+            <div></div>
+          )}
+        </Table.Body>
+      </Table>
+      {tripData.length === 0 ? (
+        <div className="flex flex-col items-center pt-10 gap-4">
+          <strong>You haven't recorded any driving data.</strong>
+          <p>You can make your emissions calculation here:</p>
+          <Button size="sm">
+            <Link href="/travel">Make a new calculation</Link>
+          </Button>
+        </div>
+      ) : (
+        ''
+      )}
+    </div>
+  );
+};
+
+export default VehicleTripTable;
diff --git a/src/pages/account/driving.tsx b/src/pages/account/driving.tsx
index 16c8a7d..fda63b1 100644
--- a/src/pages/account/driving.tsx
+++ b/src/pages/account/driving.tsx
@@ -1,9 +1,44 @@
+import { Spinner, Tabs } from 'flowbite-react';
 import React, { ReactElement } from 'react';
+import VehicleTripTable from '../../components/Account/VehicleTripTable';
 import AccountLayout from '../../layouts/AccountLayout';
+import { trpc } from '../../utils/trpc';
 import { NextPageWithLayout } from '../_app';
 
 const DrivingSummaryPage: NextPageWithLayout = () => {
-  return <div>DrivingSummaryPage</div>;
+  const { data: vehiclesWithTripsData } = trpc.useQuery([
+    'dashboard.get-vehicle-trip-data',
+  ]);
+
+  if (!vehiclesWithTripsData) {
+    return <Spinner />;
+  }
+
+  console.log(vehiclesWithTripsData!);
+  return (
+    <div>
+      <Tabs.Group aria-label="Full width tabs" style="underline">
+        {vehiclesWithTripsData.map((entry) => {
+          return (
+            <Tabs.Item
+              title={[
+                entry.vehicle_year,
+                entry.vehicle_make,
+                entry.vehicle_model,
+              ].join(' ')}
+              key={entry.id}
+            >
+              <VehicleTripTable tripData={entry.trips} />
+            </Tabs.Item>
+          );
+        })}
+        {/* <Tabs.Item title="Profile">Profile content</Tabs.Item>
+        <Tabs.Item title="Dashboard"></Tabs.Item>
+        <Tabs.Item title="Settings">Settings content</Tabs.Item>
+        <Tabs.Item title="Invoice">Invoice content</Tabs.Item> */}
+      </Tabs.Group>
+    </div>
+  );
 };
 
 DrivingSummaryPage.getLayout = function getLayout(page: ReactElement) {
diff --git a/src/schema/dashboard.schema.ts b/src/schema/dashboard.schema.ts
index 22ec663..f915c91 100644
--- a/src/schema/dashboard.schema.ts
+++ b/src/schema/dashboard.schema.ts
@@ -15,3 +15,4 @@ const electricityDataSchema = z.object({
 export const electricityDataArraySchema = z.array(electricityDataSchema);
 
 export type ElectricityData = z.TypeOf<typeof electricityDataSchema>;
+

From 308c7a9f484f4f8b3665507d216f4dc868125048 Mon Sep 17 00:00:00 2001
From: ialej001 <ivan.alejandre@gmail.com>
Date: Thu, 8 Sep 2022 11:11:14 -0700
Subject: [PATCH 30/44] styling: use an accordion on smaller screens

---
 src/components/Account/VehicleTripTable.tsx |  4 +-
 src/pages/account/driving.tsx               | 63 ++++++++++++++-------
 2 files changed, 45 insertions(+), 22 deletions(-)

diff --git a/src/components/Account/VehicleTripTable.tsx b/src/components/Account/VehicleTripTable.tsx
index eccfa7b..182fb39 100644
--- a/src/components/Account/VehicleTripTable.tsx
+++ b/src/components/Account/VehicleTripTable.tsx
@@ -86,8 +86,8 @@ const VehicleTripTable = ({ tripData }: VehicleTripTableProps) => {
         </Table.Body>
       </Table>
       {tripData.length === 0 ? (
-        <div className="flex flex-col items-center pt-10 gap-4">
-          <strong>You haven't recorded any driving data.</strong>
+        <div className="flex flex-col items-center pt-10 gap-4 text-center">
+          <strong>You haven't recorded any driving data for this vehicle.</strong>
           <p>You can make your emissions calculation here:</p>
           <Button size="sm">
             <Link href="/travel">Make a new calculation</Link>
diff --git a/src/pages/account/driving.tsx b/src/pages/account/driving.tsx
index fda63b1..e6c46a2 100644
--- a/src/pages/account/driving.tsx
+++ b/src/pages/account/driving.tsx
@@ -1,4 +1,4 @@
-import { Spinner, Tabs } from 'flowbite-react';
+import { Accordion, Spinner, Tabs } from 'flowbite-react';
 import React, { ReactElement } from 'react';
 import VehicleTripTable from '../../components/Account/VehicleTripTable';
 import AccountLayout from '../../layouts/AccountLayout';
@@ -16,28 +16,51 @@ const DrivingSummaryPage: NextPageWithLayout = () => {
 
   console.log(vehiclesWithTripsData!);
   return (
-    <div>
-      <Tabs.Group aria-label="Full width tabs" style="underline">
-        {vehiclesWithTripsData.map((entry) => {
-          return (
-            <Tabs.Item
-              title={[
-                entry.vehicle_year,
-                entry.vehicle_make,
-                entry.vehicle_model,
-              ].join(' ')}
-              key={entry.id}
-            >
-              <VehicleTripTable tripData={entry.trips} />
-            </Tabs.Item>
-          );
-        })}
-        {/* <Tabs.Item title="Profile">Profile content</Tabs.Item>
+    <>
+      <div className="md:px-10 hidden sm:block">
+        <Tabs.Group aria-label="Full width tabs" style="underline">
+          {vehiclesWithTripsData.map((entry) => {
+            return (
+              <Tabs.Item
+                title={[
+                  entry.vehicle_year,
+                  entry.vehicle_make,
+                  entry.vehicle_model,
+                ].join(' ')}
+                key={entry.id}
+              >
+                <VehicleTripTable tripData={entry.trips} />
+              </Tabs.Item>
+            );
+          })}
+          {/* <Tabs.Item title="Profile">Profile content</Tabs.Item>
         <Tabs.Item title="Dashboard"></Tabs.Item>
         <Tabs.Item title="Settings">Settings content</Tabs.Item>
         <Tabs.Item title="Invoice">Invoice content</Tabs.Item> */}
-      </Tabs.Group>
-    </div>
+        </Tabs.Group>
+      </div>
+      <div className="md:hidden px-2">
+        <Accordion>
+          {vehiclesWithTripsData.map((entry) => {
+            return (
+              <Accordion.Panel>
+                <Accordion.Title >
+                  <p className='text-gray-900'>{[
+                    entry.vehicle_year,
+                    entry.vehicle_make,
+                    entry.vehicle_model,
+                  ].join(' ')}</p>
+                  
+                </Accordion.Title>
+                <Accordion.Content>
+                  <VehicleTripTable tripData={entry.trips} />
+                </Accordion.Content>
+              </Accordion.Panel>
+            );
+          })}
+        </Accordion>
+      </div>
+    </>
   );
 };
 

From e59eff34da65e08e1f77b0485277ae8f2a7008e0 Mon Sep 17 00:00:00 2001
From: ialej001 <ivan.alejandre@gmail.com>
Date: Thu, 8 Sep 2022 11:19:22 -0700
Subject: [PATCH 31/44] renamed page routes for clarity

---
 src/pages/account/{driving.tsx => driving-summary.tsx}         | 0
 src/pages/account/{electricity.tsx => electricity-summary.tsx} | 0
 src/pages/account/{flight.tsx => flight-summary.tsx}           | 0
 src/pages/account/{fuel.tsx => fuel-summary.tsx}               | 0
 4 files changed, 0 insertions(+), 0 deletions(-)
 rename src/pages/account/{driving.tsx => driving-summary.tsx} (100%)
 rename src/pages/account/{electricity.tsx => electricity-summary.tsx} (100%)
 rename src/pages/account/{flight.tsx => flight-summary.tsx} (100%)
 rename src/pages/account/{fuel.tsx => fuel-summary.tsx} (100%)

diff --git a/src/pages/account/driving.tsx b/src/pages/account/driving-summary.tsx
similarity index 100%
rename from src/pages/account/driving.tsx
rename to src/pages/account/driving-summary.tsx
diff --git a/src/pages/account/electricity.tsx b/src/pages/account/electricity-summary.tsx
similarity index 100%
rename from src/pages/account/electricity.tsx
rename to src/pages/account/electricity-summary.tsx
diff --git a/src/pages/account/flight.tsx b/src/pages/account/flight-summary.tsx
similarity index 100%
rename from src/pages/account/flight.tsx
rename to src/pages/account/flight-summary.tsx
diff --git a/src/pages/account/fuel.tsx b/src/pages/account/fuel-summary.tsx
similarity index 100%
rename from src/pages/account/fuel.tsx
rename to src/pages/account/fuel-summary.tsx

From 4e1db77040cc7b4844a77ae988d1e4fd68731fcd Mon Sep 17 00:00:00 2001
From: ialej001 <ivan.alejandre@gmail.com>
Date: Thu, 8 Sep 2022 11:19:37 -0700
Subject: [PATCH 32/44] fixed nested p tags

---
 src/components/Account/FuelTable.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/Account/FuelTable.tsx b/src/components/Account/FuelTable.tsx
index 160490c..238e4aa 100644
--- a/src/components/Account/FuelTable.tsx
+++ b/src/components/Account/FuelTable.tsx
@@ -45,7 +45,7 @@ const FuelTable = () => {
       case 'ker':
         return <p>Kerosene</p>;
       default:
-        return <div></div>;
+        return '';
     }
   };
 
@@ -108,15 +108,15 @@ const FuelTable = () => {
                   {/** mobile screen */}
                   <Table.Cell className="whitespace font-medium text-gray-900 flex flex-col dark:text-white text-end sm:hidden">
                     <div className="gap-4">
-                      <p className="text-wrap">
+                      <div className="text-wrap">
                         {getFuelType(entry.fuel_source_type)}
-                      </p>
-                      <p>
+                      </div>
+                      <div>
                         {getFormattedFuelData(
                           entry.fuel_source_unit,
                           parseFloat(String(entry.fuel_source_value))
                         )}
-                      </p>
+                      </div>
                       <strong>{entry.carbon_g / 1000.0}kg</strong>
                     </div>
                   </Table.Cell>

From aba60f81d771e80e7d72056012052562a8beec7f Mon Sep 17 00:00:00 2001
From: ialej001 <ivan.alejandre@gmail.com>
Date: Thu, 8 Sep 2022 11:19:53 -0700
Subject: [PATCH 33/44] updated router links after rename

---
 src/components/Account/Dashboard.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/Account/Dashboard.tsx b/src/components/Account/Dashboard.tsx
index 56b92c1..d815663 100644
--- a/src/components/Account/Dashboard.tsx
+++ b/src/components/Account/Dashboard.tsx
@@ -25,13 +25,13 @@ const Dashboard = ({ greeting }: DashboardProps) => {
   const handleOnClickTile = (type: string) => {
     switch (type) {
       case 'Electricity':
-        return router.push('/account/electricity');
+        return router.push('/account/electricity-summary');
       case 'Driving':
-        return router.push('/account/driving');
+        return router.push('/account/driving-summary');
       case 'Fuel':
-        return router.push('/account/fuel');
+        return router.push('/account/fuel-summary');
       case 'Flight':
-        return router.push('/account/flight');
+        return router.push('/account/flight-summary');
       default:
         return;
     }

From 696bba34c16b64133c225cf084f3c9746a0ab046 Mon Sep 17 00:00:00 2001
From: ialej001 <ivan.alejandre@gmail.com>
Date: Thu, 8 Sep 2022 11:20:42 -0700
Subject: [PATCH 34/44] fixed missing key prop

---
 src/components/Account/FlightTable.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/Account/FlightTable.tsx b/src/components/Account/FlightTable.tsx
index ac405c4..ddf1356 100644
--- a/src/components/Account/FlightTable.tsx
+++ b/src/components/Account/FlightTable.tsx
@@ -29,7 +29,10 @@ const FlightTable = () => {
       <div className="flex flex-col">
         {flightLegs.map((leg) => {
           return (
-            <div className="flex flex-row gap-2 items-center justify-between">
+            <div
+              className="flex flex-row gap-2 items-center justify-between"
+              key={leg.id}
+            >
               <div className="flex flex-row gap-2 items-center">
                 <p>{leg.cabin_class === 'economy' ? 'Economy:' : 'Premium:'}</p>{' '}
                 <p> {leg.departure_airport}</p>

From f953c18c1e43722286275c1ef6c87c84235a5ab9 Mon Sep 17 00:00:00 2001
From: ialej001 <ivan.alejandre@gmail.com>
Date: Thu, 8 Sep 2022 12:01:17 -0700
Subject: [PATCH 35/44] styling: switched to grid for summary tiles

---
 src/components/Account/Dashboard.tsx   | 9 ++-------
 src/components/Account/SummaryTile.tsx | 2 +-
 2 files changed, 3 insertions(+), 8 deletions(-)

diff --git a/src/components/Account/Dashboard.tsx b/src/components/Account/Dashboard.tsx
index d815663..6d7b438 100644
--- a/src/components/Account/Dashboard.tsx
+++ b/src/components/Account/Dashboard.tsx
@@ -8,12 +8,6 @@ interface DashboardProps {
   greeting: string;
 }
 const Dashboard = ({ greeting }: DashboardProps) => {
-  const dummyData = [
-    { type: 'Electricity', emissions: 3000 },
-    { type: 'Fuel', emissions: 2000 },
-    { type: 'Flight', emissions: 4000 },
-    { type: 'Driving', emissions: 6000 },
-  ];
   const router = useRouter();
   const { data, isLoading } = trpc.useQuery(['dashboard.summary']);
 
@@ -49,7 +43,8 @@ const Dashboard = ({ greeting }: DashboardProps) => {
           To this date, your total emissions break down as follows
         </h4>
       </div>
-      <div className="flex flex-wrap justify-around content-around gap-5 max-w-6xl min-w-xl mx-auto">
+      {/* <div className="flex flex-wrap justify-around content-around gap-5 max-w-6xl min-w-xl mx-auto"> */}
+      <div className='grid grid-cols-1 md:grid-cols-4 xl:grid-cols-8 gap-5 md:px-10'>
         {isLoading && !data && <Spinner className="my-20" size="lg" />}
         {!isLoading &&
           data &&
diff --git a/src/components/Account/SummaryTile.tsx b/src/components/Account/SummaryTile.tsx
index 1ac327f..1dad483 100644
--- a/src/components/Account/SummaryTile.tsx
+++ b/src/components/Account/SummaryTile.tsx
@@ -20,7 +20,7 @@ const SummaryTile = ({
 }: SummaryTileProps) => {
   const emissionsPercentage = (emissionsValue / totalEmissions) * 100;
   return (
-    <div className="max-w-lg">
+    <div className="grid col-span-2 max-w-lg">
       <Card>
         <div className="flex flex-col items-center gap-5 px-20 py-5">
           <h4 className="text-2xl font-bold">{type}</h4>

From 4610fea0cd5cf39a20db47977866ed648d6ac629 Mon Sep 17 00:00:00 2001
From: ialej001 <ivan.alejandre@gmail.com>
Date: Thu, 8 Sep 2022 12:17:05 -0700
Subject: [PATCH 36/44] refactor: moved all queries to the page level

---
 src/components/Account/ElectricityTable.tsx | 10 ++---
 src/components/Account/FlightTable.tsx      |  7 ++-
 src/components/Account/FuelTable.tsx        | 11 +++--
 src/components/Account/VehicleTripTable.tsx | 16 +++----
 src/pages/account/electricity-summary.tsx   |  7 ++-
 src/pages/account/flight-summary.tsx        | 21 +++++----
 src/pages/account/fuel-summary.tsx          |  9 +++-
 src/schema/dashboard.schema.ts              | 47 +++++++++++++++++----
 src/server/router/dashboard.router.ts       |  2 +-
 9 files changed, 86 insertions(+), 44 deletions(-)

diff --git a/src/components/Account/ElectricityTable.tsx b/src/components/Account/ElectricityTable.tsx
index 302dd58..95d3c13 100644
--- a/src/components/Account/ElectricityTable.tsx
+++ b/src/components/Account/ElectricityTable.tsx
@@ -1,13 +1,13 @@
 import { Button, Spinner, Table } from 'flowbite-react';
 import Link from 'next/link';
 import React from 'react';
-import { trpc } from '../../utils/trpc';
+import { ElectricityData } from '../../schema/dashboard.schema';
 
-const ElectricityTable = () => {
-  const { data: electricityData } = trpc.useQuery([
-    'dashboard.get-electicity-data',
-  ]);
+interface ElectricityTableProps {
+  electricityData: ElectricityData[] | undefined;
+}
 
+const ElectricityTable = ({ electricityData }: ElectricityTableProps) => {
   const electricityDataDatesDesc = () => {
     const dataToBeSorted = [...electricityData!];
     if (electricityData)
diff --git a/src/components/Account/FlightTable.tsx b/src/components/Account/FlightTable.tsx
index ddf1356..466fc35 100644
--- a/src/components/Account/FlightTable.tsx
+++ b/src/components/Account/FlightTable.tsx
@@ -2,11 +2,14 @@ import { Button, Spinner, Table } from 'flowbite-react';
 import Link from 'next/link';
 import React from 'react';
 import { HiArrowRight } from 'react-icons/hi';
+import { FlightData } from '../../schema/dashboard.schema';
 import { FlightLegData } from '../../schema/flight.schema';
 import { trpc } from '../../utils/trpc';
 
-const FlightTable = () => {
-  const { data: flightData } = trpc.useQuery(['dashboard.get-flight-data']);
+interface FlightTableProps {
+  flightData: FlightData[] | undefined
+}
+const FlightTable = ({flightData}: FlightTableProps) => {
 
   const flightDataDatesDesc = () => {
     const dataToBeSorted = [...flightData!];
diff --git a/src/components/Account/FuelTable.tsx b/src/components/Account/FuelTable.tsx
index 238e4aa..8ae6c21 100644
--- a/src/components/Account/FuelTable.tsx
+++ b/src/components/Account/FuelTable.tsx
@@ -1,13 +1,12 @@
-import { Prisma } from '@prisma/client/';
 import { Button, Spinner, Table } from 'flowbite-react';
 import Link from 'next/link';
 import React from 'react';
-import { trpc } from '../../utils/trpc';
-import { Decimal } from 'Decimal.js';
-
-const FuelTable = () => {
-  const { data: fuelData } = trpc.useQuery(['dashboard.get-fuel-data']);
+import { FuelData } from '../../schema/dashboard.schema';
 
+interface FuelTableProps {
+  fuelData: FuelData[] | undefined;
+}
+const FuelTable = ({ fuelData }: FuelTableProps) => {
   const electricityDataDatesDesc = () => {
     const dataToBeSorted = [...fuelData!];
     if (fuelData)
diff --git a/src/components/Account/VehicleTripTable.tsx b/src/components/Account/VehicleTripTable.tsx
index 182fb39..ff45210 100644
--- a/src/components/Account/VehicleTripTable.tsx
+++ b/src/components/Account/VehicleTripTable.tsx
@@ -1,20 +1,12 @@
 import React from 'react';
-import { Prisma } from '@prisma/client';
 import { Button, Spinner, Table } from 'flowbite-react';
 import Link from 'next/link';
-import { trpc } from '../../utils/trpc';
-
-type TripData = {
-  carbon_g: number;
-  estimated_at: Date;
-  distance_unit: string;
-  distance_value: Prisma.Decimal;
-  id: string;
-};
+import { TripData } from '../../schema/dashboard.schema';
 
 interface VehicleTripTableProps {
   tripData: TripData[];
 }
+
 const VehicleTripTable = ({ tripData }: VehicleTripTableProps) => {
   const tripDataDatesDesc = () => {
     const dataToBeSorted = [...tripData!];
@@ -87,7 +79,9 @@ const VehicleTripTable = ({ tripData }: VehicleTripTableProps) => {
       </Table>
       {tripData.length === 0 ? (
         <div className="flex flex-col items-center pt-10 gap-4 text-center">
-          <strong>You haven't recorded any driving data for this vehicle.</strong>
+          <strong>
+            You haven't recorded any driving data for this vehicle.
+          </strong>
           <p>You can make your emissions calculation here:</p>
           <Button size="sm">
             <Link href="/travel">Make a new calculation</Link>
diff --git a/src/pages/account/electricity-summary.tsx b/src/pages/account/electricity-summary.tsx
index 929ce73..b8453ac 100644
--- a/src/pages/account/electricity-summary.tsx
+++ b/src/pages/account/electricity-summary.tsx
@@ -1,12 +1,17 @@
 import React, { ReactElement } from 'react';
 import ElectricityTable from '../../components/Account/ElectricityTable';
 import AccountLayout from '../../layouts/AccountLayout';
+import { trpc } from '../../utils/trpc';
 import { NextPageWithLayout } from '../_app';
 
 const ElectricitySummaryPage: NextPageWithLayout = () => {
+  const { data: electricityData } = trpc.useQuery([
+    'dashboard.get-electicity-data',
+  ]);
+
   return (
     <div>
-      <ElectricityTable />
+      <ElectricityTable electricityData={electricityData} />
     </div>
   );
 };
diff --git a/src/pages/account/flight-summary.tsx b/src/pages/account/flight-summary.tsx
index ff6bfde..1490e85 100644
--- a/src/pages/account/flight-summary.tsx
+++ b/src/pages/account/flight-summary.tsx
@@ -1,15 +1,20 @@
-import React, { ReactElement } from 'react'
+import React, { ReactElement } from 'react';
 import FlightTable from '../../components/Account/FlightTable';
 import AccountLayout from '../../layouts/AccountLayout';
-import { NextPageWithLayout } from '../_app'
+import { trpc } from '../../utils/trpc';
+import { NextPageWithLayout } from '../_app';
 
 const FlightSummaryPage: NextPageWithLayout = () => {
+  const { data: flightData } = trpc.useQuery(['dashboard.get-flight-data']);
+
   return (
-    <div><FlightTable /></div>
-  )
-}
+    <div>
+      <FlightTable flightData={flightData} />
+    </div>
+  );
+};
 
 FlightSummaryPage.getLayout = function getLayout(page: ReactElement) {
-    return <AccountLayout>{page}</AccountLayout>;
-  };
-export default FlightSummaryPage
\ No newline at end of file
+  return <AccountLayout>{page}</AccountLayout>;
+};
+export default FlightSummaryPage;
diff --git a/src/pages/account/fuel-summary.tsx b/src/pages/account/fuel-summary.tsx
index a7a4731..732d279 100644
--- a/src/pages/account/fuel-summary.tsx
+++ b/src/pages/account/fuel-summary.tsx
@@ -1,10 +1,17 @@
 import React, { ReactElement } from 'react';
 import FuelTable from '../../components/Account/FuelTable';
 import AccountLayout from '../../layouts/AccountLayout';
+import { trpc } from '../../utils/trpc';
 import { NextPageWithLayout } from '../_app';
 
 const FuelSummaryPage: NextPageWithLayout = () => {
-  return <div><FuelTable /></div>;
+  const { data: fuelData } = trpc.useQuery(['dashboard.get-fuel-data']);
+
+  return (
+    <div>
+      <FuelTable fuelData={fuelData} />
+    </div>
+  );
 };
 
 FuelSummaryPage.getLayout = function getLayout(page: ReactElement) {
diff --git a/src/schema/dashboard.schema.ts b/src/schema/dashboard.schema.ts
index f915c91..7b1ff9a 100644
--- a/src/schema/dashboard.schema.ts
+++ b/src/schema/dashboard.schema.ts
@@ -1,18 +1,47 @@
+import { Prisma } from '@prisma/client';
 import z from 'zod';
 
 export const summarySchema = z.array(
   z.object({ type: z.string(), emissions: z.number() })
 );
 
-const electricityDataSchema = z.object({
-  electricity_value: z.number(),
-  electricity_unit: z.string(),
-  carbon_g: z.number(),
-  estimated_at: z.date(),
-  id: z.string(),
-});
+export type ElectricityData = {
+  electricity_value: Prisma.Decimal;
+  electricity_unit: string;
+  carbon_g: number;
+  estimated_at: Date;
+  id: string;
+};
 
-export const electricityDataArraySchema = z.array(electricityDataSchema);
+export type FlightData = {
+  id: string;
+  carbon_g: number;
+  estimated_at: Date;
+  passengers: number;
+  distance_unit: string;
+  distance_value: Prisma.Decimal;
+  flightLeg: {
+    id: string;
+    departure_airport: string;
+    destination_airport: string;
+    cabin_class: string;
+    legNumber: number;
+  }[];
+};
 
-export type ElectricityData = z.TypeOf<typeof electricityDataSchema>;
+export type FuelData = {
+  id: string;
+  carbon_g: number;
+  estimated_at: Date;
+  fuel_source_type: string;
+  fuel_source_unit: string;
+  fuel_source_value: Prisma.Decimal;
+};
 
+export type TripData = {
+  carbon_g: number;
+  estimated_at: Date;
+  distance_unit: string;
+  distance_value: Prisma.Decimal;
+  id: string;
+};
diff --git a/src/server/router/dashboard.router.ts b/src/server/router/dashboard.router.ts
index 648d1dd..b2e90e6 100644
--- a/src/server/router/dashboard.router.ts
+++ b/src/server/router/dashboard.router.ts
@@ -1,4 +1,4 @@
-import { electricityDataArraySchema, summarySchema } from '../../schema/dashboard.schema';
+import { summarySchema } from '../../schema/dashboard.schema';
 import { createRouter } from './context';
 
 export const dashboardRouter = createRouter()

From 78d71807647433c5b26687c470beceeb2d4eccbc Mon Sep 17 00:00:00 2001
From: ialej001 <ivan.alejandre@gmail.com>
Date: Thu, 8 Sep 2022 12:54:21 -0700
Subject: [PATCH 37/44] refactor: lifted queries to page level

---
 src/components/Account/Dashboard.tsx | 39 ++++++++++++++--------------
 src/pages/account/index.tsx          | 19 ++++++++++++--
 src/schema/dashboard.schema.ts       |  5 ++++
 3 files changed, 42 insertions(+), 21 deletions(-)

diff --git a/src/components/Account/Dashboard.tsx b/src/components/Account/Dashboard.tsx
index 6d7b438..7914fcb 100644
--- a/src/components/Account/Dashboard.tsx
+++ b/src/components/Account/Dashboard.tsx
@@ -1,18 +1,20 @@
 import { Spinner } from 'flowbite-react';
 import { useRouter } from 'next/router';
 import React from 'react';
-import { trpc } from '../../utils/trpc';
+import { EmissionsSummaryData } from '../../schema/dashboard.schema';
 import SummaryTile from './SummaryTile';
 
 interface DashboardProps {
   greeting: string;
+  emissionsSummaryData: EmissionsSummaryData[] | undefined;
+  unitPreference: string;
 }
-const Dashboard = ({ greeting }: DashboardProps) => {
+
+const Dashboard = ({ greeting, emissionsSummaryData, unitPreference }: DashboardProps) => {
   const router = useRouter();
-  const { data, isLoading } = trpc.useQuery(['dashboard.summary']);
 
   const totalEmissions =
-    data?.reduce((previousValue, current) => {
+    emissionsSummaryData?.reduce((previousValue, current) => {
       return previousValue + current.emissions;
     }, 0) ?? 0;
 
@@ -31,6 +33,8 @@ const Dashboard = ({ greeting }: DashboardProps) => {
     }
   };
 
+  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>
@@ -44,21 +48,18 @@ const Dashboard = ({ greeting }: DashboardProps) => {
         </h4>
       </div>
       {/* <div className="flex flex-wrap justify-around content-around gap-5 max-w-6xl min-w-xl mx-auto"> */}
-      <div className='grid grid-cols-1 md:grid-cols-4 xl:grid-cols-8 gap-5 md:px-10'>
-        {isLoading && !data && <Spinner className="my-20" size="lg" />}
-        {!isLoading &&
-          data &&
-          data.map((classification) => {
-            return (
-              <SummaryTile
-                type={classification.type}
-                emissionsValue={classification.emissions}
-                totalEmissions={totalEmissions}
-                key={classification.type}
-                handleOnClick={() => handleOnClickTile(classification.type)}
-              />
-            );
-          })}
+      <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}
+              emissionsValue={classification.emissions}
+              totalEmissions={totalEmissions}
+              key={classification.type}
+              handleOnClick={() => handleOnClickTile(classification.type)}
+            />
+          );
+        })}
       </div>
     </div>
   );
diff --git a/src/pages/account/index.tsx b/src/pages/account/index.tsx
index 7f30778..aad3017 100644
--- a/src/pages/account/index.tsx
+++ b/src/pages/account/index.tsx
@@ -1,9 +1,10 @@
+import { Spinner } from 'flowbite-react';
 import { useSession } from 'next-auth/react';
 import { useRouter } from 'next/router';
 import { ReactElement, useEffect } from 'react';
-import ControlPanel from '../../components/Account/ControlPanel';
 import Dashboard from '../../components/Account/Dashboard';
 import AccountLayout from '../../layouts/AccountLayout';
+import { trpc } from '../../utils/trpc';
 import { NextPageWithLayout } from '../_app';
 
 const AccountPage: NextPageWithLayout = () => {
@@ -11,6 +12,12 @@ const AccountPage: NextPageWithLayout = () => {
   const router = useRouter();
   const greetingMessage = `Welcome, ${session?.user?.name}`;
 
+  const { data: emissionsSummaryData, isLoading: isEmissionsLoading } =
+    trpc.useQuery(['dashboard.summary']);
+
+  const { data: userPreferences, isLoading: isPreferencesLoading } =
+    trpc.useQuery(['preferences.get-preferences']);
+
   useEffect(() => {
     if (!session) {
       router.push('/auth/login');
@@ -21,7 +28,15 @@ const AccountPage: NextPageWithLayout = () => {
     return <div>Access denied. Please sign in.</div>;
   }
 
-  return <Dashboard greeting={greetingMessage} />;
+  if (isEmissionsLoading || isPreferencesLoading) return <Spinner />;
+
+  return (
+    <Dashboard
+      greeting={greetingMessage}
+      emissionsSummaryData={emissionsSummaryData}
+      unitPreference={userPreferences!.unitPref} // DB value defaulted to metric, always present
+    />
+  );
 };
 
 AccountPage.getLayout = function getLayout(page: ReactElement) {
diff --git a/src/schema/dashboard.schema.ts b/src/schema/dashboard.schema.ts
index 7b1ff9a..3bd9244 100644
--- a/src/schema/dashboard.schema.ts
+++ b/src/schema/dashboard.schema.ts
@@ -5,6 +5,11 @@ export const summarySchema = z.array(
   z.object({ type: z.string(), emissions: z.number() })
 );
 
+export type EmissionsSummaryData = {
+  type: string;
+  emissions: number;
+};
+
 export type ElectricityData = {
   electricity_value: Prisma.Decimal;
   electricity_unit: string;

From 3011d8df080709be4af5bf97077db56fb16dac85 Mon Sep 17 00:00:00 2001
From: ialej001 <ivan.alejandre@gmail.com>
Date: Thu, 8 Sep 2022 13:17:30 -0700
Subject: [PATCH 38/44] emissions values change to user preference

---
 src/components/Account/Dashboard.tsx   | 13 +++++++---
 src/components/Account/SummaryTile.tsx | 36 +++++++++++++++++++-------
 src/utils/unitConverter.ts             | 14 ++++++++++
 3 files changed, 50 insertions(+), 13 deletions(-)
 create mode 100644 src/utils/unitConverter.ts

diff --git a/src/components/Account/Dashboard.tsx b/src/components/Account/Dashboard.tsx
index 7914fcb..d7562c3 100644
--- a/src/components/Account/Dashboard.tsx
+++ b/src/components/Account/Dashboard.tsx
@@ -1,7 +1,7 @@
-import { Spinner } from 'flowbite-react';
 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 {
@@ -10,7 +10,11 @@ interface DashboardProps {
   unitPreference: string;
 }
 
-const Dashboard = ({ greeting, emissionsSummaryData, unitPreference }: DashboardProps) => {
+const Dashboard = ({
+  greeting,
+  emissionsSummaryData,
+  unitPreference,
+}: DashboardProps) => {
   const router = useRouter();
 
   const totalEmissions =
@@ -40,7 +44,9 @@ const Dashboard = ({ greeting, emissionsSummaryData, unitPreference }: Dashboard
       <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">{totalEmissions} g</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">
@@ -53,6 +59,7 @@ const Dashboard = ({ greeting, emissionsSummaryData, unitPreference }: Dashboard
           return (
             <SummaryTile
               type={classification.type}
+              unitPreference={unitPreference}
               emissionsValue={classification.emissions}
               totalEmissions={totalEmissions}
               key={classification.type}
diff --git a/src/components/Account/SummaryTile.tsx b/src/components/Account/SummaryTile.tsx
index 1dad483..32d3656 100644
--- a/src/components/Account/SummaryTile.tsx
+++ b/src/components/Account/SummaryTile.tsx
@@ -1,12 +1,14 @@
-import { Button, Card, Progress } from 'flowbite-react';
+import { Button, Card } from 'flowbite-react';
 import { Circle } from 'rc-progress';
 import React from 'react';
 import { FaGasPump } from 'react-icons/fa';
 import { ImPowerCord } from 'react-icons/im';
 import { MdDriveEta, MdFlight } from 'react-icons/md';
+import { formatWeightToUserUnitPreference } from '../../utils/unitConverter';
 
 interface SummaryTileProps {
   type: string;
+  unitPreference: string;
   emissionsValue: number;
   totalEmissions: number;
   handleOnClick: (type: string) => void;
@@ -14,11 +16,18 @@ interface SummaryTileProps {
 
 const SummaryTile = ({
   type,
+  unitPreference,
   emissionsValue,
   totalEmissions,
   handleOnClick,
 }: SummaryTileProps) => {
-  const emissionsPercentage = (emissionsValue / totalEmissions) * 100;
+  const getEmissionsPercentage = (): string => {
+    if (totalEmissions === 0) {
+      return '0';
+    }
+    const emissionsPercentage = (emissionsValue / totalEmissions) * 100;
+    return emissionsPercentage.toFixed(2);
+  };
   return (
     <div className="grid col-span-2 max-w-lg">
       <Card>
@@ -26,16 +35,23 @@ const SummaryTile = ({
           <h4 className="text-2xl font-bold">{type}</h4>
           {getIcon(type)}
           <h3 className="text-xl">Emissions</h3>
-          <h3 className="font-bold">{emissionsValue} g</h3>
-          <p className="text-center">
+          <h3 className="font-bold">
+            {formatWeightToUserUnitPreference(unitPreference, emissionsValue)}
+          </h3>
+          {/* <p className="text-center">
             {emissionsPercentage.toFixed(2)}% of all calculations
-          </p>
+          </p> */}
+          <div className="relative h-24 w-24">
+            <div className="absolute inset-0">
+              <p className="mt-8 text-center">{getEmissionsPercentage()}%</p>
+            </div>
+            <Circle
+              percent={parseFloat(getEmissionsPercentage())}
+              strokeWidth={5}
+              strokeColor={getColor(parseFloat(getEmissionsPercentage()))}
+            />
+          </div>
 
-          <Circle
-            percent={emissionsPercentage}
-            strokeWidth={5}
-            strokeColor={getColor(emissionsPercentage)}
-          />
           <Button onClick={() => handleOnClick(type)}>View All</Button>
         </div>
       </Card>
diff --git a/src/utils/unitConverter.ts b/src/utils/unitConverter.ts
new file mode 100644
index 0000000..68d6720
--- /dev/null
+++ b/src/utils/unitConverter.ts
@@ -0,0 +1,14 @@
+export const formatWeightToUserUnitPreference = (
+  unitPreference: string,
+  value: number
+): string => {
+  switch (unitPreference) {
+    case 'metric':
+      return `${value / 1000.0} kg`;
+    case 'imperial':
+        const lbs = (value / 1000.0) * 2.2
+      return `${lbs.toFixed(2)} lbs`;
+    default:
+      return '';
+  }
+};

From a1dab94bd6e6264e9dca5f355b2f52e452da8b16 Mon Sep 17 00:00:00 2001
From: ialej001 <ivan.alejandre@gmail.com>
Date: Thu, 8 Sep 2022 13:19:01 -0700
Subject: [PATCH 39/44] emissions values change to user preference

---
 src/components/Account/Dashboard.tsx   | 14 ++++++++---
 src/components/Account/SummaryTile.tsx | 35 ++++++++++++++++++--------
 src/utils/unitConverter.ts             | 14 +++++++++++
 3 files changed, 48 insertions(+), 15 deletions(-)
 create mode 100644 src/utils/unitConverter.ts

diff --git a/src/components/Account/Dashboard.tsx b/src/components/Account/Dashboard.tsx
index 7914fcb..47a2046 100644
--- a/src/components/Account/Dashboard.tsx
+++ b/src/components/Account/Dashboard.tsx
@@ -1,7 +1,7 @@
-import { Spinner } from 'flowbite-react';
 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 {
@@ -10,7 +10,11 @@ interface DashboardProps {
   unitPreference: string;
 }
 
-const Dashboard = ({ greeting, emissionsSummaryData, unitPreference }: DashboardProps) => {
+const Dashboard = ({
+  greeting,
+  emissionsSummaryData,
+  unitPreference,
+}: DashboardProps) => {
   const router = useRouter();
 
   const totalEmissions =
@@ -40,19 +44,21 @@ const Dashboard = ({ greeting, emissionsSummaryData, unitPreference }: Dashboard
       <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">{totalEmissions} g</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="flex flex-wrap justify-around content-around gap-5 max-w-6xl min-w-xl mx-auto"> */}
       <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}
diff --git a/src/components/Account/SummaryTile.tsx b/src/components/Account/SummaryTile.tsx
index 1dad483..0dda374 100644
--- a/src/components/Account/SummaryTile.tsx
+++ b/src/components/Account/SummaryTile.tsx
@@ -1,12 +1,14 @@
-import { Button, Card, Progress } from 'flowbite-react';
+import { Button, Card } from 'flowbite-react';
 import { Circle } from 'rc-progress';
 import React from 'react';
 import { FaGasPump } from 'react-icons/fa';
 import { ImPowerCord } from 'react-icons/im';
 import { MdDriveEta, MdFlight } from 'react-icons/md';
+import { formatWeightToUserUnitPreference } from '../../utils/unitConverter';
 
 interface SummaryTileProps {
   type: string;
+  unitPreference: string;
   emissionsValue: number;
   totalEmissions: number;
   handleOnClick: (type: string) => void;
@@ -14,11 +16,18 @@ interface SummaryTileProps {
 
 const SummaryTile = ({
   type,
+  unitPreference,
   emissionsValue,
   totalEmissions,
   handleOnClick,
 }: SummaryTileProps) => {
-  const emissionsPercentage = (emissionsValue / totalEmissions) * 100;
+  const getEmissionsPercentage = (): string => {
+    if (totalEmissions === 0) {
+      return '0';
+    }
+    const emissionsPercentage = (emissionsValue / totalEmissions) * 100;
+    return emissionsPercentage.toFixed(2);
+  };
   return (
     <div className="grid col-span-2 max-w-lg">
       <Card>
@@ -26,16 +35,20 @@ const SummaryTile = ({
           <h4 className="text-2xl font-bold">{type}</h4>
           {getIcon(type)}
           <h3 className="text-xl">Emissions</h3>
-          <h3 className="font-bold">{emissionsValue} g</h3>
-          <p className="text-center">
-            {emissionsPercentage.toFixed(2)}% of all calculations
-          </p>
+          <h3 className="font-bold">
+            {formatWeightToUserUnitPreference(unitPreference, emissionsValue)}
+          </h3>
+          <div className="relative h-24 w-24">
+            <div className="absolute inset-0">
+              <p className="mt-8 text-center">{getEmissionsPercentage()}%</p>
+            </div>
+            <Circle
+              percent={parseFloat(getEmissionsPercentage())}
+              strokeWidth={5}
+              strokeColor={getColor(parseFloat(getEmissionsPercentage()))}
+            />
+          </div>
 
-          <Circle
-            percent={emissionsPercentage}
-            strokeWidth={5}
-            strokeColor={getColor(emissionsPercentage)}
-          />
           <Button onClick={() => handleOnClick(type)}>View All</Button>
         </div>
       </Card>
diff --git a/src/utils/unitConverter.ts b/src/utils/unitConverter.ts
new file mode 100644
index 0000000..68d6720
--- /dev/null
+++ b/src/utils/unitConverter.ts
@@ -0,0 +1,14 @@
+export const formatWeightToUserUnitPreference = (
+  unitPreference: string,
+  value: number
+): string => {
+  switch (unitPreference) {
+    case 'metric':
+      return `${value / 1000.0} kg`;
+    case 'imperial':
+        const lbs = (value / 1000.0) * 2.2
+      return `${lbs.toFixed(2)} lbs`;
+    default:
+      return '';
+  }
+};

From 95336cb142c1a117017de919566ef462841da194 Mon Sep 17 00:00:00 2001
From: ialej001 <ivan.alejandre@gmail.com>
Date: Thu, 8 Sep 2022 13:22:46 -0700
Subject: [PATCH 40/44] Added titles to each summary page

---
 src/pages/account/driving-summary.tsx     | 5 +----
 src/pages/account/electricity-summary.tsx | 1 +
 src/pages/account/flight-summary.tsx      | 1 +
 src/pages/account/fuel-summary.tsx        | 1 +
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/pages/account/driving-summary.tsx b/src/pages/account/driving-summary.tsx
index e6c46a2..7f74295 100644
--- a/src/pages/account/driving-summary.tsx
+++ b/src/pages/account/driving-summary.tsx
@@ -17,6 +17,7 @@ const DrivingSummaryPage: NextPageWithLayout = () => {
   console.log(vehiclesWithTripsData!);
   return (
     <>
+      <p className='text-2xl mb-6 ml-2 md:ml-10'>Your Driving Emissions</p>
       <div className="md:px-10 hidden sm:block">
         <Tabs.Group aria-label="Full width tabs" style="underline">
           {vehiclesWithTripsData.map((entry) => {
@@ -33,10 +34,6 @@ const DrivingSummaryPage: NextPageWithLayout = () => {
               </Tabs.Item>
             );
           })}
-          {/* <Tabs.Item title="Profile">Profile content</Tabs.Item>
-        <Tabs.Item title="Dashboard"></Tabs.Item>
-        <Tabs.Item title="Settings">Settings content</Tabs.Item>
-        <Tabs.Item title="Invoice">Invoice content</Tabs.Item> */}
         </Tabs.Group>
       </div>
       <div className="md:hidden px-2">
diff --git a/src/pages/account/electricity-summary.tsx b/src/pages/account/electricity-summary.tsx
index b8453ac..17ad3c2 100644
--- a/src/pages/account/electricity-summary.tsx
+++ b/src/pages/account/electricity-summary.tsx
@@ -11,6 +11,7 @@ const ElectricitySummaryPage: NextPageWithLayout = () => {
 
   return (
     <div>
+      <p className='text-2xl mb-6 ml-2 md:ml-10'>Your Electricity Emissions</p>
       <ElectricityTable electricityData={electricityData} />
     </div>
   );
diff --git a/src/pages/account/flight-summary.tsx b/src/pages/account/flight-summary.tsx
index 1490e85..05e3c28 100644
--- a/src/pages/account/flight-summary.tsx
+++ b/src/pages/account/flight-summary.tsx
@@ -9,6 +9,7 @@ const FlightSummaryPage: NextPageWithLayout = () => {
 
   return (
     <div>
+      <p className='text-2xl mb-6 ml-2 md:ml-10'>Your Flight Emissions</p>
       <FlightTable flightData={flightData} />
     </div>
   );
diff --git a/src/pages/account/fuel-summary.tsx b/src/pages/account/fuel-summary.tsx
index 732d279..2d02309 100644
--- a/src/pages/account/fuel-summary.tsx
+++ b/src/pages/account/fuel-summary.tsx
@@ -9,6 +9,7 @@ const FuelSummaryPage: NextPageWithLayout = () => {
 
   return (
     <div>
+      <p className='text-2xl mb-6 ml-2 md:ml-10'>Your Fuel Emissions</p>
       <FuelTable fuelData={fuelData} />
     </div>
   );

From a3aa9e191de7709f6539b1ab069167490a89ba27 Mon Sep 17 00:00:00 2001
From: ialej001 <ivan.alejandre@gmail.com>
Date: Thu, 8 Sep 2022 13:38:00 -0700
Subject: [PATCH 41/44] added headers to all pages

---
 src/pages/account/driving-summary.tsx     | 24 ++++++++++++++---------
 src/pages/account/electricity-summary.tsx |  8 +++++++-
 src/pages/account/flight-summary.tsx      |  8 +++++++-
 src/pages/account/fuel-summary.tsx        |  8 +++++++-
 src/pages/account/index.tsx               | 18 ++++++++++++-----
 5 files changed, 49 insertions(+), 17 deletions(-)

diff --git a/src/pages/account/driving-summary.tsx b/src/pages/account/driving-summary.tsx
index 7f74295..55ff0f1 100644
--- a/src/pages/account/driving-summary.tsx
+++ b/src/pages/account/driving-summary.tsx
@@ -1,4 +1,5 @@
 import { Accordion, Spinner, Tabs } from 'flowbite-react';
+import Head from 'next/head';
 import React, { ReactElement } from 'react';
 import VehicleTripTable from '../../components/Account/VehicleTripTable';
 import AccountLayout from '../../layouts/AccountLayout';
@@ -14,10 +15,14 @@ const DrivingSummaryPage: NextPageWithLayout = () => {
     return <Spinner />;
   }
 
-  console.log(vehiclesWithTripsData!);
   return (
     <>
-      <p className='text-2xl mb-6 ml-2 md:ml-10'>Your Driving Emissions</p>
+      <Head>
+        <title>Driving Summary</title>
+        <link rel="icon" href="/favicon.png" />
+      </Head>
+
+      <p className="text-2xl mb-6 ml-2 md:ml-10">Your Driving Emissions</p>
       <div className="md:px-10 hidden sm:block">
         <Tabs.Group aria-label="Full width tabs" style="underline">
           {vehiclesWithTripsData.map((entry) => {
@@ -41,13 +46,14 @@ const DrivingSummaryPage: NextPageWithLayout = () => {
           {vehiclesWithTripsData.map((entry) => {
             return (
               <Accordion.Panel>
-                <Accordion.Title >
-                  <p className='text-gray-900'>{[
-                    entry.vehicle_year,
-                    entry.vehicle_make,
-                    entry.vehicle_model,
-                  ].join(' ')}</p>
-                  
+                <Accordion.Title>
+                  <p className="text-gray-900">
+                    {[
+                      entry.vehicle_year,
+                      entry.vehicle_make,
+                      entry.vehicle_model,
+                    ].join(' ')}
+                  </p>
                 </Accordion.Title>
                 <Accordion.Content>
                   <VehicleTripTable tripData={entry.trips} />
diff --git a/src/pages/account/electricity-summary.tsx b/src/pages/account/electricity-summary.tsx
index 17ad3c2..0a3e013 100644
--- a/src/pages/account/electricity-summary.tsx
+++ b/src/pages/account/electricity-summary.tsx
@@ -1,3 +1,4 @@
+import Head from 'next/head';
 import React, { ReactElement } from 'react';
 import ElectricityTable from '../../components/Account/ElectricityTable';
 import AccountLayout from '../../layouts/AccountLayout';
@@ -11,7 +12,12 @@ const ElectricitySummaryPage: NextPageWithLayout = () => {
 
   return (
     <div>
-      <p className='text-2xl mb-6 ml-2 md:ml-10'>Your Electricity Emissions</p>
+      <Head>
+        <title>Electricity Summary</title>
+        <link rel="icon" href="/favicon.png" />
+      </Head>
+
+      <p className="text-2xl mb-6 ml-2 md:ml-10">Your Electricity Emissions</p>
       <ElectricityTable electricityData={electricityData} />
     </div>
   );
diff --git a/src/pages/account/flight-summary.tsx b/src/pages/account/flight-summary.tsx
index 05e3c28..cf8d715 100644
--- a/src/pages/account/flight-summary.tsx
+++ b/src/pages/account/flight-summary.tsx
@@ -1,3 +1,4 @@
+import Head from 'next/head';
 import React, { ReactElement } from 'react';
 import FlightTable from '../../components/Account/FlightTable';
 import AccountLayout from '../../layouts/AccountLayout';
@@ -9,7 +10,12 @@ const FlightSummaryPage: NextPageWithLayout = () => {
 
   return (
     <div>
-      <p className='text-2xl mb-6 ml-2 md:ml-10'>Your Flight Emissions</p>
+      <Head>
+        <title>Flight Summary</title>
+        <link rel="icon" href="/favicon.png" />
+      </Head>
+
+      <p className="text-2xl mb-6 ml-2 md:ml-10">Your Flight Emissions</p>
       <FlightTable flightData={flightData} />
     </div>
   );
diff --git a/src/pages/account/fuel-summary.tsx b/src/pages/account/fuel-summary.tsx
index 2d02309..fe3e151 100644
--- a/src/pages/account/fuel-summary.tsx
+++ b/src/pages/account/fuel-summary.tsx
@@ -1,3 +1,4 @@
+import Head from 'next/head';
 import React, { ReactElement } from 'react';
 import FuelTable from '../../components/Account/FuelTable';
 import AccountLayout from '../../layouts/AccountLayout';
@@ -9,7 +10,12 @@ const FuelSummaryPage: NextPageWithLayout = () => {
 
   return (
     <div>
-      <p className='text-2xl mb-6 ml-2 md:ml-10'>Your Fuel Emissions</p>
+      <Head>
+        <title>Fuel Summary</title>
+        <link rel="icon" href="/favicon.png" />
+      </Head>
+
+      <p className="text-2xl mb-6 ml-2 md:ml-10">Your Fuel Emissions</p>
       <FuelTable fuelData={fuelData} />
     </div>
   );
diff --git a/src/pages/account/index.tsx b/src/pages/account/index.tsx
index aad3017..36bc853 100644
--- a/src/pages/account/index.tsx
+++ b/src/pages/account/index.tsx
@@ -1,5 +1,6 @@
 import { Spinner } from 'flowbite-react';
 import { useSession } from 'next-auth/react';
+import Head from 'next/head';
 import { useRouter } from 'next/router';
 import { ReactElement, useEffect } from 'react';
 import Dashboard from '../../components/Account/Dashboard';
@@ -31,11 +32,18 @@ const AccountPage: NextPageWithLayout = () => {
   if (isEmissionsLoading || isPreferencesLoading) return <Spinner />;
 
   return (
-    <Dashboard
-      greeting={greetingMessage}
-      emissionsSummaryData={emissionsSummaryData}
-      unitPreference={userPreferences!.unitPref} // DB value defaulted to metric, always present
-    />
+    <>
+      <Head>
+        <title>Dashboard</title>
+        <link rel="icon" href="/favicon.png" />
+      </Head>
+
+      <Dashboard
+        greeting={greetingMessage}
+        emissionsSummaryData={emissionsSummaryData}
+        unitPreference={userPreferences!.unitPref} // DB value defaulted to metric, always present
+      />
+    </>
   );
 };
 

From d186e981397f04b8d1026f7574ea60bd9612b3e9 Mon Sep 17 00:00:00 2001
From: ialej001 <ivan.alejandre@gmail.com>
Date: Thu, 8 Sep 2022 13:44:23 -0700
Subject: [PATCH 42/44] refactored loading spinner

---
 src/components/LoadingSpinner.tsx         | 12 ++++++++++++
 src/pages/account/driving-summary.tsx     |  5 +++--
 src/pages/account/electricity-summary.tsx |  7 ++++++-
 src/pages/account/flight-summary.tsx      |  7 ++++++-
 src/pages/account/fuel-summary.tsx        |  7 ++++++-
 src/pages/account/index.tsx               |  4 ++--
 6 files changed, 35 insertions(+), 7 deletions(-)
 create mode 100644 src/components/LoadingSpinner.tsx

diff --git a/src/components/LoadingSpinner.tsx b/src/components/LoadingSpinner.tsx
new file mode 100644
index 0000000..d3f9d31
--- /dev/null
+++ b/src/components/LoadingSpinner.tsx
@@ -0,0 +1,12 @@
+import { Spinner } from 'flowbite-react';
+import React from 'react';
+
+const LoadingSpinner = () => {
+  return (
+    <div className="flex justify-center items-center py-5 md:py-20">
+      <Spinner size="xl" />
+    </div>
+  );
+};
+
+export default LoadingSpinner;
diff --git a/src/pages/account/driving-summary.tsx b/src/pages/account/driving-summary.tsx
index 55ff0f1..b2b9ee2 100644
--- a/src/pages/account/driving-summary.tsx
+++ b/src/pages/account/driving-summary.tsx
@@ -1,7 +1,8 @@
-import { Accordion, Spinner, Tabs } from 'flowbite-react';
+import { Accordion, Tabs } from 'flowbite-react';
 import Head from 'next/head';
 import React, { ReactElement } from 'react';
 import VehicleTripTable from '../../components/Account/VehicleTripTable';
+import LoadingSpinner from '../../components/LoadingSpinner';
 import AccountLayout from '../../layouts/AccountLayout';
 import { trpc } from '../../utils/trpc';
 import { NextPageWithLayout } from '../_app';
@@ -12,7 +13,7 @@ const DrivingSummaryPage: NextPageWithLayout = () => {
   ]);
 
   if (!vehiclesWithTripsData) {
-    return <Spinner />;
+    return <LoadingSpinner />;
   }
 
   return (
diff --git a/src/pages/account/electricity-summary.tsx b/src/pages/account/electricity-summary.tsx
index 0a3e013..1319fdc 100644
--- a/src/pages/account/electricity-summary.tsx
+++ b/src/pages/account/electricity-summary.tsx
@@ -1,15 +1,20 @@
 import Head from 'next/head';
 import React, { ReactElement } from 'react';
 import ElectricityTable from '../../components/Account/ElectricityTable';
+import LoadingSpinner from '../../components/LoadingSpinner';
 import AccountLayout from '../../layouts/AccountLayout';
 import { trpc } from '../../utils/trpc';
 import { NextPageWithLayout } from '../_app';
 
 const ElectricitySummaryPage: NextPageWithLayout = () => {
-  const { data: electricityData } = trpc.useQuery([
+  const { data: electricityData, isLoading } = trpc.useQuery([
     'dashboard.get-electicity-data',
   ]);
 
+  if (isLoading) {
+    return <LoadingSpinner />;
+  }
+  
   return (
     <div>
       <Head>
diff --git a/src/pages/account/flight-summary.tsx b/src/pages/account/flight-summary.tsx
index cf8d715..4c5391d 100644
--- a/src/pages/account/flight-summary.tsx
+++ b/src/pages/account/flight-summary.tsx
@@ -1,13 +1,18 @@
 import Head from 'next/head';
 import React, { ReactElement } from 'react';
 import FlightTable from '../../components/Account/FlightTable';
+import LoadingSpinner from '../../components/LoadingSpinner';
 import AccountLayout from '../../layouts/AccountLayout';
 import { trpc } from '../../utils/trpc';
 import { NextPageWithLayout } from '../_app';
 
 const FlightSummaryPage: NextPageWithLayout = () => {
-  const { data: flightData } = trpc.useQuery(['dashboard.get-flight-data']);
+  const { data: flightData, isLoading } = trpc.useQuery(['dashboard.get-flight-data']);
 
+  if (isLoading) {
+    return <LoadingSpinner />;
+  }
+  
   return (
     <div>
       <Head>
diff --git a/src/pages/account/fuel-summary.tsx b/src/pages/account/fuel-summary.tsx
index fe3e151..b98f8e7 100644
--- a/src/pages/account/fuel-summary.tsx
+++ b/src/pages/account/fuel-summary.tsx
@@ -1,13 +1,18 @@
 import Head from 'next/head';
 import React, { ReactElement } from 'react';
 import FuelTable from '../../components/Account/FuelTable';
+import LoadingSpinner from '../../components/LoadingSpinner';
 import AccountLayout from '../../layouts/AccountLayout';
 import { trpc } from '../../utils/trpc';
 import { NextPageWithLayout } from '../_app';
 
 const FuelSummaryPage: NextPageWithLayout = () => {
-  const { data: fuelData } = trpc.useQuery(['dashboard.get-fuel-data']);
+  const { data: fuelData, isLoading } = trpc.useQuery(['dashboard.get-fuel-data']);
 
+  if (isLoading) {
+    return <LoadingSpinner />;
+  }
+  
   return (
     <div>
       <Head>
diff --git a/src/pages/account/index.tsx b/src/pages/account/index.tsx
index 36bc853..c99dc73 100644
--- a/src/pages/account/index.tsx
+++ b/src/pages/account/index.tsx
@@ -1,9 +1,9 @@
-import { Spinner } from 'flowbite-react';
 import { useSession } from 'next-auth/react';
 import Head from 'next/head';
 import { useRouter } from 'next/router';
 import { ReactElement, useEffect } from 'react';
 import Dashboard from '../../components/Account/Dashboard';
+import LoadingSpinner from '../../components/LoadingSpinner';
 import AccountLayout from '../../layouts/AccountLayout';
 import { trpc } from '../../utils/trpc';
 import { NextPageWithLayout } from '../_app';
@@ -29,7 +29,7 @@ const AccountPage: NextPageWithLayout = () => {
     return <div>Access denied. Please sign in.</div>;
   }
 
-  if (isEmissionsLoading || isPreferencesLoading) return <Spinner />;
+  if (isEmissionsLoading || isPreferencesLoading) return <LoadingSpinner />;
 
   return (
     <>

From 8a5152c4857265acd922411430295c287b0c5f64 Mon Sep 17 00:00:00 2001
From: ialej001 <ivan.alejandre@gmail.com>
Date: Thu, 8 Sep 2022 13:50:17 -0700
Subject: [PATCH 43/44] added no vehicle message

---
 src/pages/account/driving-summary.tsx | 25 +++++++++++++++++++++++--
 1 file changed, 23 insertions(+), 2 deletions(-)

diff --git a/src/pages/account/driving-summary.tsx b/src/pages/account/driving-summary.tsx
index b2b9ee2..01bf032 100644
--- a/src/pages/account/driving-summary.tsx
+++ b/src/pages/account/driving-summary.tsx
@@ -1,5 +1,6 @@
-import { Accordion, Tabs } from 'flowbite-react';
+import { Accordion, Button, Tabs } from 'flowbite-react';
 import Head from 'next/head';
+import Link from 'next/link';
 import React, { ReactElement } from 'react';
 import VehicleTripTable from '../../components/Account/VehicleTripTable';
 import LoadingSpinner from '../../components/LoadingSpinner';
@@ -8,7 +9,7 @@ import { trpc } from '../../utils/trpc';
 import { NextPageWithLayout } from '../_app';
 
 const DrivingSummaryPage: NextPageWithLayout = () => {
-  const { data: vehiclesWithTripsData } = trpc.useQuery([
+  const { data: vehiclesWithTripsData, isLoading } = trpc.useQuery([
     'dashboard.get-vehicle-trip-data',
   ]);
 
@@ -16,6 +17,26 @@ const DrivingSummaryPage: NextPageWithLayout = () => {
     return <LoadingSpinner />;
   }
 
+  if (vehiclesWithTripsData.length === 0) {
+    return (
+      <>
+        <Head>
+          <title>Driving Summary</title>
+          <link rel="icon" href="/favicon.png" />
+        </Head>
+
+        <p className="text-2xl mb-6 ml-2 md:ml-10">Your Driving Emissions</p>
+        <div className="flex flex-col items-center gap-4 text-center">
+          <strong>You haven't recorded any driving data.</strong>
+          <p>You can make your emissions calculation here:</p>
+          <Button size="sm">
+            <Link href="/travel">Make a new calculation</Link>
+          </Button>
+        </div>
+      </>
+    );
+  }
+
   return (
     <>
       <Head>

From 783437f9f3874cd4a9d93f4b17e08341c17e69b8 Mon Sep 17 00:00:00 2001
From: ialej001 <ivan.alejandre@gmail.com>
Date: Thu, 8 Sep 2022 16:11:08 -0700
Subject: [PATCH 44/44] styling: fixed mobile summary tiles overlap

---
 src/components/Account/SummaryTile.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Account/SummaryTile.tsx b/src/components/Account/SummaryTile.tsx
index 0dda374..96dc6ae 100644
--- a/src/components/Account/SummaryTile.tsx
+++ b/src/components/Account/SummaryTile.tsx
@@ -31,7 +31,7 @@ const SummaryTile = ({
   return (
     <div className="grid col-span-2 max-w-lg">
       <Card>
-        <div className="flex flex-col items-center gap-5 px-20 py-5">
+        <div className="flex flex-col items-center gap-5 px-5 sm:px-10 md:px-15 py-5">
           <h4 className="text-2xl font-bold">{type}</h4>
           {getIcon(type)}
           <h3 className="text-xl">Emissions</h3>