Inventory/app/app.vue

<template>
  <div class="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100">
    <!-- Navbar -->
    <div class="navbar bg-base-100 shadow-lg">
      <div class="navbar-start">
        <div class="dropdown">
          <div tabindex="0" role="button" class="btn btn-ghost lg:hidden">
            <IconLucideMenu class="w-5 h-5" aria-hidden="true" />
          </div>
          <ul
            tabindex="0"
            class="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow bg-base-100 rounded-box w-52"
          >
            <li class="pt-1 pb-2 lg:hidden">
              <button
                class="w-full flex items-center gap-2 rounded-md px-2 py-1 transition-colors text-base-content hover:bg-primary/10 hover:text-primary"
                @click="openDisplaySettings"
              >
                <IconLucideSettings class="w-4 h-4" aria-hidden="true" />
                Paramètres d'affichage
              </button>
            </li>
            <li>
              <NuxtLink
                to="/"
                class="rounded-md px-2 py-1 transition-colors"
                :class="
                  isActive('/')
                    ? 'bg-primary text-primary-content font-semibold shadow-sm'
                    : 'text-base-content hover:bg-primary/10 hover:text-primary'
                "
              >
                Vue d'ensemble
              </NuxtLink>
            </li>
            <li>
              <NuxtLink
                to="/machines"
                class="rounded-md px-2 py-1 transition-colors"
                :class="
                  isActive('/machines')
                    ? 'bg-primary text-primary-content font-semibold shadow-sm'
                    : 'text-base-content hover:bg-primary/10 hover:text-primary'
                "
              >
                Parc Machines
              </NuxtLink>
            </li>
            <li>
              <NuxtLink
                to="/machine-skeleton"
                class="rounded-md px-2 py-1 transition-colors"
                :class="
                  isActive('/machine-skeleton')
                    ? 'bg-primary text-primary-content font-semibold shadow-sm'
                    : 'text-base-content hover:bg-primary/10 hover:text-primary'
                "
              >
                Squelettes de machine
              </NuxtLink>
            </li>
            <li
              class="dropdown"
              :class="{ 'dropdown-open': openDropdown === 'pieces-mobile' }"
              @mouseenter="setDropdown('pieces-mobile')"
              @mouseleave="scheduleDropdownClose('pieces-mobile')"
              @focusin="setDropdown('pieces-mobile')"
              @focusout="scheduleDropdownClose('pieces-mobile')"
            >
              <div
                tabindex="0"
                role="button"
                class="rounded-md px-2 py-1 transition-colors cursor-pointer"
                @click="toggleDropdown('pieces-mobile')"
                @keydown.enter.prevent="toggleDropdown('pieces-mobile')"
                @keydown.space.prevent="toggleDropdown('pieces-mobile')"
                :class="
                  isActive('/pieces-catalog') || isActive('/piece-category')
                    ? 'bg-primary text-primary-content font-semibold shadow-sm'
                    : 'text-base-content hover:bg-primary/10 hover:text-primary'
                "
              >
                Pièces
              </div>
              <ul
                tabindex="0"
                class="dropdown-content z-[1] menu menu-sm bg-base-100 rounded-box p-2 shadow space-y-1"
              >
                <li>
                  <NuxtLink
                    to="/piece-category"
                    class="rounded-md px-2 py-1 transition-colors"
                    :class="
                      isActive('/piece-category')
                        ? 'bg-primary/10 text-primary font-semibold'
                        : 'text-base-content hover:bg-primary/10 hover:text-primary'
                    "
                  >
                    Catégorie de pièce
                  </NuxtLink>
                </li>
                <li>
                  <NuxtLink
                    to="/pieces-catalog"
                    class="rounded-md px-2 py-1 transition-colors"
                    :class="
                      isActive('/pieces-catalog')
                        ? 'bg-primary/10 text-primary font-semibold'
                        : 'text-base-content hover:bg-primary/10 hover:text-primary'
                    "
                  >
                    Catalogue de pièce
                  </NuxtLink>
                </li>
              </ul>
            </li>
            <li
              class="dropdown"
              :class="{ 'dropdown-open': openDropdown === 'component-mobile' }"
              @mouseenter="setDropdown('component-mobile')"
              @mouseleave="scheduleDropdownClose('component-mobile')"
              @focusin="setDropdown('component-mobile')"
              @focusout="scheduleDropdownClose('component-mobile')"
            >
              <div
                tabindex="0"
                role="button"
                class="rounded-md px-2 py-1 transition-colors cursor-pointer"
                @click="toggleDropdown('component-mobile')"
                @keydown.enter.prevent="toggleDropdown('component-mobile')"
                @keydown.space.prevent="toggleDropdown('component-mobile')"
                :class="
                  isActive('/component-catalog') ||
                  isActive('/component-category')
                    ? 'bg-primary text-primary-content font-semibold shadow-sm'
                    : 'text-base-content hover:bg-primary/10 hover:text-primary'
                "
              >
                Composant
              </div>
              <ul
                tabindex="0"
                class="dropdown-content z-[1] menu menu-sm bg-base-100 rounded-box p-2 shadow space-y-1"
              >
                <li>
                  <NuxtLink
                    to="/component-category"
                    class="rounded-md px-2 py-1 transition-colors"
                    :class="
                      isActive('/component-category')
                        ? 'bg-primary/10 text-primary font-semibold'
                        : 'text-base-content hover:bg-primary/10 hover:text-primary'
                    "
                  >
                    Catégorie de composant
                  </NuxtLink>
                </li>
                <li>
                  <NuxtLink
                    to="/component-catalog"
                    class="rounded-md px-2 py-1 transition-colors"
                    :class="
                      isActive('/component-catalog')
                        ? 'bg-primary/10 text-primary font-semibold'
                        : 'text-base-content hover:bg-primary/10 hover:text-primary'
                    "
                  >
                    Catalogue de composant
                  </NuxtLink>
                </li>
              </ul>
            </li>
            <li
              class="dropdown"
              :class="{ 'dropdown-open': openDropdown === 'resources-mobile' }"
              @mouseenter="setDropdown('resources-mobile')"
              @mouseleave="scheduleDropdownClose('resources-mobile')"
              @focusin="setDropdown('resources-mobile')"
              @focusout="scheduleDropdownClose('resources-mobile')"
            >
              <div
                tabindex="0"
                role="button"
                class="rounded-md px-2 py-1 transition-colors cursor-pointer"
                @click="toggleDropdown('resources-mobile')"
                @keydown.enter.prevent="toggleDropdown('resources-mobile')"
                @keydown.space.prevent="toggleDropdown('resources-mobile')"
                :class="
                  isActive('/sites') ||
                  isActive('/documents') ||
                  isActive('/constructeurs')
                    ? 'bg-primary text-primary-content font-semibold shadow-sm'
                    : 'text-base-content hover:bg-primary/10 hover:text-primary'
                "
              >
                Ressources liées
              </div>
              <ul
                tabindex="0"
                class="dropdown-content z-[1] menu menu-sm bg-base-100 rounded-box p-2 shadow space-y-1"
              >
                <li>
                  <NuxtLink
                    to="/sites"
                    class="rounded-md px-2 py-1 transition-colors"
                    :class="
                      isActive('/sites')
                        ? 'bg-primary/10 text-primary font-semibold'
                        : 'text-base-content hover:bg-primary/10 hover:text-primary'
                    "
                  >
                    Sites
                  </NuxtLink>
                </li>
                <li>
                  <NuxtLink
                    to="/documents"
                    class="rounded-md px-2 py-1 transition-colors"
                    :class="
                      isActive('/documents')
                        ? 'bg-primary/10 text-primary font-semibold'
                        : 'text-base-content hover:bg-primary/10 hover:text-primary'
                    "
                  >
                    Documents
                  </NuxtLink>
                </li>
                <li>
                  <NuxtLink
                    to="/constructeurs"
                    class="rounded-md px-2 py-1 transition-colors"
                    :class="
                      isActive('/constructeurs')
                        ? 'bg-primary/10 text-primary font-semibold'
                        : 'text-base-content hover:bg-primary/10 hover:text-primary'
                    "
                  >
                    Constructeurs
                  </NuxtLink>
                </li>
              </ul>
            </li>
          </ul>
        </div>
        <div class="flex items-center space-x-3">
          <div class="avatar placeholder">
            <div
              class="bg-primary text-primary-content rounded-lg w-10 grid place-items-center"
            >
              <IconLucideBoxes class="w-6 h-6" aria-hidden="true" />
            </div>
          </div>
          <NuxtLink to="/" class="btn btn-ghost text-xl">
            Inventaire Pro
          </NuxtLink>
        </div>
      </div>
      <div class="navbar-center hidden lg:flex">
        <ul class="menu menu-horizontal px-1">
          <li>
            <NuxtLink
              to="/"
              class="transition-colors px-3 py-2 rounded-md"
              :class="
                isActive('/')
                  ? 'bg-primary text-primary-content font-semibold shadow-sm'
                  : 'text-base-content hover:bg-primary/10 hover:text-primary'
              "
            >
              Vue d'ensemble
            </NuxtLink>
          </li>
          <li>
            <NuxtLink
              to="/machines"
              class="transition-colors px-3 py-2 rounded-md"
              :class="
                isActive('/machines')
                  ? 'bg-primary text-primary-content font-semibold shadow-sm'
                  : 'text-base-content hover:bg-primary/10 hover:text-primary'
              "
            >
              Parc Machines
            </NuxtLink>
          </li>
          <li>
            <NuxtLink
              to="/machine-skeleton"
              class="transition-colors px-3 py-2 rounded-md"
              :class="
                isActive('/machine-skeleton')
                  ? 'bg-primary text-primary-content font-semibold shadow-sm'
                  : 'text-base-content hover:bg-primary/10 hover:text-primary'
              "
            >
              Squelettes de machine
            </NuxtLink>
          </li>
          <li
            class="dropdown"
            :class="{ 'dropdown-open': openDropdown === 'pieces-desktop' }"
            @mouseenter="setDropdown('pieces-desktop')"
            @mouseleave="scheduleDropdownClose('pieces-desktop')"
            @focusin="setDropdown('pieces-desktop')"
            @focusout="scheduleDropdownClose('pieces-desktop')"
          >
          <div
            tabindex="0"
            role="button"
            class="transition-colors px-3 py-2 rounded-md inline-flex items-center gap-1 cursor-pointer"
            @click="toggleDropdown('pieces-desktop')"
            @keydown.enter.prevent="toggleDropdown('pieces-desktop')"
            @keydown.space.prevent="toggleDropdown('pieces-desktop')"
            :class="
              isActive('/pieces-catalog') || isActive('/piece-category')
                ? 'bg-primary text-primary-content font-semibold shadow-sm'
                  : 'text-base-content hover:bg-primary/10 hover:text-primary'
              "
            >
              Pièces
            </div>
            <ul
              tabindex="0"
              class="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-60"
            >
              <li>
                <NuxtLink
                  to="/piece-category"
                  class="rounded-md px-2 py-1 transition-colors"
                  :class="
                    isActive('/piece-category')
                      ? 'bg-primary/10 text-primary font-semibold'
                      : 'text-base-content hover:bg-primary/10 hover:text-primary'
                  "
                >
                  Catégorie de pièce
                </NuxtLink>
              </li>
              <li>
                <NuxtLink
                  to="/pieces-catalog"
                  class="rounded-md px-2 py-1 transition-colors"
                  :class="
                    isActive('/pieces-catalog')
                      ? 'bg-primary/10 text-primary font-semibold'
                      : 'text-base-content hover:bg-primary/10 hover:text-primary'
                  "
                >
                  Catalogue de pièce
                </NuxtLink>
              </li>
            </ul>
          </li>
          <li
            class="dropdown"
            :class="{ 'dropdown-open': openDropdown === 'component-desktop' }"
            @mouseenter="setDropdown('component-desktop')"
            @mouseleave="scheduleDropdownClose('component-desktop')"
            @focusin="setDropdown('component-desktop')"
            @focusout="scheduleDropdownClose('component-desktop')"
          >
          <div
            tabindex="0"
            role="button"
            class="transition-colors px-3 py-2 rounded-md inline-flex items-center gap-1 cursor-pointer"
            @click="toggleDropdown('component-desktop')"
            @keydown.enter.prevent="toggleDropdown('component-desktop')"
            @keydown.space.prevent="toggleDropdown('component-desktop')"
            :class="
              isActive('/component-category') ||
              isActive('/component-catalog')
                  ? 'bg-primary text-primary-content font-semibold shadow-sm'
                  : 'text-base-content hover:bg-primary/10 hover:text-primary'
              "
            >
              Composant
            </div>
            <ul
              tabindex="0"
              class="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-64"
            >
              <li>
                <NuxtLink
                  to="/component-category"
                  class="rounded-md px-2 py-1 transition-colors"
                  :class="
                    isActive('/component-category')
                      ? 'bg-primary/10 text-primary font-semibold'
                      : 'text-base-content hover:bg-primary/10 hover:text-primary'
                  "
                >
                  Catégorie de composant
                </NuxtLink>
              </li>
              <li>
                <NuxtLink
                  to="/component-catalog"
                  class="rounded-md px-2 py-1 transition-colors"
                  :class="
                    isActive('/component-catalog')
                      ? 'bg-primary/10 text-primary font-semibold'
                      : 'text-base-content hover:bg-primary/10 hover:text-primary'
                  "
                >
                  Catalogue de composant
                </NuxtLink>
              </li>
            </ul>
          </li>
          <li
            class="dropdown"
            :class="{ 'dropdown-open': openDropdown === 'resources-desktop' }"
            @mouseenter="setDropdown('resources-desktop')"
            @mouseleave="scheduleDropdownClose('resources-desktop')"
            @focusin="setDropdown('resources-desktop')"
            @focusout="scheduleDropdownClose('resources-desktop')"
          >
          <div
            tabindex="0"
            role="button"
            class="transition-colors px-3 py-2 rounded-md inline-flex items-center gap-1 cursor-pointer"
            @click="toggleDropdown('resources-desktop')"
            @keydown.enter.prevent="toggleDropdown('resources-desktop')"
            @keydown.space.prevent="toggleDropdown('resources-desktop')"
            :class="
              isActive('/sites') ||
              isActive('/documents') ||
                isActive('/constructeurs')
                  ? 'bg-primary text-primary-content font-semibold shadow-sm'
                  : 'text-base-content hover:bg-primary/10 hover:text-primary'
              "
            >
              Ressources liées
            </div>
            <ul
              tabindex="0"
              class="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-60"
            >
              <li>
                <NuxtLink
                  to="/sites"
                  class="rounded-md px-2 py-1 transition-colors"
                  :class="
                    isActive('/sites')
                      ? 'bg-primary/10 text-primary font-semibold'
                      : 'text-base-content hover:bg-primary/10 hover:text-primary'
                  "
                >
                  Sites
                </NuxtLink>
              </li>
              <li>
                <NuxtLink
                  to="/documents"
                  class="rounded-md px-2 py-1 transition-colors"
                  :class="
                    isActive('/documents')
                      ? 'bg-primary/10 text-primary font-semibold'
                      : 'text-base-content hover:bg-primary/10 hover:text-primary'
                  "
                >
                  Documents
                </NuxtLink>
              </li>
              <li>
                <NuxtLink
                  to="/constructeurs"
                  class="rounded-md px-2 py-1 transition-colors"
                  :class="
                    isActive('/constructeurs')
                      ? 'bg-primary/10 text-primary font-semibold'
                      : 'text-base-content hover:bg-primary/10 hover:text-primary'
                  "
                >
                  Constructeurs
                </NuxtLink>
              </li>
            </ul>
          </li>
        </ul>
      </div>
      <div class="navbar-end">
        <div class="flex items-center gap-2">
          <!-- Bouton paramètres d'affichage -->
          <button
            class="btn btn-ghost btn-circle hidden lg:inline-flex"
            title="Paramètres d'affichage"
            @click="openDisplaySettings"
          >
            <IconLucideSettings class="w-5 h-5" aria-hidden="true" />
          </button>

          <ClientOnly>
            <div v-if="activeProfile" class="dropdown dropdown-end">
              <div
                tabindex="0"
                role="button"
                class="btn btn-ghost btn-circle avatar placeholder"
              >
                <div
                  class="bg-secondary text-secondary-content rounded-full w-10 h-10 grid place-items-center"
                >
                  <span
                    class="flex h-full w-full items-center justify-center text-sm font-semibold leading-none tracking-tight"
                  >
                    {{ activeProfileInitials }}
                  </span>
                </div>
              </div>
              <ul
                tabindex="0"
                class="menu dropdown-content mt-3 p-2 shadow bg-base-100 rounded-box w-64"
              >
                <li class="px-2 py-1 text-sm text-base-content/70">
                  Connecté en tant que<br />
                  <span class="font-semibold text-base-content">{{
                    activeProfileLabel
                  }}</span>
                </li>

                <li>
                  <NuxtLink to="/profiles/manage" class="justify-between">
                    Gestion des profils
                    <IconLucideChevronRight
                      class="w-4 h-4"
                      aria-hidden="true"
                    />
                  </NuxtLink>
                </li>
                <li>
                  <button
                    type="button"
                    class="text-error justify-between"
                    @click="handleLogout"
                  >
                    Déconnexion
                    <IconLucideLogOut class="w-4 h-4" aria-hidden="true" />
                  </button>
                </li>
              </ul>
            </div>
          </ClientOnly>
        </div>
      </div>
    </div>

    <!-- Page Content -->
    <NuxtPage />

    <!-- Toast Notifications -->
    <ToastContainer />

    <!-- Paramètres d'affichage -->
    <DisplaySettings
      :is-open="displaySettingsOpen"
      @close="closeDisplaySettings"
      @update-settings="handleSettingsUpdate"
    />

    <!-- Footer -->
    <footer class="footer p-4 bg-neutral text-neutral-content">
      <div class="items-center grid-flow-col">
        <p>@Malio 2025</p>
      </div>
    </footer>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from "vue";
