Add department self-serve management with API integration and tests:

- Introduced `DepartmentModulesDisplay` and `DepartmentModulesSetup` components for self-serve enablement management.
- Implemented `getDepartmentSelfServeEnabled` and `setDepartmentSelfServeEnabled` helpers.
- Added unit tests for self-serve status fetching, updating, and UI synchronization.
- Enhanced connectivity and relay logic with in-progress wash session handling and detailed displays.

src/views/dashboards/superUserDashboard/department/modules/DepartmentModulesSetup.vue

@@ -12,6 +12,10 @@ import SuperUserDashboardDepartmentModulesNavigation
   from "@/views/dashboards/superUserDashboard/department/modules/SuperUserDashboardDepartmentModulesNavigation.vue";
 import ConfigurationSwitch from "@/components/displays/superuser/configuration/ConfigurationSwitch.vue";
 import ConfigurationInput from "@/components/displays/superuser/configuration/ConfigurationInput.vue";
+import {
+  getDepartmentSelfServeEnabled,
+  setDepartmentSelfServeEnabled,
+} from "@/composables/departmentSelfServeEnabled.js";
 
 // Get the department from the route
 const router = useRouter();
@@ -21,6 +25,10 @@ const departmentVariables = ref([]);
 const workfeedDepartmentOptions = ref([{ value: "", label: "No Workfeed department" }]);
 const isLoadingWorkfeedDepartments = ref(false);
 const workfeedDepartmentOptionsError = ref("");
+const selfServeEnabled = ref(false);
+const isLoadingSelfServeEnabled = ref(false);
+const isSavingSelfServeEnabled = ref(false);
+const selfServeEnabledError = ref("");
 
 const getDepartmentVariables = async () => {
   await SessionUser.request(
@@ -129,8 +137,40 @@ const setWorkfeedDepartmentId = async (selectedDepartmentId) => {
   });
 };
 
+const loadSelfServeEnabled = async () => {
+  isLoadingSelfServeEnabled.value = true;
+  selfServeEnabledError.value = "";
+  try {
+    selfServeEnabled.value = await getDepartmentSelfServeEnabled(departmentId.value);
+  } catch (error) {
+    console.log(error);
+    selfServeEnabledError.value = "Unable to load self-serve status.";
+    selfServeEnabled.value = false;
+  } finally {
+    isLoadingSelfServeEnabled.value = false;
+  }
+};
+
+const updateSelfServeEnabled = async (enabled) => {
+  const previousValue = selfServeEnabled.value;
+  selfServeEnabled.value = Boolean(enabled);
+  isSavingSelfServeEnabled.value = true;
+  selfServeEnabledError.value = "";
+
+  try {
+    selfServeEnabled.value = await setDepartmentSelfServeEnabled(departmentId.value, enabled);
+  } catch (error) {
+    console.log(error);
+    selfServeEnabled.value = previousValue;
+    selfServeEnabledError.value = "Unable to update self-serve status.";
+  } finally {
+    isSavingSelfServeEnabled.value = false;
+  }
+};
+
 getDepartmentVariables();
 getWorkfeedDepartmentOptions();
+loadSelfServeEnabled();
 </script>
 
 <template>
@@ -217,6 +257,25 @@ getWorkfeedDepartmentOptions();
             ></ConfigurationSwitch>
           </template>
         </ConfigurationCategory>
+        <ConfigurationCategory
+          module="Department setup"
+          title="Moduler"
+          icon="fas fa-soap"
+          subtitle="Selvvask"
+        >
+          <template #default>
+            <ConfigurationSwitch
+              title="Selvvask"
+              description="Aktiver selvvask i denne afdeling."
+              :value="selfServeEnabled"
+              :disabled="isLoadingSelfServeEnabled || isSavingSelfServeEnabled"
+              :on-switch="updateSelfServeEnabled"
+            ></ConfigurationSwitch>
+            <p class="help is-danger" v-if="selfServeEnabledError">
+              {{ selfServeEnabledError }}
+            </p>
+          </template>
+        </ConfigurationCategory>
         <ConfigurationCategory
           module="Workfeed"
           title="Moduler"