Skip to content

Commit c45211a

Browse files
agitnaetaagitnaeta
committed
fix(rv5-01): komponen page-header + seragamkan 3 halaman non-CRUD
Implementasi dari plan c55fee3: - komponen <x-admin.page-header> reusable (pola header 2-baris) - Pelatihan, Notifikasi, Dokumen Karyawan pindah ke pola 2-baris, buang btn-sm/form-control-sm di header - guard rv5-01-header-audit.mjs (37 CRUD) + rv5-01c-noncrud-header.mjs (3 non-CRUD) Verifikasi: crud-suite 146/146 PASS, guard exit 0. 9 phpunit fail pre-existing (date-dependent, terbukti gagal di tree bersih, 0 ubah app/).
1 parent c55fee3 commit c45211a

8 files changed

Lines changed: 1760 additions & 70 deletions

File tree

‎resources/views/admin/document/index.blade.php‎

Lines changed: 35 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,56 +1,58 @@
11
@extends(backpack_view('blank'))
22

33
@section('header')
4-
<section class="container-fluid"><h2>Dokumen Karyawan</h2></section>
5-
@endsection
4+
<x-admin.page-header
5+
:breadcrumb="['Admin' => backpack_url('dashboard'), 'Dokumen Karyawan' => false]"
6+
heading="Dokumen Karyawan"
7+
subheading="Arsip berkas & masa berlaku dokumen">
68

7-
@section('content')
8-
<div class="card">
9-
<div class="card-header">
10-
<div class="d-flex justify-content-between align-items-center flex-wrap gap-2">
11-
<form method="GET" class="row g-2 align-items-end">
12-
<div class="col-auto">
13-
<label class="form-label mb-0">Karyawan</label>
14-
<select name="user_id" class="form-control form-control-sm">
9+
<x-slot:actions>
10+
<a href="{{ backpack_url('employee-document/completeness') }}" class="btn btn-outline-secondary">
11+
<i class="la la-clipboard-check"></i> Kelengkapan
12+
</a>
13+
<a href="{{ backpack_url('employee-document/create') }}" class="btn btn-primary">
14+
<i class="la la-upload"></i> Unggah Dokumen
15+
</a>
16+
</x-slot:actions>
17+
18+
<x-slot:tools>
19+
<form method="GET" class="um-header-tools-form d-flex align-items-end flex-wrap gap-2">
20+
<div>
21+
<label class="form-label mb-0 small text-muted">Karyawan</label>
22+
<select name="user_id" class="form-select">
1523
<option value="">Semua</option>
1624
@foreach($users as $u)
1725
<option value="{{ $u->id }}" @selected(($filters['user_id'] ?? null) == $u->id)>{{ $u->name }}</option>
1826
@endforeach
1927
</select>
2028
</div>
21-
<div class="col-auto">
22-
<label class="form-label mb-0">Jenis</label>
23-
<select name="document_type_id" class="form-control form-control-sm">
29+
<div>
30+
<label class="form-label mb-0 small text-muted">Jenis</label>
31+
<select name="document_type_id" class="form-select">
2432
<option value="">Semua</option>
2533
@foreach($types as $t)
2634
<option value="{{ $t->id }}" @selected(($filters['document_type_id'] ?? null) == $t->id)>{{ $t->name }}</option>
2735
@endforeach
2836
</select>
2937
</div>
30-
<div class="col-auto">
31-
<label class="form-check-label small">
32-
<input type="checkbox" name="expiring" value="1" @checked(!empty($filters['expiring']))>
33-
Akan kedaluwarsa (30 hari)
34-
</label><br>
35-
<label class="form-check-label small">
36-
<input type="checkbox" name="expired" value="1" @checked(!empty($filters['expired']))>
37-
Sudah kedaluwarsa
38+
<div class="d-flex flex-column gap-1">
39+
<label class="form-check m-0">
40+
<input type="checkbox" class="form-check-input" name="expiring" value="1" @checked(!empty($filters['expiring']))>
41+
<span class="small">Akan kedaluwarsa (30 hari)</span>
42+
</label>
43+
<label class="form-check m-0">
44+
<input type="checkbox" class="form-check-input" name="expired" value="1" @checked(!empty($filters['expired']))>
45+
<span class="small">Sudah kedaluwarsa</span>
3846
</label>
3947
</div>
40-
<div class="col-auto"><button class="btn btn-sm btn-primary">Filter</button></div>
48+
<div><button class="btn btn-primary">Filter</button></div>
4149
</form>
50+
</x-slot:tools>
51+
</x-admin.page-header>
52+
@endsection
4253

