Skip to main content

Frontend Architecture

CoreWave uses two React applications: corewave-institution (institution portal) and corewave-admin (platform admin).

Project Structure​

corewave-institution/src/
├── Accessors/          # Table column definitions + action dropdowns + API calls
├── Components/         # Shared components (DataTable, GlobalForm, GenericItemModal)
├── Pages/              # Feature pages (Loans, FixedDeposit, FixedAssetRegister, etc.)
├── helpers/            # url.js, utils.js, permission.js, authservice.js
├── Route/              # Route definitions
├── enum.js             # All enum definitions (shared with admin)
└── menu.js             # Navigation menu

Key Patterns​

Adding a New Page​

  1. Create an accessor in Accessors/ — defines columns, data mapping, action menu
  2. Create pages in Pages/ — Index (list), Add (create/edit), Modal components
  3. Register route in Route/Routes.jsx
  4. Add menu entry in menu.js
  5. Add permissions in helpers/permission.js
  6. Add API URLs in helpers/url.js
  7. Sync enums in enum.js (both apps)

Action Dropdown Pattern​

Each row has a <Dropdown> with a kebab toggle. Actions set state flags in the parent, which conditionally renders modals.

GlobalForm Pattern​

Used for create/edit forms. Accepts formData array of field definitions, handles validation via Yup, submits via useAuthService().bodyRequest.

DataTable Pattern​

Reusable table with built-in filtering, pagination, CSV export, and action column.