diff --git a/resources/assets/js/components/demo/admin/voter/fizikal.vue b/resources/assets/js/components/demo/admin/voter/fizikal.vue
new file mode 100644
index 0000000..a12e4b2
--- /dev/null
+++ b/resources/assets/js/components/demo/admin/voter/fizikal.vue
@@ -0,0 +1,152 @@
+<template>
+    <div class="panel panel-default">
+        <div class="panel-body">
+            <h4>Kedatangan Fizikal</h4>
+
+            <div class="table-responsive">
+                <table class="table table-hover">
+                    <thead>
+                        <tr>
+                            <th>Bil.</th>
+                            <th>Nama Anggota</th>
+                            <th>No. Kad Pengenalan</th>
+                            <th>No. Anggota</th>
+                            <th>Unit</th>
+                            <th>Kehadiran</th>
+                            <th>Tarikh/Masa</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <!-- Display only physical attendees -->
+                        <template v-for="(voter, i) in filteredPhysicalAttendees">
+                            <tr>
+                                <td>{{ i + 1 }}</td> <!-- Display the serial number -->
+                                <td>{{ voter.name }}</td>
+                                <td>{{ voter.no_kp }}</td>
+                                <td>{{ voter.no_anggota }}</td>
+                                <td>{{ voter.unit }}</td>
+                                <td>{{ getKehadiranString(voter.kehadiran) }}</td>
+                                <td>{{ voter.updated_at }}</td>
+                            </tr>
+                        </template>
+                    </tbody>
+                </table>
+            </div>
+
+            <!-- Display attendance percentage -->
+            <div class="text-right">
+                <h5><b>{{ attendancePercentage }}% Kehadiran Pengundi Fizikal</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>
+                    <a href="#">{{ page['page'] }}</a>
+                </router-link>
+            </ul>
+        </div>
+    </div>
+</template>
+
+<script>
+
+export default {
+    data: function () {
+        return {
+            id: 0
+        }
+    },
+
+    created: function () {
+        this.refreshVoter();
+    },
+
+    methods: {
+        search: function () {
+
+        },
+
+        refreshVoter: function () {
+            var vm = this;
+            this.util.notify('Refreshing Voter', 'loading');
+            axios.get(config.API + 'voter?page=' + this.current_page)
+                .then(response => {
+                    console.log(response)
+                    $.notifyClose();
+                    vm.data.voters = response.data;
+                })
+                .catch(error => {
+                    $.notifyClose();
+                    vm.util.showResult(error);
+                })
+        },
+
+        getKehadiranString(kehadiran) {
+            // Map integer values to corresponding string representations
+            switch (kehadiran) {
+                case 1:
+                    return 'Fizikal';
+                case 2:
+                    return 'Maya';
+                default:
+                    return '-';
+            }
+        },
+
+        // downloadPDF() {
+        //     const table = document.getElementById('voterTable');
+
+        //     html2canvas(table).then(canvas => {
+        //         const imgData = canvas.toDataURL('image/png');
+        //         const pdf = new jsPDF();
+        //         pdf.addImage(imgData, 'PNG', 0, 0);
+        //         pdf.save('kehadiran-pengundi.pdf');
+        //     });
+        // },
+
+    },
+
+    watch: {
+        '$route.query.page': function () {
+            $.notifyClose();
+            this.refreshVoter();
+        }
+    },
+
+    computed: {
+        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);
+                }
+            return pages;
+        },
+
+        current_page: function () {
+            return this.$route.query.page ? this.$route.query.page : 1;
+        },
+
+        // Calculate total attendance percentage
+        attendancePercentage() {
+            // Count total physical attendees
+            const fizikalCount = this.data.voters.data.reduce((total, voter) => {
+                return voter.kehadiran === 1 ? total + 1 : total;
+            }, 0);
+
+            // Total members who attended physically
+            const totalMembers = this.data.voters.data.length;
+
+            // Calculate the percentage only if there are physical attendees
+            return totalMembers === 0 ? 0 : ((fizikalCount / totalMembers) * 100).toFixed(2);
+        },
+
+        filteredPhysicalAttendees() {
+            return this.data.voters.data.filter(voter => voter.kehadiran === 1);
+        }
+    }
+
+}
+</script>
\ No newline at end of file
diff --git a/resources/assets/js/components/demo/admin/voter/kehadiran.vue b/resources/assets/js/components/demo/admin/voter/kehadiran.vue
index efe3421..fc71bb3 100644
--- a/resources/assets/js/components/demo/admin/voter/kehadiran.vue
+++ b/resources/assets/js/components/demo/admin/voter/kehadiran.vue
@@ -5,9 +5,17 @@
 				<i class="fa fa-refresh"></i> Kemaskini Pengundi
 			</button>
 