43-
<div>
44-
<a href="{{ backpack_url('employee-document/completeness') }}" class="btn btn-sm btn-outline-secondary">
45-
<i class="la la-clipboard-check"></i> Kelengkapan
46-
</a>
47-
<a href="{{ backpack_url('employee-document/create') }}" class="btn btn-sm btn-primary">
48-
<i class="la la-upload"></i> Unggah Dokumen
49-
</a>
50-
</div>
51-
</div>
52-
</div>
53-
54+
@section('content')
55+
<div class="card">
5456
<div class="card-body p-0">
5557
<div class="table-responsive">
5658
<table class="table table-striped mb-0">

‎resources/views/admin/notification/index.blade.php‎

Lines changed: 25 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,37 @@
11
@extends(backpack_view('blank'))
22

33
@section('header')
4-
<section class="container-fluid">
5-
<h2>Notifikasi <small>{{ $unreadCount }} belum dibaca</small></h2>
6-
</section>
4+
<x-admin.page-header
5+
:breadcrumb="['Admin' => backpack_url('dashboard'), 'Notifikasi' => false]"
6+
heading="Notifikasi"
7+
:subheading="$unreadCount . ' belum dibaca'">
8+
9+
@if($unreadCount > 0)
10+
<x-slot:actions>
11+
<form method="POST" action="{{ backpack_url('notification/mark-all-read') }}">
12+
@csrf
13+
<button class="btn btn-outline-primary">
14+
<i class="la la-check-double"></i> Tandai Semua Dibaca
15+
</button>
16+
</form>
17+
</x-slot:actions>
18+
@endif
19+
20+
<x-slot:tools>
21+
<div class="btn-group">
22+
<a href="{{ backpack_url('notification') }}"
23+
class="btn {{ $unreadOnly ? 'btn-outline-secondary' : 'btn-secondary' }}">Semua</a>
24+
<a href="{{ backpack_url('notification?unread=1') }}"
25+
class="btn {{ $unreadOnly ? 'btn-secondary' : 'btn-outline-secondary' }}">Belum Dibaca</a>
26+
</div>
27+
</x-slot:tools>
28+
</x-admin.page-header>
729
@endsection
830

931
@section('content')
1032
<div class="row">
1133
<div class="col-md-9">
1234
<div class="card">
13-
<div class="card-header d-flex justify-content-between align-items-center">
14-
<div>
15-
<a href="{{ backpack_url('notification') }}"
16-
class="btn btn-sm {{ $unreadOnly ? 'btn-outline-secondary' : 'btn-secondary' }}">Semua</a>
17-
<a href="{{ backpack_url('notification?unread=1') }}"
18-
class="btn btn-sm {{ $unreadOnly ? 'btn-secondary' : 'btn-outline-secondary' }}">Belum Dibaca</a>
19-
</div>
20-
@if($unreadCount > 0)
21-
<form method="POST" action="{{ backpack_url('notification/mark-all-read') }}">
22-
@csrf
23-
<button class="btn btn-sm btn-outline-primary">
24-
<i class="la la-check-double"></i> Tandai Semua Dibaca
25-
</button>
26-
</form>
27-
@endif
28-
</div>
2935
<div class="card-body p-0">
3036
@forelse($notifications as $notification)
3137
<a href="{{ backpack_url('notification/' . $notification->id . '/read') }}"

‎resources/views/admin/training/index.blade.php‎

Lines changed: 22 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -3,27 +3,31 @@
33
@php use App\Models\Training; @endphp
44

55
@section('header')
6-
<section class="container-fluid">
7-
<h2><i class="la la-graduation-cap"></i> Pelatihan
8-
<small>kelola materi & latihan untuk karyawan</small></h2>
9-
</section>
6+
<x-admin.page-header
7+
:breadcrumb="['Admin' => backpack_url('dashboard'), 'Pelatihan' => false]"
8+
heading="Pelatihan"
9+
subheading="Kelola materi & latihan untuk karyawan">
10+
11+
@if($canEdit && ! $showArchived)
12+
<x-slot:actions>
13+
<a href="{{ backpack_url('training/create') }}" class="btn btn-success">
14+
<i class="la la-plus"></i> Buat Pelatihan
15+
</a>
16+
</x-slot:actions>
17+
@endif
18+
19+
<x-slot:tools>
20+
<div class="btn-group">
21+
<a href="{{ backpack_url('training') }}"
22+
class="btn {{ ! $showArchived ? 'btn-primary' : 'btn-outline-secondary' }}">Aktif</a>
23+
<a href="{{ backpack_url('training') }}?archived=1"
24+
class="btn {{ $showArchived ? 'btn-primary' : 'btn-outline-secondary' }}">Diarsipkan</a>
25+
</div>
26+
</x-slot:tools>
27+
</x-admin.page-header>
1028
@endsection
1129

