From f602ba68e3bd304814206870e2934025db49e4cc Mon Sep 17 00:00:00 2001
From: Armin Barari <armin.barariii@gmail.com>
Date: Sun, 4 Jan 2026 17:45:47 +0330
Subject: [PATCH] change fast request section RAD-2

---
 .../components/dashboard/FastRequestModal.vue | 105 ++++++++++++++++++
 1 file changed, 105 insertions(+)
 create mode 100644 resources/js/Client/components/dashboard/FastRequestModal.vue

diff --git a/resources/js/Client/components/dashboard/FastRequestModal.vue b/resources/js/Client/components/dashboard/FastRequestModal.vue
new file mode 100644
index 0000000..4694e82
--- /dev/null
+++ b/resources/js/Client/components/dashboard/FastRequestModal.vue
@@ -0,0 +1,105 @@
+<script setup>
+    import { convertEnglishToPersian } from '../../utils/numberUtils';
+    import UiButton from '../../components/ui/UiButton.vue';
+    import CtScanIcon from '../../components/svg/ctScanIcon.svg';
+    import MriIcon from '../../components/svg/mriIcon.svg';
+    import SonographyIcon from '../../components/svg/sonographyIcon.svg';
+    import ECOIcon from '../../components/svg/ecoIcon.svg';
+    import RadiologyIcon from '../../components/svg/radiologyIcon.svg';
+    import { computed } from 'vue';
+    import Dialog from 'primevue/dialog';
+    import { ref } from 'vue';
+    import ProgressBar from 'primevue/progressbar';
+    import RequestCard from './RequestCard.vue';
+
+    const value1 = ref(50);
+    const value2 = ref(0);
+    const value3 = ref(0);
+    const value4 = ref(0);
+
+    const props = defineProps({
+        title: {
+            type: String,
+            required: true
+        },
+        icon: {
+            type: String,
+            required: true
+        }
+    });
+
+
+</script>
+    
+<template>
+    <Dialog :modal="true" :closable="true" :dismissableMask="true" :maximizable="false" :style="{ width: '688px' , minHeight: '376px' }" :pt="{header : '!bg-client-primaryBlue'}">
+        <template #header>
+            <div class="w-full flex items-center justify-start">
+                <h2 class="text-[14px] font-[700] text-[#576989]">ثبت آنی درخواست</h2>
+            </div>
+        </template>
+        <div class="w-full h-[56px] flex items-center justify-between border-b border-[#EBEBEB] pb-3">
+            <div class="w-auto h-[40px] grid grid-cols-1 items-center justify-center gap-1">
+                <div class="w-full h-[20px] flex items-center justify-center ">
+                    <span class="w-[20px] h-[20px] bg-[#576989] rounded-full text-white flex items-center justify-center text-[10px] font-[600]">1</span>
+                </div>
+                <span class="text-[10px] font-[600] text-[#7188AD]">نوع درخواست</span>
+            </div>
+            <ProgressBar :value="value1" :showValue="false" mode="determinate"></ProgressBar>
+            <div class="w-auto h-[40px] grid grid-cols-1 items-center justify-center gap-1">
+                <div class="w-full h-[20px] flex items-center justify-center ">
+                    <span class="w-[20px] h-[20px] bg-[#576989] rounded-full text-white flex items-center justify-center text-[10px] font-[600]">2</span>
+                </div>
+                <span class="text-[10px] font-[600] text-[#7188AD]">انتخاب کیس</span>
+            </div>
+            <ProgressBar :value="value2" :showValue="false" mode="determinate"></ProgressBar>
+            <div class="w-auto h-[40px] grid grid-cols-1 items-center justify-center gap-1">
+                <div class="w-full h-[20px] flex items-center justify-center ">
+                    <span class="w-[20px] h-[20px] bg-[#576989] rounded-full text-white flex items-center justify-center text-[10px] font-[600]">3</span>
+                </div>
+                <span class="text-[10px] font-[600] text-[#7188AD]">جزئیات درخواست</span>
+            </div>
+                <ProgressBar :value="value3" :showValue="false" mode="determinate"></ProgressBar>
+            <div class="w-auto h-[40px] grid grid-cols-1 items-center justify-center gap-1">
+                <div class="w-full h-[20px] flex items-center justify-center ">
+                    <span class="w-[20px] h-[20px] bg-[#576989] rounded-full text-white flex items-center justify-center text-[10px] font-[600]">4</span>
+                </div>
+                <span class="text-[10px] font-[600] text-[#7188AD]">انتخاب پزشک</span>
+            </div>
+                <ProgressBar :value="value4" :showValue="false" mode="determinate"></ProgressBar>
+            <div class="w-auto h-[40px] grid grid-cols-1 items-center justify-center gap-1">
+                <div class="w-full h-[20px] flex items-center justify-center ">
+                    <span class="w-[20px] h-[20px] bg-[#576989] rounded-full text-white flex items-center justify-center text-[10px] font-[600]">5</span>
+                </div>
+                <span class="text-[10px] font-[600] text-[#7188AD]">مرور نهایی</span>
+            </div>
+        </div>
+        <div class="w-full space-y-3 py-6">
+            <p class="h-[17px] flex items-center justify-start text-[11px] font-[600] text-[#3E4C63]">نوع درخواست خود را مشخص کنید</p>
+            <div class="w-full h-[133px] grid grid-cols-5 gap-3 justify-start">
+                <RequestCard  v-model="selectedCt" title="CT Scan" icon="ct-scan" severity="primary" :selectable="true"/>
+                <RequestCard  v-model="selectedCt" title="MRI" icon="mri" severity="primary" :selectable="true"/>
+                <RequestCard  v-model="selectedCt" title="سونوگرافی" icon="sonography" severity="primary" :selectable="true"/>
+                <RequestCard  v-model="selectedCt" title="اکوکاردیوگرافی" icon="echo" severity="primary" :selectable="true"/>
+                <RequestCard  v-model="selectedCt" title="رادیولوژی" icon="radiology" severity="primary" :selectable="true"/>
+            </div>
+        </div>
+        <div class="w-full pt-3 flex items-center justify-end border-t border-[#EBEBEB]">
+            <ui-button label="تایید و مرحله بعد" severity="success" size="small" />
+        </div>
+
+    </Dialog>
+</template>
+
+<style scoped>
+    :deep(.p-progressbar) {
+        min-width: 60px !important;
+        height: 4px;
+    }
+    
+    :deep(.p-progressbar-value) {
+        background: #576989 !important;
+    }
+</style>
+    
+    
\ No newline at end of file