@muflih_kh/profile-ui 1.0.0

package/src/components/Profile.vue

@@ -0,0 +1,171 @@
+<template>
+  <div class="min-vh-100 bg-light">
+    <ProfileHeader :user="me" @update-profile="handleProfileUpdate" @update-photo="handlePhotoUpdate"
+      @reset-password="handleResetPassword" />
+
+    <ProfilePersonalData :user="me" :locations="locations" @update="handleProfileUpdate"
+      @search-locations="searchLocations" />
+
+    <ProfileVerification :user="me" @verified="handleVerified" />
+
+    <ProfileEducation :educations="userEducation" @refresh="getUserEducation" />
+
+    <ProfileParents :parents="parentsData" @refresh="getParents" />
+
+    <PreviewModal v-model="showPreview" :url="previewUrl" />
+  </div>
+</template>
+
+<script>
+import { 
+  getProfile, 
+  getParents as apiGetParents, 
+  getEducations, 
+  getLocations, 
+  updateProfile, 
+  changePassword 
+} from '../api/profileApi';
+import { showToast } from '../utils/toast';
+import ProfileHeader from './ProfileHeader.vue';
+import ProfilePersonalData from './ProfilePersonalData.vue';
+import ProfileVerification from './ProfileVerification.vue';
+import ProfileEducation from './ProfileEducation.vue';
+import ProfileParents from './ProfileParents.vue';
+import PreviewModal from './PreviewModal.vue';
+
+export default {
+  name: 'ProfilePage',
+  components: {
+    ProfileHeader,
+    ProfilePersonalData,
+    ProfileVerification,
+    ProfileEducation,
+    ProfileParents,
+    PreviewModal
+  },
+  data() {
+    return {
+      me: {},
+      userEducation: null,
+      parentsData: null,
+      locations: [],
+      showPreview: false,
+      previewUrl: null
+    };
+  },
+  async created() {
+    await this.getMe();
+    await this.getParents();
+    await this.getUserEducation();
+    this.handleQueryParams();
+  },
+  methods: {
+    async getMe() {
+      try {
+        const response = await getProfile();
+        this.me = response.data.data;
+        localStorage.setItem("__putm.sia.user", JSON.stringify(this.me));
+      } catch (error) {
+        console.error(error);
+      }
+    },
+    async getParents() {
+      try {
+        const response = await apiGetParents();
+        this.parentsData = response.data.data;
+      } catch (error) {
+        console.error(error);
+      }
+    },
+    async getUserEducation() {
+      try {
+        const response = await getEducations();
+        this.userEducation = response.data;
+      } catch (error) {
+        console.error(error);
+      }
+    },
+    async searchLocations(search, loading) {
+      if (search.length < 3) return;
+      loading(true);
+      try {
+        // getLocations tidak menerima parameter, jadi gunakan axios manual jika perlu search param
+        const response = await getLocations();
+        // Jika API mendukung query param, ubah getLocations agar menerima param search
+        // const response = await getLocations(search);
+        this.locations = response.data.data || [];
+      } catch (error) {
+        console.error('Error searching locations:', error);
+      } finally {
+        loading(false);
+      }
+    },
+    async handleProfileUpdate(updatedData) {
+      try {
+        await updateProfile(updatedData);
+        showToast({
+          icon: 'success',
+          title: 'Success',
+          text: 'Data profile berhasil disimpan.'
+        });
+        await this.getMe();
+        await this.redirectIfNeeded();
+        if (this.$route.query.r) {
+          this.$router.push(this.$route.query.r);
+        }
+      } catch (error) {
+        showToast({
+          icon: 'error',
+          title: 'Error',
+          text: 'Gagal menyimpan data profile: ' + error.response.data.user_message
+        });
+      }
+    },
+    async handlePhotoUpdate(photo) {
+      this.me.photo = photo;
+      await this.handleProfileUpdate(this.me);
+      if (this.$route.query.r) {
+        this.$router.push(this.$route.query.r);
+      }
+    },
+    handleVerified() {
+      this.getMe();
+    },
+    handleQueryParams() {
+      // Handle query parameters untuk auto-open modal
+      const { data, type } = this.$route.query;
+      if (data) {
+        this.$nextTick(() => {
+          // Emit event ke child components
+          this.$root.$emit('open-modal', { type: data, subType: type });
+        });
+      }
+    },
+    async redirectIfNeeded() {
+      if (this.$route.query.r) {
+        this.$router.push(this.$route.query.r);
+      }
+    },
+    async handleResetPassword(passwordForm) {
+      try {
+        await changePassword(passwordForm);
+        showToast({
+          icon: 'success',
+          title: 'Success',
+          text: 'Password berhasil diubah.'
+        });
+        await this.getMe();
+        await this.redirectIfNeeded();
+        if (this.$route.query.r) {
+          this.$router.push(this.$route.query.r);
+        }
+      } catch (error) {
+        showToast({
+          icon: 'error',
+          title: 'Gagal mengubah password: ' + error.response.data.user_message
+        });
+      }
+    }
+  }
+};
+</script>

