shad0w/pelagia-portal

Fork 0

[Issue]: On manager dashboard, overhaul approved spend card #50

New issue

Closed

opened 2026-06-20 20:21:01 +00:00 by shad0w · 3 comments

shad0w commented

2026-06-20 20:21:01 +00:00

Owner

Raised by

Kaushal Pal Singh (kps@pelagiamarine.com, MANAGER) — via portal Report Issue button

Description

Remove the dollar sign, replace it with more appropriate sign (rupee if available)
Round up the number to make it easier to read - 49 L, 2 Cr, etc.

Priority

P2 — Medium

Context

Page: /dashboard
Reported at: 2026-06-20T20:21:01.684Z

### Raised by Kaushal Pal Singh (kps@pelagiamarine.com, MANAGER) — via portal Report Issue button ### Description - Remove the dollar sign, replace it with more appropriate sign (rupee if available) - Round up the number to make it easier to read - 49 L, 2 Cr, etc. ### Priority P2 — Medium ### Context - Page: `/dashboard` - Reported at: 2026-06-20T20:21:01.684Z

shad0w added the

portal

label 2026-06-20 20:21:01 +00:00

shad0w added the

feature

claude-queue

triaged

labels 2026-06-20 20:30:15 +00:00

shad0w commented

2026-06-20 20:30:15 +00:00

Author

Owner

Claude triage

Triage — Issue #50: Overhaul "Total Approved Spend" card on manager dashboard

Type: feature (display enhancement to existing behaviour)
Priority: P2 — Medium
Reporter: Kaushal Pal Singh (MANAGER)
Page: /dashboard (Manager view)

Interpretation

The "approved spend card" is the "Total Approved Spend" StatCard rendered only in
ManagerDashboard (app/(portal)/dashboard/page.tsx:185). The reporter asks for two changes:

"Remove the dollar sign, replace with rupee." The textual value already renders in
INR — formatCurrency() uses Intl.NumberFormat("en-IN", { currency: "INR" }), so it
already shows ₹. The actual $ the manager sees is the DollarSign lucide icon
passed to this card (icon={DollarSign}). Fix = swap that icon for the rupee icon.
lucide-react@0.468 ships IndianRupee (confirmed: indian-rupee.js present in the
installed package), so the rupee icon is available.
"Round up to make it easier to read — 49 L, 2 Cr." Render the amount in the Indian
short scale (lakh = 1e5, crore = 1e7) with a rounded/abbreviated value instead of the
full ₹49,00,000.00. Needs a new compact formatter.

Concrete action items

Add a compact INR formatter in lib/utils.ts — e.g. formatCompactINR(amount)
returning ₹2 Cr, ₹49 L, ₹75 K, etc. (≥1 Cr → "Cr", ≥1 L → "L", ≥1 K → "K",
else plain). Round to ~1–2 significant decimals, trimming trailing .0.
Update the Manager card (app/(portal)/dashboard/page.tsx):
- import { ..., IndianRupee } and drop DollarSign if no longer used (it is also used
  by AccountsDashboard and GenericDashboard — check before removing the import).
- Change the Total Approved Spend card to icon={IndianRupee} and
  value={formatCompactINR(totalSpend)}.
Add unit tests in tests/unit/utils.test.ts for formatCompactINR covering crore,
lakh, thousand, sub-thousand, and zero boundaries (mirrors existing formatCurrency
test block).

Files / areas involved

App/lib/utils.ts — new formatCompactINR helper (alongside formatCurrency).
App/app/(portal)/dashboard/page.tsx — ManagerDashboard card icon + value; lucide imports.
App/components/dashboard/stat-card.tsx — no change needed (accepts string | number value & any LucideIcon).
App/tests/unit/utils.test.ts — new tests.

Open questions

Rounding semantics: "round up" literally = ceiling, but examples ("49 L, 2 Cr") read as
ordinary rounding to a readable figure. Default to rounding to 1–2 significant figures
(not strict ceiling) unless the reporter insists.
Scope: Issue names only the manager card. The same DollarSign icon + full
formatCurrency value also appear on the Accounts card ("Payment Queue Value") and
the Recent/Recent-Approved tables. Recommend keeping changes scoped to the manager
"Total Approved Spend" card only; tables likely should stay precise.
Decimal precision / unit threshold for L vs Cr and whether to keep ₹ prefix
(assumed yes) — minor, dev can pick sensible defaults.

Verification

pnpm type-check, pnpm lint, and pnpm test -- tests/unit/utils.test.ts. No DB,
auth, payment-processing, or external-system involvement — purely display formatting.

Routing rationale: Localized 3-file display-only change (icon swap + new pure formatting util) with clear acceptance and unit-test verification, touching no DB/auth/payment-processing/external systems → claude-queue.

Routing: claude-queue | Type: feature

