first commit

components/apps/registration/form/AppointmentSchedule.vue

@@ -0,0 +1,227 @@
+<template>
+  <v-card>
+    <v-card-title class="d-flex justify-space-between align-center">
+      <span class="text-h6">NAKES & JADWAL</span>
+      <v-btn variant="text" color="primary" size="small" @click="resetSection">
+        Atur Ulang
+      </v-btn>
+    </v-card-title>
+
+    <v-card-text>
+      <v-row>
+        <v-col cols="12" md="6">
+          <v-select
+            v-model="localData.paymentMethod"
+            :items="paymentMethods"
+            label="Pembiayaan"
+            variant="outlined"
+            density="compact"
+            :rules="[rules.required]"
+            append-inner-icon="mdi-chevron-down"
+          >
+            <template v-slot:label>
+              Pembiayaan <span class="text-red">*</span>
+            </template>
+          </v-select>
+        </v-col>
+
+        <v-col cols="12" md="6">
+          <v-text-field
+            v-model="localData.referralNumber"
+            label="Nomor Rujukan (Opsional)"
+            variant="outlined"
+            density="compact"
+            placeholder="Nomor Rujukan"
+          />
+        </v-col>
+      </v-row>
+
+      <v-row>
+        <v-col cols="12">
+          <v-select
+            v-model="localData.polyclinicName"
+            :items="polyclinics"
+            label="Nama Poliklinik"
+            variant="outlined"
+            density="compact"
+            placeholder="Pilih"
+            :rules="[rules.required]"
+            @update:modelValue="onPolyclinicChange"
+            append-inner-icon="mdi-chevron-down"
+          />
+        </v-col>
+      </v-row>
+
+      <v-row>
+        <v-col cols="12">
+          <v-select
+            v-model="localData.doctorName"
+            :items="doctors"
+            label="Nama Nakes"
+            variant="outlined"
+            density="compact"
+            placeholder="Pilih"
+            :rules="[rules.required]"
+            :disabled="!localData.polyclinicName"
+            @update:modelValue="onDoctorChange"
+            append-inner-icon="mdi-chevron-down"
+          />
+        </v-col>
+      </v-row>
+
+      <v-row>
+        <v-col cols="12" md="6">
+          <v-text-field
+            v-model="localData.consultationDate"
+            label="Tanggal Konsultasi"
+            variant="outlined"
+            density="compact"
+            type="date"
+            :rules="[rules.required]"
+            :min="minDate"
+          >
+            <template v-slot:label>
+              Tanggal Konsultasi <span class="text-red">*</span>
+            </template>
+          </v-text-field>
+        </v-col>
+
+        <v-col cols="12" md="6">
+          <v-select
+            v-model="localData.consultationTime"
+            :items="timeSlots"
+            label="Jam Konsultasi"
+            variant="outlined"
+            density="compact"
+            placeholder="Pilih Jam Konsultasi"
+            :rules="[rules.required]"
+            :disabled="!localData.consultationDate || !localData.doctorName"
+            append-inner-icon="mdi-clock-outline"
+          >
+            <template v-slot:label>
+              Jam Konsultasi <span class="text-red">*</span>
+            </template>
+          </v-select>
+        </v-col>
+      </v-row>
+
+      <v-row v-if="localData.doctorName && localData.consultationDate">
+        <v-col cols="12">
+          <v-alert type="info" variant="tonal" density="compact">
+            Slot Nakes: {{ availableSlots }} slot tersedia
+          </v-alert>
+        </v-col>
+      </v-row>
+    </v-card-text>
+  </v-card>
+</template>
+
+<script setup>
+import { ref, watch, computed } from "vue";
+
+const props = defineProps({
+  scheduleData: {
+    type: Object,
+    required: true
+  }
+});
+
+const emit = defineEmits(["update:scheduleData", "update"]);
+
+const localData = ref({ ...props.scheduleData });
+
+const paymentMethods = ["Pribadi", "BPJS", "Asuransi Swasta", "Perusahaan"];
+
+const polyclinics = [
+  "Poli Umum",
+  "Poli Gigi",
+  "Poli Anak",
+  "Poli Kandungan",
+  "Poli Penyakit Dalam",
+  "Poli THT"
+];
+
+const doctors = ref([]);
+const timeSlots = ref([]);
+const availableSlots = ref(0);
+
+const minDate = computed(() => {
+  const today = new Date();
+  return today.toISOString().split("T")[0];
+});
+
+const rules = {
+  required: (value) => !!value || "Field ini wajib diisi"
+};
+
+const onPolyclinicChange = (value) => {
+  // Reset doctor and time when polyclinic changes
+  localData.value.doctorName = "";
+  localData.value.consultationTime = "";
+
+  // Simulate loading doctors based on polyclinic
+  if (value) {
+    doctors.value = [
+      "dr. Ahmad Subhan, Sp.A",
+      "dr. Siti Nurhaliza",
+      "dr. Budi Santoso, Sp.PD",
+      "dr. Maria Christina"
+    ];
+  }
+};
+
+const onDoctorChange = (value) => {
+  // Reset time when doctor changes
+  localData.value.consultationTime = "";
+
+  // Simulate loading time slots
+  if (value && localData.value.consultationDate) {
+    loadTimeSlots();
+  }
+};
+
+const loadTimeSlots = () => {
+  // Simulate available time slots
+  timeSlots.value = [
+    { title: "08:00 - 08:30", value: "08:00" },
+    { title: "08:30 - 09:00", value: "08:30" },
+    { title: "09:00 - 09:30", value: "09:00" },
+    { title: "09:30 - 10:00", value: "09:30" },
+    { title: "10:00 - 10:30", value: "10:00" },
+    { title: "10:30 - 11:00", value: "10:30" }
+  ];
+  availableSlots.value = 6;
+};
+
+const resetSection = () => {
+  localData.value = {
+    paymentMethod: "Pribadi",
+    referralNumber: "",
+    polyclinicName: "",
+    doctorName: "",
+    consultationDate: "",
+    consultationTime: "",
+    slotAvailable: true
+  };
+  doctors.value = [];
+  timeSlots.value = [];
+};
+
+watch(
+  localData,
+  (newVal) => {
+    emit("update:scheduleData", newVal);
+    emit("update");
+  },
+  { deep: true }
+);
+
+watch(
+  () => localData.value.consultationDate,
+  (newVal) => {
+    if (newVal && localData.value.doctorName) {
+      loadTimeSlots();
+    }
+  }
+);
+</script>