feat: implement finance parameter management module with CRUD, import/export, and UI components by ilramdhan · Pull Request #12 · mutugading/goapps-frontend

ilramdhan · 2026-04-07T02:53:55Z

Description

This pull request introduces a complete implementation of the Finance Parameter management feature, including both frontend UI and backend API routes. The changes add CRUD operations, import/export functionality, and table filtering/pagination for finance parameters, as well as loading and error handling states. The backend routes are integrated with gRPC services for all parameter operations.

Type of Change

Module/Component Affected

Changes Made

The most important changes are:

Backend API Routes for Finance Parameters:

Added REST API endpoints for listing, creating, retrieving, updating, and deleting finance parameters, all backed by gRPC client calls (src/app/api/v1/finance/parameters/route.ts, src/app/api/v1/finance/parameters/[paramId]/route.ts). (src/app/api/v1/finance/parameters/route.tsR1-R79, src/app/api/v1/finance/parameters/[paramId]/route.tsR1-R93)
Implemented endpoints for exporting parameters to Excel, importing parameters from Excel, and downloading the import template, with proper file content handling and error management (src/app/api/v1/finance/parameters/export/route.ts, src/app/api/v1/finance/parameters/import/route.ts, src/app/api/v1/finance/parameters/template/route.ts). [1] [2] [3]

Frontend Pages and Components:

Added a new finance parameter dashboard page with a client-side React implementation, including parameter listing, filtering, pagination, add/edit/delete dialogs, and import/export actions (src/app/(dashboard)/finance/master/parameter/page.tsx, src/app/(dashboard)/finance/master/parameter/parameter-page-client.tsx). [1] [2]
Implemented a loading skeleton for the parameter page to improve UX during data fetches (src/app/(dashboard)/finance/master/parameter/loading.tsx).

Component Exports and Dialogs:

Added and exported reusable components for parameter forms, deletion confirmation, import dialog, filters, table, and pagination (src/components/finance/parameter/index.ts, src/components/finance/parameter/parameter-delete-dialog.tsx). [1] [2]

These changes collectively provide a robust, user-friendly finance parameter management module with full CRUD and import/export capabilities.

Build Verification

npm run lint passes
npx tsc --noEmit passes
npm run build succeeds

Accessibility

Keyboard navigation works
Screen reader compatible
Proper ARIA labels
Color contrast adequate

Performance

No unnecessary re-renders
Images optimized
Heavy components lazy loaded

Pre-merge Checklist

I have read and followed RULES.md
I have read and followed CONTRIBUTING.md
Loading states implemented (if data fetching)
Error handling present
Component props typed properly
Uses semantic color classes
Responsive design tested
Dark mode compatible

…/export, and UI components

Copilot

Pull request overview

Implements an end-to-end Finance “Parameter” master-data module, adding gRPC-backed REST endpoints and a full dashboard UI for managing parameters (CRUD + import/export + filtering/pagination).

Changes:

Added proto-generated Parameter types plus a UI-friendly re-export layer with labels/options.
Added finance parameter gRPC client wiring and Next.js API routes for CRUD + export/import/template.
Added dashboard page and reusable UI components (table, filters, pagination, dialogs) plus React Query hooks.

Reviewed changes

Copilot reviewed 19 out of 20 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
src/types/generated/finance/v1/parameter.ts	Adds generated proto TypeScript definitions for finance parameters and service definition.
src/types/finance/parameter.ts	Re-exports generated types and adds UI helpers (labels/options, form defaults, filter param types).
src/lib/grpc/index.ts	Exposes the new `getParameterClient` from the gRPC client registry.
src/lib/grpc/clients.ts	Registers a singleton gRPC client for `ParameterService`.
src/hooks/finance/use-parameter.ts	Adds CRUD hooks via `createCrudHooks` plus export/import/template download mutations.
src/components/finance/parameter/parameter-table.tsx	Parameter list DataTable with row actions and enum label mapping.
src/components/finance/parameter/parameter-pagination.tsx	Pagination wrapper around shared `DataTablePagination`.
src/components/finance/parameter/parameter-import-dialog.tsx	Import dialog UX (template download, file selection, duplicate handling, result display).
src/components/finance/parameter/parameter-form-dialog.tsx	Create/edit dialog with zod validation + mutations.
src/components/finance/parameter/parameter-filters.tsx	Search + filter + sort controls wired to URL state.
src/components/finance/parameter/parameter-delete-dialog.tsx	Confirmation dialog for deleting a parameter.
src/components/finance/parameter/index.ts	Barrel export for parameter feature components.
src/app/api/v1/finance/parameters/template/route.ts	API route to download import template via gRPC (base64 JSON payload).
src/app/api/v1/finance/parameters/route.ts	API routes for list + create (gRPC-backed).
src/app/api/v1/finance/parameters/import/route.ts	API route to import parameters (JSON byte-array → Uint8Array for gRPC).
src/app/api/v1/finance/parameters/export/route.ts	API route to export parameters (gRPC bytes → base64 JSON).
src/app/api/v1/finance/parameters/[paramId]/route.ts	API routes for get/update/delete by ID (gRPC-backed).
src/app/(dashboard)/finance/master/parameter/parameter-page-client.tsx	Client page implementing the management UI wired to hooks + dialogs.
src/app/(dashboard)/finance/master/parameter/page.tsx	Registers the new dashboard route and page metadata.
src/app/(dashboard)/finance/master/parameter/loading.tsx	Adds a loading skeleton for the new page segment.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-04-07T03:00:46Z

src/components/finance/parameter/parameter-form-dialog.tsx

+            uomId: values.uomId || undefined,
+            defaultValue: values.defaultValue || undefined,
+            minValue: values.minValue || undefined,
+            maxValue: values.maxValue || undefined,
+            isActive: values.isActive,


