@muflih_kh/profile-ui 1.0.0

package/src/components/ParentModal.vue

@@ -0,0 +1,276 @@
+<template>
+  <div v-if="value" class="modal fade show d-block" tabindex="-1" style="background: rgba(0,0,0,0.5);">
+    <div class="modal-dialog modal-dialog-scrollable modal-lg">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title">
+            {{ isEdit ? 'Edit Data Orang Tua/Wali' : 'Tambah Data Orang Tua/Wali' }}
+          </h5>
+          <button @click="close" type="button" class="btn-close"></button>
+        </div>
+        <div class="modal-body">
+          <div v-if="loading" class="text-center py-4">
+            <div class="spinner-border" role="status">
+              <span class="visually-hidden">Loading...</span>
+            </div>
+          </div>
+          <div v-else class="row g-3">
+            <!-- Hubungan Keluarga -->
+            <div class="col-12">
+              <label class="form-label fw-semibold">
+                Hubungan Keluarga <span class="text-danger">*</span>
+              </label>
+              <select v-model="formData.family_status" class="form-select" @change="changeFamilyStatus">
+                <option value="">Pilih hubungan</option>
+                <option value="father">Ayah</option>
+                <option value="mother">Ibu</option>
+                <option value="guardian">Wali</option>
+              </select>
+              <small class="form-text text-danger" v-if="errors.family_status">
+                {{ errors.family_status }}
+              </small>
+            </div>
+
+            <!-- Nama -->
+            <div class="col-12">
+              <label class="form-label fw-semibold">
+                Nama Lengkap <span class="text-danger">*</span>
+              </label>
+              <input v-model="formData.name" type="text" class="form-control" placeholder="Masukkan nama lengkap"
+                style="text-transform: uppercase" @input="formData.name = $event.target.value.toUpperCase()" />
+              <small class="form-text text-danger" v-if="errors.name">{{ errors.name }}</small>
+            </div>
+
+            <!-- NIK -->
+            <div class="col-12">
+              <label class="form-label fw-semibold">
+                NIK (Nomor Induk Kependudukan) <span class="text-danger">*</span>
+              </label>
+              <input v-model="formData.national_id" type="text" class="form-control" placeholder="Masukkan 16 digit NIK"
+                maxlength="16">
+              <small class="form-text text-danger" v-if="errors.national_id">
+                {{ errors.national_id }}
+              </small>
+            </div>
+
+            <!-- Status -->
+            <div class="col-12">
+              <label class="form-label fw-semibold">
+                Status <span class="text-danger">*</span>
+              </label>
+              <select v-model="formData.status" class="form-select">
+                <option value="">Pilih status</option>
+                <option value="hidup">Masih Hidup</option>
+                <option value="meninggal">Sudah Meninggal</option>
+              </select>
+              <small class="form-text text-danger" v-if="errors.status">{{ errors.status }}</small>
+            </div>
+
+            <!-- Family Relation (for Guardian) -->
+            <div class="col-12" v-if="formData.family_status == 'guardian' && formData.status !== 'meninggal'">
+              <label class="form-label fw-semibold">
+                Hubungan Keluarga <span class="text-danger">*</span>
+              </label>
+              <input v-model="formData.family_relation" type="text" class="form-control" placeholder="Contoh: Paman">
+              <small class="form-text text-danger" v-if="errors.family_relation">
+                {{ errors.family_relation }}
+              </small>
+            </div>
+
+            <!-- Pendidikan -->
+            <div class="col-12" v-if="formData.status !== 'meninggal'">
+              <label class="form-label fw-semibold">
+                Pendidikan Terakhir <span class="text-danger">*</span>
+              </label>
+              <select v-model="formData.education" class="form-select">
+                <option value="">Pilih pendidikan terakhir</option>
+                <option v-for="(label, value) in educations" :key="value" :value="value">
+                  {{ label }}
+                </option>
+              </select>
+              <small class="form-text text-danger" v-if="errors.education">
+                {{ errors.education }}
+              </small>
+            </div>
+
+            <!-- Pekerjaan -->
+            <div class="col-12" v-if="formData.status !== 'meninggal'">
+              <label class="form-label fw-semibold">
+                Pekerjaan <span class="text-danger">*</span>
+              </label>
+              <input v-model="formData.work" type="text" class="form-control" placeholder="Masukan pekerjaan">
+              <small class="form-text text-danger" v-if="errors.work">{{ errors.work }}</small>
+            </div>
+
+            <!-- Penghasilan -->
+            <div class="col-12" v-if="formData.status !== 'meninggal'">
+              <label class="form-label fw-semibold">
+                Penghasilan per Bulan <span class="text-danger">*</span>
+              </label>
+              <select v-model="formData.income" class="form-select">
+                <option value="">Pilih range penghasilan</option>
+                <option v-for="(label, value) in salaries" :key="value" :value="value">
+                  {{ label }}
+                </option>
+              </select>
+              <small class="form-text text-danger" v-if="errors.income">{{ errors.income }}</small>
+            </div>
+
+            <!-- No HP -->
+            <div class="col-12" v-if="formData.status !== 'meninggal'">
+              <label class="form-label fw-semibold">
+                Nomor HP <span class="text-danger">*</span>
+              </label>
+              <input v-model="formData.phone" type="tel" class="form-control" placeholder="Contoh: 081234567890">
+              <small class="form-text text-danger" v-if="errors.phone">{{ errors.phone }}</small>
+            </div>
+
+            <!-- Alamat -->
+            <div class="col-12" v-if="formData.status !== 'meninggal'">
+              <label class="form-label fw-semibold">
+                Alamat Lengkap <span class="text-danger">*</span>
+              </label>
+              <textarea v-model="formData.address" class="form-control" rows="3"
+                placeholder="Masukan alamat lengkap"></textarea>
+              <small class="form-text text-danger" v-if="errors.address">{{ errors.address }}</small>
+            </div>
+          </div>
+        </div>
+
+        <div class="modal-footer">
+          <button @click="save" type="button" class="btn btn-primary rounded-pill px-4">
+            Simpan
+          </button>
+          <button @click="close" type="button" class="btn btn-outline-secondary rounded-pill px-4">
+            Batal
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getParentByStatus, addOrUpdateParent } from '../api/profileApi';
+import { showToast } from '../utils/toast';
+
+export default {
+  name: 'ParentModal',
+  props: {
+    value: {
+      type: Boolean,
+      default: false
+    },
+    parent: {
+      type: Object,
+      default: null
+    },
+    salaries: {
+      type: Object,
+      required: true
+    },
+    educations: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      formData: {
+        family_status: '',
+        name: '',
+        status: '',
+        national_id: '',
+        education: '',
+        work: '',
+        income: '',
+        phone: '',
+        address: '',
+        family_relation: ''
+      },
+      errors: {},
+      loading: false
+    };
+  },
+  computed: {
+    isEdit() {
+      return !!this.parent;
+    }
+  },
+  watch: {
+    value(newVal) {
+      if (newVal) {
+        if (this.parent) {
+          this.formData = { ...this.parent };
+        } else {
+          this.resetForm();
+        }
+      }
+    }
+  },
+  mounted() {
+    this.$root.$on('set-family-status', (status) => {
+      this.formData.family_status = status;
+      this.changeFamilyStatus();
+    });
+  },
+  beforeDestroy() {
+    this.$root.$off('set-family-status');
+  },
+  methods: {
+    resetForm() {
+      this.formData = {
+
+      };
+      this.errors = {};
+    },
+    async changeFamilyStatus() {
+      if (!this.formData.family_status) return;
+      this.loading = true;
+      try {
+        const response = await getParentByStatus(this.formData.family_status);
+        if (response.data.data) {
+          this.formData = response.data.data;
+        }
+      } catch (error) {
+        console.error('Error fetching parent data:', error);
+      } finally {
+        this.loading = false;
+      }
+    },
+    async save() {
+      this.errors = {};
+      try {
+        await addOrUpdateParent(this.formData.family_status, this.formData);
+        showToast({
+          icon: 'success',
+          title: 'Success',
+          text: 'Data orang tua/wali berhasil disimpan.'
+        });
+        this.$emit('save');
+        this.close();
+        if (this.$route.query.r) {
+          this.$router.push(this.$route.query.r);
+        }
+      } catch (error) {
+        this.errors = error.response?.data?.errors || {};
+        showToast({
+          icon: 'error',
+          title: 'Error',
+          text: 'Gagal menyimpan data: ' + error.response?.data?.user_message
+        });
+      }
+    },
+    close() {
+      this.resetForm();
+      this.$emit('input', false);
+    }
+  }
+};
+</script>
+
+<style scoped>
+.modal.show {
+  display: block;
+}
+</style>

