feat: Agent assignment policy index page with CRUD actions (#12373)

# Pull Request Template

## Description

This PR incudes new Agent assignment policy index page with CRUD
actions.

Fixes
https://linear.app/chatwoot/issue/CW-5570/feat-assignment-policy-index-page-with-actions

## Type of change

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

## How Has This Been Tested?

### Loom

https://www.loom.com/share/17ab5ceca4854f179628a3b53f347e5a?sid=cb64e881-57fd-4ae1-921b-7648653cca33

### Screenshots

**Light mode**
<img width="1428" height="888" alt="image"
src="https://github.com/user-attachments/assets/fdbb83e9-1f4f-4432-9e8a-4a8f1b810d31"
/>


**Dark mode**
<img width="1428" height="888" alt="image"
src="https://github.com/user-attachments/assets/f1fb38b9-1150-482c-ba62-3fe63ee1c7d4"
/>
<img width="726" height="495" alt="image"
src="https://github.com/user-attachments/assets/90a6ad55-9ab6-4adb-93a7-2327f5f09c79"
/>


## 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
- [ ] 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>

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

@@ -0,0 +1,214 @@
+import axios from 'axios';
+import { actions } from '../../assignmentPolicies';
+import types from '../../../mutation-types';
+import assignmentPoliciesList, { camelCaseFixtures } from './fixtures';
+import camelcaseKeys from 'camelcase-keys';
+
+const commit = vi.fn();
+
+global.axios = axios;
+vi.mock('axios');
+vi.mock('camelcase-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: assignmentPoliciesList });
+      camelcaseKeys.mockReturnValue(camelCaseFixtures);
+
+      await actions.get({ commit });
+
+      expect(camelcaseKeys).toHaveBeenCalledWith(assignmentPoliciesList);
+      expect(commit.mock.calls).toEqual([
+        [types.SET_ASSIGNMENT_POLICIES_UI_FLAG, { isFetching: true }],
+        [types.SET_ASSIGNMENT_POLICIES, camelCaseFixtures],
+        [types.SET_ASSIGNMENT_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_ASSIGNMENT_POLICIES_UI_FLAG, { isFetching: true }],
+        [types.SET_ASSIGNMENT_POLICIES_UI_FLAG, { isFetching: false }],
+      ]);
+    });
+  });
+
+  describe('#show', () => {
+    it('sends correct actions if API is success', async () => {
+      const policyData = assignmentPoliciesList[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_ASSIGNMENT_POLICIES_UI_FLAG, { isFetchingItem: true }],
+        [types.EDIT_ASSIGNMENT_POLICY, camelCasedPolicy],
+        [types.SET_ASSIGNMENT_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_ASSIGNMENT_POLICIES_UI_FLAG, { isFetchingItem: true }],
+        [types.SET_ASSIGNMENT_POLICIES_UI_FLAG, { isFetchingItem: false }],
+      ]);
+    });
+  });
+
+  describe('#create', () => {
+    it('sends correct actions if API is success', async () => {
+      const newPolicy = assignmentPoliciesList[0];
+      const camelCasedData = camelCaseFixtures[0];
+
+      axios.post.mockResolvedValue({ data: newPolicy });
+      camelcaseKeys.mockReturnValue(camelCasedData);
+
+      const result = await actions.create({ commit }, newPolicy);
+
+      expect(camelcaseKeys).toHaveBeenCalledWith(newPolicy);
+      expect(commit.mock.calls).toEqual([
+        [types.SET_ASSIGNMENT_POLICIES_UI_FLAG, { isCreating: true }],
+        [types.ADD_ASSIGNMENT_POLICY, camelCasedData],
+        [types.SET_ASSIGNMENT_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_ASSIGNMENT_POLICIES_UI_FLAG, { isCreating: true }],
+        [types.SET_ASSIGNMENT_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 = {
+        ...assignmentPoliciesList[0],
+        name: 'Updated Policy',
+      };
+      const camelCasedData = {
+        ...camelCaseFixtures[0],
+        name: 'Updated Policy',
+      };
+
+      axios.patch.mockResolvedValue({ data: responseData });
+      camelcaseKeys.mockReturnValue(camelCasedData);
+
+      const result = await actions.update({ commit }, updateParams);
+
+      expect(camelcaseKeys).toHaveBeenCalledWith(responseData);
+      expect(commit.mock.calls).toEqual([
+        [types.SET_ASSIGNMENT_POLICIES_UI_FLAG, { isUpdating: true }],
+        [types.EDIT_ASSIGNMENT_POLICY, camelCasedData],
+        [types.SET_ASSIGNMENT_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_ASSIGNMENT_POLICIES_UI_FLAG, { isUpdating: true }],
+        [types.SET_ASSIGNMENT_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_ASSIGNMENT_POLICIES_UI_FLAG, { isDeleting: true }],
+        [types.DELETE_ASSIGNMENT_POLICY, policyId],
+        [types.SET_ASSIGNMENT_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_ASSIGNMENT_POLICIES_UI_FLAG, { isDeleting: true }],
+        [types.SET_ASSIGNMENT_POLICIES_UI_FLAG, { isDeleting: false }],
+      ]);
+    });
+  });
+
+  describe('#getInboxes', () => {
+    it('sends correct actions if API is success', async () => {
+      const policyId = 1;
+      const inboxData = {
+        inboxes: [
+          { id: 1, name: 'Support' },
+          { id: 2, name: 'Sales' },
+        ],
+      };
+      const camelCasedInboxes = [
+        { id: 1, name: 'Support' },
+        { id: 2, name: 'Sales' },
+      ];
+
+      axios.get.mockResolvedValue({ data: inboxData });
+      camelcaseKeys.mockReturnValue(camelCasedInboxes);
+
+      await actions.getInboxes({ commit }, policyId);
+
+      expect(camelcaseKeys).toHaveBeenCalledWith(inboxData.inboxes);
+      expect(commit.mock.calls).toEqual([
+        [types.SET_ASSIGNMENT_POLICIES_INBOXES_UI_FLAG, { isFetching: true }],
+        [
+          types.SET_ASSIGNMENT_POLICIES_INBOXES,
+          { policyId, inboxes: camelCasedInboxes },
+        ],
+        [types.SET_ASSIGNMENT_POLICIES_INBOXES_UI_FLAG, { isFetching: false }],
+      ]);
+    });
+
+    it('sends correct actions if API fails', async () => {
+      axios.get.mockRejectedValue(new Error('API Error'));
+
+      await expect(actions.getInboxes({ commit }, 1)).rejects.toThrow(Error);
+
+      expect(commit.mock.calls).toEqual([
+        [types.SET_ASSIGNMENT_POLICIES_INBOXES_UI_FLAG, { isFetching: true }],
+        [types.SET_ASSIGNMENT_POLICIES_INBOXES_UI_FLAG, { isFetching: false }],
+      ]);
+    });
+  });
+});

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

@@ -0,0 +1,57 @@
+export default [
+  {
+    id: 1,
+    name: 'Round Robin Policy',
+    description: 'Distributes conversations evenly among agents',
+    assignment_order: 'round_robin',
+    conversation_priority: 'earliest_created',
+    fair_distribution_limit: 100,
+    fair_distribution_window: 3600,
+    enabled: true,
+    assigned_inbox_count: 3,
+    created_at: 1704110400,
+    updated_at: 1704110400,
+  },
+  {
+    id: 2,
+    name: 'Balanced Policy',
+    description: 'Assigns conversations based on agent capacity',
+    assignment_order: 'balanced',
+    conversation_priority: 'longest_waiting',
+    fair_distribution_limit: 50,
+    fair_distribution_window: 1800,
+    enabled: false,
+    assigned_inbox_count: 1,
+    created_at: 1704114000,
+    updated_at: 1704114000,
+  },
+];
+
+export const camelCaseFixtures = [
+  {
+    id: 1,
+    name: 'Round Robin Policy',
+    description: 'Distributes conversations evenly among agents',
+    assignmentOrder: 'round_robin',
+    conversationPriority: 'earliest_created',
+    fairDistributionLimit: 100,
+    fairDistributionWindow: 3600,
+    enabled: true,
+    assignedInboxCount: 3,
+    createdAt: 1704110400,
+    updatedAt: 1704110400,
+  },
+  {
+    id: 2,
+    name: 'Balanced Policy',
+    description: 'Assigns conversations based on agent capacity',
+    assignmentOrder: 'balanced',
+    conversationPriority: 'longest_waiting',
+    fairDistributionLimit: 50,
+    fairDistributionWindow: 1800,
+    enabled: false,
+    assignedInboxCount: 1,
+    createdAt: 1704114000,
+    updatedAt: 1704114000,
+  },
+];

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

@@ -0,0 +1,49 @@
+import { getters } from '../../assignmentPolicies';
+import assignmentPoliciesList from './fixtures';
+
+describe('#getters', () => {
+  it('getAssignmentPolicies', () => {
+    const state = { records: assignmentPoliciesList };
+    expect(getters.getAssignmentPolicies(state)).toEqual(
+      assignmentPoliciesList
+    );
+  });
+
+  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('getInboxUiFlags', () => {
+    const state = {
+      inboxUiFlags: {
+        isFetching: false,
+      },
+    };
+    expect(getters.getInboxUiFlags(state)).toEqual({
+      isFetching: false,
+    });
+  });
+
+  it('getAssignmentPolicyById', () => {
+    const state = { records: assignmentPoliciesList };
+    expect(getters.getAssignmentPolicyById(state)(1)).toEqual(
+      assignmentPoliciesList[0]
+    );
+    expect(getters.getAssignmentPolicyById(state)(3)).toEqual({});
+  });
+});

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

@@ -0,0 +1,267 @@
+import { mutations } from '../../assignmentPolicies';
+import types from '../../../mutation-types';
+import assignmentPoliciesList from './fixtures';
+
+describe('#mutations', () => {
+  describe('#SET_ASSIGNMENT_POLICIES_UI_FLAG', () => {
+    it('sets single ui flag', () => {
+      const state = {
+        uiFlags: {
+          isFetching: false,
+          isCreating: false,
+        },
+      };
+
+      mutations[types.SET_ASSIGNMENT_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_ASSIGNMENT_POLICIES_UI_FLAG](state, {
+        isFetching: true,
+        isCreating: true,
+      });
+
+      expect(state.uiFlags).toEqual({
+        isFetching: true,
+        isCreating: true,
+        isUpdating: false,
+      });
+    });
+  });
+
+  describe('#SET_ASSIGNMENT_POLICIES', () => {
+    it('sets assignment policies records', () => {
+      const state = { records: [] };
+
+      mutations[types.SET_ASSIGNMENT_POLICIES](state, assignmentPoliciesList);
+
+      expect(state.records).toEqual(assignmentPoliciesList);
+    });
+
+    it('replaces existing records', () => {
+      const state = { records: [{ id: 999, name: 'Old Policy' }] };
+
+      mutations[types.SET_ASSIGNMENT_POLICIES](state, assignmentPoliciesList);
+
+      expect(state.records).toEqual(assignmentPoliciesList);
+    });
+  });
+
+  describe('#ADD_ASSIGNMENT_POLICY', () => {
+    it('adds new policy to empty records', () => {
+      const state = { records: [] };
+
+      mutations[types.ADD_ASSIGNMENT_POLICY](state, assignmentPoliciesList[0]);
+
+      expect(state.records).toEqual([assignmentPoliciesList[0]]);
+    });
+
+    it('adds new policy to existing records', () => {
+      const state = { records: [assignmentPoliciesList[0]] };
+
+      mutations[types.ADD_ASSIGNMENT_POLICY](state, assignmentPoliciesList[1]);
+
+      expect(state.records).toEqual([
+        assignmentPoliciesList[0],
+        assignmentPoliciesList[1],
+      ]);
+    });
+  });
+
+  describe('#EDIT_ASSIGNMENT_POLICY', () => {
+    it('updates existing policy by id', () => {
+      const state = {
+        records: [
+          { ...assignmentPoliciesList[0] },
+          { ...assignmentPoliciesList[1] },
+        ],
+      };
+
+      const updatedPolicy = {
+        ...assignmentPoliciesList[0],
+        name: 'Updated Policy Name',
+        description: 'Updated Description',
+      };
+
+      mutations[types.EDIT_ASSIGNMENT_POLICY](state, updatedPolicy);
+
+      expect(state.records[0]).toEqual(updatedPolicy);
+      expect(state.records[1]).toEqual(assignmentPoliciesList[1]);
+    });
+
+    it('updates policy with camelCase properties', () => {
+      const camelCasePolicy = {
+        id: 1,
+        name: 'Camel Case Policy',
+        assignmentOrder: 'round_robin',
+        conversationPriority: 'earliest_created',
+      };
+
+      const state = {
+        records: [camelCasePolicy],
+      };
+
+      const updatedPolicy = {
+        ...camelCasePolicy,
+        name: 'Updated Camel Case',
+        assignmentOrder: 'balanced',
+      };
+
+      mutations[types.EDIT_ASSIGNMENT_POLICY](state, updatedPolicy);
+
+      expect(state.records[0]).toEqual(updatedPolicy);
+    });
+
+    it('does nothing if policy id not found', () => {
+      const state = {
+        records: [assignmentPoliciesList[0]],
+      };
+
+      const nonExistentPolicy = {
+        id: 999,
+        name: 'Non-existent',
+      };
+
+      const originalRecords = [...state.records];
+      mutations[types.EDIT_ASSIGNMENT_POLICY](state, nonExistentPolicy);
+
+      expect(state.records).toEqual(originalRecords);
+    });
+  });
+
+  describe('#DELETE_ASSIGNMENT_POLICY', () => {
+    it('deletes policy by id', () => {
+      const state = {
+        records: [assignmentPoliciesList[0], assignmentPoliciesList[1]],
+      };
+
+      mutations[types.DELETE_ASSIGNMENT_POLICY](state, 1);
+
+      expect(state.records).toEqual([assignmentPoliciesList[1]]);
+    });
+
+    it('does nothing if id not found', () => {
+      const state = {
+        records: [assignmentPoliciesList[0]],
+      };
+
+      mutations[types.DELETE_ASSIGNMENT_POLICY](state, 999);
+
+      expect(state.records).toEqual([assignmentPoliciesList[0]]);
+    });
+
+    it('handles empty records', () => {
+      const state = { records: [] };
+
+      mutations[types.DELETE_ASSIGNMENT_POLICY](state, 1);
+
+      expect(state.records).toEqual([]);
+    });
+  });
+
+  describe('#SET_ASSIGNMENT_POLICIES_INBOXES_UI_FLAG', () => {
+    it('sets inbox ui flags', () => {
+      const state = {
+        inboxUiFlags: {
+          isFetching: false,
+        },
+      };
+
+      mutations[types.SET_ASSIGNMENT_POLICIES_INBOXES_UI_FLAG](state, {
+        isFetching: true,
+      });
+
+      expect(state.inboxUiFlags).toEqual({
+        isFetching: true,
+      });
+    });
+
+    it('merges with existing flags', () => {
+      const state = {
+        inboxUiFlags: {
+          isFetching: false,
+          isLoading: true,
+        },
+      };
+
+      mutations[types.SET_ASSIGNMENT_POLICIES_INBOXES_UI_FLAG](state, {
+        isFetching: true,
+      });
+
+      expect(state.inboxUiFlags).toEqual({
+        isFetching: true,
+        isLoading: true,
+      });
+    });
+  });
+
+  describe('#SET_ASSIGNMENT_POLICIES_INBOXES', () => {
+    it('sets inboxes for existing policy', () => {
+      const mockInboxes = [
+        { id: 1, name: 'Support Inbox' },
+        { id: 2, name: 'Sales Inbox' },
+      ];
+
+      const state = {
+        records: [
+          { id: 1, name: 'Policy 1', inboxes: [] },
+          { id: 2, name: 'Policy 2', inboxes: [] },
+        ],
+      };
+
+      mutations[types.SET_ASSIGNMENT_POLICIES_INBOXES](state, {
+        policyId: 1,
+        inboxes: mockInboxes,
+      });
+
+      expect(state.records[0].inboxes).toEqual(mockInboxes);
+      expect(state.records[1].inboxes).toEqual([]);
+    });
+
+    it('replaces existing inboxes', () => {
+      const oldInboxes = [{ id: 99, name: 'Old Inbox' }];
+      const newInboxes = [{ id: 1, name: 'New Inbox' }];
+
+      const state = {
+        records: [{ id: 1, name: 'Policy 1', inboxes: oldInboxes }],
+      };
+
+      mutations[types.SET_ASSIGNMENT_POLICIES_INBOXES](state, {
+        policyId: 1,
+        inboxes: newInboxes,
+      });
+
+      expect(state.records[0].inboxes).toEqual(newInboxes);
+    });
+
+    it('does nothing if policy not found', () => {
+      const state = {
+        records: [{ id: 1, name: 'Policy 1', inboxes: [] }],
+      };
+
+      const originalState = JSON.parse(JSON.stringify(state));
+
+      mutations[types.SET_ASSIGNMENT_POLICIES_INBOXES](state, {
+        policyId: 999,
+        inboxes: [{ id: 1, name: 'Test' }],
+      });
+
+      expect(state).toEqual(originalState);
+    });
+  });
+});