feat(FE) : new pages and validation form pasien

components/layout/full/vertical-sidebar/sidebarItem.ts

@@ -23,7 +23,17 @@ const sidebarItem: menu[] = [
           {
               title: 'Dashboard',
               icon: 'widget-add-line-duotone',
-              to: '/dashboards/dashboard1'
+              to: '/dashboard'
+          },
+          {
+            title : "Pendaftaran",
+            icon : "widget-add-line-duotone",
+            to : "/pendaftaran"
+          },
+          {
+            title : "List Kunjungan Pasien",
+            icon : "widget-add-line-duotone",
+            to : "/list-kunjungan"
           }
       ]
   },

package.json

@@ -15,6 +15,7 @@
     "@mdi/font": "7.4.47",
     "@pinia/nuxt": "^0.11.1",
     "@sidebase/nuxt-auth": "^0.10.1",
+    "@tailwindcss/vite": "^4.1.17",
     "@types/lodash-es": "^4.17.12",
     "@vueuse/i18n": "^4.0.0-beta.12",
     "apexcharts": "4.5.0",
@@ -25,6 +26,7 @@
     "pinia": "^3.0.3",
     "sass": "1.70.0",
     "sass-loader": "^16.0.5",
+    "tailwindcss": "^4.1.17",
     "typescript": "^5.8.3",
     "vee-validate": "^4.15.1",
     "vite": "^6.3.5",

pages/dashboard/index.vue

@@ -0,0 +1,5 @@
+<template>
+  <div>
+    dashboard
+  </div>
+</template>

pages/list-kunjungan/index.vue

@@ -0,0 +1,65 @@
+
+<script >
+export default {
+  name: "tutorials-list",
+  data() {
+    return {
+      tutorials: [],
+      title: "",
+      headers: [
+        { text: "barcode", align: "start", sortable: false, value: "barcode" },
+        { text: "registration_date", value: "registration_date", sortable: false },
+        { text: "service_date", value: "service_date", sortable: false },
+        { text: "check_in", value: "check_in", sortable: false },
+      ],
+    };
+  },
+  methods: {
+    retrievePasien(){
+      axios.get("http://10.10.123.135:8083/api/v1/visit")
+        .then((response) => {
+          this.listPasien = response.data
+          console.log(response.data.data)
+        })
+        .catch((e) => {
+          console.log(e);
+        });
+    },
+
+    refreshList() {
+      this.retrievePasien()
+    },
+
+    editTutorial(id) {
+      this.$router.push({ name: "tutorial-details", params: { id: id } });
+    },
+
+    deleteTutorial(id) {
+      alert("delete")
+    },
+
+    getDisplayTutorial(tutorial) {
+
+    },
+  },
+  mounted() {
+    this.retrievePasien();
+  },
+};
+</script>
+<template>
+  <div>
+  <v-row>
+        <v-col cols="12" md="12">
+            <UiParentCard title="List Pasien">
+            <v-data-table 
+            :headers="headers"
+            :items="listPasien"></v-data-table>
+            
+
+            </UiParentCard>
+        </v-col>
+    </v-row>
+
+   </div>
+</template>

pages/pendaftaran/index.vue

@@ -0,0 +1,140 @@
+
+<script setup lang="ts">
+import UiParentCard from '@/components/shared/UiParentCard.vue';
+import Heading from "@/components/style-components/typography/Heading.vue";
+import Default from "@/components/style-components/typography/DefaultText.vue";
+import axios from "axios";
+import { ref } from 'vue'
+import { useField, useForm } from 'vee-validate'
+
+
+let listPenjamin = ref([]);
+
+function fetchGuarantor(){
+  isLoading = true;
+  axios.get("http://10.10.123.135:8083/api/v1/guarantor-payment")
+    .then(res => {
+      listPenjamin = res.data;
+      console.dir(res.data)
+    })
+    .catch((err) => {
+      console.log(err);
+    });
+}
+
+
+
+  const { handleSubmit, handleReset } = useForm({
+    validationSchema: {
+      name (value) {
+        if (value?.length >= 2) return true
+
+        return 'Name needs to be at least 2 characters.'
+      },
+      phone (value) {
+        if (/^[0-9-]{10,}$/.test(value)) return true
+
+        return 'Phone number needs to be at least 10 digits.'
+      },
+      nomor_bpjs (value) {
+        if (/^[0-9-]{13,}$/.test(value)) return true
+
+        return 'Nomor BPJS needs to be at least 13 digits.'
+      },
+      penjamin (value) {
+        if (value) return true
+
+        return 'Penjamin required.'
+      },
+      alamat (value) {
+        if (value) return true
+
+        return 'Alamat required.'
+      },
+    },
+  })
+  const alamat = useField('alamat')
+  const name = useField('name')
+  const phone = useField('phone')
+  const nomor_bpjs = useField('nomor_bpjs')
+  const tipe_pasien = useField('tipe_pasien')
+  const penjamin = useField('penjamin')
+
+  const items = ref([
+    'Item 1',
+    'Item 2',
+    'Item 3',
+    'Item 4',
+  ])
+
+  const submit = handleSubmit(values => {
+    alert(JSON.stringify(values, null, 2))
+  })
+</script>
+<template>
+  <div>
+  <v-row>
+        <v-col cols="12" md="12">
+            <UiParentCard title="Form Pendaftaran">
+  <form @submit.prevent="submit">
+  <p>Tipe pasien: {{ radios }}</p>
+    <v-radio-group v-model="tipe_pasien.value.value">
+      <v-radio label="Lama" value="lama"></v-radio>
+      <v-radio label="Baru" value="baru"></v-radio>
+    </v-radio-group>
+
+     <v-autocomplete
+     label="Pencarian Nomor Rekam Medis"
+      v-model="newTag"
+      :items="entries"
+      :search-input.sync="search"
+    ></v-autocomplete>
+
+    <v-text-field
+      v-model="name.value.value"
+      :counter="10"
+      :error-messages="name.errorMessage.value"
+      label="Nama Pasien"
+    ></v-text-field>
+
+    <v-text-field
+      v-model="alamat.value.value"
+      :counter="10"
+      :error-messages="alamat.errorMessage.value"
+      label="Alamat"
+    ></v-text-field>
+
+
+    <v-text-field
+      v-model="phone.value.value"
+      :counter="7"
+      :error-messages="phone.errorMessage.value"
+      label="Nomor Telp"
+    ></v-text-field>
+
+     <v-select
+      v-model="penjamin.value.value"
+      :error-messages="penjamin.errorMessage.value"
+      label="Penjamin"
+      :items="listPenjamin"
+       :item-title="name"
+       item-value="name"
+        @update:modelValue="fetchGuarantor()"
+    ></v-select>
+
+    <v-text-field
+      v-model="nomor_bpjs.value.value"
+      :error-messages="nomor_bpjs.errorMessage.value"
+      label="Nomor BPJS"
+    ></v-text-field>
+
+    <v-btn color="#5865f2" class="me-4" type="submit"> submit </v-btn>
+
+    <v-btn  @click="handleReset"> clear </v-btn>
+  </form>
+            </UiParentCard>
+        </v-col>
+    </v-row>
+
+   </div>
+</template>