package/src/components/PersonalDataEditModal.vue

@@ -0,0 +1,256 @@
+<template>
+  <div v-if="value" class="modal fade show d-block" tabindex="-1" style="background: rgba(0,0,0,0.5);">
+    <div class="modal-dialog modal-dialog-scrollable modal-lg">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title">Edit Data Pribadi</h5>
+          <button @click="close" type="button" class="btn-close"></button>
+        </div>
+        <div class="modal-body">
+          <div class="row g-3">
+            <div class="col-md-6">
+              <label class="form-label fw-semibold">Nama Lengkap</label>
+              <input type="text" class="form-control" v-model="formData.name" placeholder="Nama Lengkap"
+                style="text-transform: uppercase" @input="formData.name = $event.target.value.toUpperCase()" />
+            </div>
+            <div class="col-md-6">
+              <label class="form-label fw-semibold">Nama Panggilan</label>
+              <input type="text" class="form-control" v-model="formData.nick_name" placeholder="Nama Panggilan"
+                style="text-transform: uppercase" @input="formData.nick_name = $event.target.value.toUpperCase()" />
+            </div>
+            <div class="col-md-6">
+              <label class="form-label fw-semibold">Email</label>
+              <input type="email" class="form-control" v-model="formData.email" placeholder="Email" readonly />
+            </div>
+            <div class="col-md-6">
+              <label class="form-label fw-semibold">Phone</label>
+              <input type="text" class="form-control" v-model="formData.phone" placeholder="No HP"
+                @input="formatPhone" />
+            </div>
+            <div class="col-md-6">
+              <label class="form-label fw-semibold">NIK</label>
+              <input type="text" class="form-control" v-model="formData.national_id" placeholder="16 digit NIK"
+                maxlength="16" />
+            </div>
+            <div class="col-md-6">
+              <label class="form-label fw-semibold">No KK</label>
+              <input type="text" class="form-control" v-model="formData.family_national_id" placeholder="16 digit No KK"
+                maxlength="16" />
+            </div>
+            <div class="col-md-6">
+              <label class="form-label fw-semibold">Tempat Lahir</label>
+              <input type="text" class="form-control" v-model="formData.place_of_birth" placeholder="Tempat Lahir" />
+            </div>
+            <div class="col-md-6">
+              <label class="form-label fw-semibold">Tanggal Lahir</label>
+              <DatePicker v-model="formData.birth_date" format="YYYY-MM-DD" value-type="format" @input="hitungUmur" />
+              <div v-if="ageInfo.age !== null" class="mt-2">
+                <small :class="isAgeRestricted ? 'text-danger' : 'text-muted'">
+                  Umur per 31 Juli {{ currentYear }}: <strong>{{ ageInfo.text }}</strong>
+                </small>
+                <div v-if="isAgeRestricted" class="text-danger mt-1">
+                  <small><i class="bi bi-exclamation-circle"></i> Tidak dapat menyimpan data untuk usia 21 tahun atau
+                    lebih</small>
+                </div>
+              </div>
+              <div v-if="loadingAge" class="mt-2">
+                <small class="text-muted">Menghitung umur...</small>
+              </div>
+            </div>
+            <div class="col-md-6">
+              <label class="form-label fw-semibold">Jenis Kelamin</label>
+              <div>
+                <input type="radio" v-model="formData.sex" value="1" id="male" />
+                <label for="male">Laki-Laki</label>
+                <input type="radio" v-model="formData.sex" value="2" id="female" class="ms-3" />
+                <label for="female">Perempuan</label>
+              </div>
+            </div>
+            <div class="col-md-12">
+              <label class="form-label fw-semibold">Alamat Lengkap</label>
+              <textarea class="form-control" v-model="formData.address" placeholder="Alamat Lengkap"
+                rows="3"></textarea>
+            </div>
+            <div class="col-md-12">
+              <label class="form-label fw-semibold">Riwayat Penyakit</label>
+              <textarea class="form-control" v-model="formData.medical_history" placeholder="Riwayat Penyakit"
+                rows="3"></textarea>
+            </div>
+            <div class="col-md-12">
+              <label class="form-label fw-semibold">Kabupaten/Kota</label>
+              <v-select v-model="formData.location" :options="locations"
+                placeholder="Ketik untuk mencari kabupaten/kota..." @search="handleSearch" :filterable="false">
+                <template #no-options>
+                  Ketik untuk mencari kabupaten/kota...
+                </template>
+              </v-select>
+            </div>
+            <div class="col-md-12">
+              <SgFileUploader v-model="formData.national_card" label="Upload KTP" />
+            </div>
+          </div>
+        </div>
+        <div class="modal-footer">
+          <button v-if="!isAgeRestricted" @click="save" type="button" class="btn btn-primary rounded-pill px-4">
+            Simpan
+          </button>
+          <button @click="close" type="button" class="btn btn-outline-secondary rounded-pill px-4">
+            Batal
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import DatePicker from "vue2-datepicker";
+import "vue2-datepicker/index.css";
+import vSelect from 'vue-select';
+import 'vue-select/dist/vue-select.css';
+import SgFileUploader from '../components/SgFileUploader.vue';
+import { checkAge } from '../api/profileApi';
+
+export default {
+  name: 'PersonalDataEditModal',
+  components: {
+    DatePicker,
+    vSelect,
+    SgFileUploader
+  },
+  props: {
+    value: {
+      type: Boolean,
+      default: false
+    },
+    user: {
+      type: Object,
+      required: true
+    },
+    locations: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      formData: {},
+      ageInfo: {
+        age: null,
+        text: null
+      },
+      loadingAge: false,
+      currentYear: new Date().getFullYear()
+    };
+  },
+  watch: {
+    value(newVal) {
+      if (newVal) {
+        this.formData = { ...this.user };
+        if (this.formData.birth_date) {
+          this.hitungUmur();
+        }
+      }
+    }
+  },
+  computed: {
+    isAgeRestricted() {
+      const res = (Array.isArray(this.user.role) ? this.user.role.includes('user') || this.user.role.includes('c_thalabah') : this.user.role === 'user' || this.user.role === 'c_thalabah') && this.ageInfo.age >= 21;
+      return res;
+    }
+  },
+  methods: {
+    formatPhone(event) {
+      this.formData.phone = event.target.value
+        .replace(/[^\d+]/g, '')
+        .replace(/(\d{4})/g, '$1 ');
+    },
+    handleSearch(search, loading) {
+      this.$emit('search-locations', search, loading);
+    },
+    async hitungUmur() {
+      if (!this.formData.birth_date) {
+        this.ageInfo.age = null;
+        return;
+      }
+
+      this.loadingAge = true;
+      try {
+        const response = await checkAge(this.formData.birth_date);
+        if (response.data && response.data.data) {
+          this.ageInfo.age = response.data.data.y;
+          this.ageInfo.text = response.data.data.text;
+        }
+      } catch (error) {
+        console.error('Error menghitung umur:', error);
+        this.ageInfo.age = null;
+        this.ageInfo.text = null;
+      } finally {
+        this.loadingAge = false;
+      }
+    },
+    save() {
+      if (this.isAgeRestricted) {
+        alert('Tidak dapat menyimpan data untuk usia 21 tahun atau lebih per 31 Juli ' + this.currentYear);
+        return;
+      }
+      this.$emit('save', this.formData);
+    },
+    close() {
+      this.$emit('input', false);
+    }
+  }
+};
+</script>
+
+<style scoped>
+.modal.show {
+  display: block;
+}
+
+.v-select {
+  width: 100%;
+}
+
+.v-select .vs__dropdown-toggle {
+  padding: 0.375rem 0.75rem;
+  border: 1px solid #ced4da;
+  border-radius: 0.25rem;
+}
+
+.v-select .vs__search {
+  margin: 0;
+  padding: 0;
+  border: none;
+}
+
+.v-select .vs__search:focus {
+  outline: none;
+}
+
+.v-select .vs__dropdown-menu {
+  border: 1px solid #ced4da;
+  border-radius: 0.25rem;
+  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
+  max-height: 250px;
+  overflow-y: auto;
+}
+
+.v-select .vs__dropdown-option {
+  padding: 0.5rem 0.75rem;
+}
+
+.v-select .vs__dropdown-option--highlight {
+  background: #0d6efd;
+  color: white;
+}
+
+.v-select .vs__selected {
+  margin: 0;
+  padding: 0;
+}
+
+.v-select .vs__clear {
+  margin-right: 5px;
+}
+</style>