-			<button class="btn btn-primary" @click="downloadPDF()">
-				<i class="fa fa-download"></i> Muat Turun PDF
-			</button>
+			<router-link class="btn btn-info" :to="{ name: 'Fizikal' }" >
+				 Fizikal
+			</router-link>
+
+			<router-link class="btn btn-info" :to="{ name: 'Maya' }" >
+				 Maya
+			</router-link>
+			
+			<!-- <button class="btn btn-primary" @click="downloadPDF()">
+                <i class="fa fa-download"></i> Muat Turun PDF
+            </button> -->
 
 
 			<div class="table-responsive">
diff --git a/resources/assets/js/components/demo/admin/voter/maya.vue b/resources/assets/js/components/demo/admin/voter/maya.vue
new file mode 100644
index 0000000..e16650d
--- /dev/null
+++ b/resources/assets/js/components/demo/admin/voter/maya.vue
@@ -0,0 +1,167 @@
+<template>
+    <div class="panel panel-default">
+        <div class="panel-body">
+            <h4>Kedatangan Maya</h4>
+
+            <div class="table-responsive">
+                <table class="table table-hover">
+                    <thead>
+                        <tr>
+                            <th>Bil.</th>
+                            <th>Nama Anggota</th>
+                            <th>No. Kad Pengenalan</th>
+                            <th>No. Anggota</th>
+                            <th>Unit</th>
+                            <th>Kehadiran</th>
+                            <th>Tarikh/Masa</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <!-- Display only physical attendees -->
+                        <template v-for="(voter, i) in filteredMayaAttendees">
+                            <tr>
+                                <td>{{ i + 1 }}</td> <!-- Display the serial number -->
+                                <td>{{ voter.name }}</td>
+                                <td>{{ voter.no_kp }}</td>
+                                <td>{{ voter.no_anggota }}</td>
+                                <td>{{ voter.unit }}</td>
+                                <td>{{ getKehadiranString(voter.kehadiran) }}</td>
+                                <td>{{ voter.updated_at }}</td>
+                            </tr>
+                        </template>
+                    </tbody>
+                </table>
+            </div>
+
+            <!-- Display attendance percentage -->
+            <div class="text-right">
+                <h5><b>{{ mayaAttendancePercentage }}% Kehadiran Maya</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>
+                    <a href="#">{{ page['page'] }}</a>
+                </router-link>
+            </ul>
+        </div>
+    </div>
+</template>
+
+<script>
+
+export default {
+    data: function () {
+        return {
+            id: 0
+        }
+    },
+
+    created: function () {
+        this.refreshVoter();
+    },
+
+    methods: {
+        search: function () {
+
+        },
+
+        refreshVoter: function () {
+            var vm = this;
+            this.util.notify('Refreshing Voter', 'loading');
+            axios.get(config.API + 'voter?page=' + this.current_page)
+                .then(response => {
+                    console.log(response)
+                    $.notifyClose();
+                    vm.data.voters = response.data;
+                })
+                .catch(error => {
+                    $.notifyClose();
+                    vm.util.showResult(error);
+                })
+        },
+
+        getKehadiranString(kehadiran) {
+            // Map integer values to corresponding string representations
+            switch (kehadiran) {
+                case 1:
+                    return 'Fizikal';
+                case 2:
+                    return 'Maya';
+                default:
+                    return '-';
+            }
+        },
+
+        // downloadPDF() {
+        //     const table = document.getElementById('voterTable');
+
+        //     html2canvas(table).then(canvas => {
+        //         const imgData = canvas.toDataURL('image/png');
+        //         const pdf = new jsPDF();
+        //         pdf.addImage(imgData, 'PNG', 0, 0);
+        //         pdf.save('kehadiran-pengundi.pdf');
+        //     });
+        // },
+
+    },
+
+    watch: {
+        '$route.query.page': function () {
+            $.notifyClose();
+            this.refreshVoter();
+        }
+    },
+
+    computed: {
+        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);
+                }
+            return pages;
+        },
+
+        current_page: function () {
+            return this.$route.query.page ? this.$route.query.page : 1;
+        },
+
+        // Calculate total attendance percentage
+        mayaAttendancePercentage() {
+            // 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 for Maya attendees
+            const totalMembers = this.data.voters.data.length;
+            return totalMembers === 0 ? 0 : ((mayaCount / totalMembers) * 100).toFixed(2);
+        },
+
+        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);
+        },
+        filteredMayaAttendees() {
+            // Filter Maya attendees
+            return this.data.voters.data.filter(voter => voter.kehadiran === 2);
+        },
+    }
+
+}
+</script>
\ No newline at end of file