From ba92bc4cb6572e950e52e8947ca484a134b24f6a Mon Sep 17 00:00:00 2001
From: Jeppe B <2jepp9350@gmail.com>
Date: Mon, 10 Aug 2026 07:56:42 +0200
Subject: [PATCH] fix(pleno-vue): keep Fakturer nu visible on red-flagged
 customers (#279)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Why

PR #271 made the `Fakturer nu` button visible again on multi-flag
customers in
the Kunder til gennemgang panel, but the button's v-if still gates on
`customer.requires_action`. On customers with manual (red) flags where
`requires_action` is false — e.g. flagged but the period's unbooked
transactions
are zero — the button stayed hidden in the right rail even though there
is
clearly something that needs the superuser's attention.

## What changed


`src/views/dashboards/superUserDashboard/InvoicingBillingPeriod/views/InvoicingBillingPeriodViewAll.vue`:

- New helper `hasRedFlags(customer)` next to `hasMultipleRedFlags`.
- Fakturer nu button v-if → `tmpFilters.displayRequiresAction &&
(customer.requires_action || hasRedFlags(customer))`.
- The `Gennemgå flag` tag remains gated on `hasMultipleRedFlags` (>= 2)
so the multi-flag warning is still loud.

`tests/unit/invoicing-period-queue-state.behavior.spec.js`:

- New test: `keeps the Fakturer nu button visible for customers with red
flags even when requires_action is false`.
- Sanity-checked: with the fix reverted, the test fails on the
visibility assertion; with the fix in place, it passes alongside the
existing 23 cases.

## Verification

| Check | Result |
|---|---|
| `npm run lint` | ✓ clean |
| `npm run format:tests:check` | ✓ clean |
| `npm run i18n:v2:check` | ✓ pass |
| `npm run test:unit:fast` | ✓ 1348/1348 (incl. new regression test) |
| `npm run build` | ✓ pass |

## Risk

- Surface-only v-if change. No API, data shape, or permission changes.
- Customers with red flags that previously showed neither the button nor
the
  `Gennemgå flag` tag now get the Fakturer nu button back. The button is
still scoped by the existing `v-if/v-else-if` chain (`all booked`, queue
blocked, draft blocked, action), so it does not appear where it
shouldn't.

🤖 Generated with [OpenClaw](https://openclaw.ai)

Co-authored-by: Cleanup Agent <agent@truckwash.io>
---
 .../views/InvoicingBillingPeriodViewAll.vue   |  7 ++-
 ...oicing-period-queue-state.behavior.spec.js | 49 +++++++++++++++++++
 2 files changed, 55 insertions(+), 1 deletion(-)

diff --git a/src/views/dashboards/superUserDashboard/InvoicingBillingPeriod/views/InvoicingBillingPeriodViewAll.vue b/src/views/dashboards/superUserDashboard/InvoicingBillingPeriod/views/InvoicingBillingPeriodViewAll.vue
index c09b4ca6..2a55ad0b 100644
--- a/src/views/dashboards/superUserDashboard/InvoicingBillingPeriod/views/InvoicingBillingPeriodViewAll.vue
+++ b/src/views/dashboards/superUserDashboard/InvoicingBillingPeriod/views/InvoicingBillingPeriodViewAll.vue
@@ -300,6 +300,11 @@ const getCustomerFlagTabType = (customer: any): CustomerFlagTab => {
   return "none";
 };
 
+const hasRedFlags = (customer: any): boolean => {
+  const flagCounts = getCustomerActiveFlagCounts(customer);
+  return Number(flagCounts?.manual ?? 0) > 0;
+};
+
 const hasMultipleRedFlags = (customer: any): boolean => {
   const flagCounts = getCustomerActiveFlagCounts(customer);
   return Number(flagCounts?.manual ?? 0) >= 2;
@@ -1526,7 +1531,7 @@ const getTransactionQueryParameters = () => {
               </div>
               <div class="column is-narrow period-customer-card__state" v-else>
                 <button
-                  v-if="tmpFilters.displayRequiresAction && customer.requires_action"
+                  v-if="tmpFilters.displayRequiresAction && (customer.requires_action || hasRedFlags(customer))"
                   type="button"
                   class="button is-small is-dark is-inverted"
                   :class="{ 'is-loading': isCustomerPeriodActionLoading(customer) }"
diff --git a/tests/unit/invoicing-period-queue-state.behavior.spec.js b/tests/unit/invoicing-period-queue-state.behavior.spec.js
index 59ba3fa2..b5ed2cd8 100644
--- a/tests/unit/invoicing-period-queue-state.behavior.spec.js
+++ b/tests/unit/invoicing-period-queue-state.behavior.spec.js
@@ -729,6 +729,55 @@ describe("Invoicing period queue state", () => {
     expect(customer.get("[data-testid='invoice-period-flags-stub']").text()).toBe("2");
   });
 
+  it("keeps the Fakturer nu button visible for customers with red flags even when requires_action is false", async () => {
+    sharedVariablesRef.value = {
+      types: {
+        all: [
+          {
+            id: 11,
+            customer_number: 1011,
+            customer_name: "Red Flag Only Customer",
+            requires_action: false,
+            status_indicator: "flag_red",
+            flag_counts: {
+              manual: 1,
+              automatic: 0,
+              total: 1,
+            },
+            flags: [
+              {
+                id: 1011,
+                source: "manual",
+                status: "active",
+                target_type: "customer",
+                target_id: 1011,
+                customer_number: 1011,
+                reason: "Manual flag — review required",
+              },
+            ],
+            transactions: [
+              {
+                id: 8101,
+                amount: 60,
+                booked: false,
+                excluded: false,
+                invoice_collection_id: 6101,
+                date: "2026-04-15T10:00:00.000Z",
+              },
+            ],
+          },
+        ],
+      },
+    };
+
+    const wrapper = mountView();
+    await nextTick();
+
+    const customer = wrapper.get("[data-testid='invoicing-period-customer-1011']");
+    expect(customer.get("[data-testid='invoicing-period-customer-invoice-1011']").text()).toContain("Invoice now");
+    expect(customer.find("[data-testid='invoicing-period-customer-multiple-red-flag-1011']").exists()).toBe(false);
+  });
+
   it("keeps collected invoice flags visible even when linked transactions are excluded", async () => {
     sharedVariablesRef.value = {
       types: {