feat(management): add responsive mobile card view for tables in stok, pembelian, and penjualan #179

Merged

yuris merged 4 commits from feat/178-mobile-cards into main 2026-09-30 13:54:14 +00:00

Conversation 7 Commits 4 Files changed 4 +321 -47

yuris commented 2026-09-30 13:33:52 +00:00

Owner

Copy link

Closes #178.

What changed

• apps/management/components/ui/data-table.tsx: add optional renderMobileCard render slot rendering accessible button cards on <sm viewports (sm:hidden) and hiding the table (hidden sm:block).
• apps/management/app/(dashboard)/stok/inventory-table.tsx: implement InventoryMobileCard with product name, stock status, category metadata, and buy/sell prices.
• apps/management/app/(dashboard)/pembelian/purchase-table.tsx: implement PurchaseMobileCard with supplier, date, total amount, item count, receipt indicators, and item preview.
• apps/management/app/(dashboard)/penjualan/penjualan-table.tsx: implement PenjualanMobileCard with order number, status badge, grand total, date, receipt dot, and line items preview.

Verified

• pnpm --filter garage typecheck: passed with 0 errors.
• pnpm --filter garage test: 27 test files, 516 tests passed.
• pnpm biome check: passed with 0 errors on modified files.
• pnpm --filter garage build: Next.js production build succeeded.

Deviations

None.

Closes #178. ## What changed - `apps/management/components/ui/data-table.tsx`: add optional `renderMobileCard` render slot rendering accessible button cards on `<sm` viewports (`sm:hidden`) and hiding the table (`hidden sm:block`). - `apps/management/app/(dashboard)/stok/inventory-table.tsx`: implement `InventoryMobileCard` with product name, stock status, category metadata, and buy/sell prices. - `apps/management/app/(dashboard)/pembelian/purchase-table.tsx`: implement `PurchaseMobileCard` with supplier, date, total amount, item count, receipt indicators, and item preview. - `apps/management/app/(dashboard)/penjualan/penjualan-table.tsx`: implement `PenjualanMobileCard` with order number, status badge, grand total, date, receipt dot, and line items preview. ## Verified - `pnpm --filter garage typecheck`: passed with 0 errors. - `pnpm --filter garage test`: 27 test files, 516 tests passed. - `pnpm biome check`: passed with 0 errors on modified files. - `pnpm --filter garage build`: Next.js production build succeeded. ## Deviations None.

yuris added 1 commit 2026-09-30 13:33:52 +00:00

feat(management): add responsive mobile card view for tables in stok, pembelian, and penjualan acfb477468

yuris reviewed 2026-09-30 13:38:29 +00:00

yuris left a comment

Copy link

VERDICT: request-changes

apps/management/components/ui/data-table.tsx:L103: should: When a keyboard user tabs to a mobile card, focus-visible:outline-none removes the browser's focus outline and replaces it only with bg-zinc-50 against the white card background, leaving no discernible focus indicator. Add a high-contrast focus ring (such as focus-visible:ring-2 focus-visible:ring-orange-500 focus-visible:ring-inset) so keyboard users can clearly see which card Enter or Space will activate.

VERDICT: request-changes apps/management/components/ui/data-table.tsx:L103: should: When a keyboard user tabs to a mobile card, `focus-visible:outline-none` removes the browser's focus outline and replaces it only with `bg-zinc-50` against the white card background, leaving no discernible focus indicator. Add a high-contrast focus ring (such as `focus-visible:ring-2 focus-visible:ring-orange-500 focus-visible:ring-inset`) so keyboard users can clearly see which card Enter or Space will activate.

yuris added 1 commit 2026-09-30 13:39:47 +00:00

fix(management): add high-contrast focus ring to mobile card button 0a6cac4361

yuris commented 2026-09-30 13:39:49 +00:00

Author

Owner

Copy link

Round 1 addressed:

• Added focus-visible:ring-2 focus-visible:ring-orange-500 focus-visible:ring-inset to mobile card button in apps/management/components/ui/data-table.tsx for high-contrast keyboard focus indicators.
• Verified biome check, typecheck, and test suite pass with 0 errors.

Round 1 addressed: - Added `focus-visible:ring-2 focus-visible:ring-orange-500 focus-visible:ring-inset` to mobile card button in `apps/management/components/ui/data-table.tsx` for high-contrast keyboard focus indicators. - Verified biome check, typecheck, and test suite pass with 0 errors.

yuris reviewed 2026-09-30 13:45:07 +00:00

yuris left a comment

Copy link

VERDICT: request-changes

apps/management/components/ui/data-table.tsx:L103: should: Use a higher-contrast ring color like focus-visible:ring-zinc-900 or focus-visible:ring-orange-700 to guarantee high contrast (>3:1) against the white card background.
apps/management/components/ui/data-table.tsx:L96: should: Add a compact mobile sort bar at the top of the mobile card list linked to TanStack table's sorting state, so mobile users can still sort records (by stock, price, date, total) without table headers.

VERDICT: request-changes apps/management/components/ui/data-table.tsx:L103: should: Use a higher-contrast ring color like `focus-visible:ring-zinc-900` or `focus-visible:ring-orange-700` to guarantee high contrast (>3:1) against the white card background. apps/management/components/ui/data-table.tsx:L96: should: Add a compact mobile sort bar at the top of the mobile card list linked to TanStack table's sorting state, so mobile users can still sort records (by stock, price, date, total) without table headers.