package/src/components/ProfileEducation.vue

@@ -0,0 +1,116 @@
+<template>
+  <div class="card shadow-sm">
+    <div class="card-body border-top">
+      <div class="d-flex justify-content-between align-items-center mb-4">
+        <h3>Pendidikan</h3>
+        <div class="d-flex gap-2">
+          <button class="btn btn-light rounded-circle" @click="showAddModal = true">
+            <i class="uil uil-plus"></i>
+          </button>
+        </div>
+      </div>
+
+      <div class="row g-4">
+        <div class="col-12" v-for="(edu, k) in educations?.data" :key="k">
+          <div class="d-flex gap-3">
+            <div class="flex-shrink-0 d-flex align-items-center justify-content-center"
+              style="width: 48px; height: 48px;">
+              <a class="link" @click="showPreview(edu.certificate?.url)">
+                <img v-if="edu.certificate" :src="edu.certificate?.url" alt="Ijazah"
+                  style="width: 40px; height: 60px; object-fit: cover; object-position: center;" />
+                <span v-else
+                  style="width: 40px; height: 60px; display: flex; align-items: center; justify-content: center;">
+                  <i class="uil uil-file-alt"></i>
+                </span>
+              </a>
+            </div>
+            <div class="flex-fill">
+              <h5 class="mb-1">{{ edu.previous_school }}</h5>
+              <p class="text-muted small mb-1">Rata-rata: {{ edu.score }}</p>
+              <p class="text-muted small mb-1">
+                Jurusan: {{ edu.major }} - {{ edu.nisn }} · {{ edu.year_graduated }}
+              </p>
+              <span class="text-muted small" v-if="edu.degree">{{ edu.degree }}</span>
+              <span v-if="edu.degree && edu.gpa">-</span>
+              <span class="text-muted small" v-if="edu.gpa">IPK: {{ edu.gpa }}</span>
+            </div>
+            <button class="btn" @click="editEducation(edu)">
+              <i class="uil uil-edit"></i>
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <button class="btn btn-light w-100 mt-4" v-if="educations?.meta?.has_next_page" @click="loadMore">
+        Lihat Lebih Banyak
+        <i class="uil uil-angle-down ms-2"></i>
+      </button>
+    </div>
+
+    <!-- Add/Edit Education Modal -->
+    <EducationModal v-model="showAddModal" :education="selectedEducation" @save="handleSave"
+      @show-preview="showPreview" />
+  </div>
+</template>
+
+<script>
+import EducationModal from './EducationModal.vue';
+
+export default {
+  name: 'ProfileEducation',
+  components: {
+    EducationModal
+  },
+  props: {
+    educations: {
+      type: Object,
+      default: null
+    }
+  },
+  data () {
+    return {
+      showAddModal: false,
+      selectedEducation: null
+    };
+  },
+  mounted () {
+    this.$root.$on('open-modal', ({ type }) => {
+      if (type === 'education') {
+        this.showAddModal = true;
+      }
+    });
+  },
+  beforeDestroy () {
+    this.$root.$off('open-modal');
+  },
+  methods: {
+    editEducation (edu) {
+      this.selectedEducation = edu;
+      this.showAddModal = true;
+    },
+    handleSave () {
+      this.selectedEducation = null;
+      this.showAddModal = false;
+      this.$emit('refresh');
+    },
+    loadMore () {
+      this.$emit('refresh', true);
+    },
+    showPreview (url) {
+      this.$root.$emit('show-preview', url);
+    }
+  }
+};
+</script>
+
+<style scoped>
+.link {
+  cursor: pointer;
+  color: #0d6efd;
+  text-decoration: none;
+}
+
+.link:hover {
+  text-decoration: underline;
+}
+</style>

package/src/components/ProfileHeader.vue

