Alisa/web/src/components/HeaderBar.vue

  <template>
  <div>
    <v-toolbar color="main" dark prominent>
      <img src="../assets/turbologo.svg" alt="logo" class="logo" width="75" />
      <v-spacer></v-spacer>
      <!-- Create, Delete, Edit -->
      <div>
        <v-btn icon class="mr-3" @click="add = true">
          <Plus />
        </v-btn>
        <v-dialog v-model="add" width="600" persistent>
          <v-card max-width="600">
            <v-form @submit.prevent="submit">
              <v-card-title>
                <span class="headline">Add License</span>
              </v-card-title>
              <v-card-subtitle>
                <span> Add an extra License to the database</span>
              </v-card-subtitle>
              <v-card-text>
                <div>
                  <v-text-field
                    label="License Name *"
                    v-model="addLicenseName"
                    variant="outlined"
                    required
                    clearable
                    :rules="licenseNameRules"
                    class="mb-3"
                  ></v-text-field>
                  <div>
                    <div class="mb-3">
                      <v-menu>
                        <template v-slot:activator="{ props }">
                          <v-text-field
                            v-bind="props"
                            label="Start Date (optional)"
                            variant="outlined"
                            :model-value="addStartDateDisplay"
                            @click:clear="(event: Event) => addStartDate = undefined"
                            readonly
                            clearable
                            hide-details
                          >
                          </v-text-field>
                        </template>
                        <v-date-picker
                          v-model="addStartDate"
                          show-adjacent-months
                        ></v-date-picker>
                      </v-menu>
                    </div>
                    <div class="mb-5">
                      <v-menu>
                        <template v-slot:activator="{ props }">
                          <v-text-field
                            v-bind="props"
                            label="Stop Date (optional)"
                            variant="outlined"
                            :model-value="addStopDateDisplay"
                            @click:clear="(event: Event) => addStopDate = undefined"
                            readonly
                            clearable
                            hide-details
                          >
                          </v-text-field>
                        </template>
                        <v-date-picker
                          v-model="addStopDate"
                          show-adjacent-months
                        ></v-date-picker>
                      </v-menu>
                    </div>
                  </div>
                  <v-number-input
                    label="Amount (optional)"
                    variant="outlined"
                    clearable
                    :min="0"
                    v-model="addAmount"
                  >
                  </v-number-input>
                  <v-text-field
                    label="Notes (optional)"
                    v-model="addNotes"
                    variant="outlined"
                    clearable
                  ></v-text-field>
                  <span class="dialogNote">
                    all fields marked with * are required
                  </span>
                </div>
              </v-card-text>
              <v-card-actions>
                <v-row>
                  <v-col cols="10" align="right" no-gutters>
                    <v-btn
                      class="ms-auto"
                      text="Cancel"
                      @click="add = false"
                    ></v-btn>
                  </v-col>
                  <v-col>
                    <v-btn class="ms-auto" text="Add" type="submit"></v-btn>
                  </v-col>
                </v-row>
              </v-card-actions>
            </v-form>
          </v-card>
        </v-dialog>

        <v-btn icon class="mr-3">
          <Pencil />
        </v-btn>
      </div>

      <!-- Search -->
      <v-text-field
        class="compact-form mr-2"
        label="Search"
        variant="solo"
        density="compact"
        prepend-inner-icon="mdi-magnify"
        hide-details
        single-line
        clearable
        rounded="pill"
      ></v-text-field>

      <!-- Logout -->
      <v-btn icon variant="outlined" @click="handlelogout">
        <LogOut />
      </v-btn>
    </v-toolbar>
  </div>
</template>

<script setup lang="ts">
import { store } from "@/store";
import { SubmitEventPromise } from "vuetify";
import { computed, ref } from "vue";
import {
  Plus,
  LogOut,
  Pencil,
  CalendarCheck,
  CalendarX,
} from "lucide-vue-next";

function handlelogout() {
  console.log("logout");
  store.setToken(null);
} 

async function submit(event: SubmitEventPromise) {
  const result = await event;
  console.log(result);
}

const add = ref(false);
// References for Add License Dialog
const addLicenseName = ref<string>("");
const licenseNameRules = [
  (value: string) => {
    if (value) return true;

    return "YOU MUST ENTER (A LICENSE NAME)";
  },
];
const addAmount = ref<number | undefined>();
const addNotes = ref<string | undefined>("");

// Date Picker
const addStartDate = ref<Date | undefined>();
const addStartDateDisplay = computed<string>(() =>
  addStartDate.value ? addStartDate.value.toLocaleDateString() : ""
);
const addStopDate = ref<Date | undefined>();
const addStopDateDisplay = computed<string>(() =>
  addStopDate.value ? addStopDate.value.toLocaleDateString() : ""
);
</script>

<style scoped>
.logo {
  margin-right: 20%;
  margin-left: 10px;
}

.dialogNote {
  font-size: 13px;
  color: grey;
}
</style>