diff --git a/apps/app/src/stores/useShiftDetailStore.ts b/apps/app/src/stores/useShiftDetailStore.ts
new file mode 100644
index 00000000..57986bef
--- /dev/null
+++ b/apps/app/src/stores/useShiftDetailStore.ts
@@ -0,0 +1,53 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+import type { ShiftAssignment } from '@/types/shiftAssignment'
+import { ShiftAssignmentStatus } from '@/types/shiftAssignment'
+
+export const useShiftDetailStore = defineStore('shiftDetail', () => {
+  const isOpen = ref(false)
+  const selectedShiftId = ref<string | null>(null)
+  const selectedSectionId = ref<string | null>(null)
+  const selectedAssignmentIds = ref<string[]>([])
+
+  function openPanel(shiftId: string, sectionId: string) {
+    selectedShiftId.value = shiftId
+    selectedSectionId.value = sectionId
+    selectedAssignmentIds.value = []
+    isOpen.value = true
+  }
+
+  function closePanel() {
+    isOpen.value = false
+    selectedShiftId.value = null
+    selectedSectionId.value = null
+    selectedAssignmentIds.value = []
+  }
+
+  function toggleAssignmentSelection(id: string) {
+    const idx = selectedAssignmentIds.value.indexOf(id)
+    if (idx === -1) selectedAssignmentIds.value.push(id)
+    else selectedAssignmentIds.value.splice(idx, 1)
+  }
+
+  function selectAllPending(assignments: ShiftAssignment[]) {
+    selectedAssignmentIds.value = assignments
+      .filter(a => a.status === ShiftAssignmentStatus.PENDING_APPROVAL)
+      .map(a => a.id)
+  }
+
+  function clearSelection() {
+    selectedAssignmentIds.value = []
+  }
+
+  return {
+    isOpen,
+    selectedShiftId,
+    selectedSectionId,
+    selectedAssignmentIds,
+    openPanel,
+    closePanel,
+    toggleAssignmentSelection,
+    selectAllPending,
+    clearSelection,
+  }
+})