@@ -0,0 +1,182 @@
+<template>
+  <div class="card shadow-sm">
+    <!-- Cover Photo -->
+    <div class="position-relative"
+      style="height: 200px; background: linear-gradient(to right, rgb(11, 171, 224), rgb(6, 10, 107));">
+    </div>
+
+    <!-- Profile Section -->
+    <div class="card-body">
+      <!-- Profile Picture -->
+      <div class="position-relative" style="margin-top: -190px; margin-bottom: 20px;">
+        <div class="d-inline-block bg-white p-2 shadow-lg position-relative">
+          <div class="d-flex align-items-center justify-center position-relative"
+            style="width: 180px; height: 230px; background: linear-gradient(135deg, #64748b, #64748b);">
+            <img v-if="user.photo" :src="user.photo?.url" alt="Profile Picture"
+              style="width: 180px; height: 230px; object-fit: cover; object-position: center;" />
+            <img v-else
+              :src="`https://ui-avatars.com/api/?name=${user.name}&size=180&background=64748b&color=ffffff&rounded=false`"
+              alt="Profile Picture" style="width: 180px; height: 230px; object-fit: cover; object-position: center;" />
+            <button class="btn btn-light position-absolute rounded-circle border border-white shadow-sm"
+              style="bottom: 10px; right: 10px; z-index: 2;" @click="showImageCropModal = true">
+              <i class="uil uil-camera"></i>
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <!-- Name and Title -->
+      <div class="d-flex justify-content-between align-items-start mb-3">
+        <div>
+          <div class="d-flex align-items-center gap-2 mb-2">
+            <h2 class="mb-0">{{ user.name }}</h2>
+          </div>
+          <p class="text-dark mb-2">{{ user?.student?.nim }}</p>
+        </div>
+      </div>
+
+      <!-- Education and Work -->
+      <div class="mb-4">
+        <div class="d-flex align-items-center justify-content-between gap-2 mb-2">
+          <div class="d-flex align-items-center gap-2">
+            <div class="bg-primary rounded d-flex align-items-center justify-content-center"
+              style="width: 30px; height: 30px;">
+              <i class="bg-primary rounded" style="width: 20px; height: 20px;"></i>
+            </div>
+            <span class="fw-medium">{{ user?.student?.campus?.label }}</span>
+            <div class="bg-warning rounded d-flex align-items-center justify-content-center"
+              style="width: 30px; height: 30px;">
+              <span class="text-white fw-bold small"></span>
+            </div>
+            <span class="fw-medium">{{ user?.student?.school_year?.label }}</span>
+            <div class="bg-success rounded d-flex align-items-center justify-content-center"
+              style="width: 30px; height: 30px;">
+              <span class="text-white fw-bold small"></span>
+            </div>
+            <span class="fw-medium">{{ user?.student?.semester?.slug }}</span>
+          </div>
+          <button class="btn btn-outline-primary btn-sm" @click="handleResetPassword">
+            <i class="uil uil-lock-alt me-1"></i>
+            Reset Password
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <!-- Image Crop Modal -->
+    <ImageCropModal v-model="showImageCropModal" :photo="user.photo" @save="handlePhotoSave" />
+
+    <!-- Reset Password Modal -->
+    <div class="modal fade" :class="{ 'show d-block': showResetPasswordModal }" tabindex="-1"
+      style="background-color: rgba(0,0,0,0.5);" v-if="showResetPasswordModal">
+      <div class="modal-dialog modal-dialog-centered">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h5 class="modal-title">Reset Password</h5>
+            <button type="button" class="btn-close" @click="closeResetPasswordModal"></button>
+          </div>
+          <div class="modal-body">
+            <form @submit.prevent="submitResetPassword">
+              <div class="mb-3" v-if="user && user.password">
+                <label for="current_password" class="form-label">Old Password</label>
+                <div class="input-group">
+                  <input :type="showcurrent_password ? 'text' : 'password'" class="form-control" id="current_password"
+                    v-model="passwordForm.current_password" required placeholder="Enter old password">
+                  <button class="btn btn-outline-secondary" type="button"
+                    @click="showcurrent_password = !showcurrent_password">
+                    <i :class="showcurrent_password ? 'uil uil-eye-slash' : 'uil uil-eye'"></i>
+                  </button>
+                </div>
+              </div>
+              <div class="mb-3">
+                <label for="new_password" class="form-label">New Password</label>
+                <div class="input-group">
+                  <input :type="shownew_password ? 'text' : 'password'" class="form-control" id="new_password"
+                    v-model="passwordForm.new_password" required placeholder="Enter new password" minlength="8">
+                  <button class="btn btn-outline-secondary" type="button" @click="shownew_password = !shownew_password">
+                    <i :class="shownew_password ? 'uil uil-eye-slash' : 'uil uil-eye'"></i>
+                  </button>
+                </div>
+                <small class="text-muted">Password must be at least 8 characters</small>
+              </div>
+              <div class="mb-3">
+                <label for="new_password_confirmation" class="form-label">Confirm New Password</label>
+                <div class="input-group">
+                  <input :type="shownew_password_confirmation ? 'text' : 'password'" class="form-control"
+                    id="new_password_confirmation" v-model="passwordForm.new_password_confirmation" required
+                    placeholder="Confirm new password">
+                  <button class="btn btn-outline-secondary" type="button"
+                    @click="shownew_password_confirmation = !shownew_password_confirmation">
+                    <i :class="shownew_password_confirmation ? 'uil uil-eye-slash' : 'uil uil-eye'"></i>
+                  </button>
+                </div>
+                <small
+                  v-if="passwordForm.new_password && passwordForm.new_password_confirmation && passwordForm.new_password !== passwordForm.new_password_confirmation"
+                  class="text-danger">Passwords do not match</small>
+              </div>
+            </form>
+          </div>
+          <div class="modal-footer">
+            <button type="button" class="btn btn-secondary" @click="closeResetPasswordModal">Cancel</button>
+            <button type="button" class="btn btn-primary" @click="submitResetPassword" :disabled="!isPasswordFormValid">
+              Reset Password
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import ImageCropModal from './ImageCropModal.vue';
+
+export default {
+  name: 'ProfileHeader',
+  components: {
+    ImageCropModal
+  },
+  props: {
+    user: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      showImageCropModal: false,
+      showResetPasswordModal: false,
+      passwordForm: {
+        current_password: '',
+        new_password: '',
+        new_password_confirmation: ''
+      },
+      showcurrent_password: false,
+      shownew_password: false,
+      shownew_password_confirmation: false
+    };
+  },
+  computed: {
+    isPasswordFormValid() {
+      return this.passwordForm.new_password && this.passwordForm.new_password_confirmation && this.passwordForm.new_password == this.passwordForm.new_password_confirmation;
+    }
+  },
+  methods: {
+    handlePhotoSave(photo) {
+      this.$emit('update-photo', photo);
+      this.showImageCropModal = false;
+    },
+    handleResetPassword() {
+      this.showResetPasswordModal = true;
+    },
+    closeResetPasswordModal() {
+      this.showResetPasswordModal = false;
+    },
+    submitResetPassword() {
+      this.passwordForm.pass_available = this.user.password ? true : false;
+      this.$emit('reset-password', this.passwordForm);
+      this.closeResetPasswordModal();
+    }
+  }
+};
+</script>

