feat: Agent capacity policy index page with CRUD actions (#12409)

app/javascript/dashboard/api/agentCapacityPolicies.js

@@ -0,0 +1,43 @@
+/* global axios */
+
+import ApiClient from './ApiClient';
+
+class AgentCapacityPolicies extends ApiClient {
+  constructor() {
+    super('agent_capacity_policies', { accountScoped: true });
+  }
+
+  getUsers(policyId) {
+    return axios.get(`${this.url}/${policyId}/users`);
+  }
+
+  addUser(policyId, userData) {
+    return axios.post(`${this.url}/${policyId}/users`, {
+      user_id: userData.id,
+      capacity: userData.capacity,
+    });
+  }
+
+  removeUser(policyId, userId) {
+    return axios.delete(`${this.url}/${policyId}/users/${userId}`);
+  }
+
+  createInboxLimit(policyId, limitData) {
+    return axios.post(`${this.url}/${policyId}/inbox_limits`, {
+      inbox_id: limitData.inboxId,
+      conversation_limit: limitData.conversationLimit,
+    });
+  }
+
+  updateInboxLimit(policyId, limitId, limitData) {
+    return axios.put(`${this.url}/${policyId}/inbox_limits/${limitId}`, {
+      conversation_limit: limitData.conversationLimit,
+    });
+  }
+
+  deleteInboxLimit(policyId, limitId) {
+    return axios.delete(`${this.url}/${policyId}/inbox_limits/${limitId}`);
+  }
+}
+
+export default new AgentCapacityPolicies();

app/javascript/dashboard/api/specs/agentCapacityPolicies.spec.js

@@ -0,0 +1,98 @@
+import agentCapacityPolicies from '../agentCapacityPolicies';
+import ApiClient from '../ApiClient';
+
+describe('#AgentCapacityPoliciesAPI', () => {
+  it('creates correct instance', () => {
+    expect(agentCapacityPolicies).toBeInstanceOf(ApiClient);
+    expect(agentCapacityPolicies).toHaveProperty('get');
+    expect(agentCapacityPolicies).toHaveProperty('show');
+    expect(agentCapacityPolicies).toHaveProperty('create');
+    expect(agentCapacityPolicies).toHaveProperty('update');
+    expect(agentCapacityPolicies).toHaveProperty('delete');
+    expect(agentCapacityPolicies).toHaveProperty('getUsers');
+    expect(agentCapacityPolicies).toHaveProperty('addUser');
+    expect(agentCapacityPolicies).toHaveProperty('removeUser');
+    expect(agentCapacityPolicies).toHaveProperty('createInboxLimit');
+    expect(agentCapacityPolicies).toHaveProperty('updateInboxLimit');
+    expect(agentCapacityPolicies).toHaveProperty('deleteInboxLimit');
+  });
+
+  describe('API calls', () => {
+    const originalAxios = window.axios;
+    const axiosMock = {
+      get: vi.fn(() => Promise.resolve()),
+      post: vi.fn(() => Promise.resolve()),
+      put: vi.fn(() => Promise.resolve()),
+      delete: vi.fn(() => Promise.resolve()),
+    };
+
+    beforeEach(() => {
+      window.axios = axiosMock;
+      // Mock accountIdFromRoute
+      Object.defineProperty(agentCapacityPolicies, 'accountIdFromRoute', {
+        get: () => '1',
+        configurable: true,
+      });
+    });
+
+    afterEach(() => {
+      window.axios = originalAxios;
+    });
+
+    it('#getUsers', () => {
+      agentCapacityPolicies.getUsers(123);
+      expect(axiosMock.get).toHaveBeenCalledWith(
+        '/api/v1/accounts/1/agent_capacity_policies/123/users'
+      );
+    });
+
+    it('#addUser', () => {
+      const userData = { id: 456, capacity: 20 };
+      agentCapacityPolicies.addUser(123, userData);
+      expect(axiosMock.post).toHaveBeenCalledWith(
+        '/api/v1/accounts/1/agent_capacity_policies/123/users',
+        {
+          user_id: 456,
+          capacity: 20,
+        }
+      );
+    });
+
+    it('#removeUser', () => {
+      agentCapacityPolicies.removeUser(123, 456);
+      expect(axiosMock.delete).toHaveBeenCalledWith(
+        '/api/v1/accounts/1/agent_capacity_policies/123/users/456'
+      );
+    });
+
+    it('#createInboxLimit', () => {
+      const limitData = { inboxId: 1, conversationLimit: 10 };
+      agentCapacityPolicies.createInboxLimit(123, limitData);
+      expect(axiosMock.post).toHaveBeenCalledWith(
+        '/api/v1/accounts/1/agent_capacity_policies/123/inbox_limits',
+        {
+          inbox_id: 1,
+          conversation_limit: 10,
+        }
+      );
+    });
+
+    it('#updateInboxLimit', () => {
+      const limitData = { conversationLimit: 15 };
+      agentCapacityPolicies.updateInboxLimit(123, 789, limitData);
+      expect(axiosMock.put).toHaveBeenCalledWith(
+        '/api/v1/accounts/1/agent_capacity_policies/123/inbox_limits/789',
+        {
+          conversation_limit: 15,
+        }
+      );
+    });
+
+    it('#deleteInboxLimit', () => {
+      agentCapacityPolicies.deleteInboxLimit(123, 789);
+      expect(axiosMock.delete).toHaveBeenCalledWith(
+        '/api/v1/accounts/1/agent_capacity_policies/123/inbox_limits/789'
+      );
+    });
+  });
+});

app/javascript/dashboard/components-next/AssignmentPolicy/AgentCapacityPolicyCard/AgentCapacityPolicyCard.story.vue

@@ -0,0 +1,116 @@
+<script setup>
+import AgentCapacityPolicyCard from './AgentCapacityPolicyCard.vue';
+
+const mockUsers = [
+  {
+    id: 1,
+    name: 'John Smith',
+    email: 'john.smith@example.com',
+    avatarUrl: 'https://i.pravatar.cc/150?img=1',
+  },
+  {
+    id: 2,
+    name: 'Sarah Johnson',
+    email: 'sarah.johnson@example.com',
+    avatarUrl: 'https://i.pravatar.cc/150?img=2',
+  },
+  {
+    id: 3,
+    name: 'Mike Chen',
+    email: 'mike.chen@example.com',
+    avatarUrl: 'https://i.pravatar.cc/150?img=3',
+  },
+  {
+    id: 4,
+    name: 'Emily Davis',
+    email: 'emily.davis@example.com',
+    avatarUrl: 'https://i.pravatar.cc/150?img=4',
+  },
+  {
+    id: 5,
+    name: 'Alex Rodriguez',
+    email: 'alex.rodriguez@example.com',
+    avatarUrl: 'https://i.pravatar.cc/150?img=5',
+  },
+];
+
+const withCount = policy => ({
+  ...policy,
+  assignedAgentCount: policy.users.length,
+});
+
+const policyA = withCount({
+  id: 1,
+  name: 'High Volume Support',
+  description:
+    'Capacity-based policy for handling high conversation volumes with experienced agents',
+  users: [mockUsers[0], mockUsers[1], mockUsers[2]],
+  isFetchingUsers: false,
+});
+
+const policyB = withCount({
+  id: 2,
+  name: 'Specialized Team',
+  description: 'Custom capacity limits for specialized support team members',
+  users: [mockUsers[3], mockUsers[4]],
+  isFetchingUsers: false,
+});
+
+const emptyPolicy = withCount({
+  id: 3,
+  name: 'New Policy',
+  description: 'Recently created policy with no assigned agents yet',
+  users: [],
+  isFetchingUsers: false,
+});
+
+const loadingPolicy = withCount({
+  id: 4,
+  name: 'Loading Policy',
+  description: 'Policy currently loading agent information',
+  users: [],
+  isFetchingUsers: true,
+});
+
+const onEdit = id => console.log('Edit policy:', id);
+const onDelete = id => console.log('Delete policy:', id);
+const onFetchUsers = id => console.log('Fetch users for policy:', id);
+</script>
+
+<template>
+  <Story
+    title="Components/AgentManagementPolicy/AgentCapacityPolicyCard"
+    :layout="{ type: 'grid', width: '1200px' }"
+  >
+    <Variant title="Multiple Cards (Various States)">
+      <div class="p-4 bg-n-background">
+        <div class="grid grid-cols-1 gap-4">
+          <AgentCapacityPolicyCard
+            v-bind="policyA"
+            @edit="onEdit"
+            @delete="onDelete"
+            @fetch-users="onFetchUsers"
+          />
+          <AgentCapacityPolicyCard
+            v-bind="policyB"
+            @edit="onEdit"
+            @delete="onDelete"
+            @fetch-users="onFetchUsers"
+          />
+          <AgentCapacityPolicyCard
+            v-bind="emptyPolicy"
+            @edit="onEdit"
+            @delete="onDelete"
+            @fetch-users="onFetchUsers"
+          />
+          <AgentCapacityPolicyCard
+            v-bind="loadingPolicy"
+            @edit="onEdit"
+            @delete="onDelete"
+            @fetch-users="onFetchUsers"
+          />
+        </div>
+      </div>
+    </Variant>
+  </Story>
+</template>

app/javascript/dashboard/components-next/AssignmentPolicy/AgentCapacityPolicyCard/AgentCapacityPolicyCard.vue

@@ -0,0 +1,86 @@
+<script setup>
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import Button from 'dashboard/components-next/button/Button.vue';
+import CardLayout from 'dashboard/components-next/CardLayout.vue';
+import CardPopover from '../components/CardPopover.vue';
+
+const props = defineProps({
+  id: { type: Number, required: true },
+  name: { type: String, default: '' },
+  description: { type: String, default: '' },
+  assignedAgentCount: { type: Number, default: 0 },
+  users: { type: Array, default: () => [] },
+  isFetchingUsers: { type: Boolean, default: false },
+});
+
+const emit = defineEmits(['edit', 'delete', 'fetchUsers']);
+
+const { t } = useI18n();
+
+const users = computed(() => {
+  return props.users.map(user => {
+    return {
+      name: user.name,
+      key: user.id,
+      email: user.email,
+      avatarUrl: user.avatarUrl,
+    };
+  });
+});
+
+const handleEdit = () => {
+  emit('edit', props.id);
+};
+
+const handleDelete = () => {
+  emit('delete', props.id);
+};
+
+const handleFetchUsers = () => {
+  if (props.users?.length > 0) return;
+  emit('fetchUsers', props.id);
+};
+</script>
+
+<template>
+  <CardLayout class="[&>div]:px-5">
+    <div class="flex flex-col gap-2 relative justify-between w-full">
+      <div class="flex items-center gap-3 justify-between w-full">
+        <div class="flex items-center gap-3">
+          <h3 class="text-base font-medium text-n-slate-12 line-clamp-1">
+            {{ name }}
+          </h3>
+          <CardPopover
+            :title="
+              t('ASSIGNMENT_POLICY.AGENT_CAPACITY_POLICY.INDEX.CARD.POPOVER')
+            "
+            icon="i-lucide-users-round"
+            :count="assignedAgentCount"
+            :items="users"
+            :is-fetching="isFetchingUsers"
+            @fetch="handleFetchUsers"
+          />
+        </div>
+        <div class="flex items-center gap-2">
+          <Button
+            :label="
+              t('ASSIGNMENT_POLICY.AGENT_CAPACITY_POLICY.INDEX.CARD.EDIT')
+            "
+            sm
+            slate
+            link
+            class="px-2"
+            @click="handleEdit"
+          />
+          <div class="w-px h-2.5 bg-n-slate-5" />
+          <Button icon="i-lucide-trash" sm slate ghost @click="handleDelete" />
+        </div>
+      </div>
+      <p class="text-n-slate-11 text-sm line-clamp-1 mb-0 py-1">
+        {{ description }}
+      </p>
+    </div>
+  </CardLayout>
+</template>

app/javascript/dashboard/components-next/AssignmentPolicy/components/CardPopover.vue

@@ -1,6 +1,8 @@
 <script setup>
 import { useToggle } from '@vueuse/core';
 import { vOnClickOutside } from '@vueuse/components';
+
+import Avatar from 'next/avatar/Avatar.vue';
 import Icon from 'dashboard/components-next/icon/Icon.vue';
 import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
 
@@ -53,7 +55,7 @@ const handleClickOutside = () => {
       class="h-6 px-2 rounded-md bg-n-alpha-2 gap-1.5 flex items-center"
       @click="handleButtonClick()"
     >
-      <Icon icon="i-lucide-inbox" class="size-3.5 text-n-slate-12" />
+      <Icon :icon="icon" class="size-3.5 text-n-slate-12" />
       <span class="text-n-slate-12 text-sm">
         {{ count }}
       </span>
@@ -74,17 +76,26 @@ const handleClickOutside = () => {
         <Spinner />
       </div>
 
-      <div v-else class="flex flex-col gap-4">
+      <div v-else class="flex flex-col gap-4 w-full">
         <div
           v-for="item in items"
           :key="item.id"
-          class="flex items-center gap-2 min-w-0 w-full"
+          class="flex items-center justify-between gap-2 min-w-0 w-full"
         >
+          <div class="flex items-center gap-2 min-w-0 w-full">
             <Icon
               v-if="item.icon"
               :icon="item.icon"
               class="size-4 text-n-slate-12 flex-shrink-0"
             />
+            <Avatar
+              v-else
+              :title="item.name"
+              :src="item.avatarUrl"
+              :name="item.name"
+              :size="20"
+              rounded-full
+            />
             <div class="flex items-center gap-1 min-w-0 flex-1">
               <span
                 :title="item.name"
@@ -92,12 +103,19 @@ const handleClickOutside = () => {
               >
                 {{ item.name }}
               </span>
-            <span v-if="item.id" class="text-sm text-n-slate-11 flex-shrink-0">
+              <span
+                v-if="item.id"
+                class="text-sm text-n-slate-11 flex-shrink-0"
+              >
                 {{ `#${item.id}` }}
               </span>
             </div>
           </div>
+          <span v-if="item.email" class="text-sm text-n-slate-11 flex-shrink-0">
+            {{ item.email }}
+          </span>
+        </div>
+      </div>
     </div>
   </div>
-  </div>
 </template>

app/javascript/dashboard/components-next/AssignmentPolicy/components/FairDistribution.vue

@@ -55,7 +55,7 @@ onMounted(() => {
           v-model="fairDistributionLimit"
           type="number"
           placeholder="100"
-          :max="100000"
+          max="100000"
           class="w-full"
         />
       </div>
@@ -77,8 +77,8 @@ onMounted(() => {
         <DurationInput
           v-model:model-value="fairDistributionWindow"
           v-model:unit="windowUnit"
-          min="10"
-          max="1438560"
+          :min="10"
+          :max="1438560"
         />
       </div>
     </div>

app/javascript/dashboard/components-next/AssignmentPolicy/components/story/CardPopover.story.vue

@@ -23,6 +23,39 @@ const mockItems = [
     icon: 'i-lucide-facebook',
   },
 ];
+
+const mockUsers = [
+  {
+    id: 1,
+    name: 'John Smith',
+    email: 'john.smith@example.com',
+    avatarUrl: 'https://i.pravatar.cc/150?img=1',
+  },
+  {
+    id: 2,
+    name: 'Sarah Johnson',
+    email: 'sarah.johnson@example.com',
+    avatarUrl: 'https://i.pravatar.cc/150?img=2',
+  },
+  {
+    id: 3,
+    name: 'Mike Chen',
+    email: 'mike.chen@example.com',
+    avatarUrl: 'https://i.pravatar.cc/150?img=3',
+  },
+  {
+    id: 4,
+    name: 'Emily Davis',
+    email: 'emily.davis@example.com',
+    avatarUrl: 'https://i.pravatar.cc/150?img=4',
+  },
+  {
+    id: 5,
+    name: 'Alex Rodriguez',
+    email: 'alex.rodriguez@example.com',
+    avatarUrl: 'https://i.pravatar.cc/150?img=5',
+  },
+];
 </script>
 
 <template>
@@ -41,5 +74,16 @@ const mockItems = [
         />
       </div>
     </Variant>
+    <Variant title="Basic Usage">
+      <div class="p-8 bg-n-background flex gap-4 h-96 items-start">
+        <CardPopover
+          :count="3"
+          title="Added Agents"
+          icon="i-lucide-users-round"
+          :items="mockUsers.slice(0, 3)"
+          @fetch="() => console.log('Fetch triggered')"
+        />
+      </div>
+    </Variant>
   </Story>
 </template>

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

@@ -563,13 +563,32 @@
         }
       },
       "DELETE_POLICY": {
-        "TITLE": "Delete policy",
-        "DESCRIPTION": "Are you sure you want to delete this policy? This action cannot be undone.",
-        "CONFIRM_BUTTON_LABEL": "Delete",
-        "CANCEL_BUTTON_LABEL": "Cancel",
         "SUCCESS_MESSAGE": "Assignment policy deleted successfully",
         "ERROR_MESSAGE": "Failed to delete assignment policy"
       }
+    },
+    "AGENT_CAPACITY_POLICY": {
+      "INDEX": {
+        "HEADER": {
+          "TITLE": "Agent capacity",
+          "CREATE_POLICY": "New policy"
+        },
+        "CARD": {
+          "POPOVER": "Added agents",
+          "EDIT": "Edit"
+        },
+        "NO_RECORDS_FOUND": "No agent capacity policies found"
+      },
+      "DELETE_POLICY": {
+        "SUCCESS_MESSAGE": "Agent capacity policy deleted successfully",
+        "ERROR_MESSAGE": "Failed to delete agent capacity policy"
+      }
+    },
+    "DELETE_POLICY": {
+      "TITLE": "Delete policy",
+      "DESCRIPTION": "Are you sure you want to delete this policy? This action cannot be undone.",
+      "CONFIRM_BUTTON_LABEL": "Delete",
+      "CANCEL_BUTTON_LABEL": "Cancel"
     }
   }
 }

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

@@ -30,7 +30,7 @@ const agentAssignments = computed(() => [
     ],
   },
   {
-    key: 'agent_capacity_policy',
+    key: 'agent_capacity_policy_index',
     title: t('ASSIGNMENT_POLICY.INDEX.AGENT_CAPACITY_POLICY.TITLE'),
     description: t('ASSIGNMENT_POLICY.INDEX.AGENT_CAPACITY_POLICY.DESCRIPTION'),
     features: [

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

@@ -5,6 +5,7 @@ import AssignmentPolicyIndex from './Index.vue';
 import AgentAssignmentIndex from './pages/AgentAssignmentIndexPage.vue';
 import AgentAssignmentCreate from './pages/AgentAssignmentCreatePage.vue';
 import AgentAssignmentEdit from './pages/AgentAssignmentEditPage.vue';
+import AgentCapacityIndex from './pages/AgentCapacityIndexPage.vue';
 
 export default {
   routes: [
@@ -54,6 +55,15 @@ export default {
             permissions: ['administrator'],
           },
         },
+        {
+          path: 'capacity',
+          name: 'agent_capacity_policy_index',
+          component: AgentCapacityIndex,
+          meta: {
+            featureFlag: FEATURE_FLAGS.ASSIGNMENT_V2,
+            permissions: ['administrator'],
+          },
+        },
       ],
     },
   ],

app/javascript/dashboard/routes/dashboard/settings/assignmentPolicy/pages/AgentCapacityIndexPage.vue

@@ -0,0 +1,126 @@
+<script setup>
+import { computed, onMounted, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useStore, useMapGetter } from 'dashboard/composables/store';
+import { useRouter } from 'vue-router';
+import { useAlert } from 'dashboard/composables';
+
+import Breadcrumb from 'dashboard/components-next/breadcrumb/Breadcrumb.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+import SettingsLayout from 'dashboard/routes/dashboard/settings/SettingsLayout.vue';
+import AgentCapacityPolicyCard from 'dashboard/components-next/AssignmentPolicy/AgentCapacityPolicyCard/AgentCapacityPolicyCard.vue';
+import ConfirmDeletePolicyDialog from './components/ConfirmDeletePolicyDialog.vue';
+
+const store = useStore();
+const { t } = useI18n();
+const router = useRouter();
+
+const agentCapacityPolicies = useMapGetter(
+  'agentCapacityPolicies/getAgentCapacityPolicies'
+);
+const uiFlags = useMapGetter('agentCapacityPolicies/getUIFlags');
+const usersUiFlags = useMapGetter('agentCapacityPolicies/getUsersUIFlags');
+
+const confirmDeletePolicyDialogRef = ref(null);
+
+const breadcrumbItems = computed(() => {
+  const items = [
+    {
+      label: t('ASSIGNMENT_POLICY.INDEX.HEADER.TITLE'),
+      routeName: 'assignment_policy_index',
+    },
+    {
+      label: t('ASSIGNMENT_POLICY.AGENT_CAPACITY_POLICY.INDEX.HEADER.TITLE'),
+    },
+  ];
+  return items;
+});
+
+const handleBreadcrumbClick = item => {
+  router.push({
+    name: item.routeName,
+  });
+};
+
+const onClickCreatePolicy = () => {
+  router.push({
+    name: 'agent_capacity_policy_create',
+  });
+};
+
+const onClickEditPolicy = id => {
+  router.push({
+    name: 'agent_capacity_policy_edit',
+    params: {
+      id,
+    },
+  });
+};
+
+const handleFetchUsers = id => {
+  if (usersUiFlags.value.isFetching) return;
+  store.dispatch('agentCapacityPolicies/getUsers', id);
+};
+
+const handleDelete = id => {
+  confirmDeletePolicyDialogRef.value.openDialog(id);
+};
+
+const handleDeletePolicy = async policyId => {
+  try {
+    await store.dispatch('agentCapacityPolicies/delete', policyId);
+    useAlert(
+      t('ASSIGNMENT_POLICY.AGENT_CAPACITY_POLICY.DELETE_POLICY.SUCCESS_MESSAGE')
+    );
+    confirmDeletePolicyDialogRef.value.closeDialog();
+  } catch (error) {
+    useAlert(
+      t('ASSIGNMENT_POLICY.AGENT_CAPACITY_POLICY.DELETE_POLICY.ERROR_MESSAGE')
+    );
+  }
+};
+
+onMounted(() => {
+  store.dispatch('agentCapacityPolicies/get');
+});
+</script>
+
+<template>
+  <SettingsLayout
+    :is-loading="uiFlags.isFetching"
+    :no-records-found="agentCapacityPolicies.length === 0"
+    :no-records-message="
+      $t('ASSIGNMENT_POLICY.AGENT_CAPACITY_POLICY.INDEX.NO_RECORDS_FOUND')
+    "
+  >
+    <template #header>
+      <div class="flex items-center gap-2 w-full justify-between">
+        <Breadcrumb :items="breadcrumbItems" @click="handleBreadcrumbClick" />
+        <Button icon="i-lucide-plus" md @click="onClickCreatePolicy">
+          {{
+            $t(
+              'ASSIGNMENT_POLICY.AGENT_CAPACITY_POLICY.INDEX.HEADER.CREATE_POLICY'
+            )
+          }}
+        </Button>
+      </div>
+    </template>
+    <template #body>
+      <div class="flex flex-col gap-4 pt-8">
+        <AgentCapacityPolicyCard
+          v-for="policy in agentCapacityPolicies"
+          :key="policy.id"
+          v-bind="policy"
+          :is-fetching-users="usersUiFlags.isFetching"
+          @fetch-users="handleFetchUsers"
+          @edit="onClickEditPolicy"
+          @delete="handleDelete"
+        />
+      </div>
+    </template>
+    <ConfirmDeletePolicyDialog
+      ref="confirmDeletePolicyDialogRef"
+      @delete="handleDeletePolicy"
+    />
+  </SettingsLayout>
+</template>

app/javascript/dashboard/routes/dashboard/settings/assignmentPolicy/pages/components/ConfirmDeletePolicyDialog.vue

@@ -31,19 +31,13 @@ defineExpose({ openDialog, closeDialog });
   <Dialog
     ref="dialogRef"
     type="alert"
-    :title="t('ASSIGNMENT_POLICY.AGENT_ASSIGNMENT_POLICY.DELETE_POLICY.TITLE')"
-    :description="
-      t('ASSIGNMENT_POLICY.AGENT_ASSIGNMENT_POLICY.DELETE_POLICY.DESCRIPTION')
-    "
+    :title="t('ASSIGNMENT_POLICY.DELETE_POLICY.TITLE')"
+    :description="t('ASSIGNMENT_POLICY.DELETE_POLICY.DESCRIPTION')"
     :confirm-button-label="
-      t(
-        'ASSIGNMENT_POLICY.AGENT_ASSIGNMENT_POLICY.DELETE_POLICY.CONFIRM_BUTTON_LABEL'
-      )
+      t('ASSIGNMENT_POLICY.DELETE_POLICY.CONFIRM_BUTTON_LABEL')
     "
     :cancel-button-label="
-      t(
-        'ASSIGNMENT_POLICY.AGENT_ASSIGNMENT_POLICY.DELETE_POLICY.CANCEL_BUTTON_LABEL'
-      )
+      t('ASSIGNMENT_POLICY.DELETE_POLICY.CANCEL_BUTTON_LABEL')
     "
     @confirm="handleDialogConfirm"
   />

app/javascript/dashboard/store/index.js

@@ -2,6 +2,7 @@ import { createStore } from 'vuex';
 
 import accounts from './modules/accounts';
 import agentBots from './modules/agentBots';
+import agentCapacityPolicies from './modules/agentCapacityPolicies';
 import agents from './modules/agents';
 import assignmentPolicies from './modules/assignmentPolicies';
 import articles from './modules/helpCenterArticles';
@@ -63,6 +64,7 @@ export default createStore({
   modules: {
     accounts,
     agentBots,
+    agentCapacityPolicies,
     agents,
     assignmentPolicies,
     articles,

app/javascript/dashboard/store/modules/agentCapacityPolicies.js

@@ -0,0 +1,168 @@
+import * as MutationHelpers from 'shared/helpers/vuex/mutationHelpers';
+import types from '../mutation-types';
+import AgentCapacityPoliciesAPI from '../../api/agentCapacityPolicies';
+import { throwErrorMessage } from '../utils/api';
+import camelcaseKeys from 'camelcase-keys';
+import snakecaseKeys from 'snakecase-keys';
+
+export const state = {
+  records: [],
+  uiFlags: {
+    isFetching: false,
+    isFetchingItem: false,
+    isCreating: false,
+    isUpdating: false,
+    isDeleting: false,
+  },
+  usersUiFlags: {
+    isFetching: false,
+    isDeleting: false,
+  },
+};
+
+export const getters = {
+  getAgentCapacityPolicies(_state) {
+    return _state.records;
+  },
+  getUIFlags(_state) {
+    return _state.uiFlags;
+  },
+  getUsersUIFlags(_state) {
+    return _state.usersUiFlags;
+  },
+  getAgentCapacityPolicyById: _state => id => {
+    return _state.records.find(record => record.id === Number(id)) || {};
+  },
+};
+
+export const actions = {
+  get: async function get({ commit }) {
+    commit(types.SET_AGENT_CAPACITY_POLICIES_UI_FLAG, { isFetching: true });
+    try {
+      const response = await AgentCapacityPoliciesAPI.get();
+      commit(types.SET_AGENT_CAPACITY_POLICIES, camelcaseKeys(response.data));
+    } catch (error) {
+      throwErrorMessage(error);
+    } finally {
+      commit(types.SET_AGENT_CAPACITY_POLICIES_UI_FLAG, { isFetching: false });
+    }
+  },
+
+  show: async function show({ commit }, policyId) {
+    commit(types.SET_AGENT_CAPACITY_POLICIES_UI_FLAG, { isFetchingItem: true });
+    try {
+      const response = await AgentCapacityPoliciesAPI.show(policyId);
+      const policy = camelcaseKeys(response.data);
+      commit(types.SET_AGENT_CAPACITY_POLICY, policy);
+    } catch (error) {
+      throwErrorMessage(error);
+    } finally {
+      commit(types.SET_AGENT_CAPACITY_POLICIES_UI_FLAG, {
+        isFetchingItem: false,
+      });
+    }
+  },
+
+  create: async function create({ commit }, policyObj) {
+    commit(types.SET_AGENT_CAPACITY_POLICIES_UI_FLAG, { isCreating: true });
+    try {
+      const response = await AgentCapacityPoliciesAPI.create(
+        snakecaseKeys(policyObj)
+      );
+      commit(types.ADD_AGENT_CAPACITY_POLICY, camelcaseKeys(response.data));
+      return response.data;
+    } catch (error) {
+      throwErrorMessage(error);
+      throw error;
+    } finally {
+      commit(types.SET_AGENT_CAPACITY_POLICIES_UI_FLAG, { isCreating: false });
+    }
+  },
+
+  update: async function update({ commit }, { id, ...policyParams }) {
+    commit(types.SET_AGENT_CAPACITY_POLICIES_UI_FLAG, { isUpdating: true });
+    try {
+      const response = await AgentCapacityPoliciesAPI.update(
+        id,
+        snakecaseKeys(policyParams)
+      );
+      commit(types.EDIT_AGENT_CAPACITY_POLICY, camelcaseKeys(response.data));
+      return response.data;
+    } catch (error) {
+      throwErrorMessage(error);
+      throw error;
+    } finally {
+      commit(types.SET_AGENT_CAPACITY_POLICIES_UI_FLAG, { isUpdating: false });
+    }
+  },
+
+  delete: async function deletePolicy({ commit }, policyId) {
+    commit(types.SET_AGENT_CAPACITY_POLICIES_UI_FLAG, { isDeleting: true });
+    try {
+      await AgentCapacityPoliciesAPI.delete(policyId);
+      commit(types.DELETE_AGENT_CAPACITY_POLICY, policyId);
+    } catch (error) {
+      throwErrorMessage(error);
+      throw error;
+    } finally {
+      commit(types.SET_AGENT_CAPACITY_POLICIES_UI_FLAG, { isDeleting: false });
+    }
+  },
+
+  getUsers: async function getUsers({ commit }, policyId) {
+    commit(types.SET_AGENT_CAPACITY_POLICIES_USERS_UI_FLAG, {
+      isFetching: true,
+    });
+    try {
+      const response = await AgentCapacityPoliciesAPI.getUsers(policyId);
+      commit(types.SET_AGENT_CAPACITY_POLICIES_USERS, {
+        policyId,
+        users: camelcaseKeys(response.data),
+      });
+      return response.data;
+    } catch (error) {
+      throwErrorMessage(error);
+      throw error;
+    } finally {
+      commit(types.SET_AGENT_CAPACITY_POLICIES_USERS_UI_FLAG, {
+        isFetching: false,
+      });
+    }
+  },
+};
+
+export const mutations = {
+  [types.SET_AGENT_CAPACITY_POLICIES_UI_FLAG](_state, data) {
+    _state.uiFlags = {
+      ..._state.uiFlags,
+      ...data,
+    };
+  },
+
+  [types.SET_AGENT_CAPACITY_POLICIES]: MutationHelpers.set,
+  [types.SET_AGENT_CAPACITY_POLICY]: MutationHelpers.setSingleRecord,
+  [types.ADD_AGENT_CAPACITY_POLICY]: MutationHelpers.create,
+  [types.EDIT_AGENT_CAPACITY_POLICY]: MutationHelpers.updateAttributes,
+  [types.DELETE_AGENT_CAPACITY_POLICY]: MutationHelpers.destroy,
+
+  [types.SET_AGENT_CAPACITY_POLICIES_USERS_UI_FLAG](_state, data) {
+    _state.usersUiFlags = {
+      ..._state.usersUiFlags,
+      ...data,
+    };
+  },
+  [types.SET_AGENT_CAPACITY_POLICIES_USERS](_state, { policyId, users }) {
+    const policy = _state.records.find(p => p.id === policyId);
+    if (policy) {
+      policy.users = users;
+    }
+  },
+};
+
+export default {
+  namespaced: true,
+  state,
+  getters,
+  actions,
+  mutations,
+};

app/javascript/dashboard/store/modules/specs/agentCapacityPolicies/actions.spec.js

@@ -0,0 +1,227 @@
+import axios from 'axios';
+import { actions } from '../../agentCapacityPolicies';
+import types from '../../../mutation-types';
+import agentCapacityPoliciesList, { camelCaseFixtures } from './fixtures';
+import camelcaseKeys from 'camelcase-keys';
+import snakecaseKeys from 'snakecase-keys';
+
+const commit = vi.fn();
+
+global.axios = axios;
+vi.mock('axios');
+vi.mock('camelcase-keys');
+vi.mock('snakecase-keys');
+vi.mock('../../../utils/api');
+
+describe('#actions', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe('#get', () => {
+    it('sends correct actions if API is success', async () => {
+      axios.get.mockResolvedValue({ data: agentCapacityPoliciesList });
+      camelcaseKeys.mockReturnValue(camelCaseFixtures);
+
+      await actions.get({ commit });
+
+      expect(camelcaseKeys).toHaveBeenCalledWith(agentCapacityPoliciesList);
+      expect(commit.mock.calls).toEqual([
+        [types.SET_AGENT_CAPACITY_POLICIES_UI_FLAG, { isFetching: true }],
+        [types.SET_AGENT_CAPACITY_POLICIES, camelCaseFixtures],
+        [types.SET_AGENT_CAPACITY_POLICIES_UI_FLAG, { isFetching: false }],
+      ]);
+    });
+
+    it('sends correct actions if API is error', async () => {
+      axios.get.mockRejectedValue({ message: 'Incorrect header' });
+
+      await actions.get({ commit });
+
+      expect(commit.mock.calls).toEqual([
+        [types.SET_AGENT_CAPACITY_POLICIES_UI_FLAG, { isFetching: true }],
+        [types.SET_AGENT_CAPACITY_POLICIES_UI_FLAG, { isFetching: false }],
+      ]);
+    });
+  });
+
+  describe('#show', () => {
+    it('sends correct actions if API is success', async () => {
+      const policyData = agentCapacityPoliciesList[0];
+      const camelCasedPolicy = camelCaseFixtures[0];
+
+      axios.get.mockResolvedValue({ data: policyData });
+      camelcaseKeys.mockReturnValue(camelCasedPolicy);
+
+      await actions.show({ commit }, 1);
+
+      expect(camelcaseKeys).toHaveBeenCalledWith(policyData);
+      expect(commit.mock.calls).toEqual([
+        [types.SET_AGENT_CAPACITY_POLICIES_UI_FLAG, { isFetchingItem: true }],
+        [types.SET_AGENT_CAPACITY_POLICY, camelCasedPolicy],
+        [types.SET_AGENT_CAPACITY_POLICIES_UI_FLAG, { isFetchingItem: false }],
+      ]);
+    });
+
+    it('sends correct actions if API is error', async () => {
+      axios.get.mockRejectedValue({ message: 'Not found' });
+
+      await actions.show({ commit }, 1);
+
+      expect(commit.mock.calls).toEqual([
+        [types.SET_AGENT_CAPACITY_POLICIES_UI_FLAG, { isFetchingItem: true }],
+        [types.SET_AGENT_CAPACITY_POLICIES_UI_FLAG, { isFetchingItem: false }],
+      ]);
+    });
+  });
+
+  describe('#create', () => {
+    it('sends correct actions if API is success', async () => {
+      const newPolicy = agentCapacityPoliciesList[0];
+      const camelCasedData = camelCaseFixtures[0];
+      const snakeCasedPolicy = { default_capacity: 10 };
+
+      axios.post.mockResolvedValue({ data: newPolicy });
+      camelcaseKeys.mockReturnValue(camelCasedData);
+      snakecaseKeys.mockReturnValue(snakeCasedPolicy);
+
+      const result = await actions.create({ commit }, newPolicy);
+
+      expect(snakecaseKeys).toHaveBeenCalledWith(newPolicy);
+      expect(camelcaseKeys).toHaveBeenCalledWith(newPolicy);
+      expect(commit.mock.calls).toEqual([
+        [types.SET_AGENT_CAPACITY_POLICIES_UI_FLAG, { isCreating: true }],
+        [types.ADD_AGENT_CAPACITY_POLICY, camelCasedData],
+        [types.SET_AGENT_CAPACITY_POLICIES_UI_FLAG, { isCreating: false }],
+      ]);
+      expect(result).toEqual(newPolicy);
+    });
+
+    it('sends correct actions if API is error', async () => {
+      axios.post.mockRejectedValue(new Error('Validation error'));
+
+      await expect(actions.create({ commit }, {})).rejects.toThrow(Error);
+
+      expect(commit.mock.calls).toEqual([
+        [types.SET_AGENT_CAPACITY_POLICIES_UI_FLAG, { isCreating: true }],
+        [types.SET_AGENT_CAPACITY_POLICIES_UI_FLAG, { isCreating: false }],
+      ]);
+    });
+  });
+
+  describe('#update', () => {
+    it('sends correct actions if API is success', async () => {
+      const updateParams = { id: 1, name: 'Updated Policy' };
+      const responseData = {
+        ...agentCapacityPoliciesList[0],
+        name: 'Updated Policy',
+      };
+      const camelCasedData = {
+        ...camelCaseFixtures[0],
+        name: 'Updated Policy',
+      };
+      const snakeCasedParams = { name: 'Updated Policy' };
+
+      axios.patch.mockResolvedValue({ data: responseData });
+      camelcaseKeys.mockReturnValue(camelCasedData);
+      snakecaseKeys.mockReturnValue(snakeCasedParams);
+
+      const result = await actions.update({ commit }, updateParams);
+
+      expect(snakecaseKeys).toHaveBeenCalledWith({ name: 'Updated Policy' });
+      expect(camelcaseKeys).toHaveBeenCalledWith(responseData);
+      expect(commit.mock.calls).toEqual([
+        [types.SET_AGENT_CAPACITY_POLICIES_UI_FLAG, { isUpdating: true }],
+        [types.EDIT_AGENT_CAPACITY_POLICY, camelCasedData],
+        [types.SET_AGENT_CAPACITY_POLICIES_UI_FLAG, { isUpdating: false }],
+      ]);
+      expect(result).toEqual(responseData);
+    });
+
+    it('sends correct actions if API is error', async () => {
+      axios.patch.mockRejectedValue(new Error('Validation error'));
+
+      await expect(
+        actions.update({ commit }, { id: 1, name: 'Test' })
+      ).rejects.toThrow(Error);
+
+      expect(commit.mock.calls).toEqual([
+        [types.SET_AGENT_CAPACITY_POLICIES_UI_FLAG, { isUpdating: true }],
+        [types.SET_AGENT_CAPACITY_POLICIES_UI_FLAG, { isUpdating: false }],
+      ]);
+    });
+  });
+
+  describe('#delete', () => {
+    it('sends correct actions if API is success', async () => {
+      const policyId = 1;
+      axios.delete.mockResolvedValue({});
+
+      await actions.delete({ commit }, policyId);
+
+      expect(commit.mock.calls).toEqual([
+        [types.SET_AGENT_CAPACITY_POLICIES_UI_FLAG, { isDeleting: true }],
+        [types.DELETE_AGENT_CAPACITY_POLICY, policyId],
+        [types.SET_AGENT_CAPACITY_POLICIES_UI_FLAG, { isDeleting: false }],
+      ]);
+    });
+
+    it('sends correct actions if API is error', async () => {
+      axios.delete.mockRejectedValue(new Error('Not found'));
+
+      await expect(actions.delete({ commit }, 1)).rejects.toThrow(Error);
+
+      expect(commit.mock.calls).toEqual([
+        [types.SET_AGENT_CAPACITY_POLICIES_UI_FLAG, { isDeleting: true }],
+        [types.SET_AGENT_CAPACITY_POLICIES_UI_FLAG, { isDeleting: false }],
+      ]);
+    });
+  });
+
+  describe('#getUsers', () => {
+    it('sends correct actions if API is success', async () => {
+      const policyId = 1;
+      const userData = [
+        { id: 1, name: 'Agent 1', email: 'agent1@example.com', capacity: 15 },
+        { id: 2, name: 'Agent 2', email: 'agent2@example.com', capacity: 20 },
+      ];
+      const camelCasedUsers = [
+        { id: 1, name: 'Agent 1', email: 'agent1@example.com', capacity: 15 },
+        { id: 2, name: 'Agent 2', email: 'agent2@example.com', capacity: 20 },
+      ];
+
+      axios.get.mockResolvedValue({ data: userData });
+      camelcaseKeys.mockReturnValue(camelCasedUsers);
+
+      const result = await actions.getUsers({ commit }, policyId);
+
+      expect(camelcaseKeys).toHaveBeenCalledWith(userData);
+      expect(commit.mock.calls).toEqual([
+        [types.SET_AGENT_CAPACITY_POLICIES_USERS_UI_FLAG, { isFetching: true }],
+        [
+          types.SET_AGENT_CAPACITY_POLICIES_USERS,
+          { policyId, users: camelCasedUsers },
+        ],
+        [
+          types.SET_AGENT_CAPACITY_POLICIES_USERS_UI_FLAG,
+          { isFetching: false },
+        ],
+      ]);
+      expect(result).toEqual(userData);
+    });
+
+    it('sends correct actions if API fails', async () => {
+      axios.get.mockRejectedValue(new Error('API Error'));
+
+      await expect(actions.getUsers({ commit }, 1)).rejects.toThrow(Error);
+
+      expect(commit.mock.calls).toEqual([
+        [types.SET_AGENT_CAPACITY_POLICIES_USERS_UI_FLAG, { isFetching: true }],
+        [
+          types.SET_AGENT_CAPACITY_POLICIES_USERS_UI_FLAG,
+          { isFetching: false },
+        ],
+      ]);
+    });
+  });
+});

app/javascript/dashboard/store/modules/specs/agentCapacityPolicies/fixtures.js

@@ -0,0 +1,77 @@
+export default [
+  {
+    id: 1,
+    name: 'Standard Capacity Policy',
+    description: 'Default capacity policy for agents',
+    default_capacity: 10,
+    enabled: true,
+    account_id: 1,
+    assigned_agent_count: 3,
+    created_at: '2024-01-01T10:00:00.000Z',
+    updated_at: '2024-01-01T10:00:00.000Z',
+    users: [],
+  },
+  {
+    id: 2,
+    name: 'High Capacity Policy',
+    description: 'High capacity policy for senior agents',
+    default_capacity: 20,
+    enabled: true,
+    account_id: 1,
+    assigned_agent_count: 5,
+    created_at: '2024-01-01T11:00:00.000Z',
+    updated_at: '2024-01-01T11:00:00.000Z',
+    users: [],
+  },
+  {
+    id: 3,
+    name: 'Disabled Policy',
+    description: 'Disabled capacity policy',
+    default_capacity: 5,
+    enabled: false,
+    account_id: 1,
+    assigned_agent_count: 0,
+    created_at: '2024-01-01T12:00:00.000Z',
+    updated_at: '2024-01-01T12:00:00.000Z',
+    users: [],
+  },
+];
+
+export const camelCaseFixtures = [
+  {
+    id: 1,
+    name: 'Standard Capacity Policy',
+    description: 'Default capacity policy for agents',
+    defaultCapacity: 10,
+    enabled: true,
+    accountId: 1,
+    assignedAgentCount: 3,
+    createdAt: '2024-01-01T10:00:00.000Z',
+    updatedAt: '2024-01-01T10:00:00.000Z',
+    users: [],
+  },
+  {
+    id: 2,
+    name: 'High Capacity Policy',
+    description: 'High capacity policy for senior agents',
+    defaultCapacity: 20,
+    enabled: true,
+    accountId: 1,
+    assignedAgentCount: 5,
+    createdAt: '2024-01-01T11:00:00.000Z',
+    updatedAt: '2024-01-01T11:00:00.000Z',
+    users: [],
+  },
+  {
+    id: 3,
+    name: 'Disabled Policy',
+    description: 'Disabled capacity policy',
+    defaultCapacity: 5,
+    enabled: false,
+    accountId: 1,
+    assignedAgentCount: 0,
+    createdAt: '2024-01-01T12:00:00.000Z',
+    updatedAt: '2024-01-01T12:00:00.000Z',
+    users: [],
+  },
+];

app/javascript/dashboard/store/modules/specs/agentCapacityPolicies/getters.spec.js

@@ -0,0 +1,51 @@
+import { getters } from '../../agentCapacityPolicies';
+import agentCapacityPoliciesList from './fixtures';
+
+describe('#getters', () => {
+  it('getAgentCapacityPolicies', () => {
+    const state = { records: agentCapacityPoliciesList };
+    expect(getters.getAgentCapacityPolicies(state)).toEqual(
+      agentCapacityPoliciesList
+    );
+  });
+
+  it('getUIFlags', () => {
+    const state = {
+      uiFlags: {
+        isFetching: true,
+        isFetchingItem: false,
+        isCreating: false,
+        isUpdating: false,
+        isDeleting: false,
+      },
+    };
+    expect(getters.getUIFlags(state)).toEqual({
+      isFetching: true,
+      isFetchingItem: false,
+      isCreating: false,
+      isUpdating: false,
+      isDeleting: false,
+    });
+  });
+
+  it('getUsersUIFlags', () => {
+    const state = {
+      usersUiFlags: {
+        isFetching: false,
+        isDeleting: false,
+      },
+    };
+    expect(getters.getUsersUIFlags(state)).toEqual({
+      isFetching: false,
+      isDeleting: false,
+    });
+  });
+
+  it('getAgentCapacityPolicyById', () => {
+    const state = { records: agentCapacityPoliciesList };
+    expect(getters.getAgentCapacityPolicyById(state)(1)).toEqual(
+      agentCapacityPoliciesList[0]
+    );
+    expect(getters.getAgentCapacityPolicyById(state)(4)).toEqual({});
+  });
+});

app/javascript/dashboard/store/modules/specs/agentCapacityPolicies/mutations.spec.js

@@ -0,0 +1,303 @@
+import { mutations } from '../../agentCapacityPolicies';
+import types from '../../../mutation-types';
+import agentCapacityPoliciesList from './fixtures';
+
+describe('#mutations', () => {
+  describe('#SET_AGENT_CAPACITY_POLICIES_UI_FLAG', () => {
+    it('sets single ui flag', () => {
+      const state = {
+        uiFlags: {
+          isFetching: false,
+          isCreating: false,
+        },
+      };
+
+      mutations[types.SET_AGENT_CAPACITY_POLICIES_UI_FLAG](state, {
+        isFetching: true,
+      });
+
+      expect(state.uiFlags).toEqual({
+        isFetching: true,
+        isCreating: false,
+      });
+    });
+
+    it('sets multiple ui flags', () => {
+      const state = {
+        uiFlags: {
+          isFetching: false,
+          isCreating: false,
+          isUpdating: false,
+        },
+      };
+
+      mutations[types.SET_AGENT_CAPACITY_POLICIES_UI_FLAG](state, {
+        isFetching: true,
+        isCreating: true,
+      });
+
+      expect(state.uiFlags).toEqual({
+        isFetching: true,
+        isCreating: true,
+        isUpdating: false,
+      });
+    });
+  });
+
+  describe('#SET_AGENT_CAPACITY_POLICIES', () => {
+    it('sets agent capacity policies records', () => {
+      const state = { records: [] };
+
+      mutations[types.SET_AGENT_CAPACITY_POLICIES](
+        state,
+        agentCapacityPoliciesList
+      );
+
+      expect(state.records).toEqual(agentCapacityPoliciesList);
+    });
+
+    it('replaces existing records', () => {
+      const state = { records: [{ id: 999, name: 'Old Policy' }] };
+
+      mutations[types.SET_AGENT_CAPACITY_POLICIES](
+        state,
+        agentCapacityPoliciesList
+      );
+
+      expect(state.records).toEqual(agentCapacityPoliciesList);
+    });
+  });
+
+  describe('#SET_AGENT_CAPACITY_POLICY', () => {
+    it('sets single agent capacity policy record', () => {
+      const state = { records: [] };
+
+      mutations[types.SET_AGENT_CAPACITY_POLICY](
+        state,
+        agentCapacityPoliciesList[0]
+      );
+
+      expect(state.records).toEqual([agentCapacityPoliciesList[0]]);
+    });
+
+    it('replaces existing record', () => {
+      const state = { records: [{ id: 1, name: 'Old Policy' }] };
+
+      mutations[types.SET_AGENT_CAPACITY_POLICY](
+        state,
+        agentCapacityPoliciesList[0]
+      );
+
+      expect(state.records).toEqual([agentCapacityPoliciesList[0]]);
+    });
+  });
+
+  describe('#ADD_AGENT_CAPACITY_POLICY', () => {
+    it('adds new policy to empty records', () => {
+      const state = { records: [] };
+
+      mutations[types.ADD_AGENT_CAPACITY_POLICY](
+        state,
+        agentCapacityPoliciesList[0]
+      );
+
+      expect(state.records).toEqual([agentCapacityPoliciesList[0]]);
+    });
+
+    it('adds new policy to existing records', () => {
+      const state = { records: [agentCapacityPoliciesList[0]] };
+
+      mutations[types.ADD_AGENT_CAPACITY_POLICY](
+        state,
+        agentCapacityPoliciesList[1]
+      );
+
+      expect(state.records).toEqual([
+        agentCapacityPoliciesList[0],
+        agentCapacityPoliciesList[1],
+      ]);
+    });
+  });
+
+  describe('#EDIT_AGENT_CAPACITY_POLICY', () => {
+    it('updates existing policy by id', () => {
+      const state = {
+        records: [
+          { ...agentCapacityPoliciesList[0] },
+          { ...agentCapacityPoliciesList[1] },
+        ],
+      };
+
+      const updatedPolicy = {
+        ...agentCapacityPoliciesList[0],
+        name: 'Updated Policy Name',
+        description: 'Updated Description',
+      };
+
+      mutations[types.EDIT_AGENT_CAPACITY_POLICY](state, updatedPolicy);
+
+      expect(state.records[0]).toEqual(updatedPolicy);
+      expect(state.records[1]).toEqual(agentCapacityPoliciesList[1]);
+    });
+
+    it('updates policy with camelCase properties', () => {
+      const camelCasePolicy = {
+        id: 1,
+        name: 'Camel Case Policy',
+        defaultCapacity: 15,
+        enabled: true,
+      };
+
+      const state = {
+        records: [camelCasePolicy],
+      };
+
+      const updatedPolicy = {
+        ...camelCasePolicy,
+        name: 'Updated Camel Case',
+        defaultCapacity: 25,
+      };
+
+      mutations[types.EDIT_AGENT_CAPACITY_POLICY](state, updatedPolicy);
+
+      expect(state.records[0]).toEqual(updatedPolicy);
+    });
+
+    it('does nothing if policy id not found', () => {
+      const state = {
+        records: [agentCapacityPoliciesList[0]],
+      };
+
+      const nonExistentPolicy = {
+        id: 999,
+        name: 'Non-existent',
+      };
+
+      const originalRecords = [...state.records];
+      mutations[types.EDIT_AGENT_CAPACITY_POLICY](state, nonExistentPolicy);
+
+      expect(state.records).toEqual(originalRecords);
+    });
+  });
+
+  describe('#DELETE_AGENT_CAPACITY_POLICY', () => {
+    it('deletes policy by id', () => {
+      const state = {
+        records: [agentCapacityPoliciesList[0], agentCapacityPoliciesList[1]],
+      };
+
+      mutations[types.DELETE_AGENT_CAPACITY_POLICY](state, 1);
+
+      expect(state.records).toEqual([agentCapacityPoliciesList[1]]);
+    });
+
+    it('does nothing if id not found', () => {
+      const state = {
+        records: [agentCapacityPoliciesList[0]],
+      };
+
+      mutations[types.DELETE_AGENT_CAPACITY_POLICY](state, 999);
+
+      expect(state.records).toEqual([agentCapacityPoliciesList[0]]);
+    });
+
+    it('handles empty records', () => {
+      const state = { records: [] };
+
+      mutations[types.DELETE_AGENT_CAPACITY_POLICY](state, 1);
+
+      expect(state.records).toEqual([]);
+    });
+  });
+
+  describe('#SET_AGENT_CAPACITY_POLICIES_USERS_UI_FLAG', () => {
+    it('sets users ui flags', () => {
+      const state = {
+        usersUiFlags: {
+          isFetching: false,
+        },
+      };
+
+      mutations[types.SET_AGENT_CAPACITY_POLICIES_USERS_UI_FLAG](state, {
+        isFetching: true,
+      });
+
+      expect(state.usersUiFlags).toEqual({
+        isFetching: true,
+      });
+    });
+
+    it('merges with existing flags', () => {
+      const state = {
+        usersUiFlags: {
+          isFetching: false,
+          isDeleting: true,
+        },
+      };
+
+      mutations[types.SET_AGENT_CAPACITY_POLICIES_USERS_UI_FLAG](state, {
+        isFetching: true,
+      });
+
+      expect(state.usersUiFlags).toEqual({
+        isFetching: true,
+        isDeleting: true,
+      });
+    });
+  });
+
+  describe('#SET_AGENT_CAPACITY_POLICIES_USERS', () => {
+    it('sets users for existing policy', () => {
+      const mockUsers = [
+        { id: 1, name: 'Agent 1', email: 'agent1@example.com', capacity: 15 },
+        { id: 2, name: 'Agent 2', email: 'agent2@example.com', capacity: 20 },
+      ];
+
+      const state = {
+        records: [
+          { id: 1, name: 'Policy 1', users: [] },
+          { id: 2, name: 'Policy 2', users: [] },
+        ],
+      };
+
+      mutations[types.SET_AGENT_CAPACITY_POLICIES_USERS](state, {
+        policyId: 1,
+        users: mockUsers,
+      });
+
+      expect(state.records[0].users).toEqual(mockUsers);
+      expect(state.records[1].users).toEqual([]);
+    });
+
+    it('replaces existing users', () => {
+      const oldUsers = [{ id: 99, name: 'Old Agent', capacity: 5 }];
+      const newUsers = [{ id: 1, name: 'New Agent', capacity: 15 }];
+
+      const state = {
+        records: [{ id: 1, name: 'Policy 1', users: oldUsers }],
+      };
+
+      mutations[types.SET_AGENT_CAPACITY_POLICIES_USERS](state, {
+        policyId: 1,
+        users: newUsers,
+      });
+
+      expect(state.records[0].users).toEqual(newUsers);
+    });
+
+    it('does nothing if policy not found', () => {
+      const state = {
+        records: [{ id: 1, name: 'Policy 1', users: [] }],
+      };
+
+      const originalState = JSON.parse(JSON.stringify(state));
+
+      mutations[types.SET_AGENT_CAPACITY_POLICIES_USERS](state, {
+        policyId: 999,
+        users: [{ id: 1, name: 'Test' }],
+      });
+
+      expect(state).toEqual(originalState);
+    });
+  });
+});

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

@@ -361,4 +361,15 @@ export default {
     'SET_ASSIGNMENT_POLICIES_INBOXES_UI_FLAG',
   DELETE_ASSIGNMENT_POLICIES_INBOXES: 'DELETE_ASSIGNMENT_POLICIES_INBOXES',
   ADD_ASSIGNMENT_POLICIES_INBOXES: 'ADD_ASSIGNMENT_POLICIES_INBOXES',
+
+  // Agent Capacity Policies
+  SET_AGENT_CAPACITY_POLICIES_UI_FLAG: 'SET_AGENT_CAPACITY_POLICIES_UI_FLAG',
+  SET_AGENT_CAPACITY_POLICIES: 'SET_AGENT_CAPACITY_POLICIES',
+  SET_AGENT_CAPACITY_POLICY: 'SET_AGENT_CAPACITY_POLICY',
+  ADD_AGENT_CAPACITY_POLICY: 'ADD_AGENT_CAPACITY_POLICY',
+  EDIT_AGENT_CAPACITY_POLICY: 'EDIT_AGENT_CAPACITY_POLICY',
+  DELETE_AGENT_CAPACITY_POLICY: 'DELETE_AGENT_CAPACITY_POLICY',
+  SET_AGENT_CAPACITY_POLICIES_USERS: 'SET_AGENT_CAPACITY_POLICIES_USERS',
+  SET_AGENT_CAPACITY_POLICIES_USERS_UI_FLAG:
+    'SET_AGENT_CAPACITY_POLICIES_USERS_UI_FLAG',
 };

enterprise/app/views/api/v1/models/_agent_capacity_policy.json.jbuilder

@@ -5,6 +5,7 @@ json.exclusion_rules agent_capacity_policy.exclusion_rules
 json.created_at agent_capacity_policy.created_at.to_i
 json.updated_at agent_capacity_policy.updated_at.to_i
 json.account_id agent_capacity_policy.account_id
+json.assigned_agent_count agent_capacity_policy.account_users.count
 
 json.inbox_capacity_limits agent_capacity_policy.inbox_capacity_limits do |limit|
   json.id limit.id