From ca579bd62a3831c9813d3dd8ccc9840691cc5b68 Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Fri, 12 Sep 2025 18:42:55 +0530
Subject: [PATCH] feat: Agent capacity policy Create/Edit pages (#12424)

# Pull Request Template

## Description

Fixes
https://linear.app/chatwoot/issue/CW-5573/feat-createedit-agent-capacity-policy-page

## Type of change

- [x] New feature (non-breaking change which adds functionality)

## How Has This Been Tested?

### Loom video

https://www.loom.com/share/8de9e3c5d8824cd998d242636540dd18?sid=1314536f-c8d6-41fd-8139-cae9bf94f942

### Screenshots

**Light mode**
<img width="1666" height="1225" alt="image"
src="https://github.com/user-attachments/assets/7e6d83a4-ce02-47a7-91f6-87745f8f5549"
/>
<img width="1666" height="1225" alt="image"
src="https://github.com/user-attachments/assets/7dd1f840-2e25-4365-aa1d-ed9dac13385a"
/>

**Dark mode**
<img width="1666" height="1225" alt="image"
src="https://github.com/user-attachments/assets/0c787095-7146-4fb3-a61a-e2232973bcba"
/>
<img width="1666" height="1225" alt="image"
src="https://github.com/user-attachments/assets/481c21fd-03b5-4c1f-b59e-7f8c8017f9ce"
/>


## Checklist:

- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my code
- [x] I have commented on my code, particularly in hard-to-understand
areas
- [ ] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings
- [x] I have added tests that prove my fix is effective or that my
feature works
- [x] New and existing unit tests pass locally with my changes
- [ ] Any dependent changes have been merged and published in downstream
modules

---------

Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>
---
 .../components/AddDataDropdown.vue            |  27 +-
 .../AssignmentPolicy/components/BaseInfo.vue  |   3 +-
 .../AssignmentPolicy/components/DataTable.vue |  20 +-
 .../components/ExclusionRules.vue             | 149 ++++++++
 .../components/InboxCapacityLimits.vue        | 163 +++++++++
 .../story/AddDataDropdown.story.vue           |  38 +-
 .../components/story/DataTable.story.vue      |  27 +-
 .../components/story/ExclusionRules.story.vue |  67 ++++
 .../story/InboxCapacityLimits.story.vue       | 108 ++++++
 .../Contacts/ContactLabels/ContactLabels.vue  |   4 +-
 .../components-next/Label/LabelItem.vue       |   3 +-
 .../dashboard/i18n/locale/en/settings.json    |  86 +++++
 .../assignmentPolicy.routes.js                |  20 ++
 .../pages/AgentCapacityCreatePage.vue         |  87 +++++
 .../pages/AgentCapacityEditPage.vue           | 179 ++++++++++
 .../components/AgentCapacityPolicyForm.vue    | 214 ++++++++++++
 .../store/modules/agentCapacityPolicies.js    | 156 ++++++++-
 .../agentCapacityPolicies/actions.spec.js     | 191 ++++++++++-
 .../specs/agentCapacityPolicies/fixtures.js   | 126 ++++++-
 .../agentCapacityPolicies/mutations.spec.js   | 324 +++++++++++++++++-
 .../dashboard/store/mutation-types.js         |   6 +
 21 files changed, 1965 insertions(+), 33 deletions(-)
 create mode 100644 app/javascript/dashboard/components-next/AssignmentPolicy/components/ExclusionRules.vue
 create mode 100644 app/javascript/dashboard/components-next/AssignmentPolicy/components/InboxCapacityLimits.vue
 create mode 100644 app/javascript/dashboard/components-next/AssignmentPolicy/components/story/ExclusionRules.story.vue
 create mode 100644 app/javascript/dashboard/components-next/AssignmentPolicy/components/story/InboxCapacityLimits.story.vue
 create mode 100644 app/javascript/dashboard/routes/dashboard/settings/assignmentPolicy/pages/AgentCapacityCreatePage.vue
 create mode 100644 app/javascript/dashboard/routes/dashboard/settings/assignmentPolicy/pages/AgentCapacityEditPage.vue
 create mode 100644 app/javascript/dashboard/routes/dashboard/settings/assignmentPolicy/pages/components/AgentCapacityPolicyForm.vue

diff --git a/app/javascript/dashboard/components-next/AssignmentPolicy/components/AddDataDropdown.vue b/app/javascript/dashboard/components-next/AssignmentPolicy/components/AddDataDropdown.vue
index c664d8929..7c98db791 100644
--- a/app/javascript/dashboard/components-next/AssignmentPolicy/components/AddDataDropdown.vue
+++ b/app/javascript/dashboard/components-next/AssignmentPolicy/components/AddDataDropdown.vue
@@ -4,6 +4,7 @@ import { useToggle } from '@vueuse/core';
 import { vOnClickOutside } from '@vueuse/components';
 import { picoSearch } from '@scmmishra/pico-search';
 
+import Avatar from 'next/avatar/Avatar.vue';
 import Icon from 'dashboard/components-next/icon/Icon.vue';
 import Button from 'dashboard/components-next/button/Button.vue';
 import Input from 'dashboard/components-next/input/Input.vue';
@@ -36,8 +37,8 @@ const filteredItems = computed(() => {
   return picoSearch(props.items, query, ['name']);
 });
 
-const handleAdd = inbox => {
-  emit('add', inbox);
+const handleAdd = item => {
+  emit('add', item);
   togglePopover(false);
 };
 
@@ -82,21 +83,35 @@ const handleClickOutside = () => {
         <div
           v-for="item in filteredItems"
           :key="item.id"
-          class="flex items-start gap-3 min-w-0 w-full py-4 px-3 hover:bg-n-alpha-2 cursor-pointer"
+          class="flex gap-3 min-w-0 w-full py-4 px-3 hover:bg-n-alpha-2 cursor-pointer"
+          :class="{ 'items-center': item.color, 'items-start': !item.color }"
           @click="handleAdd(item)"
         >
           <Icon
             v-if="item.icon"
             :icon="item.icon"
-            class="size-4 text-n-slate-12 flex-shrink-0 mt-0.5"
+            class="size-2 text-n-slate-12 flex-shrink-0 mt-0.5"
+          />
+          <span
+            v-else-if="item.color"
+            :style="{ backgroundColor: item.color }"
+            class="size-3 rounded-sm"
+          />
+          <Avatar
+            v-else
+            :title="item.name"
+            :src="item.avatarUrl"
+            :name="item.name"
+            :size="20"
+            rounded-full
           />
           <div class="flex flex-col items-start gap-2 min-w-0">
             <div class="flex items-center gap-1 min-w-0">
               <span
-                :title="item.name"
+                :title="item.name || item.title"
                 class="text-sm text-n-slate-12 truncate min-w-0"
               >
-                {{ item.name }}
+                {{ item.name || item.title }}
               </span>
               <span
                 v-if="item.id"
diff --git a/app/javascript/dashboard/components-next/AssignmentPolicy/components/BaseInfo.vue b/app/javascript/dashboard/components-next/AssignmentPolicy/components/BaseInfo.vue
index 6b3a25e48..b430b3f97 100644
--- a/app/javascript/dashboard/components-next/AssignmentPolicy/components/BaseInfo.vue
+++ b/app/javascript/dashboard/components-next/AssignmentPolicy/components/BaseInfo.vue
@@ -65,6 +65,7 @@ watch(
   () => {
     emit('validationChange', {
       isValid: isValid.value,
+      section: 'baseInfo',
     });
   },
   { immediate: true }
@@ -108,7 +109,7 @@ watch(
     </div>
 
     <!-- Status Field -->
-    <div class="flex items-center gap-6">
+    <div v-if="statusLabel" class="flex items-center gap-6">
       <WithLabel
         :label="statusLabel"
         name="enabled"
diff --git a/app/javascript/dashboard/components-next/AssignmentPolicy/components/DataTable.vue b/app/javascript/dashboard/components-next/AssignmentPolicy/components/DataTable.vue
index 986c69a1f..aeea0cbdd 100644
--- a/app/javascript/dashboard/components-next/AssignmentPolicy/components/DataTable.vue
+++ b/app/javascript/dashboard/components-next/AssignmentPolicy/components/DataTable.vue
@@ -1,4 +1,5 @@
 <script setup>
+import Avatar from 'next/avatar/Avatar.vue';
 import Icon from 'dashboard/components-next/icon/Icon.vue';
 import Button from 'dashboard/components-next/button/Button.vue';
 import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
@@ -32,12 +33,14 @@ const handleDelete = itemId => {
   >
     <Spinner />
   </div>
-  <span
+  <div
     v-else-if="items.length === 0 && emptyStateMessage"
-    class="flex items-center justify-center pt-4 pb-8 w-full text-sm text-n-slate-11"
+    class="custom-dashed-border flex items-center justify-center py-6 w-full"
   >
-    {{ emptyStateMessage }}
-  </span>
+    <span class="text-sm text-n-slate-11">
+      {{ emptyStateMessage }}
+    </span>
+  </div>
   <div v-else class="flex flex-col divide-y divide-n-weak">
     <div
       v-for="item in items"
@@ -50,7 +53,14 @@ const handleDelete = itemId => {
           :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
+        />
         <span class="text-sm text-n-slate-12 truncate min-w-0">
           {{ item.name }}
         </span>
diff --git a/app/javascript/dashboard/components-next/AssignmentPolicy/components/ExclusionRules.vue b/app/javascript/dashboard/components-next/AssignmentPolicy/components/ExclusionRules.vue
new file mode 100644
index 000000000..5412675bd
--- /dev/null
+++ b/app/javascript/dashboard/components-next/AssignmentPolicy/components/ExclusionRules.vue
@@ -0,0 +1,149 @@
+<script setup>
+import { computed, ref, onMounted } from 'vue';
+import { useI18n } from 'vue-i18n';
+import AddDataDropdown from 'dashboard/components-next/AssignmentPolicy/components/AddDataDropdown.vue';
+import LabelItem from 'dashboard/components-next/Label/LabelItem.vue';
+import DurationInput from 'dashboard/components-next/input/DurationInput.vue';
+import { DURATION_UNITS } from 'dashboard/components-next/input/constants';
+
+const props = defineProps({
+  tagsList: {
+    type: Array,
+    default: () => [],
+  },
+});
+
+const excludedLabels = defineModel('excludedLabels', {
+  type: Array,
+  default: () => [],
+});
+
+const excludeOlderThanMinutes = defineModel('excludeOlderThanMinutes', {
+  type: Number,
+  default: 10,
+});
+
+// Duration limits: 10 minutes to 999 days (in minutes)
+const MIN_DURATION_MINUTES = 10;
+const MAX_DURATION_MINUTES = 1438560; // 999 days * 24 hours * 60 minutes
+
+const { t } = useI18n();
+
+const hoveredLabel = ref(null);
+const windowUnit = ref(DURATION_UNITS.MINUTES);
+
+const addedTags = computed(() =>
+  props.tagsList
+    .filter(label => excludedLabels.value.includes(label.name))
+    .map(label => ({ id: label.id, title: label.name, ...label }))
+);
+
+const filteredTags = computed(() =>
+  props.tagsList.filter(
+    label => !addedTags.value.some(tag => tag.id === label.id)
+  )
+);
+
+const detectUnit = minutes => {
+  const m = Number(minutes) || 0;
+  if (m === 0) return DURATION_UNITS.MINUTES;
+  if (m % (24 * 60) === 0) return DURATION_UNITS.DAYS;
+  if (m % 60 === 0) return DURATION_UNITS.HOURS;
+  return DURATION_UNITS.MINUTES;
+};
+
+const onClickAddTag = tag => {
+  excludedLabels.value = [...excludedLabels.value, tag.name];
+};
+
+const onClickRemoveTag = tag => {
+  excludedLabels.value = excludedLabels.value.filter(
+    name => name !== tag.title
+  );
+};
+
+onMounted(() => {
+  windowUnit.value = detectUnit(excludeOlderThanMinutes.value);
+});
+</script>
+
+<template>
+  <div class="py-4 flex-col flex gap-6">
+    <div class="flex flex-col items-start gap-1 py-1">
+      <label class="text-sm font-medium text-n-slate-12 py-1">
+        {{
+          t(
+            'ASSIGNMENT_POLICY.AGENT_CAPACITY_POLICY.FORM.EXCLUSION_RULES.LABEL'
+          )
+        }}
+      </label>
+      <p class="mb-0 text-n-slate-11 text-sm">
+        {{
+          t(
+            'ASSIGNMENT_POLICY.AGENT_CAPACITY_POLICY.FORM.EXCLUSION_RULES.DESCRIPTION'
+          )
+        }}
+      </p>
+    </div>
+
+    <div class="flex flex-col items-start gap-4">
+      <label class="text-sm font-medium text-n-slate-12 py-1">
+        {{
+          t(
+            'ASSIGNMENT_POLICY.AGENT_CAPACITY_POLICY.FORM.EXCLUSION_RULES.TAGS.LABEL'
+          )
+        }}
+      </label>
+      <div
+        class="flex items-start gap-2 flex-wrap"
+        @mouseleave="hoveredLabel = null"
+      >
+        <LabelItem
+          v-for="tag in addedTags"
+          :key="tag.id"
+          :label="tag"
+          :is-hovered="hoveredLabel === tag.id"
+          class="h-8"
+          @remove="onClickRemoveTag"
+          @hover="hoveredLabel = tag.id"
+        />
+        <AddDataDropdown
+          :label="
+            t(
+              'ASSIGNMENT_POLICY.AGENT_CAPACITY_POLICY.FORM.EXCLUSION_RULES.TAGS.ADD_TAG'
+            )
+          "
+          :search-placeholder="
+            t(
+              'ASSIGNMENT_POLICY.AGENT_CAPACITY_POLICY.FORM.EXCLUSION_RULES.TAGS.DROPDOWN.SEARCH_PLACEHOLDER'
+            )
+          "
+          :items="filteredTags"
+          class="[&>button]:!text-n-blue-text"
+          @add="onClickAddTag"
+        />
+      </div>
+    </div>
+
+    <div class="flex flex-col items-start gap-4">
+      <label class="text-sm font-medium text-n-slate-12 py-1">
+        {{
+          t(
+            'ASSIGNMENT_POLICY.AGENT_CAPACITY_POLICY.FORM.EXCLUSION_RULES.DURATION.LABEL'
+          )
+        }}
+      </label>
+      <div
+        class="flex items-center gap-2 flex-1 [&>select]:!bg-n-alpha-2 [&>select]:!outline-none [&>select]:hover:brightness-110"
+      >
+        <!-- allow 10 mins to 999 days -->
+        <DurationInput
+          v-model:unit="windowUnit"
+          v-model:model-value="excludeOlderThanMinutes"
+          :min="MIN_DURATION_MINUTES"
+          :max="MAX_DURATION_MINUTES"
+        />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/AssignmentPolicy/components/InboxCapacityLimits.vue b/app/javascript/dashboard/components-next/AssignmentPolicy/components/InboxCapacityLimits.vue
new file mode 100644
index 000000000..6a799005e
--- /dev/null
+++ b/app/javascript/dashboard/components-next/AssignmentPolicy/components/InboxCapacityLimits.vue
@@ -0,0 +1,163 @@
+<script setup>
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import Button from 'dashboard/components-next/button/Button.vue';
+import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
+import AddDataDropdown from 'dashboard/components-next/AssignmentPolicy/components/AddDataDropdown.vue';
+
+const props = defineProps({
+  inboxList: {
+    type: Array,
+    default: () => [],
+  },
+  isFetching: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(['delete', 'add', 'update']);
+
+const inboxCapacityLimits = defineModel('inboxCapacityLimits', {
+  type: Array,
+  default: () => [],
+});
+
+const { t } = useI18n();
+
+const BASE_KEY = 'ASSIGNMENT_POLICY.AGENT_CAPACITY_POLICY';
+const DEFAULT_CONVERSATION_LIMIT = 10;
+const MIN_CONVERSATION_LIMIT = 1;
+const MAX_CONVERSATION_LIMIT = 100000;
+
+const selectedInboxIds = computed(
+  () => new Set(inboxCapacityLimits.value.map(limit => limit.inboxId))
+);
+
+const availableInboxes = computed(() =>
+  props.inboxList.filter(
+    inbox => inbox && !selectedInboxIds.value.has(inbox.id)
+  )
+);
+
+const isLimitValid = limit => {
+  return (
+    limit.conversationLimit >= MIN_CONVERSATION_LIMIT &&
+    limit.conversationLimit <= MAX_CONVERSATION_LIMIT
+  );
+};
+
+const inboxMap = computed(
+  () => new Map(props.inboxList.map(inbox => [inbox.id, inbox]))
+);
+
+const handleAddInbox = inbox => {
+  emit('add', {
+    inboxId: inbox.id,
+    conversationLimit: DEFAULT_CONVERSATION_LIMIT,
+  });
+};
+
+const handleRemoveLimit = limitId => {
+  emit('delete', limitId);
+};
+
+const handleLimitChange = limit => {
+  if (isLimitValid(limit)) {
+    emit('update', limit);
+  }
+};
+
+const getInboxName = inboxId => {
+  return inboxMap.value.get(inboxId)?.name || '';
+};
+</script>
+
+<template>
+  <div class="py-4 flex-col flex gap-3">
+    <div class="flex items-center w-full gap-8 justify-between pt-1 pb-3">
+      <label class="text-sm font-medium text-n-slate-12">
+        {{ t(`${BASE_KEY}.FORM.INBOX_CAPACITY_LIMIT.LABEL`) }}
+      </label>
+
+      <AddDataDropdown
+        :label="t(`${BASE_KEY}.FORM.INBOX_CAPACITY_LIMIT.ADD_BUTTON`)"
+        :search-placeholder="
+          t(`${BASE_KEY}.FORM.INBOX_CAPACITY_LIMIT.FIELD.SELECT_INBOX`)
+        "
+        :items="availableInboxes"
+        @add="handleAddInbox"
+      />
+    </div>
+
+    <div
+      v-if="isFetching"
+      class="flex items-center justify-center py-3 w-full text-n-slate-11"
+    >
+      <Spinner />
+    </div>
+
+    <div
+      v-else-if="!inboxCapacityLimits.length"
+      class="custom-dashed-border flex items-center justify-center py-6 w-full"
+    >
+      <span class="text-sm text-n-slate-11">
+        {{ t(`${BASE_KEY}.FORM.INBOX_CAPACITY_LIMIT.EMPTY_STATE`) }}
+      </span>
+    </div>
+
+    <div v-else class="flex-col flex gap-3">
+      <div
+        v-for="(limit, index) in inboxCapacityLimits"
+        :key="limit.id || `temp-${index}`"
+        class="flex items-center gap-3"
+      >
+        <div
+          class="flex items-start rounded-lg outline-1 outline cursor-not-allowed text-n-slate-11 outline-n-weak py-2.5 px-3 text-sm w-full"
+        >
+          {{ getInboxName(limit.inboxId) }}
+        </div>
+
+        <div
+          class="py-2.5 px-3 rounded-lg gap-2 outline outline-1 flex-shrink-0 flex items-center"
+          :class="[
+            !isLimitValid(limit) ? 'outline-n-ruby-8' : 'outline-n-weak',
+          ]"
+        >
+          <label class="text-sm text-n-slate-12 ltr:pr-2 rtl:pl-2">
+            {{
+              t(`${BASE_KEY}.FORM.INBOX_CAPACITY_LIMIT.FIELD.MAX_CONVERSATIONS`)
+            }}
+          </label>
+
+          <div class="h-5 w-px bg-n-weak" />
+
+          <input
+            v-model.number="limit.conversationLimit"
+            type="number"
+            :min="MIN_CONVERSATION_LIMIT"
+            :max="MAX_CONVERSATION_LIMIT"
+            class="reset-base bg-transparent focus:outline-none max-w-20 text-sm"
+            :class="[
+              !isLimitValid(limit)
+                ? 'placeholder:text-n-ruby-9 !text-n-ruby-9'
+                : 'placeholder:text-n-slate-10 text-n-slate-12',
+            ]"
+            :placeholder="
+              t(`${BASE_KEY}.FORM.INBOX_CAPACITY_LIMIT.FIELD.SET_LIMIT`)
+            "
+            @blur="handleLimitChange(limit)"
+          />
+        </div>
+
+        <Button
+          type="button"
+          slate
+          icon="i-lucide-trash"
+          class="flex-shrink-0"
+          @click="handleRemoveLimit(limit.id)"
+        />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/AssignmentPolicy/components/story/AddDataDropdown.story.vue b/app/javascript/dashboard/components-next/AssignmentPolicy/components/story/AddDataDropdown.story.vue
index 2ac4d8854..e69aa798f 100644
--- a/app/javascript/dashboard/components-next/AssignmentPolicy/components/story/AddDataDropdown.story.vue
+++ b/app/javascript/dashboard/components-next/AssignmentPolicy/components/story/AddDataDropdown.story.vue
@@ -34,6 +34,29 @@ const mockInboxes = [
   },
 ];
 
+const mockTags = [
+  {
+    id: 1,
+    name: 'urgent',
+    color: '#ff4757',
+  },
+  {
+    id: 2,
+    name: 'bug',
+    color: '#ff6b6b',
+  },
+  {
+    id: 3,
+    name: 'feature-request',
+    color: '#4834d4',
+  },
+  {
+    id: 4,
+    name: 'documentation',
+    color: '#26de81',
+  },
+];
+
 const handleAdd = item => {
   console.log('Add item:', item);
 };
@@ -42,9 +65,9 @@ const handleAdd = item => {
 <template>
   <Story
     title="Components/AgentManagementPolicy/AddDataDropdown"
-    :layout="{ type: 'grid', width: '400px' }"
+    :layout="{ type: 'grid', width: '500px' }"
   >
-    <Variant title="Basic Usage">
+    <Variant title="Basic Usage - Inboxes">
       <div class="p-8 bg-n-background flex gap-4 h-[400px] items-start">
         <AddDataDropdown
           label="Add Inbox"
@@ -54,5 +77,16 @@ const handleAdd = item => {
         />
       </div>
     </Variant>
+
+    <Variant title="Basic Usage - Tags">
+      <div class="p-8 bg-n-background flex gap-4 h-[400px] items-start">
+        <AddDataDropdown
+          label="Add Tag"
+          search-placeholder="Search tags..."
+          :items="mockTags"
+          @add="handleAdd"
+        />
+      </div>
+    </Variant>
   </Story>
 </template>
diff --git a/app/javascript/dashboard/components-next/AssignmentPolicy/components/story/DataTable.story.vue b/app/javascript/dashboard/components-next/AssignmentPolicy/components/story/DataTable.story.vue
index 912b1fdfc..a81a29976 100644
--- a/app/javascript/dashboard/components-next/AssignmentPolicy/components/story/DataTable.story.vue
+++ b/app/javascript/dashboard/components-next/AssignmentPolicy/components/story/DataTable.story.vue
@@ -22,6 +22,21 @@ const mockItems = [
   },
 ];
 
+const mockAgentList = [
+  {
+    id: 1,
+    name: 'John Doe',
+    email: 'john.doe@example.com',
+    avatarUrl: 'https://i.pravatar.cc/150?img=1',
+  },
+  {
+    id: 2,
+    name: 'Jane Smith',
+    email: 'jane.smith@example.com',
+    avatarUrl: 'https://i.pravatar.cc/150?img=2',
+  },
+];
+
 const handleDelete = itemId => {
   console.log('Delete item:', itemId);
 };
@@ -30,7 +45,7 @@ const handleDelete = itemId => {
 <template>
   <Story
     title="Components/AgentManagementPolicy/DataTable"
-    :layout="{ type: 'grid', width: '600px' }"
+    :layout="{ type: 'grid', width: '800px' }"
   >
     <Variant title="With Data">
       <div class="p-8 bg-n-background">
@@ -42,6 +57,16 @@ const handleDelete = itemId => {
       </div>
     </Variant>
 
+    <Variant title="With Agents">
+      <div class="p-8 bg-n-background">
+        <DataTable
+          :items="mockAgentList"
+          :is-fetching="false"
+          @delete="handleDelete"
+        />
+      </div>
+    </Variant>
+
     <Variant title="Loading State">
       <div class="p-8 bg-n-background">
         <DataTable :items="[]" is-fetching @delete="handleDelete" />
diff --git a/app/javascript/dashboard/components-next/AssignmentPolicy/components/story/ExclusionRules.story.vue b/app/javascript/dashboard/components-next/AssignmentPolicy/components/story/ExclusionRules.story.vue
new file mode 100644
index 000000000..7e0dbd595
--- /dev/null
+++ b/app/javascript/dashboard/components-next/AssignmentPolicy/components/story/ExclusionRules.story.vue
@@ -0,0 +1,67 @@
+<script setup>
+import ExclusionRules from '../ExclusionRules.vue';
+import { ref } from 'vue';
+
+const mockTagsList = [
+  {
+    id: 1,
+    name: 'urgent',
+    color: '#ff4757',
+  },
+  {
+    id: 2,
+    name: 'bug',
+    color: '#ff6b6b',
+  },
+  {
+    id: 3,
+    name: 'feature-request',
+    color: '#4834d4',
+  },
+  {
+    id: 4,
+    name: 'documentation',
+    color: '#26de81',
+  },
+  {
+    id: 5,
+    name: 'enhancement',
+    color: '#2ed573',
+  },
+  {
+    id: 6,
+    name: 'question',
+    color: '#ffa502',
+  },
+  {
+    id: 7,
+    name: 'duplicate',
+    color: '#747d8c',
+  },
+  {
+    id: 8,
+    name: 'wontfix',
+    color: '#57606f',
+  },
+];
+
+const excludedLabelsBasic = ref([]);
+const excludeOlderThanHoursBasic = ref(10);
+</script>
+
+<template>
+  <Story
+    title="Components/AgentManagementPolicy/ExclusionRules"
+    :layout="{ type: 'grid', width: '1200px' }"
+  >
+    <Variant title="Basic Usage">
+      <div class="p-8 bg-n-background h-[600px]">
+        <ExclusionRules
+          v-model:excluded-labels="excludedLabelsBasic"
+          v-model:exclude-older-than-minutes="excludeOlderThanHoursBasic"
+          :tags-list="mockTagsList"
+        />
+      </div>
+    </Variant>
+  </Story>
+</template>
diff --git a/app/javascript/dashboard/components-next/AssignmentPolicy/components/story/InboxCapacityLimits.story.vue b/app/javascript/dashboard/components-next/AssignmentPolicy/components/story/InboxCapacityLimits.story.vue
new file mode 100644
index 000000000..9d90112a1
--- /dev/null
+++ b/app/javascript/dashboard/components-next/AssignmentPolicy/components/story/InboxCapacityLimits.story.vue
@@ -0,0 +1,108 @@
+<script setup>
+import InboxCapacityLimits from '../InboxCapacityLimits.vue';
+import { ref } from 'vue';
+
+const mockInboxList = [
+  {
+    value: 1,
+    label: 'Website Support',
+    icon: 'i-lucide-globe',
+  },
+  {
+    value: 2,
+    label: 'Email Support',
+    icon: 'i-lucide-mail',
+  },
+  {
+    value: 3,
+    label: 'WhatsApp Business',
+    icon: 'i-lucide-message-circle',
+  },
+  {
+    value: 4,
+    label: 'Facebook Messenger',
+    icon: 'i-lucide-facebook',
+  },
+  {
+    value: 5,
+    label: 'Twitter DM',
+    icon: 'i-lucide-twitter',
+  },
+  {
+    value: 6,
+    label: 'Telegram',
+    icon: 'i-lucide-send',
+  },
+];
+
+const inboxCapacityLimitsEmpty = ref([]);
+const inboxCapacityLimitsNew = ref([
+  { id: 1, inboxId: 1, conversationLimit: 5 },
+  { inboxId: null, conversationLimit: null },
+]);
+
+const handleDelete = id => {
+  console.log('Delete capacity limit:', id);
+};
+</script>
+
+<template>
+  <Story
+    title="Components/AgentManagementPolicy/InboxCapacityLimits"
+    :layout="{ type: 'grid', width: '900px' }"
+  >
+    <Variant title="Empty State">
+      <div class="p-8 bg-n-background">
+        <InboxCapacityLimits
+          v-model:inbox-capacity-limits="inboxCapacityLimitsEmpty"
+          :inbox-list="mockInboxList"
+          :is-fetching="false"
+          :is-updating="false"
+          @delete="handleDelete"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Loading State">
+      <div class="p-8 bg-n-background">
+        <InboxCapacityLimits
+          v-model:inbox-capacity-limits="inboxCapacityLimitsEmpty"
+          :inbox-list="mockInboxList"
+          is-fetching
+          :is-updating="false"
+          @delete="handleDelete"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="With New Row and existing data">
+      <div class="p-8 bg-n-background">
+        <InboxCapacityLimits
+          v-model:inbox-capacity-limits="inboxCapacityLimitsNew"
+          :inbox-list="mockInboxList"
+          :is-fetching="false"
+          :is-updating="false"
+          @delete="handleDelete"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Interactive Demo">
+      <div class="p-8 bg-n-background">
+        <InboxCapacityLimits
+          v-model:inbox-capacity-limits="inboxCapacityLimitsEmpty"
+          :inbox-list="mockInboxList"
+          :is-fetching="false"
+          :is-updating="false"
+          @delete="handleDelete"
+        />
+        <div class="mt-4 p-4 bg-n-alpha-2 rounded-lg">
+          <h4 class="text-sm font-medium mb-2">Current Limits:</h4>
+          <pre class="text-xs">{{
+            JSON.stringify(inboxCapacityLimitsEmpty, null, 2)
+          }}</pre>
+        </div>
+      </div>
+    </Variant>
+  </Story>
+</template>
diff --git a/app/javascript/dashboard/components-next/Contacts/ContactLabels/ContactLabels.vue b/app/javascript/dashboard/components-next/Contacts/ContactLabels/ContactLabels.vue
index af04de9a7..bc1370a0a 100644
--- a/app/javascript/dashboard/components-next/Contacts/ContactLabels/ContactLabels.vue
+++ b/app/javascript/dashboard/components-next/Contacts/ContactLabels/ContactLabels.vue
@@ -86,8 +86,8 @@ const handleLabelAction = async ({ value }) => {
   }
 };
 
-const handleRemoveLabel = labelId => {
-  return handleLabelAction({ value: labelId });
+const handleRemoveLabel = label => {
+  return handleLabelAction({ value: label.id });
 };
 
 watch(
diff --git a/app/javascript/dashboard/components-next/Label/LabelItem.vue b/app/javascript/dashboard/components-next/Label/LabelItem.vue
index 65c2600b1..e0917f954 100644
--- a/app/javascript/dashboard/components-next/Label/LabelItem.vue
+++ b/app/javascript/dashboard/components-next/Label/LabelItem.vue
@@ -15,7 +15,7 @@ const props = defineProps({
 const emit = defineEmits(['remove', 'hover']);
 
 const handleRemoveLabel = () => {
-  emit('remove', props.label?.id);
+  emit('remove', props.label);
 };
 
 const handleMouseEnter = () => {
@@ -45,6 +45,7 @@ const handleMouseEnter = () => {
       <Button
         class="transition-opacity duration-200 !h-7 ltr:rounded-r-md rtl:rounded-l-md ltr:rounded-l-none rtl:rounded-r-none w-6 bg-transparent"
         :class="{ 'opacity-0': !isHovered, 'opacity-100': isHovered }"
+        type="button"
         slate
         xs
         faded
diff --git a/app/javascript/dashboard/i18n/locale/en/settings.json b/app/javascript/dashboard/i18n/locale/en/settings.json
index dd2fdc904..c95eada84 100644
--- a/app/javascript/dashboard/i18n/locale/en/settings.json
+++ b/app/javascript/dashboard/i18n/locale/en/settings.json
@@ -579,6 +579,92 @@
         },
         "NO_RECORDS_FOUND": "No agent capacity policies found"
       },
+      "CREATE": {
+        "HEADER": {
+          "TITLE": "Create agent capacity policy"
+        },
+        "CREATE_BUTTON": "Create policy",
+        "API": {
+          "SUCCESS_MESSAGE": "Agent capacity policy created successfully",
+          "ERROR_MESSAGE": "Failed to create agent capacity policy"
+        }
+      },
+      "EDIT": {
+        "HEADER": {
+          "TITLE": "Edit agent capacity policy"
+        },
+        "EDIT_BUTTON": "Update policy",
+        "CONFIRM_ADD_AGENT_DIALOG": {
+          "TITLE": "Add agent",
+          "DESCRIPTION": "{agentName} is already linked to another policy. Are you sure you want to link it to this policy? It will be unlinked from the other policy.",
+          "CONFIRM_BUTTON_LABEL": "Continue",
+          "CANCEL_BUTTON_LABEL": "Cancel"
+        },
+        "API": {
+          "SUCCESS_MESSAGE": "Agent capacity policy updated successfully",
+          "ERROR_MESSAGE": "Failed to update agent capacity policy"
+        },
+        "AGENT_API": {
+          "ADD": {
+            "SUCCESS_MESSAGE": "Agent added to policy successfully",
+            "ERROR_MESSAGE": "Failed to add agent to policy"
+          },
+          "REMOVE": {
+            "SUCCESS_MESSAGE": "Agent removed from policy successfully",
+            "ERROR_MESSAGE": "Failed to remove agent from policy"
+          }
+        }
+      },
+      "FORM": {
+        "NAME": {
+          "LABEL": "Policy name:",
+          "PLACEHOLDER": "Enter policy name"
+        },
+        "DESCRIPTION": {
+          "LABEL": "Description:",
+          "PLACEHOLDER": "Enter description"
+        },
+        "INBOX_CAPACITY_LIMIT": {
+          "LABEL": "Inbox capacity limits",
+          "ADD_BUTTON": "Add inbox",
+          "FIELD": {
+            "SELECT_INBOX": "Select inbox",
+            "MAX_CONVERSATIONS": "Max conversations",
+            "SET_LIMIT": "Set limit"
+          },
+          "EMPTY_STATE": "No inbox limit set"
+        },
+        "EXCLUSION_RULES": {
+          "LABEL": "Exclusion rules",
+          "DESCRIPTION": "Conversations that satisfy the following conditions would not count towards agent capacity",
+          "TAGS": {
+            "LABEL": "Exclude conversations tagged with specific labels",
+            "ADD_TAG": "add tag",
+            "DROPDOWN": {
+              "SEARCH_PLACEHOLDER": "Search and select tags to add"
+            },
+            "EMPTY_STATE": "No tags added to this policy."
+          },
+          "DURATION": {
+            "LABEL": "Exclude conversations older than a specified duration",
+            "PLACEHOLDER": "Set time"
+          }
+        },
+        "USERS": {
+          "LABEL": "Assigned agents",
+          "DESCRIPTION": "Add agents for which this policy will be applicable.",
+          "ADD_BUTTON": "Add agent",
+          "DROPDOWN": {
+            "SEARCH_PLACEHOLDER": "Search and select agents to add",
+            "ADD_BUTTON": "Add"
+          },
+          "EMPTY_STATE": "No agents added",
+          "API": {
+            "SUCCESS_MESSAGE": "Agent successfully added to policy",
+            "ERROR_MESSAGE": "Failed to add agent to policy"
+          }
+        }
+      },
       "DELETE_POLICY": {
         "SUCCESS_MESSAGE": "Agent capacity policy deleted successfully",
         "ERROR_MESSAGE": "Failed to delete agent capacity policy"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/assignmentPolicy/assignmentPolicy.routes.js b/app/javascript/dashboard/routes/dashboard/settings/assignmentPolicy/assignmentPolicy.routes.js
index f09cc1485..d09871674 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/assignmentPolicy/assignmentPolicy.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/assignmentPolicy/assignmentPolicy.routes.js
@@ -6,6 +6,8 @@ import AgentAssignmentIndex from './pages/AgentAssignmentIndexPage.vue';
 import AgentAssignmentCreate from './pages/AgentAssignmentCreatePage.vue';
 import AgentAssignmentEdit from './pages/AgentAssignmentEditPage.vue';
 import AgentCapacityIndex from './pages/AgentCapacityIndexPage.vue';
+import AgentCapacityCreate from './pages/AgentCapacityCreatePage.vue';
+import AgentCapacityEdit from './pages/AgentCapacityEditPage.vue';
 
 export default {
   routes: [
@@ -64,6 +66,24 @@ export default {
             permissions: ['administrator'],
           },
         },
+        {
+          path: 'capacity/create',
+          name: 'agent_capacity_policy_create',
+          component: AgentCapacityCreate,
+          meta: {
+            featureFlag: FEATURE_FLAGS.ASSIGNMENT_V2,
+            permissions: ['administrator'],
+          },
+        },
+        {
+          path: 'capacity/edit/:id',
+          name: 'agent_capacity_policy_edit',
+          component: AgentCapacityEdit,
+          meta: {
+            featureFlag: FEATURE_FLAGS.ASSIGNMENT_V2,
+            permissions: ['administrator'],
+          },
+        },
       ],
     },
   ],
diff --git a/app/javascript/dashboard/routes/dashboard/settings/assignmentPolicy/pages/AgentCapacityCreatePage.vue b/app/javascript/dashboard/routes/dashboard/settings/assignmentPolicy/pages/AgentCapacityCreatePage.vue
new file mode 100644
index 000000000..db184b4ee
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/settings/assignmentPolicy/pages/AgentCapacityCreatePage.vue
@@ -0,0 +1,87 @@
+<script setup>
+import { computed, 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 SettingsLayout from 'dashboard/routes/dashboard/settings/SettingsLayout.vue';
+import AgentCapacityPolicyForm from 'dashboard/routes/dashboard/settings/assignmentPolicy/pages/components/AgentCapacityPolicyForm.vue';
+
+const router = useRouter();
+const store = useStore();
+const { t } = useI18n();
+
+const formRef = ref(null);
+const uiFlags = useMapGetter('agentCapacityPolicies/getUIFlags');
+const labelsList = useMapGetter('labels/getLabels');
+
+const allLabels = computed(() =>
+  labelsList.value?.map(({ title, color, id }) => ({
+    id,
+    name: title,
+    color,
+  }))
+);
+
+const breadcrumbItems = computed(() => [
+  {
+    label: t('ASSIGNMENT_POLICY.AGENT_CAPACITY_POLICY.INDEX.HEADER.TITLE'),
+    routeName: 'agent_capacity_policy_index',
+  },
+  {
+    label: t('ASSIGNMENT_POLICY.AGENT_CAPACITY_POLICY.CREATE.HEADER.TITLE'),
+  },
+]);
+
+const handleBreadcrumbClick = item => {
+  router.push({
+    name: item.routeName,
+  });
+};
+
+const handleSubmit = async formState => {
+  try {
+    const policy = await store.dispatch(
+      'agentCapacityPolicies/create',
+      formState
+    );
+    useAlert(
+      t('ASSIGNMENT_POLICY.AGENT_CAPACITY_POLICY.CREATE.API.SUCCESS_MESSAGE')
+    );
+    formRef.value?.resetForm();
+
+    router.push({
+      name: 'agent_capacity_policy_edit',
+      params: {
+        id: policy.id,
+      },
+    });
+  } catch (error) {
+    useAlert(
+      t('ASSIGNMENT_POLICY.AGENT_CAPACITY_POLICY.CREATE.API.ERROR_MESSAGE')
+    );
+  }
+};
+</script>
+
+<template>
+  <SettingsLayout class="xl:px-44">
+    <template #header>
+      <div class="flex items-center gap-2 w-full justify-between">
+        <Breadcrumb :items="breadcrumbItems" @click="handleBreadcrumbClick" />
+      </div>
+    </template>
+
+    <template #body>
+      <AgentCapacityPolicyForm
+        ref="formRef"
+        mode="CREATE"
+        :is-loading="uiFlags.isCreating"
+        :label-list="allLabels"
+        @submit="handleSubmit"
+      />
+    </template>
+  </SettingsLayout>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/assignmentPolicy/pages/AgentCapacityEditPage.vue b/app/javascript/dashboard/routes/dashboard/settings/assignmentPolicy/pages/AgentCapacityEditPage.vue
new file mode 100644
index 000000000..428e126db
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/settings/assignmentPolicy/pages/AgentCapacityEditPage.vue
@@ -0,0 +1,179 @@
+<script setup>
+import { computed, watch, onMounted } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useStore, useMapGetter } from 'dashboard/composables/store';
+import { useRoute, useRouter } from 'vue-router';
+import { useAlert } from 'dashboard/composables';
+import camelcaseKeys from 'camelcase-keys';
+
+import Breadcrumb from 'dashboard/components-next/breadcrumb/Breadcrumb.vue';
+import SettingsLayout from 'dashboard/routes/dashboard/settings/SettingsLayout.vue';
+import AgentCapacityPolicyForm from 'dashboard/routes/dashboard/settings/assignmentPolicy/pages/components/AgentCapacityPolicyForm.vue';
+
+const BASE_KEY = 'ASSIGNMENT_POLICY.AGENT_CAPACITY_POLICY';
+
+const { t } = useI18n();
+const route = useRoute();
+const router = useRouter();
+const store = useStore();
+
+const uiFlags = useMapGetter('agentCapacityPolicies/getUIFlags');
+const usersUiFlags = useMapGetter('agentCapacityPolicies/getUsersUIFlags');
+const selectedPolicyById = useMapGetter(
+  'agentCapacityPolicies/getAgentCapacityPolicyById'
+);
+const agentsList = useMapGetter('agents/getAgents');
+const labelsList = useMapGetter('labels/getLabels');
+const inboxes = useMapGetter('inboxes/getAllInboxes');
+const inboxesUiFlags = useMapGetter('inboxes/getUIFlags');
+
+const routeId = computed(() => route.params.id);
+const selectedPolicy = computed(() => selectedPolicyById.value(routeId.value));
+const selectedPolicyId = computed(() => selectedPolicy.value?.id);
+
+const breadcrumbItems = computed(() => [
+  {
+    label: t(`${BASE_KEY}.INDEX.HEADER.TITLE`),
+    routeName: 'agent_capacity_policy_index',
+  },
+  { label: t(`${BASE_KEY}.EDIT.HEADER.TITLE`) },
+]);
+
+const buildList = items =>
+  items?.map(({ name, title, id, email, avatarUrl, thumbnail, color }) => ({
+    name: name || title,
+    id,
+    email,
+    avatarUrl: avatarUrl || thumbnail,
+    color,
+  })) || [];
+
+const policyUsers = computed(() => buildList(selectedPolicy.value?.users));
+
+const allAgents = computed(() =>
+  buildList(camelcaseKeys(agentsList.value)).filter(
+    agent => !policyUsers.value?.some(user => user.id === agent.id)
+  )
+);
+
+const allLabels = computed(() => buildList(labelsList.value));
+
+const allInboxes = computed(() => buildList(inboxes.value));
+
+const formData = computed(() => ({
+  name: selectedPolicy.value?.name || '',
+  description: selectedPolicy.value?.description || '',
+  exclusionRules: {
+    excludedLabels: [
+      ...(selectedPolicy.value?.exclusionRules?.excludedLabels || []),
+    ],
+    excludeOlderThanHours:
+      selectedPolicy.value?.exclusionRules?.excludeOlderThanHours || 10,
+  },
+  inboxCapacityLimits:
+    selectedPolicy.value?.inboxCapacityLimits?.map(limit => ({
+      ...limit,
+    })) || [],
+}));
+
+const handleBreadcrumbClick = ({ routeName }) =>
+  router.push({ name: routeName });
+
+const handleDeleteUser = agentId => {
+  store.dispatch('agentCapacityPolicies/removeUser', {
+    policyId: selectedPolicyId.value,
+    userId: agentId,
+  });
+};
+
+const handleAddUser = agent => {
+  store.dispatch('agentCapacityPolicies/addUser', {
+    policyId: selectedPolicyId.value,
+    userData: { id: agent.id, capacity: 20 },
+  });
+};
+
+const handleDeleteInboxLimit = limitId => {
+  store.dispatch('agentCapacityPolicies/deleteInboxLimit', {
+    policyId: selectedPolicyId.value,
+    limitId,
+  });
+};
+
+const handleAddInboxLimit = limit => {
+  store.dispatch('agentCapacityPolicies/createInboxLimit', {
+    policyId: selectedPolicyId.value,
+    limitData: {
+      inboxId: limit.inboxId,
+      conversationLimit: limit.conversationLimit,
+    },
+  });
+};
+
+const handleLimitChange = limit => {
+  store.dispatch('agentCapacityPolicies/updateInboxLimit', {
+    policyId: selectedPolicyId.value,
+    limitId: limit.id,
+    limitData: { conversationLimit: limit.conversationLimit },
+  });
+};
+
+const handleSubmit = async formState => {
+  try {
+    await store.dispatch('agentCapacityPolicies/update', {
+      id: selectedPolicyId.value,
+      ...formState,
+    });
+
+    useAlert(t(`${BASE_KEY}.EDIT.API.SUCCESS_MESSAGE`));
+  } catch {
+    useAlert(t(`${BASE_KEY}.EDIT.API.ERROR_MESSAGE`));
+  }
+};
+
+const fetchPolicyData = async () => {
+  if (!routeId.value) return;
+
+  // Fetch policy if not available
+  if (!selectedPolicyId.value)
+    await store.dispatch('agentCapacityPolicies/show', routeId.value);
+
+  await store.dispatch('agentCapacityPolicies/getUsers', Number(routeId.value));
+};
+
+watch(routeId, fetchPolicyData, { immediate: true });
+onMounted(() => store.dispatch('agents/get'));
+</script>
+
+<template>
+  <SettingsLayout :is-loading="uiFlags.isFetchingItem" class="xl:px-44">
+    <template #header>
+      <div class="flex items-center gap-2 w-full justify-between">
+        <Breadcrumb :items="breadcrumbItems" @click="handleBreadcrumbClick" />
+      </div>
+    </template>
+
+    <template #body>
+      <AgentCapacityPolicyForm
+        :key="routeId"
+        mode="EDIT"
+        :initial-data="formData"
+        :policy-users="policyUsers"
+        :agent-list="allAgents"
+        :label-list="allLabels"
+        :inbox-list="allInboxes"
+        show-user-section
+        show-inbox-limit-section
+        :is-loading="uiFlags.isUpdating"
+        :is-users-loading="usersUiFlags.isFetching"
+        :is-inboxes-loading="inboxesUiFlags.isFetching"
+        @submit="handleSubmit"
+        @add-user="handleAddUser"
+        @delete-user="handleDeleteUser"
+        @add-inbox-limit="handleAddInboxLimit"
+        @update-inbox-limit="handleLimitChange"
+        @delete-inbox-limit="handleDeleteInboxLimit"
+      />
+    </template>
+  </SettingsLayout>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/assignmentPolicy/pages/components/AgentCapacityPolicyForm.vue b/app/javascript/dashboard/routes/dashboard/settings/assignmentPolicy/pages/components/AgentCapacityPolicyForm.vue
new file mode 100644
index 000000000..3619111c8
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/settings/assignmentPolicy/pages/components/AgentCapacityPolicyForm.vue
@@ -0,0 +1,214 @@
+<script setup>
+import { computed, reactive, ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import BaseInfo from 'dashboard/components-next/AssignmentPolicy/components/BaseInfo.vue';
+import DataTable from 'dashboard/components-next/AssignmentPolicy/components/DataTable.vue';
+import AddDataDropdown from 'dashboard/components-next/AssignmentPolicy/components/AddDataDropdown.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+import ExclusionRules from 'dashboard/components-next/AssignmentPolicy/components/ExclusionRules.vue';
+import InboxCapacityLimits from 'dashboard/components-next/AssignmentPolicy/components/InboxCapacityLimits.vue';
+
+const props = defineProps({
+  initialData: {
+    type: Object,
+    default: () => ({
+      name: '',
+      description: '',
+      enabled: false,
+      exclusionRules: {
+        excludedLabels: [],
+        excludeOlderThanHours: 10,
+      },
+      inboxCapacityLimits: [],
+    }),
+  },
+  mode: {
+    type: String,
+    required: true,
+    validator: value => ['CREATE', 'EDIT'].includes(value),
+  },
+  policyUsers: {
+    type: Array,
+    default: () => [],
+  },
+  agentList: {
+    type: Array,
+    default: () => [],
+  },
+  labelList: {
+    type: Array,
+    default: () => [],
+  },
+  inboxList: {
+    type: Array,
+    default: () => [],
+  },
+  showUserSection: {
+    type: Boolean,
+    default: false,
+  },
+  showInboxLimitSection: {
+    type: Boolean,
+    default: false,
+  },
+  isLoading: {
+    type: Boolean,
+    default: false,
+  },
+  isUsersLoading: {
+    type: Boolean,
+    default: false,
+  },
+  isInboxesLoading: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits([
+  'submit',
+  'addUser',
+  'deleteUser',
+  'validationChange',
+  'deleteInboxLimit',
+  'addInboxLimit',
+  'updateInboxLimit',
+]);
+
+const { t } = useI18n();
+
+const BASE_KEY = 'ASSIGNMENT_POLICY.AGENT_CAPACITY_POLICY';
+
+const state = reactive({
+  name: '',
+  description: '',
+  exclusionRules: {
+    excludedLabels: [],
+    excludeOlderThanHours: 10,
+  },
+  inboxCapacityLimits: [],
+});
+
+const validationState = ref({
+  isValid: false,
+});
+
+const buttonLabel = computed(() =>
+  t(`${BASE_KEY}.${props.mode.toUpperCase()}.${props.mode}_BUTTON`)
+);
+
+const handleValidationChange = validation => {
+  validationState.value = validation;
+  emit('validationChange', validation);
+};
+
+const handleDeleteInboxLimit = id => {
+  emit('deleteInboxLimit', id);
+};
+
+const handleAddInboxLimit = limit => {
+  emit('addInboxLimit', limit);
+};
+
+const handleLimitChange = limit => {
+  emit('updateInboxLimit', limit);
+};
+
+const resetForm = () => {
+  Object.assign(state, {
+    name: '',
+    description: '',
+    exclusionRules: {
+      excludedLabels: [],
+      excludeOlderThanHours: 10,
+    },
+    inboxCapacityLimits: [],
+  });
+};
+
+const handleSubmit = () => {
+  emit('submit', { ...state });
+};
+
+watch(
+  () => props.initialData,
+  newData => {
+    Object.assign(state, newData);
+  },
+  { immediate: true, deep: true }
+);
+
+defineExpose({
+  resetForm,
+});
+</script>
+
+<template>
+  <form @submit.prevent="handleSubmit">
+    <div class="flex flex-col gap-4 divide-y divide-n-weak">
+      <BaseInfo
+        v-model:policy-name="state.name"
+        v-model:description="state.description"
+        :name-label="t(`${BASE_KEY}.FORM.NAME.LABEL`)"
+        :name-placeholder="t(`${BASE_KEY}.FORM.NAME.PLACEHOLDER`)"
+        :description-label="t(`${BASE_KEY}.FORM.DESCRIPTION.LABEL`)"
+        :description-placeholder="t(`${BASE_KEY}.FORM.DESCRIPTION.PLACEHOLDER`)"
+        @validation-change="handleValidationChange"
+      />
+      <ExclusionRules
+        v-model:excluded-labels="state.exclusionRules.excludedLabels"
+        v-model:exclude-older-than-minutes="
+          state.exclusionRules.excludeOlderThanHours
+        "
+        :tags-list="labelList"
+      />
+    </div>
+    <Button
+      type="submit"
+      :label="buttonLabel"
+      :disabled="!validationState.isValid || isLoading"
+      :is-loading="isLoading"
+    />
+
+    <div
+      v-if="showInboxLimitSection || showUserSection"
+      class="flex flex-col gap-4 divide-y divide-n-weak border-t border-n-weak mt-6"
+    >
+      <InboxCapacityLimits
+        v-if="showInboxLimitSection"
+        v-model:inbox-capacity-limits="state.inboxCapacityLimits"
+        :inbox-list="inboxList"
+        :is-fetching="isInboxesLoading"
+        @delete="handleDeleteInboxLimit"
+        @add="handleAddInboxLimit"
+        @update="handleLimitChange"
+      />
+      <div v-if="showUserSection" class="py-4 flex-col flex gap-4">
+        <div class="flex items-end gap-4 w-full justify-between">
+          <div class="flex flex-col items-start gap-1 py-1">
+            <label class="text-sm font-medium text-n-slate-12 py-1">
+              {{ t(`${BASE_KEY}.FORM.USERS.LABEL`) }}
+            </label>
+            <p class="mb-0 text-n-slate-11 text-sm">
+              {{ t(`${BASE_KEY}.FORM.USERS.DESCRIPTION`) }}
+            </p>
+          </div>
+          <AddDataDropdown
+            :label="t(`${BASE_KEY}.FORM.USERS.ADD_BUTTON`)"
+            :search-placeholder="
+              t(`${BASE_KEY}.FORM.USERS.DROPDOWN.SEARCH_PLACEHOLDER`)
+            "
+            :items="agentList"
+            @add="$emit('addUser', $event)"
+          />
+        </div>
+        <DataTable
+          :items="policyUsers"
+          :is-fetching="isUsersLoading"
+          :empty-state-message="t(`${BASE_KEY}.FORM.USERS.EMPTY_STATE`)"
+          @delete="$emit('deleteUser', $event)"
+        />
+      </div>
+    </div>
+  </form>
+</template>
diff --git a/app/javascript/dashboard/store/modules/agentCapacityPolicies.js b/app/javascript/dashboard/store/modules/agentCapacityPolicies.js
index e1e766f2c..ea554448f 100644
--- a/app/javascript/dashboard/store/modules/agentCapacityPolicies.js
+++ b/app/javascript/dashboard/store/modules/agentCapacityPolicies.js
@@ -40,7 +40,10 @@ export const actions = {
     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));
+      commit(
+        types.SET_AGENT_CAPACITY_POLICIES,
+        camelcaseKeys(response.data, { deep: true })
+      );
     } catch (error) {
       throwErrorMessage(error);
     } finally {
@@ -52,7 +55,7 @@ export const actions = {
     commit(types.SET_AGENT_CAPACITY_POLICIES_UI_FLAG, { isFetchingItem: true });
     try {
       const response = await AgentCapacityPoliciesAPI.show(policyId);
-      const policy = camelcaseKeys(response.data);
+      const policy = camelcaseKeys(response.data, { deep: true });
       commit(types.SET_AGENT_CAPACITY_POLICY, policy);
     } catch (error) {
       throwErrorMessage(error);
@@ -69,7 +72,10 @@ export const actions = {
       const response = await AgentCapacityPoliciesAPI.create(
         snakecaseKeys(policyObj)
       );
-      commit(types.ADD_AGENT_CAPACITY_POLICY, camelcaseKeys(response.data));
+      commit(
+        types.ADD_AGENT_CAPACITY_POLICY,
+        camelcaseKeys(response.data, { deep: true })
+      );
       return response.data;
     } catch (error) {
       throwErrorMessage(error);
@@ -86,7 +92,10 @@ export const actions = {
         id,
         snakecaseKeys(policyParams)
       );
-      commit(types.EDIT_AGENT_CAPACITY_POLICY, camelcaseKeys(response.data));
+      commit(
+        types.EDIT_AGENT_CAPACITY_POLICY,
+        camelcaseKeys(response.data, { deep: true })
+      );
       return response.data;
     } catch (error) {
       throwErrorMessage(error);
@@ -129,6 +138,97 @@ export const actions = {
       });
     }
   },
+
+  addUser: async function addUser({ commit }, { policyId, userData }) {
+    try {
+      const response = await AgentCapacityPoliciesAPI.addUser(
+        policyId,
+        userData
+      );
+      commit(types.ADD_AGENT_CAPACITY_POLICIES_USERS, {
+        policyId,
+        user: camelcaseKeys(response.data),
+      });
+      return response.data;
+    } catch (error) {
+      throwErrorMessage(error);
+      throw error;
+    }
+  },
+
+  removeUser: async function removeUser({ commit }, { policyId, userId }) {
+    commit(types.SET_AGENT_CAPACITY_POLICIES_USERS_UI_FLAG, {
+      isDeleting: true,
+    });
+    try {
+      await AgentCapacityPoliciesAPI.removeUser(policyId, userId);
+      commit(types.DELETE_AGENT_CAPACITY_POLICIES_USERS, { policyId, userId });
+    } catch (error) {
+      throwErrorMessage(error);
+      throw error;
+    } finally {
+      commit(types.SET_AGENT_CAPACITY_POLICIES_USERS_UI_FLAG, {
+        isDeleting: false,
+      });
+    }
+  },
+
+  createInboxLimit: async function createInboxLimit(
+    { commit },
+    { policyId, limitData }
+  ) {
+    try {
+      const response = await AgentCapacityPoliciesAPI.createInboxLimit(
+        policyId,
+        limitData
+      );
+      commit(
+        types.SET_AGENT_CAPACITY_POLICIES_INBOXES,
+        camelcaseKeys(response.data)
+      );
+      return response.data;
+    } catch (error) {
+      throwErrorMessage(error);
+      throw error;
+    }
+  },
+
+  updateInboxLimit: async function updateInboxLimit(
+    { commit },
+    { policyId, limitId, limitData }
+  ) {
+    try {
+      const response = await AgentCapacityPoliciesAPI.updateInboxLimit(
+        policyId,
+        limitId,
+        limitData
+      );
+      commit(
+        types.EDIT_AGENT_CAPACITY_POLICIES_INBOXES,
+        camelcaseKeys(response.data)
+      );
+      return response.data;
+    } catch (error) {
+      throwErrorMessage(error);
+      throw error;
+    }
+  },
+
+  deleteInboxLimit: async function deleteInboxLimit(
+    { commit },
+    { policyId, limitId }
+  ) {
+    try {
+      await AgentCapacityPoliciesAPI.deleteInboxLimit(policyId, limitId);
+      commit(types.DELETE_AGENT_CAPACITY_POLICIES_INBOXES, {
+        policyId,
+        limitId,
+      });
+    } catch (error) {
+      throwErrorMessage(error);
+      throw error;
+    }
+  },
 };
 
 export const mutations = {
@@ -157,6 +257,54 @@ export const mutations = {
       policy.users = users;
     }
   },
+  [types.ADD_AGENT_CAPACITY_POLICIES_USERS](_state, { policyId, user }) {
+    const policy = _state.records.find(p => p.id === policyId);
+    if (policy) {
+      policy.users = policy.users || [];
+      policy.users.push(user);
+      policy.assignedAgentCount = policy.users.length;
+    }
+  },
+  [types.DELETE_AGENT_CAPACITY_POLICIES_USERS](_state, { policyId, userId }) {
+    const policy = _state.records.find(p => p.id === policyId);
+    if (policy) {
+      policy.users = (policy.users || []).filter(user => user.id !== userId);
+      policy.assignedAgentCount = policy.users.length;
+    }
+  },
+
+  [types.SET_AGENT_CAPACITY_POLICIES_INBOXES](_state, data) {
+    const policy = _state.records.find(
+      p => p.id === data.agentCapacityPolicyId
+    );
+    policy?.inboxCapacityLimits.push({
+      id: data.id,
+      inboxId: data.inboxId,
+      conversationLimit: data.conversationLimit,
+    });
+  },
+  [types.EDIT_AGENT_CAPACITY_POLICIES_INBOXES](_state, data) {
+    const policy = _state.records.find(
+      p => p.id === data.agentCapacityPolicyId
+    );
+    const limit = policy?.inboxCapacityLimits.find(l => l.id === data.id);
+    if (limit) {
+      Object.assign(limit, {
+        conversationLimit: data.conversationLimit,
+      });
+    }
+  },
+  [types.DELETE_AGENT_CAPACITY_POLICIES_INBOXES](
+    _state,
+    { policyId, limitId }
+  ) {
+    const policy = _state.records.find(p => p.id === policyId);
+    if (policy) {
+      policy.inboxCapacityLimits = policy.inboxCapacityLimits.filter(
+        limit => limit.id !== limitId
+      );
+    }
+  },
 };
 
 export default {
diff --git a/app/javascript/dashboard/store/modules/specs/agentCapacityPolicies/actions.spec.js b/app/javascript/dashboard/store/modules/specs/agentCapacityPolicies/actions.spec.js
index 0b5ece591..3414a2086 100644
--- a/app/javascript/dashboard/store/modules/specs/agentCapacityPolicies/actions.spec.js
+++ b/app/javascript/dashboard/store/modules/specs/agentCapacityPolicies/actions.spec.js
@@ -1,7 +1,12 @@
 import axios from 'axios';
 import { actions } from '../../agentCapacityPolicies';
 import types from '../../../mutation-types';
-import agentCapacityPoliciesList, { camelCaseFixtures } from './fixtures';
+import agentCapacityPoliciesList, {
+  camelCaseFixtures,
+  mockUsers,
+  mockInboxLimits,
+  camelCaseMockInboxLimits,
+} from './fixtures';
 import camelcaseKeys from 'camelcase-keys';
 import snakecaseKeys from 'snakecase-keys';
 
@@ -25,7 +30,9 @@ describe('#actions', () => {
 
       await actions.get({ commit });
 
-      expect(camelcaseKeys).toHaveBeenCalledWith(agentCapacityPoliciesList);
+      expect(camelcaseKeys).toHaveBeenCalledWith(agentCapacityPoliciesList, {
+        deep: true,
+      });
       expect(commit.mock.calls).toEqual([
         [types.SET_AGENT_CAPACITY_POLICIES_UI_FLAG, { isFetching: true }],
         [types.SET_AGENT_CAPACITY_POLICIES, camelCaseFixtures],
@@ -55,7 +62,9 @@ describe('#actions', () => {
 
       await actions.show({ commit }, 1);
 
-      expect(camelcaseKeys).toHaveBeenCalledWith(policyData);
+      expect(camelcaseKeys).toHaveBeenCalledWith(policyData, {
+        deep: true,
+      });
       expect(commit.mock.calls).toEqual([
         [types.SET_AGENT_CAPACITY_POLICIES_UI_FLAG, { isFetchingItem: true }],
         [types.SET_AGENT_CAPACITY_POLICY, camelCasedPolicy],
@@ -88,7 +97,9 @@ describe('#actions', () => {
       const result = await actions.create({ commit }, newPolicy);
 
       expect(snakecaseKeys).toHaveBeenCalledWith(newPolicy);
-      expect(camelcaseKeys).toHaveBeenCalledWith(newPolicy);
+      expect(camelcaseKeys).toHaveBeenCalledWith(newPolicy, {
+        deep: true,
+      });
       expect(commit.mock.calls).toEqual([
         [types.SET_AGENT_CAPACITY_POLICIES_UI_FLAG, { isCreating: true }],
         [types.ADD_AGENT_CAPACITY_POLICY, camelCasedData],
@@ -129,7 +140,9 @@ describe('#actions', () => {
       const result = await actions.update({ commit }, updateParams);
 
       expect(snakecaseKeys).toHaveBeenCalledWith({ name: 'Updated Policy' });
-      expect(camelcaseKeys).toHaveBeenCalledWith(responseData);
+      expect(camelcaseKeys).toHaveBeenCalledWith(responseData, {
+        deep: true,
+      });
       expect(commit.mock.calls).toEqual([
         [types.SET_AGENT_CAPACITY_POLICIES_UI_FLAG, { isUpdating: true }],
         [types.EDIT_AGENT_CAPACITY_POLICY, camelCasedData],
@@ -224,4 +237,172 @@ describe('#actions', () => {
       ]);
     });
   });
+
+  describe('#addUser', () => {
+    it('sends correct actions if API is success', async () => {
+      const policyId = 1;
+      const userData = { user_id: 3, capacity: 12 };
+      const responseData = mockUsers[2];
+      const camelCasedUser = mockUsers[2];
+
+      axios.post.mockResolvedValue({ data: responseData });
+      camelcaseKeys.mockReturnValue(camelCasedUser);
+
+      const result = await actions.addUser({ commit }, { policyId, userData });
+
+      expect(camelcaseKeys).toHaveBeenCalledWith(responseData);
+      expect(commit.mock.calls).toEqual([
+        [
+          types.ADD_AGENT_CAPACITY_POLICIES_USERS,
+          { policyId, user: camelCasedUser },
+        ],
+      ]);
+      expect(result).toEqual(responseData);
+    });
+
+    it('sends correct actions if API is error', async () => {
+      axios.post.mockRejectedValue(new Error('Validation error'));
+
+      await expect(
+        actions.addUser({ commit }, { policyId: 1, userData: {} })
+      ).rejects.toThrow(Error);
+
+      expect(commit).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('#removeUser', () => {
+    it('sends correct actions if API is success', async () => {
+      const policyId = 1;
+      const userId = 2;
+      axios.delete.mockResolvedValue({});
+
+      await actions.removeUser({ commit }, { policyId, userId });
+
+      expect(commit.mock.calls).toEqual([
+        [types.SET_AGENT_CAPACITY_POLICIES_USERS_UI_FLAG, { isDeleting: true }],
+        [types.DELETE_AGENT_CAPACITY_POLICIES_USERS, { policyId, userId }],
+        [
+          types.SET_AGENT_CAPACITY_POLICIES_USERS_UI_FLAG,
+          { isDeleting: false },
+        ],
+      ]);
+    });
+
+    it('sends correct actions if API is error', async () => {
+      axios.delete.mockRejectedValue(new Error('Not found'));
+
+      await expect(
+        actions.removeUser({ commit }, { policyId: 1, userId: 2 })
+      ).rejects.toThrow(Error);
+
+      expect(commit.mock.calls).toEqual([
+        [types.SET_AGENT_CAPACITY_POLICIES_USERS_UI_FLAG, { isDeleting: true }],
+        [
+          types.SET_AGENT_CAPACITY_POLICIES_USERS_UI_FLAG,
+          { isDeleting: false },
+        ],
+      ]);
+    });
+  });
+
+  describe('#createInboxLimit', () => {
+    it('sends correct actions if API is success', async () => {
+      const policyId = 1;
+      const limitData = { inbox_id: 3, conversation_limit: 20 };
+      const responseData = mockInboxLimits[2];
+      const camelCasedData = camelCaseMockInboxLimits[2];
+
+      axios.post.mockResolvedValue({ data: responseData });
+      camelcaseKeys.mockReturnValue(camelCasedData);
+
+      const result = await actions.createInboxLimit(
+        { commit },
+        { policyId, limitData }
+      );
+
+      expect(camelcaseKeys).toHaveBeenCalledWith(responseData);
+      expect(commit.mock.calls).toEqual([
+        [types.SET_AGENT_CAPACITY_POLICIES_INBOXES, camelCasedData],
+      ]);
+      expect(result).toEqual(responseData);
+    });
+
+    it('sends correct actions if API is error', async () => {
+      axios.post.mockRejectedValue(new Error('Validation error'));
+
+      await expect(
+        actions.createInboxLimit({ commit }, { policyId: 1, limitData: {} })
+      ).rejects.toThrow(Error);
+
+      expect(commit).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('#updateInboxLimit', () => {
+    it('sends correct actions if API is success', async () => {
+      const policyId = 1;
+      const limitId = 1;
+      const limitData = { conversation_limit: 25 };
+      const responseData = {
+        ...mockInboxLimits[0],
+        conversation_limit: 25,
+      };
+      const camelCasedData = {
+        ...camelCaseMockInboxLimits[0],
+        conversationLimit: 25,
+      };
+
+      axios.put.mockResolvedValue({ data: responseData });
+      camelcaseKeys.mockReturnValue(camelCasedData);
+
+      const result = await actions.updateInboxLimit(
+        { commit },
+        { policyId, limitId, limitData }
+      );
+
+      expect(camelcaseKeys).toHaveBeenCalledWith(responseData);
+      expect(commit.mock.calls).toEqual([
+        [types.EDIT_AGENT_CAPACITY_POLICIES_INBOXES, camelCasedData],
+      ]);
+      expect(result).toEqual(responseData);
+    });
+
+    it('sends correct actions if API is error', async () => {
+      axios.put.mockRejectedValue(new Error('Validation error'));
+
+      await expect(
+        actions.updateInboxLimit(
+          { commit },
+          { policyId: 1, limitId: 1, limitData: {} }
+        )
+      ).rejects.toThrow(Error);
+
+      expect(commit).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('#deleteInboxLimit', () => {
+    it('sends correct actions if API is success', async () => {
+      const policyId = 1;
+      const limitId = 1;
+      axios.delete.mockResolvedValue({});
+
+      await actions.deleteInboxLimit({ commit }, { policyId, limitId });
+
+      expect(commit.mock.calls).toEqual([
+        [types.DELETE_AGENT_CAPACITY_POLICIES_INBOXES, { policyId, limitId }],
+      ]);
+    });
+
+    it('sends correct actions if API is error', async () => {
+      axios.delete.mockRejectedValue(new Error('Not found'));
+
+      await expect(
+        actions.deleteInboxLimit({ commit }, { policyId: 1, limitId: 1 })
+      ).rejects.toThrow(Error);
+
+      expect(commit).not.toHaveBeenCalled();
+    });
+  });
 });
diff --git a/app/javascript/dashboard/store/modules/specs/agentCapacityPolicies/fixtures.js b/app/javascript/dashboard/store/modules/specs/agentCapacityPolicies/fixtures.js
index 594d5848c..c79597919 100644
--- a/app/javascript/dashboard/store/modules/specs/agentCapacityPolicies/fixtures.js
+++ b/app/javascript/dashboard/store/modules/specs/agentCapacityPolicies/fixtures.js
@@ -10,6 +10,20 @@ export default [
     created_at: '2024-01-01T10:00:00.000Z',
     updated_at: '2024-01-01T10:00:00.000Z',
     users: [],
+    inbox_capacity_limits: [
+      {
+        id: 1,
+        inbox_id: 1,
+        conversation_limit: 15,
+        agent_capacity_policy_id: 1,
+      },
+      {
+        id: 2,
+        inbox_id: 2,
+        conversation_limit: 8,
+        agent_capacity_policy_id: 1,
+      },
+    ],
   },
   {
     id: 2,
@@ -21,7 +35,21 @@ export default [
     assigned_agent_count: 5,
     created_at: '2024-01-01T11:00:00.000Z',
     updated_at: '2024-01-01T11:00:00.000Z',
-    users: [],
+    users: [
+      {
+        id: 1,
+        name: 'Agent Smith',
+        email: 'agent.smith@example.com',
+        capacity: 25,
+      },
+      {
+        id: 2,
+        name: 'Agent Johnson',
+        email: 'agent.johnson@example.com',
+        capacity: 18,
+      },
+    ],
+    inbox_capacity_limits: [],
   },
   {
     id: 3,
@@ -34,6 +62,7 @@ export default [
     created_at: '2024-01-01T12:00:00.000Z',
     updated_at: '2024-01-01T12:00:00.000Z',
     users: [],
+    inbox_capacity_limits: [],
   },
 ];
 
@@ -49,6 +78,20 @@ export const camelCaseFixtures = [
     createdAt: '2024-01-01T10:00:00.000Z',
     updatedAt: '2024-01-01T10:00:00.000Z',
     users: [],
+    inboxCapacityLimits: [
+      {
+        id: 1,
+        inboxId: 1,
+        conversationLimit: 15,
+        agentCapacityPolicyId: 1,
+      },
+      {
+        id: 2,
+        inboxId: 2,
+        conversationLimit: 8,
+        agentCapacityPolicyId: 1,
+      },
+    ],
   },
   {
     id: 2,
@@ -60,7 +103,21 @@ export const camelCaseFixtures = [
     assignedAgentCount: 5,
     createdAt: '2024-01-01T11:00:00.000Z',
     updatedAt: '2024-01-01T11:00:00.000Z',
-    users: [],
+    users: [
+      {
+        id: 1,
+        name: 'Agent Smith',
+        email: 'agent.smith@example.com',
+        capacity: 25,
+      },
+      {
+        id: 2,
+        name: 'Agent Johnson',
+        email: 'agent.johnson@example.com',
+        capacity: 18,
+      },
+    ],
+    inboxCapacityLimits: [],
   },
   {
     id: 3,
@@ -73,5 +130,70 @@ export const camelCaseFixtures = [
     createdAt: '2024-01-01T12:00:00.000Z',
     updatedAt: '2024-01-01T12:00:00.000Z',
     users: [],
+    inboxCapacityLimits: [],
+  },
+];
+
+// Additional test data for user and inbox limit operations
+export const mockUsers = [
+  {
+    id: 1,
+    name: 'Agent Smith',
+    email: 'agent.smith@example.com',
+    capacity: 25,
+  },
+  {
+    id: 2,
+    name: 'Agent Johnson',
+    email: 'agent.johnson@example.com',
+    capacity: 18,
+  },
+  {
+    id: 3,
+    name: 'Agent Brown',
+    email: 'agent.brown@example.com',
+    capacity: 12,
+  },
+];
+
+export const mockInboxLimits = [
+  {
+    id: 1,
+    inbox_id: 1,
+    conversation_limit: 15,
+    agent_capacity_policy_id: 1,
+  },
+  {
+    id: 2,
+    inbox_id: 2,
+    conversation_limit: 8,
+    agent_capacity_policy_id: 1,
+  },
+  {
+    id: 3,
+    inbox_id: 3,
+    conversation_limit: 20,
+    agent_capacity_policy_id: 2,
+  },
+];
+
+export const camelCaseMockInboxLimits = [
+  {
+    id: 1,
+    inboxId: 1,
+    conversationLimit: 15,
+    agentCapacityPolicyId: 1,
+  },
+  {
+    id: 2,
+    inboxId: 2,
+    conversationLimit: 8,
+    agentCapacityPolicyId: 1,
+  },
+  {
+    id: 3,
+    inboxId: 3,
+    conversationLimit: 20,
+    agentCapacityPolicyId: 2,
   },
 ];
diff --git a/app/javascript/dashboard/store/modules/specs/agentCapacityPolicies/mutations.spec.js b/app/javascript/dashboard/store/modules/specs/agentCapacityPolicies/mutations.spec.js
index 0ab033953..f6cfba80d 100644
--- a/app/javascript/dashboard/store/modules/specs/agentCapacityPolicies/mutations.spec.js
+++ b/app/javascript/dashboard/store/modules/specs/agentCapacityPolicies/mutations.spec.js
@@ -1,6 +1,6 @@
 import { mutations } from '../../agentCapacityPolicies';
 import types from '../../../mutation-types';
-import agentCapacityPoliciesList from './fixtures';
+import agentCapacityPoliciesList, { mockUsers } from './fixtures';
 
 describe('#mutations', () => {
   describe('#SET_AGENT_CAPACITY_POLICIES_UI_FLAG', () => {
@@ -248,7 +248,7 @@ describe('#mutations', () => {
 
   describe('#SET_AGENT_CAPACITY_POLICIES_USERS', () => {
     it('sets users for existing policy', () => {
-      const mockUsers = [
+      const testUsers = [
         { id: 1, name: 'Agent 1', email: 'agent1@example.com', capacity: 15 },
         { id: 2, name: 'Agent 2', email: 'agent2@example.com', capacity: 20 },
       ];
@@ -262,10 +262,10 @@ describe('#mutations', () => {
 
       mutations[types.SET_AGENT_CAPACITY_POLICIES_USERS](state, {
         policyId: 1,
-        users: mockUsers,
+        users: testUsers,
       });
 
-      expect(state.records[0].users).toEqual(mockUsers);
+      expect(state.records[0].users).toEqual(testUsers);
       expect(state.records[1].users).toEqual([]);
     });
 
@@ -300,4 +300,320 @@ describe('#mutations', () => {
       expect(state).toEqual(originalState);
     });
   });
+
+  describe('#ADD_AGENT_CAPACITY_POLICIES_USERS', () => {
+    it('adds user to existing policy', () => {
+      const state = {
+        records: [
+          { id: 1, name: 'Policy 1', users: [] },
+          { id: 2, name: 'Policy 2', users: [] },
+        ],
+      };
+
+      mutations[types.ADD_AGENT_CAPACITY_POLICIES_USERS](state, {
+        policyId: 1,
+        user: mockUsers[0],
+      });
+
+      expect(state.records[0].users).toEqual([mockUsers[0]]);
+      expect(state.records[1].users).toEqual([]);
+    });
+
+    it('adds user to policy with existing users', () => {
+      const state = {
+        records: [{ id: 1, name: 'Policy 1', users: [mockUsers[0]] }],
+      };
+
+      mutations[types.ADD_AGENT_CAPACITY_POLICIES_USERS](state, {
+        policyId: 1,
+        user: mockUsers[1],
+      });
+
+      expect(state.records[0].users).toEqual([mockUsers[0], mockUsers[1]]);
+    });
+
+    it('initializes users array if undefined', () => {
+      const state = {
+        records: [{ id: 1, name: 'Policy 1' }],
+      };
+
+      mutations[types.ADD_AGENT_CAPACITY_POLICIES_USERS](state, {
+        policyId: 1,
+        user: mockUsers[0],
+      });
+
+      expect(state.records[0].users).toEqual([mockUsers[0]]);
+    });
+
+    it('updates assigned agent count', () => {
+      const state = {
+        records: [{ id: 1, name: 'Policy 1', users: [] }],
+      };
+
+      mutations[types.ADD_AGENT_CAPACITY_POLICIES_USERS](state, {
+        policyId: 1,
+        user: mockUsers[0],
+      });
+
+      expect(state.records[0].assignedAgentCount).toEqual(1);
+    });
+  });
+
+  describe('#DELETE_AGENT_CAPACITY_POLICIES_USERS', () => {
+    it('removes user from policy', () => {
+      const state = {
+        records: [
+          {
+            id: 1,
+            name: 'Policy 1',
+            users: [mockUsers[0], mockUsers[1], mockUsers[2]],
+          },
+        ],
+      };
+
+      mutations[types.DELETE_AGENT_CAPACITY_POLICIES_USERS](state, {
+        policyId: 1,
+        userId: 2,
+      });
+
+      expect(state.records[0].users).toEqual([mockUsers[0], mockUsers[2]]);
+    });
+
+    it('handles removing non-existent user', () => {
+      const state = {
+        records: [
+          {
+            id: 1,
+            name: 'Policy 1',
+            users: [mockUsers[0]],
+          },
+        ],
+      };
+
+      mutations[types.DELETE_AGENT_CAPACITY_POLICIES_USERS](state, {
+        policyId: 1,
+        userId: 999,
+      });
+
+      expect(state.records[0].users).toEqual([mockUsers[0]]);
+    });
+
+    it('updates assigned agent count', () => {
+      const state = {
+        records: [{ id: 1, name: 'Policy 1', users: [mockUsers[0]] }],
+      };
+
+      mutations[types.DELETE_AGENT_CAPACITY_POLICIES_USERS](state, {
+        policyId: 1,
+        userId: 1,
+      });
+
+      expect(state.records[0].assignedAgentCount).toEqual(0);
+    });
+  });
+
+  describe('#SET_AGENT_CAPACITY_POLICIES_INBOXES', () => {
+    it('adds inbox limit to policy', () => {
+      const state = {
+        records: [
+          {
+            id: 1,
+            name: 'Policy 1',
+            inboxCapacityLimits: [],
+          },
+        ],
+      };
+
+      const inboxLimitData = {
+        id: 1,
+        inboxId: 1,
+        conversationLimit: 15,
+        agentCapacityPolicyId: 1,
+      };
+
+      mutations[types.SET_AGENT_CAPACITY_POLICIES_INBOXES](
+        state,
+        inboxLimitData
+      );
+
+      expect(state.records[0].inboxCapacityLimits).toEqual([
+        {
+          id: 1,
+          inboxId: 1,
+          conversationLimit: 15,
+        },
+      ]);
+    });
+
+    it('does nothing if policy not found', () => {
+      const state = {
+        records: [{ id: 1, name: 'Policy 1', inboxCapacityLimits: [] }],
+      };
+
+      const originalState = JSON.parse(JSON.stringify(state));
+
+      mutations[types.SET_AGENT_CAPACITY_POLICIES_INBOXES](state, {
+        id: 1,
+        inboxId: 1,
+        conversationLimit: 15,
+        agentCapacityPolicyId: 999,
+      });
+
+      expect(state).toEqual(originalState);
+    });
+  });
+
+  describe('#EDIT_AGENT_CAPACITY_POLICIES_INBOXES', () => {
+    it('updates existing inbox limit', () => {
+      const state = {
+        records: [
+          {
+            id: 1,
+            name: 'Policy 1',
+            inboxCapacityLimits: [
+              {
+                id: 1,
+                inboxId: 1,
+                conversationLimit: 15,
+              },
+              {
+                id: 2,
+                inboxId: 2,
+                conversationLimit: 8,
+              },
+            ],
+          },
+        ],
+      };
+
+      mutations[types.EDIT_AGENT_CAPACITY_POLICIES_INBOXES](state, {
+        id: 1,
+        inboxId: 1,
+        conversationLimit: 25,
+        agentCapacityPolicyId: 1,
+      });
+
+      expect(state.records[0].inboxCapacityLimits[0]).toEqual({
+        id: 1,
+        inboxId: 1,
+        conversationLimit: 25,
+      });
+      expect(state.records[0].inboxCapacityLimits[1]).toEqual({
+        id: 2,
+        inboxId: 2,
+        conversationLimit: 8,
+      });
+    });
+
+    it('does nothing if limit not found', () => {
+      const state = {
+        records: [
+          {
+            id: 1,
+            name: 'Policy 1',
+            inboxCapacityLimits: [
+              {
+                id: 1,
+                inboxId: 1,
+                conversationLimit: 15,
+              },
+            ],
+          },
+        ],
+      };
+
+      const originalLimits = [...state.records[0].inboxCapacityLimits];
+
+      mutations[types.EDIT_AGENT_CAPACITY_POLICIES_INBOXES](state, {
+        id: 999,
+        inboxId: 1,
+        conversationLimit: 25,
+        agentCapacityPolicyId: 1,
+      });
+
+      expect(state.records[0].inboxCapacityLimits).toEqual(originalLimits);
+    });
+
+    it('does nothing if policy not found', () => {
+      const state = {
+        records: [{ id: 1, name: 'Policy 1', inboxCapacityLimits: [] }],
+      };
+
+      const originalState = JSON.parse(JSON.stringify(state));
+
+      mutations[types.EDIT_AGENT_CAPACITY_POLICIES_INBOXES](state, {
+        id: 1,
+        inboxId: 1,
+        conversationLimit: 25,
+        agentCapacityPolicyId: 999,
+      });
+
+      expect(state).toEqual(originalState);
+    });
+  });
+
+  describe('#DELETE_AGENT_CAPACITY_POLICIES_INBOXES', () => {
+    it('removes inbox limit from policy', () => {
+      const state = {
+        records: [
+          {
+            id: 1,
+            name: 'Policy 1',
+            inboxCapacityLimits: [
+              {
+                id: 1,
+                inboxId: 1,
+                conversationLimit: 15,
+              },
+              {
+                id: 2,
+                inboxId: 2,
+                conversationLimit: 8,
+              },
+            ],
+          },
+        ],
+      };
+
+      mutations[types.DELETE_AGENT_CAPACITY_POLICIES_INBOXES](state, {
+        policyId: 1,
+        limitId: 1,
+      });
+
+      expect(state.records[0].inboxCapacityLimits).toEqual([
+        {
+          id: 2,
+          inboxId: 2,
+          conversationLimit: 8,
+        },
+      ]);
+    });
+
+    it('handles removing non-existent limit', () => {
+      const state = {
+        records: [
+          {
+            id: 1,
+            name: 'Policy 1',
+            inboxCapacityLimits: [
+              {
+                id: 1,
+                inboxId: 1,
+                conversationLimit: 15,
+              },
+            ],
+          },
+        ],
+      };
+
+      const originalLimits = [...state.records[0].inboxCapacityLimits];
+
+      mutations[types.DELETE_AGENT_CAPACITY_POLICIES_INBOXES](state, {
+        policyId: 1,
+        limitId: 999,
+      });
+
+      expect(state.records[0].inboxCapacityLimits).toEqual(originalLimits);
+    });
+  });
 });
diff --git a/app/javascript/dashboard/store/mutation-types.js b/app/javascript/dashboard/store/mutation-types.js
index 2a5948d14..4f361e140 100644
--- a/app/javascript/dashboard/store/mutation-types.js
+++ b/app/javascript/dashboard/store/mutation-types.js
@@ -372,4 +372,10 @@ export default {
   SET_AGENT_CAPACITY_POLICIES_USERS: 'SET_AGENT_CAPACITY_POLICIES_USERS',
   SET_AGENT_CAPACITY_POLICIES_USERS_UI_FLAG:
     'SET_AGENT_CAPACITY_POLICIES_USERS_UI_FLAG',
+  ADD_AGENT_CAPACITY_POLICIES_USERS: 'ADD_AGENT_CAPACITY_POLICIES_USERS',
+  DELETE_AGENT_CAPACITY_POLICIES_USERS: 'DELETE_AGENT_CAPACITY_POLICIES_USERS',
+  SET_AGENT_CAPACITY_POLICIES_INBOXES: 'SET_AGENT_CAPACITY_POLICIES_INBOXES',
+  EDIT_AGENT_CAPACITY_POLICIES_INBOXES: 'EDIT_AGENT_CAPACITY_POLICIES_INBOXES',
+  DELETE_AGENT_CAPACITY_POLICIES_INBOXES:
+    'DELETE_AGENT_CAPACITY_POLICIES_INBOXES',
 };