penambahan tabel pencarian, form tambah, form ubah

BACA.txt

@@ -24,4 +24,6 @@ icon= https://icones.netlify.app/collection/ph
 IconAliases = https://github.com/BayBreezy/nuxt3-vuetify3-starter/blob/main/utils/customIcons.ts
 
 extension yg perlu di install:
-Iconify IntelliSense 
+Iconify IntelliSense 
+
+validasi=https://blog.logrocket.com/how-to-implement-form-validation-with-vuetify-in-a-vue-js-app/

app.vue

@@ -1,80 +1,11 @@
 <template>
-  <div>
-    <v-app>
-      <v-app-bar>
-        <v-app-bar-title>Hello</v-app-bar-title>
-        <v-spacer />
-        <v-btn @click="toggleTheme">
-          <v-icon>ph:sun</v-icon>
-          toggle thema</v-btn>
-      </v-app-bar>
-      <v-main>
-        <v-container>
-          <v-card title="List Surat Kontrol" flat>
-            <template v-slot:text>
-              <v-text-field v-model="search" label="Search" prepend-inner-icon="mdi-magnify" variant="outlined" hide-details single-line></v-text-field>
-            </template>
-
-            <v-data-table :headers="headers" :items="subspesialis" F :search="search"></v-data-table>
-          </v-card>
-        </v-container>
-        <v-container>
-          <v-card title="List Surat Kontrol" flat>
-            <template v-slot:text>
-              <v-text-field v-model="search" label="Search" prepend-inner-icon="mdi-magnify" variant="outlined" hide-details single-line></v-text-field>
-            </template>
-
-            <v-data-table :headers="headers" :items="surkon.list_data" F :search="search"></v-data-table>
-          </v-card>
-        </v-container>
-      </v-main>
-    </v-app>
-  </div>
+  <VApp>
+    <!-- <Navbar/> -->
+    <VMain>
+      <NuxtPage/>
+    </VMain>
+  </VApp>
 </template>
-<script setup>
 
-import { ref } from "vue";
-import { useTheme } from "vuetify";
-import { storeToRefs } from "pinia";
-
-const theme = useTheme();
-
-function toggleTheme () {
-  theme.global.name.value = theme.global.current.value.dark ? 'light' : 'myTheme';
-}
-
-// const itemsPerPage= 5;
-const search = ref("");
-const headers = [
-  {
-    align: 'start',
-    key: 'name',
-    sortable: false,
-  },
-  { key: 'Nomor_surat_kontrol', title: 'Nomor surat kontrol' },
-  { key: 'Nomor_sep', title: 'Nomor sep' },
-  { key: 'Tanggal_cetak_surat_kontrol', title: 'Tanggal Entry' },
-  { key: 'Tanggal_rencana_kontrol', title: 'Tanggal Rencana Kontrol' },
-  { key: 'No_rm', title: 'Nomor Rekam Medik' },
-  { key: 'NamaDokter', title: 'Nama Dokter' },
-];
-const payload = ref({
-    no_rm: "",
-    no_sep: "",
-    poliklinik: "",
-    tanggal_awal: "2024-10-16",
-    tanggal_akhir: "2024-10-30",
-    offset: "0",
-    limit: "10",
-  });
-  const { subspesialis } = storeToRefs(useSubspesialisStore());
-  const { loadSubspesialis } = useSubspesialisStore();
-
-  const { surkon } = storeToRefs(useSubspesialisStorePost());
-  const { loadSurKon } = useSubspesialisStorePost();
-  // Call loadSurKon when the page loads
-  onMounted(() => {
-    loadSubspesialis();
-    loadSurKon(payload);
-  });
-</script>
+<script setup lang="ts">
+</script>

components/Navbar.vue

@@ -0,0 +1,27 @@
+<template>
+    <div>
+        <v-app-bar>
+        <v-app-bar-title>Hello</v-app-bar-title>
+        <v-spacer />
+        <v-btn @click="toggleTheme">
+          <v-icon>ph:sun</v-icon>
+          toggle thema</v-btn>
+      </v-app-bar>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import { useTheme } from "vuetify";
+import { storeToRefs } from "pinia";
+
+const theme = useTheme();
+
+function toggleTheme () {
+  theme.global.name.value = theme.global.current.value.dark ? 'light' : 'myTheme';
+}
+</script>
+
+<style scoped>
+
+</style>

package.json

@@ -17,7 +17,8 @@
     "vite-plugin-vuetify": "^2.0.4",
     "vue": "^3.0.0",
     "vuetify": "^3.7.0-beta.1",