import { useRoute, navigateTo } from "#imports";
import { useProfileSession } from "~/composables/useProfileSession";
import IconLucideMenu from "~icons/lucide/menu";
import IconLucideSettings from "~icons/lucide/settings";
import IconLucideBoxes from "~icons/lucide/boxes";
import IconLucidePlus from "~icons/lucide/plus";
import IconLucideCpu from "~icons/lucide/cpu";
import IconLucideFilePlus from "~icons/lucide/file-plus";
import IconLucideMapPin from "~icons/lucide/map-pin";
import IconLucideChevronRight from "~icons/lucide/chevron-right";
import IconLucideLogOut from "~icons/lucide/log-out";

// État du modal des paramètres d'affichage
const displaySettingsOpen = ref(false);
const { activeProfile, ensureSession, logout } = useProfileSession();

// Route active pour souligner l'onglet sélectionné dans la navbar
const route = useRoute();
const isActive = (path) => {
  if (path === "/") {
    return route.path === "/";
  }
  return route.path.startsWith(path);
};

// Ouvrir les paramètres d'affichage
const openDisplaySettings = () => {
  displaySettingsOpen.value = true;
};

// Fermer les paramètres d'affichage
const closeDisplaySettings = () => {
  displaySettingsOpen.value = false;
};

// Gérer les mises à jour des paramètres
const handleSettingsUpdate = (settings) => {
  console.log("Paramètres d'affichage mis à jour:", settings);
};

