# Task Manager

***

## Intro

<figure><img src="https://571876559-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOTIrj6tiKRs9GIGNFMvz%2Fuploads%2Fboo78bf37WbC1W5kZHKh%2FGroup%201000001447.svg?alt=media&#x26;token=d038cb27-010e-43eb-af58-3435ab8a63cf" alt=""><figcaption></figcaption></figure>

## Links

🖥️[ Preview link](https://taskmanager-lite.bubbleapps.io/version-test)

📺 [Template Overview on Youtube](https://www.youtube.com/watch?v=vF_TFXWf8qU)

🌐 [Template page on Bubble Marketplace](https://bubble.io/template/task-management-tool-1644680032647x559786895411773440)

***

## Screenshots

<div align="center" data-full-width="false"><figure><img src="https://571876559-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOTIrj6tiKRs9GIGNFMvz%2Fuploads%2FRNUQVqCuaposlNk4DkVs%2F1.svg?alt=media&#x26;token=c4a47ec9-94f1-4e7d-8686-8754b87dbf04" alt=""><figcaption><p>Index page</p></figcaption></figure> <figure><img src="https://571876559-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOTIrj6tiKRs9GIGNFMvz%2Fuploads%2FANlLsCoLA9jiRfiLRvN7%2F2.webp?alt=media&#x26;token=9315d247-891c-4696-b0bd-dd4225606573" alt=""><figcaption><p>Features</p></figcaption></figure> <figure><img src="https://571876559-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOTIrj6tiKRs9GIGNFMvz%2Fuploads%2FeKSNGKbwPErzoVkhF4Wv%2F3.webp?alt=media&#x26;token=8f6ee6f1-803b-44ef-b812-eb9b7a4ae6c8" alt=""><figcaption><p>Workspace</p></figcaption></figure> <figure><img src="https://571876559-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOTIrj6tiKRs9GIGNFMvz%2Fuploads%2F3dDZTUq9LZTKxJGHbHty%2FScreenshot%202024-03-04%20172708.png?alt=media&#x26;token=6672e6f9-cc2c-466e-9d5a-3ac2e473ec52" alt=""><figcaption><p>New Project</p></figcaption></figure> <figure><img src="https://571876559-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOTIrj6tiKRs9GIGNFMvz%2Fuploads%2FeWQ2QppzqcyzwZRNETlf%2F5.svg?alt=media&#x26;token=fc68d606-d0a5-495d-b0f1-cab0c789c478" alt=""><figcaption><p>Dashboard</p></figcaption></figure> <figure><img src="https://571876559-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOTIrj6tiKRs9GIGNFMvz%2Fuploads%2Fkx5ZkUZkRU6vmEhSLlFe%2F6.svg?alt=media&#x26;token=d3b29ccf-2b9f-4aa9-87fc-4def71a2cd16" alt=""><figcaption><p>Tasks</p></figcaption></figure></div>

***

## Template details

"Task Manager" is a powerful task management tool that offers users a wide range of features. With it, you can easily create, assign, and track tasks, manage teams, and allocate resources to optimize workflow processes. The unique feature of this application lies in its intuitive interface and flexible customization, allowing you to adapt it to the specific needs of your team or business.

Task Manager template features the following:&#x20;

✅ Updated design, fully adaptable to Bubble's latest mobile responsive design requirements.

✅ Instant access to the main page for demo users to fully explore the application.

✅ Ability to view all workspaces regardless of project availability.

✅  Monitoring panel providing an overview of the latest assigned tasks and updates on projects.

✅ Calendar plugin with updated design and task management capabilities.

✅ Drag-and-drop project cards to change their status.

✅ List of tasks created or assigned to the current user.

✅ Ability to invite colleagues via email.

✅ "Settings" section with functions to update personal information, change email and password, as well as the ability to log out from other sessions on different devices for data security enhancement.

✅ Access to tasks from various sections of the application, including the calendar and projects.

We tried to keep all the workflows and design architecture simple for beginner-intermediate users to use and adjust. However, we recommend having at least moderate experience with Bubble to be able to fully use and edit the app’s backend.\
\
If you need any assistance to customize this template for your personal or business project, feel free to reach out to our team via <dev@appassion.io>. We are always there to help build new products and mobile/web applications.

{% hint style="warning" %}
*<mark style="color:red;">**Removing the banner**</mark>*

*<mark style="color:red;">**1. Open the app in Bubble editor**</mark>*&#x20;

*<mark style="color:red;">**2. Go to settings -> SEO/Metatags**</mark>*&#x20;

*<mark style="color:red;">**3. Remove the content of "Script in the body"**</mark>*
{% endhint %}

***

## User flows&#x20;

**Main flow:**&#x20;

-> Registering a new user -> Navigating to the Workspaces page-> Creating a Workspace -> Creating a project -> Setting up personal information -> Navigating to the Dashboard page -> Inviting people to the team -> Creating a new task -> Viewing and tracking tasks

***

## Key Features

<table data-view="cards"><thead><tr><th></th><th align="center"></th><th></th><th data-hidden data-card-cover data-type="files"></th><th data-hidden data-type="checkbox"></th></tr></thead><tbody><tr><td></td><td align="center"><mark style="color:orange;"><strong>TASK CREATION AND MANAGEMENT</strong></mark></td><td></td><td></td><td>true</td></tr><tr><td></td><td align="center"><mark style="color:orange;"><strong>TEAM MANAGEMENT</strong></mark></td><td></td><td></td><td>false</td></tr><tr><td></td><td align="center"><mark style="color:orange;"><strong>MONITORING PANEL</strong></mark></td><td></td><td></td><td>true</td></tr><tr><td></td><td align="center"><mark style="color:orange;"><strong>CALENDAR PLUGIN</strong></mark></td><td></td><td></td><td>true</td></tr><tr><td></td><td align="center"><mark style="color:orange;"><strong>PROJECT CARD DRAG-AND-DROP</strong></mark></td><td></td><td></td><td>true</td></tr><tr><td></td><td align="center"><mark style="color:orange;"><strong>SETTINGS MANAGEMENT</strong></mark></td><td></td><td></td><td>false</td></tr></tbody></table>

## Task Manager Overview | Review and starter tips

Based on your commonly asked questions, we've prepared a list of basic tips for those who are just starting on Bubble and want to find their way around the project for their dream project.

Feel free to leave a comment or reach out to us via <dev@appassion.io> if you have any questions.

{% embed url="<https://www.youtube.com/watch?v=vF_TFXWf8qU&t=5s>" %}

## Workflows&#x20;

### Primary colors and their purposes

### **Green**

Emphasizes actions related to creating or modifying records in the database, indicating successful operation completion.

**For example:**

{% tabs %}
{% tab title="Example 1" %}

<figure><img src="https://content.gitbook.com/content/OTIrj6tiKRs9GIGNFMvz/blobs/LOmzG9gIrTj6A5oAZL6I/exmp%201.svg" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Example 2" %}

<figure><img src="https://content.gitbook.com/content/OTIrj6tiKRs9GIGNFMvz/blobs/1rePD6iGECNmtRew8vq7/exmp%202.svg" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

### **Red**

Designated for actions involving deletion or resetting of values, aiding users in quickly identifying them.

**For example:**

{% tabs %}
{% tab title="Example 1" %}

<figure><img src="https://content.gitbook.com/content/OTIrj6tiKRs9GIGNFMvz/blobs/74GOjI45cvum1RUlwreR/exmp%203.svg" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Example 2" %}

<figure><img src="https://content.gitbook.com/content/OTIrj6tiKRs9GIGNFMvz/blobs/fmQ3O7Msmf3AwHBcj2IE/exmp%204.svg" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

### **Blue**

Reserved for actions that do not impact application resources, such as opening or closing pop-up windows.

**For example:**

{% tabs %}
{% tab title="Example 1" %}

<figure><img src="https://content.gitbook.com/content/OTIrj6tiKRs9GIGNFMvz/blobs/NBObXTvuO3LnC3VN4Zcz/exmp%205.svg" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Example 2" %}

<figure><img src="https://content.gitbook.com/content/OTIrj6tiKRs9GIGNFMvz/blobs/9Xeg7vdWSXELs1MdediV/exmp%206.svg" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

### **Orange**

Used for actions related to app navigation, providing ease of orientation within the interface.

**For example:**

{% tabs %}
{% tab title="Example 1" %}

<figure><img src="https://content.gitbook.com/content/OTIrj6tiKRs9GIGNFMvz/blobs/4ARIinwGstrhZnBCofME/exmp%207.svg" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Example 2" %}

<figure><img src="https://content.gitbook.com/content/OTIrj6tiKRs9GIGNFMvz/blobs/eCzdB2yWpyl9tXkCjd4a/exmp%208.svg" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

### **Brown**

&#x20;Utilized for custom workflows and API work, highlighting these actions among others.

**For example:**

{% tabs %}
{% tab title="Example 1" %}

<figure><img src="https://content.gitbook.com/content/OTIrj6tiKRs9GIGNFMvz/blobs/ATm0kt93WltYTML1GPIx/exmp%209.svg" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Example 2" %}

<figure><img src="https://content.gitbook.com/content/OTIrj6tiKRs9GIGNFMvz/blobs/ykEzDwoqjpZeqFdtY40z/exmp%2010.svg" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

### **Purple**

Left to the developer's discretion for assigning color to actions as they see fit.

**For example:**

{% tabs %}
{% tab title="Example 1" %}

<figure><img src="https://content.gitbook.com/content/OTIrj6tiKRs9GIGNFMvz/blobs/OshcBA1ClLfXo68WbUIg/purple%201.svg" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Example 2" %}

<figure><img src="https://content.gitbook.com/content/OTIrj6tiKRs9GIGNFMvz/blobs/olbIPwmNBHqb3RY7eRJT/purple%202.svg" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

### **Cyan**

&#x20;**I**ntended for actions involving the use of Custom Events, ensuring ease of perception for complex operations.

**For example:**

{% tabs %}
{% tab title="Example 1" %}

<figure><img src="https://content.gitbook.com/content/OTIrj6tiKRs9GIGNFMvz/blobs/A1q1MvUmn6ymT3XCmbtp/cyan%201.svg" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Example 2" %}

<figure><img src="https://content.gitbook.com/content/OTIrj6tiKRs9GIGNFMvz/blobs/epvJ1ziHkqfBs0mDRDl9/cyan%202.svg" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

### **Grey**

Employed for all other actions not covered by other colors, aiding in making the interface clear and balanced.

**For example:**

{% tabs %}
{% tab title="Example 1" %}

<figure><img src="https://content.gitbook.com/content/OTIrj6tiKRs9GIGNFMvz/blobs/BOLr3BPym0aYv1m6ECW3/grey%201.svg" alt="" width="352"><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

{% hint style="warning" %}
These standards are purely recommendations. Possible discrepancies do not affect the functionality of the application.
{% endhint %}

***

## Pages (element tree should be added here in some way)&#x20;

*Below, you will find a list of all the pages available on this platform, along with a brief description of their functionality.*

\ <mark style="color:orange;">**Index:**</mark> Visit our landing page to get an overview of the project, where you'll find descriptions of features and answers to key questions. Here, you'll find an overview of the "My Task" application, including its purpose, key features, and capabilities.

<mark style="color:orange;">**Login:**</mark> This is the page where you can register or log in.

<mark style="color:orange;">**Docs:**</mark> Access all necessary platform documentation, including Privacy Policy, Terms & Conditions, and Frequently Asked Questions (FAQ).

<mark style="color:orange;">**Workspaces:**</mark> Create, browse, and edit your Workspaces to start managing projects and tasks efficiently today!

<mark style="color:orange;">**Reset Password:**</mark> Effortlessly reset your password and receive updated login credentials for seamless access.

<mark style="color:orange;">**Dashboard:**</mark> A dashboard providing essential and up-to-date information.&#x20;

* The  "Home" is the main tab on the dashboard page, featuring a calendar and the option to create tasks, as well as a list of my team.
* &#x20;The  "Projects" tab is where you can create and manage your projects.
* &#x20;The  "Tasks" tab is where you can view tasks and filter only those assigned to you. There's also sorting by date, time, and alphabet, as well as additional filtering options.
* The  "Team" tab, you can invite participants to your team and also edit team members.
* The  "Settings" tab, there are options for "Personal Info" and "Security," where you can change your password and sign out of sessions on other devices.

***

## Reusable elements

1. **Add member to the project -** is used to add a member to the project and is located on the <mark style="color:orange;">dashboard page.</mark>
2. **Footer -** includes links to the Privacy Policy and Terms and Conditions, as well as links to Information and Contacts. Used on pages: <mark style="color:orange;">docs, index, 404, reset\_pw pages.</mark>
3. **Mobile footer** - used on the <mark style="color:orange;">dashboard page</mark>, sets the overflow property of the element with the identifier #overflow-visible to visible, allowing the content of this element to be visible even if it exceeds its dimensions.
4. **More project -** this feature is used to configure or modify the color scheme of a project, or to delete it. Used on pages: <mark style="color:orange;">workspace, dashboard.</mark>
5. **Filters** - used to sort tasks by due date, creation time, or alphabetically, and to filter and display only my tasks, due this week or next week. Used on pages: <mark style="color:orange;">dashboard.</mark>
6. **Header** - the top part of a web page containing the logo, application name, navigation elements, and other important components. Used on pages: <mark style="color:orange;">index, docs, workspace, 404, login, reset\_pw.</mark>
7. **More comment** - is an element used exclusively on the <mark style="color:orange;">dashboard page</mark>, allowing users to edit or delete a comment.
8. **More Icon users** - a visible element used on the <mark style="color:orange;">dashboard page</mark> to display information about the users in the project.
9. **Tasks Assignee** - is an element used on the <mark style="color:orange;">dashboard page</mark> to indicate who is assigned to a task and provide information about the assigned user.

***

## Data Types

### Color

This data type is designed to assign a color to a [`Project`](#project).

| Field name | Type                  | Notes         |
| ---------- | --------------------- | ------------- |
| `Color`    | `Text`                | Color name    |
| `Project`  | [`Project`](#project) | Project color |

### Comment

This data type is designed for storing comments from [`Tasks`](#task).

| Field name | Type            | Notes        |
| ---------- | --------------- | ------------ |
| `Content`  | `Text`          | Comment text |
| `Task`     | [`Task`](#task) | Task comment |

### FAQ

This data type is designed for storing questions and answers.

| Field name | Type   | Notes         |
| ---------- | ------ | ------------- |
| `Answer`   | `Text` | Answer text   |
| `Question` | `Text` | Question text |

### History Project

This data type is designed for storing all changes who made in [`Project`](#project).

| Field name | Type                       | Notes                         |
| ---------- | -------------------------- | ----------------------------- |
| `Action`   | `Text`                     | Project action                |
| `Did`      | `List of` [`Users`](#user) | The user who did the action   |
| `Icon`     | `Text`                     | The icon with the change made |
| `Project`  | [`Project`](#project)      | The project that was modified |

### Project

This data type is designed for storing information about Project.&#x20;

| Field name        | Type                                             | Notes                 |
| ----------------- | ------------------------------------------------ | --------------------- |
| `Collaborators`   | `List of` [`Users`](#user)                       | Project collaborators |
| `Description`     | `Text`                                           | Project description   |
| `Image`           | `Image`                                          | Project image         |
| `Project History` | `List of` [`History Projects`](#history-project) | History of project    |
| `Sections`        | `List of` [`Sections`](#section)                 | Project sections      |
| `Status`          | `Yes/No`                                         | Project status        |
| `Title`           | `Text`                                           | Project title         |
| `Workspace`       | [`Workspace`](#workspace)                        | Project workspace     |

### Section

This data type is designed for storing section names with [`Tasks`](#task).

| Field name | Type                       | Notes                                     |
| ---------- | -------------------------- | ----------------------------------------- |
| `Name`     | `Text`                     | Section Name                              |
| `Project`  | [`Project`](#project)      | The project to which the section belongs. |
| Tasks      | `List of` [`Tasks`](#task) | The tasks within the section.             |

### Task

This data type is designed for storing information about Task.

| Field name    | Type                             | Notes                         |
| ------------- | -------------------------------- | ----------------------------- |
| `Assignee`    | [`User`](#user)                  | Assignee to task              |
| Comments      | `List of` [`Comments`](#comment) | Task comments                 |
| `Completed`   | `Yes/No`                         | Is completed this task or not |
| `Description` | `Text`                           | Task description              |
| `Due Date`    | `Date`                           | Doe date for task             |
| `Files`       | `List of files`                  | Task files                    |
| Title         | `Text`                           | Task title                    |

### User

This data type is designed for storing information about User.<br>

| Field name          | Type                                 | Notes                  |
| ------------------- | ------------------------------------ | ---------------------- |
| `Bio`               | `Text`                               | User bio               |
| `Current workspace` | [`Workspace`](#workspace)            | User current workspace |
| `Full Name`         | `Text`                               | User name              |
| `Image`             | `Image`                              | User image             |
| `Phone`             | `Text`                               | User phone number      |
| `Role`              | `Text`                               | User role              |
| `Workspaces`        | `List of` [`Workspaces`](#workspace) | User workspaces        |
| `Email`             | `Text`                               | User email             |

### Workspace

This data type is designed for storing all workspace names with their collaborators and [`Projects`](#project).<br>

| Field name      | Type                             |                         |
| --------------- | -------------------------------- | ----------------------- |
| `Collaborators` | `List of` [`Users`](#user)       | Workspace collaborators |
| `Name`          | `Text`                           | Workspace name          |
| `Projects`      | `List of` [`Projects`](#project) | Workspace projects      |

<br>

***

## Option sets&#x20;

#### Dashboard Menu

* Home
* Projects
* Tasks
* Team
* Settings
* Project preview
* Search

#### Sort MT

* All Tasks
* Incomplete tasks
* Completed tasks
* Due next week
* Due this week
* Just my tasks
* Creating time
* Alphabetical
* Due date

***

<figure><img src="https://content.gitbook.com/content/OTIrj6tiKRs9GIGNFMvz/blobs/9qC87xAsu8ARWjXu0h0s/Logo-Appassion.png" alt=""><figcaption></figcaption></figure>

The template is available in its current form, however, further alterations can be negotiated.&#x20;

Don't hesitate to reach out to us with any questions, and we'll gladly explore options to accommodate your concepts – Visit us at [<mark style="color:orange;">https://appassion.io/</mark>](https://appassion.io/) or email us at <mark style="color:orange;"><dev@appassion.io></mark>

<mark style="color:orange;">**We are always at your service through:**</mark> [Upwork](https://www.upwork.com/agencies/1472948949083369472/), [Clutch](https://clutch.co/profile/appassion#highlights). \ <br>