Add rank selection and condition handling to certificate designer and requirements

apps/backoffice/src/app/features/certificate-requirements/components/ConditionBuilder.tsx

@@ -1,4 +1,5 @@
-import { Autocomplete, Checkbox, Group, Select, Stack, Switch, Text, TextInput } from '@mantine/core';
+import { ActionIcon, Autocomplete, Checkbox, Group, Paper, Select, Stack, Switch, Text, TextInput } from '@mantine/core';
+import { IconPlus, IconTrash } from '@tabler/icons-react';
 import { useTranslation } from 'react-i18next';
 import type { FieldCondition, FormSchemaPalette } from '@ema-platform/api';
 import { useLocalized } from '@ema-platform/api';
@@ -7,6 +8,9 @@ import type { ConditionTarget } from '../config/schema-paths';
 /** `FieldCondition` plus the renewal-only extra `DocumentRequirement.conditionExpression` carries. */
 export type ConditionValue = FieldCondition & { previousDocExpired?: string };
 
+/** One editable `anyOf` arm — a single-field condition, same shape a plain condition holds. */
+type ConditionArm = Omit<ConditionValue, 'anyOf' | 'previousDocExpired'>;
+
 type Operator = 'equals' | 'notEquals' | 'in' | 'isSet';
 
 function operatorOf(condition: ConditionValue | undefined): Operator | null {
@@ -29,6 +33,196 @@ function coerce(raw: string, targetType: string | undefined): string | number |
   return raw;
 }
 
