e-GRCP React Project

Enterprise Governance, Risk, Compliance and Procurement Platform built with React, Redux Toolkit, React Router, Axios, Material UI, Recharts, Vite, Jest, and React Testing Library.

Run Locally

npm install
npm run dev

Demo login:

• Email: admin@egrcp.com
• Password: Password@123

Verification commands:

npm run lint
npm run test
npm run build

Business Problem

Large organizations manage procurement requests, vendor governance, risk monitoring, compliance evidence, audits, approvals, notifications, and reports across different teams. When these workflows are split across spreadsheets, email threads, and disconnected tools, leadership loses visibility into request status, risk exposure, vendor performance, missing compliance documents, and approval bottlenecks.

This project solves that problem by creating a centralized e-GRCP dashboard where business users can track procurement and governance activities from a single protected application. It gives stakeholders fast access to operational KPIs, pending approvals, vendor records, risk indicators, compliance issues, audit history, alerts, and reporting workflows.

flowchart LR
  A[Disconnected procurement data] --> B[Limited visibility]
  C[Manual vendor tracking] --> B
  D[Compliance and audit records in silos] --> B
  B --> E[Delayed approvals and higher business risk]
  E --> F[e-GRCP Platform]
  F --> G[Unified dashboard]
  F --> H[Controlled workflows]
  F --> I[Risk and compliance monitoring]
  F --> J[Reports and notifications]

Loading

Product Vision

The product vision is to provide a single enterprise workspace for governance, risk, compliance, and procurement operations. The application is designed as a modular front-end platform where each business capability has its own page, state slice, route, and reusable UI patterns.

Core goals:

• Provide executives with high-level KPIs and activity trends.
• Help procurement teams search, filter, review, and update requests.
• Help governance teams review vendors, risk levels, compliance gaps, and audit data.
• Give approvers a focused workbench for pending and escalated decisions.
• Keep users informed through notifications and exportable reports.
• Preserve a clean, scalable architecture that can later connect to real APIs.

mindmap
  root((e-GRCP Vision))
    Executive Visibility
      KPI cards
      Spend trends
      Activity timeline
    Procurement Control
      Request tracking
      Status filtering
      Approval context
    Governance
      Vendor profiles
      Risk heat map
      Compliance issues
    Operational Productivity
      Notifications
      Reports
      Global search
    Technical Scalability
      Modular routes
      Redux slices
      API abstraction

Loading

User Journey

The primary user journey starts with authentication and moves into a protected workspace. After login, users land on the dashboard, review KPIs, navigate through modules, inspect records, apply filters, perform actions, and return to reports or notifications for follow-up.

journey
  title e-GRCP User Journey
  section Access
    Open application: 3: User
    Login with business credentials: 4: User
    Enter protected workspace: 5: User
  section Review
    View executive dashboard KPIs: 5: User
    Search requests vendors or reports: 4: User
    Open module from sidebar: 5: User
  section Act
    Filter procurement or vendor records: 4: User
    Review risk compliance or audit data: 4: User
    Approve reject or track escalations: 4: Approver
  section Follow up
    Read notifications: 4: User
    Export reports: 4: User
    Update profile or theme settings: 3: User

Loading

Component Design

The component design follows a layout-first structure. App.jsx defines the route tree and lazy-loaded page modules. AppLayout.jsx provides the authenticated shell with sidebar, topbar, global search, notification count, profile menu, theme toggle, and outlet rendering. Feature pages use reusable components such as PageHeader, KpiCard, DataToolbar, DataTable, StatusBadge, and ActionModal.

Reusable components keep the UI consistent across procurement, vendors, risks, compliance, audit, approvals, notifications, and reports. Page components own module-specific rendering while Redux slices own data state.

flowchart TD
  A[main.jsx] --> B[Provider]
  B --> C[PersistGate]
  C --> D[App.jsx]
  D --> E[ErrorBoundary]
  E --> F[BrowserRouter]
  F --> G[Public Auth Pages]
  F --> H[ProtectedRoute]
  H --> I[AppLayout]
  I --> J[Sidebar Navigation]
  I --> K[Topbar Search Profile Theme]
  I --> L[Outlet Page]
  L --> M[DashboardPage]
  L --> N[ProcurementPage]
  L --> O[VendorsPage]
  L --> P[RiskPage]
  L --> Q[Compliance Audit Approvals Reports Settings]
  N --> R[PageHeader]
  N --> S[DataToolbar]
  N --> T[DataTable]
  N --> U[StatusBadge]
  M --> V[KpiCard]