-    "vuetify-nuxt-module": "^0.18.2"
+    "vuetify-nuxt-module": "^0.18.2",
+    "vue-router": "latest"
   },
   "devDependencies": {
     "@nuxt/icon": "^1.5.1",

pages/daftar.vue

@@ -0,0 +1,180 @@
+<template>
+  <div>
+    <v-app>
+      <v-app-bar>
+        <v-app-bar-title>Hello</v-app-bar-title>
+        <v-spacer />
+        <v-btn @click="toggleTheme">
+          <v-icon>ph:sun</v-icon>
+          toggle thema</v-btn>
+      </v-app-bar>
+      <v-main>
+        <v-container>
+          <v-card title="List Surat Kontrol" flat> 
+            <template v-slot:text>
+              <!-- <v-icon small @click="addTutorial()">mdi-plus-circle</v-icon> -->
+               <v-row>
+                <v-col>
+                  <VBtn class="mx-2" @click="navigateTo('/formSurkon')">Tambah SURKON</VBtn>
+                  <VBtn class="mx-2" @click="navigateTo('/formSubspesialis')">Tambah SUBSPESIALIS</VBtn>
+                </v-col>
+               </v-row>
+              <v-text-field class="mt-5" v-model="search" label="Search" prepend-inner-icon="mdi-magnify" variant="outlined" hide-details single-line></v-text-field>
+            </template>
+
+            <v-data-table :headers="headers" :items="subspesialis_" F :search="search">
+              <!-- <template v-slot:[`item.actions`]="{ item }">
+                <v-icon small class="mr-2" @click="editTutorial(item.id)">mdi-pencil</v-icon>
+                <v-icon small @click="deleteTutorial(item.id)">mdi-delete</v-icon>
+              </template> -->
+              <template v-slot:item.action="{ item }">
+                <v-icon small class="mr-2" @click="proses_edit(item)">mdi-pencil</v-icon>
+                <v-icon small @click="modal_hapus(item)">mdi-delete</v-icon>
+                <!-- <v-btn>OPEN</v-btn> -->
+              </template>
+            </v-data-table>
+          </v-card>
+        </v-container>
+        <v-container>
+          <v-card title="List Surat Kontrol" flat>
+            <template v-slot:text>
+              <v-text-field v-model="search" label="Search" prepend-inner-icon="mdi-magnify" variant="outlined" hide-details single-line></v-text-field>
+            </template>
+
+            <v-data-table :headers="headers" :items="surkon.list_data" F :search="search"></v-data-table>
+          </v-card>
+        </v-container>
+
+        <!-- Dialog Konfirmasi Hapus -->
+        <v-dialog v-model="dialog.dialog" max-width="400" persistent>
+          <!-- <template v-slot:activator="{ props: activatorProps }">
+            <v-btn v-bind="activatorProps" style="display: none;">Open Dialog</v-btn>
+          </template> -->
+
+          <v-card>
+            <v-toolbar dense flat class="body-2 font-weight-bold px-5">
+              Konfirmasi
+            </v-toolbar>
+            <v-row class="ma-1">
+              <v-col cols="12">
+                Yakin akan dihapus?
+              </v-col>
+            </v-row>
+
+            <template v-slot:actions>
+              <v-spacer></v-spacer>
+              <v-btn @click="dialog.dialog = false">Tidak</v-btn>
+              <v-btn @click="proses_hapus()">Ya</v-btn>
+            </template>
+          </v-card>
+        </v-dialog>
+
+      </v-main>
+    </v-app>
+  </div>
+</template>
+<script setup>
+
+import { ref, reactive } from 'vue';
+import { useTheme } from "vuetify";
+import { storeToRefs } from "pinia";
+
+const theme = useTheme();
+const dialog = reactive({
+  dialog: false,
+});
+
+const hapusData = ref(null);
+function toggleTheme () {
+  theme.global.name.value = theme.global.current.value.dark ? 'light' : 'myTheme';
+}
+
+// const itemsPerPage= 5;
+const search = ref("");
+//let form = document.getElementById('search')
+// if(form) (form as HTMLFormElement).reset(); 
+// const { list } = storeToRefs(useSubspesialisStorePost());
+// const { proses_edit } = useSubspesialisStorePost();
+
+
+/*function editTutorial(data){
+  // console.log(data)
+  proses_edit()
+}
+
+function deleteTutorial(data){
+  console.log(data)
+}*/
+
+
+
+const proses_edit = (item)=>{
+    //console.log(item)
+    const { proses_edit } = useSubspesialisStorePost();
+    proses_edit(item);
+//     const {data_edit} = storeToRefs(useSubspesialisStorePost());
+// console.log(data_edit)
+    // proses_edit(payload);
+   navigateTo(`/formSubspesialis`)
+}
+
+const modal_hapus = (item) => {
+ hapusData.value = item;
+ dialog.dialog = true;
+}
+
+const proses_hapus = () => {
+  console.log("proses hapus")
+  // console.log(hapusData.value)
+  // console.log(hapusData.value.id)
+  dialog.dialog = false;
+}
+
+// console.log(search.value)
+const headers = [
+  {
+    align: 'start',
+    key: 'name',
+    sortable: false,
+  },
+  { key: 'Nomor_surat_kontrol', title: 'Nomor surat kontrol' },
+  { key: 'Nomor_sep', title: 'Nomor sep' },
+  { key: 'Tanggal_cetak_surat_kontrol', title: 'Tanggal Entry' },
+  { key: 'Tanggal_rencana_kontrol', title: 'Tanggal Rencana Kontrol' },
+  { key: 'No_rm', title: 'Nomor Rekam Medik' },
+  { key: 'NamaDokter', title: 'Nama Dokter' },
+  { text: "", value: "action" },
+];
+const payload = {
+    // no_rm: "",
+    // no_sep: "",
+    // poliklinik: "",
+    // tanggal_awal: "2024-10-16",
+    // tanggal_akhir: "2024-10-30",
+    // offset: "0",
+    // limit: "10",
+   "idxdaftar":"1054782",
+    "noSEP":"1323R0011024V000003",
+    "kodeHFIS":"37092",
+    "id_dokter":"d2014e7d-6bb2-4dcf-99d6-6b830c4adb9a",
+    "kodePoli":"018",
+    "subspesialis":"BEDAH DIGESTIF",
+    "tglRencanaKontrol":"2024-11-26",
+    "user":"dr.DWICHA RAHMAWANSA S.,Sp.B-KBD",
+    "kode_diagnosa":"A02.0",
+    "nama_diagnosa":"Salmonella enteritis",
+    "tipe_surkon":"0",
+    "tipe_rawat":"RJ"
+  };
+  const { subspesialis_ } = storeToRefs(useSubspesialisStore());
+  const { loadSubspesialis } = useSubspesialisStore();
+
+  const { surkon } = storeToRefs(useSubspesialisStorePost());
+  const { loadSurKon } = useSubspesialisStorePost();
+
+  // Call loadSurKon when the page loads
+  onMounted(() => {
+    loadSubspesialis();
+    // loadSurKon(payload);
+  });
+</script>

pages/formSubspesialis.vue

@@ -0,0 +1,129 @@
+<template>
+  <v-app-bar>
+      <v-app-bar-title>Hello</v-app-bar-title>
+      <v-spacer />
+      <v-btn @click="toggleTheme">
+        <v-icon>ph:sun</v-icon>
+        toggle thema</v-btn>
+    </v-app-bar>
+  <VContainer class="central">
+    <v-alert
+        class="mb-5"
+        v-model="alert.alert"
+        closable
+        type="success"
+    >
+      This is a success alert that is closable.
+    </v-alert>
+      <VCard width="850" class="ma-auto">
+          <VCardTitle class="text-center">
+              {{ title }}
+          </VCardTitle>
+          <VCardText>
+              <VForm 
+              ref="form"
+              @submit.prevent="form_proses">
+                  <v-container>
+                      <v-row justify="space-around">
+                          <v-col cols="12" md="6">
+                              <v-text-field
+                              name="Idx_daftar"
+                              v-model="payload.Idx_daftar"
+                              label="Idx daftar"
+                              ></v-text-field>
+                            </v-col>
+                            <v-col cols="12" md="6">
+                                <v-text-field
+                                name="Kode_dokter"
+                                v-model="payload.Kode_dokter"
+                                label="Kode dokter"
+                                ></v-text-field>
+                            </v-col>
+                        </v-row>
+                      <v-row justify="space-around">
+                          <v-col cols="12" md="6">
+                              <v-text-field
+                              name="Kode_dpjp"
+                              v-model="payload.Kode_dpjp"
+                              label="Kode dpjp"
+                              ></v-text-field>
+                          </v-col>
+                          <v-col cols="12" md="6">
+                              <v-text-field
+                              name="Kode_poli"
+                              v-model="payload.Kode_poli"
+                              label="Kode poli"
+                              ></v-text-field>
+                          </v-col>
+                      </v-row>
+                      <VBtn
+                  variant="tonal"
+                  type="submit"
+                  block>
+                  U B A H
+                  </VBtn>
+                  </v-container>
+              </VForm>
+          </VCardText>
+      </VCard>
+  </VContainer>
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive, watchEffect } from "vue";
+import { useTheme } from "vuetify";
+import { VForm } from 'vuetify/components';
+import { storeToRefs } from "pinia";
+import {useSubspesialisStorePost} from "@/stores/users"
+
+const theme = useTheme();
+
+function toggleTheme () {
+  theme.global.name.value = theme.global.current.value.dark ? 'light' : 'myTheme';
+}
+
+const {data_edit} = storeToRefs(useSubspesialisStorePost());
+console.log(data_edit.value)
+
+const payload = reactive({
+    Idx_daftar: '',
+    Kode_dokter: '',
+    Kode_dpjp: '',
+    Kode_poli: '',
+}) 
+
+const alert = reactive({
+    alert:false
+})
+
+watchEffect(() => {
+    if (data_edit.value) {
+        payload.Idx_daftar = data_edit.value.Idx_daftar || '';
+        payload.Kode_dokter = data_edit.value.Kode_dokter || '';
+        payload.Kode_dpjp = data_edit.value.Kode_dpjp || '';
+        payload.Kode_poli = data_edit.value.Kode_poli || '';
+    }
+})
+
+
+// console.log(form);
+const load = ref(false);
+// console.log(data_edit)
+
+const form_proses = async() => {
+    if(data_edit.value){
+        alert.alert=true
+        console.log("proses edit dijalankan")
+        //navigateTo(`/`)
+    }else{
+        alert.alert=true
+        console.log("proses tambah yang dijalankan")
+        //navigateTo(`/`)
+    }
+}
+const title = computed(()=>data_edit.value ? 'UBAH DATA' : "TAMBAH DATA")
+</script>
+
+<style>
+
+</style>