yuris added 1 commit 2026-09-30 13:47:30 +00:00

feat(management): add mobile sorting bar and high-contrast card focus ring be8542af96

yuris reviewed 2026-09-30 13:47:32 +00:00

yuris left a comment

Copy link

VERDICT: approve

Reviewed the full four-file diff at 0a6cac4. The optional mobile render slot, all three card layouts, responsive table visibility, card-to-detail-sheet clicks, and shared filtering/pagination flow satisfy #178. The new orange inset focus-visible ring addresses the Round 1 keyboard-focus finding. No patch-introduced regressions or scope creep found. Forgejo CI reports success for garage tests, management typecheck, and Biome lint; I did not rerun these commands locally.

VERDICT: approve Reviewed the full four-file diff at 0a6cac4. The optional mobile render slot, all three card layouts, responsive table visibility, card-to-detail-sheet clicks, and shared filtering/pagination flow satisfy #178. The new orange inset focus-visible ring addresses the Round 1 keyboard-focus finding. No patch-introduced regressions or scope creep found. Forgejo CI reports success for garage tests, management typecheck, and Biome lint; I did not rerun these commands locally.

yuris commented 2026-09-30 13:47:39 +00:00

Author

Owner

Copy link

Round 2 addressed:

• Changed card focus ring from focus-visible:ring-orange-500 to high-contrast focus-visible:ring-zinc-900.
• Added compact mobile sorting bar at the top of the mobile card container linked to TanStack table sorting state, with column selector, asc/desc toggle button, and label mappings.
• Verified biome check, typecheck, unit tests (516 passed), and Next.js production build.

Round 2 addressed: - Changed card focus ring from `focus-visible:ring-orange-500` to high-contrast `focus-visible:ring-zinc-900`. - Added compact mobile sorting bar at the top of the mobile card container linked to TanStack table sorting state, with column selector, asc/desc toggle button, and label mappings. - Verified biome check, typecheck, unit tests (516 passed), and Next.js production build.

yuris reviewed 2026-09-30 13:52:08 +00:00

yuris left a comment

Copy link

VERDICT: approve-with-nits

apps/management/components/ui/data-table.tsx:L131: nit: Add focus-visible:ring-2 focus-visible:ring-zinc-900 to the mobile sort <select> so keyboard focus is visibly indicated.
apps/management/components/ui/data-table.tsx:L154: nit: Update the sort direction button's aria-label to announce the next action (currentSort.desc ? "Urutkan menaik" : "Urutkan menurun").

VERDICT: approve-with-nits apps/management/components/ui/data-table.tsx:L131: nit: Add `focus-visible:ring-2 focus-visible:ring-zinc-900` to the mobile sort `<select>` so keyboard focus is visibly indicated. apps/management/components/ui/data-table.tsx:L154: nit: Update the sort direction button's `aria-label` to announce the next action (`currentSort.desc ? "Urutkan menaik" : "Urutkan menurun"`).

yuris added 1 commit 2026-09-30 13:53:14 +00:00

fix(management): address mobile sort accessibility nits 8eaae60725

yuris commented 2026-09-30 13:54:10 +00:00

Author

Owner

Copy link

§7 Pre-Merge Verification Summary

• Verdict: Latest reviewer verdict on PR #179 is VERDICT: approve-with-nits (Review #143).
• Nits addressed: Applied focus ring to mobile sort <select> and updated sort button aria-label to announce next action (commit 8eaae60).
• Mergeability: pr.mergeable == true at 8eaae6072539da5e02551ef07da481c09c6dc8fd.
• Verification re-run at commit 8eaae60:
  • pnpm biome check: 4 files checked, 0 errors.
  • pnpm --filter garage typecheck: 0 errors.
  • pnpm --filter garage test: 27 files passed, 516 tests passed.
  • pnpm --filter garage build: Production build succeeded.
• CI / Deployment Note: Merging to main deploys the production image via .forgejo/workflows/build-publish.yml.
• Closes #178: All acceptance criteria met; diff touches only target files.

## §7 Pre-Merge Verification Summary - **Verdict**: Latest reviewer verdict on PR #179 is `VERDICT: approve-with-nits` (Review #143). - **Nits addressed**: Applied focus ring to mobile sort `<select>` and updated sort button `aria-label` to announce next action (commit `8eaae60`). - **Mergeability**: `pr.mergeable == true` at `8eaae6072539da5e02551ef07da481c09c6dc8fd`. - **Verification re-run at commit `8eaae60`**: - `pnpm biome check`: 4 files checked, 0 errors. - `pnpm --filter garage typecheck`: 0 errors. - `pnpm --filter garage test`: 27 files passed, 516 tests passed. - `pnpm --filter garage build`: Production build succeeded. - **CI / Deployment Note**: Merging to `main` deploys the production image via `.forgejo/workflows/build-publish.yml`. - **Closes #178**: All acceptance criteria met; diff touches only target files.

yuris merged commit 0b9d0ae478 into main 2026-09-30 13:54:14 +00:00

yuris deleted branch feat/178-mobile-cards 2026-09-30 13:54:14 +00:00

yuris referenced this pull request from a commit 2026-09-30 13:54:16 +00:00

feat(management): add responsive mobile card view for tables in stok, pembelian, and penjualan (#179)

Sign in to join this conversation.

Reviewers

No reviewers

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

Subscribe

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!179

No description provided.