first commit

components/apps/patient/form/SosialSection.vue

@@ -0,0 +1,145 @@
+<template>
+  <div>
+    <v-card-subtitle
+      class="bg-grey-lighten-4 text-subtitle-2 font-weight-medium py-2"
+    >
+      SOSIAL
+    </v-card-subtitle>
+
+    <v-card-text>
+      <v-row>
+        <!-- Agama -->
+        <v-col cols="12" md="6">
+          <v-select
+            v-model="localData.agama"
+            label="Agama"
+            :items="agamaOptions"
+            variant="outlined"
+            density="compact"
+          />
+        </v-col>
+
+        <!-- Status Pernikahan -->
+        <v-col cols="12" md="6">
+          <v-select
+            v-model="localData.statusPernikahan"
+            label="Status Pernikahan"
+            :items="statusPernikahanOptions"
+            variant="outlined"
+            density="compact"
+          />
+        </v-col>
+
+        <!-- Pendidikan Terakhir -->
+        <v-col cols="12" md="6">
+          <v-select
+            v-model="localData.pendidikanTerakhir"
+            label="Pendidikan Terakhir"
+            :items="pendidikanOptions"
+            variant="outlined"
+            density="compact"
+          />
+        </v-col>
+
+        <!-- Pekerjaan -->
+        <v-col cols="12" md="6">
+          <v-select
+            v-model="localData.pekerjaan"
+            label="Pekerjaan"
+            :items="pekerjaanOptions"
+            variant="outlined"
+            density="compact"
+          />
+        </v-col>
+
+        <!-- Bahasa yang Dikuasai -->
+        <v-col cols="12" md="6">
+          <v-text-field
+            v-model="localData.bahasaDikuasai"
+            label="Bahasa yang Dikuasai"
+            placeholder="Bahasa yang Dikuasai"
+            variant="outlined"
+            density="compact"
+          />
+        </v-col>
+
+        <!-- Suku/Etnis -->
+        <v-col cols="12" md="6">
+          <v-text-field
+            v-model="localData.sukuEtnis"
+            label="Suku/Etnis"
+            placeholder="Suku/Etnis"
+            variant="outlined"
+            density="compact"
+          />
+        </v-col>
+      </v-row>
+    </v-card-text>
+  </div>
+</template>
+
+<script setup>
+import { ref, watch } from "vue";
+
+const props = defineProps({
+  formData: {
+    type: Object,
+    required: true
+  }
+});
+
+const emit = defineEmits(["update:formData"]);
+
+const localData = ref({ ...props.formData });
+
+const agamaOptions = [
+  "Islam",
+  "Kristen",
+  "Katolik",
+  "Hindu",
+  "Buddha",
+  "Konghucu",
+  "Lainnya"
+];
+
+const statusPernikahanOptions = [
+  { title: "Belum Menikah", value: "belum_menikah" },
+  { title: "Menikah", value: "menikah" },
+  { title: "Cerai Hidup", value: "cerai_hidup" },
+  { title: "Cerai Mati", value: "cerai_mati" }
+];
+
+const pendidikanOptions = [
+  "Tidak Sekolah",
+  "SD",
+  "SMP",
+  "SMA/SMK",
+  "D1",
+  "D3",
+  "D4/S1",
+  "S2",
+  "S3"
+];
+
+const pekerjaanOptions = [
+  "PNS",
+  "TNI/Polri",
+  "Pegawai Swasta",
+  "Wiraswasta",
+  "Petani",
+  "Nelayan",
+  "Buruh",
+  "Ibu Rumah Tangga",
+  "Pelajar/Mahasiswa",
+  "Tidak Bekerja",
+  "Lainnya"
+];
+
+watch(
+  localData,
+  (newVal) => {
+    emit("update:formData", newVal);
+  },
+  { deep: true }
+);
+</script>