Risk Master Frontend Documentation

MFE Name: root (Root)
Version: 1.0.0
Date: 19/03/2025

1. Overview

In the Microfrontend (MFE) architecture, there is a root MFE responsible for maintaining all the routes. Other MFEs expose their respective applications, which are then integrated into the root MFE to manage routing seamlessly.

Corrected & Expanded Version:

The project follows a Microfrontend (MFE) architecture, where:

1. Root MFE (Shell/Container)
   • Acts as the entry point and maintains all the routes.
   • Handles navigation and integrates other MFEs dynamically.
2. Child MFEs (Feature-Specific Apps)
   • Each MFE is responsible for a specific module (e.g., Wishlist, Reports, Analytics).
   • These MFEs expose their applications via module federation.
3. Integration with Root MFE
   • The root MFE consumes and mounts the exposed apps.
   • It handles routing using a framework like React Router or a similar approach to load the respective MFE based on the path.

This approach ensures scalability, modularity, and independent deployments of different microfrontends while maintaining centralized route management in the root MFE.

2. Key Components

• Centralized in Root MFE: Maintains and manages all routes.
• Child MFEs Expose Apps: Each MFE defines its own routes internally.
• Dynamic Loading: Routes load MFEs using Module Federation.
• Path-Based Navigation: Different MFEs are mapped to specific URLs.
• Routing Library: Typically managed using React Router.
• Independent Navigation: Each MFE can handle its own sub-routes if needed.

3. Routing

import { RouterProvider, createBrowserRouter } from "react-router-dom";
import { Suspense, lazy } from "react";

import DefaultLayout from "cmRootApp/DefaultLayout";
import Login from "loginApp/Login";
import Profile from "./views/Profile";
import { Center, Loader } from "@mantine/core";
import { Provider as UrqlProvider } from "urql";
// import { clientValue } from 'cmRootApp/Client';
import { useAtomValue } from "jotai";
import { clientAtomRiskTerminal } from "./store/client";

const Reports = lazy(() => import("reportApp/Report"));
const MultiViewReport = lazy(
  () => import("multiViewReportApp/multiViewReport")
);
const Search = lazy(() => import("globalSearchApp/GlobalSearch"));
// const Demo = lazy(() => import('demoApp/Demo'));
const Home = lazy(() => import("homeApp/Home"));
const CreditManagement = lazy(
  () => import("creditManagementApp/CreditManagement")
);
const Dashboard = lazy(() => import("dashboardApp/Dashboard"));
const ExecutiveSummary = lazy(
  () => import("executiveSummaryApp/ExecutiveSummary")
);
const SearchResults = lazy(() => import("globalSearchApp/SearchResults"));
const MultiView = lazy(() => import("multiViewApp/MultiViews"));
const WorkFlow = lazy(() => import("workFlowApp/WorkFlow"));
const AnalyticsDashboard = lazy(
  () => import("analyticsDashboardApp/AnalyticsDashboard")
);
const SimilarCompaniesPage = lazy(
  () => import("executiveSummaryApp/SimilarCompaniesPage")
);
const EnitityPage = lazy(() => import("entityApp/Entity"));
const SingleEntityList = lazy(() => import("entityApp/SingleEntityList"));
const TableColumnManager = lazy(() => import("workFlowApp/TableColumnManager"));
const Company = lazy(() => import("companyApp/Company"));
const Department = lazy(() => import("departmentApp/Department"));
const Role = lazy(() => import("roleApp/Role"));
const User = lazy(() => import("userApp/User"));
const UserLogs = lazy(() => import("userLogsApp/UserLogs"));
const Invoice = lazy(() => import("invoiceApp/Invoice"));
const Weightage = lazy(() => import("WeightageConfigApp/WeightageConfig"));
const CustomerSupport = lazy(
  () => import("customerSupportApp/CustomerSupport")
);
const Invitation = lazy(() => import("invitationsApp/Invitations"));
const ForgotPassword = lazy(() => import("loginApp/ForgotPassword"));
const CMDashboard = lazy(() => import("cmDashboardApp/AnalyticsDashboard"));
const EntityDashboard = lazy(() => import("cmDashboardApp/EntityDashboard"));
const WidgetsDashboard = lazy(() => import("cmDashboardApp/WidgetsDashboard"));
const LoaderOverlay = (
  <Center h="85vh">
    <Loader size={30} />
  </Center>
);

const MenuList = ["Instant Reports", "Team Management"];

