From d23a0550e1155b4e469bb8f94bb2e595cd90da0f Mon Sep 17 00:00:00 2001
From: adibwp <sas.adibwp@gmail.com>
Date: Thu, 29 Aug 2024 19:48:49 +0700
Subject: [PATCH] add harcode dialog

---
 status-patient/components/content.vue        |  34 +++-
 status-patient/components/order-dialog.vue   | 196 +++++++++++++++++++
 status-patient/components/print-dialog.vue   |  93 +++++++++
 status-patient/components/process-dialog.vue |  41 ++++
 status-patient/components/sample-dialog.vue  | 100 ++++++++++
 status-patient/components/sp_dialog.vue      |  91 +++++----
 status-patient/components/valid-dialog.vue   |  56 ++++++
 status-patient/components/verif-dialog.vue   |  56 ++++++
 status-patient/modules/store.js              |  32 +++
 9 files changed, 664 insertions(+), 35 deletions(-)
 create mode 100644 status-patient/components/order-dialog.vue
 create mode 100644 status-patient/components/print-dialog.vue
 create mode 100644 status-patient/components/process-dialog.vue
 create mode 100644 status-patient/components/sample-dialog.vue
 create mode 100644 status-patient/components/valid-dialog.vue
 create mode 100644 status-patient/components/verif-dialog.vue

diff --git a/status-patient/components/content.vue b/status-patient/components/content.vue
index 8083b78..64e3593 100644
--- a/status-patient/components/content.vue
+++ b/status-patient/components/content.vue
@@ -56,37 +56,42 @@
                         <p 
                             :class="['font-weight-medium rounded-lg pointer', item.details_order[0].status === 'Y' ? 'bg-success' : 'bg-grey-lighten-2']"
                             style=" width: 80%; height: 60%; align-content: center;"
-                            @click="dialog=true"
+                            @click="openMultiDialog(true, 'order')"
                         >{{ item.details_order[0].group_name }}</p>
                     </td>
                     <td align="center" class="pa-2">
                         <p 
                             :class="['font-weight-medium rounded-lg pointer', item.details_sampling[0].status === 'Y' ? 'bg-success' : 'bg-grey-lighten-2']"
                             style=" width: 80%; height: 60%; align-content: center;"
+                            @click="openMultiDialog(true, 'sample')"
                         >{{ item.details_sampling[0].group_name }}</p>
                     </td>
                     <td align="center" class="pa-2">
                         <p 
                             :class="['font-weight-medium rounded-lg pointer', item.details_process[0].status === 'Y' ? 'bg-success' : 'bg-grey-lighten-2']"
                             style=" width: 80%; height: 60%; align-content: center;"
+                            @click="openMultiDialog(true, 'process')"
                         >{{ item.details_process[0].group_name }}</p>
                     </td>
                     <td align="center" class="pa-2">
                         <p 
                             :class="['font-weight-medium rounded-lg pointer', item.details_result_verification[0].status === 'Y' ? 'bg-success' : 'bg-grey-lighten-2']"
                             style=" width: 80%; height: 60%; align-content: center;"
+                            @click="openMultiDialog(true, 'verif')"
                         >{{ item.details_result_verification[0].group_name }}</p>
                     </td>
                     <td align="center" class="pa-2">
                         <p 
                             :class="['font-weight-medium rounded-lg pointer', item.details_result_validation[0].status === 'Y' ? 'bg-success' : 'bg-grey-lighten-2']"
                             style=" width: 80%; height: 60%; align-content: center;"
+                            @click="openMultiDialog(true, 'valid')"
                         >{{ item.details_result_validation[0].group_name }}</p>
                     </td>
                     <td align="center" class="pa-2">
                         <p 
                             :class="['font-weight-medium rounded-lg pointer', item.details_print[0].status === 'Y' ? 'bg-success' : 'bg-grey-lighten-2']"
                             style=" width: 80%; height: 60%; align-content: center;"
