Aman-Mittal opened a new issue, #576:
URL: https://github.com/apache/fineract-backoffice-ui/issues/576
Three separate defects on the dashboard, all in
`system-status.component.ts`. Grouping them because they are one file and one
sitting.
> **Screenshots:** _(1) dashboard at 390 px in light theme — the four KPI
cards fuse into a single white slab; (2) dashboard at 1280 px in dark theme —
amber vs. grey `0 Pending Approvals`, and the empty left column._ (attached
below)
## 1. The four KPI tiles have a 0 px gutter
Measured card edges on the dashboard:
| Pair | Gap |
|---|---|
| Total Clients → Active Loans | **0 px** |
| Active Loans → Savings Accounts | **0 px** |
| Savings Accounts → System Health | **0 px** |
| System Health → Pending Approvals | 24 px |
| Pending Approvals → Loan Status | 24 px |
| Loan Status → Savings Status | 24 px |
Every other card pair on the page gets the intended 24 px; only the KPI row
is flush. The tiles are `ion-col` children
(`src/app/features/dashboard/system-status.component.ts:75-165`) whose padding
computes to `0px`, inside an `ion-row` that sets no gap. The `gap: 24px` on the
parent `.dashboard-container` only separates the grid from the section beneath
it.
It is visible in both themes and at both breakpoints, but light mode is
where it reads as broken — four white cards on white become one
undifferentiated block with nothing but corner radii hinting at the boundaries.
There is also a rule that looks like the fix but is **dead code** — no
element carries this class, since the markup renders `.widgets-grid-container`:
```scss
.widgets-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 24px;
}
```
`src/app/features/dashboard/system-status.component.ts:306`
**Suggested fix** — put the gap on the row (`ion-row { gap: 24px; }`) or
restore the column padding, and delete the orphaned `.widgets-grid` rule so it
stops looking like the answer.
## 2. `0 Pending Approvals` is styled as a warning
The identical string gets two treatments on the same row:
| Card | Classes | Colour |
|---|---|---|
| Active Loans | `widget-trend highlight` | `#F39C12`, weight 600 |
| Savings Accounts | `widget-trend` | `#B0B0B0` |
`highlight` is applied unconditionally at
`src/app/features/dashboard/system-status.component.ts:117`, so a queue with
nothing in it is painted amber as though it needs attention — and the same zero
on the next card is not. Colour stops carrying meaning.
**Suggested fix** — `[class.highlight]="pendingCount() > 0"`, applied
consistently to both cards.
## 3. Two thirds of the desktop canvas is empty
`.dashboard-layout` is `2fr 1fr` (`system-status.component.ts:364-366`),
resolving to `686px 343px` at 1440 px. The wide left column holds a single 142
px-tall *Pending Approvals* card and then ~660 px of nothing, while all three
charts are stacked in the 343 px right rail. In that rail the *Runtime API URL*
value wraps mid-token across two lines.
**Suggested fix** — let the charts flow into the full width
(`repeat(auto-fit, minmax(320px, 1fr))`) and give the System Operational Status
block the wide column, where its URLs fit on one line.
## Smaller things noticed in the same file
- `System Health` renders `Online` at ~48 px — larger than any actual KPI
number, so a binary flag outweighs the portfolio figures the page exists to
show. A status pill would be the right weight.
- The header ships `BUSINESS DATE: -` with an empty value on every screen,
and `RENDER TIME: 09:18 PM` presents monospace debug output as a first-class
header field.
## Tested against
Deployed build of `main`, Chrome, 1280x800 and 390x844, both themes. Line
references are against `27d5a441`.
--
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]