export default function Router() {
  const clientValueRisk = useAtomValue(clientAtomRiskTerminal);

  const router = createBrowserRouter([
    {
      path: "/",
      element: (
        <Suspense fallback={LoaderOverlay}>
          <Login appID={4} />
        </Suspense>
      ),
    },
    {
      path: "/forgot-password",
      element: (
        <Suspense fallback={LoaderOverlay}>
          <ForgotPassword />
        </Suspense>
      ),
    },
    {
      path: "invitation/:id",
      element: (
        <Suspense fallback={LoaderOverlay}>
          <Invitation />
        </Suspense>
      ),
    },
    {
      path: "/profile",
      element: (
        <DefaultLayout hidden={false} menus={MenuList} appId={4} show={true} />
      ),
      children: [
        {
          index: true,
          element: (
            <Suspense fallback={LoaderOverlay}>
              <Profile />
            </Suspense>
          ),
        },
      ],
    },
    {
      path: "/home",
      element: (
        <DefaultLayout menus={MenuList} appId={4} hidden={false} show={true} />
      ),
      children: [
        {
          index: true,
          element: (
            <Suspense fallback={LoaderOverlay}>
              <Home />
            </Suspense>
          ),
        },
      ],
    },
    {
      path: "/instant",
      element: (
        <DefaultLayout menus={MenuList} appId={4} hidden={false} show={true} />
      ),
      children: [
        {
          index: true,
          element: (
            <Suspense fallback={LoaderOverlay}>
              <Home />
            </Suspense>
          ),
        },
        {
          path: "reports/:reportId/:dimension",
          element: (
            <Suspense fallback={LoaderOverlay}>
              <Reports />
            </Suspense>
          ),
        },
        {
          path: "reports/:reportId",
          element: (
            <Suspense fallback={LoaderOverlay}>
              <Reports />
            </Suspense>
          ),
        },
        {
          path: "multiview/:reportId/:dimension",
          element: (
            <Suspense fallback={LoaderOverlay}>
              <MultiViewReport />
            </Suspense>
          ),
        },
        {
          path: "multiview/:reportId",
          element: (
            <Suspense fallback={LoaderOverlay}>
              <MultiViewReport />
            </Suspense>
          ),
        },
        {
          path: "dashboard",
          element: (
            <Suspense fallback={LoaderOverlay}>
              <Home />
            </Suspense>
          ),
        },
        {
          path: "invitations",
          element: (
            <Suspense fallback={LoaderOverlay}>
              <Invitation />
            </Suspense>
          ),
        },
        {
          path: "reports",
          element: (
            <Suspense fallback={LoaderOverlay}>
              <Dashboard />
            </Suspense>
          ),
        },
        {
          path: "instant/reports/:risk",
          element: (
            <Suspense fallback={LoaderOverlay}>
              <Dashboard />
            </Suspense>
          ),
        },
        {
          path: "cm-dashboard",
          element: (
            <Suspense fallback={LoaderOverlay}>
              <UrqlProvider value={clientValueRisk}>
                <CMDashboard />
              </UrqlProvider>
            </Suspense>
          ),
        },
        {
          path: "entity-dashboard",
          element: (
            <Suspense fallback={LoaderOverlay}>
              <UrqlProvider value={clientValueRisk}>
                <EntityDashboard />
              </UrqlProvider>
            </Suspense>
          ),
        },
        {
          path: "entity-dashboard/:cin",
          element: (
            <Suspense fallback={LoaderOverlay}>
              <UrqlProvider value={clientValueRisk}>
                <WidgetsDashboard />
              </UrqlProvider>
            </Suspense>
          ),
        },
        {
          path: "reports/:linkTitle",
          element: (
            <Suspense fallback={LoaderOverlay}>
              <Dashboard />
            </Suspense>
          ),
        },
        {
          path: "credits",
          element: (
            <Suspense fallback={LoaderOverlay}>
              <CreditManagement />
            </Suspense>
          ),
        },
        {
          path: "multiview",
          element: (
            <Suspense fallback={LoaderOverlay}>
              <MultiView />
            </Suspense>
          ),
        },
        {
          path: "search",
          element: (
            <Suspense fallback={LoaderOverlay}>
              <Search />
            </Suspense>
          ),
        },
        {
          path: "search-results",
          element: (
            <Suspense fallback={LoaderOverlay}>
              <SearchResults />
            </Suspense>
          ),
        },
        {
          path: "executive-summary",
          element: (
            <Suspense fallback={LoaderOverlay}>
              <ExecutiveSummary />
            </Suspense>
          ),
        },
        {
          path: "workflows",
          element: (
            <Suspense fallback={LoaderOverlay}>
              <WorkFlow />
            </Suspense>
          ),
        },
        {
          path: "workflows/:workflowId",
          element: (
            <Suspense fallback={LoaderOverlay}>
              <TableColumnManager />
            </Suspense>
          ),
        },
        {
          path: "reports-dashboard",
          element: (
            <Suspense fallback={LoaderOverlay}>
              <AnalyticsDashboard />
            </Suspense>
          ),
        },
        {
          path: "similar-companies",
          element: (
            <Suspense fallback={LoaderOverlay}>
              <SimilarCompaniesPage />
            </Suspense>
          ),
        },
        {
          path: "entities",
          element: (
            <Suspense fallback={LoaderOverlay}>
              <EnitityPage />
            </Suspense>
          ),
        },
        {
          path: "entities/:entityId",
          element: (
            <Suspense fallback={LoaderOverlay}>
              <SingleEntityList />
            </Suspense>
          ),
        },
        {
          path: "invoices",
          element: (
            <Suspense fallback={LoaderOverlay}>
              <Invoice />
            </Suspense>
          ),
        },
        {
          path: "weightage-configuration",
          element: (
            <Suspense fallback={LoaderOverlay}>
              <Weightage />
            </Suspense>
          ),
        },
        {
          path: "customer-support",
          element: (
            <Suspense fallback={LoaderOverlay}>
              <CustomerSupport />
            </Suspense>
          ),
        },
      ],
    },
    {
      path: "/team",
      element: <DefaultLayout menus={MenuList} hidden={false} appId={3} />,
      children: [
        {
          index: true,
          element: (
            <Suspense fallback={LoaderOverlay}>
              <User appID={4} />
            </Suspense>
          ),
        },
        {
          path: "users",
          element: (
            <Suspense fallback={LoaderOverlay}>
              <User appID={4} />
            </Suspense>
          ),
        },
        {
          path: "company",
          element: (
            <Suspense fallback={LoaderOverlay}>
              <Company />
            </Suspense>
          ),
        },
        {
          path: "department",
          element: (
            <Suspense fallback={LoaderOverlay}>
              <Department />
            </Suspense>
          ),
        },
        {
          path: "role",
          element: (
            <Suspense fallback={LoaderOverlay}>
              <Role />
            </Suspense>
          ),
        },
        {
          path: "activity-logs",
          element: (
            <Suspense fallback={LoaderOverlay}>
              <UserLogs />
            </Suspense>
          ),
        },
        {
          path: "invoices",
          element: (
            <Suspense fallback={LoaderOverlay}>
              <Invoice />
            </Suspense>
          ),
        },
      ],
    },
  ]);
  return <RouterProvider router={router} />;
}

