fix(finance): comprehensive product master UX overhaul, sortable tables, and detail drawer#62
Merged
ilramdhan merged 2 commits intoJul 2, 2026
Conversation
…view drawer, multi-type filter, polish - SortableHeader (shared): fa-sort triangle indicator, whole-th click target, aria-sort + keyboard; all 9 product master columns sortable server-side - Column show/hide via useColumnVisibility + ColumnVisibilityMenu (persisted, h-9 trigger); product code not hideable - Clickable rows navigate to detail (actions excluded); code cell plain text - ProductDetailDrawer: sticky header/footer, carded sections (details/routing/ params grouped by display group/cost history), calculated params excluded, lazy per-section queries - ProductTypeMultiCombobox: multi-select filter, CSV in URL, popover clear - Polish: uniform button sizes, h-9 filter row, icon-only header actions below sm, neutral KPI variants, KpiGrid odd-last full-width span, space-y-6 rhythm, table edge padding, 375px responsive floor - Fix: sortBy/sortOrder added to useUrlState defaults (were silently dropped) Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
- DESIGN.md: control height parity (h-9 toolbar rows), header action button sizing + icon-only collapse, multi-select combobox pattern, row-click navigation rules - LAYOUT.md: flat list page variant, table edge padding, 375px responsive floor - RULES.md: Mistake 12 (sortBy/sortOrder must be in useUrlState defaults), Mistake 13 (stale typography cardTitle); SortableHeader + StatusBadge usage - CLAUDE.md §10.3: useUrlState defaultValues tracking warning Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
ilramdhan
added
bug
github-project-automation
Bot
moved this from In progress
to Done
in Goapps Roadmap [Frontend]
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
Pull Request ini menghadirkan perombakan UX (User Experience) secara masif pada halaman Product Master. Pembaruan ini mencakup implementasi tabel yang dapat diurutkan secara server-side menggunakan komponen
SortableHeaderbaru, kontrol visibilitas kolom yang tersimpan (persisted), filter multi-select, serta navigasi baris yang dapat diklik (clickable rows).Selain itu, PR ini memperkenalkan Product Detail Drawer, sebuah laci interaktif (interactive drawer) dengan sticky header/footer dan lazy loading per-seksi, yang menggantikan kebutuhan navigasi ke halaman terpisah untuk melihat detail. Seluruh pola UI baru ini—termasuk standardisasi tinggi elemen kontrol (
h-9), responsivitas icon-only di layar kecil, dan ritme tata letak (layout rhythm)—telah dikodifikasikan ke dalam dokumen design system (DESIGN.md,LAYOUT.md,RULES.md,CLAUDE.md).Type of Change
Module/Component Affected
Changes Made
1. Advanced Data Table & Filters:
fa-sort, area klik penuh, dan dukungan aksesibilitas (aria-sort& navigasi keyboard).ColumnVisibilityMenudan hookuseColumnVisibilityuntuk menampilkan/menyembunyikan kolom secara dinamis (kode produk diatur agar tidak dapat disembunyikan).ProductTypeMultiComboboxyang memungkinkan filter multi-select dan secara otomatis menyinkronkan data ke URL dalam format CSV.2. Product Detail Drawer:
ProductDetailDraweryang responsif.3. UI Polish & Bug Fixes:
h-9, ukuran tombol yang seragam,KpiGriddengan lebar penuh (full-width span) untuk elemen ganjil terakhir, table edge padding, serta floor responsivitas layar di batas 375px.sm(mobile).sortBydansortOrderke dalam defaultsuseUrlState(sebelumnya nilai ini hilang secara silent saat state berubah).4. Design System Documentation:
DESIGN.mddanLAYOUT.mddengan konvensi UI terbaru (flat list page variant, h-9 parity, multi-select combobox, aturan row-click).RULES.mddanCLAUDE.md(Mistake 12: missing URL defaults, Mistake 13: stale typography), serta dokumentasi penggunaanSortableHeader.Related Issues
Fixes #
Related to #
Screenshots
Before
After
Testing Performed
Manual Testing
Browser Testing
Build Verification
npm run lintpassesnpx tsc --noEmitpassesnpm run buildsucceedsAccessibility
aria-sortimplemented)Performance
Pre-merge Checklist
Reviewer Notes
useUrlStateFix): Harap perhatikan perbaikan pada hook state parameter. Kealpaan memasukkan variabel ke dalam objekdefaultValuespadauseUrlStateakan menyebabkan status URL terhapus otomatis saat ada interaksi lain. Aturan ini telah dibakukan di dokumenRULES.md.h-9untuk memastikan konsistensi dan estetika setara di seluruh dashboard.