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

feat(management): paginate aging inventory table and clean mobile stock card layout #188

New issue
Closed
opened 2026-10-01 16:41:24 +00:00 by yuris · 0 comments
yuris commented 2026-10-01 16:41:24 +00:00
Owner
Copy link

Problem

  1. The "Modal Mengendap (>60 Hari)" section on the dashboard currently displays only a static slice of the top 5 aged items without pagination controls. Unlike other data tables in the application (/stok, /pembelian, /penjualan, /pelanggan), users cannot page through all aging inventory or adjust page sizes.
  2. In the mobile card view for stock (InventoryMobileCard in apps/management/app/(dashboard)/stok/inventory-table.tsx), the horizontal border line separator between the category row and the prices row is visually distracting.

Acceptance Criteria

  • Implement pagination on the "Modal Mengendap" table in the dashboard using DataTable and @tanstack/react-table matching the behavior and styling of the other tables in the app.
  • Initialize pagination starting from 5 items per page (pageSize: 5), with page size options including 5, 10, 25, 50.
  • Ensure all aging inventory items are available in the table (removing the hardcoded slice(0, 5) limit), sorted initially by aged cost value descending.
  • Provide responsive layout support (mobile card view via renderMobileCard and desktop table view) for the aging inventory table.
  • In apps/management/app/(dashboard)/stok/inventory-table.tsx, remove the separator (border-t border-zinc-100) between the category row and the prices row in InventoryMobileCard.
  • All package test suites, typechecks (pnpm exec tsc --noEmit), and biome lint gates pass cleanly with 0 regressions.
## Problem 1. The "Modal Mengendap (>60 Hari)" section on the dashboard currently displays only a static slice of the top 5 aged items without pagination controls. Unlike other data tables in the application (`/stok`, `/pembelian`, `/penjualan`, `/pelanggan`), users cannot page through all aging inventory or adjust page sizes. 2. In the mobile card view for stock (`InventoryMobileCard` in `apps/management/app/(dashboard)/stok/inventory-table.tsx`), the horizontal border line separator between the category row and the prices row is visually distracting. ## Acceptance Criteria - [ ] Implement pagination on the "Modal Mengendap" table in the dashboard using `DataTable` and `@tanstack/react-table` matching the behavior and styling of the other tables in the app. - [ ] Initialize pagination starting from 5 items per page (`pageSize: 5`), with page size options including 5, 10, 25, 50. - [ ] Ensure all aging inventory items are available in the table (removing the hardcoded `slice(0, 5)` limit), sorted initially by aged cost value descending. - [ ] Provide responsive layout support (mobile card view via `renderMobileCard` and desktop table view) for the aging inventory table. - [ ] In `apps/management/app/(dashboard)/stok/inventory-table.tsx`, remove the separator (`border-t border-zinc-100`) between the category row and the prices row in `InventoryMobileCard`. - [ ] All package test suites, typechecks (`pnpm exec tsc --noEmit`), and biome lint gates pass cleanly with 0 regressions.
yuris closed this issue 2026-10-01 17:04:34 +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#188
No description provided.