feat(security): add role-based access control to check-in scanner

buzz/events/doctype/buzz_event/buzz_event.py

@@ -12,10 +12,11 @@ class BuzzEvent(Document):
 	from typing import TYPE_CHECKING
 
 	if TYPE_CHECKING:
+		from frappe.types import DF
+
 		from buzz.events.doctype.event_featured_speaker.event_featured_speaker import EventFeaturedSpeaker
 		from buzz.events.doctype.schedule_item.schedule_item import ScheduleItem
 		from buzz.proposals.doctype.sponsorship_deck_item.sponsorship_deck_item import SponsorshipDeckItem
-		from frappe.types import DF
 
 		about: DF.TextEditor | None
 		auto_send_pitch_deck: DF.Check

dashboard/components.d.ts

@@ -22,6 +22,7 @@ declare module 'vue' {
     EventDetailsHeader: typeof import('./src/components/EventDetailsHeader.vue')['default']
     EventSelector: typeof import('./src/components/EventSelector.vue')['default']
     EventSponsorForm: typeof import('./src/components/EventSponsorForm.vue')['default']
+    LucideShieldX: typeof import('~icons/lucide/shield-x')['default']
     Navbar: typeof import('./src/components/Navbar.vue')['default']
     ProfileView: typeof import('./src/components/ProfileView.vue')['default']
     QRScanner: typeof import('./src/components/QRScanner.vue')['default']

dashboard/src/pages/CheckInScanner.vue

@@ -11,8 +11,30 @@
 			</div>
 		</div>
 
+		<!-- Access Denied Message -->
+		<div
+			v-if="!hasRequiredRole"
+			class="size-full flex justify-center items-center p-6 text-center min-h-[50vh]"
+		>
+			<div class="flex flex-col items-center space-y-4">
+				<div
+					class="w-16 h-16 bg-red-100 dark:bg-red-900/20 rounded-full flex items-center justify-center"
+				>
+					<LucideShieldX class="w-8 h-8 text-red-600 dark:text-red-400" />
+				</div>
+				<div>
+					<h4 class="text-lg font-medium text-gray-900 dark:text-white mb-2">
+						Access Denied
+					</h4>
+					<p class="text-gray-600 dark:text-gray-400">
+						You don't have the required permissions to access the ticket scanner.
+					</p>
+				</div>
+			</div>
+		</div>
+
 		<!-- Main Content -->
-		<div class="size-full px-4 py-6">
+		<div v-else class="size-full px-4 py-6">
 			<!-- Event Selection -->
 			<EventSelector
 				v-if="!selectedEvent"
@@ -62,11 +84,20 @@
 
 <script setup>
 import { Button } from "frappe-ui";
-import { ref } from "vue";
+import { computed, onMounted, ref } from "vue";
 import EventSelector from "../components/EventSelector.vue";
 import QRScanner from "../components/QRScanner.vue";
 import TicketDetailsModal from "../components/TicketDetailsModal.vue";
 import { useTicketValidation } from "../composables/useTicketValidation.js";
+import LucideShieldX from "~icons/lucide/shield-x";
+import { userResource } from "../data/user.js";
+
+const userProfile = ref({});
+
+const hasRequiredRole = computed(() => {
+	if (!userProfile.value || !userProfile.value.roles) return false;
+	return userProfile.value.roles.some((role) => role.role === "Frontdesk Manager");
+});
 
 const { validationResult, clearResults } = useTicketValidation();
 
@@ -84,4 +115,8 @@ const clearEventSelection = () => {
 	selectedEvent.value = null;
 	clearResults();
 };
+
+onMounted(() => {
+	userProfile.value = { ...userResource.data };
+});
 </script>