diff --git a/resources/assets/js/components/ProfilPegawai.vue b/resources/assets/js/components/ProfilPegawai.vue
index 602e245146bdd073483500bf04ddf6e01f4c0da5..6e65d63adb2b9d207a834e46524e4a4c90d8392b 100644
--- a/resources/assets/js/components/ProfilPegawai.vue
+++ b/resources/assets/js/components/ProfilPegawai.vue
@@ -183,672 +183,632 @@
 
         <br>
 
-        <div class="card" id="data-kepegawaian">
-            <div class="card-header">
-                Data Kepegawaian
-                <button class="btn btn-primary float-sm-right" v-on:click="editDataKepegawaian" v-bind:disabled="disableEdit">
-                    Edit <i class="fas fa-edit"></i>
-                </button>
-            </div>
-
-            <div class="card-body">
-                <div class="container">
-
-                    <div v-if="dataKepegawaian.length === 0" class="no-data-kepegawaian">
-                        <div v-if="!isEditKepegawaian">
-                            Belum ditambahkan.
-                            <br>
-                        </div>
-                        <button v-if="isEditKepegawaian" class="btn btn-primary float-sm-left" v-on:click="addDataKepegawaian">
-                            Tambah <i class="fas fa-plus"></i>
-                        </button>
-                        
-                    </div>
-
-                    <div v-if="dataKepegawaian.length !== 0" class="data-kepegawaian">
-                        <table class="table">
-                            <thead>
-                            <tr>
-                                <th scope="col">Unit Kerja</th>
-                                <th scope="col">Jabatan</th>
-                                <!-- <th scope="col">Kompetensi</th> -->
-                                <th scope="col">Tahun Mulai</th>
-                                <th scope="col">Tahun Selesai</th>
-                            </tr>
-                            </thead>
-                            <tbody v-for="dk in dataKepegawaian">
-                            <tr v-if="!isEditKepegawaian">
-                                <td v-text="unitKerja.find(x => x.id_unit_kerja == dk.id_unit_kerja).nama_unit_kerja" ></td>
-                                <td v-text="posisi.find(x => x.id_posisi == dk.id_posisi).nama_posisi" ></td>
-                                <!-- <td v-text="kelompokKompetensi.find(x => x.id_kelompok_kompetensi == dk.id_kelompok_kompetensi).nama_kelompok_kompetensi" ></td> -->
-                                <td v-text="dk.tahun_masuk" ></td>
-                                <td v-text="dk.tahun_keluar" ></td>
-                            </tr>
-                            <tr v-if="isEditKepegawaian">
-                                <td>
-                                    <div class="form-group">
-                                        <select class="form-control" v-model="dk.id_unit_kerja">
-                                            <option v-for="uk in unitKerja" v-bind:value="uk.id_unit_kerja">
-                                                {{ uk.nama_unit_kerja }}
-                                            </option>
-                                        </select>
-                                        <small class="form-text text-muted">*Wajib diisi</small>
-                                    </div>
-                                </td>
-                                <td>
-                                    <div class="form-group">
-                                        <select class="form-control" v-model="dk.id_posisi">
-                                            <option v-for="pos in posisi" v-bind:value="pos.id_posisi">
-                                                {{ pos.nama_posisi }}
-                                            </option>
-                                        </select>
-                                        <small class="form-text text-muted">*Wajib diisi</small>
-                                    </div>
-                                </td>
-                                <!-- <td>
-                                    <div class="form-group">
-                                        <select class="form-control" v-model="dk.id_kelompok_kompetensi">
-                                            <option v-for="kk in kelompokKomptensi" v-bind:value="kk.id_kelompok_kompetensi">
-                                                {{ kk.nama_kelompok_kompetensi }}
-                                            </option>
-                                        </select>
-                                        <small class="form-text text-muted">*Wajib diisi</small>
-                                    </div>
-                                </td> -->
-                                <td>
-                                    <div class="form-group">
-                                        <input v-model="dk.tahun_masuk" type="text" class="form-control text-center">
-                                        <small class="form-text text-muted">*Wajib diisi</small>
-                                    </div>
-                                </td>
-                                <td>
-                                    <div class="form-group">
-                                        <input v-model="dk.tahun_keluar" type="text" class="form-control text-center">
-                                        <small class="form-text text-muted">*Isi dengan "-" jika belum selesai</small>
-                                    </div>
-                                </td>
-                                <td>
-                                    <button v-bind:id="dataKepegawaian.indexOf(dk)" v-on:click="delDataKepegawaian($event)" class="btn btn-danger" type="button">
-                                        Hapus <i class="fas fa-trash-alt"></i>
-                                    </button>
-                                </td>
-                            </tr>
-                            </tbody>
-                            <button v-if="isEditKepegawaian" class="btn btn-primary float-sm-left" v-on:click="addDataKepegawaian">
-                                Tambah <i class="fas fa-plus"></i>
-                            </button>
-                        </table>
-
-                    </div>
-
-                    <br>
-
-                </div>
-            </div>
-            <div class="card-footer text-muted" v-if="isEditKepegawaian">
-                <a href="#data-kepegawaian" class="btn btn-success float-sm-right btn-simpan" v-on:click="saveDataKepegawaian">
-                    Simpan <i class="fas fa-check"></i>
-                    </a>
-                <a href="#data-kepegawaian" class="btn btn-danger float-sm-right" v-on:click="cancelDataKepegawaian">
-                    Batal <i class ="fas fa-times"></i>
-                </a>
-            </div>
-        </div>
-
-        <br>
-
-        <div class="card" id="riwayat-pegawai">
-            <div class="card-header">
-                Riwayat Pendidikan dan Pekerjaan<button class="btn btn-primary float-sm-right" v-on:click="editRiwayatPegawai" v-bind:disabled="disableEdit">
-                    Edit <i class="fas fa-edit"></i>
-                    </button>
-            </div>
-
-            <div class="card-body">
-                <div class="container">
-
-                    <h5>Riwayat Pendidikan</h5>
-
-                    <div v-if="riwayatPendidikan.length === 0" class="no-riwayat-pendidikan">
-                        <div v-if="!isEditRiwayat">
-                            <hr>
-                            Belum ditambahkan.
-                            <br>
-                        </div>
-                        <button v-if="isEditRiwayat" class="btn btn-primary float-sm-left" v-on:click="addRiwayatPendidikan">
-                            Tambah <i class="fas fa-plus"></i>
-                        </button>
-                    </div>
-
-                    <div v-if="riwayatPendidikan.length !== 0" class="riwayat-pendidikan">
-                        <table class="table">
-                            <thead>
-                            <tr>
-                                <th scope="col">Tingkat Pendidikan</th>
-                                <th scope="col">Nama Institusi</th>
-                                <th scope="col">Jurusan</th>
-                                <th scope="col">Tahun Masuk</th>
-                                <th scope="col">Tahun Keluar</th>
-                            </tr>
-                            </thead>
-                            <tbody v-for="rp in riwayatPendidikan">
-                            <tr v-if="!isEditRiwayat">
-                                <td v-text="rp.strata" ></td>
-                                <td v-text="rp.nama_institusi" ></td>
-                                <td v-text="rp.jurusan" ></td>
-                                <td v-text="rp.tahun_masuk" ></td>
-                                <td v-text="rp.tahun_keluar" ></td>
-                            </tr>
-                            <tr v-if="isEditRiwayat">
-                                <td>
-                                    <div class="form-group">
-                                        <input v-model="rp.strata" type="text" class="form-control text-center">
-                                        <small class="form-text text-muted">*Wajib diisi</small>
-                                    </div>
-                                </td>
-                                <td>
-                                    <div class="form-group">
-                                        <input v-model="rp.nama_institusi" type="text" class="form-control text-center">
-                                        <small class="form-text text-muted">*Wajib diisi</small>
-                                    </div>
-                                </td>
-                                <td>
-                                    <div class="form-group">
-                                        <input v-model="rp.jurusan" type="text" class="form-control text-center">
-                                        <small class="form-text text-muted">*Wajib diisi</small>
-                                    </div>
-                                </td>
-                                <td>
-                                    <div class="form-group">
-                                        <input v-model="rp.tahun_masuk" type="text" class="form-control text-center">
-                                        <small class="form-text text-muted">*Wajib diisi</small>
-                                    </div>
-                                </td>
-                                <td>
-                                    <div class="form-group">
-                                        <input v-model="rp.tahun_keluar" type="text" class="form-control text-center">
-                                        <small class="form-text text-muted">*Isi dengan "-" jika belum selesai</small>
-                                    </div>
-                                </td>
-                                <td>
-                                    <button v-bind:id="riwayatPendidikan.indexOf(rp)" v-on:click="delRiwayatPendidikan($event)" class="btn btn-danger" type="button">
-                                        Hapus <i class="fas fa-trash-alt"></i>
-                                    </button>
-                                </td>
-                            </tr>
-
-                            </tbody>
-                            <button v-if="isEditRiwayat" class="btn btn-primary float-sm-left" v-on:click="addRiwayatPendidikan">
-                                Tambah <i class="fas fa-plus"></i>
-                            </button>
-                        </table>
-
-                    </div>
-
-                    <br><br>
-
-
-                    <h5>Riwayat Pekerjaan (di luar ITB)</h5>
-
-                    <div v-if="riwayatPekerjaan.length === 0" class="no-riwayat-pekerjaan">
-                        <div v-if="!isEditRiwayat">
-                            <hr>
-                            Belum ditambahkan.
-                            <br>
-                        </div>
-                        <button v-if="isEditRiwayat" class="btn btn-primary float-sm-left" v-on:click="addRiwayatPekerjaan">
-                            Tambah <i class="fas fa-plus"></i>
-                        </button>
-                    </div>
-
-                    <div v-if="riwayatPekerjaan.length !== 0" class="riwayat-pekerjaan">
-                        <table class="table">
-                            <thead>
-                            <tr>
-                                <th scope="col">Nama Institusi</th>
-                                <th scope="col">Jabatan</th>
-                                <th scope="col">Tahun Masuk</th>
-                                <th scope="col">Tahun Keluar</th>
-                            </tr>
-                            </thead>
-                            <tbody v-for="rp in riwayatPekerjaan">
-                            <tr v-if="!isEditRiwayat">
-                                <td v-text="rp.nama_institusi" ></td>
-                                <td v-text="rp.posisi" ></td>
-                                <td v-text="rp.tahun_masuk" ></td>
-                                <td v-text="rp.tahun_keluar" ></td>
-                            </tr>
-
-                            <tr v-if="isEditRiwayat">
-                                <td>
-                                    <div class="form-group">
-                                        <input v-model="rp.nama_institusi" type="text" class="form-control text-center">
-                                        <small class="form-text text-muted">*Wajib diisi</small>
-                                    </div>
-                                </td>
-                                <td>
-                                    <div class="form-group">
-                                        <input v-model="rp.posisi" type="text" class="form-control text-center">
-                                        <small class="form-text text-muted">*Wajib diisi</small>
-                                    </div>
-                                </td>
-                                <td>
-                                    <div class="form-group">
-                                        <input v-model="rp.tahun_masuk" type="text" class="form-control text-center">
-                                        <small class="form-text text-muted">*Wajib diisi</small>
-                                    </div>
-                                </td>
-                                <td>
-                                    <div class="form-group">
-                                        <input v-model="rp.tahun_keluar" type="text" class="form-control text-center">
-                                        <small class="form-text text-muted">*Isi dengan "-" jika belum selesai</small>
-                                    </div>
-                                </td>
-                                <td>
-                                    <button v-bind:id="riwayatPekerjaan.indexOf(rp)" v-on:click="delRiwayatPekerjaan($event)" class="btn btn-danger" type="button">
-                                        Hapus <i class="fas fa-trash-alt"></i>
-                                    </button>
-                                </td>
-                            </tr>
-                            </tbody>
-                            <button v-if="isEditRiwayat" class="btn btn-primary float-sm-left" v-on:click="addRiwayatPekerjaan">
-                                Tambah <i class="fas fa-plus"></i>
-                            </button>
-                        </table>
-
-                    </div>
-
-                </div>
-            </div>
-            <div class="card-footer text-muted" v-if="isEditRiwayat">
-                <a href="#riwayat-pegawai" class="btn btn-success float-sm-right btn-simpan" v-on:click="saveRiwayatPegawai">
-                    Simpan <i class="fas fa-check"></i>
-                    </a>
-                <a href="#riwayat-pegawai" class="btn btn-danger float-sm-right" v-on:click="cancelRiwayatPegawai">
-                    Batal <i class ="fas fa-times"></i>
-                </a>
-            </div>
-        </div>
-
-        <br>
-
-        <div class="card" id="sertificate">
-            <div class="card-header">
-                Sertifikat<button class="btn btn-primary float-sm-right" v-on:click="editSertifikat" v-bind:disabled="disableEdit">
-                    Edit <i class="fas fa-edit"></i>
-                    </button>
-            </div>
-
-            <div class="card-body">
-                <div class="container">
-                    <div v-if="sertifikat.length === 0" class="no-sertificate">
-                        <div v-if="!isEditSertifikat">
-                            Belum ditambahkan.
-                            <br>
-                        </div>
-                        <button v-if="isEditSertifikat" class="btn btn-primary float-sm-left" v-on:click="addSertifikat">
-                            Tambah <i class="fas fa-plus"></i>
-                        </button>
-                    </div>
-
-                    <div v-if="sertifikat.length !== 0" class="sertificate">
-                        <table class="table" align="left" style="width: 100%">
-                            <tbody v-for="dk in sertifikat">
-                            <div v-if="!isEditSertifikat">
-                                <colgroup>
-                                    <col width="35%">
-                                    <col width="15%">
-                                    <col width="50%">
-                                </colgroup>
-                                <tr>
-                                    <td rowspan="4">
-                                        <img id="img-sertifikat-1" v-bind:src="dk.nama_file" class="img-thumbnail" width="200">
-                                    </td>
-                                    <th scope="col">Judul</th>
-                                    <td v-text="dk.judul" ></td>
-                                </tr>
-                                <tr>
-                                    <th scope="col">Lembaga</th>
-                                    <td v-text="dk.lembaga" ></td>
-                                </tr>
-                                <tr>
-                                    <th scope="col">Tahun Diterbitkan</th>
-                                    <td v-text="dk.tahun_diterbitkan" ></td>
-                                </tr>
-                                <tr>
-                                    <th scope="col">Catatan</th>
-                                    <td v-text="dk.catatan" ></td>   
-                                </tr>
-                            </div>
-
-                            <div v-if="isEditSertifikat">
-                            <tr>
-                                <td rowspan="4">
-                                    <div>
-                                        <button v-bind:id="sertifikat.indexOf(dk)" v-on:click="delSertifikat($event)" class="btn btn-danger" type="button">
-                                            Hapus <i class="fas fa-trash-alt"></i>
-                                        </button>
-                                    </div>
-                                </td>
-                                <td rowspan="4">
-                                    <img id="img-sertifikat-1" v-bind:src="dk.nama_file" class="img-thumbnail" width="200">
-                                    <br><br>
-                                    <input type="file" v-bind:id="sertifikat.indexOf(dk)" v-on:change="FileChangeSertifikat" class="form-control">
-                                </td>
-                                <th scope="col">Judul</th>
-                                <td>
-                                    <div class="form-group">
-                                        <input v-model="dk.judul" type="text" class="form-control">
-                                        <small class="form-text text-muted">*Wajib diisi</small>
-                                    </div>
-                                </td>
-                            </tr>
-                            <tr>
-                                <th scope="col">Lembaga</th>
-                                <td>
-                                    <div class="form-group">
-                                        <input v-model="dk.lembaga" type="text" class="form-control">
-                                        <small class="form-text text-muted">*Wajib diisi</small>
-                                    </div>
-                                </td>
-                            </tr>
-                            <tr>
-                                <th scope="col">Tahun Diterbitkan</th>
-                                <td>
-                                    <div class="form-group">
-                                        <input v-model="dk.tahun_diterbitkan" type="text" class="form-control">
-                                        <small class="form-text text-muted">*Wajib diisi</small>
-                                    </div>
-                                </td>
-                            </tr>
-                            <tr>
-                                <th scope="col">Catatan</th>
-                                <td>
-                                    <div class="form-group">
-                                        <input v-model="dk.catatan" type="text" class="form-control">
-                                        <small class="form-text text-muted">*Wajib diisi</small>
-                                    </div>
-                                </td>
-                            </tr>
-                            </div>
-                            </tbody>
-                            <button v-if="isEditSertifikat" class="btn btn-primary float-sm-left" v-on:click="addSertifikat">
-                                Tambah <i class="fas fa-plus"></i>
-                            </button>
-                        </table>
-                    </div>
-                </div>
-            </div>
-            <div class="card-footer text-muted" v-if="isEditSertifikat">
-                <a href="#sertificate" class="btn btn-success float-sm-right btn-simpan" v-on:click="saveSertifikat">
-                    Simpan <i class="fas fa-check"></i>
-                    </a>
-                <a href="#sertificate" class="btn btn-danger float-sm-right" v-on:click="cancelSertifikat">
-                    Batal <i class ="fas fa-times"></i>
-                </a>
-            </div>
-        </div>
-
-
-        <br>
-
-        <div class="card" id="data-kinerja">
-            <div class="card-header">
-                Hasil Kinerja
-                <!-- <button class="btn btn-primary float-sm-right" v-on:click="editDataKinerja" v-bind:disabled="disableEdit">
-                    Edit <i class="fas fa-edit"></i>
-                 -->    </button>
-            </div>
-
-            <div class="card-body">
-                <div class="container">
-                    <div v-if="dataKinerja.length === 0" class="no-data-kinerja">
-                        <div v-if="!isEditDataKinerja">
-                            Belum ditambahkan.
-                            <br>
-                        </div>
-                        <button v-if="isEditDataKinerja" class="btn btn-primary float-sm-left" v-on:click="addDataKinerja">
-                            Tambah <i class="fas fa-plus"></i>
-                        </button>
-                    </div>
-
-                    <div v-if="dataKinerja.length !== 0" class="data-kinerja">
-                        <table class="table">
-                            <thead>
-                            <tr>
-                                <th scope="col">Tahun</th>
-                                <th scope="col">Semester</th>
-                                <th scope="col">Nilai</th>
-                                <th scope="col">Catatan</th>
-                            </tr>
-                            </thead>
-                            <tbody>
-                                
-                            <tr v-if="!isEditDataKinerja" v-for="dks in dataKinerjaShow">
-                                <td v-text="dks.tahun" ></td>
-                                <td v-text="dks.semester" ></td>
-                                <td v-text="dks.nilai" ></td>
-                                <td v-text="dks.catatan" ></td>
-                            </tr>
-
-                            <tr v-if="isEditDataKinerja" v-for="dk in dataKinerja">
-                                <td>
-                                    <div class="form-group">
-                                        <input v-model="dk.tahun" type="text" class="form-control text-center">
-                                        <small class="form-text text-muted">*Wajib diisi</small>
-                                    </div>
-                                </td>
-                                <td>
-                                    <div class="form-group">
-                                        <input v-model="dk.semester" type="text" class="form-control text-center">
-                                        <small class="form-text text-muted">*Wajib diisi</small>
-                                    </div>
-                                </td>
-                                <td>
-                                    <div class="form-group">
-                                        <input v-model="dk.nilai" type="text" class="form-control text-center">
-                                        <small class="form-text text-muted">*Wajib diisi</small>
-                                    </div>
-                                </td>
-                                <td>
-                                    <div class="form-group">
-                                        <input v-model="dk.catatan" type="text" class="form-control text-center">
-                                        <small class="form-text text-muted">*Wajib diisi</small>
-                                    </div>
-                                </td>
-                                <td>
-                                    <button v-bind:id="dataKinerja.indexOf(dk)" v-on:click="delDataKinerja($event)" class="btn btn-danger" type="button">
-                                        Hapus <i class="fas fa-trash-alt"></i>
-                                    </button>
-                                </td>
-                            </tr>
-                            </tbody>
-                            <a href="#data-kinerja" v-if="!isEditDataKinerja && !isShowAllDataKinerja" class="btn btn-primary float-sm-left" v-on:click="showAllDataKinerja">
-                                Tamplikan semua <i class="fas fa-eye"></i>
-                            </a>
-                            <a href="#data-kinerja" v-if="!isEditDataKinerja && isShowAllDataKinerja" class="btn btn-danger float-sm-left" v-on:click="hideDataKinerja">
-                                Sembunyikan sebagian <i class="fas fa-eye-slash"></i>
-                            </a>
-                            <button v-if="isEditDataKinerja" class="btn btn-primary float-sm-left" v-on:click="addDataKinerja">
-                                Tambah <i class="fas fa-plus"></i>
-                            </button>
-                        </table>
-                    </div>
-                </div>
-            </div>
-            <div class="card-footer text-muted" v-if="isEditDataKinerja">
-                <a href="#data-kinerja" class="btn btn-success float-sm-right btn-simpan" v-on:click="saveDataKinerja">
-                    Simpan <i class="fas fa-check"></i>
-                    </a>
-                <a href="#data-kinerja" class="btn btn-danger float-sm-right" v-on:click="cancelDataKinerja">
-                    Batal <i class ="fas fa-times"></i>
-                </a>
-            </div>
-        </div>
-
-        <br>
-
-        <div class="card" id="data-kompetensi">
-            <div class="card-header">
-                Hasil Kompetensi
-                <!-- <button class="btn btn-primary float-sm-right" v-on:click="editDataKompetensi" v-bind:disabled="disableEdit">
-                    Edit <i class="fas fa-edit"></i>
-                 </button> -->
-            </div>
-
-            <div class="card-body">
-                <div class="container">
-
-                    <button class="btn btn-primary float-sm-left" v-on:click="downloadKompetensi" v-bind:disabled="disableEdit">
-                    Download <i class="fas fa-download"></i>
-                 </button>
-
-                </div>
-            </div>
-        </div>
-
-        <br>
-
-        <div class="card" id="rekomendasi">
-            <div class="card-header">
-                Rekomendasi
-                 <!-- <button class="btn btn-primary float-sm-right" v-on:click="editRekomendasi" v-bind:disabled="disableEdit">
-                    Edit <i class="fas fa-edit"></i>
-                 </button> -->
-            </div>
-
-            <div class="card-body">
-                <div class="container">
-
-                    <h5>Rekomendasi Training</h5>
-
-                    <hr>
-
-                    <div v-if="rekomendasiTraining.length === 0" class="no-rekomendasi-posisi">
-                        <div v-if="!isEditRekomendasi">
-                            Belum ditambahkan.
-                            <br>
-                        </div>
-                        <button v-if="isEditRekomendasi" class="btn btn-primary float-sm-left" v-on:click="addRekomendasiTraining">
-                            Tambah <i class="fas fa-plus"></i>
-                        </button>
-                        
-                    </div>
-
-                    <div v-if="rekomendasiTraining.length !== 0" v-for="rt in rekomendasiTraining" class="rekomendasi-training">
-                        <ul v-if="!isEditRekomendasi">
-                            <li v-text="trainingList.find(x => x.id_training == rt.id_training).nama_training"></li>
-                        </ul>
-
-                        <div v-if="isEditRekomendasi" class="form-group row">
-                            <div class="col-sm-10">
-                                <select class="form-control" v-model="rt.id_training">
-                                    <option v-for="tl in trainingList" v-bind:value="tl.id_training">
-                                        {{ tl.nama_training }}
-                                    </option>
-                                </select>
-                                <small class="form-text text-muted">*Wajib diisi</small>
-                            </div>
-                            <div class="col-sm-1">
-                                <button v-bind:id="rekomendasiTraining.indexOf(rt)" v-on:click="delRekomendasiTraining($event)" class="btn btn-danger" type="button">
-                                    Hapus <i class="fas fa-trash-alt"></i>
-                                </button>
-                            </div>
-                            
-                        </div>
-
-
-                    </div>
-
-                    <button v-if="isEditRekomendasi && rekomendasiTraining.length !== 0" class="btn btn-primary float-sm-left" v-on:click="addRekomendasiTraining">
-                        Tambah <i class="fas fa-plus"></i>
-                    </button>
-
-                    <br><br><br>
-
-
-                    <h5>Rekomendasi Lain-lain</h5>
-
-                    
-
-                    <div v-if="rekomendasiPosisi.length === 0" class="no-rekomendasi-posisi">
-                        <div v-if="!isEditRekomendasi">
-                            <hr>
-                            Belum ditambahkan.
-                            <br>
-                        </div>
-                        <button v-if="isEditRekomendasi" class="btn btn-primary float-sm-left" v-on:click="addRekomendasiPosisi">
-                            Tambah <i class="fas fa-plus"></i>
-                        </button>
-                        
-                    </div>
-
-                    <div v-if="rekomendasiPosisi.length !== 0" class="rekomendasi-posisi">
-                        <table class="table">
-                            <thead>
-                            <tr>
-                                <th scope="col">Unit Kerja</th>
-                                <th scope="col">Jabatan</th>
-                            </tr>
-                            </thead>
-                            <tbody v-for="rp in rekomendasiPosisi">
-                            <tr v-if="!isEditRekomendasi">
-                                <td v-text="unitKerja.find(x => x.id_unit_kerja == rp.id_unit_kerja).nama_unit_kerja" ></td>
-                                <td v-text="posisi.find(x => x.id_posisi == rp.id_posisi).nama_posisi" ></td>
-                            </tr>
-                            <tr v-if="isEditRekomendasi">
-                                <td>
-                                    <div class="form-group">
-                                        <select class="form-control" v-model="rp.id_unit_kerja">
-                                            <option v-for="uk in unitKerja" v-bind:value="uk.id_unit_kerja">
-                                                {{ uk.nama_unit_kerja }}
-                                            </option>
-                                        </select>
-                                        <small class="form-text text-muted">*Wajib diisi</small>
-                                    </div>
-                                </td>
-                                <td>
-                                    <div class="form-group">
-                                        <select class="form-control" v-model="rp.id_posisi">
-                                            <option v-for="pos in posisi" v-bind:value="pos.id_posisi">
-                                                {{ pos.nama_posisi }}
-                                            </option>
-                                        </select>
-                                        <small class="form-text text-muted">*Wajib diisi</small>
-                                    </div>
-                                </td>
-                                <td>
-                                    <button v-bind:id="rekomendasiPosisi.indexOf(rp)" v-on:click="delRekomendasiPosisi($event)" class="btn btn-danger" type="button">
-                                        Hapus <i class="fas fa-trash-alt"></i>
-                                    </button>
-                                </td>
-                            </tr>
-                            </tbody>
-                            <button v-if="isEditRekomendasi" class="btn btn-primary float-sm-left" v-on:click="addRekomendasiPosisi">
-                                Tambah <i class="fas fa-plus"></i>
-                            </button>
-                        </table>
-
-                    </div>
-
-                    <br>
-
-                </div>
-            </div>
-            <div class="card-footer text-muted" v-if="isEditRekomendasi">
-                <a href="#rekomendasi" class="btn btn-success float-sm-right btn-simpan" v-on:click="saveRekomendasi">
-                    Simpan <i class="fas fa-check"></i>
-                    </a>
-                <a href="#rekomendasi" class="btn btn-danger float-sm-right" v-on:click="cancelRekomendasi">
-                    Batal <i class ="fas fa-times"></i>
-                </a>
-            </div>
-        </div>
-
     </div>
 
 </template>
 