+                            @click="print_dialog=true"
                         >{{ item.details_print[0].group_name }}</p>
                     </td>
                 </tr>
@@ -94,15 +99,18 @@
         </v-data-table>
         <v-pagination :length="total_page"></v-pagination>
         <sp-dialog></sp-dialog>
+        <print-dialog></print-dialog>
     </v-container>
 </template>
 
 <script>
+    import PrintDialog from './print-dialog.vue';
     import Sp_dialog from './sp_dialog.vue';
     export default {
         name: "contentcomp",
         components: {
-            "sp-dialog": Sp_dialog
+            "sp-dialog": Sp_dialog,
+            "print-dialog": PrintDialog,
         },
         mounted() {},
         data() {
@@ -203,6 +211,28 @@
                 set(bool) {
                     this.$store.commit("setDialog", bool);
                 }
+            },
+            multi_dialog: {
+                get() {
+                    return this.$store.state.stored.multi_dialog;
+                },
+                set(bool, nama) {
+                    this.$store.commit("setMultiDialog", bool, nama)
+                }
+            },
+            print_dialog: {
+                get() {
+                    return this.$store.state.stored.print_dialog;
+                },
+                set(bool) {
+                    this.$store.commit("setPrintDialog", bool);
+                }
+            }
+        },
+        methods: {
+            openMultiDialog(bool, nama) {
+                this.multi_dialog.open = bool;
+                this.multi_dialog.name = nama;
             }
         },
     }
