Refactor department dashboard and improve menu visibility logic

Introduced new components and refactored existing ones to streamline the department dashboard setup. Enhanced menu visibility with a `hidden` property and a helper function to dynamically determine visibility. Updated labels and removed redundant wrappers for better user interface consistency.

src/components/displays/boxes/ElementTabsBox.vue

@@ -0,0 +1,34 @@
+<script setup>
+import { ref } from 'vue';
+import { useRouter } from 'vue-router';
+import { defineProps, defineSlots } from 'vue';
+
+const props = defineProps({
+  tabs: {
+    type: Array,
+    required: true
+  }
+});
+
+defineSlots({
+  default: () => props.tabs.map((tab, index) => {
+    return (
+      <li key={index}>
+        <a>{tab.name}</a>
+      </li>
+    );
+  })
+});
+</script>
+
+<template>
+  <div class="tabs">
+    <ul>
+      {slots.default()}
+    </ul>
+  </div>
+</template>
+
+<style scoped>
+
+</style>

src/components/displays/department/pos/steps/PosDepartmentStep2.vue

@@ -36,7 +36,7 @@ setProductsCategory(null);
         <div class="buttons">
           <NextStep
               class="is-fullwidth"
-              label="Overblik"
+              label="Næste"
           />
           <Cancel class="is-fullwidth" />
         </div>

src/components/displays/department/pos/steps/PosDepartmentStep3.vue

@@ -36,7 +36,7 @@ import ButtonsBox from "@/components/displays/boxes/ButtonsBox.vue";
             <NextStep
                 style="width: 25%;"
                 class="is-fullwidth"
-                label="Bekræft"
+                label="Gennemfør"
             />
           </div>
         </ButtonsBox>

src/components/menus/MenuDefault.vue

@@ -106,7 +106,8 @@ const menu_items = ref([
         icon: 'fas fa-key',
         children: []
       }
-    ]
+    ],
+    hidden: 1 === null
   },
   {
     name: 'Transactions',
@@ -123,7 +124,8 @@ const menu_items = ref([
         name: 'Transfers',
         route: '/transfers',
         icon: 'fas fa-exchange-alt',
-        children: []
+        children: [],
+        hidden: true
       },
       {
         name: 'Balance',
@@ -135,6 +137,20 @@ const menu_items = ref([
   }
 ]);
 
+const isItemVisible = (item = null) => {
+  // If the hidden property is not set, the item is visible
+  try {
+    if (item.hidden === undefined) {
+      return true;
+    }
+  } catch (e) {
+    return true;
+  }
+  // If the hidden property is set to true, the item is not visible
+  return !item.hidden;
+
+}
+
 // If the menu items are passed as props, use them instead
 if (props.menu_items.length > 0) {
   menu_items.value = props.menu_items
@@ -170,6 +186,7 @@ if (props.menu_items.length > 0) {
             ? Colors.menus.activeBackgroundColor
             : Colors.menus.backgroundColor }
             "
+           v-if="isItemVisible(item)"
            @click="(item.options) ? item.isExpanded = !item.isExpanded : null"
         >
           <!-- If the item has options, show the dropdown icon -->
@@ -210,7 +227,9 @@ if (props.menu_items.length > 0) {
           <!-- Children -->
           <li v-for="child in item.children" :key="child.name">
             <a :class="{'is-active': route.path === child.route}" :href="child.route"
-                :style="{ 'color': Colors.menus.childTextColor, 'background-color': Colors.menus.childBackgroundColor }">
+                :style="{ 'color': Colors.menus.childTextColor, 'background-color': Colors.menus.childBackgroundColor }"
+                v-if="isItemVisible(child)"
+            >
               <span class="icon is-small" v-if="props.show_icons"><i :class="child.icon"></i></span>
               {{ child.name }}
             </a>

src/components/menus/admin/AdminLeftMenu.vue

@@ -73,21 +73,25 @@ const menu_items = ref([
         name: 'Opret ny',
         route: '/admin/' + SessionUser.functions.getDepartmentIdFromUrl() + '/modules/pos',
         icon: 'fas fa-plus',
-        children: []
+        children: [],
+        hidden: (SessionUser.functions.getDepartmentIdFromUrl() === undefined)
       },
       {
         name: 'Transaktioner',
         route: '/admin/' + SessionUser.functions.getDepartmentIdFromUrl() + '/modules/pos/orders',
         icon: 'fas fa-exchange-alt',
-        children: []
+        children: [],
+        hidden: (SessionUser.functions.getDepartmentIdFromUrl() === undefined)
       },
-    ]
+    ],
+    hidden: (SessionUser.functions.getDepartmentIdFromUrl() === undefined)
   },
   {
     name: 'Bookinger',
     route: '/admin/' + SessionUser.functions.getDepartmentIdFromUrl() + '/modules/bookings',
     icon: 'fas fa-exchange-alt',
-    children: []
+    children: [],
+    hidden: (SessionUser.functions.getDepartmentIdFromUrl() === undefined)
   }
 ]);
 

src/views/dashboards/DepartmentDashboard.vue

@@ -6,6 +6,11 @@ import DepartmentDashboardHero from "@/views/dashboards/departmentDashboard/Depa
 import DepartmentModulesDisplay from "@/components/displays/department/moduleNavigation/DepartmentModulesDisplay.vue";
 import RestrictedPageWrapper from "@/components/page/wrappers/RestrictedPageWrapper.vue";
 import { SessionUser } from "@/components/session/token/SessionUser.vue";