pages/formSurkon.vue

@@ -0,0 +1,257 @@
+<template>
+    <v-app-bar>
+        <v-app-bar-title>Hello</v-app-bar-title>
+        <v-spacer />
+        <v-btn @click="toggleTheme">
+          <v-icon>ph:sun</v-icon>
+          toggle thema</v-btn>
+      </v-app-bar>
+    <VContainer class="central">
+        <v-alert
+            class="mb-5"
+            v-model="alert.alert"
+            closable
+            type="success"
+        >
+        This is a success alert that is closable.
+        </v-alert>
+        <VCard width="850" class="ma-auto">
+            <VCardTitle class="text-center">
+                {{ title }}
+            </VCardTitle>
+            <VCardText>
+                <VForm 
+                ref="form"
+                @submit.prevent="form_proses">
+                    <!-- <VTextField
+                    label="name"
+                    :counter="10"
+                    required
+                    />
+                    <VTextField
+                    label="Description"
+                    />
+                    <VBtn
+                    variant="tonal"
+                    type="submit"
+                    block>
+                    SAVE
+                    </VBtn> -->
+                    <v-container>
+                        <v-row justify="space-around">
+                            <v-col cols="12" md="6">
+                                <v-text-field
+                                :rules="[v => !!v || '*ID belum terisi']"
+                                name="idxdaftar"
+                                v-model="payload.idxdaftar"
+                                label="idx daftar"
+                                ></v-text-field>
+                            </v-col>
+                            <v-col cols="12" md="6">
+                                <v-text-field
+                                :rules="[v => !!v || '*No SEP belum terisi']"
+                                name="noSEP"
+                                v-model="payload.noSEP"
+                                label="No.SEP"
+                                ></v-text-field>
+                            </v-col>
+                        </v-row>
+                        <v-row>
+                            <v-col cols="12" md="6">
+                                <v-text-field
+                                :rules="[v => !!v || '*kode HFIS belum terisi']"
+                                name="kodeHFIS"
+                                v-model="payload.kodeHFIS"
+                                label="kode HFIS"
+                                ></v-text-field>
+                            </v-col>
+                            <v-col cols="12" md="6">
+                                <v-text-field
+                                :rules="[v => !!v || '*ID dokter belum terisi']"
+                                name="id_dokter"
+                                v-model="payload.id_dokter"
+                                label="ID dokter"
+                                ></v-text-field>
+                            </v-col>
+                        </v-row>
+                        <v-row>
+                            <v-col cols="12" md="6">
+                                <v-text-field
+                                :rules="[v => !!v || '*kode Poli belum terisi']"
+                                name="kodePoli"
+                                v-model="payload.kodePoli"
+                                label="kode Poli"
+                                ></v-text-field>
+                            </v-col>
+                            <v-col cols="12" md="6">
+                                <v-text-field
+                                :rules="[v => !!v || '*Sub spesialis belum terisi']"
+                                name="subspesialis"
+                                v-model="payload.subspesialis"
+                                label="sub spesialis"
+                                ></v-text-field>
+                            </v-col>
+                        </v-row>
+                        <v-row>
+                            <v-col cols="12" md="6">
+                                <v-text-field
+                                :rules="[v => !!v || '*tanggal rencana kontrol belum terisi']"
+                                name="tglRencanaKontrol"
+                                v-model="payload.tglRencanaKontrol"
+                                label="tanggal rencana kontrol"
+                                ></v-text-field>
+                            </v-col>
+                            <v-col cols="12" md="6">
+                                <v-text-field
+                                :rules="[v => !!v || '*Nama Dokter belum terisi']"
+                                name="user"
+                                v-model="payload.user"
+                                label="Nama Dokter"
+                                ></v-text-field>
+                            </v-col>
+                        </v-row>
+                        <v-row>
+                            <v-col cols="12" md="6">
+                                <v-text-field
+                                :rules="[v => !!v || '*kode diagnosa belum terisi']"
+                                name="kode_diagnosa"
+                                v-model="payload.kode_diagnosa"
+                                label="kode diagnosa"
+                                ></v-text-field>
+                            </v-col>
+                            <v-col cols="12" md="6">
+                                <v-text-field
+                                :rules="[v => !!v || '*Nama diagnosa belum terisi']"
+                                name="nama_diagnosa"
+                                v-model="payload.nama_diagnosa"
+                                label="Nama Diagnosa"
+                                ></v-text-field>
+                            </v-col>
+                        </v-row>
+                        <v-row>
+                            <v-col cols="12" md="6">
+                                <v-text-field
+                                :rules="[v => !!v || '*tipe surkon belum terisi']"
+                                name="tipe_surkon"
+                                v-model="payload.tipe_surkon"
+                                label="tipe surkon"
+                                ></v-text-field>
+                            </v-col>
+                            <v-col cols="12" md="6">
+                                <v-text-field
+                                :rules="[v => !!v || '*tipe rawat belum terisi']"
+                                name="tipe_rawat"
+                                v-model="payload.tipe_rawat"
+                                label="tipe rawat"
+                                v-if="aksi == true"
+                                ></v-text-field>
+                            </v-col>
+                        </v-row>
+                        <VBtn
+                    variant="tonal"
+                    type="submit"
+                    block>
+                    S I M P A N
+                    </VBtn>
+                    </v-container>
+                </VForm>
+            </VCardText>
+        </VCard>
+    </VContainer>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, watchEffect } from "vue";
+import { useTheme } from "vuetify";
+import { VForm } from 'vuetify/components';
+import { storeToRefs } from "pinia";
+import {useSubspesialisStorePost} from "@/stores/users"
+
+const theme = useTheme();
+
+function toggleTheme () {
+  theme.global.name.value = theme.global.current.value.dark ? 'light' : 'myTheme';
+}
+
+// const {idxdaftar} = storeToRefs(useSubspesialisStore());
+// function handleSubmit() {
+      
+//     }
+
+const alert = reactive({
+    alert:false
+})
+
+
+const payload = reactive({
+    idxdaftar: '',
+    noSEP: '',
+    kodeHFIS: '',
+    id_dokter: '',
+    kodePoli: '',
+    subspesialis: '',
+    tglRencanaKontrol: '',
+    user: '',
+    kode_diagnosa: '',
+    nama_diagnosa: '',
+    tipe_surkon: '',
+    tipe_rawat: '',
+}) 
+
+
+const load = ref(false);
+const { surkon } = storeToRefs(useSurkonStorePost());
+const { simpan_SurKon } = useSurkonStorePost();
+
+
+const {data_edit} = storeToRefs(useSurkonStorePost());
+console.log(data_edit.value)
+
+var aksi = false;
+watchEffect(() => {
+    if (data_edit.value) {
+        aksi=true;
+        payload.idxdaftar = data_edit.value.Idx_daftar || '';
+        payload.noSEP = data_edit.value.Nomor_sep || '';
+        payload.kodeHFIS = data_edit.value.kodeHFIS || '';//?
+        payload.id_dokter = data_edit.value.id_dokter || '';
+        payload.kodePoli = data_edit.value.Kode_poli || '';
+        payload.subspesialis = data_edit.value.Subspesialis || '';
+        payload.tglRencanaKontrol = data_edit.value.Tanggal_rencana_kontrol || '';
+        payload.user = data_edit.value.user || '';//?
+        payload.kode_diagnosa = data_edit.value.Kode_diagnosa || '';
+        payload.nama_diagnosa = data_edit.value.Nama_diagnosa || '';
+        payload.tipe_surkon = data_edit.value.Tipe_SurKon || '';
+        payload.tipe_rawat = data_edit.value.tipe_rawat || '';//?
+    }
+})
+
+const form_proses = async() => {
+    if(data_edit.value){
+        //alert.alert=true
+        console.log("proses edit dijalankan")
+        //navigateTo(`/`)
+    }else{
+        console.log(payload.idxdaftar)
+        simpan_SurKon(payload);
+        //alert.alert=true
+        console.log("proses tambah yang dijalankan")
+        //navigateTo(`/`)
+    }
+}
+const title = computed(()=>data_edit.value ? 'UBAH DATA' : "TAMBAH DATA")
+
+/*const form_proses = async() => {
+    if(payload.idxdaftar){
+        console.log(payload.idxdaftar)
+        loadSurKon(payload);
+        navigateTo(`/`)
+    }else{
+        console.log("kosong")
+    }
+}*/
+</script>
+
+<style scoped>
+
+</style>

