change fast request section RAD-2

resources/js/Client/Pages/Dashboard/Dashboard.vue

@@ -1,14 +1,22 @@
 <script setup>
-import ClientLayout from '../../layouts/ClientLayout.vue'
-import ActivitiesWidget from '../../components/dashboard/ActivitiesWidget.vue'
-import ActivitiesChart from '../../components/dashboard/ActivitiesChart.vue'
-import TableGeneric from '../../components/ui/TableGeneric.vue'
-import UiButton from '../../components/ui/UiButton.vue'
-import EyeSvg from '../../components/svg/eye.svg'
-import UiCard from '../../components/ui/UiCard.vue'
-import RequestCard from '../../components/dashboard/RequestCard.vue'
-import { ref } from 'vue'
-import { Link } from '@inertiajs/inertia-vue3'
+import ClientLayout from '../../layouts/ClientLayout.vue';
+import ActivitiesWidget from '../../components/dashboard/ActivitiesWidget.vue';
+import ActivitiesChart from '../../components/dashboard/ActivitiesChart.vue';
+import TableGeneric from '../../components/ui/TableGeneric.vue';
+import UiButton from '../../components/ui/UiButton.vue';
+import EyeSvg from '../../components/svg/eye.svg';
+import UiCard from '../../components/ui/UiCard.vue';
+import RequestCard from '../../components/dashboard/RequestCard.vue';
+import { ref } from 'vue';
+import { Link } from '@inertiajs/inertia-vue3';
+import FastRequestModal from '../../components/dashboard/FastRequestModal.vue';
+
+const fastRequestModalVisible = ref(false);
+
+const openFastRequestModal = () => {
+    fastRequestModalVisible.value = true;
+}
+
 defineProps({
     user: {
         type: Object,
@@ -105,7 +113,7 @@ const columns = ref([
         <UiCard title="ثبت آنی درخواست جدید" variant="default" class="mt-4">
             <p class="w-full flex items-center justify-start font-[400] text-[11px]">فقط چند قدم ساده برای ثبت درخواست کافیه.</p>
             <div class="w-full h-[179px] grid grid-cols-5 gap-3 justify-start pt-[10px]">
-                <RequestCard title="CT Scan" icon="ct-scan" severity="primary"/>
+                <RequestCard title="CT Scan" icon="ct-scan" severity="primary" @click="openFastRequestModal"/>
                 <RequestCard title="MRI" icon="mri" severity="primary"/>
                 <RequestCard title="سونوگرافی" icon="sonography" severity="primary"/>
                 <RequestCard title="اکوکاردیوگرافی" icon="echo" severity="primary"/>
@@ -137,6 +145,6 @@ const columns = ref([
         <UiCard title="خلاصه عملکرد شما" variant="default" class="mt-4">
             <ActivitiesChart />
         </UiCard>
-
+        <fast-request-modal v-model:visible="fastRequestModalVisible"></fast-request-modal>
     </ClientLayout>
 </template>

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>
     

resources/js/Client/store/FastRequest.js

@@ -0,0 +1,9 @@
+import { defineStore } from 'pinia'
+export const useFastRequestStore = defineStore('FastRequestStore', {
+    state: () => ({
+
+    }),
+    actions: {
+
+    }
+})