update profile & produktivitas

This commit is contained in:
2026-06-08 09:53:46 +07:00
parent 1ca9d96779
commit af170284c8
23 changed files with 1953 additions and 414 deletions
@@ -1,6 +1,17 @@
@extends('layout.main')
@section('content')
@php
$desa = $profile?->desaKelurahan;
$alamatLengkapParts = array_filter([
$profile?->alamat,
$desa?->nama,
$desa?->kecamatan?->nama,
$desa?->kecamatan?->kabupatenkota?->nama,
$desa?->kecamatan?->kabupatenkota?->provinsi?->nama,
]);
$alamatLengkap = count($alamatLengkapParts) ? implode(', ', $alamatLengkapParts) : null;
@endphp
<div class="container-xxl flex-grow-1 container-p-y">
<!-- Header -->
<div class="row">
@@ -37,9 +48,6 @@
</li>
</ul>
</div>
<a href="javascript:void(0)" class="btn btn-primary mb-1">
<i class="icon-base ti tabler-user-check icon-xs me-2"></i>Connected
</a>
</div>
</div>
</div>
@@ -59,18 +67,8 @@
>
</li>
<li class="nav-item">
<a class="nav-link" href="pages-profile-teams.html"
><i class="icon-base ti tabler-lock icon-sm me-1_5"></i> Security</a
>
</li>
<li class="nav-item">
<a class="nav-link" href="pages-profile-projects.html"
><i class="icon-base ti tabler-layout-grid icon-sm me-1_5"></i> Projects</a
>
</li>
<li class="nav-item">
<a class="nav-link" href="pages-profile-connections.html"
><i class="icon-base ti tabler-link icon-sm me-1_5"></i> Connections</a
<a class="nav-link" href="{{ route('userProfile.security') }}"
><i class="icon-base ti tabler-lock icon-sm me-1_5"></i> Keamanan</a
>
</li>
</ul>
@@ -85,28 +83,41 @@
<!-- About User -->
<div class="card mb-6">
<div class="card-body">
<p class="card-text text-uppercase text-body-secondary small mb-0">Tentang Pengguna</p>
<div class="d-flex align-items-center justify-content-between gap-3">
<p class="card-text text-uppercase text-body-secondary small mb-0">Tentang Pengguna</p>
@if($profile)
<button
type="button"
class="btn btn-sm btn-icon btn-text-secondary rounded-pill"
data-bs-toggle="offcanvas"
data-bs-target="#editProfileOffcanvas"
aria-controls="editProfileOffcanvas"
title="Edit profil">
<i class="icon-base ti tabler-edit icon-lg"></i>
</button>
@endif
</div>
<ul class="list-unstyled my-3 py-1">
<li class="d-flex align-items-center mb-4">
<li class="d-flex align-items-start mb-4">
<i class="icon-base ti tabler-user icon-lg"></i
><span class="fw-medium mx-2">Nama Lengkap:</span> <span>{{ $profile->nama ?? 'N/A' }}</span>
</li>
<li class="d-flex align-items-center mb-4">
<li class="d-flex align-items-start mb-4">
<i class="icon-base ti tabler-circles icon-lg"></i><span class="fw-medium mx-2">Role:</span>
<span>{{ $profile->role ?? 'N/A' }}</span>
</li>
<li class="d-flex align-items-center mb-4">
<i class="icon-base ti tabler-layout-collage icon-lg"></i><span class="fw-medium mx-2">Wilayah:</span>
<span>{{ $profile->desa_kelurahan_id ?? 'N/A' }}</span>
</li>
<li class="d-flex align-items-center mb-4">
<i class="icon-base ti tabler-layout-collage icon-lg"></i><span class="fw-medium mx-2">No KTP:</span>
<li class="d-flex align-items-start mb-4">
<i class="icon-base ti tabler-id icon-lg"></i><span class="fw-medium mx-2">No KTP:</span>
<span>{{ $profile->ktp ?? 'N/A' }}</span>
</li>
<li class="d-flex align-items-center mb-4">
<i class="icon-base ti tabler-layout-collage icon-lg"></i><span class="fw-medium mx-2">No KK:</span>
<li class="d-flex align-items-start mb-4">
<i class="icon-base ti tabler-users icon-lg"></i><span class="fw-medium mx-2">No KK:</span>
<span>{{ $profile->kk ?? 'N/A' }}</span>
</li>
<li class="d-flex align-items-start mb-0">
<i class="icon-base ti tabler-map-pin icon-lg flex-shrink-0"></i><span class="fw-medium mx-2">Alamat:</span>
<span>{{ $alamatLengkap ?? 'N/A' }}</span>
</li>
</ul>
<p class="card-text text-uppercase text-body-secondary small mb-0">Kontak</p>
<ul class="list-unstyled my-3 py-1">
@@ -120,13 +131,21 @@
<span>{{ $profile->email ?? 'N/A' }}</span>
</li>
</ul>
<p class="card-text text-uppercase text-body-secondary small mb-0">Teams</p>
<p class="card-text text-uppercase text-body-secondary small mb-0">Akun</p>
<ul class="list-unstyled mb-0 mt-3 pt-1">
<li class="d-flex flex-wrap mb-4">
<span class="fw-medium me-2">Backend Developer</span><span>(126 Members)</span>
<li class="d-flex align-items-center mb-4">
<i class="icon-base ti tabler-calendar icon-lg"></i>
<span class="fw-medium mx-2">Tanggal Akun Dibuat:</span>
<span>{{ auth()->user()->created_at?->format('F j, Y') ?? 'N/A' }}</span>
</li>
<li class="d-flex flex-wrap">
<span class="fw-medium me-2">React Developer</span><span>(98 Members)</span>
<li class="d-flex align-items-center">
<i class="icon-base ti tabler-shield-check icon-lg"></i>
<span class="fw-medium mx-2">Status Akun:</span>
@if(auth()->user()->email_verified_at)
<span class="badge bg-label-success">Aktif</span>
@else
<span class="badge bg-label-warning">Pending Verifikasi</span>
@endif
</li>
</ul>
</div>
@@ -135,19 +154,23 @@
<!-- Profile Overview -->
<div class="card mb-6">
<div class="card-body">
<p class="card-text text-uppercase text-body-secondary small">Overview</p>
<p class="card-text text-uppercase text-body-secondary small">Overview Profil</p>
<ul class="list-unstyled mb-0">
<li class="d-flex align-items-center mb-4">
<i class="icon-base ti tabler-plant icon-lg"></i
><span class="fw-medium mx-2">Komoditas:</span> <span>13.5k</span>
<i class="icon-base ti tabler-chart-treemap icon-lg"></i
><span class="fw-medium mx-2">Lahan Saya:</span> <span>{{ number_format($jumlahLahan) }}</span>
</li>
<li class="d-flex align-items-center mb-4">
<i class="icon-base ti tabler-chart-treemap icon-lg"></i
><span class="fw-medium mx-2">Jumlah Lahan:</span> <span>146</span>
<i class="icon-base ti tabler-map-plus icon-lg"></i
><span class="fw-medium mx-2">Luas Lahan Saya:</span> <span>{{ number_format($totalLuasLahan, 2) }} Ha</span>
</li>
<li class="d-flex align-items-center mb-4">
<i class="icon-base ti tabler-plant icon-lg"></i
><span class="fw-medium mx-2">Tanaman Saya:</span> <span>{{ number_format($jumlahTanaman) }}</span>
</li>
<li class="d-flex align-items-center">
<i class="icon-base ti tabler-map-plus icon-lg"></i
><span class="fw-medium mx-2">Total Luas Lahan:</span> <span>897</span>
<i class="icon-base ti tabler-plant icon-lg"></i
><span class="fw-medium mx-2">Komoditas Saya:</span> <span>{{ number_format($jumlahKomoditas) }}</span>
</li>
</ul>
</div>
@@ -155,6 +178,34 @@
<!--/ Profile Overview -->
</div>
<div class="col-xl-8 col-lg-7 col-md-7">
@if(auth()->user()->role === \App\Enums\Role::SUPER_ADMIN)
<div class="card mb-6">
<div class="card-header align-items-center">
<h5 class="card-action-title mb-0">
<i class="icon-base ti tabler-alert-triangle icon-lg me-4"></i>Ringkasan Data Bermasalah
</h5>
</div>
<div class="card-body">
<ul class="list-unstyled mb-0">
@foreach($problemSummary as $problem)
<li class="d-flex align-items-center justify-content-between gap-3 mb-4">
<div class="d-flex align-items-center">
<i class="icon-base ti {{ $problem['icon'] }} icon-lg text-body-primary"></i>
<span class="fw-medium mx-2">{{ $problem['label'] }}</span>
</div>
<div class="d-flex align-items-center gap-3">
<span class="badge bg-label-secondary">{{ number_format($problem['count']) }}</span>
<a href="{{ $problem['url'] }}" class="btn btn-sm btn-icon btn-text-secondary rounded-pill">
<i class="icon-base ti tabler-arrow-right icon-md"></i>
</a>
</div>
</li>
@endforeach
</ul>
</div>
</div>
@endif
<!-- Activity Timeline -->
<div class="card card-action mb-6">
<div class="card-header align-items-center">
@@ -179,380 +230,229 @@
</div>
</div>
</div>
<div class="card-body pt-3">
<ul class="timeline mb-0">
<div class="card-body pt-3 activity-timeline-scroll">
<ul class="timeline mb-0" id="activity-timeline" data-url="{{ route('userProfile.activities') }}">
@forelse($activities as $activity)
<li class="timeline-item timeline-item-transparent">
<span class="timeline-point timeline-point-primary"></span>
<span class="timeline-point timeline-point-{{ $activity['color'] }}"></span>
<div class="timeline-event">
<div class="timeline-header mb-3">
<h6 class="mb-0">12 Invoices have been paid</h6>
<small class="text-body-secondary">12 min ago</small>
</div>
<p class="mb-2">Invoices have been paid to the company</p>
<div class="d-flex align-items-center mb-2">
<div class="badge bg-lighter rounded d-flex align-items-center">
<img src="../../assets//img/icons/misc/pdf.png" alt="img" width="15" class="me-2" />
<span class="h6 mb-0 text-body">invoices.pdf</span>
</div>
<h6 class="mb-0">{{ $activity['title'] }}</h6>
<small class="text-body-secondary">{{ $activity['time'] }}</small>
</div>
<p class="mb-2">{{ $activity['description'] }}</p>
</div>
</li>
@empty
<li class="timeline-item timeline-item-transparent">
<span class="timeline-point timeline-point-success"></span>
<span class="timeline-point timeline-point-secondary"></span>
<div class="timeline-event">
<div class="timeline-header mb-3">
<h6 class="mb-0">Client Meeting</h6>
<small class="text-body-secondary">45 min ago</small>
</div>
<p class="mb-2">Project meeting with john @10:15am</p>
<div class="d-flex justify-content-between flex-wrap gap-2 mb-2">
<div class="d-flex flex-wrap align-items-center mb-50">
<div class="avatar avatar-sm me-2">
<img src="../../assets/img/avatars/1.png" alt="Avatar" class="rounded-circle" />
</div>
<div>
<p class="mb-0 small fw-medium">Lester McCarthy (Client)</p>
<small>CEO of Pixinvent</small>
</div>
</div>
<h6 class="mb-0">Belum ada aktivitas</h6>
<small class="text-body-secondary">-</small>
</div>
<p class="mb-2">Aktivitas akan muncul setelah data dibuat, diubah, atau dihapus.</p>
</div>
</li>
<li class="timeline-item timeline-item-transparent">
<span class="timeline-point timeline-point-info"></span>
<div class="timeline-event">
<div class="timeline-header mb-3">
<h6 class="mb-0">Create a new project for client</h6>
<small class="text-body-secondary">2 Day Ago</small>
</div>
<p class="mb-2">6 team members in a project</p>
<ul class="list-group list-group-flush">
<li
class="list-group-item d-flex justify-content-between align-items-center flex-wrap border-top-0 p-0">
<div class="d-flex flex-wrap align-items-center">
<ul class="list-unstyled users-list d-flex align-items-center avatar-group m-0 me-2">
<li
data-bs-toggle="tooltip"
data-popup="tooltip-custom"
data-bs-placement="top"
title="Vinnie Mostowy"
class="avatar pull-up">
<img class="rounded-circle" src="../../assets/img/avatars/1.png" alt="Avatar" />
</li>
<li
data-bs-toggle="tooltip"
data-popup="tooltip-custom"
data-bs-placement="top"
title="Allen Rieske"
class="avatar pull-up">
<img class="rounded-circle" src="../../assets/img/avatars/4.png" alt="Avatar" />
</li>
<li
data-bs-toggle="tooltip"
data-popup="tooltip-custom"
data-bs-placement="top"
title="Julee Rossignol"
class="avatar pull-up">
<img class="rounded-circle" src="../../assets/img/avatars/2.png" alt="Avatar" />
</li>
<li class="avatar">
<span
class="avatar-initial rounded-circle pull-up"
data-bs-toggle="tooltip"
data-bs-placement="bottom"
title="3 more"
>+3</span
>
</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
@endforelse
</ul>
</div>
</div>
<!--/ Activity Timeline -->
<div class="row">
<!-- Connections -->
<div class="col-lg-12 col-xl-6">
<div class="card card-action mb-6">
<div class="card-header align-items-center">
<h5 class="card-action-title mb-0">Connections</h5>
<div class="card-action-element">
<div class="dropdown">
<button
type="button"
class="btn btn-icon btn-text-secondary rounded-pill dropdown-toggle hide-arrow p-0 text-body-secondary"
data-bs-toggle="dropdown"
aria-expanded="false">
<i class="icon-base ti tabler-dots-vertical icon-md text-body-secondary"></i>
</button>
<ul class="dropdown-menu dropdown-menu-end">
<li><a class="dropdown-item" href="javascript:void(0);">Share connections</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Suggest edits</a></li>
<li>
<hr class="dropdown-divider" />
</li>
<li><a class="dropdown-item" href="javascript:void(0);">Report bug</a></li>
</ul>
</div>
</div>
</div>
<div class="card-body">
<ul class="list-unstyled mb-0">
<li class="mb-4">
<div class="d-flex align-items-center">
<div class="d-flex align-items-center">
<div class="avatar me-2">
<img src="../../assets/img/avatars/2.png" alt="Avatar" class="rounded-circle" />
</div>
<div class="me-2">
<h6 class="mb-0">Cecilia Payne</h6>
<small>45 Connections</small>
</div>
</div>
<div class="ms-auto">
<button class="btn btn-label-primary btn-icon">
<i class="icon-base ti tabler-user-check icon-22px"></i>
</button>
</div>
</div>
</li>
<li class="mb-4">
<div class="d-flex align-items-center">
<div class="d-flex align-items-center">
<div class="avatar me-2">
<img src="../../assets/img/avatars/3.png" alt="Avatar" class="rounded-circle" />
</div>
<div class="me-2">
<h6 class="mb-0">Curtis Fletcher</h6>
<small>1.32k Connections</small>
</div>
</div>
<div class="ms-auto">
<button class="btn btn-primary btn-icon">
<i class="icon-base ti tabler-user-x icon-22px"></i>
</button>
</div>
</div>
</li>
<li class="mb-4">
<div class="d-flex align-items-center">
<div class="d-flex align-items-center">
<div class="avatar me-2">
<img src="../../assets/img/avatars/10.png" alt="Avatar" class="rounded-circle" />
</div>
<div class="me-2">
<h6 class="mb-0">Alice Stone</h6>
<small>125 Connections</small>
</div>
</div>
<div class="ms-auto">
<button class="btn btn-primary btn-icon">
<i class="icon-base ti tabler-user-x icon-22px"></i>
</button>
</div>
</div>
</li>
<li class="mb-4">
<div class="d-flex align-items-center">
<div class="d-flex align-items-center">
<div class="avatar me-2">
<img src="../../assets/img/avatars/7.png" alt="Avatar" class="rounded-circle" />
</div>
<div class="me-2">
<h6 class="mb-0">Darrell Barnes</h6>
<small>456 Connections</small>
</div>
</div>
<div class="ms-auto">
<button class="btn btn-label-primary btn-icon">
<i class="icon-base ti tabler-user-check icon-22px"></i>
</button>
</div>
</div>
</li>
<li class="mb-6">
<div class="d-flex align-items-center">
<div class="d-flex align-items-center">
<div class="avatar me-2">
<img src="../../assets/img/avatars/12.png" alt="Avatar" class="rounded-circle" />
</div>
<div class="me-2">
<h6 class="mb-0">Eugenia Moore</h6>
<small>1.2k Connections</small>
</div>
</div>
<div class="ms-auto">
<button class="btn btn-label-primary btn-icon">
<i class="icon-base ti tabler-user-check icon-22px"></i>
</button>
</div>
</div>
</li>
<li class="text-center">
<a href="javascript:;">View all connections</a>
</li>
</ul>
</div>
</div>
</div>
<!--/ Connections -->
<!-- Teams -->
<div class="col-lg-12 col-xl-6">
<div class="card card-action mb-6">
<div class="card-header align-items-center">
<h5 class="card-action-title mb-0">Teams</h5>
<div class="card-action-element">
<div class="dropdown">
<button
type="button"
class="btn btn-icon btn-text-secondary dropdown-toggle hide-arrow p-0"
data-bs-toggle="dropdown"
aria-expanded="false">
<i class="icon-base ti tabler-dots-vertical icon-md text-body-secondary"></i>
</button>
<ul class="dropdown-menu dropdown-menu-end">
<li><a class="dropdown-item" href="javascript:void(0);">Share teams</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Suggest edits</a></li>
<li>
<hr class="dropdown-divider" />
</li>
<li><a class="dropdown-item" href="javascript:void(0);">Report bug</a></li>
</ul>
</div>
</div>
</div>
<div class="card-body">
<ul class="list-unstyled mb-0">
<li class="mb-4">
<div class="d-flex align-items-center">
<div class="d-flex align-items-center">
<div class="avatar me-2">
<img
src="../../assets/img/icons/brands/react-label.png"
alt="Avatar"
class="rounded-circle" />
</div>
<div class="me-2">
<h6 class="mb-0">React Developers</h6>
<small>72 Members</small>
</div>
</div>
<div class="ms-auto">
<a href="javascript:;"><span class="badge bg-label-danger">Developer</span></a>
</div>
</div>
</li>
<li class="mb-4">
<div class="d-flex align-items-center">
<div class="d-flex align-items-center">
<div class="avatar me-2">
<img
src="../../assets/img/icons/brands/support-label.png"
alt="Avatar"
class="rounded-circle" />
</div>
<div class="me-2">
<h6 class="mb-0">Support Team</h6>
<small>122 Members</small>
</div>
</div>
<div class="ms-auto">
<a href="javascript:;"><span class="badge bg-label-primary">Support</span></a>
</div>
</div>
</li>
<li class="mb-4">
<div class="d-flex align-items-center">
<div class="d-flex align-items-center">
<div class="avatar me-2">
<img
src="../../assets/img/icons/brands/figma-label.png"
alt="Avatar"
class="rounded-circle" />
</div>
<div class="me-2">
<h6 class="mb-0">UI Designers</h6>
<small>7 Members</small>
</div>
</div>
<div class="ms-auto">
<a href="javascript:;"><span class="badge bg-label-info">Designer</span></a>
</div>
</div>
</li>
<li class="mb-4">
<div class="d-flex align-items-center">
<div class="d-flex align-items-center">
<div class="avatar me-2">
<img
src="../../assets/img/icons/brands/vue-label.png"
alt="Avatar"
class="rounded-circle" />
</div>
<div class="me-2">
<h6 class="mb-0">Vue.js Developers</h6>
<small>289 Members</small>
</div>
</div>
<div class="ms-auto">
<a href="javascript:;"><span class="badge bg-label-danger">Developer</span></a>
</div>
</div>
</li>
<li class="mb-6">
<div class="d-flex align-items-center">
<div class="d-flex align-items-center">
<div class="avatar me-2">
<img
src="../../assets/img/icons/brands/twitter-label.png"
alt="Avatar"
class="rounded-circle" />
</div>
<div class="me-w">
<h6 class="mb-0">Digital Marketing</h6>
<small>24 Members</small>
</div>
</div>
<div class="ms-auto">
<a href="javascript:;"><span class="badge bg-label-secondary">Marketing</span></a>
</div>
</div>
</li>
<li class="text-center">
<a href="javascript:;">View all teams</a>
</li>
</ul>
</div>
</div>
</div>
<!--/ Teams -->
</div>
<!-- Projects table -->
<!-- <div class="card mb-6">
<div class="mb-4">
<table class="table datatable-project">
<thead class="border-top">
<tr>
<th></th>
<th></th>
<th>Project</th>
<th>Leader</th>
<th>Team</th>
<th class="w-px-200">Progress</th>
<th>Action</th>
</tr>
</thead>
</table>
</div>
</div> -->
<!--/ Projects table -->
</div>
</div>
<!--/ User Profile Content -->
@if($profile)
<div
class="offcanvas offcanvas-end"
tabindex="-1"
id="editProfileOffcanvas"
aria-labelledby="editProfileOffcanvasLabel">
<div class="offcanvas-header">
<h5 id="editProfileOffcanvasLabel" class="offcanvas-title">Edit Profil</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<form id="profileQuickEditForm" action="{{ route('profile.update', $profile->id) }}" method="POST">
@csrf
@method('PUT')
<input type="hidden" name="desa_kelurahan_id" value="{{ $profile->desa_kelurahan_id }}">
<div class="mb-4">
<label class="form-label" for="quick-profile-nama">Nama Lengkap</label>
<input type="text" class="form-control" id="quick-profile-nama" name="nama" value="{{ $profile->nama }}" required>
</div>
<div class="mb-4">
<label class="form-label" for="quick-profile-role">Role</label>
<input type="text" class="form-control" id="quick-profile-role" value="{{ $profile->role ?? '-' }}" disabled>
</div>
<div class="mb-4">
<label class="form-label" for="quick-profile-email">Email</label>
<input type="email" class="form-control" id="quick-profile-email" name="email" value="{{ $profile->email }}" required>
</div>
<div class="mb-4">
<label class="form-label" for="quick-profile-telepon">Telepon</label>
<input type="text" class="form-control" id="quick-profile-telepon" name="telepon" value="{{ $profile->telepon }}" maxlength="13" required>
</div>
<div class="mb-4">
<label class="form-label" for="quick-profile-ktp">No KTP</label>
<input type="text" class="form-control" id="quick-profile-ktp" name="ktp" value="{{ $profile->ktp }}" maxlength="16">
</div>
<div class="mb-4">
<label class="form-label" for="quick-profile-kk">No KK</label>
<input type="text" class="form-control" id="quick-profile-kk" name="kk" value="{{ $profile->kk }}" maxlength="16">
</div>
<div class="mb-4">
<label class="form-label" for="quick-profile-alamat">Alamat</label>
<textarea class="form-control" id="quick-profile-alamat" name="alamat" rows="4">{{ $profile->alamat }}</textarea>
<div class="form-text">Wilayah desa sampai provinsi tetap mengikuti data wilayah profil.</div>
</div>
<div class="d-flex justify-content-end gap-2">
<button type="button" class="btn btn-label-secondary" data-bs-dismiss="offcanvas">Batal</button>
<button type="submit" class="btn btn-primary">
<i class="icon-base ti tabler-device-floppy icon-xs me-2"></i>Simpan
</button>
</div>
</form>
</div>
</div>
@endif
</div>
@endsection
@endsection
@push('scripts-head')
<style>
.activity-timeline-scroll {
max-height: 500px;
overflow-y: auto;
padding-right: 1rem;
}
</style>
@endpush
@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
const timeline = document.getElementById('activity-timeline');
const profileQuickEditForm = document.getElementById('profileQuickEditForm');
if (profileQuickEditForm) {
profileQuickEditForm.addEventListener('submit', function (event) {
event.preventDefault();
fetch(profileQuickEditForm.action, {
method: 'POST',
body: new FormData(profileQuickEditForm),
headers: {
Accept: 'application/json'
}
})
.then(function (response) {
return response.json().then(function (data) {
return { ok: response.ok, data: data };
});
})
.then(function (result) {
if (!result.ok) {
const errors = result.data.errors ? Object.values(result.data.errors).flat().join('<br>') : result.data.message;
if (window.Swal) {
Swal.fire({ icon: 'error', title: 'Gagal!', html: errors || 'Data belum berhasil disimpan.' });
} else {
alert(errors || 'Data belum berhasil disimpan.');
}
return;
}
if (window.Swal) {
Swal.fire({
icon: 'success',
title: 'Berhasil!',
text: result.data.message || 'Profil berhasil diperbarui.',
timer: 1500,
showConfirmButton: false
}).then(function () {
window.location.reload();
});
} else {
window.location.reload();
}
})
.catch(function () {
if (window.Swal) {
Swal.fire({ icon: 'error', title: 'Gagal!', text: 'Koneksi bermasalah atau terjadi kesalahan server.' });
} else {
alert('Koneksi bermasalah atau terjadi kesalahan server.');
}
});
});
}
if (!timeline) {
return;
}
const escapeHtml = function (value) {
return String(value ?? '')
.replace(/&/g, '&amp;')
.replace(/</g, '&lt;')
.replace(/>/g, '&gt;')
.replace(/"/g, '&quot;')
.replace(/'/g, '&#039;');
};
const renderActivities = function (activities) {
if (!activities.length) {
timeline.innerHTML = `
<li class="timeline-item timeline-item-transparent">
<span class="timeline-point timeline-point-secondary"></span>
<div class="timeline-event">
<div class="timeline-header mb-3">
<h6 class="mb-0">Belum ada aktivitas</h6>
<small class="text-body-secondary">-</small>
</div>
<p class="mb-2">Aktivitas akan muncul setelah data dibuat, diubah, atau dihapus.</p>
</div>
</li>
`;
return;
}
timeline.innerHTML = activities.map(function (activity) {
return `
<li class="timeline-item timeline-item-transparent">
<span class="timeline-point timeline-point-${escapeHtml(activity.color)}"></span>
<div class="timeline-event">
<div class="timeline-header mb-3">
<h6 class="mb-0">${escapeHtml(activity.title)}</h6>
<small class="text-body-secondary">${escapeHtml(activity.time)}</small>
</div>
<p class="mb-2">${escapeHtml(activity.description)}</p>
</div>
</li>
`;
}).join('');
};
const loadActivities = function () {
fetch(timeline.dataset.url, {
headers: {
Accept: 'application/json'
}
})
.then(function (response) {
return response.ok ? response.json() : null;
})
.then(function (data) {
if (data && Array.isArray(data.activities)) {
renderActivities(data.activities);
}
})
.catch(function () {});
};
setInterval(loadActivities, 15000);
});
</script>
@endpush
@@ -0,0 +1,147 @@
@extends('layout.main')
@section('content')
<div class="container-xxl flex-grow-1 container-p-y">
<div class="row">
<div class="col-12">
<div class="card mb-6">
<div class="user-profile-header d-flex flex-column flex-lg-row text-sm-start text-center mb-5">
<div class="flex-grow-1 mt-3 mt-lg-5">
<div class="d-flex align-items-md-end align-items-sm-start align-items-center justify-content-md-between justify-content-start mx-5 flex-md-row flex-column gap-4">
<div class="user-profile-info">
<h4 class="mb-2 mt-lg-6">{{ $profile->nama ?? 'Guest' }}</h4>
<ul class="list-inline mb-0 d-flex align-items-center flex-wrap justify-content-sm-start justify-content-center gap-4 my-2">
<li class="list-inline-item d-flex gap-2 align-items-center">
<i class="icon-base ti tabler-circles icon-lg"></i>
<span class="fw-medium">{{ $profile->role ?? 'N/A' }}</span>
</li>
<li class="list-inline-item d-flex gap-2 align-items-center">
<i class="icon-base ti tabler-map-pin icon-lg"></i>
<span class="fw-medium">{{ $profile->alamat ?? 'N/A' }}</span>
</li>
<li class="list-inline-item d-flex gap-2 align-items-center">
<i class="icon-base ti tabler-calendar icon-lg"></i>
<span class="fw-medium">{{ $profile?->created_at?->format('F j, Y') ?? 'N/A' }}</span>
</li>
</ul>
</div>
<a href="javascript:void(0)" class="btn btn-primary mb-1">
<i class="icon-base ti tabler-shield-lock icon-xs me-2"></i>Keamanan
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="nav-align-top">
<ul class="nav nav-pills flex-column flex-sm-row mb-6 gap-sm-0 gap-2">
<li class="nav-item">
<a class="nav-link" href="{{ route('userProfile.index') }}">
<i class="icon-base ti tabler-user-check icon-sm me-1_5"></i> Profile
</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="{{ route('userProfile.security') }}">
<i class="icon-base ti tabler-lock icon-sm me-1_5"></i> Keamanan
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="card mb-6">
<div class="card-header">
<h5 class="mb-0">
<i class="icon-base ti tabler-shield-lock icon-lg me-2"></i>Keamanan Akun
</h5>
</div>
<div class="card-body">
@if(session('security_success'))
<div class="alert alert-success mb-4">{{ session('security_success') }}</div>
@endif
<div class="row g-6">
<div class="col-lg-6">
<p class="card-text text-uppercase text-body-secondary small mb-3">Ubah Password</p>
<form action="{{ route('userProfile.password.update') }}" method="POST">
@csrf
@method('PATCH')
<div class="mb-4">
<label class="form-label" for="current_password">Password Saat Ini</label>
<input type="password" class="form-control @error('current_password') is-invalid @enderror" id="current_password" name="current_password" autocomplete="current-password" />
@error('current_password')<div class="invalid-feedback">{{ $message }}</div>@enderror
</div>
<div class="mb-4">
<label class="form-label" for="password">Password Baru</label>
<input type="password" class="form-control @error('password') is-invalid @enderror" id="password" name="password" autocomplete="new-password" />
@error('password')<div class="invalid-feedback">{{ $message }}</div>@enderror
</div>
<div class="mb-4">
<label class="form-label" for="password_confirmation">Konfirmasi Password Baru</label>
<input type="password" class="form-control" id="password_confirmation" name="password_confirmation" autocomplete="new-password" />
</div>
<button type="submit" class="btn btn-primary">
<i class="icon-base ti tabler-key icon-xs me-2"></i>Ubah Password
</button>
</form>
</div>
<div class="col-lg-6">
<p class="card-text text-uppercase text-body-secondary small mb-3">Status Verifikasi</p>
<ul class="list-unstyled mb-5">
<li class="d-flex align-items-center mb-3">
<i class="icon-base ti tabler-mail-check icon-lg"></i>
<span class="fw-medium mx-2">Email:</span>
<span>{{ auth()->user()->email }}</span>
</li>
<li class="d-flex align-items-center">
<i class="icon-base ti tabler-shield-check icon-lg"></i>
<span class="fw-medium mx-2">Status:</span>
@if(auth()->user()->email_verified_at)
<span class="badge bg-label-success">Terverifikasi</span>
@else
<span class="badge bg-label-warning">Belum Terverifikasi</span>
@endif
</li>
</ul>
<div class="d-flex align-items-center justify-content-between gap-3 mb-3">
<p class="card-text text-uppercase text-body-secondary small mb-0">Riwayat Login</p>
<form action="{{ route('userProfile.logoutDevices') }}" method="POST">
@csrf
<button type="submit" class="btn btn-sm btn-label-danger">
<i class="icon-base ti tabler-logout icon-xs me-1"></i>Logout Semua Perangkat
</button>
</form>
</div>
<ul class="list-unstyled mb-0">
@forelse($loginSessions as $loginSession)
<li class="d-flex align-items-start mb-4">
<i class="icon-base ti tabler-device-desktop icon-lg mt-1"></i>
<div class="ms-2">
<div class="fw-medium">
{{ $loginSession->ip_address ?? 'IP tidak tersedia' }}
@if($loginSession->is_current)
<span class="badge bg-label-primary ms-1">Saat Ini</span>
@endif
</div>
<small class="text-body-secondary d-block">{{ $loginSession->last_activity->diffForHumans() }}</small>
<small class="text-body-secondary d-block text-truncate" style="max-width: 360px;">{{ $loginSession->user_agent ?? 'Perangkat tidak tersedia' }}</small>
</div>
</li>
@empty
<li class="text-body-secondary">Riwayat login belum tersedia.</li>
@endforelse
</ul>
</div>
</div>
</div>
</div>
</div>
@endsection