KoPKB/E-Vote
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

DONE: enhance UI on admin and voter side, add docker config, fix delete button modal not showing

Browse Source
This commit is contained in:
ISMAIL MASSERAN
2026-04-02 11:59:56 +08:00
parent bed56792e6
commit 4369b079cb
31 changed files with 3044 additions and 1216 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/assets/js/components/demo/voter/home/attendance.vue
+235 -57
View File
@@ -1,53 +1,65 @@
<template>
<div class="row col-md-10 col-md-offset-1">
<div class="attendance-page row col-md-10 col-md-offset-1">
<div class="col-md-12">
<h4 class="text-center fw-bold">PENGESAHAN KEHADIRAN</h4>
<hr />
<h5 class="text-center">
<div class="attendance-hero">
<div class="attendance-section-kicker">Pengesahan Kehadiran</div>
<h4 class="attendance-page-title">Sahkan Kehadiran Mesyuarat Agung</h4>
<p class="attendance-page-subtitle">
Sila semak maklumat anda, pilih kaedah kehadiran, dan sahkan penyertaan sebelum meneruskan.
</p>
<a href="https://drive.google.com/uc?export=download&id=1O5DVDIbGy-w0bejV6RqtJGIty-_5LJD8"
target="_blank"
style="font-weight: bold; text-decoration: none; padding: 10px 20px; border: 2px solid #007bff; color: #007bff; border-radius: 5px; display: inline-block;">
⬇ Muat Turun Etika Mesyuarat Agung
target="_blank" class="attendance-download-button">
Muat Turun Etika Mesyuarat Agung
</a>
</h5>
</div>
<form @submit.prevent="edit()" id="edit_form">
<div class="form-group">
<label for="name">Nama : </label>
<input type="text" name="name" class="form-control" readonly :value="data.user.name" required />
<form @submit.prevent="edit()" id="edit_form" class="attendance-card">
<div class="attendance-card-header">
<div>
<div class="attendance-section-kicker">Maklumat Anggota</div>
<h5 class="attendance-card-title">Butiran Kehadiran</h5>
</div>
</div>
<div class="form-group">
<label for="no_kp">No. Kad Pengenalan :</label>
<input type="text" name="no_kp" class="form-control" readonly :value="data.user.no_kp" required />
<div class="attendance-info-grid">
<div class="form-group attendance-field">
<label for="name">Nama</label>
<input type="text" name="name" class="form-control attendance-input" readonly
:value="data.user.name" required />
</div>
<div class="form-group attendance-field">
<label for="no_kp">No. Kad Pengenalan</label>
<input type="text" name="no_kp" class="form-control attendance-input" readonly
:value="data.user.no_kp" required />
</div>
<div class="form-group attendance-field">
<label for="no_anggota">No. Anggota</label>
<input type="text" name="no_anggota" class="form-control attendance-input" readonly
:value="data.user.no_anggota" required />
</div>
<div class="form-group attendance-field">
<label for="unit">Unit</label>
<input type="text" name="unit" class="form-control attendance-input" readonly
:value="data.user.unit" required />
</div>
</div>
<div class="form-group">
<label for="no_anggota">No. Anggota : </label>
<input type="text" name="no_anggota" class="form-control" readonly :value="data.user.no_anggota"
required />
</div>
<div class="form-group">
<label for="no_anggota">Unit : </label>
<input type="text" name="unit" class="form-control" readonly :value="data.user.unit" required />
</div>
<div class="form-group red-border">
<label for="kehadiran">Kehadiran :</label>
<select class="form-control" id="kehadiran" name="kehadiran" required>
<div class="form-group attendance-choice-box">
<label for="kehadiran">Kehadiran</label>
<select class="form-control attendance-select" id="kehadiran" name="kehadiran" required>
<option value="0">Sila Pilih :</option>
<option value="1">Fizikal</option>
<option value="2">Maya</option>
</select>
<small class="form-text text-muted">
<em>Sila pilih kehadiran (Maya/Fizikal) kemudian klik “✅ SAYA TERIMA”</em>
<small class="form-text text-muted attendance-helper-text">
Sila pilih kehadiran (Maya/Fizikal) kemudian klik “SAYA TERIMA”.
</small>
</div>
<div class="alert alert-info mt-4 small">
<div class="alert alert-info mt-4 small attendance-info-notice">
<p><strong>*</strong> Pendaftaran akan dibuka dari <strong>jam 7.00 pagi hingga 10.00 pagi (25 April
2025)</strong>.</p>
<p>
@@ -58,28 +70,22 @@
</p>
</div>
<br>
<div class="text-center mt-4">
<!-- If already confirmed attendance -->
<div v-if="data.user.kehadiran != 0" class="alert alert-success fw-bold text-center py-4">
<p class="mb-2">KEHADIRAN ANDA TELAH DISAHKAN SECARA</p>
<h5 class="text-uppercase mb-3">
<strong class="fw-bold">
{{ data.user.kehadiran == 1 ? 'FIZIKAL' : 'MAYA' }}
</strong>
<div class="text-center mt-4 attendance-action-area">
<div v-if="data.user.kehadiran != 0" class="attendance-success-card">
<div class="attendance-success-kicker">Kehadiran Disahkan</div>
<p class="attendance-success-text">Kehadiran anda telah disahkan secara</p>
<h5 class="attendance-success-mode">
{{ data.user.kehadiran == 1 ? 'FIZIKAL' : 'MAYA' }}
</h5>
<router-link :to="{ name: 'Vote' }"
class="btn btn-warning px-4 py-2 fw-bold rounded-pill shadow-sm">
🗳️ Undi Sekarang
<router-link :to="{ name: 'Vote' }" class="btn btn-warning attendance-vote-button">
Undi Sekarang
</router-link>
</div>
<!-- If not yet confirmed attendance -->
<button type="submit" class="btn btn-lg btn-success px-5" v-else-if="data.election.status == 2">
✅ SAYA TERIMA
<button type="submit" class="btn btn-lg btn-success attendance-submit-button"
v-else-if="data.election.status == 2">
SAYA TERIMA
</button>
</div>
@@ -89,14 +95,186 @@
</template>
<style>
.form-group.red-border {
border: 2px solid red;
padding: 10px;
border-radius: 5px;
.attendance-page {
margin-top: 18px;
margin-bottom: 36px;
}
.form-group.red-border label {
color: rgb(0, 0, 0);
.attendance-hero {
margin-bottom: 22px;
padding: 26px 28px;
border-radius: 22px;
background: linear-gradient(135deg, #ffffff 0%, #eef6ff 100%);
border: 1px solid #e2ebf5;
box-shadow: 0 16px 34px rgba(35, 64, 97, 0.08);
text-align: center;
}
.attendance-section-kicker {
margin-bottom: 8px;
color: #2f80ed;
font-size: 1.2rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.attendance-page-title,
.attendance-card-title {
margin: 0 0 8px;
color: #17324d;
font-weight: 700;
}
.attendance-page-subtitle {
max-width: 700px;
margin: 0 auto 18px;
color: #5f7388;
line-height: 1.6;
}
.attendance-download-button {
display: inline-block;
padding: 12px 20px;
border-radius: 999px;
border: 1px solid #cfe2ff;
background: #fff;
color: #0d6efd;
font-weight: 700;
text-decoration: none !important;
box-shadow: 0 10px 24px rgba(13, 110, 253, 0.12);
}
.attendance-card {
padding: 24px;
border-radius: 20px;
background: #fff;
border: 1px solid #e2ebf5;
box-shadow: 0 16px 34px rgba(35, 64, 97, 0.08);
}
.attendance-card-header {
margin-bottom: 18px;
}
.attendance-info-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
}
.attendance-field {
margin-bottom: 0;
}
.attendance-field label,
.attendance-choice-box label {
display: block;
margin-bottom: 8px;
color: #45617b;
font-weight: 700;
}
.attendance-input,
.attendance-select {
height: 46px;
border-radius: 12px;
border: 1px solid #d8e3f0;
box-shadow: none;
}
.attendance-input[readonly] {
background: #f8fbff;
color: #1f2937;
}
.attendance-choice-box {
margin-top: 20px;
padding: 18px;
border-radius: 16px;
border: 1px solid #ffd9a8;
background: linear-gradient(180deg, #fffaf2 0%, #fff4df 100%);
box-shadow: 0 10px 24px rgba(255, 193, 7, 0.08);
}
.attendance-helper-text {
display: block;
margin-top: 10px;
}
.attendance-info-notice {
margin-bottom: 0;
padding: 16px 18px;
border-radius: 16px;
border: 1px solid #cde3ff;
box-shadow: 0 10px 24px rgba(13, 110, 253, 0.08);
}
.attendance-info-notice p:last-child {
margin-bottom: 0;
}
.attendance-action-area {
margin-top: 26px;
}
.attendance-success-card {
padding: 24px;
border-radius: 18px;
background: linear-gradient(135deg, #effaf2 0%, #ffffff 100%);
border: 1px solid #ccebd7;
box-shadow: 0 14px 28px rgba(40, 167, 69, 0.12);
}
.attendance-success-kicker {
margin-bottom: 8px;
color: #1f8b47;
font-size: 1.2rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.attendance-success-text {
margin-bottom: 8px;
color: #43617a;
}
.attendance-success-mode {
margin: 0 0 18px;
color: #0f5132;
font-size: 2.2rem;
font-weight: 800;
letter-spacing: 0.05em;
}
.attendance-submit-button,
.attendance-vote-button {
min-width: 220px;
padding: 12px 24px;
border-radius: 999px;
font-weight: 700;
letter-spacing: 0.04em;
box-shadow: 0 12px 24px rgba(35, 64, 97, 0.14);
}
@media (max-width: 767px) {
.attendance-hero,
.attendance-card {
padding: 18px;
border-radius: 16px;
}
.attendance-info-grid {
grid-template-columns: 1fr;
}
.attendance-submit-button,
.attendance-vote-button {
width: 100%;
min-width: 0;
}
}
</style>