Allowance check

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

@@ -1,14 +1,55 @@
 <template>
-<div class="container col-md-8 col-md-offset-2">
-	<h4>Maklumat Pengundi</h4>
-	<router-view></router-view>
-</div>
+	<div :class="wrapperClass">
+		<h4 v-if="showHeader">{{ headerTitle }}</h4>
+		<router-view></router-view>
+	</div>
 </template>
 
 <script>
-export default{
+export default {
+	computed: {
+		showHeader: function () {
+			// Keep header hidden only for "Tambah Pengundi" (it has its own page header)
+			return this.$route.name !== 'Tambah Pengundi';
+		},
+		headerTitle: function () {
+			if (this.$route.name === 'Kehadiran Calon') return 'Kehadiran';
+			return 'Maklumat Pengundi';
+		},
+		isWideVoterRoute: function () {
+			// Give more room for heavy pages, but keep it boxed (not edge-to-edge)
+			return this.$route.name === 'Tambah Pengundi'
+				|| this.$route.name === 'Kehadiran Calon';
+		},
+		wrapperClass: function () {
+			if (this.isWideVoterRoute) {
+				return 'container-fluid voter-admin-wrap voter-admin-wrap--boxed voter-admin-wrap--wide';
+			}
+			return 'container col-md-8 col-md-offset-2 voter-admin-wrap voter-admin-wrap--boxed';
+		}
+	},
 	created: function () {
 		this.util.setTitle('MyKoPKB - Maklumat Pengundi');
 	}
 }
-</script> 
+</script>
+
+<style>
+/* Boxed card-style wrapper for all voter admin pages */
+.voter-admin-wrap--boxed {
+	background: #fff;
+	border: 1px solid #e6e6e6;
+	border-radius: 12px;
+	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
+	padding: 16px;
+	margin-top: 12px;
+	margin-bottom: 24px;
+}
+
+/* Wide pages: not full screen, but wider than centered 8-col layout */
+.voter-admin-wrap--wide {
+	max-width: 1400px;
+	margin-left: auto;
+	margin-right: auto;
+}
+</style>