CompaniesManagement

Overview

The CompaniesManagement component serves as a user interface for managing company data within the Vantage analytics and data platform. It allows users to perform typical CRUD (Create, Read, Update, Delete) operations on a list of companies, search through the companies, and view relevant details about each company, such as user count and tokens used. The component is optimized for usability and includes data fetching, loading states, and confirmatory modals for deletion.

Settings

1. Clients State Management

• Input Type: State variable
• Purpose: This state holds the data about the clients (companies).
• Behavior: When initialized, it fetches the clients from the server using an API call and populates the state. Changes in the clients' list are triggered after any modification (addition, edit, deletion).
• Default Value: [] (empty array)

2. Loading State

• Input Type: State variable
• Purpose: This state indicates whether data is currently being loaded from the server.
• Behavior: If true, it shows a loading message on the UI; if false, it displays the fetched company data.
• Default Value: true

3. Search Query

• Input Type: State variable (string)
• Purpose: This state captures the user's search input to filter the displayed list of companies.
• Behavior: As the user types in the search bar, the list of companies dynamically filters based on this input.
• Default Value: '' (empty string)

4. Modal State (for adding/editing companies)

• Input Type: State variable (boolean)
• Purpose: This state determines whether the company editor modal is open or closed.
• Behavior: If true, the modal to add or edit a company will be displayed; if false, it won't be shown.
• Default Value: false

5. Editing Company State

• Input Type: State variable
• Purpose: This holds the information of the company currently being edited.
• Behavior: It initializes the modal with existing company information when an existing company is selected for editing.
• Default Value: null

6. Delete Target Company

• Input Type: State variable
• Purpose: This state holds the company that is currently selected for deletion.
• Behavior: It triggers a confirmation modal to confirm deletion before proceeding.
• Default Value: null

7. Delete Confirmation State

• Input Type: State variable (boolean)
• Purpose: This indicates whether the component is in a state of waiting for deletion confirmation.
• Behavior: If true, it signifies that the deletion request is being processed, which prevents multiple requests.
• Default Value: false

How it Works

1. Data Fetching:

   • The component fetches company data from the API endpoint /api/organization/clients using the fetchClients function on initial render.
   • Upon a successful request, it populates the clients state with received data.

2. Creating/Editing a Company:

   • Users can open the modal to either create a new company or edit an existing one. On save, it triggers handleSaveCompany, which sends a request to the same API endpoint but uses different HTTP methods (POST for creating and PUT for editing).

3. Deleting a Company:

   • When a user chooses to delete a company, it sets the deleteTarget state, which opens a confirmation modal. If deletion is confirmed, it invokes confirmDelete to send a DELETE request to the API.

4. Filtered Search:

   • The component supports real-time search filtering of the company list based on the searchQuery input.

5. Loading State Management:

   • Throughout data fetching, the loading state provides user feedback.

6. Display Layout:

   • The company list is displayed within a styled table with relevant company information such as name, user count, tokens used, monthly budget, and usability status.

Use Cases & Examples

Use Case 1: New Company Onboarding

A business needs to onboard a new client company into their system. Using this component, an admin can enter all relevant information such as company name, user details, and financial allocations.

Use Case 2: Company Status Management

In a SaaS environment, companies may choose to deactivate their accounts temporarily or permanently. This component allows admins to manage their active and inactive statuses and reassign resources appropriately.

Example Configuration

Use Case: New Company Onboarding

To onboard a new company, an administrator might use the following configuration as they fill out the modal form:

• Company Name: "Tech Innovations Inc."
• User Count: 10
• Tokens Used: 0
• Monthly Budget: 5000

This information will be submitted, resulting in a POST request to the /api/organization/clients endpoint. If successful, it adds "Tech Innovations Inc." to the company list with the assigned parameters.

Conclusion

The CompaniesManagement component is crucial for managing business operations within Vantage, providing a full suite of tools for creating, editing, searching, and deleting company entries, all while ensuring a smooth user experience. It plays a vital role in maintaining the core data integrity of the Vantage platform.