1230
@section('content')
13-
<div class="card mb-3"><div class="card-body d-flex justify-content-between align-items-center flex-wrap gap-2">
14-
<div class="btn-group">
15-
<a href="{{ backpack_url('training') }}"
16-
class="btn btn-sm {{ ! $showArchived ? 'btn-primary' : 'btn-outline-secondary' }}">Aktif</a>
17-
<a href="{{ backpack_url('training') }}?archived=1"
18-
class="btn btn-sm {{ $showArchived ? 'btn-primary' : 'btn-outline-secondary' }}">Diarsipkan</a>
19-
</div>
20-
@if($canEdit && ! $showArchived)
21-
<a href="{{ backpack_url('training/create') }}" class="btn btn-sm btn-success">
22-
<i class="la la-plus"></i> Buat Pelatihan
23-
</a>
24-
@endif
25-
</div></div>
26-
2731
<div class="card"><div class="table-responsive">
2832
<table class="table table-hover align-middle mb-0">
2933
<thead class="table-light">

‎resources/views/components/admin/page-header.blade.php‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
{{--
2+
Komponen header 2-baris untuk halaman admin NON-CRUD (Pelatihan, Notifikasi,
3+
Dokumen Karyawan, dll). Menyamakan tampilan dengan pola header CRUD Backpack
4+
(resources/views/vendor/backpack/crud/list.blade.php) — reuse token CSS `.um-*`
5+
di resources/css/admin.css. Lihat RV5-01-C.
6+
7+
Props:
8+
- $breadcrumb : array [label => url|false] (item terakhir url=false = aktif)
9+
- $heading : string
10+
- $subheading : string|null
11+
12+
Slots:
13+
- actions : tombol aksi utama (baris 1, kanan)
14+
- tools : tab / filter / search (baris 2, kanan)
15+
16+
Contoh:
17+
<x-admin.page-header
18+
:breadcrumb="['Admin' => backpack_url('dashboard'), 'Pelatihan' => false]"
19+
heading="Pelatihan"
20+
subheading="Kelola materi & latihan untuk karyawan">
21+
<x-slot:actions>
22+
<a href="..." class="btn btn-success">Buat Pelatihan</a>
23+
</x-slot:actions>
24+
<x-slot:tools>
25+
<div class="btn-group">...</div>
26+
</x-slot:tools>
27+
</x-admin.page-header>
28+
--}}
29+
@props([
30+
'breadcrumb' => [],
31+
'heading' => '',
32+
'subheading' => null,
33+
'actions' => null,
34+
'tools' => null,
35+
])
36+
37+
<div class="um-page-header container-fluid animated fadeIn d-print-none" bp-section="page-header">
38+
39+
{{-- Baris 1: breadcrumb (kiri) + tombol aksi (kanan) --}}
40+
<div class="um-header-top d-flex align-items-center flex-wrap mb-3">
41+
@if (!empty($breadcrumb))
42+
<nav aria-label="breadcrumb" class="d-none d-lg-block">
43+
<ol class="breadcrumb bg-transparent p-0 m-0">
44+
@foreach ($breadcrumb as $label => $link)
45+
@if ($link)
46+
<li class="breadcrumb-item text-capitalize"><a href="{{ $link }}">{{ $label }}</a></li>
47+
@else
48+
<li class="breadcrumb-item text-capitalize active" aria-current="page">{{ $label }}</li>
49+
@endif
50+
@endforeach
51+
</ol>
52+
</nav>
53+
@endif
54+
55+
@if ($actions)
56+
<div class="um-header-actions ms-auto d-flex align-items-center gap-2" bp-section="page-header-actions">
57+
{{ $actions }}
58+
</div>
59+
@endif
60+
</div>
61+
62+
{{-- Baris 2: judul + subjudul (kiri) + tools/tab/filter (kanan) --}}
63+
<div class="um-header-bottom d-flex align-items-end flex-wrap gap-3 mb-2">
64+
<div class="um-header-title">
65+
<h1 class="text-capitalize mb-0" bp-section="page-heading">{{ $heading }}</h1>
66+
@if (!is_null($subheading) && $subheading !== '')
67+
<p class="mb-0 text-muted" bp-section="page-subheading">{{ $subheading }}</p>
68+
@endif
69+
</div>
70+
71+
@if ($tools)
72+
<div class="um-header-tools ms-auto d-flex align-items-end flex-wrap gap-2">
73+
{{ $tools }}
74+
</div>
75+
@endif
76+
</div>
77+
78+
</div>

0 commit comments

Comments
 (0)