MALIO-DEV/Inventory
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 2 Wiki Activity

Rename dashboard

Browse Source
This commit is contained in:
Matthieu
2025-09-25 16:22:14 +02:00
parent d1ce074c6d
commit b7caa4f552
2 changed files with 580 additions and 298 deletions
Download Patch File Download Diff File Expand all files Collapse all files

364
app/app.vue
View File

@@ -7,7 +7,10 @@
<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">
<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
@click="openDisplaySettings"
@@ -21,16 +24,24 @@
<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'"
:class="
isActive('/')
? 'bg-primary text-primary-content font-semibold shadow-sm'
: 'text-base-content hover:bg-primary/10 hover:text-primary'
"
>
Dashboard
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'"
: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>
@@ -39,7 +50,11 @@
<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'"
: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>
@@ -56,16 +71,27 @@
tabindex="0"
role="button"
class="rounded-md px-2 py-1 transition-colors cursor-pointer"
: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'"
: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">
<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'"
: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>
@@ -74,7 +100,11 @@
<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'"
: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>
@@ -93,16 +123,28 @@
tabindex="0"
role="button"
class="rounded-md px-2 py-1 transition-colors cursor-pointer"
: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'"
: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">
<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'"
: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>
@@ -111,7 +153,11 @@
<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'"
: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>
@@ -130,16 +176,29 @@
tabindex="0"
role="button"
class="rounded-md px-2 py-1 transition-colors cursor-pointer"
: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'"
: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">
<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'"
:class="
isActive('/sites')
? 'bg-primary/10 text-primary font-semibold'
: 'text-base-content hover:bg-primary/10 hover:text-primary'
"
>
Sites
</NuxtLink>
@@ -148,7 +207,11 @@
<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'"
:class="
isActive('/documents')
? 'bg-primary/10 text-primary font-semibold'
: 'text-base-content hover:bg-primary/10 hover:text-primary'
"
>
Documents
</NuxtLink>
@@ -157,7 +220,11 @@
<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'"
:class="
isActive('/constructeurs')
? 'bg-primary/10 text-primary font-semibold'
: 'text-base-content hover:bg-primary/10 hover:text-primary'
"
>
Constructeurs
</NuxtLink>
@@ -168,11 +235,15 @@
</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">
<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>
<NuxtLink to="/" class="btn btn-ghost text-xl"
>Inventaire Pro</NuxtLink
>
</div>
</div>
<div class="navbar-center hidden lg:flex">
@@ -181,16 +252,24 @@
<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'"
:class="
isActive('/')
? 'bg-primary text-primary-content font-semibold shadow-sm'
: 'text-base-content hover:bg-primary/10 hover:text-primary'
"
>
Dashboard
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'"
: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>
@@ -199,7 +278,11 @@
<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'"
: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>
@@ -216,16 +299,27 @@
tabindex="0"
role="button"
class="transition-colors px-3 py-2 rounded-md inline-flex items-center gap-1 cursor-pointer"
: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'"
: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">
<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'"
: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>
@@ -234,7 +328,11 @@
<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'"
: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>
@@ -253,16 +351,28 @@
tabindex="0"
role="button"
class="transition-colors px-3 py-2 rounded-md inline-flex items-center gap-1 cursor-pointer"
: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'"
: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">
<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'"
: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>
@@ -271,7 +381,11 @@
<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'"
: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>
@@ -290,16 +404,29 @@
tabindex="0"
role="button"
class="transition-colors px-3 py-2 rounded-md inline-flex items-center gap-1 cursor-pointer"
: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'"
: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">
<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'"
:class="
isActive('/sites')
? 'bg-primary/10 text-primary font-semibold'
: 'text-base-content hover:bg-primary/10 hover:text-primary'
"
>
Sites
</NuxtLink>
@@ -308,7 +435,11 @@
<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'"
:class="
isActive('/documents')
? 'bg-primary/10 text-primary font-semibold'
: 'text-base-content hover:bg-primary/10 hover:text-primary'
"
>
Documents
</NuxtLink>
@@ -317,7 +448,11 @@
<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'"
:class="
isActive('/constructeurs')
? 'bg-primary/10 text-primary font-semibold'
: 'text-base-content hover:bg-primary/10 hover:text-primary'
"
>
Constructeurs
</NuxtLink>
@@ -329,23 +464,29 @@
<div class="navbar-end">
<div class="flex items-center gap-2">
<!-- Bouton paramètres d'affichage -->
<button
@click="openDisplaySettings"
<button
@click="openDisplaySettings"
class="btn btn-ghost btn-circle hidden lg:inline-flex"
title="Paramètres d'affichage"
>
<IconLucideSettings class="w-5 h-5" aria-hidden="true" />
</button>
<!-- Menu Nouveau -->
<div class="dropdown dropdown-end">
<div tabindex="0" role="button" class="btn btn-primary">
<IconLucidePlus class="w-5 h-5 mr-2" aria-hidden="true" />
Nouveau
</div>
<ul tabindex="0" class="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-52">
<ul
tabindex="0"
class="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-52"
>
<li>
<NuxtLink to="/machines?add=true" class="flex items-center gap-2">
<NuxtLink
to="/machines?add=true"
class="flex items-center gap-2"
>
<IconLucideCpu class="w-4 h-4" aria-hidden="true" />
Nouvelle Machine
</NuxtLink>
@@ -367,8 +508,14 @@
<ClientOnly>
<div class="dropdown dropdown-end" v-if="activeProfile">
<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">
<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"
>
@@ -376,20 +523,32 @@
</span>
</div>
</div>
<ul tabindex="0" class="menu dropdown-content mt-3 p-2 shadow bg-base-100 rounded-box w-64">
<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>
<span class="font-semibold text-base-content">{{
activeProfileLabel
}}</span>
</li>
<li><hr class="my-1" /></li>
<li>
<NuxtLink to="/profiles/manage" class="justify-between">
Gestion des profils
<IconLucideChevronRight class="w-4 h-4" aria-hidden="true" />
<IconLucideChevronRight
class="w-4 h-4"
aria-hidden="true"
/>
</NuxtLink>
</li>
<li>
<button type="button" class="text-error justify-between" @click="handleLogout">
<button
type="button"
class="text-error justify-between"
@click="handleLogout"
>
Déconnexion
<IconLucideLogOut class="w-4 h-4" aria-hidden="true" />
</button>
@@ -408,8 +567,8 @@
<ToastContainer />
<!-- Paramètres d'affichage -->
<DisplaySettings
:is-open="displaySettingsOpen"
<DisplaySettings
:is-open="displaySettingsOpen"
@close="closeDisplaySettings"
@update-settings="handleSettingsUpdate"
/>
@@ -424,96 +583,99 @@
</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'
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()
const displaySettingsOpen = ref(false);
const { activeProfile, ensureSession, logout } = useProfileSession();
// Route active pour souligner l'onglet sélectionné dans la navbar
const route = useRoute()
const route = useRoute();
const isActive = (path) => {
if (path === '/') {
return route.path === '/'
if (path === "/") {
return route.path === "/";
}
return route.path.startsWith(path)
}
return route.path.startsWith(path);
};
// Ouvrir les paramètres d'affichage
const openDisplaySettings = () => {
displaySettingsOpen.value = true
}
displaySettingsOpen.value = true;
};
// Fermer les paramètres d'affichage
const closeDisplaySettings = () => {
displaySettingsOpen.value = false
}
displaySettingsOpen.value = false;
};
// Gérer les mises à jour des paramètres
const handleSettingsUpdate = (settings) => {
console.log('Paramètres d\'affichage mis à jour:', settings)
}
console.log("Paramètres d'affichage mis à jour:", settings);
};
const handleLogout = async () => {
await logout()
await navigateTo('/profiles')
}
await logout();
await navigateTo("/profiles");
};
const openDropdown = ref(null)
let dropdownCloseTimer = null
const openDropdown = ref(null);
let dropdownCloseTimer = null;
const setDropdown = (name) => {
if (dropdownCloseTimer) {
clearTimeout(dropdownCloseTimer)
dropdownCloseTimer = null
clearTimeout(dropdownCloseTimer);
dropdownCloseTimer = null;
}
if (openDropdown.value !== name) {
openDropdown.value = name
openDropdown.value = name;
}
}
};
const scheduleDropdownClose = (name) => {
if (dropdownCloseTimer) {
clearTimeout(dropdownCloseTimer)
clearTimeout(dropdownCloseTimer);
}
dropdownCloseTimer = setTimeout(() => {
if (openDropdown.value === name) {
openDropdown.value = null
openDropdown.value = null;
}
dropdownCloseTimer = null
}, 200)
}
dropdownCloseTimer = null;
}, 200);
};
const activeProfileLabel = computed(() => {
if (!activeProfile.value) return 'Profil inconnu'
return `${activeProfile.value.firstName} ${activeProfile.value.lastName}`
})
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() || '??'
})
if (!activeProfile.value) return "??";
const { firstName = "", lastName = "" } = activeProfile.value;
return (
`${firstName.charAt(0) || ""}${lastName.charAt(0) || ""}`.toUpperCase() ||
"??"
);
});
onMounted(async () => {
await ensureSession()
})
await ensureSession();
});
onUnmounted(() => {
if (dropdownCloseTimer) {
clearTimeout(dropdownCloseTimer)
dropdownCloseTimer = null
clearTimeout(dropdownCloseTimer);
dropdownCloseTimer = null;
}
})
});
</script>