From b3307be2aafe821a35a8a94d2ff527cfc5d554db Mon Sep 17 00:00:00 2001
From: Jepp9350 <2jepp9350@gmail.com>
Date: Thu, 1 May 2025 13:53:20 +0200
Subject: [PATCH] Update department ID handling and upgrade dependencies

Replaced the direct access of `department_id.value` with `getDepartment()` for better encapsulation in `POSDepartmentProcess.vue`. Updated multiple dependencies in `package-lock.json`, including Babel, Vue Flow, and others, to improve functionality and maintain up-to-date libraries.
---
 package-lock.json                             | 471 +++++++++++++-----
 package.json                                  |   3 +
 .../buttons/ActionSettingsWheelButton.vue     |  73 +++
 .../buttons/ActionSettingsWheelItemLabel.vue  | 137 +++++
 .../department/pos/orders/ordersTable.vue     |  19 +-
 .../pos/steps/PosDepartmentStep1.vue          |   5 +
 .../PickCustomerInvoiceCollectionModal.vue    | 198 ++++++++
 .../CollectedOrderInvoicesPagination.vue      |  42 +-
 .../tables/collectedOrderInvoicesTable.vue    |  65 ++-
 .../department/pos/SelectVehicleFormPOS.vue   |   6 +-
 .../pos/input/LicensePlateReg1Input.vue       |   5 +-
 .../pos/input/customerSearchFieldPos.vue      |  25 +-
 src/components/session/token/SessionUser.vue  |   3 +
 .../Objects/CollectedOrderInvoices.vue        |  99 +++-
 .../SessionUser/Objects/ObjectsGlobal.vue     |   1 +
 .../token/SessionUser/Objects/Orders.vue      | 150 +++++-
 src/components/shop/POSDepartmentProcess.vue  |   2 +-
 src/main.js                                   |  11 +-
 src/views/dashboards/DefaultPageWrapper.vue   |   9 +
 vite.config.js                                |   2 +
 20 files changed, 1152 insertions(+), 174 deletions(-)
 create mode 100644 src/components/displays/buttons/ActionSettingsWheelItemLabel.vue
 create mode 100644 src/components/displays/modals/PickCustomerInvoiceCollectionModal.vue

diff --git a/package-lock.json b/package-lock.json
index 629e82e1..af333260 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,6 +12,7 @@
         "@popperjs/core": "^2.11.8",
         "@sweetalert2/theme-bulma": "^5.0.18",
         "@sweetalert2/theme-dark": "^5.0.18",
+        "@vue-flow/core": "^1.43.1",
         "@vueuse/core": "^12.7.0",
         "animate.css": "^4.1.1",
         "axios": "^1.7.8",
@@ -22,6 +23,7 @@
         "bulma-quickview": "^2.0.0",
         "bulma-switch": "^2.0.4",
         "chart.js": "^4.4.7",
+        "flow": "^0.2.3",
         "sass": "^1.81.1",
         "sweetalert2": "^11.14.5",
         "toastify-js": "^1.12.0",