In update mode, converting empty strings to undefined (e.g., uomId: values.uomId || undefined) prevents users from clearing previously-set values. The proto comment indicates empty string should clear the UOM, so the UI should send an empty string when the field is cleared (and only use undefined when you truly want to omit the field / leave it unchanged).

Copilot · 2026-04-07T03:00:47Z

src/components/finance/parameter/parameter-form-dialog.tsx

+  dataType: z.nativeEnum(DataType).refine(
+    (val) => val !== DataType.DATA_TYPE_UNSPECIFIED,
+    "Data type is required"


z.nativeEnum(DataType) will accept DataType.UNRECOGNIZED (-1). With the current refine only excluding DATA_TYPE_UNSPECIFIED, an unknown enum value coming from the backend could be submitted back to the API. Consider refining to only allow the known selectable values (e.g., NUMBER/TEXT/BOOLEAN) and explicitly exclude UNRECOGNIZED.

Suggested change

dataType: z.nativeEnum(DataType).refine(

(val) => val !== DataType.DATA_TYPE_UNSPECIFIED,

"Data type is required"

dataType: z.union(

[

z.literal(DataType.NUMBER),

z.literal(DataType.TEXT),

z.literal(DataType.BOOLEAN),

],

{

errorMap: () => ({ message: "Data type is required" }),

}

Copilot · 2026-04-07T03:00:47Z

src/components/finance/parameter/parameter-form-dialog.tsx

+    "Data type is required"
+  ),
+  paramCategory: z.nativeEnum(ParamCategory).refine(
+    (val) => val !== ParamCategory.PARAM_CATEGORY_UNSPECIFIED,


Same issue as dataType: this schema allows ParamCategory.UNRECOGNIZED (-1) because the refine only excludes PARAM_CATEGORY_UNSPECIFIED. Consider restricting to the known valid categories and excluding UNRECOGNIZED to avoid submitting invalid enum values.

Suggested change

(val) => val !== ParamCategory.PARAM_CATEGORY_UNSPECIFIED,

(val) => PARAM_CATEGORY_FORM_OPTIONS.some((option) => option.value === val),

Copilot · 2026-04-07T03:00:47Z

src/components/finance/parameter/parameter-import-dialog.tsx

+                <>
+                  <Upload className="mb-2 h-8 w-8 text-muted-foreground" />
+                  <p className="text-sm text-muted-foreground">
+                    Click to select or drag and drop an Excel file


The UI text says users can “drag and drop” an Excel file, but the component only supports click-to-select (no onDrop / onDragOver handling). Either implement drag-and-drop handlers or adjust the copy to avoid misleading users.

Suggested change

Click to select or drag and drop an Excel file

Click to select an Excel file

Copilot · 2026-04-07T03:00:47Z

src/app/(dashboard)/finance/master/parameter/page.tsx

+import { generateMetadata as genMeta } from "@/config/site"
+import ParameterPageClient from "./parameter-page-client"
+
+export const metadata = genMeta("Parameter")
+


This page is routed under /finance/master/parameter, but the existing navigation/breadcrumb mapping points to /finance/master/parameters (e.g. src/config/navigation.ts:111,209) and the finance dashboard links there as well (src/app/(dashboard)/finance/dashboard/page.tsx:86,123). As-is, the new UI may be unreachable from the app navigation. Consider aligning the route (rename folder to parameters or update navigation/links and remove the old stub page).

…r form Uses useUOMs() hook to fetch active UOMs for a user-friendly dropdown instead of requiring manual UUID entry. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

feat: implement finance parameter management module with CRUD, import…

a872df4

…/export, and UI components

ilramdhan requested a review from Copilot April 7, 2026 02:53

ilramdhan self-assigned this Apr 7, 2026

ilramdhan added documentation Improvements or additions to documentation enhancement New feature or request labels Apr 7, 2026

Copilot started reviewing on behalf of ilramdhan April 7, 2026 02:54 View session

Copilot AI reviewed Apr 7, 2026

View reviewed changes

fix(finance): replace UOM UUID input with dropdown select in paramete…

ee57254

…r form Uses useUOMs() hook to fetch active UOMs for a user-friendly dropdown instead of requiring manual UUID entry. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

ilramdhan merged commit 76c31f1 into mutugading:main Apr 7, 2026
4 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: implement finance parameter management module with CRUD, import/export, and UI components#12

feat: implement finance parameter management module with CRUD, import/export, and UI components#12
ilramdhan merged 2 commits intomutugading:mainfrom
ilramdhan:feat/finance-param-master

ilramdhan commented Apr 7, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Apr 7, 2026

Uh oh!

Copilot AI Apr 7, 2026

Uh oh!

Copilot AI Apr 7, 2026

Uh oh!

Copilot AI Apr 7, 2026

Uh oh!

Copilot AI Apr 7, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

-  dataType: z.nativeEnum(DataType).refine(
-    (val) => val !== DataType.DATA_TYPE_UNSPECIFIED,
-    "Data type is required"
+  dataType: z.union(
+    [
+      z.literal(DataType.NUMBER),
+      z.literal(DataType.TEXT),
+      z.literal(DataType.BOOLEAN),
+    ],
+    {
+      errorMap: () => ({ message: "Data type is required" }),
+    }

	(val) => val !== ParamCategory.PARAM_CATEGORY_UNSPECIFIED,
	(val) => PARAM_CATEGORY_FORM_OPTIONS.some((option) => option.value === val),

	Click to select or drag and drop an Excel file
	Click to select an Excel file

Conversation

ilramdhan commented Apr 7, 2026

Description

Type of Change

Module/Component Affected

Changes Made

Build Verification

Accessibility

Performance

Pre-merge Checklist

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Apr 7, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 7, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 7, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 7, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 7, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants