From 800253699cb7fad85ce12a7594d98edcad76398b Mon Sep 17 00:00:00 2001
From: Jepp9350 <2jepp9350@gmail.com>
Date: Tue, 25 Feb 2025 17:57:08 +0100
Subject: [PATCH] Add related items support and improve POS UI/UX

Introduced support for related items in orders by enabling nested relationships through the `related_item_id` parameter. Enhanced the POS interface with better UI elements, such as reusable components (`ProductBox`, `WhiteBox`) and dynamic labels for buttons. Debugging tools and query parameter support for `order_id`, `step`, and `customer_id` were also added to streamline the process flow.
---
 src/assets/main.css                           |  10 ++
 src/components/displays/PopperDefault.vue     |  17 ++
 src/components/displays/boxes/ProductBox.vue  | 136 ++++++++++++++
 .../department/pos/PosDepartmentMVP.vue       |  31 +++-
 .../department/pos/PosOrderItemsCurrent.vue   | 167 ++++++++++++++++--
 .../department/pos/PosSelectedCustomer.vue    |   9 +-
 .../pos/steps/PosDepartmentStep2.vue          |  21 ++-
 .../pos/steps/PosDepartmentStep3.vue          |  43 +++--
 .../department/pos/SelectProductsFormPOS.vue  | 128 +++++++++++---
 .../forms/department/pos/buttons/NextStep.vue |   6 +-
 src/components/menus/MenuDefault.vue          |   2 +-
 src/components/shop/OrdersItems.vue           |   5 +-
 src/components/shop/POSDepartmentProcess.vue  |  13 ++
 13 files changed, 529 insertions(+), 59 deletions(-)
 create mode 100644 src/components/displays/boxes/ProductBox.vue

diff --git a/src/assets/main.css b/src/assets/main.css
index f835f25b..e37b8572 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -3,4 +3,14 @@
 }
 textarea.has-sharp-edges {
   border-radius: 0;
+}
+
+.pos-addon-popper {
+  padding: 0.5rem;
+  background-color: #fbfcfe;
+  opacity: 0.9;
+  border: 3px solid #68696b;
+  min-width: 250px;
+  min-height: 100px;
+  text-align: center;
 }