package/src/components/PreviewModal.vue

@@ -0,0 +1,55 @@
+<template>
+  <div class="modal fade" :class="{ 'show': value }" :style="{ display: value ? 'block' : 'none' }" tabindex="-1"
+    aria-labelledby="previewModalLabel" aria-hidden="true">
+    <div class="modal-dialog modal-dialog-centered">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title" id="previewModalLabel">Preview Dokumen</h5>
+          <button type="button" class="btn-close" @click="close" aria-label="Close"></button>
+        </div>
+        <div class="modal-body">
+          <img v-if="url" :src="url" class="img-fluid" referrerpolicy="no-referrer" alt="Preview" />
+          <div v-else class="text-center py-4">
+            <p class="text-muted">Tidak ada dokumen untuk ditampilkan</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'PreviewModal',
+  props: {
+    value: {
+      type: Boolean,
+      default: false
+    },
+    url: {
+      type: String,
+      default: null
+    }
+  },
+  mounted () {
+    this.$root.$on('show-preview', (url) => {
+      this.$emit('input', true);
+      this.$emit('update:url', url);
+    });
+  },
+  beforeDestroy () {
+    this.$root.$off('show-preview');
+  },
+  methods: {
+    close () {
+      this.$emit('input', false);
+    }
+  }
+};
+</script>
+
+<style scoped>
+.modal.show {
+  display: block;
+}
+</style>