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

.dockerignore

@@ -0,0 +1,11 @@
+.git
+node_modules
+vendor
+storage/logs
+storage/framework/cache
+storage/framework/sessions
+storage/framework/views
+storage/debugbar
+npm-debug.log
+Dockerfile
+docker-compose.yml

.env.docker

@@ -0,0 +1,46 @@
+CLOUDINARY_ENABLED=
+CLOUDINARY_FOLDER=""
+CLOUDINARY_IMAGE_ERROR=
+CLOUDINARY_IMAGE_DEFAULT=
+CLOUDINARY_CLOUD_NAME=
+CLOUDINARY_API_KEY=
+CLOUDINARY_API_SECRET=
+
+APP_NAME=Laravel
+APP_ENV=local
+APP_KEY=base64:GQjuMDkTaLnqx3nyWezVjxs0QjoWamzyWGMhzqw3ZPM=
+APP_DEBUG=true
+APP_LOG_LEVEL=debug
+LOG_CHANNEL=stack
+APP_URL=http://localhost
+
+USER_NAME="Lenard Mangay-ayam"
+USER_EMAIL="lenard.mangayayam@voting-system.com"
+USER_PASS="admin"
+
+DB_CONNECTION=mysql
+DB_HOST=mysql
+DB_PORT=3306
+DB_DATABASE=voting
+DB_USERNAME=voteuser
+DB_PASSWORD=password
+
+BROADCAST_DRIVER=log
+CACHE_DRIVER=file
+SESSION_DRIVER=file
+QUEUE_DRIVER=sync
+
+REDIS_HOST=127.0.0.1
+REDIS_PASSWORD=null
+REDIS_PORT=6379
+
+MAIL_DRIVER=smtp
+MAIL_HOST=smtp.mailtrap.io
+MAIL_PORT=2525
+MAIL_USERNAME=null
+MAIL_PASSWORD=null
+MAIL_ENCRYPTION=null
+
+PUSHER_APP_ID=
+PUSHER_APP_KEY=
+PUSHER_APP_SECRET=

.env.example

@@ -11,6 +11,7 @@ APP_ENV=local
 APP_KEY=
 APP_DEBUG=true
 APP_LOG_LEVEL=debug
+LOG_CHANNEL=stack
 APP_URL=http://localhost
 
 USER_NAME="Lenard Mangay-ayam"

.gitignore

@@ -10,4 +10,5 @@ Homestead.yaml
 npm-debug.log
 yarn-error.log
 .env
-*sublime*
+*sublime*
+/.vscode

app/Http/Controllers/API/v1/Voter/LoginController.php

@@ -48,13 +48,18 @@ class LoginController extends Controller
 				$user_otp->expired_at = $expired_at;
 				$user_otp->save();
 
-				return response()->json([
+				$response = [
 					'status' => 'success',
 					'message' => 'generated SMS Token',
 					'notel' => $voter->telefon,
 					'nokp' => $voter->no_kp,
+				];
 
-				]);
+				if (app()->environment(['local', 'development'])) {
+					$response['debug_otp'] = $sms_token;
+				}
+
+				return response()->json($response);
 
 			}else{
 				return response()->json([
@@ -111,7 +116,7 @@ class LoginController extends Controller
     	} else {
     		return response()->json([
     			'status'  =>  'failed',
-    			'message'  =>  'Invalid ID.'
+    			'message'  =>  'No. KP tidak wujud. Atau sesi mengundi telah tamat'
     		]);
     	}
 

app/Http/Controllers/API/v1/Voter/PenyataController.php

@@ -12,7 +12,11 @@ class PenyataController extends Controller
     // GET PENYATA BERDASARKAN NO ANGGOTA
     public function getPenyata($no_anggota)
     {
-        return Voter::where('no_anggota', $no_anggota)->firstOrFail();
+        $voter = Voter::where('no_anggota', $no_anggota)->firstOrFail();
+
+        return response()->json([
+            'user' => $voter,
+        ]);
     }
 
     // SAHKAN PENYATA BERDASARKAN NO ANGGOTA
@@ -20,7 +24,8 @@ class PenyataController extends Controller
     {
         $request->validate([
             'persetujuan' => 'required|in:Bersetuju,Tidak Bersetuju',
-            'no_kp' => 'nullable'
+            'no_kp' => 'nullable',
+            'nokp' => 'nullable',
         ]);
 
 
@@ -38,18 +43,21 @@ class PenyataController extends Controller
             ], 409); // Conflict
         }
 
+        $noKp = $request->input('no_kp', $request->input('nokp'));
+
         $voter->update([
             'persetujuan'   => $request->persetujuan,
             'status_penyata' => $request->persetujuan === 'Bersetuju'
                 ? 'DISAHKAN'
                 : 'PERLU_SEMAK',
-            'no_kp'          => $request->nokp,
+            'no_kp'          => $noKp,
             'tarikh_sah'    => now()
         ]);
 
         return response()->json([
             'success' => true,
-            'status'  => $voter->status_penyata
+            'status'  => $voter->status_penyata,
+            'user'    => $voter->fresh(),
         ]);
     }
 

docker-compose.yml

@@ -0,0 +1,39 @@
+services:
+  app:
+    build:
+      context: .
+      dockerfile: docker/php/Dockerfile
+    working_dir: /var/www/html
+    volumes:
+      - ./:/var/www/html:cached
+    environment:
+      APP_ENV: local
+      APP_DEBUG: "true"
+    depends_on:
+      - mysql
+
+  web:
+    image: nginx:1.25-alpine
+    ports:
+      - "8080:80"
+    volumes:
+      - ./:/var/www/html:cached
+      - ./docker/nginx/default.conf:/etc/nginx/conf.d/default.conf:ro
+    depends_on:
+      - app
+
+  mysql:
+    image: mysql:8.0
+    command: --default-authentication-plugin=mysql_native_password
+    ports:
+      - "3307:3306"
+    environment:
+      MYSQL_DATABASE: voting
+      MYSQL_USER: voteuser
+      MYSQL_PASSWORD: password
+      MYSQL_ROOT_PASSWORD: root
+    volumes:
+      - mysql_data:/var/lib/mysql
+
+volumes:
+  mysql_data:

docker/nginx/default.conf

@@ -0,0 +1,26 @@
+server {
+    listen 80;
+    server_name _;
+
+    root /var/www/html/public;
+    index index.php index.html;
+
+    charset utf-8;
+
+    location / {
+        try_files $uri $uri/ /index.php?$query_string;
+    }
+
+    location ~ \.php$ {
+        include fastcgi_params;
+        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
+        fastcgi_param PATH_INFO $fastcgi_path_info;
+        fastcgi_pass app:9000;
+        fastcgi_index index.php;
+    }
+
+    location ~ /\.(?!well-known).* {
+        deny all;
+    }
+}
+

docker/php/Dockerfile