+import DepartmentDashboardMyDepartmentsOverview
+  from "@/views/dashboards/departmentDashboard/other/DepartmentDashboardMyDepartmentsOverview.vue";
+import DepartmentDashboardPageWrapper from "@/views/dashboards/departmentDashboard/DepartmentDashboardPageWrapper.vue";
+import DepartmentDashboardOverview
+  from "@/views/dashboards/departmentDashboard/modules/overview/DepartmentDashboardOverview.vue";
 
 
 const router = useRouter();
@@ -24,12 +29,8 @@ watch(() => router.currentRoute.value.params.departmentId, (newVal) => {
 
 <template>
   <RestrictedPageWrapper :hasPermission="SessionUser.canAccessAdmin()">
-    <DepartmentDashboardHero
-        :title="getDepartmentName(departmentId)"
-        :subtitle="getDepartmentDescription(departmentId)"
-        v-if="departmentId && !isLoading && departmentExists(departmentId)"/>
-    <DepartmentDashboardHero title="Velkommen tilbage!" subtitle="Vælg en afdeling for at fortsætte."  v-else />
-    <DepartmentModulesDisplay v-if="departmentId && !isLoading && departmentExists(departmentId)" class="my-3"></DepartmentModulesDisplay>
+    <DepartmentDashboardOverview v-if="departmentId && !isLoading && departmentExists(departmentId)"/>
+    <DepartmentDashboardMyDepartmentsOverview v-else/>
   </RestrictedPageWrapper>
 
 </template>

src/views/dashboards/departmentDashboard/DepartmentDashboardPageWrapper.vue

@@ -12,7 +12,7 @@ defineProps({
   subtitle: String
 })
 
-defineSlots()
+const slots = defineSlots()
 </script>
 
 <template>
@@ -39,14 +39,19 @@ defineSlots()
     >
       <div class="pl-6 pt-6 mb-0" v-if="title || subtitle">
         <div class="columns is-vcentered is-mobile">
-          <PageTitle :title="title" :subtitle="subtitle">
-            <slot name="buttons"></slot>
-          </PageTitle>
+          <div class="column is-12">
+            <PageTitle :title="title" :subtitle="subtitle">
+              <slot name="buttons"></slot>
+            </PageTitle>
+          </div>
         </div>
       </div>
       <div class="pl-6 pr-6 pb-6">
         <slot></slot>
       </div>
+      <div v-if="slots.withoutFormatting">
+        <slot name="without-formatting"></slot>
+      </div>
     </div>
   </div>
 </template>

src/views/dashboards/departmentDashboard/modules/Pos/DepartmentPos.vue

@@ -12,8 +12,6 @@ import PageTitle from "@/components/global/PageTitle.vue";
 
 <template>
   <DepartmentDashboardPageWrapper
-    title="Kassesystem"
-    subtitle="Point of Sale"
   >
     <template #default>
       <RestrictedPageWrapper :hasPermission="SessionUser.canAccessAdmin()">

src/views/dashboards/departmentDashboard/modules/overview/DepartmentDashboardOverview.vue

@@ -0,0 +1,25 @@
+<script setup>
+
+import DepartmentModulesDisplay from "@/components/displays/department/moduleNavigation/DepartmentModulesDisplay.vue";
+import { ref, watch } from 'vue';
+import { getDepartmentName, getDepartmentDescription, isLoading, getDepartments, departments, departmentExists } from "@/components/pagination/departmentTabs.vue";
+import {useRouter} from "vue-router";
+import DepartmentDashboardPageWrapper from "@/views/dashboards/departmentDashboard/DepartmentDashboardPageWrapper.vue";
+
+const router = useRouter();
+const departmentId = ref(parseInt(router.currentRoute.value.params.departmentId));
+</script>
+<template>
+  <DepartmentDashboardPageWrapper
+      :title="getDepartmentName(departmentId)"
+      :subtitle="getDepartmentDescription(departmentId)"
+  >
+    <template #default>
+      <DepartmentModulesDisplay v-if="departmentId && !isLoading && departmentExists(departmentId)" class="my-3"></DepartmentModulesDisplay>
+    </template>
+  </DepartmentDashboardPageWrapper>
+</template>
+
+<style scoped>
+
+</style>

src/views/dashboards/departmentDashboard/other/DepartmentDashboardMyDepartmentsOverview.vue

@@ -0,0 +1,27 @@
+<script setup>
+
+import RestrictedPageWrapper from "@/components/page/wrappers/RestrictedPageWrapper.vue";
+import DepartmentDashboardPageWrapper from "@/views/dashboards/departmentDashboard/DepartmentDashboardPageWrapper.vue";
+import BookingsPagination from "@/components/displays/pagination/models/UserDashboard/BookingsPagination.vue";
+import { SessionUser } from "@/components/session/token/SessionUser.vue";
+</script>
+
+<template>
+  <RestrictedPageWrapper :hasPermission="SessionUser.canAccessAdmin()">
+    <DepartmentDashboardPageWrapper
+        title="Overblik"
+        subtitle="Se hvordan dine afdelinger klarer sig"
+    >
+      <div class="message is-info">
+        <div class="message-body">
+          <h2>Under udvikling</h2>
+          <p>Denne side er under udvikling og vil snart være tilgængelig.</p>
+        </div>
+      </div>
+    </DepartmentDashboardPageWrapper>
+  </RestrictedPageWrapper>
+</template>
+
+<style scoped>
+
+</style>