feat: Agent assignment index page (#12364)

app/javascript/dashboard/routes/dashboard/settings/assignmentPolicy/Index.vue

@@ -0,0 +1,81 @@
+<script setup>
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+import BaseSettingsHeader from '../components/BaseSettingsHeader.vue';
+import SettingsLayout from '../SettingsLayout.vue';
+import AssignmentCard from 'dashboard/components-next/AssignmentPolicy/AssignmentCard/AssignmentCard.vue';
+
+const router = useRouter();
+const { t } = useI18n();
+
+const agentAssignments = computed(() => [
+  {
+    key: 'assignment_policy',
+    title: t('ASSIGNMENT_POLICY.INDEX.ASSIGNMENT_POLICY.TITLE'),
+    description: t('ASSIGNMENT_POLICY.INDEX.ASSIGNMENT_POLICY.DESCRIPTION'),
+    features: [
+      {
+        icon: 'i-lucide-circle-fading-arrow-up',
+        label: t('ASSIGNMENT_POLICY.INDEX.ASSIGNMENT_POLICY.FEATURES.0'),
+      },
+      {
+        icon: 'i-lucide-scale',
+        label: t('ASSIGNMENT_POLICY.INDEX.ASSIGNMENT_POLICY.FEATURES.1'),
+      },
+      {
+        icon: 'i-lucide-inbox',
+        label: t('ASSIGNMENT_POLICY.INDEX.ASSIGNMENT_POLICY.FEATURES.2'),
+      },
+    ],
+  },
+  {
+    key: 'agent_capacity_policy',
+    title: t('ASSIGNMENT_POLICY.INDEX.AGENT_CAPACITY_POLICY.TITLE'),
+    description: t('ASSIGNMENT_POLICY.INDEX.AGENT_CAPACITY_POLICY.DESCRIPTION'),
+    features: [
+      {
+        icon: 'i-lucide-glass-water',
+        label: t('ASSIGNMENT_POLICY.INDEX.AGENT_CAPACITY_POLICY.FEATURES.0'),
+      },
+      {
+        icon: 'i-lucide-circle-minus',
+        label: t('ASSIGNMENT_POLICY.INDEX.AGENT_CAPACITY_POLICY.FEATURES.1'),
+      },
+      {
+        icon: 'i-lucide-users-round',
+        label: t('ASSIGNMENT_POLICY.INDEX.AGENT_CAPACITY_POLICY.FEATURES.2'),
+      },
+    ],
+  },
+]);
+
+const handleClick = key => {
+  router.push({ name: key });
+};
+</script>
+
+<template>
+  <SettingsLayout :no-records-found="false" class="gap-10">
+    <template #header>
+      <BaseSettingsHeader
+        :title="$t('ASSIGNMENT_POLICY.INDEX.HEADER.TITLE')"
+        :description="$t('ASSIGNMENT_POLICY.INDEX.HEADER.DESCRIPTION')"
+        feature-name="assignment-policy"
+      />
+    </template>
+
+    <template #body>
+      <div class="grid grid-cols-1 2xl:grid-cols-2 gap-6">
+        <AssignmentCard
+          v-for="item in agentAssignments"
+          :key="item.key"
+          :title="item.title"
+          :description="item.description"
+          :features="item.features"
+          @click="handleClick(item.key)"
+        />
+      </div>
+    </template>
+  </SettingsLayout>
+</template>

app/javascript/dashboard/routes/dashboard/settings/assignmentPolicy/assignmentPolicy.routes.js

@@ -0,0 +1,30 @@
+import { FEATURE_FLAGS } from '../../../../featureFlags';
+import { frontendURL } from '../../../../helper/URLHelper';
+import SettingsWrapper from '../SettingsWrapper.vue';
+import AssignmentPolicyIndex from './Index.vue';
+
+export default {
+  routes: [
+    {
+      path: frontendURL('accounts/:accountId/settings/assignment-policy'),
+      component: SettingsWrapper,
+      children: [
+        {
+          path: '',
+          redirect: to => {
+            return { name: 'assignment_policy_index', params: to.params };
+          },
+        },
+        {
+          path: 'index',
+          name: 'assignment_policy_index',
+          component: AssignmentPolicyIndex,
+          meta: {
+            featureFlag: FEATURE_FLAGS.ASSIGNMENT_V2,
+            permissions: ['administrator'],
+          },
+        },
+      ],
+    },
+  ],
+};

app/javascript/dashboard/routes/dashboard/settings/settings.routes.js

@@ -6,6 +6,7 @@ import {
 
 import account from './account/account.routes';
 import agent from './agents/agent.routes';
+import assignmentPolicy from './assignmentPolicy/assignmentPolicy.routes';
 import agentBot from './agentBots/agentBot.routes';
 import attributes from './attributes/attributes.routes';
 import automation from './automation/automation.routes';
@@ -44,6 +45,7 @@ export default {
     },
     ...account.routes,
     ...agent.routes,
+    ...assignmentPolicy.routes,
     ...agentBot.routes,
     ...attributes.routes,
     ...automation.routes,