pages/index.vue

@@ -0,0 +1,270 @@
+<template>
+  <div>
+    <v-app>
+      <v-app-bar>
+        <v-app-bar-title>Hello</v-app-bar-title>
+        <v-spacer />
+        <v-btn @click="toggleTheme">
+          <v-icon>ph:sun</v-icon>
+          toggle thema</v-btn>
+      </v-app-bar>
+       <v-main>
+       <!-- <v-container>
+          <v-card title="List Surat Kontrol" flat>
+            <template v-slot:text>
+              <v-text-field v-model="search" label="Search" prepend-inner-icon="mdi-magnify" variant="outlined" hide-details single-line></v-text-field>
+            </template>
+
+            <v-data-table :headers="headers" :items="subspesialis" F :search="search"></v-data-table>
+          </v-card>
+        </v-container> -->
+        <v-container>
+          <v-card title="List Surat Kontrol" flat>
+            <template v-slot:text>
+              <v-text-field v-model="search" label="Search" prepend-inner-icon="mdi-magnify" variant="outlined" hide-details single-line class="rounded elevation-1"></v-text-field>
+            </template>
+
+            <template>
+              <VForm v-model="valid" 
+              @submit.prevent="form_proses">
+                <v-container >
+                  <v-row>
+                    <v-col cols="12" md="6">
+                        <v-text-field
+                          v-model="tanggal_awal"
+                          label="Tanggal Awal"
+                          type="date"
+                        ></v-text-field>
+                    </v-col>
+                    <v-col cols="12" md="6">
+                      <v-text-field
+                        v-model="tanggal_akhir"
+                        label="Tanggal Akhir"
+                        type="date"
+                      ></v-text-field>
+                    </v-col>
+                  </v-row>
+                  <v-row>
+                    <v-col cols="12" md="6">
+                      <!-- <v-select
+                        v-model="poliklinik"
+                        :items="['California', 'Colorado', 'Florida', 'Georgia', 'Texas', 'Wyoming']"
+                        label="Subspesialis"
+                        variant="outlined"
+                      /> -->
+                      <v-autocomplete 
+                      label="Poliklinik"
+                      v-model="poliklinik"
+                      :items="subspesialis"
+                      item-title="Subspesialis"
+                      item-value="id"
+                      dense
+                      />
+                    </v-col>
+                  </v-row>
+                  <!-- <v-row>
+                    <v-col
+                      cols="12"
+                      md="4"
+                    >
+                      <v-text-field
+                        v-model="firstname"
+                        :counter="10"
+                        :rules="nameRules"
+                        label="First name"
+                        required
+                      ></v-text-field>
+                    </v-col>
+
+                    <v-col
+                      cols="12"
+                      md="4"
+                    >
+                      <v-text-field
+                        v-model="lastname"
+                        :counter="10"
+                        :rules="nameRules"
+                        label="Last name"
+                        required
+                      ></v-text-field>
+                    </v-col>
+
+                    <v-col
+                      cols="12"
+                      md="4"
+                    >
+                      <v-text-field
+                        v-model="email"
+                        :rules="emailRules"
+                        label="E-mail"
+                        required
+                      ></v-text-field>
+                    </v-col>
+                  </v-row> -->
+                  <VBtn
+                  variant="tonal"
+                  type="submit">
+                  C A R I
+                  </VBtn>
+                </v-container>
+              </VForm>
+            </template>
+            <v-data-table :headers="headers" :items="surkon.list_data" F :search="search">
+              <template v-slot:item.action="{ item }">
+                <v-icon small class="mr-2" @click="proses_edit(item)">mdi-pencil</v-icon>
+                <v-icon small @click="modal_hapus(item)">mdi-delete</v-icon>
+                <!-- <v-btn>OPEN</v-btn> -->
+              </template>
+            </v-data-table>
+            <!-- <v-data-table :headers="headers2" :items="subspesialis" F :search="search">
+              <template v-slot:item.action="{ item }">
+                <v-icon small class="mr-2" @click="proses_edit(item)">mdi-pencil</v-icon>
+                <v-icon small @click="deleteTutorial(item)">mdi-delete</v-icon>
+              </template>
+            </v-data-table> -->
+          </v-card>
+        </v-container>
+        <!-- Dialog Konfirmasi Hapus -->
+        <v-dialog v-model="dialog.dialog" max-width="400" persistent>
+          <!-- <template v-slot:activator="{ props: activatorProps }">
+            <v-btn v-bind="activatorProps" style="display: none;">Open Dialog</v-btn>
+          </template> -->
+
+          <v-card>
+            <v-toolbar dense flat class="body-2 font-weight-bold px-5">
+              Konfirmasi
+            </v-toolbar>
+            <v-row class="ma-1">
+              <v-col cols="12">
+                Yakin akan dihapus?
+              </v-col>
+            </v-row>
+
+            <template v-slot:actions>
+              <v-spacer></v-spacer>
+              <v-btn @click="dialog.dialog = false">Tidak</v-btn>
+              <v-btn @click="proses_hapus()">Ya</v-btn>
+            </template>
+          </v-card>
+        </v-dialog>
+      </v-main>
+    </v-app>
+  </div>
+</template>
+<script setup>
+
+import { ref, reactive } from "vue";
+import { useTheme } from "vuetify";
+import { storeToRefs } from "pinia";
+
+const theme = useTheme();
+const tanggal_awal = ref(null);
+const tanggal_akhir = ref(null);
+const poliklinik = ref(null);
+function toggleTheme () {
+  theme.global.name.value = theme.global.current.value.dark ? 'light' : 'myTheme';
+}
+
+// const itemsPerPage= 5;
+const search = ref("");
+const headers = [
+  {
+    align: 'start',
+    key: 'name',
+    sortable: false,
+  },
+  { key: 'Nomor_surat_kontrol', title: 'Nomor surat kontrol' },
+  { key: 'Nomor_sep', title: 'Nomor sep' },
+  { key: 'Tanggal_cetak_surat_kontrol', title: 'Tanggal Entry' },
+  { key: 'Tanggal_rencana_kontrol', title: 'Tanggal Rencana Kontrol' },
+  { key: 'No_rm', title: 'Nomor Rekam Medik' },
+  { key: 'NamaDokter', title: 'Nama Dokter' },
+  { text: "", value: "action", title:'Aksi' },
+];
+const payload = {
+    // no_rm: "",
+    // no_sep: "",
+    // poliklinik: "",
+    // tanggal_awal: "2024-10-16",
+    // tanggal_akhir: "2024-11-30",
+    // tipe_surkon : "0",
+    // offset: "0",
+    // limit: "10",
+    no_rm: "",
+    no_sep: "",
+    poliklinik: "",
+    tanggal_awal: "",
+    tanggal_akhir: "",
+    tipe_surkon : "1",
+    offset: "0",
+    limit: "10",
+  };
+
+  const { surkon } = storeToRefs(useSurkonStorePost());
+  const { loadSurKon } = useSurkonStorePost();
+
+
+ const { subspesialis,loadSubspesialisData } = useSubspesialisStore();
+  const headers2 = [
+  {
+    align: 'start',
+    key: 'name',
+    sortable: false,
+  },
+  { key: 'id', title: 'ID' },
+  { key: 'Kode', title: 'Kode' },
+  { key: 'Subspesialis', title: 'Subspesialis' },
+  { key: 'FK_daftar_spesialis_ID', title: 'FK_daftar_spesialis_ID' },
+  { key: 'Spesialis', title: 'Spesialis' },
+  { text: "", value: "action" },
+];
+
+// console.log(subspesialis)
+  const form_proses = async() => {
+    // console.log(payload.tanggal_awal, typeof payload.tanggal_awal);
+    // loadSurKon(payload);
+    payload.tanggal_awal = tanggal_awal._value;
+    payload.tanggal_akhir = tanggal_akhir._value;
+    payload.poliklinik = poliklinik._value.toString();
+    console.log(payload)
+    // console.log(subspesialis)
+    loadSurKon(payload);
+  }
+
+
+ 
+  // console.log(subspesialis)
+
+  onMounted(() => {
+    // loadSurKon(payload);
+    loadSubspesialisData();
+  });
+
+ 
+  const proses_edit = (item)=>{
+    // console.log(item)
+    const { proses_edit } = useSurkonStorePost();
+    proses_edit(item);
+   navigateTo(`/formSurkon`)
+}
+
+
+
+const dialog = reactive({
+  dialog: false,
+});
+const hapusData = ref(null);
+
+const modal_hapus = (item) => {
+ hapusData.value = item;
+ dialog.dialog = true;
+}
+
+const proses_hapus = () => {
+  console.log("proses hapus")
+  console.log(hapusData.value)
+  // console.log(hapusData.value.id)
+  dialog.dialog = false;
+}
+
+</script>

