updating version number to 1.4.0

adding skeleton loader to flights page
adding skeleton loader to flights page (#91 )
2025-05-16 12:50:26 -05:00 · 2025-05-16 11:23:20 -05:00 · 2025-05-16 11:16:07 -05:00 · 2025-05-16 10:24:27 -05:00 · 2025-05-16 10:14:28 -05:00 · 2025-05-12 19:18:03 -05:00
22 changed files with 888 additions and 342 deletions
--- a/api/package.json
+++ b/api/package.json
@@ -1,6 +1,6 @@
 {
  "name": "api",
-  "version": "1.2.0",
+  "version": "1.4.0",
  "description": "",
  "author": "",
  "private": true,
--- a/app/.gitignore
+++ b/app/.gitignore
@@ -1,5 +1,4 @@
 # Logs
-logs
 *.log
 npm-debug.log*
 yarn-debug.log*
--- a/app/index.html
+++ b/app/index.html
@@ -2,9 +2,9 @@
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/png" href="/noahspan-logo.png" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
+    <title>Flying</title>
  </head>
  <body>
    <div id="root"></div>
--- a/app/package.json
+++ b/app/package.json
@@ -1,7 +1,7 @@
 {
  "name": "app",
  "private": true,
-  "version": "1.2.0",
+  "version": "1.4.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
@@ -13,12 +13,10 @@
  "dependencies": {
    "@azure/msal-browser": "^4.0.1",
    "@azure/msal-react": "^3.0.1",
-    "@noahspan/noahspan-components": "1.6.0",
+    "@noahspan/noahspan-components": "^1.9.1",
    "axios": "^1.7.2",
    "dotenv": "^16.4.7",
-    "install": "^0.13.0",
    "leaflet": "^1.9.4",
-    "pure-react-carousel": "^1.32.0",
    "react": "19.0.0-rc.1",
    "react-dom": "19.0.0-rc.1",
    "react-hook-form": "^7.51.4",
--- a/app/public/layers-2x.png
+++ b/app/public/layers-2x.png
--- a/app/public/layers.png
+++ b/app/public/layers.png
--- a/app/public/marker-icon-2x.png
+++ b/app/public/marker-icon-2x.png
--- a/app/public/marker-icon.png
+++ b/app/public/marker-icon.png
--- a/app/public/marker-shadow.png
+++ b/app/public/marker-shadow.png
--- a/app/src/App.tsx
+++ b/app/src/App.tsx
@@ -1,6 +1,7 @@
 import { Navigate, Route, Routes } from 'react-router-dom';
-import Pilots from './components/pilots/Pilots';
+import Flights from './components/flights/Flights';
 import Logbook from './components/logbook/Logbook';
+import Pilots from './components/pilots/Pilots';
 import SiteNav from './components/siteNav/SiteNav';
 import { useIsAuthenticated } from '@azure/msal-react';

@@ -19,8 +20,10 @@ const App = () => {
    <>
      <SiteNav />
      <Routes>
+        <Route path='/' element={<Flights />} />
+        <Route path="/logbook" element={<Logbook />} />
        <Route path="/pilots" element={<Pilots />} />
-        <Route path="/" element={<Logbook />} />
+        
      </Routes>
    </>
  );
--- a/app/src/components/flights/Flights.tsx
+++ b/app/src/components/flights/Flights.tsx
@@ -0,0 +1,76 @@
+import { Box, Card, CardContent, Container, Grid, Skeleton, Spinner, Stack, theme, Typography, useMediaQuery } from "@noahspan/noahspan-components";
+import LogbookCard from "../logbookCard/LogbookCard";
+import { useEffect, useState } from "react";
+import { useLogs } from "../../hooks/logs/UseLogs";
+import { ILogbookEntry } from "../logbook/ILogbookEntry";
+
+const Flights = () => {
+  const [flights, setFlights] = useState<ILogbookEntry[]>([]);
+  const { logs, isLoading } = useLogs();
+  const isMedium = useMediaQuery(theme.breakpoints.up('md'));
+
+  useEffect(() => {
+    const flights: ILogbookEntry[] | undefined = logs?.filter((log: ILogbookEntry) => {
+      if (log.tracks && JSON.parse(log.tracks).length > 0) {
+        return log;
+      }
+    })
+
+    if (flights && flights.length > 0) {
+      setFlights(flights)
+    }
+  }, [logs])
+  
+  return (
+    <Container>
+      <Box sx={{ margin: '20px' }}>
+        <Grid container spacing={2}>
+          <Grid size={isMedium ? 11 : 6}>
+            <Typography variant="h4">Flights</Typography>
+          </Grid>
+          {!isLoading &&
+            <Grid size={12}>
+              <LogbookCard logs={flights} mode='flights' />
+            </Grid>
+          }
+          {isLoading && [...Array(6)].map((_element, index) => {
+            return (
+              <Grid display='flex' justifyContent='center' size={12}>
+                <Card
+                  key={index}
+                  sx={{
+                    width: '100%'
+                  }}
+                >
+                  <CardContent>
+                    <Grid container>
+                      <Grid size={12}>
+                        <Skeleton height={60} width={200} />
+                        <Skeleton height={30} width={200} />
+                      </Grid>
+                      <Grid size={12}>
+                        <Skeleton height={300} />
+                      </Grid>
+                      <Grid size={12}>
+                        {[...Array(4)].map((_element, index) => {
+                          return (
+                            <>
+                              <Skeleton height={20} width={300} />
+                              <Skeleton height={40} width={300} />
+                            </>
+                          )
+                        })}
+                      </Grid>
+                    </Grid>
+                  </CardContent>
+                </Card>
+              </Grid>
+            )
+          })}
+        </Grid>
+      </Box>
+    </Container>
+  )
+}
+
+export default Flights;
--- a/app/src/components/logTrackMaps/LogTrackMaps.tsx
+++ b/app/src/components/logTrackMaps/LogTrackMaps.tsx
@@ -4,8 +4,6 @@ import { useHttpClient } from '../../hooks/httpClient/UseHttpClient';
 import { AxiosInstance, AxiosResponse } from 'axios';
 import { useAccessToken } from '../../hooks/accessToken/UseAcessToken';
 import { useIsAuthenticated } from '@azure/msal-react';
-import { Swiper, SwiperSlide } from 'swiper/react';
-import { Pagination } from 'swiper/modules';
 import { MapContainer, TileLayer } from 'react-leaflet';
 import ReactLeafletKml from 'react-leaflet-kml';
 import 'swiper/css';
@@ -35,10 +33,7 @@ const LogTrackMaps = ({ rowKey, trackUrls }: LogTrackMapsProps) => {
          config
        );
        const kml = new DOMParser().parseFromString(response.data, 'text/xml')
-        // const converted = toGeoJSON.kml(dom);
-        
-        // rewind(converted, false);
-        
+         
        convertedTracks.push(kml);
      }

@@ -49,35 +44,20 @@ const LogTrackMaps = ({ rowKey, trackUrls }: LogTrackMapsProps) => {
  }, [trackUrls])

  return (
-    <>
-      <Swiper
-        spaceBetween={30}
-        pagination={{
-          clickable: true,
-        }}
-        modules={[Pagination]}
-        className="mySwiper"
-      >
-        {tracks.length > 0 && tracks.map((track) => {
-          return (
-            <SwiperSlide>
-              <MapContainer 
-                center={[45.14489, -93.21019]} 
-                scrollWheelZoom={false}
-                style={{ height: '500px', width: '100%' }}
-                zoom={8}
-              >
-                <TileLayer
-                  attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
-                  url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
-                />
-                <ReactLeafletKml kml={track} />
-              </MapContainer>
-            </SwiperSlide>
-          )
-        })}
-      </Swiper>
-    </>
+    <MapContainer 
+      center={[45.14489, -93.21019]} 
+      scrollWheelZoom={false}
+      style={{ height: '500px', width: '100%' }}
+      zoom={8}
+    >
+      <TileLayer
+        attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
+        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+      />
+      {tracks.length > 0 && tracks.map((track) => (
+        <ReactLeafletKml kml={track} />
+      ))}
+    </MapContainer>
  );
 }

--- a/app/src/components/logTracks/LogTracks.tsx
+++ b/app/src/components/logTracks/LogTracks.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useReducer } from "react";
-import { Button, Drawer, Grid, Icon, IconButton, IconName, TextField, theme, Typography, useMediaQuery } from "@noahspan/noahspan-components";
+import { Button, Drawer, Grid, Icon, IconButton, IconName, Spinner, TextField, theme, Typography, useMediaQuery } from "@noahspan/noahspan-components";
 import { useHttpClient } from "../../hooks/httpClient/UseHttpClient";
 import { AxiosInstance, AxiosResponse } from "axios";
 import { useAccessToken } from "../../hooks/accessToken/UseAcessToken";
