diff --git a/resources/assets/js/components/demo/admin/voter/kehadiran.vue b/resources/assets/js/components/demo/admin/voter/kehadiran.vue
index 5e5820b..e6033f4 100644
--- a/resources/assets/js/components/demo/admin/voter/kehadiran.vue
+++ b/resources/assets/js/components/demo/admin/voter/kehadiran.vue
@@ -33,6 +33,11 @@
 				</table>
 			</div>
 
+			<!-- Display attendance percentage -->
+			<div class="text-right">
+				<h5><b>{{ attendancePercentage }}% Kehadiran Pengundi</b></h5>
+			</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>
@@ -110,7 +115,26 @@ export default {
 
 		current_page: function () {
 			return this.$route.query.page ? this.$route.query.page : 1;
+		},
+
+		// Calculate total attendance percentage
+		attendancePercentage() {
+			// Count total members who attended physically (Fizikal)
+			const fizikalCount = this.data.voters.data.reduce((total, voter) => {
+				return voter.kehadiran === 1 ? total + 1 : total;
+			}, 0);
+
+			// Count total members who attended virtually (Maya)
+			const mayaCount = this.data.voters.data.reduce((total, voter) => {
+				return voter.kehadiran === 2 ? total + 1 : total;
+			}, 0);
+
+			// Calculate total attendance percentage
+			const totalAttendance = fizikalCount + mayaCount;
+			const totalMembers = this.data.voters.data.length;
+			return totalMembers === 0 ? 0 : ((totalAttendance / totalMembers) * 100).toFixed(2);
 		}
 	}
+
 }
 </script>
\ No newline at end of file