+<script>
+   export default {
+        props: ['id', 'unit-kerja', 'posisi', 'kelompok-kompetensi', 'data-kinerja-temp', 'rekomendasi-training-temp', 'training-list', 'rekomendasi-posisi-temp'],
+
+        data() {
+            return {
+                
+                pegawai: {
+                    imageProfileUrl: "",
+                    nama: "",
+                    tempatLahir: "",
+                    tanggalLahir: "",
+                    email: "",
+                    nopeg: "",
+                    unitKerja: "",
+                    posisi: "",
+                    kompetensi: "",
+                    tahunMasuk: ""
+                },
+                dataKepegawaian: [],
+                dataKepegawaianPrev: null,
+                riwayatPendidikan: [],
+                riwayatPekerjaan: [],  
+                sertifikat: [],
+
+                isShowAllDataKinerja: false,
+                disableEdit: false,
+                isEditProfile: false,
+                isEditKepegawaian: false,
+                isEditRiwayat: false,
+                isEditSertifikat: false,
+                isEditDataKinerja: false,
+                isEditRekomendasi: false,
+                cachedPegawai: null,
+                cachedDataKepegawaian: null,
+                cachedRiwayatPendidikan: null,
+                cachedRiwayatPekerjaan: null,
+                cachedSertifikat: null,
+                cachedDataKinerja: null,
+                cachedRekomendasiTraining: null,
+                cachedRekomendasiPosisi:null,
+                pegawai: {
+                    imageProfileUrl: null,
+                    nama: null,
+                    tempatLahir: null,
+                    tanggalLahir: null,
+                    email: null,
+                    nopeg: null,
+                    unitKerja: {
+                        id: null,
+                        text: null
+                    },
+                    posisi: {
+                        id: null,
+                        text: null   
+                    },
+                    kompetensi: {
+                        id: null,
+                        text: null   
+                    },
+                    tahunMasuk: null
+                },
+                dataKepegawaian: [],
+                riwayatPendidikan: [],
+                riwayatPekerjaan: [],
+                dataKinerja: [],
+                dataKinerjaShow: [],
+                rekomendasiTraining : [],
+                rekomendasiPosisi : []
+            }
+               
+        },  
+
+        mounted() {
+            
+        },
+
+        created() {
+            //dataKinerja
+            this.dataKinerja = this.dataKinerjaTemp;
+
+            axios.get('/api/pegawai/' + this.id)
+                .then((response) => {
+                    //get data from api response
+                    var responsePegawai = response.data["data"];
+
+                    this.dataKepegawaian = responsePegawai["kepegawaian"];
+                    this.riwayatPendidikan = responsePegawai["pendidikan"];
+                    this.riwayatPekerjaan = responsePegawai["pekerjaan"];
+                    this.updateDataKepegawaian();
+
+                    this.dataKepegawaianPrev = this.dataKepegawaian[this.dataKepegawaian.length-1];
+
+                    this.sertifikat = responsePegawai["sertifikat"];
+                    this.updateSertifikat();
+
+                    this.pegawai.nama = responsePegawai["user"]["name"];
+                    this.pegawai.tempatLahir = responsePegawai["pegawai"]["tempat_lahir"];
+                    this.pegawai.tanggalLahir = responsePegawai["pegawai"]["tanggal_lahir"];
+                    this.pegawai.email = responsePegawai["user"]["email"];
+                    this.pegawai.nopeg = responsePegawai["pegawai"]["nip"];
+                    this.pegawai.imageProfileUrl = 'pimage/' + responsePegawai["pegawai"]["nip"] + '.' + responsePegawai["pegawai"]["ekstensi_foto"];
+                    this.pegawai.kompetensi.id = responsePegawai["pegawai"]["id_kelompok_kompetensi"];
+                    this.updateProfilPegawai();
+
+                    //chacing
+                    this.cachedPegawai = JSON.parse(JSON.stringify(this.pegawai));
+                    this.cachedDataKepegawaian = JSON.parse(JSON.stringify(this.dataKepegawaian));
+                    this.cachedRiwayatPendidikan = JSON.parse(JSON.stringify(this.riwayatPendidikan));
+                    this.cachedRiwayatPekerjaan = JSON.parse(JSON.stringify(this.riwayatPekerjaan));
+                    this.cachedSertifikat = JSON.parse(JSON.stringify(this.sertifikat));
+                    this.cachedDataKinerja = JSON.parse(JSON.stringify(this.dataKinerja));
+
+                    console.log(this);
+                })
+                .catch(function (error) {
+                    console.log(error);
+                    alert('Gagal mengambil data');
+                });
+
+            //caching others
+            this.cachedDataKinerja = JSON.parse(JSON.stringify(this.dataKinerja));
+            
+            // init dataKinerjaShow
+            if (this.dataKinerja.length > 6) {
+                this.dataKinerjaShow = this.dataKinerja.slice(this.dataKinerja.length-6);
+            } else {
+                this.dataKinerjaShow = this.dataKinerja;
+            }
+
+            //init rekomendasiTraining
+            this.rekomendasiTraining = this.rekomendasiTrainingTemp;
+            this.cachedRekomendasiTraining = JSON.parse(JSON.stringify(this.rekomendasiTraining));
+
+            //init rekomendasiPosisi
+            this.rekomendasiPosisi = this.rekomendasiPosisiTemp;
+            this.cachedRekomendasiPosisi = JSON.parse(JSON.stringify(this.rekomendasiPosisi));
+        },
+
+        methods: {
+            downloadKompetensi() {
+                window.open('/api/kompetensi/report/' + this.id);
+            },
+
+            showAllDataKinerja() {
+                this.isShowAllDataKinerja = true;
+                this.dataKinerjaShow = this.dataKinerja;
+            },
+
+            hideDataKinerja() {
+                this.isShowAllDataKinerja = false;
+                
+                if (this.dataKinerja.length > 6) {
+                    this.dataKinerjaShow = this.dataKinerja.slice(this.dataKinerja.length-6);
+                }
+            },
+
+            updateProfilPegawai() {
+                if (this.pegawai.unitKerja.id != null) {
+                    this.pegawai.unitKerja.text = this.unitKerja.find(x => x.id_unit_kerja == this.pegawai.unitKerja.id).nama_unit_kerja;
+                } else {
+                    this.pegawai.unitKerja.text = null;
+                }
+                
+                if (this.pegawai.kompetensi.id != null) {
+                    this.pegawai.kompetensi.text = this.kelompokKompetensi.find(x => x.id_kelompok_kompetensi == this.pegawai.kompetensi.id).nama_kelompok_kompetensi;
+                } else {
+                    this.pegawai.kompetensi.text = null;
+                }
+                    
+                if (this.pegawai.posisi.id != null) {
+                    this.pegawai.posisi.text = this.posisi.find(x => x.id_posisi == this.pegawai.posisi.id).nama_posisi;
+                } else {
+                    this.pegawai.posisi.text = null;
+                }
+            },
+
+            updateDataKepegawaian() {
+                
+                //update relevan
+                if (this.dataKepegawaian.length == 0) {
+                    this.pegawai.unitKerja.id = null;
+                    this.pegawai.posisi.id = null;
+                    // this.pegawai.kompetensi.id = null;
+                    this.pegawai.tahunMasuk = null;
+                } else {
+                    //sort
+                    this.dataKepegawaian.sort(function(a, b){
+                        var keyA = a.tahun_masuk,
+                            keyB = b.tahun_masuk;
+                        // Compare the 2 dates
+                        if(keyA < keyB) return -1;
+                        if(keyA > keyB) return 1;
+                        return 0;
+                    });
+                    var lastDataPegawai = this.dataKepegawaian[this.dataKepegawaian.length-1];
+                    this.pegawai.unitKerja.id = lastDataPegawai["id_unit_kerja"];
+                    this.pegawai.posisi.id = lastDataPegawai["id_posisi"];
+                    // this.pegawai.kompetensi.id = lastDataPegawai["id_kelompok_kompetensi"];
+                    this.pegawai.tahunMasuk = lastDataPegawai["tahun_masuk"];
+                }
+            },
+
+            updateDataKepegawaianAfterEditProfile() {
+                
+                //update relevan
+                if (this.dataKepegawaian.length == 0) {
+                    var newData = {
+                        id_data_kepegawaian : null,
+                        id_pegawai : null,
+                        id_unit_kerja : this.pegawai.unitKerja.id,
+                        id_posisi : this.pegawai.posisi.id,
+                        // id_kelompok_kompetensi : this.pegawai.kompetensi.id,
+                        tahun_masuk : this.pegawai.tahunMasuk,
+                        tahun_keluar : null
+                    };
+                    this.dataKepegawaian.push(newData);
+                } else {
+                    //sort
+                    this.dataKepegawaian.sort(function(a, b){
+                        var keyA = a.tahun_masuk,
+                            keyB = b.tahun_masuk;
+                        // Compare the 2 dates
+                        if(keyA < keyB) return -1;
+                        if(keyA > keyB) return 1;
+                        return 0;
+                    });
+                    var lastDataPegawai = this.dataKepegawaian[this.dataKepegawaian.length-1];
+                    lastDataPegawai["id_unit_kerja"] = this.pegawai.unitKerja.id;
+                    lastDataPegawai["id_posisi"] = this.pegawai.posisi.id;
+                    // lastDataPegawai["id_kelompok_kompetensi"] = this.pegawai.kompetensi.id;
+                    lastDataPegawai["tahun_masuk"] = this.pegawai.tahunMasuk;
+                }
+            },
+
+            updateSertifikat(){
+                for(var i = 0; i < this.sertifikat.length; i++){
+                    this.sertifikat[i].nama_file = 'simage/' + this.sertifikat[i].nama_file;
+                }
+            },
+
+            disableEditButton() {
+                this.disableEdit = true;
+            },
+
+            enableEditButton() {
+                this.disableEdit = false;
+            },
+
+            editProfilPegawai() {
+                this.isEditProfile = true;
+                this.disableEditButton();
+            },
+
+            editDataKepegawaian() {
+                this.isEditKepegawaian = true;
+                this.disableEditButton();
+            },
+
+            editRiwayatPegawai() {
+                this.isEditRiwayat = true;
+                this.disableEditButton();
+            },
+
+            editSertifikat() {
+                this.isEditSertifikat = true;
+                this.disableEditButton();
+            },
+
+            editDataKinerja() {
+                this.isEditDataKinerja = true;
+                this.disableEditButton();
+            },
+
+            editDataKompetensi() {
+
+            },
+
+            editRekomendasi() {
+                this.isEditRekomendasi = true;
+                this.disableEditButton();
+            },
+
+            addDataKepegawaian() {
+                var newData = {
+                    id_data_kepegawaian : null,
+                    id_pegawai : null,
+                    id_unit_kerja : null,
+                    id_posisi : null,
+                    // id_kelompok_kompetensi : null,
+                    tahun_masuk : null,
+                    tahun_keluar : null
+                };
+                this.dataKepegawaian.push(newData);
+            },
+
+            addRiwayatPendidikan() {
+                var newData = {
+                    id_riwayat_pendidikan : null,
+                    id_pegawai : null,
+                    nama_institusi : null,
+                    strata : null,
+                    jurusan : null,
+                    tahun_masuk : null,
+                    tahun_keluar : null
+                };
+                this.riwayatPendidikan.push(newData);
+            },
+
+            addRiwayatPekerjaan() {
+                var newData = {
+                    id_riwayat_pekerjaan : null,
+                    id_pegawai : null,
+                    nama_institusi : null,
+                    posisi : null,
+                    tahun_masuk : null,
+                    tahun_keluar : null
+                };
+                this.riwayatPekerjaan.push(newData);
+            },
+
+            addSertifikat() {
+                var newData = {
+                    id_sertifikat : null,
+                    id_pegawai : null,
+                    judul : null,
+                    lembaga : null,
+                    tahun_diterbitkan : null,
+                    catatan : null,
+                    nama_file : null,
+                };
+                this.sertifikat.push(newData);
+            },
+
+            addDataKinerja() {
+                var newData = {
+                    id_kinerja : null,
+                    id_pegawai : null,
+                    tahun : null,
+                    semester : null,
+                    nilai : null,
+                    catatan : null
+                };
+                this.dataKinerja.push(newData);
+            },
+
+            addRekomendasiTraining() {
+                var newData = {
+                    id_rekomendasi_training : null,
+                    id_pegawai : null,
+                    id_training : null
+                };
+                this.rekomendasiTraining.push(newData);
+            },
+
+            addRekomendasiPosisi() {
+                var newData = {
+                    id_rekomendasi_training : null,
+                    id_pegawai : null,
+                    id_unit_kerja : null,
+                    id_posisi : null
+                };
+                this.rekomendasiPosisi.push(newData);
+            },
+
+            delDataKepegawaian(event) {
+                var targetIndex = event.currentTarget.id;
+                this.dataKepegawaian.splice(targetIndex, 1);
+            },
+
+            delRiwayatPendidikan(event) {
+                var targetIndex = event.currentTarget.id;
+                this.riwayatPendidikan.splice(targetIndex, 1);
+            },
+
+            delRiwayatPekerjaan(event) {
+                var targetIndex = event.currentTarget.id;
+                this.riwayatPekerjaan.splice(targetIndex, 1);
+            },
+
+            delSertifikat(event) {
+                var targetIndex = event.currentTarget.id;
+                this.sertifikat.splice(targetIndex, 1);
+            },
+
+            delDataKinerja(event) {
+                var targetIndex = event.currentTarget.id;
+                this.dataKinerja.splice(targetIndex, 1);
+            },
+
+            delRekomendasiTraining(event) {
+                var targetIndex = event.currentTarget.id;
+                this.rekomendasiTraining.splice(targetIndex, 1);
+            },
+
+            delRekomendasiPosisi(event) {
+                var targetIndex = event.currentTarget.id;
+                this.rekomendasiPosisi.splice(targetIndex, 1);
+            },
+
+            saveProfilPegawai() {
+                this.enableEditButton();
+
+                this.updateProfilPegawai();
+                this.updateDataKepegawaianAfterEditProfile();
+
+                this.cachedPegawai = JSON.parse(JSON.stringify(this.pegawai));
+                this.isEditProfile = false;
+
+                axios.post('/api/pegawai/' + this.id, {
+                    pegawai: this.pegawai,
+                    data_kepegawaian: this.dataKepegawaian,
+                    data_kepegawaian_prev: this.dataKepegawaianPrev,
+                    _method: "put"
+                })
+                .then(function (response) {
+                    console.log(response);
+                    window.location.href = '/pages/profile';
+                })
+                .catch(function (error) {
+                    console.log(error);
+                    alert('Semua kolom harus terisi');
+                });
+
+                console.log(this.dataKepegawaian);
+
+            },
+
+            saveDataKepegawaian() {
+                this.updateDataKepegawaian();
+                this.updateProfilPegawai();
+                this.enableEditButton();
+                this.cachedDataKepegawaian = JSON.parse(JSON.stringify(this.dataKepegawaian));
+                this.isEditKepegawaian = false;
+
+                console.log(this.dataKepegawaian);
+
+                axios.post('/api/kepegawaian/' + this.id, {
+                    kepegawaian: this.dataKepegawaian,
+                    _method: 'put'
+                })
+                .then(function (response) {
+                    console.log(response);
+                    window.location.href = "/pages/profile";
+                })
+                .catch(function (error) {
+                    console.log(error);
+                    alert('Semua kolom harus terisi');
+                });
+            },
+
+            saveRiwayatPegawai() {
+                //sort
+                this.riwayatPendidikan.sort(function(a, b){
+                        var keyA = a.tahun_masuk,
+                            keyB = b.tahun_masuk;
+                        // Compare the 2 dates
+                        if(keyA < keyB) return -1;
+                        if(keyA > keyB) return 1;
+                        return 0;
+                    });
+
+                //sort
+                this.riwayatPekerjaan.sort(function(a, b){
+                        var keyA = a.tahun_masuk,
+                            keyB = b.tahun_masuk;
+                        // Compare the 2 dates
+                        if(keyA < keyB) return -1;
+                        if(keyA > keyB) return 1;
+                        return 0;
+                    });
+
+                this.enableEditButton();
+                this.cachedRiwayatPendidikan = JSON.parse(JSON.stringify(this.riwayatPendidikan));
+                this.cachedRiwayatPekerjaan = JSON.parse(JSON.stringify(this.riwayatPekerjaan));
+                this.isEditRiwayat = false;
+
+                console.log(this.riwayatPendidikan);
+                console.log(this.riwayatPekerjaan);
+
+                axios.post('/api/riwayat/' + this.id, {
+                    pendidikan: this.riwayatPendidikan,
+                    pekerjaan: this.riwayatPekerjaan,
+                    _method: 'put'
+                })
+                .then(function (response) {
+                    console.log(response);
+                    window.location.href = "/pages/profile";
+                })
+                .catch(function (error) {
+                    console.log(error);
+                    alert('Semua kolom harus terisi');
+                });
+            },
+
+            saveSertifikat() {
+                this.enableEditButton();
+                this.cachedSertifikat = JSON.parse(JSON.stringify(this.sertifikat));
+                this.isEditSertifikat = false;
+                console.log(this.sertifikat);
+
+                axios.post('/api/sertifikat/' + this.id, {
+                    sertifikat: this.sertifikat,
+                    _method: 'put'
+                })
+                .then(function (response) {
+                    console.log(response.data.data);
+                    window.location.href = "/pages/profile";
+                })
+                .catch(function (error) {
+                    console.log(error);
+                    alert('Semua kolom harus terisi');
+                });
+            },
+
+            saveDataKinerja() {
+                //sort
+                this.dataKinerja.sort(function(a, b){
+                        var keyA = a.tahun,
+                            keyB = b.tahun;
+                        // Compare the 2 dates
+                        if(keyA < keyB) return -1;
+                        if(keyA > keyB) return 1;
+                        if (keyA == keyB) {
+                            if (a.semester < b.semester) return -1;
+                            else return 1;
+                        }
+                    });
+
+                this.enableEditButton();
+                this.cachedDataKinerja = JSON.parse(JSON.stringify(this.dataKinerja));
+                this.isEditDataKinerja = false;
+
+                if (this.isShowAllDataKinerja) {
+                    this.showAllDataKinerja();
+                } else {
+                    this.hideDataKinerja();
+                }
+            },
+
+            saveRekomendasi() {
+                this.enableEditButton();
+                this.cachedRekomendasiTraining = JSON.parse(JSON.stringify(this.rekomendasiTraining));
+                this.cachedRekomendasiPosisi = JSON.parse(JSON.stringify(this.rekomendasiPosisi));
+                this.isEditRekomendasi = false;
+            },
+
+            cancelProfilPegawai() {
+                this.enableEditButton();
+                this.pegawai = JSON.parse(JSON.stringify(this.cachedPegawai));
+                this.isEditProfile = false;
+            },
+
+            cancelDataKepegawaian() {
+                this.enableEditButton();
+                this.dataKepegawaian = JSON.parse(JSON.stringify(this.cachedDataKepegawaian));
+                this.isEditKepegawaian = false;
+            },
+
+            cancelRiwayatPegawai() {
+                this.enableEditButton();
+                this.riwayatPendidikan = JSON.parse(JSON.stringify(this.cachedRiwayatPendidikan));
+                this.riwayatPekerjaan = JSON.parse(JSON.stringify(this.cachedRiwayatPekerjaan));
+                this.isEditRiwayat = false;
+            },
+
+            cancelSertifikat() {
+                this.enableEditButton();
+                this.sertifikat = JSON.parse(JSON.stringify(this.cachedSertifikat));
+                this.isEditSertifikat = false;
+            },
+
+            cancelDataKinerja() {
+                this.enableEditButton();
+                this.dataKinerja = JSON.parse(JSON.stringify(this.cachedDataKinerja));
+                this.isEditDataKinerja = false;
+
+                if (this.isShowAllDataKinerja) {
+                    this.showAllDataKinerja();
+                } else {
+                    this.hideDataKinerja();
+                }
+            },
+
+            cancelRekomendasi() {
+                this.enableEditButton();
+                this.rekomendasiTraining = JSON.parse(JSON.stringify(this.cachedRekomendasiTraining));
+                this.rekomendasiPosisi = JSON.parse(JSON.stringify(this.cachedRekomendasiPosisi));
+                this.isEditRekomendasi = false;
+            },
+
+            FileChangeProfile(e) {
+                let files = e.target.files || e.dataTransfer.files;
+                if (!files.length)
+                    return;
+
+                let reader = new FileReader();
+                let vm = this;
+                reader.onload = (e) => {
+                    vm.pegawai.imageProfileUrl = e.target.result;
+                };
+                reader.readAsDataURL(files[0]);
+            },
+
+            FileChangeSertifikat(e) {
+                let files = e.target.files || e.dataTransfer.files;
+                if (!files.length)
+                    return;
+
+                var idx = e.currentTarget.id;
+
+                let reader = new FileReader();
+                let vm = this;
+                reader.onload = (e) => {
+                    vm.sertifikat[idx].nama_file = e.target.result;
+                };
+                reader.readAsDataURL(files[0]);
+            },
+        }
+    }
+</script>
+
 <style>
 
 </style>
