saufi/Sistem_Kehadiran_Taklimat_SPR
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

table responsive

Browse Source
This commit is contained in:
Saufi
2026-06-16 20:31:07 +08:00
parent eaa36f8273
commit 296d31b90c
3 changed files with 298 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

93
public/css/app.css
View File

@@ -269,13 +269,106 @@ table.jadual tbody tr:nth-child(even) { background: #f8f9fb; }
.ralat-medan { color: var(--merah); font-size: 0.88rem; margin: -0.5rem 0 0.9rem; }
/* ===== Jadual: kepala (tajuk + carian), badan, kaki (info + paging) ===== */
.jadual-kepala {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
flex-wrap: wrap;
padding: 1rem 1.25rem;
}
.tajuk-jadual {
margin: 0;
font-size: 1.05rem;
border-left: 4px solid var(--biru);
padding-left: 0.6rem;
}
.tajuk-jadual.hijau { border-color: var(--hijau); color: var(--hijau); }
.tajuk-jadual.merah { border-color: var(--merah); color: var(--merah); }
.jadual-kepala .cari-input {
width: auto;
flex: 1 1 220px;
max-width: 360px;
margin: 0;
padding: 0.5rem 0.75rem;
font-size: 0.95rem;
}
.jadual-bekas { overflow-x: auto; }
.jadual-kaki {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
flex-wrap: wrap;
padding: 0.75rem 1.25rem;
border-top: 1px solid var(--kelabu-border);
}
.paging { display: flex; gap: 0.3rem; flex-wrap: wrap; }
.paging-btn {
min-width: 2.2rem;
padding: 0.35rem 0.6rem;
border: 1px solid var(--kelabu-border);
background: #fff;
color: var(--teks);
border-radius: 6px;
font-size: 0.9rem;
font-weight: 600;
cursor: pointer;
}
.paging-btn:hover:not(:disabled) { background: var(--kelabu); }
.paging-btn.aktif { background: var(--biru); border-color: var(--biru); color: #fff; }
.paging-btn:disabled { opacity: 0.45; cursor: default; }
@media print {
.topbar, .tiada-cetak { display: none !important; }
body { background: #fff; }
.kad { border: none; }
/* Cetak semua baris tanpa mengira halaman semasa */
tr.baris-data { display: table-row !important; }
}
@media (max-width: 640px) {
.slip-nombor { font-size: 3.5rem; }
table.jadual { font-size: 0.85rem; }
.jadual-kepala, .jadual-kaki { padding: 0.8rem; }
.jadual-kepala .cari-input { max-width: none; }
/* Jadual responsif: setiap baris jadi kad bertindan dgn label */
.jadual-responsif thead { display: none; }
.jadual-responsif tbody tr {
display: block;
border: 1px solid var(--kelabu-border);
border-radius: 8px;
margin: 0.6rem;
padding: 0.3rem 0.6rem;
background: #fff !important;
}
.jadual-responsif tbody td {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 1rem;
border: none;
padding: 0.35rem 0;
text-align: right;
}
.jadual-responsif tbody td::before {
content: attr(data-label);
font-weight: 600;
color: #5a6172;
text-align: left;
flex: 0 0 auto;
}
.jadual-responsif tbody td:last-child { padding-bottom: 0.1rem; }
.jadual-responsif .baris-tindakan { justify-content: flex-end; }
.jadual-responsif .baris-tiada td { justify-content: center; text-align: center; }
.jadual-responsif .baris-tiada td::before { content: ""; }
}

3
resources/views/layouts/app.blade.php
View File

@@ -4,7 +4,8 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@yield('tajuk', config('app.name'))</title>
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
@php $cssVer = @filemtime(public_path('css/app.css')) ?: null; @endphp
<link rel="stylesheet" href="{{ asset('css/app.css') }}{{ $cssVer ? '?v=' . $cssVer : '' }}">
</head>
<body>
<header class="topbar">

172
resources/views/pengurus/senarai.blade.php
View File

@@ -26,12 +26,16 @@
</div>
</div>
<div class="kad" style="overflow-x:auto; padding:0;">
<table class="jadual">
{{-- ===================== HADIR ===================== --}}
<div class="kad jadual-kad" data-alat data-per-page="10" style="padding:0;">
<div class="jadual-kepala">
<h2 class="tajuk-jadual hijau">HADIR ({{ $hadir->count() }})</h2>
<input type="text" class="cari-input tiada-cetak" data-cari
placeholder="Cari nama, telefon, pusat mengundi…" aria-label="Cari senarai hadir">
</div>
<div class="jadual-bekas">
<table class="jadual jadual-responsif">
<thead>
<tr>
<th colspan="8" style="background:var(--hijau)">HADIR ({{ $hadir->count() }})</th>
</tr>
<tr>
<th>Siri</th>
<th>Nama</th>
@@ -49,15 +53,15 @@
$penempatan = $p->butiranPenempatan();
$rekod = $kehadiran->get($p->id);
@endphp
<tr>
<td><strong>{{ $rekod?->nombor_siri_papar }}</strong></td>
<td>{{ $p->nama_ic }}</td>
<td>{{ $p->no_telefon ?? '-' }}</td>
<td>{{ $p->emel ?? '-' }}</td>
<td>{{ $penempatan['pusat_mengundi'] }}</td>
<td>{{ $penempatan['saluran'] }}</td>
<td>{{ $penempatan['jawatan'] }}</td>
<td>
<tr class="baris-data">
<td data-label="Siri"><strong>{{ $rekod?->nombor_siri_papar }}</strong></td>
<td data-label="Nama">{{ $p->nama_ic }}</td>
<td data-label="No. Telefon">{{ $p->no_telefon ?? '-' }}</td>
<td data-label="Emel">{{ $p->emel ?? '-' }}</td>
<td data-label="Pusat Mengundi">{{ $penempatan['pusat_mengundi'] }}</td>
<td data-label="Saluran">{{ $penempatan['saluran'] }}</td>
<td data-label="Jawatan">{{ $penempatan['jawatan'] }}</td>
<td data-label="Borang">
@if ($rekod?->borang_diambil)
<span class="lencana lencana-hijau">Diambil</span>
@else
@@ -66,18 +70,27 @@
</td>
</tr>
@empty
<tr><td colspan="8" class="teks-tengah">Tiada petugas hadir lagi.</td></tr>
<tr class="baris-tiada"><td colspan="8" class="teks-tengah">Tiada petugas hadir lagi.</td></tr>
@endforelse
</tbody>
</table>
</div>
<div class="jadual-kaki tiada-cetak">
<span class="teks-kecil" data-info></span>
<div class="paging" data-pager></div>
</div>
</div>
<div class="kad" style="overflow-x:auto; padding:0;">
<table class="jadual">
{{-- ================ TIDAK / BELUM HADIR ================ --}}
<div class="kad jadual-kad" data-alat data-per-page="10" style="padding:0;">
<div class="jadual-kepala">
<h2 class="tajuk-jadual merah">TIDAK / BELUM HADIR ({{ $tidakHadir->count() }})</h2>
<input type="text" class="cari-input tiada-cetak" data-cari
placeholder="Cari nama, telefon, pusat mengundi…" aria-label="Cari senarai tidak hadir">
</div>
<div class="jadual-bekas">
<table class="jadual jadual-responsif">
<thead>
<tr>
<th colspan="7" style="background:var(--merah)">TIDAK / BELUM HADIR ({{ $tidakHadir->count() }})</th>
</tr>
<tr>
<th>Nama</th>
<th>No. Telefon</th>
@@ -95,14 +108,14 @@
$telefon = preg_replace('/[^0-9]/', '', $p->no_telefon ?? '');
$waNombor = $telefon !== '' ? (str_starts_with($telefon, '60') ? $telefon : '6' . $telefon) : '';
@endphp
<tr>
<td>{{ $p->nama_ic }}</td>
<td>{{ $p->no_telefon ?? '-' }}</td>
<td>{{ $p->emel ?? '-' }}</td>
<td>{{ $penempatan['pusat_mengundi'] }}</td>
<td>{{ $penempatan['saluran'] }}</td>
<td>{{ $penempatan['jawatan'] }}</td>
<td>
<tr class="baris-data">
<td data-label="Nama">{{ $p->nama_ic }}</td>
<td data-label="No. Telefon">{{ $p->no_telefon ?? '-' }}</td>
<td data-label="Emel">{{ $p->emel ?? '-' }}</td>
<td data-label="Pusat Mengundi">{{ $penempatan['pusat_mengundi'] }}</td>
<td data-label="Saluran">{{ $penempatan['saluran'] }}</td>
<td data-label="Jawatan">{{ $penempatan['jawatan'] }}</td>
<td data-label="Hubungi">
@if ($telefon !== '')
<div class="baris-tindakan">
<a class="btn btn-kecil btn-hijau" target="_blank" rel="noopener"
@@ -117,14 +130,115 @@
</td>
</tr>
@empty
<tr><td colspan="7" class="teks-tengah">Semua petugas telah hadir.</td></tr>
<tr class="baris-tiada"><td colspan="7" class="teks-tengah">Semua petugas telah hadir.</td></tr>
@endforelse
</tbody>
</table>
</div>
<div class="jadual-kaki tiada-cetak">
<span class="teks-kecil" data-info></span>
<div class="paging" data-pager></div>
</div>
</div>
<div class="baris-tindakan tiada-cetak">
<a href="{{ route('sesi.show', $sesi) }}" class="btn btn-luar">Kembali ke Sesi</a>
<button onclick="window.print()" class="btn">Cetak Senarai</button>
</div>
<script>
(function () {
function init(root) {
var perPage = parseInt(root.getAttribute('data-per-page') || '10', 10);
var search = root.querySelector('[data-cari]');
var tbody = root.querySelector('tbody');
var pager = root.querySelector('[data-pager]');
var info = root.querySelector('[data-info]');
var rows = Array.prototype.slice.call(tbody.querySelectorAll('tr.baris-data'));
var page = 1;
var filtered = rows;
if (!rows.length) {
if (info) info.textContent = '0 rekod';
return;
}
var colCount = rows[0].children.length;
// Baris "tiada padanan" untuk hasil carian kosong.
var kosong = document.createElement('tr');
kosong.className = 'baris-tiada tiada-cetak';
kosong.style.display = 'none';
var kosongTd = document.createElement('td');
kosongTd.colSpan = colCount;
kosongTd.className = 'teks-tengah';
kosongTd.textContent = 'Tiada padanan carian.';
kosong.appendChild(kosongTd);
tbody.appendChild(kosong);
function tapis() {
var q = (search ? search.value : '').trim().toLowerCase();
filtered = q === '' ? rows : rows.filter(function (r) {
return r.textContent.toLowerCase().indexOf(q) !== -1;
});
page = 1;
render();
}
function render() {
var total = filtered.length;
var jumlahPage = Math.max(1, Math.ceil(total / perPage));
if (page > jumlahPage) page = jumlahPage;
var mula = (page - 1) * perPage;
var habis = mula + perPage;
rows.forEach(function (r) { r.style.display = 'none'; });
filtered.slice(mula, habis).forEach(function (r) { r.style.display = ''; });
kosong.style.display = total === 0 ? '' : 'none';
if (info) {
info.textContent = total === 0
? 'Tiada padanan'
: 'Menunjukkan ' + (mula + 1) + '–' + Math.min(habis, total) + ' daripada ' + total;
}
renderPager(jumlahPage);
}
function btn(label, target, opts) {
opts = opts || {};
var b = document.createElement('button');
b.type = 'button';
b.className = 'paging-btn' + (opts.aktif ? ' aktif' : '');
b.textContent = label;
if (opts.disabled) {
b.disabled = true;
} else {
b.addEventListener('click', function () { page = target; render(); });
}
pager.appendChild(b);
}
function renderPager(jumlahPage) {
if (!pager) return;
pager.innerHTML = '';
if (jumlahPage <= 1) return;
btn('‹', page - 1, { disabled: page === 1 });
var start = Math.max(1, page - 2);
var end = Math.min(jumlahPage, start + 4);
start = Math.max(1, end - 4);
for (var i = start; i <= end; i++) {
btn(String(i), i, { aktif: i === page });
}
btn('›', page + 1, { disabled: page === jumlahPage });
}
if (search) search.addEventListener('input', tapis);
render();
}
document.querySelectorAll('[data-alat]').forEach(init);
})();
</script>
@endsection