327 lines
9.9 KiB
PHP
327 lines
9.9 KiB
PHP
@extends('layout.main')
|
|
@section('content')
|
|
<div class="main-content">
|
|
<section class="section">
|
|
<div class="col-xl-12">
|
|
<div class="card">
|
|
<div class="card-header pb-0">
|
|
<div class="d-flex justify-content-between">
|
|
<h4 class="card-title mg-b-2 mt-2">Tabel Manajemen Petugas</h4>
|
|
<i class="mdi mdi-dots-horizontal text-gray"></i>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="table-responsive">
|
|
<div class="d-flex justify-content-end mb-3" style="margin-top: -17px;">
|
|
<div class="col-sm-6 col-md-4 col-xl-3 mg-t-20">
|
|
<a class="modal-effect btn btn-success btn-block mb-3"
|
|
data-bs-effect="effect-flip-Vertical" data-bs-toggle="modal"
|
|
href="#modal-tambah-petugas"><i class='bx bxs-add-to-queue'></i>
|
|
Tambah Data </a>
|
|
</div>
|
|
</div>
|
|
<table id="table-petugas" class="display">
|
|
<thead>
|
|
<tr>
|
|
<th>NO</th>
|
|
<th>Username</th>
|
|
<th>Email</th>
|
|
<th>Alamat</th>
|
|
<th>No.Telepon</th>
|
|
<th>Aksi</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
@push('css')
|
|
<style>
|
|
.card {
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-width: 0;
|
|
word-wrap: break-word;
|
|
background: #fff;
|
|
background-clip: border-box;
|
|
border-radius: 10px;
|
|
border: 1px solid #fff;
|
|
margin-block-end: 1.3rem;
|
|
box-shadow: 6px 11px 41px -28px #796eb1;
|
|
-webkit-box-shadow: 6px 11px 41px -28px #796eb1;
|
|
}
|
|
|
|
.card>hr {
|
|
margin-inline-end: 0;
|
|
margin-inline-start: 0;
|
|
}
|
|
|
|
.card>.list-group:first-child .list-group-item:first-child {
|
|
border-start-start-radius: 3px;
|
|
border-start-end-radius: 3px;
|
|
}
|
|
|
|
.card>.list-group:last-child .list-group-item:last-child {
|
|
border-end-end-radius: 3px;
|
|
border-end-start-radius: 3px;
|
|
}
|
|
|
|
.card-body {
|
|
flex: 1 1 auto;
|
|
padding: 1.25rem;
|
|
}
|
|
|
|
.card-title {
|
|
margin-block-end: 0;
|
|
}
|
|
|
|
.card-subtitle {
|
|
margin-block-start: -0.375rem;
|
|
margin-block-end: 0;
|
|
}
|
|
|
|
.card-text:last-child {
|
|
margin-block-end: 0;
|
|
}
|
|
|
|
.card-link:hover {
|
|
text-decoration: none;
|
|
}
|
|
|
|
.card-link+.card-link {
|
|
margin-inline-start: 1.25rem;
|
|
}
|
|
|
|
.card-header {
|
|
padding: 0.75rem 1.25rem;
|
|
margin-block-end: 0;
|
|
background-color: white;
|
|
border-block-end: 1px solid #ededf5;
|
|
}
|
|
|
|
.card-header:first-child {
|
|
border-radius: 2px 2px 0 0;
|
|
}
|
|
|
|
.card-header+.list-group .list-group-item:first-child {
|
|
border-block-start: 0;
|
|
}
|
|
|
|
.card-footer {
|
|
padding: 0.75rem 1.25rem;
|
|
background-color: transparent;
|
|
border-block-start: 1px solid #ededf5;
|
|
border-end-start-radius: 6px !important;
|
|
border-end-end-radius: 6px !important;
|
|
}
|
|
|
|
.card-footer:last-child {
|
|
border-radius: 0 0 2px 2px;
|
|
}
|
|
|
|
.card-header-tabs {
|
|
margin-inline-end: -0.625rem;
|
|
margin-block-end: -0.75rem;
|
|
margin-inline-start: -0.625rem;
|
|
border-block-end: 0;
|
|
}
|
|
|
|
.card-header-pills {
|
|
margin-inline-end: -0.625rem;
|
|
margin-inline-start: -0.625rem;
|
|
}
|
|
|
|
.card-img-overlay {
|
|
position: absolute;
|
|
top: 0;
|
|
inset-inline-end: 0;
|
|
bottom: 0;
|
|
inset-inline-start: 0;
|
|
padding: 1.25rem;
|
|
}
|
|
|
|
.card-img {
|
|
width: 100%;
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.card-img-top {
|
|
width: 100%;
|
|
border-start-start-radius: 6px;
|
|
border-start-end-radius: 6px;
|
|
}
|
|
|
|
.card-img-bottom {
|
|
width: 100%;
|
|
border-end-end-radius: 5px;
|
|
border-end-start-radius: 5px;
|
|
}
|
|
|
|
.card-deck {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.card-deck .card {
|
|
margin-block-end: 15px;
|
|
}
|
|
|
|
@media (min-width: 576px) {
|
|
.card-deck {
|
|
flex-flow: row wrap;
|
|
margin-inline-end: -15px;
|
|
margin-inline-start: -15px;
|
|
}
|
|
|
|
.card-deck .card {
|
|
display: flex;
|
|
flex: 1 0 0%;
|
|
flex-direction: column;
|
|
margin-inline-end: 15px;
|
|
margin-block-end: 0;
|
|
margin-inline-start: 15px;
|
|
}
|
|
}
|
|
|
|
.card-group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.card-group>.card {
|
|
margin-block-end: 15px;
|
|
}
|
|
|
|
@media (min-width: 576px) {
|
|
.card-group {
|
|
flex-flow: row wrap;
|
|
}
|
|
|
|
.card-group>.card {
|
|
flex: 1 0 0%;
|
|
margin-block-end: 0;
|
|
}
|
|
|
|
.card-group>.card+.card {
|
|
margin-inline-start: 0;
|
|
border-inline-start: 0;
|
|
}
|
|
|
|
.card-group>.card:not(:last-child) {
|
|
border-start-end-radius: 0;
|
|
border-end-end-radius: 0;
|
|
}
|
|
|
|
.card-group>.card:not(:last-child) .card-img-top,
|
|
.card-group>.card:not(:last-child) .card-header {
|
|
border-start-end-radius: 0;
|
|
}
|
|
|
|
.card-group>.card:not(:last-child) .card-img-bottom,
|
|
.card-group>.card:not(:last-child) .card-footer {
|
|
border-end-end-radius: 0;
|
|
}
|
|
|
|
.card-group>.card:not(:first-child) {
|
|
border-start-start-radius: 0;
|
|
border-end-start-radius: 0;
|
|
}
|
|
|
|
.card-group>.card:not(:first-child) .card-img-top,
|
|
.card-group>.card:not(:first-child) .card-header {
|
|
border-start-start-radius: 0;
|
|
}
|
|
|
|
.card-group>.card:not(:first-child) .card-img-bottom,
|
|
.card-group>.card:not(:first-child) .card-footer {
|
|
border-end-start-radius: 0;
|
|
}
|
|
}
|
|
|
|
.card-columns .card {
|
|
margin-block-end: 0.75rem;
|
|
}
|
|
|
|
@media (min-width: 576px) {
|
|
.card-columns {
|
|
column-count: 3;
|
|
column-gap: 1.25rem;
|
|
orphans: 1;
|
|
widows: 1;
|
|
}
|
|
|
|
.card-columns .card {
|
|
display: inline-block;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.accordion>.card {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.accordion>.card:not(:first-of-type) .card-header:first-child {
|
|
border-radius: 0;
|
|
}
|
|
|
|
.accordion>.card:not(:first-of-type):not(:last-of-type) {
|
|
border-block-end: 0;
|
|
border-radius: 0;
|
|
}
|
|
|
|
.accordion>.card:first-of-type {
|
|
border-block-end: 0;
|
|
border-end-end-radius: 0;
|
|
border-end-start-radius: 0;
|
|
}
|
|
|
|
.accordion>.card:last-of-type {
|
|
border-start-start-radius: 0;
|
|
border-start-end-radius: 0;
|
|
}
|
|
|
|
.accordion>.card .card-header {
|
|
margin-block-end: -1px;
|
|
}
|
|
|
|
.card-sub-title {
|
|
font-size: 13px;
|
|
}
|
|
|
|
.card-body> :last-child {
|
|
margin-block-end: 0;
|
|
}
|
|
|
|
.card-table tbody tr td {
|
|
padding: 16px 15px;
|
|
}
|
|
|
|
.card-img-start {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-start-start-radius: 4px;
|
|
border-end-start-radius: 4px;
|
|
}
|
|
|
|
.card-img-end {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-end-end-radius: 4px;
|
|
border-start-end-radius: 4px;
|
|
}
|
|
|
|
.img-fluid {
|
|
max-width: 100%;
|
|
height: auto;
|
|
}
|
|
</style>
|
|
@endpush
|
|
@endsection
|