---

Analytics Dashboard MFE

MFE Name: Analytics Dashboard (analytics-dashboard)
Version: 1.0.0
Date: 19/03/2025

1. Overview

The Analytics Dashboard provides users with a comprehensive overview of consolidated data related to various aspects of reports, entities, projects, and risk management. It includes graphical representations and visual insights into key metrics, enabling users to make informed decisions. The dashboard features:

• Reports Overview: A consolidated summary of all reports, including their status, trends, and key findings.
• Entities List: A detailed view of all associated entities, categorized based on relevant attributes.
• Projects Insights: Performance metrics and status updates on different projects.
• Risk Analysis: A breakdown of risk-related data, including potential threats and risk categories.
• Dimension-wise Risk Assessment: A comparative analysis of risks based on predefined dimensions.
• Region-wise Reports Distribution: A geographical representation of reports categorized by region.
• Industry-wise Reports Count: An industry-specific breakdown of reports, highlighting trends and sectoral insights.

The dashboard presents this data in an interactive and visually engaging format, such as charts, graphs, and heatmaps, facilitating better data interpretation and strategic planning.

2. Key Components

Document main reusable components, props, and usage examples:

NewAnalyticsDashboard - Where this component is called in App.tsx file.

Prop	Type	Description
reports	Report(Object)	Storing the report data in this prop and passing it to other child components
riskCounts	Record<string, number>	Sending the counts of the corresponding risks.

Example usage:

<RiskAssessmentTable reports={Report} />
<RiskPosture riskCounts={riskCounts} />

3. API Integration

The project utilizes GraphQL for API integration, following a structured approach to ensure efficient data fetching and mutation handling. The integration process includes the following steps:

1. Writing GraphQL Queries & Mutations
   • Create .graphql files to define queries and mutations.
   • These files specify the exact data requirements and structure needed from the API.
2. Generating Type-Safe Files
   • Run the command: pnpm run generate
   • This generates TypeScript files containing auto-generated hooks, types, and API bindings based on the defined GraphQL operations.
3. Creating Custom Hooks
   • A .ts file is created to define custom hooks for specific queries/mutations.
   • These hooks wrap the generated API functions for improved reusability and abstraction.
4. Using Hooks in Components
   • The custom hooks are then imported and used in React components to fetch and manipulate data dynamically.

This workflow ensures a type-safe, scalable, and efficient API integration process, making GraphQL queries/mutations easy to maintain and use across the application.

Example:

const { listAllWishlistsData } = listAllWishlists({
  orgID: userDetails?.getUserByToken?.orgID,
  pageNumber: 0,
  pageSize: 0
});

listAllWishlists.ts is a TypeScript file that defines a function or custom hook for fetching wishlist data. The necessary parameters are passed when invoking it to ensure the correct API request and response handling.

---

Dashboard MFE

MFE Name: Dashboard (dashboard)
Version: 1.0.0
Date: 19/03/2025

1. Overview

The Dashboard Micro Frontend (MFE) is responsible for displaying reports raised by users. It provides multiple viewing options (List View & Card View) and allows users to search and filter reports efficiently. Additionally, users can navigate directly to a detailed report view from this dashboard.

Key Features

