add api get post

app.vue

@@ -3,143 +3,78 @@
     <v-app>
       <v-app-bar>
         <v-app-bar-title>Hello</v-app-bar-title>
-        <v-spacer/>
+        <v-spacer />
         <v-btn @click="toggleTheme">
-          <!-- <v-icon>ph:sun</v-icon> -->
+          <v-icon>ph:sun</v-icon>
           toggle thema</v-btn>
       </v-app-bar>
       <v-main>
         <v-container>
-          <v-text-field class="mb-5" label="Name" type="name"/>
-          <v-card
-    title="Nutrition"
-    flat
-  >
-    <template v-slot:text>
-      <v-text-field
-        v-model="search"
-        label="Search"
-        
-        variant="outlined"
-        hide-details
-        single-line
-      ></v-text-field>
-    </template>
+          <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="desserts"
-      :search="search"
-    ></v-data-table>
-  </v-card>
+            <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>
 </template>
 <script setup>
+
+import { ref } from "vue";
 import { useTheme } from "vuetify";
+import { storeToRefs } from "pinia";
+
 const theme = useTheme();
 
-const toggleTheme = () => {
+function toggleTheme () {
   theme.global.name.value = theme.global.current.value.dark ? 'light' : 'myTheme';
-};
+}
 
 // const itemsPerPage= 5;
-const search= '';
-const headers= [
-          {
-            align: 'start',
-            key: 'name',
-            sortable: false,
-            title: 'Dessert (100g serving)',
-          },
-          { key: 'calories', title: 'Calories' },
-          { key: 'fat', title: 'Fat (g)' },
-          { key: 'carbs', title: 'Carbs (g)' },
-          { key: 'protein', title: 'Protein (g)' },
-          { key: 'iron', title: 'Iron (%)' },
-        ];
-const desserts= [
-          {
-            name: 'Frozen Yogurt',
-            calories: 159,
-            fat: 6.0,
-            carbs: 24,
-            protein: 4.0,
-            iron: 1,
-          },
-          {
-            name: 'Ice cream sandwich',
-            calories: 237,
-            fat: 9.0,
-            carbs: 37,
-            protein: 4.3,
-            iron: 1,
-          },
-          {
-            name: 'Eclair',
-            calories: 262,
-            fat: 16.0,
-            carbs: 23,
-            protein: 6.0,
-            iron: 7,
-          },
-          {
-            name: 'Cupcake',
-            calories: 305,
-            fat: 3.7,
-            carbs: 67,
-            protein: 4.3,
-            iron: 8,
-          },
-          {
-            name: 'Gingerbread',
-            calories: 356,
-            fat: 16.0,
-            carbs: 49,
-            protein: 3.9,
-            iron: 16,
-          },
-          {
-            name: 'Jelly bean',
-            calories: 375,
-            fat: 0.0,
-            carbs: 94,
-            protein: 0.0,
-            iron: 0,
-          },
-          {
-            name: 'Lollipop',
-            calories: 392,
-            fat: 0.2,
-            carbs: 98,
-            protein: 0,
-            iron: 2,
-          },
-          {
-            name: 'Honeycomb',
-            calories: 408,
-            fat: 3.2,
-            carbs: 87,
-            protein: 6.5,
-            iron: 45,
-          },
-          {
-            name: 'Donut',
-            calories: 452,
-            fat: 25.0,
-            carbs: 51,
-            protein: 4.9,
-            iron: 22,
-          },
-          {
-            name: 'KitKat',
-            calories: 518,
-            fat: 26.0,
-            carbs: 65,
-            protein: 7,
-            iron: 6,
-          },
-        ];
+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>