@@ -56,7 +56,7 @@ const LogTracks = ({ isDrawerOpen, mode, onOpenClose, selectedRowKey }: LogTrack
      const uploadResponse: AxiosResponse = await httpClient.post(`api/logs/log/${selectedRowKey}/track`, formData, formDataConfig);
      const uploadUrl = uploadResponse.data.url;
      const log = await getLog();
-      const tracks: string[] = JSON.parse(log.tracks!);
+      const tracks: string[] = log.tracks ? JSON.parse(log.tracks!) : [];

      tracks.push(uploadUrl)
      log.tracks = JSON.stringify(tracks);
@@ -132,13 +132,23 @@ const LogTracks = ({ isDrawerOpen, mode, onOpenClose, selectedRowKey }: LogTrack
          <Typography variant="h4">{`${mode.toString().toLowerCase().charAt(0).toUpperCase() + mode.toString().slice(1).toLowerCase()} Tracks`}</Typography>
        </Grid>
        <Grid display="flex" justifyContent="right" size={1}>
-          <IconButton onClick={onCancel}>
+          <IconButton disabled={state.isLoading ? true : false} onClick={onCancel}>
            <Icon iconName={IconName.XMARK} />
          </IconButton>
        </Grid>
        {mode === FormMode.EDIT &&
          <>
-            {state.tracks.length > 0 && state.tracks.map((track, index) => {
+            {state.isLoading &&
+              <>
+                <Grid display="flex" justifyContent="center" size={12}>
+                  <Spinner />
+                </Grid>
+                <Grid display="flex" justifyContent="center" size={12}>
+                  Loading...
+                </Grid>
+              </>
+            }
+            {!state.isLoading && state.tracks.length > 0 && state.tracks.map((track, index) => {
              const trackSplit = track.split('/')
              const filename = trackSplit[trackSplit.length - 1];

@@ -155,17 +165,18 @@ const LogTracks = ({ isDrawerOpen, mode, onOpenClose, selectedRowKey }: LogTrack
            })}
            <Grid display='flex' gap={2} justifyContent='right' size={12}>
              <Button
+                disabled={state.isLoading ? true : false}
                startIcon={<Icon iconName={IconName.XMARK} />}
                variant="outlined"
                onClick={onCancel}
                size="small"
              >
-                {mode.toString() !== FormMode.VIEW ? 'Cancel' : 'Close'}
+                Close
              </Button>
              {mode.toString() !== FormMode.VIEW && (
                <Button
                  component='label'
-                  loading={state.isLoading}
+                  disabled={state.isLoading ? true : false}
                  startIcon={<Icon iconName={IconName.UPLOAD} />}
                  variant='contained'
                >
--- a/app/src/components/logbook/Logbook.tsx
+++ b/app/src/components/logbook/Logbook.tsx
@@ -53,7 +53,7 @@ const Logbook: React.FC<unknown> = () => {
    accessorKey: 'tracks',
    header: 'Tracks',
    cell: (info: any) => {
-      if (info.row.original.tracks && info.row.original.tracks.length > 0) {
+      if (info.row.original.tracks && JSON.parse(info.row.original.tracks).length > 0) {
        return (
          <IconButton onClick={() => onOpenCloseTracks(FormMode.VIEW, info.row.original.rowKey)}><Icon iconName={IconName.MAP_LOCATION_DOT} /></IconButton>
        )
@@ -261,7 +261,7 @@ const Logbook: React.FC<unknown> = () => {
              <Table columns={state.columns} data={state.entries} />
            )}
            {!isMedium && state.entries.length > 0 &&
-              <LogbookCard logs={state.entries} onDelete={onDeleteEntry} onOpenCloseForm={onOpenCloseEntryForm} />
+              <LogbookCard logs={state.entries} onDelete={onDeleteEntry} mode='logbook' onOpenCloseForm={onOpenCloseEntryForm} />
            }
          </Grid>
        )}
--- a/app/src/components/logbook/columns.tsx
+++ b/app/src/components/logbook/columns.tsx
@@ -1,15 +1,26 @@
 import {
+  CellContext,
  ColumnDef,
-  Icon,
-  IconButton,
-  IconName
+  HeaderContext,
 } from '@noahspan/noahspan-components';
 import { ILogbookEntry } from './ILogbookEntry';

+const columnTotal = (info: HeaderContext<ILogbookEntry, unknown>): number => {
+  const values: number[] = info.table.getFilteredRowModel().rows.map((row: any) => Number(row.getValue(info.column.id))).filter((value: any) => !Number.isNaN(value));
+  let total: number = 0;
+  
+  if (values.length > 0) {
+    total = values.reduce((accumulator, currentValue) => accumulator + currentValue, total)
+  }
+
+  return total;
+} 
+
 const pilotName: ColumnDef<ILogbookEntry> = {
  id: 'pilotName',
  accessorKey: 'pilotName',
-  header: 'Pilot'
+  header: 'Pilot',
+  footer: 'PAGE TOTALS'
 }
 const date: ColumnDef<ILogbookEntry> = {
  id: 'date',
@@ -48,8 +59,9 @@ const durationOfFlight: ColumnDef<ILogbookEntry> = {
    align: 'right',
    headerAlign: 'right'
  },
-  cell: (info: any) =>
-    info.getValue() ? parseFloat(info.getValue()).toFixed(1) : ''
+  cell: (info: CellContext<ILogbookEntry, unknown>) =>
+    info.getValue() ? parseFloat(info.getValue() as string).toFixed(1) : '',
+  footer: (info: HeaderContext<ILogbookEntry, unknown>) => columnTotal(info) > 0 ? columnTotal(info).toFixed(1) : ''
 }
 const notes: ColumnDef<ILogbookEntry> = {
  id: 'notes',
@@ -85,8 +97,9 @@ export const authColumns: ColumnDef<ILogbookEntry>[] = [
      align: 'right',
      headerAlign: 'right'
    },
-    cell: (info: any) =>
-      info.getValue() ? parseFloat(info.getValue()).toFixed(1) : ''
+    cell: (info: CellContext<ILogbookEntry, unknown>) =>
+      info.getValue() ? parseFloat(info.getValue() as string).toFixed(1) : '',
+    footer: (info: HeaderContext<ILogbookEntry, unknown>) => columnTotal(info) > 0 ? columnTotal(info).toFixed(1) : ''
  },
  {
    id: 'landings',
@@ -99,6 +112,7 @@ export const authColumns: ColumnDef<ILogbookEntry>[] = [
        id: 'landingsDay',
        accessorKey: 'landingsDay',
        header: 'Day',
+        footer: (info: HeaderContext<ILogbookEntry, unknown>) => columnTotal(info) > 0 ? columnTotal(info) : '',
        meta: {
          align: 'right',
          headerAlign: 'right'
@@ -108,6 +122,7 @@ export const authColumns: ColumnDef<ILogbookEntry>[] = [
        id: 'landingsNight',
        accessorKey: 'landingsNight',
        header: 'Night',
+        footer: (info: HeaderContext<ILogbookEntry, unknown>) => columnTotal(info) > 0 ? columnTotal(info) : '',
        meta: {
          align: 'right',
          headerAlign: 'right'
@@ -126,28 +141,31 @@ export const authColumns: ColumnDef<ILogbookEntry>[] = [
        id: 'instrumentActual',
        accessorKey: 'instrumentActual',
        header: 'Actual',
+        footer: (info: HeaderContext<ILogbookEntry, unknown>) => columnTotal(info) > 0 ? columnTotal(info).toFixed(1) : '',
        meta: {
          align: 'right',
          headerAlign: 'right'
        },
-        cell: (info: any) =>
-          info.getValue() ? parseFloat(info.getValue()).toFixed(1) : ''
+        cell: (info: CellContext<ILogbookEntry, unknown>) =>
+          info.getValue() ? parseFloat(info.getValue() as string).toFixed(1) : '',
      },
      {
        id: 'instrumentSimulated',
        accessorKey: 'instrumentSimulated',
        header: 'Simulated',
+        footer: (info: HeaderContext<ILogbookEntry, unknown>) => columnTotal(info) > 0 ? columnTotal(info).toFixed(1) : '',
        meta: {
          align: 'right',
          headerAlign: 'right'
        },
-        cell: (info: any) =>
-          info.getValue() ? parseFloat(info.getValue()).toFixed(1) : ''
+        cell: (info: CellContext<ILogbookEntry, unknown>) =>
+          info.getValue() ? parseFloat(info.getValue() as string).toFixed(1) : ''
      },
      {
        id: 'instrumentApproaches',
        accessorKey: 'instrumentApproaches',
        header: 'Approaches',
+        footer: (info: HeaderContext<ILogbookEntry, unknown>) => columnTotal(info) > 0 ? columnTotal(info).toFixed(1) : '',
        meta: {
          align: 'right',
          headerAlign: 'right'
@@ -157,6 +175,7 @@ export const authColumns: ColumnDef<ILogbookEntry>[] = [
        id: 'instrumentHolds',
        accessorKey: 'instrumentHolds',
        header: 'Holds',
+        footer: (info: HeaderContext<ILogbookEntry, unknown>) => columnTotal(info) > 0 ? columnTotal(info).toFixed(1) : '',
        meta: {
          align: 'right',
          headerAlign: 'right'
@@ -166,6 +185,7 @@ export const authColumns: ColumnDef<ILogbookEntry>[] = [
        id: 'instrumentNavTrack',
        accessorKey: 'instrumentNavTrack',
        header: 'Nav/Track',
+        footer: (info: HeaderContext<ILogbookEntry, unknown>) => columnTotal(info) > 0 ? columnTotal(info).toFixed(1) : '',
        meta: {
          align: 'right',
          headerAlign: 'right'
@@ -184,67 +204,73 @@ export const authColumns: ColumnDef<ILogbookEntry>[] = [
        id: 'groundTrainingReceived',
        accessorKey: 'groundTrainingReceived',
        header: 'Ground Training Received',
+        footer: (info: HeaderContext<ILogbookEntry, unknown>) => columnTotal(info) > 0 ? columnTotal(info).toFixed(1) : '',
        meta: {
          align: 'right',
          headerAlign: 'right'
        },
-        cell: (info: any) =>
-          info.getValue() ? parseFloat(info.getValue()).toFixed(1) : ''
+        cell: (info: CellContext<ILogbookEntry, unknown>) =>
+          info.getValue() ? parseFloat(info.getValue() as string).toFixed(1) : ''
      },
      {
        id: 'flightTrainingReceived',
        accessorKey: 'flightTrainingReceived',
        header: 'Flight Training Received',
+        footer: (info: HeaderContext<ILogbookEntry, unknown>) => columnTotal(info) > 0 ? columnTotal(info).toFixed(1) : '',
        meta: {
          align: 'right',
          headerAlign: 'right'
        },
-        cell: (info: any) =>
-          info.getValue() ? parseFloat(info.getValue()).toFixed(1) : ''
+        cell: (info: CellContext<ILogbookEntry, unknown>) =>
+          info.getValue() ? parseFloat(info.getValue() as string).toFixed(1) : ''
      },
      {
        id: 'crossCountry',
        accessorKey: 'crossCountry',
        header: 'Cross Country',
+        footer: (info: HeaderContext<ILogbookEntry, unknown>) => columnTotal(info) > 0 ? columnTotal(info).toFixed(1) : '',
        meta: {
          align: 'right',
          headerAlign: 'right'
        },
-        cell: (info: any) =>
-          info.getValue() ? parseFloat(info.getValue()).toFixed(1) : ''
+        cell: (info: CellContext<ILogbookEntry, unknown>) =>
+          info.getValue() ? parseFloat(info.getValue() as string).toFixed(1) : ''
      },
      {
        id: 'night',
        accessorKey: 'night',
        header: 'Night',
+        footer: (info: HeaderContext<ILogbookEntry, unknown>) => columnTotal(info) > 0 ? columnTotal(info).toFixed(1) : '',
        meta: {
          align: 'right',
          headerAlign: 'right'
        },
-        cell: (info: any) =>
-          info.getValue() ? parseFloat(info.getValue()).toFixed(1) : ''
+        cell: (info: CellContext<ILogbookEntry, unknown>) =>
+          info.getValue() ? parseFloat(info.getValue() as string).toFixed(1) : ''
      },
      {
        id: 'solo',
        accessorKey: 'solo',
        header: 'Solo',
+        footer: (info: HeaderContext<ILogbookEntry, unknown>) => columnTotal(info) > 0 ? columnTotal(info).toFixed(1) : '',
        meta: {
          align: 'right',
          headerAlign: 'right'
        },
-        cell: (info: any) =>
-          info.getValue() ? parseFloat(info.getValue()).toFixed(1) : ''
+        cell: (info: CellContext<ILogbookEntry, unknown>) =>
+          info.getValue() ? parseFloat(info.getValue() as string).toFixed(1) : ''
      },
      {
        id: 'pilotInCommand',
        accessorKey: 'pilotInCommand',
        header: 'Pilot In Command',
+        footer: (info: HeaderContext<ILogbookEntry, unknown>) => columnTotal(info) > 0 ? columnTotal(info).toFixed(1) : '',
        meta: {
          align: 'right',
          headerAlign: 'right'
        },
-        cell: (info: any) =>
-          info.getValue() ? parseFloat(info.getValue()).toFixed(1) : ''
+        cell: (info: CellContext<ILogbookEntry, unknown>) =>
+          info.getValue() ? parseFloat(info.getValue() as string).toFixed(1) : ''
      }
    ]
  },
--- a/app/src/components/logbookCard/LogbookCard.tsx
+++ b/app/src/components/logbookCard/LogbookCard.tsx
@@ -1,18 +1,19 @@
 import { Card, CardContent, CardHeader, Grid, Typography } from "@noahspan/noahspan-components";
 import { LogbookCardProps } from "./LogbookCardProps.interface";
-import { useEffect } from "react";
 import ActionMenu from "../actionMenu/ActionMenu";
+import LogTrackMaps from "../logTrackMaps/LogTrackMaps";


-const LogbookCard = ({ logs, onDelete, onOpenCloseForm }: LogbookCardProps) => {  
+const LogbookCard = ({ logs, mode, onDelete, onOpenCloseForm }: LogbookCardProps) => {  
  return (
    <Grid container spacing={2}>
      {logs.map((log) => {
+        console.log(log)
        return (
          <Grid size={12}>
            <Card key={log.rowKey}>
              <CardHeader
-                action={<ActionMenu id={log.rowKey} onDelete={onDelete} onOpenCloseForm={onOpenCloseForm} />}
+                action={mode === 'logbook' ? <ActionMenu id={log.rowKey} onDelete={onDelete!} onOpenCloseForm={onOpenCloseForm!} /> : null}
                subheader={log.pilotName}
                title={log.date}
                slotProps={{
@@ -26,6 +27,14 @@ const LogbookCard = ({ logs, onDelete, onOpenCloseForm }: LogbookCardProps) => {
              />
              <CardContent>
                <Grid container spacing={1}>
+                  {mode === 'flights' && log.tracks && JSON.parse(log.tracks).length > 0 &&
+                    <Grid size={12}>
+                      <LogTrackMaps 
+                        rowKey={log.rowKey}
+                        trackUrls={JSON.parse(log.tracks)}
+                      />
+                    </Grid>
+                  }
                  <Grid size={12}>
                    <Typography variant="subtitle2">Aircraft Make and Model</Typography>
                  </Grid>
@@ -50,6 +59,24 @@ const LogbookCard = ({ logs, onDelete, onOpenCloseForm }: LogbookCardProps) => {
                  <Grid size={12}>
                    <Typography variant="body1">{log.durationOfFlight}</Typography>
                  </Grid>
+                  {mode === 'logbook' && log.tracks && JSON.parse(log.tracks).length > 0 && 
+                    <>
+                      <Grid size={12}>
+                        <Typography variant="subtitle2">Tracks</Typography>
+                      </Grid>
+                      {JSON.parse(log.tracks).map((track: string) => {
+                        const trackSplit = track.split('/')
+                        const filename = trackSplit[trackSplit.length - 1];
+
+                        return (
+                          <Grid size={12}>
+                            <Typography variant="body1">{filename}</Typography>
+                          </Grid>
+                        )
+                        
+                      })}
+                    </>
+                  }
                  {log.notes &&
                    <>
                      <Grid size={12}>
--- a/app/src/components/logbookCard/LogbookCardProps.interface.ts
+++ b/app/src/components/logbookCard/LogbookCardProps.interface.ts
@@ -3,6 +3,7 @@ import { ILogbookEntry } from "../logbook/ILogbookEntry";

 export interface LogbookCardProps {
  logs: ILogbookEntry[];
-  onDelete: (entryId: string) => void;
-  onOpenCloseForm: (formMode: FormMode, id: string) => void;
+  mode: 'flights' | 'logbook';
+  onDelete?: (entryId: string) => void;
+  onOpenCloseForm?: (formMode: FormMode, id: string) => void;
 }
--- a/app/src/components/siteNav/SiteNav.tsx
+++ b/app/src/components/siteNav/SiteNav.tsx
@@ -32,9 +32,13 @@ const SiteNav = () => {
  const getPages = () => {
    const pages = [
      {
-        name: 'Logbook',
+        name: 'Flights',
        url: '/'
      },
+      {
+        name: 'Logbook',
+        url: '/logbook'
+      },
      {
        name: 'Pilots',
        url: '/pilots'
@@ -79,7 +83,6 @@ const SiteNav = () => {

      return imageUrl;
    } catch (error) {
-      console.log(error);
      throw new Error();
    }
  };
--- a/app/src/hooks/logs/UseLogs.tsx
+++ b/app/src/hooks/logs/UseLogs.tsx
@@ -0,0 +1,46 @@
+import { useEffect, useState } from "react";
+import { useHttpClient } from "../httpClient/UseHttpClient";
+import { useAccessToken } from "../accessToken/UseAcessToken";
+import { useIsAuthenticated } from "@azure/msal-react";
+import { AxiosInstance, AxiosResponse } from "axios";
+import { ILogbookEntry } from "../../components/logbook/ILogbookEntry";
+
+export const useLogs = () => {
+  const [logs, setLogs] = useState<ILogbookEntry[]>();
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const httpClient: AxiosInstance = useHttpClient();
+  const { getAccessToken } = useAccessToken();
+  const isAuthenticated = useIsAuthenticated();
+
+  useEffect(() => {
+    const getLogs = async () => {
+      try {
+        setIsLoading(true);
+
+        const config = isAuthenticated
+          ? { headers: { Authorization: await getAccessToken() } }
+          : {};
+        const response: AxiosResponse = await httpClient.get(
+          `api/logs`,
+          config
+        );
+        const logs: ILogbookEntry[] = response.data;
+
+        logs.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime())
+
+        setLogs(logs)
+      } catch (error) {
+        return error;
+      } finally {
+        setIsLoading(false);
+      }
+    }
+
+    getLogs();
+  }, [])
+
+  return {
+    logs,
+    isLoading
+  }
+}
--- a/app/src/index.css
+++ b/app/src/index.css
@@ -1,3 +1,4 @@
 body {
  background-color: #f2f2f2;
+  margin: 8px;
 }
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@noahspan/flying",
-  "version": "1.2.0",
+  "version": "1.4.0",
  "scripts": {
    "start": "concurrently 'npm run start:azure -w api' 'wait-on tcp:0.0.0.0:7071 && npm run dev -w app'",
    "format": "prettier --write \"**/src/**/*.ts\" \"**/test/**/*.ts\"",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
Author	SHA1	Message	Date
Noah Spannbauer	fc5811c3b6	updating version number to 1.4.0	2025-05-16 12:50:26 -05:00
Noah Spannbauer	9833bc6593	adding skeleton loader to flights page	2025-05-16 11:23:20 -05:00
noahspannbauer	8d1842efa7	adding skeleton loader to flights page (#91 )	2025-05-16 11:16:07 -05:00
noahspannbauer	294766b8da	add totals to logbook table (#90 ) * adding logbook page totals * adding logbook page totals * adding logbook page totals * adding logbook page totals	2025-05-16 10:24:27 -05:00
noahspannbauer	c5f9dcce73	adding logbook page totals (#89 ) * adding logbook page totals * adding logbook page totals * adding logbook page totals	2025-05-16 10:14:28 -05:00
noahspannbauer	a185abf6d8	display multiple kml files on same leaflet map component (#88 ) * display multiple kml files on same leaflet map component * display multiple kml files on same leaflet map component	2025-05-12 19:18:03 -05:00
Noah Spannbauer	9f13cc20a5	Upating version number to 1.3.1	2025-05-06 13:06:57 -05:00
noahspannbauer	3ab9024152	fixing track parsing error for new log entries (#85 )	2025-05-06 12:58:00 -05:00
noahspannbauer	f15008a8db	Feature/73 add flights page (#78 ) * adding flights page * adding flights page * adding flights page * adding flights page * removing unused dependencies * adding flights page	2025-03-23 11:48:41 -05:00
noahspannbauer	514f970233	Feature/73 add flights page (#77 ) * adding flights page * adding flights page * adding flights page * adding flights page * removing unused dependencies	2025-03-23 11:30:32 -05:00
noahspannbauer	db94838249	Feature/73 add flights page (#76 ) * adding flights page * adding flights page * adding flights page * adding flights page	2025-03-23 11:24:31 -05:00
noahspannbauer	f76244d00c	Feature/73 add flights page (#75 ) * adding flights page * adding flights page * adding flights page	2025-03-23 11:09:25 -05:00
noahspannbauer	98f50641c8	adding flights page (#74 ) * adding flights page * adding flights page	2025-03-23 10:29:38 -05:00
noahspannbauer	0f1e303c27	Feature/71 add leaflet to view tracks drawer (#72 ) * adding leaflet * adding tracks swiper * adding tracks swiper * adding tracks swiper * adding tracks swiper * adding tracks swiper * adding tracks swiper	2025-03-22 23:42:08 -05:00