1. Multiple Views

• List View: Displays reports in a structured tabular format, making it easier to scan multiple reports at once.
• Card View: Provides a more visual representation of reports, suitable for users who prefer a graphical layout.

2. Search & Filtering

• Users can search for reports using relevant keywords.
• Filtering options allow users to refine their results based on different parameters (e.g., date, status, report type, etc.).
• These functionalities ensure that users can quickly find the reports they are looking for.

3. Direct Navigation to Report View

• Users can click on a report in either List View or Card View to navigate directly to the detailed report view page.
• This eliminates the need for extra steps, improving user experience and efficiency.

2. Key Components

Document main reusable components, props, and usage examples:

Dashboard - Where this component is called in App.tsx file.

The main components are ReportDashboardTable & CardComponent which are mainly using for View purpose of Reports List

Prop	Type	Description
data	Array (reports)
inprogress	boolean	Based on this we are managing the conditional rendering

3. API Integration

The project utilizes GraphQL for API integration, following a structured approach to ensure efficient data fetching and mutation handling. The integration process includes the following steps:

1. Writing GraphQL Queries & Mutations
   • Create .graphql files to define queries and mutations.
   • These files specify the exact data requirements and structure needed from the API.
2. Generating Type-Safe Files
   • Run the command: pnpm run generate
   • This generates TypeScript files containing auto-generated hooks, types, and API bindings based on the defined GraphQL operations.
3. Creating Custom Hooks
   • A .ts file is created to define custom hooks for specific queries/mutations.
   • These hooks wrap the generated API functions for improved reusability and abstraction.
4. Using Hooks in Components
   • The custom hooks are then imported and used in React components to fetch and manipulate data dynamically.

This workflow ensures a type-safe, scalable, and efficient API integration process, making GraphQL queries/mutations easy to maintain and use across the application.

---

Credit Management MFE

MFE Name: Credit Management (credit-management)
Version: 1.0.0
Date: 19/03/2025

The Credit Management section in the Dashboard MFE allows users to view their purchased credits and provides an option to top up credits as needed. This feature ensures seamless tracking and management of credits within the platform.

Key Features

1. Credit Balance Display

• Users can view their current credit balance directly on the dashboard.
• The balance is fetched in real-time from the backend to ensure accuracy.
• If the balance is low, a low credit warning is displayed.

2. Credit Transaction History

• A detailed list of past credit purchases and usage history is shown.
• Each transaction includes:
  • Date & Time of purchase or usage.
  • Amount of credits added or used.
  • Transaction Type (Purchase / Usage / Refund, etc.).

3. Filtering & Search for Transactions

• Users can filter credit history by date range, transaction type, or amount.
• Search functionality allows users to find specific transactions quickly.

4. Credit Top-Up Process

• Users can choose a predefined amount (e.g., ₹500, ₹1000, ₹2000) or enter a custom amount.
• Clicking "Top-Up" opens a payment modal.
• Upon successful payment, credits are instantly updated in the user's account.

5. Secure Payment Gateway Integration

• Supports Razorpay, Stripe, and UPI payments for seamless transactions.
• Uses secure API calls to handle payments and prevent unauthorized access.

6. Transaction Confirmation & Error Handling

• After a successful transaction:
  ✅ Credits are automatically added to the user's account.
  ✅ A confirmation message is shown with the transaction ID.
  ✅ The transaction is saved in the database for future reference.

2. Key Components

CreditTable & CreditManagement Components

• CreditTable: This component is responsible for displaying the list of credits in a structured table format. It provides a clear and organized view of the credit data.
• CreditManagement: This component handles credit-related actions, including the top-up functionality, allowing users to add credits seamlessly.

3. API Integration

The project utilizes GraphQL for API integration, following a structured approach to ensure efficient data fetching and mutation handling. The integration process includes the following steps:

1. Writing GraphQL Queries & Mutations
   • Create .graphql files to define queries and mutations.
   • These files specify the exact data requirements and structure needed from the API.
2. Generating Type-Safe Files
   • Run the command: pnpm run generate
   • This generates TypeScript files containing auto-generated hooks, types, and API bindings based on the defined GraphQL operations.
3. Creating Custom Hooks
   • A .ts file is created to define custom hooks for specific queries/mutations.
   • These hooks wrap the generated API functions for improved reusability and abstraction.
4. Using Hooks in Components
   • The custom hooks are then imported and used in React components to fetch and manipulate data dynamically.

This workflow ensures a type-safe, scalable, and efficient API integration process, making GraphQL queries/mutations easy to maintain and use across the application.

---

Entity MFE - User Wishlist & Report Request

Overview

The Entity MFE allows users to create and manage a wishlist of reports they need. Users can:
1️⃣ Add reports individually to their wishlist.
2️⃣ Upload a bulk file to add multiple reports at once.
3️⃣ Raise a report request whenever they are ready.

This ensures users can plan their report requirements in advance and request them at their convenience.

Key Features

1. Wishlist Management