diff --git a/status-patient/components/order-dialog.vue b/status-patient/components/order-dialog.vue
new file mode 100644
index 0000000..65fd77a
--- /dev/null
+++ b/status-patient/components/order-dialog.vue
@@ -0,0 +1,196 @@
+<template>
+    <v-timeline side="end" align="start">
+        <v-timeline-item
+                dot-color="white"
+                :fill-dot="true"
+                icon="mdi-check-circle"
+                icon-color="primary"
+                size="small"
+            >
+                <div style="min-width: 600px; max-width: 750px;">
+                    <v-row>
+                        <v-col cols="7" align="start">
+                            <h4 class="font-weight-medium">Order diterima oleh ADMIN</h4>
+                        </v-col>
+                        <v-col cols="5" align="end">
+                            <h4 class="font-weight-medium">21-08-2024 16:53</h4>
+                        </v-col>
+                    </v-row>
+                    <v-row no-gutters class="ml-2 mb-4 mt-2">
+                        <v-col cols="3" align="start">
+                            <h5 class="font-weight-medium text-grey">Kel. Pelanggan</h5>
+                        </v-col>
+                        <v-col cols="9" align="end">
+                            <h5 class="font-weight-medium text-grey">PASIEN MANDIRI/PASIEN UMUM 2024</h5>
+                        </v-col>
+                        <v-col cols="3" align="start">
+                            <h5 class="font-weight-medium text-grey">Pengirim</h5>
+                        </v-col>
+                        <v-col cols="9" align="end">
+                            <h5 class="font-weight-medium text-grey">dr. A. B. WARDOYO, Sp. PD.</h5>
+                        </v-col>
+                        <v-col cols="3" align="start">
+                            <h5 class="font-weight-medium text-grey">Alamat</h5>
+                        </v-col>
+                        <v-col cols="9" align="end">
+                            <h5 class="font-weight-medium text-grey">JL. MH. THAMRIN NO. 1 BINTARO JAYA</h5>
+                        </v-col>
+                        <v-col cols="3" align="start">
+                            <h5 class="font-weight-medium text-grey">Catatan</h5>
+                        </v-col>
+                        <v-col cols="9" align="end">
+                            <h5 class="font-weight-medium text-grey">-</h5>
+                        </v-col>
+                    </v-row>
+                    
+                    <div class="bg-secondary-lighten rounded-lg pa-2 mb-2">
+                        <v-row>
+                            <v-col cols="4">
+                                <h4>Janji Hasil</h4>
+                            </v-col>
+                            <v-col cols="8" align="end">
+                                <p class="font-weight-regular rounded-lg bg-grey-lighten-2 px-2 mr-2" style="display: inline-block; font-size: 12px;">21-08-2024 16:53</p>
+                                <p class="font-weight-regular rounded-lg bg-grey-lighten-2 px-2" style="display: inline-block; font-size: 12px;">21-08-2024 20:53</p>
+                            </v-col>
+                        </v-row>
+                    </div>
+                    <v-data-table
+                        :items="orderdata"
+                        :headers="headers"
+                        hide-default-footer
+                    >
+                        <template v-slot:headers="{ columns }">
+                            <tr>
+                                <template v-for="column in columns" :key="column.key">
+                                    <td :class="column.class" :style="{ width: column.width, textAlign: column.align }">
+                                        <span>{{ column.title }}</span>
+                                    </td>
+                                </template>
+                            </tr>
+                        </template> 
+                        <template v-slot:item="{ item }">
+                            <tr :class="[item.pemeriksaan === 'TOTAL' ? 'bg-primary-lighten' : '']">
+                                <td align="start">
+                                    <p class="font-weight-medium">{{ item.pemeriksaan }}</p>
+                                </td>
+                                <td align="center">
+                                    <p class="font-weight-medium">{{ item.bruto }}</p>
+                                </td>
+                                <td align="center">
+                                    <p class="font-weight-medium">{{ item.diskon }}</p>
+                                </td>
+                                <td align="center">
+                                    <p class="font-weight-medium">{{ item.total }}</p>
+                                </td>
+                            </tr>
+                        </template>
+                    </v-data-table>
+                    <v-row no-gutters class="ml-2 mb-4 mt-2">
+                        <v-col cols="3" align="start">
+                            <h5 class="font-weight-medium text-grey">Alamat Sendiri</h5>
+                        </v-col>
+                        <v-col cols="9" align="end">
+                            <h5 class="font-weight-medium text-grey">PASIEN MANDIRI/PASIEN UMUM 2024</h5>
+                        </v-col>
+                        <v-col cols="3" align="start">
+                            <h5 class="font-weight-medium text-grey">Alamat Pasien</h5>
+                        </v-col>
+                        <v-col cols="9" align="end">
+                            <h5 class="font-weight-medium text-grey">HRC 05/TELKOM MOJOKERTO Sawunggalung, Wonokromo, Surabaya</h5>
+                        </v-col>
+                    </v-row>
+                </div>
+        </v-timeline-item>
+        <v-timeline-item
+            dot-color="white"
+            :fill-dot="true"
+            icon="mdi-check-circle"
+            icon-color="primary"
+            size="small"   
+        >
+            <div style="min-width: 600px; max-width: 750px;">
+                <v-row>
+                    <v-col cols="7" align="start">
+                        <h4 class="font-weight-medium">Pembayaran diterima oleh ADMIN</h4>
+                    </v-col>
+                    <v-col cols="5" align="end">
+                        <h4 class="font-weight-medium">21-08-2024 21:53</h4>
+                    </v-col>
+                </v-row>
+                <div class="bg-secondary-lighten rounded-lg pa-2 mt-2">
+                    <v-row>
+                        <v-col cols="4">
+                            <h4>Janji Hasil</h4>
+                        </v-col>
+                        <v-col cols="8" align="end">
+                            <h4>176.000</h4>
+                        </v-col>
+                    </v-row>
+                </div>
+                <div class="bg-primary-lighten rounded-lg pa-2 mt-2">
+                    <v-row>
+                        <v-col cols="4">
+                            <h4>TOTAL</h4>
+                        </v-col>
+                        <v-col cols="8" align="end">
+                            <h4>176.000</h4>
+                        </v-col>
+                    </v-row>
+                </div>
+            </div>
+        </v-timeline-item>
+    </v-timeline>
+</template>
+
+<script>
+    export default {
+        name: "orderdialog",
+        components: {},
+        mounted() {},
+        data() {
+            return {
+                headers: [
+                    {
+                        title: 'PEMERIKSAAN',
+                        align: "start",
+                        sortable: false,
+                        key: "pemeriksaan",
+                        width: "40%",
+                        class: "font-weight-bold",
+                    },
+                    {
+                        title: 'BRUTO',
+                        align: "center",
+                        sortable: false,
+                        key: "bruto",
+                        width: "20%",
+                        class: "font-weight-bold",
+                    },
+                    {
+                        title: 'DISKON',
+                        align: "center",
+                        sortable: false,
+                        key: "diskon",
+                        width: "20%",
+                        class: "font-weight-bold",
+                    },
+                    {
+                        title: 'TOTAL',
+                        align: "center",
+                        sortable: false,
+                        key: "total",
+                        width: "20%",
+                        class: "font-weight-bold",
+                    },
+                ]
+            };
+        },
+        computed: {
+            orderdata: {
+                get() {
+                    return this.$store.state.stored.data_order;
+                }
+            }
+        },
+    }
+</script>
\ No newline at end of file
diff --git a/status-patient/components/print-dialog.vue b/status-patient/components/print-dialog.vue
new file mode 100644
index 0000000..cbdc7df
--- /dev/null
+++ b/status-patient/components/print-dialog.vue
@@ -0,0 +1,93 @@
+<template>
+    <div>
+        <v-dialog v-model="print_dialog" width="auto">
+            <v-card min-width="600" max-width="750" class="rounded-lg">
+                <v-card-item class="bg-primary mb-4">
+                    <v-card-title>TIMELINE</v-card-title>
+                </v-card-item>
+                <v-card-text>
+                    <div style="min-width: 600px; max-width: 750px;">
+                        <v-row no-gutters class="ml-2 mb-4 mt-2">
+                            <v-col cols="3" align="start">
+                                <h4 class="font-weight-medium">No Lab</h4>
+                            </v-col>
+                            <v-col cols="9" align="end">
+                                <h4 class="font-weight-medium text-grey">05600028LAB</h4>
+                            </v-col>
+                            <v-col cols="3" align="start">
+                                <h4 class="font-weight-medium">Nama Pasien</h4>
+                            </v-col>
+                            <v-col cols="9" align="end">
+                                <h4 class="font-weight-medium text-grey">Ny IMELDA JANICE</h4>
+                            </v-col>
+                        </v-row>
+                        <div class="bg-secondary-lighten rounded-lg pa-2 my-2">
+                            <v-row>
+                                <v-col cols="12">
+                                    <h4>SERAH TERIMA INTERNAL</h4>
+                                </v-col>
+                            </v-row>
+                        </div>
+                        <v-row no-gutters class="ml-2 mb-4 mt-2 pa-2">
+                            <v-col cols="3" align="start">
+                                <h5 class="font-weight-medium">Group</h5>
+                            </v-col>
+                            <v-col cols="9" align="end">
+                                <h5>
+                                    <span class="font-weight-medium text-grey">LAB</span>
+                                    <span class="font-weight-medium text-primary"> PICK UP</span>
+                                </h5>
+                            </v-col>
+                            <v-col cols="3" align="start">
+                                <h5 class="font-weight-medium">Janji Hasil</h5>
+                            </v-col>
+                            <v-col cols="9" align="end">
+                                <h5 class="font-weight-medium text-grey">ADMIN 21-08-2024 22:13</h5>
+                            </v-col>
+                            <v-col cols="3" align="start">
+                                <h5 class="font-weight-medium">Diserahkan oleh</h5>
+                            </v-col>
+                            <v-col cols="9" align="end">
+                                <h5 class="font-weight-medium text-grey">ADMIN 21-08-2024 22:35</h5>
+                            </v-col>
+                            <v-col cols="3" align="start">
+                                <h5 class="font-weight-medium">Diterima oleh</h5>
+                            </v-col>
+                            <v-col cols="9" align="end">
+                                <h5 class="font-weight-medium text-grey">ADMIN 21-08-2024 22:53</h5>
+                            </v-col>
+                        </v-row>
+                    </div>
+                </v-card-text>
+                <template v-slot:actions>
+                    <v-btn
+                        class="ms-auto text-primary font-weight-medium"
+                        text="TUTUP"
+                        @click="print_dialog=false"
+                    ></v-btn>
+                </template>
+            </v-card>
+        </v-dialog>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "printdialog",
+        components: {},
+        mounted() {},
+        data() {
+            return {};
+        },
+        computed: {
+            print_dialog: {
+                get() {
+                    return this.$store.state.stored.print_dialog;
+                },
+                set(bool) {
+                    this.$store.commit("setPrintDialog", bool);
+                }
+            }
+        },
+    }
+</script>
\ No newline at end of file
diff --git a/status-patient/components/process-dialog.vue b/status-patient/components/process-dialog.vue
new file mode 100644
index 0000000..be0da0d
--- /dev/null
+++ b/status-patient/components/process-dialog.vue
@@ -0,0 +1,41 @@
+<template>
+    <v-timeline side="end" align="start">
+        <v-timeline-item
+            dot-color="white"
+            :fill-dot="true"
+            icon="mdi-check-circle"
+            icon-color="primary"
+            size="small"
+        >
+            <div style="min-width: 600px; max-width: 750px;">
+                <v-row>
+                    <v-col cols="12" align="end">
+                        <h4 class="font-weight-medium">21-08-2024 16:53</h4>
+                    </v-col>
+                </v-row>
+                <div class="bg-success-lighten rounded-lg pa-2 my-2">
+                    <v-row>
+                        <v-col cols="4">
+                            <h4>Serum Kuning</h4>
+                        </v-col>
+                        <v-col cols="8" align="end">
+                            <p class="font-weight-regular rounded-lg bg-grey-lighten-2 px-2" style="display: inline-block; font-size: 12px;">05600027LSK</p>
+                        </v-col>
+                    </v-row>
+                </div>
+            </div>
+        </v-timeline-item>
+    </v-timeline>
+</template>
+
+<script>
+    export default {
+        name: "processdialog",
+        components: {},
+        mounted() {},
+        data() {
+            return {};
+        },
+        computed: {},
+    }
+</script>
\ No newline at end of file
diff --git a/status-patient/components/sample-dialog.vue b/status-patient/components/sample-dialog.vue
new file mode 100644
index 0000000..2c8e0c0
--- /dev/null
+++ b/status-patient/components/sample-dialog.vue
@@ -0,0 +1,100 @@
+<template>
+    <v-timeline side="end" align="start">
+        <v-timeline-item
+            dot-color="white"
+            :fill-dot="true"
+            icon="mdi-check-circle"
+            icon-color="primary"
+            size="small"
+        >
+            <div style="min-width: 600px; max-width: 750px;">
+                <v-row>
+                    <v-col cols="7" align="start">
+                        <h4 class="font-weight-medium">Pembuatan barcode oleh system</h4>
+                    </v-col>
+                    <v-col cols="5" align="end">
+                        <h4 class="font-weight-medium">21-08-2024 16:53</h4>
+                    </v-col>
+                </v-row>
+                <div class="bg-primary-lighten rounded-lg pa-2 my-2">
+                    <v-row>
+                        <v-col cols="4">
+                            <h4>Serum Kuning</h4>
+                        </v-col>
+                        <v-col cols="8" align="end">
+                            <p class="font-weight-regular rounded-lg bg-grey-lighten-2 px-2" style="display: inline-block; font-size: 12px;">05600027LSK</p>
+                        </v-col>
+                    </v-row>
+                </div>
+            </div>
+        </v-timeline-item>
+        <v-timeline-item
+            dot-color="white"
+            :fill-dot="true"
+            icon="mdi-check-circle"
+            icon-color="primary"
+            size="small"
+        >
+            <div style="min-width: 600px; max-width: 750px;">
+                <v-row>
+                    <v-col cols="7" align="start">
+                        <h4 class="font-weight-medium">Proses oleh admin</h4>
+                    </v-col>
+                    <v-col cols="5" align="end">
+                        <h4 class="font-weight-medium">21-08-2024 20:53</h4>
+                    </v-col>
+                </v-row>
+                <div class="bg-secondary-lighten rounded-lg pa-2 my-2">
+                    <v-row>
+                        <v-col cols="4">
+                            <h4>Serum Kuning</h4>
+                        </v-col>
+                        <v-col cols="8" align="end">
+                            <p class="font-weight-regular rounded-lg bg-grey-lighten-2 px-2" style="display: inline-block; font-size: 12px;">05600027LSK</p>
+                        </v-col>
+                    </v-row>
+                </div>
+            </div>
+        </v-timeline-item>
+        <v-timeline-item
+            dot-color="white"
+            :fill-dot="true"
+            icon="mdi-check-circle"
+            icon-color="primary"
+            size="small"
+        >
+            <div style="min-width: 600px; max-width: 750px;">
+                <v-row>
+                    <v-col cols="7" align="start">
+                        <h4 class="font-weight-medium">Pengambilan sample</h4>
+                    </v-col>
+                    <v-col cols="5" align="end">
+                        <h4 class="font-weight-medium">21-08-2024 21:53</h4>
+                    </v-col>
+                </v-row>
+                <div class="bg-success-lighten rounded-lg pa-2 my-2">
+                    <v-row>
+                        <v-col cols="4">
+                            <h4>Serum Kuning</h4>
+                        </v-col>
+                        <v-col cols="8" align="end">
+                            <p class="font-weight-regular rounded-lg bg-grey-lighten-2 px-2" style="display: inline-block; font-size: 12px;">05600027LSK</p>
+                        </v-col>
+                    </v-row>
+                </div>
+            </div>
+        </v-timeline-item>
+    </v-timeline>
+</template>
+
+<script>
+    export default {
+        name: "samplecolldialog",
+        components: {},
+        mounted() {},
+        data() {
+            return {};
+        },
+        computed: {},
+    }
+</script>
\ No newline at end of file
diff --git a/status-patient/components/sp_dialog.vue b/status-patient/components/sp_dialog.vue
index 75442bd..c76b883 100644
--- a/status-patient/components/sp_dialog.vue
+++ b/status-patient/components/sp_dialog.vue
@@ -1,9 +1,9 @@
 <template>
     <div>