@@ -0,0 +1,30 @@
+FROM php:7.4-fpm
+
+WORKDIR /var/www/html
+
+RUN apt-get update \
+  && apt-get install -y --no-install-recommends \
+    git \
+    pkg-config \
+    unzip \
+    libonig-dev \
+    libzip-dev \
+    libpng-dev \
+    libjpeg62-turbo-dev \
+    libfreetype6-dev \
+  && docker-php-ext-configure gd --with-freetype --with-jpeg \
+  && docker-php-ext-install -j"$(nproc)" \
+    pdo_mysql \
+    mbstring \
+    bcmath \
+    zip \
+    exif \
+    gd \
+  && rm -rf /var/lib/apt/lists/*
+
+COPY --from=composer:2 /usr/bin/composer /usr/local/bin/composer
+
+COPY docker/php/php.ini /usr/local/etc/php/conf.d/app.ini
+
+RUN usermod -u 1000 www-data && groupmod -g 1000 www-data
+

docker/php/php.ini

@@ -0,0 +1,4 @@
+memory_limit=512M
+upload_max_filesize=50M
+post_max_size=50M
+max_execution_time=120

docs/glossary.md

@@ -0,0 +1,2 @@
+### Glossary
+- The dropdown is no longer clipped by the floating header.

docs/index.html

@@ -1 +0,0 @@
-<h2>Under development</h2>

package-lock.json

@@ -1,5 +1,5 @@
 {
-  "name": "voting",
+  "name": "voting-dev",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {

readme.md

@@ -86,6 +86,40 @@ php artisan serve
 # You can now view the system on http://localhost:8000
 ```
 
+## Docker
+
+This runs the app in **PHP 7.4** + **MySQL 8.0** without changing your Mac's PHP.
+
+```shell
+# Start containers (web at http://localhost:8080)
+docker compose up -d --build
+
+# Create .env if you haven't yet
+cp .env.example .env
+
+# Update these values in .env for Docker:
+# DB_HOST=mysql
+# DB_PORT=3306
+# DB_DATABASE=voting
+# DB_USERNAME=voting
+# DB_PASSWORD=voting
+
+# Install PHP dependencies
+docker compose exec app composer install
+
+# Generate app key
+docker compose exec app php artisan key:generate
+
+# Link storage (optional)
+docker compose exec app php artisan storage:link
+
+# Migrate + seed
+docker compose exec app php artisan migrate:fresh --seed
+
+# Passport keys (if you use Passport)
+docker compose exec app php artisan passport:install
+```
+
 ### Note
 
 The Default user for admin is:

resources/assets/js/components/demo/admin/index.vue

@@ -1,80 +1,82 @@
 <template>
-	<div>	
+	<div>
 		<div v-if="!loading">
-			<nav class="navbar navbar-default navbar-fixed-top" id="nav">
-				<div class="container-fluid">
-					<div class="navbar-header">
+			<nav class="navbar navbar-default navbar-fixed-top floating-header logo-header" id="nav">
+				<div class="container">
+					<div class="navbar-header logo-section">
 						<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
 							<span class="icon-bar"></span>
 							<span class="icon-bar"></span>
 							<span class="icon-bar"></span>
-						</button>	
-						<a class="navbar-brand" :href="data.baseURL" ><img src='https://i.postimg.cc/ZBDD0ZfQ/Whats-App-Image-2024-03-21-at-1-24-46-PM-2.jpg' border='0' width="150" height="auto" alt="MyKoPKB Logo"></a>
+						</button>
+						<a class="navbar-brand" :href="data.baseURL"><img
+								src='https://i.postimg.cc/ZBDD0ZfQ/Whats-App-Image-2024-03-21-at-1-24-46-PM-2.jpg'
+								border='0' width="150" height="auto" alt="MyKoPKB Logo">
+						</a>
 					</div>
 					<div class="collapse navbar-collapse" id="myNavbar">
-	
+
 						<ul class="nav navbar-nav">
 							<!-- {{ users }} -->
-							<router-link :to="{name: 'Admin Home'}" tag="li" exact><a href="#">Laman Utama</a></router-link>
-							<router-link :to="{name: 'Kemaskini Jawatan'}" v-if="data.user.role==1" tag="li">
-								<a href="#">Jawatan</a>
+							<router-link :to="{ name: 'Admin Home' }" tag="li" exact><a href="#"><b>Laman
+										Utama</b></a></router-link>
+							<router-link :to="{ name: 'Kemaskini Jawatan' }" v-if="data.user.role == 1" tag="li">
+								<a href="#"><b>Jawatan</b></a>
 							</router-link>
-							
+
 							<!-- <router-link :to="{name: 'Manage Partylist'}"  v-if="data.user.role==1" tag="li">
 								<a href="#">Manage Partylist</a>
 							</router-link> -->
-	
-							<router-link :to="{name: 'Manage Voter'}"  v-if="data.user.role==1" tag="li">
-								<a href="#">Anggota Koperasi</a>
-							</router-link>
-	
-							<router-link :to="{name: 'Maklumat Calon'}"  v-if="data.user.role==1" tag="li">
-								<a href="#">Calon</a>
-							</router-link>
-	
-							<router-link :to="{name: 'Kehadiran Calon'}"  v-if="data.user.role==1" tag="li">
-								<a href="#">Kehadiran</a>
+
+							<router-link :to="{ name: 'Manage Voter' }" v-if="data.user.role == 1" tag="li">
+								<a href="#"><b>Anggota Koperasi</b></a>
 							</router-link>
 
-								<router-link :to="{name: 'Pembiayaan'}"  v-if="data.user.role==1" tag="li">
-								<a href="#">Pembiayaan Anggota </a>
+							<router-link :to="{ name: 'Maklumat Calon' }" v-if="data.user.role == 1" tag="li">
+								<a href="#"><b>Calon</b></a>
 							</router-link>
 
-							<router-link :to="{name: 'Penyata Anggota'}"  v-if="data.user.role==1" tag="li">
-								<a href="#">Penyata Anggota</a>
+							<router-link :to="{ name: 'Kehadiran Calon' }" v-if="data.user.role == 1" tag="li">
+								<a href="#"><b>Kehadiran</b></a>
 							</router-link>
 
-	
+							<router-link :to="{ name: 'Pembiayaan' }" v-if="data.user.role == 1" tag="li">
+								<a href="#"><b>Pembiayaan Anggota</b></a>
+							</router-link>
+
+							<router-link :to="{ name: 'Penyata Anggota' }" v-if="data.user.role == 1" tag="li">
+								<a href="#"><b>Penyata Anggota</b></a>
+							</router-link>
+
+
 						</ul>
 						<ul class="nav navbar-right navbar-nav">
 							<li class="dropdown">
-								<a 
-									href="#" 
-									class="dropdown-toggle" 
-									data-toggle="dropdown" 
-									role="button" aria-haspopup="true" 
-									aria-expanded="false">
+								<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
+									aria-haspopup="true" aria-expanded="false">
 									<span class="fa fa-user"></span> {{ data.user.name }} <span class="caret"></span>
 								</a>
 								<ul class="dropdown-menu">
-	
-									<router-link :to="{name:'Update Account'}" tag="li" exact>
+
+									<router-link :to="{ name: 'Update Account' }" tag="li" exact>
 										<a href="#">Kemaskini Akaun</a>
 									</router-link>
-	
-									<router-link :to="{name: 'Manage Account'}" tag="li" v-if="data.user.id==1">
+
+									<router-link :to="{ name: 'Manage Account' }" tag="li" v-if="data.user.id == 1">
 										<a href="#">Pengurusan Akaun</a>
 									</router-link>
-	
+
 									<li @click="logout()"><a>Log Keluar</a></li>
 								</ul>
 							</li>
 						</ul>
-					</div> 
+					</div>
 				</div>
 			</nav>
-	
-			<router-view></router-view>
+
+			<div class="admin-main">
+				<router-view></router-view>
+			</div>
 		</div>
 		<div v-if="loading" class="container">
 			<div class="jumbotron">
@@ -82,52 +84,238 @@
 			</div>
 		</div>
 	</div>
-	</template>
-	
-	<script>
-	export default{
-	
-		// data: () =>({
-		// 	loading: true,
-		// 	users:{'roles' : 1},
-		// }),
-	
-		created: function () {
-			this.util.setTitle('Voting System - Administrator');
-			var vm = this;
-			if (this.util.isLogin()) {
-				this.util.setAuthorization();
-				axios.get(config.API+'admin/information')
-					 .then(response=>{
-						 console.log(response);
-						 vm.data.user = response.data.user;
-						 vm.data.election = response.data.election;
-						 vm.data.partylists = response.data.partylist;
-						 vm.data.positions = response.data.position;
-						 vm.loading = false;
-					 })
-					 .catch(error=>{
-						 $.notifyClose();
-						 if (this.util.showResult(error) == 401) { 
-							 vm.logout();
-						 }
-					 })
-			} else {
-				this.$router.push({name:'Admin Login'});
-			}
-		},
-	
-		methods: {
-			logout: function () {
-				localStorage.clear();
-				this.$router.push({name: 'Admin Login'});
-			}
+</template>
+
+<script>
+export default {
+
+	// data: () =>({
+	// 	loading: true,
+	// 	users:{'roles' : 1},
+	// }),
+
+	created: function () {
+		this.util.setTitle('Voting System - Administrator');
+		var vm = this;
+		if (this.util.isLogin()) {
+			this.util.setAuthorization();
+			axios.get(config.API + 'admin/information')
+				.then(response => {
+					console.log(response);
+					vm.data.user = response.data.user;
+					vm.data.election = response.data.election;
+					vm.data.partylists = response.data.partylist;
+					vm.data.positions = response.data.position;
+					vm.loading = false;
+				})
+				.catch(error => {
+					$.notifyClose();
+					if (this.util.showResult(error) == 401) {
+						vm.logout();
+					}
+				})
+		} else {
+			this.$router.push({ name: 'Admin Login' });
+		}
+	},
+
+	methods: {
+		logout: function () {
+			localStorage.clear();
+			this.$router.push({ name: 'Admin Login' });
 		}
 	}
-	</script>
-	
-	<style>
-	body{
-		padding: 70px 5px;
-	}	
-	</style>
+}
+</script>
+
+<style scoped>
+.floating-header {
+	position: fixed !important;
+	top: 16px !important;
+	left: 16px !important;
+	right: 16px !important;
+	width: calc(100% - 32px) !important;
+	margin: 0;
+	border-radius: 16px !important;
+	z-index: 2000 !important;
+	transition: all 0.3s ease !important;
+}
+
+.logo-header {
+	background: linear-gradient(135deg,
+			rgba(255, 255, 255, 0.96) 0%,
+			rgb(8, 0, 126) 48%,
+			rgb(255, 0, 0) 100%) !important;
+	border: 1px solid rgba(255, 255, 255, 0.25) !important;
+	box-shadow:
+		0 8px 32px rgba(33, 150, 243, 0.35),
+		0 4px 16px rgba(2, 19, 36, 0.28) !important;
+	backdrop-filter: blur(12px) !important;
+	position: fixed;
+	overflow: visible;
+}
+
+.logo-header::before {
+	content: '';
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, transparent 50%, rgba(255, 255, 255, 0.05) 100%);
+	pointer-events: none;
+	z-index: 0;
+}
+
+.logo-header>* {
+	position: relative;
+	z-index: 1;
+}
+
+.logo-section {
+	display: flex;
+	align-items: center;
+	margin-right: 24px;
+	margin-left: 24px;
+	flex-shrink: 0;
+}
+
+#nav.navbar {
+	border: none;
+	min-height: 78px;
+}
+
+#nav .container {
+	width: 100%;
+	padding-left: 12px;
+	padding-right: 12px;
+	overflow: visible;
+}
+
+#nav .navbar-brand {
+	display: flex;
+	align-items: center;
+	gap: 12px;
+	height: auto;
+	padding: 14px 0;
+	color: #1f2937;
+	font-weight: 700;
+	text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
+}
+
+.logo-title {
+	display: inline-block;
+	color: #1f2937 !important;
+	font-size: 1.8rem;
+	font-weight: 700;
+	text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
+}
+
+#nav .nav>li>a,
+#nav .navbar-toggle {
+	color: #f8fbff;
+	font-weight: 700;
+	letter-spacing: 0.02em;
+}
+
+#nav .nav>li>a:hover,
+#nav .nav>li.active>a,
+#nav .nav>li.active>a:hover,
+#nav .nav>li.active>a:focus,
+#nav .navbar-brand:hover {
+	color: #fff;
+	background: rgba(204, 0, 0, 0.833);
+}
+
+#nav .nav>li>a {
+	border-radius: 10px;
+	margin-top: 18px;
+	margin-bottom: 18px;
+	padding-top: 12px;
+	padding-bottom: 12px;
+}
+
+#nav .navbar-right {
+	margin-right: 8px;
+}
+
+#nav .navbar-nav>li,
+#nav .dropdown {
+	position: relative;
+}
+
+#nav .dropdown-menu {
+	margin-top: 6px;
+	border: 0;
+	border-radius: 12px;
+	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.16);
+	z-index: 2101;
+}
+
+#nav .dropdown-menu>li>a {
+	color: #2c3e50;
+}
+
+#nav .dropdown-menu>li>a:hover {
+	background-color: #f39c12;
+	color: white;
+}
+
+#nav .navbar-toggle {
+	margin-top: 20px;
+	margin-right: 18px;
+	border-color: rgba(255, 255, 255, 0.35);
+	background: rgba(255, 255, 255, 0.08);
+}
+
+#nav .navbar-toggle .icon-bar {
+	background-color: #fff;
+}
+
+.navbar-brand img {
+	background: transparent !important;
+	box-shadow: none;
+}
+
+.admin-main {
+	padding-top: 112px;
+}
+
+@media (max-width: 767px) {
+	.floating-header {
+		top: 10px !important;
+		left: 10px !important;
+		right: 10px !important;
+		width: calc(100% - 20px) !important;
+		border-radius: 14px !important;
+	}
+
+	.logo-section {
+		margin-left: 16px;
+		margin-right: 8px;
+	}
+
+	.logo-title {
+		font-size: 1.4rem;
+	}
+
+	#nav .navbar-brand img {
+		width: 120px;
+	}
+
+	#nav .navbar-collapse {
+		border-top: 0;
+		box-shadow: none;
+		padding-bottom: 12px;
+		overflow: visible;
+	}
+
+	#nav .nav>li>a {
+		margin: 4px 10px;
+	}
+
+	.admin-main {
+		padding-top: 102px;
+	}
+}
+</style>

resources/assets/js/components/demo/admin/login.vue

@@ -1,61 +1,56 @@
 <template>
-<div class="col-md-5 col-md-offset-3">
-	<div class="panel panel-default">
-		<div class="text-center">
-		<img id="logo-admin" alt="Logo-admin">
-		<div class="panel-heading">
-			<h4><b>ADMIN LOG MASUK</b> </h4>
-		</div>
-
-		<div class="panel-body">
-			<form @submit.prevent="login" id="login_form">
-
-				<div class="form-group">
-					<label for="email">E-mail</label>
-					<input type="email" name="email" class="form-control" required/>
+	<div class="col-md-5 col-md-offset-3">
+		<div class="panel panel-default">
+			<div class="text-center">
+				<img id="logo-admin" alt="Logo-admin">
+				<div class="panel-heading">
+					<h4><b>ADMIN LOG MASUK</b> </h4>
 				</div>
 
-				<div class="form-group">
-					<label for="password">Kata laluan </label>
-					<input type="password" name="password" class="form-control" id="password" required/>
-				</div>
+				<div class="panel-body">
+					<form @submit.prevent="login" id="login_form">
 
-				<label>
-					<input 
-						type="checkbox" 
-						id="visibility"  
-						onclick=" $(this)[0].checked ? 
+						<div class="form-group">
+							<label for="email">E-mail</label>
+							<input type="email" name="email" class="form-control" required />
+						</div>
+
+						<div class="form-group">
+							<label for="password">Kata laluan </label>
+							<input type="password" name="password" class="form-control" id="password" required />
+						</div>
+
+						<label>
+							<input type="checkbox" id="visibility" onclick=" $(this)[0].checked ? 
 									$('#password').attr('type','text'):
-									$('#password').attr('type','password')"/> Show Password
-				</label>
+									$('#password').attr('type','password')" /> Show Password
+						</label>
 
-				<div class="form-group">
-					<input 
-						type="submit" 
-						class="btn btn-info form-control" 
-						:class="{'disabled': loading.isLoading}" 
-						:value="loading.value"/>
+						<div class="form-group">
+							<input type="submit" class="btn btn-info form-control"
+								:class="{ 'disabled': loading.isLoading }" :value="loading.value" />
+						</div>
+
+					</form>
 				</div>
 
-			</form>
+			</div>
 		</div>
-
 	</div>
-</div>
-</div>
 </template>
 
 <script>
 
-   // JavaScript to set the image source
-    document.addEventListener('DOMContentLoaded', function() {
-      // Select the image element by its ID
-      var logoImage = document.getElementById('logo-admin');
-      // Set the source of the image dynamically
-      logoImage.src = window.location.origin + '/images/login-admin.jpeg?' + new Date().getTime(); // Replace this URL with your desired image URL
-    });
+// JavaScript to set the image source
+document.addEventListener('DOMContentLoaded', function () {
+	// Select the image element by its ID
+	var logoImage = document.getElementById('logo-admin');
+	// Set the source of the image dynamically
+	logoImage.src = window.location.origin + '/images/login-admin.jpeg?' + new Date().getTime(); // Replace this URL with your desired image URL
+	console.log(logoImage.src);
+});
 
-export default{
+export default {
 
 	data: function () {
 		return {
@@ -68,7 +63,7 @@ export default{
 
 	created: function () {
 		if (this.util.isLogin())
-			return this.$router.push({name:'Admin Home'})
+			return this.$router.push({ name: 'Admin Home' })
 		this.util.setTitle('Log Masuk Admin ');
 	},
 
@@ -80,19 +75,19 @@ export default{
 
 			this.startLoading();
 
-			axios.post(config.API+'admin/login', $('#login_form').serialize())
-				 .then(response => {
-				 	vm.stopLoading();
-				 	if (this.util.showResult(response, 'success')) {
-				 		localStorage['Access Token'] = `Bearer ${response.data.token}`;
+			axios.post(config.API + 'admin/login', $('#login_form').serialize())
+				.then(response => {
+					vm.stopLoading();
+					if (this.util.showResult(response, 'success')) {
+						localStorage['Access Token'] = `Bearer ${response.data.token}`;
 						this.util.setAuthorization();
-				 		vm.$router.push({name: 'Admin Home'});
-				 	}
-				 })
-				 .catch(error => {
-				 	vm.stopLoading();
-				 	this.util.showResult(error, 'error');
-				 })
+						vm.$router.push({ name: 'Admin Home' });
+					}
+				})
+				.catch(error => {
+					vm.stopLoading();
+					this.util.showResult(error, 'error');
+				})
 
 		},
 
@@ -124,7 +119,7 @@ body {
 .logo-admin {
 	width: 30px;
 	/* Adjust width as needed */