• Users can add individual reports to their wishlist through a form.
• Bulk upload functionality allows users to upload an Excel file containing multiple reports.
• The wishlist is displayed in a table format with search, filter, and sort options.
• Users can edit or remove reports from their wishlist before submitting a request.

2. Report Request Submission

• Users can select multiple reports from their wishlist and raise a request.
• The system validates the selected reports before submission.
• After submission, reports are moved from the wishlist to "Requested Reports".

3. Bulk Upload Functionality

• Users can upload a CSV/Excel file containing report details.
• The system validates the file structure and provides feedback if any issues are found.
• Once uploaded, reports are added to the wishlist table

---

Search MFE

Overview

The Search MFE is designed to help users search for vendors, including MCA (Ministry of Corporate Affairs) companies and Non-MCA companies, using their names. This module enables efficient vendor lookup and management while supporting seamless integration with other MFEs through state management.

Key Features

🔍 1. Vendor Search

• Users can search for vendors by their name.
• Supports searching for both MCA and Non-MCA companies.
• Real-time search results as the user types.
• The search is case-insensitive, making it user-friendly.

📄 2. Pagination

• Results are paginated for better readability and performance.
• Users can navigate through pages to view more results.
• Pagination controls include Next, Previous, and page numbers.

🧠 3. State Management & Data Sharing

• Search results are managed in a state (using Jotai/React Query or similar).
• The state allows for seamless data sharing across different MFEs.
• This enables other MFEs to access vendor data without additional API calls.

📑 4. Filter Options

• Users can filter search results to view:
  • Only MCA companies
  • Only Non-MCA companies
  • All Companies
• Filters help narrow down search results for better accuracy.

Integration & Data Flow

• The Search MFE uses an API to fetch data for MCA and Non-MCA companies.
• The fetched data is stored in a global state for easy access by other MFEs.
• Pagination parameters (page number, items per page) are managed in the state to maintain consistency.
• The state can be accessed by other MFEs to avoid redundant data fetching.

---

Executive Summary MFE

Overview

The Executive Summary MFE is a detailed view that displays information about a searched company or non-company vendor. It provides comprehensive insights, including similar companies and an AI-generated summary, enabling users to make informed decisions quickly.

Key Features

📝 1. Detailed Vendor Information

• Displays all essential information about the searched vendor (company or non-company).
• Includes key details like name, registration number, type (MCA/Non-MCA), address, and contact information.
• If integrated with other data sources, additional information like financials, director details, and compliance status can also be shown.

🔗 2. Similar Companies

• Shows a list of similar companies based on the searched vendor.
• Similarity is determined using factors like industry, location, or business type.
• Clicking on a similar company redirects to its executive summary, allowing quick comparisons.

🤖 3. AI-Generated Summary

• Provides a concise, AI-generated summary of the searched vendor.
• Summarizes key insights like market position, growth potential, and reputation.
• Uses Natural Language Processing (NLP) techniques to generate meaningful and context-aware summaries.

Integration & Data Flow

• The searched vendor data is received from the Search MFE.
• Uses the stored state from Search MFE to fetch and display relevant information.
• Makes an API call to retrieve similar companies and process the data for accurate recommendations.
• Integrates with AI services or in-house models to generate the AI summary.

---

Workflow MFE

Overview

The Workflow MFE is designed to help users create and manage projects and raise report requests within those projects. The reports are visually represented using a Kanban View, providing a clear and organized workflow. The movement of reports across stages is automated based on their status, ensuring accuracy and minimizing manual errors.

Key Features

📁 1. Project Creation & Management

• Users can create projects and manage multiple projects simultaneously.
• Each project acts as a container for multiple report requests.
• Projects can be named, categorized, and organized for easy access.

📄 2. Report Request Management

• Within each project, users can raise report requests for specific needs.
• Report requests can be categorized based on their type or priority.
• Reports hold metadata such as request date, due date, assigned team, and status.

🗂️ 3. Kanban View for Workflow Visualization

• Reports are visually represented in a Kanban View with distinct stages.
• Stages typically include Draft, Under Review, In Progress, Generated, and Done.
• Users can view the progress of each report request at a glance.

🔄 4. Automated Stage Movement

• Stages move automatically based on the status of the report.
• Manual dragging between stages is restricted to avoid errors.
• Movement logic:
  • From Generated to Done can be controlled by the user.
  • Other stage transitions occur based on backend status updates.

Integration & Data Flow

• When a user creates a project, it's stored in the system and linked to the user's account.
• Report requests within projects are tracked with unique identifiers.
• The Kanban View fetches report data and dynamically updates the stage based on status changes.
• Status updates are communicated via API calls, ensuring real-time synchronization.

---

Multiviews MFE

Overview:

The Multiviews feature allows users to select a report and customize it by adding multiple dimensions for a comprehensive analysis. Users can view and analyze the report from various perspectives, tailoring the data to their specific requirements.

Key Dimensions Available:

1. Corporate Structure and Operational Capability (corporatestrusture):
   Analyzes the organizational structure and the operational efficiency of the entity.

2. Financial Health (financialhealth):
   Assesses the financial stability, profitability, and overall financial performance.

3. Credit History (credithistory):
   Evaluates the creditworthiness and repayment history of the entity.

4. Compliance Rigor (compliancerigor):
   Checks the adherence to legal and regulatory standards.

5. Litigation History (litigationhistory):
   Reviews past and ongoing legal cases or disputes involving the entity.

6. Defaulter and Blacklist Mentions (defaulter):
   Identifies whether the entity has been marked as a defaulter or blacklisted by any authority.

7. Sanctions and PEP Mentions (sanction):
   Examines if the entity or its stakeholders are under any sanctions or marked as politically exposed persons (PEPs).

8. Promoter and Related Party Quality (promotor):
   Evaluates the credibility and reputation of the promoters and related parties.

9. Market Sentiment (market):
   Analyzes the public and market perception of the entity.

How It Works:

• Users can select a report and choose the desired dimensions for analysis.
• The view is dynamically updated based on the selected dimensions.
• This customizable approach enables a detailed and targeted examination of the report.
• Users can apply multiple dimensions simultaneously to achieve a multi-faceted view of the report.

---

Report MFE - Documentation

Overview

The Report MFE is a critical feature that provides a comprehensive view of the reports to the clients. It enables users to explore various dimensions of the report, offering an in-depth analysis, AI-generated summaries, and valuable insights. This MFE acts as a core module for clients to make informed decisions based on the analyzed data.

Key Dimensions & Parameters

The Report MFE supports multiple dimensions for detailed analysis. Each dimension is associated with specific parameters, determining the scope and depth of the evaluation.

Dimensions & Parameters

1. Corporate Structure and Operational Capability (corporatestrusture):

   • Scale of Company Metric
   • Management Consistency Metric (Applicable for companies with valid CIN)
   • Workforce Strength Metric (Only for companies)

2. Financial Health (financialhealth):

   • Liquidity Position Metric
   • Leverage Position Metric
   • Profitability Metric
   • GST Turnover Growth Metric

3. Credit History (credithistory):

   • Economic Defaults Metric (Excludes Individuals)
   • Insolvency Risk Metric

4. Compliance Rigor (compliancerigor):

   • Indirect Tax Compliance Metric (Only for companies)
   • Labor Compliance Metric (Only for companies)
   • MCA Compliance Metric (For companies with valid CIN)

5. Litigation History (litigationhistory):

   • Insolvency Risk Metric
   • Litigiousness Metric
   • Criminal Background Metric
   • Cases Against Target Metric
   • Tax Litigations Metric

6. Defaulter and Blacklist Mentions (defaulter):

   • MCA Defaults Metric (For companies with valid CIN or Directors)
   • Market Regulator Defaults Metric
   • SFIO, CBI, and Other Defaults Metric

7. Sanctions and PEP Mentions (sanction):

   • Trade Restrictions Metric
   • Target Political Exposure Metric

8. Promoter and Related Party Quality (promotor):

   • Legal Cases Against Connected Parties Metric (Excludes Individuals)
   • Regulator Defaults Against Connected Parties Metric (Excludes Individuals)
   • Trade Restrictions Connected Parties Metric (Excludes Individuals)
   • Political Exposure Connected Parties Metric (Excludes Individuals)

9. Market Sentiment (market):

   • Adverse Media Metric
   • Customer Complaints Metric

Report Analysis Components

For each selected dimension, the following components are displayed:

1. Score Card: A quick view of the scores or ratings based on the selected parameters.

2. Detailed Analysis: In-depth insights and explanations related to each parameter, highlighting the performance and risks.

3. Report Summary:

   • AI-Generated Summary: An automated and data-driven summary providing a concise yet comprehensive overview of the dimension.
   • This is the most crucial part of the report, aiding decision-making effectively.

Data Handling & Integration

• The APIs are integrated using Axios for data fetching, as they haven't been migrated to GO yet.
• Most of the data management happens at the parent level, ensuring consistent data flow and avoiding redundancy.

The main APIs we are using in Report MFE are:

Multiview Report MFE - Documentation

Overview

The Multiview Report MFE is an extension of the standard Report View. It enables users to select specific reports and view them across multiple dimensions, providing tailored perspectives based on the selected criteria. This feature allows flexibility for clients to explore reports through various analytical lenses, offering a comprehensive and customizable experience.

Core Functionality

• Users can select a report from the List Dashboard.
• Based on the user's selection, the view dynamically updates to display relevant dimensions.
• Each report can be analyzed through different dimensions, offering unique insights and detailed analyses.
• Multiple reports can be explored simultaneously, facilitating comparative analysis across different entities.

Key Dimensions for Multiview

The dimensions available for viewing are the same as those in the Report MFE:

