Refactor module paths, layout responsiveness, and testing configurations:

- Replaced repetitive department module URL logic with `buildDepartmentModulePath` utility in `DepartmentModulesDisplay.vue`.
- Enhanced layouts and responsive behavior across components, including `PosDepartmentStep1MobileTransactionHistory.vue` and `DepartmentDailyReport.vue`.
- Removed unused `SuperuserInvoicingLocalStore.vue` and refactored to `SuperuserInvoicingLocalStore.ts`.
- Updated media query handling and card layout adjustments in `DepartmentDailyReport.vue`.
- Added new Playwright configurations (`playwright.prod.config.ts` and `playwright.live.config.ts`) for e2e release workflows.
- Extended e2e and unit test coverage for mobile POS and department modules.

tests/unit/department-modules-display-self-serve.spec.js

@@ -71,7 +71,7 @@ vi.mock("buefy", () => ({
 }));
 
 import DepartmentModulesDisplay from "@/components/displays/department/moduleNavigation/DepartmentModulesDisplay.vue";
-import { __routeRef } from "vue-router";
+import { __pushMock, __routeRef } from "vue-router";
 
 const flushMicrotasks = async () => {
   await Promise.resolve();
@@ -149,6 +149,19 @@ describe("DepartmentModulesDisplay self-serve management", () => {
     expect(wrapper.get("[data-testid='self-serve-switch']").attributes("data-state")).toBe("off");
   });
 
+  it("renders responsive overview columns for each module card", async () => {
+    const wrapper = mount(DepartmentModulesDisplay);
+    await flushMicrotasks();
+
+    const firstColumn = wrapper.find(".column");
+    expect(firstColumn.classes()).toEqual(expect.arrayContaining([
+      "is-12-mobile",
+      "is-6-tablet",
+      "is-4-desktop",
+      "is-3-widescreen",
+    ]));
+  });
+
   it("updates self-serve status and keeps UI in sync on success", async () => {
     const wrapper = mount(DepartmentModulesDisplay);
     await flushMicrotasks();
@@ -164,6 +177,52 @@ describe("DepartmentModulesDisplay self-serve management", () => {
     expect(mocks.toastSuccess).toHaveBeenCalledWith("admin.department_modules.self_wash.enabled");
   });
 
+  it("keeps the self-serve switch isolated from card navigation", async () => {
+    const wrapper = mount(DepartmentModulesDisplay);
+    await flushMicrotasks();
+    __pushMock.mockClear();
+
+    await wrapper.get("[data-testid='self-serve-switch']").trigger("click");
+    await flushMicrotasks();
+
+    expect(__pushMock).not.toHaveBeenCalled();
+  });
+
+  it("keeps the bookings count badge isolated from the card click handler", async () => {
+    mocks.authenticatedRequest.mockImplementation(async (url, method) => {
+      if (String(url).startsWith("/admin/bookings/department/count?department_id=12")) {
+        return {
+          data: {
+            data: {
+              message: 5,
+            },
+          },
+        };
+      }
+
+      if (url === "/departments/self-serve/enabled?id=12" && method === "GET") {
+        return {
+          data: {
+            data: {
+              enabled: false,
+            },
+          },
+        };
+      }
+
+      throw new Error(`Unexpected request: ${method} ${url}`);
+    });
+
+    const wrapper = mount(DepartmentModulesDisplay);
+    await flushMicrotasks();
+    __pushMock.mockClear();
+
+    await wrapper.get(".department-module-card__count").trigger("click");
+
+    expect(__pushMock).toHaveBeenCalledTimes(1);
+    expect(__pushMock).toHaveBeenCalledWith("/admin/12/modules/bookings?search=pending");
+  });
+
   it("reverts self-serve status and shows an error when update fails", async () => {
     mocks.authenticatedRequest.mockImplementation(async (url, method) => {
       if (String(url).startsWith("/admin/bookings/department/count?department_id=12")) {