Merge branch 'main' into app-97-addPassenger

.prettierignore

@@ -1 +1,2 @@
-.github/
+.github/
+src/components/Button/

src/api/queries.ts

@@ -1,4 +1,5 @@
 import axios from "axios";
+import type { DashboardData } from "../pages/DashboardPage/DashboardPage.definitions";
 import type { PassengerData } from "../interfaces/passenger.interface";
 
 export const getPassengers = async (
@@ -123,3 +124,14 @@ export const updatePassenger = (
       },
     })
     .then((res) => res.data);
+
+export const getDashboardData = (
+  token?: string | null,
+): Promise<DashboardData> =>
+  axios
+    .get(`${process.env.VITE_HOST}/dashboard`, {
+      headers: {
+        Authorization: `Bearer ${token}`,
+      },
+    })
+    .then((res) => res.data);

src/components/Button/Button.tsx

@@ -18,12 +18,13 @@ const Button = ({
   textStyles = {},
 }: ButtonProps) => {
   const buttonClassName = `${styles.button} ${styles[variant]} ${styles[color]}`;
+
   const loaderSize =
     variant === ButtonVariant.Compact
       ? 15
       : variant === ButtonVariant.Regular
-      ? 20
-      : 25;
+        ? 20
+        : 25;
 
   return (
     <button

src/pages/DashboardPage/DashboardPage.definitions.ts

@@ -0,0 +1,5 @@
+export interface DashboardData {
+  "All Total Flights": number;
+  "Flights This Week": number;
+  "Flights Today": number;
+}

src/pages/DashboardPage/DashboardPage.module.css

@@ -0,0 +1,34 @@
+.welcomeMessage {
+  display: flex;
+  gap: 1rem;
+}
+/* make purple border around flightsToday */
+.cardStyle {
+  flex-basis: 33.3333%;
+  display: flex;
+  justify-content: flex-end;
+  align-items: flex-start;
+  height: 100px;
+  background: transparent;
+  border-radius: 5px;
+  border: 1px solid #e1dede;
+  padding: 1rem;
+  font-size: 1rem;
+  font-weight: 600;
+  height: 8rem;
+  flex-direction: column;
+  color: #888787;
+  background: rgb(250, 251, 252);
+  background: linear-gradient(
+    90deg,
+    rgba(250, 251, 252, 1) 33%,
+    rgb(237, 242, 249) 100%
+  );
+}
+
+.flightNumber {
+  font-size: 4rem;
+  font-family: Arial, Helvetica, sans-serif;
+  padding: 1rem 0;
+  color: var(--miracle-color-blue);
+}

src/pages/DashboardPage/DashboardPage.tsx

@@ -1,20 +1,54 @@
-import { useUserContext } from "../../context/User.context";
+import styles from "./DashboardPage.module.css";
 import { useNavigationContext } from "../../context/Navigation.context";
 import { Tabs } from "../../layout/SideBar/SideBar.definitions";
+import { getDashboardData } from "../../api/queries";
 import { useEffect } from "react";
+import { useQuery } from "@tanstack/react-query";
+import { useAuth } from "@clerk/clerk-react";
+import type { DashboardData } from "./DashboardPage.definitions";
 
 const DashboardPage = () => {
-  const { currentUser } = useUserContext();
   const { setCurrentTab } = useNavigationContext();
+  const { getToken } = useAuth();
+
+  const { data: dashboardData, isLoading: dashboardLoading } =
+    useQuery<DashboardData>({
+      queryKey: ["dashboard"],
+      queryFn: async () => getDashboardData(await getToken()),
+      enabled: true,
+    });
 
   useEffect(() => {
     setCurrentTab(Tabs.DASHBOARD);
   }, []);
 
+  if (dashboardLoading) {
+    return <div>Loading...</div>;
+  }
+
   return (
     <>
-      <h3>Current user</h3>
-      <p>{JSON.stringify(currentUser)}</p>
+      <div className={styles.welcomeMessage}>
+        <div className={styles.cardStyle}>
+          <div className={styles.flightNumber}>
+            {dashboardData?.["Flights Today"]}
+          </div>
+          <div className={styles.flightsToday}>FLIGHTS TODAY</div>
+        </div>
+        <div className={styles.cardStyle}>
+          <div className={styles.flightNumber}>
+            {(Number(dashboardData?.["Flights This Week"]) || 0) +
+              (Number(dashboardData?.["Flights Today"]) || 0)}
+          </div>
+          <div className={styles.flightsWeek}>FLIGHTS THIS WEEK </div>
+        </div>
+        <div className={styles.cardStyle}>
+          <div className={styles.flightNumber}>
+            {dashboardData?.["All Total Flights"]}
+          </div>
+          <div className={styles.flightsEver}>FLIGHTS EVER</div>
+        </div>
+      </div>
     </>
   );
 };