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

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

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

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

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

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

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