yuris/garage
1
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages 1 Wiki Activity Actions

feat(dashboard): refine chart mobile prices, align baseline, and replace fourth metric with purchases #159

New issue
Closed
opened 2026-09-29 20:12:57 +00:00 by yuris · 0 comments
yuris commented 2026-09-29 20:12:57 +00:00
Owner
Copy link

Acceptance Criteria

1. Chart Price Formatting on Mobile (Image #1)

  • In apps/management/app/(dashboard)/page.tsx, format the price labels above the 6 chart bars compactly so they never collide or overflow horizontally on narrow mobile screens (320px–400px width).
  • For amounts under 1 Million: format in thousands (rb) without decimals (e.g. 683 rb or Rp 683 rb), 0 or Rp 0 for zero.
  • For amounts 1 Million and above: format in millions (Jt) with 1 decimal place (e.g. 1,2 Jt or Rp 1,2 Jt).
  • On mobile (< sm), show compact format (text-[9px] sm:text-xs) without overlapping neighboring columns.

2. Desktop Baseline and Current Month Alignment (Image #2)

  • In apps/management/app/(dashboard)/page.tsx, remove the separate card/ring elevation on the current month column (bg-zinc-50/70 ring-1 ring-zinc-200/80 or similar).
  • The horizontal baseline line must extend continuously across all columns at the exact same vertical level, without breaking or elevating the current month.
  • Highlight the current month cleanly through the bottom label with bold text (text-orange-600) and a Kini indicator badge, keeping the bar itself seamlessly grounded on the baseline.

3. Replace Fourth Metric Card with Stock Purchases

  • In apps/management/app/(dashboard)/page.tsx, replace the fourth KPI card ("LABA BERSIH OPERASIONAL") with "TOTAL BELANJA STOK (PEMBELIAN)".
  • Value: total stock purchase amount for the current month (formatCompactRupiah(monthPurchaseTotal)).
  • Subtext: number of purchase invoices and incoming SKUs in the current month (e.g. X nota pembelian • Y SKU masuk).
  • Visual styling: blue accent bar (bg-blue-500) and invoice/shopping icon (Invoice01Icon or similar).

4. Verification

  • Run existing tests, typecheck, and lint: pnpm --filter garage test && pnpm --filter garage typecheck && pnpm --filter garage lint.
## Acceptance Criteria ### 1. Chart Price Formatting on Mobile (Image #1) - In `apps/management/app/(dashboard)/page.tsx`, format the price labels above the 6 chart bars compactly so they never collide or overflow horizontally on narrow mobile screens (320px–400px width). - For amounts under 1 Million: format in thousands (`rb`) without decimals (e.g. `683 rb` or `Rp 683 rb`), `0` or `Rp 0` for zero. - For amounts 1 Million and above: format in millions (`Jt`) with 1 decimal place (e.g. `1,2 Jt` or `Rp 1,2 Jt`). - On mobile (`< sm`), show compact format (`text-[9px] sm:text-xs`) without overlapping neighboring columns. ### 2. Desktop Baseline and Current Month Alignment (Image #2) - In `apps/management/app/(dashboard)/page.tsx`, remove the separate card/ring elevation on the current month column (`bg-zinc-50/70 ring-1 ring-zinc-200/80` or similar). - The horizontal baseline line must extend continuously across all columns at the exact same vertical level, without breaking or elevating the current month. - Highlight the current month cleanly through the bottom label with bold text (`text-orange-600`) and a `Kini` indicator badge, keeping the bar itself seamlessly grounded on the baseline. ### 3. Replace Fourth Metric Card with Stock Purchases - In `apps/management/app/(dashboard)/page.tsx`, replace the fourth KPI card ("LABA BERSIH OPERASIONAL") with "TOTAL BELANJA STOK (PEMBELIAN)". - Value: total stock purchase amount for the current month (`formatCompactRupiah(monthPurchaseTotal)`). - Subtext: number of purchase invoices and incoming SKUs in the current month (e.g. `X nota pembelian • Y SKU masuk`). - Visual styling: blue accent bar (`bg-blue-500`) and invoice/shopping icon (`Invoice01Icon` or similar). ### 4. Verification - Run existing tests, typecheck, and lint: `pnpm --filter garage test && pnpm --filter garage typecheck && pnpm --filter garage lint`.
yuris closed this issue 2026-09-29 20:26:05 +00:00
Sign in to join this conversation.
No Branch/Tag specified
Branches Tags
main
feat/remove-supplier-category-and-terms
fix/suppliers-table-single-line
feat/phase-5-batch-price-update
feat/phase-4-supplier-catalog-pricing
feat/phase-3-supplier-directory
feat/phase-2-admin-auth-nav
feat/phase-1-supplier-schema
ci/166-prune-container-images
store/services-order
No results found.
Labels
Clear labels
No items
No labels
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
yuris/garage#159
No description provided.