finish merge and finish parkir desain belum ijin uts dulu HAHAHA

views/dstipro/beranda/UserProfileHeader.vue

@@ -183,6 +183,12 @@ const ulangTahunBerikutnya = computed(() => {
 const goToParking = () => {
   window.open('https://parkir.ui.ac.id/apps/site/index', '_blank')
 }
+
+const dialog = ref(false)
+
+function openDialog() {
+  dialog.value = true
+}
 </script>
 
 <template>
@@ -249,7 +255,7 @@ const goToParking = () => {
               <VBtn
                 variant="tonal"
                 :color="daysLeft > 0 ? 'primary' : 'error'"
-                @click="goToParking"
+                @click="openDialog"
               >
                 {{ parkirStatus }}
                 <VTooltip
@@ -287,8 +293,65 @@ const goToParking = () => {
                   </div>
                 </VTooltip>
               </VBtn>
-            </div>
 
+              <!-- Dialog popup -->
+              <VDialog
+                v-model="dialog"
+                width="400"
+              >
+                <template #default>
+                  <VCard>
+                    <VCardTitle>
+                      Informasi Parkir
+                    </VCardTitle>
+                    <VCardText>
+                      <div class="d-flex align-center gap-x-2 mb-2">
+                        <VIcon
+                          size="20"
+                          icon="ri-calendar-line"
+                        />
+                        <span>Mulai: {{ parkirItems.date_start_service }}</span>
+                      </div>
+                      <div class="d-flex align-center gap-x-2 mb-2">
+                        <VIcon
+                          size="20"
+                          icon="ri-calendar-check-line"
+                        />
+                        <span>Berakhir: {{ parkirItems.date_end_service }}</span>
+                      </div>
+                      <div class="d-flex align-center gap-x-2 mb-4">
+                        <VIcon
+                          size="20"
+                          icon="ri-time-line"
+                        />
+                        <span>{{ daysLeft }} hari tersisa</span>
+                      </div>
+                      <VProgressLinear
+                        :model-value="progress"
+                        color="primary"
+                        height="6"
+                        rounded
+                      />
+                    </VCardText>
+                    <VCardActions>
+                      <VSpacer />
+                      <VBtn
+                        color="primary"
+                        @click="goToParking"
+                      >
+                        Lihat Detail
+                      </VBtn>
+                      <VBtn
+                        text
+                        @click="dialog = false"
+                      >
+                        Tutup
+                      </VBtn>
+                    </VCardActions>
+                  </VCard>
+                </template>
+              </VDialog>
+            </div>
             <div
               v-if="!isBirthday"
               class="d-flex align-center gap-x-2"