-	height:50px;
+	height: 50px;
 	object-fit: cover;
 
 }
@@ -132,15 +127,14 @@ body {
 .form-control {
 
 	border-radius: 0.50rem;
-	
+
 
 }
 
 .btn-info:hover {
-  background-color: #c2ccc8;/* Change background color on hover */
-  color: #f3f6f8; /* Change text color on hover */
+	background-color: #c2ccc8;
+	/* Change background color on hover */
+	color: #f3f6f8;
+	/* Change text color on hover */
 }
-
-
-
 </style>

resources/assets/js/components/demo/admin/nominee/index.vue

@@ -62,7 +62,7 @@
 								class="btn btn-primary">
 								<i class="fa fa-edit"></i>Kemaskini
 							</router-link>
-							<button class="btn btn-danger" @click="util.showModal(nominee.id)" id=nominee.id>
+							<button class="btn btn-danger" @click="openDeleteModal(nominee)">
 								<i class="fa fa-trash"></i>Padam
 							</button>
 
@@ -107,7 +107,13 @@ export default {
 
 	methods: {
 
-		deleteNominee(nomineeId) {
+		openDeleteModal: function (nominee) {
+			this.id = nominee.id;
+			this.util.showModal('#delete-nominee-modal');
+		},
+
+		deleteNominee() {
+			const nomineeId = this.id;
 			this.util.hideModal('#delete-nominee-modal'); // Hide modal
 			this.util.notify('Deleting nominee', 'loading'); // Show loading notification
 

resources/assets/js/components/demo/admin/position/index.vue

@@ -1,67 +1,65 @@
 <template>
-<div>
- 
-<div class="panel panel-default">
-	<div class="panel-body">
+	<div>
 
-		<div class="form-group">
-			<router-link class="btn btn-success" :to="{name:'Tambah Jawatan'}">
-				<i class="fa fa-plus"></i> Tambah Jawatan
-			</router-link>
-			<button class="btn btn-default" @click="refreshPosition()">
-				<i class="fa fa-refresh"></i> Kemaskini Jawatan
-			</button>
+		<div class="panel panel-default">
+			<div class="panel-body">
+
+				<div class="form-group">
+					<router-link class="btn btn-success" :to="{ name: 'Tambah Jawatan' }">
+						<i class="fa fa-plus"></i> Tambah Jawatan
+					</router-link>
+					<button class="btn btn-default" @click="refreshPosition()">
+						<i class="fa fa-refresh"></i> Kemaskini Jawatan
+					</button>
+				</div>
+
+				<div class="table-responsive">
+					<table class="table table-hover" id="position_table">
+						<thead>
+							<tr>
+								<th>ID</th>
+								<th>Nama</th>
+								<th>Tindakan</th>
+							</tr>
+						</thead>
+						<tbody>
+							<tr v-for="(position, i) in data.positions">
+								<td>{{ position.id }}</td>
+								<td>{{ position.name }}</td>
+								<td>
+									<button class="btn btn-info" @click="edit(i)">
+										<i class="fa fa-edit"></i> Edit
+									</button>
+									<button class="btn btn-danger" @click="util.showModal('#delete-position-modal'); id = position.id">
+										<i class="fa fa-trash"></i> Padam
+									</button>
+								</td>
+							</tr>
+							<tr v-if="data.positions.length < 1">
+								<td colspan="3">No Jawatan</td>
+							</tr>
+						</tbody>
+					</table>
+				</div>
+			</div>
 		</div>
 
-		<div class="table-responsive">
-			<table class="table table-hover" id="position_table">
-				<thead>
-					<tr>
-						<th>ID</th>
-						<th>Nama</th>
-						<th>Tindakan</th>
-					</tr>
-				</thead>
-				<tbody>
-					<tr v-for="(position,i) in data.positions">
-						<td>{{ position.id }}</td>
-						<td>{{ position.name }}</td>
-						<td>
-							<button class="btn btn-info" @click="edit(i)">
-								<i class="fa fa-edit"></i> Edit
-							</button>
-							<button 
-								class="btn btn-danger" 
-								@click="util.showModal('#delete-position-modal');id=position.id">
-								<i class="fa fa-trash"></i> Padam
-							</button>
-						</td>
-					</tr>
-					<tr v-if="data.positions.length < 1">
-						<td colspan="3">No Jawatan</td>
-					</tr>
-				</tbody>
-			</table>
-		</div>
+		<modal id="delete-position-modal">
+			<modal-header>Padam Jawatan</modal-header>
+			<modal-body>
+				<h2>Are you sure to delete Position?</h2>
+			</modal-body>
+			<modal-footer>
+				<button class="btn btn-danger" @click="deletePosition()">Padam</button>
+				<button class="btn btn-default" @click="util.hideModal('#delete-position-modal')">Cancel</button>
+			</modal-footer>
+		</modal>
+
 	</div>
-</div>
-
-<modal id="delete-position-modal">
-	<modal-header>Padam Jawatan</modal-header>
-	<modal-body>
-		<h2>Are you sure to delete Position?</h2>
-	</modal-body>
-	<modal-footer>
-		<button class="btn btn-danger" @click="deletePosition()">Padam</button>
-		<button class="btn btn-default" @click="util.hideModal('#delete-position-modal')">Cancel</button>
-	</modal-footer>
-</modal>
-
-</div>
 </template>
 
 <script>
-export default{
+export default {
 	data: function () {
 		return {
 			id: 0
@@ -71,7 +69,7 @@ export default{
 	created: function () {
 		if (this.$route.query.refresh) {
 			this.refreshPosition();
-			this.$router.replace({name: 'Kemaskini Jawatan'})
+			this.$router.replace({ name: 'Kemaskini Jawatan' })
 		}
 	},
 
@@ -79,13 +77,13 @@ export default{
 		refreshPosition: function () {
 			var vm = this;
 			this.util.notify('Refreshing Position', 'loading');
-			axios.get(config.API+'position')
-				.then(response=>{
+			axios.get(config.API + 'position')
+				.then(response => {
 					console.log(response)
 					$.notifyClose();
 					vm.data.positions = response.data;
 				})
-				.catch(error=>{
+				.catch(error => {
 					$.notifyClose();
 					vm.util.showResult(error);
 				})
@@ -105,22 +103,22 @@ export default{
 		edit: function (i) {
 			var vm = this;
 			this.data.position = this.data.positions[i];
-			this.$router.push({name: 'Edit Position', params:{id:vm.data.position.id}})
+			this.$router.push({ name: 'Edit Position', params: { id: vm.data.position.id } })
 		},
 
 		deletePosition: function () {
 			var vm = this;
 			this.util.notify('Deleting position', 'loading');
 			this.util.hideModal('#delete-position-modal');
-			axios.delete(config.API+'position/'+this.id)
-				 .then(response=>{
-				 	$.notifyClose();
-				 	if (vm.util.showResult(response, 'success')) vm.refreshPosition();
-				 })
-				 .catch(error=>{
-				 	$.notifyClose();
-				 	vm.util.showResult(error);
-				 })
+			axios.delete(config.API + 'position/' + this.id)
+				.then(response => {
+					$.notifyClose();
+					if (vm.util.showResult(response, 'success')) vm.refreshPosition();
+				})
+				.catch(error => {
+					$.notifyClose();
+					vm.util.showResult(error);
+				})
 		}
 	}
 }

resources/assets/js/components/demo/admin/voter/index.vue

@@ -1,92 +1,87 @@
 <template>
-<div>
- 
-<div class="panel panel-default">
-	<div class="panel-body">
+	<div>
 
-		<div class="form-group">
-			<router-link class="btn btn-success" :to="{name:'Tambah Pengundi'}">
-				<i class="fa fa-plus"></i> Tambah Pengundi
-			</router-link>
-			<button class="btn btn-default" @click="refreshVoter()">
-				<i class="fa fa-refresh"></i> Kemaskini Pengundi
-			</button>
-			<router-link class="btn btn-info" :to="{name:'History Senarai Anggota '}">
-			<i class="fa fa-list"></i> Database Anggota 
-	</router-link>
-	</div>
-		<div class="table-responsive">
-			<table class="table table-hover" id="position_table">
-				<thead>
-					<tr>
-						<th>Bil.</th>
-						<th>Nama Anggota</th>
-						<th>No. Kad Pengenalan</th>
-						<th>No. Anggota</th>
-						<th>Unit</th>
-						<th>Saham</th>
-						<th>Yuran</th>
-						<th>Tindakan</th>
-					</tr>
-				</thead>
-				<tbody>
-					<tr v-for="(voter,i) in data.voters.data">
-						<td>{{ i + 1 }}</td>
-						<td>{{ voter.name }}</td>
-						<td>{{ voter.no_kp }}</td>
-						<td>{{ voter.no_anggota }}</td>
-						<td>{{ voter.unit }}</td>
-						<td>{{ voter.saham }}</td>
-						<td>{{ voter.yuran }}</td>
-						<td>
-							<button class="btn btn-info" @click="edit(i)">
-								<i class="fa fa-edit"></i> Set semula
-							</button>
-							<button 
-								class="btn btn-danger" 
-								@click="util.showModal('#delete-voter-modal');id=voter.id">
-								<i class="fa fa-trash"></i> Padam
-							</button>
-						</td>
-					</tr>
-					<tr v-if="data.voters.data && data.voters.data.length < 1">
-						<td colspan="3">No Voters</td>
-					</tr>
-				</tbody>
-			</table>
+		<div class="panel panel-default">
+			<div class="panel-body">
+
+				<div class="form-group">
+					<router-link class="btn btn-success" :to="{ name: 'Tambah Pengundi' }">
+						<i class="fa fa-plus"></i> Tambah Pengundi
+					</router-link>
+					<button class="btn btn-default" @click="refreshVoter()">
+						<i class="fa fa-refresh"></i> Kemaskini Pengundi
+					</button>
+					<router-link class="btn btn-info" :to="{ name: 'Penyata Anggota' }">
+						<i class="fa fa-list"></i> Database Anggota
+					</router-link>
+				</div>
+				<div class="table-responsive">
+					<table class="table table-hover" id="position_table">
+						<thead>
+							<tr>
+								<th>Bil.</th>
+								<th>Nama Anggota</th>
+								<th>No. Kad Pengenalan</th>
+								<th>No. Anggota</th>
+								<th>Unit</th>
+								<th>Saham</th>
+								<th>Yuran</th>
+								<th>Tindakan</th>
+							</tr>
+						</thead>
+						<tbody>
+							<tr v-for="(voter, i) in data.voters.data">
+								<td>{{ i + 1 }}</td>
+								<td>{{ voter.name }}</td>
+								<td>{{ voter.no_kp }}</td>
+								<td>{{ voter.no_anggota }}</td>
+								<td>{{ voter.unit }}</td>
+								<td>{{ voter.saham }}</td>
+								<td>{{ voter.yuran }}</td>
+								<td>
+									<button class="btn btn-info" @click="edit(i)">
+										<i class="fa fa-edit"></i> Set semula
+									</button>
+									<button class="btn btn-danger"
+										@click="util.showModal('#delete-voter-modal'); id = voter.id">
+										<i class="fa fa-trash"></i> Padam
+									</button>
+								</td>
+							</tr>
+							<tr v-if="data.voters.data && data.voters.data.length < 1">
+								<td colspan="3">No Voters</td>
+							</tr>
+						</tbody>
+					</table>
+				</div>
+
+				<ul class="pagination" v-if="pages.length > 1">
+					<router-link tag="li" v-for="page in pages" :key="page['pages']"
+						:to="{ query: { page: page['page'] } }" :class="{ 'active': current_page == page['page'] }"
+						exact>
+						<a href="#">{{ page['page'] }}</a>
+					</router-link>
+				</ul>
+
+			</div>
 		</div>
 
-		<ul class="pagination" v-if="pages.length > 1">
-			<router-link 
-				tag="li"
-				v-for="page in pages" 
-				:key="page['pages']"
-				:to="{query:{page:page['page']}}"
-				:class="{'active':current_page==page['page']}"
-				exact>
-				<a href="#">{{ page['page'] }}</a>
-			</router-link>
-		</ul>		
+		<modal id="delete-voter-modal">
+			<modal-header>Delete Voter</modal-header>
+			<modal-body>
+				<h2>Are you sure to delete voter?</h2>
+			</modal-body>
+			<modal-footer>
+				<button class="btn btn-danger" @click="deleteVoter()">Delete</button>
+				<button class="btn btn-default" @click="util.hideModal('#delete-voter-modal')">Cancel</button>
+			</modal-footer>
+		</modal>
 
 	</div>
-</div>
-
-<modal id="delete-voter-modal">
-	<modal-header>Delete Voter</modal-header>
-	<modal-body>
-		<h2>Are you sure to delete voter?</h2>
-	</modal-body>
-	<modal-footer>
-		<button class="btn btn-danger" @click="deleteVoter()">Delete</button>
-		<button class="btn btn-default" @click="util.hideModal('#delete-voter-modal')">Cancel</button>
-	</modal-footer>
-</modal>
-
-</div>
 </template>
 
 <script>
-export default{
+export default {
 	data: function () {
 		return {
 			id: 0
@@ -105,13 +100,13 @@ export default{
 		refreshVoter: function () {
 			var vm = this;
 			this.util.notify('Refreshing Voter', 'loading');
-			axios.get(config.API+'voter?page='+this.current_page)
-				.then(response=>{
+			axios.get(config.API + 'voter?page=' + this.current_page)
+				.then(response => {
 					console.log(response)
 					$.notifyClose();
 					vm.data.voters = response.data;
 				})
-				.catch(error=>{
+				.catch(error => {
 					$.notifyClose();
 					vm.util.showResult(error);
 				})
@@ -120,22 +115,22 @@ export default{
 		edit: function (i) {
 			var vm = this;
 			this.data.voter = this.data.voters.data[i];
-			this.$router.push({name: 'Edit Voter', params:{id:vm.data.voter.id}})
+			this.$router.push({ name: 'Edit Voter', params: { id: vm.data.voter.id } })
 		},
 
 		deleteVoter: function () {
 			var vm = this;
 			this.util.notify('Deleting voter', 'loading');
 			this.util.hideModal('#delete-voter-modal');
-			axios.delete(config.API+'voter/'+this.id)
-				 .then(response=>{
-				 	$.notifyClose();
-				 	if (vm.util.showResult(response, 'success')) vm.refreshVoter();
-				 })
-				 .catch(error=>{
-				 	$.notifyClose();
-				 	vm.util.showResult(error);
-				 })
+			axios.delete(config.API + 'voter/' + this.id)
+				.then(response => {
+					$.notifyClose();
+					if (vm.util.showResult(response, 'success')) vm.refreshVoter();
+				})
+				.catch(error => {
+					$.notifyClose();
+					vm.util.showResult(error);
+				})
 		}
 	},
 
@@ -150,16 +145,16 @@ export default{
 		pages: function () {
 			var pages = [];
 			if (this.data.voters.last_page)
-			for (var i = 1; i <= this.data.voters.last_page;i++) {
-				let x = {};
-				x['page'] = i;
-				pages.push(x);
-			}
+				for (var i = 1; i <= this.data.voters.last_page; i++) {
+					let x = {};
+					x['page'] = i;
+					pages.push(x);
+				}
 			return pages;
 		},
 
 		current_page: function () {
-			return this.$route.query.page ? this.$route.query.page : 1; 
+			return this.$route.query.page ? this.$route.query.page : 1;
 		}
 	}
 }

resources/assets/js/components/demo/voter/home/attendance.vue

@@ -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>
 

resources/assets/js/components/demo/voter/home/index.vue

@@ -1,53 +1,55 @@
-
-
 <template>
-
-  <div class="row col-md-10 col-md-offset-1">
+  <div class="voter-home-page row col-md-10 col-md-offset-1">
     <!-- Banner -->
-    <div class="text-center mb-4">
-      <img src="/images/banner-mat28-new.jpg" alt="Banner" class="img-fluid"
-        style="width: 100%; max-height: 400px; object-fit: cover;">
+    <div class="col-xs-12">
+      <div class="hero-banner">
+        <img src="/images/banner-mat28-new.jpg" alt="Banner" class="hero-banner-image">
+      </div>
+      <div class="hero-banner-caption">
+        <div class="hero-banner-kicker">Portal Pengundian</div>
+        <h1 class="hero-banner-title">Maklumat Anggota dan Calon</h1>
+        <p class="hero-banner-subtitle">Semak butiran keahlian anda dan tekan gambar calon untuk melihat profil penuh.
+        </p>
+      </div>
     </div>
 
     <!-- Member Info -->
-    <div class="col-md-4">
-      <div class="p-2 mb-3 text-center"
-        style="background-color: #007bff; color: white; font-weight: bold; font-size: 1.6rem; border-radius: 4px;">
-        Maklumat Anggota
+    <div class="col-md-4 page-column">
+      <div class="page-section-heading">Maklumat Anggota</div>
+      <div class="member-info-card">
+        <ul class="list-group member-info-list">
+          <li class="list-group-item member-info-item">
+            <span class="info-label">NAMA</span>
+            <span class="info-separator">:</span>
+            <span class="info-value">{{ data.user.name }}</span>
+          </li>
+          <li class="list-group-item member-info-item">
+            <span class="info-label">NO KAD PENGENALAN</span>
+            <span class="info-separator">:</span>
+            <span class="info-value">{{ data.user.no_kp }}</span>
+          </li>
+          <li class="list-group-item member-info-item">
+            <span class="info-label">NO ANGGOTA</span>
+            <span class="info-separator">:</span>
+            <span class="info-value">{{ data.user.no_anggota }}</span>
+          </li>
+          <li class="list-group-item member-info-item">
+            <span class="info-label">UNIT</span>
+            <span class="info-separator">:</span>
+            <span class="info-value">{{ data.user.unit }}</span>
+          </li>
+          <li class="list-group-item member-info-item">
+            <span class="info-label">SAHAM</span>
+            <span class="info-separator">:</span>
+            <span class="info-value">RM {{ data.user.saham | formatNumberWithCommas }}</span>
+          </li>
+          <li class="list-group-item member-info-item">
+            <span class="info-label">YURAN</span>
+            <span class="info-separator">:</span>
+            <span class="info-value">RM {{ data.user.yuran | formatNumberWithCommas }}</span>
+          </li>
+        </ul>
       </div>
-      <hr />
-      <ul class="list-group" style="font-weight: bold;">
-        <li class="list-group-item">
-          <span class="info-label">NAMA</span>
-          <span class="info-separator">:</span>
-          <span class="info-value">{{ data.user.name }}</span>
-        </li>
-        <li class="list-group-item">
-          <span class="info-label">NO KAD PENGENALAN</span>
-          <span class="info-separator">:</span>
-          <span class="info-value">{{ data.user.no_kp }}</span>
-        </li>
-        <li class="list-group-item">
-          <span class="info-label">NO ANGGOTA</span>
-          <span class="info-separator">:</span>
-          <span class="info-value">{{ data.user.no_anggota }}</span>
-        </li>
-        <li class="list-group-item">
-          <span class="info-label">UNIT</span>
-          <span class="info-separator">:</span>
-          <span class="info-value">{{ data.user.unit }}</span>
-        </li>
-        <li class="list-group-item">
-          <span class="info-label">SAHAM</span>
-          <span class="info-separator">:</span>
-          <span class="info-value">RM {{ data.user.saham | formatNumberWithCommas }}</span>
-        </li>
-        <li class="list-group-item">
-          <span class="info-label">YURAN</span>
-          <span class="info-separator">:</span>
-          <span class="info-value">RM {{ data.user.yuran | formatNumberWithCommas }}</span>
-        </li>
-      </ul>
 
       <!-- Membership Card -->
 
@@ -101,18 +103,19 @@
     </div>
 
     <!-- Nominee Info Section -->
-    <div class="col-md-8">
-      <div class="p-2 mb-3 text-center"
-        style="background-color: #007bff; color: white; font-weight: bold; font-size: 1.6rem; border-radius: 4px;">
-        Maklumat Calon
+    <div class="col-md-8 page-column">
+      <div class="page-section-heading">Maklumat Calon</div>
+      <div class="nominee-page-intro">
+        Tekan gambar atau baris calon untuk melihat maklumat penuh.
       </div>
-      <hr />
-      <small>Tekan gambar untuk maklumat calon</small>
 
-      <div class="panel panel-primary" v-for="position in data.positions" :key="position.id">
-        <div class="panel-heading">{{ position.name }}</div>
-        <div class="panel-body table-responsive">
-          <table class="table table-hover">
+      <div class="panel panel-primary nominee-panel" v-for="position in data.positions" :key="position.id">
+        <div class="panel-heading nominee-panel-heading">
+          <span>{{ position.name }}</span>
+          <span class="nominee-panel-badge">Senarai Calon</span>
+        </div>
+        <div class="panel-body table-responsive nominee-panel-body">
+          <table class="table table-hover nominee-table" id="table-nominee">
             <thead>
               <tr>
                 <th></th>
@@ -124,15 +127,18 @@
             </thead>
             <tbody>
               <tr v-for="(nominee, i) in data.nominees" :key="nominee.id" v-if="nominee.position_id == position.id"
-                @click="viewNomineeDetails(nominee)">
+                class="nominee-row" @click="viewNomineeDetails(nominee)">
                 <td>
-                  <img :src="createBase64ImageUrl(nominee.photo)" class="thumbnail" style="height: 60px; width: 60px;">
+                  <img :src="createBase64ImageUrl(nominee.photo)" class="thumbnail nominee-thumb">
                 </td>
                 <td>{{ nominee.no_calon }}</td>
                 <td>{{ nominee.name }}</td>
                 <td>{{ nominee.no_anggota }}</td>
                 <td>{{ nominee.unit }}</td>
               </tr>
+              <tr v-if="!data.nominees.some(nominee => nominee.position_id == position.id)">
+                <td colspan="5" class="nominee-empty-state">Tiada calon untuk jawatan ini.</td>
+              </tr>
             </tbody>
           </table>
         </div>
@@ -140,32 +146,61 @@
     </div>
 
     <!-- Nominee Modal -->
-    <div v-if="showNomineeModal" class="modal-backdrop">
-      <div class="modal-dialog">
-        <div class="modal-content">
+    <div v-if="showNomineeModal" class="modal-backdrop nominee-modal-backdrop" @click.self="closeNomineeModal">
+      <div class="modal-dialog" id="view-nominee-modal">
+        <div class="modal-content nominee-modal-content">
           <div class="modal-header">
-            <h5 class="modal-title">Maklumat Calon</h5>
-            <button type="button" class="close" @click="closeNomineeModal">
-              <span aria-hidden="true">&times;</span>
-            </button>
+            <div>
+              <h5 class="modal-title">Maklumat Calon</h5>
+            </div>
           </div>
-          <div class="modal-body">
+          <div class="modal-body nominee-modal-body">
             <div class="photo-section">
-              <img :src="nomineeViewed.photo" class="thumbnail nominee-viewed-photo" />
+              <div class="nominee-photo-card">
+                <img :src="nomineeViewed.photo" class="thumbnail nominee-viewed-photo" />
+                <div class="nominee-photo-meta">
+                  <div class="nominee-name">{{ nomineeViewed.name }}</div>
+                  <div class="nominee-subtitle">
+                    Calon No. {{ nomineeViewed.no_calon || '-' }}
+                  </div>
+                </div>
+              </div>
             </div>
             <div class="detail-section">
-              <p><b>Nama:</b> {{ nomineeViewed.name }}</p>
-              <p><b>Unit:</b> {{ nomineeViewed.unit }}</p>
-              <p><b>Umur:</b> {{ nomineeViewed.umur }}</p>
-              <p><b>Jawatan Sekarang:</b> {{ nomineeViewed.jawatan_sekarang }}</p>
-              <p><b>Taraf Pendidikan:</b></p>
-              <ol>
-                <li v-for="(item, index) in nomineeViewed.education" :key="index">{{ item }}</li>
-              </ol>
-              <p><b>Pengalaman Kerja:</b></p>
-              <ol>
-                <li v-for="(item, index) in nomineeViewed.experience" :key="index">{{ item }}</li>
-              </ol>
+              <div class="nominee-summary-grid">
+                <div class="summary-item">
+                  <span class="summary-label">Nama</span>
+                  <span class="summary-value">{{ nomineeViewed.name || '-' }}</span>
+                </div>
+                <div class="summary-item">
+                  <span class="summary-label">Unit</span>
+                  <span class="summary-value">{{ nomineeViewed.unit || '-' }}</span>
+                </div>
+                <div class="summary-item">
+                  <span class="summary-label">Umur</span>
+                  <span class="summary-value">{{ nomineeViewed.umur || '-' }}</span>
+                </div>
+                <div class="summary-item">
+                  <span class="summary-label">Jawatan Sekarang</span>
+                  <span class="summary-value">{{ nomineeViewed.jawatan_sekarang || '-' }}</span>
+                </div>
+              </div>
+
+              <div class="nominee-section-card">
+                <div class="section-title">Taraf Pendidikan</div>
+                <ol v-if="nomineeViewed.education && nomineeViewed.education.length" class="detail-list">
+                  <li v-for="(item, index) in nomineeViewed.education" :key="index">{{ item }}</li>
+                </ol>
+                <p v-else class="detail-empty">Tiada maklumat pendidikan.</p>
+              </div>
+
+              <div class="nominee-section-card">
+                <div class="section-title">Pengalaman Kerja</div>
+                <ol v-if="nomineeViewed.experience && nomineeViewed.experience.length" class="detail-list">
+                  <li v-for="(item, index) in nomineeViewed.experience" :key="index">{{ item }}</li>
+                </ol>
+                <p v-else class="detail-empty">Tiada maklumat pengalaman kerja.</p>
+              </div>
             </div>
           </div>
           <div class="modal-footer">
@@ -237,98 +272,394 @@ export default {
 
 
 <style>
-#view-nominee-modal .modal-dialog {
-  max-width: 850px;
-  /* Set a maximum width */
+.voter-home-page {
+  margin-top: 24px;
+  margin-bottom: 40px;
+}
+
+.page-column {
+  margin-bottom: 24px;
+}
+
+.hero-banner {
+  position: relative;
+  margin-bottom: 28px;
+  border-radius: 24px;
+  overflow: hidden;
+  box-shadow: 0 18px 40px rgba(11, 39, 79, 0.18);
+  background: #f4f8fd;
+}
+
+.hero-banner-image {
   width: 100%;
-  /* Ensure full width on smaller screens */
-}
-
-#view-nominee-modal .nominee-viewed-photo {
-  width: 100%;
-  /* Ensure the photo fills the container */
-  height: auto;
-  /* Maintain aspect ratio */
-}
-
-#view-nominee-modal .content {
-  display: flex;
-  flex-wrap: wrap;
-  /* Allow content to wrap on smaller screens */
-}
-
-#view-nominee-modal .photo-section {
-  flex: 0 0 40%;
-  /* Set a flexible width for the photo section */
-  max-width: 300px;
-  /* Set a maximum width */
-  margin-right: 20px;
-  /* Add space between photo and details */
-}
-
-#view-nominee-modal .detail-section {
-  flex: 1;
-  /* Take remaining space */
-}
-
-#view-nominee-modal span {
+  max-height: 360px;
+  object-fit: contain;
+  object-position: center;
   display: block;
-  padding: 5px 0;
 }
 
-
-@media (max-width: 576px) {
-  #view-nominee-modal .modal-dialog {
-    max-width: none;
-    padding-left: 10px;
-    padding-right: 20px;
-    margin-bottom: 50px;
-    margin-left: 0px;
-  }
-
-
-
-  #view-nominee-modal .photo-section {
-    flex: 0 0 100%;
-    /* Set photo section to full width */
-    max-width: none;
-    /* Remove max-width */
-    margin-right: 0;
-    /* Remove right margin */
-    margin-bottom: 20px;
-    /* Add space between photo and details */
-  }
-
-  #view-nominee-modal .detail-section {
-    flex: 0 0 100%;
-    /* Set detail section to full width */
-  }
+.hero-banner-caption {
+  margin-top: 14px;
+  margin-bottom: 6px;
+  padding: 18px 20px;
+  border-radius: 18px;
+  background: #fff;
+  border: 1px solid #e5ebf3;
+  box-shadow: 0 12px 26px rgba(35, 64, 97, 0.08);
 }
 
-#table-nominee tbody tr {
+.hero-banner-kicker {
+  margin-bottom: 8px;
+  color: #2f80ed;
+  font-size: 1.2rem;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.hero-banner-title {
+  margin: 0 0 8px;
+  color: #17324d;
+  font-size: 3rem;
+  font-weight: 700;
+  line-height: 1.2;
+}
+
+.hero-banner-subtitle {
+  max-width: 680px;
+  margin: 0;
+  color: #4f6479;
+  font-size: 1.5rem;
+  line-height: 1.6;
+}
+
+.page-section-heading {
+  margin-bottom: 14px;
+  padding: 14px 18px;
+  border-radius: 14px;
+  background: linear-gradient(135deg, #0d6efd, #2f80ed);
+  color: #fff;
+  font-size: 1.8rem;
+  font-weight: 700;
+  text-align: center;
+  box-shadow: 0 12px 28px rgba(13, 110, 253, 0.2);
+}
+
+.member-info-card {
+  margin-bottom: 18px;
+  padding: 6px;
+  border-radius: 18px;
+  background: #fff;
+  border: 1px solid #e5ebf3;
+  box-shadow: 0 12px 26px rgba(35, 64, 97, 0.08);
+}
+
+.member-info-list {
+  margin-bottom: 0;
+  font-weight: bold;
+}
+
+.member-info-item {
+  border: 0;
+  border-bottom: 1px solid #edf2f7;
+  padding: 14px 16px;
+}
+
+.member-info-item:last-child {
+  border-bottom: 0;
+}
+
+.nominee-page-intro {
+  margin-bottom: 18px;
+  padding: 12px 16px;
+  border-radius: 12px;
+  background: #eef5ff;
+  border: 1px solid #dbe8ff;
+  color: #36506b;
+  font-size: 1.4rem;
+}
+
+.nominee-panel {
+  margin-bottom: 20px;
+  border: 0;
+  border-radius: 18px;
+  overflow: hidden;
+  box-shadow: 0 14px 28px rgba(35, 64, 97, 0.1);
+}
+
+.nominee-panel-heading {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 20px;
+  background: linear-gradient(135deg, #1d4e89, #2563eb);
+  color: #fff;
+  font-size: 1.7rem;
+  font-weight: 700;
+}
+
+.nominee-panel-badge {
+  padding: 6px 10px;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.18);
+  font-size: 1.2rem;
+  font-weight: 600;
+}
+
+.nominee-panel-body {
+  padding: 0;
+  background: #fff;
+}
+
+.nominee-table {
+  margin-bottom: 0;
+}
+
+.nominee-table thead {
+  background: #f4f8fd;
+}
+
+.nominee-table thead th {
+  border-bottom: 1px solid #dce7f5;
+  color: #48627e;
+  font-size: 1.25rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+}
+
+.nominee-table tbody td {
+  vertical-align: middle;
+  border-top: 1px solid #edf2f7;
+  color: #22384f;
+}
+
+.nominee-row {
   cursor: pointer;
+  transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
 }
 
-@keyframes pulseBackground {
-  0% {
-    background-color: #FFFFBF;
-  }
-
-  /* Start color */
-  50% {
-    background-color: #ffffff;
-  }
-
-  /* Middle color (white) */
-  100% {
-    background-color: #FFFFBF;
-  }
-
+.nominee-row:hover {
+  background: #f8fbff;
+  box-shadow: inset 4px 0 0 #2f80ed;
 }
 
-#table-nominee tbody tr:hover {
-  animation: pulseBackground 3s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate;
+.nominee-thumb {
+  width: 64px;
+  height: 64px;
+  margin-bottom: 0;
+  border: 2px solid #dbe8ff;
+  border-radius: 16px;
+  object-fit: cover;
+  box-shadow: 0 8px 18px rgba(47, 128, 237, 0.12);
+}
 
+.nominee-empty-state {
+  padding: 18px !important;
+  text-align: center;
+  color: #6f8193;
+}
+
+.nominee-modal-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 1050;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 24px 16px;
+  background: rgba(7, 25, 48, 0.72);
+  backdrop-filter: blur(3px);
+}
+
+#view-nominee-modal.modal-dialog {
+  width: 100%;
+  max-width: 960px;
+  margin: 0;
+}
+
+.nominee-modal-content {
+  border: 0;
+  border-radius: 20px;
+  overflow: hidden;
+  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.28);
+}
+
+.nominee-modal-content .modal-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  padding: 20px 24px 16px;
+  border-bottom: 1px solid #e7edf5;
+  background: linear-gradient(135deg, #0d6efd, #2f80ed);
+  color: #fff;
+}
+
+.nominee-modal-content .modal-title {
+  margin: 4px 0 0;
+  font-size: 2.2rem;
+  font-weight: 700;
+}
+
+.nominee-modal-content .modal-header .close {
+  margin-top: -4px;
+  color: #fff;
+  opacity: 0.9;
+  text-shadow: none;
+}
+
+.nominee-modal-kicker {
+  font-size: 1.2rem;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  opacity: 0.85;
+}
+
+.nominee-modal-body {
+  display: flex;
+  gap: 24px;
+  padding: 24px;
+  background: #f5f8fc;
+}
+
+.photo-section {
+  flex: 0 0 300px;
+}
+
+.nominee-photo-card {
+  padding: 18px;
+  border-radius: 18px;
+  background: #fff;
+  border: 1px solid #e5ebf3;
+  box-shadow: 0 10px 24px rgba(35, 64, 97, 0.08);
+}
+
+.nominee-viewed-photo {
+  width: 100%;
+  height: 320px;
+  object-fit: cover;
+  border: 0;
+  border-radius: 14px;
+  margin: 0 0 16px;
+  background: #eef3f8;
+}
+
+.nominee-photo-meta {
+  text-align: center;
+}
+
+.nominee-name {
+  font-size: 2rem;
+  font-weight: 700;
+  color: #17324d;
+}
+
+.nominee-subtitle {
+  margin-top: 4px;
+  font-size: 1.4rem;
+  color: #5f7388;
+}
+
+.detail-section {
+  flex: 1;
+  min-width: 0;
+}
+
+.nominee-summary-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 14px;
+  margin-bottom: 18px;
+}
+
+.summary-item {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 14px 16px;
+  border-radius: 14px;
+  background: #fff;
+  border: 1px solid #e5ebf3;
+  box-shadow: 0 8px 22px rgba(35, 64, 97, 0.06);
+}
+
+.summary-label {
+  font-size: 1.2rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: #6f8193;
+}
+
+.summary-value {
+  font-size: 1.6rem;
+  font-weight: 600;
+  line-height: 1.4;
+  color: #17324d;
+}
+
+.nominee-section-card {
+  margin-bottom: 16px;
+  padding: 18px 20px;
+  border-radius: 16px;
+  background: #fff;
+  border: 1px solid #e5ebf3;
+  box-shadow: 0 8px 22px rgba(35, 64, 97, 0.06);
+}
+
+.section-title {
+  margin-bottom: 12px;
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: #17324d;
+}
+
+.detail-list {
+  margin: 0;
+  padding-left: 20px;
+  color: #30475f;
+}
+
+.detail-list li {
+  margin-bottom: 8px;
+  line-height: 1.6;
+}
+
+.detail-empty {
+  margin: 0;
+  color: #6f8193;
+}
+
+.nominee-modal-content .modal-footer {
+  padding: 16px 24px 22px;
+  border-top: 1px solid #e7edf5;
+  background: #fff;
+}
+
+@media (max-width: 767px) {
+  .nominee-modal-backdrop {
+    align-items: flex-start;
+    overflow-y: auto;
+    padding: 16px 10px;
+  }
+
+  .nominee-modal-body {
+    flex-direction: column;
+    padding: 18px;
+  }
+
+  .photo-section {
+    flex: 1 1 auto;
+  }
+
+  .nominee-viewed-photo {
+    height: 260px;
+  }
+
+  .nominee-summary-grid {
+    grid-template-columns: 1fr;
+  }
 }
 
 .info-label {
@@ -425,7 +756,7 @@ export default {
   text-orientation: mixed;
   /* normal letters upright */
   font-weight: bold;
-  font-size:1.5rem;
+  font-size: 1.5rem;
   letter-spacing: 2px;
   /* space between letters */
   padding: 5px;
@@ -549,4 +880,58 @@ export default {
   /* icon size */
   font-weight: normal;
 }
+
+@media (max-width: 991px) {
+  .voter-home-page {
+    margin-top: 16px;
+  }
+
+  .hero-banner-image {
+    max-height: 300px;
+  }
+
+  .hero-banner-title {
+    font-size: 2.4rem;
+  }
+}
+
+@media (max-width: 767px) {
+  .hero-banner {
+    border-radius: 18px;
+  }
+
+  .hero-banner-image {
+    max-height: 240px;
+  }
+
+  .hero-banner-caption {
+    padding: 16px;
+    border-radius: 14px;
+  }
+
+  .hero-banner-title {
+    font-size: 2rem;
+  }
+
+  .hero-banner-subtitle {
+    font-size: 1.3rem;
+  }
+
+  .page-section-heading {
+    font-size: 1.6rem;
+  }
+
+  .nominee-panel-heading {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8px;
+  }
+
+  .nominee-table thead th:nth-child(4),
+  .nominee-table tbody td:nth-child(4),
+  .nominee-table thead th:nth-child(5),
+  .nominee-table tbody td:nth-child(5) {
+    display: none;
+  }
+}
 </style>

resources/assets/js/components/demo/voter/home/penyata.vue

@@ -8,7 +8,7 @@
           <img src="/images/logo-kopkb.jpeg" alt="KoPKB Logo" class="kopkb-logo" />
           <div>
             <h4 class="fw-bold mb-1">KOPERASI PERMODALAN KELANTAN BERHAD</h4>
-          <p style="font-size:13px; line-height:1.3; margin:0;">
+            <p style="font-size:13px; line-height:1.3; margin:0;">
               Lot PT 448, Tingkat 1, Jalan Kuala Krai, Batu 3, Wakaf Che Yeh, 15150 Kota Bharu, Kelantan<br />
               Tel: 09-7414339 | Website: www.koppkb.com
             </p>
@@ -102,8 +102,9 @@
       </tbody>
     </table>
 
-    <p class="mt-4">Sukacita dapat tuan/puan untuk mengesahkan baki tersebut dengan memasukkan No K/P anggota dan menekan butang SAHKAN
-       untuk tujuan audit tahunan koperasi sebelum <b>12-03-2026</b>.</p>
+    <p class="mt-4">Sukacita dapat tuan/puan untuk mengesahkan baki tersebut dengan memasukkan No K/P anggota dan
+      menekan butang SAHKAN
+      untuk tujuan audit tahunan koperasi sebelum <b>12-03-2026</b>.</p>
 
     <p class="mt-4">Dimaklumkan juga bahawa sekiranya kami tidak menerima pengesahan tuan/puan ke atas penyata ini
       dalam tempoh <strong>14 hari</strong> daripada tarikh surat ini, maka ia dianggap tuan/puan bersetuju
@@ -217,7 +218,7 @@
       </div>
     </div>
 
-     <!-- BUTTONS -->
+    <!-- BUTTONS -->
     <br>
     <div class="text-right mt-5 mb-3 no-print">
       <button class="btn btn-primary btn-effect" style="width:100px;" @click="SahkanPenyata"

resources/assets/js/components/demo/voter/home/vote.vue

@@ -1,37 +1,51 @@
 <template>
-	<div class="row col-md-10 col-md-offset-1">
-		<div class="col-md-4">
-			<h4>UNDIAN CALON ANGGOTA LEMBAGA</h4>
-			<hr />
-			<ul class="list-group">
-				<li class="list-group-item" v-for="position in data.positions">
-					<b>{{ position.name }} : </b>
-				</li>
-				<ul class="list-group">
-					<li class="list-group-item" v-for="nominee_id in selected[0].nominee_id">
-						<b> - [{{ getNomineeNo(nominee_id) }}] {{ getSelectedNomineeName(nominee_id) }}</b>
+	<div class="vote-page row col-md-10 col-md-offset-1">
+		<div class="col-md-4 vote-sidebar-column">
+			<div class="vote-summary-card">
+				<div class="vote-section-kicker">Ringkasan Undian</div>
+				<h4 class="vote-page-title">UNDIAN CALON ANGGOTA LEMBAGA</h4>
+				<p class="vote-page-subtitle">Semak calon yang telah dipilih sebelum menghantar undi anda.</p>
+				<div class="vote-limit-pill">
+					Anda hanya boleh memilih <b>satu (1) orang calon</b> sahaja.
+				</div>
+
+				<ul class="list-group vote-summary-list">
+					<li class="list-group-item vote-summary-item">
+						<div class="vote-position-name">Calon Dipilih</div>
+						<div v-if="selected[0] && selected[0].nominee_id.length" class="vote-selected-list">
+							<div class="vote-selected-item" v-for="nominee_id in selected[0].nominee_id" :key="nominee_id">
+								<span class="vote-selected-badge">#{{ getNomineeNo(nominee_id) }}</span>
+								<span>{{ getSelectedNomineeName(nominee_id) }}</span>
+							</div>
+						</div>
+						<div v-else class="vote-empty-selection">
+							Belum ada calon dipilih.
+						</div>
 					</li>
 
+					<li class="list-group-item vote-summary-action">
+						<button class="btn btn-success btn-block vote-submit-button" @click="checkUndi()">UNDI</button>
+					</li>
 				</ul>
-
-				<li class="list-group-item">
-					<center>
-						<button class="btn btn-success" @click="checkUndi()">UNDI</button>
-						<!-- <button class="btn btn-default" @click="reset()">Reset</button> -->
-					</center>
-				</li>
-			</ul>
-		</div>
-		<div class="col-md-8">
-			<h4>Senarai Calon</h4>
-			<div class="alert alert-warning " role="alert">
-				Anda hanya boleh memilih <b> satu (1) orang calon</b> sahaja.
 			</div>
-			<hr />
-			<div class="panel panel-info" v-for="position in data.positions">
-				<div class="panel-heading">{{ position.name }}</div>
-				<div class="panel-body table-responsive">
-					<table class="table table-hover">
+		</div>
+		<div class="col-md-8 vote-content-column">
+			<div class="vote-content-header">
+				<div>
+					<div class="vote-section-kicker">Senarai Calon</div>
+					<h4 class="vote-content-title">Pilih Calon Anda</h4>
+				</div>
+				<div class="alert alert-warning vote-alert" role="alert">
+					Anda hanya boleh memilih <b>satu (1) orang calon</b> sahaja.
+				</div>
+			</div>
+			<div class="panel panel-info vote-panel" v-for="position in data.positions" :key="position.id">
+				<div class="panel-heading vote-panel-heading">
+					<span>{{ position.name }}</span>
+					<span class="vote-panel-badge">Calon Aktif</span>
+				</div>
+				<div class="panel-body table-responsive vote-panel-body">
+					<table class="table table-hover vote-table">
 						<thead>
 							<tr>
 								<th></th>
@@ -43,13 +57,12 @@
 						</thead>
 						<tbody>
 							<tr v-for="(nominee, index) in data.nominees" v-if="nominee.position_id == position.id"
-								:key="nominee.id">
-								<td><input type="checkbox" :id="nominee.id" :disabled="disabledCheckboxes[index]"
+								:key="nominee.id" class="vote-row">
+								<td class="vote-checkbox-cell"><input type="checkbox" :id="nominee.id" :disabled="disabledCheckboxes[index]"
 										@change="vote(position.id, nominee.id)" />
 								</td>
 								<td>{{ nominee.no_calon }}</td>
-								<td><img @click="view(i)" :src="createBase64ImageUrl(nominee.photo)" class="thumbnail"
-										style="height: 60px;width: 60px;" />
+								<td><img @click="view(i)" :src="createBase64ImageUrl(nominee.photo)" class="thumbnail vote-nominee-photo" />
 								</td>
 								<td>{{ nominee.name }}</td>
 								<td>{{ nominee.unit }}</td>
@@ -60,20 +73,30 @@
 			</div>
 		</div>
 
-		<div class="modal" id="vote-modal" tabindex="-2" role="dialog" aria-labelledby="exampleModalLabel"
+		<div class="modal vote-confirm-modal" id="vote-modal" tabindex="-2" role="dialog" aria-labelledby="exampleModalLabel"
 			aria-hidden="true">
 			<div class="modal-dialog" role="document">
-				<div class="modal-content">
-					<div class="modal-header">
-						<h5 class="modal-title" id="exampleModalLabel"></h5>
+				<div class="modal-content vote-modal-content">
+					<div class="modal-header vote-modal-header">
+						<div>
+							<div class="vote-section-kicker">Pengesahan</div>
+							<h5 class="modal-title vote-modal-title" id="exampleModalLabel">Sahkan Undian Anda</h5>
+						</div>
 						<button type="button" class="close" data-dismiss="modal" aria-label="Close">
 							<span aria-hidden="true">&times;</span>
 						</button>
 					</div>
-					<div class="modal-body">
-						<h5>Nota: Sila pastikan anda telah membuat undian dengan betul.</h5>
+					<div class="modal-body vote-modal-body">
+						<h5 class="vote-modal-note">Nota: Sila pastikan anda telah membuat undian dengan betul.</h5>
+						<div class="vote-modal-selection" v-if="selected[0] && selected[0].nominee_id.length">
+							<div class="vote-modal-selection-title">Calon dipilih</div>
+							<div class="vote-selected-item" v-for="nominee_id in selected[0].nominee_id" :key="nominee_id">
+								<span class="vote-selected-badge">#{{ getNomineeNo(nominee_id) }}</span>
+								<span>{{ getSelectedNomineeName(nominee_id) }}</span>
+							</div>
+						</div>
 					</div>
-					<div class="modal-footer">
+					<div class="modal-footer vote-modal-footer">
 						<button type="button" class="btn btn-secondary" data-dismiss="modal">Tutup</button>
 						<button type="button" class="btn btn-primary" @click="submit()">Hantar</button>
 					</div>
@@ -261,3 +284,299 @@ export default {
 	}
 }
 </script>
+
+<style scoped>
+.vote-page {
+	margin-top: 18px;
+	margin-bottom: 36px;
+}
+
+.vote-sidebar-column,
+.vote-content-column {
+	margin-bottom: 24px;
+}
+
+.vote-summary-card {
+	padding: 22px 20px;
+	border-radius: 20px;
+	background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
+	border: 1px solid #e2ebf5;
+	box-shadow: 0 16px 34px rgba(35, 64, 97, 0.08);
+	position: sticky;
+	top: 120px;
+}
+
+.vote-section-kicker {
+	margin-bottom: 8px;
+	color: #2f80ed;
+	font-size: 1.2rem;
+	font-weight: 700;
+	letter-spacing: 0.08em;
+	text-transform: uppercase;
+}
+
+.vote-page-title,
+.vote-content-title {
+	margin: 0 0 8px;
+	color: #17324d;
+	font-weight: 700;
+}
+
+.vote-page-subtitle {
+	margin-bottom: 16px;
+	color: #5f7388;
+	line-height: 1.6;
+}
+
+.vote-limit-pill {
+	margin-bottom: 18px;
+	padding: 12px 14px;
+	border-radius: 12px;
+	background: #eef5ff;
+	border: 1px solid #d7e7ff;
+	color: #31506f;
+	line-height: 1.6;
+}
+
+.vote-summary-list {
+	margin-bottom: 0;
+}
+
+.vote-summary-item,
+.vote-summary-action {
+	border: 0;
+	border-bottom: 1px solid #edf2f7;
+	padding: 14px 0;
+	background: transparent;
+}
+
+.vote-summary-list .vote-summary-item:last-of-type {
+	border-bottom: 1px solid #edf2f7;
+}
+
+.vote-position-name {
+	margin-bottom: 10px;
+	color: #17324d;
+	font-size: 1.5rem;
+	font-weight: 700;
+}
+
+.vote-selected-list {
+	display: flex;
+	flex-direction: column;
+	gap: 10px;
+}
+
+.vote-selected-item {
+	display: flex;
+	align-items: center;
+	gap: 10px;
+	padding: 10px 12px;
+	border-radius: 12px;
+	background: #fff;
+	border: 1px solid #e6edf5;
+	color: #30475f;
+}
+
+.vote-selected-badge {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	min-width: 48px;
+	padding: 5px 10px;
+	border-radius: 999px;
+	background: #dcecff;
+	color: #1e5fbf;
+	font-size: 1.2rem;
+	font-weight: 700;
+}
+
+.vote-empty-selection {
+	color: #7a8ea3;
+	font-style: italic;
+}
+
+.vote-summary-action {
+	padding-top: 18px;
+	border-bottom: 0;
+}
+
+.vote-submit-button {
+	padding-top: 12px;
+	padding-bottom: 12px;
+	border-radius: 12px;
+	font-weight: 700;
+	letter-spacing: 0.04em;
+	box-shadow: 0 12px 24px rgba(40, 167, 69, 0.24);
+}
+
+.vote-content-header {
+	display: flex;
+	align-items: flex-start;
+	justify-content: space-between;
+	gap: 18px;
+	margin-bottom: 18px;
+}
+
+.vote-alert {
+	margin-bottom: 0;
+	border-radius: 12px;
+	box-shadow: 0 10px 24px rgba(255, 193, 7, 0.15);
+}
+
+.vote-panel {
+	margin-bottom: 20px;
+	border: 0;
+	border-radius: 18px;
+	overflow: hidden;
+	box-shadow: 0 16px 34px rgba(35, 64, 97, 0.1);
+}
+
+.vote-panel-heading {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: 16px 20px;
+	background: linear-gradient(135deg, #1d4e89, #2f80ed);
+	color: #fff !important;
+	font-size: 1.7rem;
+	font-weight: 700;
+}
+
+.vote-panel-badge {
+	padding: 6px 10px;
+	border-radius: 999px;
+	background: rgba(255, 255, 255, 0.18);
+	font-size: 1.2rem;
+	font-weight: 600;
+}
+
+.vote-panel-body {
+	padding: 0;
+	background: #fff;
+}
+
+.vote-table {
+	margin-bottom: 0;
+}
+
+.vote-table thead {
+	background: #f4f8fd;
+}
+
+.vote-table thead th {
+	border-bottom: 1px solid #dce7f5;
+	color: #48627e;
+	font-size: 1.25rem;
+	font-weight: 700;
+	text-transform: uppercase;
+	letter-spacing: 0.03em;
+}
+
+.vote-table tbody td {
+	vertical-align: middle;
+	border-top: 1px solid #edf2f7;
+	color: #22384f;
+}
+
+.vote-row {
+	transition: background-color 0.18s ease, box-shadow 0.18s ease;
+}
+
+.vote-row:hover {
+	background: #f8fbff;
+	box-shadow: inset 4px 0 0 #2f80ed;
+}
+
+.vote-checkbox-cell input[type="checkbox"] {
+	width: 18px;
+	height: 18px;
+	cursor: pointer;
+}
+
+.vote-nominee-photo {
+	width: 64px;
+	height: 64px;
+	margin-bottom: 0;
+	border-radius: 16px;
+	border: 2px solid #dbe8ff;
+	object-fit: cover;
+	box-shadow: 0 8px 18px rgba(47, 128, 237, 0.12);
+}
+
+.vote-modal-content {
+	border: 0;
+	border-radius: 18px;
+	overflow: hidden;
+	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.2);
+}
+
+.vote-modal-header {
+	padding: 18px 22px;
+	background: linear-gradient(135deg, #0d6efd, #2f80ed);
+	color: #fff;
+}
+
+.vote-modal-title {
+	margin: 4px 0 0;
+	font-size: 2rem;
+	font-weight: 700;
+}
+
+.vote-modal-header .close {
+	color: #fff;
+	opacity: 0.9;
+	text-shadow: none;
+}
+
+.vote-modal-body {
+	padding: 22px;
+	background: #f7fbff;
+}
+
+.vote-modal-note {
+	margin-top: 0;
+	margin-bottom: 14px;
+	color: #17324d;
+}
+
+.vote-modal-selection-title {
+	margin-bottom: 10px;
+	font-size: 1.4rem;
+	font-weight: 700;
+	color: #17324d;
+}
+
+.vote-modal-footer {
+	padding: 16px 22px 20px;
+	background: #fff;
+}
+
+@media (max-width: 991px) {
+	.vote-summary-card {
+		position: static;
+		top: auto;
+	}
+
+	.vote-content-header {
+		flex-direction: column;
+	}
+}
+
+@media (max-width: 767px) {
+	.vote-page {
+		margin-top: 8px;
+	}
+
+	.vote-panel-heading {
+		flex-direction: column;
+		align-items: flex-start;
+		gap: 8px;
+	}
+
+	.vote-table thead th:nth-child(5),
+	.vote-table tbody td:nth-child(5) {
+		display: none;
+	}
+}
+</style>

resources/assets/js/components/demo/voter/home/zoom.vue

@@ -1,144 +1,247 @@
 <template>
-    <div class="row col-md-10 col-md-offset-1">
-        <div class="col-md-12">
-         
-            <div class="centered-container">
-    <!-- <h6 class="text-center">Pautan Zoom</h6> -->
-    <div class="image-container">
-      <img :src="imageUrl" alt="meeting apps" />
-    </div>
-</div>
-
-            <div class="centered-container">
-    <h3>SELAMAT DATANG KE MESYUARAT AGUNG TAHUNAN
-        <br>  KoPKB <br>KALI KE-28/2024
-    </h3>
-
-    <div class="centered-button">
-        <button class="btn-interactive" @click="navigateToURL" target="_blank">
-            Klik pada pautan berikut
-        </button>
-    </div>
-</div>
-
-</div>
-
-<!-- 
-                    <div>
-                     <button class="centered-button" @click="handleClick">Klik pada pautan berikut >> </button>
-                    </div> -->
-
-             </div>
-
-       
+  <div class="row col-md-10 col-md-offset-1 zoom-page">
+    <div class="col-md-12">
+      <div class="zoom-hero-card">
+        <div class="zoom-section-kicker">Pautan Mesyuarat</div>
+        <h3 class="zoom-title">SELAMAT DATANG KE MESYUARAT AGUNG TAHUNAN</h3>
+        <p class="zoom-subtitle">
+          Sertai Mesyuarat Agung Tahunan KoPKB kali ke-28/2024 melalui pautan rasmi di bawah.
+        </p>
+      </div>
+
+      <div class="zoom-main-card">
+        <div class="centered-container zoom-image-section">
+          <div class="image-container zoom-image-card">
+            <img :src="imageUrl" alt="meeting apps" class="zoom-image" />
+          </div>
+        </div>
+
+        <div class="centered-container zoom-content-section">
+          <div class="zoom-meeting-badge">
+            KoPKB KALI KE-28/2024
+          </div>
+          <h4 class="zoom-content-title">Google Meet Rasmi</h4>
+          <p class="zoom-content-text">
+            Pastikan anda telah mendaftar kehadiran dan bersedia dengan sambungan internet yang stabil sebelum menyertai
+            mesyuarat.
+          </p>
+
+          <div class="zoom-action-panel">
+            <button class="btn-interactive" @click="navigateToURL" type="button">
+              <i class="fa fa-video-camera"></i> Klik pada pautan berikut
+            </button>
+            <div class="zoom-link-note">
+              Pautan akan dibuka terus ke sesi mesyuarat rasmi.
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
+  </div>
 </template>
 
 <script>
-
-
 export default {
-
-    methods: {
-    navigateToURL() {
-      // Navigate to the desired URL
-      window.location.href = 'https://meet.google.com/paa-tpck-ssq';
-    }
+  data() {
+    return {
+      imageUrl: 'https://th.bing.com/th/id/OIP.TGLvYXfe4xq5MTZe4UnTDgHaEy?w=255&h=180&c=7&r=0&o=5&dpr=1.8&pid=1.7',
+      meetingUrl: 'https://meet.google.com/paa-tpck-ssq'
+    };
   },
 
-    created: function () {
-        //console.log(this)
-    },
-
-    data: function () {
-        return {
-            x: {}
-        }
-    },
-
-    computed: {
-        header: function () {
-            return this.x.name + ' for ' + this.getPosition(this.x.position_id);
-        }
-    },
-
-    data() {
-    return {
-       imageUrl: 'https://th.bing.com/th/id/OIP.TGLvYXfe4xq5MTZe4UnTDgHaEy?w=255&h=180&c=7&r=0&o=5&dpr=1.8&pid=1.7'
+  methods: {
+    navigateToURL() {
+      window.open(this.meetingUrl, '_blank');
     }
-  
-    }
-
-   
-//     CustomButton {
-//   }
-//  methods: {
-//   goToDestination() {
-//     // Replace 'destinationURL' with the URL you want to navigate to
-//     window.location.href = 'https://us06web.zoom.us/j/87138156396?pwd=JEakXmAZjRnPeXbPN7K8ajnbL0X77a.1';
-//   }
-// }
+  }
 };
 </script>
 
 
-<style>
-  /* Ensure the page takes the full height of the viewport */
-  html, {
-    height: 100%;
-    margin: 0;
-    display: flex;
-    justify-content: center;
+<style scoped>
+.zoom-page {
+  font-family: Arial, sans-serif;
+  margin-top: 18px;
+  margin-bottom: 36px;
+}
+
+.zoom-hero-card {
+  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;
+}
+
+.zoom-section-kicker {
+  margin-bottom: 8px;
+  color: #2f80ed;
+  font-size: 1.2rem;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.zoom-title {
+  margin: 0 0 10px;
+  color: #17324d;
+  font-size: 2.8rem;
+  font-weight: 700;
+  line-height: 1.3;
+}
+
+.zoom-subtitle {
+  max-width: 720px;
+  margin: 0 auto;
+  color: #5f7388;
+  font-size: 1.5rem;
+  line-height: 1.6;
+}
+
+.zoom-main-card {
+  display: grid;
+  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
+  gap: 24px;
+  padding: 24px;
+  border-radius: 22px;
+  background: #fff;
+  border: 1px solid #e2ebf5;
+  box-shadow: 0 16px 34px rgba(35, 64, 97, 0.08);
+}
+
+.centered-container {
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  min-height: 40vh;
+}
+
+.zoom-image-card {
+  width: 100%;
+  overflow: hidden;
+  border-radius: 18px;
+  border: 1px solid #dbe7f3;
+  background: #f4f8fd;
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
+}
+
+.zoom-image {
+  width: 100%;
+  max-height: 420px;
+  object-fit: cover;
+  display: block;
+}
+
+.zoom-content-section {
+  align-items: flex-start;
+  text-align: left;
+}
+
+.zoom-meeting-badge {
+  margin-bottom: 12px;
+  padding: 8px 12px;
+  border-radius: 999px;
+  background: #e8f1ff;
+  color: #215db8;
+  font-size: 1.2rem;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+}
+
+.zoom-content-title {
+  margin: 0 0 10px;
+  color: #17324d;
+  font-size: 2.4rem;
+  font-weight: 700;
+}
+
+.zoom-content-text {
+  margin-bottom: 18px;
+  color: #5f7388;
+  font-size: 1.5rem;
+  line-height: 1.7;
+}
+
+.zoom-action-panel {
+  width: 100%;
+  padding: 18px;
+  border-radius: 18px;
+  background: linear-gradient(180deg, #f8fbff 0%, #eef6ff 100%);
+  border: 1px solid #d9e8fb;
+  box-shadow: 0 12px 28px rgba(35, 64, 97, 0.07);
+}
+
+.btn-interactive {
+  padding: 14px 26px;
+  background: linear-gradient(135deg, #0d6efd, #2f80ed);
+  color: white;
+  border: none;
+  border-radius: 999px;
+  font-size: 16px;
+  font-weight: bold;
+  cursor: pointer;
+  transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease;
+  outline: none;
+  box-shadow: 0 12px 24px rgba(13, 110, 253, 0.25);
+}
+
+.btn-interactive:hover {
+  transform: scale(1.05);
+  box-shadow: 0 16px 28px rgba(13, 110, 253, 0.3);
+}
+
+.btn-interactive:active {
+  transform: scale(0.98);
+}
+
+.btn-interactive:focus {
+  outline: none;
+  box-shadow: 0 0 5px 2px rgba(0, 123, 255, 0.5);
+}
+
+.zoom-link-note {
+  margin-top: 12px;
+  color: #5f7388;
+  font-size: 1.3rem;
+}
+
+@media (max-width: 991px) {
+  .zoom-main-card {
+    grid-template-columns: 1fr;
+  }
+
+  .zoom-content-section {
     align-items: center;
-    font-family: Arial, sans-serif; /* Optional: for a cleaner font */
+    text-align: center;
+  }
+}
+
+@media (max-width: 767px) {
+  .zoom-hero-card,
+  .zoom-main-card {
+    padding: 18px;
+    border-radius: 16px;
   }
 
-  /* Center the container */
-  .centered-container {
-    text-align: center; /* Center the text horizontally */
-    display: flex;
-    flex-direction: column; /* Stack the elements vertically */
-    justify-content: center;
-    align-items: center;
-    height: 100%; /* Full viewport height */
+  .zoom-title {
+    font-size: 2.2rem;
   }
 
-  /* Styling for the heading */
-  h3 {
-    font-size: 24px; /* Optional: set a specific font size */
-    font-weight: bold; /* Optional: make the heading bold */
-    margin-bottom: 20px; /* Optional: space between heading and button */
+  .zoom-subtitle,
+  .zoom-content-text {
+    font-size: 1.35rem;
+  }
+
+  .zoom-content-title {
+    font-size: 2rem;
   }
 
-  /* Styling for the button */
   .btn-interactive {
-    padding: 12px 25px;
-    background-color: #007bff; /* Blue background color */
-    color: white;
-    border: none;
-    border-radius: 5px; /* Rounded corners */
-    font-size: 16px;
-    font-weight: bold;
-    cursor: pointer;
-    transition: background-color 0.3s ease, transform 0.2s ease;
-    outline: none; /* Remove outline */
-  }
-
-  /* Hover effect for the button */
-  .btn-interactive:hover {
-    background-color: #0056b3; /* Darker blue background on hover */
-    transform: scale(1.05); /* Slightly enlarge the button on hover */
-  }
-
-  /* Active effect for when the button is clicked */
-  .btn-interactive:active {
-    background-color: #004085; /* Even darker blue when clicked */
-    transform: scale(0.98); /* Slightly shrink the button when clicked */
-  }
-
-  /* Focus effect (when tabbing through elements) */
-  .btn-interactive:focus {
-    outline: none;
-    box-shadow: 0 0 5px 2px rgba(0, 123, 255, 0.5); /* Blue glow on focus */
+    width: 100%;
   }
+}
 </style>

resources/assets/js/components/demo/voter/index.vue

@@ -1,16 +1,17 @@
 <template>
 	<div>
 		<div v-if="!loading">
-			<nav class="navbar navbar-default navbar-fixed-top" id="nav">
+			<nav class="navbar navbar-default navbar-fixed-top floating-header logo-header" id="nav">
 				<div class="container">
-					<div class="navbar-header">
+					<div class="navbar-header logo-section">
 						<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
 							<span class="icon-bar"></span>
 							<span class="icon-bar"></span>
 							<span class="icon-bar"></span>
 						</button>
-						<a class="navbar-brand" :href="data.baseURL"><img src='/images/mykopkb.png' border='0'
-								width="150" height="auto" alt="MyKoPKB Logo"></a>
+						<a class="navbar-brand" :href="data.baseURL">
+							<img src='/images/mykopkb.png' border='0' width="150" height="auto" alt="MyKoPKB Logo">
+						</a>
 					</div>
 					<div class="collapse navbar-collapse" id="myNavbar">
 
@@ -20,9 +21,11 @@
 								<a href="#"><b>LAMAN UTAMA</b></a>
 							</router-link>
 
-							<router-link :to="{ name: 'Mat' }" tag="li" exact>
-								<a href="#"><b>MAT KE-28</b></a>
-							</router-link>
+							<li>
+								<a :href="matLinkUrl" target="_blank" rel="noopener noreferrer">
+									<b>MAT KE-28</b> <i class="fa fa-external-link"></i>
+								</a>
+							</li>
 
 							<router-link :to="{ name: 'Attendance' }" tag="li" exact>
 								<a href="#"><b>DAFTAR MAT</b></a>
@@ -38,7 +41,8 @@
 								<a href="#"><b>PAUTAN MESYUARAT</b></a>
 							</router-link>
 
-							<router-link :to="{ name: 'penyata', params: { no_anggota: data.user.no_anggota } }" tag="li" exact>
+							<router-link :to="{ name: 'penyata', params: { no_anggota: data.user.no_anggota } }"
+								tag="li" exact>
 								<a href="#"><b>PENYATA AHLI</b></a>
 							</router-link>
 
@@ -59,7 +63,9 @@
 				</div>
 			</nav>
 
-			<router-view></router-view>
+			<div class="voter-main">
+				<router-view></router-view>
+			</div>
 		</div>
 		<div v-else class="container">
 			<div class="jumbotron">
@@ -72,7 +78,8 @@
 <script>
 export default {
 	data: () => ({
-		loading: true
+		loading: true,
+		matLinkUrl: 'https://linktr.ee/kopkb'
 	}),
 
 	created: function () {
@@ -117,46 +124,193 @@ export default {
 
 
 <style scoped>
-body {
-	padding: 70px 5px;
+.floating-header {
+	position: fixed !important;
+	top: 16px !important;
+	left: 16px !important;
+	right: 16px !important;
+	width: calc(100% - 32px) !important;
+	margin: 0;
+	border-radius: 16px !important;
+	z-index: 2000 !important;
+	transition: all 0.3s ease !important;
+}
+
+.logo-header {
+	background: linear-gradient(135deg,
+			rgba(255, 255, 255, 0.96) 0%,
+			rgb(8, 0, 126) 48%,
+			rgb(255, 0, 0) 100%) !important;
+	border: 1px solid rgba(255, 255, 255, 0.25) !important;
+	box-shadow:
+		0 8px 32px rgba(33, 150, 243, 0.35),
+		0 4px 16px rgba(2, 19, 36, 0.28) !important;
+	backdrop-filter: blur(12px) !important;
+	position: fixed;
+	overflow: visible;
+}
+
+.logo-header::before {
+	content: '';
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, transparent 50%, rgba(255, 255, 255, 0.05) 100%);
+	pointer-events: none;
+	z-index: 0;
+}
+
+.logo-header>* {
+	position: relative;
+	z-index: 1;
+}
+
+.logo-section {
+	display: flex;
+	align-items: center;
+	margin-right: 24px;
+	margin-left: 24px;
+	flex-shrink: 0;
 }
 
-/* Change navbar background color */
 #nav.navbar {
-	background-color: #021324;
-	/* Dark blue/gray background */
 	border: none;
+	min-height: 78px;
+}
+
+#nav .container {
+	width: 100%;
+	padding-left: 12px;
+	padding-right: 12px;
+	overflow: visible;
+}
+
+#nav .navbar-brand {
+	display: flex;
+	align-items: center;
+	gap: 12px;
+	height: auto;
+	padding: 14px 0;
+	color: #1f2937;
+	font-weight: 700;
+	text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
+}
+
+.logo-title {
+	display: inline-block;
+	color: #1f2937 !important;
+	font-size: 1.8rem;
+	font-weight: 700;
+	text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
 }
 
-/* Change navbar link text color */
 #nav .nav>li>a,
-#nav .navbar-brand,
 #nav .navbar-toggle {
-	color: #f39c12;
-	/* Light gray text */
+	color: #f8fbff;
+	font-weight: 700;
+	letter-spacing: 0.02em;
 }
 
-/* Hover effect */
 #nav .nav>li>a:hover,
+#nav .nav>li.active>a,
+#nav .nav>li.active>a:hover,
+#nav .nav>li.active>a:focus,
 #nav .navbar-brand:hover {
-	color: #f39c12;
-	/* Gold/yellow on hover */
+	color: #fff;
+	background: rgba(204, 0, 0, 0.833);
+}
+
+#nav .nav>li>a {
+	border-radius: 10px;
+	margin-top: 18px;
+	margin-bottom: 18px;
+	padding-top: 12px;
+	padding-bottom: 12px;
+}
+
+#nav .navbar-right {
+	margin-right: 8px;
+}
+
+#nav .navbar-nav>li,
+#nav .dropdown {
+	position: relative;
+}
+
+#nav .dropdown-menu {
+	margin-top: 6px;
+	border: 0;
+	border-radius: 12px;
+	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.16);
+	z-index: 2101;
 }
 
-/* Dropdown text color */
 #nav .dropdown-menu>li>a {
 	color: #2c3e50;
-	/* Dark text in dropdown */
 }
 
-/* Dropdown hover */
 #nav .dropdown-menu>li>a:hover {
 	background-color: #f39c12;
 	color: white;
 }
 
+#nav .navbar-toggle {
+	margin-top: 20px;
+	margin-right: 18px;
+	border-color: rgba(255, 255, 255, 0.35);
+	background: rgba(255, 255, 255, 0.08);
+}
+
+#nav .navbar-toggle .icon-bar {
+	background-color: #fff;
+}
+
 .navbar-brand img {
 	background: transparent !important;
 	box-shadow: none;
 }
+
+.voter-main {
+	padding-top: 112px;
+}
+
+@media (max-width: 767px) {
+	.floating-header {
+		top: 10px !important;
+		left: 10px !important;
+		right: 10px !important;
+		width: calc(100% - 20px) !important;
+		border-radius: 14px !important;
+	}
+
+	.logo-section {
+		margin-left: 16px;
+		margin-right: 8px;
+	}
+
+	.logo-title {
+		font-size: 1.4rem;
+	}
+
+	#nav .navbar-brand img {
+		width: 120px;
+	}
+
+	#nav .navbar-collapse {
+		border-top: 0;
+		box-shadow: none;
+		padding-bottom: 12px;
+		overflow: visible;
+	}
+
+	#nav .nav>li>a {
+		margin: 4px 10px;
+	}
+
+	.voter-main {
+		padding-top: 102px;
+	}
+}
 </style>

resources/assets/js/components/demo/voter/login.vue

@@ -49,7 +49,14 @@
 		  .then(response => {
 			this.stopLoading();
 			if (this.util.showResult(response, 'success')) {
-			  this.$router.push({ name: 'Voter Verify', params: { 'nokp': response.data.nokp, 'notel': response.data.notel } });
+			  this.$router.push({
+				name: 'Voter Verify',
+				params: {
+				  'nokp': response.data.nokp,
+				  'notel': response.data.notel,
+				  'debug_otp': response.data.debug_otp || null
+				}
+			  });
 			}
 		  })
 		  .catch(error => {

resources/assets/js/components/demo/voter/verification.vue

@@ -13,6 +13,14 @@
             <br>-<b>+6 {{ $route.params.notel }}</b>
           </div>
 
+          <div
+            v-if="showDebugOtp"
+            class="alert alert-info"
+            style="margin-bottom:20px;"
+          >
+            OTP local development: <b>{{ $route.params.debug_otp }}</b>
+          </div>
+
           <div class="justify-content-center d-flex" style="margin-top:20px;margin-bottom:20px;display: flex;flex-direction: row;justify-content: center;align-items: center;">
             <v-otp-input
               ref="otpInput"
@@ -58,6 +66,11 @@ export default {
 			loading: false
 		}
 	},
+  computed: {
+    showDebugOtp: function () {
+      return process.env.NODE_ENV !== 'production' && !!this.$route.params.debug_otp;
+    }
+  },
 
   created: function(){
     console.log(this.$route.params.notel);

resources/assets/js/components/mycomponents/modal/modal.vue

@@ -1,5 +1,5 @@
 <template>
-<div class="modal fade" v-bind:id="id" role="dialog">
+<div class="modal fade app-modal" v-bind:id="id" role="dialog">
     <div class="modal-dialog">
         <div class="modal-content" :class="aClass">
             <slot></slot>
@@ -15,6 +15,18 @@
 </script>
 
 <style>
+.app-modal{
+	z-index: 2200;
+}
+
+.app-modal .modal-dialog{
+	margin-top: 110px;
+}
+
+.modal-backdrop{
+	z-index: 2190 !important;
+}
+
 .primary{
 	background-color: #337ab7;
 	color: #fff;

resources/assets/js/customComponents.js

@@ -1,7 +1,12 @@
-//Global Components
-Vue.component('modal', require('./components/mycomponents/modal/modal.vue'))
-Vue.component('modal-header', require('./components/mycomponents/modal/header.vue'));
-Vue.component('modal-body', require('./components/mycomponents/modal/body.vue'));
-Vue.component('modal-footer', require('./components/mycomponents/modal/footer.vue'));
+// Global components compiled by webpack may expose the Vue component under
+// `.default`, so normalize both CommonJS and ES module shapes here.
+const resolveComponent = function (component) {
+	return component.default || component;
+}
 
-Vue.component('uploader', require('./components/mycomponents/uploader.vue'));
+Vue.component('modal', resolveComponent(require('./components/mycomponents/modal/modal.vue')));
+Vue.component('modal-header', resolveComponent(require('./components/mycomponents/modal/header.vue')));
+Vue.component('modal-body', resolveComponent(require('./components/mycomponents/modal/body.vue')));
+Vue.component('modal-footer', resolveComponent(require('./components/mycomponents/modal/footer.vue')));
+
+Vue.component('uploader', resolveComponent(require('./components/mycomponents/uploader.vue')));

resources/views/index.blade.php

@@ -21,8 +21,6 @@
 
     <div id="error"></div>
 
-    
-
     <script>
         window.config = {
             "API": "/api/v1/", //URL OF YOUR API LOCATED
@@ -49,26 +47,36 @@
     <script src="https://cdn.jsdelivr.net/npm/vue-router@3.4.9/dist/vue-router.min.js"></script>
     <script src="/js/app.js"></script>
     <!-- Bootstrap CSS -->
+
+    <footer class="bg-body-tertiary text-center text-lg-start">
+        <div class="text-muted">
+          <b>Koperasi Permodalan Kelantan Berhad © {{ date('Y') }} All Right Reserved</b>
+          <a class="text-body" href="https://koppkb.com"></a>
+        </div>
+    </footer>
    
 </body>
-<footer class="bg-body-tertiary text-center text-lg-start">
-    <!-- Copyright -->
-    <div class="text-center py-4" style="background-color: rgba(0, 0, 0, 0.05);">
-      <b>Koperasi Permodalan Kelantan Berhad © 2026 All Right Reserved</b>
-      <a class="text-body" href="https://koppkb.com"></a>
-    </div>
-    <!-- Copyright -->
-  </footer>
 
   <style>
 
+html,
+body {
+    min-height: 100%;
+}
+
+body {
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+}
+
+#app {
+    flex: 1 0 auto;
+}
+
 footer {
-    position: fixed;
-    left: 0;
-    bottom: 0;
+    margin-top: auto;
     width: 100%;
-    /* padding: 40px 0; */
-   
 }