add barebone dialog

status-patient/components/sp_dialog.vue

@@ -0,0 +1,75 @@
+<template>
+    <div>
+        <v-dialog v-model="dialog" 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>
+                <v-card-text>
+                    <v-row class="ga-4 mb-5">
+                        <div class="rounded-lg bg-secondary-lighten" style="width: 80px; height: 80px;"></div>
+                        <div>
+                            <h4 class="font-weight-medium">05600027LA</h4>
+                            <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>
+                </v-card-text>
+                <template v-slot:actions>
+                    <v-btn
+                        class="ms-auto text-primary font-weight-medium"
+                        text="TUTUP"
+                        @click="dialog=false"
+                    ></v-btn>
+                </template>
+            </v-card>
+        </v-dialog>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "statuspasiendialog",
+        components: {},
+        mounted() {},
+        data() {
+            return {
+                items: [
+                    {
+                        id: 1,
+                        color: 'info',
+                        icon: 'mdi-check-circle',
+                    },
+                    {
+                        id: 2,
+                        color: 'error',
+                        icon: 'mdi-alert-circle',
+                    },
+                ],
+            };
+        },
+        computed: {
+            dialog: {
+                get() {
+                    return this.$store.state.stored.sp_dialog;
+                },
+                set(bool) {
+                    this.$store.commit("setDialog", bool);
+                }
+            }
+        },
+    }
+</script>