User can add/edit flights

resources/js/Components/FlightsGoneBy/DepartureBoard.vue

@@ -11,6 +11,7 @@ import AircraftToolTip from "@/Components/FlightsGoneBy/AircraftToolTip.vue";
 
 const props = defineProps<{
     flights: Flight[]
+    canEdit: boolean
 }>()
 
 const headers = [
@@ -25,6 +26,7 @@ const headers = [
     { title: 'DISTANCE', key: 'distance', sortable: true },
     { title: 'AIRCRAFT', key: 'aircraft.designator', sortable: true },
     { title: 'CLASS', key: 'flight_class', sortable: true },
+    { title: '', key: 'actions', sortable: false },
 ]
 
 const CLASS_ORDER: Record<string, number> = {
@@ -206,6 +208,30 @@ const tableItems = computed(() =>
                         </span>
                     </td>
 
+                    <!-- Actions -->
+                    <td class="v-data-table__td actions-cell">
+                        <template v-if="canEdit">
+                            <v-menu>
+                                <template #activator="{ props: menuProps }">
+                                    <v-btn
+                                        v-bind="menuProps"
+                                        icon="mdi-dots-horizontal"
+                                        variant="text"
+                                        size="small"
+                                        density="compact"
+                                    />
+                                </template>
+                                <v-list density="compact" bg-color="#1a1e2e">
+                                    <v-list-item
+                                        prepend-icon="mdi-pencil-outline"
+                                        title="Edit"
+                                        :href="route('flights.edit', { flight: (item as Flight).id })"
+                                    />
+                                </v-list>
+                            </v-menu>
+                        </template>
+                    </td>
+
                 </tr>
             </template>
         </template>
@@ -462,4 +488,17 @@ const tableItems = computed(() =>
     letter-spacing: 0.2em;
     color: #445;
 }
+
+.actions-cell {
+    width: 40px;
+    padding: 0 0.5rem !important;
+    text-align: right;
+}
+
+:deep(.v-list-item-title) {
+    font-family: 'Share Tech Mono', monospace !important;
+    font-size: 0.8rem !important;
+    letter-spacing: 0.08em !important;
+    color: #c8cdd8 !important;
+}
 </style>