Added Charts

resources/js/Components/FlightsGoneBy/DepartureBoard.vue

@@ -21,6 +21,8 @@ const headers = [
     { title: 'DATE', key: 'departure_date', sortable: true },
     { title: 'DEPART', key: 'departure_time_display', sortable: false },
     { title: 'ARRIVE', key: 'arrival_time_display', sortable: false },
+    { title: 'DURATION', key: 'duration', sortable: true },
+    { title: 'DISTANCE', key: 'distance', sortable: true },
     { title: 'AIRCRAFT', key: 'aircraft.designator', sortable: true },
     { title: 'CLASS', key: 'flight_class', sortable: true },
 ]
@@ -40,7 +42,8 @@ const customKeySort = {
     },
     airline: (a: Flight['airline'], b: Flight['airline']) => {
         return (a?.IATA_code ?? '').localeCompare(b?.IATA_code ?? '')
-    }
+    },
+    duration: (a: any, b: any) => (a ?? 0) - (b ?? 0),
 }
 
 // Track active sort state
@@ -176,6 +179,17 @@ const tableItems = computed(() =>
                         </sup>
                     </td>
 
+                    <td class="v-data-table__td">
+                        <span class="mono-tag">{{ (item as Flight).duration_display ?? '—' }}</span>
+                    </td>
+
+                    <!-- Distance -->
+                    <td class="v-data-table__td">
+                    <span class="mono-tag distance-cell">
+                        {{ (item as Flight).distance ? Math.round((item as Flight).distance).toLocaleString() + ' km' : '' }}
+                    </span>
+                    </td>
+
                     <!-- Aircraft -->
                     <td class="v-data-table__td">
                         <AircraftToolTip v-if="(item as any).aircraft" :aircraft="(item as any).aircraft">