-        <v-dialog v-model="dialog" width="auto">
+        <v-dialog v-model="multi_dialog.open" width="auto">
             <v-card min-width="600" max-width="750" class="rounded-lg">
-                <v-card-item class="bg-primary mb-5">
-                    <v-card-title>TIMELINE</v-card-title>
+                <v-card-item class="bg-primary mb-8">
+                    <v-card-title>{{ titleDialog(multi_dialog.name) }}</v-card-title>
                 </v-card-item>
                 <v-card-text>
                     <v-row class="ga-4 mb-5">
@@ -13,26 +13,27 @@
                             <h4 class="font-weight-bold">Ny IMELDA JANICE</h4>
                         </div>
                     </v-row>
-                    
-                    <v-timeline side="end" style="align-items: start; align-content: start">
-                        <v-timeline-item
-                                v-for="item in items"
-                                :key="item.id"
-                                dot-color="white"
-                                fill-dot="false"
-                                :icon="item.icon"
-                                icon-color="primary"
-                                size="small"
-                            >
-                            
-                        </v-timeline-item>
-                    </v-timeline>
+                    <div v-if="multi_dialog.name === 'order'">
+                        <status-order-dialog></status-order-dialog>
+                    </div>
+                    <div v-else-if="multi_dialog.name === 'sample'">
+                        <sampl-collec-dialog></sampl-collec-dialog>
+                    </div>
+                    <div v-else-if="multi_dialog.name === 'process'">
+                        <process-dialog></process-dialog>
+                    </div>
+                    <div v-else-if="multi_dialog.name === 'verif'">
+                        <verification-dialog></verification-dialog>
+                    </div>
+                    <div v-else-if="multi_dialog.name === 'valid'">
+                        <validation-dialog></validation-dialog>
+                    </div>
                 </v-card-text>
                 <template v-slot:actions>
                     <v-btn
                         class="ms-auto text-primary font-weight-medium"
                         text="TUTUP"
