feat(finance): bulk product routing system, import/export jobs tracking page, and responsive UI polish#52
Merged
ilramdhan merged 9 commits intoJun 22, 2026
Conversation
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…nd page integration Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…rtDialog - Import React to use React.Fragment with key prop on .map() (line 193) - Moved key from TableRow to Fragment to fix React key warning - Add isValid validation check to "Start Import" button (line 280) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…ly returning empty result
When the BFF returns a successful HTTP 200 but base.isSuccess=false,
validateBulkProductRoutingFile now throws so the caller can surface the error
to the user rather than silently returning { isValid: false, sheets: [] }.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…ign bulk import dialog - Replace 4 separate action buttons on product-master page with 2 dropdown buttons (Import / Export), each with product-only and bulk+routing variants - Redesign BulkImportDialog to match ImportDialog UX: template download card at top, dashed file picker, validate → per-sheet results table → Start Import flow - Add downloadBulkProductRoutingTemplate() to cost-import-api.ts (triggers browser download via fetch) - Add BFF stub GET /api/v1/finance/costing/template/bulk_product_routing returning 501 until backend RPC is implemented Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…le-header
- cost-import-api.ts: throw error when base.isSuccess is false so
"Job #0" never surfaces as a success toast
- product-master-page-client.tsx: replace generic success toast with
descriptive async message + "Lihat Jobs" action button linking to
/finance/import-jobs (duration 8s)
- bulk_product_routing template route: set ws.columns first (ExcelJS
writes header row via ws.columns), then add only the sample data row
— previously ws.addRow(headers) + ws.columns = [{header}] caused a
double header row or overwrite
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- New dashboard page with job list, status badges, progress bar, and download button - BFF GET /api/v1/finance/costing/import-jobs list route - listImportJobs API function and useImportJobs hook with 5s auto-refresh - Extended ImportEntity type to include bulk_product_routing variants - Bulk export toast Lihat Jobs link now resolves to this page Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- Replace DialogContent/Header/Footer with ScrollableDialog equivalents - Template card stacks vertically on mobile (flex-col sm:flex-row) - File name truncates with ellipsis (truncate min-w-0) - Validation table uses table-fixed to eliminate horizontal overflow - Error rows use break-all + pl-4 so full message is visible at 375px - Replace ScrollArea+overflow-x-auto (conflicting scroll containers) with a single div.max-h-64.overflow-auto wrapping the table Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
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 memperkenalkan fitur Bulk Product Routing Import/Export yang terintegrasi penuh dari backend (RPCs/BFF) hingga frontend (UI/UX). Implementasi ini mencakup pembuatan template dinamis menggunakan
ExcelJS, perombakan tombol aksi pada halaman Product Master menjadi dropdown interaktif, serta desain ulangBulkImportDialogdengan validasi data per-sheet.Selain itu, PR ini menambahkan sebuah halaman khusus Import/Export Jobs (
/finance/import-jobs) untuk memantau status pemrosesan asynchronous secara real-time (dengan sistem auto-refresh setiap 5 detik). Terdapat juga berbagai perbaikan bug krusial terkait UI mobile responsiveness, penanganan error pada API, dan penyelesaian isu double-header pada berkas Excel.Type of Change
Module/Component Affected
Changes Made
1. Bulk Product Routing System:
ExcelJSlangsung di layer BFF.ExcelJSagar tidak menulis baris header ganda (double-header), dengan mengatur konfigurasiws.columnsterlebih dahulu sebelum memasukkan sample data.2. Import/Export Jobs Tracking Page:
/finance/import-jobsuntuk melihat daftar pekerjaan import/export, lengkap dengan status badges, progress bar, dan tombol download.useImportJobs) dengan polling auto-refresh interval 5 detik.3. UI/UX Redesign & Responsiveness:
product-masterdengan menggabungkan 4 tombol aksi terpisah menjadi 2 tombol dropdown terpadu (Import & Export).BulkImportDialoguntuk menyerupai standar Import Dialog UX: menambahkan kartu unduh template di atas, area drag-and-drop file bersisi putus-putus (dashed), serta tabel hasil validasi per-sheet sebelum mengklik "Start Import".BulkImportDialogresponsif secara penuh di ukuran layar kecil (375px) dengan bermigrasi keScrollableDialog, mengatur stacking flex-col pada kartu template, memotong nama file dengan ellipsis, menerapkantable-fixeduntuk mencegah horizontal overflow, serta mengganti konflik ScrollArea dengan strukturdivmandiri (overflow-auto).4. Error Handling & Stability:
.map()dengan memindahkan properti key dariTableRowlangsung ke elemenReact.Fragment.throw) ketika HTTP 200 mengembalikan statusisSuccess=false, menggantikan behavior lamanya yang secara senyap (silently) mereturn object validasi kosong, sehingga pesan error dapat dimunculkan dengan tepat ke pengguna (termasuk memblokir munculnya toast "Job #0").Related Issues
Fixes #
Related to #
Screenshots
Before
After
Testing Performed
Manual Testing
Browser Testing
Build Verification
npm run lintpassesnpx tsc --noEmitpassesnpm run buildsucceedsAccessibility
Performance
Pre-merge Checklist
Reviewer Notes
.xlsxdilakukan melalui layer BFF (Route Handlers) menggunakanExcelJS. Pastikan untuk me-review secara saksama komit terkaitws.columnsagar tata urutan (order) header dengan isi data tidak mengalami tabrakan/penimpaan overwrite.BulkImportDialog, kami membuang penggunaan<ScrollArea>bawaan UI (yang sering kali menimbulkan bug scroll container ganda saat dipadukan dengan tabel). Sebagai gantinya, digunakan elemen standarmax-h-64 overflow-autosertatable-fixed. Pendekatan ini terbukti lebih stabil di tampilan mobile.isSuccess=false, meskipun status HTTP mengembalikan nilai 200 (OK).