result verification

result-verification/components/searchPatient.vue

@@ -0,0 +1,151 @@
+<template>
+  <div>
+    <v-row>
+      <v-col cols="12">
+        <v-card class="bg-white rounded-lg pa-5">
+          <v-row>
+            <v-col cols="2">
+              <v-menu
+                v-model="menuStartDate"
+                :close-on-content-click="false"
+                transition="scale-transition"
+                offset-y
+                min-width="auto"
+                max-width="290px"
+              >
+                <template v-slot:activator="{ props  }">
+                  <v-text-field
+                    :model-value="formatDate()"
+                    label="Tanggal Mulai"
+                    prepend-inner-icon="mdi-calendar"
+                    hide-details
+                    readonly
+                    variant="outlined"
+                    v-bind="props"
+                  ></v-text-field>
+                </template>
+                <v-date-picker
+                  hide-header
+                  show-adjacent-months
+                  rounded="lg"
+                  color="primary"
+                  v-model="date"
+                  @update:modelValue="menuStartDate=false"
+                ></v-date-picker>
+              </v-menu>
+            </v-col>
+            <v-col cols="2">
+              <v-menu
+                v-model="menuEndDate"
+                :close-on-content-click="false"
+                transition="scale-transition"
+                offset-y
+                min-width="auto"
+                max-width="290px"
+              >
+                <template v-slot:activator="{ props  }">
+                  <v-text-field
+                    :model-value="formatDate()"
+                    label="Tanggal Selesai"
+                    prepend-inner-icon="mdi-calendar"
+                    hide-details
+                    readonly
+                    variant="outlined"
+                    v-bind="props"
+                  ></v-text-field>
+                </template>
+                <v-date-picker
+                  hide-header
+                  show-adjacent-months
+                  rounded="lg"
+                  color="primary"
+                  v-model="date"
+                  @update:modelValue="menuEndDate=false"
+                ></v-date-picker>
+              </v-menu>
+            </v-col>
+            <v-col cols="3">
+              <v-text-field 
+                label="No Reg / Nama" 
+                variant="outlined"
+                hide-details
+                append-inner-icon="mdi-magnify"
+              ></v-text-field>
+            </v-col>
+            <v-col cols="3">
+              <v-autocomplete
+                label="Grup Pemeriksaan"
+                variant="outlined"
+                hide-details
+                menu-icon="mdi-chevron-down"
+                :items="['California', 'Colorado', 'Florida', 'Georgia', 'Texas', 'Wyoming']"
+              ></v-autocomplete>
+            </v-col>
+            <v-col cols="2">
+              <div style="height: 100%;">
+                <v-row class="pt-3 justify-space-between">
+                  <div
+                    style="height: 100%;"
+                    class="rounded-lg bg-primary pa-2 mr-2 h-100"
+                  >
+                    <iconify-icon
+                      style="font-size: 2rem;"
+                      icon="fluent:search-20-regular"
+                    ></iconify-icon>
+                  </div>
+                  <div
+                    class="pt-3 pa-3"
+                  >
+                    <v-btn
+                      class="bg-primary-lighten"
+                      variant="tonal"
+                      color="primary"
+                    >
+                    HISTORY
+                  </v-btn>
+                  </div>
+                </v-row>
+              </div>
+            </v-col>
+          </v-row>
+        </v-card>
+      </v-col>
+    </v-row>
+  </div>
+</template>
+    
+<style scoped>
+
+</style>
+    
+<script type="module">
+  export default {
+    name: "SearchPatient",
+    data() {
+        return {
+          menuStartDate: false,
+          menuEndDate: false,
+          visible: false,
+        };
+    },
+    computed: {
+
+    },
+    methods: {
+      formatDate() {
+        if (!this.date) return null;
+
+        return moment(this.date).format("DD-MM-YYYY");
+      },
+      deFormatedDate(date) {
+        if (!date) return null;
+
+        const [day, month, year] = date.split("-");
+        return `${year}-${month.padStart(2, "0")}-${day.padStart(2, "0")}`;
+      },
+    },
+    wacth: {
+
+    }
+  }
+</script>