312 lines
11 KiB
PHP
312 lines
11 KiB
PHP
@extends('layouts.admin')
|
|
|
|
@section('title', 'Manajemen Akun')
|
|
|
|
@section('content')
|
|
<style>
|
|
.page-header-custom {
|
|
background: white;
|
|
color: #1f2937;
|
|
border-radius: 16px;
|
|
padding: 22px 24px;
|
|
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.05);
|
|
margin-bottom: 24px;
|
|
}
|
|
.page-header-custom h1 {
|
|
font-size: 1.5rem;
|
|
font-weight: 700;
|
|
margin-bottom: 0;
|
|
}
|
|
.page-header-custom p {
|
|
color: #6b7280;
|
|
margin-bottom: 0;
|
|
}
|
|
.page-header-actions .btn {
|
|
min-width: 140px;
|
|
height: 40px;
|
|
border-radius: 8px;
|
|
font-weight: 600;
|
|
}
|
|
.page-header-actions .btn + .btn {
|
|
margin-left: 10px;
|
|
}
|
|
.card-custom {
|
|
border-radius: 16px;
|
|
border: 1px solid #e5e7eb;
|
|
box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05);
|
|
}
|
|
.card-custom .card-header {
|
|
background: #ff8a00;
|
|
color: white;
|
|
border-radius: 16px 16px 0 0;
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.15);
|
|
padding: 18px 24px;
|
|
}
|
|
.card-custom .card-header h5 {
|
|
margin: 0;
|
|
font-size: 1rem;
|
|
font-weight: 700;
|
|
}
|
|
.table thead th {
|
|
border-bottom: 0;
|
|
background: #ff8a00;
|
|
color: white;
|
|
font-weight: 700;
|
|
vertical-align: middle;
|
|
padding: 14px 12px;
|
|
}
|
|
.table tbody tr {
|
|
background: white;
|
|
}
|
|
.table tbody tr + tr {
|
|
border-top: 1px solid #e5e7eb;
|
|
}
|
|
.table tbody tr:hover {
|
|
background: #eff6ff;
|
|
}
|
|
.badge-role-admin {
|
|
background: #dc3545;
|
|
color: white;
|
|
font-weight: 700;
|
|
border-radius: 999px;
|
|
padding: 0.35rem 0.85rem;
|
|
text-transform: uppercase;
|
|
font-size: 0.75rem;
|
|
}
|
|
.badge-role-karyawan {
|
|
background: #0dcaf0;
|
|
color: white;
|
|
font-weight: 700;
|
|
border-radius: 999px;
|
|
padding: 0.35rem 0.85rem;
|
|
text-transform: uppercase;
|
|
font-size: 0.75rem;
|
|
}
|
|
.badge-branch {
|
|
background: #e7f1ff;
|
|
color: #0d6efd;
|
|
font-weight: 700;
|
|
border-radius: 999px;
|
|
padding: 0.35rem 0.85rem;
|
|
font-size: 0.75rem;
|
|
}
|
|
.action-btn {
|
|
width: 38px;
|
|
height: 38px;
|
|
padding: 0;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.btn-icon {
|
|
width: 38px;
|
|
height: 38px;
|
|
padding: 0;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.btn-add {
|
|
background: #0d6efd;
|
|
color: white;
|
|
border: 1px solid #0d6efd;
|
|
}
|
|
.btn-add:hover {
|
|
background: #0b5ed7;
|
|
border-color: #0b5ed7;
|
|
color: white;
|
|
}
|
|
.btn-secondary-white {
|
|
background: white;
|
|
color: #0d6efd;
|
|
border: 1px solid #0d6efd;
|
|
}
|
|
.btn-secondary-white:hover {
|
|
background: #ffe8cc;
|
|
color: #ff8a00;
|
|
}
|
|
.bg-orange {
|
|
background-color: #ff8a00 !important;
|
|
}
|
|
.table td, .table th {
|
|
padding: 14px 12px;
|
|
vertical-align: middle;
|
|
}
|
|
.alert {
|
|
border-radius: 12px;
|
|
}
|
|
</style>
|
|
|
|
<div class="container-fluid px-4">
|
|
<div class="page-header-custom d-flex justify-content-between align-items-center flex-column flex-md-row">
|
|
<div>
|
|
<h1><i class="fas fa-users-cog mr-2"></i> Manajemen Akun</h1>
|
|
</div>
|
|
<div class="page-header-actions d-flex align-items-center mt-3 mt-md-0">
|
|
<a href="/branches" class="btn btn-secondary-white"><i class="fas fa-store mr-1"></i> Kelola Cabang</a>
|
|
<button class="btn btn-add" data-toggle="modal" data-target="#accountModal"><i class="fas fa-plus mr-1"></i> Tambah Akun</button>
|
|
</div>
|
|
</div>
|
|
|
|
@if(session('success'))
|
|
<div class="alert alert-success alert-dismissible fade show" role="alert">
|
|
{{ session('success') }}
|
|
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
@endif
|
|
|
|
@if(session('error'))
|
|
<div class="alert alert-danger alert-dismissible fade show" role="alert">
|
|
{{ session('error') }}
|
|
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
@endif
|
|
|
|
@if($errors->any())
|
|
<div class="alert alert-danger alert-dismissible fade show" role="alert">
|
|
<ul class="mb-0">
|
|
@foreach($errors->all() as $error)
|
|
<li>{{ $error }}</li>
|
|
@endforeach
|
|
</ul>
|
|
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
@endif
|
|
|
|
<div class="card card-custom">
|
|
<div class="card-header">
|
|
<h5>Daftar Akun Karyawan</h5>
|
|
</div>
|
|
<div class="card-body p-0">
|
|
<div class="table-responsive">
|
|
<table class="table table-hover table-borderless align-middle mb-0">
|
|
<thead>
|
|
<tr>
|
|
<th style="width: 5%;">#</th>
|
|
<th>Nama Lengkap</th>
|
|
<th>Username / Email</th>
|
|
<th>Role</th>
|
|
<th>Cabang</th>
|
|
<th class="text-center" style="width: 120px;">Aksi</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@foreach($accounts as $account)
|
|
<tr>
|
|
<td>{{ $loop->iteration }}</td>
|
|
<td>{{ $account->name }}</td>
|
|
<td>{{ $account->email }}</td>
|
|
<td>
|
|
<span class="badge {{ $account->role === 'admin' ? 'badge-role-admin' : 'badge-role-karyawan' }}">{{ strtoupper($account->role) }}</span>
|
|
</td>
|
|
<td><span class="badge badge-branch">{{ $account->branch ?? 'Tidak ditetapkan' }}</span></td>
|
|
<td class="text-center">
|
|
@if($account->role !== 'admin')
|
|
<button type="button" class="btn btn-warning btn-icon mr-1 edit-account-button" data-account='@json($account)' title="Edit akun"><i class="fas fa-edit"></i></button>
|
|
<form action="/manajemen-akun/{{ $account->id }}" method="POST" class="d-inline">
|
|
@csrf
|
|
@method('DELETE')
|
|
<button type="submit" class="btn btn-danger btn-icon" onclick="return confirm('Hapus akun karyawan ini?')" title="Hapus akun"><i class="fas fa-trash"></i></button>
|
|
</form>
|
|
@else
|
|
<span class="text-muted">Tidak dapat dihapus</span>
|
|
@endif
|
|
</td>
|
|
</tr>
|
|
@endforeach
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modal Tambah / Edit Akun -->
|
|
<div class="modal fade" id="accountModal" tabindex="-1" aria-labelledby="accountModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
|
|
<div class="modal-content rounded-20 border-0 shadow-lg">
|
|
<div class="modal-header bg-orange text-white border-0">
|
|
<h5 class="modal-title" id="accountModalLabel">Tambah Akun Karyawan</h5>
|
|
<button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<form id="accountForm" action="/manajemen-akun" method="POST">
|
|
@csrf
|
|
<input type="hidden" name="_method" id="accountMethod" value="POST">
|
|
<div class="modal-body">
|
|
<div class="form-group">
|
|
<label>Nama Lengkap</label>
|
|
<input type="text" name="name" id="accountName" class="form-control" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Email</label>
|
|
<input type="email" name="email" id="accountEmail" class="form-control" required>
|
|
</div>
|
|
<div class="form-row">
|
|
<div class="form-group col-md-6">
|
|
<label>Password</label>
|
|
<input type="password" name="password" id="accountPassword" class="form-control" required>
|
|
</div>
|
|
<div class="form-group col-md-6">
|
|
<label>Cabang</label>
|
|
<select name="branch" id="accountBranch" class="form-control" required>
|
|
<option value="">Pilih Cabang</option>
|
|
@foreach($allBranches as $branch)
|
|
<option value="{{ $branch->name }}">{{ $branch->name }}</option>
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer border-0">
|
|
<button type="button" class="btn btn-light" data-dismiss="modal">Batal</button>
|
|
<button type="submit" class="btn btn-primary" id="accountSubmit">Simpan Akun</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
@push('scripts')
|
|
<script>
|
|
function openEditModal(account) {
|
|
$('#accountModal').modal('show');
|
|
$('#accountModalLabel').text('Edit Akun Karyawan');
|
|
$('#accountSubmit').text('Perbarui Akun');
|
|
$('#accountName').val(account.name);
|
|
$('#accountEmail').val(account.email);
|
|
$('#accountPassword').prop('required', false).val('');
|
|
$('#accountBranch').val(account.branch || '');
|
|
$('#accountForm').attr('action', '/manajemen-akun/' + account.id);
|
|
$('#accountMethod').val('PUT');
|
|
}
|
|
|
|
$('.edit-account-button').on('click', function () {
|
|
var accountData = $(this).attr('data-account');
|
|
var account = accountData ? JSON.parse(accountData) : null;
|
|
if (account) {
|
|
openEditModal(account);
|
|
}
|
|
});
|
|
|
|
$('#accountModal').on('hidden.bs.modal', function () {
|
|
$('#accountModalLabel').text('Tambah Akun Karyawan');
|
|
$('#accountSubmit').text('Simpan Akun');
|
|
$('#accountForm').attr('action', '/manajemen-akun');
|
|
$('#accountMethod').val('POST');
|
|
$('#accountName').val('');
|
|
$('#accountEmail').val('');
|
|
$('#accountPassword').prop('required', true).val('');
|
|
$('#accountBranch').val('');
|
|
});
|
|
</script>
|
|
@endpush
|
|
@endsection
|