@@ -35,6 +37,7 @@
       "devDependencies": {
         "@creativebulma/bulma-divider": "^1.1.0",
         "@vitejs/plugin-vue": "^5.1.4",
+        "@vitejs/plugin-vue-jsx": "^4.1.2",
         "sass-embedded": "^1.81.0",
         "vite": "^5.4.10",
         "vite-plugin-vue-devtools": "^7.5.4"
@@ -62,41 +65,41 @@
       }
     },
     "node_modules/@babel/code-frame": {
-      "version": "7.26.2",
-      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.26.2.tgz",
-      "integrity": "sha512-RJlIHRueQgwWitWgF8OdFYGZX328Ax5BCemNGlqHfplnRT9ESi8JkFlvaVYbS+UubVY6dpv87Fs2u5M29iNFVQ==",
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.27.1.tgz",
+      "integrity": "sha512-cjQ7ZlQ0Mv3b47hABuTevyTuYN4i+loJKGeV9flcCgIK37cCXRh+L1bd3iBHlynerhQ7BhCkn2BPbQUL+rGqFg==",
       "dependencies": {
-        "@babel/helper-validator-identifier": "^7.25.9",
+        "@babel/helper-validator-identifier": "^7.27.1",
         "js-tokens": "^4.0.0",
-        "picocolors": "^1.0.0"
+        "picocolors": "^1.1.1"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/compat-data": {
-      "version": "7.26.8",
-      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.26.8.tgz",
-      "integrity": "sha512-oH5UPLMWR3L2wEFLnFJ1TZXqHufiTKAiLfqw5zkhS4dKXLJ10yVztfil/twG8EDTA4F/tvVNw9nOl4ZMslB8rQ==",
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.27.1.tgz",
+      "integrity": "sha512-Q+E+rd/yBzNQhXkG+zQnF58e4zoZfBedaxwzPmicKsiK3nt8iJYrSrDbjwFFDGC4f+rPafqRaPH6TsDoSvMf7A==",
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/core": {
-      "version": "7.26.0",
-      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.26.0.tgz",
-      "integrity": "sha512-i1SLeK+DzNnQ3LL/CswPCa/E5u4lh1k6IAEphON8F+cXt0t9euTshDru0q7/IqMa1PMPz5RnHuHscF8/ZJsStg==",
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.27.1.tgz",
+      "integrity": "sha512-IaaGWsQqfsQWVLqMn9OB92MNN7zukfVA4s7KKAI0KfrrDsZ0yhi5uV4baBuLuN7n3vsZpwP8asPPcVwApxvjBQ==",
       "dependencies": {
         "@ampproject/remapping": "^2.2.0",
-        "@babel/code-frame": "^7.26.0",
-        "@babel/generator": "^7.26.0",
-        "@babel/helper-compilation-targets": "^7.25.9",
-        "@babel/helper-module-transforms": "^7.26.0",
-        "@babel/helpers": "^7.26.0",
-        "@babel/parser": "^7.26.0",
-        "@babel/template": "^7.25.9",
-        "@babel/traverse": "^7.25.9",
-        "@babel/types": "^7.26.0",
+        "@babel/code-frame": "^7.27.1",
+        "@babel/generator": "^7.27.1",
+        "@babel/helper-compilation-targets": "^7.27.1",
+        "@babel/helper-module-transforms": "^7.27.1",
+        "@babel/helpers": "^7.27.1",
+        "@babel/parser": "^7.27.1",
+        "@babel/template": "^7.27.1",
+        "@babel/traverse": "^7.27.1",
+        "@babel/types": "^7.27.1",
         "convert-source-map": "^2.0.0",
         "debug": "^4.1.0",
         "gensync": "^1.0.0-beta.2",
@@ -112,12 +115,12 @@
       }
     },
     "node_modules/@babel/generator": {
-      "version": "7.27.0",
-      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.27.0.tgz",
-      "integrity": "sha512-VybsKvpiN1gU1sdMZIp7FcqphVVKEwcuj02x73uvcHE0PTihx1nlBcowYWhDwjpoAXRv43+gDzyggGnn1XZhVw==",
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.27.1.tgz",
+      "integrity": "sha512-UnJfnIpc/+JO0/+KRVQNGU+y5taA5vCbwN8+azkX6beii/ZF+enZJSOKo11ZSzGJjlNfJHfQtmQT8H+9TXPG2w==",
       "dependencies": {
-        "@babel/parser": "^7.27.0",
-        "@babel/types": "^7.27.0",
+        "@babel/parser": "^7.27.1",
+        "@babel/types": "^7.27.1",
         "@jridgewell/gen-mapping": "^0.3.5",
         "@jridgewell/trace-mapping": "^0.3.25",
         "jsesc": "^3.0.2"
@@ -127,23 +130,23 @@
       }
     },
     "node_modules/@babel/helper-annotate-as-pure": {
-      "version": "7.25.9",
-      "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.25.9.tgz",
-      "integrity": "sha512-gv7320KBUFJz1RnylIg5WWYPRXKZ884AGkYpgpWW02TH66Dl+HaC1t1CKd0z3R4b6hdYEcmrNZHUmfCP+1u3/g==",
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.27.1.tgz",
+      "integrity": "sha512-WnuuDILl9oOBbKnb4L+DyODx7iC47XfzmNCpTttFsSp6hTG7XZxu60+4IO+2/hPfcGOoKbFiwoI/+zwARbNQow==",
       "dependencies": {
-        "@babel/types": "^7.25.9"
+        "@babel/types": "^7.27.1"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-compilation-targets": {
-      "version": "7.27.0",
-      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.27.0.tgz",
-      "integrity": "sha512-LVk7fbXml0H2xH34dFzKQ7TDZ2G4/rVTOrq9V+icbbadjbVxxeFeDsNHv2SrZeWoA+6ZiTyWYWtScEIW07EAcA==",
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.27.1.tgz",
+      "integrity": "sha512-2YaDd/Rd9E598B5+WIc8wJPmWETiiJXFYVE60oX8FDohv7rAUU3CQj+A1MgeEmcsk2+dQuEjIe/GDvig0SqL4g==",
       "dependencies": {
-        "@babel/compat-data": "^7.26.8",
-        "@babel/helper-validator-option": "^7.25.9",
+        "@babel/compat-data": "^7.27.1",
+        "@babel/helper-validator-option": "^7.27.1",
         "browserslist": "^4.24.0",
         "lru-cache": "^5.1.1",
         "semver": "^6.3.1"
@@ -153,16 +156,16 @@
       }
     },
     "node_modules/@babel/helper-create-class-features-plugin": {
-      "version": "7.25.9",
-      "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.25.9.tgz",
-      "integrity": "sha512-UTZQMvt0d/rSz6KI+qdu7GQze5TIajwTS++GUozlw8VBJDEOAqSXwm1WvmYEZwqdqSGQshRocPDqrt4HBZB3fQ==",
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.27.1.tgz",
+      "integrity": "sha512-QwGAmuvM17btKU5VqXfb+Giw4JcN0hjuufz3DYnpeVDvZLAObloM77bhMXiqry3Iio+Ai4phVRDwl6WU10+r5A==",
       "dependencies": {
-        "@babel/helper-annotate-as-pure": "^7.25.9",
-        "@babel/helper-member-expression-to-functions": "^7.25.9",
-        "@babel/helper-optimise-call-expression": "^7.25.9",
-        "@babel/helper-replace-supers": "^7.25.9",
-        "@babel/helper-skip-transparent-expression-wrappers": "^7.25.9",
-        "@babel/traverse": "^7.25.9",
+        "@babel/helper-annotate-as-pure": "^7.27.1",
+        "@babel/helper-member-expression-to-functions": "^7.27.1",
+        "@babel/helper-optimise-call-expression": "^7.27.1",
+        "@babel/helper-replace-supers": "^7.27.1",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.27.1",
+        "@babel/traverse": "^7.27.1",
         "semver": "^6.3.1"
       },
       "engines": {
@@ -204,37 +207,37 @@
       }
     },
     "node_modules/@babel/helper-member-expression-to-functions": {
-      "version": "7.25.9",
-      "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.25.9.tgz",
-      "integrity": "sha512-wbfdZ9w5vk0C0oyHqAJbc62+vet5prjj01jjJ8sKn3j9h3MQQlflEdXYvuqRWjHnM12coDEqiC1IRCi0U/EKwQ==",
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.27.1.tgz",
+      "integrity": "sha512-E5chM8eWjTp/aNoVpcbfM7mLxu9XGLWYise2eBKGQomAk/Mb4XoxyqXTZbuTohbsl8EKqdlMhnDI2CCLfcs9wA==",
       "dependencies": {
-        "@babel/traverse": "^7.25.9",
-        "@babel/types": "^7.25.9"
+        "@babel/traverse": "^7.27.1",
+        "@babel/types": "^7.27.1"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-module-imports": {
-      "version": "7.25.9",
-      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.25.9.tgz",
-      "integrity": "sha512-tnUA4RsrmflIM6W6RFTLFSXITtl0wKjgpnLgXyowocVPrbYrLUXSBXDgTs8BlbmIzIdlBySRQjINYs2BAkiLtw==",
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.27.1.tgz",
+      "integrity": "sha512-0gSFWUPNXNopqtIPQvlD5WgXYI5GY2kP2cCvoT8kczjbfcfuIljTbcWrulD1CIPIX2gt1wghbDy08yE1p+/r3w==",
       "dependencies": {
-        "@babel/traverse": "^7.25.9",
-        "@babel/types": "^7.25.9"
+        "@babel/traverse": "^7.27.1",
+        "@babel/types": "^7.27.1"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-module-transforms": {
-      "version": "7.26.0",
-      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.26.0.tgz",
-      "integrity": "sha512-xO+xu6B5K2czEnQye6BHA7DolFFmS3LB7stHZFaOLb1pAwO1HWLS8fXA+eh0A2yIvltPVmx3eNNDBJA2SLHXFw==",
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.27.1.tgz",
+      "integrity": "sha512-9yHn519/8KvTU5BjTVEEeIM3w9/2yXNKoD82JifINImhpKkARMJKPP59kLo+BafpdN5zgNeIcS4jsGDmd3l58g==",
       "dependencies": {
-        "@babel/helper-module-imports": "^7.25.9",
-        "@babel/helper-validator-identifier": "^7.25.9",
-        "@babel/traverse": "^7.25.9"
+        "@babel/helper-module-imports": "^7.27.1",
+        "@babel/helper-validator-identifier": "^7.27.1",
+        "@babel/traverse": "^7.27.1"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -244,20 +247,20 @@
       }
     },
     "node_modules/@babel/helper-optimise-call-expression": {
-      "version": "7.25.9",
-      "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.25.9.tgz",
-      "integrity": "sha512-FIpuNaz5ow8VyrYcnXQTDRGvV6tTjkNtCK/RYNDXGSLlUD6cBuQTSw43CShGxjvfBTfcUA/r6UhUCbtYqkhcuQ==",
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.27.1.tgz",
+      "integrity": "sha512-URMGH08NzYFhubNSGJrpUEphGKQwMQYBySzat5cAByY1/YgIRkULnIy3tAMeszlL/so2HbeilYloUmSpd7GdVw==",
       "dependencies": {
-        "@babel/types": "^7.25.9"
+        "@babel/types": "^7.27.1"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-plugin-utils": {
-      "version": "7.26.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.26.5.tgz",
-      "integrity": "sha512-RS+jZcRdZdRFzMyr+wcsaqOmld1/EqTghfaBGQQd/WnRdzdlvSZ//kF7U8VQTxf1ynZ4cjUcYgjVGx13ewNPMg==",
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.27.1.tgz",
+      "integrity": "sha512-1gn1Up5YXka3YYAHGKpbideQ5Yjf1tDa9qYcgysz+cNCXukyLl6DjPXhD3VRwSb8c0J9tA4b2+rHEZtc6R0tlw==",
       "engines": {
         "node": ">=6.9.0"
       }
@@ -279,13 +282,13 @@
       }
     },
     "node_modules/@babel/helper-replace-supers": {
-      "version": "7.25.9",
-      "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.25.9.tgz",
-      "integrity": "sha512-IiDqTOTBQy0sWyeXyGSC5TBJpGFXBkRynjBeXsvbhQFKj2viwJC76Epz35YLU1fpe/Am6Vppb7W7zM4fPQzLsQ==",
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.27.1.tgz",
+      "integrity": "sha512-7EHz6qDZc8RYS5ElPoShMheWvEgERonFCs7IAonWLLUTXW59DP14bCZt89/GKyreYn8g3S83m21FelHKbeDCKA==",
       "dependencies": {
-        "@babel/helper-member-expression-to-functions": "^7.25.9",
-        "@babel/helper-optimise-call-expression": "^7.25.9",
-        "@babel/traverse": "^7.25.9"
+        "@babel/helper-member-expression-to-functions": "^7.27.1",
+        "@babel/helper-optimise-call-expression": "^7.27.1",
+        "@babel/traverse": "^7.27.1"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -295,37 +298,37 @@
       }
     },
     "node_modules/@babel/helper-skip-transparent-expression-wrappers": {
-      "version": "7.25.9",
-      "resolved": "https://registry.npmjs.org/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.25.9.tgz",
-      "integrity": "sha512-K4Du3BFa3gvyhzgPcntrkDgZzQaq6uozzcpGbOO1OEJaI+EJdqWIMTLgFgQf6lrfiDFo5FU+BxKepI9RmZqahA==",
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.27.1.tgz",
+      "integrity": "sha512-Tub4ZKEXqbPjXgWLl2+3JpQAYBJ8+ikpQ2Ocj/q/r0LwE3UhENh7EUabyHjz2kCEsrRY83ew2DQdHluuiDQFzg==",
       "dependencies": {
-        "@babel/traverse": "^7.25.9",
-        "@babel/types": "^7.25.9"
+        "@babel/traverse": "^7.27.1",
+        "@babel/types": "^7.27.1"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-string-parser": {
-      "version": "7.25.9",
-      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.25.9.tgz",
-      "integrity": "sha512-4A/SCr/2KLd5jrtOMFzaKjVtAei3+2r/NChoBNoZ3EyP/+GlhoaEGoWOZUmFmoITP7zOJyHIMm+DYRd8o3PvHA==",
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.27.1.tgz",
+      "integrity": "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==",
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-validator-identifier": {
-      "version": "7.25.9",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.25.9.tgz",
-      "integrity": "sha512-Ed61U6XJc3CVRfkERJWDz4dJwKe7iLmmJsbOGu9wSloNSFttHV0I8g6UAgb7qnK5ly5bGLPd4oXZlxCdANBOWQ==",
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.27.1.tgz",
+      "integrity": "sha512-D2hP9eA+Sqx1kBZgzxZh0y1trbuU+JoDkiEwqhQ36nodYqJwyEIhPSdMNd7lOm/4io72luTPWH20Yda0xOuUow==",
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-validator-option": {
-      "version": "7.25.9",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.25.9.tgz",
-      "integrity": "sha512-e/zv1co8pp55dNdEcCynfj9X7nyUKUXoUEwfXqaZt0omVOmDe9oOTdKStH4GmAw6zxMFs50ZayuMfHDKlO7Tfw==",
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.27.1.tgz",
+      "integrity": "sha512-YvjJow9FxbhFFKDSuFnVCe2WxXk1zWc22fFePVNEaWJEu8IrZVlda6N0uHwzZrUM1il7NC9Mlp4MaJYbYd9JSg==",
       "engines": {
         "node": ">=6.9.0"
       }
@@ -344,23 +347,23 @@
       }
     },
     "node_modules/@babel/helpers": {
-      "version": "7.26.0",
-      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.26.0.tgz",
-      "integrity": "sha512-tbhNuIxNcVb21pInl3ZSjksLCvgdZy9KwJ8brv993QtIVKJBBkYXz4q4ZbAv31GdnC+R90np23L5FbEBlthAEw==",
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.27.1.tgz",
+      "integrity": "sha512-FCvFTm0sWV8Fxhpp2McP5/W53GPllQ9QeQ7SiqGWjMf/LVG07lFa5+pgK05IRhVwtvafT22KF+ZSnM9I545CvQ==",
       "dependencies": {
-        "@babel/template": "^7.25.9",
-        "@babel/types": "^7.26.0"
+        "@babel/template": "^7.27.1",
+        "@babel/types": "^7.27.1"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/parser": {
-      "version": "7.27.0",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.27.0.tgz",
-      "integrity": "sha512-iaepho73/2Pz7w2eMS0Q5f83+0RKI7i4xmiYeBmDzfRVbQtTOG7Ts0S4HzJVsTMGI9keU8rNfuZr8DKfSt7Yyg==",
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.27.1.tgz",
+      "integrity": "sha512-I0dZ3ZpCrJ1c04OqlNsQcKiZlsrXf/kkE4FXzID9rIOYICsAbA8mMDzhW/luRNAHdCNt7os/u8wenklZDlUVUQ==",
       "dependencies": {
-        "@babel/types": "^7.27.0"
+        "@babel/types": "^7.27.1"
       },
       "bin": {
         "parser": "bin/babel-parser.js"
@@ -542,12 +545,12 @@
       }
     },
     "node_modules/@babel/plugin-syntax-typescript": {
-      "version": "7.25.9",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.25.9.tgz",
-      "integrity": "sha512-hjMgRy5hb8uJJjUcdWunWVcoi9bGpJp8p5Ol1229PoN6aytsLwNMgmdftO23wnCLMfVmTwZDWMPNq/D1SY60JQ==",
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.27.1.tgz",
+      "integrity": "sha512-xfYCBMxveHrRMnAWl1ZlPXOZjzkN82THFvLhQhFXFt81Z5HnN+EtUkZhv/zcKpmT3fzmWZB0ywiBrbC3vogbwQ==",
       "dev": true,
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.25.9"
+        "@babel/helper-plugin-utils": "^7.27.1"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1250,16 +1253,16 @@
       }
     },
     "node_modules/@babel/plugin-transform-typescript": {
-      "version": "7.25.9",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.25.9.tgz",
-      "integrity": "sha512-7PbZQZP50tzv2KGGnhh82GSyMB01yKY9scIjf1a+GfZCtInOWqUH5+1EBU4t9fyR5Oykkkc9vFTs4OHrhHXljQ==",
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.27.1.tgz",
+      "integrity": "sha512-Q5sT5+O4QUebHdbwKedFBEwRLb02zJ7r4A5Gg2hUoLuU3FjdMcyqcywqUrLCaDsFCxzokf7u9kuy7qz51YUuAg==",
       "dev": true,
       "dependencies": {
-        "@babel/helper-annotate-as-pure": "^7.25.9",
-        "@babel/helper-create-class-features-plugin": "^7.25.9",
-        "@babel/helper-plugin-utils": "^7.25.9",
-        "@babel/helper-skip-transparent-expression-wrappers": "^7.25.9",
-        "@babel/plugin-syntax-typescript": "^7.25.9"
+        "@babel/helper-annotate-as-pure": "^7.27.1",
+        "@babel/helper-create-class-features-plugin": "^7.27.1",
+        "@babel/helper-plugin-utils": "^7.27.1",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.27.1",
+        "@babel/plugin-syntax-typescript": "^7.27.1"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1434,28 +1437,28 @@
       }
     },
     "node_modules/@babel/template": {
-      "version": "7.27.0",
-      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.27.0.tgz",
-      "integrity": "sha512-2ncevenBqXI6qRMukPlXwHKHchC7RyMuu4xv5JBXRfOGVcTy1mXCD12qrp7Jsoxll1EV3+9sE4GugBVRjT2jFA==",
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.27.1.tgz",
+      "integrity": "sha512-Fyo3ghWMqkHHpHQCoBs2VnYjR4iWFFjguTDEqA5WgZDOrFesVjMhMM2FSqTKSoUSDO1VQtavj8NFpdRBEvJTtg==",
       "dependencies": {
-        "@babel/code-frame": "^7.26.2",
-        "@babel/parser": "^7.27.0",
-        "@babel/types": "^7.27.0"
+        "@babel/code-frame": "^7.27.1",
+        "@babel/parser": "^7.27.1",
+        "@babel/types": "^7.27.1"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/traverse": {
-      "version": "7.27.0",
-      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.27.0.tgz",
-      "integrity": "sha512-19lYZFzYVQkkHkl4Cy4WrAVcqBkgvV2YM2TU3xG6DIwO7O3ecbDPfW3yM3bjAGcqcQHi+CCtjMR3dIEHxsd6bA==",
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.27.1.tgz",
+      "integrity": "sha512-ZCYtZciz1IWJB4U61UPu4KEaqyfj+r5T1Q5mqPo+IBpcG9kHv30Z0aD8LXPgC1trYa6rK0orRyAhqUgk4MjmEg==",
       "dependencies": {
-        "@babel/code-frame": "^7.26.2",
-        "@babel/generator": "^7.27.0",
-        "@babel/parser": "^7.27.0",
-        "@babel/template": "^7.27.0",
-        "@babel/types": "^7.27.0",
+        "@babel/code-frame": "^7.27.1",
+        "@babel/generator": "^7.27.1",
+        "@babel/parser": "^7.27.1",
+        "@babel/template": "^7.27.1",
+        "@babel/types": "^7.27.1",
         "debug": "^4.3.1",
         "globals": "^11.1.0"
       },
@@ -1464,12 +1467,12 @@
       }
     },
     "node_modules/@babel/types": {
-      "version": "7.27.0",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.27.0.tgz",
-      "integrity": "sha512-H45s8fVLYjbhFH62dIJ3WtmJ6RSPt/3DRO0ZcT2SUiYiQyz3BLVb9ADEnLl91m74aQPS3AzzeajZHYOalWe3bg==",
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.27.1.tgz",
+      "integrity": "sha512-+EzkxvLNfiUeKMgy/3luqfsCWFRXLb7U6wNQTk60tovuckwB15B191tJWvpp4HjiQWdJkCxO3Wbvc6jlk3Xb2Q==",
       "dependencies": {
-        "@babel/helper-string-parser": "^7.25.9",
-        "@babel/helper-validator-identifier": "^7.25.9"
+        "@babel/helper-string-parser": "^7.27.1",
+        "@babel/helper-validator-identifier": "^7.27.1"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -2483,6 +2486,121 @@
         "vue": "^3.2.25"
       }
     },
+    "node_modules/@vitejs/plugin-vue-jsx": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue-jsx/-/plugin-vue-jsx-4.1.2.tgz",
+      "integrity": "sha512-4Rk0GdE0QCdsIkuMmWeg11gmM4x8UmTnZR/LWPm7QJ7+BsK4tq08udrN0isrrWqz5heFy9HLV/7bOLgFS8hUjA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/core": "^7.26.7",
+        "@babel/plugin-transform-typescript": "^7.26.7",
+        "@vue/babel-plugin-jsx": "^1.2.5"
+      },
+      "engines": {
+        "node": "^18.0.0 || >=20.0.0"
+      },
+      "peerDependencies": {
+        "vite": "^5.0.0 || ^6.0.0",
+        "vue": "^3.0.0"
+      }
+    },
+    "node_modules/@vue-flow/core": {
+      "version": "1.43.1",
+      "resolved": "https://registry.npmjs.org/@vue-flow/core/-/core-1.43.1.tgz",
+      "integrity": "sha512-GL5sFR5Gy8PtyPHfpClyXML1WzcclnmV57Md6W0PQie15S6Y2Xqi28TKSV1E/uvM2tToorvsULg+yDVWLPHR4g==",
+      "dependencies": {
+        "@vueuse/core": "^10.5.0",
+        "d3-drag": "^3.0.0",
+        "d3-selection": "^3.0.0",
+        "d3-zoom": "^3.0.0"
+      },
+      "peerDependencies": {
+        "vue": "^3.3.0"
+      }
+    },
+    "node_modules/@vue-flow/core/node_modules/@vueuse/core": {
+      "version": "10.11.1",
+      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-10.11.1.tgz",
+      "integrity": "sha512-guoy26JQktXPcz+0n3GukWIy/JDNKti9v6VEMu6kV2sYBsWuGiTU8OWdg+ADfUbHg3/3DlqySDe7JmdHrktiww==",
+      "dependencies": {
+        "@types/web-bluetooth": "^0.0.20",
+        "@vueuse/metadata": "10.11.1",
+        "@vueuse/shared": "10.11.1",
+        "vue-demi": ">=0.14.8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vue-flow/core/node_modules/@vueuse/core/node_modules/vue-demi": {
+      "version": "0.14.10",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
+      "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vue-flow/core/node_modules/@vueuse/metadata": {
+      "version": "10.11.1",
+      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-10.11.1.tgz",
+      "integrity": "sha512-IGa5FXd003Ug1qAZmyE8wF3sJ81xGLSqTqtQ6jaVfkeZ4i5kS2mwQF61yhVqojRnenVew5PldLyRgvdl4YYuSw==",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vue-flow/core/node_modules/@vueuse/shared": {
+      "version": "10.11.1",
+      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-10.11.1.tgz",
+      "integrity": "sha512-LHpC8711VFZlDaYUXEBbFBCQ7GS3dVU9mjOhhMhXP6txTV4EhYQg/KGnQuvt/sPAtoUKq7VVUnL6mVtFoL42sA==",
+      "dependencies": {
+        "vue-demi": ">=0.14.8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vue-flow/core/node_modules/@vueuse/shared/node_modules/vue-demi": {
+      "version": "0.14.10",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
+      "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@vue/babel-helper-vue-transform-on": {
       "version": "1.2.5",
       "resolved": "https://registry.npmjs.org/@vue/babel-helper-vue-transform-on/-/babel-helper-vue-transform-on-1.2.5.tgz",
@@ -2998,6 +3116,102 @@
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
     },
+    "node_modules/d3-color": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
+      "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-dispatch": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-3.0.1.tgz",
+      "integrity": "sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-drag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-drag/-/d3-drag-3.0.0.tgz",
+      "integrity": "sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg==",
+      "dependencies": {
+        "d3-dispatch": "1 - 3",
+        "d3-selection": "3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-ease": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz",
+      "integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-interpolate": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
+      "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
+      "dependencies": {
+        "d3-color": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-selection": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz",
+      "integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-timer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz",
+      "integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-transition": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-transition/-/d3-transition-3.0.1.tgz",
+      "integrity": "sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w==",
+      "dependencies": {
+        "d3-color": "1 - 3",
+        "d3-dispatch": "1 - 3",
+        "d3-ease": "1 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-timer": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "peerDependencies": {
+        "d3-selection": "2 - 3"
+      }
+    },
+    "node_modules/d3-zoom": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-zoom/-/d3-zoom-3.0.0.tgz",
+      "integrity": "sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw==",
+      "dependencies": {
+        "d3-dispatch": "1 - 3",
+        "d3-drag": "2 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-selection": "2 - 3",
+        "d3-transition": "2 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/date-fns": {
       "version": "2.30.0",
       "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz",
@@ -3224,6 +3438,11 @@
         "node": ">=8"
       }
     },
+    "node_modules/flow": {
+      "version": "0.2.3",
+      "resolved": "https://registry.npmjs.org/flow/-/flow-0.2.3.tgz",
+      "integrity": "sha512-CFNnRuX6nsOmEjGvE5RP0zwGoebdU9k+IJJy97HHkc0Xdlyh5EFAmdOznTKhEQkWKWXTJp63bW0TWQZ+sywWRw=="
+    },
     "node_modules/follow-redirects": {
       "version": "1.15.9",
       "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.9.tgz",
diff --git a/package.json b/package.json
index fd8e1e29..00063890 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
     "@popperjs/core": "^2.11.8",
     "@sweetalert2/theme-bulma": "^5.0.18",
     "@sweetalert2/theme-dark": "^5.0.18",
+    "@vue-flow/core": "^1.43.1",
     "@vueuse/core": "^12.7.0",
     "animate.css": "^4.1.1",
     "axios": "^1.7.8",
@@ -23,6 +24,7 @@
     "bulma-quickview": "^2.0.0",
     "bulma-switch": "^2.0.4",
     "chart.js": "^4.4.7",
+    "flow": "^0.2.3",
     "sass": "^1.81.1",
     "sweetalert2": "^11.14.5",
     "toastify-js": "^1.12.0",
@@ -36,6 +38,7 @@
   "devDependencies": {
     "@creativebulma/bulma-divider": "^1.1.0",
     "@vitejs/plugin-vue": "^5.1.4",
+    "@vitejs/plugin-vue-jsx": "^4.1.2",
     "sass-embedded": "^1.81.0",
     "vite": "^5.4.10",
     "vite-plugin-vue-devtools": "^7.5.4"
diff --git a/src/components/displays/buttons/ActionSettingsWheelButton.vue b/src/components/displays/buttons/ActionSettingsWheelButton.vue
index 9adcc997..0066ae93 100644
--- a/src/components/displays/buttons/ActionSettingsWheelButton.vue
+++ b/src/components/displays/buttons/ActionSettingsWheelButton.vue
@@ -6,6 +6,7 @@ import ActionSettingsWheelItem from "@/components/displays/buttons/ActionSetting
 import Swal from "sweetalert2";
 import { ref } from "vue";
 import CustomerModal from "@/components/displays/modals/CustomerModal.vue";
+import ActionSettingsWheelItemLabel from "@/components/displays/buttons/ActionSettingsWheelItemLabel.vue";
 
 const props = defineProps({
   icon: {
@@ -20,6 +21,14 @@ const props = defineProps({
     type: Number,
     default: null
   },
+  order_id: {
+    type: Number,
+    default: null
+  },
+  invoice_collection_id: {
+    type: Number,
+    default: null
+  }
 });
 
 const customerModalVisible = ref(false);
@@ -63,6 +72,25 @@ const showSetCustomerPassword = (userId) => {
     }
   });
 }
+
+const redirectSuperUserInvoiceCollectionPage = (invoiceCollectionId) => {
+  // Send the user to the invoice collection page (In a new tab)
+  window.open(`/superuser/invoices/${invoiceCollectionId}`, '_blank');
+};
+
+const redirectDepartmentOrderPage = async (orderId) => {
+  // Send the user to the order page (In a new tab)
+  // Get the department id from the order
+  await SessionUser.objects.orders.functions.get_department_id(props.order_id).then((response) => {
+    // Get the department id from the response
+    // Send the user to the order page (In a new tab)
+    window.open(`/admin/${response}/modules/pos/orders/${orderId}`, '_blank');
+  }).catch((error) => {
+    console.error(error);
+  });
+  // `/admin/${departmentId}/modules/pos/orders/${orderId}`
+  //window.open(`/admin/${tmp_department_id}/modules/pos/orders/${orderId}`, '_blank');
+};
 </script>
 
 <template>
@@ -82,6 +110,10 @@ const showSetCustomerPassword = (userId) => {
           <slot name="actions"></slot>
           <!-- If there's a user_id, show the user actions -->
           <template v-if="props.user_id">
+            <!-- Label -->
+            <ActionSettingsWheelItemLabel
+                :label="SessionUser.objects.global.language.customer"
+            />
             <!-- Se bruger -->
             <ActionSettingsWheelItem
                 label="Se bruger i ny fane"
@@ -112,6 +144,47 @@ const showSetCustomerPassword = (userId) => {
                 v-if="SessionUser.canAccessSuperUser()"
             />
           </template>
+          <!-- If there's an order_id, show the order actions -->
+          <template v-if="props.order_id">
+            <!-- Label -->
+            <action-settings-wheel-item-label
+                :label="SessionUser.functions.ucFirst(SessionUser.objects.orders.meta.labels.single)"
+            />
+            <!-- Go to the order page, in a new tab -->
+            <action-settings-wheel-item
+                label="Se transaktion i ny fane"
+                icon="fas fa-external-link-alt"
+                :click-action="async () => redirectDepartmentOrderPage(props.order_id)"
+                :disabled="false"
+            />
+            <!-- Change the customer (of the order) -->
+            <action-settings-wheel-item
+                label="Skift kunde"
+                icon="fas fa-user-edit"
+                :click-action="() => SessionUser.objects.orders.functions.showChangeCustomerForm(props.order_id)"
+                :disabled="false"
+            />
+            <!-- Change the invoice collection (of the order) -->
+            <action-settings-wheel-item
+                label="Skift faktura samling"
+                icon="fas fa-file-invoice-dollar"
+                :click-action="() => SessionUser.objects.orders.functions.showChangeInvoiceCollectionForm(props.order_id)"
+                :disabled="false"
+            />
+          </template>
+          <!-- If there is an invoice collection id, show the invoice actions -->
+          <template v-if="props.invoice_collection_id">
+            <!-- Label -->
+            <action-settings-wheel-item-label
+              :label="SessionUser.objects.collectedOrderInvoices.meta.title"
+            />
+            <!-- Show the invoice collection, in a new tab -->
+            <action-settings-wheel-item
+                label="Vis faktura samling i ny fane"
+                icon="fas fa-file-invoice-dollar"
+                :click-action="() => redirectSuperUserInvoiceCollectionPage(props.invoice_collection_id)"
+            />
+          </template>
         </template>
         <!-- If no actions are defined, then show that no actions are defined -->
         <template v-else>
diff --git a/src/components/displays/buttons/ActionSettingsWheelItemLabel.vue b/src/components/displays/buttons/ActionSettingsWheelItemLabel.vue
new file mode 100644
index 00000000..eee85d6d
--- /dev/null
+++ b/src/components/displays/buttons/ActionSettingsWheelItemLabel.vue
@@ -0,0 +1,137 @@
+<script setup>
+import { defineProps } from 'vue';
+
+const props = defineProps({
+  icon: {
+    type: String,
+    default: undefined,
+  },
+  label: String,
+  template: {
+    type: String,
+    default: 'default', // The style of the button (default, danger, success, warning, info, light)
+  },
+});
+
+const styles = {
+  default: {
+    button: 'button is-small is-dark',
+    icon: {
+      icon: 'fas fa-cog',
+      color: 'has-text-black'
+    },
+    label: {
+      color: 'has-text-black'
+    },
+  },
+  danger: {
+    button: 'button is-small is-danger',
+    icon: {
+      icon: 'fas fa-cog',
+      color: 'has-text-danger'
+    },
+    label: {
+      color: 'has-text-danger'
+    },
+  },
+  success: {
+    button: 'button is-small is-success',
+    icon: {
+      icon: 'fas fa-cog',
+      color: 'has-text-success'
+    },
+    label: {
+      color: 'has-text-success'
+    },
+  },
+  warning: {
+    button: 'button is-small is-warning',
+    icon: {
+      icon: 'fas fa-cog',
+      color: 'has-text-warning'
+    },
+    label: {
+      color: 'has-text-warning'
+    },
+  },
+  info: {
+    button: 'button is-small is-info',
+    icon: {
+      icon: 'fas fa-cog',
+      color: 'has-text-info'
+    },
+    label: {
+      color: 'has-text-info'
+    },
+  },
+  light: {
+    button: 'button is-small is-light',
+    icon: {
+      icon: 'fas fa-cog',
+      color: 'has-text-black'
+    },
+    label: {
+      color: 'has-text-black'
+    },
+  },
+};
+
+
+const getIcon = () => {
+  return props.icon ?? 'fas fa-cog';
+}
+
+const getLabel = () => {
+  return props.label ?? 'Unavngivet handling';
+}
+
+const getStyle = () => {
+  return styles[props.template] ?? styles.default;
+}
+
+const getButtonClass = () => {
+  return getStyle().button;
+}
+
+const getIconClass = () => {
+  return getStyle().icon.icon;
+}
+
+const getIconColor = () => {
+  return getStyle().icon.color;
+}
+
+const getLabelColor = () => {
+  return getStyle().label.color;
+}
+
+const hasIcon = () => {
+  return props.icon !== undefined && props.icon !== null;
+}
+</script>
+
+<template>
+  <a class="dropdown-item is-disabled">
+                    <span class="icon" v-if="hasIcon()">
+                      <i :class="getIcon() + ' ' + getIconColor()"></i>
+                    </span>
+    <span class="ml-1"
+          :class="getLabelColor()"
+    >{{ getLabel() }}</span>
+  </a>
+</template>
+
+<style scoped>
+.is-disabled {
+  pointer-events: none;
+  opacity: 0.5;
+}
+
+.is-disabled:hover {
+  background-color: transparent;
+}
+
+.is-disabled .icon {
+  opacity: 0.5;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/displays/department/pos/orders/ordersTable.vue b/src/components/displays/department/pos/orders/ordersTable.vue
index 87ad21a2..2ef2662b 100644
--- a/src/components/displays/department/pos/orders/ordersTable.vue
+++ b/src/components/displays/department/pos/orders/ordersTable.vue
@@ -660,29 +660,28 @@ const confirmCloseModal = () => {
         <template v-if="props.invoiceView">
           <td>
             <!-- Dropdown -->
-            <ActionSettingsWheelButton>
+            <ActionSettingsWheelButton
+            v-bind:user_id="order.user_id"
+            v-bind:order_id="order.id"
+            v-bind:invoice_collection_id="order.invoice_collection_id"
+            >
               <template v-slot:actions>
-                <!-- Go to the order page, in a new tab -->
+                <!--
+                Go to the order page, in a new tab
                 <action-settings-wheel-item
                   label="Se transaktion i ny fane"
                   icon="fas fa-external-link-alt"
                   :click-action="() => redirectDepartmentOrderPage(order.id, order.department_id)"
                   :disabled="false"
                   />
-                <!-- Show the invoice collection, in a new tab -->
+                Show the invoice collection, in a new tab
                 <action-settings-wheel-item
                   label="Vis faktura samling i ny fane"
                   icon="fas fa-file-invoice-dollar"
                   :click-action="() => redirectSuperUserInvoiceCollectionPage(order.invoice_collection.id)"
                   :disabled="!doesOrderHaveInvoiceCollection(order)"
                   />
-                <!-- Show the customer page, in a new tab -->
-                <action-settings-wheel-item
-                  label="Vis kunde i ny fane"
-                  icon="fas fa-user"
-                  :click-action="() => clickUser(order.customer_id)"
-                  :disabled="!SessionUser.canAccessSuperUser()"
-                  />
+                -->
               </template>
             </ActionSettingsWheelButton>
           </td>
diff --git a/src/components/displays/department/pos/steps/PosDepartmentStep1.vue b/src/components/displays/department/pos/steps/PosDepartmentStep1.vue
index e555b564..fca8ce2a 100644
--- a/src/components/displays/department/pos/steps/PosDepartmentStep1.vue
+++ b/src/components/displays/department/pos/steps/PosDepartmentStep1.vue
@@ -89,7 +89,12 @@ onMounted(() => {
 
 <template>
   <div>
+    <!--
     {{department_version}}
+    {{department_id}}
+    {{getDepartment()}}
+    -->
+
     <!-- Version 1 -->
     <template v-if="department_version.valueOf() === 1">
       <div class="columns">
diff --git a/src/components/displays/modals/PickCustomerInvoiceCollectionModal.vue b/src/components/displays/modals/PickCustomerInvoiceCollectionModal.vue
new file mode 100644
index 00000000..b747e49f
--- /dev/null
+++ b/src/components/displays/modals/PickCustomerInvoiceCollectionModal.vue
@@ -0,0 +1,198 @@
+<script setup>
+import { ref, defineProps, defineEmits } from "vue";
+import { SessionUser } from "@/components/session/token/SessionUser.vue";
+import InvoiceOrdersPagination
+  from "@/components/displays/pagination/models/SuperUserDashboard/InvoiceOrdersPagination.vue";
+import ElementTabsBox from "@/components/displays/boxes/ElementTabsBox.vue";
+import CollectedOrderInvoicesOverview
+  from "@/views/dashboards/superUserDashboard/collectedOrderInvoices/CollectedOrderInvoicesOverview.vue";
+import { customer_id, searchAndSelectCustomer, isCustomerSelected } from "@/components/shop/POSDepartmentProcess.vue";
+import PosSelectedCustomer from "@/components/displays/department/pos/PosSelectedCustomer.vue";
+import CollectedOrderInvoices from "@/views/dashboards/superUserDashboard/CollectedOrderInvoices.vue";
+import VehiclesPagination from "@/components/displays/pagination/models/UserDashboard/VehiclesPagination.vue";
+import VehiclesTable from "@/components/displays/user/vehicles/vehiclesTable.vue";
+import OrdersTable from "@/components/displays/department/pos/orders/ordersTable.vue";
+import InvoicesTable from "@/components/displays/user/invoices/invoicesTable.vue";
+import CollectedOrderInvoicesTable from "@/components/displays/superuser/tables/collectedOrderInvoicesTable.vue";
+import CollectedOrderInvoicesPagination
+  from "@/components/displays/pagination/models/SuperUserDashboard/CollectedOrderInvoicesPagination.vue";
+const props = defineProps({
+  customer_id: {
+    type: Number,
+    default: null,
+    required: true,
+  },
+  onInvoiceCollectionSelected: {
+    type: Function,
+    default: () => {}
+  },
+  onClose: {
+    type: Function,
+    default: () => {}
+  },
+});
+
+
+const emit = defineEmits(["closeModal", "saveChanges"]);
+
+const closeModal = () => {
+  emit("closeModal");
+  props.onClose();
+}
+
+// Listen for esc key to close the modal
+const handleKeydown = (event) => {
+  if (event.key === "Escape") {
+    closeModal();
+  }
+};
+window.addEventListener("keydown", handleKeydown);
+
+const ucFirst = (str) => {
+  return str.charAt(0).toUpperCase() + str.slice(1);
+};
+
+const selectInvoiceCollection = (invoiceCollection) => {
+  props.onInvoiceCollectionSelected(invoiceCollection);
+  emit("saveChanges", invoiceCollection);
+};
+
+const get_invoice_collection_object = (invoiceCollection) => {
+  return {
+    id: invoiceCollection.id, // The invoice collection ID
+    customer_number: props.customer_id ?? null, // The customer number associated with the invoice collection
+    customer_name: invoiceCollection.customer_name ?? null, // The name of the customer associated with the invoice collection
+    created_at: invoiceCollection.created_at ?? null, // The date the invoice collection was created
+    updated_at: invoiceCollection.updated_at ?? null, // The date the invoice collection was last updated
+    closed_at: invoiceCollection.closed_at ?? null, // The date the invoice collection was closed (if applicable)
+    processor: invoiceCollection.processor ?? null, // The processor associated with the invoice collection (if applicable)
+    external_id: invoiceCollection.external_id ?? null, // The external ID associated with the invoice collection (if applicable)
+    orders: [], // The orders associated with the invoice collection
+  }
+}
+const invoice_collections = ref([
+    get_invoice_collection_object({
+      id: 1,
+      customer_number: props.customer_id,
+      created_at: "2023-10-01",
+      updated_at: "2023-10-02",
+      closed_at: null,
+      processor: 1,
+      external_id: "EXT-001",
+    }),
+    get_invoice_collection_object({
+      id: 2,
+      customer_number: props.customer_id,
+      created_at: "2023-10-03",
+      updated_at: "2023-10-04",
+      closed_at: null,
+      processor: 2,
+      external_id: "EXT-002",
+    }),
+    get_invoice_collection_object({
+      id: 3,
+      customer_number: props.customer_id,
+      created_at: "2023-10-05",
+      updated_at: "2023-10-06",
+      closed_at: null,
+      processor: 3,
+      external_id: "EXT-003",
+    }),
+    get_invoice_collection_object({
+      id: 4,
+      customer_number: props.customer_id,
+      created_at: "2023-10-07",
+      updated_at: "2023-10-08",
+      closed_at: null,
+      processor: 4,
+      external_id: "EXT-004",
+    }),
+]);
+
+const selectedDate = ref('');
+
+const onClickCreateNewInvoiceCollection = async () => {
+  // Logic to create a new invoice collection
+  console.log("Creating new invoice collection... Selected date:", selectedDate.value);
+  await SessionUser.objects.collectedOrderInvoices.add(
+      props.customer_id,
+      'Manual invoice collection',
+      'Created by user',
+      selectedDate.value
+  ).then((response) => {
+    console.log(response.data.data.id, "Invoice collection created successfully");
+    // Select the newly created invoice collection
+    selectInvoiceCollection(parseInt(response.data.data.id));
+  }).catch((error) => {
+    console.error(error, "Error creating invoice collection");
+  });
+};
+
+const tabs = ref([
+  { name: SessionUser.objects.collectedOrderInvoices.meta.title, slot: 'collectedOrderInvoices', icon: 'fas fa-file-invoice-dollar', hidden: false },
+  { name: SessionUser.objects.global.language.add + ' ' + SessionUser.objects.collectedOrderInvoices.meta.labels.single.toLowerCase(), slot: 'createNewInvoiceCollection', icon: 'fas fa-plus', hidden: false },
+]);
+
+
+</script>
+
+<template>
+  <div class="modal is-active" ref="modal">
+    <div class="modal-background" @click="closeModal"></div>
+    <div class="modal-card" style="width: 90%!important;">
+      <header class="modal-card-head">
+        <p class="modal-card-title">{{SessionUser.objects.global.language.select}} {{SessionUser.objects.global.language.invoice.toLowerCase()}} ( {{props.customer_id}} )</p>
+        <button class="delete" aria-label="close" @click="closeModal"></button>
+      </header>
+      <section class="modal-card-body">
+        <div class="content">
+          <!-- Create a new invoice collection form -->
+          <!-- Date: 2023-10-01 -->
+          <ElementTabsBox
+              v-bind:tabs="tabs"
+              v-bind:default-active-tab="tabs[0].slot"
+              v-bind:allow-compact-when-one-tab="true"
+              >
+            <template #collectedOrderInvoices>
+              <!-- Invoice Collections table -->
+              <CollectedOrderInvoicesPagination
+                  v-bind:set-customer-filter="props.customer_id"
+                  :table-props="{
+                showEmpty: true,
+                showTotal: false,
+                isSelector: true,
+                onSelected: props.onInvoiceCollectionSelected,
+              }"
+                  :display-closed="false"
+              />
+
+            </template>
+            <template #createNewInvoiceCollection>
+              <!-- Date picker -->
+              <div class="field">
+                <label class="label">{{SessionUser.objects.global.language.select}} {{SessionUser.objects.global.language.invoice.toLowerCase()}} {{SessionUser.objects.global.language.time.date.toLowerCase()}}</label>
+                <div class="control">
+                  <input class="input" type="date" v-model="selectedDate" />
+                </div>
+              </div>
+              <!-- Create invoice collection button -->
+              <div class="has-text-centered">
+                <button class="button is-primary" @click="onClickCreateNewInvoiceCollection" :disabled="!selectedDate">
+                  <span class="icon"><i class="fas fa-plus"></i></span>
+                  <span>{{SessionUser.objects.global.language.add}} {{SessionUser.objects.collectedOrderInvoices.meta.labels.single.toLowerCase()}}</span>
+                </button>
+              </div>
+            </template>
+          </ElementTabsBox>
+        </div>
+      </section>
+      <footer class="modal-card-foot">
+        <!-- -->
+      </footer>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/components/displays/pagination/models/SuperUserDashboard/CollectedOrderInvoicesPagination.vue b/src/components/displays/pagination/models/SuperUserDashboard/CollectedOrderInvoicesPagination.vue
index 95613753..049a0e28 100644
--- a/src/components/displays/pagination/models/SuperUserDashboard/CollectedOrderInvoicesPagination.vue
+++ b/src/components/displays/pagination/models/SuperUserDashboard/CollectedOrderInvoicesPagination.vue
@@ -1,8 +1,32 @@
 <script setup>
 
 import CollectedOrderInvoicesTable from "@/components/displays/superuser/tables/collectedOrderInvoicesTable.vue";
-
-let props = defineProps(["setCustomerFilter", "hideSearch", "autoLoad", "onlyReadyToInvoice"]);
+const props = defineProps({
+  setCustomerFilter: {
+    type: Number,
+    default: null
+  },
+  hideSearch: {
+    type: Boolean,
+    default: false
+  },
+  autoLoad: {
+    type: Boolean,
+    default: true
+  },
+  onlyReadyToInvoice: {
+    type: Boolean,
+    default: false
+  },
+  tableProps: {
+    type: Object,
+    default: () => ({})
+  },
+  displayClosed: {
+    type: Boolean,
+    default: true
+  },
+});
 import { defineProps } from "vue";
 import { useRouter } from "vue-router";
 import {
@@ -37,9 +61,15 @@ if (!props.onlyReadyToInvoice || props.onlyReadyToInvoice === false) {
   setEndpoint("/collected-invoices/ready-to-invoice", false);
 }
 setOrder("closed_at", "asc", false);
-// Hide the search field, if the hideSearch prop is set
-if (props.hideSearch) {
-  setHideSearchField(true);
+// Hide the search field if the prop is set to true
+setHideSearchField(props.hideSearch);
+
+if (props.setCustomerFilter) {
+  setFilter("customer_number", props.setCustomerFilter, false);
+}
+
+if (!props.displayClosed) {
+  setFilter("closed_at", 'IS_NULL', false);
 }
 
 if (props.autoLoad) {
@@ -51,7 +81,7 @@ if (props.autoLoad) {
 <template>
   <input @input="search($event.target.value)" class="input" type="text" :placeholder="'Søg efter ' + SessionUser.objects.collectedOrderInvoices.meta.labels.single" v-if="!hideSearchField"/>
   <PaginationDisplay :metaItemsPerPage="metaItemsPerPage" :loadFunction="loadList" :isLoading="isLoading" :setMetaItemsPerPage="setMetaItemsPerPage"/>
-  <collected-order-invoices-table v-bind:objects="list" v-bind:loadList="loadList" />
+  <collected-order-invoices-table v-bind:objects="list" v-bind:loadList="loadList" v-bind="tableProps"/>
   <PaginationNavigation :currentPage="metaCurrentPage" :totalPages="Math.ceil(metaTotalItems / metaItemsPerPage)" :loadFunction="loadList" :setPage="setPage" :isLoading="isLoading" />
   <LoadButtonWhileAwait class="is-dark" :isLoading="isLoading" :loadFunction="loadList" icon="fas fa-sync-alt">Reload</LoadButtonWhileAwait>
 </template>
diff --git a/src/components/displays/superuser/tables/collectedOrderInvoicesTable.vue b/src/components/displays/superuser/tables/collectedOrderInvoicesTable.vue
index 95c13a61..61cf384f 100644
--- a/src/components/displays/superuser/tables/collectedOrderInvoicesTable.vue
+++ b/src/components/displays/superuser/tables/collectedOrderInvoicesTable.vue
@@ -1,9 +1,31 @@
 <script setup>
 import EditableTableColumn from "@/components/displays/buttons/EditableTableColumn.vue";
 import {getCustomerName} from "@/components/shop/POSDepartmentProcess.vue";
+import { ref, defineProps, defineEmits } from 'vue';
+const props = defineProps({
+  objects: {
+    type: Array,
+    default: () => [],
+  },
+  showEmpty: {
+    type: Boolean,
+    default: false,
+  },
+  showTotal: {
+    type: Boolean,
+    default: true,
+  },
+  isSelector: {
+    type: Boolean,
+    default: false,
+  },
+  onSelected: {
+    type: Function,
+    default: () => {},
+  },
+});
 
-defineProps(['objects']);
-import { ref } from 'vue';
+const emit = defineEmits(['update:selected']);
 import { loadList } from "@/components/pagination/paginatedList.vue";
 import { SessionUser } from "@/components/session/token/SessionUser.vue";
 import ActionSettingsWheelButton from "@/components/displays/buttons/ActionSettingsWheelButton.vue";
@@ -14,6 +36,24 @@ const redirect = (path) => {
   window.open(path, '_blank');
 }
 
+const parseTransactionCount = (value) => {
+  if (typeof value === 'number') {
+    return value === 0 ? SessionUser.objects.global.language.no_data : value;
+  } else if (typeof value === 'string') {
+    return parseInt(value);
+  } else if (typeof value === 'object') {
+    return value.length;
+  } else if (value === null) {
+    // Handle other types if necessary
+    return SessionUser.objects.global.language.no_data;
+  }
+}
+
+const onSelect = (id) => {
+  emit('update:selected', id);
+  props.onSelected(id);
+}
+
 </script>
 
 <template>
@@ -27,13 +67,13 @@ const redirect = (path) => {
         <th class="is-narrow">{{ SessionUser.objects.orders.meta.title }}</th>
         <th>{{ SessionUser.objects.global.language.status }}</th>
         <th>{{ SessionUser.objects.collectedOrderInvoices.columns.created_at.label }}</th>
-        <th>{{ SessionUser.objects.global.language.total}}</th>
-        <th><!-- Actions --></th>
+        <th v-if="props.showTotal">{{ SessionUser.objects.global.language.total}}</th>
+        <th><!-- Actions / Selector --></th>
       </tr>
       </thead>
       <tbody>
-      <template v-for="object in objects" :key="object.id">
-        <tr v-if="object.orders > 0">
+      <template v-for="object in props.objects" :key="object.id">
+        <tr v-if="object.orders > 0 || props.showEmpty">
         <td>{{ object.id }}</td>
         <!-- Customer name -->
         <EditableTableColumn
@@ -61,6 +101,7 @@ const redirect = (path) => {
             :object="object"
             :loadList="loadList"
             column="orders"
+            :parse-function="(value) => parseTransactionCount(value)"
         />
         <!-- Closed at -->
         <EditableTableColumn
@@ -76,9 +117,9 @@ const redirect = (path) => {
             column="created_at"
         />
         <!-- Total net amount -->
-        <td>{{ SessionUser.functions.currency.toLocal(object.total_net_amount) }}</td>
+        <td v-if="props.showTotal">{{ SessionUser.functions.currency.toLocal(object.total_net_amount) }}</td>
         <!-- Actions -->
-        <td>
+        <td v-if="!props.isSelector">
           <ActionSettingsWheelButton>
             <template #actions>
               <ActionSettingsWheelItem
@@ -89,6 +130,12 @@ const redirect = (path) => {
             </template>
           </ActionSettingsWheelButton>
         </td>
+        <!-- Selector -->
+        <td v-if="props.isSelector">
+          <button class="button is-small is-dark" @click="onSelect(object.id)">
+            {{ SessionUser.objects.global.language.select }}
+          </button>
+        </td>
       </tr>
       </template>
       <!-- If the list is empty -->
@@ -99,7 +146,7 @@ const redirect = (path) => {
       </tr>
       <!-- Show a count of the total number of objects -->
       <tr>
-        <td colspan="9">Viser {{ objects.length - objects.filter(object => object.orders === 0).length }} af {{objects.length}} {{ SessionUser.objects.collectedOrderInvoices.meta.labels.multiple }}, skjuler {{ objects.filter(object => object.orders === 0).length }} {{ SessionUser.objects.collectedOrderInvoices.meta.labels.multiple }} uden ordre</td>
+        <td colspan="9">Viser {{ objects.length - objects.filter(object => object.orders === 0).length }} af {{objects.length}} {{ SessionUser.objects.collectedOrderInvoices.meta.labels.multiple }}<template v-if="!props.showEmpty">, skjuler {{ objects.filter(object => object.orders === 0).length }} {{ SessionUser.objects.collectedOrderInvoices.meta.labels.multiple }} uden ordre</template></td>
       </tr>
       </tbody>
     </table>
diff --git a/src/components/forms/department/pos/SelectVehicleFormPOS.vue b/src/components/forms/department/pos/SelectVehicleFormPOS.vue
index 3a67600a..a172f54c 100644
--- a/src/components/forms/department/pos/SelectVehicleFormPOS.vue
+++ b/src/components/forms/department/pos/SelectVehicleFormPOS.vue
@@ -1,6 +1,6 @@
 <script setup>
 import { ref } from 'vue';
-import { customer_id, notes, isCustomerBarred, customer_name, department_id, reference, reg_1, reg_2, reg_3, searchAndSelectCustomer, selectCustomer, isCustomerSelected, customer_attributes } from "@/components/shop/POSDepartmentProcess.vue";
+import { customer_id, notes, isCustomerBarred, customer_name, reference, reg_1, reg_2, reg_3, searchAndSelectCustomer, selectCustomer, isCustomerSelected, customer_attributes } from "@/components/shop/POSDepartmentProcess.vue";
 import CustomerSearchField from "@/components/search/economic/customerSearchField.vue";
 import { searchCustomerResults } from "@/components/search/economic/customerSearch.vue";
 import PosNotes from "@/components/displays/department/pos/PosNotes.vue";
@@ -191,7 +191,7 @@ const customerHasAttribute = (attribute) => {
                     <!-- Copy last wash content -->
                     <div class="control mt-3">
                       <button
-                          class="button is-small is-light is-fullwidth"
+                          class="button is-small is-light is-fullwidth" disabled
                       >
                     <span class="icon is-small">
                       <i class="fas fa-copy" aria-hidden="true"></i>
@@ -230,7 +230,7 @@ const customerHasAttribute = (attribute) => {
                     <!-- Copy last wash subscription content -->
                     <div class="control mt-3">
                       <button
-                          class="button is-small is-light is-fullwidth is-success"
+                          class="button is-small is-light is-fullwidth is-success" disabled
                       >
                     <span class="icon is-small">
                       <i class="fas fa-copy" aria-hidden="true"></i>
diff --git a/src/components/forms/department/pos/input/LicensePlateReg1Input.vue b/src/components/forms/department/pos/input/LicensePlateReg1Input.vue
index 72982c10..0700c9b8 100644
--- a/src/components/forms/department/pos/input/LicensePlateReg1Input.vue
+++ b/src/components/forms/department/pos/input/LicensePlateReg1Input.vue
@@ -1,7 +1,7 @@
 <script setup>
 import { SessionUser } from "@/components/session/token/SessionUser.vue";
 import { ref, watch, defineEmits } from "vue";
-import { reg_1, department_id, getCustomerName, searchAndSelectCustomer, customer_id, clearCache, clearCustomerSelection } from "@/components/shop/POSDepartmentProcess.vue"
+import { reg_1, getCustomerName, searchAndSelectCustomer, customer_id, clearCache, clearCustomerSelection } from "@/components/shop/POSDepartmentProcess.vue"
 
 const emit = defineEmits(['update:vehicleObject', 'update:focus']);
 
@@ -216,7 +216,6 @@ const selectVehicle = (vehicle_id) => {
     reg_1.value = vehicle.reg;
     // Optionally, you can also set other properties like customer_id, etc.
     customer_id.value = vehicle.customer_id;
-    department_id.value = vehicle.type;
     getCustomerName(vehicle.customer_id);
     if (vehicle.customer_id) {
       // If the vehicle has a customer ID, search and select the customer
@@ -298,7 +297,6 @@ const lostfocus = () => {
     // If the vehicle is found, set the reg_1 value to the vehicle's reg
     reg_1.value = vehicle.reg;
     customer_id.value = vehicle.customer_id;
-    department_id.value = vehicle.type;
     getCustomerName(vehicle.customer_id);
     if (vehicle.customer_id) {
       // If the vehicle has a customer ID, search and select the customer
@@ -324,7 +322,6 @@ watch(vehicles_matching, (newValue) => {
     // If the vehicle is found, set the reg_1 value to the vehicle's reg
     reg_1.value = vehicle.reg;
     customer_id.value = vehicle.customer_id;
-    department_id.value = vehicle.type;
     getCustomerName(vehicle.customer_id);
     if (vehicle.customer_id) {
       // If the vehicle has a customer ID, search and select the customer
diff --git a/src/components/forms/department/pos/input/customerSearchFieldPos.vue b/src/components/forms/department/pos/input/customerSearchFieldPos.vue
index cd3025cc..978961a5 100644
--- a/src/components/forms/department/pos/input/customerSearchFieldPos.vue
+++ b/src/components/forms/department/pos/input/customerSearchFieldPos.vue
@@ -1,10 +1,17 @@
 <script setup>
-import { ref } from 'vue';
+import { ref, defineEmits, defineProps } from 'vue';
 import { customer_id, isCustomerBarred, customer_name, selectCustomer, isCustomerSelected } from "@/components/shop/POSDepartmentProcess.vue";
 import CustomerSearchField from "@/components/search/economic/customerSearchField.vue";
 import { searchCustomerResults } from "@/components/search/economic/customerSearch.vue";
 import { isSearching } from "@/components/search/economic/customerSearch.vue";
 import { SessionUser } from "@/components/session/token/SessionUser.vue";
+const props = defineProps({
+  onCustomerSelected: {
+    type: Function,
+    default: () => {}
+  }
+});
+const emit = defineEmits(['update:customer_id', 'onCustomerSelected']);
 const selectedDropdownItem = ref(-1);
 const showSelector = ref(false);
 
@@ -24,12 +31,24 @@ const arrowKeyHandler = (event) => {
   if (event.key === 'Enter') {
     event.preventDefault();
     selectCustomer(searchCustomerResults.value[selectedDropdownItem.value]);
+    // Emit the customerSelected event
+    console.log('Emitting customerSelected event with:', searchCustomerResults.value[selectedDropdownItem.value]);
+    emitChange(searchCustomerResults.value[selectedDropdownItem.value]);
     selectedDropdownItem.value = -1;
-    // Set the active input to the reference field
-    document.getElementById('reference').focus();
+    // Set the active input to the reference field (if it exists)
+    if (document.getElementById('reference')) {
+      document.getElementById('reference').focus();
+    }
   }
 };
 
+const emitChange = (customer) => {
+  console.log('Emitting update:customer_id with:', customer);
+  emit('update:customer_id', customer.customerNumber);
+  emit('onCustomerSelected', customer);
+  props.onCustomerSelected(customer);
+};
+
 const getSearchIndexByCustomerNumber = (customerNumber) => {
   return searchCustomerResults.value.findIndex((result) => result.customerNumber === customerNumber);
 };
diff --git a/src/components/session/token/SessionUser.vue b/src/components/session/token/SessionUser.vue
index ef634c2f..3921a603 100644
--- a/src/components/session/token/SessionUser.vue
+++ b/src/components/session/token/SessionUser.vue
@@ -297,6 +297,9 @@ export const SessionUser = {
     hasToken: () => {
       return SessionUser.token.value !== null;
     },
+    ucFirst: (str) => {
+      return str.charAt(0).toUpperCase() + str.slice(1);
+    },
     /** Show confirm logout dialog */
     showConfirmLogoutDialog: () => {
       Swal.fire(
diff --git a/src/components/session/token/SessionUser/Objects/CollectedOrderInvoices.vue b/src/components/session/token/SessionUser/Objects/CollectedOrderInvoices.vue
index 8898dfe2..9a7686b8 100644
--- a/src/components/session/token/SessionUser/Objects/CollectedOrderInvoices.vue
+++ b/src/components/session/token/SessionUser/Objects/CollectedOrderInvoices.vue
@@ -5,6 +5,97 @@ import { ObjectsGlobal } from "@/components/session/token/SessionUser/Objects/Ob
 import { SessionUser } from "@/components/session/token/SessionUser.vue";
 import {ref} from "vue";
 
+import {createApp} from "vue";
+import PickCustomerInvoiceCollectionModal from "@/components/displays/modals/PickCustomerInvoiceCollectionModal.vue";
+
+// Define a function to show the modal with the Vue component
+const showInvoiceCollectionPickerModal = async (customerNumber, onSuccessFunction = () => {}) => {
+  // Create a container element for the Vue component
+  const div = document.createElement('div')
+  let selectedInvoiceCollectionId = null;
+
+  // Dynamically create and mount the Vue component
+  // And add a prop to the component "onCustomerSelected"
+  const app = createApp(PickCustomerInvoiceCollectionModal, {
+    customer_id: customerNumber,
+    onInvoiceCollectionSelected: async (selected_invoice_collection_id) => {
+      if (!selected_invoice_collection_id) {
+        Swal.fire({
+          icon: 'error',
+          title: 'Ingen faktura samling valgt',
+          timer: 2000,
+        });
+        return null;
+      }
+      // Handle the customer selection here
+      console.log('Selected invoice collection ID:', selected_invoice_collection_id);
+      // Return the selected invoice collection ID
+      // Call the onSuccess function with the selected invoice collection ID
+      onSuccessFunction(selected_invoice_collection_id);
+      selectedInvoiceCollectionId = selected_invoice_collection_id;
+      // Close the modal
+      Swal.close()
+    },
+    onClose: () => {
+      // Close the modal
+      Swal.close()
+      // Return
+    }
+  })
+
+
+  // Mount the Vue app to the dynamically created `div`
+  app.mount(div)
+
+  // Show SweetAlert2 dialog with the Vue component rendered inside
+  await Swal.fire({
+    html: div, // Include the Vue component’s container
+    showCancelButton: false,
+    showConfirmButton: false,
+    allowOutsideClick: false,
+    heightAuto: true,
+    didDestroy: () => {
+      // Clean up the Vue app when the modal is closed
+      app.unmount()
+    }
+  }).finally(() => {
+    // Return the selected invoice collection ID
+    return selectedInvoiceCollectionId;
+  })
+}
+
+const showCreateCustomInvoiceCollectionForm = async (customerNumber) => {
+  if (!customerNumber) {
+    Swal.fire({
+      icon: 'error',
+      title: 'Ingen kunde valgt',
+      timer: 2000,
+    });
+    return null;
+  }
+  // Ask for the date of the invoice collection
+  const { value: date } = await Swal.fire({
+    title: 'Opret ny faktura samling',
+    input: 'text',
+    inputLabel: 'Dato for faktura samling',
+    inputPlaceholder: 'YYYY-MM-DD',
+    showCancelButton: true,
+    confirmButtonText: 'Opret',
+    cancelButtonText: 'Annuller',
+    inputValidator: (value) => {
+      if (!value) {
+        return 'Du skal indtaste en dato!'
+      }
+    }
+  })
+  if (date) {
+    console.log('Creating new invoice collection... ', date, ' for customer: ', customerNumber);
+  } else {
+    console.log('Cancelled creating new invoice collection');
+    return null;
+  }
+}
+
 /**
  * The CollectOrderInvoices object
  */
@@ -93,12 +184,14 @@ export const CollectedOrderInvoices = {
       }
     },
   },
-  add: async (name, description) => {
+  add: async (customer_number, name, description, closed_at = null) => {
     return ObjectsGlobal.add.object(
         CollectedOrderInvoices.meta.endpoint,
         {
+          customer_number: parseInt(customer_number),
           name: name,
-          description: description
+          description: description,
+          closed_at: closed_at,
         }
     );
   },
@@ -157,6 +250,8 @@ export const CollectedOrderInvoices = {
         throw error;
       });
     },
+    showCreateNewCustom: showCreateCustomInvoiceCollectionForm,
+    showInvoiceCollectionPickerForm: showInvoiceCollectionPickerModal,
     add_vehicle_subscriptions: async (id) => {
       // Send the request
       return authenticatedRequest('/collected-invoices/vehicle-subscriptions', 'POST', {
diff --git a/src/components/session/token/SessionUser/Objects/ObjectsGlobal.vue b/src/components/session/token/SessionUser/Objects/ObjectsGlobal.vue
index 28d662fa..3d355d2a 100644
--- a/src/components/session/token/SessionUser/Objects/ObjectsGlobal.vue
+++ b/src/components/session/token/SessionUser/Objects/ObjectsGlobal.vue
@@ -80,6 +80,7 @@ export const ObjectsGlobal = {
         last_month: 'Sidste måned',
         this_year: 'I år',
         all: 'Altid',
+        date: 'Dato',
       },
       in: 'i',
       nothing_left_to_show: 'Der er ikke mere at vise',
diff --git a/src/components/session/token/SessionUser/Objects/Orders.vue b/src/components/session/token/SessionUser/Objects/Orders.vue
index c16bf332..423c800c 100644
--- a/src/components/session/token/SessionUser/Objects/Orders.vue
+++ b/src/components/session/token/SessionUser/Objects/Orders.vue
@@ -1,12 +1,98 @@
 <script>
 import Swal from "sweetalert2";
-import { authenticatedRequest } from "@/components/session/authenticatedRequest.vue";
-import { ObjectsGlobal } from "@/components/session/token/SessionUser/Objects/ObjectsGlobal.vue";
-import { SessionUser } from "@/components/session/token/SessionUser.vue";
-import {ref} from "vue";
+import {ObjectsGlobal} from "@/components/session/token/SessionUser/Objects/ObjectsGlobal.vue";
+import {SessionUser} from "@/components/session/token/SessionUser.vue";
+import CustomerSearchFieldPos from "@/components/forms/department/pos/input/customerSearchFieldPos.vue";
+import {createApp} from "vue";
+
+// Define a function to show the SweetAlert2 modal with the Vue component
+function showCustomerSearchModal() {
+  // Create a container element for the Vue component
+  const div = document.createElement('div')
+
+  // Dynamically create and mount the Vue component
+  // And add a prop to the component "onCustomerSelected"
+  const app = createApp(CustomerSearchFieldPos, {
+    onCustomerSelected: async (customer) => {
+      if (!customer || !customer.customerNumber) {
+        Swal.fire({
+          icon: 'error',
+          title: 'Ingen kunde valgt',
+          timer: 2000,
+        });
+        return;
+      }
+      // Handle the customer selection here
+      console.log('Selected customer:', customer)
+      // Close the modal
+      Swal.close()
+      // Call the function to pick the customer invoice collection
+      await SessionUser.objects.collectedOrderInvoices.functions.showInvoiceCollectionPickerForm(
+          customer.customerNumber,
+      );
+    }
+  })
+
+
+  // Mount the Vue app to the dynamically created `div`
+  app.mount(div)
+
+  // Show SweetAlert2 dialog with the Vue component rendered inside
+  Swal.fire({
+    title: 'Search for a Customer',
+    html: div, // Include the Vue component’s container
+    showCancelButton: true,
+    showConfirmButton: false,
+    heightAuto: true,
+    didDestroy: () => {
+      // Clean up the Vue app when the modal is closed
+      app.unmount()
+    }
+  })
+}
 
 
 
+const showChangeOrderCustomerForm = async (id) => {
+  showCustomerSearchModal();
+}
+
+const showChangeOrderInvoiceCollectionForm = async (id) => {
+  let customer_number = null;
+  // Get the customer number from the order
+  await SessionUser.objects.orders.functions.get_customer_id(id).then((response) => {
+    customer_number = response;
+    console.log("Customer number:", customer_number);
+  }).catch((error) => {
+    console.error(error);
+  });
+  if (!customer_number) {
+    console.error("Ingen kunde fundet");
+    return;
+  }
+  let invoice_collection_id = null;
+  // Select the invoice collection
+  invoice_collection_id = await SessionUser.objects.collectedOrderInvoices.functions.showInvoiceCollectionPickerForm(
+      customer_number
+  ).finally(() => {
+    if (!invoice_collection_id) {
+      console.error("Ingen faktura samling valgt");
+      return;
+    }
+    // Get the invoice collection id
+    console.log("Selected invoice collection:", invoice_collection_id);
+    // Change the invoice collection
+    //changeInvoiceCollection(id, customer_number, invoiceCollection);
+  }).catch((error) => {
+    console.error(error);
+  });
+  if (!invoice_collection_id) {
+    console.error("Ingen faktura samling valgt");
+    return;
+  }
+  // Change the invoice collection
+  console.log("Selected invoice collection:", invoice_collection_id, "customer_number:", customer_number, "order_id:", id);
+}
 
     /**
      * The Orders object
@@ -248,7 +334,61 @@ import {ref} from "vue";
                 id: id
               },
           )
-        }
+        },
+        /**
+         * Get the order department id
+         * @param id
+         */
+        get_department_id: async (id) => {
+          return SessionUser.request(
+              '/order',
+              'GET',
+              {
+                id: id
+              }
+          ).then((response) => {
+            //console.log(response.data.data.department_id);
+            return parseInt(response.data.data.department_id);
+          }).catch((error) => {
+            console.error(error);
+          });
+        },
+        /**
+         * Get the order customer number
+         * @param id (order id)
+         */
+        get_customer_id: async (id) => {
+          return SessionUser.request(
+              '/order',
+              'GET',
+              {
+                id: id
+              }
+          ).then((response) => {
+            //console.log(response.data.data.customer_id);
+            return parseInt(response.data.data.customer_id);
+          }).catch((error) => {
+            console.error(error);
+          });
+        },
+        /**
+         * Change the order customer
+         * @param id (order id)
+         * @param customer_id (e-conomic customer number)
+         */
+        change_customer: async (id, customer_id) => {
+          return SessionUser.objects.orders.set.customer_id(id, customer_id);
+        },
+        /**
+         * Show the change customer form
+         * @param id (order id)
+         */
+        showChangeCustomerForm: showChangeOrderCustomerForm,
+        /**
+         * Show the change invoice collection form
+         * @param id (order id)
+         */
+        showChangeInvoiceCollectionForm: showChangeOrderInvoiceCollectionForm,
       },
       /**
        * Show the create object form
diff --git a/src/components/shop/POSDepartmentProcess.vue b/src/components/shop/POSDepartmentProcess.vue
index b5ff9a05..e2c9b4b3 100644
--- a/src/components/shop/POSDepartmentProcess.vue
+++ b/src/components/shop/POSDepartmentProcess.vue
@@ -195,7 +195,7 @@ export const createOrder = () => {
   }
   return axios.post(API_URL + '/orders', {
     customer_id: customer_id.value,
-    department_id: department_id.value,
+    department_id: getDepartment(),
     reference: reference.value,
     notes: order_notes.value,
     reg_1: reg_1.value,
diff --git a/src/main.js b/src/main.js
index 6dd90297..0bbef4e2 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,11 +1,10 @@
 import '@/themes/Dark.sass';
 import '@popperjs/core';
-//export const API_URL = 'https://truckwashdev.maintenancemode.cloud';
-//export const API_URL = 'https://nnks.truckwash.dk';
 export const IS_DEV = true;
-export const API_URL = 'https://api.truckwash.dk:4433';
-export const POS_STEP_1_VERSION = 1;
-//export const API_URL = 'https://api.truckwash.dk';
+
+// Development mode
+export const POS_STEP_1_VERSION = (IS_DEV ? 2 : 1);
+export const API_URL = (IS_DEV ? 'https://api.truckwash.dk:4433' : 'https://api.truckwash.dk');
 import { createApp } from 'vue'
 import App from './App.vue'
 import store from './store/user.vue'
@@ -15,6 +14,8 @@ import '@/assets/main.css';
 import 'animate.css';
 import applyMiddleware from '@/middleware/index.js';
 
+
+
 applyMiddleware(router);
 
 createApp(App)
diff --git a/src/views/dashboards/DefaultPageWrapper.vue b/src/views/dashboards/DefaultPageWrapper.vue
index 8a911b37..399737de 100644
--- a/src/views/dashboards/DefaultPageWrapper.vue
+++ b/src/views/dashboards/DefaultPageWrapper.vue
@@ -5,6 +5,7 @@ import { defineProps } from "vue";
 import { defineSlots } from "vue";
 import UserNavigationTop from "@/components/displays/user/UserNavigationTop.vue";
 import Footer from "@/components/global/Footer.vue";
+import {IS_DEV} from "@/main.js";
 
 defineProps({
   title: String,
@@ -58,6 +59,14 @@ const slots = defineSlots()
          :style="{ 'background-color': Colors.menus.parentBackgroundColor, 'color': Colors.menus.textColor }"
     >
       <slot name="left-menu"></slot>
+      <!-- Development version display -->
+      <div class="is-fixed-bottom" v-if="IS_DEV">
+        <div class="has-text-centered">
+          <span class="is-size-6 has-text-warning">
+            IS_DEV ON
+          </span>
+        </div>
+      </div>
     </div>
     <!-- Page content -->
     <div
diff --git a/vite.config.js b/vite.config.js
index 78ded34d..0da09075 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -5,12 +5,14 @@ import vue from '@vitejs/plugin-vue'
 import vueDevTools from 'vite-plugin-vue-devtools'
 import { viteSingleFile } from 'vite-plugin-singlefile'
 import { resolve } from 'path'
+import VueJsx from '@vitejs/plugin-vue-jsx'
 
 // https://vite.dev/config/
 export default defineConfig({
   base: './',
   plugins: [
     vue(),
+    VueJsx(),
     vueDevTools(),
     viteSingleFile()
   ],