1. Corporate Structure and Operational Capability (corporatestrusture)
2. Financial Health (financialhealth)
3. Credit History (credithistory)
4. Compliance Rigor (compliancerigor)
5. Litigation History (litigationhistory)
6. Defaulter and Blacklist Mentions (defaulter)
7. Sanctions and PEP Mentions (sanction)
8. Promoter and Related Party Quality (promotor)
9. Market Sentiment (market)

Multiview Report Flow

1. Report Selection:

   • Users can select multiple reports from the dashboard.
   • These reports can belong to various types, such as companies, individuals, or directors.

2. Dimension Selection:

   • Based on the selected report(s), the user can choose the relevant dimensions for analysis.
   • Each selected dimension adjusts the view dynamically to present data specific to that aspect.

3. Dynamic View Rendering:

   • The view adapts based on:
     • The type of entity (Company, Individual, Director)
     • The applicable dimensions and their respective parameters
     • The user's role and access level

4. Comparative Analysis:

   • If multiple reports are selected, a side-by-side comparison is facilitated.
   • Clients can assess similarities and differences in performance and risk factors across entities.

Data Handling

• The parameterMap logic is reused from the Report MFE to determine the applicable parameters for each dimension.
• APIs are called using Axios, and data is managed at the parent level for consistent flow.
• The views are updated based on the API response, ensuring that users always see the most recent and accurate data.

Deployment Commands

The following are the commands for deploying all these MFEs in Cloud Run

Development Environment

Analytics Dashboard

pnpm build
docker build --no-cache -t instant-reports-fe/analytics-dashboard:latest .
docker tag instant-reports-fe/analytics-dashboard:latest us-west1-docker.pkg.dev/test-genai-422809/signalx-instant-reports/instant-reports-fe/analytics-dashboard:latest
docker push us-west1-docker.pkg.dev/test-genai-422809/signalx-instant-reports/instant-reports-fe/analytics-dashboard:latest

Dashboard

pnpm build
docker build --no-cache -t instant-reports-fe/dashboard:latest .
docker tag instant-reports-fe/dashboard:latest us-west1-docker.pkg.dev/test-genai-422809/signalx-instant-reports/instant-reports-fe/dashboard:latest
docker push us-west1-docker.pkg.dev/test-genai-422809/signalx-instant-reports/instant-reports-fe/dashboard:latest

Search

pnpm build
docker build --no-cache -t instant-reports-fe/search:latest .
docker tag instant-reports-fe/search:latest us-west1-docker.pkg.dev/test-genai-422809/signalx-instant-reports/instant-reports-fe/search:latest
docker push us-west1-docker.pkg.dev/test-genai-422809/signalx-instant-reports/instant-reports-fe/search:latest

Entity

pnpm build
docker build --no-cache -t instant-reports-fe/entity:latest .
docker tag instant-reports-fe/entity:latest us-west1-docker.pkg.dev/test-genai-422809/signalx-instant-reports/instant-reports-fe/entity:latest
docker push us-west1-docker.pkg.dev/test-genai-422809/signalx-instant-reports/instant-reports-fe/entity:latest

Executive Summary

pnpm build
docker build --no-cache -t instant-reports-fe/executive-summary:latest .
docker tag instant-reports-fe/executive-summary:latest us-west1-docker.pkg.dev/test-genai-422809/signalx-instant-reports/instant-reports-fe/executive-summary:latest
docker push us-west1-docker.pkg.dev/test-genai-422809/signalx-instant-reports/instant-reports-fe/executive-summary:latest

Multiviews

pnpm build
docker build --no-cache -t instant-reports-fe/multiview:latest .
docker tag instant-reports-fe/multiview:latest us-west1-docker.pkg.dev/test-genai-422809/signalx-instant-reports/instant-reports-fe/multiview:latest
docker push us-west1-docker.pkg.dev/test-genai-422809/signalx-instant-reports/instant-reports-fe/multiview:latest

Workflow

pnpm build
docker build --no-cache -t instant-reports-fe/workflow:latest .
docker tag instant-reports-fe/workflow:latest us-west1-docker.pkg.dev/test-genai-422809/signalx-instant-reports/instant-reports-fe/workflow:latest
docker push us-west1-docker.pkg.dev/test-genai-422809/signalx-instant-reports/instant-reports-fe/workflow:latest

Report

pnpm build
docker build --no-cache -t instant-reports-fe/report:latest .
docker tag instant-reports-fe/report:latest us-west1-docker.pkg.dev/test-genai-422809/signalx-instant-reports/instant-reports-fe/report:latest
docker push us-west1-docker.pkg.dev/test-genai-422809/signalx-instant-reports/instant-reports-fe/report:latest

Multiview Report

pnpm build
docker build --no-cache -t instant-reports-fe/mutlview-report:latest .
docker tag instant-reports-fe/mutlview-report:latest us-west1-docker.pkg.dev/test-genai-422809/signalx-instant-reports/instant-reports-fe/mutlview-report:latest
docker push us-west1-docker.pkg.dev/test-genai-422809/signalx-instant-reports/instant-reports-fe/mutlview-report:latest