Loading

Main modules implemented:

• Authentication: login, forgot password, reset password, session expired, logout, and protected routing.
• Executive Dashboard: KPI cards, procurement trend, department spending, status chart, and activity timeline.
• Procurement Workspace: search, filter, request table, detail routing, and status update actions.
• Vendor Governance: vendor KPIs, vendor list, filtering, and vendor profile sections.
• Risk Center: risk heat map, risk trend, and distribution visuals.
• Compliance Center: violations, missing documents, and expired certifications.
• Audit Center: audit history, reports, user activities, and system logs.
• Approval Workbench: pending and escalated queues with workflow actions.
• Notification Center: priority alerts and read/unread styling.
• Reporting Center: report list, filters, saved report placeholder, and export actions.
• User Settings: profile, theme, preferences, and security controls.

Redux Architecture

Redux Toolkit is used for global application state. The store combines feature reducers and persists selected state using redux-persist. Only auth and ui are persisted, which keeps login and theme behavior stable while allowing business data to refresh normally.

Feature slices:

• authSlice: login, logout, session expiry, profile update, auth errors, and token/user state.
• dashboardSlice: dashboard KPI and chart data.
• procurementSlice: procurement requests, selected request, filters, and status updates.
• vendorSlice: vendor collection, selected vendor, and filters.
• riskSlice: risk matrix data from riskData.json.
• complianceSlice: compliance records and filters.
• auditSlice: audit records and filters.
• reportSlice: report records and filters.
• notificationSlice: notification list and read/unread behavior.
• uiSlice: sidebar state, theme, and global search.

flowchart LR
  A[React Component] -->|dispatch action or thunk| B[Redux Toolkit Slice]
  B --> C{Action Type}
  C -->|sync reducer| D[Update local slice state]
  C -->|createAsyncThunk| E[mockApi or API client]
  E --> F[src/mocks JSON data]
  F --> E
  E -->|fulfilled or rejected| B
  B --> G[Redux Store]
  G --> H[Persist auth and ui]
  G -->|useSelector| A

Loading

---

flowchart TD
  A[store.js] --> B[rootReducer]
  B --> C[auth]
  B --> D[dashboard]
  B --> E[procurement]
  B --> F[vendor]
  B --> G[risk]
  B --> H[compliance]
  B --> I[audit]
  B --> J[report]
  B --> K[notification]
  B --> L[ui]
  A --> M[persistReducer]
  M --> N[Persist only auth and ui]

Loading

---

Router Architecture

React Router defines public authentication routes and protected business routes. ProtectedRoute checks the Redux auth token before allowing access to the main application shell. If a user is not authenticated, the user is redirected to /login. Unknown routes are redirected back to /dashboard.

Lazy loading is used for the main business pages through React.lazy and Suspense, which keeps the initial bundle more efficient and loads feature pages as needed.

flowchart TD
    A[BrowserRouter] --> B{Route Type}

    B -->|Public| C["/login"]
    B -->|Public| D["/forgot-password"]
    B -->|Public| E["/reset-password"]
    B -->|Public| F["/session-expired"]

    B -->|Protected| G[ProtectedRoute]

    G --> H{Token exists?}
    H -->|No| C
    H -->|Yes| I[AppLayout]

    I --> J["/dashboard"]
    I --> K["/procurement"]
    I --> L["/procurement/:requestId"]
    I --> M["/vendors"]
    I --> N["/vendors/:vendorId"]
    I --> O["/risk"]
    I --> P["/compliance"]
    I --> Q["/audit"]
    I --> R["/approvals"]
    I --> S["/notifications"]
    I --> T["/reports"]
    I --> U["/settings"]

    A --> V["* fallback"]
    V --> J

Loading

Axios Flow

The application includes an Axios client in src/api/apiClient.js with a base URL, JSON headers, timeout, request interceptor, and response error normalization. The request interceptor attaches a stored bearer token when available.