-                        @click="dialog=false"
+                        @click="multi_dialog.open=false"
                     ></v-btn>
                 </template>
             </v-card>
@@ -41,25 +42,23 @@
 </template>
 
 <script>
+    import OrderDialog from './order-dialog.vue';
+    import ProcessDialog from './process-dialog.vue';
+    import SampleDialog from './sample-dialog.vue';
+    import ValidDialog from './valid-dialog.vue';
+    import VerifDialog from './verif-dialog.vue';
     export default {
         name: "statuspasiendialog",
-        components: {},
+        components: {
+            "status-order-dialog": OrderDialog,
+            "sampl-collec-dialog": SampleDialog,
+            "process-dialog": ProcessDialog,
+            "verification-dialog": VerifDialog,
+            "validation-dialog": ValidDialog,
+        },
         mounted() {},
         data() {
-            return {
-                items: [
-                    {
-                        id: 1,
-                        color: 'info',
-                        icon: 'mdi-check-circle',
-                    },
-                    {
-                        id: 2,
-                        color: 'error',
-                        icon: 'mdi-alert-circle',
-                    },
-                ],
-            };
+            return {};
         },
         computed: {
             dialog: {
@@ -69,6 +68,32 @@
                 set(bool) {
                     this.$store.commit("setDialog", bool);
                 }
+            },
+            multi_dialog: {
+                get() {
+                    return this.$store.state.stored.multi_dialog;
+                },
+                set(bool, nama) {
+                    this.$store.commit("setMultiDialog", bool, nama)
+                }
+            },
+        },
+        methods: {
+            titleDialog(name) {
+                switch (name) {
+                    case 'order':
+                        return "TIMELINE ORDER"
+                    case 'sample':
+                        return "TIMELINE SAMPLING"
+                    case 'process':
+                        return "TIMELINE PROCESS"
+                    case 'verif':
+                        return "TIMELINE VERIFICATION"
+                    case 'valid':
+                        return "TIMELINE VALIDATION"
+                    default:
+                        return "TIMELINE"
+                }
             }
         },
     }
