diff --git a/package-lock.json b/package-lock.json
index 6df342b..8b9036f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,7 @@
         "@nuxt/devtools": "^1.6.3",
         "@nuxtjs/color-mode": "^3.5.2",
         "@pinia/nuxt": "^0.5.5",
+        "@vuepic/vue-datepicker": "^10.0.0",
         "axios": "^1.7.7",
         "nuxt": "^3.13.0",
         "nuxt-sweetalert2": "^1.0.0",
@@ -3701,6 +3702,21 @@
       "integrity": "sha512-L2RPSAwUFbgZH20etwrXyVyCBu9OxRSi8T/38QsvnkJyvq2LufW2lDCOzm7t/U9C1mkhJGWYfCuFBCmIuNivrg==",
       "license": "MIT"
     },
+    "node_modules/@vuepic/vue-datepicker": {
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/@vuepic/vue-datepicker/-/vue-datepicker-10.0.0.tgz",
+      "integrity": "sha512-ujlk3ahftVQpyCJ8hq7TmOOHrf/XFJI1ZcAh/FRB5Ci62Vq5HmHf6xux5KVi5SPUFRTJY78m+uDhYy1M+8RZ9w==",
+      "license": "MIT",
+      "dependencies": {
+        "date-fns": "^4.1.0"
+      },
+      "engines": {
+        "node": ">=18.12.0"
+      },
+      "peerDependencies": {
+        "vue": ">=3.2.0"
+      }
+    },
     "node_modules/@vuetify/loader-shared": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/@vuetify/loader-shared/-/loader-shared-2.0.3.tgz",
@@ -5501,6 +5517,16 @@
         "url": "https://opencollective.com/daisyui"
       }
     },
+    "node_modules/date-fns": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-4.1.0.tgz",
+      "integrity": "sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/kossnocorp"
+      }
+    },
     "node_modules/db0": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/db0/-/db0-0.2.1.tgz",
diff --git a/package.json b/package.json
index 3a368bf..afc2044 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
     "@nuxt/devtools": "^1.6.3",
     "@nuxtjs/color-mode": "^3.5.2",
     "@pinia/nuxt": "^0.5.5",
+    "@vuepic/vue-datepicker": "^10.0.0",
     "axios": "^1.7.7",
     "nuxt": "^3.13.0",
     "nuxt-sweetalert2": "^1.0.0",
diff --git a/pages/satu_rssa/kunjungan_pasien/index.vue b/pages/satu_rssa/kunjungan_pasien/index.vue
index 8bcaf88..6772893 100644
--- a/pages/satu_rssa/kunjungan_pasien/index.vue
+++ b/pages/satu_rssa/kunjungan_pasien/index.vue
@@ -1,166 +1,108 @@
 <template>
     <div>
-        <v-main>
+      <v-app>
+         <v-main>
           <v-container>
-               <v-card title="List Kunjungan pasien" flat>
-           
+            <v-card title="List Kunjungan Pasien" elevation="2" flat class="mx-auto my-8">
+              <template v-slot:text>
+                <v-row>
+                  <v-col>
+                    <div class="border-thin">
+                      <VForm 
+                      @submit.prevent="get_data">
+                      <v-container >
+                        <v-row>
+                          <v-col cols="12" md="2">
+                            <v-text-field
+                            v-model="reqtanggalkunjungan.tanggalawal"
+                            label="Tanggal Awal"
+                            type="date"
+                            ></v-text-field>
+                          </v-col>
+                          <v-col cols="12" md="2">
+                        
+                              <VueDatePicker v-model="reqtanggalkunjungan.tanggalakhir"  :enable-time-picker="false"  label="Tanggal Akhir"/>
+                            
+                          </v-col>
+                        </v-row>
+                        
+                        <v-row>
+                          
+                        </v-row>
+                        <VBtn class="mb-5"
+                        variant="tonal"
+                        type="submit">
+                        C A R I
+                      </VBtn>
         
-        <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>
-        <v-data-table class="elevation-1" :headers="headers" :items="surkon.list_data" F :search="search">
-                    </v-data-table>
-                    
-                  </v-card>
-                </v-container>
-              </v-main> 
+                    </v-container>
+                  </VForm>
+                </div>
+              </v-col>
+            </v-row>
+            <v-row>
+              <v-text-field v-model="search" label="Search" prepend-inner-icon="mdi-magnify" variant="outlined" hide-details single-line class="rounded elevation-1" width="500px"></v-text-field>
+            </v-row>
+              </template>
+              <v-data-table 
+              :headers="headers" 
+              :items="dataKunjunganPasien" 
+              :search="search">
+              </v-data-table>
+            </v-card>
+          </v-container>
+        </v-main>
+      </v-app>
             </div>
           
             
 </template>
 <script setup>
