@muflih_kh/profile-ui 1.0.0

package/src/components/ProfilePersonalData.vue

@@ -0,0 +1,135 @@
+<template>
+  <div class="card shadow-sm">
+    <div class="card-body">
+      <!-- Personal Data Section (View Only) -->
+      <div class="mb-4">
+        <div class="d-flex justify-content-between align-items-center mb-3">
+          <h4 class="fw-bold mb-0">Data Pribadi</h4>
+          <button class="btn btn-light rounded-circle" @click="showEditModal = true">
+            <i class="uil uil-edit"></i>
+          </button>
+        </div>
+        <div class="row g-3">
+          <div class="col-md-6">
+            <span class="text-muted">Nama Panggilan:</span>
+            <div class="fw-semibold">{{ user.nick_name || '-' }}</div>
+          </div>
+          <div class="col-md-6">
+            <span class="text-muted">Email:</span>
+            <div class="fw-semibold">{{ user.email || '-' }}</div>
+          </div>
+          <div class="col-md-6">
+            <span class="text-muted">NIK:</span>
+            <div class="fw-semibold">{{ user.national_id | nationalIdFormat }}</div>
+          </div>
+          <div class="col-md-6">
+            <span class="text-muted">No KK:</span>
+            <div class="fw-semibold">{{ user.family_national_id || '-' }}</div>
+          </div>
+          <div class="col-md-6">
+            <span class="text-muted">Kewarganegaraan:</span>
+            <div class="fw-semibold">{{ user.citizen?.label || '-' }}</div>
+          </div>
+          <div class="col-md-6">
+            <span class="text-muted">Negara:</span>
+            <div class="fw-semibold">{{ user.country?.label || '-' }}</div>
+          </div>
+          <div class="col-md-6">
+            <span class="text-muted">Phone:</span>
+            <div class="fw-semibold">{{ user.phone | formatPhone }}</div>
+          </div>
+          <div class="col-md-6">
+            <span class="text-muted">Tempat Lahir:</span>
+            <div class="fw-semibold">{{ user.place_of_birth || '-' }}</div>
+          </div>
+          <div class="col-md-6">
+            <span class="text-muted">Jenis Kelamin:</span>
+            <div class="fw-semibold">{{ user.sex | formatGender }}</div>
+          </div>
+          <div class="col-md-6">
+            <span class="text-muted">Tanggal Lahir:</span>
+            <div class="fw-semibold">{{ user.birth_date | formatDate }}</div>
+          </div>
+          <div class="col-md-6">
+            <span class="text-muted">KTP:</span>
+            <div v-if="user.national_card">
+              <a @click="$emit('show-preview', user.national_card?.url)" class="link">
+                <i class="uil uil-file-alt"></i> Lihat KTP
+              </a>
+            </div>
+            <div v-else class="fw-semibold">-</div>
+          </div>
+          <div class="col-md-12">
+            <span class="text-muted">Alamat:</span>
+            <div class="fw-semibold">{{ user.address || '-' }}</div>
+          </div>
+          <div class="col-md-12">
+            <span class="text-muted">Lokasi:</span>
+            <div class="fw-semibold">{{ user.location?.label || '-' }}</div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Modal Edit Data Pribadi -->
+      <PersonalDataEditModal v-model="showEditModal" :user="user" :locations="locations" @save="handleSave"
+        @search-locations="handleSearchLocations" />
+    </div>
+  </div>
+</template>
+
+<script>
+import PersonalDataEditModal from './PersonalDataEditModal.vue';
+
+export default {
+  name: 'ProfilePersonalData',
+  components: {
+    PersonalDataEditModal
+  },
+  props: {
+    user: {
+      type: Object,
+      required: true
+    },
+    locations: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data () {
+    return {
+      showEditModal: false
+    };
+  },
+  mounted () {
+    this.$root.$on('open-modal', ({ type }) => {
+      if (type === 'profile') {
+        this.showEditModal = true;
+      }
+    });
+  },
+  beforeDestroy () {
+    this.$root.$off('open-modal');
+  },
+  methods: {
+    handleSave (updatedData) {
+      this.$emit('update', updatedData);
+      this.showEditModal = false;
+    },
+    handleSearchLocations (search, loading) {
+      this.$emit('search-locations', search, loading);
+    }
+  }
+};
+</script>
+
+<style scoped>
+.link {
+  cursor: pointer;
+  color: #0d6efd;
+  text-decoration: none;
+}
+
+.link:hover {
+  text-decoration: underline;
+}
+</style>

package/src/components/ProfileVerification.vue

@@ -0,0 +1,118 @@
+<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>Verifikasi Akun</h3>
+      </div>
+
+      <div class="row g-4">
+        <!-- Email Verification -->
+        <div class="col-12">
+          <div class="d-flex gap-3">
+            <div class="flex-shrink-0">
+              <div class="d-flex align-items-center justify-content-center"
+                :class="user.email_verified_at ? 'bg-success' : 'bg-secondary'"
+                style="width: 48px; height: 48px; border-radius: 8px;">
+                <i class="uil uil-envelope text-white fs-5"></i>
+              </div>
+            </div>
+            <div class="flex-fill">
+              <div class="d-flex justify-content-between align-items-start">
+                <div>
+                  <h5 class="mb-1">Email</h5>
+                  <p class="text-muted small mb-1">{{ user.email || '-' }}</p>
+                  <span v-if="user.user_email && user.user_email.active" class="badge bg-success">
+                    <i class="uil uil-check"></i> Terverifikasi
+                  </span>
+                  <span v-else class="badge bg-warning text-dark">
+                    <i class="uil uil-exclamation-triangle"></i> Belum Terverifikasi
+                  </span>
+                </div>
+                <button v-if="!user.user_email || !user.user_email.active" class="btn btn-primary btn-sm rounded-pill"
+                  @click="openVerificationModal('email')">
+                  Verifikasi
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Phone Verification -->
+        <div class="col-12">
+          <div class="d-flex gap-3">
+            <div class="flex-shrink-0">
+              <div class="d-flex align-items-center justify-content-center"
+                :class="user.phone_verified_at ? 'bg-success' : 'bg-secondary'"
+                style="width: 48px; height: 48px; border-radius: 8px;">
+                <i class="uil uil-phone text-white fs-5"></i>
+              </div>
+            </div>
+            <div class="flex-fill">
+              <div class="d-flex justify-content-between align-items-start">
+                <div>
+                  <h5 class="mb-1">Nomor Telepon</h5>
+                  <p class="text-muted small mb-1">{{ user.phone | formatPhone }}</p>
+                  <span v-if="user.phone_verified_at" class="badge bg-success">
+                    <i class="uil uil-check"></i> Terverifikasi
+                  </span>
+                  <span v-else class="badge bg-warning text-dark">
+                    <i class="uil uil-exclamation-triangle"></i> Belum Terverifikasi
+                  </span>
+                </div>
+                <button v-if="!user.phone_verified_at" class="btn btn-primary btn-sm rounded-pill"
+                  @click="openVerificationModal('phone')">
+                  Verifikasi
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Info Message -->
+      <div class="alert alert-info d-flex gap-3 mt-4" 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">Verifikasi akun Anda untuk meningkatkan keamanan dan mengakses semua fitur aplikasi.</p>
+        </div>
+      </div>
+    </div>
+
+    <!-- OTP Modal -->
+    <OtpModal v-model="showOtpModal" :verification-type="verificationType" :email="user.email"
+      @verified="handleVerified" />
+  </div>
+</template>
+
+<script>
+import OtpModal from './OtpModal.vue';
+
+export default {
+  name: 'ProfileVerification',
+  components: {
+    OtpModal
+  },
+  props: {
+    user: {
+      type: Object,
+      required: true
+    }
+  },
+  data () {
+    return {
+      showOtpModal: false,
+      verificationType: ''
+    };
+  },
+  methods: {
+    openVerificationModal (type) {
+      this.verificationType = type;
+      this.showOtpModal = true;
+    },
+    handleVerified () {
+      this.$emit('verified');
+    }
+  }
+};
+</script>

package/src/components/SgFileUploader.vue

@@ -0,0 +1,355 @@
+<template>
+  <div class="mb-3">
+    <div v-if="editable">
+      <div class="label-row">
+        <label class="form-label fw-bold mb-0">{{ label }}</label>
+        <span v-if="templateUrl && previewType !== 'image'" class="template-link ms-2">
+          <a href="#" @click.prevent="downloadTemplate">
+            <div v-if="downloading" class="d-flex align-items-center">
+              <div class="spinner-border spinner-border-sm text-primary me-2" role="status">
+                <span class="visually-hidden">Loading...</span>
+              </div>
+              <span>Downloading...</span>
+            </div>
+            <div v-else class="d-flex align-items-center">
+              <svg width="18" height="18" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"
+                class="me-1">
+                <path d="M10 3v10m0 0l-4-4m4 4l4-4M4 17h12" stroke="#2d8cf0" stroke-width="2" stroke-linecap="round"
+                  stroke-linejoin="round" />
+              </svg>
+              Download Template
+            </div>
+          </a>
+        </span>
+      </div>
+      <input ref="fileInput" type="file" :accept="computedAccept" @change="onFileChange" style="display: none" />
+
+      <b-button variant="outline-secondary" @click="$refs.fileInput.click()" :disabled="uploading">
+        <i class="fa fa-upload me-1"></i>
+        {{ uploading ? 'Uploading...' : 'Upload' }}
+      </b-button>
+    </div>
+    <span v-if="error" class="error d-block mt-1">{{ errorMessage }}</span>
+
+    <div v-if="preview || (value && value.url)" class="mt-3 preview-container">
+      <template v-if="currentPreviewType === 'image'">
+        <img :src="currentPreviewUrl" :alt="label" class="preview-image" @click="openImageModal" />
+      </template>
+      <template v-else>
+        <a href="#" @click.prevent="openPreview" class="btn btn-sm btn-link p-0">
+          <svg width="18" height="18" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="me-1">
+            <path d="M10 4.5c-5 0-8 5.5-8 5.5s3 5.5 8 5.5 8-5.5 8-5.5-3-5.5-8-5.5zm0 7.5a2 2 0 100-4 2 2 0 000 4z"
+              stroke="#888" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round" />
+          </svg>
+          Lihat File{{ currentPreviewType === 'pdf' ? ' (PDF)' : '' }}
+        </a>
+      </template>
+    </div>
+
+    <!-- Modal Preview Image -->
+    <b-modal v-model="showImageModal" size="lg" centered hide-footer title="Preview Gambar">
+      <div class="text-center">
+        <img :src="currentPreviewUrl" :alt="label" class="modal-preview-image" />
+      </div>
+    </b-modal>
+  </div>
+</template>
+
+<script>
+import { uploadFile as apiUploadFile, downloadTemplate as apiDownloadTemplate } from '../api/profileApi';
+
+export default {
+  name: 'SgFileUploader',
+
+  props: {
+    label: {
+      type: String,
+      default: 'Upload File',
+    },
+    value: {
+      type: [Object, String, null],
+      default: null,
+    },
+    error: {
+      type: Boolean,
+      default: false,
+    },
+    errorMessage: {
+      type: String,
+      default: 'Wajib upload file',
+    },
+    endpoint: {
+      type: String,
+      default: '/api/v1/file/upload',
+    },
+    accept: {
+      type: String,
+      default: 'image/*',
+    },
+    templateUrl: {
+      type: String,
+      default: '',
+    },
+    templateLabel: {
+      type: String,
+      default: '',
+    },
+    templateType: {
+      type: String,
+      default: '',
+    },
+    wordOnly: {
+      type: Boolean,
+      default: false,
+    },
+    fileName: {
+      type: String,
+      default: null,
+    },
+    editable: {
+      type: Boolean,
+      default: true,
+    },
+  },
+
+  data() {
+    return {
+      preview: null,
+      previewType: null,
+      uploading: false,
+      downloading: false,
+      showImageModal: false,
+    };
+  },
+
+  computed: {
+    computedAccept() {
+      // Jika wordOnly aktif, hanya terima file Word
+      if (this.wordOnly) {
+        return '.doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document';
+      }
+      // Jika accept sudah diset, gunakan nilai tersebut
+      // Jika tidak, default ke image
+      return this.accept;
+    },
+
+    currentPreviewUrl() {
+      if (this.preview) return this.preview;
+      if (this.value && this.value.url) return this.value.url;
+      return null;
+    },
+
+    currentPreviewType() {
+      if (this.preview) return this.previewType;
+      if (this.value && this.value.url) return this.getPreviewType(this.value.url);
+      return null;
+    },
+  },
+
+  watch: {
+    value: {
+      immediate: true,
+      handler(newVal) {
+        this.setPreviewFromValue(newVal);
+      },
+    },
+  },
+
+  methods: {
+    getPreviewType(url) {
+      if (!url) return 'file';
+      if (url.match(/\.(jpg|jpeg|png|gif|webp|svg|bmp|ico)$/i)) return 'image';
+      if (url.match(/\.pdf$/i)) return 'pdf';
+      return 'file';
+    },
+
+    setPreviewFromValue(val) {
+      if (val && typeof val === 'object' && val.url) {
+        this.preview = val.url;
+        this.previewType = this.getPreviewType(val.url);
+      } else if (typeof val === 'string' && val) {
+        this.preview = val;
+        this.previewType = this.getPreviewType(val);
+      } else {
+        this.preview = null;
+        this.previewType = null;
+      }
+    },
+
+    async onFileChange(e) {
+      const file = e.target.files[0];
+      if (!file) return;
+
+      // Validasi file jika wordOnly aktif
+      if (this.wordOnly) {
+        if (!this.isValidWordFile(file)) {
+          this.resetFile();
+          this.$toasted.error('Hanya file Word (.doc, .docx) yang diperbolehkan').goAway();
+          return;
+        }
+      }
+
+      // Validasi file image jika accept adalah image/*
+      if (this.accept === 'image/*' || this.accept.includes('image')) {
+        if (!this.isValidImageFile(file)) {
+          this.resetFile();
+          this.$toasted.error('Hanya file gambar yang diperbolehkan').goAway();
+          return;
+        }
+      }
+
+      // Set preview
+      this.setFilePreview(file);
+
+      // Upload file
+      await this.uploadFile(file);
+    },
+
+    isValidWordFile(file) {
+      const allowedTypes = [
+        'application/msword',
+        'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+      ];
+      const allowedExtensions = ['.doc', '.docx'];
+      const fileExt = file.name.substring(file.name.lastIndexOf('.')).toLowerCase();
+
+      return allowedTypes.includes(file.type) || allowedExtensions.includes(fileExt);
+    },
+
+    isValidImageFile(file) {
+      const allowedTypes = [
+        'image/jpeg',
+        'image/jpg',
+        'image/png',
+        'image/gif',
+        'image/webp',
+        'image/svg+xml',
+        'image/bmp',
+      ];
+      const allowedExtensions = ['.jpg', '.jpeg', '.png', '.gif', '.webp', '.svg', '.bmp'];
+      const fileExt = file.name.substring(file.name.lastIndexOf('.')).toLowerCase();
+
+      return allowedTypes.includes(file.type) || allowedExtensions.includes(fileExt);
+    },
+
+    setFilePreview(file) {
+      if (file.type.startsWith('image/')) {
+        this.previewType = 'image';
+        this.preview = URL.createObjectURL(file);
+      } else if (file.type === 'application/pdf') {
+        this.previewType = 'pdf';
+        this.preview = URL.createObjectURL(file);
+      } else {
+        this.previewType = 'file';
+        this.preview = null;
+      }
+    },
+
+    async uploadFile(file) {
+      const formData = new FormData();
+      formData.append('file', file);
+
+      this.uploading = true;
+
+      try {
+        const response = await apiUploadFile(this.endpoint, formData, this.wordOnly, this.fileName);
+        this.$emit('input', response.data?.data || null);
+        this.$emit('change', response.data?.data || null);
+        this.$toasted.success('File berhasil diunggah').goAway();
+      } catch (error) {
+        this.resetFile();
+        this.$toasted.error('Gagal mengunggah file').goAway();
+        console.error('Upload error:', error);
+      } finally {
+        this.uploading = false;
+      }
+    },
+
+    async downloadTemplate() {
+      if (!this.templateType) return;
+      this.downloading = true;
+      try {
+        const response = await apiDownloadTemplate(this.templateType);
+        const url = response.data.data;
+        window.open(url, '_blank', 'noopener,noreferrer');
+      } catch (error) {
+        this.$toasted.error('Gagal mengunduh template').goAway();
+        console.error('Download error:', error);
+      } finally {
+        this.downloading = false;
+      }
+    },
+
+    resetFile() {
+      this.$emit('input', null);
+      this.$emit('change', null);
+      this.$refs.fileInput.value = '';
+    },
+
+    openImageModal() {
+      this.showImageModal = true;
+    },
+
+    openPreview() {
+      // Untuk file non-image (PDF, Word, dll), buka di tab baru
+      window.open(this.currentPreviewUrl, '_blank', 'noopener,noreferrer');
+    },
+  },
+};
+</script>
+
+<style scoped>
+.label-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 8px;
+}
+
+.template-link a {
+  color: #2d8cf0;
+  text-decoration: none;
+  font-weight: 500;
+  font-size: 0.9em;
+  transition: color 0.2s;
+}
+
+.template-link a:hover {
+  color: #1c6dcf;
+  text-decoration: underline;
+}
+
+.error {
+  color: #d9534f;
+  font-size: 0.875em;
+  margin-top: 4px;
+}
+
+.preview-container {
+  padding: 12px;
+  background-color: #f8f9fa;
+  border-radius: 4px;
+  border: 1px solid #dee2e6;
+}
+
+.preview-image {
+  max-width: 200px;
+  max-height: 200px;
+  border-radius: 4px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  cursor: pointer;
+  transition: transform 0.2s, box-shadow 0.2s;
+}
+
+.preview-image:hover {
+  transform: scale(1.05);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+}
+
+.modal-preview-image {
+  max-width: 100%;
+  max-height: 70vh;
+  border-radius: 4px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+}
+</style>