Refactor department dashboard templates and update tables

Unified department dashboard templates by replacing redundant wrappers with `DepartmentDashboardPageWrapper`. Improved table design and adjusted text for better localization and user experience.

src/components/displays/department/pos/orders/ordersTable.vue

@@ -103,21 +103,20 @@ const clickUser = (customer_id) => {
 </script>
 
 <template>
-  <table class="table">
+  <table class="table is-fullwidth is-hoverable">
     <thead>
     <tr>
       <th class="status-bar-table-header"></th>
       <th>ID</th>
-      <th>Customer</th>
-      <th>Cashier ID</th>
-      <th>Department</th>
-      <th>Reg. nr. (1)</th>
-      <th>Reg. nr. (2)</th>
-      <th>Reg. nr. (3)</th>
+      <th>Kunde</th>
+      <th>Kassør</th>
+      <th>Afdeling</th>
+      <th>Reg. 1</th>
+      <th>Reg. 2</th>
+      <th>Reg. 3</th>
       <th>Reference</th>
-      <th>Notes</th>
-      <th>Created at</th>
-      <th>Updated at</th>
+      <th>Noter</th>
+      <th>Dato</th>
       <th>Actions</th>
     </tr>
     </thead>
@@ -164,7 +163,6 @@ const clickUser = (customer_id) => {
       <td>{{ order.reference }}</td>
       <td>{{ order.notes }}</td>
       <td>{{ order.created_at }}</td>
-      <td>{{ order.updated_at }}</td>
       <td>
         <div class="buttons">
           <button class="button is-small is-dark" @click="redirectDepartmentOrderPage(order.id, order.department_id)">Show</button>
@@ -174,7 +172,7 @@ const clickUser = (customer_id) => {
     </tbody>
     <tfoot>
     <tr>
-      <td colspan="12">Showing {{ orders.length }} orders</td>
+      <td colspan="12">Viser {{ orders.length }} transaktioner</td>
     </tr>
     </tfoot>
   </table>

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

@@ -24,6 +24,9 @@ import PosDepartmentStep2 from "@/components/displays/department/pos/steps/PosDe
 import SelectProductsFormPOS from "@/components/forms/department/pos/SelectProductsFormPOS.vue";
 import GetOrderInvoicePDFButton from "@/components/search/economic/getOrderInvoicePDFButton.vue";
 import ExportOrderToInvoiceStripeButton from "@/components/search/economic/exportOrderToInvoiceStripeButton.vue";
+import DepartmentDashboardPageWrapper from "@/views/dashboards/departmentDashboard/DepartmentDashboardPageWrapper.vue";
+import WhiteBox from "@/components/displays/boxes/WhiteBox.vue";
+import ButtonsBox from "@/components/displays/boxes/ButtonsBox.vue";
 
 // Get the id from the route
 const orderId = ref(router.currentRoute.value.params.orderId);
@@ -139,17 +142,10 @@ const isBookedWithEconomic = () => {
 
 <template>
   <RestrictedPageWrapper :hasPermission="SessionUser.canAccessAdmin()">
-    <DepartmentDashboardHero title="Kassesystem" subtitle="Transaktion">
-      <nav class="breadcrumb" aria-label="breadcrumbs">
-        <ul>
-          <li><a href="../../../">Afdeling</a></li>
-          <li><a href="../">Kassesystem</a></li>
-          <li><a href="../orders">Transaktioner</a></li>
-          <li class="is-active"><a href="#" aria-current="page">{{ orderId }}</a></li>
-        </ul>
-      </nav>
-    </DepartmentDashboardHero>
-    <DepartmentPosNavigation />
+    <DepartmentDashboardPageWrapper
+      title="Kassesystem"
+      subtitle="Transaktion"
+      >
     <notFoundFallBackPageWrapper :exists="(customer_name || isLoading)" error="Denne handel findes ikke, eller du har ikke adgang til at se den.">
     <div class="columns">
       <div class="column is-8-desktop" v-if="AddOrderItemsVisible">
@@ -157,6 +153,7 @@ const isBookedWithEconomic = () => {
       </div>
 
       <div class="column" :class="{'is-8-desktop': !AddOrderItemsVisible, 'is-4-desktop': AddOrderItemsVisible}">
+        <WhiteBox class="">
         <PosOrderItemsCurrent :orderItems="order_items" :orderId="orderId" :loadOrderItems="loadOrderItems" :editPossible="isEditPossible()">
           <!-- Default slot -->
           <div slot="default">
@@ -165,7 +162,7 @@ const isBookedWithEconomic = () => {
             </div>
             <div v-else-if="isInvoicedWithStripe()">
               <div class="tag is-success" v-if="isStripeInvoicePaid()"> Betalt </div>
-              <div class="tag is-warning"> {{ getStripeInvoiceStatus() }} </div>
+              <div class="tag is-warning" v-else> {{ getStripeInvoiceStatus() }} </div>
             </div>
             <div v-else-if="economicModule.invoice_id">
               <div class="tag is-dark"> Faktura {{ economicModule.invoice_id }} </div>
@@ -327,7 +324,7 @@ const isBookedWithEconomic = () => {
             </tr>
           </template>
         </PosOrderItemsCurrent>
-
+        </WhiteBox>
         <!-- Go back button: If the user is currently adding order items -->
         <div class="buttons mt-4" v-if="AddOrderItemsVisible">
           <button class="button is-dark is-fullwidth" @click="showAddOrderItemsDisplay(false)" v-if="AddOrderItemsVisible">
@@ -337,26 +334,38 @@ const isBookedWithEconomic = () => {
         </div>
       </div>
       <div class="column is-4-desktop" v-if="!AddOrderItemsVisible">
-        <PosSelectedCustomer/>
-        <div class="buttons">
-          <!-- Export order to draft button : If the order is not invoiced, and a draft invoice does not exist -->
+        <WhiteBox class="p-0">
+          <PosSelectedCustomer/>
+        </WhiteBox>
+        <ButtonsBox>
+          <!-- Economic module actions -->
           <ExportOrderToDraftButton :order_id="orderId" class="is-fullwidth" v-if="!isInvoiced() && invoiceAllOrdersIndividually() && !invoiceUsingStripe()" />
-          <!-- Export order to invoice button : If the order is not invoiced, and the user has chosen to invoice all orders individually -->
-          <!-- <ExportOrderToInvoiceButton :order_id="orderId" class="is-fullwidth" v-else-if="!economicModule.invoice_id && invoiceAllOrdersIndividually()" /> -->
-          <!-- Remove order draft invoice button : Allow the user to remove the draft invoice, to be able to make changes to the order -->
-          <!-- Deactivated, on request at Roskilde: <RemoveOrderDraftInvoiceButton :order_id="orderId" class="is-fullwidth" v-if="economicModule.invoice_draft_id && !economicModule.invoice_id" /> -->
-          <get-order-invoice-p-d-f-button :invoice_id="economicModule.invoice_id" class="is-fullwidth" v-if="isBookedWithEconomic()" />
-          <!-- Export the order to invoice with Stripe -->
-          <ExportOrderToInvoiceStripeButton :order_id="orderId" class="is-fullwidth" v-if="!isInvoiced() && invoiceUsingStripe()" />
+          <getOrderInvoicePDFButton :invoice_id="economicModule.invoice_id" class="is-fullwidth" v-if="isBookedWithEconomic()" />
           <!-- If the order is invoiced with Stripe, then show a button to get the invoice -->
+          <ExportOrderToInvoiceStripeButton :order_id="orderId" class="is-fullwidth" v-if="!isInvoiced() && invoiceUsingStripe()" />
           <button class="button is-dark is-fullwidth" @click="openStripeInvoice" v-if="isInvoicedWithStripe()">
             <span class="icon"><i class="fas fa-file-invoice"></i></span>
             <span>Hent faktura</span>
           </button>
+        </ButtonsBox>
+        <div class="buttons">
+          <!-- Export order to draft button : If the order is not invoiced, and a draft invoice does not exist -->
+          <!-- Export order to invoice button : If the order is not invoiced, and the user has chosen to invoice all orders individually -->
+          <!-- <ExportOrderToInvoiceButton :order_id="orderId" class="is-fullwidth" v-else-if="!economicModule.invoice_id && invoiceAllOrdersIndividually()" /> -->
+          <!-- Remove order draft invoice button : Allow the user to remove the draft invoice, to be able to make changes to the order -->
+          <!-- Deactivated, on request at Roskilde: <RemoveOrderDraftInvoiceButton :order_id="orderId" class="is-fullwidth" v-if="economicModule.invoice_draft_id && !economicModule.invoice_id" /> -->
+          <!-- Export the order to invoice with Stripe -->
+          <!-- <ExportOrderToInvoiceStripeButton :order_id="orderId" class="is-fullwidth" v-if="!isInvoiced() && invoiceUsingStripe()" /> -->
+          <!-- If the order is invoiced with Stripe, then show a button to get the invoice -->
+          <!--<button class="button is-dark is-fullwidth" @click="openStripeInvoice" v-if="isInvoicedWithStripe()">
+            <span class="icon"><i class="fas fa-file-invoice"></i></span>
+            <span>Hent faktura</span>
+          </button> -->
         </div>
       </div>
     </div>
     </notFoundFallBackPageWrapper>
+    </DepartmentDashboardPageWrapper>
   </RestrictedPageWrapper>
 </template>
 

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

@@ -5,22 +5,18 @@ import DepartmentPosNavigation from "@/views/dashboards/departmentDashboard/modu
 import OrdersPagination from "@/components/displays/pagination/models/DepartmentPos/OrdersPagination.vue";
 import RestrictedPageWrapper from "@/components/page/wrappers/RestrictedPageWrapper.vue";
 import { SessionUser } from "@/components/session/token/SessionUser.vue";
+import DepartmentDashboardPageWrapper from "@/views/dashboards/departmentDashboard/DepartmentDashboardPageWrapper.vue";
 
 </script>
 
 <template>
   <RestrictedPageWrapper :hasPermission="SessionUser.canAccessAdmin()">
-    <DepartmentDashboardHero title="POS" subtitle="Transaktioner">
-      <nav class="breadcrumb" aria-label="breadcrumbs">
-        <ul>
-          <li><a href="../../">Afdeling</a></li>
-          <li><a href="./">Kassesystem</a></li>
-          <li class="is-active"><a href="#" aria-current="page">Transaktioner</a></li>
-        </ul>
-      </nav>
-    </DepartmentDashboardHero>
-    <DepartmentPosNavigation />
-    <OrdersPagination />
+    <DepartmentDashboardPageWrapper title="Kassesystem" subtitle="Point of Sale">
+      <template #default>
+        <DepartmentDashboardHero />
+        <OrdersPagination />
+      </template>
+    </DepartmentDashboardPageWrapper>
   </RestrictedPageWrapper>
 </template>
 

src/views/dashboards/departmentDashboard/modules/bookings/DepartmentBookings.vue

@@ -6,12 +6,17 @@ import DepartmentPosNavigation from "@/views/dashboards/departmentDashboard/modu
 import RestrictedPageWrapper from "@/components/page/wrappers/RestrictedPageWrapper.vue";
 import { SessionUser } from "@/components/session/token/SessionUser.vue";
 import BookingsPagination from "@/components/displays/pagination/models/UserDashboard/BookingsPagination.vue";
+import DepartmentDashboardPageWrapper from "@/views/dashboards/departmentDashboard/DepartmentDashboardPageWrapper.vue";
 </script>
 
 <template>
   <RestrictedPageWrapper :hasPermission="SessionUser.canAccessAdmin()">
-    <DepartmentDashboardHero title="Bookinger" subtitle="Oversigt over bookinger i afdelingen" />
-    <BookingsPagination />
+    <DepartmentDashboardPageWrapper
+        title="Bookinger"
+        subtitle="Oversigt over bookinger"
+    >
+      <BookingsPagination />
+    </DepartmentDashboardPageWrapper>
   </RestrictedPageWrapper>
 </template>