feat: implement formula management module with CRUD operations, API routes, and UI components

[ilramdhan]

Description

This pull request introduces a comprehensive Formula Master feature for the finance dashboard, including a complete CRUD (Create, Read, Update, Delete) interface, Excel import/export capabilities, and improved API endpoints. The implementation covers both the frontend UI components and the backend API routes, providing a robust and user-friendly experience for managing formulas.

Type of Change

• 🐛 Bug fix
• ✨ New feature
• 🎨 UI/UX improvement
• ♻️ Refactor
• 📚 Documentation
• 🔧 Chore (deps, config)

Module/Component Affected

• Dashboard
• Finance
• HR / IT / CI / EXSIM
• Components (common/)
• Components (ui/)
• Navigation
• API Routes

Changes Made

Frontend: Formula Master UI and Functionality

• Added a new FormulaPageClient component that provides a full-featured UI for listing, filtering, paginating, creating, editing, deleting, importing, and exporting formulas, with error handling and skeleton loading states.
• Implemented filter controls (FormulaFilters) for search, type, status, and sorting, with a clear filters option.
• Added dialogs for formula creation/editing, deletion confirmation, and Excel import, as well as table and pagination components. [1] [2]
• Added loading skeletons for both the page and table to improve user experience during data fetches. [1] [2]
• Integrated the page with the app's metadata system.

Backend: API Endpoints for Formula Management

• Introduced RESTful API endpoints under /api/v1/finance/formulas for listing, creating, retrieving, updating, and deleting formulas, with robust error handling and gRPC client integration. (src/app/api/v1/finance/formulas/route.tsR1-R78, src/app/api/v1/finance/formulas/[formulaId]/route.tsR1-R93)
• Added endpoints for exporting formulas to Excel (/export), importing from Excel (/import), and downloading an import template (/template), handling file content as base64 for transport and supporting error reporting. [1] [2] [3]

Error Handling and User Feedback

• All API endpoints provide consistent error responses and logging, ensuring the UI can display meaningful error messages to users. [1] src/app/api/v1/finance/formulas/[formulaId]/route.tsR1-R93, [2] [3] [4]
• The UI surfaces loading and error states for all operations, including formula deletion and data fetches. [1] [2]

These changes collectively deliver a full-featured, production-ready Formula Master module for the finance dashboard.

Testing Performed

Manual Testing

• Desktop (1440px+)
• Tablet (768px)
• Mobile (375px)
• Light mode
• Dark mode

Browser Testing

• Chrome
• Firefox
• Safari
• Edge

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
• Screenshots included (for UI changes)

[Copilot]

Pull request overview

This PR adds a new Finance “Formula Master” module, introducing end-to-end CRUD + Excel import/export across the UI, hooks, API routes, and gRPC client wiring.

Changes:

• Added proto-generated Formula types plus a finance-facing types wrapper with UI helpers.
• Implemented Formula CRUD/import/export hooks and Next.js API routes backed by the finance gRPC service.
• Added dashboard UI pages/components for listing, filtering, paginating, creating/editing, deleting, importing, and exporting formulas.

Reviewed changes

Copilot reviewed 27 out of 28 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
src/types/generated/finance/v1/formula.ts	Adds generated TS protobuf/grpc types for Formula service/messages.
src/types/finance/formula.ts	Provides finance-level re-exports + UI label/option helpers for formula enums and forms.
src/types/finance/rm-category.ts	Removes duplicated ActiveFilter UI helpers/Import types to centralize shared types.
src/types/finance/parameter.ts	Removes duplicated ActiveFilter UI helpers/Import types to centralize shared types.
src/types/finance/index.ts	Adds finance barrel exports for rm-category/parameter/formula.
src/lib/grpc/clients.ts	Registers getFormulaClient() (finance service).
src/lib/grpc/index.ts	Re-exports getFormulaClient.
src/hooks/finance/use-formula.ts	Adds CRUD + import/export/template hooks for formulas.
src/hooks/finance/index.ts	Exports formula/rm-category/parameter hooks from finance hooks barrel.
src/components/finance/rm-category/rm-category-import-dialog.tsx	Switches import dialog type imports to shared finance/uom types.
src/components/finance/rm-category/rm-category-filters.tsx	Switches ActiveFilter options import to shared finance/uom types.
src/components/finance/parameter/parameter-import-dialog.tsx	Switches import dialog type imports to shared finance/uom types.
src/components/finance/parameter/parameter-filters.tsx	Switches ActiveFilter options import to shared finance/uom types.
src/components/finance/formula/*	Adds Formula UI components: table, filters, pagination, form, delete confirm, import dialog, and barrel.
src/app/api/v1/finance/formulas/**	Adds formula REST endpoints (CRUD + export/import/template) backed by gRPC client calls.
src/app/(dashboard)/finance/master/formula/*	Adds Formula page, loading skeleton, and client page implementation.

---

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