\ No newline at end of file
diff --git a/resources/assets/js/components/ProfilPegawai2.vue b/resources/assets/js/components/ProfilPegawai2.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a305c83cf3e15d456a33040cccc55d0eb7f4596d
--- /dev/null
+++ b/resources/assets/js/components/ProfilPegawai2.vue
@@ -0,0 +1,739 @@
+<template>
+    <div>
+        <div class="card" id="data-kepegawaian">
+            <div class="card-header">
+                Data Kepegawaian
+                <button class="btn btn-primary float-sm-right" v-on:click="editDataKepegawaian" v-bind:disabled="disableEdit">
+                    Edit <i class="fas fa-edit"></i>
+                </button>
+            </div>
+
+            <div class="card-body">
+                <div class="container">
+
+                    <div v-if="dataKepegawaian.length === 0" class="no-data-kepegawaian">
+                        <div v-if="!isEditKepegawaian">
+                            Belum ditambahkan.
+                            <br>
+                        </div>
+                        <button v-if="isEditKepegawaian" class="btn btn-primary float-sm-left" v-on:click="addDataKepegawaian">
+                            Tambah <i class="fas fa-plus"></i>
+                        </button>
+                        
+                    </div>
+
+                    <div v-if="dataKepegawaian.length !== 0" class="data-kepegawaian">
+                        <table class="table">
+                            <thead>
+                            <tr>
+                                <th scope="col">Unit Kerja</th>
+                                <th scope="col">Jabatan</th>
+                                <!-- <th scope="col">Kompetensi</th> -->
+                                <th scope="col">Tahun Mulai</th>
+                                <th scope="col">Tahun Selesai</th>
+                            </tr>
+                            </thead>
+                            <tbody v-for="dk in dataKepegawaian">
+                            <tr v-if="!isEditKepegawaian">
+                                <td v-text="unitKerja.find(x => x.id_unit_kerja == dk.id_unit_kerja).nama_unit_kerja" ></td>
+                                <td v-text="posisi.find(x => x.id_posisi == dk.id_posisi).nama_posisi" ></td>
+                                <!-- <td v-text="kelompokKompetensi.find(x => x.id_kelompok_kompetensi == dk.id_kelompok_kompetensi).nama_kelompok_kompetensi" ></td> -->
+                                <td v-text="dk.tahun_masuk" ></td>
+                                <td v-text="dk.tahun_keluar" ></td>
+                            </tr>
+                            <tr v-if="isEditKepegawaian">
+                                <td>
+                                    <div class="form-group">
+                                        <select class="form-control" v-model="dk.id_unit_kerja">
+                                            <option v-for="uk in unitKerja" v-bind:value="uk.id_unit_kerja">
+                                                {{ uk.nama_unit_kerja }}
+                                            </option>
+                                        </select>
+                                        <small class="form-text text-muted">*Wajib diisi</small>
+                                    </div>
+                                </td>
+                                <td>
+                                    <div class="form-group">
+                                        <select class="form-control" v-model="dk.id_posisi">
+                                            <option v-for="pos in posisi" v-bind:value="pos.id_posisi">
+                                                {{ pos.nama_posisi }}
+                                            </option>
+                                        </select>
+                                        <small class="form-text text-muted">*Wajib diisi</small>
+                                    </div>
+                                </td>
+                                <!-- <td>
+                                    <div class="form-group">
+                                        <select class="form-control" v-model="dk.id_kelompok_kompetensi">
+                                            <option v-for="kk in kelompokKomptensi" v-bind:value="kk.id_kelompok_kompetensi">
+                                                {{ kk.nama_kelompok_kompetensi }}
+                                            </option>
+                                        </select>
+                                        <small class="form-text text-muted">*Wajib diisi</small>
+                                    </div>
+                                </td> -->
+                                <td>
+                                    <div class="form-group">
+                                        <input v-model="dk.tahun_masuk" type="text" class="form-control text-center">
+                                        <small class="form-text text-muted">*Wajib diisi</small>
+                                    </div>
+                                </td>
+                                <td>
+                                    <div class="form-group">
+                                        <input v-model="dk.tahun_keluar" type="text" class="form-control text-center">
+                                        <small class="form-text text-muted">*Isi dengan "-" jika belum selesai</small>
+                                    </div>
+                                </td>
+                                <td>
+                                    <button v-bind:id="dataKepegawaian.indexOf(dk)" v-on:click="delDataKepegawaian($event)" class="btn btn-danger" type="button">
+                                        Hapus <i class="fas fa-trash-alt"></i>
+                                    </button>
+                                </td>
+                            </tr>
+                            </tbody>
+                            <button v-if="isEditKepegawaian" class="btn btn-primary float-sm-left" v-on:click="addDataKepegawaian">
+                                Tambah <i class="fas fa-plus"></i>
+                            </button>
+                        </table>
+
+                    </div>
+
+                    <br>
+
+                </div>
+            </div>
+            <div class="card-footer text-muted" v-if="isEditKepegawaian">
+                <a href="#data-kepegawaian" class="btn btn-success float-sm-right btn-simpan" v-on:click="saveDataKepegawaian">
+                    Simpan <i class="fas fa-check"></i>
+                    </a>
+                <a href="#data-kepegawaian" class="btn btn-danger float-sm-right" v-on:click="cancelDataKepegawaian">
+                    Batal <i class ="fas fa-times"></i>
+                </a>
+            </div>
+        </div>
+
+        <br>
+</div>
+</template>
+
+<script>
+   export default {
+        props: ['id', 'unit-kerja', 'posisi', 'kelompok-kompetensi', 'data-kinerja-temp', 'rekomendasi-training-temp', 'training-list', 'rekomendasi-posisi-temp'],
+
+        data() {
+            return {
+                
+                pegawai: {
+                    imageProfileUrl: "",
+                    nama: "",
+                    tempatLahir: "",
+                    tanggalLahir: "",
+                    email: "",
+                    nopeg: "",
+                    unitKerja: "",
+                    posisi: "",
+                    kompetensi: "",
+                    tahunMasuk: ""
+                },
+                dataKepegawaian: [],
+                dataKepegawaianPrev: null,
+                riwayatPendidikan: [],
+                riwayatPekerjaan: [],  
+                sertifikat: [],
+
+                isShowAllDataKinerja: false,
+                disableEdit: false,
+                isEditProfile: false,
+                isEditKepegawaian: false,
+                isEditRiwayat: false,
+                isEditSertifikat: false,
+                isEditDataKinerja: false,
+                isEditRekomendasi: false,
+                cachedPegawai: null,
+                cachedDataKepegawaian: null,
+                cachedRiwayatPendidikan: null,
+                cachedRiwayatPekerjaan: null,
+                cachedSertifikat: null,
+                cachedDataKinerja: null,
+                cachedRekomendasiTraining: null,
+                cachedRekomendasiPosisi:null,
+                pegawai: {
+                    imageProfileUrl: null,
+                    nama: null,
+                    tempatLahir: null,
+                    tanggalLahir: null,
+                    email: null,
+                    nopeg: null,
+                    unitKerja: {
+                        id: null,
+                        text: null
+                    },
+                    posisi: {
+                        id: null,
+                        text: null   
+                    },
+                    kompetensi: {
+                        id: null,
+                        text: null   
+                    },
+                    tahunMasuk: null
+                },
+                dataKepegawaian: [],
+                riwayatPendidikan: [],
+                riwayatPekerjaan: [],
+                dataKinerja: [],
+                dataKinerjaShow: [],
+                rekomendasiTraining : [],
+                rekomendasiPosisi : []
+            }
+               
+        },  
+
+        mounted() {
+            
+        },
+
+        created() {
+            //dataKinerja
+            this.dataKinerja = this.dataKinerjaTemp;
+
+            axios.get('/api/pegawai/' + this.id)
+                .then((response) => {
+                    //get data from api response
+                    var responsePegawai = response.data["data"];
+
+                    this.dataKepegawaian = responsePegawai["kepegawaian"];
+                    this.riwayatPendidikan = responsePegawai["pendidikan"];
+                    this.riwayatPekerjaan = responsePegawai["pekerjaan"];
+                    this.updateDataKepegawaian();
+
+                    this.dataKepegawaianPrev = this.dataKepegawaian[this.dataKepegawaian.length-1];
+
+                    this.sertifikat = responsePegawai["sertifikat"];
+                    this.updateSertifikat();
+
+                    this.pegawai.nama = responsePegawai["user"]["name"];
+                    this.pegawai.tempatLahir = responsePegawai["pegawai"]["tempat_lahir"];
+                    this.pegawai.tanggalLahir = responsePegawai["pegawai"]["tanggal_lahir"];
+                    this.pegawai.email = responsePegawai["user"]["email"];
+                    this.pegawai.nopeg = responsePegawai["pegawai"]["nip"];
+                    this.pegawai.imageProfileUrl = 'pimage/' + responsePegawai["pegawai"]["nip"] + '.' + responsePegawai["pegawai"]["ekstensi_foto"];
+                    this.pegawai.kompetensi.id = responsePegawai["pegawai"]["id_kelompok_kompetensi"];
+                    this.updateProfilPegawai();
+
+                    //chacing
+                    this.cachedPegawai = JSON.parse(JSON.stringify(this.pegawai));
+                    this.cachedDataKepegawaian = JSON.parse(JSON.stringify(this.dataKepegawaian));
+                    this.cachedRiwayatPendidikan = JSON.parse(JSON.stringify(this.riwayatPendidikan));
+                    this.cachedRiwayatPekerjaan = JSON.parse(JSON.stringify(this.riwayatPekerjaan));
+                    this.cachedSertifikat = JSON.parse(JSON.stringify(this.sertifikat));
+                    this.cachedDataKinerja = JSON.parse(JSON.stringify(this.dataKinerja));
+
+                    console.log(this);
+                })
+                .catch(function (error) {
+                    console.log(error);
+                    alert('Gagal mengambil data');
+                });
+
+            //caching others
+            this.cachedDataKinerja = JSON.parse(JSON.stringify(this.dataKinerja));
+            
+            // init dataKinerjaShow
+            if (this.dataKinerja.length > 6) {
+                this.dataKinerjaShow = this.dataKinerja.slice(this.dataKinerja.length-6);
+            } else {
+                this.dataKinerjaShow = this.dataKinerja;
+            }
+
+            //init rekomendasiTraining
+            this.rekomendasiTraining = this.rekomendasiTrainingTemp;
+            this.cachedRekomendasiTraining = JSON.parse(JSON.stringify(this.rekomendasiTraining));
+
+            //init rekomendasiPosisi
+            this.rekomendasiPosisi = this.rekomendasiPosisiTemp;
+            this.cachedRekomendasiPosisi = JSON.parse(JSON.stringify(this.rekomendasiPosisi));
+        },
+
+        methods: {
+            downloadKompetensi() {
+                window.open('/api/kompetensi/report/' + this.id);
+            },
+
+            showAllDataKinerja() {
+                this.isShowAllDataKinerja = true;
+                this.dataKinerjaShow = this.dataKinerja;
+            },
+
+            hideDataKinerja() {
+                this.isShowAllDataKinerja = false;
+                
+                if (this.dataKinerja.length > 6) {
+                    this.dataKinerjaShow = this.dataKinerja.slice(this.dataKinerja.length-6);
+                }
+            },
+
+            updateProfilPegawai() {
+                if (this.pegawai.unitKerja.id != null) {
+                    this.pegawai.unitKerja.text = this.unitKerja.find(x => x.id_unit_kerja == this.pegawai.unitKerja.id).nama_unit_kerja;
+                } else {
+                    this.pegawai.unitKerja.text = null;
+                }
+                
+                if (this.pegawai.kompetensi.id != null) {
+                    this.pegawai.kompetensi.text = this.kelompokKompetensi.find(x => x.id_kelompok_kompetensi == this.pegawai.kompetensi.id).nama_kelompok_kompetensi;
+                } else {
+                    this.pegawai.kompetensi.text = null;
+                }
+                    
+                if (this.pegawai.posisi.id != null) {
+                    this.pegawai.posisi.text = this.posisi.find(x => x.id_posisi == this.pegawai.posisi.id).nama_posisi;
+                } else {
+                    this.pegawai.posisi.text = null;
+                }
+            },
+
+            updateDataKepegawaian() {
+                
+                //update relevan
+                if (this.dataKepegawaian.length == 0) {
+                    this.pegawai.unitKerja.id = null;
+                    this.pegawai.posisi.id = null;
+                    // this.pegawai.kompetensi.id = null;
+                    this.pegawai.tahunMasuk = null;
+                } else {
+                    //sort
+                    this.dataKepegawaian.sort(function(a, b){
+                        var keyA = a.tahun_masuk,
+                            keyB = b.tahun_masuk;
+                        // Compare the 2 dates
+                        if(keyA < keyB) return -1;
+                        if(keyA > keyB) return 1;
+                        return 0;
+                    });
+                    var lastDataPegawai = this.dataKepegawaian[this.dataKepegawaian.length-1];
+                    this.pegawai.unitKerja.id = lastDataPegawai["id_unit_kerja"];
+                    this.pegawai.posisi.id = lastDataPegawai["id_posisi"];
+                    // this.pegawai.kompetensi.id = lastDataPegawai["id_kelompok_kompetensi"];
+                    this.pegawai.tahunMasuk = lastDataPegawai["tahun_masuk"];
+                }
+            },
+
+            updateDataKepegawaianAfterEditProfile() {
+                
+                //update relevan
+                if (this.dataKepegawaian.length == 0) {
+                    var newData = {
+                        id_data_kepegawaian : null,
+                        id_pegawai : null,
+                        id_unit_kerja : this.pegawai.unitKerja.id,
+                        id_posisi : this.pegawai.posisi.id,
+                        // id_kelompok_kompetensi : this.pegawai.kompetensi.id,
+                        tahun_masuk : this.pegawai.tahunMasuk,
+                        tahun_keluar : null
+                    };
+                    this.dataKepegawaian.push(newData);
+                } else {
+                    //sort
+                    this.dataKepegawaian.sort(function(a, b){
+                        var keyA = a.tahun_masuk,
+                            keyB = b.tahun_masuk;
+                        // Compare the 2 dates
+                        if(keyA < keyB) return -1;
+                        if(keyA > keyB) return 1;
+                        return 0;
+                    });
+                    var lastDataPegawai = this.dataKepegawaian[this.dataKepegawaian.length-1];
+                    lastDataPegawai["id_unit_kerja"] = this.pegawai.unitKerja.id;
+                    lastDataPegawai["id_posisi"] = this.pegawai.posisi.id;
+                    // lastDataPegawai["id_kelompok_kompetensi"] = this.pegawai.kompetensi.id;
+                    lastDataPegawai["tahun_masuk"] = this.pegawai.tahunMasuk;
+                }
+            },
+
+            updateSertifikat(){
+                for(var i = 0; i < this.sertifikat.length; i++){
+                    this.sertifikat[i].nama_file = 'simage/' + this.sertifikat[i].nama_file;
+                }
+            },
+
+            disableEditButton() {
+                this.disableEdit = true;
+            },
+
+            enableEditButton() {
+                this.disableEdit = false;
+            },
+
+            editProfilPegawai() {
+                this.isEditProfile = true;
+                this.disableEditButton();
+            },
+
+            editDataKepegawaian() {
+                this.isEditKepegawaian = true;
+                this.disableEditButton();
+            },
+
+            editRiwayatPegawai() {
+                this.isEditRiwayat = true;
+                this.disableEditButton();
+            },
+
+            editSertifikat() {
+                this.isEditSertifikat = true;
+                this.disableEditButton();
+            },
+
+            editDataKinerja() {
+                this.isEditDataKinerja = true;
+                this.disableEditButton();
+            },
+
+            editDataKompetensi() {
+
+            },
+
+            editRekomendasi() {
+                this.isEditRekomendasi = true;
+                this.disableEditButton();
+            },
+
+            addDataKepegawaian() {
+                var newData = {
+                    id_data_kepegawaian : null,
+                    id_pegawai : null,
+                    id_unit_kerja : null,
+                    id_posisi : null,
+                    // id_kelompok_kompetensi : null,
+                    tahun_masuk : null,
+                    tahun_keluar : null
+                };
+                this.dataKepegawaian.push(newData);
+            },
+
+            addRiwayatPendidikan() {
+                var newData = {
+                    id_riwayat_pendidikan : null,
+                    id_pegawai : null,
+                    nama_institusi : null,
+                    strata : null,
+                    jurusan : null,
+                    tahun_masuk : null,
+                    tahun_keluar : null
+                };
+                this.riwayatPendidikan.push(newData);
+            },
+
+            addRiwayatPekerjaan() {
+                var newData = {
+                    id_riwayat_pekerjaan : null,
+                    id_pegawai : null,
+                    nama_institusi : null,
+                    posisi : null,
+                    tahun_masuk : null,
+                    tahun_keluar : null
+                };
+                this.riwayatPekerjaan.push(newData);
+            },
+
+            addSertifikat() {
+                var newData = {
+                    id_sertifikat : null,
+                    id_pegawai : null,
+                    judul : null,
+                    lembaga : null,
+                    tahun_diterbitkan : null,
+                    catatan : null,
+                    nama_file : null,
+                };
+                this.sertifikat.push(newData);
+            },
+
+            addDataKinerja() {
+                var newData = {
+                    id_kinerja : null,
+                    id_pegawai : null,
+                    tahun : null,
+                    semester : null,
+                    nilai : null,
+                    catatan : null
+                };
+                this.dataKinerja.push(newData);
+            },
+
+            addRekomendasiTraining() {
+                var newData = {
+                    id_rekomendasi_training : null,
+                    id_pegawai : null,
+                    id_training : null
+                };
+                this.rekomendasiTraining.push(newData);
+            },
+
+            addRekomendasiPosisi() {
+                var newData = {
+                    id_rekomendasi_training : null,
+                    id_pegawai : null,
+                    id_unit_kerja : null,
+                    id_posisi : null
+                };
+                this.rekomendasiPosisi.push(newData);
+            },
+
+            delDataKepegawaian(event) {
+                var targetIndex = event.currentTarget.id;
+                this.dataKepegawaian.splice(targetIndex, 1);
+            },
+
+            delRiwayatPendidikan(event) {
+                var targetIndex = event.currentTarget.id;
+                this.riwayatPendidikan.splice(targetIndex, 1);
+            },
+
+            delRiwayatPekerjaan(event) {
+                var targetIndex = event.currentTarget.id;
+                this.riwayatPekerjaan.splice(targetIndex, 1);
+            },
+
+            delSertifikat(event) {
+                var targetIndex = event.currentTarget.id;
+                this.sertifikat.splice(targetIndex, 1);
+            },
+
+            delDataKinerja(event) {
+                var targetIndex = event.currentTarget.id;
+                this.dataKinerja.splice(targetIndex, 1);
+            },
+
+            delRekomendasiTraining(event) {
+                var targetIndex = event.currentTarget.id;
+                this.rekomendasiTraining.splice(targetIndex, 1);
+            },
+
+            delRekomendasiPosisi(event) {
+                var targetIndex = event.currentTarget.id;
+                this.rekomendasiPosisi.splice(targetIndex, 1);
+            },
+
+            saveProfilPegawai() {
+                this.enableEditButton();
+
+                this.updateProfilPegawai();
+                this.updateDataKepegawaianAfterEditProfile();
+
+                this.cachedPegawai = JSON.parse(JSON.stringify(this.pegawai));
+                this.isEditProfile = false;
+
+                axios.post('/api/pegawai/' + this.id, {
+                    pegawai: this.pegawai,
+                    data_kepegawaian: this.dataKepegawaian,
+                    data_kepegawaian_prev: this.dataKepegawaianPrev,
+                    _method: "put"
+                })
+                .then(function (response) {
+                    console.log(response);
+                    window.location.href = '/pages/profile';
+                })
+                .catch(function (error) {
+                    console.log(error);
+                    alert('Semua kolom harus terisi');
+                });
+
+                console.log(this.dataKepegawaian);
+
+            },
+
+            saveDataKepegawaian() {
+                this.updateDataKepegawaian();
+                this.updateProfilPegawai();
+                this.enableEditButton();
+                this.cachedDataKepegawaian = JSON.parse(JSON.stringify(this.dataKepegawaian));
+                this.isEditKepegawaian = false;
+
+                console.log(this.dataKepegawaian);
+
+                axios.post('/api/kepegawaian/' + this.id, {
+                    kepegawaian: this.dataKepegawaian,
+                    _method: 'put'
+                })
+                .then(function (response) {
+                    console.log(response);
+                    window.location.href = "/pages/profile";
+                })
+                .catch(function (error) {
+                    console.log(error);
+                    alert('Semua kolom harus terisi');
+                });
+            },
+
+            saveRiwayatPegawai() {
+                //sort
+                this.riwayatPendidikan.sort(function(a, b){
+                        var keyA = a.tahun_masuk,
+                            keyB = b.tahun_masuk;
+                        // Compare the 2 dates
+                        if(keyA < keyB) return -1;
+                        if(keyA > keyB) return 1;
+                        return 0;
+                    });
+
+                //sort
+                this.riwayatPekerjaan.sort(function(a, b){
+                        var keyA = a.tahun_masuk,
+                            keyB = b.tahun_masuk;
+                        // Compare the 2 dates
+                        if(keyA < keyB) return -1;
+                        if(keyA > keyB) return 1;
+                        return 0;
+                    });
+
+                this.enableEditButton();
+                this.cachedRiwayatPendidikan = JSON.parse(JSON.stringify(this.riwayatPendidikan));
+                this.cachedRiwayatPekerjaan = JSON.parse(JSON.stringify(this.riwayatPekerjaan));
+                this.isEditRiwayat = false;
+
+                console.log(this.riwayatPendidikan);
+                console.log(this.riwayatPekerjaan);
+
+                axios.post('/api/riwayat/' + this.id, {
+                    pendidikan: this.riwayatPendidikan,
+                    pekerjaan: this.riwayatPekerjaan,
+                    _method: 'put'
+                })
+                .then(function (response) {
+                    console.log(response);
+                    window.location.href = "/pages/profile";
+                })
+                .catch(function (error) {
+                    console.log(error);
+                    alert('Semua kolom harus terisi');
+                });
+            },
+
+            saveSertifikat() {
+                this.enableEditButton();
+                this.cachedSertifikat = JSON.parse(JSON.stringify(this.sertifikat));
+                this.isEditSertifikat = false;
+                console.log(this.sertifikat);
+
+                axios.post('/api/sertifikat/' + this.id, {
+                    sertifikat: this.sertifikat,
+                    _method: 'put'
+                })
+                .then(function (response) {
+                    console.log(response.data.data);
+                    window.location.href = "/pages/profile";
+                })
+                .catch(function (error) {
+                    console.log(error);
+                    alert('Semua kolom harus terisi');
+                });
+            },
+
+            saveDataKinerja() {
+                //sort
+                this.dataKinerja.sort(function(a, b){
+                        var keyA = a.tahun,
+                            keyB = b.tahun;
+                        // Compare the 2 dates
+                        if(keyA < keyB) return -1;
+                        if(keyA > keyB) return 1;
+                        if (keyA == keyB) {
+                            if (a.semester < b.semester) return -1;
+                            else return 1;
+                        }
+                    });
+
+                this.enableEditButton();
+                this.cachedDataKinerja = JSON.parse(JSON.stringify(this.dataKinerja));
+                this.isEditDataKinerja = false;
+
+                if (this.isShowAllDataKinerja) {
+                    this.showAllDataKinerja();
+                } else {
+                    this.hideDataKinerja();
+                }
+            },
+
+            saveRekomendasi() {
+                this.enableEditButton();
+                this.cachedRekomendasiTraining = JSON.parse(JSON.stringify(this.rekomendasiTraining));
+                this.cachedRekomendasiPosisi = JSON.parse(JSON.stringify(this.rekomendasiPosisi));
+                this.isEditRekomendasi = false;
+            },
+
+            cancelProfilPegawai() {
+                this.enableEditButton();
+                this.pegawai = JSON.parse(JSON.stringify(this.cachedPegawai));
+                this.isEditProfile = false;
+            },
+
+            cancelDataKepegawaian() {
+                this.enableEditButton();
+                this.dataKepegawaian = JSON.parse(JSON.stringify(this.cachedDataKepegawaian));
+                this.isEditKepegawaian = false;
+            },
+
+            cancelRiwayatPegawai() {
+                this.enableEditButton();
+                this.riwayatPendidikan = JSON.parse(JSON.stringify(this.cachedRiwayatPendidikan));
+                this.riwayatPekerjaan = JSON.parse(JSON.stringify(this.cachedRiwayatPekerjaan));
+                this.isEditRiwayat = false;
+            },
+
+            cancelSertifikat() {
+                this.enableEditButton();
+                this.sertifikat = JSON.parse(JSON.stringify(this.cachedSertifikat));
+                this.isEditSertifikat = false;
+            },
+
+            cancelDataKinerja() {
+                this.enableEditButton();
+                this.dataKinerja = JSON.parse(JSON.stringify(this.cachedDataKinerja));
+                this.isEditDataKinerja = false;
+
+                if (this.isShowAllDataKinerja) {
+                    this.showAllDataKinerja();
+                } else {
+                    this.hideDataKinerja();
+                }
+            },
+
+            cancelRekomendasi() {
+                this.enableEditButton();
+                this.rekomendasiTraining = JSON.parse(JSON.stringify(this.cachedRekomendasiTraining));
+                this.rekomendasiPosisi = JSON.parse(JSON.stringify(this.cachedRekomendasiPosisi));
+                this.isEditRekomendasi = false;
+            },
+
+            FileChangeProfile(e) {
+                let files = e.target.files || e.dataTransfer.files;
+                if (!files.length)
+                    return;
+
+                let reader = new FileReader();
+                let vm = this;
+                reader.onload = (e) => {
+                    vm.pegawai.imageProfileUrl = e.target.result;
+                };
+                reader.readAsDataURL(files[0]);
+            },
+
+            FileChangeSertifikat(e) {
+                let files = e.target.files || e.dataTransfer.files;
+                if (!files.length)
+                    return;
+
+                var idx = e.currentTarget.id;
+
+                let reader = new FileReader();
+                let vm = this;
+                reader.onload = (e) => {
+                    vm.sertifikat[idx].nama_file = e.target.result;
+                };
+                reader.readAsDataURL(files[0]);
+            },
+        }
+    }
+</script>
diff --git a/resources/assets/js/components/ProfilPegawai3.vue b/resources/assets/js/components/ProfilPegawai3.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a9b26ee2e16b480e3ca4ffc1c9ef7fced356f229
--- /dev/null
+++ b/resources/assets/js/components/ProfilPegawai3.vue
@@ -0,0 +1,800 @@
+<template>
+    <div>
+        <div class="card" id="riwayat-pegawai">
+            <div class="card-header">
+                Riwayat Pendidikan dan Pekerjaan<button class="btn btn-primary float-sm-right" v-on:click="editRiwayatPegawai" v-bind:disabled="disableEdit">
+                    Edit <i class="fas fa-edit"></i>
+                    </button>
+            </div>
+
+            <div class="card-body">
+                <div class="container">
+
+                    <h5>Riwayat Pendidikan</h5>
+
+                    <div v-if="riwayatPendidikan.length === 0" class="no-riwayat-pendidikan">
+                        <div v-if="!isEditRiwayat">
+                            <hr>
+                            Belum ditambahkan.
+                            <br>
+                        </div>
+                        <button v-if="isEditRiwayat" class="btn btn-primary float-sm-left" v-on:click="addRiwayatPendidikan">
+                            Tambah <i class="fas fa-plus"></i>
+                        </button>
+                    </div>
+
+                    <div v-if="riwayatPendidikan.length !== 0" class="riwayat-pendidikan">
+                        <table class="table">
+                            <thead>
+                            <tr>
+                                <th scope="col">Tingkat Pendidikan</th>
+                                <th scope="col">Nama Institusi</th>
+                                <th scope="col">Jurusan</th>
+                                <th scope="col">Tahun Masuk</th>
+                                <th scope="col">Tahun Keluar</th>
+                            </tr>
+                            </thead>
+                            <tbody v-for="rp in riwayatPendidikan">
+                            <tr v-if="!isEditRiwayat">
+                                <td v-text="rp.strata" ></td>
+                                <td v-text="rp.nama_institusi" ></td>
+                                <td v-text="rp.jurusan" ></td>
+                                <td v-text="rp.tahun_masuk" ></td>
+                                <td v-text="rp.tahun_keluar" ></td>
+                            </tr>
+                            <tr v-if="isEditRiwayat">
+                                <td>
+                                    <div class="form-group">
+                                        <input v-model="rp.strata" type="text" class="form-control text-center">
+                                        <small class="form-text text-muted">*Wajib diisi</small>
+                                    </div>
+                                </td>
+                                <td>
+                                    <div class="form-group">
+                                        <input v-model="rp.nama_institusi" type="text" class="form-control text-center">
+                                        <small class="form-text text-muted">*Wajib diisi</small>
+                                    </div>
+                                </td>
+                                <td>
+                                    <div class="form-group">
+                                        <input v-model="rp.jurusan" type="text" class="form-control text-center">
+                                        <small class="form-text text-muted">*Wajib diisi</small>
+                                    </div>
+                                </td>
+                                <td>
+                                    <div class="form-group">
+                                        <input v-model="rp.tahun_masuk" type="text" class="form-control text-center">
+                                        <small class="form-text text-muted">*Wajib diisi</small>
+                                    </div>
+                                </td>
+                                <td>
+                                    <div class="form-group">
+                                        <input v-model="rp.tahun_keluar" type="text" class="form-control text-center">
+                                        <small class="form-text text-muted">*Isi dengan "-" jika belum selesai</small>
+                                    </div>
+                                </td>
+                                <td>
+                                    <button v-bind:id="riwayatPendidikan.indexOf(rp)" v-on:click="delRiwayatPendidikan($event)" class="btn btn-danger" type="button">
+                                        Hapus <i class="fas fa-trash-alt"></i>
+                                    </button>
+                                </td>
+                            </tr>
+
+                            </tbody>
+                            <button v-if="isEditRiwayat" class="btn btn-primary float-sm-left" v-on:click="addRiwayatPendidikan">
+                                Tambah <i class="fas fa-plus"></i>
+                            </button>
+                        </table>
+
+                    </div>
+
+                    <br><br>
+
+
+                    <h5>Riwayat Pekerjaan (di luar ITB)</h5>
+
+                    <div v-if="riwayatPekerjaan.length === 0" class="no-riwayat-pekerjaan">
+                        <div v-if="!isEditRiwayat">
+                            <hr>
+                            Belum ditambahkan.
+                            <br>
+                        </div>
+                        <button v-if="isEditRiwayat" class="btn btn-primary float-sm-left" v-on:click="addRiwayatPekerjaan">
+                            Tambah <i class="fas fa-plus"></i>
+                        </button>
+                    </div>
+
+                    <div v-if="riwayatPekerjaan.length !== 0" class="riwayat-pekerjaan">
+                        <table class="table">
+                            <thead>
+                            <tr>
+                                <th scope="col">Nama Institusi</th>
+                                <th scope="col">Jabatan</th>
+                                <th scope="col">Tahun Masuk</th>
+                                <th scope="col">Tahun Keluar</th>
+                            </tr>
+                            </thead>
+                            <tbody v-for="rp in riwayatPekerjaan">
+                            <tr v-if="!isEditRiwayat">
+                                <td v-text="rp.nama_institusi" ></td>
+                                <td v-text="rp.posisi" ></td>
+                                <td v-text="rp.tahun_masuk" ></td>
+                                <td v-text="rp.tahun_keluar" ></td>
+                            </tr>
+
+                            <tr v-if="isEditRiwayat">
+                                <td>
+                                    <div class="form-group">
+                                        <input v-model="rp.nama_institusi" type="text" class="form-control text-center">
+                                        <small class="form-text text-muted">*Wajib diisi</small>
+                                    </div>
+                                </td>
+                                <td>
+                                    <div class="form-group">
+                                        <input v-model="rp.posisi" type="text" class="form-control text-center">
+                                        <small class="form-text text-muted">*Wajib diisi</small>
+                                    </div>
+                                </td>
+                                <td>
+                                    <div class="form-group">
+                                        <input v-model="rp.tahun_masuk" type="text" class="form-control text-center">
+                                        <small class="form-text text-muted">*Wajib diisi</small>
+                                    </div>
+                                </td>
+                                <td>
+                                    <div class="form-group">
+                                        <input v-model="rp.tahun_keluar" type="text" class="form-control text-center">
+                                        <small class="form-text text-muted">*Isi dengan "-" jika belum selesai</small>
+                                    </div>
+                                </td>
+                                <td>
+                                    <button v-bind:id="riwayatPekerjaan.indexOf(rp)" v-on:click="delRiwayatPekerjaan($event)" class="btn btn-danger" type="button">
+                                        Hapus <i class="fas fa-trash-alt"></i>
+                                    </button>
+                                </td>
+                            </tr>
+                            </tbody>
+                            <button v-if="isEditRiwayat" class="btn btn-primary float-sm-left" v-on:click="addRiwayatPekerjaan">
+                                Tambah <i class="fas fa-plus"></i>
+                            </button>
+                        </table>
+
+                    </div>
+
+                </div>
+            </div>
+            <div class="card-footer text-muted" v-if="isEditRiwayat">
+                <a href="#riwayat-pegawai" class="btn btn-success float-sm-right btn-simpan" v-on:click="saveRiwayatPegawai">
+                    Simpan <i class="fas fa-check"></i>
+                    </a>
+                <a href="#riwayat-pegawai" class="btn btn-danger float-sm-right" v-on:click="cancelRiwayatPegawai">
+                    Batal <i class ="fas fa-times"></i>
+                </a>
+            </div>
+        </div>
+
+        <br>
+</div>
+</template>
+
+<script>
+   export default {
+        props: ['id', 'unit-kerja', 'posisi', 'kelompok-kompetensi', 'data-kinerja-temp', 'rekomendasi-training-temp', 'training-list', 'rekomendasi-posisi-temp'],
+
+        data() {
+            return {
+                
+                pegawai: {
+                    imageProfileUrl: "",
+                    nama: "",
+                    tempatLahir: "",
+                    tanggalLahir: "",
+                    email: "",
+                    nopeg: "",
+                    unitKerja: "",
+                    posisi: "",
+                    kompetensi: "",
+                    tahunMasuk: ""
+                },
+                dataKepegawaian: [],
+                dataKepegawaianPrev: null,
+                riwayatPendidikan: [],
+                riwayatPekerjaan: [],  
+                sertifikat: [],
+
+                isShowAllDataKinerja: false,
+                disableEdit: false,
+                isEditProfile: false,
+                isEditKepegawaian: false,
+                isEditRiwayat: false,
+                isEditSertifikat: false,
+                isEditDataKinerja: false,
+                isEditRekomendasi: false,
+                cachedPegawai: null,
+                cachedDataKepegawaian: null,
+                cachedRiwayatPendidikan: null,
+                cachedRiwayatPekerjaan: null,
+                cachedSertifikat: null,
+                cachedDataKinerja: null,
+                cachedRekomendasiTraining: null,
+                cachedRekomendasiPosisi:null,
+                pegawai: {
+                    imageProfileUrl: null,
+                    nama: null,
+                    tempatLahir: null,
+                    tanggalLahir: null,
+                    email: null,
+                    nopeg: null,
+                    unitKerja: {
+                        id: null,
+                        text: null
+                    },
+                    posisi: {
+                        id: null,
+                        text: null   
+                    },
+                    kompetensi: {
+                        id: null,
+                        text: null   
+                    },
+                    tahunMasuk: null
+                },
+                dataKepegawaian: [],
+                riwayatPendidikan: [],
+                riwayatPekerjaan: [],
+                dataKinerja: [],
+                dataKinerjaShow: [],
+                rekomendasiTraining : [],
+                rekomendasiPosisi : []
+            }
+               
+        },  
+
+        mounted() {
+            
+        },
+
+        created() {
+            //dataKinerja
+            this.dataKinerja = this.dataKinerjaTemp;
+
+            axios.get('/api/pegawai/' + this.id)
+                .then((response) => {
+                    //get data from api response
+                    var responsePegawai = response.data["data"];
+
+                    this.dataKepegawaian = responsePegawai["kepegawaian"];
+                    this.riwayatPendidikan = responsePegawai["pendidikan"];
+                    this.riwayatPekerjaan = responsePegawai["pekerjaan"];
+                    this.updateDataKepegawaian();
+
+                    this.dataKepegawaianPrev = this.dataKepegawaian[this.dataKepegawaian.length-1];
+
+                    this.sertifikat = responsePegawai["sertifikat"];
+                    this.updateSertifikat();
+
+                    this.pegawai.nama = responsePegawai["user"]["name"];
+                    this.pegawai.tempatLahir = responsePegawai["pegawai"]["tempat_lahir"];
+                    this.pegawai.tanggalLahir = responsePegawai["pegawai"]["tanggal_lahir"];
+                    this.pegawai.email = responsePegawai["user"]["email"];
+                    this.pegawai.nopeg = responsePegawai["pegawai"]["nip"];
+                    this.pegawai.imageProfileUrl = 'pimage/' + responsePegawai["pegawai"]["nip"] + '.' + responsePegawai["pegawai"]["ekstensi_foto"];
+                    this.pegawai.kompetensi.id = responsePegawai["pegawai"]["id_kelompok_kompetensi"];
+                    this.updateProfilPegawai();
+
+                    //chacing
+                    this.cachedPegawai = JSON.parse(JSON.stringify(this.pegawai));
+                    this.cachedDataKepegawaian = JSON.parse(JSON.stringify(this.dataKepegawaian));
+                    this.cachedRiwayatPendidikan = JSON.parse(JSON.stringify(this.riwayatPendidikan));
+                    this.cachedRiwayatPekerjaan = JSON.parse(JSON.stringify(this.riwayatPekerjaan));
+                    this.cachedSertifikat = JSON.parse(JSON.stringify(this.sertifikat));
+                    this.cachedDataKinerja = JSON.parse(JSON.stringify(this.dataKinerja));
+
+                    console.log(this);
+                })
+                .catch(function (error) {
+                    console.log(error);
+                    alert('Gagal mengambil data');
+                });
+
+            //caching others
+            this.cachedDataKinerja = JSON.parse(JSON.stringify(this.dataKinerja));
+            
+            // init dataKinerjaShow
+            if (this.dataKinerja.length > 6) {
+                this.dataKinerjaShow = this.dataKinerja.slice(this.dataKinerja.length-6);
+            } else {
+                this.dataKinerjaShow = this.dataKinerja;
+            }
+
+            //init rekomendasiTraining
+            this.rekomendasiTraining = this.rekomendasiTrainingTemp;
+            this.cachedRekomendasiTraining = JSON.parse(JSON.stringify(this.rekomendasiTraining));
+
+            //init rekomendasiPosisi
+            this.rekomendasiPosisi = this.rekomendasiPosisiTemp;
+            this.cachedRekomendasiPosisi = JSON.parse(JSON.stringify(this.rekomendasiPosisi));
+        },
+
+        methods: {
+            downloadKompetensi() {
+                window.open('/api/kompetensi/report/' + this.id);
+            },
+
+            showAllDataKinerja() {
+                this.isShowAllDataKinerja = true;
+                this.dataKinerjaShow = this.dataKinerja;
+            },
+
+            hideDataKinerja() {
+                this.isShowAllDataKinerja = false;
+                
+                if (this.dataKinerja.length > 6) {
+                    this.dataKinerjaShow = this.dataKinerja.slice(this.dataKinerja.length-6);
+                }
+            },
+
+            updateProfilPegawai() {
+                if (this.pegawai.unitKerja.id != null) {
+                    this.pegawai.unitKerja.text = this.unitKerja.find(x => x.id_unit_kerja == this.pegawai.unitKerja.id).nama_unit_kerja;
+                } else {
+                    this.pegawai.unitKerja.text = null;
+                }
+                
+                if (this.pegawai.kompetensi.id != null) {
+                    this.pegawai.kompetensi.text = this.kelompokKompetensi.find(x => x.id_kelompok_kompetensi == this.pegawai.kompetensi.id).nama_kelompok_kompetensi;
+                } else {
+                    this.pegawai.kompetensi.text = null;
+                }
+                    
+                if (this.pegawai.posisi.id != null) {
+                    this.pegawai.posisi.text = this.posisi.find(x => x.id_posisi == this.pegawai.posisi.id).nama_posisi;
+                } else {
+                    this.pegawai.posisi.text = null;
+                }
+            },
+
+            updateDataKepegawaian() {
+                
+                //update relevan
+                if (this.dataKepegawaian.length == 0) {
+                    this.pegawai.unitKerja.id = null;
+                    this.pegawai.posisi.id = null;
+                    // this.pegawai.kompetensi.id = null;
+                    this.pegawai.tahunMasuk = null;
+                } else {
+                    //sort
+                    this.dataKepegawaian.sort(function(a, b){
+                        var keyA = a.tahun_masuk,
+                            keyB = b.tahun_masuk;
+                        // Compare the 2 dates
+                        if(keyA < keyB) return -1;
+                        if(keyA > keyB) return 1;
+                        return 0;
+                    });
+                    var lastDataPegawai = this.dataKepegawaian[this.dataKepegawaian.length-1];
+                    this.pegawai.unitKerja.id = lastDataPegawai["id_unit_kerja"];
+                    this.pegawai.posisi.id = lastDataPegawai["id_posisi"];
+                    // this.pegawai.kompetensi.id = lastDataPegawai["id_kelompok_kompetensi"];
+                    this.pegawai.tahunMasuk = lastDataPegawai["tahun_masuk"];
+                }
+            },
+
+            updateDataKepegawaianAfterEditProfile() {
+                
+                //update relevan
+                if (this.dataKepegawaian.length == 0) {
+                    var newData = {
+                        id_data_kepegawaian : null,
+                        id_pegawai : null,
+                        id_unit_kerja : this.pegawai.unitKerja.id,
+                        id_posisi : this.pegawai.posisi.id,
+                        // id_kelompok_kompetensi : this.pegawai.kompetensi.id,
+                        tahun_masuk : this.pegawai.tahunMasuk,
+                        tahun_keluar : null
+                    };
+                    this.dataKepegawaian.push(newData);
+                } else {
+                    //sort
+                    this.dataKepegawaian.sort(function(a, b){
+                        var keyA = a.tahun_masuk,
+                            keyB = b.tahun_masuk;
+                        // Compare the 2 dates
+                        if(keyA < keyB) return -1;
+                        if(keyA > keyB) return 1;
+                        return 0;
+                    });
+                    var lastDataPegawai = this.dataKepegawaian[this.dataKepegawaian.length-1];
+                    lastDataPegawai["id_unit_kerja"] = this.pegawai.unitKerja.id;
+                    lastDataPegawai["id_posisi"] = this.pegawai.posisi.id;
+                    // lastDataPegawai["id_kelompok_kompetensi"] = this.pegawai.kompetensi.id;
+                    lastDataPegawai["tahun_masuk"] = this.pegawai.tahunMasuk;
+                }
+            },
+
+            updateSertifikat(){
+                for(var i = 0; i < this.sertifikat.length; i++){
+                    this.sertifikat[i].nama_file = 'simage/' + this.sertifikat[i].nama_file;
+                }
+            },
+
+            disableEditButton() {
+                this.disableEdit = true;
+            },
+
+            enableEditButton() {
+                this.disableEdit = false;
+            },
+
+            editProfilPegawai() {
+                this.isEditProfile = true;
+                this.disableEditButton();
+            },
+
+            editDataKepegawaian() {
+                this.isEditKepegawaian = true;
+                this.disableEditButton();
+            },
+
+            editRiwayatPegawai() {
+                this.isEditRiwayat = true;
+                this.disableEditButton();
+            },
+
+            editSertifikat() {
+                this.isEditSertifikat = true;
+                this.disableEditButton();
+            },
+
+            editDataKinerja() {
+                this.isEditDataKinerja = true;
+                this.disableEditButton();
+            },
+
+            editDataKompetensi() {
+
+            },
+
+            editRekomendasi() {
+                this.isEditRekomendasi = true;
+                this.disableEditButton();
+            },
+
+            addDataKepegawaian() {
+                var newData = {
+                    id_data_kepegawaian : null,
+                    id_pegawai : null,
+                    id_unit_kerja : null,
+                    id_posisi : null,
+                    // id_kelompok_kompetensi : null,
+                    tahun_masuk : null,
+                    tahun_keluar : null
+                };
+                this.dataKepegawaian.push(newData);
+            },
+
+            addRiwayatPendidikan() {
+                var newData = {
+                    id_riwayat_pendidikan : null,
+                    id_pegawai : null,
+                    nama_institusi : null,
+                    strata : null,
+                    jurusan : null,
+                    tahun_masuk : null,
+                    tahun_keluar : null
+                };
+                this.riwayatPendidikan.push(newData);
+            },
+
+            addRiwayatPekerjaan() {
+                var newData = {
+                    id_riwayat_pekerjaan : null,
+                    id_pegawai : null,
+                    nama_institusi : null,
+                    posisi : null,
+                    tahun_masuk : null,
+                    tahun_keluar : null
+                };
+                this.riwayatPekerjaan.push(newData);
+            },
+
+            addSertifikat() {
+                var newData = {
+                    id_sertifikat : null,
+                    id_pegawai : null,
+                    judul : null,
+                    lembaga : null,
+                    tahun_diterbitkan : null,
+                    catatan : null,
+                    nama_file : null,
+                };
+                this.sertifikat.push(newData);
+            },
+
+            addDataKinerja() {
+                var newData = {
+                    id_kinerja : null,
+                    id_pegawai : null,
+                    tahun : null,
+                    semester : null,
+                    nilai : null,
+                    catatan : null
+                };
+                this.dataKinerja.push(newData);
+            },
+
+            addRekomendasiTraining() {
+                var newData = {
+                    id_rekomendasi_training : null,
+                    id_pegawai : null,
+                    id_training : null
+                };
+                this.rekomendasiTraining.push(newData);
+            },
+
+            addRekomendasiPosisi() {
+                var newData = {
+                    id_rekomendasi_training : null,
+                    id_pegawai : null,
+                    id_unit_kerja : null,
+                    id_posisi : null
+                };
+                this.rekomendasiPosisi.push(newData);
+            },
+
+            delDataKepegawaian(event) {
+                var targetIndex = event.currentTarget.id;
+                this.dataKepegawaian.splice(targetIndex, 1);
+            },
+
+            delRiwayatPendidikan(event) {
+                var targetIndex = event.currentTarget.id;
+                this.riwayatPendidikan.splice(targetIndex, 1);
+            },
+
+            delRiwayatPekerjaan(event) {
+                var targetIndex = event.currentTarget.id;
+                this.riwayatPekerjaan.splice(targetIndex, 1);
+            },
+
+            delSertifikat(event) {
+                var targetIndex = event.currentTarget.id;
+                this.sertifikat.splice(targetIndex, 1);
+            },
+
+            delDataKinerja(event) {
+                var targetIndex = event.currentTarget.id;
+                this.dataKinerja.splice(targetIndex, 1);
+            },
+
+            delRekomendasiTraining(event) {
+                var targetIndex = event.currentTarget.id;
+                this.rekomendasiTraining.splice(targetIndex, 1);
+            },
+
+            delRekomendasiPosisi(event) {
+                var targetIndex = event.currentTarget.id;
+                this.rekomendasiPosisi.splice(targetIndex, 1);
+            },
+
+            saveProfilPegawai() {
+                this.enableEditButton();
+
+                this.updateProfilPegawai();
+                this.updateDataKepegawaianAfterEditProfile();
+
+                this.cachedPegawai = JSON.parse(JSON.stringify(this.pegawai));
+                this.isEditProfile = false;
+
+                axios.post('/api/pegawai/' + this.id, {
+                    pegawai: this.pegawai,
+                    data_kepegawaian: this.dataKepegawaian,
+                    data_kepegawaian_prev: this.dataKepegawaianPrev,
+                    _method: "put"
+                })
+                .then(function (response) {
+                    console.log(response);
+                    window.location.href = '/pages/profile';
+                })
+                .catch(function (error) {
+                    console.log(error);
+                    alert('Semua kolom harus terisi');
+                });
+
+                console.log(this.dataKepegawaian);
+
+            },
+
+            saveDataKepegawaian() {
+                this.updateDataKepegawaian();
+                this.updateProfilPegawai();
+                this.enableEditButton();
+                this.cachedDataKepegawaian = JSON.parse(JSON.stringify(this.dataKepegawaian));
+                this.isEditKepegawaian = false;
+
+                console.log(this.dataKepegawaian);
+
+                axios.post('/api/kepegawaian/' + this.id, {
+                    kepegawaian: this.dataKepegawaian,
+                    _method: 'put'
+                })
+                .then(function (response) {
+                    console.log(response);
+                    window.location.href = "/pages/profile";
+                })
+                .catch(function (error) {
+                    console.log(error);
+                    alert('Semua kolom harus terisi');
+                });
+            },
+
+            saveRiwayatPegawai() {
+                //sort
+                this.riwayatPendidikan.sort(function(a, b){
+                        var keyA = a.tahun_masuk,
+                            keyB = b.tahun_masuk;
+                        // Compare the 2 dates
+                        if(keyA < keyB) return -1;
+                        if(keyA > keyB) return 1;
+                        return 0;
+                    });
+
+                //sort
+                this.riwayatPekerjaan.sort(function(a, b){
+                        var keyA = a.tahun_masuk,
+                            keyB = b.tahun_masuk;
+                        // Compare the 2 dates
+                        if(keyA < keyB) return -1;
+                        if(keyA > keyB) return 1;
+                        return 0;
+                    });
+
+                this.enableEditButton();
+                this.cachedRiwayatPendidikan = JSON.parse(JSON.stringify(this.riwayatPendidikan));
+                this.cachedRiwayatPekerjaan = JSON.parse(JSON.stringify(this.riwayatPekerjaan));
+                this.isEditRiwayat = false;
+
+                console.log(this.riwayatPendidikan);
+                console.log(this.riwayatPekerjaan);
+
+                axios.post('/api/riwayat/' + this.id, {
+                    pendidikan: this.riwayatPendidikan,
+                    pekerjaan: this.riwayatPekerjaan,
+                    _method: 'put'
+                })
+                .then(function (response) {
+                    console.log(response);
+                    window.location.href = "/pages/profile";
+                })
+                .catch(function (error) {
+                    console.log(error);
+                    alert('Semua kolom harus terisi');
+                });
+            },
+
+            saveSertifikat() {
+                this.enableEditButton();
+                this.cachedSertifikat = JSON.parse(JSON.stringify(this.sertifikat));
+                this.isEditSertifikat = false;
+                console.log(this.sertifikat);
+
+                axios.post('/api/sertifikat/' + this.id, {
+                    sertifikat: this.sertifikat,
+                    _method: 'put'
+                })
+                .then(function (response) {
+                    console.log(response.data.data);
+                    window.location.href = "/pages/profile";
+                })
+                .catch(function (error) {
+                    console.log(error);
+                    alert('Semua kolom harus terisi');
+                });
+            },
+
+            saveDataKinerja() {
+                //sort
+                this.dataKinerja.sort(function(a, b){
+                        var keyA = a.tahun,
+                            keyB = b.tahun;
+                        // Compare the 2 dates
+                        if(keyA < keyB) return -1;
+                        if(keyA > keyB) return 1;
+                        if (keyA == keyB) {
+                            if (a.semester < b.semester) return -1;
+                            else return 1;
+                        }
+                    });
+
+                this.enableEditButton();
+                this.cachedDataKinerja = JSON.parse(JSON.stringify(this.dataKinerja));
+                this.isEditDataKinerja = false;
+
+                if (this.isShowAllDataKinerja) {
+                    this.showAllDataKinerja();
+                } else {
+                    this.hideDataKinerja();
+                }
+            },
+
+            saveRekomendasi() {
+                this.enableEditButton();
+                this.cachedRekomendasiTraining = JSON.parse(JSON.stringify(this.rekomendasiTraining));
+                this.cachedRekomendasiPosisi = JSON.parse(JSON.stringify(this.rekomendasiPosisi));
+                this.isEditRekomendasi = false;
+            },
+
+            cancelProfilPegawai() {
+                this.enableEditButton();
+                this.pegawai = JSON.parse(JSON.stringify(this.cachedPegawai));
+                this.isEditProfile = false;
+            },
+
+            cancelDataKepegawaian() {
+                this.enableEditButton();
+                this.dataKepegawaian = JSON.parse(JSON.stringify(this.cachedDataKepegawaian));
+                this.isEditKepegawaian = false;
+            },
+
+            cancelRiwayatPegawai() {
+                this.enableEditButton();
+                this.riwayatPendidikan = JSON.parse(JSON.stringify(this.cachedRiwayatPendidikan));
+                this.riwayatPekerjaan = JSON.parse(JSON.stringify(this.cachedRiwayatPekerjaan));
+                this.isEditRiwayat = false;
+            },
+
+            cancelSertifikat() {
+                this.enableEditButton();
+                this.sertifikat = JSON.parse(JSON.stringify(this.cachedSertifikat));
+                this.isEditSertifikat = false;
+            },
+
+            cancelDataKinerja() {
+                this.enableEditButton();
+                this.dataKinerja = JSON.parse(JSON.stringify(this.cachedDataKinerja));
+                this.isEditDataKinerja = false;
+
+                if (this.isShowAllDataKinerja) {
+                    this.showAllDataKinerja();
+                } else {
+                    this.hideDataKinerja();
+                }
+            },
+
+            cancelRekomendasi() {
+                this.enableEditButton();
+                this.rekomendasiTraining = JSON.parse(JSON.stringify(this.cachedRekomendasiTraining));
+                this.rekomendasiPosisi = JSON.parse(JSON.stringify(this.cachedRekomendasiPosisi));
+                this.isEditRekomendasi = false;
+            },
+
+            FileChangeProfile(e) {
+                let files = e.target.files || e.dataTransfer.files;
+                if (!files.length)
+                    return;
+
+                let reader = new FileReader();
+                let vm = this;
+                reader.onload = (e) => {
+                    vm.pegawai.imageProfileUrl = e.target.result;
+                };
+                reader.readAsDataURL(files[0]);
+            },
+
+            FileChangeSertifikat(e) {
+                let files = e.target.files || e.dataTransfer.files;
+                if (!files.length)
+                    return;
+
+                var idx = e.currentTarget.id;
+
+                let reader = new FileReader();
+                let vm = this;
+                reader.onload = (e) => {
+                    vm.sertifikat[idx].nama_file = e.target.result;
+                };
+                reader.readAsDataURL(files[0]);
+            },
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/resources/assets/js/components/ProfilPegawai4.vue b/resources/assets/js/components/ProfilPegawai4.vue
new file mode 100644
index 0000000000000000000000000000000000000000..0883e32b087489faeed89b23882359bc2a60b345
--- /dev/null
+++ b/resources/assets/js/components/ProfilPegawai4.vue
@@ -0,0 +1,744 @@
+<template>
+	<div>
+        <div class="card" id="sertificate">
+            <div class="card-header">
+                Sertifikat<button class="btn btn-primary float-sm-right" v-on:click="editSertifikat" v-bind:disabled="disableEdit">
+                    Edit <i class="fas fa-edit"></i>
+                    </button>
+            </div>
+
+            <div class="card-body">
+                <div class="container">
+                    <div v-if="sertifikat.length === 0" class="no-sertificate">
+                        <div v-if="!isEditSertifikat">
+                            Belum ditambahkan.
+                            <br>
+                        </div>
+                        <button v-if="isEditSertifikat" class="btn btn-primary float-sm-left" v-on:click="addSertifikat">
+                            Tambah <i class="fas fa-plus"></i>
+                        </button>
+                    </div>
+
+                    <div v-if="sertifikat.length !== 0" class="sertificate">
+                        <table class="table" align="left" style="width: 100%">
+                            <tbody v-for="dk in sertifikat">
+                            <div v-if="!isEditSertifikat">
+                                <colgroup>
+                                    <col width="35%">
+                                    <col width="15%">
+                                    <col width="50%">
+                                </colgroup>
+                                <tr>
+                                    <td rowspan="4">
+                                        <img id="img-sertifikat-1" v-bind:src="dk.nama_file" class="img-thumbnail" width="200">
+                                    </td>
+                                    <th scope="col">Judul</th>
+                                    <td v-text="dk.judul" ></td>
+                                </tr>
+                                <tr>
+                                    <th scope="col">Lembaga</th>
+                                    <td v-text="dk.lembaga" ></td>
+                                </tr>
+                                <tr>
+                                    <th scope="col">Tahun Diterbitkan</th>
+                                    <td v-text="dk.tahun_diterbitkan" ></td>
+                                </tr>
+                                <tr>
+                                    <th scope="col">Catatan</th>
+                                    <td v-text="dk.catatan" ></td>   
+                                </tr>
+                            </div>
+
+                            <div v-if="isEditSertifikat">
+                            <tr>
+                                <td rowspan="4">
+                                    <div>
+                                        <button v-bind:id="sertifikat.indexOf(dk)" v-on:click="delSertifikat($event)" class="btn btn-danger" type="button">
+                                            Hapus <i class="fas fa-trash-alt"></i>
+                                        </button>
+                                    </div>
+                                </td>
+                                <td rowspan="4">
+                                    <img id="img-sertifikat-1" v-bind:src="dk.nama_file" class="img-thumbnail" width="200">
+                                    <br><br>
+                                    <input type="file" v-bind:id="sertifikat.indexOf(dk)" v-on:change="FileChangeSertifikat" class="form-control">
+                                </td>
+                                <th scope="col">Judul</th>
+                                <td>
+                                    <div class="form-group">
+                                        <input v-model="dk.judul" type="text" class="form-control">
+                                        <small class="form-text text-muted">*Wajib diisi</small>
+                                    </div>
+                                </td>
+                            </tr>
+                            <tr>
+                                <th scope="col">Lembaga</th>
+                                <td>
+                                    <div class="form-group">
+                                        <input v-model="dk.lembaga" type="text" class="form-control">
+                                        <small class="form-text text-muted">*Wajib diisi</small>
+                                    </div>
+                                </td>
+                            </tr>
+                            <tr>
+                                <th scope="col">Tahun Diterbitkan</th>
+                                <td>
+                                    <div class="form-group">
+                                        <input v-model="dk.tahun_diterbitkan" type="text" class="form-control">
+                                        <small class="form-text text-muted">*Wajib diisi</small>
+                                    </div>
+                                </td>
+                            </tr>
+                            <tr>
+                                <th scope="col">Catatan</th>
+                                <td>
+                                    <div class="form-group">
+                                        <input v-model="dk.catatan" type="text" class="form-control">
+                                        <small class="form-text text-muted">*Wajib diisi</small>
+                                    </div>
+                                </td>
+                            </tr>
+                            </div>
+                            </tbody>
+                            <button v-if="isEditSertifikat" class="btn btn-primary float-sm-left" v-on:click="addSertifikat">
+                                Tambah <i class="fas fa-plus"></i>
+                            </button>
+                        </table>
+                    </div>
+                </div>
+            </div>
+            <div class="card-footer text-muted" v-if="isEditSertifikat">
+                <a href="#sertificate" class="btn btn-success float-sm-right btn-simpan" v-on:click="saveSertifikat">
+                    Simpan <i class="fas fa-check"></i>
+                    </a>
+                <a href="#sertificate" class="btn btn-danger float-sm-right" v-on:click="cancelSertifikat">
+                    Batal <i class ="fas fa-times"></i>
+                </a>
+            </div>
+        </div>
+
+        <br>
+    </div>
+</template>
+
+<script>
+   export default {
+        props: ['id', 'unit-kerja', 'posisi', 'kelompok-kompetensi', 'data-kinerja-temp', 'rekomendasi-training-temp', 'training-list', 'rekomendasi-posisi-temp'],
+
+        data() {
+            return {
+                
+                pegawai: {
+                    imageProfileUrl: "",
+                    nama: "",
+                    tempatLahir: "",
+                    tanggalLahir: "",
+                    email: "",
+                    nopeg: "",
+                    unitKerja: "",
+                    posisi: "",
+                    kompetensi: "",
+                    tahunMasuk: ""
+                },
+                dataKepegawaian: [],
+                dataKepegawaianPrev: null,
+                riwayatPendidikan: [],
+                riwayatPekerjaan: [],  
+                sertifikat: [],
+
+                isShowAllDataKinerja: false,
+                disableEdit: false,
+                isEditProfile: false,
+                isEditKepegawaian: false,
+                isEditRiwayat: false,
+                isEditSertifikat: false,
+                isEditDataKinerja: false,
+                isEditRekomendasi: false,
+                cachedPegawai: null,
+                cachedDataKepegawaian: null,
+                cachedRiwayatPendidikan: null,
+                cachedRiwayatPekerjaan: null,
+                cachedSertifikat: null,
+                cachedDataKinerja: null,
+                cachedRekomendasiTraining: null,
+                cachedRekomendasiPosisi:null,
+                pegawai: {
+                    imageProfileUrl: null,
+                    nama: null,
+                    tempatLahir: null,
+                    tanggalLahir: null,
+                    email: null,
+                    nopeg: null,
+                    unitKerja: {
+                        id: null,
+                        text: null
+                    },
+                    posisi: {
+                        id: null,
+                        text: null   
+                    },
+                    kompetensi: {
+                        id: null,
+                        text: null   
+                    },
+                    tahunMasuk: null
+                },
+                dataKepegawaian: [],
+                riwayatPendidikan: [],
+                riwayatPekerjaan: [],
+                dataKinerja: [],
+                dataKinerjaShow: [],
+                rekomendasiTraining : [],
+                rekomendasiPosisi : []
+            }
+               
+        },  
+
+        mounted() {
+            
+        },
+
+        created() {
+            //dataKinerja
+            this.dataKinerja = this.dataKinerjaTemp;
+
+            axios.get('/api/pegawai/' + this.id)
+                .then((response) => {
+                    //get data from api response
+                    var responsePegawai = response.data["data"];
+
+                    this.dataKepegawaian = responsePegawai["kepegawaian"];
+                    this.riwayatPendidikan = responsePegawai["pendidikan"];
+                    this.riwayatPekerjaan = responsePegawai["pekerjaan"];
+                    this.updateDataKepegawaian();
+
+                    this.dataKepegawaianPrev = this.dataKepegawaian[this.dataKepegawaian.length-1];
+
+                    this.sertifikat = responsePegawai["sertifikat"];
+                    this.updateSertifikat();
+
+                    this.pegawai.nama = responsePegawai["user"]["name"];
+                    this.pegawai.tempatLahir = responsePegawai["pegawai"]["tempat_lahir"];
+                    this.pegawai.tanggalLahir = responsePegawai["pegawai"]["tanggal_lahir"];
+                    this.pegawai.email = responsePegawai["user"]["email"];
+                    this.pegawai.nopeg = responsePegawai["pegawai"]["nip"];
+                    this.pegawai.imageProfileUrl = 'pimage/' + responsePegawai["pegawai"]["nip"] + '.' + responsePegawai["pegawai"]["ekstensi_foto"];
+                    this.pegawai.kompetensi.id = responsePegawai["pegawai"]["id_kelompok_kompetensi"];
+                    this.updateProfilPegawai();
+
+                    //chacing
+                    this.cachedPegawai = JSON.parse(JSON.stringify(this.pegawai));
+                    this.cachedDataKepegawaian = JSON.parse(JSON.stringify(this.dataKepegawaian));
+                    this.cachedRiwayatPendidikan = JSON.parse(JSON.stringify(this.riwayatPendidikan));
+                    this.cachedRiwayatPekerjaan = JSON.parse(JSON.stringify(this.riwayatPekerjaan));
+                    this.cachedSertifikat = JSON.parse(JSON.stringify(this.sertifikat));
+                    this.cachedDataKinerja = JSON.parse(JSON.stringify(this.dataKinerja));
+
+                    console.log(this);
+                })
+                .catch(function (error) {
+                    console.log(error);
+                    alert('Gagal mengambil data');
+                });
+
+            //caching others
+            this.cachedDataKinerja = JSON.parse(JSON.stringify(this.dataKinerja));
+            
+            // init dataKinerjaShow
+            if (this.dataKinerja.length > 6) {
+                this.dataKinerjaShow = this.dataKinerja.slice(this.dataKinerja.length-6);
+            } else {
+                this.dataKinerjaShow = this.dataKinerja;
+            }
+
+            //init rekomendasiTraining
+            this.rekomendasiTraining = this.rekomendasiTrainingTemp;
+            this.cachedRekomendasiTraining = JSON.parse(JSON.stringify(this.rekomendasiTraining));
+
+            //init rekomendasiPosisi
+            this.rekomendasiPosisi = this.rekomendasiPosisiTemp;
+            this.cachedRekomendasiPosisi = JSON.parse(JSON.stringify(this.rekomendasiPosisi));
+        },
+
+        methods: {
+            downloadKompetensi() {
+                window.open('/api/kompetensi/report/' + this.id);
+            },
+
+            showAllDataKinerja() {
+                this.isShowAllDataKinerja = true;
+                this.dataKinerjaShow = this.dataKinerja;
+            },
+
+            hideDataKinerja() {
+                this.isShowAllDataKinerja = false;
+                
+                if (this.dataKinerja.length > 6) {
+                    this.dataKinerjaShow = this.dataKinerja.slice(this.dataKinerja.length-6);
+                }
+            },
+
+            updateProfilPegawai() {
+                if (this.pegawai.unitKerja.id != null) {
+                    this.pegawai.unitKerja.text = this.unitKerja.find(x => x.id_unit_kerja == this.pegawai.unitKerja.id).nama_unit_kerja;
+                } else {
+                    this.pegawai.unitKerja.text = null;
+                }
+                
+                if (this.pegawai.kompetensi.id != null) {
+                    this.pegawai.kompetensi.text = this.kelompokKompetensi.find(x => x.id_kelompok_kompetensi == this.pegawai.kompetensi.id).nama_kelompok_kompetensi;
+                } else {
+                    this.pegawai.kompetensi.text = null;
+                }
+                    
+                if (this.pegawai.posisi.id != null) {
+                    this.pegawai.posisi.text = this.posisi.find(x => x.id_posisi == this.pegawai.posisi.id).nama_posisi;
+                } else {
+                    this.pegawai.posisi.text = null;
+                }
+            },
+
+            updateDataKepegawaian() {
+                
+                //update relevan
+                if (this.dataKepegawaian.length == 0) {
+                    this.pegawai.unitKerja.id = null;
+                    this.pegawai.posisi.id = null;
+                    // this.pegawai.kompetensi.id = null;
+                    this.pegawai.tahunMasuk = null;
+                } else {
+                    //sort
+                    this.dataKepegawaian.sort(function(a, b){
+                        var keyA = a.tahun_masuk,
+                            keyB = b.tahun_masuk;
+                        // Compare the 2 dates
+                        if(keyA < keyB) return -1;
+                        if(keyA > keyB) return 1;
+                        return 0;
+                    });
+                    var lastDataPegawai = this.dataKepegawaian[this.dataKepegawaian.length-1];
+                    this.pegawai.unitKerja.id = lastDataPegawai["id_unit_kerja"];
+                    this.pegawai.posisi.id = lastDataPegawai["id_posisi"];
+                    // this.pegawai.kompetensi.id = lastDataPegawai["id_kelompok_kompetensi"];
+                    this.pegawai.tahunMasuk = lastDataPegawai["tahun_masuk"];
+                }
+            },
+
+            updateDataKepegawaianAfterEditProfile() {
+                
+                //update relevan
+                if (this.dataKepegawaian.length == 0) {
+                    var newData = {
+                        id_data_kepegawaian : null,
+                        id_pegawai : null,
+                        id_unit_kerja : this.pegawai.unitKerja.id,
+                        id_posisi : this.pegawai.posisi.id,
+                        // id_kelompok_kompetensi : this.pegawai.kompetensi.id,
+                        tahun_masuk : this.pegawai.tahunMasuk,
+                        tahun_keluar : null
+                    };
+                    this.dataKepegawaian.push(newData);
+                } else {
+                    //sort
+                    this.dataKepegawaian.sort(function(a, b){
+                        var keyA = a.tahun_masuk,
+                            keyB = b.tahun_masuk;
+                        // Compare the 2 dates
+                        if(keyA < keyB) return -1;
+                        if(keyA > keyB) return 1;
+                        return 0;
+                    });
+                    var lastDataPegawai = this.dataKepegawaian[this.dataKepegawaian.length-1];
+                    lastDataPegawai["id_unit_kerja"] = this.pegawai.unitKerja.id;
+                    lastDataPegawai["id_posisi"] = this.pegawai.posisi.id;
+                    // lastDataPegawai["id_kelompok_kompetensi"] = this.pegawai.kompetensi.id;
+                    lastDataPegawai["tahun_masuk"] = this.pegawai.tahunMasuk;
+                }
+            },
+
+            updateSertifikat(){
+                for(var i = 0; i < this.sertifikat.length; i++){
+                    this.sertifikat[i].nama_file = 'simage/' + this.sertifikat[i].nama_file;
+                }
+            },
+
+            disableEditButton() {
+                this.disableEdit = true;
+            },
+
+            enableEditButton() {
+                this.disableEdit = false;
+            },
+
+            editProfilPegawai() {
+                this.isEditProfile = true;
+                this.disableEditButton();
+            },
+
+            editDataKepegawaian() {
+                this.isEditKepegawaian = true;
+                this.disableEditButton();
+            },
+
+            editRiwayatPegawai() {
+                this.isEditRiwayat = true;
+                this.disableEditButton();
+            },
+
+            editSertifikat() {
+                this.isEditSertifikat = true;
+                this.disableEditButton();
+            },
+
+            editDataKinerja() {
+                this.isEditDataKinerja = true;
+                this.disableEditButton();
+            },
+
+            editDataKompetensi() {
+
+            },
+
+            editRekomendasi() {
+                this.isEditRekomendasi = true;
+                this.disableEditButton();
+            },
+
+            addDataKepegawaian() {
+                var newData = {
+                    id_data_kepegawaian : null,
+                    id_pegawai : null,
+                    id_unit_kerja : null,
+                    id_posisi : null,
+                    // id_kelompok_kompetensi : null,
+                    tahun_masuk : null,
+                    tahun_keluar : null
+                };
+                this.dataKepegawaian.push(newData);
+            },
+
+            addRiwayatPendidikan() {
+                var newData = {
+                    id_riwayat_pendidikan : null,
+                    id_pegawai : null,
+                    nama_institusi : null,
+                    strata : null,
+                    jurusan : null,
+                    tahun_masuk : null,
+                    tahun_keluar : null
+                };
+                this.riwayatPendidikan.push(newData);
+            },
+
+            addRiwayatPekerjaan() {
+                var newData = {
+                    id_riwayat_pekerjaan : null,
+                    id_pegawai : null,
+                    nama_institusi : null,
+                    posisi : null,
+                    tahun_masuk : null,
+                    tahun_keluar : null
+                };
+                this.riwayatPekerjaan.push(newData);
+            },
+
+            addSertifikat() {
+                var newData = {
+                    id_sertifikat : null,
+                    id_pegawai : null,
+                    judul : null,
+                    lembaga : null,
+                    tahun_diterbitkan : null,
+                    catatan : null,
+                    nama_file : null,
+                };
+                this.sertifikat.push(newData);
+            },
+
+            addDataKinerja() {
+                var newData = {
+                    id_kinerja : null,
+                    id_pegawai : null,
+                    tahun : null,
+                    semester : null,
+                    nilai : null,
+                    catatan : null
+                };
+                this.dataKinerja.push(newData);
+            },
+
+            addRekomendasiTraining() {
+                var newData = {
+                    id_rekomendasi_training : null,
+                    id_pegawai : null,
+                    id_training : null
+                };
+                this.rekomendasiTraining.push(newData);
+            },
+
+            addRekomendasiPosisi() {
+                var newData = {
+                    id_rekomendasi_training : null,
+                    id_pegawai : null,
+                    id_unit_kerja : null,
+                    id_posisi : null
+                };
+                this.rekomendasiPosisi.push(newData);
+            },
+
+            delDataKepegawaian(event) {
+                var targetIndex = event.currentTarget.id;
+                this.dataKepegawaian.splice(targetIndex, 1);
+            },
+
+            delRiwayatPendidikan(event) {
+                var targetIndex = event.currentTarget.id;
+                this.riwayatPendidikan.splice(targetIndex, 1);
+            },
+
+            delRiwayatPekerjaan(event) {
+                var targetIndex = event.currentTarget.id;
+                this.riwayatPekerjaan.splice(targetIndex, 1);
+            },
+
+            delSertifikat(event) {
+                var targetIndex = event.currentTarget.id;
+                this.sertifikat.splice(targetIndex, 1);
+            },
+
+            delDataKinerja(event) {
+                var targetIndex = event.currentTarget.id;
+                this.dataKinerja.splice(targetIndex, 1);
+            },
+
+            delRekomendasiTraining(event) {
+                var targetIndex = event.currentTarget.id;
+                this.rekomendasiTraining.splice(targetIndex, 1);
+            },
+
+            delRekomendasiPosisi(event) {
+                var targetIndex = event.currentTarget.id;
+                this.rekomendasiPosisi.splice(targetIndex, 1);
+            },
+
+            saveProfilPegawai() {
+                this.enableEditButton();
+
+                this.updateProfilPegawai();
+                this.updateDataKepegawaianAfterEditProfile();
+
+                this.cachedPegawai = JSON.parse(JSON.stringify(this.pegawai));
+                this.isEditProfile = false;
+
+                axios.post('/api/pegawai/' + this.id, {
+                    pegawai: this.pegawai,
+                    data_kepegawaian: this.dataKepegawaian,
+                    data_kepegawaian_prev: this.dataKepegawaianPrev,
+                    _method: "put"
+                })
+                .then(function (response) {
+                    console.log(response);
+                    window.location.href = '/pages/profile';
+                })
+                .catch(function (error) {
+                    console.log(error);
+                    alert('Semua kolom harus terisi');
+                });
+
+                console.log(this.dataKepegawaian);
+
+            },
+
+            saveDataKepegawaian() {
+                this.updateDataKepegawaian();
+                this.updateProfilPegawai();
+                this.enableEditButton();
+                this.cachedDataKepegawaian = JSON.parse(JSON.stringify(this.dataKepegawaian));
+                this.isEditKepegawaian = false;
+
+                console.log(this.dataKepegawaian);
+
+                axios.post('/api/kepegawaian/' + this.id, {
+                    kepegawaian: this.dataKepegawaian,
+                    _method: 'put'
+                })
+                .then(function (response) {
+                    console.log(response);
+                    window.location.href = "/pages/profile";
+                })
+                .catch(function (error) {
+                    console.log(error);
+                    alert('Semua kolom harus terisi');
+                });
+            },
+
+            saveRiwayatPegawai() {
+                //sort
+                this.riwayatPendidikan.sort(function(a, b){
+                        var keyA = a.tahun_masuk,
+                            keyB = b.tahun_masuk;
+                        // Compare the 2 dates
+                        if(keyA < keyB) return -1;
+                        if(keyA > keyB) return 1;
+                        return 0;
+                    });
+
+                //sort
+                this.riwayatPekerjaan.sort(function(a, b){
+                        var keyA = a.tahun_masuk,
+                            keyB = b.tahun_masuk;
+                        // Compare the 2 dates
+                        if(keyA < keyB) return -1;
+                        if(keyA > keyB) return 1;
+                        return 0;
+                    });
+
+                this.enableEditButton();
+                this.cachedRiwayatPendidikan = JSON.parse(JSON.stringify(this.riwayatPendidikan));
+                this.cachedRiwayatPekerjaan = JSON.parse(JSON.stringify(this.riwayatPekerjaan));
+                this.isEditRiwayat = false;
+
+                console.log(this.riwayatPendidikan);
+                console.log(this.riwayatPekerjaan);
+
+                axios.post('/api/riwayat/' + this.id, {
+                    pendidikan: this.riwayatPendidikan,
+                    pekerjaan: this.riwayatPekerjaan,
+                    _method: 'put'
+                })
+                .then(function (response) {
+                    console.log(response);
+                    window.location.href = "/pages/profile";
+                })
+                .catch(function (error) {
+                    console.log(error);
+                    alert('Semua kolom harus terisi');
+                });
+            },
+
+            saveSertifikat() {
+                this.enableEditButton();
+                this.cachedSertifikat = JSON.parse(JSON.stringify(this.sertifikat));
+                this.isEditSertifikat = false;
+                console.log(this.sertifikat);
+
+                axios.post('/api/sertifikat/' + this.id, {
+                    sertifikat: this.sertifikat,
+                    _method: 'put'
+                })
+                .then(function (response) {
+                    console.log(response.data.data);
+                    window.location.href = "/pages/profile";
+                })
+                .catch(function (error) {
+                    console.log(error);
+                    alert('Semua kolom harus terisi');
+                });
+            },
+
+            saveDataKinerja() {
+                //sort
+                this.dataKinerja.sort(function(a, b){
+                        var keyA = a.tahun,
+                            keyB = b.tahun;
+                        // Compare the 2 dates
+                        if(keyA < keyB) return -1;
+                        if(keyA > keyB) return 1;
+                        if (keyA == keyB) {
+                            if (a.semester < b.semester) return -1;
+                            else return 1;
+                        }
+                    });
+
+                this.enableEditButton();
+                this.cachedDataKinerja = JSON.parse(JSON.stringify(this.dataKinerja));
+                this.isEditDataKinerja = false;
+
+                if (this.isShowAllDataKinerja) {
+                    this.showAllDataKinerja();
+                } else {
+                    this.hideDataKinerja();
+                }
+            },
+
+            saveRekomendasi() {
+                this.enableEditButton();
+                this.cachedRekomendasiTraining = JSON.parse(JSON.stringify(this.rekomendasiTraining));
+                this.cachedRekomendasiPosisi = JSON.parse(JSON.stringify(this.rekomendasiPosisi));
+                this.isEditRekomendasi = false;
+            },
+
+            cancelProfilPegawai() {
+                this.enableEditButton();
+                this.pegawai = JSON.parse(JSON.stringify(this.cachedPegawai));
+                this.isEditProfile = false;
+            },
+
+            cancelDataKepegawaian() {
+                this.enableEditButton();
+                this.dataKepegawaian = JSON.parse(JSON.stringify(this.cachedDataKepegawaian));
+                this.isEditKepegawaian = false;
+            },
+
+            cancelRiwayatPegawai() {
+                this.enableEditButton();
+                this.riwayatPendidikan = JSON.parse(JSON.stringify(this.cachedRiwayatPendidikan));
+                this.riwayatPekerjaan = JSON.parse(JSON.stringify(this.cachedRiwayatPekerjaan));
+                this.isEditRiwayat = false;
+            },
+
+            cancelSertifikat() {
+                this.enableEditButton();
+                this.sertifikat = JSON.parse(JSON.stringify(this.cachedSertifikat));
+                this.isEditSertifikat = false;
+            },
+
+            cancelDataKinerja() {
+                this.enableEditButton();
+                this.dataKinerja = JSON.parse(JSON.stringify(this.cachedDataKinerja));
+                this.isEditDataKinerja = false;
+
+                if (this.isShowAllDataKinerja) {
+                    this.showAllDataKinerja();
+                } else {
+                    this.hideDataKinerja();
+                }
+            },
+
+            cancelRekomendasi() {
+                this.enableEditButton();
+                this.rekomendasiTraining = JSON.parse(JSON.stringify(this.cachedRekomendasiTraining));
+                this.rekomendasiPosisi = JSON.parse(JSON.stringify(this.cachedRekomendasiPosisi));
+                this.isEditRekomendasi = false;
+            },
+
+            FileChangeProfile(e) {
+                let files = e.target.files || e.dataTransfer.files;
+                if (!files.length)
+                    return;
+
+                let reader = new FileReader();
+                let vm = this;
+                reader.onload = (e) => {
+                    vm.pegawai.imageProfileUrl = e.target.result;
+                };
+                reader.readAsDataURL(files[0]);
+            },
+
+            FileChangeSertifikat(e) {
+                let files = e.target.files || e.dataTransfer.files;
+                if (!files.length)
+                    return;
+
+                var idx = e.currentTarget.id;
+
+                let reader = new FileReader();
+                let vm = this;
+                reader.onload = (e) => {
+                    vm.sertifikat[idx].nama_file = e.target.result;
+                };
+                reader.readAsDataURL(files[0]);
+            },
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/resources/assets/js/components/ProfilPegawai5.vue b/resources/assets/js/components/ProfilPegawai5.vue
new file mode 100644
index 0000000000000000000000000000000000000000..af7dae26f394b80853925e5e328f5b81fca71961
--- /dev/null
+++ b/resources/assets/js/components/ProfilPegawai5.vue
@@ -0,0 +1,721 @@
+<template>
+	<div>
+        <div class="card" id="data-kinerja">
+            <div class="card-header">
+                Hasil Kinerja
+                <!-- <button class="btn btn-primary float-sm-right" v-on:click="editDataKinerja" v-bind:disabled="disableEdit">
+                    Edit <i class="fas fa-edit"></i>
+                 -->    </button>
+            </div>
+
+            <div class="card-body">
+                <div class="container">
+                    <div v-if="dataKinerja.length === 0" class="no-data-kinerja">
+                        <div v-if="!isEditDataKinerja">
+                            Belum ditambahkan.
+                            <br>
+                        </div>
+                        <button v-if="isEditDataKinerja" class="btn btn-primary float-sm-left" v-on:click="addDataKinerja">
+                            Tambah <i class="fas fa-plus"></i>
+                        </button>
+                    </div>
+
+                    <div v-if="dataKinerja.length !== 0" class="data-kinerja">
+                        <table class="table">
+                            <thead>
+                            <tr>
+                                <th scope="col">Tahun</th>
+                                <th scope="col">Semester</th>
+                                <th scope="col">Nilai</th>
+                                <th scope="col">Catatan</th>
+                            </tr>
+                            </thead>
+                            <tbody>
+                                
+                            <tr v-if="!isEditDataKinerja" v-for="dks in dataKinerjaShow">
+                                <td v-text="dks.tahun" ></td>
+                                <td v-text="dks.semester" ></td>
+                                <td v-text="dks.nilai" ></td>
+                                <td v-text="dks.catatan" ></td>
+                            </tr>
+
+                            <tr v-if="isEditDataKinerja" v-for="dk in dataKinerja">
+                                <td>
+                                    <div class="form-group">
+                                        <input v-model="dk.tahun" type="text" class="form-control text-center">
+                                        <small class="form-text text-muted">*Wajib diisi</small>
+                                    </div>
+                                </td>
+                                <td>
+                                    <div class="form-group">
+                                        <input v-model="dk.semester" type="text" class="form-control text-center">
+                                        <small class="form-text text-muted">*Wajib diisi</small>
+                                    </div>
+                                </td>
+                                <td>
+                                    <div class="form-group">
+                                        <input v-model="dk.nilai" type="text" class="form-control text-center">
+                                        <small class="form-text text-muted">*Wajib diisi</small>
+                                    </div>
+                                </td>
+                                <td>
+                                    <div class="form-group">
+                                        <input v-model="dk.catatan" type="text" class="form-control text-center">
+                                        <small class="form-text text-muted">*Wajib diisi</small>
+                                    </div>
+                                </td>
+                                <td>
+                                    <button v-bind:id="dataKinerja.indexOf(dk)" v-on:click="delDataKinerja($event)" class="btn btn-danger" type="button">
+                                        Hapus <i class="fas fa-trash-alt"></i>
+                                    </button>
+                                </td>
+                            </tr>
+                            </tbody>
+                            <a href="#data-kinerja" v-if="!isEditDataKinerja && !isShowAllDataKinerja" class="btn btn-primary float-sm-left" v-on:click="showAllDataKinerja">
+                                Tamplikan semua <i class="fas fa-eye"></i>
+                            </a>
+                            <a href="#data-kinerja" v-if="!isEditDataKinerja && isShowAllDataKinerja" class="btn btn-danger float-sm-left" v-on:click="hideDataKinerja">
+                                Sembunyikan sebagian <i class="fas fa-eye-slash"></i>
+                            </a>
+                            <button v-if="isEditDataKinerja" class="btn btn-primary float-sm-left" v-on:click="addDataKinerja">
+                                Tambah <i class="fas fa-plus"></i>
+                            </button>
+                        </table>
+                    </div>
+                </div>
+            </div>
+            <div class="card-footer text-muted" v-if="isEditDataKinerja">
+                <a href="#data-kinerja" class="btn btn-success float-sm-right btn-simpan" v-on:click="saveDataKinerja">
+                    Simpan <i class="fas fa-check"></i>
+                    </a>
+                <a href="#data-kinerja" class="btn btn-danger float-sm-right" v-on:click="cancelDataKinerja">
+                    Batal <i class ="fas fa-times"></i>
+                </a>
+            </div>
+        </div>
+
+        <br>
+    </div>
+</template>
+
+<script>
+   export default {
+        props: ['id', 'unit-kerja', 'posisi', 'kelompok-kompetensi', 'data-kinerja-temp', 'rekomendasi-training-temp', 'training-list', 'rekomendasi-posisi-temp'],
+
+        data() {
+            return {
+                
+                pegawai: {
+                    imageProfileUrl: "",
+                    nama: "",
+                    tempatLahir: "",
+                    tanggalLahir: "",
+                    email: "",
+                    nopeg: "",
+                    unitKerja: "",
+                    posisi: "",
+                    kompetensi: "",
+                    tahunMasuk: ""
+                },
+                dataKepegawaian: [],
+                dataKepegawaianPrev: null,
+                riwayatPendidikan: [],
+                riwayatPekerjaan: [],  
+                sertifikat: [],
+
+                isShowAllDataKinerja: false,
+                disableEdit: false,
+                isEditProfile: false,
+                isEditKepegawaian: false,
+                isEditRiwayat: false,
+                isEditSertifikat: false,
+                isEditDataKinerja: false,
+                isEditRekomendasi: false,
+                cachedPegawai: null,
+                cachedDataKepegawaian: null,
+                cachedRiwayatPendidikan: null,
+                cachedRiwayatPekerjaan: null,
+                cachedSertifikat: null,
+                cachedDataKinerja: null,
+                cachedRekomendasiTraining: null,
+                cachedRekomendasiPosisi:null,
+                pegawai: {
+                    imageProfileUrl: null,
+                    nama: null,
+                    tempatLahir: null,
+                    tanggalLahir: null,
+                    email: null,
+                    nopeg: null,
+                    unitKerja: {
+                        id: null,
+                        text: null
+                    },
+                    posisi: {
+                        id: null,
+                        text: null   
+                    },
+                    kompetensi: {
+                        id: null,
+                        text: null   
+                    },
+                    tahunMasuk: null
+                },
+                dataKepegawaian: [],
+                riwayatPendidikan: [],
+                riwayatPekerjaan: [],
+                dataKinerja: [],
+                dataKinerjaShow: [],
+                rekomendasiTraining : [],
+                rekomendasiPosisi : []
+            }
+               
+        },  
+
+        mounted() {
+            
+        },
+
+        created() {
+            //dataKinerja
+            this.dataKinerja = this.dataKinerjaTemp;
+
+            axios.get('/api/pegawai/' + this.id)
+                .then((response) => {
+                    //get data from api response
+                    var responsePegawai = response.data["data"];
+
+                    this.dataKepegawaian = responsePegawai["kepegawaian"];
+                    this.riwayatPendidikan = responsePegawai["pendidikan"];
+                    this.riwayatPekerjaan = responsePegawai["pekerjaan"];
+                    this.updateDataKepegawaian();
+
+                    this.dataKepegawaianPrev = this.dataKepegawaian[this.dataKepegawaian.length-1];
+
+                    this.sertifikat = responsePegawai["sertifikat"];
+                    this.updateSertifikat();
+
+                    this.pegawai.nama = responsePegawai["user"]["name"];
+                    this.pegawai.tempatLahir = responsePegawai["pegawai"]["tempat_lahir"];
+                    this.pegawai.tanggalLahir = responsePegawai["pegawai"]["tanggal_lahir"];
+                    this.pegawai.email = responsePegawai["user"]["email"];
+                    this.pegawai.nopeg = responsePegawai["pegawai"]["nip"];
+                    this.pegawai.imageProfileUrl = 'pimage/' + responsePegawai["pegawai"]["nip"] + '.' + responsePegawai["pegawai"]["ekstensi_foto"];
+                    this.pegawai.kompetensi.id = responsePegawai["pegawai"]["id_kelompok_kompetensi"];
+                    this.updateProfilPegawai();
+
+                    //chacing
+                    this.cachedPegawai = JSON.parse(JSON.stringify(this.pegawai));
+                    this.cachedDataKepegawaian = JSON.parse(JSON.stringify(this.dataKepegawaian));
+                    this.cachedRiwayatPendidikan = JSON.parse(JSON.stringify(this.riwayatPendidikan));
+                    this.cachedRiwayatPekerjaan = JSON.parse(JSON.stringify(this.riwayatPekerjaan));
+                    this.cachedSertifikat = JSON.parse(JSON.stringify(this.sertifikat));
+                    this.cachedDataKinerja = JSON.parse(JSON.stringify(this.dataKinerja));
+
+                    console.log(this);
+                })
+                .catch(function (error) {
+                    console.log(error);
+                    alert('Gagal mengambil data');
+                });
+
+            //caching others
+            this.cachedDataKinerja = JSON.parse(JSON.stringify(this.dataKinerja));
+            
+            // init dataKinerjaShow
+            if (this.dataKinerja.length > 6) {
+                this.dataKinerjaShow = this.dataKinerja.slice(this.dataKinerja.length-6);
+            } else {
+                this.dataKinerjaShow = this.dataKinerja;
+            }
+
+            //init rekomendasiTraining
+            this.rekomendasiTraining = this.rekomendasiTrainingTemp;
+            this.cachedRekomendasiTraining = JSON.parse(JSON.stringify(this.rekomendasiTraining));
+
+            //init rekomendasiPosisi
+            this.rekomendasiPosisi = this.rekomendasiPosisiTemp;
+            this.cachedRekomendasiPosisi = JSON.parse(JSON.stringify(this.rekomendasiPosisi));
+        },
+
+        methods: {
+            downloadKompetensi() {
+                window.open('/api/kompetensi/report/' + this.id);
+            },
+
+            showAllDataKinerja() {
+                this.isShowAllDataKinerja = true;
+                this.dataKinerjaShow = this.dataKinerja;
+            },
+
+            hideDataKinerja() {
+                this.isShowAllDataKinerja = false;
+                
+                if (this.dataKinerja.length > 6) {
+                    this.dataKinerjaShow = this.dataKinerja.slice(this.dataKinerja.length-6);
+                }
+            },
+
+            updateProfilPegawai() {
+                if (this.pegawai.unitKerja.id != null) {
+                    this.pegawai.unitKerja.text = this.unitKerja.find(x => x.id_unit_kerja == this.pegawai.unitKerja.id).nama_unit_kerja;
+                } else {
+                    this.pegawai.unitKerja.text = null;
+                }
+                
+                if (this.pegawai.kompetensi.id != null) {
+                    this.pegawai.kompetensi.text = this.kelompokKompetensi.find(x => x.id_kelompok_kompetensi == this.pegawai.kompetensi.id).nama_kelompok_kompetensi;
+                } else {
+                    this.pegawai.kompetensi.text = null;
+                }
+                    
+                if (this.pegawai.posisi.id != null) {
+                    this.pegawai.posisi.text = this.posisi.find(x => x.id_posisi == this.pegawai.posisi.id).nama_posisi;
+                } else {
+                    this.pegawai.posisi.text = null;
+                }
+            },
+
+            updateDataKepegawaian() {
+                
+                //update relevan
+                if (this.dataKepegawaian.length == 0) {
+                    this.pegawai.unitKerja.id = null;
+                    this.pegawai.posisi.id = null;
+                    // this.pegawai.kompetensi.id = null;
+                    this.pegawai.tahunMasuk = null;
+                } else {
+                    //sort
+                    this.dataKepegawaian.sort(function(a, b){
+                        var keyA = a.tahun_masuk,
+                            keyB = b.tahun_masuk;
+                        // Compare the 2 dates
+                        if(keyA < keyB) return -1;
+                        if(keyA > keyB) return 1;
+                        return 0;
+                    });
+                    var lastDataPegawai = this.dataKepegawaian[this.dataKepegawaian.length-1];
+                    this.pegawai.unitKerja.id = lastDataPegawai["id_unit_kerja"];
+                    this.pegawai.posisi.id = lastDataPegawai["id_posisi"];
+                    // this.pegawai.kompetensi.id = lastDataPegawai["id_kelompok_kompetensi"];
+                    this.pegawai.tahunMasuk = lastDataPegawai["tahun_masuk"];
+                }
+            },
+
+            updateDataKepegawaianAfterEditProfile() {
+                
+                //update relevan
+                if (this.dataKepegawaian.length == 0) {
+                    var newData = {
+                        id_data_kepegawaian : null,
+                        id_pegawai : null,
+                        id_unit_kerja : this.pegawai.unitKerja.id,
+                        id_posisi : this.pegawai.posisi.id,
+                        // id_kelompok_kompetensi : this.pegawai.kompetensi.id,
+                        tahun_masuk : this.pegawai.tahunMasuk,
+                        tahun_keluar : null
+                    };
+                    this.dataKepegawaian.push(newData);
+                } else {
+                    //sort
+                    this.dataKepegawaian.sort(function(a, b){
+                        var keyA = a.tahun_masuk,
+                            keyB = b.tahun_masuk;
+                        // Compare the 2 dates
+                        if(keyA < keyB) return -1;
+                        if(keyA > keyB) return 1;
+                        return 0;
+                    });
+                    var lastDataPegawai = this.dataKepegawaian[this.dataKepegawaian.length-1];
+                    lastDataPegawai["id_unit_kerja"] = this.pegawai.unitKerja.id;
+                    lastDataPegawai["id_posisi"] = this.pegawai.posisi.id;
+                    // lastDataPegawai["id_kelompok_kompetensi"] = this.pegawai.kompetensi.id;
+                    lastDataPegawai["tahun_masuk"] = this.pegawai.tahunMasuk;
+                }
+            },
+
+            updateSertifikat(){
+                for(var i = 0; i < this.sertifikat.length; i++){
+                    this.sertifikat[i].nama_file = 'simage/' + this.sertifikat[i].nama_file;
+                }
+            },
+
+            disableEditButton() {
+                this.disableEdit = true;
+            },
+
+            enableEditButton() {
+                this.disableEdit = false;
+            },
+
+            editProfilPegawai() {
+                this.isEditProfile = true;
+                this.disableEditButton();
+            },
+
+            editDataKepegawaian() {
+                this.isEditKepegawaian = true;
+                this.disableEditButton();
+            },
+
+            editRiwayatPegawai() {
+                this.isEditRiwayat = true;
+                this.disableEditButton();
+            },
+
+            editSertifikat() {
+                this.isEditSertifikat = true;
+                this.disableEditButton();
+            },
+
+            editDataKinerja() {
+                this.isEditDataKinerja = true;
+                this.disableEditButton();
+            },
+
+            editDataKompetensi() {
+
+            },
+
+            editRekomendasi() {
+                this.isEditRekomendasi = true;
+                this.disableEditButton();
+            },
+
+            addDataKepegawaian() {
+                var newData = {
+                    id_data_kepegawaian : null,
+                    id_pegawai : null,
+                    id_unit_kerja : null,
+                    id_posisi : null,
+                    // id_kelompok_kompetensi : null,
+                    tahun_masuk : null,
+                    tahun_keluar : null
+                };
+                this.dataKepegawaian.push(newData);
+            },
+
+            addRiwayatPendidikan() {
+                var newData = {
+                    id_riwayat_pendidikan : null,
+                    id_pegawai : null,
+                    nama_institusi : null,
+                    strata : null,
+                    jurusan : null,
+                    tahun_masuk : null,
+                    tahun_keluar : null
+                };
+                this.riwayatPendidikan.push(newData);
+            },
+
+            addRiwayatPekerjaan() {
+                var newData = {
+                    id_riwayat_pekerjaan : null,
+                    id_pegawai : null,
+                    nama_institusi : null,
+                    posisi : null,
+                    tahun_masuk : null,
+                    tahun_keluar : null
+                };
+                this.riwayatPekerjaan.push(newData);
+            },
+
+            addSertifikat() {
+                var newData = {
+                    id_sertifikat : null,
+                    id_pegawai : null,
+                    judul : null,
+                    lembaga : null,
+                    tahun_diterbitkan : null,
+                    catatan : null,
+                    nama_file : null,
+                };
+                this.sertifikat.push(newData);
+            },
+
+            addDataKinerja() {
+                var newData = {
+                    id_kinerja : null,
+                    id_pegawai : null,
+                    tahun : null,
+                    semester : null,
+                    nilai : null,
+                    catatan : null
+                };
+                this.dataKinerja.push(newData);
+            },
+
+            addRekomendasiTraining() {
+                var newData = {
+                    id_rekomendasi_training : null,
+                    id_pegawai : null,
+                    id_training : null
+                };
+                this.rekomendasiTraining.push(newData);
+            },
+
+            addRekomendasiPosisi() {
+                var newData = {
+                    id_rekomendasi_training : null,
+                    id_pegawai : null,
+                    id_unit_kerja : null,
+                    id_posisi : null
+                };
+                this.rekomendasiPosisi.push(newData);
+            },
+
+            delDataKepegawaian(event) {
+                var targetIndex = event.currentTarget.id;
+                this.dataKepegawaian.splice(targetIndex, 1);
+            },
+
+            delRiwayatPendidikan(event) {
+                var targetIndex = event.currentTarget.id;
+                this.riwayatPendidikan.splice(targetIndex, 1);
+            },
+
+            delRiwayatPekerjaan(event) {
+                var targetIndex = event.currentTarget.id;
+                this.riwayatPekerjaan.splice(targetIndex, 1);
+            },
+
+            delSertifikat(event) {
+                var targetIndex = event.currentTarget.id;
+                this.sertifikat.splice(targetIndex, 1);
+            },
+
+            delDataKinerja(event) {
+                var targetIndex = event.currentTarget.id;
+                this.dataKinerja.splice(targetIndex, 1);
+            },
+
+            delRekomendasiTraining(event) {
+                var targetIndex = event.currentTarget.id;
+                this.rekomendasiTraining.splice(targetIndex, 1);
+            },
+
+            delRekomendasiPosisi(event) {
+                var targetIndex = event.currentTarget.id;
+                this.rekomendasiPosisi.splice(targetIndex, 1);
+            },
+
+            saveProfilPegawai() {
+                this.enableEditButton();
+
+                this.updateProfilPegawai();
+                this.updateDataKepegawaianAfterEditProfile();
+
+                this.cachedPegawai = JSON.parse(JSON.stringify(this.pegawai));
+                this.isEditProfile = false;
+
+                axios.post('/api/pegawai/' + this.id, {
+                    pegawai: this.pegawai,
+                    data_kepegawaian: this.dataKepegawaian,
+                    data_kepegawaian_prev: this.dataKepegawaianPrev,
+                    _method: "put"
+                })
+                .then(function (response) {
+                    console.log(response);
+                    window.location.href = '/pages/profile';
+                })
+                .catch(function (error) {
+                    console.log(error);
+                    alert('Semua kolom harus terisi');
+                });
+
+                console.log(this.dataKepegawaian);
+
+            },
+
+            saveDataKepegawaian() {
+                this.updateDataKepegawaian();
+                this.updateProfilPegawai();
+                this.enableEditButton();
+                this.cachedDataKepegawaian = JSON.parse(JSON.stringify(this.dataKepegawaian));
+                this.isEditKepegawaian = false;
+
+                console.log(this.dataKepegawaian);
+
+                axios.post('/api/kepegawaian/' + this.id, {
+                    kepegawaian: this.dataKepegawaian,
+                    _method: 'put'
+                })
+                .then(function (response) {
+                    console.log(response);
+                    window.location.href = "/pages/profile";
+                })
+                .catch(function (error) {
+                    console.log(error);
+                    alert('Semua kolom harus terisi');
+                });
+            },
+
+            saveRiwayatPegawai() {
+                //sort
+                this.riwayatPendidikan.sort(function(a, b){
+                        var keyA = a.tahun_masuk,
+                            keyB = b.tahun_masuk;
+                        // Compare the 2 dates
+                        if(keyA < keyB) return -1;
+                        if(keyA > keyB) return 1;
+                        return 0;
+                    });
+
+                //sort
+                this.riwayatPekerjaan.sort(function(a, b){
+                        var keyA = a.tahun_masuk,
+                            keyB = b.tahun_masuk;
+                        // Compare the 2 dates
+                        if(keyA < keyB) return -1;
+                        if(keyA > keyB) return 1;
+                        return 0;
+                    });
+
+                this.enableEditButton();
+                this.cachedRiwayatPendidikan = JSON.parse(JSON.stringify(this.riwayatPendidikan));
+                this.cachedRiwayatPekerjaan = JSON.parse(JSON.stringify(this.riwayatPekerjaan));
+                this.isEditRiwayat = false;
+
+                console.log(this.riwayatPendidikan);
+                console.log(this.riwayatPekerjaan);
+
+                axios.post('/api/riwayat/' + this.id, {
+                    pendidikan: this.riwayatPendidikan,
+                    pekerjaan: this.riwayatPekerjaan,
+                    _method: 'put'
+                })
+                .then(function (response) {
+                    console.log(response);
+                    window.location.href = "/pages/profile";
+                })
+                .catch(function (error) {
+                    console.log(error);
+                    alert('Semua kolom harus terisi');
+                });
+            },
+
+            saveSertifikat() {
+                this.enableEditButton();
+                this.cachedSertifikat = JSON.parse(JSON.stringify(this.sertifikat));
+                this.isEditSertifikat = false;
+                console.log(this.sertifikat);
+
+                axios.post('/api/sertifikat/' + this.id, {
+                    sertifikat: this.sertifikat,
+                    _method: 'put'
+                })
+                .then(function (response) {
+                    console.log(response.data.data);
+                    window.location.href = "/pages/profile";
+                })
+                .catch(function (error) {
+                    console.log(error);
+                    alert('Semua kolom harus terisi');
+                });
+            },
+
+            saveDataKinerja() {
+                //sort
+                this.dataKinerja.sort(function(a, b){
+                        var keyA = a.tahun,
+                            keyB = b.tahun;
+                        // Compare the 2 dates
+                        if(keyA < keyB) return -1;
+                        if(keyA > keyB) return 1;
+                        if (keyA == keyB) {
+                            if (a.semester < b.semester) return -1;
+                            else return 1;
+                        }
+                    });
+
+                this.enableEditButton();
+                this.cachedDataKinerja = JSON.parse(JSON.stringify(this.dataKinerja));
+                this.isEditDataKinerja = false;
+
+                if (this.isShowAllDataKinerja) {
+                    this.showAllDataKinerja();
+                } else {
+                    this.hideDataKinerja();
+                }
+            },
+
+            saveRekomendasi() {
+                this.enableEditButton();
+                this.cachedRekomendasiTraining = JSON.parse(JSON.stringify(this.rekomendasiTraining));
+                this.cachedRekomendasiPosisi = JSON.parse(JSON.stringify(this.rekomendasiPosisi));
+                this.isEditRekomendasi = false;
+            },
+
+            cancelProfilPegawai() {
+                this.enableEditButton();
+                this.pegawai = JSON.parse(JSON.stringify(this.cachedPegawai));
+                this.isEditProfile = false;
+            },
+
+            cancelDataKepegawaian() {
+                this.enableEditButton();
+                this.dataKepegawaian = JSON.parse(JSON.stringify(this.cachedDataKepegawaian));
+                this.isEditKepegawaian = false;
+            },
+
+            cancelRiwayatPegawai() {
+                this.enableEditButton();
+                this.riwayatPendidikan = JSON.parse(JSON.stringify(this.cachedRiwayatPendidikan));
+                this.riwayatPekerjaan = JSON.parse(JSON.stringify(this.cachedRiwayatPekerjaan));
+                this.isEditRiwayat = false;
+            },
+
+            cancelSertifikat() {
+                this.enableEditButton();
+                this.sertifikat = JSON.parse(JSON.stringify(this.cachedSertifikat));
+                this.isEditSertifikat = false;
+            },
+
+            cancelDataKinerja() {
+                this.enableEditButton();
+                this.dataKinerja = JSON.parse(JSON.stringify(this.cachedDataKinerja));
+                this.isEditDataKinerja = false;
+
+                if (this.isShowAllDataKinerja) {
+                    this.showAllDataKinerja();
+                } else {
+                    this.hideDataKinerja();
+                }
+            },
+
+            cancelRekomendasi() {
+                this.enableEditButton();
+                this.rekomendasiTraining = JSON.parse(JSON.stringify(this.cachedRekomendasiTraining));
+                this.rekomendasiPosisi = JSON.parse(JSON.stringify(this.cachedRekomendasiPosisi));
+                this.isEditRekomendasi = false;
+            },
+
+            FileChangeProfile(e) {
+                let files = e.target.files || e.dataTransfer.files;
+                if (!files.length)
+                    return;
+
+                let reader = new FileReader();
+                let vm = this;
+                reader.onload = (e) => {
+                    vm.pegawai.imageProfileUrl = e.target.result;
+                };
+                reader.readAsDataURL(files[0]);
+            },
+
+            FileChangeSertifikat(e) {
+                let files = e.target.files || e.dataTransfer.files;
+                if (!files.length)
+                    return;
+
+                var idx = e.currentTarget.id;
+
+                let reader = new FileReader();
+                let vm = this;
+                reader.onload = (e) => {
+                    vm.sertifikat[idx].nama_file = e.target.result;
+                };
+                reader.readAsDataURL(files[0]);
+            },
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/resources/assets/js/components/ProfilPegawai6.vue b/resources/assets/js/components/ProfilPegawai6.vue
new file mode 100644
index 0000000000000000000000000000000000000000..f9070811689ce7e981b1443c8e86ee1e107bd5a4
--- /dev/null
+++ b/resources/assets/js/components/ProfilPegawai6.vue
@@ -0,0 +1,646 @@
+<template>
+	<div>
+		<div class="card" id="data-kompetensi">
+            <div class="card-header">
+                Hasil Kompetensi
+                <!-- <button class="btn btn-primary float-sm-right" v-on:click="editDataKompetensi" v-bind:disabled="disableEdit">
+                    Edit <i class="fas fa-edit"></i>
+                 </button> -->
+            </div>
+
+            <div class="card-body">
+                <div class="container">
+
+                    <button class="btn btn-primary float-sm-left" v-on:click="downloadKompetensi" v-bind:disabled="disableEdit">
+                    Download <i class="fas fa-download"></i>
+                 </button>
+
+                </div>
+            </div>
+        </div>
+
+        <br>
+    </div>
+</template>
+
+<script>
+   export default {
+        props: ['id', 'unit-kerja', 'posisi', 'kelompok-kompetensi', 'data-kinerja-temp', 'rekomendasi-training-temp', 'training-list', 'rekomendasi-posisi-temp'],
+
+        data() {
+            return {
+                
+                pegawai: {
+                    imageProfileUrl: "",
+                    nama: "",
+                    tempatLahir: "",
+                    tanggalLahir: "",
+                    email: "",
+                    nopeg: "",
+                    unitKerja: "",
+                    posisi: "",
+                    kompetensi: "",
+                    tahunMasuk: ""
+                },
+                dataKepegawaian: [],
+                dataKepegawaianPrev: null,
+                riwayatPendidikan: [],
+                riwayatPekerjaan: [],  
+                sertifikat: [],
+
+                isShowAllDataKinerja: false,
+                disableEdit: false,
+                isEditProfile: false,
+                isEditKepegawaian: false,
+                isEditRiwayat: false,
+                isEditSertifikat: false,
+                isEditDataKinerja: false,
+                isEditRekomendasi: false,
+                cachedPegawai: null,
+                cachedDataKepegawaian: null,
+                cachedRiwayatPendidikan: null,
+                cachedRiwayatPekerjaan: null,
+                cachedSertifikat: null,
+                cachedDataKinerja: null,
+                cachedRekomendasiTraining: null,
+                cachedRekomendasiPosisi:null,
+                pegawai: {
+                    imageProfileUrl: null,
+                    nama: null,
+                    tempatLahir: null,
+                    tanggalLahir: null,
+                    email: null,
+                    nopeg: null,
+                    unitKerja: {
+                        id: null,
+                        text: null
+                    },
+                    posisi: {
+                        id: null,
+                        text: null   
+                    },
+                    kompetensi: {
+                        id: null,
+                        text: null   
+                    },
+                    tahunMasuk: null
+                },
+                dataKepegawaian: [],
+                riwayatPendidikan: [],
+                riwayatPekerjaan: [],
+                dataKinerja: [],
+                dataKinerjaShow: [],
+                rekomendasiTraining : [],
+                rekomendasiPosisi : []
+            }
+               
+        },  
+
+        mounted() {
+            
+        },
+
+        created() {
+            //dataKinerja
+            this.dataKinerja = this.dataKinerjaTemp;
+
+            axios.get('/api/pegawai/' + this.id)
+                .then((response) => {
+                    //get data from api response
+                    var responsePegawai = response.data["data"];
+
+                    this.dataKepegawaian = responsePegawai["kepegawaian"];
+                    this.riwayatPendidikan = responsePegawai["pendidikan"];
+                    this.riwayatPekerjaan = responsePegawai["pekerjaan"];
+                    this.updateDataKepegawaian();
+
+                    this.dataKepegawaianPrev = this.dataKepegawaian[this.dataKepegawaian.length-1];
+
+                    this.sertifikat = responsePegawai["sertifikat"];
+                    this.updateSertifikat();
+
+                    this.pegawai.nama = responsePegawai["user"]["name"];
+                    this.pegawai.tempatLahir = responsePegawai["pegawai"]["tempat_lahir"];
+                    this.pegawai.tanggalLahir = responsePegawai["pegawai"]["tanggal_lahir"];
+                    this.pegawai.email = responsePegawai["user"]["email"];
+                    this.pegawai.nopeg = responsePegawai["pegawai"]["nip"];
+                    this.pegawai.imageProfileUrl = 'pimage/' + responsePegawai["pegawai"]["nip"] + '.' + responsePegawai["pegawai"]["ekstensi_foto"];
+                    this.pegawai.kompetensi.id = responsePegawai["pegawai"]["id_kelompok_kompetensi"];
+                    this.updateProfilPegawai();
+
+                    //chacing
+                    this.cachedPegawai = JSON.parse(JSON.stringify(this.pegawai));
+                    this.cachedDataKepegawaian = JSON.parse(JSON.stringify(this.dataKepegawaian));
+                    this.cachedRiwayatPendidikan = JSON.parse(JSON.stringify(this.riwayatPendidikan));
+                    this.cachedRiwayatPekerjaan = JSON.parse(JSON.stringify(this.riwayatPekerjaan));
+                    this.cachedSertifikat = JSON.parse(JSON.stringify(this.sertifikat));
+                    this.cachedDataKinerja = JSON.parse(JSON.stringify(this.dataKinerja));
+
+                    console.log(this);
+                })
+                .catch(function (error) {
+                    console.log(error);
+                    alert('Gagal mengambil data');
+                });
+
+            //caching others
+            this.cachedDataKinerja = JSON.parse(JSON.stringify(this.dataKinerja));
+            
+            // init dataKinerjaShow
+            if (this.dataKinerja.length > 6) {
+                this.dataKinerjaShow = this.dataKinerja.slice(this.dataKinerja.length-6);
+            } else {
+                this.dataKinerjaShow = this.dataKinerja;
+            }
+
+            //init rekomendasiTraining
+            this.rekomendasiTraining = this.rekomendasiTrainingTemp;
+            this.cachedRekomendasiTraining = JSON.parse(JSON.stringify(this.rekomendasiTraining));
+
+            //init rekomendasiPosisi
+            this.rekomendasiPosisi = this.rekomendasiPosisiTemp;
+            this.cachedRekomendasiPosisi = JSON.parse(JSON.stringify(this.rekomendasiPosisi));
+        },
+
+        methods: {
+            downloadKompetensi() {
+                window.open('/api/kompetensi/report/' + this.id);
+            },
+
+            showAllDataKinerja() {
+                this.isShowAllDataKinerja = true;
+                this.dataKinerjaShow = this.dataKinerja;
+            },
+
+            hideDataKinerja() {
+                this.isShowAllDataKinerja = false;
+                
+                if (this.dataKinerja.length > 6) {
+                    this.dataKinerjaShow = this.dataKinerja.slice(this.dataKinerja.length-6);
+                }
+            },
+
+            updateProfilPegawai() {
+                if (this.pegawai.unitKerja.id != null) {
+                    this.pegawai.unitKerja.text = this.unitKerja.find(x => x.id_unit_kerja == this.pegawai.unitKerja.id).nama_unit_kerja;
+                } else {
+                    this.pegawai.unitKerja.text = null;
+                }
+                
+                if (this.pegawai.kompetensi.id != null) {
+                    this.pegawai.kompetensi.text = this.kelompokKompetensi.find(x => x.id_kelompok_kompetensi == this.pegawai.kompetensi.id).nama_kelompok_kompetensi;
+                } else {
+                    this.pegawai.kompetensi.text = null;
+                }
+                    
+                if (this.pegawai.posisi.id != null) {
+                    this.pegawai.posisi.text = this.posisi.find(x => x.id_posisi == this.pegawai.posisi.id).nama_posisi;
+                } else {
+                    this.pegawai.posisi.text = null;
+                }
+            },
+
+            updateDataKepegawaian() {
+                
+                //update relevan
+                if (this.dataKepegawaian.length == 0) {
+                    this.pegawai.unitKerja.id = null;
+                    this.pegawai.posisi.id = null;
+                    // this.pegawai.kompetensi.id = null;
+                    this.pegawai.tahunMasuk = null;
+                } else {
+                    //sort
+                    this.dataKepegawaian.sort(function(a, b){
+                        var keyA = a.tahun_masuk,
+                            keyB = b.tahun_masuk;
+                        // Compare the 2 dates
+                        if(keyA < keyB) return -1;
+                        if(keyA > keyB) return 1;
+                        return 0;
+                    });
+                    var lastDataPegawai = this.dataKepegawaian[this.dataKepegawaian.length-1];
+                    this.pegawai.unitKerja.id = lastDataPegawai["id_unit_kerja"];
+                    this.pegawai.posisi.id = lastDataPegawai["id_posisi"];
+                    // this.pegawai.kompetensi.id = lastDataPegawai["id_kelompok_kompetensi"];
+                    this.pegawai.tahunMasuk = lastDataPegawai["tahun_masuk"];
+                }
+            },
+
+            updateDataKepegawaianAfterEditProfile() {
+                
+                //update relevan
+                if (this.dataKepegawaian.length == 0) {
+                    var newData = {
+                        id_data_kepegawaian : null,
+                        id_pegawai : null,
+                        id_unit_kerja : this.pegawai.unitKerja.id,
+                        id_posisi : this.pegawai.posisi.id,
+                        // id_kelompok_kompetensi : this.pegawai.kompetensi.id,
+                        tahun_masuk : this.pegawai.tahunMasuk,
+                        tahun_keluar : null
+                    };
+                    this.dataKepegawaian.push(newData);
+                } else {
+                    //sort
+                    this.dataKepegawaian.sort(function(a, b){
+                        var keyA = a.tahun_masuk,
+                            keyB = b.tahun_masuk;
+                        // Compare the 2 dates
+                        if(keyA < keyB) return -1;
+                        if(keyA > keyB) return 1;
+                        return 0;
+                    });
+                    var lastDataPegawai = this.dataKepegawaian[this.dataKepegawaian.length-1];
+                    lastDataPegawai["id_unit_kerja"] = this.pegawai.unitKerja.id;
+                    lastDataPegawai["id_posisi"] = this.pegawai.posisi.id;
+                    // lastDataPegawai["id_kelompok_kompetensi"] = this.pegawai.kompetensi.id;
+                    lastDataPegawai["tahun_masuk"] = this.pegawai.tahunMasuk;
+                }
+            },
+
+            updateSertifikat(){
+                for(var i = 0; i < this.sertifikat.length; i++){
+                    this.sertifikat[i].nama_file = 'simage/' + this.sertifikat[i].nama_file;
+                }
+            },
+
+            disableEditButton() {
+                this.disableEdit = true;
+            },
+
+            enableEditButton() {
+                this.disableEdit = false;
+            },
+
+            editProfilPegawai() {
+                this.isEditProfile = true;
+                this.disableEditButton();
+            },
+
+            editDataKepegawaian() {
+                this.isEditKepegawaian = true;
+                this.disableEditButton();
+            },
+
+            editRiwayatPegawai() {
+                this.isEditRiwayat = true;
+                this.disableEditButton();
+            },
+
+            editSertifikat() {
+                this.isEditSertifikat = true;
+                this.disableEditButton();
+            },
+
+            editDataKinerja() {
+                this.isEditDataKinerja = true;
+                this.disableEditButton();
+            },
+
+            editDataKompetensi() {
+
+            },
+
+            editRekomendasi() {
+                this.isEditRekomendasi = true;
+                this.disableEditButton();
+            },
+
+            addDataKepegawaian() {
+                var newData = {
+                    id_data_kepegawaian : null,
+                    id_pegawai : null,
+                    id_unit_kerja : null,
+                    id_posisi : null,
+                    // id_kelompok_kompetensi : null,
+                    tahun_masuk : null,
+                    tahun_keluar : null
+                };
+                this.dataKepegawaian.push(newData);
+            },
+
+            addRiwayatPendidikan() {
+                var newData = {
+                    id_riwayat_pendidikan : null,
+                    id_pegawai : null,
+                    nama_institusi : null,
+                    strata : null,
+                    jurusan : null,
+                    tahun_masuk : null,
+                    tahun_keluar : null
+                };
+                this.riwayatPendidikan.push(newData);
+            },
+
+            addRiwayatPekerjaan() {
+                var newData = {
+                    id_riwayat_pekerjaan : null,
+                    id_pegawai : null,
+                    nama_institusi : null,
+                    posisi : null,
+                    tahun_masuk : null,
+                    tahun_keluar : null
+                };
+                this.riwayatPekerjaan.push(newData);
+            },
+
+            addSertifikat() {
+                var newData = {
+                    id_sertifikat : null,
+                    id_pegawai : null,
+                    judul : null,
+                    lembaga : null,
+                    tahun_diterbitkan : null,
+                    catatan : null,
+                    nama_file : null,
+                };
+                this.sertifikat.push(newData);
+            },
+
+            addDataKinerja() {
+                var newData = {
+                    id_kinerja : null,
+                    id_pegawai : null,
+                    tahun : null,
+                    semester : null,
+                    nilai : null,
+                    catatan : null
+                };
+                this.dataKinerja.push(newData);
+            },
+
+            addRekomendasiTraining() {
+                var newData = {
+                    id_rekomendasi_training : null,
+                    id_pegawai : null,
+                    id_training : null
+                };
+                this.rekomendasiTraining.push(newData);
+            },
+
+            addRekomendasiPosisi() {
+                var newData = {
+                    id_rekomendasi_training : null,
+                    id_pegawai : null,
+                    id_unit_kerja : null,
+                    id_posisi : null
+                };
+                this.rekomendasiPosisi.push(newData);
+            },
+
+            delDataKepegawaian(event) {
+                var targetIndex = event.currentTarget.id;
+                this.dataKepegawaian.splice(targetIndex, 1);
+            },
+
+            delRiwayatPendidikan(event) {
+                var targetIndex = event.currentTarget.id;
+                this.riwayatPendidikan.splice(targetIndex, 1);
+            },
+
+            delRiwayatPekerjaan(event) {
+                var targetIndex = event.currentTarget.id;
+                this.riwayatPekerjaan.splice(targetIndex, 1);
+            },
+
+            delSertifikat(event) {
+                var targetIndex = event.currentTarget.id;
+                this.sertifikat.splice(targetIndex, 1);
+            },
+
+            delDataKinerja(event) {
+                var targetIndex = event.currentTarget.id;
+                this.dataKinerja.splice(targetIndex, 1);
+            },
+
+            delRekomendasiTraining(event) {
+                var targetIndex = event.currentTarget.id;
+                this.rekomendasiTraining.splice(targetIndex, 1);
+            },
+
+            delRekomendasiPosisi(event) {
+                var targetIndex = event.currentTarget.id;
+                this.rekomendasiPosisi.splice(targetIndex, 1);
+            },
+
+            saveProfilPegawai() {
+                this.enableEditButton();
+
+                this.updateProfilPegawai();
+                this.updateDataKepegawaianAfterEditProfile();
+
+                this.cachedPegawai = JSON.parse(JSON.stringify(this.pegawai));
+                this.isEditProfile = false;
+
+                axios.post('/api/pegawai/' + this.id, {
+                    pegawai: this.pegawai,
+                    data_kepegawaian: this.dataKepegawaian,
+                    data_kepegawaian_prev: this.dataKepegawaianPrev,
+                    _method: "put"
+                })
+                .then(function (response) {
+                    console.log(response);
+                    window.location.href = '/pages/profile';
+                })
+                .catch(function (error) {
+                    console.log(error);
+                    alert('Semua kolom harus terisi');
+                });
+
+                console.log(this.dataKepegawaian);
+
+            },
+
+            saveDataKepegawaian() {
+                this.updateDataKepegawaian();
+                this.updateProfilPegawai();
+                this.enableEditButton();
+                this.cachedDataKepegawaian = JSON.parse(JSON.stringify(this.dataKepegawaian));
+                this.isEditKepegawaian = false;
+
+                console.log(this.dataKepegawaian);
+
+                axios.post('/api/kepegawaian/' + this.id, {
+                    kepegawaian: this.dataKepegawaian,
+                    _method: 'put'
+                })
+                .then(function (response) {
+                    console.log(response);
+                    window.location.href = "/pages/profile";
+                })
+                .catch(function (error) {
+                    console.log(error);
+                    alert('Semua kolom harus terisi');
+                });
+            },
+
+            saveRiwayatPegawai() {
+                //sort
+                this.riwayatPendidikan.sort(function(a, b){
+                        var keyA = a.tahun_masuk,
+                            keyB = b.tahun_masuk;
+                        // Compare the 2 dates
+                        if(keyA < keyB) return -1;
+                        if(keyA > keyB) return 1;
+                        return 0;
+                    });
+
+                //sort
+                this.riwayatPekerjaan.sort(function(a, b){
+                        var keyA = a.tahun_masuk,
+                            keyB = b.tahun_masuk;
+                        // Compare the 2 dates
+                        if(keyA < keyB) return -1;
+                        if(keyA > keyB) return 1;
+                        return 0;
+                    });
+
+                this.enableEditButton();
+                this.cachedRiwayatPendidikan = JSON.parse(JSON.stringify(this.riwayatPendidikan));
+                this.cachedRiwayatPekerjaan = JSON.parse(JSON.stringify(this.riwayatPekerjaan));
+                this.isEditRiwayat = false;
+
+                console.log(this.riwayatPendidikan);
+                console.log(this.riwayatPekerjaan);
+
+                axios.post('/api/riwayat/' + this.id, {
+                    pendidikan: this.riwayatPendidikan,
+                    pekerjaan: this.riwayatPekerjaan,
+                    _method: 'put'
+                })
+                .then(function (response) {
+                    console.log(response);
+                    window.location.href = "/pages/profile";
+                })
+                .catch(function (error) {
+                    console.log(error);
+                    alert('Semua kolom harus terisi');
+                });
+            },
+
+            saveSertifikat() {
+                this.enableEditButton();
+                this.cachedSertifikat = JSON.parse(JSON.stringify(this.sertifikat));
+                this.isEditSertifikat = false;
+                console.log(this.sertifikat);
+
+                axios.post('/api/sertifikat/' + this.id, {
+                    sertifikat: this.sertifikat,
+                    _method: 'put'
+                })
+                .then(function (response) {
+                    console.log(response.data.data);
+                    window.location.href = "/pages/profile";
+                })
+                .catch(function (error) {
+                    console.log(error);
+                    alert('Semua kolom harus terisi');
+                });
+            },
+
+            saveDataKinerja() {
+                //sort
+                this.dataKinerja.sort(function(a, b){
+                        var keyA = a.tahun,
+                            keyB = b.tahun;
+                        // Compare the 2 dates
+                        if(keyA < keyB) return -1;
+                        if(keyA > keyB) return 1;
+                        if (keyA == keyB) {
+                            if (a.semester < b.semester) return -1;
+                            else return 1;
+                        }
+                    });
+
+                this.enableEditButton();
+                this.cachedDataKinerja = JSON.parse(JSON.stringify(this.dataKinerja));
+                this.isEditDataKinerja = false;
+
+                if (this.isShowAllDataKinerja) {
+                    this.showAllDataKinerja();
+                } else {
+                    this.hideDataKinerja();
+                }
+            },
+
+            saveRekomendasi() {
+                this.enableEditButton();
+                this.cachedRekomendasiTraining = JSON.parse(JSON.stringify(this.rekomendasiTraining));
+                this.cachedRekomendasiPosisi = JSON.parse(JSON.stringify(this.rekomendasiPosisi));
+                this.isEditRekomendasi = false;
+            },
+
+            cancelProfilPegawai() {
+                this.enableEditButton();
+                this.pegawai = JSON.parse(JSON.stringify(this.cachedPegawai));
+                this.isEditProfile = false;
+            },
+
+            cancelDataKepegawaian() {
+                this.enableEditButton();
+                this.dataKepegawaian = JSON.parse(JSON.stringify(this.cachedDataKepegawaian));
+                this.isEditKepegawaian = false;
+            },
+
+            cancelRiwayatPegawai() {
+                this.enableEditButton();
+                this.riwayatPendidikan = JSON.parse(JSON.stringify(this.cachedRiwayatPendidikan));
+                this.riwayatPekerjaan = JSON.parse(JSON.stringify(this.cachedRiwayatPekerjaan));
+                this.isEditRiwayat = false;
+            },
+
+            cancelSertifikat() {
+                this.enableEditButton();
+                this.sertifikat = JSON.parse(JSON.stringify(this.cachedSertifikat));
+                this.isEditSertifikat = false;
+            },
+
+            cancelDataKinerja() {
+                this.enableEditButton();
+                this.dataKinerja = JSON.parse(JSON.stringify(this.cachedDataKinerja));
+                this.isEditDataKinerja = false;
+
+                if (this.isShowAllDataKinerja) {
+                    this.showAllDataKinerja();
+                } else {
+                    this.hideDataKinerja();
+                }
+            },
+
+            cancelRekomendasi() {
+                this.enableEditButton();
+                this.rekomendasiTraining = JSON.parse(JSON.stringify(this.cachedRekomendasiTraining));
+                this.rekomendasiPosisi = JSON.parse(JSON.stringify(this.cachedRekomendasiPosisi));
+                this.isEditRekomendasi = false;
+            },
+
+            FileChangeProfile(e) {
+                let files = e.target.files || e.dataTransfer.files;
+                if (!files.length)
+                    return;
+
+                let reader = new FileReader();
+                let vm = this;
+                reader.onload = (e) => {
+                    vm.pegawai.imageProfileUrl = e.target.result;
+                };
+                reader.readAsDataURL(files[0]);
+            },
+
+            FileChangeSertifikat(e) {
+                let files = e.target.files || e.dataTransfer.files;
+                if (!files.length)
+                    return;
+
+                var idx = e.currentTarget.id;
+
+                let reader = new FileReader();
+                let vm = this;
+                reader.onload = (e) => {
+                    vm.sertifikat[idx].nama_file = e.target.result;
+                };
+                reader.readAsDataURL(files[0]);
+            },
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/resources/assets/js/components/ProfilPegawai7.vue b/resources/assets/js/components/ProfilPegawai7.vue
new file mode 100644
index 0000000000000000000000000000000000000000..b005869f589e23563c70f2ee0a59280258cd5530
--- /dev/null
+++ b/resources/assets/js/components/ProfilPegawai7.vue
@@ -0,0 +1,763 @@
+<template>
+	<div>
+
+
+        <div class="card" id="rekomendasi">
+            <div class="card-header">
+                Rekomendasi
+                 <!-- <button class="btn btn-primary float-sm-right" v-on:click="editRekomendasi" v-bind:disabled="disableEdit">
+                    Edit <i class="fas fa-edit"></i>
+                 </button> -->
+            </div>
+
+            <div class="card-body">
+                <div class="container">
+
+                    <h5>Rekomendasi Training</h5>
+
+                    <hr>
+
+                    <div v-if="rekomendasiTraining.length === 0" class="no-rekomendasi-posisi">
+                        <div v-if="!isEditRekomendasi">
+                            Belum ditambahkan.
+                            <br>
+                        </div>
+                        <button v-if="isEditRekomendasi" class="btn btn-primary float-sm-left" v-on:click="addRekomendasiTraining">
+                            Tambah <i class="fas fa-plus"></i>
+                        </button>
+                        
+                    </div>
+
+                    <div v-if="rekomendasiTraining.length !== 0" v-for="rt in rekomendasiTraining" class="rekomendasi-training">
+                        <ul v-if="!isEditRekomendasi">
+                            <li v-text="trainingList.find(x => x.id_training == rt.id_training).nama_training"></li>
+                        </ul>
+
+                        <div v-if="isEditRekomendasi" class="form-group row">
+                            <div class="col-sm-10">
+                                <select class="form-control" v-model="rt.id_training">
+                                    <option v-for="tl in trainingList" v-bind:value="tl.id_training">
+                                        {{ tl.nama_training }}
+                                    </option>
+                                </select>
+                                <small class="form-text text-muted">*Wajib diisi</small>
+                            </div>
+                            <div class="col-sm-1">
+                                <button v-bind:id="rekomendasiTraining.indexOf(rt)" v-on:click="delRekomendasiTraining($event)" class="btn btn-danger" type="button">
+                                    Hapus <i class="fas fa-trash-alt"></i>
+                                </button>
+                            </div>
+                            
+                        </div>
+
+
+                    </div>
+
+                    <button v-if="isEditRekomendasi && rekomendasiTraining.length !== 0" class="btn btn-primary float-sm-left" v-on:click="addRekomendasiTraining">
+                        Tambah <i class="fas fa-plus"></i>
+                    </button>
+
+                    <br><br><br>
+
+
+                    <h5>Rekomendasi Lain-lain</h5>
+
+                    
+
+                    <div v-if="rekomendasiPosisi.length === 0" class="no-rekomendasi-posisi">
+                        <div v-if="!isEditRekomendasi">
+                            <hr>
+                            Belum ditambahkan.
+                            <br>
+                        </div>
+                        <button v-if="isEditRekomendasi" class="btn btn-primary float-sm-left" v-on:click="addRekomendasiPosisi">
+                            Tambah <i class="fas fa-plus"></i>
+                        </button>
+                        
+                    </div>
+
+                    <div v-if="rekomendasiPosisi.length !== 0" class="rekomendasi-posisi">
+                        <table class="table">
+                            <thead>
+                            <tr>
+                                <th scope="col">Unit Kerja</th>
+                                <th scope="col">Jabatan</th>
+                            </tr>
+                            </thead>
+                            <tbody v-for="rp in rekomendasiPosisi">
+                            <tr v-if="!isEditRekomendasi">
+                                <td v-text="unitKerja.find(x => x.id_unit_kerja == rp.id_unit_kerja).nama_unit_kerja" ></td>
+                                <td v-text="posisi.find(x => x.id_posisi == rp.id_posisi).nama_posisi" ></td>
+                            </tr>
+                            <tr v-if="isEditRekomendasi">
+                                <td>
+                                    <div class="form-group">
+                                        <select class="form-control" v-model="rp.id_unit_kerja">
+                                            <option v-for="uk in unitKerja" v-bind:value="uk.id_unit_kerja">
+                                                {{ uk.nama_unit_kerja }}
+                                            </option>
+                                        </select>
+                                        <small class="form-text text-muted">*Wajib diisi</small>
+                                    </div>
+                                </td>
+                                <td>
+                                    <div class="form-group">
+                                        <select class="form-control" v-model="rp.id_posisi">
+                                            <option v-for="pos in posisi" v-bind:value="pos.id_posisi">
+                                                {{ pos.nama_posisi }}
+                                            </option>
+                                        </select>
+                                        <small class="form-text text-muted">*Wajib diisi</small>
+                                    </div>
+                                </td>
+                                <td>
+                                    <button v-bind:id="rekomendasiPosisi.indexOf(rp)" v-on:click="delRekomendasiPosisi($event)" class="btn btn-danger" type="button">
+                                        Hapus <i class="fas fa-trash-alt"></i>
+                                    </button>
+                                </td>
+                            </tr>
+                            </tbody>
+                            <button v-if="isEditRekomendasi" class="btn btn-primary float-sm-left" v-on:click="addRekomendasiPosisi">
+                                Tambah <i class="fas fa-plus"></i>
+                            </button>
+                        </table>
+
+                    </div>
+
+                    <br>
+
+                </div>
+            </div>
+            <div class="card-footer text-muted" v-if="isEditRekomendasi">
+                <a href="#rekomendasi" class="btn btn-success float-sm-right btn-simpan" v-on:click="saveRekomendasi">
+                    Simpan <i class="fas fa-check"></i>
+                    </a>
+                <a href="#rekomendasi" class="btn btn-danger float-sm-right" v-on:click="cancelRekomendasi">
+                    Batal <i class ="fas fa-times"></i>
+                </a>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+   export default {
+        props: ['id', 'unit-kerja', 'posisi', 'kelompok-kompetensi', 'data-kinerja-temp', 'rekomendasi-training-temp', 'training-list', 'rekomendasi-posisi-temp'],
+
+        data() {
+            return {
+                
+                pegawai: {
+                    imageProfileUrl: "",
+                    nama: "",
+                    tempatLahir: "",
+                    tanggalLahir: "",
+                    email: "",
+                    nopeg: "",
+                    unitKerja: "",
+                    posisi: "",
+                    kompetensi: "",
+                    tahunMasuk: ""
+                },
+                dataKepegawaian: [],
+                dataKepegawaianPrev: null,
+                riwayatPendidikan: [],
+                riwayatPekerjaan: [],  
+                sertifikat: [],
+
+                isShowAllDataKinerja: false,
+                disableEdit: false,
+                isEditProfile: false,
+                isEditKepegawaian: false,
+                isEditRiwayat: false,
+                isEditSertifikat: false,
+                isEditDataKinerja: false,
+                isEditRekomendasi: false,
+                cachedPegawai: null,
+                cachedDataKepegawaian: null,
+                cachedRiwayatPendidikan: null,
+                cachedRiwayatPekerjaan: null,
+                cachedSertifikat: null,
+                cachedDataKinerja: null,
+                cachedRekomendasiTraining: null,
+                cachedRekomendasiPosisi:null,
+                pegawai: {
+                    imageProfileUrl: null,
+                    nama: null,
+                    tempatLahir: null,
+                    tanggalLahir: null,
+                    email: null,
+                    nopeg: null,
+                    unitKerja: {
+                        id: null,
+                        text: null
+                    },
+                    posisi: {
+                        id: null,
+                        text: null   
+                    },
+                    kompetensi: {
+                        id: null,
+                        text: null   
+                    },
+                    tahunMasuk: null
+                },
+                dataKepegawaian: [],
+                riwayatPendidikan: [],
+                riwayatPekerjaan: [],
+                dataKinerja: [],
+                dataKinerjaShow: [],
+                rekomendasiTraining : [],
+                rekomendasiPosisi : []
+            }
+               
+        },  
+
+        mounted() {
+            
+        },
+
+        created() {
+            //dataKinerja
+            this.dataKinerja = this.dataKinerjaTemp;
+
+            axios.get('/api/pegawai/' + this.id)
+                .then((response) => {
+                    //get data from api response
+                    var responsePegawai = response.data["data"];
+
+                    this.dataKepegawaian = responsePegawai["kepegawaian"];
+                    this.riwayatPendidikan = responsePegawai["pendidikan"];
+                    this.riwayatPekerjaan = responsePegawai["pekerjaan"];
+                    this.updateDataKepegawaian();
+
+                    this.dataKepegawaianPrev = this.dataKepegawaian[this.dataKepegawaian.length-1];
+
+                    this.sertifikat = responsePegawai["sertifikat"];
+                    this.updateSertifikat();
+
+                    this.pegawai.nama = responsePegawai["user"]["name"];
+                    this.pegawai.tempatLahir = responsePegawai["pegawai"]["tempat_lahir"];
+                    this.pegawai.tanggalLahir = responsePegawai["pegawai"]["tanggal_lahir"];
+                    this.pegawai.email = responsePegawai["user"]["email"];
+                    this.pegawai.nopeg = responsePegawai["pegawai"]["nip"];
+                    this.pegawai.imageProfileUrl = 'pimage/' + responsePegawai["pegawai"]["nip"] + '.' + responsePegawai["pegawai"]["ekstensi_foto"];
+                    this.pegawai.kompetensi.id = responsePegawai["pegawai"]["id_kelompok_kompetensi"];
+                    this.updateProfilPegawai();
+
+                    //chacing
+                    this.cachedPegawai = JSON.parse(JSON.stringify(this.pegawai));
+                    this.cachedDataKepegawaian = JSON.parse(JSON.stringify(this.dataKepegawaian));
+                    this.cachedRiwayatPendidikan = JSON.parse(JSON.stringify(this.riwayatPendidikan));
+                    this.cachedRiwayatPekerjaan = JSON.parse(JSON.stringify(this.riwayatPekerjaan));
+                    this.cachedSertifikat = JSON.parse(JSON.stringify(this.sertifikat));
+                    this.cachedDataKinerja = JSON.parse(JSON.stringify(this.dataKinerja));
+
+                    console.log(this);
+                })
+                .catch(function (error) {
+                    console.log(error);
+                    alert('Gagal mengambil data');
+                });
+
+            //caching others
+            this.cachedDataKinerja = JSON.parse(JSON.stringify(this.dataKinerja));
+            
+            // init dataKinerjaShow
+            if (this.dataKinerja.length > 6) {
+                this.dataKinerjaShow = this.dataKinerja.slice(this.dataKinerja.length-6);
+            } else {
+                this.dataKinerjaShow = this.dataKinerja;
+            }
+
+            //init rekomendasiTraining
+            this.rekomendasiTraining = this.rekomendasiTrainingTemp;
+            this.cachedRekomendasiTraining = JSON.parse(JSON.stringify(this.rekomendasiTraining));
+
+            //init rekomendasiPosisi
+            this.rekomendasiPosisi = this.rekomendasiPosisiTemp;
+            this.cachedRekomendasiPosisi = JSON.parse(JSON.stringify(this.rekomendasiPosisi));
+        },
+
+        methods: {
+            downloadKompetensi() {
+                window.open('/api/kompetensi/report/' + this.id);
+            },
+
+            showAllDataKinerja() {
+                this.isShowAllDataKinerja = true;
+                this.dataKinerjaShow = this.dataKinerja;
+            },
+
+            hideDataKinerja() {
+                this.isShowAllDataKinerja = false;
+                
+                if (this.dataKinerja.length > 6) {
+                    this.dataKinerjaShow = this.dataKinerja.slice(this.dataKinerja.length-6);
+                }
+            },
+
+            updateProfilPegawai() {
+                if (this.pegawai.unitKerja.id != null) {
+                    this.pegawai.unitKerja.text = this.unitKerja.find(x => x.id_unit_kerja == this.pegawai.unitKerja.id).nama_unit_kerja;
+                } else {
+                    this.pegawai.unitKerja.text = null;
+                }
+                
+                if (this.pegawai.kompetensi.id != null) {
+                    this.pegawai.kompetensi.text = this.kelompokKompetensi.find(x => x.id_kelompok_kompetensi == this.pegawai.kompetensi.id).nama_kelompok_kompetensi;
+                } else {
+                    this.pegawai.kompetensi.text = null;
+                }
+                    
+                if (this.pegawai.posisi.id != null) {
+                    this.pegawai.posisi.text = this.posisi.find(x => x.id_posisi == this.pegawai.posisi.id).nama_posisi;
+                } else {
+                    this.pegawai.posisi.text = null;
+                }
+            },
+
+            updateDataKepegawaian() {
+                
+                //update relevan
+                if (this.dataKepegawaian.length == 0) {
+                    this.pegawai.unitKerja.id = null;
+                    this.pegawai.posisi.id = null;
+                    // this.pegawai.kompetensi.id = null;
+                    this.pegawai.tahunMasuk = null;
+                } else {
+                    //sort
+                    this.dataKepegawaian.sort(function(a, b){
+                        var keyA = a.tahun_masuk,
+                            keyB = b.tahun_masuk;
+                        // Compare the 2 dates
+                        if(keyA < keyB) return -1;
+                        if(keyA > keyB) return 1;
+                        return 0;
+                    });
+                    var lastDataPegawai = this.dataKepegawaian[this.dataKepegawaian.length-1];
+                    this.pegawai.unitKerja.id = lastDataPegawai["id_unit_kerja"];
+                    this.pegawai.posisi.id = lastDataPegawai["id_posisi"];
+                    // this.pegawai.kompetensi.id = lastDataPegawai["id_kelompok_kompetensi"];
+                    this.pegawai.tahunMasuk = lastDataPegawai["tahun_masuk"];
+                }
+            },
+
+            updateDataKepegawaianAfterEditProfile() {
+                
+                //update relevan
+                if (this.dataKepegawaian.length == 0) {
+                    var newData = {
+                        id_data_kepegawaian : null,
+                        id_pegawai : null,
+                        id_unit_kerja : this.pegawai.unitKerja.id,
+                        id_posisi : this.pegawai.posisi.id,
+                        // id_kelompok_kompetensi : this.pegawai.kompetensi.id,
+                        tahun_masuk : this.pegawai.tahunMasuk,
+                        tahun_keluar : null
+                    };
+                    this.dataKepegawaian.push(newData);
+                } else {
+                    //sort
+                    this.dataKepegawaian.sort(function(a, b){
+                        var keyA = a.tahun_masuk,
+                            keyB = b.tahun_masuk;
+                        // Compare the 2 dates
+                        if(keyA < keyB) return -1;
+                        if(keyA > keyB) return 1;
+                        return 0;
+                    });
+                    var lastDataPegawai = this.dataKepegawaian[this.dataKepegawaian.length-1];
+                    lastDataPegawai["id_unit_kerja"] = this.pegawai.unitKerja.id;
+                    lastDataPegawai["id_posisi"] = this.pegawai.posisi.id;
+                    // lastDataPegawai["id_kelompok_kompetensi"] = this.pegawai.kompetensi.id;
+                    lastDataPegawai["tahun_masuk"] = this.pegawai.tahunMasuk;
+                }
+            },
+
+            updateSertifikat(){
+                for(var i = 0; i < this.sertifikat.length; i++){
+                    this.sertifikat[i].nama_file = 'simage/' + this.sertifikat[i].nama_file;
+                }
+            },
+
+            disableEditButton() {
+                this.disableEdit = true;
+            },
+
+            enableEditButton() {
+                this.disableEdit = false;
+            },
+
+            editProfilPegawai() {
+                this.isEditProfile = true;
+                this.disableEditButton();
+            },
+
+            editDataKepegawaian() {
+                this.isEditKepegawaian = true;
+                this.disableEditButton();
+            },
+
+            editRiwayatPegawai() {
+                this.isEditRiwayat = true;
+                this.disableEditButton();
+            },
+
+            editSertifikat() {
+                this.isEditSertifikat = true;
+                this.disableEditButton();
+            },
+
+            editDataKinerja() {
+                this.isEditDataKinerja = true;
+                this.disableEditButton();
+            },
+
+            editDataKompetensi() {
+
+            },
+
+            editRekomendasi() {
+                this.isEditRekomendasi = true;
+                this.disableEditButton();
+            },
+
+            addDataKepegawaian() {
+                var newData = {
+                    id_data_kepegawaian : null,
+                    id_pegawai : null,
+                    id_unit_kerja : null,
+                    id_posisi : null,
+                    // id_kelompok_kompetensi : null,
+                    tahun_masuk : null,
+                    tahun_keluar : null
+                };
+                this.dataKepegawaian.push(newData);
+            },
+
+            addRiwayatPendidikan() {
+                var newData = {
+                    id_riwayat_pendidikan : null,
+                    id_pegawai : null,
+                    nama_institusi : null,
+                    strata : null,
+                    jurusan : null,
+                    tahun_masuk : null,
+                    tahun_keluar : null
+                };
+                this.riwayatPendidikan.push(newData);
+            },
+
+            addRiwayatPekerjaan() {
+                var newData = {
+                    id_riwayat_pekerjaan : null,
+                    id_pegawai : null,
+                    nama_institusi : null,
+                    posisi : null,
+                    tahun_masuk : null,
+                    tahun_keluar : null
+                };
+                this.riwayatPekerjaan.push(newData);
+            },
+
+            addSertifikat() {
+                var newData = {
+                    id_sertifikat : null,
+                    id_pegawai : null,
+                    judul : null,
+                    lembaga : null,
+                    tahun_diterbitkan : null,
+                    catatan : null,
+                    nama_file : null,
+                };
+                this.sertifikat.push(newData);
+            },
+
+            addDataKinerja() {
+                var newData = {
+                    id_kinerja : null,
+                    id_pegawai : null,
+                    tahun : null,
+                    semester : null,
+                    nilai : null,
+                    catatan : null
+                };
+                this.dataKinerja.push(newData);
+            },
+
+            addRekomendasiTraining() {
+                var newData = {
+                    id_rekomendasi_training : null,
+                    id_pegawai : null,
+                    id_training : null
+                };
+                this.rekomendasiTraining.push(newData);
+            },
+
+            addRekomendasiPosisi() {
+                var newData = {
+                    id_rekomendasi_training : null,
+                    id_pegawai : null,
+                    id_unit_kerja : null,
+                    id_posisi : null
+                };
+                this.rekomendasiPosisi.push(newData);
+            },
+
+            delDataKepegawaian(event) {
+                var targetIndex = event.currentTarget.id;
+                this.dataKepegawaian.splice(targetIndex, 1);
+            },
+
+            delRiwayatPendidikan(event) {
+                var targetIndex = event.currentTarget.id;
+                this.riwayatPendidikan.splice(targetIndex, 1);
+            },
+
+            delRiwayatPekerjaan(event) {
+                var targetIndex = event.currentTarget.id;
+                this.riwayatPekerjaan.splice(targetIndex, 1);
+            },
+
+            delSertifikat(event) {
+                var targetIndex = event.currentTarget.id;
+                this.sertifikat.splice(targetIndex, 1);
+            },
+
+            delDataKinerja(event) {
+                var targetIndex = event.currentTarget.id;
+                this.dataKinerja.splice(targetIndex, 1);
+            },
+
+            delRekomendasiTraining(event) {
+                var targetIndex = event.currentTarget.id;
+                this.rekomendasiTraining.splice(targetIndex, 1);
+            },
+
+            delRekomendasiPosisi(event) {
+                var targetIndex = event.currentTarget.id;
+                this.rekomendasiPosisi.splice(targetIndex, 1);
+            },
+
+            saveProfilPegawai() {
+                this.enableEditButton();
+
+                this.updateProfilPegawai();
+                this.updateDataKepegawaianAfterEditProfile();
+
+                this.cachedPegawai = JSON.parse(JSON.stringify(this.pegawai));
+                this.isEditProfile = false;
+
+                axios.post('/api/pegawai/' + this.id, {
+                    pegawai: this.pegawai,
+                    data_kepegawaian: this.dataKepegawaian,
+                    data_kepegawaian_prev: this.dataKepegawaianPrev,
+                    _method: "put"
+                })
+                .then(function (response) {
+                    console.log(response);
+                    window.location.href = '/pages/profile';
+                })
+                .catch(function (error) {
+                    console.log(error);
+                    alert('Semua kolom harus terisi');
+                });
+
+                console.log(this.dataKepegawaian);
+
+            },
+
+            saveDataKepegawaian() {
+                this.updateDataKepegawaian();
+                this.updateProfilPegawai();
+                this.enableEditButton();
+                this.cachedDataKepegawaian = JSON.parse(JSON.stringify(this.dataKepegawaian));
+                this.isEditKepegawaian = false;
+
+                console.log(this.dataKepegawaian);
+
+                axios.post('/api/kepegawaian/' + this.id, {
+                    kepegawaian: this.dataKepegawaian,
+                    _method: 'put'
+                })
+                .then(function (response) {
+                    console.log(response);
+                    window.location.href = "/pages/profile";
+                })
+                .catch(function (error) {
+                    console.log(error);
+                    alert('Semua kolom harus terisi');
+                });
+            },
+
+            saveRiwayatPegawai() {
+                //sort
+                this.riwayatPendidikan.sort(function(a, b){
+                        var keyA = a.tahun_masuk,
+                            keyB = b.tahun_masuk;
+                        // Compare the 2 dates
+                        if(keyA < keyB) return -1;
+                        if(keyA > keyB) return 1;
+                        return 0;
+                    });
+
+                //sort
+                this.riwayatPekerjaan.sort(function(a, b){
+                        var keyA = a.tahun_masuk,
+                            keyB = b.tahun_masuk;
+                        // Compare the 2 dates
+                        if(keyA < keyB) return -1;
+                        if(keyA > keyB) return 1;
+                        return 0;
+                    });
+
+                this.enableEditButton();
+                this.cachedRiwayatPendidikan = JSON.parse(JSON.stringify(this.riwayatPendidikan));
+                this.cachedRiwayatPekerjaan = JSON.parse(JSON.stringify(this.riwayatPekerjaan));
+                this.isEditRiwayat = false;
+
+                console.log(this.riwayatPendidikan);
+                console.log(this.riwayatPekerjaan);
+
+                axios.post('/api/riwayat/' + this.id, {
+                    pendidikan: this.riwayatPendidikan,
+                    pekerjaan: this.riwayatPekerjaan,
+                    _method: 'put'
+                })
+                .then(function (response) {
+                    console.log(response);
+                    window.location.href = "/pages/profile";
+                })
+                .catch(function (error) {
+                    console.log(error);
+                    alert('Semua kolom harus terisi');
+                });
+            },
+
+            saveSertifikat() {
+                this.enableEditButton();
+                this.cachedSertifikat = JSON.parse(JSON.stringify(this.sertifikat));
+                this.isEditSertifikat = false;
+                console.log(this.sertifikat);
+
+                axios.post('/api/sertifikat/' + this.id, {
+                    sertifikat: this.sertifikat,
+                    _method: 'put'
+                })
+                .then(function (response) {
+                    console.log(response.data.data);
+                    window.location.href = "/pages/profile";
+                })
+                .catch(function (error) {
+                    console.log(error);
+                    alert('Semua kolom harus terisi');
+                });
+            },
+
+            saveDataKinerja() {
+                //sort
+                this.dataKinerja.sort(function(a, b){
+                        var keyA = a.tahun,
+                            keyB = b.tahun;
+                        // Compare the 2 dates
+                        if(keyA < keyB) return -1;
+                        if(keyA > keyB) return 1;
+                        if (keyA == keyB) {
+                            if (a.semester < b.semester) return -1;
+                            else return 1;
+                        }
+                    });
+
+                this.enableEditButton();
+                this.cachedDataKinerja = JSON.parse(JSON.stringify(this.dataKinerja));
+                this.isEditDataKinerja = false;
+
+                if (this.isShowAllDataKinerja) {
+                    this.showAllDataKinerja();
+                } else {
+                    this.hideDataKinerja();
+                }
+            },
+
+            saveRekomendasi() {
+                this.enableEditButton();
+                this.cachedRekomendasiTraining = JSON.parse(JSON.stringify(this.rekomendasiTraining));
+                this.cachedRekomendasiPosisi = JSON.parse(JSON.stringify(this.rekomendasiPosisi));
+                this.isEditRekomendasi = false;
+            },
+
+            cancelProfilPegawai() {
+                this.enableEditButton();
+                this.pegawai = JSON.parse(JSON.stringify(this.cachedPegawai));
+                this.isEditProfile = false;
+            },
+
+            cancelDataKepegawaian() {
+                this.enableEditButton();
+                this.dataKepegawaian = JSON.parse(JSON.stringify(this.cachedDataKepegawaian));
+                this.isEditKepegawaian = false;
+            },
+
+            cancelRiwayatPegawai() {
+                this.enableEditButton();
+                this.riwayatPendidikan = JSON.parse(JSON.stringify(this.cachedRiwayatPendidikan));
+                this.riwayatPekerjaan = JSON.parse(JSON.stringify(this.cachedRiwayatPekerjaan));
+                this.isEditRiwayat = false;
+            },
+
+            cancelSertifikat() {
+                this.enableEditButton();
+                this.sertifikat = JSON.parse(JSON.stringify(this.cachedSertifikat));
+                this.isEditSertifikat = false;
+            },
+
+            cancelDataKinerja() {
+                this.enableEditButton();
+                this.dataKinerja = JSON.parse(JSON.stringify(this.cachedDataKinerja));
+                this.isEditDataKinerja = false;
+
+                if (this.isShowAllDataKinerja) {
+                    this.showAllDataKinerja();
+                } else {
+                    this.hideDataKinerja();
+                }
+            },
+
+            cancelRekomendasi() {
+                this.enableEditButton();
+                this.rekomendasiTraining = JSON.parse(JSON.stringify(this.cachedRekomendasiTraining));
+                this.rekomendasiPosisi = JSON.parse(JSON.stringify(this.cachedRekomendasiPosisi));
+                this.isEditRekomendasi = false;
+            },
+
+            FileChangeProfile(e) {
+                let files = e.target.files || e.dataTransfer.files;
+                if (!files.length)
+                    return;
+
+                let reader = new FileReader();
+                let vm = this;
+                reader.onload = (e) => {
+                    vm.pegawai.imageProfileUrl = e.target.result;
+                };
+                reader.readAsDataURL(files[0]);
+            },
+
+            FileChangeSertifikat(e) {
+                let files = e.target.files || e.dataTransfer.files;
+                if (!files.length)
+                    return;
+
+                var idx = e.currentTarget.id;
+
+                let reader = new FileReader();
+                let vm = this;
+                reader.onload = (e) => {
+                    vm.sertifikat[idx].nama_file = e.target.result;
+                };
+                reader.readAsDataURL(files[0]);
+            },
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/resources/assets/js/components/ProfilPegawaiScript.vue b/resources/assets/js/components/ProfilPegawaiScript.vue
index 1b715c0f62de9b99b0f68b4d60fbb15d323717db..0adfefcc5a0fdb77a0ab855d8448ef21758e4025 100644
--- a/resources/assets/js/components/ProfilPegawaiScript.vue
+++ b/resources/assets/js/components/ProfilPegawaiScript.vue
@@ -1,6 +1,5 @@
 // JavaScript source code
 
-<script>
     export default {
         props: ['id', 'unit-kerja', 'posisi', 'kelompok-kompetensi', 'data-kinerja-temp', 'rekomendasi-training-temp', 'training-list', 'rekomendasi-posisi-temp'],
 
@@ -620,4 +619,3 @@ console.log(this.riwayatPekerjaan);
 },
 }
 }
-</script>
diff --git a/resources/assets/js/components/ProfilPegawaiSpecific.vue b/resources/assets/js/components/ProfilPegawaiSpecific.vue
index 5f510238bbd0d703246ced653aa7f08e57f0f03c..fed3629a7144f9c98072194ea2b4e5dd5321a911 100644
--- a/resources/assets/js/components/ProfilPegawaiSpecific.vue
+++ b/resources/assets/js/components/ProfilPegawaiSpecific.vue
@@ -180,7 +180,7 @@
                 </a>
             </div>
         </div>
-
+        
         <br>
 
         <div class="card" id="data-kepegawaian">
@@ -847,6 +847,631 @@
 
 </template>
 
+<script>
+// JavaScript source code
+
+    export default {
+        props: ['id', 'unit-kerja', 'posisi', 'kelompok-kompetensi', 'data-kinerja-temp', 'rekomendasi-training-temp', 'training-list', 'rekomendasi-posisi-temp'],
+
+        data() {
+            return {
+
+        pegawai: {
+        imageProfileUrl: "",
+    nama: "",
+    tempatLahir: "",
+    tanggalLahir: "",
+    email: "",
+    nopeg: "",
+    unitKerja: "",
+    posisi: "",
+    kompetensi: "",
+    tahunMasuk: ""
+},
+dataKepegawaian: [],
+dataKepegawaianPrev: null,
+riwayatPendidikan: [],
+riwayatPekerjaan: [],
+sertifikat: [],
+
+isShowAllDataKinerja: false,
+disableEdit: false,
+isEditProfile: false,
+isEditKepegawaian: false,
+isEditRiwayat: false,
+isEditSertifikat: false,
+isEditDataKinerja: false,
+isEditRekomendasi: false,
+cachedPegawai: null,
+cachedDataKepegawaian: null,
+cachedRiwayatPendidikan: null,
+cachedRiwayatPekerjaan: null,
+cachedSertifikat: null,
+cachedDataKinerja: null,
+cachedRekomendasiTraining: null,
+cachedRekomendasiPosisi:null,
+                pegawai: {
+        imageProfileUrl: null,
+    nama: null,
+    tempatLahir: null,
+    tanggalLahir: null,
+    email: null,
+    nopeg: null,
+                    unitKerja: {
+        id: null,
+    text: null
+},
+                    posisi: {
+        id: null,
+    text: null
+},
+                    kompetensi: {
+        id: null,
+    text: null
+},
+tahunMasuk: null
+},
+dataKepegawaian: [],
+riwayatPendidikan: [],
+riwayatPekerjaan: [],
+dataKinerja: [],
+dataKinerjaShow: [],
+rekomendasiTraining : [],
+rekomendasiPosisi : []
+}
+
+},
+
+        mounted() {
+
+    },
+
+        created() {
+        //dataKinerja
+        this.dataKinerja = this.dataKinerjaTemp;
+
+    axios.get('/api/pegawai/' + this.id)
+                .then((response) => {
+                    //get data from api response
+                    var responsePegawai = response.data["data"];
+
+    this.dataKepegawaian = responsePegawai["kepegawaian"];
+    this.riwayatPendidikan = responsePegawai["pendidikan"];
+    this.riwayatPekerjaan = responsePegawai["pekerjaan"];
+    this.updateDataKepegawaian();
+
+    this.dataKepegawaianPrev = this.dataKepegawaian[this.dataKepegawaian.length-1];
+
+    this.sertifikat = responsePegawai["sertifikat"];
+    this.updateSertifikat();
+
+    this.pegawai.nama = responsePegawai["user"]["name"];
+    this.pegawai.tempatLahir = responsePegawai["pegawai"]["tempat_lahir"];
+    this.pegawai.tanggalLahir = responsePegawai["pegawai"]["tanggal_lahir"];
+    this.pegawai.email = responsePegawai["user"]["email"];
+    this.pegawai.nopeg = responsePegawai["pegawai"]["nip"];
+    this.pegawai.imageProfileUrl = 'pimage/' + responsePegawai["pegawai"]["nip"] + '.' + responsePegawai["pegawai"]["ekstensi_foto"];
+    this.pegawai.kompetensi.id = responsePegawai["pegawai"]["id_kelompok_kompetensi"];
+    this.updateProfilPegawai();
+
+    //chacing
+    this.cachedPegawai = JSON.parse(JSON.stringify(this.pegawai));
+    this.cachedDataKepegawaian = JSON.parse(JSON.stringify(this.dataKepegawaian));
+    this.cachedRiwayatPendidikan = JSON.parse(JSON.stringify(this.riwayatPendidikan));
+    this.cachedRiwayatPekerjaan = JSON.parse(JSON.stringify(this.riwayatPekerjaan));
+    this.cachedSertifikat = JSON.parse(JSON.stringify(this.sertifikat));
+    this.cachedDataKinerja = JSON.parse(JSON.stringify(this.dataKinerja));
+
+    console.log(this);
+})
+                .catch(function (error) {
+        console.log(error);
+    alert('Gagal mengambil data');
+});
+
+//caching others
+this.cachedDataKinerja = JSON.parse(JSON.stringify(this.dataKinerja));
+
+// init dataKinerjaShow
+            if (this.dataKinerja.length > 6) {
+        this.dataKinerjaShow = this.dataKinerja.slice(this.dataKinerja.length - 6);
+    } else {
+        this.dataKinerjaShow = this.dataKinerja;
+    }
+
+    //init rekomendasiTraining
+    this.rekomendasiTraining = this.rekomendasiTrainingTemp;
+    this.cachedRekomendasiTraining = JSON.parse(JSON.stringify(this.rekomendasiTraining));
+
+    //init rekomendasiPosisi
+    this.rekomendasiPosisi = this.rekomendasiPosisiTemp;
+    this.cachedRekomendasiPosisi = JSON.parse(JSON.stringify(this.rekomendasiPosisi));
+},
+
+        methods: {
+        downloadKompetensi() {
+    window.open('/api/kompetensi/report/' + this.id);
+},
+
+            showAllDataKinerja() {
+        this.isShowAllDataKinerja = true;
+    this.dataKinerjaShow = this.dataKinerja;
+},
+
+            hideDataKinerja() {
+        this.isShowAllDataKinerja = false;
+
+    if (this.dataKinerja.length > 6) {
+        this.dataKinerjaShow = this.dataKinerja.slice(this.dataKinerja.length - 6);
+    }
+},
+
+            updateProfilPegawai() {
+                if (this.pegawai.unitKerja.id != null) {
+        this.pegawai.unitKerja.text = this.unitKerja.find(x => x.id_unit_kerja == this.pegawai.unitKerja.id).nama_unit_kerja;
+    } else {
+        this.pegawai.unitKerja.text = null;
+    }
+   
+                if (this.pegawai.kompetensi.id != null) {
+        this.pegawai.kompetensi.text = this.kelompokKompetensi.find(x => x.id_kelompok_kompetensi == this.pegawai.kompetensi.id).nama_kelompok_kompetensi;
+    } else {
+        this.pegawai.kompetensi.text = null;
+    }
+       
+                if (this.pegawai.posisi.id != null) {
+        this.pegawai.posisi.text = this.posisi.find(x => x.id_posisi == this.pegawai.posisi.id).nama_posisi;
+    } else {
+        this.pegawai.posisi.text = null;
+    }
+},
+
+            updateDataKepegawaian() {
+
+                //update relevan
+                if (this.dataKepegawaian.length == 0) {
+        this.pegawai.unitKerja.id = null;
+    this.pegawai.posisi.id = null;
+    // this.pegawai.kompetensi.id = null;
+    this.pegawai.tahunMasuk = null;
+                } else {
+        //sort
+        this.dataKepegawaian.sort(function (a, b) {
+            var keyA = a.tahun_masuk,
+                keyB = b.tahun_masuk;
+            // Compare the 2 dates
+            if (keyA < keyB) return -1;
+            if (keyA > keyB) return 1;
+            return 0;
+        });
+    var lastDataPegawai = this.dataKepegawaian[this.dataKepegawaian.length-1];
+    this.pegawai.unitKerja.id = lastDataPegawai["id_unit_kerja"];
+    this.pegawai.posisi.id = lastDataPegawai["id_posisi"];
+    // this.pegawai.kompetensi.id = lastDataPegawai["id_kelompok_kompetensi"];
+    this.pegawai.tahunMasuk = lastDataPegawai["tahun_masuk"];
+}
+},
+
+            updateDataKepegawaianAfterEditProfile() {
+
+                //update relevan
+                if (this.dataKepegawaian.length == 0) {
+                    var newData = {
+        id_data_kepegawaian : null,
+    id_pegawai : null,
+    id_unit_kerja : this.pegawai.unitKerja.id,
+    id_posisi : this.pegawai.posisi.id,
+    // id_kelompok_kompetensi : this.pegawai.kompetensi.id,
+    tahun_masuk : this.pegawai.tahunMasuk,
+    tahun_keluar : null
+};
+this.dataKepegawaian.push(newData);
+                } else {
+        //sort
+        this.dataKepegawaian.sort(function (a, b) {
+            var keyA = a.tahun_masuk,
+                keyB = b.tahun_masuk;
+            // Compare the 2 dates
+            if (keyA < keyB) return -1;
+            if (keyA > keyB) return 1;
+            return 0;
+        });
+    var lastDataPegawai = this.dataKepegawaian[this.dataKepegawaian.length-1];
+    lastDataPegawai["id_unit_kerja"] = this.pegawai.unitKerja.id;
+    lastDataPegawai["id_posisi"] = this.pegawai.posisi.id;
+    // lastDataPegawai["id_kelompok_kompetensi"] = this.pegawai.kompetensi.id;
+    lastDataPegawai["tahun_masuk"] = this.pegawai.tahunMasuk;
+}
+},
+
+            updateSertifikat(){
+                for(var i = 0; i < this.sertifikat.length; i++){
+        this.sertifikat[i].nama_file = 'simage/' + this.sertifikat[i].nama_file;
+    }
+},
+
+            disableEditButton() {
+        this.disableEdit = true;
+    },
+
+            enableEditButton() {
+        this.disableEdit = false;
+    },
+
+            editProfilPegawai() {
+        this.isEditProfile = true;
+    this.disableEditButton();
+},
+
+            editDataKepegawaian() {
+        this.isEditKepegawaian = true;
+    this.disableEditButton();
+},
+
+            editRiwayatPegawai() {
+        this.isEditRiwayat = true;
+    this.disableEditButton();
+},
+
+            editSertifikat() {
+        this.isEditSertifikat = true;
+    this.disableEditButton();
+},
+
+            editDataKinerja() {
+        this.isEditDataKinerja = true;
+    this.disableEditButton();
+},
+
+            editDataKompetensi() {
+
+    },
+
+            editRekomendasi() {
+        this.isEditRekomendasi = true;
+    this.disableEditButton();
+},
+
+            addDataKepegawaian() {
+                var newData = {
+        id_data_kepegawaian : null,
+    id_pegawai : null,
+    id_unit_kerja : null,
+    id_posisi : null,
+    // id_kelompok_kompetensi : null,
+    tahun_masuk : null,
+    tahun_keluar : null
+};
+this.dataKepegawaian.push(newData);
+},
+
+            addRiwayatPendidikan() {
+                var newData = {
+        id_riwayat_pendidikan : null,
+    id_pegawai : null,
+    nama_institusi : null,
+    strata : null,
+    jurusan : null,
+    tahun_masuk : null,
+    tahun_keluar : null
+};
+this.riwayatPendidikan.push(newData);
+},
+
+            addRiwayatPekerjaan() {
+                var newData = {
+        id_riwayat_pekerjaan : null,
+    id_pegawai : null,
+    nama_institusi : null,
+    posisi : null,
+    tahun_masuk : null,
+    tahun_keluar : null
+};
+this.riwayatPekerjaan.push(newData);
+},
+
+            addSertifikat() {
+                var newData = {
+        id_sertifikat : null,
+    id_pegawai : null,
+    judul : null,
+    lembaga : null,
+    tahun_diterbitkan : null,
+    catatan : null,
+    nama_file : null,
+};
+this.sertifikat.push(newData);
+},
+
+            addDataKinerja() {
+                var newData = {
+        id_kinerja : null,
+    id_pegawai : null,
+    tahun : null,
+    semester : null,
+    nilai : null,
+    catatan : null
+};
+this.dataKinerja.push(newData);
+},
+
+            addRekomendasiTraining() {
+                var newData = {
+        id_rekomendasi_training : null,
+    id_pegawai : null,
+    id_training : null
+};
+this.rekomendasiTraining.push(newData);
+},
+
+            addRekomendasiPosisi() {
+                var newData = {
+        id_rekomendasi_training : null,
+    id_pegawai : null,
+    id_unit_kerja : null,
+    id_posisi : null
+};
+this.rekomendasiPosisi.push(newData);
+},
+
+            delDataKepegawaian(event) {
+                var targetIndex = event.currentTarget.id;
+    this.dataKepegawaian.splice(targetIndex, 1);
+},
+
+            delRiwayatPendidikan(event) {
+                var targetIndex = event.currentTarget.id;
+    this.riwayatPendidikan.splice(targetIndex, 1);
+},
+
+            delRiwayatPekerjaan(event) {
+                var targetIndex = event.currentTarget.id;
+    this.riwayatPekerjaan.splice(targetIndex, 1);
+},
+
+            delSertifikat(event) {
+                var targetIndex = event.currentTarget.id;
+    this.sertifikat.splice(targetIndex, 1);
+},
+
+            delDataKinerja(event) {
+                var targetIndex = event.currentTarget.id;
+    this.dataKinerja.splice(targetIndex, 1);
+},
+
+            delRekomendasiTraining(event) {
+                var targetIndex = event.currentTarget.id;
+    this.rekomendasiTraining.splice(targetIndex, 1);
+},
+
+            delRekomendasiPosisi(event) {
+                var targetIndex = event.currentTarget.id;
+    this.rekomendasiPosisi.splice(targetIndex, 1);
+},
+
+            saveProfilPegawai() {
+        this.enableEditButton();
+
+    this.updateProfilPegawai();
+    this.updateDataKepegawaianAfterEditProfile();
+
+    this.cachedPegawai = JSON.parse(JSON.stringify(this.pegawai));
+    this.isEditProfile = false;
+
+                axios.post('/api/pegawai/' + this.id, {
+        pegawai: this.pegawai,
+    data_kepegawaian: this.dataKepegawaian,
+    data_kepegawaian_prev: this.dataKepegawaianPrev,
+    _method: "put"
+})
+                .then(function (response) {
+        console.log(response);
+    window.location.href = '/pages/profile';
+})
+                .catch(function (error) {
+        console.log(error);
+    alert('Semua kolom harus terisi');
+});
+
+console.log(this.dataKepegawaian);
+
+},
+
+            saveDataKepegawaian() {
+        this.updateDataKepegawaian();
+    this.updateProfilPegawai();
+    this.enableEditButton();
+    this.cachedDataKepegawaian = JSON.parse(JSON.stringify(this.dataKepegawaian));
+    this.isEditKepegawaian = false;
+
+    console.log(this.dataKepegawaian);
+
+                axios.post('/api/kepegawaian/' + this.id, {
+        kepegawaian: this.dataKepegawaian,
+    _method: 'put'
+})
+                .then(function (response) {
+        console.log(response);
+    window.location.href = "/pages/profile";
+})
+                .catch(function (error) {
+        console.log(error);
+    alert('Semua kolom harus terisi');
+});
+},
+
+            saveRiwayatPegawai() {
+        //sort
+        this.riwayatPendidikan.sort(function (a, b) {
+            var keyA = a.tahun_masuk,
+                keyB = b.tahun_masuk;
+            // Compare the 2 dates
+            if (keyA < keyB) return -1;
+            if (keyA > keyB) return 1;
+            return 0;
+        });
+
+    //sort
+    this.riwayatPekerjaan.sort(function(a, b){
+                        var keyA = a.tahun_masuk,
+        keyB = b.tahun_masuk;
+    // Compare the 2 dates
+                        if(keyA < keyB) return -1;
+    if(keyA > keyB) return 1;
+    return 0;
+});
+
+this.enableEditButton();
+this.cachedRiwayatPendidikan = JSON.parse(JSON.stringify(this.riwayatPendidikan));
+this.cachedRiwayatPekerjaan = JSON.parse(JSON.stringify(this.riwayatPekerjaan));
+this.isEditRiwayat = false;
+
+console.log(this.riwayatPendidikan);
+console.log(this.riwayatPekerjaan);
+
+                axios.post('/api/riwayat/' + this.id, {
+        pendidikan: this.riwayatPendidikan,
+    pekerjaan: this.riwayatPekerjaan,
+    _method: 'put'
+})
+                .then(function (response) {
+        console.log(response);
+    window.location.href = "/pages/profile";
+})
+                .catch(function (error) {
+        console.log(error);
+    alert('Semua kolom harus terisi');
+});
+},
+
+            saveSertifikat() {
+        this.enableEditButton();
+    this.cachedSertifikat = JSON.parse(JSON.stringify(this.sertifikat));
+    this.isEditSertifikat = false;
+    console.log(this.sertifikat);
+
+                axios.post('/api/sertifikat/' + this.id, {
+        sertifikat: this.sertifikat,
+    _method: 'put'
+})
+                .then(function (response) {
+        console.log(response.data.data);
+    window.location.href = "/pages/profile";
+})
+                .catch(function (error) {
+        console.log(error);
+    alert('Semua kolom harus terisi');
+});
+},
+
+            saveDataKinerja() {
+        //sort
+        this.dataKinerja.sort(function (a, b) {
+            var keyA = a.tahun,
+                keyB = b.tahun;
+            // Compare the 2 dates
+            if (keyA < keyB) return -1;
+            if (keyA > keyB) return 1;
+            if (keyA == keyB) {
+                if (a.semester < b.semester) return -1;
+                else return 1;
+            }
+        });
+
+    this.enableEditButton();
+    this.cachedDataKinerja = JSON.parse(JSON.stringify(this.dataKinerja));
+    this.isEditDataKinerja = false;
+
+                if (this.isShowAllDataKinerja) {
+        this.showAllDataKinerja();
+    } else {
+        this.hideDataKinerja();
+    }
+},
+
+            saveRekomendasi() {
+        this.enableEditButton();
+    this.cachedRekomendasiTraining = JSON.parse(JSON.stringify(this.rekomendasiTraining));
+    this.cachedRekomendasiPosisi = JSON.parse(JSON.stringify(this.rekomendasiPosisi));
+    this.isEditRekomendasi = false;
+},
+
+            cancelProfilPegawai() {
+        this.enableEditButton();
+    this.pegawai = JSON.parse(JSON.stringify(this.cachedPegawai));
+    this.isEditProfile = false;
+},
+
+            cancelDataKepegawaian() {
+        this.enableEditButton();
+    this.dataKepegawaian = JSON.parse(JSON.stringify(this.cachedDataKepegawaian));
+    this.isEditKepegawaian = false;
+},
+
+            cancelRiwayatPegawai() {
+        this.enableEditButton();
+    this.riwayatPendidikan = JSON.parse(JSON.stringify(this.cachedRiwayatPendidikan));
+    this.riwayatPekerjaan = JSON.parse(JSON.stringify(this.cachedRiwayatPekerjaan));
+    this.isEditRiwayat = false;
+},
+
+            cancelSertifikat() {
+        this.enableEditButton();
+    this.sertifikat = JSON.parse(JSON.stringify(this.cachedSertifikat));
+    this.isEditSertifikat = false;
+},
+
+            cancelDataKinerja() {
+        this.enableEditButton();
+    this.dataKinerja = JSON.parse(JSON.stringify(this.cachedDataKinerja));
+    this.isEditDataKinerja = false;
+
+                if (this.isShowAllDataKinerja) {
+        this.showAllDataKinerja();
+    } else {
+        this.hideDataKinerja();
+    }
+},
+
+            cancelRekomendasi() {
+        this.enableEditButton();
+    this.rekomendasiTraining = JSON.parse(JSON.stringify(this.cachedRekomendasiTraining));
+    this.rekomendasiPosisi = JSON.parse(JSON.stringify(this.cachedRekomendasiPosisi));
+    this.isEditRekomendasi = false;
+},
+
+            FileChangeProfile(e) {
+        let files = e.target.files || e.dataTransfer.files;
+    if (!files.length)
+        return;
+
+    let reader = new FileReader();
+    let vm = this;
+                reader.onload = (e) => {
+        vm.pegawai.imageProfileUrl = e.target.result;
+    };
+    reader.readAsDataURL(files[0]);
+},
+
+            FileChangeSertifikat(e) {
+        let files = e.target.files || e.dataTransfer.files;
+    if (!files.length)
+        return;
+
+    var idx = e.currentTarget.id;
+
+    let reader = new FileReader();
+    let vm = this;
+                reader.onload = (e) => {
+        vm.sertifikat[idx].nama_file = e.target.result;
+    };
+    reader.readAsDataURL(files[0]);
+},
+}
+}
+
+</script>
+
 <style>
 
 </style>
\ No newline at end of file
diff --git a/resources/assets/js/components/ProfilPegawaiSpecificScript.js b/resources/assets/js/components/ProfilPegawaiSpecificScript.js
new file mode 100644
index 0000000000000000000000000000000000000000..ca3b7fb4da41c2f8e8a63cb5c1f5ab5003b21832
--- /dev/null
+++ b/resources/assets/js/components/ProfilPegawaiSpecificScript.js
@@ -0,0 +1,625 @@
+// JavaScript source code
+
+    export default {
+        props: ['id-pmo','id', 'unit-kerja', 'posisi', 'kelompok-kompetensi', 'data-kinerja-temp', 'rekomendasi-training-temp', 'training-list', 'rekomendasi-posisi-temp'],
+
+        data() {
+            return {
+
+        pegawai: {
+        imageProfileUrl: "",
+    nama: "",
+    tempatLahir: "",
+    tanggalLahir: "",
+    email: "",
+    nopeg: "",
+    unitKerja: "",
+    posisi: "",
+    kompetensi: "",
+    tahunMasuk: ""
+},
+dataKepegawaian: [],
+dataKepegawaianPrev: null,
+riwayatPendidikan: [],
+riwayatPekerjaan: [],
+sertifikat: [],
+
+isShowAllDataKinerja: false,
+disableEdit: false,
+isEditProfile: false,
+isEditKepegawaian: false,
+isEditRiwayat: false,
+isEditSertifikat: false,
+isEditDataKinerja: false,
+isEditRekomendasi: false,
+cachedPegawai: null,
+cachedDataKepegawaian: null,
+cachedRiwayatPendidikan: null,
+cachedRiwayatPekerjaan: null,
+cachedSertifikat: null,
+cachedDataKinerja: null,
+cachedRekomendasiTraining: null,
+cachedRekomendasiPosisi:null,
+                pegawai: {
+        imageProfileUrl: null,
+    nama: null,
+    tempatLahir: null,
+    tanggalLahir: null,
+    email: null,
+    nopeg: null,
+                    unitKerja: {
+        id: null,
+    text: null
+},
+                    posisi: {
+        id: null,
+    text: null
+},
+                    kompetensi: {
+        id: null,
+    text: null
+},
+tahunMasuk: null
+},
+dataKepegawaian: [],
+riwayatPendidikan: [],
+riwayatPekerjaan: [],
+dataKinerja: [],
+dataKinerjaShow: [],
+rekomendasiTraining : [],
+rekomendasiPosisi : []
+}
+
+},
+
+        mounted() {
+
+    },
+
+        created() {
+        //dataKinerja
+        this.dataKinerja = this.dataKinerjaTemp;
+
+    axios.get('/api/pegawai/' + this.id)
+                .then((response) => {
+                    //get data from api response
+                    var responsePegawai = response.data["data"];
+
+    this.dataKepegawaian = responsePegawai["kepegawaian"];
+    this.riwayatPendidikan = responsePegawai["pendidikan"];
+    this.riwayatPekerjaan = responsePegawai["pekerjaan"];
+    this.updateDataKepegawaian();
+
+    this.dataKepegawaianPrev = this.dataKepegawaian[this.dataKepegawaian.length-1];
+
+    this.sertifikat = responsePegawai["sertifikat"];
+    this.updateSertifikat();
+
+    this.pegawai.nama = responsePegawai["user"]["name"];
+    this.pegawai.tempatLahir = responsePegawai["pegawai"]["tempat_lahir"];
+    this.pegawai.tanggalLahir = responsePegawai["pegawai"]["tanggal_lahir"];
+    this.pegawai.email = responsePegawai["user"]["email"];
+    this.pegawai.nopeg = responsePegawai["pegawai"]["nip"];
+    this.pegawai.imageProfileUrl = 'http://localhost:8000/pages/pimage/' + responsePegawai["pegawai"]["nip"] + '.' + responsePegawai["pegawai"]["ekstensi_foto"];
+    this.pegawai.kompetensi.id = responsePegawai["pegawai"]["id_kelompok_kompetensi"];
+    this.updateProfilPegawai();
+
+    //chacing
+    this.cachedPegawai = JSON.parse(JSON.stringify(this.pegawai));
+    this.cachedDataKepegawaian = JSON.parse(JSON.stringify(this.dataKepegawaian));
+    this.cachedRiwayatPendidikan = JSON.parse(JSON.stringify(this.riwayatPendidikan));
+    this.cachedRiwayatPekerjaan = JSON.parse(JSON.stringify(this.riwayatPekerjaan));
+    this.cachedSertifikat = JSON.parse(JSON.stringify(this.sertifikat));
+    this.cachedDataKinerja = JSON.parse(JSON.stringify(this.dataKinerja));
+
+    console.log(this);
+})
+                .catch(function (error) {
+        console.log(error);
+    alert('Gagal mengambil data');
+});
+
+//caching others
+this.cachedDataKinerja = JSON.parse(JSON.stringify(this.dataKinerja));
+
+// init dataKinerjaShow
+            if (this.dataKinerja.length > 6) {
+        this.dataKinerjaShow = this.dataKinerja.slice(this.dataKinerja.length - 6);
+    } else {
+        this.dataKinerjaShow = this.dataKinerja;
+    }
+
+    //init rekomendasiTraining
+    this.rekomendasiTraining = this.rekomendasiTrainingTemp;
+    this.cachedRekomendasiTraining = JSON.parse(JSON.stringify(this.rekomendasiTraining));
+
+    //init rekomendasiPosisi
+    this.rekomendasiPosisi = this.rekomendasiPosisiTemp;
+    this.cachedRekomendasiPosisi = JSON.parse(JSON.stringify(this.rekomendasiPosisi));
+},
+
+        methods: {
+        downloadKompetensi() {
+    window.open('/api/kompetensi/report/' + this.id);
+},
+
+            editKommpetensi() {
+        window.open('/pages/pmo?nip=' + this.pegawai.nopeg + '&tab=dataKompetensi');
+    },
+
+            showAllDataKinerja() {
+        this.isShowAllDataKinerja = true;
+    this.dataKinerjaShow = this.dataKinerja;
+},
+
+            hideDataKinerja() {
+        this.isShowAllDataKinerja = false;
+
+    if (this.dataKinerja.length > 6) {
+        this.dataKinerjaShow = this.dataKinerja.slice(this.dataKinerja.length - 6);
+    }
+},
+
+            updateProfilPegawai() {
+                if (this.pegawai.unitKerja.id != null) {
+        this.pegawai.unitKerja.text = this.unitKerja.find(x => x.id_unit_kerja == this.pegawai.unitKerja.id).nama_unit_kerja;
+    } else {
+        this.pegawai.unitKerja.text = null;
+    }
+   
+                if (this.pegawai.kompetensi.id != null) {
+        this.pegawai.kompetensi.text = this.kelompokKompetensi.find(x => x.id_kelompok_kompetensi == this.pegawai.kompetensi.id).nama_kelompok_kompetensi;
+    } else {
+        this.pegawai.kompetensi.text = null;
+    }
+       
+                if (this.pegawai.posisi.id != null) {
+        this.pegawai.posisi.text = this.posisi.find(x => x.id_posisi == this.pegawai.posisi.id).nama_posisi;
+    } else {
+        this.pegawai.posisi.text = null;
+    }
+},
+
+            updateDataKepegawaian() {
+
+                //update relevan
+                if (this.dataKepegawaian.length == 0) {
+        this.pegawai.unitKerja.id = null;
+    this.pegawai.posisi.id = null;
+    // this.pegawai.kompetensi.id = null;
+    this.pegawai.tahunMasuk = null;
+                } else {
+        //sort
+        this.dataKepegawaian.sort(function (a, b) {
+            var keyA = a.tahun_masuk,
+                keyB = b.tahun_masuk;
+            // Compare the 2 dates
+            if (keyA < keyB) return -1;
+            if (keyA > keyB) return 1;
+            return 0;
+        });
+    var lastDataPegawai = this.dataKepegawaian[this.dataKepegawaian.length-1];
+    this.pegawai.unitKerja.id = lastDataPegawai["id_unit_kerja"];
+    this.pegawai.posisi.id = lastDataPegawai["id_posisi"];
+    // this.pegawai.kompetensi.id = lastDataPegawai["id_kelompok_kompetensi"];
+    this.pegawai.tahunMasuk = lastDataPegawai["tahun_masuk"];
+}
+},
+
+            updateDataKepegawaianAfterEditProfile() {
+
+                //update relevan
+                if (this.dataKepegawaian.length == 0) {
+                    var newData = {
+        id_data_kepegawaian : null,
+    id_pegawai : null,
+    id_unit_kerja : this.pegawai.unitKerja.id,
+    id_posisi : this.pegawai.posisi.id,
+    // id_kelompok_kompetensi : this.pegawai.kompetensi.id,
+    tahun_masuk : this.pegawai.tahunMasuk,
+    tahun_keluar : null
+};
+this.dataKepegawaian.push(newData);
+                } else {
+        //sort
+        this.dataKepegawaian.sort(function (a, b) {
+            var keyA = a.tahun_masuk,
+                keyB = b.tahun_masuk;
+            // Compare the 2 dates
+            if (keyA < keyB) return -1;
+            if (keyA > keyB) return 1;
+            return 0;
+        });
+    var lastDataPegawai = this.dataKepegawaian[this.dataKepegawaian.length-1];
+    lastDataPegawai["id_unit_kerja"] = this.pegawai.unitKerja.id;
+    lastDataPegawai["id_posisi"] = this.pegawai.posisi.id;
+    // lastDataPegawai["id_kelompok_kompetensi"] = this.pegawai.kompetensi.id;
+    lastDataPegawai["tahun_masuk"] = this.pegawai.tahunMasuk;
+}
+},
+
+            updateSertifikat(){
+                for(var i = 0; i < this.sertifikat.length; i++){
+        this.sertifikat[i].nama_file = 'http://localhost:8000/pages/simage/' + this.sertifikat[i].nama_file;
+    }
+},
+
+            disableEditButton() {
+        this.disableEdit = true;
+    },
+
+            enableEditButton() {
+        this.disableEdit = false;
+    },
+
+            editProfilPegawai() {
+        this.isEditProfile = true;
+    this.disableEditButton();
+},
+
+            editDataKepegawaian() {
+        this.isEditKepegawaian = true;
+    this.disableEditButton();
+},
+
+            editRiwayatPegawai() {
+        this.isEditRiwayat = true;
+    this.disableEditButton();
+},
+
+            editSertifikat() {
+        this.isEditSertifikat = true;
+    this.disableEditButton();
+},
+
+            editDataKinerja() {
+        this.isEditDataKinerja = true;
+    this.disableEditButton();
+},
+
+            editDataKompetensi() {
+
+    },
+
+            editRekomendasi() {
+        this.isEditRekomendasi = true;
+    this.disableEditButton();
+},
+
+            addDataKepegawaian() {
+                var newData = {
+        id_data_kepegawaian : null,
+    id_pegawai : null,
+    id_unit_kerja : null,
+    id_posisi : null,
+    // id_kelompok_kompetensi : null,
+    tahun_masuk : null,
+    tahun_keluar : null
+};
+this.dataKepegawaian.push(newData);
+},
+
+            addRiwayatPendidikan() {
+                var newData = {
+        id_riwayat_pendidikan : null,
+    id_pegawai : null,
+    nama_institusi : null,
+    strata : null,
+    jurusan : null,
+    tahun_masuk : null,
+    tahun_keluar : null
+};
+this.riwayatPendidikan.push(newData);
+},
+
+            addRiwayatPekerjaan() {
+                var newData = {
+        id_riwayat_pekerjaan : null,
+    id_pegawai : null,
+    nama_institusi : null,
+    posisi : null,
+    tahun_masuk : null,
+    tahun_keluar : null
+};
+this.riwayatPekerjaan.push(newData);
+},
+
+            addSertifikat() {
+                var newData = {
+        id_sertifikat : null,
+    id_pegawai : null,
+    judul : null,
+    lembaga : null,
+    tahun_diterbitkan : null,
+    catatan : null,
+    nama_file : null,
+};
+this.sertifikat.push(newData);
+},
+
+            addDataKinerja() {
+                var newData = {
+        id_kinerja : null,
+    id_pegawai : null,
+    tahun : null,
+    semester : null,
+    nilai : null,
+    catatan : null
+};
+this.dataKinerja.push(newData);
+},
+
+            addRekomendasiTraining() {
+                var newData = {
+        id_rekomendasi_training : null,
+    id_pegawai : null,
+    id_training : null
+};
+this.rekomendasiTraining.push(newData);
+},
+
+            addRekomendasiPosisi() {
+                var newData = {
+        id_rekomendasi_training : null,
+    id_pegawai : null,
+    id_unit_kerja : null,
+    id_posisi : null
+};
+this.rekomendasiPosisi.push(newData);
+},
+
+            delDataKepegawaian(event) {
+                var targetIndex = event.currentTarget.id;
+    this.dataKepegawaian.splice(targetIndex, 1);
+},
+
+            delRiwayatPendidikan(event) {
+                var targetIndex = event.currentTarget.id;
+    this.riwayatPendidikan.splice(targetIndex, 1);
+},
+
+            delRiwayatPekerjaan(event) {
+                var targetIndex = event.currentTarget.id;
+    this.riwayatPekerjaan.splice(targetIndex, 1);
+},
+
+            delSertifikat(event) {
+                var targetIndex = event.currentTarget.id;
+    this.sertifikat.splice(targetIndex, 1);
+},
+
+            delDataKinerja(event) {
+                var targetIndex = event.currentTarget.id;
+    this.dataKinerja.splice(targetIndex, 1);
+},
+
+            delRekomendasiTraining(event) {
+                var targetIndex = event.currentTarget.id;
+    this.rekomendasiTraining.splice(targetIndex, 1);
+},
+
+            delRekomendasiPosisi(event) {
+                var targetIndex = event.currentTarget.id;
+    this.rekomendasiPosisi.splice(targetIndex, 1);
+},
+
+            saveProfilPegawai() {
+        this.enableEditButton();
+
+    this.updateProfilPegawai();
+    this.updateDataKepegawaianAfterEditProfile();
+
+    this.cachedPegawai = JSON.parse(JSON.stringify(this.pegawai));
+    this.isEditProfile = false;
+
+                axios.post('/api/pegawai/' + this.id, {
+        pegawai: this.pegawai,
+    data_kepegawaian: this.dataKepegawaian,
+    data_kepegawaian_prev: this.dataKepegawaianPrev,
+    _method: "put"
+})
+                .then(function (response) {
+        console.log(response);
+    window.location.href = '/pages/profile/' + this.id;
+})
+                .catch(function (error) {
+        console.log(error);
+    alert('Semua kolom harus terisi');
+});
+
+console.log(this.dataKepegawaian);
+
+},
+
+            saveDataKepegawaian() {
+        this.updateDataKepegawaian();
+    this.updateProfilPegawai();
+    this.enableEditButton();
+    this.cachedDataKepegawaian = JSON.parse(JSON.stringify(this.dataKepegawaian));
+    this.isEditKepegawaian = false;
+
+    console.log(this.dataKepegawaian);
+
+                axios.post('/api/kepegawaian/' + this.id, {
+        kepegawaian: this.dataKepegawaian,
+    _method: 'put'
+})
+                .then(function (response) {
+        console.log(response);
+    window.location.href = "/pages/profile/" + this.id;
+})
+                .catch(function (error) {
+        console.log(error);
+    alert('Semua kolom harus terisi');
+});
+},
+
+            saveRiwayatPegawai() {
+        //sort
+        this.riwayatPendidikan.sort(function (a, b) {
+            var keyA = a.tahun_masuk,
+                keyB = b.tahun_masuk;
+            // Compare the 2 dates
+            if (keyA < keyB) return -1;
+            if (keyA > keyB) return 1;
+            return 0;
+        });
+
+    //sort
+    this.riwayatPekerjaan.sort(function(a, b){
+                        var keyA = a.tahun_masuk,
+        keyB = b.tahun_masuk;
+    // Compare the 2 dates
+                        if(keyA < keyB) return -1;
+    if(keyA > keyB) return 1;
+    return 0;
+});
+
+this.enableEditButton();
+this.cachedRiwayatPendidikan = JSON.parse(JSON.stringify(this.riwayatPendidikan));
+this.cachedRiwayatPekerjaan = JSON.parse(JSON.stringify(this.riwayatPekerjaan));
+this.isEditRiwayat = false;
+
+console.log(this.riwayatPendidikan);
+console.log(this.riwayatPekerjaan);
+
+                axios.post('/api/riwayat/' + this.id, {
+        pendidikan: this.riwayatPendidikan,
+    pekerjaan: this.riwayatPekerjaan,
+    _method: 'put'
+})
+                .then(function (response) {
+        console.log(response);
+    window.location.href = "/pages/profile/" + this.id;
+})
+                .catch(function (error) {
+        console.log(error);
+    alert('Semua kolom harus terisi');
+});
+},
+
+            saveSertifikat() {
+        this.enableEditButton();
+    this.cachedSertifikat = JSON.parse(JSON.stringify(this.sertifikat));
+    this.isEditSertifikat = false;
+    console.log(this.sertifikat);
+
+                axios.post('/api/sertifikat/' + this.id, {
+        sertifikat: this.sertifikat,
+    _method: 'put'
+})
+                .then(function (response) {
+        console.log(response);
+    window.location.href = "/pages/profile/" + response.data.data;
+})
+                .catch(function (error) {
+        console.log(error);
+    alert('Semua kolom harus terisi');
+});
+},
+
+            saveDataKinerja() {
+        //sort
+        this.dataKinerja.sort(function (a, b) {
+            var keyA = a.tahun,
+                keyB = b.tahun;
+            // Compare the 2 dates
+            if (keyA < keyB) return -1;
+            if (keyA > keyB) return 1;
+            if (keyA == keyB) {
+                if (a.semester < b.semester) return -1;
+                else return 1;
+            }
+        });
+
+    this.enableEditButton();
+    this.cachedDataKinerja = JSON.parse(JSON.stringify(this.dataKinerja));
+    this.isEditDataKinerja = false;
+
+                if (this.isShowAllDataKinerja) {
+        this.showAllDataKinerja();
+    } else {
+        this.hideDataKinerja();
+    }
+},
+
+            saveRekomendasi() {
+        this.enableEditButton();
+    this.cachedRekomendasiTraining = JSON.parse(JSON.stringify(this.rekomendasiTraining));
+    this.cachedRekomendasiPosisi = JSON.parse(JSON.stringify(this.rekomendasiPosisi));
+    this.isEditRekomendasi = false;
+},
+
+            cancelProfilPegawai() {
+        this.enableEditButton();
+    this.pegawai = JSON.parse(JSON.stringify(this.cachedPegawai));
+    this.isEditProfile = false;
+},
+
+            cancelDataKepegawaian() {
+        this.enableEditButton();
+    this.dataKepegawaian = JSON.parse(JSON.stringify(this.cachedDataKepegawaian));
+    this.isEditKepegawaian = false;
+},
+
+            cancelRiwayatPegawai() {
+        this.enableEditButton();
+    this.riwayatPendidikan = JSON.parse(JSON.stringify(this.cachedRiwayatPendidikan));
+    this.riwayatPekerjaan = JSON.parse(JSON.stringify(this.cachedRiwayatPekerjaan));
+    this.isEditRiwayat = false;
+},
+
+            cancelSertifikat() {
+        this.enableEditButton();
+    this.sertifikat = JSON.parse(JSON.stringify(this.cachedSertifikat));
+    this.isEditSertifikat = false;
+},
+
+            cancelDataKinerja() {
+        this.enableEditButton();
+    this.dataKinerja = JSON.parse(JSON.stringify(this.cachedDataKinerja));
+    this.isEditDataKinerja = false;
+
+                if (this.isShowAllDataKinerja) {
+        this.showAllDataKinerja();
+    } else {
+        this.hideDataKinerja();
+    }
+},
+
+            cancelRekomendasi() {
+        this.enableEditButton();
+    this.rekomendasiTraining = JSON.parse(JSON.stringify(this.cachedRekomendasiTraining));
+    this.rekomendasiPosisi = JSON.parse(JSON.stringify(this.cachedRekomendasiPosisi));
+    this.isEditRekomendasi = false;
+},
+
+            FileChangeProfile(e) {
+        let files = e.target.files || e.dataTransfer.files;
+    if (!files.length)
+        return;
+
+    let reader = new FileReader();
+    let vm = this;
+                reader.onload = (e) => {
+        vm.pegawai.imageProfileUrl = e.target.result;
+    };
+    reader.readAsDataURL(files[0]);
+},
+
+            FileChangeSertifikat(e) {
+        let files = e.target.files || e.dataTransfer.files;
+    if (!files.length)
+        return;
+
+    var idx = e.currentTarget.id;
+
+    let reader = new FileReader();
+    let vm = this;
+                reader.onload = (e) => {
+        vm.sertifikat[idx].nama_file = e.target.result;
+    };
+    reader.readAsDataURL(files[0]);
+},
+}
+}
diff --git a/resources/assets/js/profile.js b/resources/assets/js/profile.js
index dba8c3d762d6835c7e4b0ef38f5096304614b144..a6af65327c3857ecb86e75b24bb731612c28d4c1 100644
--- a/resources/assets/js/profile.js
+++ b/resources/assets/js/profile.js
@@ -10,7 +10,13 @@ new Vue({
     el: '#profile-page',
     components: {
         'profil-pegawai': require('./components/ProfilPegawai.vue'),
-        'profil-pegawai-specific': require('./components/ProfilPegawaiSpecific.vue'),
+        'profil-pegawai-2': require('./components/ProfilPegawai2.vue'),
+        'profil-pegawai-3': require('./components/ProfilPegawai3.vue'),
+        'profil-pegawai-4': require('./components/ProfilPegawai4.vue'),
+        'profil-pegawai-5': require('./components/ProfilPegawai5.vue'),
+        'profil-pegawai-6': require('./components/ProfilPegawai6.vue'),
+        'profil-pegawai-7': require('./components/ProfilPegawai7.vue'),
+        //'profil-pegawai-specific': require('./components/ProfilPegawaiSpecific.vue'),
     }
 
 });
\ No newline at end of file
diff --git a/resources/views/profile/index.blade.php b/resources/views/profile/index.blade.php
index 84aa8c67a02a8f51604d5f274f6f9766c1f5dac1..556d93686ed864e0481e627cb2ea7ec4b74dc44a 100644
--- a/resources/views/profile/index.blade.php
+++ b/resources/views/profile/index.blade.php
@@ -14,6 +14,66 @@
     :training-list="{{ $training_list }}"
     :rekomendasi-posisi-temp="{{ $rekomendasi_posisi }}"
 ></profil-pegawai>
+<profil-pegawai-2
+    id="{{ Auth::user()->id}}"
+    :data-kinerja-temp="{{ $data_kinerja }}"
+    :unit-kerja="{{ $unit_kerja }}"
+    :posisi="{{ $posisi }}"
+    :kelompok-kompetensi="{{ $kelompok_kompetensi }}"
+    :rekomendasi-training-temp="{{ $rekomendasi_training }}"
+    :training-list="{{ $training_list }}"
+    :rekomendasi-posisi-temp="{{ $rekomendasi_posisi }}"
+></profil-pegawai-2>
+<profil-pegawai-3
+    id="{{ Auth::user()->id}}"
+    :data-kinerja-temp="{{ $data_kinerja }}"
+    :unit-kerja="{{ $unit_kerja }}"
+    :posisi="{{ $posisi }}"
+    :kelompok-kompetensi="{{ $kelompok_kompetensi }}"
+    :rekomendasi-training-temp="{{ $rekomendasi_training }}"
+    :training-list="{{ $training_list }}"
+    :rekomendasi-posisi-temp="{{ $rekomendasi_posisi }}"
+></profil-pegawai-3>
+<profil-pegawai-4
+    id="{{ Auth::user()->id}}"
+    :data-kinerja-temp="{{ $data_kinerja }}"
+    :unit-kerja="{{ $unit_kerja }}"
+    :posisi="{{ $posisi }}"
+    :kelompok-kompetensi="{{ $kelompok_kompetensi }}"
+    :rekomendasi-training-temp="{{ $rekomendasi_training }}"
+    :training-list="{{ $training_list }}"
+    :rekomendasi-posisi-temp="{{ $rekomendasi_posisi }}"
+></profil-pegawai-4>
+<profil-pegawai-5
+    id="{{ Auth::user()->id}}"
+    :data-kinerja-temp="{{ $data_kinerja }}"
+    :unit-kerja="{{ $unit_kerja }}"
+    :posisi="{{ $posisi }}"
+    :kelompok-kompetensi="{{ $kelompok_kompetensi }}"
+    :rekomendasi-training-temp="{{ $rekomendasi_training }}"
+    :training-list="{{ $training_list }}"
+    :rekomendasi-posisi-temp="{{ $rekomendasi_posisi }}"
+></profil-pegawai-5>
+<profil-pegawai-6
+    id="{{ Auth::user()->id}}"
+    :data-kinerja-temp="{{ $data_kinerja }}"
+    :unit-kerja="{{ $unit_kerja }}"
+    :posisi="{{ $posisi }}"
+    :kelompok-kompetensi="{{ $kelompok_kompetensi }}"
+    :rekomendasi-training-temp="{{ $rekomendasi_training }}"
+    :training-list="{{ $training_list }}"
+    :rekomendasi-posisi-temp="{{ $rekomendasi_posisi }}"
+></profil-pegawai-6>
+<profil-pegawai-7
+    id="{{ Auth::user()->id}}"
+    :data-kinerja-temp="{{ $data_kinerja }}"
+    :unit-kerja="{{ $unit_kerja }}"
+    :posisi="{{ $posisi }}"
+    :kelompok-kompetensi="{{ $kelompok_kompetensi }}"
+    :rekomendasi-training-temp="{{ $rekomendasi_training }}"
+    :training-list="{{ $training_list }}"
+    :rekomendasi-posisi-temp="{{ $rekomendasi_posisi }}"
+></profil-pegawai-7>
 
     <br>