## Claude triage # Triage — Issue #50: Overhaul "Total Approved Spend" card on manager dashboard **Type:** feature (display enhancement to existing behaviour) **Priority:** P2 — Medium **Reporter:** Kaushal Pal Singh (MANAGER) **Page:** `/dashboard` (Manager view) ## Interpretation The "approved spend card" is the **"Total Approved Spend"** `StatCard` rendered only in `ManagerDashboard` (`app/(portal)/dashboard/page.tsx:185`). The reporter asks for two changes: 1. **"Remove the dollar sign, replace with rupee."** The textual value already renders in INR — `formatCurrency()` uses `Intl.NumberFormat("en-IN", { currency: "INR" })`, so it already shows `₹`. The actual `$` the manager sees is the **`DollarSign` lucide icon** passed to this card (`icon={DollarSign}`). Fix = swap that icon for the rupee icon. `lucide-react@0.468` ships `IndianRupee` (confirmed: `indian-rupee.js` present in the installed package), so the rupee icon is available. 2. **"Round up to make it easier to read — 49 L, 2 Cr."** Render the amount in the Indian short scale (lakh = 1e5, crore = 1e7) with a rounded/abbreviated value instead of the full `₹49,00,000.00`. Needs a new compact formatter. ## Concrete action items 1. **Add a compact INR formatter** in `lib/utils.ts` — e.g. `formatCompactINR(amount)` returning `₹2 Cr`, `₹49 L`, `₹75 K`, etc. (≥1 Cr → "Cr", ≥1 L → "L", ≥1 K → "K", else plain). Round to ~1–2 significant decimals, trimming trailing `.0`. 2. **Update the Manager card** (`app/(portal)/dashboard/page.tsx`): - `import { ..., IndianRupee }` and drop `DollarSign` if no longer used (it is also used by `AccountsDashboard` and `GenericDashboard` — check before removing the import). - Change the Total Approved Spend card to `icon={IndianRupee}` and `value={formatCompactINR(totalSpend)}`. 3. **Add unit tests** in `tests/unit/utils.test.ts` for `formatCompactINR` covering crore, lakh, thousand, sub-thousand, and zero boundaries (mirrors existing `formatCurrency` test block). ## Files / areas involved - `App/lib/utils.ts` — new `formatCompactINR` helper (alongside `formatCurrency`). - `App/app/(portal)/dashboard/page.tsx` — `ManagerDashboard` card icon + value; lucide imports. - `App/components/dashboard/stat-card.tsx` — no change needed (accepts `string | number` value & any `LucideIcon`). - `App/tests/unit/utils.test.ts` — new tests. ## Open questions - **Rounding semantics:** "round up" literally = ceiling, but examples ("49 L, 2 Cr") read as ordinary rounding to a readable figure. Default to rounding to 1–2 significant figures (not strict ceiling) unless the reporter insists. - **Scope:** Issue names only the manager card. The same `DollarSign` icon + full `formatCurrency` value also appear on the **Accounts** card ("Payment Queue Value") and the Recent/Recent-Approved tables. Recommend keeping changes scoped to the manager "Total Approved Spend" card only; tables likely should stay precise. - **Decimal precision / unit threshold** for L vs Cr and whether to keep `₹` prefix (assumed yes) — minor, dev can pick sensible defaults. ## Verification `pnpm type-check`, `pnpm lint`, and `pnpm test -- tests/unit/utils.test.ts`. No DB, auth, payment-processing, or external-system involvement — purely display formatting. Routing rationale: Localized 3-file display-only change (icon swap + new pure formatting util) with clear acceptance and unit-test verification, touching no DB/auth/payment-processing/external systems → claude-queue. **Routing:** `claude-queue` | **Type:** `feature`

shad0w added

claude-working

and removed

claude-queue

labels 2026-06-20 20:30:15 +00:00

shad0w commented

2026-06-20 20:30:16 +00:00

Author

Owner

[Claude] Started working on this issue on branch claude/issue-50.

[Claude] Started working on this issue on branch `claude/issue-50`.

shad0w referenced this issue from a pull request that will close it,

2026-06-20 20:32:52 +00:00

fix: On manager dashboard, overhaul approved spend card #51

shad0w referenced this issue from a commit

2026-06-20 20:32:53 +00:00

feat(dashboard): compact INR formatting for Total Approved Spend card

shad0w added

claude-pr

and removed

claude-working

labels 2026-06-20 20:32:53 +00:00

shad0w commented

2026-06-20 20:32:53 +00:00

Author

Owner

[Claude] Opened PR #51 with a proposed fix. Review and merge it, then create a release tag to deploy.

[Claude] Opened PR [#51](https://git.pelagiamarine.com/shad0w/pelagia-portal/pulls/51) with a proposed fix. Review and merge it, then create a release tag to deploy.

shad0w closed this issue

2026-06-20 20:35:54 +00:00