From b46c07519a1d7324d2f3806a5f70238a3c28fe14 Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Wed, 3 Sep 2025 20:36:21 +0530
Subject: [PATCH] feat: Add AssignmentCard with story for agent UI (#12360)

# Pull Request Template

## Description

This PR adds the `AssignmentCard` component with a story for the agent
management UI.

## Type of change

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

## How Has This Been Tested?

### Screenshot
<img width="1061" height="357" alt="image"
src="https://github.com/user-attachments/assets/e5548325-294a-48f8-8c7f-0a0c9272bf76"
/>
<img width="1061" height="357" alt="image"
src="https://github.com/user-attachments/assets/cfb76bf4-bddc-4ec4-a27d-27be3efb0e8f"
/>
<img width="1061" height="357" alt="image"
src="https://github.com/user-attachments/assets/6efc6617-4ce5-42df-b239-c296bbd0acc5"
/>



## Checklist:

- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my code
- [ ] 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
---
 .../AssignmentCard/AssignmentCard.story.vue   | 63 +++++++++++++++++++
 .../AssignmentCard/AssignmentCard.vue         | 46 ++++++++++++++
 2 files changed, 109 insertions(+)
 create mode 100644 app/javascript/dashboard/components-next/AgentManagementPolicy/AssignmentCard/AssignmentCard.story.vue
 create mode 100644 app/javascript/dashboard/components-next/AgentManagementPolicy/AssignmentCard/AssignmentCard.vue

diff --git a/app/javascript/dashboard/components-next/AgentManagementPolicy/AssignmentCard/AssignmentCard.story.vue b/app/javascript/dashboard/components-next/AgentManagementPolicy/AssignmentCard/AssignmentCard.story.vue
new file mode 100644
index 000000000..e35be8155
--- /dev/null
+++ b/app/javascript/dashboard/components-next/AgentManagementPolicy/AssignmentCard/AssignmentCard.story.vue
@@ -0,0 +1,63 @@
+<script setup>
+import AssignmentCard from './AssignmentCard.vue';
+
+const agentAssignments = [
+  {
+    id: 1,
+    title: 'Assignment policy',
+    description: 'Manage how conversations get assigned in inboxes.',
+    features: [
+      {
+        icon: 'i-lucide-circle-fading-arrow-up',
+        label: 'Assign by conversations evenly or by available capacity',
+      },
+      {
+        icon: 'i-lucide-scale',
+        label: 'Add fair distribution rules to avoid overloading any agent',
+      },
+      {
+        icon: 'i-lucide-inbox',
+        label: 'Add inboxes to a policy - one policy per inbox',
+      },
+    ],
+  },
+  {
+    id: 2,
+    title: 'Agent capacity policy',
+    description: 'Manage workload for agents.',
+    features: [
+      {
+        icon: 'i-lucide-glass-water',
+        label: 'Define maximum conversations per inbox',
+      },
+      {
+        icon: 'i-lucide-circle-minus',
+        label: 'Create exceptions based on labels and time',
+      },
+      {
+        icon: 'i-lucide-users-round',
+        label: 'Add agents to a policy - one policy per agent',
+      },
+    ],
+  },
+];
+</script>
+
+<template>
+  <Story
+    title="Components/AgentManagementPolicy/AssignmentCard"
+    :layout="{ type: 'grid', width: '1000px' }"
+  >
+    <Variant title="Assignment Card">
+      <div class="px-4 py-4 bg-n-background flex gap-6 justify-between">
+        <AssignmentCard
+          v-for="(item, index) in agentAssignments"
+          :key="index"
+          :title="item.title"
+          :description="item.description"
+          :features="item.features"
+        />
+      </div>
+    </Variant>
+  </Story>
+</template>
diff --git a/app/javascript/dashboard/components-next/AgentManagementPolicy/AssignmentCard/AssignmentCard.vue b/app/javascript/dashboard/components-next/AgentManagementPolicy/AssignmentCard/AssignmentCard.vue
new file mode 100644
index 000000000..c75ac09fb
--- /dev/null
+++ b/app/javascript/dashboard/components-next/AgentManagementPolicy/AssignmentCard/AssignmentCard.vue
@@ -0,0 +1,46 @@
+<script setup>
+import Icon from 'dashboard/components-next/icon/Icon.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+import CardLayout from 'dashboard/components-next/CardLayout.vue';
+
+defineProps({
+  title: { type: String, default: '' },
+  description: { type: String, default: '' },
+  features: { type: Array, default: () => [] },
+});
+
+const emit = defineEmits(['click']);
+
+const handleClick = () => {
+  emit('click');
+};
+</script>
+
+<template>
+  <CardLayout class="[&>div]:px-5 cursor-pointer" @click="handleClick">
+    <div class="flex flex-col items-start gap-2">
+      <div class="flex justify-between w-full items-center">
+        <h3 class="text-n-slate-12 text-base font-medium">{{ title }}</h3>
+        <Button
+          xs
+          slate
+          ghost
+          icon="i-lucide-chevron-right"
+          @click.stop="handleClick"
+        />
+      </div>
+      <p class="text-n-slate-11 text-sm mb-0">{{ description }}</p>
+    </div>
+
+    <ul class="flex flex-col items-start gap-3 mt-3">
+      <li
+        v-for="feature in features"
+        :key="feature.id"
+        class="flex items-center gap-3"
+      >
+        <Icon :icon="feature.icon" class="text-n-slate-11 size-4" />
+        {{ feature.label }}
+      </li>
+    </ul>
+  </CardLayout>
+</template>