@muflih_kh/profile-ui 1.0.0

package/dist/style.css

@@ -0,0 +1 @@
+.colored-toast.swal2-icon-success{background-color:#a5dc86!important}.colored-toast{font-size:.5rem!important;min-width:220px!important;max-width:320px!important;padding:.75rem 1.25rem!important;box-sizing:border-box;right:1.5rem!important;top:1.5rem!important;left:auto!important;bottom:auto!important;position:fixed!important;z-index:9999!important;margin:0!important;pointer-events:auto;transition:all .3s}.colored-toast.swal2-icon-error{background-color:#f27474!important}.colored-toast.swal2-icon-warning{background-color:#f8bb86!important}.colored-toast.swal2-icon-info{background-color:#3fc3ee!important}.colored-toast.swal2-icon-question{background-color:#87adbd!important}.colored-toast .swal2-title,.colored-toast .swal2-close,.colored-toast .swal2-html-container{color:#fff}.label-row[data-v-8b4acac7]{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.template-link a[data-v-8b4acac7]{color:#2d8cf0;text-decoration:none;font-weight:500;font-size:.9em;transition:color .2s}.template-link a[data-v-8b4acac7]:hover{color:#1c6dcf;text-decoration:underline}.error[data-v-8b4acac7]{color:#d9534f;font-size:.875em;margin-top:4px}.preview-container[data-v-8b4acac7]{padding:12px;background-color:#f8f9fa;border-radius:4px;border:1px solid #dee2e6}.preview-image[data-v-8b4acac7]{max-width:200px;max-height:200px;border-radius:4px;box-shadow:0 2px 4px #0000001a;cursor:pointer;transition:transform .2s,box-shadow .2s}.preview-image[data-v-8b4acac7]:hover{transform:scale(1.05);box-shadow:0 4px 8px #00000026}.modal-preview-image[data-v-8b4acac7]{max-width:100%;max-height:70vh;border-radius:4px;box-shadow:0 4px 12px #0003}.modal.show[data-v-aba4943e]{display:block}.mx-icon-left:before,.mx-icon-right:before,.mx-icon-double-left:before,.mx-icon-double-right:before,.mx-icon-double-left:after,.mx-icon-double-right:after{content:"";position:relative;top:-1px;display:inline-block;width:10px;height:10px;vertical-align:middle;border-style:solid;border-color:currentColor;border-width:2px 0 0 2px;border-radius:1px;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-transform-origin:center;transform-origin:center;-webkit-transform:rotate(-45deg) scale(.7);transform:rotate(-45deg) scale(.7)}.mx-icon-double-left:after{left:-4px}.mx-icon-double-right:before{left:4px}.mx-icon-right:before,.mx-icon-double-right:before,.mx-icon-double-right:after{-webkit-transform:rotate(135deg) scale(.7);transform:rotate(135deg) scale(.7)}.mx-btn{-webkit-box-sizing:border-box;box-sizing:border-box;line-height:1;font-size:14px;font-weight:500;padding:7px 15px;margin:0;cursor:pointer;background-color:transparent;outline:none;border:1px solid rgba(0,0,0,.1);border-radius:4px;color:#73879c;white-space:nowrap}.mx-btn:hover{border-color:#1284e7;color:#1284e7}.mx-btn:disabled,.mx-btn.disabled{color:#ccc;cursor:not-allowed}.mx-btn-text{border:0;padding:0 4px;text-align:left;line-height:inherit}.mx-scrollbar{height:100%}.mx-scrollbar:hover .mx-scrollbar-track{opacity:1}.mx-scrollbar-wrap{height:100%;overflow-x:hidden;overflow-y:auto}.mx-scrollbar-track{position:absolute;top:2px;right:2px;bottom:2px;width:6px;z-index:1;border-radius:4px;opacity:0;-webkit-transition:opacity .24s ease-out;transition:opacity .24s ease-out}.mx-scrollbar-track .mx-scrollbar-thumb{position:absolute;width:100%;height:0;cursor:pointer;border-radius:inherit;background-color:#9093994d;-webkit-transition:background-color .3s;transition:background-color .3s}.mx-zoom-in-down-enter-active,.mx-zoom-in-down-leave-active{opacity:1;-webkit-transform:scaleY(1);transform:scaleY(1);-webkit-transition:opacity .3s cubic-bezier(.23,1,.32,1),-webkit-transform .3s cubic-bezier(.23,1,.32,1);transition:opacity .3s cubic-bezier(.23,1,.32,1),-webkit-transform .3s cubic-bezier(.23,1,.32,1);transition:transform .3s cubic-bezier(.23,1,.32,1),opacity .3s cubic-bezier(.23,1,.32,1);transition:transform .3s cubic-bezier(.23,1,.32,1),opacity .3s cubic-bezier(.23,1,.32,1),-webkit-transform .3s cubic-bezier(.23,1,.32,1);-webkit-transform-origin:center top;transform-origin:center top}.mx-zoom-in-down-enter,.mx-zoom-in-down-enter-from,.mx-zoom-in-down-leave-to{opacity:0;-webkit-transform:scaleY(0);transform:scaleY(0)}.mx-datepicker{position:relative;display:inline-block;width:210px}.mx-datepicker svg{width:1em;height:1em;vertical-align:-.15em;fill:currentColor;overflow:hidden}.mx-datepicker-range{width:320px}.mx-datepicker-inline{width:auto}.mx-input-wrapper{position:relative}.mx-input{display:inline-block;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;height:34px;padding:6px 30px 6px 10px;font-size:14px;line-height:1.4;color:#555;background-color:#fff;border:1px solid #ccc;border-radius:4px;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075);box-shadow:inset 0 1px 1px #00000013}.mx-input:hover,.mx-input:focus{border-color:#409aff}.mx-input:disabled,.mx-input.disabled{color:#ccc;background-color:#f3f3f3;border-color:#ccc;cursor:not-allowed}.mx-input:focus{outline:none}.mx-input::-ms-clear{display:none}.mx-icon-calendar,.mx-icon-clear{position:absolute;top:50%;right:8px;-webkit-transform:translateY(-50%);transform:translateY(-50%);font-size:16px;line-height:1;color:#00000080;vertical-align:middle}.mx-icon-clear{cursor:pointer}.mx-icon-clear:hover{color:#000c}.mx-datepicker-main{font:14px/1.5 Helvetica Neue,Helvetica,Arial,Microsoft Yahei,sans-serif;color:#73879c;background-color:#fff;border:1px solid #e8e8e8}.mx-datepicker-popup{position:absolute;margin-top:1px;margin-bottom:1px;-webkit-box-shadow:0 6px 12px rgba(0,0,0,.175);box-shadow:0 6px 12px #0000002d;z-index:2001}.mx-datepicker-sidebar{float:left;-webkit-box-sizing:border-box;box-sizing:border-box;width:100px;padding:6px;overflow:auto}.mx-datepicker-sidebar+.mx-datepicker-content{margin-left:100px;border-left:1px solid #e8e8e8}.mx-datepicker-body{position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.mx-btn-shortcut{display:block;padding:0 6px;line-height:24px}.mx-range-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex}@media (max-width: 750px){.mx-range-wrapper{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}}.mx-datepicker-header{padding:6px 8px;border-bottom:1px solid #e8e8e8}.mx-datepicker-footer{padding:6px 8px;text-align:right;border-top:1px solid #e8e8e8}.mx-calendar{-webkit-box-sizing:border-box;box-sizing:border-box;width:248px;padding:6px 12px}.mx-calendar+.mx-calendar{border-left:1px solid #e8e8e8}.mx-calendar-header,.mx-time-header{-webkit-box-sizing:border-box;box-sizing:border-box;height:34px;line-height:34px;text-align:center;overflow:hidden}.mx-btn-icon-left,.mx-btn-icon-double-left{float:left}.mx-btn-icon-right,.mx-btn-icon-double-right{float:right}.mx-calendar-header-label{font-size:14px}.mx-calendar-decade-separator{margin:0 2px}.mx-calendar-decade-separator:after{content:"~"}.mx-calendar-content{position:relative;height:224px;-webkit-box-sizing:border-box;box-sizing:border-box}.mx-calendar-content .cell{cursor:pointer}.mx-calendar-content .cell:hover{color:#73879c;background-color:#f3f9fe}.mx-calendar-content .cell.active{color:#fff;background-color:#1284e7}.mx-calendar-content .cell.in-range,.mx-calendar-content .cell.hover-in-range{color:#73879c;background-color:#dbedfb}.mx-calendar-content .cell.disabled{cursor:not-allowed;color:#ccc;background-color:#f3f3f3}.mx-calendar-week-mode .mx-date-row{cursor:pointer}.mx-calendar-week-mode .mx-date-row:hover{background-color:#f3f9fe}.mx-calendar-week-mode .mx-date-row.mx-active-week{background-color:#dbedfb}.mx-calendar-week-mode .mx-date-row .cell:hover,.mx-calendar-week-mode .mx-date-row .cell.active{color:inherit;background-color:transparent}.mx-week-number{opacity:.5}.mx-table{table-layout:fixed;border-collapse:separate;border-spacing:0;width:100%;height:100%;-webkit-box-sizing:border-box;box-sizing:border-box;text-align:center}.mx-table th{padding:0;font-weight:500;vertical-align:middle}.mx-table td{padding:0;vertical-align:middle}.mx-table-date td,.mx-table-date th{height:32px;font-size:12px}.mx-table-date .today{color:#2a90e9}.mx-table-date .cell.not-current-month{color:#ccc;background:none}.mx-time{-webkit-box-flex:1;-ms-flex:1;flex:1;width:224px;background:#fff}.mx-time+.mx-time{border-left:1px solid #e8e8e8}.mx-calendar-time{position:absolute;top:0;left:0;width:100%;height:100%}.mx-time-header{border-bottom:1px solid #e8e8e8}.mx-time-content{height:224px;-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden}.mx-time-columns{display:-webkit-box;display:-ms-flexbox;display:flex;width:100%;height:100%;overflow:hidden}.mx-time-column{-webkit-box-flex:1;-ms-flex:1;flex:1;position:relative;border-left:1px solid #e8e8e8;text-align:center}.mx-time-column:first-child{border-left:0}.mx-time-column .mx-time-list{margin:0;padding:0;list-style:none}.mx-time-column .mx-time-list:after{content:"";display:block;height:192px}.mx-time-column .mx-time-item{cursor:pointer;font-size:12px;height:32px;line-height:32px}.mx-time-column .mx-time-item:hover{color:#73879c;background-color:#f3f9fe}.mx-time-column .mx-time-item.active{color:#1284e7;background-color:transparent;font-weight:700}.mx-time-column .mx-time-item.disabled{cursor:not-allowed;color:#ccc;background-color:#f3f3f3}.mx-time-option{cursor:pointer;padding:8px 10px;font-size:14px;line-height:20px}.mx-time-option:hover{color:#73879c;background-color:#f3f9fe}.mx-time-option.active{color:#1284e7;background-color:transparent;font-weight:700}.mx-time-option.disabled{cursor:not-allowed;color:#ccc;background-color:#f3f3f3}:host,:root{--vs-colors--lightest:rgba(60,60,60,.26);--vs-colors--light:rgba(60,60,60,.5);--vs-colors--dark:#333;--vs-colors--darkest:rgba(0,0,0,.15);--vs-search-input-color:inherit;--vs-search-input-bg:#fff;--vs-search-input-placeholder-color:inherit;--vs-font-size:1rem;--vs-line-height:1.4;--vs-state-disabled-bg:#f8f8f8;--vs-state-disabled-color:var(--vs-colors--light);--vs-state-disabled-controls-color:var(--vs-colors--light);--vs-state-disabled-cursor:not-allowed;--vs-border-color:var(--vs-colors--lightest);--vs-border-width:1px;--vs-border-style:solid;--vs-border-radius:4px;--vs-actions-padding:4px 6px 0 3px;--vs-controls-color:var(--vs-colors--light);--vs-controls-size:1;--vs-controls--deselect-text-shadow:0 1px 0 #fff;--vs-selected-bg:#f0f0f0;--vs-selected-color:var(--vs-colors--dark);--vs-selected-border-color:var(--vs-border-color);--vs-selected-border-style:var(--vs-border-style);--vs-selected-border-width:var(--vs-border-width);--vs-dropdown-bg:#fff;--vs-dropdown-color:inherit;--vs-dropdown-z-index:1000;--vs-dropdown-min-width:160px;--vs-dropdown-max-height:350px;--vs-dropdown-box-shadow:0px 3px 6px 0px var(--vs-colors--darkest);--vs-dropdown-option-bg:#000;--vs-dropdown-option-color:var(--vs-dropdown-color);--vs-dropdown-option-padding:3px 20px;--vs-dropdown-option--active-bg:#5897fb;--vs-dropdown-option--active-color:#fff;--vs-dropdown-option--deselect-bg:#fb5858;--vs-dropdown-option--deselect-color:#fff;--vs-transition-timing-function:cubic-bezier(1,-.115,.975,.855);--vs-transition-duration:.15s}.v-select{font-family:inherit;position:relative}.v-select,.v-select *{box-sizing:border-box}:root{--vs-transition-timing-function:cubic-bezier(1,.5,.8,1);--vs-transition-duration:.15s}@-webkit-keyframes vSelectSpinner{0%{transform:rotate(0)}to{transform:rotate(1turn)}}@keyframes vSelectSpinner{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.vs__fade-enter-active,.vs__fade-leave-active{pointer-events:none;transition:opacity var(--vs-transition-duration) var(--vs-transition-timing-function)}.vs__fade-enter,.vs__fade-leave-to{opacity:0}:root{--vs-disabled-bg:var(--vs-state-disabled-bg);--vs-disabled-color:var(--vs-state-disabled-color);--vs-disabled-cursor:var(--vs-state-disabled-cursor)}.vs--disabled .vs__clear,.vs--disabled .vs__dropdown-toggle,.vs--disabled .vs__open-indicator,.vs--disabled .vs__search,.vs--disabled .vs__selected{background-color:var(--vs-disabled-bg);cursor:var(--vs-disabled-cursor)}.v-select[dir=rtl] .vs__actions{padding:0 3px 0 6px}.v-select[dir=rtl] .vs__clear{margin-left:6px;margin-right:0}.v-select[dir=rtl] .vs__deselect{margin-left:0;margin-right:2px}.v-select[dir=rtl] .vs__dropdown-menu{text-align:right}.vs__dropdown-toggle{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--vs-search-input-bg);border:var(--vs-border-width) var(--vs-border-style) var(--vs-border-color);border-radius:var(--vs-border-radius);display:flex;padding:0 0 4px;white-space:normal}.vs__selected-options{display:flex;flex-basis:100%;flex-grow:1;flex-wrap:wrap;padding:0 2px;position:relative}.vs__actions{align-items:center;display:flex;padding:var(--vs-actions-padding)}.vs--searchable .vs__dropdown-toggle{cursor:text}.vs--unsearchable .vs__dropdown-toggle{cursor:pointer}.vs--open .vs__dropdown-toggle{border-bottom-color:transparent;border-bottom-left-radius:0;border-bottom-right-radius:0}.vs__open-indicator{fill:var(--vs-controls-color);transform:scale(var(--vs-controls-size));transition:transform var(--vs-transition-duration) var(--vs-transition-timing-function);transition-timing-function:var(--vs-transition-timing-function)}.vs--open .vs__open-indicator{transform:rotate(180deg) scale(var(--vs-controls-size))}.vs--loading .vs__open-indicator{opacity:0}.vs__clear{fill:var(--vs-controls-color);background-color:transparent;border:0;cursor:pointer;margin-right:8px;padding:0}.vs__dropdown-menu{background:var(--vs-dropdown-bg);border:var(--vs-border-width) var(--vs-border-style) var(--vs-border-color);border-radius:0 0 var(--vs-border-radius) var(--vs-border-radius);border-top-style:none;box-shadow:var(--vs-dropdown-box-shadow);box-sizing:border-box;color:var(--vs-dropdown-color);display:block;left:0;list-style:none;margin:0;max-height:var(--vs-dropdown-max-height);min-width:var(--vs-dropdown-min-width);overflow-y:auto;padding:5px 0;position:absolute;text-align:left;top:calc(100% - var(--vs-border-width));width:100%;z-index:var(--vs-dropdown-z-index)}.vs__no-options{text-align:center}.vs__dropdown-option{clear:both;color:var(--vs-dropdown-option-color);cursor:pointer;display:block;line-height:1.42857143;padding:var(--vs-dropdown-option-padding);white-space:nowrap}.vs__dropdown-option--highlight{background:var(--vs-dropdown-option--active-bg);color:var(--vs-dropdown-option--active-color)}.vs__dropdown-option--deselect{background:var(--vs-dropdown-option--deselect-bg);color:var(--vs-dropdown-option--deselect-color)}.vs__dropdown-option--disabled{background:var(--vs-state-disabled-bg);color:var(--vs-state-disabled-color);cursor:var(--vs-state-disabled-cursor)}.vs__selected{align-items:center;background-color:var(--vs-selected-bg);border:var(--vs-selected-border-width) var(--vs-selected-border-style) var(--vs-selected-border-color);border-radius:var(--vs-border-radius);color:var(--vs-selected-color);display:flex;line-height:var(--vs-line-height);margin:4px 2px 0;padding:0 .25em;z-index:0}.vs__deselect{fill:var(--vs-controls-color);-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:0;cursor:pointer;display:inline-flex;margin-left:4px;padding:0;text-shadow:var(--vs-controls--deselect-text-shadow)}.vs--single .vs__selected{background-color:transparent;border-color:transparent}.vs--single.vs--loading .vs__selected,.vs--single.vs--open .vs__selected{opacity:.4;position:absolute}.vs--single.vs--searching .vs__selected{display:none}.vs__search::-webkit-search-cancel-button{display:none}.vs__search::-ms-clear,.vs__search::-webkit-search-decoration,.vs__search::-webkit-search-results-button,.vs__search::-webkit-search-results-decoration{display:none}.vs__search,.vs__search:focus{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:1px solid transparent;border-left:none;box-shadow:none;color:var(--vs-search-input-color);flex-grow:1;font-size:var(--vs-font-size);line-height:var(--vs-line-height);margin:4px 0 0;max-width:100%;outline:none;padding:0 7px;width:0;z-index:1}.vs__search::-moz-placeholder{color:var(--vs-search-input-placeholder-color)}.vs__search:-ms-input-placeholder{color:var(--vs-search-input-placeholder-color)}.vs__search::placeholder{color:var(--vs-search-input-placeholder-color)}.vs--unsearchable .vs__search{opacity:1}.vs--unsearchable:not(.vs--disabled) .vs__search{cursor:pointer}.vs--single.vs--searching:not(.vs--open):not(.vs--loading) .vs__search{opacity:.2}.vs__spinner{align-self:center;-webkit-animation:vSelectSpinner 1.1s linear infinite;animation:vSelectSpinner 1.1s linear infinite;border:.9em solid hsla(0,0%,39%,.1);border-left-color:#3c3c3c73;font-size:5px;opacity:0;overflow:hidden;text-indent:-9999em;transform:translateZ(0) scale(var(--vs-controls--spinner-size,var(--vs-controls-size)));transition:opacity .1s}.vs__spinner,.vs__spinner:after{border-radius:50%;height:5em;transform:scale(var(--vs-controls--spinner-size,var(--vs-controls-size)));width:5em}.vs--loading .vs__spinner{opacity:1}.modal.show[data-v-64e3f909]{display:block}.v-select[data-v-64e3f909]{width:100%}.v-select .vs__dropdown-toggle[data-v-64e3f909]{padding:.375rem .75rem;border:1px solid #ced4da;border-radius:.25rem}.v-select .vs__search[data-v-64e3f909]{margin:0;padding:0;border:none}.v-select .vs__search[data-v-64e3f909]:focus{outline:none}.v-select .vs__dropdown-menu[data-v-64e3f909]{border:1px solid #ced4da;border-radius:.25rem;box-shadow:0 .125rem .25rem #00000013;max-height:250px;overflow-y:auto}.v-select .vs__dropdown-option[data-v-64e3f909]{padding:.5rem .75rem}.v-select .vs__dropdown-option--highlight[data-v-64e3f909]{background:#0d6efd;color:#fff}.v-select .vs__selected[data-v-64e3f909]{margin:0;padding:0}.v-select .vs__clear[data-v-64e3f909]{margin-right:5px}.link[data-v-ddc3d2fd]{cursor:pointer;color:#0d6efd;text-decoration:none}.link[data-v-ddc3d2fd]:hover{text-decoration:underline}.modal.show[data-v-c9e10ed6],.modal.show[data-v-a05020f4]{display:block}.link[data-v-50d12d5f]{cursor:pointer;color:#0d6efd;text-decoration:none}.link[data-v-50d12d5f]:hover{text-decoration:underline}.modal.show[data-v-263af438],.modal.show[data-v-5bfdc8af]{display:block}

package/package.json

@@ -0,0 +1,53 @@
+{
+    "name": "@muflih_kh/profile-ui",
+    "version": "1.0.0",
+    "type": "module",
+    "main": "./dist/profile-ui.umd.js",
+    "module": "./dist/profile-ui.es.js",
+    "types": "./dist/index.d.ts",
+    "exports": {
+        ".": {
+            "import": "./dist/profile-ui.es.js",
+            "require": "./dist/profile-ui.umd.js",
+            "types": "./dist/index.d.ts"
+        },
+        "./*.css": "./dist/*.css",
+        "./*.vue": "./src/components/*.vue"
+    },
+    "files": [
+        "dist",
+        "src/components/*.vue"
+    ],
+    "scripts": {
+        "dev": "vite",
+        "build": "vite build",
+        "preview": "vite preview",
+        "prepublishOnly": "npm run build"
+    },
+    "peerDependencies": {
+        "vue": "^3.3.0"
+    },
+    "devDependencies": {
+        "@vitejs/plugin-vue": "^4.5.0",
+        "typescript": "^5.9.3",
+        "vite": "^4.5.0",
+        "vue": "^3.3.0"
+    },
+    "keywords": [
+        "vue",
+        "components",
+        "ui",
+        "profile",
+        "admisi",
+        "siakad"
+    ],
+    "author": "Your Name",
+    "license": "MIT",
+    "dependencies": {
+        "axios": "^1.13.2",
+        "dotenv": "^17.2.3",
+        "sweetalert2": "^11.26.17",
+        "vue-select": "^3.20.4",
+        "vue2-datepicker": "^3.11.1"
+    }
+}

package/src/components/EducationModal.vue

@@ -0,0 +1,126 @@
+<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' : 'Tambah' }} Pendidikan
+          </h5>
+          <button @click="close" type="button" class="btn-close"></button>
+        </div>
+        <div class="modal-body">
+          <div class="row g-3">
+            <div class="col-12">
+              <label class="form-label fw-semibold">Nomor Induk (NISN)</label>
+              <input v-model="formData.nisn" type="text" class="form-control" placeholder="NISN" />
+            </div>
+            <div class="col-12">
+              <label class="form-label fw-semibold">Asal Sekolah</label>
+              <input v-model="formData.previous_school" type="text" class="form-control" placeholder="Asal Sekolah" />
+            </div>
+            <div class="col-12">
+              <label class="form-label fw-semibold">Nilai rata-rata rapot kelas XII Semester I</label>
+              <input v-model="formData.score" type="number" class="form-control" :min="0" :max="100"
+                placeholder="Nilai Rata-rata rapot kelas XII Semester I" />
+            </div>
+            <div class="col-12">
+              <label class="form-label fw-semibold">Jurusan</label>
+              <input v-model="formData.major" type="text" class="form-control" placeholder="Jurusan" />
+            </div>
+            <div class="col-12">
+              <label class="form-label fw-semibold">Tahun Lulus</label>
+              <input v-model="formData.year_graduated" type="number" class="form-control" placeholder="Tahun Lulus" />
+            </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 { addEducation } from '../api/profileApi';
+import { showToast } from '../utils/toast';
+
+export default {
+  name: 'EducationModal',
+  props: {
+    value: {
+      type: Boolean,
+      default: false
+    },
+    education: {
+      type: Object,
+      default: null
+    }
+  },
+  data() {
+    return {
+      formData: {
+      }
+    };
+  },
+  computed: {
+    isEdit() {
+      return !!this.education;
+    }
+  },
+  watch: {
+    value(newVal) {
+      if (newVal) {
+        if (this.education) {
+          this.formData = { ...this.education };
+        } else {
+          this.resetForm();
+        }
+      }
+    }
+  },
+  methods: {
+    resetForm() {
+      this.formData = {
+
+      };
+    },
+    async save() {
+      try {
+        await addEducation(this.formData);
+        showToast({
+          icon: 'success',
+          title: 'Success',
+          text: 'Data pendidikan berhasil disimpan.'
+        });
+        this.$emit('save');
+        this.close();
+        if (this.$route.query.r) {
+          this.$router.push(this.$route.query.r);
+        }
+      } catch (error) {
+        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/ImageCropModal.vue

@@ -0,0 +1,70 @@
+<template>
+  <div v-if="value" class="modal fade show d-block modal-lg" tabindex="-1" style="background: rgba(0,0,0,0.5);">
+    <div class="modal-dialog modal-dialog-centered modal-cropper">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title">Foto Profil</h5>
+          <button type="button" class="btn-close" @click="close" aria-label="Close"></button>
+        </div>
+        <div class="modal-body">
+          <SgFileUploader v-model="localPhoto" />
+        </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 SgFileUploader from '../components/SgFileUploader.vue';
+
+export default {
+  name: 'ImageCropModal',
+  components: {
+    SgFileUploader
+  },
+  props: {
+    value: {
+      type: Boolean,
+      default: false
+    },
+    photo: {
+      type: Object,
+      default: null
+    }
+  },
+  data() {
+    return {
+      localPhoto: null
+    };
+  },
+  watch: {
+    value(newVal) {
+      if (newVal) {
+        this.localPhoto = this.photo;
+      }
+    }
+  },
+  methods: {
+    save() {
+      this.$emit('save', this.localPhoto);
+    },
+    close() {
+      this.$emit('input', false);
+    }
+  }
+};
+</script>
+
+<style scoped>
+.modal.show {
+  display: block;
+}
+</style>

package/src/components/OtpModal.vue

@@ -0,0 +1,166 @@
+<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-centered">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title">
+            Verifikasi {{ verificationType === 'email' ? 'Email' : 'Nomor Telepon' }}
+          </h5>
+          <button @click="close" type="button" class="btn-close"></button>
+        </div>
+        <div class="modal-body">
+          <div class="text-center mb-4">
+            <div class="mb-3">
+              <i :class="verificationType === 'email' ? 'uil uil-envelope' : 'uil uil-phone'" class="text-primary"
+                style="font-size: 64px;"></i>
+            </div>
+
+            <div v-if="verificationType === 'phone'" class="mb-3">
+              <label for="phone" class="form-label">Nomor Telepon</label>
+              <input type="text" class="form-control" id="phone" :value="formattedPhone" @input="onPhoneInput"
+                placeholder="0812 3456 7890" :class="{ 'is-invalid': phoneError }" />
+              <div v-if="phoneError" class="invalid-feedback">
+                {{ phoneError }}
+              </div>
+            </div>
+
+            <p class="text-muted">
+              {{ verificationType === 'email'
+                ? 'Link verifikasi akan dikirim ke ' + email
+                : 'Pesan verifikasi akan dikirim ke ' + phone
+              }}
+            </p>
+          </div>
+          <button @click="sendOtp" class="btn btn-primary w-100" :disabled="isButtonDisabled">
+            <span v-if="sendingOtp" class="spinner-border spinner-border-sm me-2"></span>
+            {{ sendingOtp ? 'Mengirim...' :
+              (verificationType === 'email' ? 'Kirim Link Verifikasi' : 'Verifikasi Whatsapp')
+            }}
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { sendEmailOtp, sendPhoneOtp } from '../api/profileApi';
+import { showToast } from '../utils/toast';
+import Swal from 'sweetalert2';
+
+export default {
+  name: 'OtpModal',
+  props: {
+    value: {
+      type: Boolean,
+      default: false
+    },
+    verificationType: {
+      type: String,
+      required: true
+    },
+    email: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      phone: '',
+      phoneError: '',
+      sendingOtp: false
+    };
+  },
+  computed: {
+    formattedPhone() {
+      if (!this.phone) return '';
+      // Format: 0812 3456 7890 (pisah tiap 4 digit)
+      return this.phone.replace(/(\d{4})(?=\d)/g, '$1 ');
+    },
+    isButtonDisabled() {
+      if (this.verificationType === 'email') {
+        return this.sendingOtp;
+      }
+      // Untuk phone: disabled jika sedang mengirim atau ada error atau nomor kosong
+      return this.sendingOtp || !!this.phoneError || !this.phone;
+    }
+  },
+  methods: {
+    onPhoneInput(e) {
+      // Ambil hanya angka
+      let raw = e.target.value.replace(/\D/g, '');
+      this.phone = raw;
+      this.validatePhone();
+    },
+    validatePhone() {
+      if (!this.phone) {
+        this.phoneError = 'Nomor telepon tidak boleh kosong';
+      } else if (!this.phone.startsWith('0')) {
+        this.phoneError = 'Nomor telepon harus diawali angka 0';
+      } else if (this.phone.length < 9) {
+        this.phoneError = 'Nomor telepon minimal 9 digit';
+      } else {
+        this.phoneError = '';
+      }
+    },
+    async sendOtp() {
+      this.sendingOtp = true;
+
+      try {
+        let data = {};
+        let endpoint = '';
+
+        if (this.verificationType === 'email') {
+          await sendEmailOtp(this.email);
+          showToast({
+            icon: 'success',
+            title: 'Berhasil',
+            text: 'Link verifikasi telah dikirim ke email Anda'
+          });
+          this.$emit('verified');
+          this.close();
+        } else {
+          const result = await Swal.fire({
+            text: 'Pastikan nomor yang ditulis sesuai dengan nomor WhatsApp yang aktif: ' + this.phone,
+            icon: 'question',
+            showCancelButton: true,
+            confirmButtonText: 'Kirim',
+            cancelButtonText: 'Batal'
+          });
+
+          if (result.isConfirmed) {
+            const res = await sendPhoneOtp(this.phone);
+            const url = res.data.data.wa_url;
+            const newTab = window.open(url, '_blank');
+            if (newTab) {
+              newTab.opener = window;
+            }
+            this.$emit('verified');
+            this.close();
+          }
+        }
+      } catch (error) {
+        const errorMessage = error.response?.data?.user_message || 'Gagal melakukan verifikasi';
+        showToast({
+          icon: 'error',
+          title: 'Error',
+          text: errorMessage
+        });
+      } finally {
+        this.sendingOtp = false;
+      }
+    },
+    close() {
+      this.phone = '';
+      this.phoneError = '';
+      this.$emit('input', false);
+    }
+  }
+};
+</script>
+
+<style scoped>
+.modal.show {
+  display: block;
+}
+</style>