# App Installation and Start Guide

After purchasing Alian Hub from CodeCanyon, this guide will help users in setting up Alian Hub.&#x20;


# 1. Nodejs Configuration

### 1.1 Nodejs Configuration

Kindly navigate to your project's folder.

1. You must verify that **Npm (v10.2.4)** and **Node (v20.11.1)** are installed for the relevant version. If you're not sure about the version, try to run the given command in the command prompt: <mark style="color:red;">**npm run check-version**</mark>&#x20;
2. If both the **Node** and **Npm versions** match, then the screen will display the output as shown below:<br>

   <figure><img src="/files/PEAUVbTB2UdihX4iyB7I" alt=""><figcaption></figcaption></figure>

Else, the screen will display the output as shown below:

<figure><img src="/files/o7ciOlzVAohZurJ6bsoN" alt=""><figcaption></figcaption></figure>

Kindly check if Node is pre-installed in your system. If not, then you need to install it before running Step 1.&#x20;

### Reference to Node Installation:&#x20;

1. [***Node.js Official Website***](https://nodejs.org/download/release/v20.11.1/)&#x20;
2. Using NVM [***https://github.com/nvm-sh/nvm?tab=readme-ov-file#installing-and-updating***](https://github.com/nvm-sh/nvm?tab=readme-ov-file#installing-and-updating)

### 1.2 Vue CLI install

After the completion of node configuration you need to install the Vue cli using the following Command. Also you can refer to the [official site](https://cli.vuejs.org/guide/installation.html).

```bash
npm install -g @vue/cli
# OR
yarn global add @vue/cli
```

After installation, you will have access to the `vue` binary in your command line. You can verify that it is properly installed by simply running `vue`, which should present you with a help message listing all available commands.

You can check you have the right version with this command:

```
vue --version
```


# 2. Generate License Key

### 2.1 Generate License Key

1. Go to [***https://console.alianhub.com***](https://console.alianhub.com) to register an account, and then log in after verifying your email address.
2. After logging in, click on the ‘**Create New Licenses**’ button.

<figure><img src="/files/CWcoZn0N9mDBJ3AWkGin" alt=""><figcaption></figcaption></figure>

3. Enter your CodeCanyon purchase code and your domain URL in the protection URL tab and click on the ‘**Generate Key**’ button.

<figure><img src="/files/zKfW5a6b1Ca6Q84lkDMn" alt=""><figcaption></figcaption></figure>

4. After successful key generation, you need to copy this and use it in the domain verification field.

<figure><img src="/files/nym4eeF794ianwMb9rbQ" alt=""><figcaption></figcaption></figure>

5. After that, you need to visit its detail page where you can download the base <mark style="color:red;">env file</mark>. The file will be named '<mark style="color:red;">**procution.env**</mark>'.

<figure><img src="/files/mUiuAOQruvVp3B3Wy1Tp" alt=""><figcaption></figcaption></figure>

6. Now take that file and place it in your project directory and then rename it to '<mark style="color:red;">.env</mark>'.

<figure><img src="/files/xroj0f731WZHoa0W9CJM" alt=""><figcaption></figcaption></figure>


# 3. Server Startup

### 3.1 Start Server and Installation

Go back to your command prompt after completing Step 2.1. Now, use the command:

<mark style="color:red;">**npm run basic-install**</mark>

NOTE: if this step thows issue related to the BUILD failure, then you can follow this steps in your terminal

```
// Considering working directory as projects root directory
> cd installation
> npm run build

// On successful build completion, change directory to root
> cd ..

// Run the server using any of the below commands
> npm run start 
// OR
> node server.js
```

This command will generate <mark style="color:red;">env</mark> files and a build for installation.

When the command is done, it will display the output on your command prompt as shown on the screen below.&#x20;

<figure><img src="/files/7YSCRC193Gt7rWJ1pwIJ" alt=""><figcaption></figcaption></figure>

Thereafter, navigate to <mark style="color:blue;">**YOUR\_DOMAIN\_URL**</mark>  in your browser.

After that, begin the Step 4.1.


# 4. Installation Guide

Please make sure to follow through the installation guide properly without skipping any step.


# 4.1 Domain Verification

Use the License generated in Step 4th of 2.1 from the [***https://console.alianhub.com***](https://console.alianhub.com). You can find the key on its detail page.

<figure><img src="/files/xKc8NmAdh4lSzfaatjxR" alt=""><figcaption></figcaption></figure>


# 4.2 MongoDB Verification

MongoDB is the database used in our project. It is a modern and flexible database system that stores data in a format similar to JSON documents.

> **NOTE**: You can use your own hosted MongoDB as well. You just need to setup the MongoDB in the environment of your liking, confirm the MongoDB connection, and then add the connection URL in the form field.<br>
>
> Example Connection URL:
>
> > mongodb+srv://\<username>:\<password>@YOUR\_HOST\_NAME
>
> Here are the some preferred places where you can purchase and setup the MongoDB.
>
> * [AWS](https://aws.amazon.com/partners/mongodb/)
>
> * [Digital Ocean](https://www.digitalocean.com/products/managed-databases-mongodb)
>
> * [GCP (Google Cloud Platform)](https://cloud.google.com/mongodb)
>
> * [MongoDB Atlas](https://www.mongodb.com/atlas)
>
> You can use any other services to setup MongoDB as well.

<figure><img src="/files/KbXXjbeQBgiYm63VGCMi" alt=""><figcaption></figcaption></figure>

The reason for using MongoDB in our project is its flexibility and scalability. It enables us to store and retrieve data in a manner that aligns with our project's needs. MongoDB's document-oriented structure simplifies working with varying data formats and eliminates the necessity for a fixed schema.

### 4.2.1 MongoDB Keys: Account Creation and Cluster Setup

Create a MongoDB account or Log in to MongoDB. Below are the given links for Sign up and Log In.

Signup:[ ](https://account.mongodb.com/account/register?signedOut=true)[***https://www.mongodb.com/cloud/atlas/register***](https://www.mongodb.com/cloud/atlas/register)

Login:[ ](https://account.mongodb.com/account/login?nds=true)[***https://account.mongodb.com/account/login***](https://account.mongodb.com/account/login)

1. After logging in for the first time, kindly complete the Initial setup by adding details like ‘**Not Sure**’ as shown in the image below.<br>

   <figure><img src="/files/vJEaeOJiblu327AK0ndv" alt=""><figcaption></figcaption></figure>
2. Now, create a new cluster by clicking on **Build a Cluster**.<br>

   <figure><img src="/files/CHodG6IQtNox4YlPgw0E" alt=""><figcaption></figcaption></figure>
3. Select any cluster as per your preference, and Change the cluster name to your liking.<br>

   <figure><img src="/files/VmOhVbVOTARQIs4l28GE" alt=""><figcaption></figcaption></figure>
4. Add your IP address or select "**Allow Access from Anywhere and continue to the next step"**.<br>

   <figure><img src="/files/kpioyZ7KblLAF3Nckr2Q" alt=""><figcaption></figcaption></figure>
5. After adding an IP address or selecting "Allow Access from Anywhere and continue to the next step," click on Add IP Address. Then, add the username and password to create the database user for accessing the database through the connection string.\
   \
   NOTE: Keep the user credentials with you or save them somewhere, as they will be needed in the connection string.<br>

   <figure><img src="/files/IdfYfKPcf6vPAkOlntG0" alt=""><figcaption></figcaption></figure>
6. After successfully adding the IP and DB user, choose Compass as the connection tool to obtain the connection URL.<br>

   <figure><img src="/files/zFehQy2kGnmztM0bqWVj" alt=""><figcaption></figcaption></figure>
7. Now, copy the connection string and replace **\<db\_password>** with the password of your DB user. Now you can use this connection string to connect through compass, also add it in the form field for MongoDB connection string.<br>

   <figure><img src="/files/RGtoNbqozescujZIZ6NY" alt=""><figcaption></figcaption></figure>


# 4.4 Wasabi Configuration

<figure><img src="/files/cgp7kO2Rg5ZMxn7djhGM" alt=""><figcaption></figcaption></figure>

Wasabi is a cloud storage platform where all storage-related documents and data are stored for our app.

First, you need to[ ](https://billing-service.wasabisys.com/CommunitiesSelfReg?pid=WOS)create an account. Below is the link to create an account on Wasabi to obtain an access key and secret key pair: [***https://billing-service.wasabisys.com/CommunitiesSelfReg?pid=WOS***](https://billing-service.wasabisys.com/CommunitiesSelfReg?pid=WOS)

Wasabi provides a 30-day free trial. Kindly upgrade your plan for uninterrupted use after creating an account. If you already have a Wasabi account, here is the link to log in: [***https://console.wasabisys.com/login***](https://console.wasabisys.com/login)&#x20;

After logging in for Keys, you can follow the below steps.

1. Go to your Wasabi Console, select ‘**Access Keys**’ from the left menu, and click on '**Create New Access Key'** to generate a new access and secret key pair.\ <br>

   <figure><img src="/files/fPRTVUnI9F80NVqefcNw" alt=""><figcaption></figcaption></figure>
2. Select ‘**Root User**’ and click on the ‘**Create**’ button to generate the ‘**Access Key**’.\ <br>

   <figure><img src="/files/a3l9L8YZQfd7pGx0Dc0v" alt=""><figcaption></figcaption></figure>
3. Thereafter, download the CSV file and store it safely for future reference. Now, you can add the access key and secret access key to your environment file, which is obtained from the below method or from the CSV file you downloaded and add in <mark style="color:red;">**WASABI\_SECRET\_ACCESS\_KEY, WASABI\_ACCESS\_KEY**</mark> in the form field.\ <br>

   <figure><img src="/files/urOxS4wyDRT0IOxvLpTT" alt=""><figcaption></figcaption></figure>
4. Click on settings and copy the account ID as shown in the image below. Add this account ID in <mark style="color:red;">**WASABI\_USERID**</mark> in the form field.\ <br>

   <figure><img src="/files/Mr0hGSw5vM9vOQv44k1J" alt=""><figcaption></figcaption></figure>


# 4.5 Firebase Configuration

<figure><img src="/files/2g3xCpEwnIZSkz9V2bRT" alt=""><figcaption></figcaption></figure>

### 4.5.1 Create Firebase Project

1. First, you need to go to Firebase consoles [***https://firebase.google.com/***](https://firebase.google.com/) as shown in the image below.

<figure><img src="/files/S8HpqeQxgVFeGcEwUzNW" alt=""><figcaption></figcaption></figure>

2. Thereafter, click on ‘**Add Project**’ to create a new project.

<figure><img src="/files/SICYJXEkGT9cRvjDCYdq" alt=""><figcaption></figcaption></figure>

3. Enter the name of your project and click on continue.

<figure><img src="/files/IPdpAvzW3cMyMwrD7XXZ" alt=""><figcaption></figcaption></figure>

4. In this step, if you have enabled Google Analytics, then select an account for Google Analytics by clicking on ‘**Continue**’ and following that, click on the ‘**Create Project**’ button. If Google Analytics is disabled, then directly click on ‘**Create Project**’. It is not necessary to enable Google Analytics for our product.

<figure><img src="/files/Te9yBpiWUW7TRSYUJuf0" alt=""><figcaption></figcaption></figure>

### 4.5.2 Setup Firebase & Admin SDK

1. After creating the project, click on ‘**Project Settings**’ as shown in the image below.

<figure><img src="/files/uT8W7I6OXjZPbePlnzN8" alt=""><figcaption></figcaption></figure>

2. Click on ‘**\</>**’ ‘**Web app create**’ button as shown in the image below.

<figure><img src="/files/iMi5lefR0Qktc6swSOQj" alt=""><figcaption></figcaption></figure>

3. Enter the name of your Web App as shown in the image below and click on the ‘**Register app**’ button.

<figure><img src="/files/QhbKuyTnSZ7oNFQNZ3u3" alt=""><figcaption></figcaption></figure>

4. Now, you need to Get Firebase credentials. Add these credentials in the form field as shown in the example below.\
   \ <mark style="color:red;">**APIKEY = "apiKey\_get\_from\_firebaseConfig"**</mark>

   <mark style="color:red;">**AUTODOMAIN = "authdonain\_get\_from\_firebaseConfig"**</mark>

   <mark style="color:red;">**PROJECTID = "projectId\_get\_from\_firebaseConfig"**</mark>

   <mark style="color:red;">**STORAGEBUCKET ="storageBucket\_get\_from\_firebaseConfig"**</mark>

   <mark style="color:red;">**MESSAGINGSENDERID ="messagingSenderId\_get\_from\_firebaseConfig"**</mark>

   <mark style="color:red;">**APPID = "appId\_get\_from\_firebaseConfig"**</mark>

   <mark style="color:red;">**MEASUREMENTID = 'add\_if\_get\_from\_firebaseConfig'**</mark>

   <mark style="color:red;">**otherwise\_add=""(empty string)**</mark><br>
5. Now, click on the ‘**Continue to Console**’ button.<br>

   <figure><img src="/files/cOEW7zFuxGAJ9OL7Gw86" alt=""><figcaption></figcaption></figure>
6. Thereafter, click on service accounts as shown in the image below.

<figure><img src="/files/z0wcFpolNFt6Bl5k1EyS" alt=""><figcaption></figcaption></figure>

7. Click on the ‘**Generate New Private Key**’ button. It downloads one JSON file. Now copy that JSON file and paste it into <mark style="color:red;">**firebase-adminsdk.json**</mark> file which is in the root folder of your code.

<figure><img src="/files/J5zrKfQxS4ztxq0Wzss6" alt=""><figcaption></figcaption></figure>

### 4.5.3 Setup FCM SERVER KEY

1. In Project Settings, go to the ‘**Cloud Messaging**’ tab. Now, click on the 3 dots in the ‘**Cloud Messaging API**’ section and click on the ‘**Manage API in Google Cloud Console**’ option.

<figure><img src="/files/ddg6tkEauud7m9XbVYDC" alt=""><figcaption></figcaption></figure>

2. Enable ‘**Cloud Messaging**’ as shown in the image below.

<figure><img src="/files/3M24LGjnyXbB7OcQp3Ch" alt=""><figcaption></figcaption></figure>

3. Thereafter, search for the `Firebase Cloud Messaging Data API`, and enable it.

<figure><img src="/files/UksSCyvlEBYvItP6Mjxs" alt=""><figcaption></figcaption></figure>


# 4.6 AI Configuration

<figure><img src="/files/1w5ZomU9zsfVZd8Fhuj0" alt=""><figcaption></figcaption></figure>

### AI Operations Powered by OpenAI

We utilize OpenAI to enhance the AI capabilities within our web application. This integration ensures advanced, reliable, and efficient AI-driven features for a superior user experience.

### Steps to Generate an API Token for OpenAI

#### Step 1: Sign Up or Log In to OpenAI

1. **Visit OpenAI's Website:**
   * Open your web browser and navigate to [OpenAI's website](https://platform.openai.com/login?launch).
2. **Sign Up or Log In:**

   * If you do not have an account, click on the "Sign Up" button and follow the prompts to create a new account.
   * If you already have an account, click on the "Log In" button and enter your credentials to access your account.

   <figure><img src="/files/qo5AmloWGcIw28bCcBQg" alt=""><figcaption></figcaption></figure>

#### Step 2: Access the API Dashboard

1. **Navigate to the API Section:**
   * Once logged in, go to the Dashboard section of the website. You can usually find this in the main menu.
2. **API Dashboard:**
   * Click on the link or menu item that takes you to the API dashboard. This is where you manage your API keys and settings.

<figure><img src="/files/BLoE35IN8NWv9qnVjR2s" alt=""><figcaption></figcaption></figure>

#### Step 3: Generate a New API Token

1. **Create New API Key:**

   * In the API dashboard, look for a button or link that says "Create New Secret Key". Click on it to start the process.

   <figure><img src="/files/hqYy7ls9Sz27VOqxCV1N" alt=""><figcaption></figcaption></figure>
2. **Specify Key Details:**
   * You may be prompted to provide a name or label for the new API key. This helps you identify the key later, especially if you have multiple keys.
3. **Create Secret Key:**

   * Click on the "Create Secret Key" button to create the new API key.

   <figure><img src="/files/r50P3sGRsqcavkGLqeso" alt=""><figcaption></figcaption></figure>

#### Step 4: Copy and Store the API Token

1. **Copy the Token:**
   * Once the key is generated, it will be displayed on the screen. Copy this key immediately. Some platforms do not show the key again for security reasons.
   * Paste the copied key in the form field in the installation step and choose your preferred AI model.

By following these steps, you can successfully generate a token for OpenAI.

### Add/Update API key later on

**Note:** if you have an **Extended License** then you will get the option to update the API key and gpt models from the admin panel as shown in the below image:

<figure><img src="/files/yIMLJctGlxMX6mC6QtX5" alt=""><figcaption></figcaption></figure>

and if you have any other licenses then you can upate the API key and gpt models using the **.env** file present in the root directory of the project.

<figure><img src="/files/Lfcwg09sdVCgmsCV2nit" alt=""><figcaption></figcaption></figure>

For the API key update the `AI_API_KEY` and for the models, you can change `AI_MODEL` as shown in the below image.

<figure><img src="/files/NPpqCPsMk64jF6iDCzog" alt=""><figcaption></figcaption></figure>

**NOTE:** Please restart the server after the updates and be cautious when updating the **.env** files.


# 4.7 Payment Configuration

We allow support of 2 types of payment gateways from which you can integrate any one payment gateway.&#x20;

* [***Chargebee***](https://docs.google.com/document/d/1tYPjmUiPx4cPuvXNL_gWyks2Kr5KvR51vR-5pbBEnbw/edit#heading=h.ybo9m0pxlxcy)
* [***Paddle***](https://docs.google.com/document/d/1tYPjmUiPx4cPuvXNL_gWyks2Kr5KvR51vR-5pbBEnbw/edit#heading=h.e108n26xcuk1)

On submitting the payment gateway you will be asked for a confirmation.

The documentation contains the configuration details of both the payment gateway. So you may look it up as per your requirement.

Note: You will not be able to change the payment gateway afterward once you have confirmed the payment gateway and installed the App. Else, it will require a complete reset and re-installation of the App.

<figure><img src="/files/YOwrXCvkam0jDUs3lL84" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/fQKUdkPMbuYbHRp1CbxL" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/GBAvlGOqh0p8Lxg5oMPu" alt=""><figcaption></figcaption></figure>


# 4.7.1 Chargebee Configuration

**NOTE:** These steps are only for the SAAS Extended versions

<figure><img src="/files/9rwNJNNrXMFmRAZr9giC" alt=""><figcaption></figcaption></figure>

1. Go to [***https://www.chargebee.com/trial-signup/***](https://www.chargebee.com/trial-signup/) and create a new account in Chargebee and verify your email address.
2. After that, you can add your domain name in the <mark style="color:red;">**CHARGEBEE\_SITE**</mark> in the form field

<figure><img src="/files/bzBlSnQDR0kMogYd0rzv" alt=""><figcaption></figcaption></figure>

3. Then click on settings - configure Chargebee - then click on API-Keys as shown in the below image.

<figure><img src="/files/1GtX2h2LxPKePmJFcLfj" alt=""><figcaption></figcaption></figure>

4. Then in the form field add <mark style="color:red;">**CHARGEBEE\_API\_KEY**</mark> and <mark style="color:red;">**CHARGEBEE\_PUBLISH\_KEY**</mark> as shown in the image below.

<figure><img src="/files/GcvkRBmtC6Cl0F7nKQsR" alt=""><figcaption></figcaption></figure>

### 4.7.1.1 Set Webhooks

1. After setting the API key,  click on Webhooks and create the Webhook button in the configure Chargebee tab as shown in the image below.

<figure><img src="/files/EKrS5RElbDd3JUvkZtgF" alt=""><figcaption></figcaption></figure>

2. In open dialog box add the Webhook name anything. Then in the Webhook URL add like '<mark style="color:red;">**{{your\_domain}}/api/v2/webhook2'**</mark>. In Event Send Select All Events and then click on create to create a Webhook.

<figure><img src="/files/RoNQaiOaO2427mAx01e2" alt=""><figcaption></figcaption></figure>

### 4.7.1.2 Set Currency

1. Click on settings - configure Chargebee - currencies as shown in the below image.

<figure><img src="/files/fP8RRPx1xlEsHP1oed9o" alt=""><figcaption></figcaption></figure>

2. Click on Add Currencies button

<figure><img src="/files/vIdmKwBV8Eh6fbWmD1tU" alt=""><figcaption></figcaption></figure>

3. After that select '**USD**' in currency and then click '**I’ll let Chargebee set it for me**' option and then click on **Add Currency** button.

<figure><img src="/files/7eB2cCh5PoGiODaPSRE7" alt=""><figcaption></figcaption></figure>

### 4.7.1.3 Set Payment Gateway

1. For set Payment GateWay Click on setting - Payment Gateways as shown in below image. Then Set your payment gateway as per your requirement. You can refer this doc for set payment gateway [***https://www.chargebee.com/docs/2.0/gateway\_settings.html***](https://www.chargebee.com/docs/2.0/gateway_settings.html)

<figure><img src="/files/btIJ3wBC7yvnqTJOPrFs" alt=""><figcaption></figcaption></figure>

### 4.7.1.4 Set Custom Field

1. For set custom field click on setting - configure Chargebee - Custom fields as shown in the image below.

<figure><img src="/files/Nuo32VXaUjZCbvXxqbr4" alt=""><figcaption></figcaption></figure>

2. Then click on customer and single-line text as shown in below image

<figure><img src="/files/TPXxs2eJ6YBVY6G6h8dn" alt=""><figcaption></figcaption></figure>

3. Then add '**Alianhub email**' and click on the create & save button as shown in the image.

<figure><img src="/files/QkaKdXxC13DcdyHEaiIn" alt=""><figcaption></figcaption></figure>

4. Refer to the provided table for what should be the value to be added in the custom fields.

| Field Label         | API Name                |
| ------------------- | ----------------------- |
| domain link         | cf\_domain\_link        |
| customer\_Mongo\_id | cf\_customer\_Mongo\_id |
| Alianhub email      | cf\_alianhub\_email     |
| Company id          | cf\_company\_id         |
| GSTIN               | cf\_gstin               |
| Selected Plan       | cf\_selected\_plan      |

5. Now follow the same steps and create an custom field for '**domain link'**, '**Company id**', '**GSTIN**', '**customer\_Mongo\_id**' after create all custom field it looks like below image.

<figure><img src="/files/zb97taUqyj55HILcGWZ6" alt=""><figcaption></figcaption></figure>

6. After that click Subscription Tab and click on single-line text as shown in below image

<div align="center"><figure><img src="/files/WOQvSCfJlslAe7BUoLeH" alt=""><figcaption></figcaption></figure></div>

7. Now add a custom field for '**Company id**' and **'Selected Plan**'. After create both custom field it looks like below image.

<figure><img src="/files/SILn7iSF0WCgvNXgAymP" alt=""><figcaption></figcaption></figure>


# 4.7.2 Paddle Configuration

<figure><img src="/files/ZzJ2rIw9ORj49fWudxC2" alt=""><figcaption></figcaption></figure>

### 4.7.2.1 Add Domain

1. Go to <https://login.paddle.com/signup> and create a new account in Paddle.
2. Now go to Checkout > Website Approval

Here you need to add your domain for which you have generated the license, as provided in the below image

Note: you don’t have to include https\://, www, or specific web pages.

<figure><img src="/files/kahUSjQ5vNpPrTNetdcd" alt=""><figcaption></figcaption></figure>

### 4.7.2.2 Add Payment Link

Here you need to add a default payment link. You can use the below provided url by replacing YOUR\_WEB\_DOMAIN with your own web\_domain\_url

Example: [***https://YOUR\_WEB\_DOMAIN/#/checkout***](https://your_web_domain/#/checkout)

<figure><img src="/files/oN3LOWjOsKtHJnjW1P6J" alt=""><figcaption></figcaption></figure>

### 4.7.2.3 Get Tokens

Now for the further API requests to be handled by paddle, you need to generate an API\_KEY and a Client-side Token.

#### 4.7.2.3.1 Get API Key

For the API key, you can directly get the API key as provided in the below image, as a default API key is already generated. And you can copy and set it in the Paddle API key form field.

<figure><img src="/files/bsCUWeeurNlHomwrUXQU" alt=""><figcaption></figcaption></figure>

#### 4.7.2.3.2 Generate Client-side Token

For the Client-side token, you need to generate a token manually as per below-provided steps

1. Navigate to the Developer tools > Authentication. Now, click on generate a token.

<figure><img src="/files/HWLHfFFQGtVUHOrRsBqy" alt=""><figcaption></figcaption></figure>

2. Enter the name and description of the token.

<figure><img src="/files/447Dr30uv9zfueC8RUef" alt=""><figcaption></figcaption></figure>

3. Copy the generated token

<figure><img src="/files/OkCkSQiMFAyduB4yIXmP" alt=""><figcaption></figcaption></figure>

### 4.7.2.4 Add Webhook

For registering a webhook follow the below-provided steps.

1. Navigate to the Notifications tab, and click on New Destination

<figure><img src="/files/yReVXOzeFr9G5gcRwAZh" alt=""><figcaption></figcaption></figure>

2. Select the events as shown in the image below.

<figure><img src="/files/Fw8TDKaCH858WYSeQnQ9" alt=""><figcaption></figcaption></figure>

### 4.7.2.5 Customize Checkout page

You can customize your checkout page from Checkout > checkout settings tab and then click on Inline tab.

Note: The inline checkout is used in the app. So, in order to customize the checkout you need to make changes here only.

<figure><img src="/files/fontbSbx8AEDH2gqGT7F" alt=""><figcaption></figcaption></figure>


# 4.8 SMTP Configuration (GMAIL)

This step involves a mail server or an email service provider that supports SMTP such as Gmail, Outlook, and SendGrid.

**Step 1: Configure SMTP Service**

Obtain the SMTP configuration details from your email service provider. You will need the SMTP host, port, and credentials (email and password) that you need to use for authentication and then add them in the form fields as shown below.

<figure><img src="/files/dnTlfn8qjjPvTkDbENSX" alt=""><figcaption></figcaption></figure>

**Step 2: Testing SMTP**

After submitting the SMTP configurations an OTP mail is sent to the TO\_EMAIL. Submit that OTP and on successful verification next step will begin, else you will be redirected to the previous step to change SMTP configurations.

<figure><img src="/files/b8rY9xQW67pFSWF5cnZ7" alt=""><figcaption></figcaption></figure>

If you do not understand about SMTP, we have provided more details below.

Please click on: [***https://www.cloudflare.com/en-gb/learning/email-security/what-is-smtp***\ <br>](https://www.cloudflare.com/en-gb/learning/email-security/what-is-smtp)We have also provided some SMTP setup documents below

* [***Gmail***](https://www.gmass.co/blog/gmail-smtp/)
* [***Outlook***](https://www.gmass.co/blog/outlook-smtp/)
* [***SendGrid***](https://www.gmass.co/blog/sendgrid-smtp-account-configuration/)

Here is the SMTP Testing tool so you can test

[***https://www.gmass.co/smtp-test***](https://www.gmass.co/smtp-test)

<br>


# 4.9 Database Initialization

1. After completion of the above steps the database initialization will start and after that the Admin user creation process will start.

<figure><img src="/files/BBZTnDskaMW8zgbHMen6" alt=""><figcaption></figcaption></figure>


# 4.10 Final Step

If you have SAAS version, then this will be your final step to Create a User

Add the appropriate details for the Admin user, and you will be using these credentials to login the Super Admin Panel.

<figure><img src="/files/RM6xEAYMQJU3ZUTSRxBt" alt=""><figcaption></figcaption></figure>

Whereas, If you have purchased the product without SAAS then this will be your final step to create a company

<figure><img src="/files/e9XY0fqyThrrywFDi8qx" alt=""><figcaption></figcaption></figure>


# 4.11 Final Builds

After successful Admin user creation, the build of Frontend and Admin will start and it will be shown as below provided screenshots. On completion you are good to go!

<figure><img src="/files/9GdILqMEfRapCj019a8g" alt=""><figcaption></figcaption></figure>

If you have the Extended SAAS version then the below step will be executed, else you will be redirected to the Home page and the installation is completed.

<figure><img src="/files/fPkEtPRXNt2sIbEa4KN0" alt=""><figcaption></figcaption></figure>

**Note:** Restart the Node server after the process is completed.


# 5. Time Tracker Configuration

### 5.1 Time Tracker Setup

1. Please make sure you have setup Alianhub before you setup time tracker. You need to verify that Npm (v9.6.7) and Node (v18.17.0) are installed for the relevant version in your system.
2. Also, make sure that you install the correct version of Python before moving forward with Time Tracker. The required version of Python is v2.7.2. Download from [***Here***](https://www.python.org/downloads/release/python-272)***.***
3. If you are generating build from mac, you must have [Xcode](https://developer.apple.com/xcode/) installed.

**Kindly check if Node is pre-installed in your system. If not, then you need to install it before running Step 1.**

**Reference to Node Installation:**&#x20;

1. [***Node.js Official Website***](https://nodejs.org/download/release/v20.11.1/)&#x20;
2. Using NVM [***https://github.com/nvm-sh/nvm?tab=readme-ov-file#installing-and-updating***](https://github.com/nvm-sh/nvm?tab=readme-ov-file#installing-and-updating)
3. After checking the node version you need to create a <mark style="color:red;">**.env**</mark> file. For creating a <mark style="color:red;">**.env**</mark> file go to the Renderer folder in your project. As shown in the image below.
4. Then in the renderer folder create file name <mark style="color:red;">**.env**</mark>.\ <br>

   <figure><img src="/files/CHvrM55ECXfXGXixnWC9" alt=""><figcaption></figcaption></figure>

   <figure><img src="/files/jd6aw0MtOnMttM0q8zr1" alt=""><figcaption></figcaption></figure>

**Note:** It is necessary to add '.'  (dot in prefix in name of env variable). Make sure you add it.&#x20;

5. In that <mark style="color:red;">**.env**</mark> file add the variables as shown below.\
   \ <mark style="color:red;">**APIURL=**</mark>

   <mark style="color:red;">**APP\_MONGO\_APP\_ID=**</mark>

   <mark style="color:red;">**APP\_MONGO\_CONNECTION\_URI=**</mark>\
   \
   You need to insert the **APIURL**, which corresponds to the APIURL listed in your Alian hub environment file. For the values of <mark style="color:red;">**APP\_MONGO\_APP\_ID**</mark> and <mark style="color:red;">**APP\_MONGO\_CONNECTION\_URI**</mark>, use the same values as <mark style="color:red;">**MONGO\_APP\_ID**</mark> and <mark style="color:red;">**MONGODB\_URL**</mark> from your Alian hub environment file, respectively.<br>
6. After setup of your .env file you need to generate a build for time tracker.\
   \
   First you have to install all the packages with the following command:

   Command: '**npm install' or** '**npm install --legacy-peer-deps'**

   Then to generate a build, in your root folder hit the following command according to your OS.

   Windows : '**npm run build'**

   iOS: '**npm run build:ios**'

   Linux: '**npm run build**'<br>
7. After generating the build redirect to the dist folder. As shown in the image below.

<figure><img src="/files/6VEJhZ5zQ3wdSODxdgmJ" alt=""><figcaption></figcaption></figure>

8. At dist folder application is generated and ready to install.

<figure><img src="/files/t3D84SpziHptds1mZaZd" alt=""><figcaption></figcaption></figure>


# Introduction to Alian hub

Welcome to User Guide of all-in-one project management system - Alian Hub. You will find detailed instructions, steps and helpful hints for your queries here.&#x20;

From getting started by creating your first project to ensuring that your team has access to all of the resources they need, checking the status of the project and successfully completing the tasks. This user guide will lead you across anything you need to learn and understand. You can view the details of every query through the sections of this user guide. \
\
Let's get started.


# Create An Account

To begin using Alian Hub, you first need to create an account.

<figure><img src="/files/LYDNgj3ZVlqeBDLTRyrD" alt=""><figcaption></figcaption></figure>

1. To make a new account, click on the link that says "Create an account," as shown in the picture.
2. Fill the details - First Name, Last Name, Email Id, and password.
3. Check the terms and conditions box and click on "Register".

Your account will be registered.

### Login

Visit the Alian Hub page and input your email address as well as your password. &#x20;

<figure><img src="/files/qCZd3mVvKGjrIygvXyx2" alt="Alian Hub - Login page"><figcaption></figcaption></figure>

In the case that you cannot remember the password:

1. Go to the login screen and choose the "Forgot password" option
2. Enter your email address
3. Follow the reset instructions&#x20;
4. Login to the account with a new password


# User Dashboard

You can get your quick work summary with this unique featured Dashboard. In addition, use Calendar to quickly view your current and upcoming tasks by date.

<figure><img src="/files/6m5bVjjsuAL18mBoDmDJ" alt=""><figcaption></figcaption></figure>

**Queue List:** It is the easiest way to line up the tasks of the day. You can add the tasks by clicking on the 'Add to Queue' button.

**Trending:** All the tasks assigned to the user to work on a current date are visible in the trending section.&#x20;

**My Work:** This section shows 'To Do' and 'Done' tasks. Instead of navigating through projects to see the work schedule, you can add and view tasks from the dashboard. Tasks are listed under the categories like Today, Overdue, Next and Unscheduled.

**Calendar:** Scheduled activities on a given day are shown on the calendar. The details of a task may be viewed by clicking on it.


# Create a New Project

Follow these steps to get started on a new project:

* On the menu bar of the dashboard, click on Projects.

<figure><img src="/files/unPHbEDJ2ulJfnpmWcC3" alt="new project"><figcaption></figcaption></figure>

* Now simply choose the New Project option.

<figure><img src="/files/9EGk1CyAGMzAm2Jv5Tir" alt="new project name "><figcaption></figcaption></figure>

* Input the name of the project and the key. ( You can only personalize the key while creating the project. After that, it is not possible to change it.)
* Pick one of the categories. Fixed or hourly pay or in-house.
* Choose the due date of the project
* Choose the member that will lead the project.
* After you have assigned the Lead, click the next button.

1. **Project Name:** It is the name of the project. Any tasks related to that project will come under it.&#x20;
2. **Key:** The key of the project is automatically assigned in reference to project name when you create a project. But, you can customize it. All project keys are unique. The key will help you in finding the project when required.
3. **Category:** The category shows the type of working on the project. It has 3 types. Working hourly(hourly price), working fixed(fixed price) or in-house.&#x20;
4. **Due Date:** It is the scheduled date till which the project is required to be completed and delivered.
5. **Lead:** You can assign the member of the company who will lead the project like a project manager. You can assign more than 1 lead to a single project.

#### You can customize the look of the project:

* Choose the project color. Click on Refresh button to select other color.
* You can also personalize it by uploading a picture. Click on "Upload" and choose the file and click next.

<figure><img src="/files/oWrojcoWJzzlgFczmuWA" alt="project customize"><figcaption></figcaption></figure>

* To discuss the project with the other member of the workplace, select Workspace option.&#x20;

<figure><img src="/files/Y7bzrkMhNgFKL9O85nZj" alt=""><figcaption></figcaption></figure>

* You also have the choice to make the project private by clicking on the Private option. By default, a private Space is only accessible to the person who made it private. Yet, you can share your private project with other members by adding them in the 'Only share with' list.

<figure><img src="/files/45DOHZfdqqF2n2LZ6MDt" alt=""><figcaption></figcaption></figure>

### Add the types of task you need

This section helps in customizing the name of Task's type in the project. For example a designing project's tasks can be research, design, bug and redesign. It totally depends on your workflow.

* The templates listed on the left side are the default templates provided by us. In case, you don't want to customize; select any template to go forward.&#x20;
* To customize the template, click on "New Template". Write name of the template and press enter. Click on the save template. For next project, you can use this saved template.
* Add the task type by clicking on "Task Type". You can rename the task type by double clicking on it. You can also rename it by clicking on the three dots on the right. Add as many as tasks type required for the project.&#x20;

<figure><img src="/files/viyPQBlYlOKsyAaptyOH" alt=""><figcaption></figcaption></figure>

* You can add image of the task type by clicking on the image provided on the left of the task type. Lastly, click on the next button.[<br>](https://beta.alianhub.com/project#)

### Add the statuses for the project

This section helps in creating the status of the project.&#x20;

* The active status will help in knowing the phase of the project. For example 'To start' or 'Open' if the project is to be started or going on. You can add done status like 'Completed' or 'delivered' if the work is done. The close status can be like 'Closed'. You can also add 'Reopen' Status.

<figure><img src="/files/DYeXbV9OXOJQtdt9wUMY" alt=""><figcaption></figcaption></figure>

* You can move the status to the type of status by drag and drop. Save the template and Click on the next button.
* Add the status by clicking on "Add Status". You can rename to the status by double clicking on it. You can also rename & add color by clicking on the three dots on the right.

### Set up the statuses for tasks

This section helps in creating the status of the tasks for the project.&#x20;

* The active status will help in knowing the stage of the work in the task. For example task 'To Do' or 'In Progress'. You can also add done status like 'In Review' or 'Done', if the work is done. If the task has no errors and is finally completed then you have close status for that. The close status can be like 'completed'.

<figure><img src="/files/2Xrk0jHMniO6fEbsMRgZ" alt=""><figcaption></figcaption></figure>

* Add the status by clicking on "Add Status". You can rename the status by double clicking on it. You can also rename & add color by clicking on the three dots on the right.
* You can move the status to the type of status by drag and drop. After customizing, save the template and Click on the next button.

#### Enable AlianApps:

Enabling AlianApps will help you in managing projects efficiently. Choose the features of Alian apps while creating the project.&#x20;

<figure><img src="/files/8ce4pnnzQx9YD3cObfbn" alt=""><figcaption></figcaption></figure>

* Select “Priority” to set the task’s priority.
* Choose “Time Estimate” to estimate the time of work to be done by users in the project.
* “Milestones” will help in delivering the project on time and measure the progress to reach the ultimate goal respectively. You can also turn off the Alian apps.

### Required views

Within Alian Hub, when browsing Projects, Folders, and Lists, you have the ability to define which view(s) are automatically produced and needed. This eliminates the need to manually create these views.

<figure><img src="/files/QG7BJgk9FJiB9oANTXzM" alt=""><figcaption></figcaption></figure>

The “List view” is the default view. You can choose additional views as per your requirement like “Board”, “Project Details”, “Comments”, “Calendar”, “Activity”, “Workload”, “Table” and  “Embed”. Click on next and you will see a page for your selection.&#x20;

<figure><img src="/files/UGZkJxH0nNCNK1kTOq11" alt=""><figcaption></figcaption></figure>

If you want to do any corrections, click on previous and change it. If everything is perfect then click on Submit. The project will be created successfully.

<br>


# Project Dashboard

Click on ‘Projects’ displayed on the menu bar of the homepage.&#x20;

The List of projects that have been created is shown on the left of the project page. Create a new project by clicking on the 'New Project' button.&#x20;

<figure><img src="/files/tTEvL7pPnOiadJmtaI9L" alt=""><figcaption></figcaption></figure>

Simply by clicking on the project you're interested in, you can see that particular project view on the right side.&#x20;

### Note:

* [ ] To rename any task or subtask, simply click on the ![](https://lh4.googleusercontent.com/ALLdtlDhvNNShM6An-S63ANWhjNWSRqoo6_EmUACZg39Pg5RTg1txbGQWMQgMHgqk8L9GmosWlpz8DzWevDQruntFgqWkp4gnnFFLACErjLAx3tbvXvwuGaJLhMlGiFabMgEGBCMcKqej7Gj6S81EnYsIFvCdsk40H3QJ2d8AqAswKGJcvjOoCqkFkTNtw) button and rename it.
* [ ] To rename the project name, click on the project > go to the project dashboard > click on the name. A text box will be seen. Edit the name over it.
* [ ] Similarly, you can change priority, due date, assignee, and task status by clicking on their respective icons. Once you click on it, the popup will appear for you to make changes to it.
* [ ] You cannot change the icons after the task is created.

###


# Create a New Folder

Folder helps in managing sprints with respect to categories. You can create multiple Folders in a Project and create multiple sprints in the respective folders. To create a new Folder in a project,

* Click on ![](/files/2xeYRrNHAcFlPeG8jrhW) right of the project name.&#x20;
* Select the ‘Folder’ to create.
* Add the name of the Folder and press enter or click on the tick mark.&#x20;
* The Folder will be created. Now, in there you can create multiple sprints.


# Create a New Sprint

To add a new sprint to the ongoing project, create it in that specific project by following the steps given below.

<figure><img src="/files/4h5XREZ2qKtClf75poYo" alt=""><figcaption></figcaption></figure>

1. Click on ![](/files/2xeYRrNHAcFlPeG8jrhW) right of the project name.&#x20;
2. Select the ‘List’ to create. List will be a single sprint.&#x20;
3. Add the name of the sprint and press enter or click on the tick mark.&#x20;
4. You can make it starred if the sprint is important.

The sprint will be created and you can view the panel of the sprint.


# Add a New Task

To add a new task to Sprint or Folder;

Click on the sprint or folder you want to work with and then on the right section of that sprint view, click the button that says "New Task."

<figure><img src="/files/vTLst6DgM0w43fm050kI" alt=""><figcaption></figcaption></figure>

1. In the text box, type the name of the task and choose the task type by clicking on the icon. (You cannot change the icon after creating the task)
2. Add the Assignee by clicking on the ![](https://lh3.googleusercontent.com/7K53_hx49Ymer12WUUjLPXE8ptSPrwjwrkvrvy_FNRMtwKpCeTzAnu3rpqLehsY-mb9EThNjtm9VNCJphvqUPBy9Iek6ap5FlapdGukE9jGKZR5JAn7R4C2fxYVPUwVebJ8aPvTDSL71bEbg8TVJsdnGUxsEU48J8INGP3VdnGjsDxe77tN6Yus5B7ZGew) icon given on the right of the text box.
3. Add the due date of the task by clicking on the  ![](https://lh5.googleusercontent.com/_obV-dMkKHxQUxB6G2spCzN8XaMkY5QFVihVK5Qgqi6ESfb2Mm5KnyZjxDvdzWx8-PwQqXUXl7Vurv-pJsUg4KK7Pt68ZoZ4YmAbOXUGjcdnw1CSpqW3S3YhaHK75mM4qUpHFXyBbWx9wSWvIg-dZkZPT-KBe6fFCXoMnomZfK2SnR31uU6uBkj4JGAvhA) icon given next to the assignee icon.
4. Select the priority of the project by clicking on the ![](https://lh6.googleusercontent.com/fcK8En3vYVLOUaJvmak6Ec_028QEouVW2VE2AFe1v9VkKeydamZgrB9aIUHcr0s8l4z_fJ1o0lN3gl94KSiBJck9O2ECfdEQzdszP8dUymqp9I6cRwgkGcfMznEB88X5mKV9BW8Xkc_H4MxeChDrm_Qay04G51Vjj6sLuD_VM2agr939l3o08Ur9QHe4GA)  icon next to the calendar icon.
5. At last, save the task
6. You can make it ‘![](https://lh4.googleusercontent.com/XJdQislIO9LjZUNU_nE_2DS7Ky8efClLPtii3IF0cIfdmQ-mAIO7qEG69IyHyZz4u2aaxE_2FaFuPhrxJVZrN7A1iC38iFPmEttjtfP0dvOKu1_AFx1EoYMUzZvLqa52cEbRZr-ym9DgwG37xob2pHyasiGBb8w9zEJ-TZmF8LyiA_klCNQTxXFbjR3_CQ)’(starred) if the task is important.


# Add a Sub-Task

In case, you have more tasks in your existing task, you can create a sub-task.

1.

```
<figure><img src="/files/1cXqJNWTa2CdZxiRt9jX" alt=""><figcaption></figcaption></figure>
```

2. Click on the ![](https://lh5.googleusercontent.com/xei8uyBTjbHHhLKx8DszNMlb6PyPO5hVb_Xcr45LUJ5cBHThLdEpwdqHnqYyV4coVSmYBfnHYzx-Zu03qmBx_1vlVafPdoRDla31vWBR89jAWpI1oOt5oquhBEzJ3IN9pTj6NWWKsVKnhhESQvepN1KqipXF0tgZy4y504zfFVz-fySNxqq3161bc05vHw) sign button next to the task name.
3. Enter the sub-task name and choose the icon. (You cannot change the icon after creating the sub-task)
4. Add the assignee, priority, and due date by clicking on the icons given on the right of the text box.
5. Save the sub-task.
6. You can make it ‘![](https://lh4.googleusercontent.com/XJdQislIO9LjZUNU_nE_2DS7Ky8efClLPtii3IF0cIfdmQ-mAIO7qEG69IyHyZz4u2aaxE_2FaFuPhrxJVZrN7A1iC38iFPmEttjtfP0dvOKu1_AFx1EoYMUzZvLqa52cEbRZr-ym9DgwG37xob2pHyasiGBb8w9zEJ-TZmF8LyiA_klCNQTxXFbjR3_CQ)’(starred) if the sub-task is important.


# Add Time Log

You can add, edit and delete the worked hours of a particular task. To add worked hours in a task, click on that task or subtask.&#x20;

<figure><img src="/files/wKoYVYRbPOKE0xZ7gxF0" alt=""><figcaption></figcaption></figure>

* Go to Time Log and click on 'Add time' button.

<figure><img src="/files/BeiJjYZ3NV39RRDNAKcY" alt=""><figcaption></figcaption></figure>

* Select the date from the calendar of which you want to log the time. Add the start and end work time on the task. Write the description (You cannot save without adding description). And then click on Save.

<figure><img src="/files/0zRteNNLPKTfP4udgyxV" alt=""><figcaption></figcaption></figure>

To edit click on the ![](https://lh3.googleusercontent.com/xdZGn-neczI1W0AWp7B11-_Qzzhvqj2BZ-3V3OOfYbIlL2FjwgO2JtT45TGk8Olly8w1zDa2PbSfG0OTCqX4n91gxGjDLgs-hXSqERJa6DjjUw4ULRMBurYa_XlPNhyXrjlU-cVYdyF1N_mReKDc_geUSm4U57LUAHXg-sGp20tU_rVq2W9yobTQ8AHObg) button and make the necessary changes. To delete the time log, simply click on the ![](https://lh3.googleusercontent.com/aqnN1UH55RFjzIrDbbkqyJghjPWli8p1l5qCpoAIRlNaV1rGQTUJV39Wn34biHiWMiPcinmw-tKf-iD6FOMNrSbOQArN4TjD3H5BJ-k53QXau-l3hAmUhmceYX3NA47pDRWaSvmyxnEmAsO5t7AjXhFu9ahXed46_w1wELaE1BAIXySJvPXrTfnWE4Gltw) button.


# Add a Milestone

You can add a milestone to your project by following these steps.

1. Go to Project > Project Details > Milestone
2. Click on 'Add New' in the Milestone section.&#x20;
3. Add the milestone name, Start Date, Due Date, End Date and Amount.
4. Select the Status and add status date of the milestone and save it.

<figure><img src="/files/rTx0Dy4Mz6B2y8NfvMnX" alt=""><figcaption></figcaption></figure>

By adding the Status and the status date, you can view the total amount of the project milestone in the milestone report.


# Add Estimated Hours

You can add, edit or remove the estimated time required to work on a particular task. This feature helps in calculating performance and scheduling time for tasks. You can only add or edit the estimated time if you have read & write permission for it. Furthermore, you need to add start and end date of the task to add the estimated time.

To add or edit estimated time, follow these steps.&#x20;

* Go to the Task Detail Page.
* On the right section, click on '00h 00m'.
* Select the month and week of work.
* Add the estimated work time in HH and MM box with respect to the date.
* Click on Save.


# List View

The List view shows the tasks to be done in the project. The tasks can be viewed with the statuses  of the tasks lined vertically. For example, To Do, In Progress, Bug, In Review, Done, and closed.&#x20;

<figure><img src="/files/z5bBSgdsHy0jw3xRONbP" alt=""><figcaption></figcaption></figure>

### View Task in Detail

Click on the ‘![](https://lh6.googleusercontent.com/aLx-YExs7vYVRn6BKYmBBAKJUVpVlMg0vCrFc7KvyJdu2Im2BGxMY4SzlMPKYoZXpYIEoNkWJ1wHdExWiXsKZaROmoRkerfBVunSWzBh1r6eM0jDky_dTgPSDgvrzkxTdF1c_KK4EVyoKcKtjRV_V-SA1AdW_3essNY2xDUqDJYAvcCBJigLdY-XnEQwMA)’ icon or on the task to view that task in more detail.&#x20;

<figure><img src="/files/yhJMRCx7YKUYqXXQRb4y" alt=""><figcaption></figcaption></figure>

On the right side of the panel, you can see and edit Status, Assignee, Reporter, Priority, Due Date, Start Date, End Date, and Estimated Hours.&#x20;

<figure><img src="/files/0TJIiKbEaK5jWZUzoPOK" alt=""><figcaption></figcaption></figure>

On the left side you can see 4 columns. Task Detail, Comments, Activity Log and Time Log.&#x20;

**Task Detail -** This column shows the details of the task. It also shows sub-tasks, descriptions checklists, and attachments.

<figure><img src="/files/KYa9narO5tM4Bn9y5iUT" alt=""><figcaption></figcaption></figure>

**Comments -** A discussion area is available in the Comments panel of this section. This area lets the task lead, assignee, and other members of the project to discuss the task instantaneously. You can also click on ![](https://lh6.googleusercontent.com/e13MMQT6wj1XjfxRPpKy_QXUjuX7VZhNMIgxW7C2_ewB29v-kmaKxuOCYt_4mfsWUKHXX_fuNoe8Ok2SP-L3Zs60dNPDB-J9Pf4f7y3LQ7QpF_EVel5c2pYHWVKpXEPe3m_P0oRbFSM7yeR0e-DKfDEodcr4Fq8D26JBn2iZjy4SmzWdc1ojX7o-Xd6YMg) icon on the task in the list view to start discussions or to view them. You can also send voice messages to the users by clicking on ![](/files/ztFwfkl3lkk8IuOqDN3V)icon. File attachment can be sent by clicking on the ![](/files/pqpFYr8HfFT3WwGKfhu1) icon.

<figure><img src="/files/xDTM9dNteptniGvrsV9A" alt=""><figcaption></figcaption></figure>

**Activity Log -** This column shows the activity done in a task. It displays everything from the log of creation of the task to the completion of the task.

<figure><img src="/files/BuEbBjTleB0UPcfyAaKD" alt=""><figcaption></figcaption></figure>

**Time Log -** This column shows the duration worked on a particular task or sub-task in detail. It has work description with log time and total worked time in a particular day or month.&#x20;

<figure><img src="/files/F98Dg9lrxj8fuEJ8cLTi" alt=""><figcaption></figcaption></figure>

By clicking on the ‘![](https://lh5.googleusercontent.com/sgxwjueX9lmkLefwRpoC9GHGRrBEIfpNOKmUFwPklOEjaXIr841wAjCUCPnPq_FZoTw1MG0kNoqx_ag0sfntQZ671eq2OR3PH5AKi5OaNbKIeVUc8nFt0A8Axe2ZU5VVNXb9b6SlDSCaABhzIsntH0AqwQLlSrEvtZZ9ZGiIIA8mt_E7fAgKRhpaOlg71Q)’ icon, you can search the attachment files, and by clicking on the ‘![](https://lh3.googleusercontent.com/RjkN7zaXvMXRFz5jjG_o_SyC88bcyZoiy7_PvCSLyZCLZD3thD9qQWMsk-TPXiHinnXUFAJLGd3JLUHi7UC3qSRr2WCMGtVmTe4ulO4dZ8RQ7dgq48yPb_3RkHBV7lM5A1a2tuT7S2KlM0e4NIu6izC5FI-1Fb9PlX6mhqRlZdcO6xrXxW09rjdp9JYwsQ)’ icon, audio files can be searched.


# Activity View

This section shows all the activities performed by users in a particular project. It indicates if a project has been created or assigned a lead. The details include activities and specific information such as day, date, and time. Click "Load More" to view all actions from the beginning.

<figure><img src="/files/Gge6QInUQaLjzxDwsg7g" alt=""><figcaption></figcaption></figure>

For example, If in a project, start date and end date is to be changed.

<figure><img src="/files/Xa9GILD3DCJrIdeukQh1" alt=""><figcaption></figcaption></figure>

&#x20;Click on the start date. Select a date and then select end date.&#x20;

<figure><img src="/files/vYiMKBDlsy66RZvIlv0O" alt=""><figcaption></figcaption></figure>

The date change activity of that project will be shown in the Activity view.

<figure><img src="/files/5ACPXU46lbYQYkfoohLT" alt=""><figcaption></figcaption></figure>

Similarly, any changes in the project details will be shown in the Activity view.


# Calendar View

The Calendar View displays a month's work schedule. You may view the project's tasks from the project's beginning until its completion. The Calendar would be filled with tasks to be completed, with the task's status highlighted.

For Example, you need to review task named 'Quote 2' from 20, Feb 2023 to 23, Feb 2023. Then the  days 20, 21, 22 and 23 are highlighted in purple showing status 'In Review'. Likewise, additional tasks are also highlighted. To display tasks in the calendar, you must add the task's Start and End date.

<figure><img src="/files/aamiLjq7sOLyeGFQf273" alt=""><figcaption></figcaption></figure>

To go to the next month, click on the right arrow. To view previous month, click on left arrow.

<figure><img src="/files/rzifsCoLPGJvPrjYh4OV" alt=""><figcaption></figcaption></figure>

To view the task details from the calendar, click on that particular task.  The Calendar will be seen empty for no tasks on that day.


# Board View

The Board View shows a project's tasks in horizontal view under task's status. You can see all the tasks of a particular status type under that status. This view helps to get the quick view of tasks with respect to status of the task. You can easily see which tasks have reached a certain status or have been finished.

<figure><img src="/files/l8Osdu9bnkHpAlf7OMbY" alt=""><figcaption></figcaption></figure>

For Example, the task 'Meet-2' has status To Do. Thus, its is shown under 'To Do' Similarly for In Progress, there are 2 tasks specified. As there are no tasks with status 'Backlog', the section is empty. To view a sub-task in the board view, click on ‘![](https://lh3.googleusercontent.com/rjtOCrXu4NjQkv3GwHj2BUSVnyUmqUiDzbnWUn4p-BC2HF9Q4MLWaZgZh1IpLeQUEyfvkWcqL86WOb48SIiVLFbcmqL4eg19IECSb3iCFByk03nTmL0hqhdfD6hmqo2V5HwdxPVsXN-Ul7GOLUZ8JZkiCbEAWb4VuRd3drROjdvYosMGS0CUHeFsNyQG_w)’.

You can simply drag and drop the task to change the status in the board view. Simply drag a particular task and drop it under the status you want to allot.&#x20;

You can also create a task in the board view.&#x20;

<figure><img src="/files/oSXJHfGm8OTxZbU9CBBn" alt=""><figcaption></figcaption></figure>

Simply click on the '+' sign next to task name button to create a 'Sub Task' of that task. You can also create a new task by clicking on 'New Task' button.


# Comments

This real-time chatting section is provided to have a discussion regarding that project. You can type the queries or chat with the team assigned for working on that project.&#x20;

You can also send voice messages to the users by clicking on ![](https://lh3.googleusercontent.com/9vndSnDONloZEnQz99A5XqV6EI8gPqSp-CBJwV97p3V2KUGOktEZTxjpG0gpVrxVM-m4aLf5399kAI4FMQKUcMSws-DksuVNd7-VC_eDyT3qXd4EphP2YWE58loms4CVXEbODDHq8ySqAjIxxvp5qzPEG_4mM3drkH0Lf_9XxTfffKuPu_qsrujJW9yT4Q) icon. File attachment can be sent by clicking on the ![](https://lh3.googleusercontent.com/zuUBDc3W6bwtflFzhCaEUfJZ3qPEYgkGRL-Zr4PGPFUoUTwce014YrOzAhOwWz5WXRn1UyUxJg3o7_rcZo085YZji0RDhgJYSNlAtxolzcpOEbhSKJ45hJKGuVY-l-etXgbrhClXdycwDZJuGfPaeuYLOhYuf5nLGucYo8tG0En6qT48PCLCWyeLTnj8Mw) icon.&#x20;

Simply type your message in the type box and click on the send button.&#x20;

<figure><img src="/files/WY3JvPvUlvTRFuJePPJs" alt=""><figcaption></figcaption></figure>

The comment section is also provided for every task. You can view it in the task details panel.&#x20;


# Project Details

The Project Details section shows the description of the project with its details on the right side. You will find all the necessary details of a project in that project's detail view.

<figure><img src="/files/5qUhHGCg2BJRlzfzGTzo" alt=""><figcaption></figcaption></figure>

* **Description** - The Description of the project is written in this area. To add or edit the description, click on 'Add a Description...' ,enter the description and lastly save it.&#x20;

<figure><img src="/files/7dcgAdpxPP4XUZIxuStd" alt=""><figcaption></figcaption></figure>

* **Checklist -** The checklist area helps in listing the required items for the project. To add items in checklist, click on '+' and type your item name and press enter.&#x20;

<figure><img src="/files/qTsC3A5qoE4psOwpiPDo" alt=""><figcaption></figcaption></figure>

To mark any item, click on the box or on the item name and vice versa for mark off. The check list item can be edited by clicking on the ![](https://lh5.googleusercontent.com/WoyAU-v9pxaO7talbCj-62ElIA3o2dwASzjKnijJt0Sa9d1dsjA-N3nbYNQ4ptMoryGIZr9-x7LLzW2ZOd4gcxZfghUMUjvKUg9zBD4KE_KU4WOH8-3Rl-0DVr4lf8JeVAmPeiltB3h9vEPX1SCnVB6kR8EREjr8v-Rv6tpq-CiODoAjxix0nNaq2Gn9wg)icon. You can also add assignee to that check mark by clicking on ![](https://lh6.googleusercontent.com/y8kkcbtXwDLPpF0ma2_7JeQxUogxdwJjbeC76RH2RMvcaA38BZVQ0KjUNLPnFv9b-UGTpanPrm4lSwIl_obFxJizigMcXJyqHDtkRfvzVeOqQ7dWj_oHAEHPUyVKiVgwWssDlMMfYu66Qa7wxM5pkmiFY0DYVphnFjTszI1ySrxZE2efLBizd8Y8jBJJOA)

* **Attachments** - The Attachments contains the files related to the project that is accessible for download. You can download an attachment straight by clicking on the download icon on the file.

<figure><img src="/files/T0CCBanoWBDJJ6BoW2UE" alt=""><figcaption></figcaption></figure>

To add an attachment, simply click on '+' and upload the file. You can also do the same just by clicking in the attachment area. Click on 'See All' to view all the attachments like files or links related to that project.

####


# Workload View

The Workload View displays the tasks assigned to users with respect to the hours required to complete that tasks or Sub Tasks. It also shows the time spent working on that task or Sub Task in the project by users. Choose a date from the calendar given above the table to view the workload for that particular date.

<figure><img src="/files/WQ7WCfpYO0cbz5e9f6Tv" alt=""><figcaption></figcaption></figure>

For example, In project 'Demo', the estimated hours for task is specified 2 Hrs, while the logged hours or time spent by user is 49 minutes. Such details can me viewed in Workload View.

Click on the dropdown arrow to view all the tasks performed with respect to time spent by a particular user in a project.


# Table View

Table View provides a tabular representation of all project tasks. It makes it easy to see all of your tasks in a row, with columns for the Key, Due Date, Priority, and Assignee.

<figure><img src="/files/8GYeawXZV6k3pzoiwYlv" alt=""><figcaption></figcaption></figure>

You can click on a task to find out more information about it. To access the team's conversation space, just click the chat button and start sharing your ideas. You can also set or change the priority from the table view.


# Embed View

When you use Embed View, you won't need to switch between the tabs to look at the data of a particular URL. With this view, you will get an uninterrupted view of the whole page.

You have the option of adding links of Sheets, Documents, Figma, and Youtube in addition to HTML. Apart from particular this, you can add any URL to view in the embed section.

* Simply click on the "+ View" button to add the view.
* Click "Embed," then paste the URL or HTML code into the space given.
* Lastly, click on 'Add View' to display the URL page.


# Chats & Channels

Chats & Channels in Alian Hub help users communicate within the company. Users can have 1:1 chat or can create channels for group conversation. Furthermore, the channels' permissions can be personalized per the channel requirements.&#x20;

Users can share media files, links, and voice notes to enhance collaboration.

### 1:1 Chat

1. To begin communication between users, click on ![](/files/lUkuFNZYGGn14egYxXbO) icon present on the menu bar.

<figure><img src="/files/wjfRxVaQ97mBKquhFAKQ" alt=""><figcaption></figcaption></figure>

2. To have a 1:1 chat with a user, click on ![](/files/0be4pQhYlJJXwlJxFd1q) and select the user to begin. You can also search the user name in the search bar.&#x20;

<figure><img src="/files/AQyfJegoMUOpsCyULXzJ" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/RhIx1BszDrr5nEmUP0lb" alt=""><figcaption></figcaption></figure>

### Create a Channel

There are two types of channels you can create on Alian Hub - Public Channel and Private Channel. Public channels will be visible to all the users of the company. On the contrary, Private channels will be visible to the selected or permitted members of the channels.

1. To create a channel, click on ![](/files/y4ryO7VZhjzpKxRfPMrn) and select "Create Category". This will create a Channel category.

<figure><img src="/files/rK05qpjQvmlyCBSxLMfF" alt=""><figcaption></figcaption></figure>

2. Enter the name of the category and click on "Create Category". The category of the channel will be created.

<figure><img src="/files/QHzuiELwiRApU65NmbZj" alt=""><figcaption></figcaption></figure>

3. Thereafter, go to the category, click on ![](/files/y4ryO7VZhjzpKxRfPMrn) and select "Create Channel".&#x20;

<figure><img src="/files/E6A10SSckoeqKp3v0AYS" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/SawKhJWfuGZ2EwdIh14I" alt=""><figcaption></figcaption></figure>

4. Now, add the name of the Channel in "Channel Name". You can select the icon for the channel from the "Icon" section's list. There are various pre-given icons for users to personalize their channel. Furthermore, you can also add an image to the channel instead of an icon.&#x20;
5. To add an image, click on "Upload" and select the file you want to upload.&#x20;
6. As mentioned above, you can make the channel Private or Public. The channel will be default set to Public. Swipe the Private channel button to the right to make the channel private. Click on the member icon in the "Only share with" section and add the members to your private channel.&#x20;

<figure><img src="/files/0UoCteqwSWzyEsMHznzD" alt=""><figcaption></figcaption></figure>

7. Users can also personalize permissions for sending messages in the channel. By checking to the right, you can allow members to send messages in the channel. Otherwise, check to the left to prevent members from sending messages to the channel.
8. Lastly, click on "Create Channel". The channel will be created successfully. In the below image, ![](/files/kn0Gb3xLKUi1kHHjNdiP) icon on the channel name shows that it is the 'Private channel'. The members allowed in the Private channel are shown on the top of the channel. To add a member or view the members, click on the icon and select a new member to add.

<figure><img src="/files/sh9Pw7JpqFWt2NnqFDyl" alt=""><figcaption></figcaption></figure>


# Close Or Reopen Project

### Close a Project

To close a project,&#x20;

<figure><img src="/files/35DJkbqljIZl8EKheTI0" alt=""><figcaption></figcaption></figure>

1. Go to that project.
2. On the right section of Project Detail Page, click on ‘Close A Project’.
3. Choose ‘Confirm’ in the popup and the project would be closed.

#### **Another way to close the project is to go to Settings.**&#x20;

<figure><img src="/files/pslPWJIm7Wa28w3tito3" alt=""><figcaption></figcaption></figure>

1. In Settings, click on 'Projects'.
2. On the right section, click on the three horizontal dots.&#x20;
3. Select 'Close Project'. The project would be closed.

### Reopen A Project

To Reopen A particular project, Go to settings.

<figure><img src="/files/P8Zsvsulhlk5YLP3rTbO" alt=""><figcaption></figcaption></figure>

1. In Settings, Click on Projects.
2. On the right section, click on Closed Projects.
3. Click on the three horizontal dots in the project box.&#x20;
4. Select 'Reopen Project'. The project would be reopened.


# Time Sheet Reports

### Viewing Time Sheets

You can see the time reports of users and projects in this area. To view the time report, click on the ‘Timesheet’. You can see three-time reports; Users timesheet, Projects timesheets, and Workload. A calendar is provided on the left side of the page. You can select the date, month, and days between dates in that.

* **Users Time sheet -** This page shows the logged time of the users in all the assigned projects with their details. By directly searching the name in the search box, you can view the time details of the user. By this, you can know the total worked time of a user of particular date with the project name. The left section shows the total worked time and hourly cost. Right section shows the hourly cost and worked time on the specific date.&#x20;

<figure><img src="/files/8I1ZZnOit2AZNhE8Uo5f" alt=""><figcaption></figcaption></figure>

1. The logged time next to user name shows total worked time by the user in the selected days of calendar.&#x20;
2. The logged time next to task name shows total worked hours in the task in the selected days of calendar.&#x20;
3. The hourly cost shows the total worked cost in task & of user.&#x20;
4. You can see the dates on the right of the page. It shows the time taken by a user on a particular task and on a specific date.&#x20;
5. The 'Total' row shows the summation of all the users logged time, hourly cost, and logged hours & hourly cost of specific date.&#x20;

* **Project Time sheets -** This page shows the worked time in projects with their details. By directly searching the name of the project in the search box, you can view the total worked hours in the project. You can also view the worked hours on a particular task and on a specific date. The left section shows the total worked time and hourly cost. Right section shows the hourly cost and worked time on the specific date.&#x20;

<figure><img src="/files/J7Bocez6xGadNVLsRYpz" alt=""><figcaption></figcaption></figure>

1. You can see the dates on the right of the page. It shows the time worked on a particular task or project and on a specific date.&#x20;
2. The hourly cost shows the total worked cost in task & in project.&#x20;
3. The logged time next to project name shows total worked hours in the project in the selected days of calendar.&#x20;
4. The logged time next to task name shows total worked time in that task in the selected days of calendar.&#x20;
5. The 'Total' row shows the summation of all project's logged time, hourly cost, and logged hours & hourly cost of specific date.&#x20;

* **Workload** - This Work load sheet shows the estimated hours of a task and logged hours by the users in that task. By directly searching the name in the search box, you can view the work details of the user.<br>

<figure><img src="/files/7vFrFqVZ9KSuc45Y3Esn" alt=""><figcaption></figcaption></figure>

1. The logged time next to user name shows total worked time by the user in the selected days of calendar.&#x20;
2. The logged time next to task name shows total worked hours in the task in the selected days of calendar.&#x20;
3. The estimated time shows the total estimated time for a task & of user.&#x20;
4. You can see the dates on the right of the page. It shows the worked time & estimated time of a user on a particular task and on a specific date.&#x20;
5. The 'Total' row shows the summation of all the users logged time, estimated hours, and logged hours & estimated hours of specific date.&#x20;


# Milestone Report

The Milestone Report is a complete report outlining the progress made on the project and the completion and released of each milestone with respect to its status date, start date, end date and amount received.

To see the report, go to the Reports section of the menu bar and then click on the Milestone report. A tabular representation of the data will be available to you.

<figure><img src="/files/nmgmisYG4vMdlWqIfVFg" alt=""><figcaption></figcaption></figure>

To view the milestone report for a particular year, click on the given year and select the year of interest.&#x20;

Milestone report is categorized with respect to currency in the project. To view the report in detail with task name and its status, click on the arrow on the left of the currency.


# Settings

Through Settings, you can make necessary edits and changes to your profile, company, projects and so on. On the menu bar of the Homepage, click on your profile.

<figure><img src="/files/GinkwSiL1CxyHJLLNWaK" alt=""><figcaption></figcaption></figure>

**In the dropdown, Select** ![](/files/RQndBOhdfEvdhZ0rD5gp)**Settings.** Two sections will be shown in Settings panel.&#x20;

<figure><img src="/files/AjMhooV85Yk1QAB1sFsO" alt=""><figcaption></figcaption></figure>

1. Company settings - It allows you to make changes in the company profile and projects.&#x20;
2. Personal Settings - It allows you to make changes in your personal details.


# Company Settings

### Settings

<figure><img src="/files/bsMNM4w8lOoL0cie2iec" alt=""><figcaption></figcaption></figure>

The 1st section is for company settings. In it you can edit the Company Name, Contact Number, Location and Date Format. Upload the company image by clicking on 'Upload Image'.

### Members

#### Add a Member

To invite your team members to Alian Hub, Follow these steps:

1. Type the email in the textbox given on the top right side in the members panel.
2. From the dropdown next to the textbox, select the Designation of the member to be invited.
3. From the next right dropdown, select the Role of the member.
4. Lastly, click on invite. The user will get an invitation email and can join by that mail.&#x20;

<figure><img src="/files/RYPOjhvvKJn3xFEqS17J" alt=""><figcaption></figcaption></figure>

To edit the roles and designation, click on ![](/files/dT5Fzo6FzCOzN9jiLhhh) icon in the dropdown. You can also add new role & designation by clicking on '+ Add New'

All the members will be visible in the 'All Members' section. You can view Email of the members, designation, role, last active and status & settings.&#x20;

#### Remove a Member

<figure><img src="/files/ezdPfoSwqLln0PoRRdCT" alt=""><figcaption></figcaption></figure>

To remove a member from your team,

1. Go to Settings > Members
2. In Members, go to 'All Members'. You can also search the name of the member in the search box.
3. Click on the three horizontal dots and click on 'Remove User'

The user will be removed from the team. The members that are removed will be shown in 'Removed members' section. You can also search members by typing their name or email in the search box.

### Team

You can view your team or add a new team in this section. Click on 'Add New Team'. and follow the below steps.

<figure><img src="/files/KJDWGGmgnw51p9KzDJaX" alt=""><figcaption></figcaption></figure>

1. Add the team name in the text box.
2. Select the team color.
3. Add the team members.&#x20;
4. Lastly, click on save.


# Projects Settings

<figure><img src="/files/ryJm0s9uGcVf3jLQhhWL" alt=""><figcaption></figcaption></figure>

1. In the projects, you can see all the Open and Closed Projects. By Clicking on 'Go to Projects' next to project name, you will be landed on that project page.&#x20;
2. You can close the project by clicking on the three horizontal dots and selecting 'Close Project'. To reopen a project, go to closed projects and in the three horizontal dots, select 'Reopen Project'.
3. By clicking on the bold fonts of 'Make Private' or 'Everyone'; the shared with permissions will be changed.
4. You can edit Project Statuses, Task Type, Task Status, ERP Apps, Required Views by clicking on and in that area.

For example, To edit the Task type, Click on the task. You will see a popup to edit the tasks.

<figure><img src="/files/kMuq7nLjAyav8Mx8w6DA" alt=""><figcaption></figcaption></figure>

Add the task type, or choose your preferred template and then submit. Similarly, you can edit other status.


# Template Settings

Different departments in a company has different workflows. Templates will help in defining workflow easily while efficiently managing it.&#x20;

After customizing templates for different categories from settings, you don't need to create templates every time while creating a project of a particular category. The template for the category of a project will be automatically selected. For example, if you are creating a project for Marketing, the application will automatically choose the Marketing template from your template settings.

<figure><img src="/files/KvMILXVDZt3GdyhKOuGk" alt=""><figcaption></figcaption></figure>

#### Create a Template

* You can Import template or create a new one. Click on '+ Add New Template'.&#x20;
* Add Name, Category, Description and press next.

<figure><img src="/files/Gya7xKYCsPf8QmN4zPH5" alt=""><figcaption></figcaption></figure>

* Personalize the task type, project status and task status.
* Customize your Project Views and submit. The template will be created successfully.


# Upgrade your Plan

Under the Upgrade page, you can check out the details of your existing plan. You'll need to upgrade your Alian Hub plan to access its full set of features.

To Upgrade your Plan,

1. Go to Settings> Upgrade
2. Browse the plans and choose your desired plan to upgrade.
3. Choose your preferred payment method and manage your projects seamlessly.


# Security & Permissions

To manage the permissions of members of a company on Alian Hub,&#x20;

**Go to Settings > Security & Permissions > Advanced Permissions.**

You will find advanced permission settings for different roles of users with Read and Read & Write options. Here, Read only gives view of the action to the user while Read & Write allows users to view and edit the actions. Selecting None for an action will limit users to read or write that action.

Any new role defined by the admin will automatically be displayed to manage for the permissions in this section.&#x20;

### Actions and its details&#x20;

<table><thead><tr><th width="292">Actions</th><th>Details</th></tr></thead><tbody><tr><td><strong>Sheet Settings</strong></td><td><strong>Permissions for  Sheets Viewing</strong></td></tr><tr><td>User Timesheet</td><td>Allow users to view user timesheet report of their own or everyone.</td></tr><tr><td>Project Timesheet</td><td>Allow users to view Project timesheet report of their own or everyone.</td></tr><tr><td>Workload Timesheet</td><td>Allow users to view Workload timesheet report of their own or everyone.</td></tr><tr><td>Milestone Report</td><td>Allow users to view or edit milestone report.</td></tr><tr><td><strong>Task</strong></td><td><strong>Permission settings of member for tasks</strong></td></tr><tr><td>Task list</td><td>Allow member to view or edit the task list.</td></tr><tr><td>Task Create</td><td>Select to allow member to view or create the task.</td></tr><tr><td>Sub Task Create</td><td>Select to allow member to view or create the sub-task.</td></tr><tr><td>Task Name Edit</td><td>Allow member to view or edit the task name.</td></tr><tr><td>Task Status</td><td>Allow member to view or edit the task status.</td></tr><tr><td>Task Assignee</td><td>Manage member to view or change the task Assignee.</td></tr><tr><td>Task Priority</td><td>Manage member to view or change the priority of task.</td></tr><tr><td>Task Due Date</td><td>Manage member to view or change the task due date.</td></tr><tr><td>Task Start Date</td><td>Manage member to view or change the task start date.</td></tr><tr><td>Task End Date</td><td>Manage member to view or change the task end date.</td></tr><tr><td>Task Estimated Hours</td><td>Manage member to view or change the estimated hours of task.</td></tr><tr><td>Task Description</td><td>Select to allow member to view or edit the task description.</td></tr><tr><td>Task Checklist</td><td>Manage member to view or change the task checklist.</td></tr><tr><td>Task Checklist Assign/remove</td><td>Allow member to assign or remove task checklist.</td></tr><tr><td>Task Attachments</td><td>Manage member to view or edit the task attachments.</td></tr><tr><td><strong>Company Settings</strong></td><td><strong>Permisions management for company settings</strong></td></tr><tr><td>Edit Company</td><td>Manage member to edit the company.</td></tr><tr><td>Invite Member</td><td>Manage member to invite other member.</td></tr><tr><td>Member list</td><td>Allow member to view or edit the member list.</td></tr><tr><td>Create Team</td><td>Allow user to view or create a team.</td></tr><tr><td>Team List</td><td>Manage member to view or edit the team list.</td></tr><tr><td>Project List</td><td>Manage member to read or edit the project list.</td></tr><tr><td>Security &#x26; Permissions</td><td>Allow member to manage the security &#x26; permissions of company.</td></tr><tr><td>Role Management</td><td>Manage to edit or view the role of member in company.</td></tr><tr><td>Designation</td><td>Allow user to view or edit the designation.</td></tr><tr><td>Milestone Weekly Range</td><td>Manage user to view or edit the Milestone Weekly Range.</td></tr><tr><td><strong>Project</strong></td><td><strong>General settings for all the features of project management</strong></td></tr><tr><td>Project List</td><td>Manage member to view or edit project list.</td></tr><tr><td>Project Create</td><td>Manage member to create project.</td></tr><tr><td>Project Name Edit</td><td>Manage member to view or edit the project Name.</td></tr><tr><td>Project Sprint Create</td><td>Allow member to create project sprint.</td></tr><tr><td>Project folder Create</td><td>Allow member to create the project folder.</td></tr><tr><td>Project folder Name Edit</td><td>Manage member to edit the project folder name.</td></tr><tr><td>Project sprint Name Edit</td><td>Manage member to edit the sprint name.</td></tr><tr><td>Project Details</td><td>Manage member to read or edit the project details.</td></tr><tr><td>Project Status Change</td><td>Manage member to change the status of project.</td></tr><tr><td>Project Assignee</td><td>Manage member to add or change project assignee.</td></tr><tr><td>Project Category</td><td>Manage member to select project category.</td></tr><tr><td>Project Source</td><td>Allow member to add or edit project source.</td></tr><tr><td>Project Type</td><td>Manage member to edit the project type.</td></tr><tr><td>Project Currency</td><td>Manage member to choose project Currency.</td></tr><tr><td>Project Amount</td><td>Manage member to read or edit the project amount.</td></tr><tr><td>Project Start Date</td><td>Manage member to edit or view the start date of project.</td></tr><tr><td>Project End Date</td><td>Manage member to edit or view the end date of project.</td></tr><tr><td>Project Due Date</td><td>Manage member to view or change the project due date.</td></tr><tr><td>Project Close</td><td>Allow member to close the project.</td></tr><tr><td>Project Description</td><td>Manage member to add or edit project description.</td></tr><tr><td>Project Checklist</td><td>Manage member to view or edit the project checklist.</td></tr><tr><td>Project Checklist Assign/remove</td><td>Manage member to make changes in the project Checklist.</td></tr><tr><td>Project Attachments</td><td>Manage permissions of member for project attachments.</td></tr><tr><td>Project Milestone</td><td>Manage permissions of member for project milestone.</td></tr><tr><td>Project Milestone Status Change</td><td>Allow member to manage the Milestone status rights.</td></tr></tbody></table>

<br>


# Personal Settings

### My Settings

<figure><img src="/files/3G53dlMzS86u6MScYDtA" alt=""><figcaption></figcaption></figure>

In My settings, you can upload your image, edit your Name, Time zone and Time format. By clicking on Upload Image, you can add image to your profile.

### Company

<figure><img src="/files/tLljtP6xWTsgtHN3K9Js" alt=""><figcaption></figcaption></figure>

This section shows the companies you have created and in case, you need to create one.

<figure><img src="/files/X5Qv6q00Ot8CeCqGkAVN" alt=""><figcaption></figcaption></figure>

To add a new company, Go to Company and click on 'Add New'. Create the company by filling the required details and click on Save. The company would be created and shown in the company section.

### Notifications

You can edit the permissions for notifications in this section. Marking the receiving type of notification for project and tasks; you will get notified with that means.

Alian Hub allows receiving notifications from three means - Browser, Mobile and Email.

To view the Notifications on Alian Hub, click on the bell icon on the menu bar. The @ icon will show the mentions notifications.


# cPanel Hosting Guide

Please make sure to follow through the Hosting guide properly without skipping any step.

After Login to cPanel kindly follow these steps.


# 1. Node.js App

<figure><img src="https://lh7-us.googleusercontent.com/docsz/AD_4nXdIMMKjVMxd4d77KNqZJ8jBu_6O-SRFjdIrltgtxE5_-zjYtyK1S4OTHW150KnTo3usvp3VWTdEhvd1Gp5s9r8CqiDZuzYTqp9M2JLIvGUfV14PGCHdFsqOZLc7sIzQwqbVVErZWoRo38WA6c-lPFasy9g?key=0eHl8EwBAzOYpdNHPyFeKw" alt=""><figcaption></figcaption></figure>

Make sure that you have the Setup Node.js App option in your Software section.

<br>


# 2. App Setup steps

After that click on **Setup Node.js App**

<figure><img src="https://lh7-us.googleusercontent.com/docsz/AD_4nXc4UM8rvcJXgepD7CBFoHltf32DAJWNlRBeTWbrrtkiHgrZuBw6FXrQuNyPGDaHEop2E0SrduLUP0fcEdTiVJFatf13FI4yQj96li7mn9Vv0gcM18O3-WC9W3Hpo9yJgPqpEqUTgPbDk9fLkVLJPQ72GO0?key=0eHl8EwBAzOYpdNHPyFeKw" alt=""><figcaption></figcaption></figure>

Click On **Create Application** to Setup Node.js app

<figure><img src="https://lh7-us.googleusercontent.com/docsz/AD_4nXd4VqZOHCjztSfq3Hjin6BaNNYQBycyGmn1HnaVufHswInZjYzm4isHsWt1f29V7UT1oVCFjXlQm0vJge_tfcV7k9WqQjdSbuInCI66afVsm-fNYwPw49GUGUazbiWliMW0DAV9MSpTI5lgQzAgmJGWBCs?key=0eHl8EwBAzOYpdNHPyFeKw" alt=""><figcaption></figcaption></figure>

When you click Create Application you have this&#x20;

<figure><img src="https://lh7-us.googleusercontent.com/docsz/AD_4nXfhAwJf5SBNCKWg3EDnjaymVSb8KoLNCFSDUktgMp3fJgl__r3ce6zyUtLFmhd5bkBnb1yzJsKATnwPM05w0tdzTbQKEY88F3T4a4qouz1B5BpuCL770xQ5zZSrMbJe4zRlyCdc8ViC01B4iugFejAyC7A?key=0eHl8EwBAzOYpdNHPyFeKw" alt=""><figcaption></figcaption></figure>

Thereafter, select drop down of **Node.js version**

<figure><img src="https://lh7-us.googleusercontent.com/docsz/AD_4nXccZZV_AvheToYdNYPOzDYzwPFbLbh9REISBq26N8v1rHEJYjNhRCE-sESXw1V4Lua0RNLMNZLyAeLHMLUqh2x43mGO3GW7lTd3Tr_ZLedvpWJbYDm6tLhXmyke0WzbRBQzePuuik4f6IaEOoXL17iHcwJj?key=0eHl8EwBAzOYpdNHPyFeKw" alt=""><figcaption></figcaption></figure>

Make sure to have **“20.11.1 ” version** in your drop down list

You have to select **“Production”**

<figure><img src="https://lh7-us.googleusercontent.com/docsz/AD_4nXfvg8U44nJMcLzbR3eXsTrsMduvAq27aXfc1R9KvOMdQh29ybZHYzxU2EkuEW0ae_-8eyvmE7tD7faAvcnUQ5wqT35ahvm_7BhNCOUsKmGgA_NHc53raP_ZLDMjFFgEXbuWc06E4hAzM3kpPRk56aRUTL9A?key=0eHl8EwBAzOYpdNHPyFeKw" alt=""><figcaption></figcaption></figure>

After that in **Application root,** you need to add the root folder name for your application where you are going to upload your code/zip

<figure><img src="https://lh7-us.googleusercontent.com/docsz/AD_4nXeYSdX5hJFK-LuY4NjZo44OCbOO5grtSHnHr5k32SAISZP1sqagZlbXdm51iFWyLXxlDqOLfrB1j-uqY71ck1BjxhO6kZVQQ7iXSLQxlw1Ik-y77a5m1_PDCBQl7jvSpwlS-tIKAQvtlj970pW3U9GnNnFT?key=0eHl8EwBAzOYpdNHPyFeKw" alt=""><figcaption></figcaption></figure>

Then in **Application startup file** you need to add **“index.js”** in field

<figure><img src="https://lh7-us.googleusercontent.com/docsz/AD_4nXe8t4oPayep3U3daVqMClhTx4NBXFVhzHt_WW-BsqTvZv829cazkdtGYcbIE7PKUvOFQ9Psq0yOs3gMAcr5INsdZVbyQIclggi40EsFc8-3-bD69OUWkLvKIDT8QHa0Z990dnjkiJ_fLa6YSXhuu9EwJTM?key=0eHl8EwBAzOYpdNHPyFeKw" alt=""><figcaption></figcaption></figure>


# 3. Upload code/zip

Now navigate to the **File Manager** from Tools

<figure><img src="https://lh7-us.googleusercontent.com/docsz/AD_4nXfGhGhPY9XMGOwKN1otP3P57GcrMSRlJLwOs4BsebtxliX9oocsX4apBEjZhIO6pR4GnswmciLPWymE1utiD_h0Sjp5X7UAa8IYE8_Ej41oa0qLuLEzMyDYtB5waWuumo3PtODKYEMdqu2bry9Qf9m0m0XD?key=0eHl8EwBAzOYpdNHPyFeKw" alt=""><figcaption></figcaption></figure>

Thereafter, in the directory structure, you find the **Application root** folder which you created during the **App Setup**&#x20;

<figure><img src="https://lh7-us.googleusercontent.com/docsz/AD_4nXfGavWCaxemZLWA4236Na3J6x96bngTeGA632b0EeyPhimyCLP4C0s0MWMU3umuNbuI70jdR1YSVS7KdGjwSOCUKQpjSUfd7qAOH37YpDRbsC4TJLteS8AVnoPsLfYMRDzZoDVfm1A1cQMIhAbt4jv6Io1q?key=0eHl8EwBAzOYpdNHPyFeKw" alt=""><figcaption></figcaption></figure>

Go to the Application directory Click on Upload to upload your code/zip

<figure><img src="https://lh7-us.googleusercontent.com/docsz/AD_4nXf0LYR5ZWgbMjLDcjXiWikbwYNxr49GppeMgYN8o1N-JZI_IbXeBCQtbwNk-qH36Wsk16er5AfsZRCrnmjLITlDS_Pyty7ZuFkPQ-Rm_T-R5E73F3HOhwigWKyM_xMEouvN0t6bG9N-xNqHwXcqUVVnRtvt?key=0eHl8EwBAzOYpdNHPyFeKw" alt=""><figcaption></figcaption></figure>

<figure><img src="https://lh7-us.googleusercontent.com/docsz/AD_4nXccVu3FbP4zF-1JPHDR0jTNrfqCwdZuYYSq9fylzFT4aDIr0CIWqnFFBd8lZxYaynSOP9qTozjt4SAk5cYaxLLFo3BJ5RtfhlgatcA7cITMgLHn93t7bw_nsbLdrNmUY2rGzwV6Z0u8Ccls9lZ_2uFxWagm?key=0eHl8EwBAzOYpdNHPyFeKw" alt=""><figcaption></figcaption></figure>

After Successfully Upload of code/zip

<figure><img src="https://lh7-us.googleusercontent.com/docsz/AD_4nXfrzNUZIp6Ck3AyQHNHbGdAu9Hse4PCmA1RonNd7yfqAcUwUxvfGnQ4kT1JrdC5cOynTiuPIydsmzLoWZOu-eaQF9At3Q91T-Cyaa5VBcJOKIxpR1y6UhvwhRsRRefv_7mkxnCJpKL6QXQuePSnlhRVIf3m?key=0eHl8EwBAzOYpdNHPyFeKw" alt=""><figcaption></figcaption></figure>

You will see the zip in your application root directory. Now Extract it&#x20;

<figure><img src="https://lh7-us.googleusercontent.com/docsz/AD_4nXdslQsaJj_cVipJ_HEC4TmvnwyS1LkIqsolNKU-_5hbpnRhOTxIiazjg6NyztVAOHMeHJss5CsWInRkTiFSu-ERmEBkK42-qJ216PHnpKBmIjx0jiSTRdhdSXSTvLn7-lLhy-ix_ghNsuOQVu2uKlMKqOMW?key=0eHl8EwBAzOYpdNHPyFeKw" alt=""><figcaption></figcaption></figure>

After extract, you will get this kind of structure

<figure><img src="https://lh7-us.googleusercontent.com/docsz/AD_4nXf55RL903H9aARaZyZmEcBUWJ61bTB3wylhvdPrnLU1cu-ooYWgRnJKnv1CJdBojU971d1Vudt8rRCDQ6XLvxi9-5GszOLUMiV4wnHAr-FGOPDAxJL7y_kISY8N2J_darNiLEAGpiCE9kGijX-4dnoPl4mX?key=0eHl8EwBAzOYpdNHPyFeKw" alt=""><figcaption></figcaption></figure>


# 4. NPM Installation

Now Navigate again to the Setup Node.js and copy the link

<figure><img src="https://lh7-us.googleusercontent.com/docsz/AD_4nXeHw8omHp9vg8agY4YRym-yuWn2bDstxGNC2vp9hPea6iI_2dqzG4ByMVUGNwOxg2eMsLwwozAu03ebK5JirV2OoJVjswSW_joneMUF9dFAfXZaCb1L8JwnI3ARh4K7nmLmqseUF_wl8oX02_c-NBMRptus?key=0eHl8EwBAzOYpdNHPyFeKw" alt=""><figcaption></figcaption></figure>

Now navigate to the **“Terminal”** in the Advanced section in Tools

<figure><img src="https://lh7-us.googleusercontent.com/docsz/AD_4nXcfHUFdCqUmvpq-o8LjZ1sRWtAUBVzcsgGwF7IDTk2NM0X6lqn3776aNzGuawKLcnaFs3TEdV1pQAhJ-w6fUT6CfP4Sw1P0bOQc5nzLnRH5v7Bd7V7OQTEZV3viFlxBkfO-nhErsA5vZWTRcpC1OlRr49I?key=0eHl8EwBAzOYpdNHPyFeKw" alt=""><figcaption></figcaption></figure>

And now paste the link that you have copied from the **Setup Node.js** and press enter to Move to the Project Directory

<figure><img src="https://lh7-us.googleusercontent.com/docsz/AD_4nXe8XaxqVLLf1dOI-n1t6GCEjWTifLf779kN-aceCGbUiEg6q__gIj6K_1SZAsbSCwdi3gej9a4WLQhkpWcKIrNdZ0ufyVOrV2B_YVu1NS4F9F1VfmFNTghMyKRA7jQnE-EcAqVEhch2b1Kqvb7psrT_D7E?key=0eHl8EwBAzOYpdNHPyFeKw" alt=""><figcaption></figcaption></figure>

And now paste “**npm i && cd installation && npm i**” command over here.

<br>


# 5. Start App

Now Navigate again to the **Setup Node.js**

After Successfully installation of Npm **Start** the app

<figure><img src="https://lh7-us.googleusercontent.com/docsz/AD_4nXfHEsudewGs-CyrKESs5-BdX6TBvpzfetXDzEYpexwWE9QUzS2RUrFqlipd5SZm9_5QFqiLMj37u4GvJGiGaHPWGVYFt_Ehw8iu9f_dsMeDxChgZco_pNxfxb0ndHCfC0LbG8A3y20F7I4eR-4RdT35MVU?key=0eHl8EwBAzOYpdNHPyFeKw" alt=""><figcaption></figcaption></figure>


# 6. Setup Environment variables

After the successful setup of the application in the local environment\
You get the file name .env in your project directory open it&#x20;

<figure><img src="https://lh7-us.googleusercontent.com/docsz/AD_4nXfTJEghgajAD34yrK2QlT9I8or4vLW_e-uYeWHZWz3PdraETSS0w-6zQ7KY9u375COcBDixIttCes2PY-tXR37VZUxHoF16MfIlG7BqQM7nMUYwHLEQipq0ny0tcRjzxjgH-LnXe5W9X_Co9kTaXUCzcj9d?key=0eHl8EwBAzOYpdNHPyFeKw" alt=""><figcaption></figcaption></figure>

Therefore now need to setup an **Environment variables**

<figure><img src="https://lh7-us.googleusercontent.com/docsz/AD_4nXfH5O-Zwfj8wUYwfXBjguW518HL0qn-SZjD8cGkuq1UcRI6Ykv6dxsjIwtD4Ah06hTt_94RWTHUN58IFdQ3r2QZEtCHxgIFW8xoZi9sl96xfvczltDKia4re0V5u3twMQjwoJ-Eer1_TN_ptE9z9BVYlPO4?key=0eHl8EwBAzOYpdNHPyFeKw" alt=""><figcaption></figcaption></figure>

Now from the file **“.env”** file you need to add one by one variable in the input field

Make sure to avoid **( ‘  ‘ )** inverted commas will adding the variable

<figure><img src="https://lh7-us.googleusercontent.com/docsz/AD_4nXffDU9DVXQYiN5fLZSWxv7Lw-faH8GFHX2gs94qlmnIrxPIrOnA6l2OWnpWc2ryWtvzzMQLaRqB3pCjniVrXeEjqUbaN6WBb4nQ72aa1u2JG4x8oh2O4z65dQDOPdBp94vOxyUDuPJWrfJUe60iW8limSAK?key=0eHl8EwBAzOYpdNHPyFeKw" alt=""><figcaption></figcaption></figure>

For Example&#x20;

Add the variable and enter **Done** after every single variable you add&#x20;

<figure><img src="https://lh7-us.googleusercontent.com/docsz/AD_4nXfTSaWbuJbvZzHgV28pP0E-5QpcSFRzqfxYqGQMEg09dLO6tjZfix7o9u9RNX7vXVp2E0ZDTe3Ej5FcVEUs3r1foNukJ6Pb4i5vuHQIxrvO5WX9MwMKNK30oKV1fynutcIdPOqfQMNVrK1jbiS9d3wR8Yk?key=0eHl8EwBAzOYpdNHPyFeKw" alt=""><figcaption></figcaption></figure>

Add all the variable from **“.env”** file\
Make sure <mark style="color:red;">**not to miss**</mark> any single variable

After Adding Environment variables Click on **Save**

<figure><img src="https://lh7-us.googleusercontent.com/docsz/AD_4nXfk_9hyXzEtVJaXtRxYmZfLziUIoZsrwPCth8UI5fEdOcLeZfGnfI3zBp3tssT6RadEecLley--wWMsCaaN0VU8IcVQn0MWdLx13l-ziGLHFlKT6r_pIm5posKIMRPBZ0lt-gO1GNwxBtQ2vROIwfvLfBV3?key=0eHl8EwBAzOYpdNHPyFeKw" alt=""><figcaption></figcaption></figure>


# Docker Installation

Get started with Docker! This guide will walk you through setting up Docker, creating and managing Docker images, and hosting them for easy deployment. Follow these steps to streamline your development and ensure consistent, containerized environments across your projects.


# Alian hub - Docker Setup Guide

## Alian hub - Docker Setup Guide

This document provides all the steps required to set up, build, and run a Docker container for **Alian hub**.

### Prerequisites

* **Docker**: Make sure Docker is installed on your machine. [Download Docker here](https://docs.docker.com/get-docker/).

### Setup Instructions

#### 1. Configure Environment Variables

> **Note**: If you have already configured the environment variables and set up the necessary files, you can skip this step.

**Environment Variables Setup**

To manage environment variables, follow the steps below to create and configure `.env` files in the necessary directories. Each part of the application (root, admin, and frontend) requires a separate `.env` file to store its specific environment variables.

> **Note**: Before this Please check .env.example file in root directory.

### Steps

1. **Root Directory**

   * Create a `.env` file at the root level of the project (`/.env`).
   * This file will contain environment variables used by the main server.

   Example:

   ```plaintext
   # /.env
   API_URL=localhost
   PORT=4000

   ```
2. **Admin Directory**
   * Inside the admin directory, create an .env file (/admin/.env).
   * Use this file to specify environment variables needed by the admin portal.
3. **Frontend Directory**
   * Inside the frontend directory, create an .env file (/frontend/.env).
   * Use this file to specify environment variables needed by the frontend portal.

#### 3. Build the Docker Image

Run the following command to build the Docker image, loading environment variables from the `.env` file:

```bash
docker build -t your-image-name .
```

Replace `your-image-name` with your desired image name.

#### 4. Run the Docker Container

Once the image is built, you can start the Docker container using the following command:

```bash
docker run -d -p 4000:4000 --name your-container-name your-image-name
```

This command will:

* Run the container in detached mode (`-d`)
* Map port 4000 of the container to port 4000 on the host (`-p 4000:4000`)
* Name the container as specified in `your-container-name`

Replace `your-container-name` and `your-image-name` with your preferred container and image names, respectively.

#### 5. Verify the Container

To check if the container is running correctly, use the following command:

```bash
docker ps
```

You should see your container in the list. To view logs and troubleshoot, use:

```bash
docker logs your-container-name
```

#### 6. Stop and Remove the Container (Optional)

When you're done, stop and remove the container:

```bash
docker stop your-container-name
docker rm your-container-name
```

***

### Docker with Docker compose

You can change container and image name in docker-compose.yml file.

To build image and run container:

```bash
docker-compose up --build -d
```

To stop the containers:

```bash
docker-compose down
```

To rebuild the image:

```bash
docker-compose build
```

To check the status of the running containers:

```bash
docker-compose ps
```

***

### Summary of Commands

Here's a quick summary of the key commands:

```bash
# Build the Docker image with .env
docker build -t your-image-name .

# Run the Docker container
docker run -d -p 4000:4000 --name your-container-name your-image-name

# Check running containers
docker ps

# View container logs
docker logs your-container-name

# Stop and remove container
docker stop your-container-name
docker rm your-container-name

# Docker with Docker Compose file
docker-compose up --build -d
docker-compose build
docker-compose down
docker-compose ps
```

***

That's it! You now have a full guide for setting up, building, and running your Docker container for **Alian hub**.

***

## Docker Container and Image Management

After building your Docker image and running your container, you might want to **stop** and **remove** them. Below are the steps to do so.

### 1. **Stop and Remove the Running Docker Container**

To stop a running container, use the following command:

```bash
docker stop <container_name_or_id>
```

For example:

```bash
docker stop my-app-container
```

Once the container is stopped, you can remove it using the command:

```bash
docker rm <container_name_or_id>
```

For example:

```bash
docker rm my-app-container
```

If you want to **stop and remove** the container in one command, you can do:

```bash
docker rm -f <container_name_or_id>
```

#### 2. **Remove the Docker Image**

To remove a Docker image after it has been built, use the following command:

```bash
docker rmi <image_name_or_id>
```

For example:

```bash
docker rmi my-app-image
```

If you have multiple tags or versions of an image, you might want to remove them all. You can use the `-f` (force) flag to force the removal of the image even if there are existing containers associated with it.

```bash
docker rmi -f <image_name_or_id>
```

#### 3. **List All Containers and Images**

To check which containers and images are currently available on your system, use the following commands:

* **List all containers (including stopped ones):**

  ```bash
  docker ps -a
  ```
* **List all images:**

  ```bash
  docker images
  ```

#### Example

1. Stop and remove the container:

   ```bash
   docker stop my-app-container
   docker rm my-app-container
   ```
2. Remove the Docker image:

   ```bash
   docker rmi my-app-image
   ```

***

### Resources

[https://docs.docker.com/reference/cli/docker](https://docs.docker.com/reference/cli/docker/)

[https://docs.docker.com/reference/cli/docker/compose](https://docs.docker.com/reference/cli/docker/compose/)

[https://www.geeksforgeeks.org/docker-instruction-commands](https://www.geeksforgeeks.org/docker-instruction-commands/)

<https://docs.docker.com/get-started/docker_cheatsheet.pdf>


# Docker Image Hosting Guide

## Docker Image Hosting Guide

This document provides the steps to build, host, and manage Docker images for your project.

### Prerequisites

Before starting, ensure that you have the following:

* **Docker** installed on your local machine: [Download Docker here](https://docs.docker.com/get-docker/)
* **Docker Hub Account** (or a private registry if using one)

### Steps

#### 1. Build the Docker Image

**1. To create a Docker image for your project, use the following command from the project directory:**

```bash
docker build -t your-image-name .
```

Replace your-image-name with your desired image name. This command will:

* Use the Dockerfile in the current directory to build the image
* Tag the image with the specified name

**2. Tagging the Image** If you want to tag your image with a version or other identifier (e.g., v1, latest), use the following:

```bash
docker tag your-image-name your-dockerhub-username/your-image-name:v1
```

This will create a new tag v1 for your image.

**3. Log in to Docker Hub** Before pushing an image to Docker Hub, ensure you're logged in:

```bash
docker login
```

Enter your Docker Hub credentials when prompted, or simply go to the activation route and add the code displayed in the terminal.

**4. Push the Image to Docker Hub** Once your image is built and tagged, push it to Docker Hub (or your private registry) using the following command:

```bash
docker push your-dockerhub-username/your-image-name:v1
```

**5. Hosting Docker Image on a Private Registry (Optional)** If you're using a private registry (e.g., AWS ECR, Google Container Registry), follow the provider's documentation to:

* Set up a registry (e.g., create a repository in AWS ECR).
* Authenticate to the registry.
* Push the image to the private registry.

```bash
# Tag the image
docker tag your-image-name your-private-registry-url/your-image-name:v1
# Push the image
docker push your-private-registry-url/your-image-name:v1
```

> **Note**: Make sure port is 4000.

That's it! You now have a complete guide for pushing a Docker image to any image registry. You can now use this image and deploy it.

***

### For checking the Docker image locally

**1. Pull the Docker Image from Docker Hub** To pull the image from Docker Hub or a private registry, use:

```bash
docker pull your-dockerhub-username/your-image-name:v1
```

For a private registry, use:

```bash
docker pull your-private-registry-url/your-image-name:v1
```

**2. Run the Docker Image** Once the image is pulled, run the container using:

```bash
docker run -d -p 4000:4000 --name your-container-name your-dockerhub-username/your-image-name:v1
```

This will:

* Run the container in detached mode (-d)
* Map port 4000 of the container to port 4000 on the host (-p 4000:4000)

**3. Update and Rebuild the Docker Image(optional)** If you make changes to your application and want to update the image, follow these steps:

* **3.1. Make changes to your code.**

```bash
docker build -t your-image-name .
```

* **3.2. Tag the updated image:**

```bash
docker tag your-image-name your-dockerhub-username/your-image-name:v2
```

* **3.3. Push the updated image:**

```bash
docker push your-dockerhub-username/your-image-name:v2
```

### Summary of Commands

```bash
# Build the Docker image
docker build -t your-image-name .

# Tag the Docker image
docker tag your-image-name your-dockerhub-username/your-image-name:v1

# Log in to Docker Hub
docker login

# Push the image to Docker Hub
docker push your-dockerhub-username/your-image-name:v1

# Pull the image from Docker Hub
docker pull your-dockerhub-username/your-image-name:v1

# Run the Docker container
docker run -d -p 4000:4000 --name your-container-name your-dockerhub-username/your-image-name:v1

# Rebuild the image after changes
docker build -t your-image-name .

# Remove a Docker container
docker stop your-container-name
docker rm your-container-name

# Remove a Docker image
docker rmi your-image-name:v1
```

***

#### Resources

[https://docs.digitalocean.com/products/app-platform/how-to/deploy-from-container-images](https://docs.digitalocean.com/products/app-platform/how-to/deploy-from-container-images/) <https://devcenter.heroku.com/articles/container-registry-and-runtime> <https://docs.render.com/deploy-an-image>


# TROUBLESHOOTING


# FAQs

Get the answers to some of the questions that are asked most often.

### What is Alian Hub?

Alian Hub is a full-featured project management solution that streamlines the administration of routine business operations.

### **What tech stack is used in developing Alian Hub?**

The tech stack used in Alian Hub is as mentioned below:

For Front-end: **Vue.js**

For Back-end: **Node.js**

For Database: **MongoDB & RealM**

For Push Notifications: **Firebase**

### Where is my Company Data stored in Alian Hub?

Your data is safely saved in your own database. We do not keep any of your Company data in any form on any of our systems.

### Can I receive notifications via emails?

Yes, you can receive email, browser and mobile notifications for all the activities on Alian Hub. You can turn it on from Settings> Notifications> Advanced Permissions.

### How to add a new Company?

To add a New Company, Go to Settings > Personal Settings > Company > Add New.

### How do I add my staff on Alian Hub?

To add a member in your company or to invite a user, Go to Settings > Members. Enter email in the text box on the top right side, choose the role and designation and press invite. The user will get an invitation email and can join by that mail.

### How can I remove people out of my company on Alian Hub?

To remove a member from your team, Go to Settings > Members > search the name > ![](/files/2xeYRrNHAcFlPeG8jrhW) > Remove Member.

### Where can I change a member's role?

Go to Settings > Members > search the member > edit the role from the dropdown.

### How to edit personal details on Alian Hub?

To edit personal details on Alian Hub, Go to Settings > Personal Settings > My Settings.

### How can I upgrade my plan?

To Upgrade or downgrade your existing plan, Go to Settings > Upgrade.

### What do I need to do to change my password?

If you can't remember the login password or want to reset the passcode, go to the Login screen and click on "Forgot password."  Enter your email address and follow the directions to reset the password.

### How can I create a project?

On the menu bar of the dashboard, Go to Projects. Click on 'New Project', add the details and follow the steps to [create a new project.](https://help.alianhub.com/introduction-to-alian-hub/create-a-new-project)

### Can I edit the project Name?

Yes, you can edit the project name by clicking on the project name in the project dashboard. A text box will be visible to you when you click on the project name. Write the name and press enter.

### Is the project key customizable?

Yes, you can only personalize the key while creating the project. After that, it is not possible to edit it.

### What is use of List View?

The List view displays the tasks associated with a project. The tasks are shown with their respective statuses aligned vertically.

### How to record the hours worked in a task?

To add hours worked on a task or subtask, just click on that task or subtask. Click on the "Add time" button in the Time Log. Choose the date you want to log the time for from the calendar. Add the task's start and end work times. Write down the description and then save.

### Where can I see a project's workload?

You can check workload of a particular project by adding Workload View to the project. To view workload of all the projects; on menu bar, Go to Timesheets > Workload.

### How to generate Milestone Report?

Milestone report is automatically generated as you create milestone in any project. To view the report; On menu bar,  Go to Reports > Milestone report.&#x20;

### How to close a project?

To close a project, go to project detail page and click on 'Close Project' given in the bottom of the page. You can also close a project from Settings. Go to Settings > Projects > ![](/files/MDAzfZ8eVp5BpEOZgx7J) > Close project.&#x20;

### How to reopen a project?

To reopen a project, Go to Settings > Projects > Close Projects > ![](/files/O0fRulDcc27HM34TC3YN) > Reopen Project.

### How to remove Table View from the Project?

To remove any view from the project, Go to Settings > Projects > Required Views > Unselect the view.

### How to make a Project Private?

You can choose your project sharing option at the time of creating any project. To edit sharing setting of any project, Go to Settings > Projects > Share With > Make Private.

### How can I create a task?

You can add a new task to a sprint or folder. Click on the sprint or folder and then on the right section of the sprint view, select 'New Task'.

### How can I edit project permissions for the members of my company?

To manage the permissions of members of a company on Alian Hub, Go to Settings > Security & Permissions > Advanced Permissions.

### From where can I create a new sprint?

To create Sprint, Go to Projects, click on ![](/files/2xeYRrNHAcFlPeG8jrhW) right of the project name, select 'List', add the name of the sprint and press enter or click on the tick mark.&#x20;

### Can I send audio messages in real-time in project chat?

Yes, you can send audio messages in real time by clicking on ![](/files/Epht3G7wBJ1UtHYXQyOJ)icon provided right next to the text box.

### Where can I get access to files shared in a project?

You can find ![](/files/4FdFW1ZDdSaA1zVh8I8E)icon on the right top of the project view. By clicking on it, you can get the list of files shared in the project. You can also search a particular file in the search box.

### What is use of Workload Report?

Workload Report displays the estimated number of hours required to complete a task together with the actual number of hours worked by users on that task.

### What is use of Calendar View?

The work schedule for a month can be seen in the Calendar View. You can look the tasks associated with the project at any point in time, from the very beginning to the very end. The Calendar would be full of tasks that need to be done, highlighted with the color of the status.

### What is Embed View?

With Embed View, you may see the content of a particular URL without opening it in several tabs. This view will allow you to see the whole page without any interruptions.

### How to add Estimated hours?

You can add estimated hours by going to the 'Task Detail' page. On the right section, click on '00h 00m'. Select the month and week of work and add the estimated work time in HH and MM box with respect to the date. Lastly, click on Save.

### How to add Checklist in any project?

Go to 'Project Details'. In checklist, click on '+' and type your item name and press enter.&#x20;


