Index: components/FlightWatch/TabContents/Information/Details/Add.vue
===================================================================
--- components/FlightWatch/TabContents/Information/Details/Add.vue	(date 0)
+++ components/FlightWatch/TabContents/Information/Details/Add.vue	(date 0)
@@ -1,116 +0,0 @@
-<template>
-  <div class="card flex flex-wrap justify-between gap-3 whitespace-nowrap mt-3">
-    <div class="flex items-center">
-      <Checkbox
-        v-model="flight.manual_operator"
-        inputId="manual_operator"
-        name="manual_operator"
-        :binary="true"
-        @change="flight.airline_id = null"
-      />
-      <label for="manual_operator" class="ml-2"> Add Operator </label>
-
-      <InputText
-        v-if="flight.manual_operator"
-        class="ms-3"
-        type="text"
-        v-model="flight.operator_name"
-      />
-    </div>
-    <div class="flex items-center">
-      <Checkbox
-        v-model="flight.manual_ac_type"
-        inputId="manual_ac_type"
-        name="manual_ac_type"
-        :binary="true"
-        @change="flight.aircraft_type_id = null"
-      />
-      <label for="manual_ac_type" class="ml-2"> Add A/C Type </label>
-
-      <InputText
-        v-if="flight.manual_ac_type"
-        class="ms-3"
-        type="text"
-        v-model="flight.ac_type"
-      />
-    </div>
-    <div class="flex items-center">
-      <Checkbox
-        v-model="flight.manual_ac"
-        inputId="manual_ac"
-        name="manual_ac"
-        :binary="true"
-        @change="flight.aircraft_id = null"
-      />
-      <label for="manual_ac" class="ml-2"> Add Aircraft </label>
-
-      <InputText
-        v-if="flight.manual_ac"
-        class="ms-3"
-        type="text"
-        v-model="flight.ac"
-      />
-    </div>
-    <div class="flex items-center">
-      <Checkbox
-        v-model="flight.manual_flt_no"
-        inputId="manual_flt_no"
-        name="manual_flt_no"
-        :binary="true"
-        @change="flight.flight_number_id = null"
-      />
-      <label for="manual_flt_no" class="ml-2"> Add Flt No </label>
-    </div>
-  </div>
-
-  <!-- Add Flight Number -->
-  <div
-    v-if="flight.manual_flt_no"
-    class="card flex flex-wrap justify-between gap-3 whitespace-nowrap mt-3"
-  >
-    <div class="flex items-center">
-      <div class="ml-2">Flight Number</div>
-
-      <InputText class="ms-3" type="text" v-model="flight.flt_no" />
-    </div>
-    <div class="flex items-center">
-      <div class="ml-2">Departure Airport</div>
-
-      <InputText class="ms-3" type="text" v-model="flight.departure_airport" />
-    </div>
-    <div class="flex items-center">
-      <div class="ml-2">Arrival Airport</div>
-
-      <InputText class="ms-3" type="text" v-model="flight.arrival_airport" />
-    </div>
-    <div class="flex items-center">
-      <div class="ml-2">Flight Type</div>
-
-      <ion-select
-        interface="popover"
-        placeholder="Select"
-        name="flight_number_id"
-        v-model="flight.flight_type"
-        required="required"
-        class="ms-3"
-      >
-        <ion-select-option
-          v-for="(flightType, key) in datas.flightTypes"
-          :key="key"
-          :value="key"
-        >
-          {{ flightType }}
-        </ion-select-option>
-      </ion-select>
-    </div>
-  </div>
-</template>
-
-<script setup>
-const props = defineProps({
-  flight: Object,
-  datas: Object,
-});
-</script>
-
-<style scoped></style>
Index: components/FlightWatch/TabContents/Information/Details/Delay.vue
===================================================================
--- components/FlightWatch/TabContents/Information/Details/Delay.vue	(date 0)
+++ components/FlightWatch/TabContents/Information/Details/Delay.vue	(date 0)
@@ -1,94 +0,0 @@
-<template>
-  <div class="mt-3 flex items-center">
-    <p>
-      Delay
-      <span class="text-[14px]">
-        ({{ `Total Delay: ${getTotalDelay(flight) ?? "00:00"}` }})
-      </span>
-    </p>
-    <Button
-      :disabled="!getTotalDelay(flight)"
-      @click="flight.delays.push({})"
-      class="ms-2"
-      icon="pi pi-plus"
-    />
-  </div>
-  <div
-    class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 whitespace-nowrap"
-  >
-    <div
-      v-for="(delay, key) in flight.delays"
-      :key="key"
-      class="flex text-[14px]"
-    >
-      <div class="flex items-center me-5">
-        <p>Code</p>
-
-        <Dropdown
-          v-model="delay.id"
-          :options="datas.delays"
-          optionLabel="name"
-          optionValue="id"
-          placeholder="Select"
-          class="w-full ms-3 min-w-[100px]"
-          filter
-          show-clear
-          :disabled="!getTotalDelay(flight)"
-        />
-      </div>
-      <div class="flex items-center">
-        <p>Delay Time</p>
-        <ChatContentsTimePicker
-          :key="renderTimePicker"
-          :time="delay.time"
-          :add-class="'w-[60px] ms-3'"
-          @change_time="delay.time = $event"
-          :disabled="!getTotalDelay(flight)"
-        />
-      </div>
-      <Button
-        @click="flight.delays.splice(key, 1)"
-        v-if="flight.delays.length > 1"
-        class="ms-2"
-        icon="pi pi-times"
-      />
-    </div>
-  </div>
-</template>
-
-<script setup>
-const props = defineProps({
-  flight: Object,
-  datas: Object,
-});
-
-const renderTimePicker = ref(0);
-
-const getTotalDelay = (flight) => {
-  if (flight.std && flight.atd) {
-    const date1 = new Date(flight.std);
-    const date2 = new Date(flight.atd);
-    if (date2 > date1) {
-      const diff = date2 - date1;
-      const hours = Math.floor(diff / (1000 * 60 * 60));
-      const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
-
-      return `${hours}:${minutes.toString().padStart(2, "0")}`;
-    }
-    return null;
-  }
-  return null;
-};
-
-watch(
-  () => props.flight.atd,
-  () => {
-    if (!getTotalDelay(props.flight)) {
-      props.flight.delays = [{}];
-      renderTimePicker.value++;
-    }
-  }
-);
-</script>
-
-<style scoped></style>
Index: components/FlightWatch/TabContents/Information/Details/Index.vue
===================================================================
--- components/FlightWatch/TabContents/Information/Details/Index.vue	(date 0)
+++ components/FlightWatch/TabContents/Information/Details/Index.vue	(date 0)
@@ -1,85 +0,0 @@
-<template>
-  <form
-    @submit.prevent="useFlightWatchFetches().createFlight(flight)"
-    :key="flight.id"
-    class="pb-3"
-  >
-    <FlightWatchTabContentsInformationDetailsAirline
-      :flight="flight"
-      :datas="datas"
-    />
-    <FlightWatchTabContentsInformationDetailsAdd
-      :flight="flight"
-      :datas="datas"
-    />
-    <FlightWatchTabContentsInformationDetailsDatetimes
-      :flight="flight"
-      :datetimes="datetimes"
-      :grid="'grid-cols-1 md:grid-cols-2 lg:grid-cols-5'"
-    />
-    <FlightWatchTabContentsInformationDetailsDiversion :flight="flight" />
-    <FlightWatchTabContentsInformationDetailsDelay
-      :flight="flight"
-      :datas="datas"
-    />
-    <FlightWatchTabContentsInformationDetailsGroups :flight="flight" />
-    <FlightWatchTabContentsInformationDetailsNotes :flight="flight" />
-
-    <div class="text-end mt-3">
-      <button
-        v-if="!flight.id"
-        type="submit"
-        class="bg-[var(--primary-green-color)] px-3 py-2 text-white rounded-md hover:bg-blue-600"
-        :disabled="useFlightWatchStore().loader.create"
-      >
-        Add Flight
-      </button>
-      <button
-        v-else
-        type="submit"
-        class="bg-[var(--primary-green-color)] px-3 py-2 text-white rounded-md hover:bg-blue-600"
-        :disabled="useFlightWatchStore().loader.create"
-      >
-        Save Changes
-      </button>
-      <button
-        v-if="flight.id"
-        type="button"
-        class="ms-2 bg-[var(--primary-green-color)] px-3 py-2 text-white rounded-md hover:bg-blue-600"
-        @click="useChatStore().selected_flight = null"
-      >
-        Reset
-      </button>
-    </div>
-
-    <FlightWatchTabContentsInformationDetailsCancel
-      v-if="flight.id"
-      :flight="flight"
-    />
-  </form>
-</template>
-
-<script setup>
-import { useChatStore } from "~/store/chat";
-import { useFlightWatchStore } from "~/store/flight-watch";
-
-const flight = computed(
-  () => useChatStore().selected_flight ?? { delays: [{}] }
-);
-const datas = computed(() => useFlightWatchStore().datas);
-
-const datetimes = ref([
-  "std",
-  "ptd",
-  "etd",
-  "atd",
-  "abn",
-  "sta",
-  "pta",
-  "eta",
-  "tdn",
-  "ata",
-]);
-</script>
-
-<style scoped></style>
Index: components/FlightWatch/TabContents/Information/Details/Notes.vue
===================================================================
--- components/FlightWatch/TabContents/Information/Details/Notes.vue	(date 0)
+++ components/FlightWatch/TabContents/Information/Details/Notes.vue	(date 0)
@@ -1,25 +0,0 @@
-<template>
-  <div class="mt-3 whitespace-nowrap">
-    <div class="flex items-center">
-      <p>No. Of CKIN Counters</p>
-      <InputNumber class="ms-3" v-model="flight.ckin_num" />
-    </div>
-    <div class="flex items-start mt-2">
-      <p>Notes</p>
-      <Textarea
-        class="ms-3 w-full"
-        v-model="flight.remark"
-        autoResize
-        rows="2"
-      />
-    </div>
-  </div>
-</template>
-
-<script setup>
-const props = defineProps({
-  flight: Object,
-});
-</script>
-
-<style scoped></style>
Index: components/FlightWatch/TabContents/Information/Details/Cancel.vue
===================================================================
--- components/FlightWatch/TabContents/Information/Details/Cancel.vue	(date 0)
+++ components/FlightWatch/TabContents/Information/Details/Cancel.vue	(date 0)
@@ -1,96 +0,0 @@
-<template>
-  <div style="border-top: 1px solid #c1c1c1" class="pt-3 mt-3">
-    <form
-      @submit.prevent="useFlightWatchFetches().cancelFlight(cancelForm)"
-      class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 items-center"
-    >
-      <div class="flex items-center">
-        <p>Reason</p>
-        <InputText
-          class="ms-3"
-          type="text"
-          v-model="cancelForm.cancel_reason"
-          placeholder="Reason for Cancellation"
-        />
-      </div>
-      <div class="flex items-center">
-        <p>Cancellation Received at</p>
-        <ChatContentsDatetimePicker
-          :datetime="cancelForm.cancellation_received_at"
-          @change_datetime="cancelForm.cancellation_received_at = $event"
-        />
-      </div>
-      <div class="flex items-center">
-        <label for="sod_completed"> SOD Completed </label>
-        <Checkbox
-          v-model="cancelForm.sod_completed"
-          inputId="sod_completed"
-          name="sod_completed"
-          class="ml-2"
-          :binary="true"
-        />
-      </div>
-      <div>
-        <button
-          type="submit"
-          class="bg-[var(--red-color-base)] text-[#fff] rounded-md py-2 px-3 text-[14px]"
-          :class="{ 'opacity-[0.7]': !cancelForm.cancel_reason }"
-          :disabled="
-            !cancelForm.cancel_reason || useFlightWatchStore().loader.cancel
-          "
-        >
-          Cancel flight
-          <ion-spinner v-if="useFlightWatchStore().loader.cancel" />
-        </button>
-      </div>
-    </form>
-    <form
-      @submit.prevent="useFlightWatchFetches().cancelFlight(removeForm)"
-      class="flex items-center mt-2"
-    >
-      <p>Reason</p>
-      <InputText
-        class="ms-3 me-3 grow"
-        type="text"
-        v-model="removeForm.remove_reason"
-        placeholder="Reason for Removal"
-      />
-      <button
-        type="submit"
-        class="bg-[var(--red-color-base)] text-[#fff] rounded-md py-2 px-3 text-[14px]"
-        :class="{ 'opacity-[0.7]': !removeForm.remove_reason }"
-        :disabled="
-          !removeForm.remove_reason || useFlightWatchStore().loader.cancel
-        "
-      >
-        Remove flight
-        <ion-spinner v-if="useFlightWatchStore().loader.cancel" />
-      </button>
-    </form>
-  </div>
-</template>
-
-<script setup>
-import { useFlightWatchStore } from "~/store/flight-watch";
-
-const props = defineProps({
-  flight: Object,
-});
-
-const cancelForm = ref({
-  flight_id: props.flight.id,
-});
-const removeForm = ref({
-  flight_id: props.flight.id,
-});
-
-const submitCancel = (cancelForm) => {};
-</script>
-
-<style scoped>
-ion-spinner {
-  color: #fff;
-  width: 12px;
-  height: 12px;
-}
-</style>
Index: components/FlightWatch/TabContents/Information/Details/Groups.vue
===================================================================
--- components/FlightWatch/TabContents/Information/Details/Groups.vue	(date 0)
+++ components/FlightWatch/TabContents/Information/Details/Groups.vue	(date 0)
@@ -1,123 +0,0 @@
-<template>
-  <div class="text-[14px]">
-    <div class="mt-3">
-      <p class="text-[18px] font-semibold">Flight Capacity</p>
-      <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
-        <div
-          v-for="(capacity, key) in capacities"
-          :key="key"
-          class="flex items-center"
-        >
-          <p>{{ capacity.title }}</p>
-          <InputNumber
-            class="ms-3 w-full"
-            v-model="flight[capacity.property]"
-          />
-        </div>
-      </div>
-    </div>
-
-    <div class="mt-3">
-      <p class="text-[18px] font-semibold">PAX BKD</p>
-      <div class="grid grid-cols-2 md:grid-cols-5 gap-4">
-        <div
-          v-for="(booked, key) in pax_bookeds"
-          :key="key"
-          class="flex items-center"
-        >
-          <p>{{ booked.title }}</p>
-          <InputNumber class="ms-3 w-full" v-model="flight[booked.property]" />
-        </div>
-      </div>
-    </div>
-
-    <div class="mt-3">
-      <p class="text-[18px] font-semibold">PAX ACT</p>
-      <div class="grid grid-cols-2 md:grid-cols-5 gap-4">
-        <div
-          v-for="(actual, key) in pax_actuals"
-          :key="key"
-          class="flex items-center"
-        >
-          <p>{{ actual.title }}</p>
-          <InputNumber class="ms-3 w-full" v-model="flight[actual.property]" />
-        </div>
-      </div>
-    </div>
-
-    <div class="mt-3">
-      <div class="grid grid-cols-2 md:grid-cols-6 lg:grid-cols-8 gap-4">
-        <div
-          v-for="(detail, key) in more_details"
-          :key="key"
-          class="flex items-center"
-        >
-          <p>{{ detail.title }}</p>
-          <InputNumber class="ms-3 w-full" v-model="flight[detail.property]" />
-        </div>
-      </div>
-    </div>
-
-    <!-- <div class="mt-3">
-      <p class="text-[18px] font-semibold">
-        Fuel
-        <span class="ms-3">
-          <Button label="Update Fuel" />
-        </span>
-      </p>
-
-      <div class="grid grid-cols-2 md:grid-cols-5 gap-4">
-        <div
-          v-for="(actual, key) in pax_actuals"
-          :key="key"
-          class="flex items-center"
-        >
-          <p>{{ actual.title }}</p>
-          <InputNumber class="ms-3 w-full" v-model="flight[actual.property]" />
-        </div>
-      </div>
-    </div> -->
-  </div>
-</template>
-
-<script setup>
-const props = defineProps({
-  flight: Object,
-});
-
-const capacities = ref([
-  { title: "F", property: "capacity_a" },
-  { title: "C", property: "capacity_c" },
-  { title: "W", property: "capacity_w" },
-  { title: "Y", property: "capacity_y" },
-]);
-
-const pax_bookeds = ref([
-  { title: "F", property: "pax_a_booked" },
-  { title: "C", property: "pax_c_booked" },
-  { title: "W", property: "pax_w_booked" },
-  { title: "Y", property: "pax_y_booked" },
-  { title: "INF", property: "pax_inf_booked" },
-]);
-
-const pax_actuals = ref([
-  { title: "F", property: "pax_a_actual" },
-  { title: "C", property: "pax_c_actual" },
-  { title: "W", property: "pax_w_actual" },
-  { title: "Y", property: "pax_y_actual" },
-  { title: "INF", property: "pax_inf_actual" },
-]);
-
-const more_details = ref([
-  { title: "Baggage Pcs", property: "baggage_pcs" },
-  { title: "Wt", property: "baggage" },
-  { title: "Cargo Pcs", property: "cargo_pcs" },
-  { title: "Wt", property: "cargo" },
-  { title: "EIC", property: "eic" },
-  { title: "Mail", property: "mail" },
-  { title: "DE", property: "deportees" },
-  { title: "Gate", property: "gate_boarding" },
-]);
-</script>
-
-<style scoped></style>
Index: components/FlightWatch/TabContents/Information/Details/Airline.vue
===================================================================
--- components/FlightWatch/TabContents/Information/Details/Airline.vue	(date 0)
+++ components/FlightWatch/TabContents/Information/Details/Airline.vue	(date 0)
@@ -1,100 +0,0 @@
-<template>
-  <div class="flex justify-between flex-wrap mt-2 whitespace-nowrap">
-    <div class="flex items-center mb-2">
-      <p class="me-3">Airline/Operator</p>
-      <ion-select
-        interface="popover"
-        placeholder="Select"
-        name="airline_id"
-        v-model="flight.airline_id"
-        required="required"
-        @ion-change="
-          flight.aircraft_type_id = null;
-          flight.aircraft_id = null;
-        "
-        :disabled="flight.manual_operator"
-      >
-        <ion-select-option
-          v-for="(airline, key) in datas.airlines"
-          :key="key"
-          :value="key"
-        >
-          {{ airline }}
-        </ion-select-option>
-      </ion-select>
-    </div>
-    <div class="flex items-center mb-2">
-      <p class="me-3">AC Type</p>
-      <ion-select
-        interface="popover"
-        placeholder="Select AC Type"
-        name="aircraft_type_id"
-        v-model="flight.aircraft_type_id"
-        required="required"
-        @ion-change="flight.aircraft_id = null"
-        :disabled="flight.manual_ac_type"
-      >
-        <ion-select-option
-          v-for="(aircraftType, key) in flight.airline_id
-            ? datas.acTypesByAirline[flight.airline_id]
-            : datas.aircraftTypes"
-          :key="key"
-          :value="aircraftType?.id ?? key"
-        >
-          {{ aircraftType?.name ?? aircraftType }}
-        </ion-select-option>
-      </ion-select>
-    </div>
-    <div class="flex items-center mb-2">
-      <p class="me-3">AC Reg</p>
-      <ion-select
-        interface="popover"
-        placeholder="Select Aircraft"
-        name="aircraft_id"
-        v-model="flight.aircraft_id"
-        required="required"
-        :disabled="flight.manual_ac"
-      >
-        <ion-select-option
-          v-for="(aircraft, key) in flight.aircraft_type_id
-            ? datas.aircraftByType[flight.aircraft_type_id]
-            : datas.aircraft"
-          :key="key"
-          :value="aircraft?.id ?? key"
-        >
-          {{ aircraft?.name ?? aircraft }}
-        </ion-select-option>
-      </ion-select>
-    </div>
-    <div class="flex items-center mb-2">
-      <p class="me-3">Flight Number</p>
-      <ion-select
-        interface="popover"
-        placeholder="Select"
-        name="flight_number_id"
-        v-model="flight.flight_number_id"
-        required="required"
-        :disabled="!flight.airline_id || flight.manual_flt_no"
-      >
-        <ion-select-option
-          v-for="(flightNumber, key) in datas.flightNumbersObj.filter(
-            (item) => item.airline_id == flight.airline_id
-          )"
-          :key="key"
-          :value="flightNumber.id"
-        >
-          {{ flightNumber.sector }}
-        </ion-select-option>
-      </ion-select>
-    </div>
-  </div>
-</template>
-
-<script setup>
-const props = defineProps({
-  flight: Object,
-  datas: Object,
-});
-</script>
-
-<style scoped></style>
Index: components/FlightWatch/TabContents/Information/Details/Datetimes.vue
===================================================================
--- components/FlightWatch/TabContents/Information/Details/Datetimes.vue	(date 0)
+++ components/FlightWatch/TabContents/Information/Details/Datetimes.vue	(date 0)
@@ -1,28 +0,0 @@
-<template>
-  <div class="grid gap-4 whitespace-nowrap mt-5" :class="grid">
-    <div
-      v-for="(datetime, key) in datetimes"
-      :key="key"
-      class="flex items-center mb-3"
-    >
-      <p class="me-3 text-[14px]">{{ datetime.toUpperCase() }}</p>
-      <ChatContentsDatetimePicker
-        :datetime="flight[subProperty ? `${subProperty}${datetime}` : datetime]"
-        @change_datetime="
-          flight[subProperty ? `${subProperty}${datetime}` : datetime] = $event
-        "
-      />
-    </div>
-  </div>
-</template>
-
-<script setup>
-const props = defineProps({
-  flight: Object,
-  datetimes: Array,
-  grid: String,
-  subProperty: String,
-});
-</script>
-
-<style scoped></style>
Index: components/FlightWatch/TabContents/Information/Details/Diversion.vue
===================================================================
--- components/FlightWatch/TabContents/Information/Details/Diversion.vue	(date 0)
+++ components/FlightWatch/TabContents/Information/Details/Diversion.vue	(date 0)
@@ -1,37 +0,0 @@
-<template>
-  <div class="flex items-center mt-3">
-    <div class="flex items-center">
-      <Checkbox
-        v-model="flight.is_diversion"
-        inputId="is_diversion"
-        name="is_diversion"
-        :binary="true"
-      />
-      <label for="is_diversion" class="ml-2"> Diversion </label>
-    </div>
-    <div v-if="flight.is_diversion" class="flex items-center ms-5">
-      <p>Airport</p>
-      <InputText class="ms-3" type="text" v-model="flight.diversion_airport" />
-    </div>
-  </div>
-  <div v-if="flight.is_diversion">
-    <h5 class="font-semibold">Flight to original destination</h5>
-
-    <FlightWatchTabContentsInformationDetailsDatetimes
-      :flight="flight"
-      :datetimes="datetimes"
-      :grid="'grid-cols-1 md:grid-cols-2 lg:grid-cols-4'"
-      :subProperty="'diversion_'"
-    />
-  </div>
-</template>
-
-<script setup>
-const props = defineProps({
-  flight: Object,
-});
-
-const datetimes = ref(["ptd", "etd", "atd", "abn", "pta", "eta", "tdn", "ata"]);
-</script>
-
-<style scoped></style>
