Initial commit

web/src/layouts/AdministrationLayout.vue

@@ -0,0 +1,49 @@
+<template>
+  <v-layout>
+    <DefaultAppBar @toggle-ai-panel="showAiPanel = !showAiPanel" />
+    <!--
+    <LeftSidebarNavigationDrawer /> -->
+
+    <v-main>
+      <!-- Provides the application the proper gutter -->
+      <v-container
+        fluid
+        class="h-100"
+      >
+        <h2 class="text-h3 mt-3">{{ title }}</h2>
+        <ExactingBreadcrumbs
+          class="pl-0 pt-2 mb-1"
+          :items="breadcrumbs"
+        />
+
+        <router-view />
+      </v-container>
+    </v-main>
+
+    <AiChatPanel
+      v-if="showAiPanel"
+      v-model="showAiPanel"
+    />
+  </v-layout>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue"
+
+import useBreadcrumbs from "@/use/use-breadcrumbs"
+
+import DefaultAppBar from "@/components/layout/DefaultAppBar.vue"
+import ExactingBreadcrumbs from "@/components/layout/ExactingBreadcrumbs.vue"
+//import LeftSidebarNavigationDrawer from "@/components/administration-layout/LeftSidebarNavigationDrawer.vue"
+
+const { title, breadcrumbs } = useBreadcrumbs(undefined, undefined, {
+  baseCrumb: {
+    title: "Administration Dashboard",
+    to: {
+      name: "administration/AdministrationDashboardPage",
+    },
+  },
+})
+
+const showAiPanel = ref(false)
+</script>

web/src/layouts/DefaultLayout.vue

@@ -0,0 +1,22 @@
+<template>
+  <v-app>
+    <DefaultAppBar />
+
+    <v-main>
+      <v-container
+        fluid
+        :class="mobile ? 'pa-2' : 'pa-4'"
+      >
+        <router-view />
+      </v-container>
+    </v-main>
+  </v-app>
+</template>
+
+<script setup lang="ts">
+import { useDisplay } from "vuetify"
+
+import DefaultAppBar from "@/components/layout/DefaultAppBar.vue"
+
+const { mobile } = useDisplay()
+</script>

web/src/layouts/LayoutWithBreadcrumbs.vue

@@ -0,0 +1,69 @@
+<template>
+  <v-row>
+    <v-col style="position: relative">
+      <div class="d-flex align-start justify-space-between">
+        <div class="flex-grow-1">
+          <h2 class="text-h3 mb-n2">
+            {{ title }}
+          </h2>
+
+          <ExactingBreadcrumbs
+            class="pl-0 pt-2 mb-1"
+            :items="breadcrumbs"
+          />
+        </div>
+        <v-btn
+          v-if="showBackButton && !mobile"
+          variant="tonal"
+          prepend-icon="mdi-arrow-left"
+          size="small"
+          class="ml-2 mt-4"
+          color="warning"
+          @click="router.back()"
+        >
+          Back
+        </v-btn>
+      </div>
+      <div
+        v-if="showBackButton && mobile"
+        class="mt-n5"
+      >
+        <a
+          class="d-inline-flex align-center text-primary text-decoration-none"
+          href="#"
+          @click.prevent="router.back()"
+        >
+          <v-icon
+            size="small"
+            class="mr-1"
+          >
+            mdi-arrow-left
+          </v-icon>
+          Back
+        </a>
+      </div>
+    </v-col>
+  </v-row>
+  <router-view />
+</template>
+
+<script lang="ts" setup>
+import ExactingBreadcrumbs from "@/components/layout/ExactingBreadcrumbs.vue"
+
+import useBreadcrumbs from "@/use/use-breadcrumbs"
+
+import { useDisplay } from "vuetify"
+import { useRouter } from "vue-router"
+
+const { mobile } = useDisplay()
+const router = useRouter()
+
+const { title, breadcrumbs, showBackButton } = useBreadcrumbs(undefined, undefined, {
+  baseCrumb: {
+    title: "Dashboard",
+    to: {
+      name: "DashboardPage",
+    },
+  },
+})
+</script>

web/src/layouts/ProfileLayout.vue

@@ -0,0 +1,33 @@
+<template>
+  <v-row>
+    <v-col>
+      <UserProfileCard :user-id="currentUser.id" />
+    </v-col>
+  </v-row>
+
+  <v-row>
+    <v-col>
+      <router-view />
+    </v-col>
+  </v-row>
+</template>
+
+<script lang="ts" setup>
+import useBreadcrumbs from "@/use/use-breadcrumbs"
+import useCurrentUser from "@/use/use-current-user"
+
+import UserProfileCard from "@/components/users/UserProfileCard.vue"
+
+const { currentUser } = useCurrentUser<true>()
+
+useBreadcrumbs("My Profile", [
+  {
+    title: "My Profile",
+    to: {
+      name: "ProfilePage",
+    },
+  },
+])
+</script>
+
+<style scoped></style>

web/src/layouts/logo/AppLogo.vue

@@ -0,0 +1,50 @@
+<template>
+  <div class="logo">
+    <RouterLink
+      to="/dashboard"
+      class="d-flex"
+    >
+      <img
+        class="ml-0 mt-1"
+        style="height: 36px; transform: rotate(-12deg)"
+        :src="AlphaneLogo"
+      />
+      <div v-if="sidebarMini || mdAndDown"></div>
+      <div
+        v-else
+        class="d-flex"
+        style="width: 200px"
+      >
+        <div
+          class="mt-1 ml-3"
+          style="font-size: 26px; color: #505682"
+        >
+          ALPHANE
+        </div>
+      </div>
+    </RouterLink>
+  </div>
+</template>
+
+<script setup>
+import AlphaneLogo from "@/assets/alphane_logo_small.png"
+
+import { useDisplay } from "vuetify"
+import useInterface from "@/use/use-interface"
+import { watch } from "vue"
+
+const { sidebarMini, setSidebarMini } = useInterface()
+const { mdAndDown } = useDisplay()
+
+watch(mdAndDown, (newVal) => {
+  if (newVal === true) setSidebarMini(false)
+})
+</script>
+
+<style>
+.logo a {
+  text-decoration: none !important;
+  color: #fff;
+  font-weight: 500;
+}
+</style>