Update

apps/admin/src/resources/questions.tsx

@@ -1,4 +1,64 @@
-import { List, Datagrid, TextField, ReferenceField, NumberField, EditButton, Create, SimpleForm, TextInput, NumberInput, ReferenceInput, SelectInput, Edit } from 'react-admin';
+import {
+    List,
+    Datagrid,
+    TextField,
+    ReferenceField,
+    NumberField,
+    EditButton,
+    Create,
+    SimpleForm,
+    TextInput,
+    NumberInput,
+    ReferenceInput,
+    SelectInput,
+    Edit,
+    CheckboxGroupInput,
+    ArrayField,
+    ChipField,
+    SingleFieldList,
+    BooleanField,
+    FunctionField,
+} from 'react-admin';
+import { Typography, Box, Chip, Tooltip, IconButton } from '@mui/material';
+import HelpOutlineIcon from '@mui/icons-material/HelpOutline';
+
+const COUPLE_GENDER_CHOICES = [
+    { id: 'male+female', name: 'Male + Female' },
+    { id: 'male+male', name: 'Male + Male' },
+    { id: 'female+female', name: 'Female + Female' },
+];
+
+const TARGET_USER_GENDER_CHOICES = [
+    { id: 'male', name: 'Male' },
+    { id: 'female', name: 'Female' },
+    { id: 'non-binary', name: 'Non-binary' },
+    { id: 'prefer-not-to-say', name: 'Prefer not to say' },
+];
+
+const LabelWithTooltip = ({ label, tooltip }: { label: string; tooltip: string }) => (
+    <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
+        <Typography component="span">{label}</Typography>
+        <Tooltip title={tooltip} arrow placement="right">
+            <IconButton size="small" sx={{ p: 0.25 }}>
+                <HelpOutlineIcon sx={{ fontSize: 16, color: 'text.secondary' }} />
+            </IconButton>
+        </Tooltip>
+    </Box>
+);
+
+const GenderChips = ({ record, source }: { record?: any; source: string }) => {
+    const values = record?.[source];
+    if (!values || values.length === 0) {
+        return <Chip label="All" size="small" variant="outlined" />;
+    }
+    return (
+        <Box sx={{ display: 'flex', gap: 0.5, flexWrap: 'wrap' }}>
+            {values.map((v: string) => (
+                <Chip key={v} label={v} size="small" />
+            ))}
+        </Box>
+    );
+};
 
 export const QuestionList = () => (
     <List>
@@ -8,31 +68,85 @@ export const QuestionList = () => (
                 <TextField source="name" />
             </ReferenceField>
             <NumberField source="intensity" />
+            <FunctionField
+                label="Two-part"
+                render={(record: any) => record?.partner_text ? 'Yes' : 'No'}
+            />
+            <FunctionField
+                label="Target Users"
+                render={(record: any) => {
+                    const values = record?.target_user_genders;
+                    if (!values || values.length === 0) return 'All';
+                    return values.join(', ');
+                }}
+            />
             <EditButton />
         </Datagrid>
     </List>
 );
 
+const QuestionForm = () => (
+    <SimpleForm>
+        <ReferenceInput source="pack_id" reference="question_packs">
+            <SelectInput optionText="name" />
+        </ReferenceInput>
+
+        <Typography variant="subtitle2" sx={{ mt: 2, mb: 1 }}>
+            Question Text
+        </Typography>
+        <TextInput
+            source="text"
+            multiline
+            fullWidth
+            helperText="Primary text shown to the initiator (first person to see this question)"
+        />
+        <TextInput
+            source="partner_text"
+            multiline
+            fullWidth
+            helperText="Optional: Text shown to the partner after the initiator has answered. Leave blank for single-text questions."
+        />
+
+        <NumberInput source="intensity" min={1} max={5} />
+
+        <Typography variant="subtitle2" sx={{ mt: 3, mb: 1 }}>
+            Targeting
+        </Typography>
+
+        <CheckboxGroupInput
+            source="target_user_genders"
+            label={
+                <LabelWithTooltip
+                    label="Show to (as initiator)"
+                    tooltip="The 'initiator' is the first person in the couple to see and answer a question. This filter controls which genders can be the initiator. Their partner will always see the question after the initiator answers, regardless of this setting."
+                />
+            }
+            choices={TARGET_USER_GENDER_CHOICES}
+            helperText="Leave empty to show to all genders as initiator."
+        />
+
+        <CheckboxGroupInput
+            source="allowed_couple_genders"
+            label={
+                <LabelWithTooltip
+                    label="Couple types"
+                    tooltip="Filters which couple compositions can see this question. A 'male+female' couple has one male and one female partner. This ensures questions are only shown to couples where the content is relevant to their relationship dynamic."
+                />
+            }
+            choices={COUPLE_GENDER_CHOICES}
+            helperText="Leave empty to show to all couple types."
+        />
+    </SimpleForm>
+);
+
 export const QuestionEdit = () => (
     <Edit>
-        <SimpleForm>
-            <ReferenceInput source="pack_id" reference="question_packs">
-                <SelectInput optionText="name" />
-            </ReferenceInput>
-            <TextInput source="text" multiline fullWidth />
-            <NumberInput source="intensity" min={1} max={5} />
-        </SimpleForm>
+        <QuestionForm />
     </Edit>
 );
 
 export const QuestionCreate = () => (
     <Create>
-        <SimpleForm>
-            <ReferenceInput source="pack_id" reference="question_packs">
-                <SelectInput optionText="name" />
-            </ReferenceInput>
-            <TextInput source="text" multiline fullWidth />
-            <NumberInput source="intensity" min={1} max={5} />
-        </SimpleForm>
+        <QuestionForm />
     </Create>
 );