Feat: Produktivitet overview

src/views/dashboards/departmentDashboard/modules/daily-report/DepartmentWeather.vue

@@ -16,6 +16,10 @@ const props = defineProps({
     type: String,
     default: null,
   },
+  title: {
+    type: String,
+    default: null,
+  }
 });
 
 const state = ref([]);
@@ -390,6 +394,7 @@ watch(
       <span>Loading weather...</span>
     </div>
     <div v-else class="table-wrapper">
+      <h2 v-if="props.title" class="title is-4 mb-2">{{ props.title }}</h2>
       <div class="daily-metrics-actions" data-auto-excel-export-actions="1">
         <button
           v-if="isMultiDaySelection"

src/views/dashboards/departmentDashboard/modules/daily-report/displays/DepartmentDashboardDailyReportNavigation.vue

@@ -169,7 +169,11 @@ const onDateSelectionChange = (startDate, endDate) => {
           showUpdateButton: false,
         }"
         :reverse-level-order="true"
-      />
+      >
+        <template v-slot:right>
+          <slot name="date-period-right"></slot>
+        </template>
+      </DatePeriodSelector>
     </div>
     <div class="column is-12">
       <button

src/views/dashboards/departmentDashboard/other/displays/DepartmentsChartReport.vue

@@ -7,6 +7,8 @@ import { SessionUser } from "@/components/session/token/SessionUser.vue";
 import DepartmentDashboardDailyReportNavigation from "@/views/dashboards/departmentDashboard/modules/daily-report/displays/DepartmentDashboardDailyReportNavigation.vue";
 import { selected_date, selected_date_to, selected_department_ids } from "@/views/dashboards/departmentDashboard/modules/daily-report/DepartmentDailyReportObject.vue";
 import { buildOutsideHoursTrendChartState, buildOutsideHoursWarningText, createEmptyOutsideHours } from "@/views/dashboards/departmentDashboard/modules/daily-report/outsideHours.js";
+import DepartmentWeather from "@/views/dashboards/departmentDashboard/modules/daily-report/DepartmentWeather.vue";
+import {isAccessibleVisibleDepartment, sortByDepartmentPriorityOrder} from "@/services/departmentVisibility.js";
 
 const { t } = useI18n();
 
@@ -23,6 +25,11 @@ const trendPayload = ref({
   missing_department_ids: [],
 });
 const loading = ref(false);
+const previewFlow = ref('charts'); // charts, weather
+
+const handleProductiveOverview = () => {
+  previewFlow.value = previewFlow.value === 'charts' ? 'weather' : 'charts';
+}
 
 const activeDepartmentIds = computed(() => {
   if (Array.isArray(selected_department_ids.value) && selected_department_ids.value.length > 0) {
@@ -34,6 +41,19 @@ const activeDepartmentIds = computed(() => {
     : SessionUser.functions.getAccessibleDepartments();
 });
 
+const departmentOptions = computed(() =>
+    sortByDepartmentPriorityOrder(
+        loadedDepartments.value
+            .filter((department) => isAccessibleVisibleDepartment(department, SessionUser.canAccessAssignedDepartment))
+            .map((department) => ({
+              id: Number(department.id),
+              name: department.name || `Afdeling ${department.id}`,
+              order_priority: department.order_priority ?? department.priority_order ?? null,
+              priority_order: department.priority_order ?? department.order_priority ?? null,
+            }))
+    )
+);
+
 const chartState = computed(() => buildOutsideHoursTrendChartState(trendPayload.value, t));
 const warningText = computed(() => buildOutsideHoursWarningText({
   has_missing_opening_hours: trendPayload.value.has_missing_opening_hours,
@@ -123,7 +143,11 @@ onMounted(() => {
       <DepartmentDashboardDailyReportNavigation
         :selectAllDepartments="!props.departmentSpecific"
         :loading="loading"
-      />
+      >
+        <template v-slot:date-period-right>
+          <button @click.prevent="handleProductiveOverview" class="button is-light">Produktivitet overview</button>
+        </template>
+      </DepartmentDashboardDailyReportNavigation>
     </div>
 
     <div class="column is-12">
@@ -137,7 +161,7 @@ onMounted(() => {
     </div>
 
     <div class="column is-12">
-      <div class="box" data-testid="outside-hours-chart">
+      <div v-if="previewFlow === 'charts'" class="box" data-testid="outside-hours-chart">
         <apexchart
           type="bar"
           height="420"
@@ -145,6 +169,19 @@ onMounted(() => {
           :series="chartState.series"
         />
       </div>
+      <div v-if="previewFlow === 'weather'" class="box" data-testid="outside-hours-chart">
+        <div class="columns is-multiline">
+          <DepartmentWeather
+              v-for="opt in departmentOptions" :key="opt.id"
+              class="column is-12"
+              v-show="activeDepartmentIds.includes(opt.id)"
+              :title="opt.name"
+              :department_ids="[opt.id]"
+              :date_from="selected_date"
+              :date_to="selected_date_to"
+          />
+        </div>
+      </div>
     </div>
   </div>
 </template>