Viser datoer for førte feriedager, både brukte og planlagte, på hover

packages/frontend-v3/src/components/TimeBank/SectionedBar.vue

@@ -1,46 +1,79 @@
 <template>
-	<div class="sectioned-bar-titles">
-		<div
-			v-for="(section, index) in filteredSections"
-			:key="index"
-			class="title"
-			:style="{ width: `${(section.amount / total) * 100}%` }"
-		>
-			{{ section.title }}
+	<div class="sectioned-bar-wrapper">
+		<div class="sectioned-bar-titles">
+			<div
+				v-for="(section, index) in filteredSections"
+				:key="index"
+				class="title"
+				:style="{ width: `${(section.amount / total) * 100}%` }"
+			>
+				{{ section.title }}
+			</div>
+		</div>
+		<div class="sectioned-bar">
+			<div
+				v-for="(section, index) in filteredSections"
+				:key="index"
+				class="bar"
+				:class="section.color"
+				:style="{ width: `${(section.amount / total) * 100}%` }"
+				@mouseenter="onBarEnter($event, index)"
+				@mouseleave="hoveredIndex = null"
+			>
+				{{ section.amount }}
+			</div>
 		</div>
-	</div>
-	<div class="sectioned-bar">
 		<div
-			v-for="(section, index) in filteredSections"
-			:key="index"
-			class="bar"
-			:class="section.color"
-			:style="{ width: `${(section.amount / total) * 100}%` }"
+			v-if="hoveredIndex !== null && hoveredSection?.dates?.length"
+			class="bar-tooltip"
+			:style="{ left: tooltipLeft + 'px' }"
 		>
-			{{ section.amount }}
+			<div v-for="date in hoveredSection.dates" :key="date">{{ formatDate(date) }}</div>
 		</div>
 	</div>
 </template>
 
 <script setup lang="ts">
-import { computed } from "vue";
+import { computed, ref } from "vue";
 
 type Section = {
 	title: string;
 	amount: number;
 	color: string;
+	dates?: string[];
 };
 
 const { sections } = defineProps<{
 	sections: Section[];
 }>();
 
 const filteredSections = computed(() => sections.filter(section => section.amount > 0));
-
 const total = computed(() => filteredSections.value.reduce((acc, section) => acc + section.amount, 0));
+
+const hoveredIndex = ref<number | null>(null);
+const tooltipLeft = ref(0);
+
+const hoveredSection = computed(() =>
+	hoveredIndex.value !== null ? filteredSections.value[hoveredIndex.value] : null
+);
+
+function onBarEnter(event: MouseEvent, index: number) {
+	if (window.innerWidth < 768) return;
+	hoveredIndex.value = index;
+	const el = event.currentTarget as HTMLElement;
+	tooltipLeft.value = el.offsetLeft + el.offsetWidth / 2;
+}
+
+function formatDate(date: string): string {
+	return new Date(date).toLocaleDateString("nb-NO", { day: "numeric", month: "long" });
+}
 </script>
 
 <style scoped lang="scss">
+.sectioned-bar-wrapper {
+	position: relative;
+}
+
 .sectioned-bar-titles {
 	display: flex;
 	flex-direction: row;
@@ -64,6 +97,7 @@ const total = computed(() => filteredSections.value.reduce((acc, section) => acc
 		padding-top: 4px;
 		padding-bottom: 2px;
 		font-weight: 700;
+		cursor: default;
 	}
 
 	.yellow {
@@ -99,4 +133,20 @@ const total = computed(() => filteredSections.value.reduce((acc, section) => acc
       $secondary-color-light;
 	}
 }
-</style>
+
+.bar-tooltip {
+	position: absolute;
+	top: calc(100% + 6px);
+	transform: translateX(-50%);
+	background-color: $primary-color;
+	color: $background-color;
+	border-radius: 8px;
+	padding: 8px 12px;
+	z-index: 10;
+	white-space: nowrap;
+	pointer-events: none;
+	font-size: 0.85rem;
+	line-height: 1.6;
+	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+}
+</style>

packages/frontend-v3/src/components/TimeBank/VacationOverview.vue

@@ -89,17 +89,29 @@ const vacationSections = computed(() => {
 	const totalEarned = available + used + planned;
 	const totalConsumed = used + planned;
 
+	const currentYear = new Date().getFullYear().toString();
+	const usedDates = (vacation.value?.usedTransactions ?? [])
+		.filter(t => t.date.startsWith(currentYear))
+		.map(t => t.date)
+		.sort();
+	const plannedDates = (vacation.value?.plannedTransactions ?? [])
+		.filter(t => t.date.startsWith(currentYear))
+		.map(t => t.date)
+		.sort();
+
 	return [
 		{
 			title: "Brukt",
 			amount: used,
 			color: "yellow",
+			dates: usedDates,
+		},
+		{
+			title: "Planlagt",
+			amount: planned,
+			color: "blue",
+			dates: plannedDates,
 		},
-    {
-      title: "Planlagt",
-      amount: planned,
-      color: "blue",
-    },
 		{
 			title: "Opptjente",
 			amount: Math.max(0, available),