ActivityTimelineTile

Overview

The ActivityTimelineTile component provides a chronological display of customer relationship management (CRM) activities. It allows users to manage and visualize various types of activities such as calls, emails, meetings, notes, and tasks within a given interface. This tile is designed to enhance user engagement by visually displaying actions taken, promoting efficient task management, and facilitating team collaboration.

Purpose

The primary purpose of the ActivityTimelineTile is to present a timeline view of past and upcoming activities, enabling users to track and manage their interactions and tasks related to clients or projects. It integrates CRUD (Create, Read, Update, Delete) functionalities that allow users to add, edit, delete, and toggle the completion status of these activities.

Settings

1. Title

• Input Type: String
• Description: The main title displayed on the tile header. It helps users understand the context of the information presented.
• Default Value: 'Activities'

2. Subtitle

• Input Type: String
• Description: An optional subtitle providing further context or information about the activities displayed.
• Default Value: ''

3. Tile ID

• Input Type: String
• Description: A unique identifier for the tile, used for data management and tracking purposes.
• Default Value: Automatically generated as part of the implementation.

4. Loading State

• Input Type: Boolean
• Description: Indicates whether the tile is currently fetching activity data. Useful for showing loading indicators.
• Default Value: true

5. Error State

• Input Type: String
• Description: Stores error messages that can occur during data fetch operations. This can be displayed to the user to inform about any issues.
• Default Value: null

6. Search Query

• Input Type: String
• Description: Stores the user input for searching activities within the tile. This allows filtering of visible activities based on user-defined criteria.
• Default Value: ''

7. Storage Provider

• Input Type: String
• Description: Defines the storage system from which activities are fetched (e.g., OneDrive, Google Drive). The selected provider impacts how data is pulled into the component.
• Default Value: 'onedrive'

8. Filter Type

• Input Type: String
• Description: Allows users to filter activities by type (e.g., all, calls, emails). This results in a more refined view of activities based on user preference.
• Default Value: 'all'

9. Filter Completed

• Input Type: String
• Description: Allows users to filter activities based on their completion status (e.g., pending, done). This helps the user to see tasks that require attention or have been completed.
• Default Value: 'all'

10. Editing ID

• Input Type: String
• Description: Stores the ID of the currently being edited activity, allowing users to edit specific entries in the timeline.
• Default Value: null

11. Form Data

• Input Type: Object
• Description: Holds the data for the activity being created or edited, structured to match the expected attributes of an activity (type, subject, description, etc.).
• Default Value: {}

12. Saving State

• Input Type: Boolean
• Description: Indicates whether the tile is in the process of saving an updated activity. Useful for showing user feedback during save operations.
• Default Value: false

13. Organization Users

• Input Type: Array
• Description: Stores the list of organizational users to whom activities can be assigned, enhancing collaboration.
• Default Value: []

How It Works

1. Data Fetching: The tile fetches activities from a data source through the /api/apps/data and /api/apps/config endpoints. The data is populated upon loading the component and updates as CRUD operations are performed.

2. Filtering and Searching: Users can filter activities based on type and completion status or search through activities using a search bar, allowing them to quickly find relevant entries.

3. CRUD Operations:

   • Users can create new activities, modify existing ones, delete activities, and toggle their completed status.
   • Each action triggers an API call to update the backend.

4. Display Logic: Activities are displayed in reverse chronological order, and their visual appearance is styled according to their type (call, email, meeting, etc.) using predefined colors and icons.

5. AI Integration: The tile integrates with useDashboardStore, which manages the tile’s state and can be influenced by various user interactions. This enhances the analytical capabilities by allowing the dashboard to dynamically reflect user activity.

Data Expectations

The ActivityTimelineTile expects an array of activity objects, each structured with the following keys:

• id: Unique identifier for the activity.
• type: Type of activity (call, email, meeting, note, task).
• subject: Brief description of the activity.
• description: Detailed notes regarding the activity.
• owner: Identifier for the user assigned to the activity.
• due_date: Date by which the activity should be completed.
• completed: Boolean indicating whether the activity is finished.
• tags: Array of strings representing tags associated with the activity.
• created: Timestamp indicating when the activity was created.

Use Cases & Examples

Use Case 1: Sales Team Activity Tracking

A sales team can utilize the ActivityTimelineTile to log all customer interactions, ensuring they can quickly access the history of client engagements. This can help in personalizing follow-ups and nurturing relationships.

Use Case 2: Project Management

Project managers can track tasks associated with a specific project through the tile. This allows for monitoring of task completion and assigns team members to active tasks, ensuring accountability and productivity.

Configuration Example

Scenario: A project manager wants to track their team's activities related to a specific project.

Sample Configuration Data:

{
    title: 'Project Activities',
    subtitle: 'Keep track of tasks and meetings',
    id: 'project-activities-tile',
    filterType: 'all',
    filterCompleted: 'pending',
}

In this example, the project activities tile is titled, with a subtitle that indicates its purpose. It filters for all types of activities but focuses specifically on those that remain pending, enabling the project manager to prioritize follow-ups on incomplete tasks.