pages/notif.vue

@@ -0,0 +1,77 @@
+<template>
+  <v-app-bar>
+        <v-app-bar-title>Hello</v-app-bar-title>
+        <v-spacer />
+        <v-btn @click="toggleTheme">
+          <v-icon>ph:sun</v-icon>
+          toggle thema</v-btn>
+      </v-app-bar>
+
+
+  <div class="text-center pa-4">
+    <v-dialog
+      v-model="dialog.dialog"
+      max-width="400"
+      persistent
+    >
+      <template v-slot:activator="{ props: activatorProps }">
+        <v-btn v-bind="activatorProps">
+          Open Dialog
+        </v-btn>
+      </template>
+
+      <!-- <v-card
+        prepend-icon="mdi-map-marker"
+        text="Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running."
+        title="Use Google's location service?"
+      > -->
+      <v-card>
+      <v-toolbar dense flat class="body-2 font-weight-bold px-5">
+        Konfirmasi
+      </v-toolbar>
+      <v-row class="ma-1">
+        <v-col cols="12">
+          Yakin akan dihapus ?
+        </v-col>
+        </v-row>
+      
+        <template v-slot:actions>
+          <v-spacer></v-spacer>
+
+          <v-btn @click="dialog.dialog=false">
+            Tidak
+          </v-btn>
+
+          <v-btn @click="aksi()">
+            Ya
+          </v-btn>
+        </template>
+      </v-card>
+    </v-dialog>
+  </div>
+  
+</template>
+
+<script lang="ts" setup>
+import { ref } from "vue";
+import { useTheme } from "vuetify";
+import { storeToRefs } from "pinia";
+const theme = useTheme();
+function toggleTheme () {
+  theme.global.name.value = theme.global.current.value.dark ? 'light' : 'myTheme';
+}
+
+const dialog = reactive({
+  dialog:false
+})
+
+const aksi = () => {
+  console.log("data berhasil di hapus")
+  dialog.dialog=false
+}
+
+</script>
+
+<style>
+
+</style>