+import VueDatePicker from '@vuepic/vue-datepicker';
+import '@vuepic/vue-datepicker/dist/main.css'
 
-import { ref, reactive } from "vue";
-import Swal from "sweetalert2";
-import { storeToRefs } from "pinia";
-
-
-
-const noRM = ref('');
-const noSEP = ref('');
-const tanggal_awal = ref('');
-const tanggal_akhir = ref('');
-const poliklinik = ref('');
-
-// const itemsPerPage= 5;
 const search = ref("");
-const headers = [
+  const today = new Date();
+  const date = today.getFullYear()+'-'+(today.getMonth()+1)+'-'+today.getDate();
+  console.log("DATE : ", date)
+  const headers = [
   {
     align: 'start',
     key: 'name',
     sortable: false,
   },
-  { key: 'Nomor_surat_kontrol', title: 'Tanggal Masuk' },
-  { key: 'Nomor_sep', title: 'Jam Masuk' },
-  { key: 'Tanggal_cetak_surat_kontrol', title: 'Nomer Rekam Medik' },
-  { key: 'Tanggal_rencana_kontrol', title: 'Nama' },
-  { key: 'No_rm', title: 'Umur' },
-  { key: '', title: 'Jenis Kelamin' },
-  { key: '', title: 'Ruang' },
-  { key: '', title: 'Dpjp' },
+  { key: 'tanggalmasukkunjungan', title: 'Tanggal Masuk' },
+  { key: 'jammasukkunjungan', title: 'Jam Masuk' },
+  { key: 'nomr', title: 'Nomer Rekam Medik' },
+  { key: 'namalengkap', title: 'Nama' },
+  { key: 'umur', title: 'Umur' },
+  { key: 'jeniskelamin', title: 'Jenis Kelamin' },
+  { key: 'namaruang', title: 'Ruang' },
+  { key: 'namalengkapdokter', title: 'Dpjp' },
 ];
-
-
-const payload = {
-  
-    no_rm: "",
-    no_sep: "",
-    poliklinik: "",
-    tanggal_awal: "",
-    tanggal_akhir: "",
-    tipe_surkon : "1",
-    offset: "0",
-  };
-
-  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" },
-];
-
-
-  const form_proses = async() => {
-    payload.no_rm = noRM._value;
-    payload.no_sep = noSEP._value;
-    payload.tanggal_awal = tanggal_awal._value;
-    payload.tanggal_akhir = tanggal_akhir._value;
-    payload.poliklinik = poliklinik._value.toString();
-    Swal.fire({
-
-      title: 'Berhasil Menampilkan Data' ,
-      icon: 'success',
-      showConfirmButton: false,
-      timer: 1000,
+    const reqtanggalkunjungan = reactive({
+      tanggalawal : "2024-12-17",
+      tanggalakhir : date, 
     })
     
-    loadSurKon(payload);
-  }
-  
+    
+    const { dataKunjunganPasien } = storeToRefs(useDataKunjunganPasien());
+    const { loadDataKunjunganPasien } = useDataKunjunganPasien();
+    
+    const get_data = async() => {
+      console.log(reqtanggalkunjungan)
+      loadDataKunjunganPasien(reqtanggalkunjungan);
+      console.log("DATA", dataKunjunganPasien)
+   
+    }
 
-  onMounted(() => {
-    loadSubspesialisData();
+    onMounted(() => {
+  
+      loadDataKunjunganPasien(reqtanggalkunjungan);
+      ("DATA", reqtanggalkunjungan)
   });
 
-  const dataedit = reactive({
-    idxdaftar: '',
-    noSEP: '',
-    kodeHFIS: '',
-    id_dokter: '',
-    kodePoli: '',
-    subspesialis: '',
-    tglRencanaKontrol: '',
-    user: '',
-    kode_diagnosa: '',
-    nama_diagnosa: '',
-    tipe_surkon: '',
-    tipe_rawat: '',
-}) 
-  const proses_edit = (item)=>{
-    const {data_edit} = storeToRefs(useSurkonStorePost());
-    
-    const { proses_edit } = useSurkonStorePost();
-    proses_edit(item);
-    var aksi = false;
-    watchEffect(() => {
-    if (data_edit.value) {
-        aksi=true;
-        dataedit.idxdaftar = data_edit.value.Idx_daftar || '';
-        dataedit.noSEP = data_edit.value.Nomor_sep || '';
-        dataedit.kodeHFIS = data_edit.value.kodeHFIS || '';//?
-        dataedit.id_dokter = data_edit.value.id_dokter || '';
-        dataedit.kodePoli = data_edit.value.Kode_poli || '';
-        dataedit.subspesialis = data_edit.value.Subspesialis || '';
-        dataedit.tglRencanaKontrol = data_edit.value.Tanggal_rencana_kontrol || '';
-        dataedit.user = data_edit.value.NamaDokter || '';
-        dataedit.kode_diagnosa = data_edit.value.Kode_diagnosa || '';
-        dataedit.nama_diagnosa = data_edit.value.Nama_diagnosa || '';
-        dataedit.tipe_surkon = data_edit.value.Tipe_SurKon || '';
-        dataedit.tipe_rawat = data_edit.value.tipe_rawat || '';//?
-    }
-})
-}
-
-
-
-const dialog = ref(false);
-const hapusData = ref('');
-
-const modal_hapus = (item) => {
- hapusData.value = item; 
-
-
-}
-
-const proses_hapus = () => {
-  console.log("proses hapus")
-  console.log(hapusData.value)
-  // console.log(hapusData.value.id)
-  dialog.dialog = false;
-}
-const tambah = reactive({
-  dialog:false
-})
+  
 
 
 </script>
diff --git a/pages/satu_rssa/kunjungan_pasien/index2.vue b/pages/satu_rssa/kunjungan_pasien/index2.vue
new file mode 100644
index 0000000..152d843
--- /dev/null
+++ b/pages/satu_rssa/kunjungan_pasien/index2.vue
@@ -0,0 +1,130 @@
+<template>
+    <div>
+      <v-app>
+         <v-main>
+          <v-container>
+            <v-card title="List Kunjungan Pasien" flat>
+              <template v-slot:text>
+                <v-row>
+                  <v-col>
+                    <div class="border-thin">
+                      <VForm 
+                      @submit.prevent="get_data">
+                      <v-container >
+                        <v-row>
+                          <v-col cols="12" md="6">
+                            <v-text-field
+                            v-model="reqtanggalkunjungan.tanggalawal"
+                            label="Tanggal Awal"
+                            type="date"
+                            ></v-text-field>
+                          </v-col>
+                          <v-col cols="12" md="6">
+                            <v-text-field
+                            v-model="reqtanggalkunjungan.tanggalakhir"
+                            label="Tanggal Akhir"
+                            type="date"
+                            ></v-text-field>
+                          </v-col>
+                        </v-row>
+                        <v-row>
+                          
+                        </v-row>
+                        <VBtn class="mb-5"
+                        variant="tonal"
+                        type="submit">
+                        C A R I
+                      </VBtn>
+        
+                    </v-container>
+                  </VForm>
+                </div>
+              </v-col>
+            </v-row>
+            <v-row>
+              <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>
+            </v-row>
+              <!-- </template>
+              <template> -->
+              </template>
+              <v-data-table :headers="headers"  :items="dataKunjunganPasien" :search="search" hide-default-header>
+
+                <template v-slot:body="{items}">
+                    <tr>
+                        <th>Tanggal Masuk</th>
+                        <th>Jam Masuk</th>
+                        <th>No Rm</th>
+                        <th>Nama</th>
+                        <th>Umur</th>
+                        <th>Jenis Kelamin</th>
+                        <th> Ruang </th>
+                        <th> DPJP </th>
+                    </tr>
+
+                     <tr v-for="(item,index) in items" :key="index">
+                        <td v-if="index===0 || item.tanggalmasukkunjungan !== items[index-1].tanggalmasukkunjungan"> {{ item.tanggalmasukkunjungan }} </td>
+                        <td v-else></td>
+                        <td>{{ item.jammasukkunjungan }}</td>
+                        <td>{{ item.nomr }}</td>
+                        <td>{{ item.namalengkap }}</td>
+                        <td>{{ item.umur }} Tahun</td>
+                        <td>{{ item.jeniskelamin }}</td>
+                        <td> {{ item.namaruang }} </td>
+                        <td>{{ item.namalengkapdokter }}</td>
+                     </tr>
+                </template>
+
+
+              </v-data-table>
+            </v-card>
+          </v-container>
+        </v-main>
+      </v-app>
+            </div>
+          
+            
+</template>
+<script setup>
+
+const search = ref("");
+  const today = new Date();
+  const date = today.getFullYear()+'-'+(today.getMonth()+1)+'-'+today.getDate();
+  console.log("DATE : ", date)
+  const headers = [
+  {
+    align: 'start',
+    key: 'name',
+    sortable: false,
+  },
+  { key: 'tanggalmasukkunjungan', title: 'Tanggal Masuk' },
+  { key: 'jammasukkunjungan', title: 'Jam Masuk' },
+  { key: 'nomr', title: 'Nomer Rekam Medik' },
+  { key: 'namalengkap', title: 'Nama' },
+  { key: 'umur', title: 'Umur' },
+  { key: 'jeniskelamin', title: 'Jenis Kelamin' },
+  { key: 'namaruang', title: 'Ruang' },
+  { key: 'namalengkapdokter', title: 'Dpjp' },
+];
+    const reqtanggalkunjungan = reactive({
+      tanggalawal : "2024-12-16",
+      tanggalakhir : date, 
+    })
+    const { dataKunjunganPasien } = storeToRefs(useDataKunjunganPasien());
+    const { loadDataKunjunganPasien } = useDataKunjunganPasien();
+    
+    const get_data = async() => {
+      
+      loadDataKunjunganPasien(reqtanggalkunjungan);
+      console.log("DATA", dataKunjunganPasien)
+    }
+
+    onMounted(() => {
+  
+      loadDataKunjunganPasien(reqtanggalkunjungan);
+      ("DATA", dataKunjunganPasien)
+  });
+
+  
+
+
+</script>
diff --git a/server/api/satu_rssa/kunjungan_pasien/index.post.ts b/server/api/satu_rssa/kunjungan_pasien/index.post.ts
new file mode 100644
index 0000000..f09d625
--- /dev/null
+++ b/server/api/satu_rssa/kunjungan_pasien/index.post.ts
@@ -0,0 +1,23 @@
+import axios from "axios";
+export default defineEventHandler(async (event) => {
+  const body = await readBody(event)
+  console.log(body)
+  try {
+    console.log("MASUK DALAM SINI")
+    const response = await axios.post("http://10.10.150.129:8082/api/kunjunganpasien/listkunjunganpasien", body);
+    console.log(response.data)
+
+
+   
+    return response.data
+  } catch (error) {
+    console.error("Error posting to API:", error);
+    
+    throw createError({
+      statusCode: 500,
+      statusMessage: "Failed to fetch data from API",
+    });
+  }
+});
+
+
diff --git a/stores/users.ts b/stores/users.ts
index a370fe6..6b27e3e 100644
--- a/stores/users.ts
+++ b/stores/users.ts
@@ -149,7 +149,65 @@ export const useDataLogAPIGet = defineStore("DataLogAPI", () => {
     dataLogAPI,
     loadDataLogAPI,
   }
-})
+});
+
+export const useDataKunjunganPasien = defineStore("DataKunjunganPasien", () => {
+  const dataKunjunganPasien = ref<any[]>([]);
+
+  const calculateAge = (tanggalLahir: string) => {
+    const today = new Date();
+    const birthDate = new Date(tanggalLahir);
+    
+    if (isNaN(birthDate.getTime())) {
+      console.error("Tanggal lahir tidak valid:", tanggalLahir);
+      return null;
+    }
+
+    let age = today.getFullYear() - birthDate.getFullYear();
+    const m = today.getMonth() - birthDate.getMonth();
+
+    
+    if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) {
+      age--;
+    }
+
+    return age;
+  };
+
+
+  const loadDataKunjunganPasien = async (reqDataKunjunganPasien: Record<string, any>) => {
+    try {
+      console.log("REQ", reqDataKunjunganPasien);
+      const response = await $fetch("/api/satu_rssa/kunjungan_pasien", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(reqDataKunjunganPasien),
+      });
+
+      console.log("Response Data:", response);
+
+      
+      dataKunjunganPasien.value = response.map((item: any) => {
+        const tanggalLahir = item.tanggallahir; 
+        const umur = tanggalLahir ? calculateAge(tanggalLahir) : null;
+
+       
+        return { ...item, umur };
+      });
+
+      console.log("Data Kunjungan Pasien dengan Umur:", dataKunjunganPasien.value);
+    } catch (error) {
+      console.error("Failed to load data log api:", error);
+    }
+  };
+
+  return {
+    dataKunjunganPasien,
+    loadDataKunjunganPasien,
+  };
+});
 
 
 export const useJadwalDokter = defineStore("JadwalDokter", () => {