logbook page unauthenticated alert

* fixing all logs showing when user is unauthenticated

* updating api log interceptor

* updating api log interceptor

api/package.json

@@ -1,6 +1,6 @@
 {
   "name": "api",
-  "version": "2.0.2",
+  "version": "2.1.3",
   "description": "",
   "author": "",
   "private": true,

api/src/interfaces/customJwtPayload.interface.ts

@@ -1,5 +0,0 @@
-import { JwtPayload } from "jwt-decode";
-
-export interface CustomJwtPayload extends JwtPayload {
-  permissions: string[];
-}

api/src/log/log.controller.spec.ts

@@ -13,7 +13,8 @@ describe('LogController', () => {
     create: jest.fn(),
     delete: jest.fn(),
     find: jest.fn(),
-    findAll: jest.fn(),
+    findLogsWithCount: jest.fn(),
+    findLogsWithTracks: jest.fn(),
     update: jest.fn()
   }
 
@@ -38,18 +39,41 @@ describe('LogController', () => {
   })
 
   it('find => should find a log by id', async () => {
-    const id: string = '95834f84-0a02-44d3-884e-a20237adeca0';
     const log = {
-
+      id: '95834f84-0a02-44d3-884e-a20237adeca0',
+      pilotId: '7c4bae6b-9ec4-469e-8e16-fcbf0b940936',
+      date: new Date('2026-02-21'),
+      aircraftMakeModel: 'Cessna 172M',
+      aircraftIdentity: 'N12345',
+      routeFrom: 'KMSP',
+      routeTo: 'KMSP',
+      durationOfFlight: 1,
+      singleEngineLand: 1,
+      simulatorAtd: null,
+      landingsDay: 1,
+      landingsNight: null,
+      groundTrainingReceived: null,
+      flightTrainingReceived: null,
+      crossCountry: 1,
+      night: null,
+      solo: 1,
+      pilotInCommand: 1,
+      instrumentActual: null,
+      instrumentSimulated: null,
+      instrumentApproaches: null,
+      instrumentHolds: null,
+      instrumentNavTrack: null,
+      notes: 'This is a test',
+      tracks: []
     } as LogEntity
 
     jest.spyOn(mockLogService, 'find').mockReturnValue(log);
 
-    const result = await controller.find(id);
+    const result = await controller.find(log.id);
 
     expect(result).toEqual(log);
     expect(mockLogService.find).toHaveBeenCalled();
-    expect(mockLogService.find).toHaveBeenCalledWith(id);
+    expect(mockLogService.find).toHaveBeenCalledWith(log.id);
   })
 
   it('find => should fail to find a log by id', async () => {
@@ -69,42 +93,201 @@ describe('LogController', () => {
     }
   })
 
-  it('findAll => should find all logs', async () => {
+  it('findLogsWithCount => should find logs with count', async () => {
-    const id: string = '95834f84-0a02-44d3-884e-a20237adeca0';
     const log = {
-
+      id: '95834f84-0a02-44d3-884e-a20237adeca0',
+      pilotId: '7c4bae6b-9ec4-469e-8e16-fcbf0b940936',
+      date: new Date('2026-02-21'),
+      aircraftMakeModel: 'Cessna 172M',
+      aircraftIdentity: 'N12345',
+      routeFrom: 'KMSP',
+      routeTo: 'KMSP',
+      durationOfFlight: 1,
+      singleEngineLand: 1,
+      simulatorAtd: null,
+      landingsDay: 1,
+      landingsNight: null,
+      groundTrainingReceived: null,
+      flightTrainingReceived: null,
+      crossCountry: 1,
+      night: null,
+      solo: 1,
+      pilotInCommand: 1,
+      instrumentActual: null,
+      instrumentSimulated: null,
+      instrumentApproaches: null,
+      instrumentHolds: null,
+      instrumentNavTrack: null,
+      notes: 'This is a test',
+      tracks: [
+        {
+          "id": "4645ce0c-6fd7-432c-8089-777a7139cf7e",
+          "url": "http://127.0.0.1:10000/devstoreaccount1/tracks/0e7a641a-0264-47f0-88bf-7c296c842d8b/FlightAware_N70392_KANE_KONA_20250628.kml",
+          "order": 1
+        },
+        {
+          "id": "5ce26898-a18b-46f4-b989-3fb7acdace08",
+          "url": "http://127.0.0.1:10000/devstoreaccount1/tracks/0e7a641a-0264-47f0-88bf-7c296c842d8b/FlightAware_N70392_KONA_KANE_20250628.kml",
+          "order": 2
+        }
+      ]
     } as LogEntity;
     const logs = [log]
+    const count = 1
+    const morePages = false
 
-    jest.spyOn(mockLogService, 'findAll').mockReturnValue(logs);
+    jest.spyOn(mockLogService, 'findLogsWithCount').mockReturnValue({
+      entities: logs, 
+      total: count, 
+      hasNextPage: morePages
+    });
 
-    const result = await controller.findAll();
+    const {entities, total, hasNextPage} = await controller.findLogsWithCount();
 
-    expect(result).toEqual(logs);
+    expect(entities).toEqual(logs);
-    expect(mockLogService.findAll).toHaveBeenCalled();
+    expect(total).toEqual(count);
+    expect(hasNextPage).toEqual(morePages)
+    expect(mockLogService.findLogsWithCount).toHaveBeenCalled();
   })
 
-  it('findAll => should fail to find all logs', async () => {
+  it('findLogsWithCount => should fail to find logs with count', async () => {
-    jest.spyOn(mockLogService, 'findAll').mockRejectedValue(new Error('Logs not found'))
+    jest.spyOn(mockLogService, 'findLogsWithCount').mockRejectedValue(new Error('Logs not found'))
 
     try {
-      await controller.findAll();
+      await controller.findLogsWithCount();
 
-      fail('findAll did not throw error');
+      fail('findLogsWithCount did not throw error');
     } catch (error) {
       expect(error).toBeInstanceOf(Error);
-      expect(mockLogService.findAll).toHaveBeenCalled();
+      expect(mockLogService.findLogsWithCount).toHaveBeenCalled();
-      expect(mockLogService.findAll).rejects.toThrow('Logs not found')
+      expect(mockLogService.findLogsWithCount).rejects.toThrow('Logs not found')
+    }
+  })
+
+  it('findLogsWithTracks => should find logs with tracks', async () => {
+    const log = {
+      id: '95834f84-0a02-44d3-884e-a20237adeca0',
+      pilotId: '7c4bae6b-9ec4-469e-8e16-fcbf0b940936',
+      date: new Date('2026-02-21'),
+      aircraftMakeModel: 'Cessna 172M',
+      aircraftIdentity: 'N12345',
+      routeFrom: 'KMSP',
+      routeTo: 'KMSP',
+      durationOfFlight: 1,
+      singleEngineLand: 1,
+      simulatorAtd: null,
+      landingsDay: 1,
+      landingsNight: null,
+      groundTrainingReceived: null,
+      flightTrainingReceived: null,
+      crossCountry: 1,
+      night: null,
+      solo: 1,
+      pilotInCommand: 1,
+      instrumentActual: null,
+      instrumentSimulated: null,
+      instrumentApproaches: null,
+      instrumentHolds: null,
+      instrumentNavTrack: null,
+      notes: 'This is a test',
+      tracks: [
+        {
+            "id": "4645ce0c-6fd7-432c-8089-777a7139cf7e",
+            "url": "http://127.0.0.1:10000/devstoreaccount1/tracks/0e7a641a-0264-47f0-88bf-7c296c842d8b/FlightAware_N70392_KANE_KONA_20250628.kml",
+            "order": 1
+        },
+        {
+            "id": "5ce26898-a18b-46f4-b989-3fb7acdace08",
+            "url": "http://127.0.0.1:10000/devstoreaccount1/tracks/0e7a641a-0264-47f0-88bf-7c296c842d8b/FlightAware_N70392_KONA_KANE_20250628.kml",
+            "order": 2
+        }
+      ]
+    } as LogEntity;
+    const logs = [log]
+    const count = 1
+    const morePages = false
+
+    jest.spyOn(mockLogService, 'findLogsWithTracks').mockReturnValue({
+      entities: logs, 
+      total: count, 
+      hasNextPage: morePages
+  });
+
+    const {entities, total, hasNextPage} = await controller.findLogsWithTracks();
+
+    expect(entities).toEqual(logs);
+    expect(total).toEqual(count);
+    expect(hasNextPage).toEqual(morePages)
+    expect(mockLogService.findLogsWithTracks).toHaveBeenCalled();
+  })
+
+  it('findLogsWithCount => should fail to find logs with tracks', async () => {
+    jest.spyOn(mockLogService, 'findLogsWithTracks').mockRejectedValue(new Error('Logs not found'))
+
+    try {
+      await controller.findLogsWithTracks();
+
+      fail('findLogsWithTracks did not throw error');
+    } catch (error) {
+      expect(error).toBeInstanceOf(Error);
+      expect(mockLogService.findLogsWithTracks).toHaveBeenCalled();
+      expect(mockLogService.findLogsWithTracks).rejects.toThrow('Logs not found')
     }
   })
 
   it('create => should create a new log', async () => {
     const logDto = {
-
+      pilotId: '7c4bae6b-9ec4-469e-8e16-fcbf0b940936',
+      date: new Date('2026-02-21'),
+      aircraftMakeModel: 'Cessna 172M',
+      aircraftIdentity: 'N12345',
+      routeFrom: 'KMSP',
+      routeTo: 'KMSP',
+      durationOfFlight: 1,
+      singleEngineLand: 1,
+      simulatorAtd: null,
+      landingsDay: 1,
+      landingsNight: null,
+      groundTrainingReceived: null,
+      flightTrainingReceived: null,
+      crossCountry: 1,
+      night: null,
+      solo: 1,
+      pilotInCommand: 1,
+      instrumentActual: null,
+      instrumentSimulated: null,
+      instrumentApproaches: null,
+      instrumentHolds: null,
+      instrumentNavTrack: null,
+      notes: 'This is a test'
     } as LogDto;
 
     const log = {
-
+      id: '95834f84-0a02-44d3-884e-a20237adeca0',
+      pilotId: '7c4bae6b-9ec4-469e-8e16-fcbf0b940936',
+      date: new Date('2026-02-21'),
+      aircraftMakeModel: 'Cessna 172M',
+      aircraftIdentity: 'N12345',
+      routeFrom: 'KMSP',
+      routeTo: 'KMSP',
+      durationOfFlight: 1,
+      singleEngineLand: 1,
+      simulatorAtd: null,
+      landingsDay: 1,
+      landingsNight: null,
+      groundTrainingReceived: null,
+      flightTrainingReceived: null,
+      crossCountry: 1,
+      night: null,
+      solo: 1,
+      pilotInCommand: 1,
+      instrumentActual: null,
+      instrumentSimulated: null,
+      instrumentApproaches: null,
+      instrumentHolds: null,
+      instrumentNavTrack: null,
+      notes: 'This is a test',
+      tracks: []
     } as LogEntity;
 
     jest.spyOn(mockLogService, 'create').mockReturnValue(log);
@@ -116,9 +299,31 @@ describe('LogController', () => {
     expect(result).toEqual(log);
   })
 
-  it('create => should failt to create a new log', async () => {
+  it('create => should fail to create a new log', async () => {
     const logDto = {
-
+      pilotId: '7c4bae6b-9ec4-469e-8e16-fcbf0b940936',
+      date: new Date('2026-02-21'),
+      aircraftMakeModel: 'Cessna 172M',
+      aircraftIdentity: 'N12345',
+      routeFrom: 'KMSP',
+      routeTo: 'KMSP',
+      durationOfFlight: 1,
+      singleEngineLand: 1,
+      simulatorAtd: null,
+      landingsDay: 1,
+      landingsNight: null,
+      groundTrainingReceived: null,
+      flightTrainingReceived: null,
+      crossCountry: 1,
+      night: null,
+      solo: 1,
+      pilotInCommand: 1,
+      instrumentActual: null,
+      instrumentSimulated: null,
+      instrumentApproaches: null,
+      instrumentHolds: null,
+      instrumentNavTrack: null,
+      notes: 'This is a test'
     } as LogDto;
 
     jest.spyOn(mockLogService, 'create').mockRejectedValue(new Error('Log failed to create'))
@@ -138,7 +343,29 @@ describe('LogController', () => {
   it('update => should update an existing log', async () => {
     const id: string = '95834f84-0a02-44d3-884e-a20237adeca0';
     const logDto = {
-
+      pilotId: '7c4bae6b-9ec4-469e-8e16-fcbf0b940936',
+      date: new Date('2026-02-21'),
+      aircraftMakeModel: 'Cessna 172M',
+      aircraftIdentity: 'N12345',
+      routeFrom: 'KMSP',
+      routeTo: 'KMSP',
+      durationOfFlight: 1,
+      singleEngineLand: 1,
+      simulatorAtd: null,
+      landingsDay: 1,
+      landingsNight: null,
+      groundTrainingReceived: null,
+      flightTrainingReceived: null,
+      crossCountry: 1,
+      night: null,
+      solo: 1,
+      pilotInCommand: 1,
+      instrumentActual: null,
+      instrumentSimulated: null,
+      instrumentApproaches: null,
+      instrumentHolds: null,
+      instrumentNavTrack: null,
+      notes: 'This is a test'
     } as LogDto
 
     jest.spyOn(mockLogService, 'update').mockReturnValue(logDto);
@@ -153,7 +380,29 @@ describe('LogController', () => {
   it('update => should fail to update an exising log', async () => {
     const id: string = '95834f84-0a02-44d3-884e-a20237adeca0';
     const logDto = {
-
+      pilotId: '7c4bae6b-9ec4-469e-8e16-fcbf0b940936',
+      date: new Date('2026-02-21'),
+      aircraftMakeModel: 'Cessna 172M',
+      aircraftIdentity: 'N12345',
+      routeFrom: 'KMSP',
+      routeTo: 'KMSP',
+      durationOfFlight: 1,
+      singleEngineLand: 1,
+      simulatorAtd: null,
+      landingsDay: 1,
+      landingsNight: null,
+      groundTrainingReceived: null,
+      flightTrainingReceived: null,
+      crossCountry: 1,
+      night: null,
+      solo: 1,
+      pilotInCommand: 1,
+      instrumentActual: null,
+      instrumentSimulated: null,
+      instrumentApproaches: null,
+      instrumentHolds: null,
+      instrumentNavTrack: null,
+      notes: 'This is a test'
     } as LogDto;
 
     jest.spyOn(mockLogService, 'update').mockRejectedValue(new Error('Log failed to update'))

api/src/log/log.controller.ts

@@ -7,6 +7,7 @@ import {
   Param,
   Post,
   Put,
+  Query,
   UseGuards,
   UseInterceptors
 } from '@nestjs/common';
@@ -19,6 +20,7 @@ import { LogInterceptor } from './log.interceptor';
 import { FileService } from '../file/file.service';
 import { DeleteResult, InsertResult, UpdateResult } from 'typeorm';
 import { Reflector } from '@nestjs/core';
+import { Logs } from './logs.interface';
 
 const reflector = new Reflector();
 
@@ -30,6 +32,29 @@ export class LogController {
     private readonly logService: LogService
   ) {}
 
+  @Get()
+  @Public()
+  async findLogsWithCount(@Query('skip') skip?, @Query('take') take?: number,): Promise<Logs> {
+    try {
+      return await this.logService.findLogsWithCount(skip, take)
+    } catch (error) {
+      const customError = error as CustomError;
+
+      throw new HttpException(customError.message, customError.statusCode)
+    }
+  }
+
+  @Get('flights')
+  @Public()
+  async findLogsWithTracks(@Query('skip') skip?, @Query('take') take?: number,): Promise<Logs> {
+    try {
+      return await this.logService.findLogsWithTracks(skip, take)
+    } catch (error) {
+      const customError = error as CustomError;
+
+      throw new HttpException(customError.message, customError.statusCode);
+    }
+  }
 
   @Get(':id')
   @Public()
@@ -45,19 +70,6 @@ export class LogController {
     }
   }
   
-  @Get()
-  @Public()
-  async findAll(): Promise<LogEntity[]> {
-    try {
-      return await this.logService.findAll();
-    } catch (error) {
-      const customError = error as CustomError;
-
-      throw new HttpException(customError.message, customError.statusCode);
-    }
-  }
-
-  
   @Post()
   @UseGuards(AuthGuard)
   async create(@Body() logDto: LogDto) {

api/src/log/log.interceptor.ts

@@ -15,10 +15,9 @@ export class LogInterceptor implements NestInterceptor {
     ]);
 
     return handler.handle().pipe(
-      map((data: LogEntity[]) => {
+      map((data: any) => {
         const req = context.switchToHttp().getRequest();
-        const limitData = (data) => {
+        const limitData = (log: LogEntity) => {
-          return data.map((log: LogEntity) => {
           return {
             id: log.id,
             pilot: {
@@ -31,7 +30,6 @@ export class LogInterceptor implements NestInterceptor {
             durationOfFlight: log.durationOfFlight,
             tracks: log.tracks,
           };
-          });
         }
 
         if (req.headers.authorization) {
@@ -41,17 +39,38 @@ export class LogInterceptor implements NestInterceptor {
           const rolesKeyName = Object.keys(jwtPayload).find((key) => key.includes('roles'));
 
           if (jwtPayload[rolesKeyName].includes('Flying.Read')) {
-            const logs = limitData(data);
+            if (data.entities) {
+              const logs = data.entities.map((entity) => limitData(data.entities));
+
+              return {
+                entities: logs,
+                total: data.total,
+                hasNextPage: data.hasNextPage
+              };
+            } else {
+              const log = limitData(data);
+
+              return log;
+            }
             
-            return logs;
           } else {
             return data;
           }
         } else if (!req.headers.authorization && isPublic) {
-          const publicData = limitData(data)
+          if (data.entities) {
+            const publicData = data.entities.map((entity) => limitData(entity))
             const logs = publicData.slice(0, 5)
 
-          return logs;
+            return {
+              entities: logs,
+              total: logs.length,
+              hasNextPage: false
+            };
+          } else {
+            const publicData = limitData(data);
+
+            return publicData
+          }
         }
       })
     );

api/src/log/log.service.spec.ts

@@ -15,9 +15,19 @@ describe('LogService', () => {
     deleteFolder: jest.fn()
   }
 
+  const mockQueryBuilder = {
+    createQueryBuilder: jest.fn().mockReturnThis(),
+    innerJoinAndSelect: jest.fn().mockReturnThis(),
+    orderBy: jest.fn().mockReturnThis(),
+    skip: jest.fn().mockReturnThis(),
+    take: jest.fn().mockReturnThis(),
+    getManyAndCount: jest.fn()
+  }
+
   const mockLogRepository = {
+    createQueryBuilder: jest.fn().mockReturnValue(mockQueryBuilder),
     delete: jest.fn(),
-    find: jest.fn(),
+    findAndCount: jest.fn(),
     findOne: jest.fn(),
     findOneBy: jest.fn(),
     save: jest.fn(),
@@ -59,7 +69,7 @@ describe('LogService', () => {
     expect(service).toBeDefined();
   })
 
-  it('create => shoule create a log entry', async () => {
+  it('create => should create a log entry', async () => {
     const logDto = {
       pilotId: '7c4bae6b-9ec4-469e-8e16-fcbf0b940936',
       date: new Date('2026-02-21'),
@@ -181,7 +191,7 @@ describe('LogService', () => {
     })
   })
 
-  it('findAll => should find all log entries', async () => {
+  it('findLogsWithCount => should find log entries with count', async () => {
     const log = {
       id: 'd685f1ca-28e0-40b9-8713-74467db12965',
       pilotId: '7c4bae6b-9ec4-469e-8e16-fcbf0b940936',
@@ -207,16 +217,84 @@ describe('LogService', () => {
       instrumentHolds: null,
       instrumentNavTrack: null,
       notes: 'This is a test',
-      tracks: []
+      tracks: [
+        {
+            "id": "4645ce0c-6fd7-432c-8089-777a7139cf7e",
+            "url": "http://127.0.0.1:10000/devstoreaccount1/tracks/0e7a641a-0264-47f0-88bf-7c296c842d8b/FlightAware_N70392_KANE_KONA_20250628.kml",
+            "order": 1
+        },
+        {
+            "id": "5ce26898-a18b-46f4-b989-3fb7acdace08",
+            "url": "http://127.0.0.1:10000/devstoreaccount1/tracks/0e7a641a-0264-47f0-88bf-7c296c842d8b/FlightAware_N70392_KONA_KANE_20250628.kml",
+            "order": 2
+        }
+      ]
     } as LogEntity;
-    const logs = [log]
+    const logs = [log];
+    const count = 1
+    const morePages = false
     
-    jest.spyOn(mockLogRepository, 'find').mockReturnValue(logs);
+    jest.spyOn(mockQueryBuilder, 'getManyAndCount').mockReturnValue([logs, count, morePages]);
 
-    const result = await service.findAll();
+    const {entities, total, hasNextPage} = await service.findLogsWithCount();
 
-    expect(result).toEqual(logs);
+    expect(entities).toEqual(logs);
-    expect(mockLogRepository.find).toHaveBeenCalled();
+    expect(count).toEqual(total);
+    expect(hasNextPage).toEqual(morePages);
+    expect(mockQueryBuilder.getManyAndCount).toHaveBeenCalled();
+  })
+
+    it('findLogsWithTracks => should find log entries with tracks', async () => {
+    const log = {
+      id: 'd685f1ca-28e0-40b9-8713-74467db12965',
+      pilotId: '7c4bae6b-9ec4-469e-8e16-fcbf0b940936',
+      date: new Date('2026-02-21'),
+      aircraftMakeModel: 'Cessna 172M',
+      aircraftIdentity: 'N12345',
+      routeFrom: 'KMSP',
+      routeTo: 'KMSP',
+      durationOfFlight: 1,
+      singleEngineLand: 1,
+      simulatorAtd: null,
+      landingsDay: 1,
+      landingsNight: null,
+      groundTrainingReceived: null,
+      flightTrainingReceived: null,
+      crossCountry: 1,
+      night: null,
+      solo: 1,
+      pilotInCommand: 1,
+      instrumentActual: null,
+      instrumentSimulated: null,
+      instrumentApproaches: null,
+      instrumentHolds: null,
+      instrumentNavTrack: null,
+      notes: 'This is a test',
+      tracks: [
+        {
+            "id": "4645ce0c-6fd7-432c-8089-777a7139cf7e",
+            "url": "http://127.0.0.1:10000/devstoreaccount1/tracks/0e7a641a-0264-47f0-88bf-7c296c842d8b/FlightAware_N70392_KANE_KONA_20250628.kml",
+            "order": 1
+        },
+        {
+            "id": "5ce26898-a18b-46f4-b989-3fb7acdace08",
+            "url": "http://127.0.0.1:10000/devstoreaccount1/tracks/0e7a641a-0264-47f0-88bf-7c296c842d8b/FlightAware_N70392_KONA_KANE_20250628.kml",
+            "order": 2
+        }
+      ]
+    } as LogEntity;
+    const logs = [log];
+    const count = 1
+    const morePages = false
+    
+    jest.spyOn(mockQueryBuilder, 'getManyAndCount').mockResolvedValue([logs, count, morePages])
+
+    const {entities, total, hasNextPage} = await service.findLogsWithTracks();
+
+    expect(entities).toEqual(logs);
+    expect(count).toEqual(total);
+    expect(hasNextPage).toEqual(morePages);
+    expect(mockQueryBuilder.getManyAndCount).toHaveBeenCalled();
   })
 
   it('update => should update a log entry', async () => {

api/src/log/log.service.ts

@@ -7,6 +7,7 @@ import { PilotService } from '../pilot/pilot.service';
 import { PilotEntity } from '../pilot/pilot.entity';
 import { CustomError } from '../error/customError';
 import { FileService } from '../file/file.service';
+import { Logs } from './logs.interface';
 
 @Injectable()
 export class LogService {
@@ -17,18 +18,52 @@ export class LogService {
   ) {}
 
   async find(id: string): Promise<LogEntity> {
-    const logEntity: LogEntity = await this.logRepository.findOne({
+    return await this.logRepository.findOne({
       where: { id: id },
       relations: ['pilot', 'tracks']
     });
-
-    return logEntity;
   }
 
-  async findAll(): Promise<LogEntity[]> {
+  async findLogsWithCount(skip?: number, take?: number): Promise<Logs> {
-    return await this.logRepository.find({
+    // const [entities, total] = await this.logRepository.findAndCount({ 
-      relations: ['pilot', 'tracks']
+    //   take, 
-    });
+    //   skip,
+    //   order: {
+    //     date: 'DESC'
+    //   },
+    //   relations: ['pilot', 'tracks']
+    // })
+
+    const [entities, total] = await this.logRepository
+      .createQueryBuilder('logs')
+      .innerJoinAndSelect('logs.pilot', 'pilot')
+      .orderBy('logs.date', 'DESC')
+      .skip(skip)
+      .take(take)
+      .getManyAndCount()
+
+    return {
+      entities,
+      total,
+      hasNextPage: skip + take < total
+    }
+  }
+
+  async findLogsWithTracks(skip?: number, take?: number): Promise<Logs> {
+    const [entities, total] = await this.logRepository
+      .createQueryBuilder('logs')
+      .innerJoinAndSelect('logs.tracks', 'track')
+      .innerJoinAndSelect('logs.pilot', 'pilot')
+      .orderBy('logs.date', 'DESC')
+      .skip(skip)
+      .take(take)
+      .getManyAndCount();
+
+    return {
+      entities,
+      total,
+      hasNextPage: skip + take < total
+    }
   }
 
   async create(logDto: LogDto): Promise<LogDto> {

api/src/log/logs.interface.ts

@@ -0,0 +1,7 @@
+import { LogEntity } from "src/log/log.entity";
+
+export interface Logs {
+  entities: LogEntity[],
+  total: number,
+  hasNextPage: boolean
+}

api/src/track/track.service.ts

@@ -7,6 +7,7 @@ import { LogService } from "../log/log.service";
 import { LogEntity } from "../log/log.entity";
 import { CustomError } from "../error/customError";
 import { FileService } from "../file/file.service";
+import { Logs } from "src/log/logs.interface";
 
 @Injectable()
 export class TrackService {

client/package.json

@@ -1,7 +1,7 @@
 {
   "name": "client",
   "private": true,
-  "version": "2.0.2",
+  "version": "2.1.3",
   "type": "module",
   "scripts": {
     "dev": "vite",

client/src/components/flights/Flights.tsx

@@ -5,22 +5,33 @@ import { LogbookEntry } from "../logbook/LogbookEntry.interface";
 import { initialState, reducer } from "./reducer";
 import { useOidc } from "../../auth/oidcConfig";
 import Alert from "../alert/Alert";
+import { AxiosError, AxiosResponse } from "axios";
+import httpClient from "../../httpClient/httpClient";
+import { useBreakpoints } from "../../hooks/useBreakpoints/UseBreakpoints";
+import { ScreenSize } from "../../enums/screenSize";
 
 const Flights = () => {
   const [state, dispatch] = useReducer(reducer, initialState);
-  const { logs, logsLoading } = useLogs();
   const { isUserLoggedIn } = useOidc();
+  const { screenSize } = useBreakpoints();
 
-  useEffect(() => {
+  const getFlights = async (pageIndex: number, pageSize: number) => {
-
+    try {
-    const flights: LogbookEntry[] | undefined = logs?.filter((log: LogbookEntry) => {
+      const response: AxiosResponse = await httpClient.get(`api/logs/flights`, {
-      if (log.tracks && log.tracks.length > 0) {
+        params: {
-        return log;
+          skip: pageIndex,
+          take: pageSize
         }
-    })
+      });
+      const flights: LogbookEntry[] = response.data.entities;
+      const hasMore: boolean = response.data.hasNextPage;
+      const total: number = response.data.total;
 
-    if (flights && flights.length > 0) {
+      if (flights.length > 0) {
-      dispatch({ type: 'SET_FLIGHTS', payload: flights})
+        const newFlights: LogbookEntry[] = [...state.flights, ...flights]
+        const newPageIndex: number = state.pageIndex + flights.length;
+
+        dispatch({ type: 'SET_FLIGHTS', payload: { flights: newFlights, hasMoreFlights: hasMore, pageIndex: newPageIndex, totalFlights: total }})
 
         if (!isUserLoggedIn && flights.length >= 5) {
           dispatch({ type: 'SET_ALERT', payload: { severity: 'info', message: 'A limited number of flights displayed. Sign in to view all flights.'}})
@@ -30,14 +41,32 @@ const Flights = () => {
       } else {
         dispatch({ type: 'SET_ALERT', payload: { severity: 'info', message: 'No flights found' }})
       }
-  }, [logs])
+    } catch (error) {
+      const axiosError = error as AxiosError;
+
+      dispatch({
+        type: 'SET_ALERT',
+        payload: { severity: 'error', message: `Loading of flights failed with the following message: ${axiosError.message}`}
+      });
+    } finally {
+      dispatch({ type: 'SET_IS_LOADING', payload: false })
+    }
+  }
+
+  const loadMore = () => {
+    getFlights(state.pageIndex, state.pageSize)
+  }
+
+  useEffect(() => {
+    getFlights(state.pageIndex, state.pageSize);
+  }, [])
  
   return (
-    <div className='max-w-screen-lg mx-auto'>
+    <div className={`max-w-screen-lg mx-auto ${screenSize === ScreenSize.SM || screenSize === ScreenSize.MD? 'mr-4 ml-4' : ''}`}>
       <div className='prose mt-5 mb-5'>
         <h1>Flights</h1>
       </div>
-      {!logsLoading && state.alert && (
+      {!state.isLoading && state.alert && (
         <div>
           <Alert
             className='mb-5'
@@ -50,14 +79,21 @@ const Flights = () => {
           </Alert>
         </div>
       )}
-      {!logsLoading &&
+      {!state.isLoading &&
+        <div>
           <div>
             <LogbookCard logs={state.flights} mode='flights' />
           </div>
+          {state.hasMoreFlights &&
+            <div className='flex items-center justify-center mb-5'>
+              <button className='btn btn-link' onClick={loadMore}>Load more</button>
+            </div>
           }
-      {logsLoading && [...Array(5)].map((_element, index) => {
+        </div>
+      }
+      {state.isLoading && [...Array(5)].map((_element, index) => {
         return (
-          <div className='card bg-base-100 border border-base-300 p-2 mb-7'>
+          <div className='card bg-base-100 border border-base-300 p-2 mb-5'>
             <div className='card-body' key={index}>
               <div className='skeleton h-10 w-[150px]' />
               <div className='skeleton h-[350px]' />

client/src/components/flights/FlightsState.interface.ts

@@ -5,4 +5,8 @@ export interface FlightsState {
   alert: Alert | undefined;
   flights: LogbookEntry[];
   isLoading: boolean;
+  hasMoreFlights: boolean;
+  pageIndex: number;
+  pageSize: number
+  totalFlights: number;
 }

client/src/components/flights/reducer.tsx

@@ -5,13 +5,17 @@ import { FlightsState } from "./FlightsState.interface";
 
 type Action = 
   | { type: 'SET_ALERT'; payload: Alert | undefined }
-  | { type: 'SET_FLIGHTS'; payload: LogbookEntry[] }
+  | { type: 'SET_FLIGHTS'; payload: { flights: LogbookEntry[], hasMoreFlights: boolean, pageIndex: number, totalFlights: number } }
   | { type: 'SET_IS_LOADING'; payload: boolean }
 
 export const initialState: FlightsState = {
   alert: undefined,
   flights: [],
-  isLoading: true
+  isLoading: true,
+  hasMoreFlights: true,
+  pageIndex: 0,
+  pageSize: 5,
+  totalFlights: 0
 }
 
 export const reducer = (
@@ -28,7 +32,10 @@ export const reducer = (
     case 'SET_FLIGHTS': {
       return {
         ...state,
-        flights: action.payload
+        flights: action.payload.flights,
+        hasMoreFlights: action.payload.hasMoreFlights,
+        pageIndex: action.payload.pageIndex,
+        totalFlights: action.payload.totalFlights
       }
     }
     case 'SET_IS_LOADING': {

client/src/components/logbook/Logbook.tsx

@@ -12,19 +12,40 @@ import { UserRole } from '../../enums/userRole';
 import { useBreakpoints } from '../../hooks/useBreakpoints/UseBreakpoints';
 import { ScreenSize } from '../../enums/screenSize';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faAdd, faEllipsisVertical, faPen, faEye, faTrash, faMapLocationDot } from '@fortawesome/free-solid-svg-icons'
+import { faAdd, faEllipsisVertical, faPen, faEye, faTrash, faAngleLeft, faAngleRight, faAnglesLeft, faAnglesRight } from '@fortawesome/free-solid-svg-icons'
-import { CellContext, ColumnDef, flexRender, getCoreRowModel, getPaginationRowModel, HeaderContext, useReactTable } from '@tanstack/react-table';
+import { CellContext, ColumnDef, flexRender, getCoreRowModel, HeaderContext, PaginationState, useReactTable } from '@tanstack/react-table';
 import { useLogbookContext } from '../../hooks/logbookContext/UseLogbookContext';
 import LogbookDrawer from '../logbookDrawer/LogbookDrawer';
 import Alert from '../alert/Alert';
+import TrackMap from '../trackMap/TrackMap';
+
+interface ActionsProps {
+  id: string;
+}
 
 const Logbook: React.FC<unknown> = () => {
   const [state, dispatch] = useReducer(reducer, initialState);
-  const [columnVisibility, setColumnVisibility] = useState({})
+  const [columnVisibility, setColumnVisibility] = useState({});
-  const logbookContext = useLogbookContext()
+  const logbookContext = useLogbookContext();
   const { isUserLoggedIn } = useOidc();
   const { userRole } = useUserRole();
   const { screenSize } = useBreakpoints();
+  const Actions = ({ id }: ActionsProps) => {
+    return (
+      <div className='dropdown dropdown-end'>
+        <div tabIndex={0} role='button' className='btn btn-ghost p-0'><FontAwesomeIcon icon={faEllipsisVertical} /></div>
+        <ul tabIndex={-1} className="dropdown-content menu bg-base-100 rounded-box w-52 p-2 shadow-sm border border-base-300 !z-[100]">
+          {isUserLoggedIn && userRole === UserRole.WRITE &&
+            <li><a onClick={() => onOpenCloseDrawer(FormMode.EDIT, id)}><FontAwesomeIcon icon={faPen} />Edit</a></li>
+          }
+          <li><a onClick={() => onOpenCloseDrawer(FormMode.VIEW, id)}><FontAwesomeIcon icon={faEye} />View</a></li>
+          {isUserLoggedIn && userRole === UserRole.WRITE &&
+            <li><a onClick={() => onDeleteLog(id)}><FontAwesomeIcon icon={faTrash} />Delete</a></li>
+          }
+        </ul>
+      </div>
+    )
+  }
   const columnTotal = (info: HeaderContext<LogbookEntry, unknown>): number => {
     const values: number[] = info.table.getPaginationRowModel().rows.map((row: any) => Number(row.getValue(info.column.id))).filter((value: any) => !Number.isNaN(value));
     let total: number = 0;
@@ -116,18 +137,7 @@ const Logbook: React.FC<unknown> = () => {
     },
     cell: (info: CellContext<LogbookEntry, unknown>) => {
       return (
-        <div className='dropdown dropdown-end'>
+        <Actions id={info.row.original.id} />
-          <div tabIndex={0} role='button' className='btn btn-ghost'><FontAwesomeIcon icon={faEllipsisVertical} /></div>
-          <ul tabIndex={-1} className="dropdown-content menu bg-base-100 rounded-box w-52 p-2 shadow-sm border border-base-300 !z-[100]">
-            {isUserLoggedIn && userRole === UserRole.WRITE &&
-              <li><a onClick={() => onOpenCloseDrawer(FormMode.EDIT, info.row.original.id)}><FontAwesomeIcon icon={faPen} />Edit</a></li>
-            }
-            <li><a onClick={() => onOpenCloseDrawer(FormMode.VIEW, info.row.original.id)}><FontAwesomeIcon icon={faEye} />View</a></li>
-            {isUserLoggedIn && userRole === UserRole.WRITE &&
-              <li><a onClick={() => onDeleteLog(info.row.original.id)}><FontAwesomeIcon icon={faTrash} />Delete</a></li>
-            }
-          </ul>
-        </div>
       )
     }
   }
@@ -338,31 +348,51 @@ const Logbook: React.FC<unknown> = () => {
     actions
   ];
 
+  const onPaginationChange = (updater: any) => {
+    const newPaginationState: PaginationState = typeof updater === 'function' ? updater(state.pagination) : updater;
+
+    dispatch({ type: 'SET_PAGINATION', payload: newPaginationState })
+  }
+
   const table = useReactTable({
     data: state.entries,
     columns: columns,
     getCoreRowModel: getCoreRowModel(),
-    getPaginationRowModel: getPaginationRowModel(),
+    manualPagination: true,
-    initialState: {
-      pagination: {
-        pageIndex: 0,
-        pageSize: 100
-      }
-    },
     onColumnVisibilityChange: setColumnVisibility,
+    onPaginationChange: onPaginationChange,
+    rowCount: state.totalEntries,
     state: {
       columnVisibility: columnVisibility,
+      pagination: state.pagination
     }
   });
 
-  const getLogbookEntries = async () => {
+  const {
+    firstPage,
+    getCanNextPage,
+    getCanPreviousPage,
+    getPageCount,
+    getState,
+    lastPage,
+    nextPage,
+    previousPage,
+    setPageIndex
+  } = table;
+
+  const getLogbookEntries = async (pageIndex: number, pageSize: number) => {
     try {
       dispatch({ type: 'SET_IS_LOADING', payload: true });
 
-      const response: AxiosResponse = await httpClient.get(`api/logs`);
+      const response: AxiosResponse = await httpClient.get(`api/logs`, {
+        params: {
+          skip: pageIndex * pageSize,
+          take: pageSize
+        }
+      });
 
-      if (response.data.length > 0) {
+      if (response.data.entities.length > 0) {
-        const entries: LogbookEntry[] = response.data;
+        const entries: LogbookEntry[] = response.data.entities;
         const entryColumns: string[] = Object.keys(entries[0]);
         const columnVisibility: {[key: string]: boolean} = {}
 
@@ -381,9 +411,9 @@ const Logbook: React.FC<unknown> = () => {
 
         entries.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime());
         setColumnVisibility(columnVisibility)
-        dispatch({ type: 'SET_ENTRIES', payload: entries });
+        dispatch({ type: 'SET_ENTRIES', payload: { entries: entries, totalEntries: response.data.total }});
 
-        if (!isUserLoggedIn && response.data.length >= 5) {
+        if (!isUserLoggedIn && response.data.entities.length >= 5) {
           dispatch({ type: 'SET_ALERT', payload: { severity: 'info', message: 'A limited number of log entries displayed. Sign in to view all log entries.'}})
         } else {
           dispatch({ type: 'SET_ALERT', payload: undefined})
@@ -448,7 +478,7 @@ const Logbook: React.FC<unknown> = () => {
         payload: false
       });
       logbookContext.dispatch({ type: 'SET_SELECTED_LOG_ID', payload: '' })
-      await getLogbookEntries();
+      await getLogbookEntries(state.pagination?.pageIndex, state.pagination?.pageSize);
     } catch (error) {
       const axiosError = error as AxiosError;
 
@@ -468,19 +498,46 @@ const Logbook: React.FC<unknown> = () => {
     });
   };
 
+  const onRowsPerPageChanged = (event: any) => {
+    const newPaginationState: PaginationState = {
+      pageIndex: 0,
+      pageSize: event.target.value !== 'All' ? Number(event.target.value) : state.totalEntries
+    };
+
+    dispatch({ type: 'SET_PAGINATION', payload: newPaginationState })
+  }
+
   useEffect(() => {
     if (!logbookContext.state.isDrawerOpen) {
-      getLogbookEntries();
+      getLogbookEntries(state.pagination.pageIndex, state.pagination.pageSize);
     }
-  }, [logbookContext.state.isDrawerOpen]);
+  }, [logbookContext.state.isDrawerOpen, state.pagination.pageIndex, state.pagination.pageSize]);
+
+  useEffect(() => {
+    const pages: number[] = [];
+
+    if (state.pagination?.pageSize) {
+      const totalPages = getPageCount();
+
+      for(let i = 0; i < totalPages; i++) {
+        pages.push(i + 1)
+      }
+    }
+
+    dispatch({ type: 'SET_PAGES', payload: pages })
+  }, [state.totalEntries, state.pagination?.pageSize])
+
+  useEffect(() => {
+    console.log(state.alert)
+  }, [state.alert])
 
   return (
     <>
-      <div className='mr-10 ml-10 grid grid-cols-12'>
+      <div className={`${screenSize === ScreenSize.SM ? 'mr-4 ml-4' : 'mr-10 ml-10'} grid grid-cols-12`}>
-        <div className='prose max-w-none col-span-10 mt-5 mb-5'>
+        <div className='prose max-w-none col-span-6 mt-5 mb-5'>
           <h1>Logbook</h1>
         </div>
-        <div className='col-span-2 justify-self-end self-center'>
+        <div className='col-span-6 justify-self-end self-center'>
           {userRole === UserRole.WRITE &&
             <button className='btn btn-primary'
               onClick={() => onOpenCloseDrawer(FormMode.ADD)}
@@ -497,15 +554,31 @@ const Logbook: React.FC<unknown> = () => {
               onClose={() =>
                 dispatch({ type: 'SET_ALERT', payload: undefined })
               }
-              severity={'info'}
+              severity={state.alert.severity}
             >
               {state.alert.message}
             </Alert>
           </div>
         )}
-        {!state.isLoading && state.entries.length > 0 && screenSize !== ScreenSize.SM && (
+        {!state.isLoading && state.entries.length > 0 && screenSize !== ScreenSize.SM && screenSize !== ScreenSize.MD && (
-          <div className='col-span-12 p-5 bg-base-100 border border-base-100 rounded-lg'>
+          <div className='col-span-12 pr-5 pb-5 pl-5 bg-base-100 border border-base-100 rounded-lg '>
-            <div className='overflow-x-auto'>
+            <div className='overflow-x-auto mb-5'>
+              <div className='col-span-12 justify-self-end self-center mt-1 mr-1 mb-2'>
+                <label className='select select-sm select-ghost'>
+                  <span className='label'>Rows per page</span>
+                  <select
+                    defaultValue={1}
+                    onChange={onRowsPerPageChanged}
+                    value={state.pagination?.pageSize}
+                  >
+                    <option value={10}>10</option>
+                    <option value={25}>25</option>
+                    <option value={50}>50</option>
+                    <option value={state.totalEntries}>All</option>
+                  </select>
+                </label>
+                
+              </div>
               <table className='table min-w-full h-auto table-auto w-full'>
                 <thead className='bg-base-200'>
                   {table.getHeaderGroups().map((headerGroup, headerGroupIndex) => (
@@ -591,10 +664,92 @@ const Logbook: React.FC<unknown> = () => {
                 </thead>
               </table>
             </div>
+            {state.pagination.pageSize !== state.totalEntries &&
+              <div className='col-span-12 justify-self-center self-center'>
+                <div className='join'>
+                  <button
+                    className='join-item btn btn-sm'
+                    onClick={firstPage}
+                  >
+                    <FontAwesomeIcon icon={faAnglesLeft} />
+                  </button>
+                  <button
+                    className='join-item btn btn-sm'
+                    onClick={previousPage}
+                    disabled={!getCanPreviousPage()}
+                  >
+                    <FontAwesomeIcon icon={faAngleLeft} />
+                  </button>
+                  {state.pages.map((page, index) => {
+                    return (
+                      <button
+                        className={`join-item btn btn-sm ${getState().pagination.pageIndex === index ? 'btn-active' : ''}`}
+                        onClick={() => setPageIndex(index)}
+                      >
+                        {page}
+                      </button>
+                    )
+                  })}
+                  <button
+                    className='join-item btn btn-sm'
+                    onClick={() => nextPage()}
+                    disabled={!getCanNextPage()}
+                  >
+                    <FontAwesomeIcon icon={faAngleRight} />
+                  </button>
+                  <button
+                    className='join-item btn btn-sm'
+                    onClick={lastPage}
+                  >
+                    <FontAwesomeIcon icon={faAnglesRight} />
+                  </button>
+                </div>
+              </div>
+            }
           </div>
         )}
         {state.entries.length > 0 && screenSize === ScreenSize.SM &&
-          <LogbookCard logs={state.entries} onDelete={onDeleteLog} mode='logbook' onOpenCloseForm={onOpenCloseDrawer} />
+          <div className='col-span-12'>
+            <>
+              {table.getRowModel().rows.map((row) => {
+                const date = new Date(row.original.date.replace('Z', ''));
+                const formattedDate: string = `${date.getMonth() + 1}/${date.getDate()}/${date.getFullYear()}`;
+
+                return (
+                  <div className='card bg-base-100 border border-base-300 mb-5'>
+                    <div className={`card-body ${screenSize === ScreenSize.SM || screenSize === ScreenSize.MD ? 'p-4' : ''}`} key={row.id}>
+                      <div className={`grid grid-cols-12 gap-3`}>
+                        <>
+                          <div className='col-span-8'>
+                            <h2 className='card-title font-bold text-2xl'>{formattedDate}</h2>
+                          </div>
+                          <div className='col-span-4 justify-self-end self-center'>
+                            <Actions id={row.original.id} />
+                          </div>
+                          {row.getVisibleCells().map((cell) => {
+                            return (
+                              <>
+                                {cell.column.columnDef.header !== 'Actions' && cell.column.columnDef.header !== 'Date' && cell.column.columnDef.header !== 'Pilot' &&
+                                  <>
+                                    <div className='col-span-8 font-bold'>
+                                      <span>{cell.getContext().column.columnDef.header?.toString()}</span>
+                                    </div>
+                                    <div className='col-span-4'>
+                                      <span>{flexRender(cell.column.columnDef.cell, cell.getContext())}</span>
+                                    </div>
+                                  </>
+                                }
+                              </>
+                            )
+                          })}
+                        </>
+                      </div>
+                    </div>
+                  </div>
+                )
+              })}
+            </>
+          </div>
         }
         {state.isLoading && !state.alert && (
           <div className='col-span-12 p-5 bg-base-100 border border-base-100 rounded-lg'>

client/src/components/logbook/LogbookState.interface.ts

@@ -1,4 +1,4 @@
-import { ColumnDef } from '@tanstack/react-table';
+import { ColumnDef, PaginationState } from '@tanstack/react-table';
 import { FormMode } from '../../enums/formMode';
 import { Alert } from '../../interfaces/Alert.interface';
 import { LogbookEntry } from './LogbookEntry.interface';
@@ -10,4 +10,7 @@ export interface LogbookState {
   isConfirmDialogLoading: boolean;
   isConfirmDialogOpen: boolean;
   isLoading: boolean;
+  pages: number[];
+  pagination: PaginationState;
+  totalEntries: number;
 }

client/src/components/logbook/reducer.ts

@@ -1,4 +1,4 @@
-import { ColumnDef } from '@tanstack/react-table';
+import { ColumnDef, PaginationState } from '@tanstack/react-table';
 import { FormMode } from '../../enums/formMode';
 import { Alert } from '../../interfaces/Alert.interface';
 import { LogbookEntry } from './LogbookEntry.interface';
@@ -7,11 +7,12 @@ import { LogbookState } from './LogbookState.interface';
 type Action =
   | { type: 'SET_COLUMNS'; payload: ColumnDef<LogbookEntry>[] }
   | { type: 'SET_IS_CONFIRMATION_DIALOG_OPEN'; payload: boolean }
-  | { type: 'SET_ENTRIES'; payload: LogbookEntry[] }
+  | { type: 'SET_ENTRIES'; payload: { entries: LogbookEntry[], totalEntries: number } }
   | { type: 'SET_ALERT'; payload: Alert | undefined }
   | { type: 'SET_IS_CONFIRMATION_DIALOG_LOADING'; payload: boolean }
-  | { type: 'SET_IS_LOADING'; payload: boolean };
+  | { type: 'SET_IS_LOADING'; payload: boolean }
-
+  | { type: 'SET_PAGES'; payload: number[] }
+  | { type: 'SET_PAGINATION'; payload: PaginationState };
 
 export const initialState: LogbookState = {
   alert: undefined,
@@ -19,7 +20,13 @@ export const initialState: LogbookState = {
   entries: [],
   isConfirmDialogLoading: false,
   isConfirmDialogOpen: false,
-  isLoading: false
+  isLoading: false,
+  pages: [],
+  pagination: {
+    pageIndex: 0,
+    pageSize: 10
+  },
+  totalEntries: 0
 };
 
 export const reducer = (
@@ -42,7 +49,8 @@ export const reducer = (
     case 'SET_ENTRIES': {
       return {
         ...state,
-        entries: action.payload
+        entries: action.payload.entries,
+        totalEntries: action.payload.totalEntries
       };
     }
     case 'SET_ALERT': {
@@ -63,6 +71,18 @@ export const reducer = (
         isLoading: action.payload
       };
     }
+    case 'SET_PAGES': {
+      return {
+        ...state,
+        pages: action.payload
+      }
+    }
+    case 'SET_PAGINATION': {
+      return {
+        ...state,
+        pagination: action.payload
+      }
+    }
     default: {
       return state;
     }

client/src/components/logbookCard/LogbookCard.tsx

@@ -1,7 +1,12 @@
 import { LogbookCardProps } from "./LogbookCardProps.interface";
 import TrackMap from "../trackMap/TrackMap";
+import { useBreakpoints } from "../../hooks/useBreakpoints/UseBreakpoints";
+import { ScreenSize } from "../../enums/screenSize";
+import { useEffect } from "react";
 
 const LogbookCard = ({ logs, mode, onDelete, onOpenCloseForm }: LogbookCardProps) => {  
+  const { screenSize } = useBreakpoints();
+  
   return (
     <div>
       {logs.map((log) => {
@@ -9,8 +14,8 @@ const LogbookCard = ({ logs, mode, onDelete, onOpenCloseForm }: LogbookCardProps
         const formattedDate: string = `${date.getMonth() + 1}/${date.getDate()}/${date.getFullYear()}`;
 
         return (
-          <div className='card bg-base-100 border border-base-300 p-2'>
+          <div className='card bg-base-100 border border-base-300 p-2 mb-5'>
-            <div className='card-body' key={log.id}>
+            <div className={`card-body ${screenSize === ScreenSize.SM || screenSize === ScreenSize.MD ? 'p-2' : ''}`} key={log.id}>
               <h2 className='card-title font-bold text-2xl'>{formattedDate}</h2>
               <div>    
                 {mode === 'flights' && log.tracks && log.tracks.length > 0 &&
@@ -24,10 +29,10 @@ const LogbookCard = ({ logs, mode, onDelete, onOpenCloseForm }: LogbookCardProps
                 }
               </div>
               <div className='collapse collapse-arrow bg-base-100 border-base-300 border'>
-                <input type='radio' name='details-accordion' />
+                <input type='checkbox' />
                 <div className='collapse-title font-semibold'>Details</div>
                 <div className='collapse-content'>
-                  <div className='grid grid-cols-12 gap-3 mr-[30%] ml-[30%] mt-4 mb-4'>
+                  <div className={`grid grid-cols-12 gap-3 ${screenSize === ScreenSize.SM || screenSize === ScreenSize.MD ? 'mr-[5%] ml-[5%]' : 'mr-[30%] ml-[30%]'} mt-4 mb-4`}>
                     <div className='col-span-6 font-bold'>
                       <span>Aircraft Make and Model</span>
                     </div>

client/src/components/pilots/Pilots.tsx

@@ -17,11 +17,31 @@ import { Pilot } from './Pilot.interface';
 import Alert from '../alert/Alert';
 import { useOidc } from '../../auth/oidcConfig';
 
+interface ActionsProps {
+  id: string;
+}
+
 const Pilots: React.FC<unknown> = () => {
   const [state, dispatch] = useReducer(reducer, initialState);
   const { userRole } = useUserRole();
   const { screenSize } = useBreakpoints();
   const { isUserLoggedIn } = useOidc();
+  const Actions = ({ id }: ActionsProps) => {
+    return (
+      <div className='dropdown dropdown-end'>
+        <div tabIndex={0} role='button' className='btn btn-ghost'><FontAwesomeIcon icon={faEllipsisVertical} /></div>
+        <ul tabIndex={-1} className="dropdown-content menu bg-base-100 rounded-box z-1 w-52 p-2 shadow-sm border border-base-300">
+          {isUserLoggedIn && userRole === UserRole.WRITE &&
+            <li><a onClick={() => onOpenClosePilotForm(FormMode.EDIT, id)}><FontAwesomeIcon icon={faPen} />Edit</a></li>
+          }
+          <li><a onClick={() => onOpenClosePilotForm(FormMode.VIEW, id)}><FontAwesomeIcon icon={faEye} />View</a></li>
+          {isUserLoggedIn && userRole === UserRole.WRITE &&
+            <li><a onClick={() => onDeletePilot(id)}><FontAwesomeIcon icon={faTrash} />Delete</a></li>
+          }
+        </ul>
+      </div>
+    )
+  }
 
   const getPilots = async () => {
     try {
@@ -134,18 +154,7 @@ const Pilots: React.FC<unknown> = () => {
       },
       cell: (info: CellContext<Pilot, unknown>) => {
         return (
-          <div className='dropdown dropdown-end'>
+          <Actions id={info.row.original.id} />
-            <div tabIndex={0} role='button' className='btn btn-ghost'><FontAwesomeIcon icon={faEllipsisVertical} /></div>
-            <ul tabIndex={-1} className="dropdown-content menu bg-base-100 rounded-box z-1 w-52 p-2 shadow-sm border border-base-300">
-              {isUserLoggedIn && userRole === UserRole.WRITE &&
-                <li><a onClick={() => onOpenClosePilotForm(FormMode.EDIT, info.row.original.id)}><FontAwesomeIcon icon={faPen} />Edit</a></li>
-              }
-              <li><a onClick={() => onOpenClosePilotForm(FormMode.VIEW, info.row.original.id)}><FontAwesomeIcon icon={faEye} />View</a></li>
-              {isUserLoggedIn && userRole === UserRole.WRITE &&
-                <li><a onClick={() => onDeletePilot(info.row.original.id)}><FontAwesomeIcon icon={faTrash} />Delete</a></li>
-              }
-            </ul>
-          </div>
         )
       }
     }
@@ -172,11 +181,11 @@ const Pilots: React.FC<unknown> = () => {
 
   return (
     <>
-    <div className='mr-10 ml-10 grid grid-cols-12'>
+    <div className={`${screenSize === ScreenSize.SM ? 'mr-4 ml-4' : 'mr-10 ml-10'} grid grid-cols-12`}>
-      <div className='prose max-w-none col-span-10 mt-5 mb-5' >
+      <div className='prose max-w-none col-span-6 mt-5 mb-5' >
         <h1>Pilots</h1>
       </div>
-      <div className='col-span-2 justify-self-end self-center'>
+      <div className='col-span-6 justify-self-end self-center'>
         {!state.isLoading && userRole === UserRole.WRITE &&
           <button
             className='btn btn-primary'
@@ -259,9 +268,40 @@ const Pilots: React.FC<unknown> = () => {
           </table>
         </div>
       }
-      {/* {state.pilots.length > 0 && screenSize === ScreenSize.SM &&
+      {state.pilots.length > 0 && screenSize === ScreenSize.SM &&
-        <PilotCard pilots={state.pilots} onDelete={onDeletePilot} onOpenCloseForm={onOpenClosePilotForm} />
+        <div className='col-span-12'>
-      } */}
+          <>
+            {table.getRowModel().rows.map((row) => {
+              return (
+                <div className='card bg-base-100 border border-base-300 mb-5'>
+                  <div className={`card-body ${screenSize === ScreenSize.SM || screenSize === ScreenSize.MD ? 'p-4' : ''}`} key={row.id}>
+                    <div className={`grid grid-cols-12 gap-3`}>
+                      <>
+                        {row.getVisibleCells().map((cell) => {
+                          return (
+                            <>
+                              {cell.column.columnDef.header !== 'Actions' &&
+                                <>
+                                  <div className='col-span-10 self-center'>
+                                    <span>{flexRender(cell.column.columnDef.cell, cell.getContext())}</span>
+                                  </div>
+                                  <div className='col-span-2'>
+                                    <Actions id={row.original.id} />
+                                  </div>
+                                </>
+                              }
+                            </>
+                          )
+                        })}
+                      </>
+                    </div>
+                  </div>
+                </div>
+              )
+            })}
+          </>
+        </div>
+      }
     </div>
       {state.isFormOpen && (
         <PilotForm

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@noahspan/flying",
-  "version": "2.0.0-alpha-3",
+  "version": "2.0.2",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@noahspan/flying",
-      "version": "2.0.0-alpha-3",
+      "version": "2.0.2",
       "workspaces": [
         "api",
         "client",
@@ -26,7 +26,7 @@
       }
     },
     "api": {
-      "version": "2.0.0-alpha-3",
+      "version": "2.0.2",
       "license": "UNLICENSED",
       "dependencies": {
         "@azure/storage-blob": "^12.27.0",
@@ -81,7 +81,7 @@
       }
     },
     "client": {
-      "version": "2.0.0-alpha-3",
+      "version": "2.0.2",
       "dependencies": {
         "@fortawesome/fontawesome-svg-core": "^7.1.0",
         "@fortawesome/free-solid-svg-icons": "^7.1.0",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noahspan/flying",
-  "version": "2.0.2",
+  "version": "2.1.3",
   "scripts": {
     "start": "node api/dist/main",
     "format": "prettier --write \"**/src/**/*.ts\" \"**/test/**/*.ts\"",