add new url scraping data and create tab data lists
This commit is contained in:
arifal
214
resources/scss/pages/pbg-task/show.scss
Normal file
214
resources/scss/pages/pbg-task/show.scss
Normal file
@@ -0,0 +1,214 @@
|
||||
// PBG Task Show Page Styles
|
||||
// Custom styles for data lists display (List Layout)
|
||||
|
||||
.data-list-section {
|
||||
.section-header {
|
||||
border-bottom: 2px solid #f8f9fa;
|
||||
padding-bottom: 0.75rem;
|
||||
|
||||
.section-icon {
|
||||
font-size: 1.2rem;
|
||||
color: #5d87ff;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
color: #2c3e50;
|
||||
}
|
||||
|
||||
.section-count {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.data-list-container {
|
||||
.data-list-item {
|
||||
border: 1px solid #e9ecef;
|
||||
border-radius: 6px;
|
||||
margin-bottom: 0.75rem;
|
||||
padding: 1rem;
|
||||
background: #ffffff;
|
||||
transition: all 0.2s ease;
|
||||
position: relative;
|
||||
|
||||
&:hover {
|
||||
border-color: #5d87ff;
|
||||
box-shadow: 0 2px 8px rgba(93, 135, 255, 0.1);
|
||||
transform: translateX(2px);
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 3px;
|
||||
background: #5d87ff;
|
||||
border-radius: 3px 0 0 3px;
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
|
||||
&:hover::before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.list-item-header {
|
||||
.item-title {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
color: #2c3e50;
|
||||
line-height: 1.4;
|
||||
|
||||
.item-number {
|
||||
color: #5d87ff;
|
||||
font-weight: 700;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.item-description {
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.4;
|
||||
color: #6c757d;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.item-status {
|
||||
.badge {
|
||||
font-size: 0.75rem;
|
||||
padding: 0.25rem 0.6rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list-item-meta {
|
||||
margin-top: 0.75rem;
|
||||
padding-top: 0.75rem;
|
||||
border-top: 1px solid #f1f3f4;
|
||||
|
||||
small {
|
||||
font-size: 0.8rem;
|
||||
|
||||
i {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.text-dark {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.badge {
|
||||
font-size: 0.7rem;
|
||||
padding: 0.1rem 0.4rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Empty state for individual sections
|
||||
.no-items {
|
||||
text-align: center;
|
||||
padding: 2rem;
|
||||
color: #6c757d;
|
||||
font-style: italic;
|
||||
border: 2px dashed #dee2e6;
|
||||
border-radius: 6px;
|
||||
|
||||
i {
|
||||
font-size: 2rem;
|
||||
margin-bottom: 0.5rem;
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Empty state styles
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: 3rem 1rem;
|
||||
|
||||
.empty-icon {
|
||||
font-size: 3rem;
|
||||
color: #6c757d;
|
||||
margin-bottom: 1rem;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.empty-title {
|
||||
font-size: 1.25rem;
|
||||
color: #6c757d;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
color: #6c757d;
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
// Badge variations
|
||||
.badge {
|
||||
&.bg-success {
|
||||
background-color: #28a745 !important;
|
||||
}
|
||||
|
||||
&.bg-danger {
|
||||
background-color: #dc3545 !important;
|
||||
}
|
||||
|
||||
&.bg-info {
|
||||
background-color: #17a2b8 !important;
|
||||
}
|
||||
|
||||
&.bg-light {
|
||||
background-color: #f8f9fa !important;
|
||||
border: 1px solid #dee2e6;
|
||||
}
|
||||
}
|
||||
|
||||
// Tab content spacing
|
||||
#pbgTaskDataLists {
|
||||
.section-divider {
|
||||
border-bottom: 1px solid #e9ecef;
|
||||
margin-bottom: 2rem;
|
||||
padding-bottom: 1rem;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Responsive adjustments
|
||||
@media (max-width: 768px) {
|
||||
.data-list-container {
|
||||
.data-list-item {
|
||||
padding: 0.75rem;
|
||||
|
||||
.list-item-header {
|
||||
.item-title {
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
}
|
||||
|
||||
.list-item-meta {
|
||||
small {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.data-list-section {
|
||||
.section-header {
|
||||
.section-title {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -38,7 +38,7 @@
|
||||
</div>
|
||||
|
||||
<!-- Notification -->
|
||||
<div class="dropdown topbar-item">
|
||||
{{-- <div class="dropdown topbar-item">
|
||||
<button type="button" class="topbar-button position-relative"
|
||||
id="page-header-notifications-dropdown" data-bs-toggle="dropdown" aria-haspopup="true"
|
||||
aria-expanded="false">
|
||||
@@ -147,7 +147,7 @@
|
||||
class="bx bx-right-arrow-alt ms-1"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> --}}
|
||||
|
||||
<!-- User -->
|
||||
<div class="dropdown topbar-item">
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
|
||||
@section('css')
|
||||
@vite(['node_modules/gridjs/dist/theme/mermaid.min.css'])
|
||||
@vite(['resources/scss/pages/pbg-task/show.scss'])
|
||||
@endsection
|
||||
|
||||
@section('content')
|
||||
@@ -127,6 +128,11 @@
|
||||
<span class="d-none d-sm-block">Data Bangunan</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#pbgTaskDataLists" data-bs-toggle="tab" aria-expanded="false" class="nav-link">
|
||||
<span class="d-none d-sm-block">Data Lists</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
@@ -398,6 +404,99 @@
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
<div class="tab-pane" id="pbgTaskDataLists">
|
||||
@if($dataListsByType && $dataListsByType->count() > 0)
|
||||
@foreach($dataListsByType as $dataType => $dataLists)
|
||||
@php
|
||||
$dataTypeName = $dataLists->first()->data_type_name ?? "Data Type {$dataType}";
|
||||
@endphp
|
||||
<div class="data-list-section mb-4">
|
||||
<div class="section-header mb-3">
|
||||
<div class="d-flex align-items-center justify-content-between">
|
||||
<div class="d-flex align-items-center">
|
||||
<i class="fas fa-folder-open section-icon me-2"></i>
|
||||
<h5 class="section-title mb-0">{{ $dataTypeName }}</h5>
|
||||
</div>
|
||||
<span class="badge bg-info section-count">{{ $dataLists->count() }} items</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="data-list-container">
|
||||
@foreach($dataLists as $index => $dataList)
|
||||
<div class="data-list-item">
|
||||
<div class="list-item-header">
|
||||
<div class="d-flex align-items-start justify-content-between">
|
||||
<div class="item-info flex-grow-1">
|
||||
<h6 class="item-title mb-1">
|
||||
<span class="item-number">{{ $index + 1 }}.</span>
|
||||
{{ $dataList->name }}
|
||||
</h6>
|
||||
@if($dataList->description)
|
||||
<p class="item-description text-muted small mb-1">
|
||||
{{ $dataList->description }}
|
||||
</p>
|
||||
@endif
|
||||
</div>
|
||||
@if($dataList->status !== null)
|
||||
<div class="item-status ms-3">
|
||||
@if($dataList->status == 1)
|
||||
<span class="badge bg-success">{{ $dataList->status_name ?? 'Sesuai' }}</span>
|
||||
@elseif($dataList->status == 0)
|
||||
<span class="badge bg-danger">{{ $dataList->status_name ?? 'Tidak Sesuai' }}</span>
|
||||
@else
|
||||
<span class="badge bg-secondary">{{ $dataList->status_name ?? 'Unknown' }}</span>
|
||||
@endif
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="list-item-meta">
|
||||
<div class="row">
|
||||
@if($dataList->file)
|
||||
<div class="col-md-6">
|
||||
<small class="text-muted">
|
||||
<i class="fas fa-paperclip me-1"></i>
|
||||
File:
|
||||
<span class="text-dark">{{ $dataList->file_name }}</span>
|
||||
@if($dataList->file_extension)
|
||||
<span class="badge bg-light text-dark ms-1">{{ $dataList->file_extension }}</span>
|
||||
@endif
|
||||
</small>
|
||||
</div>
|
||||
@endif
|
||||
<div class="col-md-6">
|
||||
<small class="text-muted">
|
||||
<i class="fas fa-clock me-1"></i>
|
||||
{{ $dataList->formatted_created_at }}
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
@if($dataList->note)
|
||||
<div class="row mt-1">
|
||||
<div class="col-12">
|
||||
<small class="text-muted">
|
||||
<i class="fas fa-sticky-note me-1"></i>
|
||||
Catatan:
|
||||
<span class="text-dark">{{ $dataList->note }}</span>
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
@else
|
||||
<div class="empty-state">
|
||||
<i class="fas fa-folder-open empty-icon"></i>
|
||||
<h5 class="empty-title">No Data Lists Available</h5>
|
||||
<p class="empty-text">There are no data lists associated with this PBG task.</p>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user