CaptainAni187 opened a new pull request, #646:
URL: https://github.com/apache/fineract-backoffice-ui/pull/646
## What and why
Fixes the three dashboard defects from #576, all in
`system-status.component.ts`.
1. **KPI gutter.** The `ion-col` padding resolves to 0 here, so the four
tiles sat flush. The gutter is now set on the columns (12px each side), with a
matching negative margin on the row so the outer tiles stay flush with the
cards below. I didn't use `ion-row { gap: 24px }`: the columns are fixed at
25%, so 4 × 25% plus three gaps overflows the row and the fourth tile wraps.
Each tile also fills its column now, because with the narrower tiles "Savings
Accounts" wraps at 1280px and the row went uneven. The orphaned `.widgets-grid`
rule is removed.
2. **`0 Pending Approvals`.** `highlight` is now
`[class.highlight]="pending….length > 0"` on both the loans and savings cards.
3. **Empty canvas.** I first tried a single `auto-fit` grid for all the
cards. At 1280px it left holes (the short approvals card next to a tall chart,
and the savings chart alone on its row). So the dashboard is now full-width
bands instead: pending approvals, then the two charts side by side
(`repeat(auto-fit, minmax(min(320px, 100%), 1fr))`, which stack when narrow),
then the system status across the full width. The charts band carries the same
OR permission gate as the approvals card, so a user who can see neither chart
gets no empty band. The old `max-width: 768px` rule that forced one column is
now what the layout does at every width, so I removed it.
I left the "smaller things" at the end of the issue (the `Online` size, the
header's business date and render time) out of this PR.
Closes #576
## Verification
- Unit: two new tests in `system-status.component.test.ts` check that an
empty queue is not highlighted on either card, and that each card is
highlighted only while it has something pending. Both fail on `main`. The test
bed now provides the router, because the approvals list renders `routerLink`s
once items exist.
- `npm test`: 260 files, 1657 tests passing. `npm run lint` is clean and
`npm run build` succeeds.
- Playwright `mocked` and `mobile` projects: 410 passed, 6 skipped. One test
failed in the full run, `date-picker-revisit` › floating rate form on `mobile`.
It passes 3/3 on its own both with this change and on `main`, so I think it's
load flakiness.
- UI exercised with mocks only (no Fineract backend), at 390×844 light,
1280×800 dark and 1440×900 light. Measured card edges: the KPI gaps go from
0/0/0px to 24/24/24px, and both empty queues render in the same muted colour.
At 1440px the status block goes from 348px to 1068px wide. With the stub config
the runtime URL is just `/api/v1`, so I couldn't reproduce the mid-token wrap
from the issue. The block is simply much wider now.
## Screenshots
Mocked API, same data before and after.
**1280×800, dark** — gutter, matching grey zeros, charts side by side
| Before | After |
|---|---|
| 
| 
|
**1440×900, light** — the wide column no longer holds one short card over
empty space
| Before | After |
|---|---|
| 
| 
|
**390×844, light** — tiles separated instead of one slab
| Before | After |
|---|---|
| 
| 
|
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
