feat(management): responsive mobile cards for stok, pembelian, and penjualan tables #178

New issue

Closed

opened 2026-09-30 13:31:52 +00:00 by yuris · 0 comments

yuris commented

2026-09-30 13:31:52 +00:00

Owner

Problem

The data tables in /stok, /pembelian, and /penjualan require wide displays because of multiple columns (6–7 columns). On mobile screens (< 640px), users must scroll horizontally back and forth to inspect data.

Acceptance Criteria

Add an optional renderMobileCard render slot in apps/management/components/ui/data-table.tsx.
When renderMobileCard is provided, DataTable renders a vertical list of accessible button cards on <sm screens (sm:hidden) and hides the table structure (hidden sm:block).
Implement responsive mobile card layout in apps/management/app/(dashboard)/stok/inventory-table.tsx (InventoryMobileCard), showing product name, stock badge, type, category, and buy vs sell prices.
Implement responsive mobile card layout in apps/management/app/(dashboard)/pembelian/purchase-table.tsx (PurchaseMobileCard), showing supplier, date, total amount, item count, receipt indicator, and item summary.
Implement responsive mobile card layout in apps/management/app/(dashboard)/penjualan/penjualan-table.tsx (PenjualanMobileCard), showing order number, status badge, grand total, date, receipt dot, and line items.
Tapping a card triggers onRowClick, preserving existing detail sheet interactions.
Pagination, search, and filters remain functional across mobile and desktop views.
Typechecks (pnpm --filter garage typecheck), tests (pnpm --filter garage test), and biome checks pass with 0 errors.

## Problem The data tables in `/stok`, `/pembelian`, and `/penjualan` require wide displays because of multiple columns (6–7 columns). On mobile screens (< 640px), users must scroll horizontally back and forth to inspect data. ## Acceptance Criteria - [ ] Add an optional `renderMobileCard` render slot in `apps/management/components/ui/data-table.tsx`. - [ ] When `renderMobileCard` is provided, `DataTable` renders a vertical list of accessible button cards on `<sm` screens (`sm:hidden`) and hides the table structure (`hidden sm:block`). - [ ] Implement responsive mobile card layout in `apps/management/app/(dashboard)/stok/inventory-table.tsx` (`InventoryMobileCard`), showing product name, stock badge, type, category, and buy vs sell prices. - [ ] Implement responsive mobile card layout in `apps/management/app/(dashboard)/pembelian/purchase-table.tsx` (`PurchaseMobileCard`), showing supplier, date, total amount, item count, receipt indicator, and item summary. - [ ] Implement responsive mobile card layout in `apps/management/app/(dashboard)/penjualan/penjualan-table.tsx` (`PenjualanMobileCard`), showing order number, status badge, grand total, date, receipt dot, and line items. - [ ] Tapping a card triggers `onRowClick`, preserving existing detail sheet interactions. - [ ] Pagination, search, and filters remain functional across mobile and desktop views. - [ ] Typechecks (`pnpm --filter garage typecheck`), tests (`pnpm --filter garage test`), and biome checks pass with 0 errors.

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

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

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

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

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

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

yuris closed this issue

2026-09-30 13:54:14 +00:00