plugins/vuetify.ts

@@ -1,5 +1,6 @@
 import { createVuetify, type ThemeDefinition } from "vuetify";
 import { md2 } from 'vuetify/blueprints';
+import { VDateInput } from 'vuetify/labs/VDateInput'
 // import { VDataTable } from 'vuetify/labs/VDataTable'
 
 const myTheme: ThemeDefinition = {//untuk mengatur tema terang atau gelap
@@ -32,7 +33,10 @@ export default defineNuxtPlugin(app => {
                 custom
             },
             aliases,
-        }
+        },
+        components: {
+            VDateInput,
+          },
     });
 
     app.vueApp.use(vuetify);

server/api/subspesialis/get/index.get.ts

@@ -0,0 +1,16 @@
+import axios from "axios";
+
+export default defineEventHandler(async (event) => {
+  try {
+    const response = await axios.get("http://10.10.150.129:8082/api/subspesialis");
+    // console.log(response.data)
+    return response.data
+  } catch (error) {
+    console.error("Error posting to surat kontrol API:", error);
+    
+    throw createError({
+      statusCode: 500,
+      statusMessage: "Failed to fetch data from surat kontrol API",
+    });
+  }
+});

server/api/surkon/get/index.get.ts

@@ -2,7 +2,7 @@ import axios from "axios";
 
 export default defineEventHandler(async (event) => {
   try {
-    const response = await axios.get("http://localhost:8082/api/suratkontrol");
+    const response = await axios.get("http://10.10.150.129:8082/api/suratkontrol");
     // console.log(response.data)
     return response.data
   } catch (error) {

server/api/surkon/post/index.post.ts

@@ -3,15 +3,14 @@ import axios from "axios";
 export default defineEventHandler(async (event) => {
   // Read the body of the incoming request
   const body = await readBody(event);
+  console.log(body)
+  console.log("masuk")
 
   try {
-    const response = await axios.post("http://localhost:8082/api/suratkontrol/cari", body, {
-      headers: {
-        "Content-Type": "application/json",
-      },
-    });
-    console.log(response.data)
-    return response.data
+    // const response = await axios.post("http://10.10.150.129:8082/api/suratkontrol/cari", body, {
+    const response = await axios.post("http://10.10.150.129:8082/api/suratkontrol/insert/", body);
+    console.log(response)
+    // return response.data
   } catch (error) {
     console.error("Error posting to surat kontrol API:", error);
     

server/api/surkon/post2/index.post.ts

@@ -0,0 +1,22 @@
+import axios from "axios";
+
+export default defineEventHandler(async (event) => {
+  // Read the body of the incoming request
+  const body = await readBody(event);
+  // console.log(body)
+  console.log("masuk")
+
+  try {
+    const response = await axios.post("http://10.10.150.129:8082/api/suratkontrol/cari", body)
+    // const response = await axios.post("http://10.10.150.129:8082/api/suratkontrol/insert/", body);
+    // console.log(response)
+    return response.data
+  } catch (error) {
+    console.error("Error posting to surat kontrol API:", error);
+    
+    throw createError({
+      statusCode: 500,
+      statusMessage: "Failed to fetch data from surat kontrol API",
+    });
+  }
+});

stores/users.ts

@@ -1,4 +1,4 @@
-interface Subspesialis {
+interface ListSubspesialis {
   id: number;
   Kode: string;
   Subspesialis: string;
@@ -6,30 +6,129 @@ interface Subspesialis {
   Spesialis: string;
 }
 
+interface Surkon {
+  idxdaftar:number;
+  noSEP:string;
+  kodeHFIS:number;
+  id_dokter:string;
+  kodePoli:string;
+  subspesialis:string;
+  tglRencanaKontrol:Date;
+  user:string;
+  kode_diagnosa:string;
+  nama_diagnosa:string;
+  tipe_surkon:number;
+  tipe_rawat:string;
+}
+
+interface data{
+  Idx_daftar:number;
+  Kode_dokter:number;
+  Kode_dpjp:number;
+  Kode_poli:string;
+}
+
 export const useSubspesialisStore = defineStore("Subspesialises", () => {
-  const subspesialis = ref<any[]>([]);
+  const subspesialis_ = ref<any[]>([]);
+  const subspesialis = reactive<ListSubspesialis[]>([]);
   const loadSubspesialis = async () => {
     try {
-      subspesialis.value = await $fetch("/api/surkon/get");
+      subspesialis_.value = await $fetch("/api/surkon/get");
     } catch (error) {
       console.error("Failed to load subspesialis:", error);
     }
   };
-
+  const loadSubspesialisData = async () => {
+    try {
+      const response = await $fetch("/api/subspesialis/get");
+      subspesialis.push(...response);
+    } catch (error) {
+      console.error("Failed to load subspesialis:", error);
+    }
+      // console.log(payload)
+  };
+// console.log(subspesialis)
   return {
     subspesialis,
+    subspesialis_,
     loadSubspesialis,
+    loadSubspesialisData,
   };
 });
 
-export const useSubspesialisStorePost = defineStore("SuratKontrol", () => {
+// export const useSurkonStore = defineStore("Surkon", () => {
+//   const subspesialis = ref<any[]>([]);
+//   const loadSubspesialis = async () => {
+//     try {
+//       subspesialis.value = await $fetch("/api/surkon/get");
+//     } catch (error) {
+//       console.error("Failed to load subspesialis:", error);
+//     }
+//   };
+
+//   return {
+//     subspesialis,
+//     loadSubspesialis,
+//   };
+// });
+
+export const useSubspesialisStorePost = defineStore("SubspesialisProses", () => {
   // Create state for holding users
   const surkon = ref<any[]>([]);
+  // const data_edit = ref<any[]>([]);
+  const data_edit = ref<any>(null);
+  const proses_edit = async (payload: Record<string, any>) => {
+    // try {
+    //   surkon.value = await $fetch("/api/surkon/post", {
+    //     method: "POST",
+    //     headers: {
+    //       "Content-Type": "application/json",
+    //     },
+    //     body: JSON.stringify(payload)
+    //   });
+    // } catch (error) {
+    //   console.error("Failed to load surkon:", error);
+    // }
+    // data_edit.value = [payload]
+    data_edit.value = payload
+  };
 
   // Function to load user data
+  /*const loadSurKon = async (payload: Record<string, any>) => {
+    try {
+      // console.log("APA INI")
+      surkon.value = await $fetch("/api/surkon/post",{
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        // body: JSON.stringify(payload._value)
+        body: JSON.stringify(payload)
+      });
+    } catch (error) {
+      console.error("Failed to load surkon:", error);
+    }
+      // console.log(payload)
+  };*/
+
+  return {
+    surkon,
+    // loadSurKon,
+    proses_edit,
+    data_edit
+  };
+});
+
+export const useSurkonStorePost = defineStore("SuratKontrol", () => {
+  // Create state for holding users
+  const surkon = ref<any[]>([]);
+  // const data_edit = ref<any[]>([]);
+  const data_edit = ref<any>(null);
+
+  //tabel
   const loadSurKon = async (payload: Record<string, any>) => {
     try {
-      surkon.value = await $fetch("/api/surkon/post", {
+      surkon.value = await $fetch("/api/surkon/post2", {
         method: "POST",
         headers: {
           "Content-Type": "application/json",
@@ -41,9 +140,34 @@ export const useSubspesialisStorePost = defineStore("SuratKontrol", () => {
     }
   };
 
+  const proses_edit = async (payload: Record<string, any>) => {
+    data_edit.value = payload
+  };
+
+  // simpan
+  const simpan_SurKon = async (payload: Record<string, any>) => {
+    try {
+      // console.log("APA INI")
+      surkon.value = await $fetch("/api/surkon/post",{
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        // body: JSON.stringify(payload._value)
+        body: JSON.stringify(payload)
+      });
+    } catch (error) {
+      console.error("Failed to load surkon:", error);
+    }
+      // console.log(payload)
+  };
+
   return {
     surkon,
+    data_edit,
     loadSurKon,
+    simpan_SurKon,
+    proses_edit,
   };
 });
 
@@ -52,4 +176,6 @@ if (import.meta.hot) {
   // import.meta.hot.accept(acceptHMRUpdate(useUsersStore, import.meta.hot))
   import.meta.hot.accept(acceptHMRUpdate(useSubspesialisStore, import.meta.hot));
   import.meta.hot.accept(acceptHMRUpdate(useSubspesialisStorePost, import.meta.hot));
+  import.meta.hot.accept(acceptHMRUpdate(useSurkonStorePost, import.meta.hot));
+  // import.meta.hot.accept(acceptHMRUpdate(useSurkonStore, import.meta.hot));
 }