database-dashboard

🧾 Database Dashboard – Frontend Documentation

Overview

This internal database dashboard is built to view and manage internal data across different services (MFEs) via simple tables and data views. It is fully integrated with GraphQL APIs, Mantine UI, and follows a micro-frontend architecture (MFE) using module federation.

Tech Stack

Tech	Purpose
React	Core UI framework
React Router DOM	Routing across different modules
Jotai	State management
URQL	GraphQL client for data fetching
Mantine	Component library
Module Federation	Micro-frontend integration (MFEs)
TypeScript	Static typing

MFE Structure

All MFEs listed are mounted inside /dashboard
Example: /dashboard/mca, /dashboard/atfp

List of MFEs:

1. atfp
2. canada-consolidated
3. canada-osfi
4. cci
5. cestate-case-details
6. cibil
7. district-courts
8. drt-draft
9. e-courts
10. europe-consolidated
11. itat
12. mca
13. mca-data-overview
14. msme
15. ncdrc
16. nclat
17. nclt
18. new-cia-leaders
19. new-sat
20. rbi-compounding
21. sebi-debarred
22. sebi-defaulter-brokers
23. sebi-defaulters
24. sebi-records
25. switzerland-sanctions
26. uk-consolidated-list
27. un-consolidated-list
28. us-consolidated-list
29. worldbank-debarred
30. supreme-court

Each module is lazily loaded using React.lazy().

Folder Structure (Example)

src/
│
├── views/
│   ├── HomeApp.tsx
│   ├── StatusCheckView.tsx
│
├── store/
│   └── client.ts             # URQL clients for different MFEs
│
├── Router.tsx                # Route configuration
└── ...

Routing

Routing is handled using react-router-dom@6 with nested routes. Each MFE is mounted under /dashboard.

Example:

{
  path: '/dashboard/mca',
  element: (
    <ProviderWrapper client={clientValueMCA}>
      <MCA />
    </ProviderWrapper>
  ),
}

GraphQL Integration

• All data is fetched via GraphQL using URQL clients.
• Each MFE uses a different client (atfpClientAtom, districtClientAtom, mcaClientAtom, etc).
• Clients are provided through UrqlProvider.

Example:

<UrqlProvider value={clientValueMCA}>
  <MCA />
</UrqlProvider>

Authentication

• Login screen is available at /
• After successful login, user is redirected to /home or /dashboard

{
  path: '/',
  element: (
    <ProviderWrapper client={client}>
      <Login />
    </ProviderWrapper>
  ),
}

UI & UX

• Uses Mantine for component library.
• Tables, overlays, modals are used across MFEs to present internal data.
• LoadingOverlay is used as the fallback for lazy loading.

const Loader = (
  <LoadingOverlay
    visible
    zIndex={1000}
    overlayProps={{ radius: 'sm', blur: 2 }}
    loaderProps={{ color: 'green', type: 'bars' }}
  />
);

Adding a New MFE

To add a new micro-frontend module:

1. Add lazy loading for the component:

   const XYZ = lazy(() => import('XYZApp/XYZ'))

2. Add a new route under /dashboard:

   {
     path: 'xyz',
     element: (
       <ProviderWrapper client={clientValueXYZ}>
         <XYZ />
       </ProviderWrapper>
     ),
   }

3. Ensure the remote module is exposed in module-federation.config.js and webpack.config.js

Status Checks

Status Check View is available at /home/status-check

{
  path: '/home/status-check',
  element: <DatabaseLayout />,
  children: [
    {
      index: true,
      element: (
        <ProviderWrapper client={clientValueAtfp}>
          <StatusCheckView />
        </ProviderWrapper>
      ),
    },
  ],
}