+/** One-line summary of a condition for read-only chips ("when X = Y", "when X = Y or W = Z"). */
+export function describeCondition(
+  condition: ConditionValue,
+  t: (key: string, fallback: string) => string,
+): string {
+  if (condition.anyOf?.length) {
+    return condition.anyOf.map((arm) => describeCondition(arm, t)).join(` ${t('certReq.condition.or', 'or')} `);
+  }
+  if (!condition.field) return '';
+  const parts = [condition.field];
+  if (condition.equals !== undefined) parts.push(`= ${condition.equals}`);
+  if (condition.notEquals !== undefined) parts.push(`≠ ${condition.notEquals}`);
+  if (condition.in !== undefined) parts.push(`∈ [${condition.in.join(', ')}]`);
+  if (condition.isSet !== undefined) {
+    parts.push(condition.isSet ? t('certReq.condition.isSet', 'is set') : t('certReq.condition.isNotSet', 'is not set'));
+  }
+  return parts.join(' ');
+}
+
+/**
+ * The field/operator/value trio for one condition — a plain condition, or one
+ * arm of an `anyOf`. No enable switch of its own; the caller owns whether
+ * this row exists at all.
+ */
+function ConditionArmFields({
+  value,
+  onChange,
+  targets,
+  palette,
+}: {
+  value: ConditionArm;
+  onChange: (value: ConditionArm) => void;
+  targets: ConditionTarget[];
+  palette: FormSchemaPalette | undefined;
+}) {
+  const { t } = useTranslation();
+  const localized = useLocalized();
+
+  const operator = operatorOf(value) ?? 'equals';
+  const target = targets.find((c) => c.path === value.field);
+  const operators = palette?.conditionOperators ?? ['equals', 'notEquals', 'in', 'isSet'];
+
+  function setField(field: string) {
+    onChange({ field, ...(operator === 'isSet' ? { isSet: true } : { equals: '' }) });
+  }
+
+  function setOperator(next: Operator) {
+    if (!value.field) return;
+    const base: ConditionArm = { field: value.field };
+    if (next === 'isSet') base.isSet = true;
+    else if (next === 'in') base.in = [];
+    else if (next === 'notEquals') base.notEquals = '';
+    else base.equals = '';
+    onChange(base);
+  }
+
+  function setValueRaw(raw: string) {
+    if (!value.field) return;
+    const coerced = coerce(raw, target?.field.type);
+    if (operator === 'equals') onChange({ field: value.field, equals: coerced });
+    else if (operator === 'notEquals') onChange({ field: value.field, notEquals: coerced });
+  }
+
+  function setInValues(raws: string[]) {
+    if (!value.field) return;
+    onChange({
+      field: value.field,
+      in: raws.map((r) => coerce(r, target?.field.type)) as (string | number)[],
+    });
+  }
+
+  return (
+    <Stack gap="xs">
+      <Autocomplete
+        label={t('certReq.condition.field', 'Field path')}
+        placeholder="certificate.rank"
+        description={t(
+          'certReq.condition.fieldHelp',
+          'Dot path into the form, e.g. sectionKey.fieldKey',
+        )}
+        data={targets.map((c) => c.path)}
+        value={value.field ?? ''}
+        onChange={setField}
+      />
+
+      <Group grow align="flex-start">
+        <Select
+          label={t('certReq.condition.operator', 'Operator')}
+          data={operators.map((op) => ({ value: op, label: op }))}
+          value={operator}
+          onChange={(v) => v && setOperator(v as Operator)}
+          allowDeselect={false}
+        />
+
+        {operator !== 'isSet' && operator !== 'in' && target?.field.type === 'SELECT' && (
+          <Select
+            label={t('certReq.condition.value', 'Value')}
+            data={(target.field.options ?? []).map((o) => ({
+              value: o.value,
+              label: localized(o.label) || o.value,
+            }))}
+            value={String(value.equals ?? value.notEquals ?? '')}
+            onChange={(v) => v !== null && setValueRaw(v)}
+          />
+        )}
+
+        {operator !== 'isSet' && operator !== 'in' && target?.field.type !== 'SELECT' && (
+          target?.field.type === 'BOOLEAN' ? (
+            <Checkbox
+              mt="xl"
+              label={t('certReq.condition.value', 'Value')}
+              checked={Boolean(value.equals ?? value.notEquals ?? false)}
+              onChange={(e) => setValueRaw(String(e.currentTarget.checked))}
+            />
+          ) : (
+            <TextInput
+              label={t('certReq.condition.value', 'Value')}
+              type={target?.field.type === 'NUMBER' || target?.field.type === 'MONEY' ? 'number' : 'text'}
+              value={String(value.equals ?? value.notEquals ?? '')}
+              onChange={(e) => setValueRaw(e.currentTarget.value)}
+            />
+          )
+        )}
+
+        {operator === 'in' && target?.field.type === 'SELECT' && (
+          <Select
+            label={t('certReq.condition.values', 'Any of')}
+            data={(target.field.options ?? []).map((o) => ({
+              value: o.value,
+              label: localized(o.label) || o.value,
+            }))}
+            multiple={undefined}
+            value={null}
+            onChange={(v) => {
+              if (!v) return;
+              const current = (value.in ?? []) as string[];
+              if (!current.includes(v)) setInValues([...current, v]);
+            }}
+          />
+        )}
+
+        {operator === 'in' && target?.field.type !== 'SELECT' && (
+          <TextInput
+            label={t('certReq.condition.values', 'Any of (comma-separated)')}
+            value={(value.in ?? []).join(', ')}
+            onChange={(e) =>
+              setInValues(
+                e.currentTarget.value
+                  .split(',')
+                  .map((s) => s.trim())
+                  .filter(Boolean),
+              )
+            }
+          />
+        )}
+      </Group>
+
+      {operator === 'in' && (value.in?.length ?? 0) > 0 && (
+        <Group gap={4}>
+          {(value.in ?? []).map((v, i) => (
+            <Text
+              key={`${v}-${i}`}
+              fz="xs"
+              px={6}
+              py={2}
+              bg="var(--mantine-color-gray-1)"
+              style={{ borderRadius: 4, cursor: 'pointer' }}
+              onClick={() => setInValues((value.in ?? []).filter((_, idx) => idx !== i).map(String))}
+              title={t('certReq.condition.removeValue', 'Click to remove')}
+            >
+              {String(v)} ×
+            </Text>
+          ))}
+        </Group>
+      )}
+
+      {!target && value.field && (
+        <Text fz="xs" c="dimmed">
+          {t(
+            'certReq.condition.unknownField',
+            'This path is not a field in the current schema yet — it will still be saved as typed.',
+          )}
+        </Text>
+      )}
+    </Stack>
+  );
+}
+
+const EMPTY_ARM: ConditionArm = { field: '', equals: '' };
+
 /**
  * Authors one `FieldCondition` (`showWhen` on a section/field, or
  * `conditionExpression` on a document requirement).
@@ -38,6 +232,11 @@ function coerce(raw: string, targetType: string | undefined): string | number |
  * SELECT field, the value picker switches to that field's own options
  * instead of free text — the condition can only ever reference an answer
  * that could actually be chosen.
+ *
+ * "Any of these" switches to authoring several single-field conditions whose
+ * OR is the real condition — needed when the same logical value can live on
+ * one of several mutually-exclusive fields (e.g. a rank split by
+ * department, see FieldCondition.anyOf).
  */
 export function ConditionBuilder({
   value,
@@ -54,40 +253,35 @@ export function ConditionBuilder({
   allowClear?: boolean;
 }) {
   const { t } = useTranslation();
-  const localized = useLocalized();
 
   const active = value !== null;
-  const operator = operatorOf(value ?? undefined) ?? 'equals';
-  const target = targets.find((c) => c.path === value?.field);
-  const operators = palette?.conditionOperators ?? ['equals', 'notEquals', 'in', 'isSet'];
+  const isAnyOf = Boolean(value?.anyOf);
+  const arms = (value?.anyOf ?? []) as ConditionArm[];
 
-  function setField(field: string) {
-    onChange({ field, ...(operator === 'isSet' ? { isSet: true } : { equals: '' }) });
+  function setArm(i: number, arm: ConditionArm) {
+    const next = arms.slice();
+    next[i] = arm;
+    onChange({ anyOf: next });
   }
 
-  function setOperator(next: Operator) {
-    if (!value?.field) return;
-    const base: ConditionValue = { field: value.field };
-    if (next === 'isSet') base.isSet = true;
-    else if (next === 'in') base.in = [];
-    else if (next === 'notEquals') base.notEquals = '';
-    else base.equals = '';
-    onChange(base);
+  function addArm() {
+    onChange({ anyOf: [...arms, { ...EMPTY_ARM }] });
   }
 
-  function setValueRaw(raw: string) {
-    if (!value?.field) return;
-    const coerced = coerce(raw, target?.field.type);
-    if (operator === 'equals') onChange({ field: value.field, equals: coerced });
-    else if (operator === 'notEquals') onChange({ field: value.field, notEquals: coerced });
+  function removeArm(i: number) {
+    onChange({ anyOf: arms.filter((_, idx) => idx !== i) });
   }
 
-  function setInValues(raws: string[]) {
-    if (!value?.field) return;
-    onChange({
-      field: value.field,
-      in: raws.map((r) => coerce(r, target?.field.type)) as (string | number)[],
-    });
+  function toggleAnyOf(next: boolean) {
+    if (next) {
+      // Seed the list from whatever single condition already existed, so
+      // switching modes doesn't discard work in progress.
+      const seed: ConditionArm = value?.field ? (value as ConditionArm) : { ...EMPTY_ARM };
+      onChange({ anyOf: [seed] });
+    } else {
+      // Same, in reverse — the first arm becomes the single condition.
+      onChange((arms[0] as ConditionValue) ?? { field: '', equals: '' });
+    }
   }
 
   return (
@@ -102,116 +296,58 @@ export function ConditionBuilder({
 
       {active && (
         <Stack gap="xs" pl={allowClear ? 'md' : 0}>
-          <Autocomplete
-            label={t('certReq.condition.field', 'Field path')}
-            placeholder="certificate.rank"
-            description={t(
-              'certReq.condition.fieldHelp',
-              'Dot path into the form, e.g. sectionKey.fieldKey',
+          <Switch
+            size="sm"
+            label={t(
+              'certReq.condition.anyOfEnable',
+              'Any of these (the value can live on one of several fields)',
             )}
-            data={targets.map((c) => c.path)}
-            value={value?.field ?? ''}
-            onChange={setField}
+            checked={isAnyOf}
+            onChange={(e) => toggleAnyOf(e.currentTarget.checked)}
           />
 
-          <Group grow align="flex-start">
-            <Select
-              label={t('certReq.condition.operator', 'Operator')}
-              data={operators.map((op) => ({ value: op, label: op }))}
-              value={operator}
-              onChange={(v) => v && setOperator(v as Operator)}
-              allowDeselect={false}
-            />
-
-            {operator !== 'isSet' && operator !== 'in' && target?.field.type === 'SELECT' && (
-              <Select
-                label={t('certReq.condition.value', 'Value')}
-                data={(target.field.options ?? []).map((o) => ({
-                  value: o.value,
-                  label: localized(o.label) || o.value,
-                }))}
-                value={String(value?.equals ?? value?.notEquals ?? '')}
-                onChange={(v) => v !== null && setValueRaw(v)}
-              />
-            )}
-
-            {operator !== 'isSet' && operator !== 'in' && target?.field.type !== 'SELECT' && (
-              target?.field.type === 'BOOLEAN' ? (
-                <Checkbox
-                  mt="xl"
-                  label={t('certReq.condition.value', 'Value')}
-                  checked={Boolean(value?.equals ?? value?.notEquals ?? false)}
-                  onChange={(e) => setValueRaw(String(e.currentTarget.checked))}
-                />
-              ) : (
-                <TextInput
-                  label={t('certReq.condition.value', 'Value')}
-                  type={target?.field.type === 'NUMBER' || target?.field.type === 'MONEY' ? 'number' : 'text'}
-                  value={String(value?.equals ?? value?.notEquals ?? '')}
-                  onChange={(e) => setValueRaw(e.currentTarget.value)}
-                />
-              )
-            )}
-
-            {operator === 'in' && target?.field.type === 'SELECT' && (
-              <Select
-                label={t('certReq.condition.values', 'Any of')}
-                data={(target.field.options ?? []).map((o) => ({
-                  value: o.value,
-                  label: localized(o.label) || o.value,
-                }))}
-                multiple={undefined}
-                value={null}
-                onChange={(v) => {
-                  if (!v) return;
-                  const current = (value?.in ?? []) as string[];
-                  if (!current.includes(v)) setInValues([...current, v]);
-                }}
-              />
-            )}
-
-            {operator === 'in' && target?.field.type !== 'SELECT' && (
-              <TextInput
-                label={t('certReq.condition.values', 'Any of (comma-separated)')}
-                value={(value?.in ?? []).join(', ')}
-                onChange={(e) =>
-                  setInValues(
-                    e.currentTarget.value
-                      .split(',')
-                      .map((s) => s.trim())
-                      .filter(Boolean),
-                  )
-                }
-              />
-            )}
-          </Group>
-
-          {operator === 'in' && (value?.in?.length ?? 0) > 0 && (
-            <Group gap={4}>
-              {(value?.in ?? []).map((v, i) => (
-                <Text
-                  key={`${v}-${i}`}
-                  fz="xs"
-                  px={6}
-                  py={2}
-                  bg="var(--mantine-color-gray-1)"
-                  style={{ borderRadius: 4, cursor: 'pointer' }}
-                  onClick={() => setInValues((value?.in ?? []).filter((_, idx) => idx !== i).map(String))}
-                  title={t('certReq.condition.removeValue', 'Click to remove')}
-                >
-                  {String(v)} ×
-                </Text>
+          {isAnyOf ? (
+            <Stack gap="sm">
+              {arms.map((arm, i) => (
+                <Paper key={i} withBorder p="sm" radius="sm">
+                  <Group justify="space-between" mb="xs">
+                    <Text fz="xs" fw={600} c="dimmed">
+                      {t('certReq.condition.anyOfArm', 'Condition {{n}}', { n: i + 1 })}
+                    </Text>
+                    <ActionIcon
+                      variant="subtle"
+                      color="red"
+                      size="sm"
+                      disabled={arms.length <= 1}
+                      onClick={() => removeArm(i)}
+                    >
+                      <IconTrash size={14} />
+                    </ActionIcon>
+                  </Group>
+                  <ConditionArmFields
+                    value={arm}
+                    onChange={(next) => setArm(i, next)}
+                    targets={targets}
+                    palette={palette}
+                  />
+                </Paper>
               ))}
-            </Group>
-          )}
-
-          {!target && value?.field && (
-            <Text fz="xs" c="dimmed">
-              {t(
-                'certReq.condition.unknownField',
-                'This path is not a field in the current schema yet — it will still be saved as typed.',
-              )}
-            </Text>
+              <Group>
+                <ActionIcon variant="light" onClick={addArm}>
+                  <IconPlus size={16} />
+                </ActionIcon>
+                <Text fz="xs" c="dimmed">
+                  {t('certReq.condition.anyOfAdd', 'Add another field')}
+                </Text>
+              </Group>
+            </Stack>
+          ) : (
+            <ConditionArmFields
+              value={value as ConditionArm}
+              onChange={(next) => onChange(next)}
+              targets={targets}
+              palette={palette}
+            />
           )}
         </Stack>
       )}

apps/backoffice/src/app/features/certificate-requirements/components/DocumentRequirementEditorDrawer.tsx

@@ -94,7 +94,10 @@ export function DocumentRequirementEditorDrawer({
       return;
     }
     if (!draft.name.en?.trim()) return;
-    if (draft.mode === 'CONDITIONAL' && !draft.conditionExpression?.field) {
+    const hasCondition =
+      Boolean(draft.conditionExpression?.field) ||
+      Boolean(draft.conditionExpression?.anyOf?.length);
+    if (draft.mode === 'CONDITIONAL' && !hasCondition) {
       setKeyError(t('certReq.doc.conditionRequired', 'A conditional requirement needs a condition'));
       return;
     }

apps/backoffice/src/app/features/certificate-requirements/components/DocumentRequirementsTab.tsx

@@ -17,6 +17,7 @@ import {
 } from '@ema-platform/api';
 import { collectConditionTargets } from '../config/schema-paths';
 import { useRequirementActions } from '../hooks/useRequirementActions';
+import { describeCondition } from './ConditionBuilder';
 import { DocumentRequirementEditorDrawer } from './DocumentRequirementEditorDrawer';
 
 const KINDS: ApplicationKind[] = ['NEW', 'RENEWAL'];
@@ -137,13 +138,9 @@ export function DocumentRequirementsTab({ licenseType }: { licenseType: LicenseT
                         <Text fz="xs" c="dimmed" truncate>
                           key: {req.key} · {req.maxSizeMb}MB · {req.allowedMimeTypes.join(', ')}
                         </Text>
-                        {req.mode === 'CONDITIONAL' && req.conditionExpression?.field && (
+                        {req.mode === 'CONDITIONAL' && req.conditionExpression && (
                           <Text fz="xs" c="violet">
-                            {t('certReq.doc.when', 'when')} {req.conditionExpression.field}{' '}
-                            {req.conditionExpression.equals !== undefined && `= ${req.conditionExpression.equals}`}
-                            {req.conditionExpression.notEquals !== undefined && `≠ ${req.conditionExpression.notEquals}`}
-                            {req.conditionExpression.in !== undefined && `∈ [${req.conditionExpression.in.join(', ')}]`}
-                            {req.conditionExpression.isSet !== undefined && (req.conditionExpression.isSet ? t('certReq.condition.isSet', 'is set') : t('certReq.condition.isNotSet', 'is not set'))}
+                            {t('certReq.doc.when', 'when')} {describeCondition(req.conditionExpression, t)}
                           </Text>
                         )}
                       </div>