chore: dynamic icons

app/javascript/dashboard/components-next/ConversationWorkflow/ConversationRequiredAttributeItem.vue

@@ -1,4 +1,5 @@
 <script setup>
+import { computed } from 'vue';
 import Button from 'dashboard/components-next/button/Button.vue';
 import Icon from 'dashboard/components-next/icon/Icon.vue';
 
@@ -11,20 +12,34 @@ const props = defineProps({
 
 const emit = defineEmits(['delete']);
 
+const iconByType = {
+  text: 'i-lucide-align-justify',
+  checkbox: 'i-lucide-circle-check-big',
+  list: 'i-lucide-list',
+  date: 'i-lucide-calendar',
+  link: 'i-lucide-link',
+  number: 'i-lucide-hash',
+};
+
+const attributeIcon = computed(() => {
+  const typeKey = props.attribute.type?.toLowerCase();
+  return iconByType[typeKey] || 'i-lucide-align-justify';
+});
+
 const handleDelete = () => {
   emit('delete', props.attribute);
 };
 </script>
 
 <template>
-  <div class="flex justify-between items-center px-4 py-4 w-full">
+  <div class="flex justify-between items-center px-4 py-3 w-full">
     <div class="flex gap-3 items-center">
       <h5 class="text-sm font-medium text-n-slate-12 line-clamp-1">
         {{ attribute.label }}
       </h5>
       <div class="w-px h-2.5 bg-n-slate-5" />
       <div class="flex gap-1.5 items-center">
-        <Icon icon="i-lucide-align-justify" class="size-4 text-n-slate-11" />
+        <Icon :icon="attributeIcon" class="size-4 text-n-slate-11" />
         <span class="text-sm text-n-slate-11">{{ attribute.type }}</span>
       </div>
       <div class="w-px h-2.5 bg-n-slate-5" />

app/javascript/dashboard/components-next/ConversationWorkflow/ConversationRequiredAttributes.vue

@@ -19,48 +19,101 @@ const handleClick = () => {
   emit('click');
 };
 
-const conversationRequiredAttributes = [
-  {
-    action: 'add',
-    value: 'installation_type',
-    label: 'Installation Type',
-    type: 'Text',
-  },
-];
-
 const attributeOptions = [
   {
-    action: 'add',
+    id: 1,
-    value: 'installation_type',
+    attribute_display_name: 'Severity',
-    label: 'Installation Type',
+    attribute_display_type: 'text',
-    type: 'Text',
+    attribute_description:
+      'Status used by Pranav to check the quality of the conversations.',
+    attribute_key: 'severity',
+    regex_pattern: null,
+    regex_cue: null,
+    attribute_values: [],
+    attribute_model: 'conversation_attribute',
+    default_value: null,
+    created_at: '2023-12-19T02:18:08.226Z',
+    updated_at: '2024-04-29T08:45:12.660Z',
   },
   {
-    action: 'add',
+    id: 3,
-    value: 'follow_up',
+    attribute_display_name: 'Cloud customer',
-    label: 'Follow up with the customer',
+    attribute_display_type: 'checkbox',
+    attribute_description: 'Cloud customer',
+    attribute_key: 'cloud_customer',
+    regex_pattern: null,
+    regex_cue: null,
+    attribute_values: [],
+    attribute_model: 'conversation_attribute',
+    default_value: null,
+    created_at: '2023-12-20T05:33:32.866Z',
+    updated_at: '2023-12-20T05:33:32.866Z',
   },
   {
-    action: 'add',
+    id: 4,
-    value: 'review_status',
+    attribute_display_name: 'Plan',
-    label: 'Review Status',
+    attribute_display_type: 'list',
+    attribute_description: 'Plan',
+    attribute_key: 'plan',
+    regex_pattern: null,
+    regex_cue: null,
+    attribute_values: ['gold', 'silver', 'bronze'],
+    attribute_model: 'conversation_attribute',
+    default_value: null,
+    created_at: '2024-03-11T07:19:56.016Z',
+    updated_at: '2024-03-11T07:19:56.016Z',
   },
   {
-    action: 'add',
+    id: 5,
-    value: 'priority',
+    attribute_display_name: 'Signup date',
-    label: 'Priority',
+    attribute_display_type: 'date',
+    attribute_description: 'Signup',
+    attribute_key: 'signup_date',
+    regex_pattern: null,
+    regex_cue: null,
+    attribute_values: [],
+    attribute_model: 'conversation_attribute',
+    default_value: null,
+    created_at: '2024-03-11T07:20:14.864Z',
+    updated_at: '2024-03-11T07:20:14.864Z',
   },
   {
-    action: 'add',
+    id: 6,
-    value: 'department',
+    attribute_display_name: 'Home page',
-    label: 'Department',
+    attribute_display_type: 'link',
+    attribute_description: 'home page\n',
+    attribute_key: 'home_page',
+    regex_pattern: null,
+    regex_cue: null,
+    attribute_values: [],
+    attribute_model: 'conversation_attribute',
+    default_value: null,
+    created_at: '2024-03-11T07:20:31.415Z',
+    updated_at: '2024-03-11T07:20:31.415Z',
   },
   {
-    action: 'add',
+    id: 7,
-    value: 'customer_type',
+    attribute_display_name: 'Reg number',
-    label: 'Customer Type',
+    attribute_display_type: 'number',
+    attribute_description: 'Reg number\n',
+    attribute_key: 'reg_number',
+    regex_pattern: null,
+    regex_cue: null,
+    attribute_values: [],
+    attribute_model: 'conversation_attribute',
+    default_value: null,
+    created_at: '2024-03-11T07:21:00.514Z',
+    updated_at: '2024-03-11T07:21:00.514Z',
   },
-];
+].map(attribute => ({
+  ...attribute,
+  action: 'add',
+  value: attribute.attribute_key,
+  label: attribute.attribute_display_name,
+  type: attribute.attribute_display_type,
+}));
+
+const conversationRequiredAttributes = attributeOptions.slice(0, 4);
 
 const handleAddAttributesClick = event => {
   event.stopPropagation();
@@ -80,7 +133,7 @@ const handleDelete = () => {};
 
 <template>
   <CardLayout
-    class="[&>div]:px-0 [&>div]:py-0 [&>div]:divide-y [&>div]:divide-n-weak"
+    class="[&>div]:px-0 [&>div]:py-0 [&>div]:gap-0 [&>div]:divide-y [&>div]:divide-n-weak"
     @click="handleClick"
   >
     <div class="flex flex-col gap-2 items-start px-5 py-4">