package/src/components/ProfileParents.vue

@@ -0,0 +1,173 @@
+<template>
+  <div class="card shadow-sm">
+    <div class="card-body border-top">
+      <div class="d-flex justify-content-between align-items-center mb-4">
+        <h3>Data Orang Tua / Wali</h3>
+        <div class="d-flex gap-2">
+          <button @click="openDialog()" class="btn btn-success rounded-circle" title="Tambah Orang Tua/Wali">
+            <i class="uil uil-plus"></i>
+          </button>
+        </div>
+      </div>
+
+      <div class="row g-3">
+        <div v-for="parent in parents" :key="parent.id" class="col-12 mb-3">
+          <div>
+            <div class="mb-3">
+              <div class="d-flex justify-content-between align-items-start mb-3">
+                <div class="d-flex align-items-center gap-3">
+                  <div class="d-flex align-items-center justify-content-center flex-shrink-0"
+                    style="width: 48px; height: 48px; background: linear-gradient(135deg, #3b82f6, #2563eb);">
+                    <i class="uil uil-user text-white fs-5"></i>
+                  </div>
+                  <div>
+                    <div class="d-flex align-items-center gap-2 mb-1">
+                      <h5 class="mb-0">{{ parent.name }}</h5>
+                      <span class="badge bg-primary">{{ parent.family_status | parentStatus }}</span>
+                      <span class="badge bg-primary"
+                        v-if="parent.status == 'hidup' && parent.family_status == 'father'">Wali</span>
+                    </div>
+                    <p class="text-muted small mb-0">{{ parent.work }}</p>
+                  </div>
+                </div>
+                <button @click="openDialog(parent)" class="btn" title="Edit Data">
+                  <i class="uil uil-edit"></i>
+                </button>
+              </div>
+
+              <div class="row g-2 small">
+                <div class="col-md-6">
+                  <div class="d-flex">
+                    <span class="text-muted" style="width: 130px;">Status:</span>
+                    <span class="fw-medium">{{ parent.status }}</span>
+                  </div>
+                </div>
+                <div class="col-md-6">
+                  <div class="d-flex">
+                    <span class="text-muted" style="width: 130px;">NIK:</span>
+                    <span class="fw-medium">{{ parent.national_id | nationalIdFormat }}</span>
+                  </div>
+                </div>
+                <div class="col-md-6">
+                  <div class="d-flex">
+                    <span class="text-muted" style="width: 130px;">Pendidikan:</span>
+                    <span class="fw-medium">{{ educations[parent.education] }}</span>
+                  </div>
+                </div>
+                <div class="col-md-6">
+                  <div class="d-flex">
+                    <span class="text-muted" style="width: 130px;">Penghasilan:</span>
+                    <span class="fw-medium">{{ salaries[parent.income] }}</span>
+                  </div>
+                </div>
+                <div class="col-md-6">
+                  <div class="d-flex">
+                    <span class="text-muted" style="width: 130px;">No. HP:</span>
+                    <span class="fw-medium">{{ parent.phone | formatPhone }}</span>
+                  </div>
+                </div>
+                <div class="col-12">
+                  <div class="d-flex">
+                    <span class="text-muted flex-shrink-0" style="width: 130px;">Alamat:</span>
+                    <span class="fw-medium">{{ parent.address }}</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Info Message -->
+      <div class="alert alert-info d-flex gap-3 mt-3" role="alert">
+        <i class="uil uil-info-circle flex-shrink-0"></i>
+        <div>
+          <p class="fw-semibold mb-1">Informasi Penting:</p>
+          <p class="mb-0 small">Data orang tua/wali yang Anda masukkan akan dijaga kerahasiaannya
+            dan hanya digunakan untuk keperluan administrasi.</p>
+        </div>
+      </div>
+    </div>
+
+    <!-- Parent Modal -->
+    <ParentModal v-model="showParentDialog" :parent="editingParent" :salaries="salaries" :educations="educations"
+      @save="handleSave" />
+  </div>
+</template>
+
+<script>
+import ParentModal from './ParentModal.vue';
+
+export default {
+  name: 'ProfileParents',
+  components: {
+    ParentModal
+  },
+  props: {
+    parents: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data () {
+    return {
+      showParentDialog: false,
+      editingParent: null,
+      salaries: {
+        0: 'Kurang dari Rp 1.000.000',
+        1000000: 'Rp 1.000.000 - Rp 2.000.000',
+        2000000: 'Rp 2.000.000 - Rp 5.000.000',
+        5000000: 'Rp 5.000.000 - Rp 10.000.000',
+        10000000: 'Rp 10.000.000 - Rp 15.000.000',
+        15000000: 'Rp 15.000.000 - Rp 20.000.000',
+        20000000: 'Rp 20.000.000 - Rp 25.000.000',
+        25000000: 'Rp 25.000.000 - Rp 30.000.000',
+        30000000: 'Rp 30.000.000 - Rp 40.000.000',
+        40000000: 'Rp 40.000.000 - Rp 50.000.000',
+        50000000: 'Rp 50.000.000 - Rp 60.000.000',
+        60000000: 'Rp 60.000.000 - Rp 70.000.000',
+        70000000: 'Rp 70.000.000 - Rp 80.000.000',
+        80000000: 'Rp 80.000.000 - Rp 90.000.000',
+        90000000: 'Rp 90.000.000 - Rp 100.000.000',
+        100000000: 'Lebih dari Rp 100.000.000'
+      },
+      educations: {
+        sd: 'SD/Sederajat',
+        smp: 'SMP/Sederajat',
+        sma: 'SMA/Sederajat',
+        d3: 'Diploma (D3)',
+        d4: 'Diploma (D4)',
+        s1: 'Sarjana (S1)',
+        s2: 'Magister (S2)',
+        s3: 'Doktor (S3)'
+      }
+    };
+  },
+  mounted () {
+    this.$root.$on('open-modal', ({ type, subType }) => {
+      if (type === 'parent') {
+        this.showParentDialog = true;
+        if (subType) {
+          this.$nextTick(() => {
+            this.$root.$emit('set-family-status', subType);
+          });
+        }
+      }
+    });
+  },
+  beforeDestroy () {
+    this.$root.$off('open-modal');
+  },
+  methods: {
+    openDialog (parent = null) {
+      this.editingParent = parent;
+      this.showParentDialog = true;
+    },
+    handleSave () {
+      this.editingParent = null;
+      this.showParentDialog = false;
+      this.$emit('refresh');
+    }
+  }
+};
+</script>