const handleLogout = async () => {
  await logout();
  await navigateTo("/profiles");
};

const openDropdown = ref(null);
let dropdownCloseTimer = null;

const setDropdown = (name) => {
  if (dropdownCloseTimer) {
    clearTimeout(dropdownCloseTimer);
    dropdownCloseTimer = null;
  }
  if (openDropdown.value !== name) {
    openDropdown.value = name;
  }
};

const scheduleDropdownClose = (name) => {
  if (dropdownCloseTimer) {
    clearTimeout(dropdownCloseTimer);
  }
  dropdownCloseTimer = setTimeout(() => {
    if (openDropdown.value === name) {
      openDropdown.value = null;
    }
    dropdownCloseTimer = null;
  }, 200);
};

const closeDropdownNow = () => {
  if (dropdownCloseTimer) {
    clearTimeout(dropdownCloseTimer);
    dropdownCloseTimer = null;
  }
  openDropdown.value = null;
};

const toggleDropdown = (name) => {
  if (openDropdown.value === name) {
    closeDropdownNow();
    return;
  }
  setDropdown(name);
};

const activeProfileLabel = computed(() => {
  if (!activeProfile.value) {
    return "Profil inconnu";
  }
  return `${activeProfile.value.firstName} ${activeProfile.value.lastName}`;
});

const activeProfileInitials = computed(() => {
  if (!activeProfile.value) {
    return "??";
  }
  const { firstName = "", lastName = "" } = activeProfile.value;
  return (
    `${firstName.charAt(0) || ""}${lastName.charAt(0) || ""}`.toUpperCase() ||
    "??"
  );
});

onMounted(async () => {
  await ensureSession();
});

onUnmounted(() => {
  if (dropdownCloseTimer) {
    clearTimeout(dropdownCloseTimer);
    dropdownCloseTimer = null;
  }
});
</script>