@posiwise/smart-crm 0.0.20 → 0.0.21

package/src/lib/private/components/smart-crm-accounts/smart-crm-account-info/smart-crm-account-info.component.html

@@ -0,0 +1,785 @@
+<div class="row">
+  <div class="col-12 mb-0">
+    <div class="me-auto mb-0">
+      <h2 class="mb-0">
+        <a href="javascript:void(0)"
+          (click)="back()"
+          class="previous"><i class="fa fa-arrow-alt-circle-left" aria-hidden="true"></i></a>
+        Account Info
+      </h2>
+    </div>
+    <a class="btn btn-sm btn-outline-primary float-end mb-3"
+      data-cy="add-opportunities"
+      (click)="navigateToAddOpportunities()">
+      <i class="fa fa-plus-circle" aria-hidden="true"></i>
+      {{ 'Crm.OpportunitiesMessage.AddOpportunity' | transloco }}
+    </a>
+  </div>
+  <div class="w-100 text-center mt-3"
+  *ngIf="!isDataLoaded">
+  <p-progressSpinner> </p-progressSpinner>
+  </div>
+  <div *ngIf="isDataLoaded">
+    <div class="row">
+      <div class="col-12 col-md-4">
+        <div class="user-info p-3 card pb-0 h-auto">
+          <div class="mb-2 text-center">
+            <a class="profile-image">
+              <img alt="Profile Image"
+                width="100"
+                height="100"
+                [src]="getAccountLogo(data?.company_url)"
+                class="img-fluid company-logo"
+                onerror="this.onerror=null;this.src='assets/img/icons/company.png';" />
+            </a>
+          </div>
+          <div class="mb-4 d-flex justify-content-between align-items-center">
+            <h4 class="d-inline-block">
+              About <span *ngIf="data?.id">{{ data.name }}</span>
+            </h4>
+            <a href="javascript:void(0);"
+              *ngIf="isFormEdit"
+              class="btn btn-sm btn-outline-primary float-end"
+              (click)="isFormEdit = !isFormEdit; this.getAllSubscriptionMembers()">{{ 'Button.Edit' | transloco }}</a>
+          </div>
+          <form [formGroup]="aboutControls"
+            [class.isDisabled]="isFormEdit">
+            <div class="mb-3">
+              <label class="label mb-0">{{ 'Crm.AccountMessage.Name' | transloco }}</label>
+              <input type="text"
+                class="form-control rounded-0 ps-1 user-value"
+                formControlName="name"
+                [ngClass]="{ 'is-invalid': submitted && f['name'].errors }" />
+            </div>
+            <div class="mb-3">
+              <label class="label mb-0">{{
+                            'Crm.AccountMessage.Location' | transloco
+                        }}</label>
+              <input ngx-gp-autocomplete
+                class="form-control rounded-0 ps-1 user-value"
+                #places="ngx-places"
+                formControlName="location"
+                (onAddressChange)="handleAddressChange($event)"
+                [ngClass]="{ 'is-invalid': submitted && f['location'].errors }" />
+            </div>
+            <div class="mb-3"
+              *ngIf="countries$ | async as countries">
+              <label>{{ 'Crm.AccountMessage.Country' | transloco
+                            }}<span class="text-danger required-icon">*</span>
+              </label>
+              <select class="form-select"
+                formControlName="country"
+                [ngClass]="{ 'is-invalid': submitted && f['country'].errors }">
+                <option *ngFor="let country of countries"
+                  [value]="country.code">
+                  {{ country.name }}
+                </option>
+              </select>
+            </div>
+            <div class="mb-3 ui-fluid skills-modal">
+              <label class="label mb-2">{{ 'Crm.AccountMessage.Owner' | transloco }}</label>
+              <p class="form-control d-block pb-2 ps-1 user-value"
+                *ngIf="isFormEdit && data?.owner_id">
+                {{ data?.owner?.first_name }} {{ data?.owner?.last_name }}
+              </p>
+              <p-autoComplete *ngIf="!isFormEdit || !data?.owner_id"
+                [suggestions]="filteredOwner"
+                formControlName="owner_id"
+                dataKey="id"
+                field="first_name"
+                [dropdown]="true"
+                (completeMethod)="search($event)"
+                styleClass="w-100"
+                placeholder="Search owner"
+                [multiple]="false">
+              </p-autoComplete>
+            </div>
+            <div class="mb-3">
+              <label class="label mb-0">{{
+                            'Crm.AccountMessage.CompanyUrl' | transloco
+                        }}</label>
+              <a [href]="data?.company_url"
+                target="blank"
+                class="form-control d-block pb-2 ps-1 user-value"
+                *ngIf="isFormEdit && data?.company_url">{{ data?.company_url }}</a>
+              <input *ngIf="!isFormEdit || !data?.company_url"
+                type="text"
+                class="form-control rounded-0 ps-1 user-value"
+                formControlName="company_url"
+                [ngClass]="{ 'is-invalid': submitted && f['company_url'].errors }" />
+            </div>
+            <div class="mb-3"
+              *ngIf="data?.tel">
+              <label class="label mb-0">{{ 'Crm.AccountMessage.Tel' | transloco }}</label>
+              <input type="text"
+                class="form-control rounded-0 ps-1 user-value"
+                formControlName="tel" />
+            </div>
+            <div class="mb-3"
+              *ngIf="organizationTypes$ | async as types">
+              <label>{{ 'Organization.OrganizationType' | transloco }}</label>
+              <div class="mb-3">
+                <select formControlName="organization_type_id"
+                  class="form-control form-select"
+                  [ngClass]="{ 'is-invalid': submitted && f['organization_type_id'].errors }">
+                  <option *ngFor="let option of types['organization_types']"
+                    [value]="option.id">
+                    {{ option.name }}
+                  </option>
+                </select>
+              </div>
+            </div>
+            <div class="mb-3"
+              *ngIf="organizationIndustries$ | async as industries">
+              <label>{{ 'Organization.OrganizationIndustry' | transloco }}</label>
+              <select formControlName="organization_industry_id"
+                class="form-control form-select"
+                [ngClass]="{ 'is-invalid': submitted && f['organization_industry_id'].errors }">
+                <option *ngFor="let option of industries['organization_industries']"
+                  [value]="option.id">
+                  {{ option.name }}
+                </option>
+              </select>
+            </div>
+            <div class="mb-3"
+              *ngIf="organizationSizes$ | async as sizes">
+              <label>{{ 'Crm.AccountMessage.Size' | transloco }}</label>
+              <select formControlName="organization_size_id"
+                class="form-control form-select"
+                [ngClass]="{ 'is-invalid': submitted && f['organization_size_id'].errors }">
+                <option *ngFor="let option of sizes['organization_sizes']"
+                  [value]="option.id">
+                  {{ option.name }}
+                </option>
+              </select>
+            </div>
+            <div class="mb-3">
+              <label>{{ 'Crm.AccountMessage.Status' | transloco }}</label>
+              <select formControlName="status"
+                class="form-control form-select"
+                [ngClass]="{ 'is-invalid': submitted && f['status'].errors }">
+                <option *ngFor="let option of status"
+                  [value]="option">{{ option }}</option>
+              </select>
+            </div>
+            <div class="mb-3">
+              <label>{{ 'Crm.AccountMessage.Priority' | transloco }}</label>
+              <select formControlName="priority"
+                class="form-control form-select"
+                [ngClass]="{ 'is-invalid': submitted && f['priority'].errors }">
+                <option *ngFor="let option of priority"
+                  [value]="option">
+                  {{ option }}
+                </option>
+              </select>
+            </div>
+            <div class="mb-3">
+              <label>{{ 'Crm.AccountMessage.Source' | transloco }}</label>
+              <select formControlName="crm_source_id"
+                class="form-control form-select"
+                [ngClass]="{ 'is-invalid': submitted && f['crm_source_id'].errors }">
+                <option *ngFor="let option of source"
+                  [value]="option.id">
+                  {{ option.name }}
+                </option>
+              </select>
+            </div>
+            <div class="mb-3">
+              <pw-input-container [label]="'Crm.AccountMessage.Description' | transloco"
+                name="description">
+                <textarea rows="5"
+                  type="text"
+                  class="form-control"
+                  formControlName="description"
+                  id="description"
+                  [ngClass]="{ 'is-invalid': submitted && f['description'].errors }"></textarea>
+              </pw-input-container>
+            </div>
+            <div *ngIf="!isFormEdit"
+              class="text-end form-action-buttons">
+              <input type="button"
+                class="btn btn-outline-primary"
+                (click)="isFormEdit = !isFormEdit; getAccountDetails()"
+                value="Cancel" />
+                <button type="submit"
+                [buttonBusy]="buttonBusy"
+                class="btn btn-primary ms-3"
+                (click)="updateAccountInfo()">
+                {{ 'Button.Submit' | transloco }}
+              </button>
+            </div>
+          </form>
+        </div>
+      </div>
+      <div class="col-12 col-md-8">
+        <ul ngbNav
+          #nav="ngbNav"
+          class="nav-tabs">
+          <li [ngbNavItem]="1">
+            <a ngbNavLink>Notes</a>
+            <ng-template ngbNavContent>
+              <form [formGroup]="actionControls"
+                (ngSubmit)="onSave()">
+                <textarea class="form-control"
+                  formControlName="comment"
+                  rows="6"></textarea>
+                <p class="text-danger"
+                  *ngIf="
+                                    actionControls.get('comment').touched &&
+                                    actionControls.get('comment').invalid
+                                ">
+                  Note Required
+                </p>
+                <div *ngIf="actions?.length"
+                  class="d-block clear-both pt-3">
+                  <ng-container *ngFor="let action of actions; index as i">
+                    <button *ngIf="action.visible"
+                      type="button"
+                      [class.active]=""
+                      class="btn btn-sm me-2 btn-outline-primary mb-2 action-btn"
+                      (click)="showDatePicker($event, action.id); d.toggle()">
+                      {{ action.name }}
+                    </button>
+                  </ng-container>
+                  <div class="text-danger"
+                    *ngIf="submitAction && actionControls.get('crm_action_id').invalid">
+                    Please select an action
+                  </div>
+                  <div class="row mt-3">
+                    <div class="col-12 col-sm-4">
+                      <div class="input-group">
+                        <input class="form-control"
+                          placeholder="dd-mm-yyyy"
+                          formControlName="when"
+                          ngbDatepicker
+                          #d="ngbDatepicker"
+                          (click)="d.toggle()" />
+                      </div>
+                    </div>
+                    <div class="ui-fluid skills-modal col-sm-4 ps-0">
+                      <p-autoComplete [suggestions]="filteredContact"
+                        formControlName="crm_contact_id"
+                        dataKey="id"
+                        field="displayName"
+                        [dropdown]="true"
+                        (completeMethod)="searchContact($event)"
+                        (onSelect)="selectContact($event)"
+                        (onBlur)="OnContactBlur()"
+                        styleClass="w-100"
+                        placeholder="Search contact"
+                        [multiple]="false"
+                        (onDropdownClick)="onDropdownClick()">
+                      </p-autoComplete>
+                    </div>
+                    <div class="col-sm-4 pe-0 completed-toggle">
+                      <div class="mb-3">
+                        <ui-switch checkedLabel="completed"
+                          uncheckedLabel="open"
+                          formControlName="completed"
+                          name="completed">
+                        </ui-switch>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div class="float-end">
+                  <a class="btn btn-outline-primary me-0 me-sm-2"
+                    (click)="openModal(content)">{{ 'Upload file' | transloco }}</a>
+                  <button type="submit"
+                    [buttonBusy]="buttonBusy"
+                    [disabled]="buttonDisable"
+                    class="btn btn-primary mt-2 mb-2">Submit Note</button>
+                </div>
+                <div *ngIf="buttonDisable"
+                  class="no-actions pt-4">
+                  <pw-no-data [withImage]="true" [message]="
+                                        'Crm.AccountMessage.NoActionsInAccountInfoMessage' | transloco
+                                    ">
+                  </pw-no-data>
+                </div>
+              </form>
+              <div class="w-100 text-center mt-3"
+                *ngIf="!isLoaded">
+                <p-progressSpinner strokeWidth="2"> </p-progressSpinner>
+              </div>
+              <div *ngIf="!accountComments?.length && isLoaded"
+                class="no-actions pt-2">
+                <pw-no-data [withImage]="true" [message]="'Crm.AccountMessage.NoActionsMessage' | transloco">
+                </pw-no-data>
+              </div>
+              <div *ngIf="accountComments?.length">
+                <div id="timeline"
+                  class="pt-3 clear-both timeline-center timeline-wrapper timeline-container"
+                  infiniteScroll
+                  [infiniteScrollDistance]="2"
+                  [infiniteScrollThrottle]="50"
+                  [infiniteScrollContainer]="selector"
+                  [fromRoot]="true"
+                  (scrolled)="onScrollTimeline()">
+                  <ul class="timeline">
+                    <li class="timeline-line"></li>
+                  </ul>
+                  <ul class="timeline">
+                    <li class="timeline-line"></li>
+                    <li class="timeline-item"
+                      [ngClass]="{ 'mt-5': odd || last }"
+                      *ngFor="
+                                            let item of accountComments;
+                                            index as i;
+                                            let odd = odd;
+                                            let even = even;
+                                            let last = last;
+                                            let first = first
+                                        ">
+                      <div class="timeline-badge">
+                        <span class="bg-red bg-lighten-1">
+                          <span class="timeline-year">
+                            <span class="d-block date-year">{{
+                                                        item.when | date: 'medium' | slice: 0:3
+                                                    }}</span>
+                            <span>{{ item.year }}</span></span>
+                        </span>
+                      </div>
+                      <div class="timeline-card shadow card pb-0 rounded border-grey border-lighten-2 position-static">
+                        <div class="card-header py-4">
+                          <div class="mb-0 clearfix">
+                            <textarea type="text"
+                              name="comment"
+                              class="comment-field form-control p-0"
+                              [(ngModel)]="item.comment">{{ item.comment }}</textarea>
+                            <div class="auto-complete mb-3 ui-fluid skills-modal">
+                              <p-autoComplete [(ngModel)]="item.crm_contact"
+                                [suggestions]="filteredContactComment"
+                                dataKey=" id "
+                                field="first_name"
+                                dropdown=" true "
+                                (completeMethod)="
+                                                                searchContactInComment($event)
+                                                            "
+                                (onSelect)="selectCommentContact($event)"
+                                (onBlur)="OnContactBlur()"
+                                styleClass=" w-100 "
+                                placeholder=" Search contact "
+                                [multiple]="false"
+                                (onDropdownClick)="onDropdownClick()">
+                              </p-autoComplete>
+                            </div>
+                            <p class="float-start mb-0"
+                              *ngIf="
+                                                            !showFullComment || item.id !== commentId
+                                                        ">
+                              {{ item.comment | slice: 0:170
+                                                        }}<a *ngIf="item.comment.length > 170"
+                                class="text-secondary"
+                                (click)="
+                                                                showFullComment = true;
+                                                                commentId = item.id
+                                                            ">...show more
+                              </a>
+                            </p>
+                            <p class="float-start mb-0"
+                              *ngIf="showFullComment && item.id === commentId">
+                              {{ item.comment }}
+                              <a *ngIf="
+                                                                item.comment.length > 170 &&
+                                                                showFullComment
+                                                            "
+                                (click)="showFullComment = false"
+                                class="text-secondary">...show less</a>
+                            </p>
+                            <button class="btn btn-md edit-btn float-end py-0"
+                              (click)="showEditControls($event, item)"
+                              *ngIf="userId === item.owner_id || hasAccess">
+                              <i
+                                                            class="fa fa-edit edit-icon"
+                                                            aria-hidden="true"
+                                                        ></i>
+                            </button>
+                          </div>
+                          <div class="card-subtitle text-muted my-0 clearfix">
+                            <div class="float-start">
+                              <span *ngIf="!updating || actionId !== item.id"
+                                class="font-small-3">
+                                {{ item.when }}</span>
+                              <input *ngIf="updating && actionId === item.id"
+                                placeholder="dd-mm-yyyy"
+                                value="{{ item.when }}"
+                                ngbDatepicker
+                                #d="ngbDatepicker"
+                                (focus)="d.toggle()"
+                                (dateSelect)="onDateSelect($event, item)" />
+                            </div>
+                            <button type=" button"
+                              class="btn btn-sm float-end when-btn py-0"
+                              *ngIf="userId === item.owner_id || hasAccess"
+                              (click)="showDatePickerUpdate(item.id)">
+                              <i
+                                                            class="fa fa-edit edit-icon"
+                                                            aria-hidden="true"
+                                                        ></i>
+                            </button>
+                          </div>
+                          <p [class.text-danger]="!item.color"
+                            *ngIf="!item.cancelled && !item.completed"
+                            class="mb-0">
+                            {{ item.due }}
+                          </p>
+                          <a class="text-secondary action-owner"
+                            *ngIf="item.crm_contact"
+                            [routerLink]="[
+                                                        '/' + subscription?.slug + routers.contactInfo,
+                                                        item.crm_contact.id
+                                                    ]">{{ item.crm_contact.first_name }}
+                            {{ item.crm_contact.last_name || '' }}</a>
+                          <p>
+                            By
+                            {{
+                                                        item.owner.first_name +
+                                                            ' ' +
+                                                            item.owner.last_name
+                                                    }}
+                          </p>
+                          <span class="badge bg-primary">{{
+                                                    item?.crm_action?.name
+                                                }}</span>
+                          <span *ngIf="
+                                                        !item.completed &&
+                                                        (userId === item.owner_id || hasAccess)
+                                                    "
+                            class="badge bg-success ms-2">Open</span>
+                          <a *ngIf="
+                                                        !item.completed &&
+                                                        (userId === item.owner_id || hasAccess)
+                                                    "
+                            ngbTooltip="Set as completed"
+                            class="me-3 ms-3"
+                            href="javascript:void(0);"
+                            (click)="
+                                                        setAsCompletedOrUncompleted(
+                                                            item.id,
+                                                            item,
+                                                            item.completed
+                                                        )
+                                                    ">
+                            <i
+                                                        class="fa fa-tasks completed"
+                                                        aria-hidden="true"
+                                                    ></i>
+                          </a>
+                          <a *ngIf="
+                                                        !item.cancelled &&
+                                                        !item.completed &&
+                                                        (userId === item.owner_id || hasAccess)
+                                                    "
+                            ngbTooltip="Set as cancelled"
+                            href="javascript:void(0);"
+                            (click)="setAsCancelled(item.id, item)">
+                            <i
+                                                        class="fa fa-times delete-icon"
+                                                        aria-hidden="true"
+                                                    ></i>
+                          </a>
+                          <a *ngIf="
+                                                        item.completed &&
+                                                        (userId === item.owner_id || hasAccess)
+                                                    "
+                            ngbTooltip="Set as UnCompleted"
+                            href="javascript:void(0);"
+                            (click)="
+                                                        setAsCompletedOrUncompleted(
+                                                            item.id,
+                                                            item,
+                                                            item.completed
+                                                        )
+                                                    "
+                            class="ms-2">
+                            <i
+                                                        class="far fa-window-close"
+                                                        aria-hidden="true"
+                                                    ></i>
+                          </a>
+                          <div class="control-btns mt-3 text-end form-action-buttons">
+                            <button type="button"
+                              class="btn btn-sm btn-outline-default me-2"
+                              (click)="showEditControls(undefined, '')">
+                              {{ 'Button.Cancel' | transloco }}
+                            </button>
+                            <button class="btn btn-sm btn-primary"
+                              type="button"
+                              (click)="updateComment(item)">
+                              {{ 'Button.Submit' | transloco }}
+                            </button>
+                          </div>
+                        </div>
+                      </div>
+                    </li>
+                  </ul>
+                </div>
+              </div>
+            </ng-template>
+          </li>
+          <li [ngbNavItem]="2">
+            <a ngbNavLink>Contacts</a>
+            <ng-template ngbNavContent>
+              <div class="row">
+                <div class="col-12 mb-3">
+                  <a class="btn btn-sm btn-outline-primary float-end"
+                    data-cy="add-contact"
+                    [routerLink]="[
+                                        '/' + subscription?.slug + routers.contactAdd,
+                                        accountId
+                                    ]">
+                    <i class="fa fa-plus-circle" aria-hidden="true"></i>
+                    {{ 'Crm.ContactMessage.AddContact' | transloco }}
+                  </a>
+                </div>
+              </div>
+              <div class="primeng-datatable-container table-responsive"
+                [class.hideTable]="totalRecordsUnFiltered === 0">
+                <p-table class="table"
+                  #dt
+                  [value]="contacts"
+                  [paginator]="totalRecords !== 0"
+                  [rows]="PAGE_SIZE"
+                  [totalRecords]="totalRecords"
+                  [loading]="loading"
+                  [lazy]="true"
+                  (onLazyLoad)="onLazyLoad($event)"
+                  [customSort]="true">
+                  <ng-template pTemplate="caption">
+                    <div class="text-end">
+                      <i class="fa fa-search mt-2 me-2" aria-hidden="true"></i>
+                      <input type="text"
+                        [(ngModel)]="searchText"
+                        pInputText
+                        size="50"
+                        placeholder="Search cosntact..."
+                        (input)="dt.filterGlobal($event.target.value, 'contains')"
+                        class="mw-90" />
+                    </div>
+                  </ng-template>
+                  <ng-template pTemplate="header">
+                    <tr>
+                      <th scope="true"
+                        pSortableColumn="first_name">
+                        {{ 'Label.Name' | transloco }}
+                        <p-sortIcon field="first_name"></p-sortIcon>
+                      </th>
+                      <th scope="true"
+                        pSortableColumn="owner_id">
+                        {{ 'Crm.ContactMessage.ContactOwner' | transloco }}
+                        <p-sortIcon field="owner_id"></p-sortIcon>
+                      </th>
+                      <th scope="true"
+                        pSortableColumn="headline">
+                        {{ 'Crm.ContactMessage.Headline' | transloco }}
+                        <p-sortIcon field="headline"></p-sortIcon>
+                      </th>
+                      <th scope="true">{{ 'Label.Actions' | transloco }}</th>
+                    </tr>
+                  </ng-template>
+                  <ng-template pTemplate="body"
+                    let-contact>
+                    <tr>
+                      <td data-head="Name"
+                        class="contactname">
+                        <a [routerLink]="[
+                                                    '/' + subscription?.slug + routers.contactInfo,
+                                                    contact.id
+                                                ]">{{
+                                                    contact.first_name + ' ' + contact.last_name
+                                                        | textTruncate: 20
+                                                }}</a>
+                      </td>
+                      <td data-head="OwnerName">
+                        {{ contact.owner | ifNameNullShowEmail }}
+                      </td>
+                      <td data-head="Headline"
+                        class="headline-content">
+                        {{ contact?.headline | textTruncate: 20 }}
+                      </td>
+                      <td data-head="Action">
+                        <ul class="list-unstyled list-inline">
+                          <li ngbTooltip="Show"
+                            class="me-2 me-sm-3"
+                            [routerLink]="[
+                                                        '/' + subscription?.slug + routers.contactInfo,
+                                                        contact.id
+                                                    ]">
+                            <i
+                                                        class="fa fa-eye see-icon"
+                                                        aria-hidden="true"
+                                                    ></i>
+                          </li>
+                          <li *ngIf="
+                                                        hasAccess ||
+                                                        contact.owner_id === userId ||
+                                                        contact.crm_account.owner_id === userId
+                                                    "
+                            ngbTooltip="Add opportunity"
+                            class="me-2 me-sm-3"
+                            [routerLink]="[
+                                                        '/' +
+                                                            subscription?.slug +
+                                                            routers.opportunityAdd
+                                                    ]"
+                            [queryParams]="{ contact_id: contact.id }">
+                            <i
+                                                        class="fa fa-plus-circle add-icon"
+                                                        aria-hidden="true"
+                                                    ></i>
+                          </li>
+                          <li *ngIf="
+                                                        hasAccess ||
+                                                        contact.owner_id === userId ||
+                                                        contact.crm_account.owner_id === userId
+                                                    "
+                            ngbTooltip="Edit"
+                            class="me-2 me-sm-3"
+                            [routerLink]="[
+                                                        '/' +
+                                                            subscription?.slug +
+                                                            routers.contactDetails,
+                                                        contact.id
+                                                    ]">
+                            <i
+                                                        class="fa fa-edit edit-icon"
+                                                        aria-hidden="true"
+                                                    ></i>
+                          </li>
+                          <li *ngIf="
+                                                        hasAccess ||
+                                                        contact.owner_id === userId ||
+                                                        contact.crm_account.owner_id === userId
+                                                    "
+                            ngbTooltip="Delete"
+                            class="me-2 me-sm-3">
+                            <i
+                                                        class="fa fa-trash delete-icon"
+                                                        (click)="onDeleteContact(contact.id)"
+                                                        aria-hidden="true"
+                                                    ></i>
+                          </li>
+                        </ul>
+                      </td>
+                    </tr>
+                  </ng-template>
+                </p-table>
+                <div *ngIf="totalRecords === 0 && totalRecordsUnFiltered !== 0">
+                  <pw-no-data [withImage]="true" [message]="'Search.NoDataMessage'| transloco" [description]="'Search.NoDataDescription' | transloco" >
+        </pw-no-data>
+                </div>
+                <span class="total-records-count" *ngIf="totalRecords !== 0">{{ 'Label.Total' | transloco }}: {{ totalRecords }}</span>
+              </div>
+              <div *ngIf="totalRecordsUnFiltered === 0">
+                <pw-no-data [withImage]="true" [message]="'Crm.ContactMessage.ContactsAdminMessage' | transloco">
+                </pw-no-data>
+              </div>
+            </ng-template>
+          </li>
+          <li [ngbNavItem]="3">
+            <a ngbNavLink>Versioning</a>
+            <ng-template ngbNavContent>
+              <div *ngFor="let versioning of accountVersioning">
+                <p>
+                  <strong>Event: </strong>{{ versioning.event }} |
+                  <strong>Author: </strong><a *ngIf="versioning?.author"
+                    [routerLink]="['/members', versioning?.author?.slug]">{{ versioning?.author | ifNameNullShowEmail }}</a>
+                  | <strong>Created at: </strong>{{ versioning.created_at | dateFormat: 'datetime' }}<br />
+                  <strong>Object: </strong>{{ versioning.object | json }}
+                </p>
+                <hr />
+              </div>
+              <div *ngIf="accountVersioning?.length === 0">
+                <pw-no-data [withImage]="true" [message]="'Crm.AccountMessage.NoVersionsMessage' | transloco">
+                </pw-no-data>
+              </div>
+            </ng-template>
+          </li>
+          <li [ngbNavItem]="4">
+            <a ngbNavLink>Files</a>
+            <ng-template ngbNavContent>
+              <pw-smart-crm-company-files [accountId]="accountId"></pw-smart-crm-company-files>
+            </ng-template>
+          </li>
+        </ul>
+        <div [ngbNavOutlet]="nav"></div>
+      </div>
+    </div>
+  </div>
+</div>
+<ng-template #content
+  let-modal>
+  <div class="modal-header">
+    <h3 class="modal-title mb-0 p-0">{{ 'Upload File' | transloco }}</h3>
+    <button type="button"
+      class="btn-close float-end"
+      aria-label="Close"
+      (click)="modal.dismiss()">
+
+    </button>
+  </div>
+  <div class="modal-body">
+    <small> {{ 'User.Profile.PictureMessage' | transloco }}</small>
+    <div class="row p-2">
+      <div class="col-12">
+        <div class="upload-box">
+          <div class="upload-box-content">
+            <div class="drop-container"
+              ngFileDrop
+              [options]="options"
+              (uploadOutput)="onUploadOutput($event)"
+              [uploadInput]="uploadInput">
+              <p>
+                Drag files here or
+                <label class="upload-button">
+                  <input type="file"
+                    ngFileSelect
+                    [options]="options"
+                    (uploadOutput)="onUploadOutput($event)"
+                    [uploadInput]="uploadInput"
+                    multiple />
+                  browse
+                </label>
+                to upload.
+              </p>
+            </div>
+            <div class="upload-item"
+              *ngFor="let f of files; let i = index">
+              <div class="upload-item-content">
+                <div class="filename">
+                  <div class="filename-left">
+                    <i class="ionicon ion-ios-copy" aria-hidden="true"></i>
+                    <span>{{ f.name }}</span>
+                  </div>
+                </div>
+                <div class="progress-content">
+                  <div class="progress">
+                    <span class="bar"
+                      [style.width]="f?.progress?.data?.percentage + '%'"
+                      [class.is-done]="f['uploaded']"></span>
+                  </div>
+                </div>
+                <div class="progress-text-content">
+                  <span class="progress-text"
+                    [class.is-done]="f['uploaded']">
+                    <span *ngIf="!f['uploaded']">{{ f.progress?.data?.percentage - 1 }}%
+                    </span>
+                    <span *ngIf="f['uploaded']">100 %</span>
+                    <span *ngIf="!f['uploaded']">Uploading...</span>
+                    <span *ngIf="f['uploaded']">Done</span>
+                  </span>
+                  <span class="speed-and-eta-text"
+                    *ngIf="f.progress?.data?.percentage !== 0 && !f['uploaded']">
+                    <span>{{ f.progress?.data?.speedHuman }} </span>
+                    <span>ETA {{ f.progress?.data?.etaHuman }}</span>
+                  </span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</ng-template>