\ No newline at end of file
diff --git a/src/components/displays/PopperDefault.vue b/src/components/displays/PopperDefault.vue
index 8885b686..3209b097 100644
--- a/src/components/displays/PopperDefault.vue
+++ b/src/components/displays/PopperDefault.vue
@@ -66,6 +66,23 @@ export const popperBox = (title, content, data_key = null) => {
 </div>`;
 };
 
+export const popperBoxProductAddonHtml = (id, name, price, description, classes = '') => {
+
+  let html = `<div class="popper-box ${classes}" data-key="product-addon-${id}-popper">`;
+  html += `<p class="title is-6">${name}&nbsp; / &nbsp;${price} Kr.</p>`;
+  html += `<p class="subtitle is-6 mb-1 has-text-link">No. ${id}</p>`;
+  // If the description is set (and isn't empty), show it
+  if (description && description !== '' && description !== ' ') {
+    html += `<p class="subtitle is-6">${description}</p>`;
+  }
+  // Otherwise, show a placeholder
+  else {
+    html += `<p class="subtitle is-6">No description available</p>`;
+  }
+  html += `</div>`;
+  return html;
+};
+
 export const showPopperWithContent = (title, content) => {
   showPopper(popperBox(title, content));
 };
diff --git a/src/components/displays/boxes/ProductBox.vue b/src/components/displays/boxes/ProductBox.vue
new file mode 100644
index 00000000..2126e612
--- /dev/null
+++ b/src/components/displays/boxes/ProductBox.vue
@@ -0,0 +1,136 @@
+<script setup>
+import { ref, defineProps, defineEmits } from 'vue';
+import { Colors } from "@/ThemeConfig.vue";
+import { showPopper, popperBoxProductAddonHtml, removePopperIfOpen } from "@/components/displays/PopperDefault.vue";
+
+const emit = defineEmits(['add-to-cart']);
+
+const props = defineProps({
+  id: Number,
+  name: String,
+  description: String,
+  price: Number,
+  image: String,
+  addons: Array,
+  isSelected: Boolean,
+  selectedAddons: Array,
+  toggleProductAddon: Function,
+});
+
+const isAddonSelected = (productId, addonId) => {
+  return props.selectedAddons.some((addon) => addon.product_id === productId && addon.addon_id === addonId && addon.status === true);
+};
+
+const getAddonPrice = (addonId) => {
+  const addon = props.addons.find((addon) => addon.id === addonId);
+  return addon.product.price;
+};
+
+const showAddonPopper = (addon, element) => {
+  showPopper(popperBoxProductAddonHtml(
+      addon.id,
+      addon.name,
+      addon.product.price,
+      addon.product.description,
+      'pos-addon-popper'
+  ), element);
+};
+
+const hideAddonPopper = (addon) => {
+  removePopperIfOpen();
+};
+
+const emitAddToCart = (id) => {
+  emit('add-to-cart', id);
+};
+
+
+
+</script>
+
+<template>
+  <div class="pt-2 mb-2 pr-6">
+    <div class="columns is-multiline pos-product-box" :class="{ 'is-selected': isSelected }">
+      <!-- Product image -->
+      <div class="column is-4-desktop">
+        <img :src="image" alt="Product image" class="image pos-product-image pl-5 mt-4" />
+      </div>
+      <!-- Product details -->
+      <div class="column is-8-desktop">
+        <p class="title is-6">{{ name }}</p>
+        <p class="subtitle is-6 mb-0" :style="{ 'color': Colors.global.primaryColor }">
+          No. {{ id }}</p>
+        <p class="subtitle is-6">{{ description }}</p>
+        <!-- White space, to accommodate the design requirements -->
+        <p>&nbsp;</p>
+        <p class="subtitle is-6 has-text-black">{{ price }} Kr.</p>
+      </div>
+      <!-- Expandable product details -->
+      <div v-if="isSelected" class="column is-12-desktop">
+        <!-- Addons -->
+        <div class="buttons is-centered mt-3 mb-0 pl-6" v-if="addons.length > 0">
+          <button
+              class="button is-small is-fullwidth"
+              v-for="addon in addons"
+              :key="addon.id"
+              :class="{ 'is-link': isAddonSelected(props.id, addon.option_id), 'is-light': !isAddonSelected(props.id, addon.option_id) }"
+              @click="toggleProductAddon(props.id, addon.option_id)"
+              @mouseenter="showAddonPopper(addon, $event.target)"
+              @mouseleave="hideAddonPopper(addon, $event.target)"
+          >
+            <!-- Addon ( + ) -->
+            <span class="icon is-small" style="margin-right: auto; margin-left: 1rem;">
+              <i class="fas fa-plus fa-xs"></i>
+            </span>
+            <!-- Addon name -->
+            <span style="font-size: 0.7rem;">
+              {{ addon.name }}
+            </span>
+            <!-- Price separator -->
+            <span style="font-size: 0.7rem;">
+              &nbsp;/&nbsp;
+            </span>
+            <!-- Addon price -->
+            <span style="font-size: 0.7rem;">
+              {{ getAddonPrice(addon.id) }} Kr.
+            </span>
+            <!-- Addon ( - ) -->
+            <span class="icon is-small" style="margin-left: auto; margin-right: 1rem;">
+              <i class="fas fa-minus fa-xs"></i>
+            </span>
+          </button>
+        </div>
+        <!-- White space, to accommodate the design requirements -->
+        <p>&nbsp;</p>
+        <!-- Add to cart -->
+        <div class="buttons is-centered mt-2 mb-3 pl-6">
+          <button
+              class="button is-link is-small is-fullwidth"
+              @click="emitAddToCart(id)"
+          >
+            <span class="icon is-small">
+              <i class="fas fa-cart-plus"></i>
+            </span>
+            <span>Tilføj til kurv</span>
+          </button>
+        </div>
+      </div>
+      <!-- Expander -->
+      <div class="column is-12-desktop">
+        <p class="has-text-centered pl-6">
+          <span class="icon is-small" style="color: #c7c7c7;">
+            <i
+                class="fas fa-angle-down fa-lg"
+                :class="{ 'fa-rotate-180': isSelected }"
+                aria-hidden="true"
+            ></i>
+          </span>
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/components/displays/department/pos/PosDepartmentMVP.vue b/src/components/displays/department/pos/PosDepartmentMVP.vue
index 3596da29..63c6038d 100644
--- a/src/components/displays/department/pos/PosDepartmentMVP.vue
+++ b/src/components/displays/department/pos/PosDepartmentMVP.vue
@@ -1,12 +1,41 @@
 <script setup>
 import { ref } from 'vue';
-import { getCurrentStep, setDepartment, getOrderId } from "@/components/shop/POSDepartmentProcess.vue";
+import { getCurrentStep, setDepartment, getOrderId, setStep, setOrderId, searchAndSelectCustomer, loadOrderItems } from "@/components/shop/POSDepartmentProcess.vue";
 import PosDepartmentStep1 from "@/components/displays/department/pos/steps/PosDepartmentStep1.vue";
 import PosDepartmentStep2 from "@/components/displays/department/pos/steps/PosDepartmentStep2.vue";
 import PosDepartmentStep3 from "@/components/displays/department/pos/steps/PosDepartmentStep3.vue";
 
 setDepartment();
 
+// Debug:
+// If the &id= query parameter is set, then set the order_id to the value of the query parameter
+// If the &step= query parameter is set, then set the current_step to the value of the query parameter
+// If the &customer_id= query parameter is set, then set the customer_id to the value of the query parameter
+if (window.location.search.includes("id=")) {
+  const urlParams = new URLSearchParams(window.location.search);
+  const orderId = urlParams.get("id");
+  if (orderId !== null) {
+    setOrderId(parseInt(orderId));
+  }
+  loadOrderItems();
+}
+
+if (window.location.search.includes("step=")) {
+  const urlParams = new URLSearchParams(window.location.search);
+  const step = urlParams.get("step");
+  if (step !== null) {
+    setStep(parseInt(step));
+  }
+}
+
+if (window.location.search.includes("customer_id=")) {
+  const urlParams = new URLSearchParams(window.location.search);
+  const customerId = urlParams.get("customer_id");
+  if (customerId !== null) {
+    searchAndSelectCustomer(parseInt(customerId));
+  }
+}
+
 /** Define the createOrder function */
 </script>
 
diff --git a/src/components/displays/department/pos/PosOrderItemsCurrent.vue b/src/components/displays/department/pos/PosOrderItemsCurrent.vue
index 226c63e0..96c072be 100644
--- a/src/components/displays/department/pos/PosOrderItemsCurrent.vue
+++ b/src/components/displays/department/pos/PosOrderItemsCurrent.vue
@@ -8,6 +8,8 @@ import {ref, watch, defineProps, defineSlots, useSlots, renderSlot } from 'vue';
 import { createPopper } from '@popperjs/core';
 import { showPopper, popper, showPopperWithContent, removePopperIfOpen, popperBox} from "@/components/displays/PopperDefault.vue";
 import { SessionUser } from "@/components/session/token/SessionUser.vue";
+import ActionSettingsWheelButton from "@/components/displays/buttons/ActionSettingsWheelButton.vue";
+import ActionSettingsWheelItem from "@/components/displays/buttons/ActionSettingsWheelItem.vue";
 
 // Tabs
 
@@ -47,13 +49,28 @@ const hideOrderItemWhileRemoving = (id) => {
   document.getElementById('order-item-' + id).style.display = 'none';
 };
 
+const getItemRelatedItems = (orderItems, orderItemId) => {
+  // Return all items with the item.related_item_id equal to the orderItemId
+  return orderItems.filter((orderItem) => orderItem.related_item_id === orderItemId);
+};
+
+const isLastRelatedItem = (orderItems, orderItem) => {
+  // Get all related items
+  const relatedItems = getItemRelatedItems(orderItems, orderItem.related_item_id);
+  // If there are no related items, return true
+  if (relatedItems.length === 0) {
+    return true;
+  }
+  // If the last related item is the current item, return true
+  return relatedItems[relatedItems.length - 1].id === orderItem.id;
+};
 </script>
 
 <template>
   <div>
-    <article class="panel is-dark">
-      <p class="panel-heading"><span>Transaktion #{{ orderId }}</span><slot name="headingcenter"></slot><span class="is-float-right"><slot></slot></span></p>
-      <p class="panel-tabs">
+    <article class="">
+      <p><span class="is-size-4">Transaktion #{{ orderId }}</span><slot name="headingcenter"></slot><span class="is-float-right"><slot></slot></span></p>
+      <p class="panel-tabs" v-if="panel_tabs.length > 1">
         <a v-for="(tab, index) in panel_tabs" :key="index" :class="{'is-active': tab.active}" @click="panel_tabs.forEach(tab => tab.active = false); tab.active = true" >
           <!-- If the tab has an icon, show it -->
           <span v-if="tab.icon" class="icon is-small">
@@ -69,15 +86,20 @@ const hideOrderItemWhileRemoving = (id) => {
             <thead>
               <tr>
                 <th>Produkt</th>
-                <th style="width: 20%; text-align: right;">Pris</th>
+                <th style="width: 20%; text-align: right;">Pris (DKK)</th>
                 <th v-if="editPossible" style="width: 15%;"></th>
               </tr>
             </thead>
             <tbody>
             <!-- Slot -->
             <slot name="beforeItems"></slot>
-
-              <tr v-for="orderItem in orderItems" :key="orderItem.id" :id="'order-item-' + orderItem.id">
+            <template v-for="orderItem in orderItems" :key="orderItem.id">
+              <tr
+                  :id="'order-item-' + orderItem.id"
+                  v-if="!orderItem.related_item_id"
+                  :style="{ 'border-bottom-style': getItemRelatedItems(orderItems, orderItem.id).length > 0 ? 'hidden' : '' }"
+                  style="border-top: 1px solid #f5f5f5;"
+              >
                 <td>
                   <span>{{ orderItem.product.name }}</span>
                   <!-- Notes (If there are any) -->
@@ -137,7 +159,7 @@ const hideOrderItemWhileRemoving = (id) => {
                             $event.target
                         )"
                       @mouseleave="removePopperIfOpen()">
-                  <span style="text-decoration: line-through;" class="has-text-dark">{{ orderItem.product.price * orderItem.quantity}}</span> <span>{{ orderItem.price * orderItem.quantity }} DKK</span>
+                  <span style="text-decoration: line-through;" class="has-text-dark">{{ orderItem.product.price * orderItem.quantity}}</span> <span>{{ orderItem.price * orderItem.quantity }}</span>
                   </span>
                 </td>
                 <td style="width: 20%; text-align: right;" v-else>
@@ -150,16 +172,136 @@ const hideOrderItemWhileRemoving = (id) => {
                             $event.target
                         )"
                       @mouseleave="removePopperIfOpen()">
-                    {{ orderItem.price * orderItem.quantity }} DKK
+                    {{ orderItem.price * orderItem.quantity }}
                   </span>
                 </td>
                 <td v-if="editPossible" style="width: 15%;">
                   <div class="buttons is-narrow">
-                    <button class="button is-small is-dark" @click="hideOrderItemWhileRemoving(orderItem.id);removeOrderItem(orderItem.id).then(() => loadOrderItems())"><span class="icon has-text-danger"><i class="fas fa-trash"></i></span></button>
-                    <button class="button is-small is-dark" :disabled="!SessionUser.hasPermission('edit_order_items')" @click="showEditOrderItemForm(orderItem.id, orderItem.product.name, orderItem.price, orderItem.notes, orderItem.reference, orderItem.quantity, editPossible).then(() => loadOrderItems())"><span class="icon"><i class="fas fa-edit"></i></span></button>
+                    <ActionSettingsWheelButton>
+                      <template #actions>
+                        <ActionSettingsWheelItem
+                          label="Slet"
+                          icon="fas fa-trash"
+                          template="danger"
+                          @click="hideOrderItemWhileRemoving(orderItem.id);removeOrderItem(orderItem.id).then(() => loadOrderItems())"
+                        />
+                        <ActionSettingsWheelItem
+                          label="Rediger"
+                          icon="fas fa-edit"
+                          template="warning"
+                          :disabled="!SessionUser.hasPermission('edit_order_items')"
+                          @click="showEditOrderItemForm(orderItem.id, orderItem.product.name, orderItem.price, orderItem.notes, orderItem.reference, orderItem.quantity, editPossible).then(() => loadOrderItems())"
+                        />
+                      </template>
+                    </ActionSettingsWheelButton>
                   </div>
                 </td>
               </tr>
+              <!-- Related items -->
+              <template v-for="relatedItem in getItemRelatedItems(orderItems, orderItem.id)" :key="relatedItem.id">
+                <tr
+                    :id="'order-item-' + relatedItem.id"
+                    :style="{ 'border-bottom-style': isLastRelatedItem(orderItems, relatedItem) ? '' : 'hidden' }"
+                >
+                  <td>
+                    <span class="related-item-text">+ {{ relatedItem.product.name }}</span>
+                    <!-- Notes (If there are any) -->
+                    <span v-if="relatedItem.notes"
+                          @mouseover="showPopper(
+                              popperBox(
+                              'Note',
+                              relatedItem.notes
+                              ),
+                              $event.target
+                          )"
+                          @mouseleave="removePopperIfOpen()"
+                          @click="showEditOrderItemForm(relatedItem.id, relatedItem.product.name, relatedItem.price, relatedItem.notes, relatedItem.reference, relatedItem.quantity, editPossible).then(() => loadOrderItems())"
+                          class="ml-2 is-size-7 has-text-grey is-clickable">
+                      <i class="fas fa-comment"></i>
+                      Se note
+                    </span>
+                    <!-- Reference (If there are any) -->
+                    <span v-if="relatedItem.reference"
+                          @mouseover="showPopper(
+                              popperBox(
+                                  'Reference',
+                                  relatedItem.reference
+                                  ),
+                                  $event.target
+                              )"
+                          @mouseleave="removePopperIfOpen()"
+                          @click="showEditOrderItemForm(relatedItem.id, relatedItem.product.name, relatedItem.price, relatedItem.notes, relatedItem.reference, relatedItem.quantity, editPossible).then(() => loadOrderItems())"
+                          class="ml-2 is-size-7 has-text-grey is-clickable">
+                      <i class="fas fa-link"></i>
+                      Se reference
+                    </span>
+                    <!-- Quantity (If it is more than 1) -->
+                    <span v-if="relatedItem.quantity > 1"
+                          @mouseover="showPopper(
+                              popperBox(
+                                  'Antal',
+                                  relatedItem.quantity
+                                  ),
+                                  $event.target
+                              )"
+                          @mouseleave="removePopperIfOpen()"
+                          @click="showEditOrderItemForm(relatedItem.id, relatedItem.product.name, relatedItem.price, relatedItem.notes, relatedItem.reference, relatedItem.quantity, editPossible).then(() => loadOrderItems())"
+                          class="ml-2 is-size-7 has-text-grey is-clickable">
+                      <i class="fas fa-box"></i>
+                    </span>
+                  </td>
+                  <!-- If the price has been changed, show the new price (With a strike-through) and the old price -->
+                  <td style="width: 20%; text-align: right;" v-if="relatedItem.price !== relatedItem.product.price">
+                    <span
+                        @mouseover="showPopper(
+                            popperBox(
+                                'Pris',
+                                'Pris ændret fra ' + relatedItem.product.price + ' DKK til ' + relatedItem.price + ' DKK / Enhed (' + relatedItem.price * relatedItem.quantity + ' DKK i alt)'
+                                ),
+                                $event.target
+                            )"
+                        @mouseleave="removePopperIfOpen()">
+                    <span style="text-decoration: line-through;" class="has-text-dark related-item-text">{{ relatedItem.product.price * relatedItem.quantity}}</span> <span>{{ relatedItem.price * relatedItem.quantity }} DKK</span>
+                    </span>
+                  </td>
+                  <td style="width: 20%; text-align: right;" v-else>
+                    <span
+                        class="related-item-text"
+                        @mouseover="showPopper(
+                            popperBox(
+                                'Pris',
+                                relatedItem.price + ' DKK / Enhed (' + relatedItem.price * relatedItem.quantity + ' DKK i alt)'
+                                ),
+                                $event.target
+                            )"
+                        @mouseleave="removePopperIfOpen()">
+                      {{ relatedItem.price * relatedItem.quantity }}
+                    </span>
+                  </td>
+                  <td v-if="editPossible" style="width: 15%;">
+                    <div class="buttons is-narrow">
+                      <ActionSettingsWheelButton>
+                        <template #actions>
+                          <ActionSettingsWheelItem
+                            label="Slet"
+                            icon="fas fa-trash"
+                            template="danger"
+                            @click="hideOrderItemWhileRemoving(relatedItem.id);removeOrderItem(relatedItem.id).then(() => loadOrderItems())"
+                          />
+                          <ActionSettingsWheelItem
+                            label="Rediger"
+                            icon="fas fa-edit"
+                            template="warning"
+                            :disabled="!SessionUser.hasPermission('edit_order_items')"
+                            @click="showEditOrderItemForm(relatedItem.id, relatedItem.product.name, relatedItem.price, relatedItem.notes, relatedItem.reference, relatedItem.quantity, editPossible).then(() => loadOrderItems())"
+                          />
+                        </template>
+                      </ActionSettingsWheelButton>
+                    </div>
+                  </td>
+                </tr>
+                </template>
+            </template>
               <slot name="bottom-order-items"></slot>
             </tbody>
             <tfoot>
@@ -206,5 +348,8 @@ const hideOrderItemWhileRemoving = (id) => {
 </template>
 
 <style scoped>
-
+.related-item-text {
+  color: #4a4a4a;
+  font-size: 0.9rem;
+}
 </style>
\ No newline at end of file
diff --git a/src/components/displays/department/pos/PosSelectedCustomer.vue b/src/components/displays/department/pos/PosSelectedCustomer.vue
index f72016d6..4d837d06 100644
--- a/src/components/displays/department/pos/PosSelectedCustomer.vue
+++ b/src/components/displays/department/pos/PosSelectedCustomer.vue
@@ -145,11 +145,12 @@ loadCustomerAttributes();
     <article class="">
       <div class="panel-block">
         <div class="columns is-vcentered">
-          <div class="column">
-            <span class="is-size-6 title">{{ customer_name }}</span>
+          <div class="column is-4">
+            <span class="is-size-6 title"
+            >{{ customer_name }}</span>
           </div>
-          <div class="column is-narrow">
-            <div class="tabs is-right">
+          <div class="column">
+            <div class="tabs is-right is-small is-float-right">
               <ul>
                 <li v-for="(tab, index) in panel_tabs" :key="index" :class="{'is-active': tab.active}" @click="panel_tabs.forEach(tab => tab.active = false); tab.active = true">
                   <RequiresPermission :permission="tab.permission" v-if="tab.permission">
diff --git a/src/components/displays/department/pos/steps/PosDepartmentStep2.vue b/src/components/displays/department/pos/steps/PosDepartmentStep2.vue
index 1adf610d..bf70a1b8 100644
--- a/src/components/displays/department/pos/steps/PosDepartmentStep2.vue
+++ b/src/components/displays/department/pos/steps/PosDepartmentStep2.vue
@@ -10,6 +10,7 @@ import PosOrderItemsCurrent from "@/components/displays/department/pos/PosOrderI
 import { order_items, order_id, loadOrderItems, setProductsCategory, notes } from "@/components/shop/POSDepartmentProcess.vue";
 import Cancel from "@/components/forms/department/pos/buttons/Cancel.vue";
 import PosNotes from "@/components/displays/department/pos/PosNotes.vue";
+import WhiteBox from "@/components/displays/boxes/WhiteBox.vue";
 // Set the category to products
 setProductsCategory(null);
 
@@ -19,18 +20,24 @@ setProductsCategory(null);
   <div>
     <div class="columns">
       <!-- Choose products -->
-      <div class="column is-8-desktop">
-        <p>Choose products</p>
+      <div class="column is-8-desktop pl-0 pr-3">
         <SelectProductsFormPOS class="mt-3" category="null" />
         <PosNotes :notes="notes" class="mt-3" :isAddFormVisible="false" :isOldNotesVisible="true"/>
       </div>
-      <!-- Last provided orders -->
-      <div class="column is-4-desktop keep-in-viewport">
-        <PosOrderItemsCurrent :orderItems="order_items" :orderId="order_id" :loadOrderItems="loadOrderItems" :editPossible="true" />
-        <PosSelectedCustomer class="mt-3"/>
+      <!-- Current order items -->
+      <div class="column is-4-desktop keep-in-viewport pl-3 pr-0">
+        <WhiteBox style="min-height: 40%;">
+          <template #default>
+            <PosOrderItemsCurrent :orderItems="order_items" :orderId="order_id" :loadOrderItems="loadOrderItems" :editPossible="true" />
+          </template>
+        </WhiteBox>
+        <!--<PosSelectedCustomer class="mt-3"/> -->
         <NextStepError class="is-fullwidth" />
         <div class="buttons">
-          <NextStep class="is-fullwidth" />
+          <NextStep
+              class="is-fullwidth"
+              label="Overblik"
+          />
           <Cancel class="is-fullwidth" />
         </div>
       </div>
diff --git a/src/components/displays/department/pos/steps/PosDepartmentStep3.vue b/src/components/displays/department/pos/steps/PosDepartmentStep3.vue
index 831f5339..6ed3ed2d 100644
--- a/src/components/displays/department/pos/steps/PosDepartmentStep3.vue
+++ b/src/components/displays/department/pos/steps/PosDepartmentStep3.vue
@@ -5,10 +5,12 @@ import PosLastScannedLicensePlates from "@/components/displays/department/pos/Po
 import NextStep from "@/components/forms/department/pos/buttons/NextStep.vue";
 import SelectProductsFormPOS from "@/components/forms/department/pos/SelectProductsFormPOS.vue";
 import NextStepError from "@/components/forms/department/pos/error/NextStepError.vue";
-import { order_items, order_id, loadOrderItems } from "@/components/shop/POSDepartmentProcess.vue";
+import { order_items, order_id, loadOrderItems, isCustomerSelected } from "@/components/shop/POSDepartmentProcess.vue";
 import PosOrderItemsCurrent from "@/components/displays/department/pos/PosOrderItemsCurrent.vue";
 import PosSelectedCustomer from "@/components/displays/department/pos/PosSelectedCustomer.vue";
 import Cancel from "@/components/forms/department/pos/buttons/Cancel.vue";
+import WhiteBox from "@/components/displays/boxes/WhiteBox.vue";
+import ButtonsBox from "@/components/displays/boxes/ButtonsBox.vue";
 
 </script>
 
@@ -16,19 +18,36 @@ import Cancel from "@/components/forms/department/pos/buttons/Cancel.vue";
   <div>
     <div class="columns">
       <!-- Choose add-ons -->
-      <div class="column is-8-desktop">
-        <p>Choose add-ons</p>
-        <SelectProductsFormPOS class="mt-3" category="4" />
+      <div class="column is-8 pl-0 pr-3">
+        <WhiteBox>
+          <template #default>
+            <PosOrderItemsCurrent :orderItems="order_items" :orderId="order_id" :loadOrderItems="loadOrderItems" :editPossible="true" />
+          </template>
+        </WhiteBox>
+        <NextStepError class="is-fullwidth" />
+        <ButtonsBox>
+          <div class="buttons">
+            <Cancel
+                style="width: 25%;"
+                tabindex="2"
+                class="is-fullwidth"
+                label="Annuller"
+            />
+            <NextStep
+                style="width: 25%;"
+                class="is-fullwidth"
+                label="Bekræft"
+            />
+          </div>
+        </ButtonsBox>
       </div>
       <!-- Last provided orders -->
-      <div class="column is-4-desktop">
-        <PosOrderItemsCurrent :orderItems="order_items" :orderId="order_id" :loadOrderItems="loadOrderItems" :editPossible="true" />
-        <PosSelectedCustomer />
-        <NextStepError class="is-fullwidth" />
-        <div class="buttons">
-          <NextStep class="is-fullwidth" />
-          <Cancel class="is-fullwidth" />
-        </div>
+      <div class="column is-4 pl-3 pr-0">
+        <WhiteBox>
+          <template #default v-if="isCustomerSelected()">
+            <PosSelectedCustomer />
+          </template>
+        </WhiteBox>
       </div>
     </div>
   </div>
diff --git a/src/components/forms/department/pos/SelectProductsFormPOS.vue b/src/components/forms/department/pos/SelectProductsFormPOS.vue
index 48019ed2..f7fd4fd9 100644
--- a/src/components/forms/department/pos/SelectProductsFormPOS.vue
+++ b/src/components/forms/department/pos/SelectProductsFormPOS.vue
@@ -30,6 +30,8 @@ import {SessionUser} from "@/components/session/token/SessionUser.vue";
 import  { useRoute } from 'vue-router';
 import Swal from "sweetalert2";
 import ConfigurationCategory from "@/components/displays/superuser/configuration/ConfigurationCategory.vue";
+import WhiteBox from "@/components/displays/boxes/WhiteBox.vue";
+import ProductBox from "@/components/displays/boxes/ProductBox.vue";
 // Define the products
 const products = ref([]);
 
@@ -196,19 +198,40 @@ const setProductAddon = (productId, addonId, status) => {
   }
 };
 
-const addAddonsToOrderMiddleware = async (product_id, quantity = 1) => {
+// Toggle product addon
+const toggleProductAddon = (productId, addonId) => {
+  console.log(productId, addonId);
+  setProductAddon(productId, addonId, !isProductAddonTrue(productId, addonId));
+};
+
+const addAddonsToOrderMiddleware = async (product_id, quantity = 1, related_item_id = null) => {
   // If the product addons are set, add them to the order (If the product is added)
   var product_addons = productAddons.value.filter((productAddon) => productAddon.product_id === product_id && productAddon.status === true);
   for (let i = 0; i < product_addons.length; i++) {
     // Get the products addon, and show the fake create order item
-    showFakeCreateOrderItem(product_addons[i].addon_id, quantity, 0);
+    showFakeCreateOrderItem(product_addons[i].addon_id, quantity, 0, related_item_id);
   }
   // Add the addons to the order
   for (let i = 0; i < product_addons.length; i++) {
-    await createOrderItem(getOrderId(), product_addons[i].addon_id, quantity);
+    await createOrderItem(getOrderId(), product_addons[i].addon_id, quantity, related_item_id);
   }
 };
 
+const addProductWithAddonsToOrder = async (product_id) => {
+  console.log(product_id);
+  let quantity = 1;
+  // Show the fake create order item
+  showFakeCreateOrderItem(product_id, quantity, 0);
+  // Create the order item
+  await createOrderItem(getOrderId(), product_id, quantity).then(async (result) => {
+    let order_item_id = result.data.data.id;
+    // Add the addons to the order
+    await addAddonsToOrderMiddleware(product_id, quantity, order_item_id).then(() => {
+      loadOrderItems();
+    });
+  });
+};
+
 const recommended_product_ids = ref([]);
 const recommended_last_orders = ref([]);
 
@@ -246,32 +269,66 @@ const showRecommendedProducts = () => {
 const hideRecommendedProducts = () => {
   isShowingRecommended.value = false;
 };
+
+const selectedProduct = ref(null);
+
+const isProductSelected = (productId) => {
+  return selectedProduct.valueOf() === parseInt(productId);
+};
+
+const selectProduct = (productId) => {
+  if (selectedProduct.valueOf() === parseInt(productId)) {
+    selectedProduct.value = null;
+  } else {
+    selectedProduct.value = parseInt(productId);
+  }
+};
+
+const getAddonPrice = (productId, addonId) => {
+  return products.value.find((product) => product.id === productId).addons.find((addon) => addon.option_id === addonId).price;
+};
 </script>
 
 <template>
   <div>
     <div class="columns is-multiline">
-      <div class="column is-12">
+      <div class="column is-12 is-flex is-justify-content-space-between">
         <!-- Categories -->
-        <div class="buttons">
-          <!-- Recommended products -->
-          <button class="button has-text-success" @click="showRecommendedProducts()">
-            <span class="icon">
-              <i class="fas fa-history"></i>
-            </span>
-            <span>
-            Anbefalede produkter
-            </span>
-          </button>
-          <!-- Category buttons -->
-          <button class="button" v-for="category in categories" :key="category.identifier" @click="hideRecommendedProducts(); setProductsCategory(category.identifier); getProductCategory(category.identifier, department_id.valueOf()).then((response) => { products = response.data.data; });" :disabled="category.identifier === getProductsCategory() && !isShowingRecommended">
-            {{ category.name }}
-          </button>
-        </div>
+        <WhiteBox style="padding-bottom: 0; padding-top: 0.6rem;" class="px-0">
+          <template #default>
+            <!-- Tabs -->
+            <div class="tabs" style="overflow-x: auto;">
+              <ul>
+                <li
+                    v-for="category in categories"
+                    :key="category.identifier"
+                    :class="{
+                      'is-active': category.identifier === getProductsCategory() && !isShowingRecommended
+                    }">
+                  <a
+                      @click="hideRecommendedProducts();
+                      setProductsCategory(category.identifier);
+                      getProductCategory(category.identifier, department_id.valueOf())
+                      .then((response) => {
+                        products = response.data.data;
+                      });"
+                      :style="{ 'border-bottom-color': category.identifier === getProductsCategory() ? '#3273dc' : '#fff' }"
+                      style="
+                        border-bottom-width: 0.6rem;
+                        min-width: 4rem;
+                        font-size: 0.8rem;
+">
+                    {{ category.name }}
+                  </a>
+                </li>
+              </ul>
+            </div>
+          </template>
+        </WhiteBox>
       </div>
     </div>
     <div class="tw-scroll-minimal" style="overflow-y: auto; overflow-x: clip; max-height: 100vh;">
-      <div class="columns is-multiline is-vcentered is-mobile">
+      <div class="columns is-multiline is-mobile">
         <!-- Recommended products -->
         <div class="column is-12" v-if="isShowingRecommended">
           <!-- Same as last time -->
@@ -372,6 +429,30 @@ const hideRecommendedProducts = () => {
             <pre>{{ recommended_product_ids }}</pre>
           </configurationCategory>
         </div>
+        <!-- New product display -->
+        <template v-for="product in products" :key="product.id" v-if="!isShowingRecommended">
+          <div class="column is-6-desktop">
+            <WhiteBox
+                class="p-0 pos-product-box"
+                :class="{ 'is-selected': selectedProduct === product.id }"
+            >
+              <ProductBox
+                  :id="product.id"
+                  :name="product.name"
+                  :description="product.description"
+                  :price="product.price"
+                  :image="getPicture(product.piktogram)"
+                  :addons="product.addons"
+                  :isSelected="selectedProduct === product.id"
+                  :selectedAddons="productAddons"
+                  :toggleProductAddon="toggleProductAddon"
+                  @click="selectProduct(parseInt(product.id))"
+                  @addToCart="addProductWithAddonsToOrder(product.id)"
+              />
+            </WhiteBox>
+          </div>
+        </template>
+
         <!-- Products -->
         <div class="column is-4-desktop" v-for="product in products" :key="product.id" v-if="!isShowingRecommended">
           <div class="card" :style="{ 'border': getProductBorder(product) }">
@@ -438,4 +519,11 @@ const hideRecommendedProducts = () => {
   scrollbar-color: #4A5568 transparent;
   scrollbar-width: thin;
 }
+.pos-product-box {
+  border: 0.5rem solid transparent;
+  cursor: pointer;
+}
+.pos-product-box.is-selected {
+  border: 0.5rem solid #3273dc;
+}
 </style>
\ No newline at end of file
diff --git a/src/components/forms/department/pos/buttons/NextStep.vue b/src/components/forms/department/pos/buttons/NextStep.vue
index e279b8f2..c2a5474e 100644
--- a/src/components/forms/department/pos/buttons/NextStep.vue
+++ b/src/components/forms/department/pos/buttons/NextStep.vue
@@ -1,6 +1,10 @@
 <script setup>
 import { nextStep, nextStepDelay } from "@/components/shop/POSDepartmentProcess.vue";
 import { Colors } from "@/ThemeConfig.vue";
+import { defineProps } from 'vue';
+const props = defineProps(['label']);
+
+const label = props.label || 'Næste';
 </script>
 
 <template>
@@ -9,7 +13,7 @@ import { Colors } from "@/ThemeConfig.vue";
       @click="nextStep" v-if="nextStepDelay === 0"
       :style="{ 'background-color': Colors.buttons.success.backgroundColor, 'color': Colors.buttons.success.textColor }"
   >
-    Næste</button>
+    {{ label }}</button>
   <button class="button is-loading" v-else>Please wait... {{ nextStepDelay }}</button>
 </template>
 
diff --git a/src/components/menus/MenuDefault.vue b/src/components/menus/MenuDefault.vue
index be0d254b..cfa5f6c2 100644
--- a/src/components/menus/MenuDefault.vue
+++ b/src/components/menus/MenuDefault.vue
@@ -148,7 +148,7 @@ if (props.menu_items.length > 0) {
       :style="{ 'background-color': Colors.menus.parentBackgroundColor, 'color': Colors.menus.parentTextColor }"
   >
     <!-- Image -->
-    <div class="menu-image" style="padding: 1rem;">
+    <div class="menu-image has-text-centered py-4 px-6">
       <img src="@/assets/branding/truckwash-banner-white-compressed.png" alt="Truck Wash Logo" />
     </div>
     <p class="menu-label"
diff --git a/src/components/shop/OrdersItems.vue b/src/components/shop/OrdersItems.vue
index 36cc71fa..30cacabb 100644
--- a/src/components/shop/OrdersItems.vue
+++ b/src/components/shop/OrdersItems.vue
@@ -15,7 +15,7 @@ export const getOrderItems = (order_id) => {
   });
 };
 
-export const createOrderItem = (order_id, product_id, quantity) => {
+export const createOrderItem = (order_id, product_id, quantity, related_item_id = null) => {
   const token = localStorage.getItem('token');
   if (!token) {
     return null;
@@ -23,7 +23,8 @@ export const createOrderItem = (order_id, product_id, quantity) => {
   return axios.post(API_URL + '/order/items', {
     order_id,
     product_id,
-    quantity
+    quantity,
+    related_item_id
   }, {
     headers: {
       Authorization: `Bearer ${token}`
diff --git a/src/components/shop/POSDepartmentProcess.vue b/src/components/shop/POSDepartmentProcess.vue
index fb52f287..a6cde714 100644
--- a/src/components/shop/POSDepartmentProcess.vue
+++ b/src/components/shop/POSDepartmentProcess.vue
@@ -370,6 +370,19 @@ export const getCustomerName = async (customerNumber) => {
   return '';
 };
 
+/** Search, then select customer by customer number */
+export const searchAndSelectCustomer = async (customerNumber) => {
+  // Get the customer data
+  await authenticatedRequest(
+      `/users/customer?customer_number=${customerNumber}`,
+      'GET').then((response) => {
+    console.log(response);
+    selectCustomer(response.data.data.economic_customer);
+  }).catch((error) => {
+    console.error(error);
+  });
+};
+
 /** Show selected scan dialog */
 export const showSelectedScanDialog = (scan) => {
   // Show a loading swal