feat: priority UI (#6966)

app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue

@@ -33,6 +33,7 @@
     <div class="conversation--details columns">
       <div class="conversation--metadata">
         <inbox-name v-if="showInboxName" :inbox="inbox" />
+        <div class="conversation-metadata-attributes">
           <span
             v-if="showAssignee && assignee.name"
             class="label assignee-label text-truncate"
@@ -40,6 +41,8 @@
             <fluent-icon icon="person" size="12" />
             {{ assignee.name }}
           </span>
+          <priority-mark :priority="chat.priority" />
+        </div>
       </div>
       <h4 class="conversation--user">
         {{ currentContact.name }}
@@ -131,6 +134,7 @@ import ConversationContextMenu from './contextMenu/Index.vue';
 import alertMixin from 'shared/mixins/alertMixin';
 import TimeAgo from 'dashboard/components/ui/TimeAgo';
 import CardLabels from './conversationCardComponents/CardLabels.vue';
+import PriorityMark from './PriorityMark.vue';
 const ATTACHMENT_ICONS = {
   image: 'image',
   audio: 'headphones-sound-wave',
@@ -147,6 +151,7 @@ export default {
     Thumbnail,
     ConversationContextMenu,
     TimeAgo,
+    PriorityMark,
   },
 
   mixins: [
@@ -429,6 +434,11 @@ export default {
     padding: var(--space-micro) 0 var(--space-micro) 0;
   }
 
+  .conversation-metadata-attributes {
+    display: flex;
+    gap: var(--space-small);
+  }
+
   .assignee-label {
     display: inline-flex;
     margin-left: var(--space-small);

app/javascript/dashboard/components/widgets/conversation/PriorityMark.vue

@@ -0,0 +1,113 @@
+<template>
+  <span class="conversation-priority-mark">
+    <svg
+      v-if="priority"
+      v-tooltip="tooltipText"
+      width="14"
+      height="14"
+      viewBox="0 0 14 14"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <template v-if="priority === CONVERSATION_PRIORITY.URGENT">
+        <rect width="14" height="14" rx="2" fill="#FF382D" />
+        <path
+          d="M2.33325 2.91667C2.33325 2.27233 2.85559 1.75 3.49992 1.75C4.14425 1.75 4.66659 2.27233 4.66659 2.91667V8.16667C4.66659 8.811 4.14425 9.33333 3.49992 9.33333C2.85559 9.33333 2.33325 8.811 2.33325 8.16667V2.91667Z"
+          fill="white"
+        />
+        <path
+          d="M2.33325 11.0833C2.33325 10.439 2.85559 9.91667 3.49992 9.91667C4.14425 9.91667 4.66659 10.439 4.66659 11.0833C4.66659 11.7277 4.14425 12.25 3.49992 12.25C2.85559 12.25 2.33325 11.7277 2.33325 11.0833Z"
+          fill="white"
+        />
+        <path
+          d="M5.83325 2.91667C5.83325 2.27233 6.35559 1.75 6.99992 1.75C7.64425 1.75 8.16659 2.27233 8.16659 2.91667V8.16667C8.16659 8.811 7.64425 9.33333 6.99992 9.33333C6.35559 9.33333 5.83325 8.811 5.83325 8.16667V2.91667Z"
+          fill="white"
+        />
+        <path
+          d="M5.83325 11.0833C5.83325 10.439 6.35559 9.91667 6.99992 9.91667C7.64425 9.91667 8.16659 10.439 8.16659 11.0833C8.16659 11.7277 7.64425 12.25 6.99992 12.25C6.35559 12.25 5.83325 11.7277 5.83325 11.0833Z"
+          fill="white"
+        />
+        <path
+          d="M9.33325 2.91667C9.33325 2.27233 9.85559 1.75 10.4999 1.75C11.1443 1.75 11.6666 2.27233 11.6666 2.91667V8.16667C11.6666 8.811 11.1443 9.33333 10.4999 9.33333C9.85559 9.33333 9.33325 8.811 9.33325 8.16667V2.91667Z"
+          fill="white"
+        />
+        <path
+          d="M9.33325 11.0833C9.33325 10.439 9.85559 9.91667 10.4999 9.91667C11.1443 9.91667 11.6666 10.439 11.6666 11.0833C11.6666 11.7277 11.1443 12.25 10.4999 12.25C9.85559 12.25 9.33325 11.7277 9.33325 11.0833Z"
+          fill="white"
+        />
+      </template>
+      <template v-else-if="priority === CONVERSATION_PRIORITY.HIGH">
+        <rect width="14" height="14" rx="2" fill="#F1F5F8" />
+        <path
+          d="M4.87216 3.50012L4.76278 8.29274H3.69555L3.58949 3.50012H4.87216ZM4.22917 10.3609C4.02809 10.3609 3.85574 10.2902 3.71212 10.1488C3.57071 10.0074 3.5 9.83503 3.5 9.63175C3.5 9.43289 3.57071 9.26275 3.71212 9.12133C3.85574 8.97992 4.02809 8.90921 4.22917 8.90921C4.42582 8.90921 4.59596 8.97992 4.73958 9.12133C4.88542 9.26275 4.95833 9.43289 4.95833 9.63175C4.95833 9.76654 4.92408 9.88917 4.85559 9.99965C4.7893 10.1101 4.70092 10.1985 4.59044 10.2648C4.48217 10.3289 4.36174 10.3609 4.22917 10.3609Z"
+          fill="#446888"
+        />
+        <path
+          d="M7.47237 3.50012L7.36299 8.29274H6.29576L6.1897 3.50012H7.47237ZM6.82937 10.3609C6.6283 10.3609 6.45595 10.2902 6.31233 10.1488C6.17092 10.0074 6.10021 9.83503 6.10021 9.63175C6.10021 9.43289 6.17092 9.26275 6.31233 9.12133C6.45595 8.97992 6.6283 8.90921 6.82937 8.90921C7.02603 8.90921 7.19617 8.97992 7.33979 9.12133C7.48562 9.26275 7.55854 9.43289 7.55854 9.63175C7.55854 9.76654 7.52429 9.88917 7.4558 9.99965C7.38951 10.1101 7.30112 10.1985 7.19064 10.2648C7.08237 10.3289 6.96195 10.3609 6.82937 10.3609Z"
+          fill="#446888"
+        />
+        <path
+          d="M10.0726 3.50012L9.9632 8.29274H8.89597L8.78991 3.50012H10.0726ZM9.42958 10.3609C9.22851 10.3609 9.05616 10.2902 8.91254 10.1488C8.77112 10.0074 8.70042 9.83503 8.70042 9.63175C8.70042 9.43289 8.77112 9.26275 8.91254 9.12133C9.05616 8.97992 9.22851 8.90921 9.42958 8.90921C9.62624 8.90921 9.79638 8.97992 9.94 9.12133C10.0858 9.26275 10.1587 9.43289 10.1587 9.63175C10.1587 9.76654 10.1245 9.88917 10.056 9.99965C9.98972 10.1101 9.90133 10.1985 9.79085 10.2648C9.68258 10.3289 9.56216 10.3609 9.42958 10.3609Z"
+          fill="#446888"
+        />
+      </template>
+      <template v-else-if="priority === CONVERSATION_PRIORITY.MEDIUM">
+        <rect width="14" height="14" rx="2" fill="#F1F5F8" />
+        <path
+          d="M6.03866 3.50012L5.92929 8.29274H4.86205L4.75599 3.50012H6.03866ZM5.39567 10.3609C5.1946 10.3609 5.02225 10.2902 4.87863 10.1488C4.73721 10.0074 4.6665 9.83503 4.6665 9.63175C4.6665 9.43289 4.73721 9.26275 4.87863 9.12133C5.02225 8.97992 5.1946 8.90921 5.39567 8.90921C5.59232 8.90921 5.76246 8.97992 5.90609 9.12133C6.05192 9.26275 6.12484 9.43289 6.12484 9.63175C6.12484 9.76654 6.09059 9.88917 6.02209 9.99965C5.9558 10.1101 5.86742 10.1985 5.75694 10.2648C5.64867 10.3289 5.52825 10.3609 5.39567 10.3609Z"
+          fill="#446888"
+        />
+        <path
+          d="M8.63887 3.50012L8.5295 8.29274H7.46226L7.3562 3.50012H8.63887ZM7.99588 10.3609C7.79481 10.3609 7.62246 10.2902 7.47883 10.1488C7.33742 10.0074 7.26671 9.83503 7.26671 9.63175C7.26671 9.43289 7.33742 9.26275 7.47883 9.12133C7.62246 8.97992 7.79481 8.90921 7.99588 8.90921C8.19253 8.90921 8.36267 8.97992 8.5063 9.12133C8.65213 9.26275 8.72505 9.43289 8.72505 9.63175C8.72505 9.76654 8.6908 9.88917 8.6223 9.99965C8.55601 10.1101 8.46763 10.1985 8.35715 10.2648C8.24888 10.3289 8.12845 10.3609 7.99588 10.3609Z"
+          fill="#446888"
+        />
+      </template>
+      <template v-else-if="priority === CONVERSATION_PRIORITY.LOW">
+        <rect width="14" height="14" rx="2" fill="#F1F5F8" />
+        <path
+          d="M6.03866 3.50012L5.92929 8.29274H4.86205L4.75599 3.50012H6.03866ZM5.39567 10.3609C5.1946 10.3609 5.02225 10.2902 4.87863 10.1488C4.73721 10.0074 4.6665 9.83503 4.6665 9.63175C4.6665 9.43289 4.73721 9.26275 4.87863 9.12133C5.02225 8.97992 5.1946 8.90921 5.39567 8.90921C5.59232 8.90921 5.76246 8.97992 5.90609 9.12133C6.05192 9.26275 6.12484 9.43289 6.12484 9.63175C6.12484 9.76654 6.09059 9.88917 6.02209 9.99965C5.9558 10.1101 5.86742 10.1985 5.75694 10.2648C5.64867 10.3289 5.52825 10.3609 5.39567 10.3609Z"
+          fill="#446888"
+        />
+        <path
+          d="M8.63887 3.50012L8.5295 8.29274H7.46226L7.3562 3.50012H8.63887ZM7.99588 10.3609C7.79481 10.3609 7.62246 10.2902 7.47883 10.1488C7.33742 10.0074 7.26671 9.83503 7.26671 9.63175C7.26671 9.43289 7.33742 9.26275 7.47883 9.12133C7.62246 8.97992 7.79481 8.90921 7.99588 8.90921C8.19253 8.90921 8.36267 8.97992 8.5063 9.12133C8.65213 9.26275 8.72505 9.43289 8.72505 9.63175C8.72505 9.76654 8.6908 9.88917 8.6223 9.99965C8.55601 10.1101 8.46763 10.1985 8.35715 10.2648C8.24888 10.3289 8.12845 10.3609 7.99588 10.3609Z"
+          fill="#446888"
+        />
+      </template>
+    </svg>
+  </span>
+</template>
+
+<script>
+import { CONVERSATION_PRIORITY } from '../../../../shared/constants/messages';
+
+export default {
+  name: 'PriorityMark',
+  props: {
+    priority: {
+      type: String,
+      default: undefined,
+      validate: value =>
+        [...Object.values(CONVERSATION_PRIORITY), undefined].includes(value),
+    },
+  },
+  data() {
+    return {
+      CONVERSATION_PRIORITY,
+    };
+  },
+  computed: {
+    tooltipText() {
+      return this.$t(
+        `CONVERSATION.PRIORITY.OPTIONS.${this.priority.toUpperCase()}`
+      );
+    },
+  },
+};
+</script>
+
+<style scoped>
+.conversation-priority-mark {
+  display: inline-flex;
+  align-items: center;
+}
+</style>

app/javascript/dashboard/i18n/locale/en/conversation.json

@@ -66,6 +66,23 @@
         "NEXT_WEEK": "Next week"
       }
     },
+    "PRIORITY": {
+      "TITLE": "Priority",
+      "OPTIONS": {
+        "NONE": "None",
+        "URGENT": "Urgent",
+        "HIGH": "High",
+        "MEDIUM": "Medium",
+        "LOW": "Low"
+      },
+      "CHANGE_PRIORITY": {
+        "SELECT_PLACEHOLDER": "None",
+        "INPUT_PLACEHOLDER": "Select priority",
+        "NO_RESULTS": "No results found",
+        "SUCCESSFUL": "Changed priority of conversation id %{conversationId} to %{priority}",
+        "FAILED": "Couldn't change priority. Please try again."
+      }
+    },
     "CARD_CONTEXT_MENU": {
       "PENDING": "Mark as pending",
       "RESOLVED": "Mark as resolved",

app/javascript/dashboard/routes/dashboard/conversation/ConversationAction.vue

@@ -45,11 +45,32 @@
           $t('AGENT_MGMT.MULTI_SELECTOR.SEARCH.NO_RESULTS.TEAM')
         "
         :input-placeholder="
-          $t('AGENT_MGMT.MULTI_SELECTOR.SEARCH.PLACEHOLDER.TEAM')
+          $t('AGENT_MGMT.MULTI_SELECTOR.SEARCH.PLACEHOLDER.INPUT_PLACEHOLDER')
         "
         @click="onClickAssignTeam"
       />
     </div>
+    <div class="multiselect-wrap--small">
+      <contact-details-item
+        compact
+        :title="$t('CONVERSATION.PRIORITY.TITLE')"
+      />
+      <multiselect-dropdown
+        :options="priorityOptions"
+        :selected-item="assignedPriority"
+        :multiselector-title="$t('CONVERSATION.PRIORITY.TITLE')"
+        :multiselector-placeholder="
+          $t('CONVERSATION.PRIORITY.CHANGE_PRIORITY.SELECT_PLACEHOLDER')
+        "
+        :no-search-result="
+          $t('CONVERSATION.PRIORITY.CHANGE_PRIORITY.NO_RESULTS')
+        "
+        :input-placeholder="
+          $t('CONVERSATION.PRIORITY.CHANGE_PRIORITY.INPUT_PLACEHOLDER')
+        "
+        @click="onClickAssignPriority"
+      />
+    </div>
     <contact-details-item
       compact
       :title="$t('CONVERSATION_SIDEBAR.ACCORDION.CONVERSATION_LABELS')"
@@ -66,6 +87,7 @@ import MultiselectDropdown from 'shared/components/ui/MultiselectDropdown.vue';
 import ConversationLabels from './labels/LabelBox.vue';
 import agentMixin from 'dashboard/mixins/agentMixin';
 import teamMixin from 'dashboard/mixins/conversation/teamMixin';
+import { CONVERSATION_PRIORITY } from '../../../../shared/constants/messages';
 
 export default {
   components: {
@@ -84,6 +106,37 @@ export default {
       default: undefined,
     },
   },
+  data() {
+    return {
+      priorityOptions: [
+        {
+          id: null,
+          name: this.$t('CONVERSATION.PRIORITY.OPTIONS.NONE'),
+          thumbnail: `/assets/images/dashboard/priority/none.svg`,
+        },
+        {
+          id: CONVERSATION_PRIORITY.URGENT,
+          name: this.$t('CONVERSATION.PRIORITY.OPTIONS.URGENT'),
+          thumbnail: `/assets/images/dashboard/priority/${CONVERSATION_PRIORITY.URGENT}.svg`,
+        },
+        {
+          id: CONVERSATION_PRIORITY.HIGH,
+          name: this.$t('CONVERSATION.PRIORITY.OPTIONS.HIGH'),
+          thumbnail: `/assets/images/dashboard/priority/${CONVERSATION_PRIORITY.HIGH}.svg`,
+        },
+        {
+          id: CONVERSATION_PRIORITY.MEDIUM,
+          name: this.$t('CONVERSATION.PRIORITY.OPTIONS.MEDIUM'),
+          thumbnail: `/assets/images/dashboard/priority/${CONVERSATION_PRIORITY.MEDIUM}.svg`,
+        },
+        {
+          id: CONVERSATION_PRIORITY.LOW,
+          name: this.$t('CONVERSATION.PRIORITY.OPTIONS.LOW'),
+          thumbnail: `/assets/images/dashboard/priority/${CONVERSATION_PRIORITY.LOW}.svg`,
+        },
+      ],
+    };
+  },
   computed: {
     ...mapGetters({
       currentChat: 'getSelectedChat',
@@ -121,6 +174,33 @@ export default {
           });
       },
     },
+    assignedPriority: {
+      get() {
+        const selectedOption = this.priorityOptions.find(
+          opt => opt.id === this.currentChat.priority
+        );
+
+        return selectedOption || this.priorityOptions[0];
+      },
+      set(priorityItem) {
+        const conversationId = this.currentChat.id;
+        const priority = priorityItem ? priorityItem.id : null;
+        this.$store.dispatch('setCurrentChatPriority', {
+          priority,
+          conversationId,
+        });
+        this.$store
+          .dispatch('assignPriority', { conversationId, priority })
+          .then(() => {
+            this.showAlert(
+              this.$t('CONVERSATION.PRIORITY.CHANGE_PRIORITY.SUCCESSFUL', {
+                priority: priorityItem.name,
+                conversationId,
+              })
+            );
+          });
+      },
+    },
     showSelfAssign() {
       if (!this.assignedAgent) {
         return true;
@@ -170,6 +250,14 @@ export default {
         this.assignedTeam = selectedItemTeam;
       }
     },
+
+    onClickAssignPriority(selectedPriorityItem) {
+      const isSamePriority =
+        this.assignedPriority &&
+        this.assignedPriority.id === selectedPriorityItem.id;
+
+      this.assignedPriority = isSamePriority ? null : selectedPriorityItem;
+    },
   },
 };
 </script>

app/javascript/dashboard/store/modules/conversations/actions.js

@@ -403,6 +403,27 @@ const actions = {
   clearConversationFilters({ commit }) {
     commit(types.CLEAR_CONVERSATION_FILTERS);
   },
+
+  assignPriority: async ({ dispatch }, { conversationId, priority }) => {
+    try {
+      await ConversationApi.togglePriority({
+        conversationId,
+        priority,
+      });
+
+      dispatch('setCurrentChatPriority', {
+        priority,
+        conversationId,
+      });
+    } catch (error) {
+      // Handle error
+    }
+  },
+
+  setCurrentChatPriority({ commit }, { priority, conversationId }) {
+    commit(types.ASSIGN_PRIORITY, { priority, conversationId });
+  },
+
   ...messageReadActions,
   ...messageTranslateActions,
 };

app/javascript/dashboard/store/modules/conversations/index.js

@@ -77,6 +77,11 @@ export const mutations = {
     Vue.set(chat.meta, 'team', team);
   },
 
+  [types.ASSIGN_PRIORITY](_state, { priority, conversationId }) {
+    const [chat] = _state.allConversations.filter(c => c.id === conversationId);
+    Vue.set(chat, 'priority', priority);
+  },
+
   [types.UPDATE_CONVERSATION_CUSTOM_ATTRIBUTES](_state, custom_attributes) {
     const [chat] = getSelectedChatConversation(_state);
     Vue.set(chat, 'custom_attributes', custom_attributes);

app/javascript/dashboard/store/mutation-types.js

@@ -35,6 +35,7 @@ export default {
   UNMUTE_CONVERSATION: 'UNMUTE_CONVERSATION',
   ASSIGN_AGENT: 'ASSIGN_AGENT',
   ASSIGN_TEAM: 'ASSIGN_TEAM',
+  ASSIGN_PRIORITY: 'ASSIGN_PRIORITY',
   SET_CHAT_META: 'SET_CHAT_META',
   ADD_MESSAGE: 'ADD_MESSAGE',
   DELETE_MESSAGE: 'DELETE_MESSAGE',

app/views/api/v1/conversations/partials/_conversation.json.jbuilder

@@ -42,3 +42,4 @@ json.timestamp conversation.last_activity_at.to_i
 json.first_reply_created_at conversation.first_reply_created_at.to_i
 json.unread_count conversation.unread_incoming_messages.count
 json.last_non_activity_message conversation.messages.non_activity_messages.first.try(:push_event_data)
+json.priority conversation.priority

public/assets/images/dashboard/priority/high.svg

@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="24" height="24" fill="#F1F5F8"/>
+<path d="M9.7642 8L9.62358 14.1619H8.25142L8.11506 8H9.7642ZM8.9375 16.821C8.67898 16.821 8.45739 16.7301 8.27273 16.5483C8.09091 16.3665 8 16.1449 8 15.8835C8 15.6278 8.09091 15.4091 8.27273 15.2273C8.45739 15.0455 8.67898 14.9545 8.9375 14.9545C9.19034 14.9545 9.40909 15.0455 9.59375 15.2273C9.78125 15.4091 9.875 15.6278 9.875 15.8835C9.875 16.0568 9.83097 16.2145 9.7429 16.3565C9.65767 16.4986 9.54403 16.6122 9.40199 16.6974C9.26278 16.7798 9.10795 16.821 8.9375 16.821Z" fill="#446888"/>
+<path d="M13.1073 8L12.9667 14.1619H11.5945L11.4582 8H13.1073ZM12.2806 16.821C12.0221 16.821 11.8005 16.7301 11.6159 16.5483C11.434 16.3665 11.3431 16.1449 11.3431 15.8835C11.3431 15.6278 11.434 15.4091 11.6159 15.2273C11.8005 15.0455 12.0221 14.9545 12.2806 14.9545C12.5335 14.9545 12.7522 15.0455 12.9369 15.2273C13.1244 15.4091 13.2181 15.6278 13.2181 15.8835C13.2181 16.0568 13.1741 16.2145 13.086 16.3565C13.0008 16.4986 12.8872 16.6122 12.7451 16.6974C12.6059 16.7798 12.4511 16.821 12.2806 16.821Z" fill="#446888"/>
+<path d="M16.4505 8L16.3098 14.1619H14.9377L14.8013 8H16.4505ZM15.6237 16.821C15.3652 16.821 15.1436 16.7301 14.959 16.5483C14.7772 16.3665 14.6862 16.1449 14.6862 15.8835C14.6862 15.6278 14.7772 15.4091 14.959 15.2273C15.1436 15.0455 15.3652 14.9545 15.6237 14.9545C15.8766 14.9545 16.0953 15.0455 16.28 15.2273C16.4675 15.4091 16.5612 15.6278 16.5612 15.8835C16.5612 16.0568 16.5172 16.2145 16.4291 16.3565C16.3439 16.4986 16.2303 16.6122 16.0882 16.6974C15.949 16.7798 15.7942 16.821 15.6237 16.821Z" fill="#446888"/>
+</svg>

public/assets/images/dashboard/priority/low.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="24" height="24" fill="#F1F5F8"/>
+<path d="M12.7642 8L12.6236 14.1619H11.2514L11.1151 8H12.7642ZM11.9375 16.821C11.679 16.821 11.4574 16.7301 11.2727 16.5483C11.0909 16.3665 11 16.1449 11 15.8835C11 15.6278 11.0909 15.4091 11.2727 15.2273C11.4574 15.0455 11.679 14.9545 11.9375 14.9545C12.1903 14.9545 12.4091 15.0455 12.5938 15.2273C12.7812 15.4091 12.875 15.6278 12.875 15.8835C12.875 16.0568 12.831 16.2145 12.7429 16.3565C12.6577 16.4986 12.544 16.6122 12.402 16.6974C12.2628 16.7798 12.108 16.821 11.9375 16.821Z" fill="#446888"/>
+</svg>

public/assets/images/dashboard/priority/medium.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="24" height="24" fill="#F1F5F8"/>
+<path d="M10.7642 8L10.6236 14.1619H9.25142L9.11506 8H10.7642ZM9.9375 16.821C9.67898 16.821 9.45739 16.7301 9.27273 16.5483C9.09091 16.3665 9 16.1449 9 15.8835C9 15.6278 9.09091 15.4091 9.27273 15.2273C9.45739 15.0455 9.67898 14.9545 9.9375 14.9545C10.1903 14.9545 10.4091 15.0455 10.5938 15.2273C10.7812 15.4091 10.875 15.6278 10.875 15.8835C10.875 16.0568 10.831 16.2145 10.7429 16.3565C10.6577 16.4986 10.544 16.6122 10.402 16.6974C10.2628 16.7798 10.108 16.821 9.9375 16.821Z" fill="#446888"/>
+<path d="M14.1073 8L13.9667 14.1619H12.5945L12.4582 8H14.1073ZM13.2806 16.821C13.0221 16.821 12.8005 16.7301 12.6159 16.5483C12.434 16.3665 12.3431 16.1449 12.3431 15.8835C12.3431 15.6278 12.434 15.4091 12.6159 15.2273C12.8005 15.0455 13.0221 14.9545 13.2806 14.9545C13.5335 14.9545 13.7522 15.0455 13.9369 15.2273C14.1244 15.4091 14.2181 15.6278 14.2181 15.8835C14.2181 16.0568 14.1741 16.2145 14.086 16.3565C14.0008 16.4986 13.8872 16.6122 13.7451 16.6974C13.6059 16.7798 13.4511 16.821 13.2806 16.821Z" fill="#446888"/>
+</svg>

public/assets/images/dashboard/priority/none.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="24" height="24" fill="#F1F5F8"/>
+<path d="M13.5686 8L11.1579 16.9562H10L12.4107 8H13.5686Z" fill="#446888"/>
+</svg>

public/assets/images/dashboard/priority/urgent.svg

@@ -0,0 +1,9 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="24" height="24" fill="#FFEBEE"/>
+<path d="M8 8.5C8 7.94772 8.44772 7.5 9 7.5C9.55228 7.5 10 7.94772 10 8.5V13C10 13.5523 9.55228 14 9 14C8.44772 14 8 13.5523 8 13V8.5Z" fill="#FF382D"/>
+<path d="M8 15.5C8 14.9477 8.44772 14.5 9 14.5C9.55228 14.5 10 14.9477 10 15.5C10 16.0523 9.55228 16.5 9 16.5C8.44772 16.5 8 16.0523 8 15.5Z" fill="#FF382D"/>
+<path d="M11 8.5C11 7.94772 11.4477 7.5 12 7.5C12.5523 7.5 13 7.94772 13 8.5V13C13 13.5523 12.5523 14 12 14C11.4477 14 11 13.5523 11 13V8.5Z" fill="#FF382D"/>
+<path d="M11 15.5C11 14.9477 11.4477 14.5 12 14.5C12.5523 14.5 13 14.9477 13 15.5C13 16.0523 12.5523 16.5 12 16.5C11.4477 16.5 11 16.0523 11 15.5Z" fill="#FF382D"/>
+<path d="M14 8.5C14 7.94772 14.4477 7.5 15 7.5C15.5523 7.5 16 7.94772 16 8.5V13C16 13.5523 15.5523 14 15 14C14.4477 14 14 13.5523 14 13V8.5Z" fill="#FF382D"/>
+<path d="M14 15.5C14 14.9477 14.4477 14.5 15 14.5C15.5523 14.5 16 14.9477 16 15.5C16 16.0523 15.5523 16.5 15 16.5C14.4477 16.5 14 16.0523 14 15.5Z" fill="#FF382D"/>
+</svg>