change fast request section RAD-2

resources/js/Client/components/dashboard/RequestCard.vue

@@ -16,8 +16,13 @@
         icon: {
             type: String,
             required: true
-        }
-    })
+        },
+        selectable: {
+            type: Boolean,
+            default: false
+        },
+    });
+
     const iconComponent = computed(() => {
         switch (props.icon) {
             case 'ct-scan':
@@ -33,16 +38,32 @@
             default:
                 return null
         }
-    })
-    </script>
+    });
+
+    const emit = defineEmits(['update:modelValue']);
+
+    const toggleSelect = () => {
+        if (!props.selectable) return
+        emit('update:modelValue', !props.modelValue)
+    };
+
+
+</script>
     
-    <template>
-        <div class="w-full h-[169px] p-[12px] flex flex-col gap-1 items-center justify-center border-[1px] border-[#DEE3EB] rounded-[12px]">
-            <component :is="iconComponent" class="w-[87px] h-[80px]" />
-            <div class="w-full flex flex-col gap-1">
-                <p class="w-full flex items-center justify-center font-[700] text-[14px]">{{ title }}</p>
-                <ui-button label="ثبت درخواست" severity="secondary" size="small" full-width="true"/>
-            </div>
+<template>
+    <div  @click="toggleSelect"
+    :class="[
+    'w-full p-[12px] flex flex-col gap-1 items-center justify-center border rounded-[12px] transition-all',
+    props.selectable && 'cursor-pointer',
+    props.modelValue
+      ? 'border-[#576989]'
+      : 'border-[#DEE3EB]'
+      ]">
+        <component :is="iconComponent" class="w-[87px] h-[80px]" />
+        <div class="w-full flex flex-col gap-1">
+            <p class="w-full flex items-center justify-center font-[700] text-[14px]">{{ title }}</p>
+            <ui-button v-if="!selectable" label="ثبت درخواست" severity="secondary" size="small" full-width="true"/>
         </div>
-    </template>
+    </div>
+</template>