Staging Environment

Root

pnpm build
docker build --no-cache -t staging-rpaas-fe/root:latest .
docker tag staging-rpaas-fe/root:latest us-west1-docker.pkg.dev/test-genai-422809/staging-rpaas-frontend/staging-rpaas-fe/root:latest
docker push us-west1-docker.pkg.dev/test-genai-422809/staging-rpaas-frontend/staging-rpaas-fe/root:latest

Analytics Dashboard

pnpm build
docker build --no-cache -t staging-rpaas-fe/analytics-dashboard:latest .
docker tag staging-rpaas-fe/analytics-dashboard:latest us-west1-docker.pkg.dev/test-genai-422809/staging-rpaas-frontend/staging-rpaas-fe/analytics-dashboard:latest
docker push us-west1-docker.pkg.dev/test-genai-422809/staging-rpaas-frontend/staging-rpaas-fe/analytics-dashboard:latest

Dashboard

pnpm build
docker build --no-cache -t staging-rpaas-fe/dashboard:latest .
docker tag staging-rpaas-fe/dashboard:latest us-west1-docker.pkg.dev/test-genai-422809/staging-rpaas-frontend/staging-rpaas-fe/dashboard:latest
docker push us-west1-docker.pkg.dev/test-genai-422809/staging-rpaas-frontend/staging-rpaas-fe/dashboard:latest

Search

pnpm build
docker build --no-cache -t staging-rpaas-fe/search:latest .
docker tag staging-rpaas-fe/search:latest us-west1-docker.pkg.dev/test-genai-422809/staging-rpaas-frontend/staging-rpaas-fe/search:latest
docker push us-west1-docker.pkg.dev/test-genai-422809/staging-rpaas-frontend/staging-rpaas-fe/search:latest

Entity

pnpm build
docker build --no-cache -t staging-rpaas-fe/entity:latest .
docker tag staging-rpaas-fe/entity:latest us-west1-docker.pkg.dev/test-genai-422809/staging-rpaas-frontend/staging-rpaas-fe/entity:latest
docker push us-west1-docker.pkg.dev/test-genai-422809/staging-rpaas-frontend/staging-rpaas-fe/entity:latest

Executive Summary

pnpm build
docker build --no-cache -t staging-rpaas-fe/executive-summary:latest .
docker tag staging-rpaas-fe/executive-summary:latest us-west1-docker.pkg.dev/test-genai-422809/staging-rpaas-frontend/staging-rpaas-fe/executive-summary:latest
docker push us-west1-docker.pkg.dev/test-genai-422809/staging-rpaas-frontend/staging-rpaas-fe/executive-summary:latest

Workflow

pnpm build
docker build --no-cache -t staging-rpaas-fe/workflow:latest .
docker tag staging-rpaas-fe/workflow:latest us-west1-docker.pkg.dev/test-genai-422809/staging-rpaas-frontend/staging-rpaas-fe/workflow:latest
docker push us-west1-docker.pkg.dev/test-genai-422809/staging-rpaas-frontend/staging-rpaas-fe/workflow:latest

Report

pnpm build
docker build --no-cache -t staging-rpaas-fe/report:latest .
docker tag staging-rpaas-fe/report:latest us-west1-docker.pkg.dev/test-genai-422809/staging-rpaas-frontend/staging-rpaas-fe/report:latest
docker push us-west1-docker.pkg.dev/test-genai-422809/staging-rpaas-frontend/staging-rpaas-fe/report:latest

Multiview Report

pnpm build
docker build --no-cache -t staging-rpaas-fe/multiview-report:latest .
docker tag staging-rpaas-fe/multiview-report:latest us-west1-docker.pkg.dev/test-genai-422809/staging-rpaas-frontend/staging-rpaas-fe/multiview-report:latest
docker push us-west1-docker.pkg.dev/test-genai-422809/staging-rpaas-frontend/staging-rpaas-fe/multiview-report:latest

Creating and Running MFEs

Command to create MFE

pnpm create vite@latest mfe-project -- --template react-ts

Folder Structure

mfe-project/
│── src/
│   ├── components/
│   │   └── MyComponent.tsx
│   ├── graphql/
│   │   └── graphql queries
│   ├── api/
│   │   └── custom hooks for the graphql generated files
│   ├── App.tsx
│   ├── main.tsx
│── public/
│── index.html
│── vite.config.mjs
│── tsconfig.json
│── package.json

Commands to run MFE

We have around 15 MFEs. We use a script file "run-mfes.sh" that contains instructions for running the MFEs.

Before running an MFE, we need to build it first. To run each MFE, we can use:

pnpm watch

or

pnpm build && pnpm serve

To run a particular MFE, follow these steps:

1. First, run the root:

   cd root
   pnpm watch

2. Run all MFEs except the one you're working on:

   ./run-mfes.sh "mfe_name"

   This will run all MFEs except the one where you're making changes or the one you want to test.

3. Then run the updated MFE:

   cd mfe_name
   pnpm watch