Also improves how buttons are shown with the missing files.

resources/js/Components/QuestionCard.vue

@@ -1,5 +1,6 @@
 <script setup>
 import { computed } from 'vue'
+import RadioButtonGroup from '@/Components/RadioButtonGroup.vue'
 
 const props = defineProps({
   question: {
@@ -39,6 +40,14 @@ const isTextOnly = computed(() => {
   return !hasRadioButtons.value && props.question.details
 })
 
+const availableOptions = computed(() => {
+  const opts = []
+  if (props.question.has_yes) opts.push({ value: 'yes', label: 'Yes' })
+  if (props.question.has_no) opts.push({ value: 'no', label: 'No' })
+  if (props.question.has_na) opts.push({ value: 'not_applicable', label: 'N/A' })
+  return opts
+})
+
 const updateValue = (value) => {
   emit('update:modelValue', { ...props.modelValue, value })
 }
@@ -65,41 +74,13 @@ const updateTextValue = (event) => {
 
         <!-- Radio button question -->
         <div v-if="hasRadioButtons">
-            <div class="flex flex-wrap gap-4 mb-3">
-                <label v-if="question.has_yes" class="flex items-center gap-2 cursor-pointer">
-                    <input
-                        type="radio"
-                        :name="`question-${question.id}`"
-                        value="yes"
-                        :checked="modelValue.value === 'yes'"
-                        @change="updateValue('yes')"
-                        class="w-4 h-4 text-primary bg-surface border-gray-600 focus:ring-primary focus:ring-offset-surface"
-                    />
-                    <span class="text-white">Yes</span>
-                </label>
-                <label v-if="question.has_no" class="flex items-center gap-2 cursor-pointer">
-                    <input
-                        type="radio"
-                        :name="`question-${question.id}`"
-                        value="no"
-                        :checked="modelValue.value === 'no'"
-                        @change="updateValue('no')"
-                        class="w-4 h-4 text-primary bg-surface border-gray-600 focus:ring-primary focus:ring-offset-surface"
-                    />
-                    <span class="text-white">No</span>
-                </label>
-                <label v-if="question.has_na" class="flex items-center gap-2 cursor-pointer">
-                    <input
-                        type="radio"
-                        :name="`question-${question.id}`"
-                        value="not_applicable"
-                        :checked="modelValue.value === 'not_applicable'"
-                        @change="updateValue('not_applicable')"
-                        class="w-4 h-4 text-primary bg-surface border-gray-600 focus:ring-primary focus:ring-offset-surface"
-                    />
-                    <span class="text-white">N/A</span>
-                </label>
-            </div>
+            <RadioButtonGroup
+                :modelValue="modelValue.value"
+                @update:modelValue="updateValue($event)"
+                :name="`question-${question.id}`"
+                :options="availableOptions"
+                class="mb-3"
+            />
 
             <!-- Details textarea (conditional) -->
             <div v-if="showDetails" class="mt-2">