Proposing New Component - Dynamic Card - Areteans

[s-thutupalli]

Title: Dynamic Employee Management and Sales Performance Tracking Component

This widget allows users to manage employee details and track their sales performance over six months. It includes functionalities like data entry, search, edit, and data visualisation through a modal chart.

Component Overview

The widget integrates features for efficient user and data management:

Employee Data Entry: Users can add new employee records, including their personal details and sales data for six months.

Sales Performance Visualization: Displays sales data in a modal with a month-wise breakdown.

Search Functionality: Allows searching for employees by their name or other parameters.

Edit Employee Details: Enables updating existing records dynamically.

Drawer Integration: Houses all employee data and provides a responsive interface.

Steps for Using the Component

Open the Widget:

A floating button with a sidebar icon is visible on the UI. Clicking it opens the drawer.

Add New Employee:

Use the add employee icon to open a form where employee details can be entered.

Edit Existing Employee:

Each employee card includes an edit icon to modify the employee's details.

Search Employees:

Enter the employee name in the search bar to fetch specific records.

View Sales Performance:

Click on an employee's record to open a modal showing their month-wise sales performance in a chart.

Component Configuration:

1. Create a Case Type

Begin by creating a case type that includes the necessary fields and views.

Required Fields:

Emp ID: Unique identifier for the employee.

Name: Full name of the employee.

Phone: Contact number of the employee.

User Image URL: URL for the employee's profile image.

Six Monthly Sales Fields: Fields to capture sales data for six months (e.g., FirstMonth, SecondMonth, etc.).

Steps to Configure the Case Type:

Define a case type in your application.

Add the required fields listed above.

Configure the view for the case type to include all these fields in a user-friendly layout.

2. Configure the Widget

The widget requires the following inputs during configuration:

Widget Configuration Options:

Data Page Name: Use the auto-generated data page name from the case type.

Example: D_EmployeeRecords.

Employee Card Headers: Provide the headers for the employee card as a comma-separated value.

Example: empid,name,phone,total.

This determines how data is displayed on the employee cards.

Sales Chart Headers: Define the headers for the chart modal that visualizes the last six months' sales.

Provide these as a comma-separated value.

Example: January,February,March,April,May,June.

Current Year: Specify the year to display in the chart modal.

Example: 2024.

Class Name: Provide the class name of the case type.

Example: MyApp-Work-Employee.

Case Type: Provide the name of the case type created in step 1.

Example: Employee.

Benefits of Using this Component in Constellation UI Applications

Scalability:

Designed to handle diverse and evolving user needs, the component provides search and visualization features, ensuring seamless performance regardless of the application size or complexity.

Ease of Use:

User-friendly interface with intuitive controls for data entry, editing, and analysis.

Customisation:

The component is highly adaptable, allowing it to fit various use cases (e.g., performance tracking, employee management).

Real-Time Insights:

Visualisation tools like charts provide actionable insights into sales trends.

Attached the component code and detailed description with images below.

Drawer.zip Dynamic Card Documentation.docx

[ricmars]

this component is not following best practices for this repo and uses material UI unnecessary - it also seems very specific to managing employees and is likely not reusable for other usage. Finally a lot of the functionality could be achieved using a landing page and managing the operator data object using the edit action.

This component will not integrated into this repo

[ricmars]

If you disagree with my response above, please add more comments. If I don't see any update in a couple of days, I will close this issue as no action.

[s-thutupalli]

We can remove Material UI without any issues. Apart from that if there are any other best practices or guidelines we missed, please let us know. This will help us align the component better with the pega/repository standards.

While some functionality can be handled on the landing page, we feel that features like the easy-to-access drawer for user preferences are important for the user experience. We understand the current component is specific to employee management. We’re open to brainstorming ways to make it more general for other use cases.