Gate Fakturer nu on red flag count; expand customer card layout (#264)

## Why

1. The **Fakturer nu** button on the customer card in the superuser faktura-periode "Alle" view was firing even when the customer had multiple red flags — a footgun for superusers (the button shouldn't be one click away from a flagged customer).
2. Each customer card had a fixed `min-height: 68px` on its row and `overflow: hidden` on the identity block, so longer customer names were ellipsised and attribute chips were clipped. The user asked for taller cards with no internal scroll.

## What changed

### Original commit (`da35baa8`)

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

- New helper `hasMultipleRedFlags(customer)` — true when `getCustomerActiveFlagCounts(customer).manual >= 2`.
- Button `v-if` now requires `!hasMultipleRedFlags(customer)`.
- When gated, an `is-danger is-light` "Gennemgå flag" tag replaces it so superusers see why.

### Follow-up commit (`8370ba81`) — card layout + chip discoverability

- `.period-customer-card` — `min-height: 9rem`.
- `.period-customer-card__row` — dropped fixed `min-height: 68px`; added explicit `grid-template-rows: auto auto auto auto` + `row-gap: 0.35rem` so the grid stretches naturally.
- `.period-customer-card__identity` — `overflow: hidden → visible`.
- Customer name — added `overflow-wrap: anywhere` so long names wrap instead of clipping.
- Removed internal scroll; the outer list scroll still works.
- Sort billing-type chips deterministically (billing first, operational, review) so chip order is stable regardless of API response shape.
- Add view_friendly_name i18n key for `invoice_per_order`.
- Widen `invoicing-period.smoke.spec.js` mobile card-height tolerance from 3px → 32px (with explanatory comment) for the taller-cards-no-internal-scroll design.

### Follow-up commit (`4f5363fa`) — Playwright strict-mode collision

The chip-mirroring change in the review-detail header shared the same data-testid pattern (`invoicing-period-customer-attributes-{n}`) as the queue card, so the Playwright test failed with `strict mode violation: ... resolved to 2 elements` whenever a flagged customer was selected.

- Added a `scope` prop to `InvoicingBillingPeriodCustomerAttributes` (default `'queue'`, accepts `'review-detail'`). When scope is review-detail, the wrapper and per-chip test-ids are namespaced, so both instances coexist.

## Verification

- `npx eslint` — clean.
- `npm run i18n:v2:check` — pass.
- `vite build` — pass.

## Caveats / follow-ups (out of scope, not blocking)

- `invoicing_period.xlvask_autopilot` — fallback Danish strings ("Gennemgå flag") aren't yet in `invoicingPeriodTranslation.js`.
- Red-flag threshold `>= 2` is hard-coded; promote to a config ref if you want it tunable.
- `InvoicingBillingPeriodCustomerAttributes` still has internal `height: 2.45rem; overflow: hidden` on attribute chips — separate cleanup.

## Risk

- Surface-only CSS + 1 v-if guard; no data shape changes, no API changes, no permission changes. Behaviour change is strictly "Fakturer nu is hidden on multi-flag customers with an explanatory tag in its place".

🤖 Generated with [OpenClaw](https://openclaw.ai)
This commit is contained in:
Jeppe B
2026-08-09 00:43:30 +02:00
committed by GitHub
parent 1548ae8cd5
commit 683196ddf5
5 changed files with 92 additions and 21 deletions
+7 -1
View File
@@ -2915,7 +2915,13 @@ test.describe("Invoicing period tab", () => {
expect(fontSize, `customer attribute tag ${index + 1} font size`).toBeGreaterThanOrEqual(10);
}
expect(Math.abs(multiCardBox.height - singleCardBox.height)).toBeLessThanOrEqual(3);
// Customer cards are sized to their content (no fixed height) per the
// "taller cards, no internal scroll" design change. Multi-attribute
// customers naturally render slightly taller than single-attribute ones
// when attribute chips wrap on narrow viewports. Tolerance widened from
// 3px (fixed-height era) to 32px to accommodate that without forcing
// uniform heights that would either crop content or reintroduce scroll.
expect(Math.abs(multiCardBox.height - singleCardBox.height)).toBeLessThanOrEqual(32);
expect(identityBox.x).toBeLessThan(settingsBox.x);
expect(settingsBox.x + settingsBox.width).toBeLessThanOrEqual(multiCardBox.x + multiCardBox.width);
expect(Math.abs(countBox.y - amountBox.y)).toBeLessThanOrEqual(2);