diff --git a/status-patient/components/valid-dialog.vue b/status-patient/components/valid-dialog.vue
new file mode 100644
index 0000000..d68b23e
--- /dev/null
+++ b/status-patient/components/valid-dialog.vue
@@ -0,0 +1,56 @@
+<template>
+    <v-timeline side="end" align="start">
+        <v-timeline-item
+            dot-color="white"
+            :fill-dot="true"
+            icon="mdi-check-circle"
+            icon-color="primary"
+            size="small"
+        >
+            <div style="min-width: 600px; max-width: 750px;">
+                <v-row>
+                    <v-col cols="7" align="start">
+                        <h4 class="font-weight-medium">Admin</h4>
+                    </v-col>
+                    <v-col cols="5" align="end">
+                        <h4 class="font-weight-medium">21-08-2024 16:53</h4>
+                    </v-col>
+                </v-row>
+                <div class="bg-success-lighten rounded-lg pa-2 my-2">
+                    <v-row>
+                        <v-col cols="12">
+                            <h4>SGOT</h4>
+                        </v-col>
+                    </v-row>
+                </div>
+                <v-row>
+                    <v-col cols="7" align="start">
+                        <h4 class="font-weight-medium">Admin</h4>
+                    </v-col>
+                    <v-col cols="5" align="end">
+                        <h4 class="font-weight-medium">21-08-2024 17:53</h4>
+                    </v-col>
+                </v-row>
+                <div class="bg-success-lighten rounded-lg pa-2 my-2">
+                    <v-row>
+                        <v-col cols="12">
+                            <h4>SGPT</h4>
+                        </v-col>
+                    </v-row>
+                </div>
+            </div>
+        </v-timeline-item>
+    </v-timeline>
+</template>
+
+<script>
+    export default {
+        name: "validationdialog",
+        components: {},
+        mounted() {},
+        data() {
+            return {};
+        },
+        computed: {},
+    }
+</script>
\ No newline at end of file
diff --git a/status-patient/components/verif-dialog.vue b/status-patient/components/verif-dialog.vue
new file mode 100644
index 0000000..bf0cd76
--- /dev/null
+++ b/status-patient/components/verif-dialog.vue
@@ -0,0 +1,56 @@
+<template>
+    <v-timeline side="end" align="start">
+        <v-timeline-item
+            dot-color="white"
+            :fill-dot="true"
+            icon="mdi-check-circle"
+            icon-color="primary"
+            size="small"
+        >
+            <div style="min-width: 600px; max-width: 750px;">
+                <v-row>
+                    <v-col cols="7" align="start">
+                        <h4 class="font-weight-medium">Admin</h4>
+                    </v-col>
+                    <v-col cols="5" align="end">
+                        <h4 class="font-weight-medium">21-08-2024 16:53</h4>
+                    </v-col>
+                </v-row>
+                <div class="bg-success-lighten rounded-lg pa-2 my-2">
+                    <v-row>
+                        <v-col cols="12">
+                            <h4>SGOT</h4>
+                        </v-col>
+                    </v-row>
+                </div>
+                <v-row>
+                    <v-col cols="7" align="start">
+                        <h4 class="font-weight-medium">Admin</h4>
+                    </v-col>
+                    <v-col cols="5" align="end">
+                        <h4 class="font-weight-medium">21-08-2024 17:53</h4>
+                    </v-col>
+                </v-row>
+                <div class="bg-success-lighten rounded-lg pa-2 my-2">
+                    <v-row>
+                        <v-col cols="12">
+                            <h4>SGPT</h4>
+                        </v-col>
+                    </v-row>
+                </div>
+            </div>
+        </v-timeline-item>
+    </v-timeline>
+</template>
+
+<script>
+    export default {
+        name: "verficationdialog",
+        components: {},
+        mounted() {},
+        data() {
+            return {};
+        },
+        computed: {},
+    }
+</script>
\ No newline at end of file
diff --git a/status-patient/modules/store.js b/status-patient/modules/store.js
index 115f616..d5313d3 100644
--- a/status-patient/modules/store.js
+++ b/status-patient/modules/store.js
@@ -157,6 +157,31 @@ const store = {
             ],
             total_page: 1,
             sp_dialog: false,
+            print_dialog: false,
+            multi_dialog: {
+              open: false,
+              name: "",
+            },
+            data_order: [
+              {
+                "pemeriksaan": "SGOT",
+                "bruto": 88000,
+                "diskon": 0,
+                "total": 88000,
+              },
+              {
+                "pemeriksaan": "SGPT",
+                "bruto": 88000,
+                "diskon": 0,
+                "total": 88000,
+              },
+              {
+                "pemeriksaan": "TOTAL",
+                "bruto": 176000,
+                "diskon": 0,
+                "total": 176000,
+              },
+            ]
         }
     },
     mutations: {
@@ -165,6 +190,13 @@ const store = {
         },
         setDialog(state, bool) {
           state.sp_dialog = bool;
+        },
+        setPrintDialog(state, bool) {
+          state.print_dialog = bool;
+        },
+        setMultiDialog(state, bool, name) {
+          state.multi_dialog.open = bool;
+          state.multi_dialog.name = name;
         }
     },
     actions: {