@chat21/chat21-ionic 3.4.30 → 3.4.32-rc1

package/src/app/components/canned-response/canned-response.component.ts

@@ -9,6 +9,7 @@ import { TiledeskAuthService } from 'src/chat21-core/providers/tiledesk/tiledesk
 import { compareValues, htmlEntities } from 'src/chat21-core/utils/utils';
 import { getProjectIdSelectedConversation } from 'src/chat21-core/utils/utils-message';
 import { PLAN_NAME } from 'src/chat21-core/utils/constants';
+import { PERMISSIONS } from 'src/app/utils/permissions.constants';
 
 @Component({
   selector: 'app-canned-response',
@@ -21,7 +22,7 @@ export class CannedResponseComponent implements OnInit {
   @Input() conversationWith: string;
   @Input() conversationWithFullname: string;
   @Input() currentString: string;
-  @Input() canShowCanned: boolean = true;
+  @Input() roles: Array<string>;
   @Input() stylesMap: Map<string, string>;
   @Input() translationMap: Map<string, string>;
   @Output() onLoadedCannedResponses = new EventEmitter<[any]>();
@@ -36,6 +37,7 @@ export class CannedResponseComponent implements OnInit {
 
   public arrowkeyLocation = -1
 
+  PERMISSIONS = PERMISSIONS
   
   private logger: LoggerService = LoggerInstance.getInstance();
   constructor(

package/src/app/components/conversation-detail/message-text-area/message-text-area.component.html

@@ -22,6 +22,13 @@
           {{translationMap?.get('WHATSAPP.LABEL_TEMPLATES')}}
         </ion-button>
       </div>
+      <!-- OPEN TICKET -->
+      <div *ngIf="ticketSection" class="section-option" id="template" tooltip="{{translationMap?.get('TICKET.OPEN_TICKET')}}" placement="top">
+        <ion-button fill="clear" [class.active]="section==='ticket'" (click)="onOpenSection('ticket')" [disabled]="channelType === 'direct'">
+          <ion-icon name="ticket"></ion-icon>
+          {{translationMap?.get('TICKET.OPEN_TICKET')}}
+        </ion-button>
+      </div>
     </div>
 
     <div class="footerContainerAlert">
@@ -50,6 +57,22 @@
     </ion-col>
   </ion-row>
 
+  <ion-row id="ticket" [style.display]="section==='ticket'? 'flex': 'none'">
+    <ion-col col-auto>
+      <div class="placeholder">{{translationMap.get('TICKET.DESCRIPTION')}}</div>
+      <div class="buttons-container">
+          <ion-button name="add" size="small" (click)="onClickTicket('open')">
+            <ion-icon name="add"></ion-icon>
+            {{translationMap?.get('TICKET.CONFIRM')}}
+          </ion-button>
+          <ion-button size="small" color="danger" (click)="onClickTicket('close')">
+            <ion-icon name="close"></ion-icon>
+            {{translationMap?.get('TICKET.CLOSE')}}
+          </ion-button>
+      </div>
+    </ion-col>
+  </ion-row>
+
   <ion-row id="message-text-area" [style.display]="section==='chat' || section ==='templates' || section ==='copilot'? 'flex': 'none'">
 
     <ion-col col-auto style="display: flex;">
@@ -57,7 +80,7 @@
       <div class="buttons-left">
 
         <!-- CANNED RESPONSES -->
-        <ng-container *ngIf="areVisibleCAR && supportMode">
+        <ng-container *ngIf="areVisibleCAR && supportMode && cannedSection">
           <div class="canned-responses-btn-wpr" tooltip="{{translationMap?.get('CANNED_RESPONSES')}}" placement="top">
             <ion-button ion-button fill="clear" class="canned-responses-btn" (click)="openCannedResponses()"
               [disabled]="!conversationWith?.startsWith(CHANNEL_TYPE.SUPPORT_GROUP) || disableTextarea">

package/src/app/components/conversation-detail/message-text-area/message-text-area.component.scss

@@ -183,6 +183,36 @@
     }
 }
 
+#ticket{
+    text-align: center;
+    font-size: 12px;
+
+    .buttons-container{
+        display: flex;
+        justify-content: center;
+        gap: 10px;
+
+        ion-button{
+            font-size: 12px;
+            --padding-top: 4px;
+            --padding-bottom: 4px;
+            --padding-start: 6px;
+            --padding-end: 6px;
+            --ripple-color: transparent;
+            text-transform: unset;
+            height: auto;
+
+            ion-icon{
+                margin-right: 4px;
+            }
+
+            &[name="add"]{
+                --background: var(--basic-blue);
+            }
+        }
+    }
+}
+
 #fileInput {
     position: absolute;
     opacity: 0;

package/src/app/components/conversation-detail/message-text-area/message-text-area.component.ts

@@ -12,7 +12,7 @@ import { LoaderPreviewPage } from 'src/app/modals/loader-preview/loader-preview.
 // Services 
 import { UploadService } from 'src/chat21-core/providers/abstract/upload.service';
 // utils
-import { TYPE_MSG_EMAIL, TYPE_MSG_TEXT, CHANNEL_TYPE } from 'src/chat21-core/utils/constants';
+import { TYPE_MSG_EMAIL, TYPE_MSG_TEXT, CHANNEL_TYPE, TYPE_DIRECT } from 'src/chat21-core/utils/constants';
 // Models
 import { UploadModel } from 'src/chat21-core/models/upload';
 
@@ -26,6 +26,7 @@ import { CopilotService } from 'src/app/services/copilot/copilot.service';
 import { BRAND_BASE_INFO } from 'src/app/utils/utils-resources';
 import { ProjectService } from 'src/app/services/projects/project.service';
 import { Project } from 'src/chat21-core/models/projects';
+import { ProjectUser } from 'src/chat21-core/models/projectUsers';
 
 
 @Component({
@@ -49,6 +50,7 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
   @ViewChild('fileInput', { static: false }) fileInput: any;
 
   @Input() loggedUser: UserModel;
+  @Input() projectUser: ProjectUser;
   @Input() conversationWith: string;
   @Input() channelType: string;
   @Input() channel: string;
@@ -61,16 +63,20 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
   @Input() emailSection: boolean;
   @Input() offlineMsgEmail: boolean;
   @Input() whatsappTemplatesSection: boolean;
+  @Input() ticketSection: boolean
   @Input() isOpenInfoConversation: boolean;
+  @Input() cannedSection: boolean;
   @Input() stylesMap: Map<string, string>;
   @Input() translationMap: Map<string, string>;
   @Input() dropEvent: any;
   @Input() disableTextarea: boolean;
+  @Input() roles: Array<string>;
   @Output() eventChangeTextArea = new EventEmitter<{msg: string, offsetHeight: number}>();
   @Output() eventSendMessage = new EventEmitter<{msg: string, type: string, metadata?: Object, attributes?: Object}>();
   @Output() onClickOpenCannedResponses = new EventEmitter<boolean>();
   @Output() onPresentModalScrollToBottom = new EventEmitter<boolean>();
   @Output() onOpenFooterSection = new EventEmitter<string>();
+  @Output() onOpenTicket = new EventEmitter<boolean>();
 
   public project: Project;
   public conversationEnabled = false;
@@ -162,6 +168,11 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
 
     this.project = this.projectService.getProject();
     this.logger.log('[CONVS-DETAIL] - returnChangeTextArea ngOnChanges in [MSG-TEXT-AREA] project', this.project)
+    if (this.channelType === TYPE_DIRECT) {
+      this.uploadService.initialize();
+    } else {
+      this.uploadService.initialize(this.project?._id);
+    }
     // use case drop
     if (this.dropEvent) {
       this.presentModal(this.dropEvent)
@@ -288,6 +299,17 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
     this.prensentTemplateModal();
   }
 
+  onClickTicket(option: "open" | "close"){
+    this.logger.log('[CONVS-DETAIL][MSG-TEXT-AREA] - onClickTicket', option);
+    switch(option){
+      case "open":
+        this.onOpenTicket.emit();
+      case "close":   
+        this.section = 'chat'
+    }
+
+  }
+
 
   /**
  * 
@@ -384,7 +406,10 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
           this.logger.log('[CONVS-DETAIL][MSG-TEXT-AREA] FIREBASE-UPLOAD presentModal onDidDismiss currentUpload', currentUpload);
           this.logger.log('[CONVS-DETAIL][MSG-TEXT-AREA] FIREBASE-UPLOAD presentModal onDidDismiss detail.data', detail.data);
 
-          that.uploadService.upload(that.loggedUser.uid, currentUpload).then((data) => {
+          const uploadPromise = (that.channelType === TYPE_DIRECT)
+            ? that.uploadService.upload(that.loggedUser.uid, currentUpload)
+            : that.uploadService.uploadFile(that.loggedUser.uid, currentUpload)
+          uploadPromise.then((data) => {
             metadata.src = data.src;
             metadata.downloadURL = data.downloadURL;
             this.logger.log('[CONVS-DETAIL][MSG-TEXT-AREA] FIREBASE-UPLOAD presentModal invio msg metadata::: ', metadata);
@@ -567,8 +592,10 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
       if (!text.includes("/")) {
         this.logger.log('[CONVS-DETAIL][MSG-TEXT-AREA] onKeydown - SEND MESSAGE 1 message: ', message);
         this.logger.log("[CONVS-DETAIL] replaceTagInMessage onKeydown in msg-texarea  SEND MESSAGE 1 message: ", message);
-        this.messageString = '';
+        
         this.sendMessage(text);
+        // this.messageString = '';
+
         this.countClicks = 0
       } else if (text.includes("/") && pos === 0 && this.countClicks > 1 && this.tagsCannedFilter.length > 0) {
         this.logger.log('[CONVS-DETAIL][MSG-TEXT-AREA] onKeydown - tagsCannedFilter.length 2: ', this.tagsCannedFilter.length);
@@ -580,9 +607,10 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
         this.logger.log("[CONVS-DETAIL] replaceTagInMessage onKeydown in msg-texarea SEND MESSAGE 2 this.countClicks: ", this.countClicks);
         this.logger.log("[CONVS-DETAIL][MSG-TEXT-AREA] onKeydown in msg-texarea SEND MESSAGE 2 this.countClicks: ", this.countClicks);
         this.logger.log('[CONVS-DETAIL][MSG-TEXT-AREA] onKeydown - SEND MESSAGE 2 message: ', message);
-        this.messageString = '';
-
+        
         this.sendMessage(text);
+        // this.messageString = '';
+
         this.countClicks = 0
       } else if (text.includes("/") && pos > 0 && this.countClicks > 1 && this.tagsCannedFilter.length > 0 && text.substr(-1) !== '/') {
         this.logger.log('[CONVS-DETAIL][MSG-TEXT-AREA] onKeydown - tagsCannedFilter.length 3: ', this.tagsCannedFilter.length);
@@ -594,17 +622,19 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
         this.logger.log("[CONVS-DETAIL] replaceTagInMessage onKeydown in msg-texarea SEND MESSAGE 2 this.countClicks: ", this.countClicks);
         this.logger.log("[CONVS-DETAIL][MSG-TEXT-AREA] onKeydown in msg-texarea SEND MESSAGE 2 this.countClicks: ", this.countClicks);
         this.logger.log('[CONVS-DETAIL][MSG-TEXT-AREA] onKeydown - SEND MESSAGE 2 message: ', message);
-        this.messageString = '';
-
+        
         this.sendMessage(text);
+        // this.messageString = '';
+
         this.countClicks = 0
       } else if (text.includes("/") && this.tagsCannedFilter.length === 0) {
         this.logger.log('[CONVS-DETAIL][MSG-TEXT-AREA] onKeydown - tagsCannedFilter.length 3: ', this.tagsCannedFilter.length);
         this.logger.log('[CONVS-DETAIL][MSG-TEXT-AREA] onKeydown - SEND MESSAGE 3 message: ', message);
         this.logger.log("[CONVS-DETAIL] replaceTagInMessage onKeydown in msg-texarea SEND MESSAGE 3 message: ", message);
-        this.messageString = '';
-
+        
         this.sendMessage(text);
+        // this.messageString = '';
+
         this.countClicks = 0
 
       }

package/src/app/components/conversation-info/info-content/info-content.component.ts

@@ -70,8 +70,8 @@ export class InfoContentComponent implements OnInit {
     this.route.paramMap.subscribe(params => {
       this.logger.log('[INFO-CONTENT-COMP] initialize params: ', params);
       this.conversationWith = params.get('IDConv');
-      this.conversationWithFullname = params.get('FullNameConv');
-      this.conv_type = params.get('Convtype');
+      this.conversationWithFullname = decodeURIComponent(params.get('FullNameConv'));
+      this.conv_type = decodeURIComponent(params.get('Convtype'));
 
       const conversationWith_segments = this.conversationWith.split('-');
 

package/src/app/components/conversation-info/info-group/info-group.component.ts

@@ -151,27 +151,29 @@ export class InfoGroupComponent implements OnInit, AfterViewInit, OnChanges {
             });
 
           this.contactsService.loadContactDetail(key).pipe(takeUntil(this.unsubscribe$)).subscribe(user => {
-              this.logger.log('InfoGroupComponent group detail loadContactDetail RES', user);
-              // this.logger.log('InfoGroupComponent group detail this.presenceService.BSIsOnline.value()', this.presenceService.BSIsOnline.getValue);
-
-              user.imageurl = this.imageRepoService.getImagePhotoUrl(key)
-              // this.member_array.push({ userid: user.uid, avatar: user.avatar, color: user.color, email: user.email, fullname: user.fullname, imageurl: user.imageurl, userOnline: isOnline })
-              var index = this.member_array.findIndex(m => m.userid === user.uid);
-              this.logger.log('InfoGroupComponent member_array first of push index', index);
-              this.logger.log('InfoGroupComponent member_array first of push', this.member_array);
-              if (index === -1) {
-                this.member_array.push(
-                  {
-                    userid: user.uid,
-                    avatar: user.avatar,
-                    color: user.color,
-                    email: user.email,
-                    fullname: user.fullname,
-                    imageurl: user.imageurl,
-                    userOnline: members_isonline_array[user.uid]['isSignin']
-                  })
-              } else {
-                this.logger.log('InfoGroupComponent member already exist in member_array');
+              if(user){
+                this.logger.log('InfoGroupComponent group detail loadContactDetail RES', user);
+                // this.logger.log('InfoGroupComponent group detail this.presenceService.BSIsOnline.value()', this.presenceService.BSIsOnline.getValue);
+
+                user.imageurl = this.imageRepoService.getImagePhotoUrl(key)
+                // this.member_array.push({ userid: user.uid, avatar: user.avatar, color: user.color, email: user.email, fullname: user.fullname, imageurl: user.imageurl, userOnline: isOnline })
+                var index = this.member_array.findIndex(m => m.userid === user.uid);
+                this.logger.log('InfoGroupComponent member_array first of push index', index);
+                this.logger.log('InfoGroupComponent member_array first of push', this.member_array);
+                if (index === -1) {
+                  this.member_array.push(
+                    {
+                      userid: user.uid,
+                      avatar: user.avatar,
+                      color: user.color,
+                      email: user.email,
+                      fullname: user.fullname,
+                      imageurl: user.imageurl,
+                      userOnline: members_isonline_array[user.uid]['isSignin']
+                    })
+                } else {
+                  this.logger.log('InfoGroupComponent member already exist in member_array');
+                }
               }
             }, (error) => {
               this.logger.error('InfoGroupComponent group detail loadContactDetail - ERROR  ', error);

package/src/app/components/conversations-list/header-conversations-list/header-conversations-list.component.html

@@ -34,7 +34,7 @@
       <!-- <ion-icon name="file-tray-full-outline"></ion-icon> -->
     </ion-button>
 
-    <ion-button *ngIf="writeto_btn" ion-button fill="clear" (click)="onOpenContactsDirectory($event)"
+    <ion-button *ngIf="writeto_btn && isVisibleCNT && roles?.[PERMISSIONS.LEADS_READ]" ion-button fill="clear" (click)="onOpenContactsDirectory($event)"
       tooltip="{{translationMap?.get('ViewContactsList')}}" placement="bottom">
       <ion-icon slot="icon-only" name="create-outline"></ion-icon>
       <!-- <ion-icon slot="icon-only" name="people-outline"></ion-icon> -->

package/src/app/components/conversations-list/header-conversations-list/header-conversations-list.component.ts

@@ -1,3 +1,4 @@
+import { PERMISSIONS } from 'src/app/utils/permissions.constants';
 import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'
 import { ModalController } from '@ionic/angular'
 import { EventsService } from 'src/app/services/events-service'
@@ -17,6 +18,8 @@ export class HeaderConversationsList implements OnInit {
   @Input() sound_btn: string;
   @Input() isMobile: boolean;
   @Input() isVisibleTKT: boolean = true;
+  @Input() isVisibleCNT: boolean = true;;
+  @Input() roles: Array<string>;
   @Output() onSoundChange = new EventEmitter<string>()
   @Output() openContactsDirectory = new EventEmitter()
   @Output() openProfileInfo = new EventEmitter()
@@ -24,6 +27,7 @@ export class HeaderConversationsList implements OnInit {
   createTicketModal = null
   public translationMap: Map<string, string>;
 
+  PERMISSIONS = PERMISSIONS;
   constructor(
     public events: EventsService,
     public modalController: ModalController,
@@ -62,7 +66,7 @@ export class HeaderConversationsList implements OnInit {
   // }
 
   ngOnInit() {
-    // console.log('DDP HEADER SUPPORT MODE ', this.supportMode)
+    console.log('DDP HEADER SUPPORT MODE ', this.roles)
   }
 
   // START @Output() //

package/src/app/components/navbar/navbar.component.html

@@ -5,7 +5,7 @@
       </div>
       <div class="navbar-right">
         <!-- test site -->
-        <ng-container *ngIf="project">
+        <ng-container *ngIf="project && roles?.[PERMISSIONS.SIMULATE_CONV]">
           <button class="btn simulate-visitor-btn" (click)="testWidgetPage()">
             <i class="material-icons">play_arrow</i>
             <!-- {{translationsMap?.get('NAVBAR.SIMULATE_VISITOR')}} -->
@@ -23,9 +23,9 @@
         </ng-container>
 
         <!--  ------ PROJECTS  DROPDOWN ------ -->
-        <ng-container *ngIf="project">
+        <ng-container *ngIf="project && roles?.[PERMISSIONS.CHANGE_PROJECT]">
             <li>
-              <button class="btn dropdown-toggle project-dropdown" (click)="openDropdownProjects = !openDropdownProjects">
+              <button class="btn dropdown-toggle project-dropdown" (click)="toggleProjectsDropdown()">
                 <span class="project-dropdown" style="text-transform: none"> {{ project?.id_project?.name }} </span>
                 <i class="material-icons" style="margin-right: 3px;">arrow_drop_down</i>
               </button>
@@ -49,7 +49,7 @@
                 </li>
   
                 <!--  ADD PROJECT -->
-                <li id="navbar_create_prjct" *ngIf="MT === true" (click)="onClickDropdownOption('addProject')" class="add-project">
+                <li id="navbar_create_prjct" *ngIf="isVisibleMT" (click)="onClickDropdownOption('addProject')" class="add-project">
                   <a>
                     <i class="material-icons">add_circle_outline </i>
                     {{translationsMap?.get('NAVBAR.ADD_PROJECT')}}
@@ -71,9 +71,22 @@
                 <!-- *ngFor="let prjct of projects?.slice().reverse() | slice:0:5; let i=index" -->
                 <li *ngFor="let prjct of projects?.slice() | slice:0:5; let i=index" style="cursor: pointer">
                   <a (click)="goToHome(prjct?.id_project?._id, prjct?.id_project?.name)"
-                    [ngClass]="{'li-selected' : prjct?.id_project?._id === project?.id_project?.id }">
-  
-                    <span> {{ prjct?.id_project?.name }} </span>
+                    [ngClass]="{'li-selected' : prjct?.id_project?._id === project?.id_project?.id }"
+                    class="project-item-row">
+                    <span class="project-item-name">{{ prjct?.id_project?.name }}</span>
+                    <span class="project-item-status project-item-status-wrapper"
+                      [attr.title]="translationsMap?.get(prjct?.teammateStatus?.label) || prjct?.teammateStatus?.name"
+                      (click)="toggleStatusDropdown($event, prjct)">
+                      <img style="width: 15px; height: 15px; position: relative; top: 1px; cursor: pointer;" height="15" width="15" [src]="prjct?.teammateStatus?.avatar" />
+                      <div class="status-dropdown status-dropdown-fixed" *ngIf="openStatusDropdownProjectId === prjct?.id_project?._id" (click)="$event.stopPropagation()"
+                        [style.top.px]="statusDropdownPosition.top" [style.right.px]="statusDropdownPosition.right">
+                        <div class="status-dropdown-option" *ngFor="let status of TEAMMATE_STATUS"
+                          (click)="$event.stopPropagation(); onChangeProjectStatus(prjct, status.id)">
+                          <img style="width: 15px; height: 15px; margin-right: 6px;" [src]="status.avatar" />
+                          <span>{{ translationsMap?.get(status.label) || status.name }}</span>
+                        </div>
+                      </div>
+                    </span>
                   </a>
                 </li>
 
@@ -85,8 +98,21 @@
     
                   <!-- *ngFor="let prjct of projects?.slice().reverse() | slice:5:10; let i=index" -->
                   <li *ngFor="let prjct of projects?.slice() | slice:5:10; let i=index" style="cursor: pointer">
-                    <a (click)="goToHome(prjct?.id_project?._id, prjct?.id_project?.name)">
-                      {{ prjct?.id_project?.name }}
+                    <a (click)="goToHome(prjct?.id_project?._id, prjct?.id_project?.name)" class="project-item-row">
+                      <span class="project-item-name">{{ prjct?.id_project?.name }}</span>
+                      <span class="project-item-status project-item-status-wrapper"
+                        [attr.title]="translationsMap?.get(prjct?.teammateStatus?.label) || prjct?.teammateStatus?.name"
+                        (click)="toggleStatusDropdown($event, prjct)">
+                        <img style="width: 15px; height: 15px; position: relative; top: 1px; cursor: pointer;" height="15" width="15" [src]="prjct?.teammateStatus?.avatar" />
+                        <div class="status-dropdown status-dropdown-fixed" *ngIf="openStatusDropdownProjectId === prjct?.id_project?._id" (click)="$event.stopPropagation()"
+                          [style.top.px]="statusDropdownPosition.top" [style.right.px]="statusDropdownPosition.right">
+                          <div class="status-dropdown-option" *ngFor="let status of TEAMMATE_STATUS"
+                            (click)="$event.stopPropagation(); onChangeProjectStatus(prjct, status.id)">
+                            <img style="width: 15px; height: 15px; margin-right: 6px;" [src]="status.avatar" />
+                            <span>{{ translationsMap?.get(status.label) || status.name }}</span>
+                          </div>
+                        </div>
+                      </span>
                     </a>
                   </li>
                 </ng-container>

package/src/app/components/navbar/navbar.component.scss

@@ -204,6 +204,70 @@ li{
         color: var(--dropdown-menu-hover-color);
         box-shadow: 0 12px 20px -10px rgba(var(--dropdown-menu-hover-color), 0.28), 0 4px 20px 0 rgba(0, 0, 0, 0.12), 0 7px 8px -5px rgba(var(--dropdown-menu-hover-color), 0.2);
     }
+
+    &.project-item-row {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 8px;
+
+        .project-item-name {
+            flex: 1;
+            min-width: 0;
+            text-align: left;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+
+        .project-item-status {
+            flex: 0 0 10%;
+            display: flex;
+            justify-content: flex-end;
+            align-items: center;
+
+            &.project-item-status-wrapper {
+                position: relative;
+            }
+
+            .status-dropdown {
+                position: absolute;
+                right: 100%;
+                top: 50%;
+                transform: translateY(-50%);
+                margin-right: 4px;
+                min-width: 140px;
+                padding: 4px 0;
+                background-color: var(--dropdown-menu-background);
+                border-radius: 3px;
+                box-shadow: 0 2px 5px 0 rgb(0, 0, 0, 0.26);
+                z-index: 1001;
+                list-style: none;
+
+                &.status-dropdown-fixed {
+                    position: fixed;
+                    right: auto;
+                    left: auto;
+                    margin-right: 0;
+                    transform: translateY(-50%);
+                }
+
+                .status-dropdown-option {
+                    display: flex;
+                    align-items: center;
+                    padding: 8px 16px;
+                    font-size: 13px;
+                    color: var(--dropdown-menu-color);
+                    cursor: pointer;
+                    white-space: nowrap;
+
+                    &:hover {
+                        background-color: var(--dropdown-menu-hover-background);
+                        color: var(--dropdown-menu-hover-color);
+                    }
+                }
+            }
+        }
+    }
 }