For the current project, business data is served through mockApi, which simulates asynchronous API calls and reads from mock JSON collections. This keeps the app fully functional for demonstration while preserving a clear path to connect real REST endpoints later.

sequenceDiagram
  participant UI as React UI
  participant Thunk as Redux Async Thunk
  participant Client as apiClient or mockApi
  participant Store as Local Storage
  participant Data as Mock Database

  UI->>Thunk: dispatch fetch or login action
  Thunk->>Client: call API function
  Client->>Store: read egrcp_token when available
  Store-->>Client: token
  Client->>Data: read users requests vendors reports etc.
  Data-->>Client: response data
  Client-->>Thunk: resolved data or normalized error
  Thunk-->>UI: update Redux state

Loading

Error Handling

Error handling is implemented at multiple levels so that failures are contained and visible:

• ErrorBoundary catches unexpected rendering errors and displays a safe fallback message.
• authSlice stores login failures in state.auth.error.
• createDataSlice stores failed async request messages in each feature slice through state.error.
• Axios response interception normalizes network errors into a consistent { message, status } shape.
• ProtectedRoute prevents unauthorized access and redirects unauthenticated users to login.
• Form validation and login feedback guide the user when credentials are invalid.

flowchart TD
    A[User Action] --> B{Where does the error occur?}

    B -->|UI Rendering| C[Error Boundary]
    B -->|Authentication| D[Authentication Error]
    B -->|API Request| E[Feature Slice Error]
    B -->|Network| F[Axios Interceptor]
    B -->|Protected Route| G[Protected Route]

    C --> H[Display Fallback UI]
    D --> I[Display Login Error]
    E --> J[Display Module Error State]
    F --> E
    G --> K[Redirect to Login Page]

    H --> L[User Retries]
    I --> L
    J --> L
    K --> L

Loading

Testing Strategy

The testing strategy uses Jest, React Testing Library, and jest-environment-jsdom. Tests focus on behavior that protects the application experience: storage utilities, persisted storage, API behavior, authentication state, protected route behavior, login page behavior, and reusable component rendering.

Current test areas:

• src/api/apiClient.test.js
• src/app/persistStorage.test.js
• src/components/KpiCard.test.jsx
• src/features/auth/authSlice.test.js
• src/pages/LoginPage.test.jsx
• src/routes/ProtectedRoute.test.jsx
• src/utils/storage.test.js

Recommended coverage expansion:

• Procurement filtering and status update behavior.
• Vendor profile selection behavior.
• Risk, compliance, audit, and report loading states.
• Notification read/unread state changes.
• Export utility behavior for reports.
• Error boundary fallback rendering.

flowchart TD
  A[User Action] --> B{Where can failure occur?}
  B -->|Render failure| C[ErrorBoundary]
  B -->|Auth failure| D[authSlice error]
  B -->|Data fetch failure| E[Feature slice error]
  B -->|Network failure| F[Axios response interceptor]
  B -->|Unauthorized route| G[ProtectedRoute redirect]

  C --> H[Fallback UI]
  D --> I[Show login error]
  E --> J[Show module error state]
  F --> E
  G --> K["/login"]

Loading

Deployment Strategy

The project is built with Vite, so production deployment creates static assets in the dist directory. The included vercel.json and public/_redirects support single-page application routing by redirecting deep links back to index.html.

Deployment flow:

1. Install dependencies with npm install.
2. Run validation using npm run lint and npm run test.
3. Create a production build using npm run build.
4. Deploy the generated dist folder to Vercel, Netlify, or any static hosting platform.
5. Ensure SPA fallback routing is enabled so protected and nested routes load correctly after refresh.

flowchart TD
  A[Developer pushes project] --> B[Install dependencies]
  B --> C[npm run lint]
  C --> D[npm run test]
  D --> E[npm run build]
  E --> F[dist production assets]
  F --> G[Vercel or static hosting]
  G --> H[SPA fallback to index.html]
  H --> I[Users access e-GRCP app]

Loading

Future production improvements:

• Replace mock API data with secure backend services.
• Move auth token handling to a production-grade identity provider.
• Add role-based route restrictions for admin, approver, auditor, and viewer roles.
• Add CI/CD checks for linting, testing, build validation, and deployment preview.
• Add environment-specific API base URLs through Vite environment variables.